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.1040px
spacing.1248px
spacing.1664px
spacing.1872px
spacing.2080px
spacing.2496px
spacing.32128px
Border radius
borderRadius.noneNone (default)
0px
EVERYTHING, by default: buttons, inputs, checkboxes, toggles, badges, tags, cards, panels, menus, tooltips, toasts, modals, progress bars, skeletons. Square corners are the system.
borderRadius.circleCircle
50%
True circles only: avatars, radio buttons, spinners. A circle is a shape, not a softened corner.
borderRadius.pillPill
9999px
Filter pills (04) ONLY. Not buttons, not badges: both are border-radius 0. The pill shape is reserved so a pill always means a toggleable filter.
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 —