Foundations
Foundations
Layout & grid
Containers, breakpoints, and fluid grids that keep Foundry products readable from 390px to ultra-wide.
Content width
Long-form reading stays ~60–75ch. App shells use max ~1400px with a collapsible sidebar (240–256px). Page padding: 16px mobile → 24–40px desktop.
Breakpoints
| Token | Min width | Use |
|---|---|---|
| sm | 640px | Phones landscape / large phones |
| md | 768px | Tablets |
| lg | 1024px | Docs sidebar appears; desktop chrome |
| xl | 1280px | Wide dashboards |
| 2xl | 1536px | Max canvas stretch |
Fluid grid demo
col
col
col
col
col
col
col
col
Prefer grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 over fixed 12-column math for marketing and docs.
Shell anatomy
Header · sticky · h-14
Main content · max-w ~1400px · vertical rhythm space-y-8