Guia da marca · v1
OdontoAtivo
Odontologia e dinheiro crescendo, com acabamento de private banking. Um dente sólido com uma linha de crescimento que sobe, recua e volta a subir, terminando no ponto verde-menta: o "dado de hoje" num gráfico financeiro.
Versões do logo
Use a versão colorida sempre que possível. Sobre fundos escuros, use o símbolo invertido com o wordmark em off-white. As versões em uma cor são para carimbo, gravação, bordado e impressão com uma tinta só. Nelas, "Ativo" se destaca só pelo peso, na mesma cor de "Odonto".
Ícones e tamanho mínimo
Abaixo de 48 px, use a versão simplificada (favicon): sem o ponto final, com a linha mais grossa e o dente levemente maior, para continuar legível. O ícone de app tem fundo inteiro (o sistema arredonda) e o desenho dentro da área segura.
16 px
32 px
64 px
App (180/512)- Símbolo completo: mínimo de 48 px na tela ou 10 mm impresso.
- Logo horizontal: mínimo de 24 px de altura na tela ou 8 mm impresso.
- Favicon simplificado: de 16 a 47 px.
Área de proteção
Deixe livre, em volta do logo, um espaço igual a um quarto da altura do símbolo (no desenho abaixo, a faixa hachurada). Nenhum texto, borda ou imagem deve entrar nessa área.
Paleta
O verde profundo é a cor da marca. O off-white é o papel. O verde-menta é o destaque pontual: o ponto do logo, os números do diagnóstico, detalhes. Ele nunca vai em texto pequeno sobre fundo claro.
#0B3B33 · RGB 11 59 51Marca, títulos, botão principal, fundos de destaque.
#F4F1EA · RGB 244 241 234Fundo do site e texto sobre o escuro.
#2FD4A7 · RGB 47 212 167Destaque: ponto do logo, números, botão sobre escuro.
#0D9B78 · RGB 13 155 120Só em gráficos e ícones grandes. Não usar com texto.
#13231FTexto corrido.
#55645FTexto secundário.
#EBE6DA · bordas #DDD6C8Faixas alternadas e divisórias.
#FBEEDD + #8A4209Avisos. Erro de formulário:
#B42318.Contraste (WCAG AA)
| Exemplo | Combinação | Contraste | Resultado |
|---|---|---|---|
| Título | Verde profundo sobre off-white | 11,03:1 | Passa |
| Texto | Tinta sobre off-white | 14,46:1 | Passa |
| Secundário | Cinza-verde sobre off-white | 5,52:1 | Passa |
| Sobretítulo | Verde de texto #08735A sobre off-white | 5,16:1 | Passa |
| Botão | Off-white sobre verde profundo | 11,03:1 | Passa |
| R$ 6.000 | Menta sobre verde profundo | 6,58:1 | Passa |
| Botão | Verde profundo sobre menta | 6,58:1 | Passa |
| Secundário | Cinza claro #B6C4BE sobre verde profundo | 6,89:1 | Passa |
| Alerta | Alerta suave | 6,42:1 | Passa |
| Branco sobre verde do sistema | 3,51:1 | Não usar em texto | |
| Menta sobre off-white | 1,68:1 | Não usar em texto |
A lista completa (bordas, foco, erros) é recalculada com node ferramentas/contraste.cjs.
Tipografia
Plus Jakarta Sans (licença SIL Open Font License), pesos 400 a 800. Títulos em 800 com espaçamento entre letras negativo (−0,03 a −0,04 em). No wordmark, "Odonto" vai em peso médio (500) e "Ativo" em destaque (800), juntos, com espaçamento de −0,02 em. Sobre fundo escuro, "Ativo" fica em menta; sobre off-white, na cor do texto (a menta não tem contraste em fundo claro).
Quanto sobra pra você?
Lucro, dinheiro parado e quem chamar hoje.
Uso certo e errado
Arquivos
Todos os SVGs estão em marca/svg/, com o texto convertido em contornos (não dependem de fonte instalada). Os PNGs ficam em marca/png/: símbolo de 64 a 1024 px, logos com 48, 96 e 192 px de altura, favicons de 16, 32 e 48 px, ícones de app de 180, 192 e 512 px e a imagem de prévia para redes sociais e WhatsApp (1200×630). Para gerar tudo de novo: cd ferramentas, npm install, node gerar-marca.cjs.
