Architecture
Layer 1
Foundations
Raw values — color, spacing, radius, motion, typography.
Layer 2
Tokens
Semantic mapping. Every token maps intent to a foundation value.
Layer 3
Atoms
Single-purpose components. Consume tokens only.
Layer 4
Patterns
Compositions of atoms solving recurring interface problems.
Layer 5
Flows
Complete user journeys from checkout to onboarding.
Atoms
Patterns
Token Preview
color.background.primary
color.background.surface
color.text.primary
color.status.danger
color.status.success
color.status.warning