Foundations
Grid & Spacing
Three column grids cover phones, tablets and desktops. Above 1200px, pick a centered or a wide layout.
Column grids
Small 375px
4 cols · 74px column · 16px gutter · 16px margin
Medium 960px
8 cols · 87px column · 24px gutter · 48px margin
Large 1200px
12 cols · 65px column · 24px gutter · 80px margin
Above 1200px
Choose based on content.
1200px content
Centered
Content keeps the 1200 layout; margins grow. Best for forms, checkout and long reading.
Flexible content
Wide
Margins stay fixed; content stretches. Best for menus and grids of recipe tiles.
Spacing scale
Built on a 4px base. Use these steps for padding, margins and gaps.
4px
8px
12px
16px
24px
32px
48px
64px
80px
Corner radius
None
0
Small
2px
Default
8px
Pill
999px