A design forensics collection / 12 studies · 1 composite · 1 system
Twelve of the web's best longform experiences — measured with computed-style forensics, rebuilt as style-matched studies, and distilled into one design system and a reference build you can read.
Every card samples its source: the coloured spine and swatches are the real palette, the mono strip is the real measured type. Open a report to read the full study rebuilt in that site's own visual language, or the learnings file for the raw notes.
Start here · the synthesis
Measure, leading, type, colour — and the one law most pages miss: a visual beat every one to three screens. Everything below, distilled into rules you can copy, with the reasoning shown live.
Open the design system →
The reference build & twelve sources
The best of all the rest, built into one page you can read — ideal measure and leading, a drop cap, real diagrams, a visual beat every couple of screens.
Swiss editorial calm — high-contrast serif display, one violet accent, luxurious 1.75 leading.
The designer's personal blog — a light-italic serif headline and gray small-caps meta. Type is the whole design.
Cosy diary — warm-brown serif on cream, a drop-cap italic epigraph, one hand-script pink accent.
Scholarly authority — a serif body for credibility, bold sans headline, 1.85 leading, a card rail for context.
Bold and mission-driven — saturated colour-blocks, a bold display sans, a light body in a narrow measure.
A documentary long-read — full-bleed photography, a centered white headline, a sharp yellow brand flag.
Premium editorial with attitude — a black canvas, giant condensed display, red uppercase pull-quotes.
Data-viz as the narrative spine — more charts than paragraphs, on a calm pale-blue field.
Crude, funny hand-drawn diagrams that make abstract ideas concrete and re-anchor the imagination.
Trustworthy data commons — Playfair serif on navy ink, interactive charts as verifiable evidence.
Calm technical clarity — light slate on white, minimal architecture diagrams that explain each step.
Read across the specimens and a small set of rules keeps repeating. The surfaces look nothing alike; the underlying reading engineering nearly always does.
Every site gives a visual beat every one to three screens — a photo, chart, diagram or pull-quote. It rests the reading brain and re-anchors the imagination, turning a wall of text into a walk through a story. See the design system.
Line length lands at ~40 characters on a phone and 54–66 on desktop, every time. Tubik's 90 is the lone outlier, and it survives only because of very high leading.
Body line-height runs 1.5 to 1.85. The more the page wants to feel trustworthy and read slowly, the more air it puts between lines — NN/g sits at 1.85.
On mobile a site either shrinks the body (20→16px) or holds the size and simply narrows the column. Both land at ~36–46 characters per line.
Warmth from colour temperature (Elle), boldness from colour-blocks (Penguin), drama from dark + photography (Honda, UNSW), calm from mono + one accent (Tubik, NN/g).
Serif display over sans body, sans display over serif body, or one family worked hard across weights. The pairing carries the personality; the body stays quiet.
Letter-spaced small-caps kickers, reading-time badges, section rules — structure only earns its place when it encodes something true about the content.
Of the twelve sources, Tubik Studio's editorial system is the most disciplined: near-black on white, a high-contrast serif display, one violet accent, and generous whitespace. It is the only language that can hold a dozen loud, distinct specimens without competing with any of them — so this index adopts its calm as the frame, adds a monospace utility face for the lab data, and lets each card carry its own source colour.
Each specimen was measured the same way: load the page, read the computed styles of the true body paragraph, the headings, links and captions, compute the real line length and the visual cadence, and capture desktop and mobile at 1366 and 390 pixels. Nothing here is guessed from a screenshot — the numbers on every card are what the browser actually rendered.