Design e Acessibilidade
O que é Design Tokens?
Design tokens são as variáveis-base (cores, espaçamentos, fontes) que alimentam um design system — o "DNA" reutilizável da UI.
Tokens substituem valores literais (#3B82F6) por nomes semânticos (color.primary.500). Mudar a marca toda vira trocar um valor; antes, era find-and-replace em centenas de arquivos.
Tokens semânticos (color.button.primary) vencem tokens literais (color.blue.500) porque expressam intenção: um botão pode trocar de azul pra verde sem o nome mentir.
Termos relacionados
Perguntas frequentes
Tokens podem ser usados em CSS direto?
Sim, via CSS custom properties (--color-primary). Tailwind, Style Dictionary e outros geram automaticamente.
Quantos tokens são necessários?
O essencial: paleta de cores (10-20 valores), 6-8 sizes de tipografia, escala de espaçamento (4-32px) e radii.