Designers
ToolsDocsProAll the Possibles

All 141 tools / Design systems and tokens

Lint design token names for mixed separators, colour-based names, duplicate values and uneven scales.

Token namesFreeFor designers and developers

30/day

free runs a day, no sign-in.

Before: what you give it

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

--blue-500: #3b82f6;
--color-bg-card: #ffffff;
--header-blue: #3b82f6;
--bg-primary: #ffffff;
--background-muted: #eeeeee;
--btn_new: #112233;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-5: 20px;
--space-9: 36px

After: what comes back

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

11 tokens, separator style kebab, 9 role-named and 2 hue-named. 1 high, 3 medium, 2 low.

HIGH   names mix separators (kebab 10, snake 1); keep one (kebab is most used)
MEDIUM header-blue: named for where it is used, not what it does; the same colour will be needed elsewhere
MEDIUM btn_new: contains a version or status word (new, old, temp); tokens outlive the redesign that coined them
MEDIUM both bg and background appear; pick one word
LOW    blue-500: 2 tokens share the value #3b82f6 (blue-500, header-blue); fine if one aliases the other, a drift risk if they are separate
LOW    color-bg-card: 2 tokens share the value #ffffff (color-bg-card, bg-primary); fine if one aliases the other, a drift risk if they are separate

A good token name says what the token is for (color.text.muted), not what it looks like. Pair this with check_contrast_tokens to test the values.

What you get

Findings ranked high to low, each naming the token and the problem, with the dominant separator style

What it cannot do

Judges names against general conventions, not your own system's rules.

Who it is for

  • Designers
  • Developers

Free and Pro

Free30 runs a day per IP address, up to 20,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 lint_token_names. 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-names -H 'content-type: application/json' -d '{"text":"--blue-500: #3b82f6;\n--color-bg-card: #ffffff;\n--header-blue: #3b82f6;\n--bg-primary: #ffffff;\n--background-muted: #eeeeee;\n--btn_new: #112233;\n--space-1: 4px;\n--space-2: 8px;\n--space-3: 12px;\n--space-5: 20px;\n--space-9: 36px"}'

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