Layout
Mobile first, one column, content centred while the gutter flexes. Three fixed columns cover phone, tablet and desktop. The spacing ramp below is read from the stylesheet.
Columns
The page is one centred column at a fixed maximum width per band. Below that width the gutter is the only thing that flexes, so the reading measure stays comfortable rather than stretching edge to edge on a wide screen. Articles narrow further, to a 720-pixel reading column; only full-bleed blocks like code break out of it.
| Band | Column | Gutter | Top bar |
|---|---|---|---|
| Mobile | 430px | 20px | 56px |
| Tablet | 960px | 24px | 60px |
| Desktop | 1100px | 24px | 64px |
Breakpoints
Three bands, stated as they really are. The tablet band runs up to 1279 pixels, so a 1024-pixel window gets tablet sizing, not desktop. The tab dock is a phone and tablet affordance; the desktop nav takes over at 1280.
| Mobile | ≤ 699px |
| Tablet | 700–1279px |
| Desktop | ≥ 1280px |
Spacing
Space is built on a four-pixel base. The tokens below set the rhythm between sections and headings; because section padding is one-sided, two adjacent sections sit twice the token apart.
| Token | Desktop | Tablet | Mobile | Sets |
|---|---|---|---|---|
--sp-section | 28px | 22px | 22px | Padding on a section (two stack at twice this). |
--sp-band | 56px | 32px | 24px | Padding inside a tinted band. |
--sp-heading | 24px | 18px | 14px | Gap from a section heading to its content. |
The rhythm, annotated
The hatched bands are the measured space itself, not drawings of it: their heights are driven by the live tokens, so they step down per band exactly as the site does. Labels read desktop / tablet / mobile.
The rhythm nests: section, then card, then group, then element, each with less air than the one around it.
Touch targets
Primary touch controls hold a 44-pixel floor: the dock tabs, the reading bar's controls, the footer icons on a phone. The glyph inside stays 15 to 20 pixels; padding does the rest. Compact, pointer-first controls — the shelf and series arrows, the top bar's search — sit at 38 to 42 pixels with clear space around them.
Logo in a circle
The mark sits in a circular frame, filling roughly two-thirds of it with a hairline ring around the edge. It appears at 48 pixels beside a role, 96 in a card, and 120 as a timeline anchor.