Cores

Cor não é decoração. É comunicação. Antes de qualquer paleta bonita, cor serve para criar hierarquia, indicar estado e guiar a atenção. Se você tira toda a cor de uma interface e ela deixa de funcionar, o problema não é a falta de cor. É que você usou cor onde deveria ter usado estrutura.

O que cor faz

Cor tem três funções práticas em interface:

• Diferenciar elementos (botão primário vs secundário)
• Comunicar estado (erro, sucesso, alerta)
• Organizar informação (categorias, tags, seções)

O erro mais comum é usar cor para tudo. Quando tudo é destacado, nada é. Uma interface com 5 cores de destaque é o mesmo que nenhuma.

Escalas de cor

Uma escala de cor é uma sequência de 10-12 tons de uma mesma cor, do mais claro ao mais escuro. Cada nível tem um uso definido:

• Steps 1-3: superfícies e fundos
• Steps 4-6: bordas e separadores
• Steps 7-9: elementos interativos
• Steps 10-12: texto e ícones

O Radix Colors e o Tailwind usam essa abordagem. Isso cria consistência sem precisar pensar em cada decisão.

Tokens de cor

Tokens semânticos conectam a intenção ao valor. Em vez de usar blue-500 diretamente, você usa um token que diz o que aquela cor faz no contexto:

:root {
  /* Primitivos — a paleta base */
  --blue-500: #3b82f6;
  --red-500: #ef4444;
  --green-500: #22c55e;

  /* Semânticos — o que a cor significa */
  --color-brand: var(--blue-500);
  --color-danger: var(--red-500);
  --color-success: var(--green-500);

  /* Componente — onde a cor é aplicada */
  --button-bg: var(--color-brand);
  --button-text: white;
}

A vantagem: se você quer mudar a cor da marca, troca o primitivo e tudo atualiza. Se quer um tema escuro, troca os semânticos e os componentes nem percebem.

Contraste

Contraste não é opcional. É requisito. WCAG AA exige ratio mínimo de:

• 4.5:1 para texto normal
• 3:1 para texto grande

AAA sobe para 7:1 e 4.5:1. A conta é simples: luminância relativa da cor mais clara dividida pela mais escura. Ferramentas como o WebAIM Contrast Checker fazem isso automaticamente. Mas a regra prática é: se você precisa forçar a vista para ler, o contraste é insuficiente.

A decisão

Neste guia usamos uma escala zinc neutra como base. Sem cor de marca. Isso é intencional: o conteúdo é o protagonista, não a paleta. Os tokens semânticos (--background, --surface, --foreground, --border) mapeiam diretamente para os steps da escala zinc.

Dark mode inverte a escala: background vai para o step mais escuro, foreground para o mais claro. Surface fica um step acima do background para criar profundidade sem depender de sombra.