Foundations
Spacing & Layout
Spacing is built on a 4-pixel base unit. Use multiples of 4 for every margin, padding and gap. Avoid arbitrary values.
Spacing Scale
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px
Layout Grid
12-column grid with 24px gutters at desktop.
1
2
3
4
5
6
7
8
9
10
11
12
Container Widths
Compact
max-w 640px
Forms, modals, focused content
Default
max-w 1024px
Standard product screens
Wide
max-w 1440px
Dashboards, data tables
Elevation
Shadows are subtle — enterprise UIs use borders before shadows.
None
—
XS
shadow-xs
SM
shadow-sm
MD
shadow-md
Border Radius
SM · 4px
Inputs, badges
MD · 6px
Buttons, cards
LG · 8px
Panels, modals
XL · 12px
Hero containers