Layout
Container widths, spacing, radii, and how pages collapse on smaller screens.
Spacing
Lay out with flex or grid and gap. Never space siblings with margins. Card grids that share rules use gap: 1px over a --bones-border background instead of borders on each cell.
Constants
| Thing | Value |
|---|---|
| Container | max-width: 1180px; padding: 0 32px |
| Section gap | 128px marketing, 56–64px app |
| Header | 66px marketing, 62px app, sticky, blurred |
| Radii | 8 chips · 9 buttons and inputs · 14 cards · 16 hero · 999 pills |
Responsive
Collapse in this order:
- 1024px — two-column sections stack, and 3-up grids become 2-up.
- 768px — grids become 1-up, the header collapses to the mark and a menu button, and side panels hide.
- 480px — the gutter drops from 32px to 20px.
Related
- Principles — color, type, borders, and focus.
- Why a design system