Colophon

How this site is designed

One typeface, a strict grid, and color only where it means something. The design borrows from three early modernist movements, each for one job.

Three movements, three jobs

Swiss StyleZürich and Basel, 1950s–60s: The base. A strict grid, flush-left type in one sans-serif, and hierarchy built from size, weight and position instead of boxes, shadows or color.
De StijlNetherlands, 1917–1931: The color. Red, blue and yellow appear only in the ruler at the top of each page, marking the columns where text, details and dates begin.
ConstructivismRussia, 1915–1930s: The one diagonal: a red line at 14°, and the only thing on each page that ignores the grid. Around 1924 Theo van Doesburg brought diagonals into De Stijl and Mondrian rejected them. This site sides with van Doesburg, once per page.

Two of the three hang in the gallery: Constructivism in room 05 and De Stijl in room 07.

Four rules

Information or nothing: Every element has to tell you something true. If it only decorates, it goes.
One diagonal per page: It starts after the words it belongs to and never crosses text.
Color marks structure: Red, blue and yellow live in the ruler. Red also marks state: the page you're on and the row under your pointer.
Precision over volume: One typeface, five sizes, two weights, tabular figures and hairline rules.

Type

34/42, page titles and the home sentence
Statement
22/30, leads and section heads
Heading
15/24, or 16/24 on phones, for reading
Body text
12.5/18, tables, navigation and details
Meta
11/18, column heads and section labels
Label

Set in Inter. Every line height is a multiple of 6, so each block sits on the same 6px rhythm. Bold is reserved for names.

Color

Paper
#FAFAF8 · The page.
Ink
#141414 · Text and rules, 17.6:1 on paper.
Grey
#6B6B66 · Secondary text, 5.1:1.
Signal
#D52B1E · The diagonal and state, 4.8:1.
Blue
#1F4FA0 · The ruler only.
Yellow
#F7D117 · The ruler only, never text.

Grid

24 columns on wide screens, 12 on tablets and 4 on phones. Labels hang in the first columns and text starts after them. The numbered ruler at the top of every page is the grid itself, made visible.

Built with

Next.js as a static export, Tailwind CSS and Tina CMS. Every page is prerendered HTML with clean metadata: the search engine habits this site’s name comes from.