Foundations
Spacing & layout
A 4px base grid with a 13-step scale. Density is tunable via a single attribute. The grid never rounds; it always lands on a multiple of 4.
Scale
TokenValueUsage
--space-0
0
—
--space-1
4px
Tight inline gap
--space-2
8px
Icon ↔ label
--space-3
12px
Inline groups
--space-4
16px
Default card pad
--space-5
20px
Card body
--space-6
24px
Section gap
--space-8
32px
Sub-section
--space-10
40px
Component break
--space-12
48px
Section vertical
--space-16
64px
Hero break
--space-20
80px
Page section
--space-24
96px
Major page section
Container widths
narrow
720px
Long-form, articles
default
1080px
App pages
wide
1280px
Tables, dashboards
Density modes
Three density modes alter component heights and section padding without breaking the grid. The default is "comfortable"; "compact" suits power users; "comfy" suits marketing surfaces.
compact
control h: 30px
tight power-user views
comfortable
control h: 36px
default · adjusters, dashboards
comfy
control h: 44px
marketing, onboarding