BROADSHEET
A design-practice piece: the front page of a newspaper, rebuilt for a market that never closes. Warm paper by day, a Bloomberg terminal after hours — one live accent travels with your attention the whole way down. Every component below is demonstrated while it is named.
read on01 — Ink & Paper
Two surfaces, three inks — everything else is one accent.
Warm newsprint paper, warm ink, hairline rules. That's the entire neutral palette. Colour is spent exactly once — on the figure and its kicker, where it counts. There are no boxes with shadows competing for attention.
The page never cuts to dark. It blooms between paper and a night canvas — that's the After Hours pole, chapter 08.
There is exactly one live accent at any instant, held in two
tokens — --bs-glow reads on paper, --bs-glow-soft
blooms on night. It retunes instantly, no tween: the change is the
event, not a lag behind your cursor.
02 — The Voices
Three typefaces, never blurred.
Newsreader carries the editorial voice — headlines, body, and figures. A number is set in the same serif as the sentence around it: the figure is editorial, not a UI stat. Archivo is the chrome — kickers, labels, nav, buttons. JetBrains Mono is telemetry only: the ticker, IDs, timestamps.
heads · body · figures
Body copy is set for length and calm — an analyst's reading, not a pitch. Italics carry the aside.
kickers · labels · nav
ticker · IDs · specs
03 — The Grid
Rules over boxes, hairlines over shadows.
Newsprint geometry: clear measures, hairline dividers, generous gutters,
corners barely rounded. Drop-shadowed cards are the SaaS trope this system
rejects — a 1px hairline or a 2px strong rule does
the same job of separation, honestly.
Each card carries its desk's hue as a stripe — a 2px
top border on the front page, a 3px left border on the league
table. That stripe is the only chrome a card gets.
04 — The Wire
The ticker never stops.
You've been reading it since scroll zero — the Edition Bar's live-wire status up top is real chrome, not a mockup, and it stays pinned there for the whole page, not just this chapter. Domain dot, company, headline figure, desk. Pauses on hover so you can actually read one — or below, steps one at a time on a phone.
↑ That's it, running above — live since scroll zero, on every chapter, not just this one. Here's one frame of it held still, so you can read a single item closely:
05 — The Dispatch
The page assembles itself.
On load and on filter change, the front page composes top-to-bottom — each card rises on a staggered delay so it "prints." Hover a card and the page retunes to its desk, not the card itself — no transform, no tilt, just the accent following your attention.
06 — The League Table
Same kit, airier composition.
The Dispatch edition — the airy alternative to the packed front page. A wire-service header carries the aggregate impact; below it, a ranked index sorted by projected impact, hue-spined on the left, figures flush right. Bloomberg terminal, calmed down.
07 — Humanizing the Number
The system never prints the enum.
A raw record arrives as structured data — an impact_type, maybe
a value, maybe a dollar figure. The resolver below turns that into one of
three display kinds, phrased the way an analyst would actually write it. Cycle
the states — notice the last one never fakes a number.
08 — After Hours
The band blooms to night as it crosses center.
One value — --c, 0 to 1 — mixes paper→night and ink→bone as
this band scrolls through the middle of your viewport. Two soft hue blobs
drift behind it in screen blend for aurora. This is where the
governance story lives: board and enterprise dispatches, in the domain's
glow tone instead of ink.
09 — The Dossier
The full article, honestly sourced.
Open any card above, or the one below, and it turns to its dossier — a single reading column, the hero figure bracketed by rules, sources listed as first-class furniture. External sources get a link and an arrow; internal ones are labeled, never disguised. No sources cited means exactly that — the system doesn't fake proof.
10 — The System
The whole paper, one page.
A condensed reference — palette, desks, type, the six motions, four voice principles. Flip the switch below to preview the page with motion off: the Desk keeps naming every chapter, the wire goes static, everything else stays exactly as legible.
Palette
Warm newsprint · warm inkDesks
9 domains · hover to retuneMotion
Energy by restraintVoice
Four rulesNow read any front page as a system, not a mood.
- 01 Ink & Paper — two surfaces, three inks, one accent that travels.
- 02 Voices — three families, never blurred; figures are editorial.
- 03 Grid — three fixed measures; rules over boxes.
- 04 Wire — the ticker never stops; it pauses only for you.
- 05 Dispatch — the page assembles; the accent follows your attention.
- 06 League Table — the airy edition, hue-spined and flush right.
- 07 Humanize — never print the enum; never fake a number.
- 08 After Hours — one value blooms the whole band to night.
- 09 Dossier — sources are furniture, not a footnote.
- 10 System — complete with motion on, and complete with it off.
What this is
A personal design-practice piece — an editorial system built and shown as a portable kit, not tied to any one product. Plain HTML, CSS & JavaScript. One vendored dependency, Lenis, for the glide. No framework, no build step.
Set in
Newsreader
Archivo
JetBrains Mono
Motion, one sentence
Every motion earns its place as attention, arrival, or atmosphere — one
easing, honoured prefers-reduced-motion in the same commit as
the motion itself.