4. Viewport Page Margins & Max-Width Matrix
6-tier responsive layout margin scale (XS to XXL).
| Breakpoint | Viewport Range | Margin (px) | Margin (rem) | Content Area | Token |
|---|---|---|---|---|---|
| Breakpoint XS | ≤ 374 px | 16 px | 1.0 rem | Flexible | px-4 |
| Breakpoint S | 375 – 767 px | 28 px | 1.75 rem | Flexible | px-[28px] |
| Breakpoint M | 768 – 1023 px | 40 px | 2.5 rem | Flexible | px-10 |
| Breakpoint L | 1024 – 1439 px | 60 px | 3.75 rem | Flexible | px-[60px] |
| Breakpoint XL | 1440 – 1919 px | 96 px | 6.0 rem | Flexible | px-[96px] |
| Breakpoint XXL | ≥ 1920 px | 96 px | 6.0 rem | Fixed 1728 px (108 rem) | px-[96px] max-w-[1728px] mx-auto |