All 141 tools / Design systems and tokens

Convert W3C design tokens JSON into CSS custom properties and a Tailwind theme

Design tokens to CSSFreeFor developers and designers

15 min

saved on a typical run. Our estimate, against rewriting each token as a CSS variable by hand.

Before: what you give it

The example input, as typed in. You give it structured JSON.

{
  "color": {
    "$type": "color",
    "ink": {
      "$value": "#1a1a1a"
    },
    "accent": {
      "$value": "#e4572e"
    },
    "link": {
      "$value": "{color.accent}"
    }
  },
  "space": {
    "$type": "dimension",
    "s2": {
      "$value": "8px"
    },
    "s3": {
      "$value": "16px"
    }
  },
  "radius": {
    "$type": "dimension",
    "base": {
      "$value": "6px"
    }
  },
  "font": {
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Source Serif 4",
        "Georgia",
        "serif"
      ]
    }
  }
}

After: what comes back

The first lines of a real run on that input. Nothing here is edited by hand.

# Design tokens to CSS

7 CSS variables from 3 color, 3 dimension, 1 fontFamily.

## CSS

```css
:root {
  --color-ink: #1a1a1a;
  --color-accent: #e4572e;
  --color-link: var(--color-accent);
  --space-s2: 8px;
  --space-s3: 16px;
  --radius-base: 6px;
... full output on the tool page

What you get

A :root block with var() aliases kept, a Tailwind theme block, and a count of tokens by type

What it cannot do

Covers the DTCG types it lists (colour, dimension, duration, font, shadow, border, transition, typography); others are not converted.

Who it is for

Developers
Designers

Free and Pro

Free	25 runs a day per IP address, up to 100,000 characters a run.
Pro	No daily limit, 300 requests a minute, up to 200,000 characters a run.

What each plan includes

Use it from your assistant

The tool is called dtcg_to_css. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.

claude mcp add --transport http designers https://designers.allthepossibles.com/mcp

curl -X POST https://designers.allthepossibles.com/api/dtcg-to-css -H 'content-type: application/json' -d '{"tokens":"{\n  \"color\": {\n    \"$type\": \"color\",\n    \"ink\": {\n      \"$value\": \"#1a1a1a\"\n    },\n    \"accent\": {\n      \"$value\": \"#e4572e\"\n    },\n    \"link\": {\n      \"$value\": \"{color.accent}\"\n    }\n  },\n  \"space\": {\n    \"$type\": \"dimension\",\n    \"s2\": {\n      \"$value\": \"8px\"\n    },\n    \"s3\": {\n      \"$value\": \"16px\"\n    }\n  },\n  \"radius\": {\n    \"$type\": \"dimension\",\n    \"base\": {\n      \"$value\": \"6px\"\n    }\n  },\n  \"font\": {\n    \"body\": {\n      \"$type\": \"fontFamily\",\n      \"$value\": [\n        \"Source Serif 4\",\n        \"Georgia\",\n        \"serif\"\n      ]\n    }\n  }\n}"}'

Try it here

The form starts with the same example input, so you can run it first and then swap in your own.

W3C design tokens JSONFormatOptional prefix