Design Tokens

Design Tokens são a base da nossa linguagem visual. Eles são abstrações de valores fixos (como hexadecimais ou pixels) em variáveis com nomes semânticos.

Por que tokens são semânticos?

Usar nomes como brand-primary ou surface-error em vez de #0052FF ou #FF0000 nos permite:

Escalabilidade: Se decidirmos mudar o azul da marca, mudamos em um único lugar (no token) e todo o sistema (Figma e Código) se atualiza.
Multitemas: Facilita a implementação de Dark Mode, pois o token surface-primary terá o valor "branco" no tema Light e "preto" no tema Dark.
Comunicação: Designer e Desenvolvedor falam a mesma língua: "Use o token de espaçamento M".

Tipos de Tokens no nosso sistema

Color: Cores de marca, neutras, estados (sucesso, erro) e textos.
Spacing: Escala de espaçamento (ex: 4px, 8px, 12px...) usada para margens e paddings.
Radius: Arredondamento de bordas de botões, cards e inputs.
Typography: Tamanhos, pesos (bold, medium) e alturas de linha.
Elevation: Sombras que definem a profundidade (Z-index visual).

Diferença entre Token e Valor Fixo

Valor Fixo: #0052FF ou 16px. Se você usar isso, seu design está "quebrado" em relação ao sistema.
Token: colors.brand.primary ou spacing.m. Isso garante que você está usando a peça oficial do quebra-cabeça.

Boas Práticas e Erros Comuns

✅ Como fazer (Boas Práticas)

Sempre procure um token que descreva a intenção do que você está criando.
Se você precisa de um fundo para um aviso de erro, use surface-error, não apenas "um vermelho qualquer".
Utilize os tokens de espaçamento do sistema para garantir que tudo esteja alinhado no grid de 8px.

❌ Como não fazer (Erros Comuns)

Criar novos valores de cores no Figma que não existem na biblioteca de estilos.
Usar tokens de cores para coisas que não são a intenção deles (ex: usar text-error como cor de fundo de um botão que não é de erro).
Ignorar os tokens de arredondamento (Radius) e colocar valores aleatórios nos componentes.