Spacing

8px base grid. Named tokens from xs (4px) to 4xl (96px). The only exception is xs at 4px — used for micro-spacing within tight component internals. All layout spacing uses 8px multiples.

Scale

--space-xs 4px Inline icon gaps, tight internal padding

--space-sm 8px Default icon-to-label gap, compact padding

--space-md 16px Standard padding, between related elements

--space-lg 24px Between sections, card padding

--space-xl 32px Major section breaks

--space-2xl 48px Page-level spacing

--space-3xl 64px Hero spacing, page margins on desktop

--space-4xl 96px Maximum breathing room

Side-by-Side Comparison

4px

8px

16px

24px

32px

48px

64px

96px

Usage in Context

COMPONENT INTERNAL

LABEL

xs (4px) gap between icon and label

CARD PADDING

Card content sits inside lg (24px) padding.

lg (24px) for card internal padding

SECTION SPACING

Section A

Section B

2xl (48px) between major sections

KEY RULE

The 8px grid is non-negotiable. All layout spacing uses 8px multiples. The only exception is --space-xs (4px), reserved for micro-spacing within tight component internals like icon-to-label gaps and badge padding.