# Wait But Why — The Fermi Paradox

Longform design study No. 11. Research notes behind the homage page in `reports/11-waitbutwhy.html`.

## Overview

Wait But Why is a long-explainer blog whose whole identity is *charm over polish*. "The Fermi
Paradox" is a single, very long, scroll-driven page that walks a casual reader through a heavy
idea. The personality is deliberately unslick: a plain white page, ordinary black sans body text
in a wide relaxed column, blue bold titles, one orange accent block in the sidebar, and — the
star of the show — a run of crude, funny, MS-Paint-grade hand-drawn diagrams that do the actual
explaining. The type stays boring so the sketches can be loud.

There is no hero image, no card grid, no reading-progress chrome. Scroll is the only interaction
and the reading order is strictly linear. The thesis of the layout is simple: a picture dropped in
at the right moment re-anchors a tiring reader, which is how a 20,000-word post stays readable.

## How it structures longform content

- **One column, no chrome.** A single reading column on white, a date + byline, then paragraph
  after paragraph of plain sans. The scroll is the whole interface.
- **Written to be spoken.** The prose reads like a friend over-explaining on a napkin, and the
  layout is tuned to keep a casual reader moving rather than to look literary.
- **Three devices carry the reader:** blue bold titles mark each movement of the argument; short,
  frequent paragraphs keep the eye falling; hand-drawn diagrams interrupt exactly when an idea
  turns abstract.
- **Wide measure on purpose.** The column runs wide (~98 characters per line) — well past the
  "comfortable" range — because the loose, wide setting signals "relax, keep reading" and the
  frequent diagrams stop line-length from mattering.

## Desktop treatment

- Plain white page; ordinary black-ish body.
- Body **Noto Sans 16px / 24 line-height (1.5)**, colour `#333` on `#fff`.
- Titles **bold, WBW deep blue** — H1 ~40px, H2 ~32px.
- Measure ~**780px, ~98 characters per line** (wide and informal by design).
- Hand-drawn **orange logo** (MS-Paint style) sits on white above a **deep-blue nav bar** of text
  links; an **orange subscribe block** anchors the right sidebar.
- Visual cadence: ~**10 hand-drawn diagrams** across ~**69 paragraphs / ~32 screens**; where they
  cluster you hit a visual roughly **every 0.75 screen**.

## Mobile treatment (390px)

- Same voice, same type — the layout narrows rather than restructures.
- Body **holds at 16px / 24 (1.5)**; nothing shrinks.
- Measure drops to ~**325px, ~41 characters per line**.
- The orange sidebar block drops below the article; the nav collapses to a menu button.
- Diagrams go full-width and stay inline in the flow.

## Visual cadence (the imagery / diagram strategy)

This is the signature and the reason the page works. The diagrams are not decoration — they are
*pacing*. Each one lands where the prose asks you to picture something enormous or improbable (a
scale, a number, a probability), and the crude marker-and-stick-figure style is the point: it makes
a cosmic abstraction feel homemade and graspable, and it resets attention before fatigue sets in.

Measured cadence to reproduce:

- ~**10 hand-drawn diagrams** on the page.
- Across ~**69 paragraphs** and ~**32 screens** of scrolling.
- Roughly **a visual every 0.75 screen** in the stretches where diagrams appear.
- Hand-drawn **logo, diagrams, and icons**; blue + orange accents throughout.

The homage page demonstrates the idea with its own built-from-scratch SVG (Fig. 1): two lines
across "32 screens" — a dashed *wall of text* that slides steadily into fatigue, and a solid blue
*paced with diagrams* line that saws back up at each orange diagram marker and ends far higher.
Unbroken length is the enemy of attention, not length itself.

## Design system (tokens)

**Type**
- Body + titles: **Noto Sans** (homage uses **Inter** 400/700) — plain, unfussy sans.
- Diagram / handwritten labels: **Caveat** 500/700 — the homemade marker-on-paper voice.
- Scale: H1 Inter 700 ~40px WBW blue; H2 Inter 700 ~32px; body 16px / 24 (1.5); handwriting sizes
  *up* inside diagrams so it reads as a caption.

**Colour**
- Page white `#FFFFFF`
- Ink body `#333333`
- WBW deep blue `#0A2D5C` (titles, nav)
- Link blue `#2A63C4` (the only interactive colour)
- Orange block / sketch accent `#F2A100`
- Sketch stroke `#222222`

**Layout**
- Wide relaxed reading column ~**740–780px** (~98 CPL desktop / ~41 CPL mobile).
- Leading held at **1.5** across breakpoints; only the measure changes.
- Optional sticky **orange aside** on the right; drops below on mobile.
- Diagrams run full column width, inline in the flow.

## Signature techniques

- **Pictures as pacing.** Drop a visual right where an idea turns abstract; it resets attention
  better than any pull-quote and lets a very long page keep its reader.
- **Crude on purpose.** Wobbly, homemade diagrams read as honest and approachable — they invite the
  reader in where a slick infographic would hold them at arm's length.
- **Boring type, loud sketches.** One plain sans, one blue for titles; all the personality lives in
  the drawings, not the fonts.
- **Rationed colour.** Blue is structure, orange is "aside / marker," link blue is the only
  interactive colour, and the white page leaves the sketches looking drawn on the paper itself.
- **Wide measure as tone.** A wide column is a deliberate signal that the writing is casual — a
  trade that only works because the prose is broken up so often.

## What to steal

1. Use pictures to pace, not to decorate — place a visual where an idea turns abstract.
2. Let crude be a feature; a homemade diagram reads as honest and lowers the barrier to entry.
3. Keep the type boring so the sketches can carry the personality — one sans, one blue.
4. Trade a tight measure for a wide, relaxed one *when the tone is casual* and broken up often.
5. Hold type across breakpoints — same size, same leading; let one column narrow and the aside fall.

## Homage build notes

- The hero mark, the Fig. 1 cadence chart, and the sidebar doodle in `reports/11-waitbutwhy.html`
  are all original inline SVG with a `feTurbulence` + `feDisplacementMap` "roughen" filter to fake
  the hand-drawn wobble; handwritten labels are set in Caveat *outside* the filter so they stay crisp.
- None of Wait But Why's own artwork is reproduced. The two captured screenshots appear only inside
  a small, attributed "Visual reference" figure for commentary.
- SVG colours are literal hex (not CSS `var()`), since `var()` is not resolved inside SVG
  presentation attributes.
- Motion is minimal and the page carries no scroll-triggered animation; transitions are disabled
  under `prefers-reduced-motion: reduce`.

## Visual references

- Desktop: `../assets/screenshots/11-waitbutwhy-desktop.jpeg`
- Mobile: `../assets/screenshots/11-waitbutwhy-mobile.jpeg`

## Source URL

https://waitbutwhy.com/2014/05/fermi-paradox.html