Showroom · Build notes

How The Ledger was made

A fictional broadsheet with a factual spine: two colors, two typefaces, a grid ruled in ink, and essays a fact-checker can actually check.

What it demonstrates

That brutalism is a discipline, not an excuse. The page allows itself ink, paper, one display face and one text face — and gets its drama from scale, rules, and inversion instead of color and motion. The other half of the argument is editorial: fictional masthead, real journalism standards. Every date, name, and number in the essays is accurate, and the corrections box says so out loud.

Techniques, honestly named

• Ink-gap grid — the board is a 12-column CSS grid on a black body background with 2px gaps, so the gutters themselves are the ruled lines.
• CSS marquee ticker — the headline track is duplicated once in JS, animated translateX(0 → -50%) for a seamless loop, with a real Pause button, pause-on-hover, pause when the tab hides, and a static wrapped fallback under reduced motion.
• Hover inversion — each article cell flips ink-for-paper on hover and :focus-within, newspaper-photo-negative style.
• Newsreader with optical sizing — body text uses the 6–72 optical-size axis with italics as the second voice; Archivo Black carries the masthead at clamp() scale.
• Checkable essays — Swiss typography (Müller-Brockmann, Basel), the em dash (one em = the point size; Bringhurst’s verdict), Knuth’s TeX (version numbers converging to π, $2.56 hexadecimal bounties), and Carolingian minuscule (Alcuin to Jenson to Griffo). The jokes are jokes; the numbers are not.

Recreate it