Spacing

A consistent 4px-based spacing scale for padding, margins, and gaps.

The Scale

All spacing tokens are multiples of 4px, creating visual rhythm and alignment.

--space-0 0px

--space-0-5 2px

--space-1 4px

--space-1-5 6px

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

Token	Value	Pixels	Use Case
`--space-px`	1px	1px	Borders, fine details
`--space-0`	0	0px	Reset spacing
`--space-1`	4px	4px	Tight inline spacing
`--space-2`	8px	8px	Form elements, icons
`--space-3`	12px	12px	List items, small cards
`--space-4`	16px	16px	Default component padding
`--space-6`	24px	24px	Card padding, section gaps
`--space-8`	32px	32px	Large component spacing
`--space-12`	48px	48px	Section padding
`--space-16`	64px	64px	Page section gaps
`--space-24`	96px	96px	Hero sections