Foundation

Space and layout

A 14-step space scale, a centred 1060 column, and three layouts that react to their container, not the screen.

01

Space

4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 96, 112, 144, 200. Large steps mark structure; small steps mark grouping.

The site also uses values between the steps, deliberately: optical gaps tied to a line height (6, 10, 14, 18, 22, 26 between text), and section and band rhythm that steps with the width (28, 36, 56, 72, 80, 120, 136, 160, 176). New components use the scale; an off-scale value needs a reason in a comment.

4
8
12
16
20
24
32
40
48
64
96
112
144
200
02

Layout

Container, not viewport
.page is a container named page; every layout rule is @container page (min-width: 768px) or 1024px. That is what lets a tile render the real page at 1440 or 390 and scale it.
Phone, under 768
Drawn at 390. 20px gutters, one column, rail hidden.
Tablet, 768 to 1023
48px gutters, 160 label column, the rail becomes a sticky row of numbers.
Desktop, 1024 and up
Drawn at 1440. A centred 1060 column (190 margins at 1440); fluid label column beside a 700 content column; sticky rail.
Rhythm
Band 28/112 and 136 to the title; section start 144; home ending after 200 (160, 120).
03

Rules

Rules, not boxes
5px name and tile rules (4px phone), 4 to 5px group rules, 1px section rules, hairlines between rows.
No radius
Except inside the agent figure, where rounding marks an illustration.
Targets
44px minimum for anything you tap.