Design tokens

Os tokens existem em três camadas, e o maior problema atual é que elas não conversam:

1. Marca: cores do logotipo oficial.
2. Tema: variáveis CSS HSL em globals.css, consumidas pelo Tailwind e pelo @moldape/ui (padrão shadcn).
3. Em uso: cores fixas no código (paleta Material), medidas nas telas em produção em out/2026.

1 · Marca

Extraídas do arquivo CLARO HORIZONTAL.png.

Roxo Moldapé#361548“MOLDA” no logotipo

Vermelho Pé#B31F1D“PÉ” no logotipo

Laranja#E6701Cmosaico dos pés

Turquesa#52A1ACmosaico dos pés

Oliva#82922Amosaico dos pés

Azul-marinho#052757mosaico / fundo da versão escura

2 · Tema (CSS)

Definidos em :root (claro) e .dark como HSL sem hsl(), padrão shadcn.

primary / moldape-primary#672222--primary: 0 50% 27%

moldape-secondary#A62626--moldape-secondary: 0 63% 40%

moldape-accent#0044CC--moldape-accent: 220 100% 40%

foreground / text-primary#333333--foreground: 0 0% 20%

muted-foreground#878787--muted-foreground: 0 0% 53%

border / input#E8E8E8--border: 0 0% 91%

background-light#F7F7F7--background-light: 0 0% 97%

destructive#EF4444--destructive: 0 84.2% 60.2%

--radius: 0.5rem (8 px). O tema escuro (.dark) está definido, mas não há alternância de tema na interface.

3 · Em uso

Cores fixas encontradas nas telas (frequência medida em sacola e estúdio):

Vermelho de ação#A62626barras do estúdio, botão Criar

Red 800#C62828item ativo na navegação, títulos de destaque

Red 500#F44336ícone de excluir

Light Green 500#8BC34Abotão circular de confirmar (✓)

Green 700#388E3Ctoast de sucesso

Amber 600#FFB300barra “Pagar Total”

Amber 500#FFC107ícone de informação (i) nos cards

Grey 800#424242texto em campos

Grey 600#757575texto secundário

Grey 500#9E9E9Etexto de apoio, passos desabilitados

Grey 300#E0E0E0fundo de campos e barras

Azul (parcial)#0044CCbotões da tela Parcial

Raios em uso: 4 px, 6 px e pílula (9999 px). Os 8 px do token --radius quase não aparecem.

Diagnóstico

• O vermelho da interface (#A62626/#C62828) não é o vermelho da marca (#B31F1D), e o roxo da marca (#361548) não aparece na interface.
• Verde, âmbar e azul vêm da paleta Material e não estão no tema, então mudar o tema não muda essas telas.
• O token --primary (#672222, bordô) não é o vermelho que o usuário vê nos botões.

Proposta de tokens semânticos

Um conjunto único, com nomes por função e valores derivados da marca. Basta trocar os valores fixos por estes tokens, sem mudar layout.

Token proposto	Valor	Substitui
--color-action	#B31F1D (marca, 6,7:1 com branco)	#A62626, #C62828
--color-action-hover	#8F1917	—
--color-brand	#361548	— (passa a aparecer em cabeçalhos e foco)
--color-confirm	#3F7D20 (verde, 5,0:1 com branco)	#8BC34A
--color-highlight	#E6701C (laranja da marca), com texto #1D1222	#FFB300, #FFC107
--color-info	#2F7580 (turquesa da marca escurecido, 5,3:1 com branco)	#0044CC na parcial
--color-danger	#C62828	#F44336, --destructive
--color-text	#333333	ok
--color-text-muted	#666666 (5,7:1)	#9E9E9E (2,7:1), #878787 (3,6:1)
--color-surface-input	#F2F2F2 (texto #666 a 5,1:1)	#E0E0E0, #BDBDBD
--radius-sm / --radius-md / --radius-pill	4 / 8 / 9999 px	valores soltos

Contraste (WCAG 2.2, nível AA)

Par	Contraste	AA texto normal (≥ 4,5)
Texto #333 sobre branco	12,6:1	✅
Branco sobre #A62626	7,18:1	✅
#757575 sobre branco	4,61:1	✅ (no limite)
#7F7F7F (--text-link) sobre branco	4,00:1	❌
#878787 (--muted-foreground) sobre branco	3,59:1	❌
#757575 (placeholder) sobre #E0E0E0	3,49:1	❌
#9E9E9E (texto de apoio do upload) sobre branco	2,68:1	❌
#9E9E9E (passo desabilitado) sobre #EEEEEE	2,31:1	❌ (aceitável só para desabilitado)