All 141 tools / Design systems and tokens

Score a design system out of 100 across tokens, scales, components, states and contrast, with the formula

Design system health scoreFreeFor designers, developers and product teams

15/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.

css:
  :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.

# Design system health: 60/100 (uneven)

## Formula

Score = 100 x points earned / points available, over the areas that could be measured. Weights: tokens 25, scales 25, components 20, state coverage 20, contrast 10.

| Area | Points | Out of | Basis |
|---|---|---|---|
| Tokens | 8.01 | 25 | 19% of colour, size, spacing, radius and shadow declarations go through a variable (full marks at 60%); 8 custom properties defined (full marks at 8) |
| Scales | 23.25 | 25 | mean of colour 100%, type 100%, spacing 72%, radius 100% |
| Components | 14 | 20 | 3 component families found; penalty 0.20 per high, 0.10 per medium, 0.03 per low inconsistency (0 high, 3 medium, 0 low) |
| State coverage | 8.32 | 20 | 3 interactive components weighted focus-visible 0.5, hover 0.25 (0.1 for inputs), pressed and disabled 0.1; minus 0.15 per outline removed without a replacement (1 found) |
| Contrast | 6.67 | 10 | 2 of 3 text and background pairs reach 4.5:1 (pairs set in the same rule, plus any you stated) |
... full output on the tool page

What you get

A weighted score with a points table, the basis for each area, and the findings behind it

What it cannot do

Scores what the stylesheet shows; weights are fixed and printed, so treat the number as a trend, not a verdict.

Who it is for

Designers
Developers
Product teams

Free and Pro

Free	15 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 score_design_system. 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-system-health -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; } }","pairs":"#767676 on #ffffff\n#1a1a1a on #fafaf7"}'

Try it here

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

Page URL (Pro reads every linked stylesheet)Or paste CSS

: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; }
.btn { padding: 10px 18px; border-radius: var(--radius); background: var(--accent); color: #fff; border: 0; outline: none; transition: background 180ms var(--ease); }
.btn:hover { background: #c9441f; }
.button-secondary { padding: 9px 16px; border-radius: 4px; border: 1px solid #1a1a1a; background: transparent; }
.card { padding: 20px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.12); margin-bottom: 15px; }
a { color: var(--accent); }
a:hover { text-decoration: underline; }
@media (min-width: 768px) { .card { padding: 28px; } }

Stated pairs, one per line: #767676 on #ffffff