Fundamentos

Cor

beta

Os tokens semânticos são a API de cor. Valores e contraste saem do theme.css a cada build.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

Os tokens são o contrato

Toda cor da interface tem um nome semântico. Se o token de que você precisa não existe, a correção é um token novo — nunca uma cor escrita à mão numa tela.

Os valores abaixo saem de packages/ui/src/styles/theme.css a cada build. Os hexadecimais são calculados a partir do OKLCH declarado lá — não são uma segunda cópia mantida à mão.

Componente nenhum ramifica por tema. A classe .dark remapeia os tokens e tudo acompanha.

Superfícies

Onde o conteúdo se apoia: página, cartão e camada flutuante.

Token	Claro	Escuro
--background	#f7f9fa	#101820
--foreground	#20252b	#f4f7f9
--card	#ffffff	#17222c
--card-foreground	#20252b	#f4f7f9
--popover	#ffffff	#17222c
--popover-foreground	#20252b	#f4f7f9

Ações

Primária, secundária e destrutiva. Uma ação primária por tela.

Token	Claro	Escuro
--primary	#043a6c	#5fa8d3
--primary-foreground	#ffffff	#0b2038
--secondary	#eef3f6	#1d2a35
--secondary-foreground	#043a6c	#bfe0f5
--destructive	#ba2015	#ff5c4a
--destructive-foreground	#ffffff	#0b2038

Estados

success aponta para o mesmo teal da marca de propósito — a semântica já dá ao teal o papel de conclusão, e um verde separado criaria duas cores disputando o mesmo significado. warning é a única hue realmente ausente da paleta, e por isso foi adicionada.

Token	Claro	Escuro
--success	#0b7274	#4fdad5
--success-foreground	#ffffff	#0b2038
--warning	#a04a00	#e9b270
--warning-foreground	#ffffff	#0b2038

Discretos

Superfícies e textos que não competem pela atenção, mais as linhas de contorno e o anel de foco.

Token	Claro	Escuro
--muted	#f1f3f5	#1b2630
--muted-foreground	#5b6570	#9da8b2
--accent	#f5eff8	#241b2e
--accent-foreground	#6f3893	#d9beec
--border	#e0e5e9	#283744
--input	#e0e5e9	#30414f
--ring	#0a557f	#5fa8d3

Marca

navy é estrutura e confiança; purple é cognição, aprendizagem e conteúdo; teal é progresso, conclusão e feedback positivo. São de uso direto e deliberado — accent e secondary continuam neutros, e não se usa purple ou teal como fundo padrão de hover.

Token	Claro	Escuro
--vox-navy	#043a6c	#5fa8d3
--vox-navy-subtle	#eef5f9	#14283a
--vox-navy-strong	#022a4f	#7ec2e8
--vox-purple	#8546ad	#b285d1
--vox-purple-subtle	#f6f0f9	#251a30
--vox-purple-strong	#6f3893	#c79fe0
--vox-teal	#12a5a7	#35c7c3
--vox-teal-subtle	#eaf8f7	#0f2a29
--vox-teal-strong	#0b7274	#4fdad5

A semântica se aplica na composição, não no primitivo. Um componente genérico permanece em primary por padrão e expõe uma variante para optar pela cor de marca quando o significado for real. Cravar teal em todo primitivo esvazia o teal.

Gráficos

Rampa de cinco cores para visualização de dados.

Token	Claro	Escuro
--chart-1	#043a6c	#5fa8d3
--chart-2	#8546ad	#b285d1
--chart-3	#12a5a7	#35c7c3
--chart-4	#1e6fa6	#7fb8de
--chart-5	#b285d1	#d3aeea

Barra lateral

A barra tem superfície própria para não herdar a da página, e por isso repete o conjunto inteiro.

Token	Claro	Escuro
--sidebar	#ffffff	#141d25
--sidebar-foreground	#414a53	#c7d0d8
--sidebar-primary	#043a6c	#5fa8d3
--sidebar-primary-foreground	#ffffff	#0b2038
--sidebar-accent	#eef5f9	#182430
--sidebar-accent-foreground	#043a6c	#8fc3e6
--sidebar-border	#e5e9ec	#243240
--sidebar-ring	#0a557f	#5fa8d3

Contraste medido

Razão de contraste WCAG calculada a cada build, sobre os valores reais dos tokens, nos dois temas. Isto é medição, não promessa.

Os 34 pares passam em AA (4,5:1). O mais apertado é Marca — progresso com 5.23:1 — margem pequena, então qualquer ajuste nesses dois tokens precisa ser reconferido aqui.

Par	Claro	Escuro
Página--foreground sobre --background	Texto14.62:1AA	Texto16.61:1AA
Texto secundário na página--muted-foreground sobre --background	Texto5.62:1AA	Texto7.39:1AA
Cartão--card-foreground sobre --card	Texto15.43:1AA	Texto14.99:1AA
Flutuante--popover-foreground sobre --popover	Texto15.43:1AA	Texto14.99:1AA
Ação primária--primary-foreground sobre --primary	Texto11.48:1AA	Texto6.27:1AA
Ação secundária--secondary-foreground sobre --secondary	Texto10.26:1AA	Texto10.58:1AA
Superfície discreta--muted-foreground sobre --muted	Texto5.33:1AA	Texto6.35:1AA
Hover e seleção--accent-foreground sobre --accent	Texto6.98:1AA	Texto9.85:1AA
Destrutivo--destructive-foreground sobre --destructive	Texto6.33:1AA	Texto5.38:1AA
Atenção--warning-foreground sobre --warning	Texto6.02:1AA	Texto8.65:1AA
Sucesso--success-foreground sobre --success	Texto5.71:1AA	Texto9.63:1AA
Barra lateral--sidebar-foreground sobre --sidebar	Texto9.03:1AA	Texto10.90:1AA
Item ativo da barra--sidebar-primary-foreground sobre --sidebar-primary	Texto11.48:1AA	Texto6.27:1AA
Hover da barra--sidebar-accent-foreground sobre --sidebar-accent	Texto10.42:1AA	Texto8.33:1AA
Marca — estrutura--vox-navy-strong sobre --vox-navy-subtle	Texto13.18:1AA	Texto7.74:1AA
Marca — cognição--vox-purple-strong sobre --vox-purple-subtle	Texto7.04:1AA	Texto7.45:1AA
Marca — progresso--vox-teal-strong sobre --vox-teal-subtle	Texto5.23:1AA	Texto8.89:1AA

A conversão de OKLCH para sRGB e a razão são aritmética em scripts/extract-tokens.mjs. Cobre apenas os pares que a interface de fato usa; não substitui uma varredura de acessibilidade sobre a página renderizada.