Consistência e design tokens
Se cada tela inventa uma cor e um espaçamento novo, quem usa precisa reaprender o produto a cada clique.
Toda vez que uma tela nova inventa uma cor de azul diferente, um espaçamento diferente, um raio de borda diferente — mesmo que cada escolha pareça pequena e defensável sozinha — o resultado acumulado é uma interface que parece feita por pessoas diferentes que nunca se falaram. E o custo não é só estético: quem usa o produto precisa reaprender padrões visuais a cada tela nova, porque nada se repete de forma confiável.
O que é um design token
Um design token é um valor de design nomeado e reutilizável — definido uma única vez e referenciado em todo lugar que precisa dele. Em vez de espalhar #2563eb em quinze arquivos CSS diferentes, você define --color-primary: #2563eb uma vez, e todo componente que precisa da cor primária referencia o token.
:root {
--color-primary: #2563eb;
--color-danger: #dc2626;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-4: 1rem;
--radius-md: 8px;
}
.botao {
background: var(--color-primary);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
}A vantagem não é só evitar repetição de código — é que quando o token muda (o time decide ajustar o azul da marca, por exemplo), todo lugar que usa aquele token muda junto, sem precisar caçar cada ocorrência manualmente.
A ponte entre design e código
Design tokens são o que permite um designer e um dev falarem a mesma língua sem ambiguidade: em vez de "usa um azul mais ou menos assim", a conversa vira "usa --color-primary". Isso elimina a interpretação livre que gera inconsistência — cada pessoa do time escolhendo "um azul parecido" de memória não é a mesma coisa que todo mundo usando o mesmo valor exato.
Exercício
Um projeto tem três componentes de botão diferentes, cada um com seu próprio azul (#2463ea, #2563eb, #2660e8 — quase idênticos, mas não iguais) escritos direto no CSS de cada um. Como um design token resolveria isso, e o que mudaria se o time decidisse trocar o azul da marca no futuro?