Export a website's design tokens as W3C DTCG JSON

October 24, 2026

3 min readFree, open source, no account

Style Dictionary and Tokens Studio used to expect different shapes for the same idea. Both have moved toward the W3C Design Tokens Community Group (DTCG) format instead: a JSON tree where every token is { "$value": ..., "$type": "..." }. enrichr-cli writes a live website's measured design in exactly that shape, as a free, MIT-licensed, one-line command.

What the format looks like

Every token is named once and typed once. A trimmed excerpt from a real run:

{
  "$description": "Measured from https://example.com by enrichr-cli 0.1.0 on 2026-10-24.",
  "color": {
    "accent": { "$value": "#533afd", "$type": "color" },
    "palette-1": { "$value": "#e5edf5", "$type": "color" }
  },
  "fontFamily": {
    "base": { "$value": ["Inter", "system-ui", "sans-serif"], "$type": "fontFamily" }
  },
  "fontSize": {
    "base": { "$value": "16px", "$type": "dimension" },
    "xl": { "$value": "24px", "$type": "dimension" }
  },
  "spacing": {
    "4": { "$value": "16px", "$type": "dimension" }
  },
  "shadow": {
    "1": { "$value": { "color": "rgba(0,0,0,.1)", "offsetX": "0px", "offsetY": "4px", "blur": "6px", "spread": "-1px" }, "$type": "shadow" }
  }
}

Up to eight groups come out, each only if the page has something to put in it: color, fontFamily, fontSize, spacing, borderRadius, shadow, duration and cubicBezier. A page with no CSS transitions simply has no duration group, rather than an empty or invented one.

Where the token names come from

Names describe rank or size, the same scheme the CLI's CSS and Tailwind outputs use, so all three agree with each other: accent, palette-1 through palette-10 for colors ranked by how much of the page they cover; base, sm, xl and so on for the type scale, anchored on whichever size carries the most body text near 16px; 1 through 5 for shadows, softest first. None of that is the designer's intent — it is a measurement, labelled by what was measured. If you want the site's own variable names instead ( --color-text-secondary rather than palette-3), use -f json, which includes them under customProperties, or -f css --site-vars for a stylesheet that keeps them.

Loading it into Style Dictionary

Style Dictionary 4 reads the DTCG shape directly. Save the output as a source file and point a config at it:

npx enrichr-cli tokens example.com -f dtcg -o tokens/example.json

// style-dictionary.config.js
export default {
  source: ["tokens/example.json"],
  platforms: {
    css: { transformGroup: "css", buildPath: "build/", files: [{ destination: "variables.css", format: "css/variables" }] }
  }
};

If you are still on Style Dictionary 3, its value shape is different (no $value/$type wrapper); either run Style Dictionary's own DTCG-conversion step first, or move to v4, which is the direction the tool itself is going.

Loading it into Tokens Studio

Tokens Studio's Figma plugin imports DTCG JSON as a new token set: open the plugin, choose Import, select the file this command wrote, and it appears as a token set you can apply to Figma variables or styles. From there it behaves like any other Tokens Studio set — you can rename, group or merge it with tokens you already have.

What does not convert

The shadow and cubicBezier groups are the two that can fail to parse. A box-shadow or transition-timing-function value has to match a syntax the CLI recognizes (a plain color plus four lengths for a shadow; cubic-bezier(x1, y1, x2, y2) for easing) to be included. A value in a form it does not recognize is left out of that group entirely, rather than included as a guess, so an empty or partial shadow group means exactly that: some shadows on the page did not match the parser, not that none exist.

For the full command reference including the -f tailwind and -f css formats, see the Enrichr CLI page. For how DTCG compares to what other free design-token tools write, see Enrichr vs designlang and extract-design-system.

FAQ