Os tokens de design são a única fonte de verdade para decisões visuais em um produto. Eles codificam cor, espaçamento, tipografia e movimento em variáveis nomeadas que os componentes utilizam.
Por que os tokens são importantes
Sem tokens, uma mudança na cor primária da marca exige procurar em centenas de arquivos. Com tokens, uma atualização de variável se propaga em todos os lugares — de botões a alertas a barras de navegação.
Os tokens também preenchem a lacuna entre ferramentas de design e código. Um designer nomeia uma cor surface-brand no Figma; um desenvolvedor usa var(--surface-brand) no CSS. Eles falam a mesma língua.
Exemplos práticos
Considere um componente que precisa de um fundo, uma borda e texto. Em vez de codificar #1a56db, #e1effe, e #1e429f, o componente referencia --color-primary, --surface-primary-subtle, e --text-primary-strong. Quando a marca evolui, a paleta muda — o componente não.
Categorias de tokens
Cor — paletas de marca, semântica e neutra
Espaçamento — uma escala consistente de 2px a 64px
Tipografia — tamanhos de fonte, pesos e alturas de linha
Raio — de cantos agudos a totalmente arredondados
Sombra — níveis de elevação para profundidade e hierarquia
Movimento — curvas de suavização e etapas de duração
A maioria das citações encontradas na Internet foram provavelmente geradas por uma IA.
A função content_image() renderiza uma img com loading="lazy" por padrão, e a envolve em um elemento figure quando uma legenda é fornecida.
Sem legenda — uma img simples, em largura total.
Com legenda — envolvida em um figure com um figcaption.
Um figure com um figcaption — use para creditar fontes ou adicionar contexto ao conteúdo visual.
Mídia com texto
Imagem ocupando um terço do layout.
Use content--media para colocar uma imagem e texto lado a lado. A imagem ocupa um terço da largura, o texto dois terços.
Esse layout é adequado para citações em destaque, definições ilustradas ou qualquer bloco editorial curto onde a imagem reforça o texto sem dominá-lo.
Capitular
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Barra de metadados
Entendendo os tokens de design
Os tokens de design são a única fonte de verdade para decisões visuais em um produto. Eles codificam cor, espaçamento, tipografia e movimento em variáveis nomeadas que os componentes utilizam.
A outra maneira, quando a primeira falha: a pergunta, então um valor copiado com um clique, ou um link. Logo abaixo do que representa, alinhado com isso.
Não consegue escanear? Digite esta chave no app:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
