Designers
ToolsDocsProAll the Possibles

All 141 tools / Design systems and tokens

Compare design tokens with code variables and list what is missing, mismatched or hard-coded.

Design drift checkFreeFor developers and designers

30 min

saved on a typical run. Our estimate, against comparing the token export and the stylesheet side by side by hand.

Before: what you give it

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

design:
  {
    "color": {
      "$type": "color",
      "brand": {
        "primary": {
          "$value": "#1d4ed8"
        },
        "accent": {
          "$value": "#f97316"
        }
      },
      "text": {
        "body": {
          "$value": "#1f2937"
        }
      },
      "surface": {
        "page": {
          "$value": "#ffffff"
        },
        "muted": {
          "$value": "#f3f4f6"
        }
      },
      "border": {
        "subtle": {
          "$value": "#e5e7eb"
        }
      }
    },
    "space": {
      "$type": "dimension",
      "sm": {
...

After: what comes back

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

# Design token drift

24 findings: 1 high, 17 medium, 6 low. Read 10 design tokens and 10 code tokens; 8 matched by name.

## High

**value mismatch** (1)
- space.md is 16px in design and 1.25rem in code (--space-md); 4px apart after converting rem at 16px.

## Medium

**missing in code** (2)
- color.border.subtle (#e5e7eb) is in the design tokens but code has no matching variable.
- space.lg (24px) is in the design tokens but code has no matching variable.
... full output on the tool page

What you get

Findings by severity: tokens missing on either side, value mismatches, rename candidates, near-duplicates

What it cannot do

Free tier reads up to 100,000 characters per side; it compares what is written in the files, not what renders.

Who it is for

  • Developers
  • Designers

Free and Pro

Free20 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 check_design_drift. 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/design-drift -H 'content-type: application/json' -d '{"design":"{\n  \"color\": {\n    \"$type\": \"color\",\n    \"brand\": {\n      \"primary\": {\n        \"$value\": \"#1d4ed8\"\n      },\n      \"accent\": {\n        \"$value\": \"#f97316\"\n      }\n    },\n    \"text\": {\n      \"body\": {\n        \"$value\": \"#1f2937\"\n      }\n    },\n    \"surface\": {\n      \"page\": {\n        \"$value\": \"#ffffff\"\n      },\n      \"muted\": {\n        \"$value\": \"#f3f4f6\"\n      }\n    },\n    \"border\": {\n      \"subtle\": {\n        \"$value\": \"#e5e7eb\"\n      }\n    }\n  },\n  \"space\": {\n    \"$type\": \"dimension\",\n    \"sm\": {\n      \"$value\": \"8px\"\n    },\n    \"md\": {\n      \"$value\": \"16px\"\n    },\n    \"lg\": {\n      \"$value\": \"24px\"\n    }\n  },\n  \"radius\": {\n    \"$type\": \"dimension\",\n    \"card\": {\n      \"$value\": \"12px\"\n    }\n  }\n}","code":":root {\n  --color-brand-primary: #1e4fd6;\n  --color-brand-accent: #f97316;\n  --color-text-body: #1f2937;\n  --color-surface-page: #ffffff;\n  --color-surface-muted: #f4f4f5;\n  --color-ink: #1f2937;\n  --color-blue-main: #1d4ed8;\n  --space-sm: 8px;\n  --space-md: 1.25rem;\n  --radius-card: 12px;\n}\n\n.card { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 12px; padding: 15px; }\n.btn { background: #1d4ed8; color: #fff; padding: 8px 24px; }\n.link { color: #1c4cd5; }\n.note { color: #1f2937; margin-top: 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