Design Tokens
The atomic units of style - colors, spacing, typography, and motion - defined once and consumed everywhere.
Semantic Abstraction
Hardcoded hex values (`#00FF00`) are technical debt. When a rebranding happens, "Find and Replace" is a nightmare.
Design Tokens introduce a layer of semantic meaning. Instead of `color: #EF4444`, we use `color: var(--color-critical-action)`. This allows us to change the visual implementation (Dark Mode, High Contrast Mode, or a complete rebrand) without touching a single line of component code.
The Token Hierarchy
- 1.Primitive Tokens: Raw values.
blue-500: #3B82F6 - 2.Semantic Tokens: Intent-based.
color-primary-action: $blue-500 - 3.Component Tokens: Specific context.
button-bg-default: $color-primary-action
