Cores
Navy, azul e um único acento laranja. Os neutros puxam para o matiz do navy (~210°). O laranja é bisturi, não tinta: no máximo 2% da tela. Tons derivados via color-mix — não são cores de marca. Fonte: brand/tokens/colors.css.
Cores-base (marca)
- navy
#253140Texto e superfícies escuras - azul
#2F4C73Apoio, links e foco - laranja
#F1860BAcento único (bisturi, não tinta) - offwhite
#EDEEEFSuperfície secundária da marca - white
#FFFFFFBranco puro - paper
#FFFFFFPapel: superfície clara máxima - slate
#3A434FEstrutura e superfícies - gray
#6E7783Texto secundário e elementos neutros - neutral-0
#FFFFFF - neutral-25
#FBFCFD - neutral-50
#F5F7F9 - neutral-100
#EDEEEF - neutral-200
#DDE0E4 - neutral-300
#C3C8CF - neutral-400
#9AA2AD - neutral-500
#6E7783 - neutral-600
#515A66 - neutral-700
#3A434F - neutral-800
#253140 - neutral-900
#1A2330 - neutral-950
#111823 - azul-50
#EEF3FA - azul-100
#D8E3F2 - azul-200
#B3C7E1 - azul-300
#85A3CB - azul-400
#5A7FAF - azul-500
#2F4C73 - azul-600
#284163 - azul-700
#203450 - azul-800
#19293E - laranja-50
#FEF4E8 - laranja-100
#FCE4C4 - laranja-200
#F9C787 - laranja-300
#F6A947 - laranja-400
#F1860B - laranja-500
#D6740A - laranja-600
#B05F08 - laranja-700
#8A4A06
Tons derivados
Método: color-mix(in srgb, brandHue P%, white|navy) at fixed stops with identified UI roles only. Cada tom tem papel UI identificado — não expandir sem uso.
- navy-soft
navy 88% + whitePainel elevado no escuro - slate-soft
slate 55% + whiteBorda/input no claro; superfície neutra suave - slate-strong
slate 82% + navyHover e surface-elevated no escuro - gray-soft
gray 18% + whiteHover/fill no claro; surface-elevated clara - gray-strong
gray 70% + navyBorda sutil e fills no escuro - neutral-100
#EDEEEFSuperfície elevada no claro - neutral-200
#DDE0E4Seleção e hover forte (claro) - neutral-300
#C3C8CFAcento neutro no escuro - neutral-400
#9AA2ADTexto secundário no escuro - neutral-500
#6E7783Base do fill de campo no escuro - neutral-600
#515A66Série de gráfico e separadores - neutral-700
#3A434FSeleção no escuro - neutral-800
#253140Superfície elevada no escuro - neutral-900
#1A2330Superfície base no escuro - laranja-soft
laranja 10% + whiteAcento residual no claro — uso mínimo - laranja-muted
laranja 24% + navyAcento residual no escuro — uso mínimo - laranja-strong
laranja 82% + navyHover do acento residual
Papéis semânticos
Escuro
- bg
- neutral-950
- surface
- neutral-900
- surfaceElevated
- neutral-800
- surface3
- neutral-800
- text
- offwhite
- textMutedForeground
- neutral-400
- border
- transparent
- borderSubtle
- transparent
- field
- neutral-400 18% + transparent
- accent
- slate
- accentSoft
- neutral-800
- action
- laranja
- actionForeground
- neutral-950
- actionSoft
- laranja 16% + transparent
- actionHover
- laranja-300
- signal
- neutral-300
- hover
- offwhite 7% + transparent
- selection
- neutral-700
- focus
- azul-300
- scrim
- neutral-950 64% + transparent
- contour
- 0 0 0 1px color-mix(in srgb, white 8%, transparent)
- signature
- laranja
- signatureSoft
- laranja 16% + transparent
- signatureForeground
- neutral-950
- selected
- white 10% + transparent
- pressed
- text 10% + transparent
- divider
- white 6% + transparent
Claro
- bg
- paper
- surface
- paper
- surfaceElevated
- neutral-50
- surface3
- paper
- text
- navy
- textMutedForeground
- neutral-600
- border
- transparent
- borderSubtle
- transparent
- field
- neutral-50
- accent
- neutral-600
- accentSoft
- neutral-200
- action
- laranja
- actionForeground
- navy
- actionSoft
- laranja-50
- actionHover
- laranja-500
- signal
- navy
- hover
- navy 5% + transparent
- selection
- neutral-200
- focus
- azul-500
- scrim
- navy 32% + transparent
- contour
- 0 0 0 1px color-mix(in srgb, navy 7%, transparent)
- signature
- laranja-600
- signatureSoft
- laranja-50
- signatureForeground
- white
- selected
- navy 7% + transparent
- pressed
- text 10% + transparent
- divider
- navy 6% + transparent
A UI vive numa escada de navy (matiz ~210°). O acento laranja é sinal de ação, valor e etapa ativa — no máximo 2% da tela — nunca superfície decorativa.
Laranja (#F1860B) passa AA como texto no escuro; sobre branco, só o o-600 (#B05F08) é legível. Branco sobre laranja reprova (2,58:1) e está fora do sistema.
Card usa sombra, não borda. A delimitação de campo é o fill; a borda de layout é transparente.
Exemplo de título Laranja (grande)
Exemplos no tema ativo
Texto principal
Texto secundário
Clear sobre mídia (experimento local) — alternativa legível: glass regular.
Bordas usam --border / --input neutros. A cor de ação é a escada de navy; o laranja fica reservado a sinais: ação, valor e etapa ativa.
Status (funcionais)
Sempre com texto ou ícone. São as únicas cores 'de verdade' da UI — fora da identidade.
Sucesso
Atenção
Erro
- Escuro
- #4ADE80 / #FBBF24 / #FB7185
- Claro
- #0F7A4A / #B45309 / #C0362C
Contraste (WCAG)
| Combinação | Razão | Uso | Nota |
|---|---|---|---|
| Navy → Branco | 13,19:1 | Texto normal (≥4,5:1) | Texto principal no tema claro |
| Azul → Branco | 8,74:1 | Texto normal (≥4,5:1) | Links e foco no tema claro |
| Laranja 600 → Branco | 4,68:1 | Texto normal (≥4,5:1) | O único laranja legível como texto |
| Navy → Laranja | 5,12:1 | Texto normal (≥4,5:1) | Texto sobre o botão laranja |
| Branco → Laranja | 2,58:1 | Só decorativo / evitar texto | Reprova em AA — fora do sistema |