// foundations
Spacing and layout
Ten spacing steps, a twelve column grid and one content width.
The spacing steps
Every gap, margin and padding on the site is one of these ten steps. Small steps go up by 4, large ones by more. This is the single biggest reason a site looks consistent.
--space-1 · 4px · icon to label
--space-2 · 8px · between tags, tight groups
--space-3 · 12px · inside small controls
--space-4 · 16px · between form fields, phone gutter
--space-5 · 24px · card padding, grid gap, page gutter
--space-6 · 32px · between related blocks
--space-7 · 48px · between groups inside a section
--space-8 · 64px · section padding on phones
--space-9 · 96px · section padding on desktop
--space-10 · 128px · around a hero
The page
Content width
1080 pixels at most, centered. --page-max
Reading width
About 66 characters for body text. --measure
Gutter
24 pixels at the screen edge, 16 on phones. --page-gutter
Columns
Twelve, with a 24 pixel gap. --grid-gap
Twelve columns
Layouts are built from halves, thirds and quarters of the twelve. Work grids use thirds on desktop, halves on tablets and a single column on phones.
Screen sizes
| Name | Width | What changes |
|---|---|---|
| Phone | up to 560px | One column. 16 pixel gutter. Menu collapses. |
| Tablet | 561 to 900px | Two columns for grids. Sections tighten. |
| Desktop | 901px and up | Full layout. Three and four column grids. |
| Wide | 1200px and up | Content stops growing at 1080. The margins take the rest. |
Rules
- Use the steps. If a gap is 20 or 30 pixels, it is wrong.
- Space inside a thing is smaller than the space around it.
- Sections are generous. When in doubt, go one step up.
- Anything you can tap is at least 44 pixels tall.
- Design the phone layout first. Most local customers arrive on one.