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
DTCG	JSON no formato DTCG 2025.10 ($type/$value, aliases {...})	tokens/seeds/ (sementes) e tokens/dtcg/ (todos os tokens, gerado)	Tooling, Style Dictionary, outras plataformas
CSS	Custom properties (--mds-*)	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 nasce de sementes do Figma e é calculada. Tipografia, espaçamento, elevação e raio (ver Tipografia, Layout & Espaçamento etc.) continuam escritos à mão em CSS. Mesmo assim, todos os tokens aparecem no export DTCG, porque ele é lido do CSS compilado (ver Baixar os tokens).

O Style Dictionary ainda não gera o CSS de produção: scripts/tokens/build-tokens.js escreve o SCSS diretamente. O export DTCG é o caminho para outras plataformas (React/MUI, mobile) consumirem os mesmos valores. 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) ↗

DTCG — mds.tokens.json (gerado; o papel semântico é um alias {...} que aponta para a paleta):

// mds.colors.palettes.brand-mobiis.main (a paleta em si)
"main": {
  "$type": "color",
  "$value": { "colorSpace": "srgb", "components": [0.251, 0.5412, 0.9804], "hex": "#408afa" }
}

// mds.colors.primary.main (o papel semântico, que referencia a paleta acima)
"main": { "$type": "color", "$value": "{mds.colors.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);

Baixar os tokens (DTCG)

Todos os tokens do MDS (cores, tipografia, espaçamento, raio, blur, breakpoints e os tokens de componente: botões, controles, menus, destaques) estão disponíveis no formato DTCG 2025.10, o padrão do W3C Design Tokens Community Group. Ferramentas como o Style Dictionary, o Tokens Studio e o Figma leem esse formato.

Arquivo	Conteúdo
mds.tokens.json	Tema claro e todos os tokens que não são cor (518 tokens). É o arquivo base.
mds.dark.tokens.json	Sobrescritas do tema escuro ([data-theme="dark"]).
mds.dark-blue.tokens.json	Sobrescritas do tema escuro navy ([data-theme="dark-blue"]).
mds.resolver.json	Resolver DTCG: combina o base com o tema light, dark ou dark-blue.

Como os arquivos estão organizados

• Nome do token = caminho no JSON. mds.colors.primary.main vira --mds-colors-primary-main no CSS (é só juntar o caminho com hífens, o que o Style Dictionary faz com a transformação css padrão, sem configuração).
• Aliases preservam a cadeia semântica. Todo var(--mds-x) do CSS vira {mds.x} no JSON. Por isso primary, background, buttons etc. continuam apontando para a paleta, e não para um hex copiado.
• Valores no formato estável do DTCG. Cor é um objeto (colorSpace, components, alpha quando houver transparência, hex). Dimensão é { "value": 16, "unit": "px" }. Os pesos usam fontWeight e a família usa fontFamily (lista de fontes).
• Temas são sobrescritas. mds.dark.tokens.json e mds.dark-blue.tokens.json trazem só o que muda em relação ao claro e usam aliases para tokens do arquivo base. Aplique sempre o base primeiro e o tema por cima. O mds.resolver.json descreve exatamente essa combinação (módulo Resolver do DTCG).
• color-mix() vira valor literal. O DTCG não tem mistura de cores. O token colors.ui.interactive-disabled-text dos temas escuros traz o valor já resolvido e guarda a expressão CSS original em $extensions["com.mobiis.mds"].css.
• Troca de primária fora do export. Os blocos [data-primary="<paleta>"] só reapontam --mds-colors-primary-* para outra paleta em tempo de execução, e não entram nos arquivos.

Usar com o Style Dictionary

import StyleDictionary from 'style-dictionary';

// Tema escuro: base + sobrescritas (o último arquivo vence; o aviso de colisão é esperado).
const sd = new StyleDictionary({
  source: ['mds.tokens.json', 'mds.dark.tokens.json'],
  platforms: {
    js: { transformGroup: 'js', buildPath: 'build/', files: [{ destination: 'tokens.js', format: 'javascript/es6' }] },
  },
});
await sd.buildAllPlatforms();

De onde vêm os arquivos

npm run tokens:dtcg compila src/scss/mds-styles.scss e converte cada --mds-* de :root e de [data-theme="…"] em DTCG (scripts/tokens/build-dtcg.js). O resultado fica em tokens/dtcg/ e é copiado para os downloads desta página. npm run tokens já roda esse passo, e npm run tokens:verify falha se os arquivos estiverem desatualizados. Rodados pelo Style Dictionary, os arquivos reproduzem os 518 valores do CSS compilado nos três temas.

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 — ú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/color.seeds.tokens.json — a única coisa editada à mão (1 hex por paleta); sincronizada do Figma como descrito em Geração de Cores.
• tokens/generated/color.tokens.json e color.dark*.tokens.json — gerados por npm run tokens; toda a escala de cor (lighter…darker + on-*) resolvida.
• tokens/dtcg/ — gerado por npm run tokens:dtcg; todos os tokens em DTCG 2025.10 (os mesmos arquivos de Baixar os tokens).
• 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/color.seeds.tokens.json + o Figma.