Cores

Nunca usar hex hardcoded em componentes — sempre token ou classe Tailwind semântica.

Paleta de Marca

Azul Marinho

#0D1B4B

Azul Médio

#162460

Azul Profundo

#1E3080

Ciano Elétrico

#00AEEF

Ciano Claro

#5CCFF5

Ciano Pálido

#E0F6FE

Tokens Semânticos — Light Mode

bg-background

Fundo da página — off-white azulado

bg-card

Card — branco puro, flutua acima do background

bg-primary

Azul Marinho — botão primário, sidebar

bg-secondary

Ciano Pálido — botão secundário, badge bg

bg-accent

Ciano Elétrico — CTAs, focus ring, highlight

bg-muted

Fundo mutado — inputs, seções neutras

bg-destructive/20

Vermelho — erros, ações destrutivas

Cores de Status

Pendentebg-amber-50 text-amber-700 border-amber-200
Aprovado / Ativobg-emerald-50 text-emerald-700 border-emerald-200
Rejeitado / Errobg-red-50 text-red-700 border-red-200
Trial / Infobg-secondary text-secondary-foreground
Cancelado / Inativobg-muted text-muted-foreground

Anti-Patterns

  • ✗className="bg-[#00AEEF]" — hex hardcoded. Usar bg-accent
  • ✗Usar cor da marca para indicar erro — sempre bg-destructive ou bg-red-*
  • ✗Inventar variante de cor não mapeada neste guia