Viewport layout-change thresholds — where the outer shell is allowed to rearrange, not how wide a nested content region grows. Resize the window and the active row marks the viewport breakpoint; below 640px nothing is marked — that is the base, mobile-first state. A main-region grid may use a smaller tier after a sidebar takes its share, and the grid overlay reports both values separately.
| Token | Value | Usage | |
|---|---|---|---|
breakpoint.sm | 640px | Large phones, small tablets | Current |
breakpoint.md | 768px | Tablets and up | Current |
breakpoint.lg | 1024px | Laptops; desktop layouts switch on here | Current |
breakpoint.xl | 1280px | Desktops | Current |
breakpoint.2xl | 1536px | Wide desktops | Current |