GlukoScope
/
Design System
DESIGN SYSTEM · V1
Clareza que acolhe.
Uma linguagem visual viva para transformar dados complexos em experiências calmas, humanas e explicáveis.
Esta página usa os componentes e tokens reais do produto.
Tema da interface
Idioma da documentação
01
Fundamentos
Decisões essenciais que mantêm a experiência consistente em web, iOS e Android.
Cores semânticas
A cor comunica função. Estados de glicose nunca dependem somente da cor e não classificam resultados como bons ou ruins.
background
colors.background
card
colors.card
foreground
colors.foreground
primary
colors.primary
primarySoft
colors.primarySoft
muted
colors.muted
border
colors.border
●
Na faixa
↓
Abaixo
↑
Acima
–
Dados insuficientes
Tipografia
Hierarquia forte, frases curtas e números fáceis de escanear.
Display
Título de seção
Texto de interface para orientar sem sobrecarregar.
RÓTULO CONTEXTUAL
112 mg/dL
Espaço e forma
Ritmo de 4 pontos, superfícies generosas e cantos suaves.
Pequeno
radius.sm · 10
Médio
radius.md · 14
Grande
radius.lg · 18
Extra grande
radius.xl · 24
Completo
radius.full · 999
02
Componentes
Peças interativas reais, exibidas em seus principais estados.
Botões
Campos e seleção
Nome do marcador
Selecionado
Não selecionado
Superfícies
Card padrão
Agrupa conteúdo relacionado sem criar uma caixa pesada.
Card em destaque
Usado com moderação para uma mensagem ou ação prioritária.
Estados e feedback
●
Na faixa
token · inRange
↓
Abaixo
token · below
↑
Acima
token · above
–
Dados insuficientes
token · insufficient
03
Gluko
O companheiro visual traduz o estado da interface com empatia. Ele apoia a compreensão, nunca diagnostica ou julga.
Equilíbrio
happy
Aproximação
improving
Leitura baixa
low
Leitura alta
high
Afastamento
worsening
04
Visualização de dados
Gráficos e mapas priorizam evidência, contexto, alternativa textual e leitura além da cor.
Faixa e tendência
Exemplo textual: cinco pontos, dois na faixa, um abaixo e dois acima.
Densidade por período
●
Na faixa
↓
Abaixo
↑
Acima
–
Dados insuficientes
05
Temas de compartilhamento
Paletas editoriais para Resumo semanal e Recap mensal. Não alteram o tema do aplicativo.
Claro
Escuro
Menta
Pôr do sol
Oceano
Pride
06
Princípios de experiência
Regras que orientam novas telas e decisões de produto.
Calmo, não frio
Reduza ruído visual sem apagar a personalidade do GlukoScope.
Explique a evidência
Mostre período, cobertura e origem antes de qualquer interpretação.
Informe, não prescreva
Sem diagnóstico, causalidade, previsão ou recomendação terapêutica.
Acessível por padrão
Contraste, foco, toque confortável, texto alternativo e redução de movimento.
07
Uso da marca
O GlukoScope combina precisão de produto de saúde com uma presença amigável.
FAÇA
Use linguagem direta, evidência visível, espaço respirável e estados semânticos.
EVITE
Não use alarmismo, ranking clínico, jargão sem explicação ou cor como único sinal.
Checklist de acessibilidade
Contraste legível em claro e escuro
Áreas de toque com pelo menos 44×44
Movimento opcional e redução respeitada
Símbolos e texto além das cores
Conteúdo em português, inglês e espanhol
Design System público do GlukoScope
Documentação viva · componentes reais · atualizado junto com o produto
Voltar ao GlukoScope →