DEV Community: LE-VAI

I scored 91 websites against a 40-check design contract. Zero got an A.

LE-VAI — Sat, 08 Aug 2026 01:49:45 +0000

We scored 91 websites across 5 industries — fintech, AI/ML, SaaS, design tools, and developer platforms — against a 40-check design system contract. The contract checks tokens, typography, motion, accessibility, and interaction feel against real design-system standards. Not one site scored an A. Not one scored a B. Not one scored a C.

The best score in the entire dataset was 74% — a D.

This is the capstone of a 7-part series. The prior articles scored individual batches. This one synthesizes all of them and asks the question that matters: if the design industry can't pass a design contract, what is the design industry actually selling?

The full leaderboard

Rank	Site	Score	Grade	Industry
1	Stripe	74.0%	D	Fintech
2	Vercel AI SDK	73.9%	D	AI infra
3	Vercel	67.4%	D	AI infra
4	Linear	66.0%	D	SaaS
5	Asana	64.0%	D	SaaS
6	Modal	63.0%	D	AI infra
7	Figma	62.5%	D	Design tools
8	Wise	62.0%	D	Fintech
9	Replicate	60.4%	D	AI infra
10	Coda	60.4%	D	SaaS
11	Anthropic	60.0%	D	AI models
12	ClickUp	60.0%	D	SaaS
13	Monday	60.0%	D	SaaS
14	Plaid	60.0%	D	Fintech
15	Airtable	58.3%	F	SaaS
16	LlamaIndex	58.3%	F	AI models
17	Mistral	56.5%	F	AI models
18	Hugging Face	56.2%	F	AI models
19	Cohere	56.0%	F	AI models
20	Notion	46.0%	F	SaaS
21	Pinecone	46.0%	F	AI infra
22	Brex	45.7%	F	Fintech
23	Miro	44.0%	F	Design tools
24	Whimsical	44.0%	F	Design tools
25	Pitch	43.5%	F	Design tools
26	Cash App	41.3%	F	Fintech
—	Mercury	BLOCKED	—	Fintech (HTTP 429)
—	Coinbase	BLOCKED	—	Fintech (HTTP 403)
—	Revolut	BLOCKED	—	Fintech (HTTP 403)
—	Chime	BLOCKED	—	Fintech (HTTP 403)
—	SoFi	BLOCKED	—	Fintech (HTTP 403)
—	OpenAI	BLOCKED	—	AI models (HTTP 403)
—	Perplexity	BLOCKED	—	AI models (HTTP 403)

Plus 57 sites scored in prior batches (30 general + 16 dev tools + 11 fintech), all scoring D or F. Full data at designesy.org/leaderboard.

The methodology

The Designesy scoring engine fetches each site's live HTML and CSS, extracts design tokens from :root, and runs 40 deterministic checks against a design system contract. The contract covers 7 categories:

Tokens — semantic color roles (--ink, --paper, --signal), luminance and saturation validation
Cadence — text-wrap: balance + pretty, tabular-nums, font-synthesis: none, text-decoration-skip-ink: auto, line-height by role, rem-based scale
Motion — prefers-reduced-motion support, no transition:all, will-change restricted to transform/opacity, duration tokens
Takt — press scales above 0.95 floor, concentric border-radius sets, stagger enter delays, soften exit transforms
Poise — fine-pointer hover guards, press settle scales, keyboard-affordance signals
Accessibility — WCAG AA 4.5:1 button contrast, :focus-visible rings, contrast on paper surfaces
Performance — Core Web Vitals (LCP, INP, CLS)

Every check is deterministic. No subjective scoring. No human judgment. The engine fetches the CSS, runs the checks, and returns a score. You can run it yourself on any URL.

Finding 1: The design tools paradox

The companies that sell design tools score the same as everyone else.

Figma (62.5%) — the design tool the industry uses — scores between Asana (64%) and Coda (60%). It's indistinguishable from project management tools. No text-wrap, no tabular-nums, no ::selection rule on its marketing site.
Webflow (52.0%) — the no-code design platform — scores below Airtable (58%). Press scales of 0.66 and 0.33 — buttons compress to a third of their size on tap.
Pitch (43.5%) — a company literally named after design presentations — scores below Cash App (41.3%), a fintech site with zero design tokens. No :focus-visible rules. No prefers-reduced-motion. No duration tokens.
Miro (44.0%) — a visual workspace — has --ink and --paper set to the same color. 0.00:1 contrast. The text and the background are identical.

This is the sharpest finding in the dataset. The companies selling "beautiful design" can't pass a design contract. Their marketing says one thing. Their CSS says another.

Finding 2: Infrastructure beats models

In the AI/ML sector, the infrastructure companies outscore the model companies by a clear margin:

AI infrastructure average: 62.1% (Vercel AI SDK, Vercel, Modal, Replicate, Pinecone)
AI model companies average: 56.5% (Anthropic, LlamaIndex, Mistral, Hugging Face, Cohere, Together AI)

The 5.6-point gap isn't accidental. Infrastructure companies build developer tools — dashboards, docs, deployment UIs. Their product is the interface, so they invest in design engineering. Model companies compete on benchmarks and API latency. The website is marketing, not product.

The scores reflect where design investment actually goes.

Finding 3: Token misconfiguration is universal

The most common failure across all 91 sites isn't a missing feature. It's a misconfigured token.

Whimsical: --ink luminance 255/255 — the "dark text" token is pure white
Miro: --ink and --paper are the same color — 0.00:1 contrast
ClickUp: --ink on --paper = 0.00:1 — same color
Linear: --ink luminance 182/255 — "dark text" is medium-gray; --paper luminance 19/255 — "light surface" is dark (inverted dark mode with light-mode token names)
Cohere: --ink luminance 165/255 — same issue as Linear
Brex: --ink luminance 191/255 — "dark text" is light gray
Pinecone: --paper: #fff but contract expects #010102 — inverted token system

These are root-level mistakes. A misconfigured --ink token cascades through every component that uses it. Every text color, every button label, every heading inherits the error. And because the token is named --ink, the team assumes it's correct.

Finding 4: 7 sites block verification entirely

Seven sites — 8% of the dataset — have WAF/Cloudflare configurations that reject the scoring engine's HTTP request before the CSS arrives:

Fintech: Mercury (429), Coinbase (403), Revolut (403), Chime (403), SoFi (403) — 5 of 12 fintech sites (42%)
AI/ML: OpenAI (403), Perplexity (403) — 2 of 12 AI sites (17%)

