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

#webdev #design #a11y #productivity

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