Over the last two weeks, we scored 57 websites against a 26-check deterministic design contract — tokens, motion, accessibility, typography, cadence, performance. The contract is real: it's the Designesy design system, verifiable via an open-source MCP server you can run yourself.
The result: 1 site passed (our own, self-scored at 100/A). Zero others scored above a C.
Here's the full picture.
The aggregate
| Metric | Value |
|---|---|
| Total sites scored | 57 |
| Score range | 37.9 – 100.0 |
| Grade A | 1 (1.8%) |
| Grade B | 0 (0%) |
| Grade C | 6 (10.5%) |
| Grade D | 18 (31.6%) |
| Grade F | 32 (56.1%) |
88% of the web scored D or F. The B tier is empty. The jump from C (77.7, Apple) to A (100, Designesy) is 22 points with nothing in between — a cliff, not a slope.
The three batches
Batch 1: Design systems, SaaS, and inspiration galleries (30 sites)
The original batch scored design-system sites (Primer, Spectrum, Geist), SaaS marketing sites (Vercel, Linear, Stripe), hardware (Apple), and design inspiration galleries (CSS Design Awards, FWA, Pentagram).
| Rank | Score | Grade | Site |
|---|---|---|---|
| 1 | 100.0 | A | Designesy |
| 2 | 77.7 | C | Apple |
| 3 | 77.6 | C | GitHub Primer |
| 4 | 73.8 | C | zeroheight |
| 5 | 73.6 | C | Vercel |
| 6 | 72.9 | D | Stripe |
| ... | ... | ... | ... |
| 28 | 41.1 | F | Pentagram |
| 29 | 41.1 | F | FWA |
| 30 | 37.9 | F | CSS Design Awards |
Batch 2: Developer tools and frameworks (16 sites)
The second batch scored the tools developers use every day — frameworks, component libraries, AI site builders, runtimes.
| Rank | Score | Grade | Site |
|---|---|---|---|
| 1 | 64.6 | D | Netlify |
| 2 | 64.0 | D | shadcn/ui |
| 3 | 63.0 | D | Sanity |
| 4 | 63.0 | D | Clerk |
| 5 | 63.0 | D | v0.dev |
| ... | ... | ... | ... |
| 15 | 42.0 | F | Bun |
| 16 | 39.1 | F | tokens.studio |
Batch 3: Fintech (11 sites)
The third batch scored payment processors, banks, and financial platforms — the sites that handle your money.
| Rank | Score | Grade | Site |
|---|---|---|---|
| 1 | 72.9 | D | Stripe |
| 2 | 66.7 | D | Square |
| 3 | 66.0 | D | Wise |
| 4 | 60.0 | D | Plaid |
| 5 | 58.0 | F | Adyen |
| ... | ... | ... | ... |
| 10 | 41.3 | F | Ramp |
| 11 | 39.1 | F | Robinhood |
The 7 cross-industry patterns
1. No industry has a passing site
We scored three verticals: design systems, developer tools, and fintech. The best non-self score in each:
| Industry | Best score | Best site | Grade |
|---|---|---|---|
| Design systems / SaaS | 77.7 | Apple | C |
| Developer tools | 64.6 | Netlify | D |
| Fintech | 72.9 | Stripe | D |
No industry scored above C. The developer-tools batch was the worst — its top scorer (Netlify at 64.6) would rank 7th in the design-systems batch.
2. tabular-nums is universally ignored
font-variant-numeric: tabular-nums makes every digit the same width. It's been supported since 2013. It prevents numbers from jittering when they update.
- 11 of 16 dev-tool sites fail this check
- 11 of 11 fintech sites fail this check
- Every site that displays version counts, star counts, download counts, pricing, balances, or transactions fails it
This is a one-line CSS property. The entire web ignores it. The sites most dependent on numeric display — fintech — are the worst offenders.
3. Company valuation doesn't correlate with design maturity
| Company | Valuation | Score | Grade | Tokens |
|---|---|---|---|---|
| Stripe | $91.5B | 72.9 | D | 719 |
| Robinhood | ~$30B | 39.1 | F | 2 |
| Ramp | $16.5B | 41.3 | F | 0 |
| tokens.studio | seed | 39.1 | F | 3 |
Robinhood democratized stock trading and is worth ~$30B. Its site has 2 design tokens. Ramp manages corporate spend and is worth $16.5B. Its site has 0 design tokens. tokens.studio is a design token management tool and has 3 tokens on its own site.
The difference isn't budget. It's priority. Stripe has 719 tokens because someone at Stripe decided tokens mattered. Robinhood has 2 because no one decided.
4. Consumer sites fail contrast; developer-facing sites pass it
The clearest split in the data:
| Audience | Sites passing WCAG AA button contrast | Sites failing |
|---|---|---|
| Developers (Stripe, Square, Vercel, Netlify) | 4 | 0 |
| Consumers (Klarna, Wise, Adyen, Robinhood) | 0 | 4 |
Klarna's "Buy Now" button: 1.00:1 contrast. Same color on same color. On a site where the entire product is clicking a button to split a payment. Adyen: 0.00:1. Wise: 1.85:1. Plaid: 3.87:1.
The sites that developers use pass accessibility. The sites that consumers use fail it. The people who can fix contrast have accessible buttons. The people who can't are told to click a button they can't read.
5. The 40-point floor is industry-agnostic
Five sites across two batches scored between 37.9 and 42.0:
| Site | Score | Industry |
|---|---|---|
| CSS Design Awards | 37.9 | Design gallery |
| tokens.studio | 39.1 | Design token tool |
| Robinhood | 39.1 | Fintech |
| Ramp | 41.3 | Fintech |
| Bun | 42.0 | JS runtime |
Four different industries. One score range. The 40-point floor isn't a vertical problem — it's the baseline of not caring. These sites have zero design tokens, no :focus-visible, no prefers-reduced-motion, and no token system. They were built without a design contract and it shows at every level.
6. Marketing sites beat the design systems they're built from
The most counterintuitive finding from the original batch:
Vercel's marketing site outperforms its own design system by 23 points. Marketing teams optimize for visual polish. Design system teams optimize for API stability. The contract rewards the former.
7. Design awards don't mean design contract compliance
CSS Design Awards (37.9) and FWA (41.1) exist to celebrate design excellence. They both score F. Their own sites use bare hex colors, magic-number spacing, and no tiered reduced-motion. Awwwards-style galleries reward visual impression, not systemic rigor. A site can look stunning and still fail 16 of 26 deterministic checks.
The universal failures
Three checks fail across all 57 sites (excluding self-scored Designesy):
| Check | What it tests | Fail rate |
|---|---|---|
tabular-nums |
Digits use fixed-width numerals | ~85% |
font-synthesis: none |
Browsers don't fake bold/italic | ~90% |
text-decoration-skip-ink: auto |
Underlines don't cross descenders | ~85% |
These are all one-line CSS properties. All three have been supported for years. All three are ignored by the vast majority of the web. They're not hard to implement — they're simply not on anyone's checklist.
That's what a design contract is: a checklist that turns "we should probably do this" into "this is failing in CI."
The full leaderboard (top 20 of 57)
| Rank | Score | Grade | Site | Industry |
|---|---|---|---|---|
| 1 | 100.0 | A | Designesy | Design system |
| 2 | 77.7 | C | Apple | Hardware/SaaS |
| 3 | 77.6 | C | GitHub Primer | Design system |
| 4 | 73.8 | C | zeroheight | Design tooling |
| 5 | 73.6 | C | Vercel | Cloud platform |
| 6 | 72.9 | D | Stripe | Fintech |
| 7 | 66.7 | D | Square | Fintech |
| 8 | 66.0 | D | Wise | Fintech |
| 9 | 64.6 | D | Netlify | Dev tools |
| 10 | 64.0 | D | shadcn/ui | Dev tools |
| 11 | 63.0 | D | Sanity | Dev tools |
| 12 | 63.0 | D | Clerk | Dev tools |
| 13 | 63.0 | D | v0.dev | Dev tools |
| 14 | 62.0 | D | Cursor | Dev tools |
| 15 | 60.0 | D | Supabase | Dev tools |
| 16 | 60.0 | D | Plaid | Fintech |
| 17 | 59.1 | F | Resend | Dev tools |
| 18 | 58.0 | F | Astro | Dev tools |
| 19 | 58.0 | F | Adyen | Fintech |
| 20 | 56.5 | F | Tailwind CSS | Dev tools |
Full leaderboard with all 57 sites →
What would it take to score a B?
The B tier is empty. Nobody scored between 78 and 84. That's not a coincidence — it's a structural gap.
To score a B, a site would need:
- ✅ DTCG-conformant design tokens with
$schemapointer and structured color (not bare hex) - ✅ Tiered reduced-motion (Tier 1 remove / Tier 2 soften / Tier 3 keep — not a kill switch)
- ✅
tabular-numson all numeric displays - ✅
:focus-visiblewith replacement ring (not just stripping outline) - ✅ WCAG AA contrast on all interactive elements (4.5:1 minimum)
- ✅
font-synthesis: noneandtext-decoration-skip-ink: auto - ✅
text-wrap: balanceon headings andprettyon body - ✅ No
transition:allanywhere in the stylesheet - ✅ Rem-based type scale with no non-root px font-sizes
- ✅
::selectionstyled with a semantic token
Every site in our 57-site sample fails at least 4 of these. Most fail 8+. The B tier is empty because the transition from "informal design" to "contract-grade design" is a cliff. You can't accidentally score a B. You have to decide to.
Run the scoring yourself
The scoring engine is open-source and deterministic. No LLM, no heuristics, no subjective judging. Every check is reproducible.
# Install the MCP server
pip install designesy-mcp
# Or use uv (no install)
uvx designesy-mcp
# Score any URL in your MCP client (Claude, Cursor, VS Code):
# use the designesy_score tool with url: "https://your-site.com"
The contract has 26 checks across 8 categories: tokens, responsive, interaction, motion, accessibility, typography, cadence, performance. The CSS either has tabular-nums or it doesn't. The button either passes 4.5:1 contrast or it doesn't. There's no opinion involved.
Full source: github.com/LE-VAI/designesy-org
The bottom line
We scored 57 sites. One passed — our own, which we built to pass. Every other site, from Apple to Robinhood, from Vercel to CSS Design Awards, from Stripe to tokens.studio, failed.
The failures aren't subjective. They're deterministic: a CSS property is either present or absent. A contrast ratio is either above 4.5:1 or it isn't. A prefers-reduced-motion query either exists or it doesn't.
The web has a design quality problem that no one is measuring. Design awards measure visual impression. Performance audits measure speed. Accessibility scanners measure WCAG compliance. But nobody is measuring whether your site uses tabular numerals, whether your tokens are DTCG-conformant, whether your motion is tiered, whether your typography follows a cadence scale — the systemic properties that separate a site that holds together from one that falls apart.
Now someone is. And the answer is: 88% of the web scores D or F.
Scores were collected between July 25 and August 7, 2026 using the Designesy design contract v0.4.0. The scoring engine is open-source and deterministic — run it yourself and verify every number in this article. Previously: 30 sites scored, 16 dev-tool sites scored, 11 fintech sites scored.
Tags: #webdev #design #a11y #designsystems
Top comments (0)