Tokens semânticos

Tokens que nomeiam o papel de um valor, como fundo primário ou texto de erro, em vez de só a cor crua.

Hard

O que é

Tokens semânticos são a camada do design system que nomeia os valores pelo que eles fazem, não pelo que eles são. Em vez de azul-500, você usa cor de ação primária. Em vez de cinza-900, texto primário. O token aponta para um valor base, mas o nome carrega a intenção de uso.

É essa camada de abstração que faz tema e dark mode funcionarem de verdade. Como os componentes usam o token semântico, e não o valor cru, você troca o que fundo primário significa no modo escuro e tudo se ajusta sozinho. A intenção fica fixa, o valor por trás muda conforme o contexto.

Para quem desenha produto, tokens semânticos são o que dá flexibilidade sem caos. Eles separam o que uma cor representa do valor exato dela, então decisões de tema deixam de ser retrabalho e viram configuração. É a diferença entre um design system que escala e um que quebra a cada novo tema.

Em uma frase

Liga o componente no token semântico, não na cor crua, senão o dark mode vai dar trabalho.

A pergunta que ele responde

Como faço dark mode e temas funcionarem sem refazer cada tela?

Quando usar

Em design systems com temas, modos claro e escuro, ou que precisem trocar valores por contexto sem refazer componentes.

Como não usar

Usar primitivo direto nos componentes. Sem a camada semântica, mudar de tema vira edição manual em tudo.

Na prática

No dark mode, o token texto primário deixa de apontar para um cinza escuro e passa a apontar para um claro, sem tocar em nenhum componente.

Não confunda com

Tokens semânticos não são tokens primitivos: o primitivo guarda o valor cru, como um hex de cor, o semântico nomeia o papel e aponta para um primitivo.

Design

Em inglês

Semantic Tokens

Pronúncia

n/a

Também chamado de

tokens semânticos, semantic tokens, tokens de intenção

Origem

n/a

Fonte

Saiba mais

Nathan Curtis, artigos sobre naming e camadas de design tokens