Designers
ToolsDocsProAll the Possibles

All 141 tools / Design systems and tokens

Compare two token sets and classify the change as breaking, minor or patch, with renames detected

Token drift compareFreeFor designers and developers

20 min

saved on a typical run. Our estimate, against diffing two token files line by line and judging each change.

Before: what you give it

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

before: :root { --ink: #1a1a1a; --accent: #e4572e; --space-2: 8px; --radius: 6px; }
after: :root { --ink: #1c1c1c; --brand: #e4572e; --space-2: 12px; --radius: 6px; --space-3: 16px; }

After: what comes back

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

# Token drift: breaking

4 tokens before (CSS), 5 after (CSS). 1 added, 0 removed, 1 renamed, 2 changed.

Class rules: breaking = removed or renamed token, type change, colour moved by deltaE 25 or more, size changed by half or more. Minor = new token, visible colour or size change. Patch = colour under deltaE 2, size within 1px.

| Token | Change | Before | After | Class | Reason |
|---|---|---|---|---|---|
| --accent | renamed | --accent | --brand | breaking | renamed to --brand with the same value; anything that uses the old name breaks |
| --space-2 | changed | 8px | 12px | breaking | 8px to 12px, a 50% change that reflows layouts |
| --space-3 | added |  | 16px | minor | new token |
| --ink | changed | #1a1a1a | #1c1c1c | patch | colour moved by deltaE 1, below what the eye separates |

Limits: this reads the CSS text it was given. Styles injected by JavaScript, computed styles, inline style attributes and values behind an unresolved var() or calc() are not seen. Counts are declarations in the stylesheet, not elements on screen.

What you get

Added, removed, renamed and changed tokens, the overall class, and the rules used to decide it

What it cannot do

Matches tokens by name and value only; it cannot see where a token is used downstream.

Who it is for

  • Designers
  • Developers

Free and Pro

Free15 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 compare_token_sets. 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/token-drift -H 'content-type: application/json' -d '{"before":":root { --ink: #1a1a1a; --accent: #e4572e; --space-2: 8px; --radius: 6px; }","after":":root { --ink: #1c1c1c; --brand: #e4572e; --space-2: 12px; --radius: 6px; --space-3: 16px; }"}'

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