Spacing & layout
Note: spacing and breakpoints currently ride the Tailwind v4 defaults — the system does not yet own them as tokens (unlike color, radius and type). They're documented here as the de-facto scale; if we ever want to retune density, that's the moment to promote them to owned tokens.
Spacing scale
Base unit is 0.25rem (step 1 = 4px). The same scale drives padding (p-*), margin (m-*), gap (gap-*) and size (w-*/h-*). Prefer gap-* on fl/grid over margins.
0.52px
14px
28px
312px
416px
624px
832px
1248px
1664px
2496px
Breakpoints
| Prefix | Min width | Typical device |
|---|---|---|
| sm: | 640px | Large phone / small tablet. |
| md: | 768px | Tablet. |
| lg: | 1024px | Laptop — main desktop breakpoint. |
| xl: | 1280px | Wide desktop. |
| 2xl: | 1536px | Extra-wide. |
Mobile-first: unprefixed = all sizes, prefix = that width and up.