Design system
System
Every token and component the site is built from, on one page. Change something here and it changes everywhere.
(01) — Type scale
Perfect fourth · 1.333 from 16px
Treasure
Explainers
Selected work
Subheading, and a figure: 15,200
A lead paragraph, one step up the scale
Running prose is set at seventeen pixels, on a measure of sixty-eight characters.
Secondary prose, list items and descriptions.
LABELS, CAPTIONS AND METADATA
CORNER MARKS AND FOLIOS
(02) — Families
Two, and only two
Archivo — structure
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
0123456789
A neo-grotesque. Carries every heading, label, figure and navigation item. Three weights: 400, 500, 600. Numerals are set tabular wherever they sit in a column.
Newsreader — prose
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklm
0123456789
A variable serif with a real optical-size axis, so caption-size text and 23px leads are different drawings rather than one scaled up. If it is a sentence you read, it is set in this.
(03) — Colour
Ink on paper, plus two signals
--paper
#ffffff
The page
--paper-sunk
#f4f4f4
Hover states, recessed panels
--ink
#111111
All primary text
--ink-muted
#6e6e6e
Captions, meta, secondary
--rule
#e0e0e0
Every hairline
--accent
#1b4415
Green — structure and position
--accent-alt
#a82047
Carmine — voice and action
Green — structure and position
The system speaking. Section numbers, active navigation, the hanging rules on lists, text selection, focus rings and the grid overlay. It tells you where you are.
Carmine — voice and action
Treasure speaking, and anything you can do. The role line, case-study taglines, links and their underlines, row arrows, and every hover state. It tells you what is being said, or what happens if you click.
Both are dark enough to read as second inks rather than highlights — 11.1:1 and 7.1:1 against white, where the vermillion they replaced managed only 4.3:1 and failed AA for body text. Neither is ever used as a large background fill. If two accents sit adjacent and neither is a hover, one of them is wrong.
(04) — Grid
12 columns · 2in margin
Twelve columns above 900px, six below. The page margin is two inches — an actual printed-page margin, stepping to one inch under 1200px and to a phone margin under 900px. Press G anywhere on the site to draw this grid over the page.
(05) — Components
Everything the pages compose from
Index row
Data table
Prose
Running prose sits at a fixed measure of 68 characters regardless of how many columns it is given. This paragraph shows the default: a bold lead-in, an italic aside, and an inline link that draws its underline in the accent.
- List items hang from a short accent rule rather than a bullet.
- The rule is one grid unit wide, so lists stay on the same system as everything else.
Lead
A lead paragraph, one step up the scale, used once per section.
(06) — Spacing
8px base unit