Glossário de Product Design
O que são design tokens?
Também chamado de Tokens de design
Design tokens são as menores decisões visuais de um produto guardadas como variáveis com nome, como cores, tamanhos de fonte, espaçamentos, raios e sombras.
Em detalhe
Em vez de usar o valor solto (#0A6CC9, 16px), o time usa o nome (cor-primaria, espaco-3). Assim, mudar uma cor no produto inteiro vira uma alteração em um lugar só, e design e código passam a usar o mesmo vocabulário.
Tokens costumam ter camadas: os primitivos (a paleta crua) e os semânticos (cor-de-fundo, cor-de-erro), que apontam para os primitivos. É a camada semântica que permite ter tema claro e escuro sem redesenhar nada.
Na prática
- Nomeie pelo uso (texto-secundario), não pela aparência (cinza-500).
- Mantenha a mesma lista de tokens no Figma (variáveis) e no código (variáveis CSS).
- Crie tokens de tema desde o início, mesmo que o escuro venha depois.