Why DTCG matters in 2026
The W3C Design Tokens Community Group format has become the lingua franca for token interchange. Authoring your color tokens in DTCG today means you can move between Figma Variables, Tokens Studio, Style Dictionary, Specify and Adobe Spectrum without rewriting your source. Anything you ship in HEX-only or in a vendor-specific shape locks you in - DTCG keeps the door open.
Output shape
{
"color": {
"brand": {
"50": { "$type": "color", "$value": { "colorSpace": "oklch", "components": [0.97, 0.02, 290], "alpha": 1 } },
"500": { "$type": "color", "$value": { "colorSpace": "oklch", "components": [0.65, 0.21, 290], "alpha": 1 } },
"950": { "$type": "color", "$value": { "colorSpace": "oklch", "components": [0.16, 0.06, 290], "alpha": 1 } }
},
"text": {
"primary": { "$type": "color", "$value": "{color.brand.950}" },
"muted": { "$type": "color", "$value": { "colorSpace": "oklch", "components": [0.55, 0, 0], "alpha": 1 } }
},
"surface": {
"default": { "$type": "color", "$value": "{color.brand.50}" },
"raised": { "$type": "color", "$value": "#ffffff" }
},
"action": {
"primary": { "$type": "color", "$value": "{color.brand.500}" }
}
}
}Style Dictionary in 30 lines
// build.js
const StyleDictionary = require('style-dictionary');
StyleDictionary.extend({
source: ['tokens/**/*.json'],
platforms: {
css: { transformGroup: 'css', buildPath: 'dist/', files: [{ destination: 'tokens.css', format: 'css/variables' }] },
js: { transformGroup: 'js', buildPath: 'dist/', files: [{ destination: 'tokens.js', format: 'javascript/es6' }] },
ios: { transformGroup: 'ios', buildPath: 'dist/', files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift', className: 'Tokens' }] },
},
}).buildAllPlatforms();Best practices
- Always set
$type. Auto-detection is fragile across tools. - Group by role, not by color.
color.text.primary, notcolor.gray.900. - Use
$descriptiongenerously. Self-documenting tokens prevent misuse. - Author OKLCH first. HEX exports are derivative; authoring HEX is one-way.
- Two tiers. Reference layer (numeric ramps) + semantic layer (action.primary). Components consume only semantic.
FAQ
What is the W3C DTCG format?
The Design Tokens Community Group format is a draft standard JSON shape for design tokens, supported by Figma Variables, Tokens Studio, Style Dictionary, Specify and most modern tooling.
Why two layers of tokens (reference + semantic)?
Reference tokens (color.brand.500) hold raw values; semantic tokens (color.action.primary) hold meaning. Components consume only semantic - so a rebrand only edits reference, leaving every component file untouched.
How do I generate light + dark mode?
Tokens Studio supports themes via sibling files (light.json, dark.json, $themes.json). Style Dictionary supports modes via separate token sets resolved at build time.
Will OKLCH values work in older tools?
Yes. Style Dictionary and Tokens Studio both convert OKLCH down to sRGB HEX at export time; tools that support wide-gamut emit color(display-p3 ...) automatically.