Maximum content widths. A container says how wide content may grow; a breakpoint says when layout may change — set independently, never conflated. A surface may go full-bleed (heroes, footers), but the content inside re-constrains to the page's one measure so edges align across bands.
| Token | Value | Usage |
|---|---|---|
size.container.sm | Prose and forms — this page's reading measure | |
size.container.md | Narrow content pages | |
size.container.lg | Standard content pages | |
size.container.xl | App shells — this page's content column derives from it | |
size.container.2xl | Wide dashboards, data tables | |
size.container.3xl | Wide-screen marketing frames — open through 1920px, centered beyond | |
size.container.full | Full-bleed: heroes, footers, edge-to-edge surfaces — content inside usually re-constrains |