Design Tokens

Um design token do MDS existe em até três representações da mesma decisão de design — cada uma para uma audiência diferente:

Camada	Formato	Onde vive	Quem lê
Figma	Variables (semente, 1 valor por paleta)	Arquivo Design System 2.0	Design
Style Dictionary / DTCG	JSON ($type/$value/$ref)	tokens/seeds.tokens.json (semente) e tokens/resolved.tokens.json (escala inteira, gerado)	Tooling, outras plataformas
CSS	Custom properties (--mds-colors-*)	src/scss/themes/_light.scss / _dark.scss (região gerada)	Todo consumo em produção (mds-styles, mds-angular)

Escopo atual

Só a camada de cor passa pelas três formas hoje. Tipografia, espaçamento, elevação e raio (ver Tipografia, Layout & Espaçamento etc.) continuam só em CSS, escritos à mão — sem semente no Figma, sem JSON gerado.

E o Style Dictionary em si — a ferramenta — ainda não está no pipeline: scripts/tokens/build-tokens.js gera o SCSS diretamente. O JSON já nasce num formato compatível (DTCG) de propósito, pra isso ser plugado depois sem reformatar nada. Detalhes em “Próximos passos”, em Geração de Cores.

O mesmo token, nas três formas

Exemplo real — a cor primary/main (semente _Brand-Boffice no Figma, paleta brand-mobiis no código):

Figma — variável de semente, coleção _Primitives:

_Brand-Boffice = #408AFA

Colors — Figma (Design System 2.0) ↗

Style Dictionary / DTCG — tokens/resolved.tokens.json (gerado; note o $ref, que é o alias semântico apontando pra paleta):

// palettes.brand-mobiis.main (a paleta em si)
"main": { "$type": "color", "$value": "#408afa" }

// semantic.primary.main (o papel semântico — referencia a paleta acima)
"main": { "$type": "color", "$ref": "palettes.brand-mobiis.main" }

CSS — o que o navegador de fato lê, src/scss/themes/_light.scss:

--mds-colors-palettes-brand-mobiis-main: #408afa;
--mds-colors-primary-main: var(--mds-colors-palettes-brand-mobiis-main);

Exportar um token em qualquer formato

O Gerenciador de Tokens tem uma aba de exportação que gera o mesmo token nos formatos Figma (Variables JSON) e DTCG (o mesmo shape de resolved.tokens.json) — útil pra conferir o formato exato antes de propor uma mudança, sem precisar rodar o build:

Gerenciador de Tokens — inclui exportação Figma/DTCG ao vivo ↗

Arquivos

• tokens/seeds.tokens.json — a única coisa editada à mão (1 hex por paleta); sincronizada do Figma como descrito em Geração de Cores.
• tokens/resolved.tokens.json — gerado por npm run tokens; toda a escala (lighter…darker + on-*) resolvida, formato DTCG.
• tokens/_Primitives.tokens.json, tokens/Mobiis.tokens.json, tokens/Mobiis-dark.tokens.json — exports antigos do Figma (2026-06-09), desatualizados em relação ao arquivo Figma ao vivo; não usar como fonte, só o histórico. A fonte real de sementes é tokens/seeds.tokens.json + o Figma.