Foundations / Layout
Layout
Desktop is designed to a 1920px reference. Below it, layouts step down through six breakpoints; the side gutter tightens on phones, and content sits inside capped widths.
Breakpoints
Six widths. Component layouts switch here; type scales fluidly between them (see Typography).
Page gutter
The left/right page margin. It steps down with the breakpoint — from 48px on the widest desktop to 20px on phones — so content keeps room as the screen shrinks.
Content widths
Four content widths run across the site. Each caps at a max-width and is centred; below its cap the rendered width is min(max, viewport − 2×gutter), so it shrinks with the screen. Wide fills the page but stops at the 1920 reference (≈1824 after the gutter) — it doesn’t grow past that on ultra-wide screens. Medium caps at 1360, Narrow at 1100, Reading at 680.
max 1920 − gutter --content-width --content-mid --content-narrow (760) bold = at its cap (max-width reached). Medium (--content-width 1360), Narrow (--content-mid 1100) and Reading (--content-narrow 760) are tokens; Wide caps at the 1920 reference minus the gutter.
Container rules
A width-container’s only job is to cap the width and centre it. Spacing is the section’s job, not the container’s — this keeps the model predictable and avoids doubled-up padding.
Container = max-width + margin: 0 auto only. Put the horizontal gutter on the outer section, and all vertical padding on the section too.
Bake the gutter into the container (padding: 0 48px) or add vertical padding inside a width-container. That double-pads and makes the container’s size unpredictable.
⚠ Today many sections put padding: 0 48px on their .wrap (e.g. WorkShowcase) — gutter baked into the 1360 container. Works, but it’s the anti-pattern above. A candidate to refactor so the gutter lives on the section.