Design system · 12
A narrow frame, unevenly spaced.
Pages share one frame and a small set of reading measures. What varies is the space between sections — on purpose, because even spacing says nothing about what matters.
Frame and measure
Everything sits inside a 64rem frame with 24px gutters. Text never runs the full width of it: paragraphs are held to a reading column of 42 to 48rem.
Page frame 64rem Every marketing page.
Detail 56rem Services detail.
Reading, wide 48rem The upper bound for text.
Reading 42rem Heroes, ledes, prose.
Composition is not uniform. Marketing introductions are centred; contact, legal and this guide are left-aligned, because they are documents. Do not flatten every page into one template.
Section rhythm
Three steps of vertical space. Shown to scale, at desktop size.
Content
Tight
56px → 64px
A section that belongs to the one above it.
Content
Default
80px → 96px
The ordinary gap between sections.
Content
Feature
96px → 128px
The one or two moments a page is built around.
Radius
Corners are squared off rather than fully round. The navigation bar, the key and the menus sit in one family; only text-like actions — ghost buttons — are pills.
Small
6px
Small chips
Medium
8px
Fields
Base
10px
The base radius
Large
14px
Navigation, menus, recesses
Card
16px
Cards and plates
Implementation
| Utility | Value | Use |
|---|---|---|
| 64rem | Page frame. Every marketing page. | |
| 56rem | Detail. Services detail. | |
| 48rem | Reading, wide. The upper bound for text. | |
| 42rem | Reading. Heroes, ledes, prose. | |
| 56px → 64px | A section that belongs to the one above it. | |
| 80px → 96px | The ordinary gap between sections. | |
| 96px → 128px | The one or two moments a page is built around. | |
| 6px | Small chips | |
| 8px | Fields | |
| 10px | The base radius | |
| 14px | Navigation, menus, recesses | |
| 16px | Cards and plates |
Breakpoints
| Breakpoint | From | What changes |
|---|---|---|
| 640px | The volumes leave their carousel and stand in a row | |
| 768px | Section rhythm and hero padding step up | |
| 1024px | Desktop navigation replaces the mobile bar and sheet |
Desktop and mobile navigation are separate components that share a material and nothing else. A change to one must not reach the other.
Rules
Do
- Hold paragraphs to the reading column, inside the page frame.
- Choose a section's rhythm by its relationship to its neighbours.
- Use the three display steps and the three rhythm steps as given.
- Keep headings that follow the reader free of anything that clips them.
Don’t
- Run body text the full width of the frame.
- Give every section the same padding.
- Force a left-aligned document into a centred marketing layout.
- Let any element run wider than the screen it is on.