Health Compass
Painel profissional de acompanhamento nutricional
Logo
Três hexágonos idênticos, girados 120 graus em torno de um centro. Cada um perde uma face do cubo e vira um L. Juntos, formam um hexágono maior dividido em cata-vento. O desenho é fixo: use sempre os arquivos oficiais.
Duas montagens, sem hierarquia entre elas: escolha pelo espaço disponível. Horizontal para faixas largas (cabeçalho, rodapé, assinatura); empilhado para espaços quadrados (capa, tela de abertura).
Cores
O produto tem dois temas; o escuro é o padrão. Todos os pares já passam em contraste WCAG AA: não clareie nem escureça os valores.
Verde é ação primária ou estado ativo. Nunca decoração de seção: ícones e títulos de seção são neutros.
0% nunca é verde de sucesso. 0 (contagem) nunca é vermelho de perigo. Zero é neutro.
Tipografia
Hanken Grotesk para texto, interface e títulos. JetBrains Mono para números, métricas e dados.
Iconografia
Traço linear de 2px, pontas arredondadas. Cor neutra por padrão; verde só quando o ícone é ação ou estado ativo.
Produto
O painel profissional, construído com os tokens acima. Dentro do produto, a pessoa acompanhada é sempre Cliente.
Toda página do painel abre com o mesmo cabeçalho. É o único lugar do produto onde o verde aparece em texto de título.
Whitelabel
A regra mais distinta desta marca: o app do Cliente veste a marca do nutricionista, não a do Health Compass. O verde Health Compass nunca aparece no app do Cliente.
Cada estilo muda a família tipográfica e a personalidade do app. A cor de destaque é sempre a da marca do nutricionista.
Voz e tom
Plataforma de acompanhamento contínuo entre consultas. Complementa o que o nutricionista já usa.
Componentes de UI
Painel profissional de acompanhamento nutricional