Color System
Our color system is built on semantic tokens that adapt to context, ensuring consistent and accessible interfaces across light and dark modes.
How It Works
1Primitive Colors
The foundation layer consists of raw color values organized into scales (e.g., purple-500, neutral-100). These are the actual hex values that define our palette.
2Semantic Tokens
Semantic tokens reference primitives but describe purpose rather than appearance. For example, --bg-surface-default tells you what it's for, not what color it is.
3Theme Adaptation
Because semantic tokens are mapped differently in light and dark modes, your UI automatically adapts without any code changes. One token, two contexts, zero maintenance overhead.
Explore Colors
Interactive Demos
See the color system in action. These demos illustrate the power of semantic tokens and why they matter for scalable design.