Last week we scored 30 real websites against a 40-check design contract. 60% scored D or F. Zero scored a B.
People asked: what about the dev tools? The frameworks, the design-system libraries, the AI site builders — the tools that developers use to build the sites we already scored. Surely they score better than Pentagram and FWA?
No. They score worse.
The batch
We scored 16 dev-tool and framework sites against the same 40-check deterministic contract — tokens, motion, accessibility, cadence, takt, poise, interaction, performance. Every check is reproducible. No LLM, no heuristics.
| Rank | Score | Grade | Site | What they do |
|---|---|---|---|---|
| 1 | 64.6 | D | netlify.com | Hosting platform |
| 2 | 64.0 | D | ui.shadcn.com | Component library |
| 3 | 63.0 | D | sanity.io | CMS |
| 4 | 63.0 | D | clerk.com | Auth platform |
| 5 | 63.0 | D | v0.dev | AI site builder (Vercel) |
| 6 | 62.0 | D | cursor.com | AI code editor |
| 7 | 60.0 | D | supabase.com | Backend platform |
| 8 | 59.1 | F | resend.com | Email API |
| 9 | 58.0 | F | astro.build | Web framework |
| 10 | 56.5 | F | tailwindcss.com | CSS framework |
| 11 | 56.5 | F | framer.com | Motion/design tool |
| 12 | 54.0 | F | svelte.dev | Web framework |
| 13 | 52.0 | F | webflow.com | No-code site builder |
| 14 | 52.0 | F | react.dev | UI library docs |
| 15 | 42.0 | F | bun.sh | JS runtime docs |
| 16 | 39.1 | F | tokens.studio | Design token tool |
The highest score in this batch is 64.6 (D). The highest score in the original batch was 100 (A, self-scored) and 77.7 (C, Apple). Not a single dev-tool site reached C.
The new batch is worse than the original
| Grade | Original 30 | New 16 |
|---|---|---|
| A | 1 (3%) | 0 (0%) |
| B | 0 (0%) | 0 (0%) |
| C | 6 (20%) | 0 (0%) |
| D | 11 (37%) | 7 (44%) |
| F | 12 (40%) | 9 (56%) |
56% of dev-tool sites scored F — compared to 40% of the original sample. Zero new sites reached C. The dev tools are worse than the design awards.
For reference: FWA scored 41.1, Pentagram scored 41.1, and CSS Design Awards scored 37.9. bun.sh (42.0) and tokens.studio (39.1) scored in the same range as the design-award sites we called out last week. The irony is no longer limited to design galleries — it extends to the tools developers use every day.
Finding 1: tokens.studio (39.1/F) — the design token tool with 3 tokens
tokens.studio is a product whose entire purpose is managing design tokens. Its marketing site scored 39.1 — the lowest score in this batch and worse than every site in the original sample except CSS Design Awards.
The contract found 3 extractable CSS custom properties on the page. For comparison: Supabase had 581, Netlify had 515, GitHub Primer had 518. A token management tool with fewer tokens on its own site than most sites have by accident.
It also has horizontal overflow at 1080px, zero :focus-visible rules, no prefers-reduced-motion media query, and no duration tokens at all. The product is about tokens. The site doesn't use them.
Finding 2: v0.dev (63.0/D) — the only real Core Web Vitals failure in 46 sites
v0.dev is Vercel's AI site generator. It scored 63.0 (D) — but the standout finding is its LCP of 4216ms, well above the 2500ms threshold. Across all 46 sites we've scored (30 original + 16 new), this is the only actual Core Web Vitals failure. Every other site either passed LCP or had it SKIP (not measured).
The tool that generates websites can't pass its own performance check. The site it builds for itself loads slower than every site we tested, including CSS Design Awards (which scored 37.9 overall but still had LCP=296ms).
This is a Vercel product. Vercel's marketing site (vercel.com) scored 73.6 in the original batch — the 5th highest score overall. The gap between Vercel's marketing team and Vercel's v0 team is 10.6 points and a CWV failure.
Finding 3: framer.com (56.5/F) — the motion tool with zero motion accessibility
framer.com is a design and motion tool. You use it to build animations, transitions, and interactive prototypes. Its marketing site has no prefers-reduced-motion media query at all — not even a kill switch that yanks all animation.
This is worse than having a bad reduced-motion implementation. It means the site has no motion accessibility path. Users who set prefers-reduced-motion: reduce in their OS get the exact same animation experience as everyone else. The contract's v05 check is a hard FAIL: "no prefers-reduced-motion media query found."
A company selling motion capabilities doesn't gate motion for accessibility on its own site. The irony is structural, not accidental.
Finding 4: bun.sh (42.0/F) — the fastest runtime with the slowest docs
bun.sh is a JavaScript runtime that markets itself on speed. Its docs site scored 42.0 — the second-lowest in the batch.
Two specific failures stand out:
Horizontal overflow at 720px and 860px —
scrollWidth=725 > innerWidth=720andscrollWidth=871 > innerWidth=860. The site doesn't fit its own target viewport. For a docs site, this means horizontal scrolling on tablets and small laptops.Zero
:focus-visiblerules — no keyboard focus indicators at all. The contract's v03 check is a hard FAIL. Keyboard users cannot see where they are on the page.
The fastest JavaScript runtime has a docs site that overflows at 720px and has no keyboard accessibility. Speed of execution ≠ quality of surface.
The pattern: dev tools optimize for API, not for contract
The original batch showed that marketing sites score higher than the design systems they're built from (Vercel marketing 73.6 vs. Geist design system 50.3). This batch extends the pattern: dev-tool sites optimize for API documentation and feature lists, not for the systemic design properties the contract checks.
The common failures across this batch:
- px font-sizes instead of rem — 14 of 16 sites fail v16. This is the most universal failure. Tailwind, React, Svelte, Framer, Webflow, Bun, Astro, Clerk, Cursor, Netlify, Supabase, Resend, v0 — all use px somewhere in non-root font-sizes.
-
transition:all— 9 of 16 sites fail v11. The contract forbidstransition:allbecause it transitions properties you didn't intend (likedisplayorheight), causing layout jank. -
No
font-synthesis: none— 14 of 16 sites fail x01. Without this, browsers synthesize bold/italic variants that the font designer didn't create, degrading typography quality. -
No
text-decoration-skip-ink: auto— 13 of 16 sites fail x03. Without this, underlines cross through letter descenders (g, p, y), reducing readability. -
No
tabular-nums— 11 of 16 sites fail v19. Without tabular figures, numbers in tables and stats jitter as digit widths change.
These are not subjective failures. They're deterministic: either the CSS property is present or it isn't. You can run the check yourself.
Try it yourself
# Score any URL in 5 seconds:
npx designesy-score@latest https://your-site.com
# Or use the MCP server in Claude/Cursor:
claude mcp add designesy --transport http https://www.designesy.org/api/mcp
# See the full leaderboard (46 sites now):
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.
If your site scores below 50, you're in the company of design award galleries and JavaScript runtime docs. If it scores above 70, you're in the top 15% of the web. If it scores 100, you're alone.
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. Originally published at GitHub Discussion #14.
Top comments (0)