Designers
ToolsDocsProAll the Possibles

All 141 tools / Design systems and tokens

Turn CSS custom properties into W3C design tokens JSON, typed, grouped and aliased

CSS to design tokensFreeFor developers and designers

15 min

saved on a typical run. Our estimate, against retyping each custom property into token JSON by hand.

Before: what you give it

The example input, as typed in. You paste text, CSS, markup or notes.

:root {
  --ink: #1a1a1a;
  --paper: #fafaf7;
  --accent: #e4572e;
  --accent-hover: var(--accent);
  --space-2: 8px;
  --radius: 6px;
  --font-body: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}
@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }
body { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }
h1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }
h2 { font-size: 30px; margin: 32px 0 12px; }
small { font-size: 13px; }
...

After: what comes back

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

# CSS to design tokens

8 tokens written from 8 custom properties.

## Tokens

```json
{
  "color": {
    "accent": {
      "$type": "color",
      "$value": "#e4572e",
      "$extensions": {
        "com.allthepossibles.css": {
... full output on the tool page

What you get

DTCG JSON grouped by type, var() references as aliases, dark values and original names kept in extensions

What it cannot do

Types are guessed from each value and name, so check the ones it could not classify.

Who it is for

  • Developers
  • Designers

Free and Pro

Free25 runs a day per IP address, up to 100,000 characters a run.
ProNo 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 css_to_dtcg. 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/css-to-dtcg -H 'content-type: application/json' -d '{"css":":root {\n  --ink: #1a1a1a;\n  --paper: #fafaf7;\n  --accent: #e4572e;\n  --accent-hover: var(--accent);\n  --space-2: 8px;\n  --radius: 6px;\n  --font-body: \"Source Serif 4\", Georgia, serif;\n  --ease: cubic-bezier(0.2, 0, 0, 1);\n}\n@media (prefers-color-scheme: dark) { :root { --ink: #f2f2ee; --paper: #141414; } }\nbody { font: 400 17px/1.55 var(--font-body); color: var(--ink); background: var(--paper); }\nh1 { font-size: 48px; line-height: 1.05; margin: 0 0 24px; }\nh2 { font-size: 30px; margin: 32px 0 12px; }\nsmall { font-size: 13px; }\n.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }\n.btn:hover { background: #c9441f; }\n.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }\n.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }\na { color: var(--accent); }\na:hover { text-decoration: underline; }\n@media (min-width: 768px) { .card { padding: 28px; } }"}'

Try it here

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

More in design systems and tokens

All design systems and tokens tools