Aparência
Manual de marca
Cores
A paleta tem quatro grupos: neutros (Gelo → Tinta), brand (Verde Lar), destaque (Amarelo Chave) e status. Os HEX vêm do manual de marca. Os contrastes foram medidos com a fórmula da WCAG 2.2.
Núcleo da marca
Proporção recomendada no conjunto: Gelo 55% · Verde Lar 30% · Menta e Tinta 10% · Amarelo 5%.
Neutros — gray-*
No portal Angular a escala gray do Tailwind foi remapeada para estes valores (em src/styles.css). Use as classes gray-* normalmente.
Brand — Verde Lar brand-*
Texto branco sobre brand-600 tem contraste de 10,7:1 (AAA). O brand-400 (3,2:1) fica só para ícones e gráficos.
Branco sobre Verde Lar ✓Verde Lar sobre Menta ✓
Destaque — Amarelo Chave coral-*
O nome coral-* foi mantido no código para não quebrar classes existentes. Os valores agora são a escala do Amarelo Chave: pense "coral = amarelo de destaque".
Regra crítica
O Amarelo Chave (coral-500) nunca é texto sobre fundo claro (1,8:1) e nunca recebe texto branco (1,8:1). Texto sobre amarelo é sempre Tinta (gray-900) — 9,1:1. Amarelo como texto, só sobre Verde Lar (6,0:1) ou Verde Noite (8,2:1).
Tinta sobre Amarelo ✓8Destaque
Amarelo sobre Verde Lar ✓
Status (só no produto)
Status de cobrança têm duas cores: a de marcação (pontos, barras, ícones) e uma versão mais escura só para texto.
| Status | Marcação | Texto | Fundo | Classes |
|---|---|---|---|---|
| Pago | #2E9E6B pago | #1F7A51 pago-text (5,3:1) | #E8F5EE pago-bg | bg-pago · text-pago-text · bg-pago-bg |
| Pendente | #F6B73C pendente | #8A5A00 pendente-text (5,9:1) | #FEF8EC pendente-bg | bg-pendente · text-pendente-text · bg-pendente-bg |
| Atrasado | #D9574A atrasado | #B23A2F atrasado-text (5,9:1) | #FBECEA atrasado-bg | bg-atrasado · text-atrasado-text · bg-atrasado-bg |
PagoPendenteAtrasadoNovo
- A marcação de Pago (3,4:1) e de Atrasado (3,9:1) reprova como texto — use sempre a versão
-text. - Status sempre com cor e texto juntos ("Pago", "Pendente", "Atrasado"), nunca só cor.
- Mapeamento: Pago, Ativo, Sucesso →
pago· Pendente, A vencer, Atenção →pendente· Atrasado, Erro, Cancelado →atrasado· Informativo, Novo →brand(Menta + Verde Lar). - O vermelho de status não entra em peças de marketing (site, posts), para não parecer cobrança agressiva.
Migração
Telas antigas ainda usam emerald-*, red-*, amber-* e blue-* do Tailwind. Ao tocar numa tela, troque pelos tokens de status.
Estados interativos
| Estado | Classes (Tailwind) | Uso |
|---|---|---|
| Nav ativo | .nav-item-active → bg-brand-600 text-white font-medium | Item de menu ativo |
| Nav inativo | .nav-item → text-gray-600 hover:text-gray-900 hover:bg-gray-100 | Item de menu |
| Filtro ativo | bg-brand-600 text-white border-brand-600 | Chips de status |
| Filtro inativo | bg-white text-gray-600 border-gray-200 hover:bg-gray-50 | Chips de status |
| Desabilitado | opacity-50 cursor-not-allowed | Qualquer elemento |
| Hover de superfície | hover:bg-gray-50 (em card) / hover:bg-brand-50 (item clicável) | Linhas, itens de lista |
| Link | text-brand-600 underline-offset-4 hover:underline | Links de texto |
| Foco (input) | focus:ring-2 focus:ring-brand-600/25 focus:border-brand-600 | Inputs |
| Foco (botão) | focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-brand-600 | Botões e links |
| Selecionado | bg-brand-50 border-brand-200 text-brand-900 | Linha ou item selecionado |
| Carregando | animate-spin text-brand-600 | Ícone de loading |
Combinações
| ✅ Recomendado | Uso |
|---|---|
| Verde Lar + Branco + Amarelo Chave | Card de destaque, superfícies de impacto |
| Gelo + Verde Lar + Tinta | Telas e documentos |
| Amarelo Chave + Tinta | Botão principal, contadores |
| Menta + Verde Lar | Ícones em círculo, badges, áreas de apoio |
| ❌ Evitar | Problema |
|---|---|
| Amarelo como texto em fundo claro | 1,7–1,8:1 |
| Branco sobre Menta ou sobre Amarelo | ilegível / 1,8:1 |
| Gradientes entre cores da marca | proibido pelo manual |
| Vermelho de status no marketing | parece cobrança agressiva |
Gráficos
| Série / elemento | Cor |
|---|---|
| Série principal | brand-600 #12463B |
| Série de comparação | coral-500 #F6B73C |
| Terceira série | brand-300 #8FBFAE |
| Trilhas, grade, eixos | gray-100 / rótulos gray-500 em mono |
| Status | sempre os tokens pago, pendente, atrasado |
| Barras de progresso | trilha gray-100, preenchimento brand-600, 6px, pílula |
No máximo 3 cores por gráfico, sem gradientes; legenda com pontos circulares; valores sempre com unidade (R$, %, dias).
Modo escuro (referência)
Definido no manual, não publicado no portal: fundo #0D1714, texto #E8F0EC (15,8:1), destaque #8FD8B8 (11,0:1). O Amarelo Chave mantém o papel de CTA com texto Tinta. O tema escuro desta documentação usa esses valores.