Cores

Em produção

Sistema de cores baseado em função, não em valor. Garante consistência visual, suporte automático a temas e manutenção centralizada.

Abstração e Semântica

A aplicação de cor segue um modelo de abstração que separa o valor visual (a cor em si) da função que ela exerce no produto.

Semântica: A cor é definida pelo que ela faz (ex: ação, perigo), não pela sua aparência (ex: azul, vermelho).
Escalabilidade: Mudanças globais de marca ou tema exigem alteração apenas na definição, não em cada componente espalhado pelo sistema.

Por que usar tokens semânticos?

Ao usar um valor fixo (#ef4444), você cria um vínculo rígido difícil de manter. Ao usar um token semântico (Danger), você declara uma intenção. O sistema decide qual a melhor cor para representar essa intenção em cada contexto (claro ou escuro).

Camadas de Cores

O sistema organiza as cores em níveis de especificidade para garantir flexibilidade e controle.

Base (Primitivos)

A paleta bruta. Todas as tonalidades disponíveis (ex: Zinc 50-950, Blue 50-950). São os ingredientes brutos, mas raramente devem ser usados diretamente na interface.

Semântica (Alias)

Mapeiam decisões de design. É aqui que definimos que a "Ação Primária" usa a cor "Zinc 900". É onde a mágica dos temas (Light/Dark) acontece.

Componente

Exceções específicas. Usado quando um componente precisa de uma cor única que não se encaixa nas regras semânticas globais.

Estados Interativos

Cores comunicam estado. Cada interação deve ter feedback visual claro.

Default: O estado de repouso do elemento.
Hover: Indica interatividade ao passar o cursor. Deve ter contraste suficiente para ser perceptível.
Active/Pressed: Confirmação visual imediata do clique ou toque.
Disabled: Elementos inoperantes. Geralmente com opacidade reduzida ou tons de cinza, mas mantendo legibilidade se a informação for importante.

Acessibilidade e Contraste

A relação entre cor de fundo e cor de texto deve garantir leitura confortável para todos.

Textos normais exigem contraste mínimo de 4.5:1.
Textos grandes (títulos) e ícones funcionais exigem mínimo de 3:1.
Nunca confie apenas na cor para transmitir informação (ex: erro em formulário). Use ícones e texto de suporte para garantir que daltônicos compreendam o estado.

Boas Práticas

Evite usar cores "hardcoded" (valores manuais). Sempre prefira o token mais semântico disponível.
Use cores de "Sucesso" e "Perigo" com parcimônia. Se tudo chama atenção, nada chama atenção.
Em interfaces densas, prefira tons neutros (cinzas) para a estrutura e deixe a cor apenas para as ações principais. Isso reduz a carga cognitiva.