The Concept
Why a newspaper Page E1Nomadic Owls says it plainly: we send beautiful things to the internet. Dispatch takes the sentence literally. If the studio sends things to the Internet, then the studio is a wire service — and its website should be the paper it prints. Services become departments. Projects become field dispatches with datelines. The contact form becomes a letters desk with a reply coupon.
The visual register is print brutalism: a 1970s international broadsheet crossed with contemporary Swiss web design. Everything on the page is typography, hairline rules, or grid. There is no photography, no illustration, and no AI-generated imagery anywhere in this edition — the entire artwork is type. The three project flags are the only pictorial glyphs, treated as perforated wire-photo stamps.
Every fact on the front page comes from a single shared content file — the studio's real services, real projects, and real contact copy. The newspaper is the framing; nothing inside it is invented. The date in the masthead is the true build date of the static site.
Design System
Three inks, two faces, one grid Page E2The inks
The faces
Archivo Variable · display
Aa Bb 0123
One variable file carries weight 100–900 and width 62%–125%. The nameplate runs at weight 900, width 124% — a headline face impersonating wood type.
wght 100→900 · wdth 62%→125%
IBM Plex Mono · utility
Aa Bb 0123
Every slug, folio, dateline, ticker, table, and coupon is set in the mono — the typewriter of the newsroom. Letterspaced caps at small sizes do the wayfinding.
400 · 500 · 700
The grid
The visible column rules are not borders — the grid container is tinted ink and the cells are paper, separated by a 1px gap. The skeleton of the paper is the layout itself, so the rules can never drift out of register.
Tech & Motion
Mechanical, not cinematic Page E3Stack
- Astro 5, fully static output
- Custom CSS — no framework
- Self-hosted fonts via Fontsource
- One vanilla JS module, ~1 KB
- No tracking, no cookies, no CDN calls
Motion
- Headlines print line-by-line, 230ms/line
- Sections slap in: 190ms, hard easing
- Hovers invert to red — instantly, no fade
- Buttons press down like letterpress
- Wire ticker: one CSS keyframe, paused on hover
Access
- Reduced motion: ticker stops, reveals instant
- Composed page with JavaScript disabled
- Landmarks, skip link, visible focus
- Keyboard reaches every destination
- Newspaper hierarchy is the usability model
How to Reproduce
Seven column-inches of instructions Page E4- 01
Start from the paper, not the screen: pick a broadsheet — masthead, folios, section letters, rules — and treat every UI element as newspaper furniture.
- 02
Limit the palette to three inks: newsprint #F4F1EA, ink #111111, signal red #D62828. If something needs a fourth color, it needs a rewrite instead.
- 03
Set everything in two families: Archivo Variable (weight + width axes) for display, IBM Plex Mono for slugs, folios, tickers, and tables.
- 04
Build the skeleton from hairlines: 1px grid gaps over an ink-tinted background make the column rules real, not decorative.
- 05
Make motion mechanical: 150–250ms transforms, hard easing, no soft fades. Reveals slap in like pages on a desk; headlines rise like a press run.
- 06
Respect prefers-reduced-motion: the ticker halts, reveals become instant, and the page stays fully composed with JavaScript disabled.
- 07
Ship static: Astro renders everything at build time — fonts self-hosted, zero runtime dependencies, one small vanilla script.
Credit
The byline Page E5Designed & built by Claude (Anthropic) for Nomadic Owls.
One of ten directions — see the other nine at nomadic-ten.pages.dev. No AI imagery was used: this edition is pure typography.