Cor

Uma escala nomeada por intenção, não por valor: bg-primary é a ação, 50/100 são fundos suaves de chip/hover/selecionado, 700 é o hover do botão. Trocar a marca na V2 vira mudar o token — não caçar #4F46E5 tela a tela.

Hierarquia de texto por token, nunca por opacidade: ink no título, ink-muted no secundário, ink-subtle no terciário/ícone, ink-inverse sobre fundo escuro. ink-muted sobre bg-surface foi calibrado para passar em WCAG AA (4,5:1) — opacidade aleatória não garante isso.

Quatro fundos com papéis fixos: bg é o canvas, bg-surface é o cartão que "levanta" do canvas, bg-subtle é a zona suave (cabeçalho de tabela, hover), bg-sidebar é a casca escura. A diferença sutil entre bg e bg-surface é o que cria profundidade sem sombra pesada.

Três pesos de divisória: border padrão para contornos de card, border-strong para inputs/checkbox (precisam de mais presença para o alvo de clique ser óbvio) e border-subtle para linhas internas de tabela, que devem separar sem competir com o conteúdo.

O vocabulário visual mais carregado de significado do produto: cada cor é um canal de parametrização da DI, não decoração. Por isso a cor nunca anda só — vem sempre com label e dot (P2ChipDI), porque ~8% dos homens têm daltonismo e canal errado custa caro. Clique para copiar o token.

Cada status vem como PAR fg+bg já calibrado: success-fg sobre success-bg fecha contraste AA sem você adivinhar tons. Usar o par é o que impede o erro clássico de texto verde-vivo sobre verde-claro (ilegível). danger é destrutivo/erro; warning é atenção; info é neutro-informativo.

O teste final de uma escala de cor é vê-la num componente: os mesmos pares semantic viram tons de P2Tag prontos. A vantagem do token sobre o hex aparece aqui — o componente consome a intenção (tone="success") e a cor certa segue junto, com contraste garantido.

Pares testados em WCAG AA, com a armadilha explícita: canal-verde puro reprova em texto pequeno (~3,3:1) — por isso o delta verde do KPI usa #15803D, não o verde do chip. Branco fecha sobre primary/danger; #422006 (quase-preto âmbar) é o texto certo sobre o amarelo, porque branco sobre amarelo reprova.

O namespace ds (grape #7C3AED) é a marca da FERRAMENTA de Design System, não do produto — é o que separa "a casca do Storybook" das cores que pintam o portal. Mantê-lo isolado é o que permite a V2 trocar as cores do produto sem tocar na identidade do DS, e vice-versa.

Dois marcadores de anotação, não cores de UI: ds-legacy (âmbar = como é hoje) e ds-accent (ciano = como deve ser). Eles existem só para o manifesto/de-para narrar a migração visualmente, sem se confundir com warning (âmbar de status) nem com info (azul de status) do produto.