Spacing

A 4px base scale keeps rhythm consistent across every surface.

Scale

Twelve steps span the spacing range, each a multiple of the 4px base. The bar below renders the real width of each token.

--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

--space-20 · 80px

--space-24 · 96px

Page sections breathe with dedicated vertical-padding tokens that step down on mobile.

Token	px	Usage
`--section-py`	96	Desktop section padding
`--section-py-mobile`	64	Mobile section padding

Every spacing value is a multiple of 4, the base step that keeps the whole system on-grid.