A token set, with the references kept
Primitives and semantic aliases in DTCG, exported to eleven formats — with the ones that cannot express a reference saying so.
A token set, with the references kept
Primitives and semantic aliases in DTCG 2025.10 — exported to eleven formats, with the ones that cannot express a reference saying so rather than flattening it quietly.
The tokens
Export
Primitives, semantics, and why the layer matters
A primitive is a raw value: brand.500 is a particular blue. A semantic token is a reference to one: color.action points at brand.500.
Components use the semantic layer. Changing the brand then moves everything coherently, and a dark theme reassigns the semantic tokens without touching a single component.
A system with only primitives is a palette with extra steps: every component names a specific blue, and changing it means finding all of them.
Some formats cannot express a reference. CSS, SCSS and Less can — var(), $name, @name. JSON, TypeScript, Swift and the rest have to flatten, and this says so at export rather than losing it silently.
DTCG is the interoperable format
The Design Tokens Community Group format is what Figma variables, Style Dictionary and most token tooling now read and write. A file with $type, $value and brace references moves between them; a bespoke JSON shape does not.
Do not over-tokenise
A token for every value in the design is a second copy of the CSS with worse tooling. Tokens earn their place where a value is used in several places and might change — colours, spacing, type, radii, shadows. A one-off margin is a one-off margin.