Spacing

8-point grid with a single 4px escape hatch. All spacing values are multiples of 8, except --space-1 (4px) for tight internal padding.

Primitive Scale

Token	Value	Use
--space-1	4px	Escape hatch — icon padding, badge internals, fine gaps
--space-2	8px	Tight component internal padding
--space-3	12px	Component internal padding
--space-4	16px	Standard component padding; gap between related elements
--space-5	24px	Gap between components; section internal padding
--space-6	32px	Gap between sections; card padding at larger scale
--space-7	48px	Major section gaps
--space-8	64px	Page-level vertical rhythm

Semantic Mapping

Semantic Token	Maps To	Intent
--space-component-padding-tight	--space-1	Tight internal (icons, badges)
--space-component-padding	--space-2	Default component padding
--space-component-padding-loose	--space-3	Comfortable component padding
--space-component-gap	--space-2	Gap within a component
--space-section-padding	--space-4	Section internal padding
--space-section-gap	--space-5	Gap between sections
--space-layout-gap	--space-6	Major layout gaps
--space-layout-gap-lg	--space-7	Large layout divisions
--space-page-padding	--space-8	Page-level padding

Rules

• 8px minimum is too limiting for dense desktop UI — --space-1 (4px) is the governed exception
• Arbitrary small values (3px, 5px, 7px) are not permitted
• --space-3 (12px) is the comfortable padding default; not a grid violation but a practical necessity for 8+4 compositions