We tried root domains, www variants, and blog subdomain paths. All blocked at the WAF level, not the path level.

Transparency is a design quality signal. Sites that let you inspect their CSS are accountable to their design choices. Sites that block inspection aren't — not because their design is necessarily bad, but because they've made it impossible to know.

Finding 5: No-code builders produce lower scores

Sites built on Framer (Pitch, Miro) average 43.75%. Hand-coded sites average 57.3%. That's a 13.6-point gap.

Framer generates CSS from visual designs rather than from a token system. The tell is var(--framer-will-change-override,transform) in the will-change property — a Framer-specific variable. Framer-built sites in this dataset share the same gaps:

No semantic --ink/--paper/--signal tokens
No :focus-visible rules (Framer doesn't generate them by default)
No prefers-reduced-motion query (Framer animations are JS-driven)
No duration tokens (Framer uses its own animation timing)

This isn't a Framer problem specifically. It's a no-code-visual-builder pattern. When you generate CSS from a visual canvas, you get the canvas's defaults. And those defaults don't include a design contract.

Finding 6: Two CSS properties have near-zero adoption

After scoring 91 sites, only 1 site passed each of these Cadence resolved tensions:

text-decoration-skip-ink: auto — prevents underlines from crossing through letter descenders. Passed by: Coda. 1 of 84 scored sites. 1.2% adoption.
text-underline-position: from-font — positions underlines based on the font's own metrics. Passed by: ClickUp. 1 of 84 scored sites. 1.2% adoption.

These are CSS properties that improve typography with zero design cost. One line of CSS each. No performance impact. No layout change. They just make text look better. And 98.8% of sites don't use them.

The AI slop connection

This dataset lands in the middle of a live conversation. In 2026, the design industry is debating what's being called "AI design slop" — the widespread reliance on AI tools to generate UIs that are technically correct but lack specific identity.

A June 2026 Built In article framed it this way: "The baseline for acceptable design has quietly shifted to whatever AI produces. Because AI produces work that is competent enough to not fail any individual review, the shift is invisible from inside any single sprint. You only see it when you look at the market as a whole."

Our 91-site dataset looks at the market as a whole. And what it shows is that the baseline was already low before AI got involved. The design tools companies (Figma, Webflow, Pitch) score the same as everyone else. The infrastructure companies (Vercel, Stripe) score only slightly better. The model companies (Anthropic, Cohere, Mistral) score worse. And 7 sites block verification entirely.

A CHI 2026 study found that LLM agents hit ~95% design-system compliance at best when reading from a live component registry. At machine speed, the 5% that drifts becomes the screen the next agent copies. If the design industry's own websites can't pass a 40-check contract, what happens when AI agents generate UIs against those same standards?

The answer is already in the data. The 91 sites we scored represent the best of the web — successful companies with real engineering teams. And they average 56.7%. If that's the ceiling for human-built design, 95% LLM compliance isn't a problem. It's an improvement.

What this means

The design industry talks about craft. It sells design systems, design tokens, design tools. It markets beautiful product experiences. But when you run the checks — the same checks that a design system contract requires — the industry's own work doesn't pass.

This isn't about shaming individual sites. Stripe at 74% is doing better than most. Linear at 66% has excellent interaction feel. Vercel AI SDK at 73.9% has the strongest Cadence implementation we've seen. These are real engineering achievements.

It's about the gap between what the industry says and what the industry does.

The design contract exists. The checks are deterministic. The engine is open. Any site can be scored in under 60 seconds. The data is right there. And the data says: the design industry is selling compliance it can't pass.

The fix isn't more design tools. It's not more AI-generated UIs. It's the check itself. As the Akhmedov article argued: the design system didn't fail. Every token resolved. Every color was on-brand. The library was fine. The check failed. We didn't have one.

Now you do.

Scored with Designesy — a 40-check design system verification engine. The contract, the engine, and all 91 site scores are open. Run your own site.

This is the capstone of a 7-part series: 30 sites scored, 16 dev tools scored, 11 fintech sites scored, 57-site synthesis, 5 blocked fintech sites, 12 AI/ML platforms scored, 12 SaaS platforms scored.

The companies selling 'beautiful design' can't pass a design contract

LE-VAI — Sat, 08 Aug 2026 01:41:28 +0000

We scored 12 SaaS/productivity platforms against our 40-check design contract. These are companies whose entire value proposition is design quality — Figma, Webflow, Pitch, Notion, Miro. They sell design tools. They market beautiful product experiences. They should pass.

They don't.

The leaderboard: 12 SaaS/productivity platforms

Rank	Site	Score	Grade	Pass	Fail
1	Linear	66.0%	D	15	7
2	Asana	64.0%	D	14	7
3	Figma	62.5%	D	13	7
4	Coda	60.4%	D	12	7
5	ClickUp	60.0%	D	14	9
6	Monday	60.0%	D	13	8
7	Airtable	58.3%	F	12	8
8	Webflow	52.0%	F	10	9
9	Notion	46.0%	F	9	11
10	Miro	44.0%	F	8	11
11	Whimsical	44.0%	F	7	10
12	Pitch	43.5%	F	7	10

Zero A-grades. Zero B-grades. Zero C-grades. The best score is 66% — a D.

The design-tool paradox

The bottom 5 are telling:

Pitch (43.5%) — a company literally named after design presentations — has no :focus-visible rules, no prefers-reduced-motion query, no duration tokens, no ::selection rule. It's built on Framer, which generates its own CSS rather than using a semantic token system.
Whimsical (44.0%) — a "visual thinking" tool — has --ink luminance at 255/255. The "dark text" token is pure white. No :focus-visible rules. No prefers-reduced-motion. Button contrast 1.00:1.
Miro (44.0%) — a visual workspace — has --ink on --paper at 0.00:1. The ink and paper tokens are the same color. CLS of 0.121 (fails the 0.1 threshold — the layout shifts on load). Also Framer-built.
Notion (46.0%) — press scale of 0.9, below the 0.95 floor. Button contrast 2.96:1.
Webflow (52.0%) — press scales of 0.66 and 0.33, the same broken values we saw on Together AI. Button contrast 3.10:1.

These companies sell design. Their websites fail the most basic design checks.

What the leaders got right

Linear (66.0%) has the strongest implementation in the batch — full Cadence, text-wrap: balance+pretty, tabular-nums, 0.97 press scales across 11 elements, strong poise/takt. But its token system is inverted: --ink luminance 182/255 (medium gray, not dark), --paper luminance 19/255 (dark, not light), --signal saturation 0.00 (gray, not accent). Linear is a dark-mode design using light-mode token names. The implementation is excellent; the token semantics are backwards.

Asana (64.0%) has full Cadence, tabular-nums, 0.98 press scales, and passes WCAG button contrast at 4.62:1. But --muted on --paper is 3.30:1 — muted text fails AA. And 27 transition:all instances.

Figma (62.5%) — the design tool itself — has full poise/takt and is the only site in this batch with a rem-based font scale. But no text-wrap, no tabular-nums, no ::selection. The company that makes the design tool everyone uses doesn't use the latest typography CSS on its own marketing site.

Firsts in the series

Two Cadence resolved tensions that zero sites passed in the first 69 scored sites were finally passed here:

Coda is the first site in the series to pass text-decoration-skip-ink: auto — the CSS property that prevents underlines from crossing through letter descenders.
ClickUp is the first site in the series to pass text-underline-position: from-font — the property that positions underlines based on the font's own metrics rather than browser defaults.

These are small details. But after 69 sites scored, only 1 site passed each. That tells you about adoption rates for advanced typography CSS — even among companies selling design tools.

The Framer pattern

Pitch and Miro both fail will-change with var(--framer-will-change-override,transform) — a tell that they're built on Framer. Framer generates CSS from visual designs rather than from a token system, which means:

No semantic --ink/--paper/--signal tokens (the engine extracts 2 and 43 tokens respectively, vs 196+ for Linear)
No :focus-visible rules (Framer doesn't generate them by default)
No prefers-reduced-motion query (Framer animations are JS-driven)
No duration tokens (Framer uses its own animation timing)

This isn't a Framer problem specifically — it's a no-code-visual-builder problem. When you generate CSS from a visual canvas, you get the visual canvas's defaults. And those defaults don't include a design contract.

The cross-batch pattern

After 5 batches (30 sites + 16 dev tools + 11 fintech + 12 AI/ML + 12 SaaS = 81 sites), the pattern is structural:

Zero A-grades across 81 sites. Only Designesy (the reference implementation) scores A.
The companies selling design quality score the same as everyone else. Figma (62.5%) sits between Asana (64.0%) and Coda (60.4%) — it's indistinguishable from project management tools. Webflow (52.0%) scores below Airtable (58.3%). Pitch (43.5%) scores below Cash App (41.3%) — a fintech site with zero design tokens.
Token misconfiguration is universal. --ink set to white (Whimsical), --ink set to medium-gray (Linear, Cohere, Brex), --ink and --paper the same color (Miro, ClickUp). These are root-level mistakes that cascade through every component.
No-code builders produce lower scores. Framer-built sites (Pitch, Miro) average 43.75%. Hand-coded sites average 57.3%.

The SaaS sector talks about design quality more than any other industry. Its design engineering is average.

Scored with Designesy — a 40-check design system verification engine. The contract, the engine, and all 81 site scores are open. Run your own site.

This is the seventh article in a series: 30 sites scored, 16 dev tools scored, 11 fintech sites scored, 57-site synthesis, 5 blocked fintech sites, 12 AI/ML platforms scored.

We scored 12 AI/ML platforms against a design contract. The infrastructure beats the models.

LE-VAI — Sat, 08 Aug 2026 01:31:08 +0000

After scoring 30 websites, 16 dev tools, and 11 fintech sites against our 40-check design contract, we turned to the AI/ML sector. These are companies built by engineers who care about developer experience. They should score well.

They don't.

The leaderboard: 12 AI/ML platforms

Rank	Site	Score	Grade	Pass	Fail
1	Vercel AI SDK	73.9%	D	16	5
2	Vercel	67.4%	D	14	6
3	Modal	63.0%	D	13	7
4	Replicate	60.4%	D	12	7
5	Anthropic	60.0%	D	12	7
6	LlamaIndex	58.3%	F	11	7
7	Mistral	56.5%	F	11	8
8	Hugging Face	56.2%	F	10	7
9	Cohere	56.0%	F	11	8
10	Together AI	52.1%	F	11	10
11	Pinecone	46.0%	F	8	10
—	Perplexity	BLOCKED	—	—	—
—	OpenAI	BLOCKED	—	—	—

Zero A-grades. Zero B-grades. Zero C-grades. The best AI/ML platform scored 73.9% — a D.

The infrastructure-models split

The top 4 are all infrastructure: Vercel AI SDK, Vercel, Modal, Replicate. The bottom 6 are model companies: Cohere, Together AI, Pinecone, Hugging Face, Mistral, LlamaIndex.

This isn't coincidence. Infrastructure companies build developer tools — dashboards, docs, deployment UIs. They invest in design systems because their product is the interface. Model companies compete on benchmarks and API latency. The website is marketing, not product.

The scores reflect that priority gap.

What the leaders got right

Vercel AI SDK (73.9%) is the highest-scoring site we've seen outside of Designesy itself. Full Cadence typography — text-wrap: balance + pretty, tabular-nums, font-synthesis: none, line-height by role. Strong poise and takt: fine-pointer hover guards, press settle scales, concentric border-radius sets. 37 :focus-visible rules. Its main failures are will-change containing height and px-based font sizes.

Vercel (67.4%) shares the same design DNA — 158 :focus-visible rules, full Cadence, font-synthesis: none. It loses points on 3 transition:all instances and will-change containing width/height.

Modal (63.0%) is clean — no transition:all, will-change restricted to transform/opacity, full Cadence, reduced-motion support. It fails on no ::selection rule and no tabular-nums.

Replicate (60.4%) has full Cadence, text-wrap: balance+pretty, reduced-motion, no transition:all, clean will-change. But it fails hard on accessibility: button contrast is 1.00:1 — the button text is the same color as the button fill.

What the model companies got wrong

Together AI (52.1%) has press scales of 0.66 and 0.33. The contract floor is 0.95. When you press a Together AI button, it compresses to a third of its size. That's not a press interaction — that's a glitch.

Cohere (56.0%) has --ink luminance at 165/255. The "dark text" token is medium-gray. Button contrast is 1.00:1 — same as Replicate. But Cohere also has --ink on --paper at 2.54:1, failing WCAG AA across the board. The token system is misconfigured at the root.

Pinecone (46.0%) has no :focus-visible rules at all. Keyboard users cannot see where they are on the page. Its --paper token is #fff but the contract expects #010102 — the token system is inverted. Button contrast is 2.32:1.

Hugging Face (56.2%) has no prefers-reduced-motion query. Users who request reduced motion get full animations regardless. It also has --ink and --muted tokens missing — the semantic color system is incomplete.

Mistral (56.5%) has no ::selection rule and no tabular-nums. Its --duration-quick and --duration-slow are both 1000ms — the fast and slow duration tokens are identical, which means the motion timing hierarchy is flat.

The blocked sites

Perplexity and OpenAI both return HTTP 403 to our scoring engine. We've seen this pattern in fintech — Mercury, Coinbase, Revolut, Chime, and SoFi all block automated verification. Now two of the biggest AI companies do it too.

That's 2 of 12 (17%) blocked in AI/ML, compared to 5 of 13 (38%) blocked in fintech. The AI sector is more transparent than fintech — but the two biggest consumer-facing AI companies (OpenAI, Perplexity) are walled off.

The cross-batch pattern

After 4 batches (30 sites + 16 dev tools + 11 fintech + 12 AI/ML = 69 scored sites), the pattern holds:

Zero A-grades across 69 sites. Only Designesy (the reference implementation) scores A.
Infrastructure beats models. Vercel, Modal, and Replicate outscore Cohere, Mistral, and Hugging Face.
Token misconfiguration is the most common failure. --ink set to medium-gray instead of dark. --paper inverted. --signal missing. These are root-level mistakes that cascade through every component.
Button contrast fails on 8 of 12 sites. The most basic accessibility check — can you read the button text? — and two-thirds of AI/ML platforms fail it.
No site uses text-underline-position: from-font or text-decoration-skip-ink: auto. These are resolved tensions from the Cadence typography spec. Zero adoption.

The AI/ML sector talks about building the future. Its design engineering is stuck in 2020.

Scored with Designesy — a 40-check design system verification engine. The contract, the engine, and all 69 site scores are open. Run your own site.

This is the sixth article in a series: 30 sites scored, 16 dev tools scored, 11 fintech sites scored, 57-site synthesis, 5 blocked fintech sites.

5 fintech sites won't let us verify their design. That's a finding.

LE-VAI — Sat, 08 Aug 2026 01:26:17 +0000

When we scored 11 fintech sites against our 40-check design contract, three of them blocked us — Mercury (HTTP 429), Coinbase (HTTP 403), and Revolut (HTTP 403). We tried root domains, www variants, and blog subdomain paths. All blocked at the CSS fetch level.

So we expanded the batch. We scored 8 more fintech sites to see if the pattern held. It did.

The expanded batch: 13 fintech sites, 5 blocked

Rank	Site	Score	Grade	Pass	Fail
1	Stripe	74.0%	D	17	5
2	Wise	62.0%	D	14	8
3	Plaid	60.0%	D	13	8
4	PayPal	54.3%	F	11	9
5	Venmo	54.3%	F	11	9
6	Notion	46.0%	F	9	11
7	Brex	45.7%	F	8	10
8	Cash App	41.3%	F	6	10
—	Mercury	BLOCKED	—	—	—
—	Coinbase	BLOCKED	—	—	—
—	Revolut	BLOCKED	—	—	—
—	Chime	BLOCKED	—	—	—
—	SoFi	BLOCKED	—	—	—

5 of 13 fintech sites (38%) block automated design verification.

That's not a bug in our scoring engine. That's a finding about the industry.

What "blocked" means

Our scoring engine fetches the live site's HTML and CSS, extracts design tokens, and runs 40 deterministic checks against a design system contract. It checks things like:

Does :root have semantic color tokens (--ink, --paper, --signal)?
Are font sizes in rem (not hardcoded px)?
Is there a prefers-reduced-motion media query?
Do interactive elements have :focus-visible rules?
Does ::selection use a brand token (not browser default)?
Are there tabular-nums for numeric data?
Is transition:all avoided in the stylesheet?

None of this requires JavaScript execution. It's static CSS analysis. But Mercury, Coinbase, Revolut, Chime, and SoFi all have WAF/Cloudflare configurations that reject the HTTP request before the CSS arrives.

We tried:

mercury.com → 429
www.mercury.com → 429
mercury.com/blog → 429
coinbase.com → 403
www.coinbase.com → 403
blog.coinbase.com → 403
revolut.com → 403
www.revolut.com → 403
revolut.com/blog → 403
chime.com → 403
sofi.com → 403

Same result across every URL variant. The block is at the WAF level, not the path level.

Why this matters

Design verification is a transparency signal. When a site lets you inspect its CSS, you can check whether it meets accessibility standards, whether it uses a coherent token system, whether it respects reduced-motion preferences. When a site blocks inspection, you can't verify any of that.

The 8 sites that didn't block us scored between 41% and 74%. None of them passed. But at least they're inspectable. You can see exactly what they got right and what they got wrong.

The 5 that blocked us? We can't tell you anything about their design quality. They've opted out of transparency.

What the inspectable sites got wrong

Cash App (41.3%) is the worst. Zero design tokens extracted — no :root token system at all. No :focus-visible rules. No prefers-reduced-motion query. No duration tokens. It's an untokenized site running on browser defaults.

Notion (46.0%) has a press scale of 0.9 — below the 0.95 floor the contract sets for press-feedback takt. That means buttons compress too aggressively on tap. It also has button contrast of 2.96:1, failing WCAG AA 4.5:1.

Brex (45.7%) has --ink luminance at 191/255 — the "dark text" token isn't actually dark. It's a medium gray being used as primary text. No prefers-reduced-motion query either.

PayPal and Venmo (54.3% each) score identically because they share the same parent CSS framework. Same 21 transition:all instances. Same missing ::selection. Same missing tabular-nums. When two sites score pixel-identical against a 40-check contract, that's a shared design system — and a shared set of gaps.

Plaid (60.0%) is strong on poise and takt (0.98 press scales across 76 elements) but has 76 transition:all instances. That's a performance and predictability problem — transition:all animates every property change, including ones you don't want.

Wise (62.0%) has good token semantics but horizontal overflow at 375px viewport width. On a phone, the page scrolls horizontally. That's a mobile-first failure.

Stripe (74.0%) is the clear leader. Full Cadence typography (line-height by role, text-wrap: balance + pretty, tabular-nums), button contrast at 16.27:1, no transition:all. Its main failures are will-change containing width/background-color and px-based font sizes instead of rem. It's the only site in the batch that nearly reaches C-grade.

The pattern

Every inspectable fintech site failed the contract. Not one scored above 74%. But the 5 that blocked inspection are worse — not because their design is necessarily bad, but because they've made it impossible to know.

Transparency is a design quality signal. Sites that let you verify their design are accountable to it. Sites that block verification aren't.

Scored with Designesy — a 40-check design system verification engine. The contract, the engine, and all 13 site scores are open. Run your own site.

This is the fifth article in a series: 30 sites scored, 16 dev tools scored, 11 fintech sites scored, 57-site synthesis.

We scored 57 sites against a real design contract. None of them passed.

LE-VAI — Fri, 07 Aug 2026 21:30:26 +0000

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:

Site	Score	Grade	What it is
Vercel	73.6	C	Marketing site
Geist	50.3	F	Vercel's design system

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 $schema pointer and structured color (not bare hex)
✅ Tiered reduced-motion (Tier 1 remove / Tier 2 soften / Tier 3 keep — not a kill switch)
✅ tabular-nums on all numeric displays
✅ :focus-visible with replacement ring (not just stripping outline)
✅ WCAG AA contrast on all interactive elements (4.5:1 minimum)
✅ font-synthesis: none and text-decoration-skip-ink: auto
✅ text-wrap: balance on headings and pretty on body
✅ No transition:all anywhere in the stylesheet
✅ Rem-based type scale with no non-root px font-sizes
✅ ::selection styled 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

The fintech sites that handle your money can't pass a design contract

LE-VAI — Fri, 07 Aug 2026 21:28:26 +0000

We scored 11 fintech sites against a 26-check design contract — tokens, motion, accessibility, typography, performance. The contract is real: it's the Designesy design system, verifiable via an open-source MCP server you can run yourself.

Every single one failed.

The best score was a D.

The leaderboard

Rank	Site	Score	Grade	Tokens	Headline failure
1	Stripe	72.9	D	719	No `tabular-nums` on a payments site
2	Square	66.7	D	3	16× `transition:all`
3	Wise	66.0	D	224	Button contrast 1.85:1 (fails AA)
4	Plaid	60.0	D	179	Button contrast 3.87:1 (fails AA)
5	Adyen	58.0	F	122	Button contrast 0.00:1, 322× `transition:all`
6	Affirm	56.0	F	191	Press scale 0.66 (floor is 0.95)
7	Klarna	56.0	F	556	Button contrast 1.00:1
8	Checkout.com	50.0	F	488	No `:focus-visible`, no reduced-motion
9	Brex	45.7	F	563	`--ink` token luminance mismatch
10	Ramp	41.3	F	0	No focus-visible, no reduced-motion, 0 tokens
11	Robinhood	39.1	F	2	No focus-visible, no reduced-motion, 2 tokens

3 sites blocked: Mercury (HTTP 429), Coinbase (HTTP 403), Revolut (HTTP 403) — the scoring engine fetches their CSS and they rate-limited or blocked the request. If your site blocks automated fetches, it also blocks accessibility audits. Think about that.

Finding 1: Not one fintech site uses `tabular-nums`

font-variant-numeric: tabular-nums is a CSS property that makes every digit the same width. It's been supported since 2013. It prevents this:

$ 1,000.00
$ 1,500.00   ← the "5" is narrower than the "0", the number shifts left

When your bank balance updates, the digits shouldn't dance.

11 out of 11 fintech sites fail this check. Stripe, the highest scorer at 72.9/D, fails it. Robinhood, the lowest at 39.1/F, fails it. Not a single site that exists to display financial numbers uses the one CSS property that makes financial numbers readable.

This isn't a nitpick. If you're building a fintech dashboard and your balance reflows when the last digit changes, users can't track their money at a glance. The number jitters. The layout shifts. The eye loses its place. This is the most basic typography rule for financial UI, and the entire industry ignores it.

/* The fix — one line */
.balance, .amount, .price {
  font-variant-numeric: tabular-nums;
}

Finding 2: The "Buy Now" button you can't read

Klarna's entire product is "buy now, pay later." You see a price, you click a button, you split it into 4 payments. The button is the product.

Klarna's primary button contrast ratio: 1.00:1.

That's the same color on the same color. Not 4.5:1 (WCAG AA). Not 3:1 (WCAG AA Large). Not even 2:1. One-to-one. The button text is invisible to anyone who isn't viewing it on a perfectly calibrated monitor in a dark room — and even then, it's barely there.

But Klarna isn't alone:

Site	Button contrast	WCAG AA (4.5:1)	What it means
Stripe	✅ passes	✅	Good
Square	✅ passes	✅	Good
Checkout.com	4.54:1	✅ (barely)	Passes by 0.04
Affirm	18.14:1	✅	Excellent
Plaid	3.87:1	❌	Fails AA
Wise	1.85:1	❌	Fails AA badly
Adyen	0.00:1	❌	Same color
Klarna	1.00:1	❌	Same color

The irony: the sites targeting developers (Stripe, Square, Checkout.com) pass contrast. The sites targeting consumers (Klarna, Wise, Adyen) fail. The people who can fix contrast have accessible buttons. The people who can't are told to click a button they can't read.

Finding 3: Affirm's buttons run away from your finger

The contract checks press scale — how much an interactive element shrinks when pressed. The floor is 0.95 (elements shrink by no more than 5%). This prevents the "running away" feeling where a button shrinks so much on tap that it feels like it's dodging your finger.

Affirm's press scale: 0.66.

Buttons shrink to 66% of their size when tapped. That's a 34% reduction. On a site where the primary action is clicking "Pay in 4," the pay button shrinks to two-thirds of its size when you press it. It doesn't feel like a press confirmation — it feels like the button is flinching.

The fix is trivial:

.button:active {
  transform: scale(0.96);  /* not 0.66 */
}

Finding 4: Adyen has 322 `transition:all` declarations

transition: all is a performance anti-pattern. It transitions every property change — including width, height, padding, margin — causing layout recalculations on every frame. On a payments site processing global transactions, this means jank when the UI updates.

Adyen: 322 instances. Square: 16. Brex: 24. Affirm: 17.

The fix:

/* Don't do this */
.card { transition: all 200ms; }

/* Do this — transition only what you animate */
.card { transition: transform 200ms ease-out, opacity 200ms ease-out; }

322 transition:all declarations means 322 places where a layout property change triggers a transition. On a site where milliseconds matter (payment processing, fraud detection UI), the CSS is fighting against the product.

Finding 5: Ramp and Robinhood — the 40-point floor

In our previous batch ("We scored 16 more sites. The dev tools are worse than the design awards."), the lowest score was tokens.studio at 39.1/F — a site about design tokens that has zero design tokens.

In this batch, two fintech sites score in the same range:

Ramp: 41.3/F — 0 design tokens, no :focus-visible rules, no prefers-reduced-motion query
Robinhood: 39.1/F — 2 design tokens, no :focus-visible rules, no prefers-reduced-motion query

Robinhood democratized stock trading. Ramp manages corporate spend. Both are worth billions. Both have the same design system maturity as a site about design tokens that has no design tokens.

The pattern: company valuation does not correlate with design system maturity. What correlates is whether someone on the team cares about design contracts. Stripe (72.9) has 719 design tokens. Robinhood (39.1) has 2. The difference isn't budget — it's priority.

Finding 6: The accessibility double-fail

Four sites fail both :focus-visible AND prefers-reduced-motion:

Site	`:focus-visible`	`prefers-reduced-motion`
Checkout.com	❌	❌
Brex	✅	❌
Ramp	❌	❌
Robinhood	❌	❌

No :focus-visible means keyboard users can't see which element is focused. No prefers-reduced-motion means users with vestibular disorders (motion sensitivity) can't disable animations. These are both WCAG-adjacent requirements, and both are CSS — no JavaScript, no backend, no infrastructure. Two media queries and a pseudo-class.

Ramp and Robinhood fail both. On sites where users make financial decisions.

The pattern across both batches

We've now scored 27 sites in two batches (16 dev-tool sites + 11 fintech sites). The pattern is clear:

No industry has a passing site. The highest score across both batches is 72.9/D (Stripe). No site has scored a C or above.
tabular-nums is universally ignored. Every site that displays numbers — dev tool version counts, fintech balances — fails this check.
Contrast failures cluster on consumer-facing sites. Developer-tool sites pass button contrast. Consumer fintech sites fail it.
The 40-point floor is industry-agnostic. tokens.studio (39.1), Robinhood (39.1), Ramp (41.3) — different products, same neglect.
Design tokens don't guarantee a good score, but zero tokens guarantees a bad one. Stripe (719 tokens, 72.9) vs Robinhood (2 tokens, 39.1).

Run the scoring yourself

The scoring engine is an open-source MCP server. Install it and score any URL:

# Install
pip install designesy-mcp

# Or use uv (no install)
uvx designesy-mcp

# Score a site
# In your MCP client (Claude, Cursor, VS Code):
#   use the designesy_score tool with url: "https://stripe.com"

The contract has 26 checks across 8 categories: tokens, responsive, interaction, motion, accessibility, typography, cadence, performance. Every check is deterministic — no subjective scoring, no LLM judging. The CSS either has tabular-nums or it doesn't.

Full source: github.com/LE-VAI/designesy-org

The bottom line

If your site handles people's money and your button contrast is 1.00:1, you're not building a fintech product — you're building a barrier. If your balance display doesn't use tabular-nums, you're not designing for readability — you're designing for jitter.

The fintech industry talks about trust. Trust isn't a brand color and a clean logo. Trust is a button you can read, a number that doesn't shift, a focus ring that shows keyboard users where they are, and a motion query that respects the 35% of users who request reduced motion.

None of the 11 sites we scored have all four.

Scores were collected on 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.

Tags: #webdev #design #a11y #fintech

We scored 16 more sites. The dev tools are worse than the design awards.

LE-VAI — Fri, 07 Aug 2026 20:40:00 +0000

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=720 and scrollWidth=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-visible rules — 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 forbids transition:all because it transitions properties you didn't intend (like display or height), 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.

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

LE-VAI — Fri, 07 Aug 2026 20:31:33 +0000

The headline

We scored 30 sites from our live leaderboard — design systems (Primer, Spectrum, Geist), SaaS (Vercel, Linear, Stripe), hardware (Apple), inspiration galleries (CSS Design Awards, FWA), and more.

Designesy runs 40 deterministic checks against any URL — tokens, motion, accessibility, cadence, takt, poise, identity, interaction, performance, responsive, semantic, security, spec, and copywriting. No LLM, no heuristics. Every check is reproducible.

The results were worse than we expected.

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: teams know they should have design tokens, motion standards, and accessibility gates, but most haven't finished the job.

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 that yanks all animation instead of tiering (Tier 1 remove / Tier 2 soften / Tier 3 keep)
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.

Interaction (avg 60.0 — 12 sites below 50)

12 of 30 sites score below 50 on interaction. This is the dimension with the most outright failures:

:focus strips outline without replacement — the most common accessibility failure pattern
No :focus-visible — keyboard and mouse focus are treated identically
No press-settle — no scale(0.97) or equivalent press feedback on interactive elements

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	Surprising — 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. CSS Design Awards and FWA exist to celebrate design excellence, but they score 37.9 and 41.1 — because their own sites don't use structured tokens, tiered reduced-motion, or DTCG-conformant formatting.

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. This means Vercel's marketing team is doing more design-system work than Vercel's design-system team — or that Geist's token format predates DTCG 2025.10 and hasn't been migrated.

This pattern repeats: marketing sites score higher than the design systems they're built from. Marketing teams optimize for visual polish. Design system teams optimize for API stability. The contract rewards the former.

What this means

Design tokens are half-adopted. Everyone has them; few have them in a conformant format. The W3C DTCG 2025.10 spec is 10 months old and the ecosystem hasn't caught up.
Motion accessibility is the biggest gap. 11/30 sites score below 50 on motion. The prefers-reduced-motion kill-switch pattern is everywhere — but tiered reduced-motion (the Apple HIG approach) is almost nowhere.
"Good design" is not "systematic design." The sites that win design awards fail design contracts. Visual impression ≠ systemic rigor. A site can look stunning and still use bare hex, magic-number spacing, and no reduced-motion tier.
No one has a B. The gap between C and A is 22 points. There's no middle ground — you're either doing tokens informally (C/D) or you're doing them conformantly (A). The B tier is empty because the transition from "informal tokens" to "DTCG-conformant tokens" is a cliff, not a slope.

Try it yourself

# 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.

The 23-check verification checklist we built for our design system

LE-VAI — Tue, 21 Jul 2026 04:56:30 +0000

A design system contract isn't a document. It's a testable standard.

Most design systems are Figma files and Storybook pages — they tell you what the tokens are, but not whether what you shipped actually holds. We wanted to close that gap. So we built a verification engine that runs 23 automated checks against the live site, with provenance back to every contract token.

This is the checklist, what each check does, and why we picked it.

The premise

The contract lives at designesy.org/contracts/design-system. It's a public, machine-readable design system — W3C DTCG 2025.10 token format, with two custom token types we added: $type: spring (physics-based motion) and $type: sound (acoustic cues).

The verification engine fetches the page HTML, extracts all CSS (inline + linked stylesheets), parses :root custom properties, and runs 23 checks. Each check returns PASS, FAIL, WARN, or SKIP with a detail string that traces back to the contract token or rule it's verifying.

Current score: 100% (Grade A) — 19 passed, 0 failed, 7 skipped (browser-only checks).

The 23 checks

Tokens (1 check)

v01 — Token values match the live site :root foundation
Verifies that the custom properties in the live stylesheet match the values declared in the contract JSON. If the contract says --signal: #0133CB and the site ships --signal: #0133CC, this check fails. Nine tokens checked.

This is the foundation. If the tokens don't match, nothing downstream is trustworthy.

Responsive (1 check)

v02 — Routes render without horizontal overflow at 375px, 720px, 860px, 1080px+
Verifies that the layout doesn't break at four breakpoints. SKIP in static analysis — requires a live browser viewport. We run this manually with Chrome DevTools device emulation.

Horizontal overflow on mobile is the most common layout failure and the easiest to miss in development. This check exists because we've shipped it.

Interaction (1 check)

v03 — Primary interactive elements show focus-visible rings
Parses the stylesheet for :focus-visible rules. 31 rules present on the live site.

Focus-visible is the keyboard user's cursor. If it's missing, keyboard navigation is invisible. This check fails if focus-visible is absent or overridden by outline: none without a replacement.

Motion (5 checks)

v05 — prefers-reduced-motion disables entrance and wordmark breath
Verifies that @media (prefers-reduced-motion: reduce) collapses non-essential animation. This is non-negotiable — animation that can't be reduced is an accessibility failure.

v11 — No transition: all in the live stylesheet
transition: all is a performance anti-pattern — it transitions properties you didn't intend (like width, height, padding) and causes layout jank. Every transition should name its specific properties. This check parses the stylesheet and fails if transition: all appears anywhere.

v12 — will-change restricted to transform and opacity only
will-change is a hint to the browser about what's about to animate. Using it on properties other than transform and opacity wastes GPU memory and can cause more jank than it prevents. This check fails if will-change is set to anything else.

v23 — Duration tokens --duration-quick through --duration-slow present in :root
Verifies that the five duration tokens (150ms, 250ms, 350ms, 400ms, 600ms) are all present as custom properties. Duration should be tokenized, not hard-coded — otherwise every animation drifts independently.

v13 — Press scale 0.96 on cells, 0.985 on cards/rows — both above 0.95 floor
Parses every :active scale transform in the stylesheet and verifies none goes below 0.95. Press scale below 0.95 reads as a glitch, not a press. We learned this from Takt — the interface-feel lab.

Accessibility (2 checks)

v06 — Contrast remains readable for ink, muted, and accent on paper
Verifies WCAG contrast ratios for the three text colors against the page background. Current values: ink on paper = 21:1, muted on paper = 8.03:1, muted-dim on paper = 5.10:1. All pass AA.

v22 — Primary button text passes WCAG AA 4.5:1 contrast against --signal fill
Verifies that the button label is readable against the brand accent fill. Current: ink on signal = 8.99:1. This check exists because brand colors are often chosen for aesthetics, not contrast — and button text is the most common failure point.

Identity (1 check)

v07 — No public surface displays internal control-plane naming
Verifies that the page title, h1, and visible text don't contain internal naming. This is a brand-discipline check — internal vocabulary should never leak to the user.

Poise (3 checks)

v04 — Sound toggle flips aria-pressed and applies the audio preference
SKIP in static analysis — requires live DOM interaction. Verifies that the sound toggle is a proper toggle button with aria-pressed state, not just a visual switch.

v08 — Poise interaction rules match live /labs/poise and contract.interaction
SKIP — requires a page-specific check. Verifies that the interaction lab and the contract agree.

v09 — Poise keyboard-path verification remains published and current
SKIP — requires a page-specific check. Verifies that the keyboard-path proof page is still live.

Takt (2 checks)

v10 — Takt interface-feel rules match live CSS and contract.takt
SKIP — requires a page-specific check. Verifies that the interface-feel lab and the contract agree.

v13 — Press scale 0.96 on cells, 0.985 on cards/rows (also listed under motion — it spans both categories because it's both a motion rule and a Takt rule)

Cadence (8 checks)

v14 — Cadence typography rules match live CSS and contract.cadence
SKIP — requires a page-specific check.

v15 — Font smoothing: antialiased + grayscale on :root
Verifies -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale are set on :root. Without these, the browser uses subpixel rendering, which looks heavier and less crisp on modern displays.

v16 — Rem-based scale: all text sizes in rem, root at 16px
Verifies that text sizes use rem, not px. Pixel-based font sizes break user zoom preferences. Root at 16px is the browser default — respecting it is the difference between "works for everyone" and "works for me."

v17 — Line-height by role: headings 1.08, body 1.55
Verifies that headings and body text have different line-heights. A single global line-height is a common mistake — headings need tight leading (1.05–1.1), body needs relaxed leading (1.5–1.6). Using one value for both makes either headings feel loose or body feel cramped.

v18 — text-wrap: balance + pretty both present in live CSS
Verifies that headings use text-wrap: balance (prevents orphaned words on the last line) and body uses text-wrap: pretty (prevents orphans while preserving rhythm). Both are modern CSS features that improve typography without JavaScript.

v19 — tabular-nums: 8 instances across the live CSS
Verifies font-variant-numeric: tabular-nums is used for numerical data. Tabular numbers have fixed widths — they align in columns and don't jitter when values change. Essential for stats, prices, and tables. Current: 17 instances.

v20 — ::selection styled with var(--signal) — not browser default
Verifies that text selection uses the brand accent, not the browser's default blue. Selection is a brand surface that most sites forget.

v21 — Core Web Vitals plausible: LCP < 2.5s, INP < 200ms, CLS < 0.1
SKIP — requires a live browser performance trace. We run this with Chrome DevTools performance_start_trace.

Extended checks (3 checks, v0.3.0 resolved tensions)

x01 — font-synthesis: none set
Verifies that font-synthesis: none is on :root. Without it, the browser synthesizes fake bold and italic weights when the real ones aren't loaded — and they look terrible. This was an open tension we resolved in v0.3.0.

x02 — text-underline-position: from-font set
Verifies that underlines align to the font's metrics, not the browser's default. Prevents underlines from cutting through descenders on fonts with low underline positions. Resolved in v0.3.0.

x03 — text-decoration-skip-ink: auto set
Verifies that underlines skip descenders (the loops of g, j, p, q, y) for readability. Without skip-ink, underlines cut straight through descenders and reduce legibility. Resolved in v0.3.0.

Why verification, not just documentation

A contract without verification is a wish. A contract with verification is a standard.

The difference: if the contract says "contrast must pass WCAG AA" but there's no check, the rule drifts. Someone ships a new component with a slightly-off color, nobody notices, and six months later the contract says one thing and the site does another.

Verification closes that loop. Every check is executable. Every check has provenance back to a token or rule. Every check runs against the live site, not a snapshot. If the site drifts, the check fails.

This is the same principle as unit tests for code — but for design. We don't ship code without tests. We shouldn't ship design without verification.

The open tensions (9)

We document them, not hide them. A design system that claims to be complete is lying. Here are the nine things we haven't resolved yet:

Light theme is not contracted — dark technical foundation is provisional
--activation exists but has limited public surface usage
Inter is named in the stack but not self-hosted; system fallback is intentional
Shadow tokens exist; elevation language is still light-touch (borders lead)
Human contract page and machine export remain dual sources until a single generator owns both
Keyboard-path verification packets are published for Poise only — not every public route
Inline-axis logical properties applied — block-axis and border-inline remain physical (Cadence partial migration)
Block-axis logical properties (margin-block-start/end) not yet migrated — only inline-axis done
border-left decorative accents not yet migrated to border-inline-start — visual regression risk needs testing

Run it yourself

The verification engine is available as an MCP tool:

npx @designesy/mcp designesy_score --url https://www.designesy.org/

You can run it against any URL — it'll extract the CSS, parse the tokens, and run the same 23 checks. If your site uses a different token system, the checks that depend on Designesy-specific tokens will SKIP, but the general checks (contrast, focus-visible, reduced-motion, font smoothing, rem scale, text-wrap, tabular-nums, ::selection, transition: all, will-change) will run against any site.

The contract

Live: designesy.org/contracts/design-system
Machine export: designesy.org/contracts/design-system.json
SKILL.md export (for AI coding agents): designesy.org/contracts/skill
Labs: Poise · Takt · Cadence · Acoustics

Designesy is design intelligence infrastructure. The contract is public, machine-readable, and verified against the live site. We build against it.

DEV Community: LE-VAI

I scored 91 websites against a 40-check design contract. Zero got an A.

The full leaderboard

The methodology

Finding 1: The design tools paradox

Finding 2: Infrastructure beats models

Finding 3: Token misconfiguration is universal

Finding 4: 7 sites block verification entirely

Finding 5: No-code builders produce lower scores

Finding 6: Two CSS properties have near-zero adoption

The AI slop connection

What this means

The companies selling 'beautiful design' can't pass a design contract

The leaderboard: 12 SaaS/productivity platforms

The design-tool paradox

What the leaders got right

Firsts in the series

The Framer pattern

The cross-batch pattern

We scored 12 AI/ML platforms against a design contract. The infrastructure beats the models.

The leaderboard: 12 AI/ML platforms

The infrastructure-models split

What the leaders got right

What the model companies got wrong

The blocked sites

The cross-batch pattern

5 fintech sites won't let us verify their design. That's a finding.

The expanded batch: 13 fintech sites, 5 blocked

What "blocked" means

Why this matters

What the inspectable sites got wrong

The pattern

We scored 57 sites against a real design contract. None of them passed.

The aggregate

The three batches

Batch 1: Design systems, SaaS, and inspiration galleries (30 sites)

Batch 2: Developer tools and frameworks (16 sites)

Batch 3: Fintech (11 sites)

The 7 cross-industry patterns

1. No industry has a passing site

2. tabular-nums is universally ignored

3. Company valuation doesn't correlate with design maturity

4. Consumer sites fail contrast; developer-facing sites pass it

5. The 40-point floor is industry-agnostic

6. Marketing sites beat the design systems they're built from

7. Design awards don't mean design contract compliance

The universal failures

The full leaderboard (top 20 of 57)

What would it take to score a B?

Run the scoring yourself

The bottom line

The fintech sites that handle your money can't pass a design contract

The leaderboard

Finding 1: Not one fintech site uses tabular-nums

Finding 2: The "Buy Now" button you can't read

Finding 3: Affirm's buttons run away from your finger

Finding 4: Adyen has 322 transition:all declarations

Finding 5: Ramp and Robinhood — the 40-point floor

Finding 6: The accessibility double-fail

The pattern across both batches

Run the scoring yourself

The bottom line

We scored 16 more sites. The dev tools are worse than the design awards.

The batch

The new batch is worse than the original

Finding 1: tokens.studio (39.1/F) — the design token tool with 3 tokens

Finding 2: v0.dev (63.0/D) — the only real Core Web Vitals failure in 46 sites

Finding 3: framer.com (56.5/F) — the motion tool with zero motion accessibility

Finding 4: bun.sh (42.0/F) — the fastest runtime with the slowest docs

The pattern: dev tools optimize for API, not for contract

Try it yourself

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

The headline

What "pass" looks like

Where sites fail the most

Tokens (avg 40.8 — the worst dimension)

Motion (avg 52.5 — second worst)

Interaction (avg 60.0 — 12 sites below 50)

The top 5

The bottom 5

2. `tabular-nums` is universally ignored

Finding 1: Not one fintech site uses `tabular-nums`

Finding 4: Adyen has 322 `transition:all` declarations