Six rules,
running live.
Not a moodboard. Every rule below is wired into this page, measured in the browser, and audited by the page itself at the bottom.
Switzer · text
- paper
- #F2EEE6 warm, never #ffffff
- ink
- #14120D, measuring on paper
- accent
- #B4472A, one, on measuring elements
- measure
- 68 characters, adjustable below
Type does the
heavy lifting.
Hierarchy comes from size, weight and the space between lines, not from colour or decoration. The measure is the one number most pages get wrong: below 45 characters the eye jumps, above 80 it loses the line return. Drag the slider and watch the count.
Svalhalla was built on one standard rather than a cohort, which means the room is never filled to fill it. The point of a measure is that the eye knows where to return, without being told twice.
One accent,
checked by machine.
The ramp is generated in OKLCH, so the steps are perceptually even instead of mathematically even. Every pair below is measured against the real background with the WCAG formula, and the verdict is computed here, not claimed.
Asymmetry
reads as designed.
Press the button. Nothing changes except the two column ratios: 1.06 to 0.94, then 1 to 1. The identical content reads as composed in the first case and as generated in the second. That is the whole trick, and it costs one line of CSS.
The argument
A page is a rhythm, and rhythm needs a dominant beat. Give one column the weight and the other the answer, and the eye knows where to start.
The evidence
Evidence sits beside the claim, not below it. Side by side, the reader checks the claim while making it, which is the only moment they will.
Motion that
means something.
Same move, three curricula. Press each and read the measured duration underneath, taken with the performance clock in this tab. The third one exists to show what a decoration-only animation feels like.
Cheapness shows
in the details.
Navigation, empty states, error copy, focus rings and loading. None of them appear on a moodboard, and all of them decide whether a page feels made by someone. Everything in this block works: click it.
Press Tab. The ring is 2px rust with a 3px offset, never removed, never replaced by a colour shift alone.
No decks saved yet. The gallery keeps what you star, and nothing else.
68 characters per line, counted from the specimen above. measuring ink on paper, computed by the audit below.
The page
audits itself.
Twenty tells, checked against this document's own computed styles at load. Nothing here is asserted by hand: the script reads gradients, corners, animation counts, vocabulary and contrast, then prints what it found. If the page changes and gets worse, the score drops.
Where the
rules came from.
Ten galleries, one per surface, picked by task rather than by taste. Each rule above was chosen after looking at these, not before. Screenshots of two or three of them, handed over with the copy, is the whole method.