Design tokens

Os valores nomeados de um design system, como cor, espaçamento e tipografia, guardados num só lugar para alimentar todo o produto.

Hard

O que é

Design tokens são os valores de estilo de um produto, como uma cor, um tamanho de fonte, um espaçamento ou um raio de borda, guardados com um nome e um significado, num único lugar. Em vez de espalhar o código de uma cor por mil telas, você define uma vez, dá um nome e usa esse nome em todo lugar.

São a espinha de qualquer design system maduro. Quando os valores moram num só lugar, mudar a identidade vira ajuste central, não caça manual. Trocar a cor da marca, suportar dark mode, manter consistência entre web e app: tudo isso fica viável porque a fonte de verdade é uma só, e design e código falam a mesma língua.

Para quem desenha produto, design tokens são o que conecta a decisão de design à implementação sem ruído. O time de design define o token, o de engenharia consome o mesmo token. A consistência deixa de depender de disciplina manual e passa a ser estrutura.

Em uma frase

Isso a gente resolve no design token, muda num lugar só e propaga pro produto inteiro.

A pergunta que ele responde

Como mantenho cor, espaçamento e fonte consistentes no produto inteiro sem editar tela por tela?

Quando usar

Em qualquer design system que precise de consistência e mudança centralizada de estilo entre telas e plataformas.

Como não usar

Criar token para cada valor isolado sem semântica nem padrão. Token sem sistema vira só mais um lugar bagunçado.

Na prática

A marca muda o tom de azul. Em vez de editar centenas de telas, o time altera um token e a mudança propaga para o produto inteiro.

Não confunda com

Design tokens não são variáveis soltas de código: são valores nomeados com significado, compartilhados entre design e engenharia como fonte única de verdade do estilo.

D

Em inglês

Design Tokens

Pronúncia

di-záin tô-kens

Também chamado de

design tokens, tokens de design

Origem

n/a

Fonte

Saiba mais

Design Tokens Community Group, especificação e documentação de design tokens