CSS custom property system

What it is

Evidence of deliberate decisions. Finding this does not make a page good. It makes it deliberate, which is a different and smaller claim.

How it is weighted

This is a craft marker, so it pulls the score down rather than up — 6 points of evidence that somebody made a decision here.

Craft does double duty in the scoring. It subtracts directly, and it also damps the aesthetic categories: the more deliberate craft a page shows, the less its gradients and rounded corners are allowed to say about it.

How to earn it

Define a token layer as CSS custom properties — colour, spacing, radius, type scale — and use it everywhere instead of one-off values.

Where it fires

Of the homepages we scan as worked examples, this signal fired on 16:

• wikipedia.org 8/100 — 483 CSS custom properties — a real token layer.
• stripe.com 15/100 — 206 CSS custom properties — a real token layer.
• linear.app 8/100 — 804 CSS custom properties — a real token layer.
• vercel.com 21/100 — 119 CSS custom properties — a real token layer.
• tailwindcss.com 75/100 — 319 CSS custom properties — a real token layer.
• github.com 7/100 — 52 CSS custom properties — a real token layer.
• notion.so 13/100 — 169 CSS custom properties — a real token layer.
• figma.com 6/100 — 186 CSS custom properties — a real token layer.
• nytimes.com 4/100 — 135 CSS custom properties — a real token layer.
• webflow.com 23/100 — 43 CSS custom properties — a real token layer.
• framer.com 9/100 — 9722 CSS custom properties — a real token layer.
• cloudflare.com 17/100 — 469 CSS custom properties — a real token layer.
• openai.com 11/100 — 636 CSS custom properties — a real token layer.
• v0.app 37/100 — 18 CSS custom properties — a real token layer.
• replit.com 9/100 — 2409 CSS custom properties — a real token layer.
• webflow.io 23/100 — 43 CSS custom properties — a real token layer.