Colophon

§ 01

Grid

Twelve columns with a fluid gutter. Hairlines mark the column gaps on covers and openers, the way a print layout shows its grid. Press G anywhere to lay the grid over the page.

§ 02

Type

Display

Archivo

Variable, set at width 62 and weight 800. A free stand-in for a condensed grotesk like Druk.

Reading

Newsreader

Variable with an optical size axis, so captions and 20 px body text each get the right cut.

Folios

Plex Mono

Page numbers, dates and captions, with tabular figures.

step-5Concrete FuturesMasthead, issue themes
step-4Concrete FuturesSection titles, pull quotes
step-3Concrete FuturesList titles, sub-heads
step-2Concrete FuturesIntros, editor's quotes
step-1Concrete FuturesStandfirsts
step-0Concrete FuturesBody text, 18–21 px
step--1Concrete FuturesFolios, captions, kickers

§ 03

Color

Paper, ink and exactly one signal color per issue. The signal color is a single field on the issue in the CMS; the current issue's value is written to --signal on the root element, so changing it re-themes the whole site.

Paper#F2EFE8

Ink#111111

Nº 12 Concrete Futures#FF4F1A
Nº 11 Soft Borders#3D5BFF
Nº 10 Water Rights#00A37A
Nº 09 After Hours#C6E600
Nº 08 Common Ground#E8A600
Nº 07 The Long Commute#E8407F
Nº 06 Housing Is Infrastructure#8A5CFF
Nº 05 Small Rooms#00A6D6

Text on a signal color uses the issue's signal-ink value, checked for AA contrast. Photos stay black and white; the signal color only appears in small details.

§ 04

Components

Buttons

PrimarySecondaryOn signal

Pull quote

“The future is already poured.”

Side-note

Text with a note reference.1

Plate

§ 05

Motion

Fast and restrained: 200–400 ms. Type moves, boxes do not.
Headlines rise word by word out of line masks (GSAP SplitText).
Page changes use the View Transitions API; the clicked title grows into the next headline.
GSAP fades pages in where view transitions are not supported.
With reduced motion, smooth scrolling, splits and slides are all switched off.