We scored 30 real websites against a 40-check design contract. Here is what we found.

[LE-VAI]

We scored 30 real websites against a 40-check design-system contract — tokens, motion, accessibility, cadence, takt, poise, identity, interaction, performance, responsive, semantic, security, spec, and copywriting. No LLM, no heuristics. Every check is deterministic and reproducible.

The results were worse than we expected.

The headline

Metric	Value
Sites scored	30
Score range	37.9 – 100.0
Mean score	62.2
Median score	62.4
Grade A	1 site (3%)
Grade B	0 sites (0%)
Grade C	6 sites (20%)
Grade D	11 sites (37%)
Grade F	12 sites (40%)

60% of sites scored D or F. Zero sites scored a B. The gap between "looks good" and "passes a deterministic design contract" is enormous.

What "pass" looks like

Across 30 sites × 40 checks = 1,110 total checks:

Result	Count	%
Pass	411	37.0%
Warn	506	45.6%
Fail	118	10.6%
Skip	75	6.8%

More checks warn than pass. A "warn" means the check detected something partial — a token file exists but uses bare hex instead of structured color, or reduced-motion is present but not tiered. The industry is in a half-adopted state.

Where sites fail the most

Dimension	Avg score	Sites below 50
Tokens	40.8	11/30
Motion	52.5	11/30
Takt	50.8	3/30
Accessibility	58.4	4/30
Interaction	60.0	12/30
Cadence	60.1	3/30
Poise	75.0	0/30
Identity	83.3	0/30

Tokens (avg 40.8 — the worst dimension)

11 of 30 sites score below 50 on token compliance. The common failures:

• Bare hex colors instead of structured tokens ($type: color with colorSpace + components)
• No $schema pointer — token files don't declare which spec they conform to
• Magic numbers in spacing/radius instead of a named scale
• No dark-mode surface tokens — sites that have dark mode but don't structure their surfaces as lightness-stepped tokens

This is the W3C DTCG 2025.10 gap. The spec went stable in October 2025, and 84% of teams say they use design tokens — but most are using them informally, not in a conformant format.

Motion (avg 52.5 — second worst)

11 of 30 sites score below 50 on motion. The common failures:

• No reduced-motion path — prefers-reduced-motion is either absent or a kill switch
• No easing tokens — sites use 15 different cubic-beziers instead of a 4-token easing scale
• Layout animation — animating width, height, top, left instead of transform/opacity
• No duration scale — every transition is a different magic-number duration

Apple's HIG is the reference here — they tier reduced-motion (completely remove, soften, or keep) instead of treating accessibility as a binary kill switch. Only 1 site in our sample does this correctly.

The top 5

Rank	Score	Grade	Site	Notable
1	100.0	A	Designesy	Self-scored — transparency earns trust
2	77.7	C	Apple	Tiered reduced-motion reference
3	77.6	C	GitHub Primer	518 tokens — most in the sample
4	73.8	C	zeroheight	Design-system documentation tool
5	73.6	C	Vercel	Clean token + motion baseline

No site scored a B. The jump from C (top non-self score: 77.7) to A (100) is 22 points — that's the gap between "has tokens but uses bare hex" and "has structured DTCG-conformant tokens with a $schema pointer and colorSpace."

The bottom 5

Rank	Score	Grade	Site	Why
26	49.4	F	Adobe Spectrum	Tokens exist but not DTCG-conformant; motion not tiered
27	50.3	F	Vercel Geist	Vercel's own design system scores lower than their marketing site
28	41.1	F	Pentagram	Agency site — beautiful but zero token/motion structure
29	41.1	F	FWA	Inspiration gallery — awards "good design" but fails the contract
30	37.9	F	CSS Design Awards	Same irony as FWA

The bottom 5 tells a story: the sites that award "good design" fail a deterministic design contract.

The Geist vs. Vercel split

The most interesting finding: Vercel's marketing site (vercel.com) scores 73.6 (C) while Vercel's design system (geist.dev) scores 50.3 (F). The marketing site outperforms the design system by 23 points. Marketing teams optimize for visual polish. Design system teams optimize for API stability. The contract rewards the former.

What this means

1. Design tokens are half-adopted. Everyone has them; few have them in a conformant format.
2. Motion accessibility is the biggest gap. 11/30 sites score below 50 on motion.
3. "Good design" is not "systematic design." The sites that win design awards fail design contracts.
4. No one has a B. The transition from "informal tokens" to "DTCG-conformant tokens" is a cliff, not a slope.

Try it

# Score any URL in 5 seconds:
npx designesy-score@latest https://your-site.com

# Or use the MCP server:
claude mcp add designesy --transport http https://www.designesy.org/api/mcp

# See the full leaderboard:
open https://www.designesy.org/leaderboard

The scoring engine is deterministic, open, and free. No API key, no auth. The methodology is published, the contract is public, and the GitHub Action gates your CI on the same 40 checks.

---

Designesy is a design-system contract verification engine. 40 deterministic checks, A–F grade, DTCG token validation, WCAG 2.2 AA accessibility, Lottie motion validation. designesy.org.