23 · Order before ornament

Grid and spacing

All spacing is a multiple of 4 px and all content aligns to a 12-column grid. Without this base, sobriety turns into carelessness.

Width 1200 px Show columns

Range	Columns	Margins	Gutter	Max content
Up to 639 px	4	16 px	16 px	Full width
640 to 1023 px	8	24 px	24 px	Full width
1024 px and up	12	32 px	24 px	1200 px, centered

s-1 · 4 px

s-2 · 8 px

s-3 · 12 px

s-4 · 16 px

s-6 · 24 px

s-8 · 32 px

s-12 · 48 px

s-16 · 64 px

s-24 · 96 px

s-32 · 128 px

Base unit: 4 px. All spaces, sizes and radii are multiples of 4 (except 1 px borders).
Inside a component: s-2 to s-4 (8 to 16 px).
Between components: s-6 to s-8 (24 to 32 px).
Between sections: s-16 to s-24 (64 to 96 px). Generous space is part of the brand.
Proximity: Things that belong together sit close; things that do not sit apart. The distance between groups is at least double the distance inside a group.

Cover

Headline across 8 columns, lead across 6, light disc across 4.

Text

Reading column of 8 columns, centered: 60 to 75 characters.

Cards

Three cards of 4 columns with a 24 px gutter.