tokens.css
The zero-code integration. A <link rel="stylesheet"> is a complete one.
assetSettings.prefix rather than assuming it is empty.
It is a lossy projection, and it says so in the file. CSS has no token types, no groups and no
descriptions, and several DTCG values have no CSS spelling at all — a stroke style with a dash
array, a colour in a space CSS cannot name.A token that cannot be written becomes a comment naming its path, rather than being dropped
silently or guessed at. Diff the stylesheet against your tokens and you can see exactly what is
missing and why.
tokens.json
The full DTCG document, resolved: the tree, the groups, $type, $description, $extensions, and
every alias replaced by the value it pointed at.
Use it when you want the structure and the metadata — building a theme editor of your own, or driving
a token pipeline that cares about types.
tokens.dtcg.json
The same document with aliases left as written.
tokens.flat.json
tokens.values.json
var() — they need a real value — so they get this file instead of tokens.css.
Which files your Theme builds
Decided by the library half of each integration pair:
A Theme with several integrations builds the union. Adding an integration builds the extra files on
the next materialisation; removing one deletes the files nothing else needs, for every published
version.
MUI, Vuetify, PrimeVue and PrimeNG are placed on
tokens.values.json conservatively — chosen
because those libraries have historically computed on values, not verified against each library’s
current version. If yours accepts var() throughout, ask us to move it; it is a one-line change
and costs you a smaller payload.Content types
Plain
application/json, not the application/design-tokens+json the DTCG spec suggests. That
type is not IANA-registered, and fetch().json() and every CDN’s compression rule key on the plain
one.