Layout max widths
Track the max-width tokens per template so rogue containers are easy to spot and fix.
Max-width defaults
Use these defaults as a starting point before customizing per design.
- Header and footer containers use max-w-7xl.
- Default section shells and multi-column layouts use max-w-7xl.
- If a section is 90–100% text, wrap its text in max-w-3xl and center it inside the shell.
- If a section has cards or columns, keep grids inside the max-w-7xl shell without a 3xl wrapper.
Max width tokens
| Context | Max width | Use cases | Live pages |
|---|---|---|---|
| Site header | max-w-7xl (1280px) | Global navigation shell on desktop. | |
| Standard section shell | max-w-7xl (1280px) | Default for most marketing sections and product overviews. | |
| Narrative & centered copy | max-w-3xl (768px) | Long-form copy, download flows, and pricing explanations. | |
| Forms & gated flows | max-w-3xl (768px) | Input-heavy sections like alignment requests and security questionnaires. | |
| Global footer | max-w-7xl (1280px) | Primary footer container across marketing pages. |