Culture
Design System
A flagship technology-magazine surface built as a strict editorial duet — stark black wordmark on a white canvas, a high-contrast display serif at 64 pixels, a humanist serif for long-form reading, and a clean sans for nav, eyebrows, and buttons. Square corners, hairline rules, no chromatic accent.
Color Palette
The brand operates with a single ink black, two surface neutrals, a body grey, and a hairline. The only chromatic accent is the inline link blue, reserved for body copy inside articles — never used on buttons, navigation, eyebrows, or any UI affordance. The entire chromatic identity is a strict editorial duet that reads as a printed magazine ported to the web. No gradient, no marketing chrome, no atmospheric backdrop. Surface contrast and 1 px hairlines carry every cue.
Typography
Three families ladder the system. Playfair Display (substitute for the proprietary WiredDisplay) carries every editorial headline at weight 400 — the brand never promotes display weight to 700+; the high-contrast didone reads as elegant by virtue of typeface design, not bold weight. Lora (substitute for BreveText) sets every body paragraph and byline at 16–19 px with relaxed line-heights tuned for long-form reading density. Inter (substitute for Apercu) handles every nav label, button, eyebrow, and metadata caption at weights 400 and 700.
Cards & Containers
A printed-magazine grid: one large feature card, a row of secondary cards, then a vertical stack of bylined story rows separated by 1 px hairlines. No drop shadows — the brand uses surface contrast and hairlines for elevation. Story-card-large carries a 32 px Playfair display headline; story-card uses Inter weight 700 at 20 px for category callouts; story-row uses Inter weight 700 body for the headline and a BreveText byline strip beneath.
How a generation of newsroom engineers is rebuilding the editorial stack around inference, retrieval, and live data — and what it means for the byline.
Why the lab in Zurich is the one to watch.
Distribution is the moat — community is the price.
Form Elements
Text inputs render with a 1 px solid ink border, 0 px corners, sans body type, and generous tap area. The brand never softens form geometry.
Spacing Scale
Section padding lands at the 48 px step (4xl) on desktop, dropping to 32 px (3xl) at tablet and 20 px (xl) at mobile. Story rows stack at the 16 px step. The base unit is 4 px and every step is a multiple of it. The scale ladders xxs (2 px) → xs (4 px) → sm (8 px) → md (12 px) → lg (16 px) → xl (20 px) → 2xl (24 px) → 3xl (32 px) → 4xl (48 px), giving the editorial rhythm its discipline.
Border Radius Scale
The brand uses 0 px corners everywhere except the small circular icon container. There is no intermediate radius.
Elevation & Depth
Surface contrast and hairlines carry every visual hierarchy cue. The brand never uses a soft drop shadow — there is no Material-style elevation ladder, no SaaS-style card glow, no atmospheric fade. Three discrete states: flat (default), hairline (1 px hairline border), and heavy (2 px solid ink border, reserved for the Subscribe CTA on campaign moments).
Signature Components
A hero band hosting the cover-story headline at 64 px Playfair, a thin masthead band with the centred wordmark, category eyebrows above story headlines in 14 px Inter caps, byline rows under article titles in 12.73 px Lora with relaxed line-height 2.2, hairline dividers between rows, and a black footer band repeating the wordmark beneath topic columns.
Responsive Behavior
The magazine grid collapses cleanly: hero stays full width, secondary cards drop to 1-up at mobile, story rows stay single-column at every viewport.
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768 px | Cover hero scales 64 → 40 px. All grids 1-up. Hamburger nav. |
| Tablet | 768 – 1023 px | 2-up secondary story grid. Section padding 72 / 32. |
| Desktop | ≥ 1024 px | Full magazine grid. Section padding 96 / 48. |
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.