Layout Breakpoints
Grid system — 1:1 from Figma
Grid System
All breakpoints use 12 columns — gutter and margin change per breakpoint
| Breakpoint | Token prefix | Range | Columns | Gutter | Margin | Content width |
|---|---|---|---|---|---|---|
| M-360+ | --grid-xs-* | 0–599px | 12 | 16px | 16px | Max width 472 |
| T-768+ | --grid-sm-* | 600–1023px | 12 | 24px | 64px | width 640 |
| D-1200+ | --grid-md-* | 1024–1439px | 12 | 24px | 96px | width 1008 |
| D-1920+ | --grid-lg-xl-* | 1440px+ | 12 | 32px | 356px | width 1208 |
Column Previews
Purple = column · white gap = gutter · label shows content max-width
M-360+xs
0–599px
Columns12Gutter Width16 fixMargin Width16 px
Max width 472
T-768+sm
600–1023px
Columns12Gutter Width24 fixMargin Width64 px
width 640
D-1200+md
1024–1439px
Columns12Gutter Width24 fixMargin Width96 px
width 1008
D-1920+lg-xl
1440px+
Columns12Gutter Width32 fixMargin Width356 px
width 1208