spacing.*Spacing & Layout
All spacing is derived from a 4px base. Use the named tokens — never hard-code pixel values.
Spacing scale
spacing.00px
zero
spacing.14px
spacing.28px
spacing.312px
spacing.416px
spacing.624px
spacing.832px
spacing.1248px
spacing.1664px
spacing.2496px
spacing.32128px
Border radius
borderRadius.noneNone
0px
Hard edges. Tables, code blocks.
borderRadius.smSmall
4px
Chips, badges, tight inline elements.
borderRadius.mdMedium
8px
Inputs, buttons, small cards.
borderRadius.lgLarge
12px
Cards, panels, popovers.
borderRadius.xlXL
16px
Large cards, modals, feature blocks.
borderRadius.pillPill
9999px
CTAs, content-type badges, tags.
Elevation shadows
Level 1
--shadow-1Cards, panels
Level 2
--shadow-2Dropdowns, popovers
Level 3
--shadow-3Modals, dialogs
Layout grid
Design Better layouts use a 12-column grid with 24px gutters at desktop (1280px+ canvas) and an 8-column grid with 16px gutters at tablet (768–1280px). Mobile uses a single column with 20px horizontal padding. Maximum content width is 1200px, centered.
DESKTOP · 1280px+ · 12 columns · 24px gutter · 24px margin
24px
24
24
24
24
24
24
24
24
24
24
24
24px
1
2
3
4
5
6
7
8
9
10
11
12
Column
Margin (24px)
Gutter (24px)
TABLET · 768–1280px · 8 columns · 16px gutter · 16px margin
1
2
3
4
5
6
7
8
MOBILE · <768px · 1 column · 20px margin
1 column
Desktop1280px+12 colgutter 24pxmargin 24pxmax-width 1200px
Tablet768–1280px8 colgutter 16pxmargin 16pxmax-width —
Mobile<768px1 colgutter —margin 20pxmax-width —