Documento de orientação criativa para o Designer Flávio Brum — plataforma gamificada de gestão de saúde pública no ecossistema SyvTek.
Plataforma SaaS de gestão gamificada da saúde pública municipal, voltada para Atenção Básica (SUS). Com apoio do HUB RJ 2025, FAPERJ, SECTI-RJ e Tec Incubadora.
Antes de qualquer pixel, é preciso compreender o caráter da marca. A identidade visual deve ser uma consequência fiel dessa personalidade.
"Transformamos dados de saúde pública em missões que engajam cidadãos, capacitam agentes comunitários e fortalecem gestores municipais — com a precisão da IA e a energia do jogo."
Gamificar a saúde pública brasileira para reduzir desigualdades e aumentar a adesão preventiva nas comunidades atendidas pelo SUS.
Ser a plataforma de referência em engajamento de saúde comunitária para municípios brasileiros até 2028, com expansão regional.
Impacto social genuíno · Transparência de dados · Acessibilidade radical · Inovação responsável · Colaboração comunitária
A marca acredita que qualquer pessoa pode ser protagonista da própria saúde. Linguagem motivadora, superação, conquistas visíveis. Não sermona — celebra.
A IA (AURA) traz inteligência invisível que antecipa riscos. Tecnologia que parece quase mágica — mas sempre a serviço das pessoas, nunca intimidadora.
A FitQuestGo ocupa um espaço único: rigor clínico + leveza gamificada. Não é um app de fitness, não é um sistema governamental cinza.
A identidade visual deve ser acessível e motivadora para três personas com perfis muito distintos. O design precisa funcionar para todas.
Morador de periferia urbana ou município pequeno, 25–55 anos, celular Android de entrada, baixo letramento digital. Motivado por recompensas (vouchers, XP) e senso de pertencimento comunitário. Nunca pode sentir que é um sistema de controle. Precisa sentir conquista.
Profissional de saúde de nível médio, 28–45 anos, sobrecarregado, alta pressão por metas. Usa o app no campo durante visitas domiciliares. Precisa de interfaces rápidas, claras, com pouca digitação. Alertas AURA devem ser visualmente urgentes mas não ansiogênicos.
Secretário municipal de saúde ou coordenador de Atenção Básica, 35–60 anos, pressionado por resultados do Previne Brasil. Quer relatórios, mapas e KPIs. O design deve transmitir credibilidade técnica e clareza analítica.
Criar um sistema visual simultaneamente lúdico para engajar o cidadão, profissional para convencer a secretaria, e funcional para não atrapalhar o ACS em campo. Isso exige hierarquia visual muito bem calibrada por contexto de uso.
A identidade deve equilibrar dois mundos: a precisão da saúde clínica e a energia motivacional do game design. Sem cair no clichê de nenhum dos dois.
A marca existe na intersecção entre mapa (territorialidade), missão (propósito) e movimento (gamificação). O logo e o sistema visual devem evocar trajetória, progresso e pertencimento — sem parecer um videogame infantil.
Confiante mas acessível. Tecnológico mas humano. Científico mas motivador. Evitar: gradientes genéricos de healthtech, ícones hospitalares frios, estética gaming excessivamente adolescente.
O logo deve ter um símbolo (ícone) independente e um wordmark. O símbolo sozinho deve funcionar como app icon, favicon e elemento de comunicação visual em cards.
Explorar a ideia de pin/marcador de localização + trajetória de movimento + símbolo de progresso. Marcador geográfico estilizado que também lembra cursor, coração ou estrela de destino. Evitar cruzes médicas e troféus genéricos.
Formas que remetam a movimento — curvas dinâmicas, diagonais, vetores. O símbolo deve "querer ir para algum lugar". Evitar formas 100% simétricas e sem tensão visual.
Principal (fundo claro) · Invertido (fundo escuro/navy) · Monocromático (preto) · Sobre teal · App icon 512×512px · Favicon 32×32px · Versão horizontal e vertical.
Área de respiro equivalente à altura da letra "F" de FitQuestGo. Mínimo: 120px digital / 30mm impresso. App icon: nunca abaixo de 32px.
AURA é um produto dentro do FitQuestGo e merece expressão visual própria — conectada à marca-mãe, mas com personalidade distinta.
Visual etéreo, quase holográfico. Formas de ondas, gradientes suaves, partículas. Sensação de inteligência observando silenciosamente. Não deve parecer um chatbot genérico — deve parecer um oráculo clínico.
Derivada do teal (#12C0A6) com adição de índigo profundo (#4F46E5) e branco translúcido. Efeitos de glow suaves. Animações de "pulso" em contextos digitais.
A tipografia é a voz silenciosa da marca. O sistema deve funcionar em português brasileiro, com caracteres especiais (ã, ç, ê, etc.) perfeitamente renderizados.
Sua Saúde é
uma Missão.
Uso: Títulos de seção, hero text no app, banners de campanha, splash screens.
Complete sua missão de hidratação de hoje e ganhe 50 XP. Seu Agente Comunitário será notificado automaticamente quando você registrar 3 dias consecutivos de atividade.
Uso: Corpo de texto no app, notificações WhatsApp, cards de missão, relatórios.
ISF: 87.3% · FQI: 0.74 · Missões: 128/200
Uso: Indicadores numéricos, KPIs nos dashboards, dados SISAB, rankings.
Display: 48–64px
H1: 32–40px
H2: 24–28px
H3: 18–20px
Body: 14–16px
Caption: 11–12px
Nunca usar mais de 2 famílias por tela. ALL CAPS apenas em labels curtos (<4 palavras). Nunca body em ALL CAPS. Line-height mínimo 1.5.
A paleta existente (azul clínico + teal) está validada. O trabalho é sistematizá-la, expandir com tokens semânticos e criar variações para modo escuro.
O manual deve mapear: --color-primary, --color-success, --color-warning, --color-danger, --color-xp, --color-aura. Cada token com variante light e dark. Garante consistência no app React Native e na landing page.
Navy + Teal como CTA principal · Blue sobre Ice · Gold sobre Navy · Branco sobre Blue ≥AA WCAG
Teal sobre branco (verificar contraste) · Orange sobre Blue (uso só em alertas) · Purple + Blue juntos
Verde sobre azul sem separação · Cinza sobre Ice Blue · Múltiplos acentos na mesma tela · Gradiente purple-azul
Todos os entregáveis organizados por prioridade e fase. Prioridade 1 é necessária para o pitch HUB RJ e lançamento do produto.
| Entregável | Descrição | Formato | Prior. |
|---|---|---|---|
| Identidade Core | |||
| Logo FitQuestGo | Símbolo + Wordmark. Versões: principal, invertida, mono, sobre teal | AI / SVG / PNG | P1 |
| Logo AURA | Sub-identidade da IA. Símbolo autônomo + lockup AURA | AI / SVG / PNG | P1 |
| Manual de Marca | Logo, cores, tipografia, usos correto/incorreto, aplicações | PDF interativo | P1 |
| App Icon | 512×512px iOS e Android com variações de fundo | PNG / SVG | P1 |
| Favicon + OG Image | 32×32 favicon, 1200×630 Open Graph para landing | ICO / PNG | P1 |
| App Mobile (iOS + Android) | |||
| Design System / UI Kit | Botões, cards, inputs, badges, alertas, modais, tabs, nav | Figma | P1 |
| Onboarding (3 telas) | Splash, seleção de perfil (Cidadão/ACS/Gestor), permissões | Figma | P1 |
| Home Cidadão | Dashboard de missões, XP, ranking, alertas de saúde | Figma | P1 |
| Home ACS | Lista de visitas, alertas AURA, validação, mapa de microárea | Figma | P1 |
| Tela de Missões | Lista de missões ativas, concluídas, XP, progresso | Figma | P1 |
| Painel Gestor | Dashboard territorial, ISF/Previne Brasil, FQI, relatórios | Figma | P2 |
| Tela AURA Chat | Interface do chatbot AURA, alertas de risco, histórico | Figma | P2 |
| Perfil & Conquistas | Avatar, nível, badges, histórico de missões, vouchers | Figma | P2 |
| Empty States / Loading | Padrões visuais para estados vazios, erro, sucesso | Figma | P2 |
| Sistema de Gamificação | |||
| Cards de Missão | Template com título, XP, prazo, dificuldade, status | Figma / SVG | P1 |
| Badges / Conquistas | Set 20+ ícones: saúde, comunidade, missão, urgência | SVG / PNG | P2 |
| Cards de Voucher | Voucher digital (parceiro, valor, QR code, validade) | Figma / SVG | P2 |
| Ranking / Leaderboard | Visual de posições, coroas, animações de subida de nível | Figma | P2 |
| Mascote / Avatar | Avatar estilizado representando saúde ativa na comunidade | SVG animado | P3 |
| Comunicação & Marketing | |||
| Templates WhatsApp | Cabeçalhos de mensagem, cards de notificação, HSM | PNG / Figma | P1 |
| Apresentação Institucional | Template PPTX com identidade FQG para pitches | PPTX / Keynote | P1 |
| Materiais de UBS | Cartaz A3, folder A4 para ACS, banner rollup institucional | PDF / AI | P2 |
| Social Media Kit | Templates para LinkedIn, Instagram: posts, stories, capas | Figma / Canva | P3 |
| E-mail Marketing | Template HTML para newsletters e relatórios de impacto | HTML / Figma | P3 |
Especificações técnicas e criativas para garantir que o app seja funcional, acessível e visualmente coerente com a marca.
Base de 8px para todo o sistema. Margem lateral: 16px (mobile) / 24px (tablet). Cards com border-radius 12–16px. Botões altura mínima 48px (touch target WCAG).
Contraste mínimo 4.5:1 para texto normal (WCAG AA). Ícones sempre com label textual. Suporte a Dynamic Type (iOS) e tamanhos de fonte do sistema (Android).
Navy (#0A1F44) como background primário. Superfícies em #112055. Textos em #E8EFFE. Cores de acento permanecem iguais — teal e gold ficam excelentes no escuro.
Design em Figma com frames iPhone 14 Pro (390×844) como primário. Variações para Android (360×800). Componentes respeitando as convenções de cada plataforma.
Barra de progresso animada com gradiente teal→blue. Números grandes, celebração visual ao subir de nível. O elemento mais motivador da interface.
Card de alerta com borda vermelha pulsante, ícone de IA distinto, severidade visual (leve/moderado/crítico). Nunca deve ser ignorável sem ação.
Marcador no mapa: disponível (azul), em progresso (teal), concluída (gold), expirada (cinza). Clusters quando há muitos pontos.
Estilo de mapa neutro (light) com overlay de dados FQG. Layers toggleáveis. Heatmap de risco em gradiente teal→red.
Balões de conversa com identidade AURA (roxo suave, ícone de onda). Mensagens do sistema vs. IA visualmente diferenciadas. Loading com "thinking".
Ícone hexagonal (remete a colmeia/comunidade). Estados: bloqueado (outline cinza), desbloqueado (colorido), raro (animação dourada).
Organizar em: 🎨 Foundations (cores, tipografia, grid, ícones) → 🧩 Components (átomos, moléculas, organismos) → 📱 Screens (frames por persona e fluxo) → 📖 Prototype (fluxos navegáveis). Usar Auto Layout em todos os componentes. Variáveis de cor para modo escuro nativo no Figma.
Tom de voz visual é a soma de escolhas estéticas que criam uma "sensação" consistente. Deve guiar cada decisão de design.
"Você completou 3 missões esta semana!" — nunca "Tente cuidar mais da sua saúde."
Dados reais (ISF, FQI) apresentados com clareza visual — sem parecer planilha do governo.
Referências visuais que ressoam com a realidade do SUS, do ACS de campo, da comunidade periférica.
Alertas de saúde com clareza e caminho de resolução — nunca como alarme de pânico.
Sem corpos perfeitos, sem estética "academia". O público é a comunidade, não influenciadores wellness.
Sem azul DATASUS, sem tabelas sem alma, sem fontes Times New Roman, sem PDFs do SIGTAP.
Gamificação sofisticada, não infantilizada. Sem personagens tipo Clash of Clans, sem fontes 8-bit.
Sem Inter weight 400 o tempo todo, sem ilustrações Undraw, sem roxo #6366F1 genérico.
Não para copiar — para entender o registro visual desejado:
Duolingo (engajamento sem infantilizar), Nike Run Club (motivação atlética), Headspace (bem-estar sofisticado)
Mapbox GL (mapas densos), Bloomberg Graphics (dados elegantes), dashboards de healthtech no Figma Community
Nubank (fintech que não parece gringo), iFood (ícones claros para Android de entrada), Quinto Andar (confiança + leveza)
Proposta de cronograma em sprints. Ajustar com o Designer Flávio conforme disponibilidade e complexidade de cada entrega.
Logo FitQuestGo (todas as versões) · Logo AURA · App Icon · Favicon · Paleta de cores sistematizada · Definição tipográfica · Brand Guide v1.0 (PDF)
UI Kit Figma completo · Design Tokens · Componentes base (botões, cards, inputs, badges) · Onboarding · Home Cidadão · Home ACS · Cards de Missão · Templates WhatsApp
Todas as telas do app (modo claro e escuro) · Painel Gestor · Tela AURA · Perfil/Conquistas · Badges set completo · Materiais de UBS · Template PPTX institucional
Protótipo navegável Figma · Social Media Kit · Vouchers digitais · Ajustes de handoff para desenvolvimento · Documentação de implementação
Figma (arquivo principal com acesso de editor) + Google Drive ou Notion para assets exportados. Nomenclatura: FQG_[componente]_[variação]_v[n]
3 rodadas de revisão por sprint. Feedbacks via comentários no Figma. Aprovação formal (screenshot ou mensagem escrita) antes de avançar.
Assets SVG exportados, Design Tokens em JSON (compatível com React Native), guia de implementação por componente, spec de animações em Lottie onde aplicável.
André Vinhosa — SyvTek / FitQuestGo · play@fitquestgo.com.br · Decisão final sempre com André. Para dúvidas técnicas de integração, consultar o repositório do projeto. Aprovações de logo e manual devem ser feitas antes do próximo pitch ao HUB RJ.