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
Six canonical max-widths. Use the smallest container that holds the content cleanly — long-form prose should be --container-prose (~66ch ≈ 720px), not the page-width container.
--container-prose
66ch
Long-form prose, MDX articles, blog posts
--container-narrow
480px
Single-column forms (signin, modals)
--container-form
640px
Wider forms with side-by-side fields
--container-page
1080px
Default app pages, docs
--container-wide
1280px
Tables, dashboards, dense workspaces
--container-screen
1440px
Edge-to-edge with breathing room
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 · reviewers, dashboards
comfy
control h: 44px
marketing, onboarding