"Looks expensive" is four measurements, not a mood. Space that changes register between sections, type on a declared ratio, fonts that are in the build instead of named in a stylesheet, and a second colour far enough from the first to have a job. Here are the four thresholds, and what our seventeen themes score against each one.
What are the four numbers?
Every adjective in a premium-design article resolves to one of four measurements. Each has a threshold a theme clears before we ship it, and each is checkable on a site you did not build, in ten minutes with devtools.
- Density ratio. The loosest section's vertical padding divided by the tightest at desktop width, with a floor of 1.75:1.
- Type ratio. One declared step between heading sizes, picked per theme before any copy exists.
- Shipped typefaces. Every family named in a
--font-*token has a font file behind it in the repository. - Hue distance. The OKLCH angle between two colours meant to read as different, with a floor of 30 degrees.
Three of the four are arithmetic that runs on every build. The fourth is still read by a person, and the reason for that is the last section.
Check the site you are looking at
Select two sections in devtools and read the computed padding-top off each: the airiest one and the tightest one. Divide the first by the second.
Under 1.75 means the page has one spatial register. That is the flattest of the four failures and the one nobody has a name for.
Does the page have more than one density?
A page that breathes the same amount everywhere reads as a stack of things rather than a composition. It is the failure our own catalog produced first.
One theme shipped twelve sections at one padding step and twelve at the next, a spread of 1.2:1, with no loud moment and no quiet one. That incident is why the floor exists.
Here is where the catalog sits against it today. We measured every <section> in the eleven themes that are websites rather than dashboards, took the vertical padding on the section or its first child, and used the lg: value where one is declared. Anything under 2rem was dropped as in-app chrome rather than page rhythm.
| Theme | Sections | Registers | Tightest | Loosest | Ratio |
|---|---|---|---|---|---|
| grove | 20 | 5 | 2rem | 8rem | 4.00 |
| covers | 23 | 4 | 2.5rem | 8rem | 3.20 |
| docket | 28 | 6 | 2.5rem | 8rem | 3.20 |
| signal | 25 | 8 | 2.5rem | 8rem | 3.20 |
| kiln | 13 | 5 | 2rem | 6rem | 3.00 |
| marquee | 17 | 5 | 2.5rem | 7rem | 2.80 |
| seminar | 14 | 3 | 2.5rem | 6rem | 2.40 |
| foundry | 20 | 4 | 3.5rem | 8rem | 2.29 |
| meridian | 3 | 3 | 2.5rem | 5rem | 2.00 |
| relay | 23 | 3 | 3rem | 6rem | 2.00 |
| tideline | 10 | 2 | 4rem | 5rem | 1.25 |
The median is 2.80, and the interesting row is the last one. Tideline runs ten sections across two registers, 4rem and 5rem, which is the same shape as the incident that produced the rule.
It is live right now. We publish the number rather than the average that hides it, because a threshold you only report when you pass it is a marketing claim.
Is the type on a ladder, and are the fonts in the build?
Two questions with one answer, because they fail together. A page whose headings are picked one at a time, and whose body face is whatever the operating system supplies, is the most reliable signal of work done at speed.
The fix for the first is a ratio chosen once. Every size on the page is the one below it multiplied by that number, so a heading is never a guess. Our seventeen themes declare six different values in their manifests, from 1.125 at the tightest to 1.5 at the widest.
The value is a personality decision made before any layout exists. A console wants small steps because it is dense with real numbers. An editorial portfolio wants large ones because the headline is the point.
The second question is a file check. Across the catalog our themes name 34 distinct type families, and ship 52 .woff2 files to carry them. Families declared with no file behind them: zero.
That last number is the whole rule. A font stack that resolves to the system default on a stranger's machine is a design decision made by their operating system, not by anyone who was paid.
Two things to look at, no design training
List the font files a site loads from its own domain in the network tab, filtered to font. Then read the font-family declarations in its stylesheet. A family in the second list with nothing in the first is a typeface the site is wishing for.
For the ladder, measure three heading sizes and divide each by the next. If the two results agree to within a rounding step there is a ratio behind them. If they do not, the sizes were chosen one at a time.
Does the second colour have a second job?
An accent a few degrees away from the primary is one hue wearing two names. The page looks like it has a colour system and has one colour with the saturation dial nudged.
We measure it in OKLCH, where the hue angle is close to how a person sees difference, and we run it between themes as well as inside them. Two products that read as one is the same failure at a larger scale. The gate holds each theme's primary at 30 degrees of hue from every other theme's, or 0.06 of chroma, or 0.12 of lightness.
The number that made us write it down: in August our documentation theme and our CRM theme shipped primaries 4.2 degrees apart. Side by side they read as one theme with two names, and nobody caught it by looking, because 4.2 degrees is invisible when the two pages are not adjacent.
The gate is not looking. That pair now measures 31.4 degrees, and meridian's primary clears all sixteen of its siblings.
Where does this break?
The four numbers are a floor, not a ceiling, and the honest version of this post has to name what they miss.
- The density rule exempts six of our themes. A dashboard legitimately runs one padding step, so those six are held to marks per unit of panel height instead.
- The colour gate blocks on the primary, not the accent. Twenty accent pairs across the catalog still sit under 10 degrees of hue apart, the closest at 0.1 degrees.
- A page can clear all four and still be dull. Seven of our themes scored 6.5 or 6.0 out of 10 in a human critique run after the checks already existed.
That last one is the tradeoff, and it is worth paying. A measurement you can run in ten minutes catches the failures that make a site look cheap, and it frees the argument for the thing no script has an opinion about.
Gall's Law holds here in its usual form. The working complex system grew from a working simple one, and four numbers you run beat twelve you agree with.
Every theme in our catalog carries its own thresholds in its manifest, so the values above are readable in the download rather than asserted in a listing.
Four thresholds is what our own failures produced, not a complete account of design quality. The density figures here were computed for this post from the shipped markup rather than read off an existing gate, and the method is in the section that reports them so you can disagree with it.