Fundamentos
Cores da marca
Base clara acolhedora, azuis institucionais, neutros de apoio e acentos parcimoniosos. Toda cor no site é servida pelos tokens semânticos — os primitivos abaixo só alimentam os semânticos.
Brand primitives
Proporção cromática
Regra 60/25/10/5 sugerida pelo brandbook. Base clara predomina; azuis institucionais estruturam; neutros apoiam; acentos aparecem com parcimônia.
60% Base clara
25% Azuis
10% Neutros
5% Acentos
Rampas 50 → 900
Navy — institucional
palette.navyCyan — evolução
palette.cyanAqua — disponibilidade
palette.aquaGold — herança
palette.goldCoral — humano
palette.coralNeutral — base
palette.neutralCombinações aprovadas
Navy + White + Cyan
Institucional, corporativo, B2B
Navy + Cream + Gold
Herança, documentos, governo
Steel + White + Aqua
Técnico, operações, wholesale
Navy + Warm Gray + Coral
Humano, residencial, campanha
Tokens semânticos
Componentes consomem semânticos, nunca primitivos. Cada modo (claro/escuro) tem seu próprio mapa, garantindo contraste e consistência.
Modo Claro
- bg.canvas{palette.neutral.25}
- bg.surface{palette.neutral.0}
- fg.default{palette.navy.900}
- fg.muted{palette.neutral.600}
- fg.brand{palette.navy.600}
- fg.accent{palette.cyan.600}
- action.primary.bg{palette.navy.600}
- feedback.info.fg{palette.cyan.700}
- feedback.success.fg{palette.aqua.700}
- feedback.warning.fg{palette.gold.700}
- feedback.danger.fg{palette.coral.700}
Modo Escuro
- bg.canvas{palette.ink.canvas}
- bg.surface{palette.ink.surface}
- fg.default{palette.ink.fg}
- fg.muted{palette.ink.fgMuted}
- fg.brand{palette.cyan.300}
- fg.accent{palette.cyan.300}
- action.primary.bg{palette.cyan.300}
- feedback.info.fg{palette.cyan.200}
- feedback.success.fg{palette.aqua.200}
- feedback.warning.fg{palette.gold.200}
- feedback.danger.fg{palette.coral.200}