Colors
The color system uses a two-layer architecture: primitive colors (raw palette) and semantic colors (contextual meaning).
Primitive Palette
Raw color values that form the foundation. These are never used directly in components.
Indigo (Primary)
| Shade | Value | Preview |
|---|---|---|
| 50 | #EEF2FF | |
| 100 | #E0E7FF | |
| 200 | #C7D2FE | |
| 300 | #A5B4FC | |
| 400 | #818CF8 | |
| 500 | #6366F1 | |
| 600 | #4F46E5 | |
| 700 | #4338CA | |
| 800 | #3730A3 | |
| 900 | #312E81 |
Neutral (Gray)
| Shade | Value |
|---|---|
| 50 | #F9FAFB |
| 100 | #F3F4F6 |
| 200 | #E5E7EB |
| 300 | #D1D5DB |
| 400 | #9CA3AF |
| 500 | #6B7280 |
| 600 | #4B5563 |
| 700 | #374151 |
| 800 | #1F2937 |
| 900 | #111827 |
Semantic Colors
Semantic colors have contextual meaning and automatically adapt to light/dark themes:
Surface Colors
| Token | Light | Dark | Usage |
|---|---|---|---|
--color-bg-primary | White | #0F0F19 | Page background |
--color-bg-secondary | Gray 50 | Gray 900 | Card backgrounds |
--color-surface-raised | White | Gray 800 | Elevated surfaces |
Text Colors
| Token | Light | Dark | Usage |
|---|---|---|---|
--color-text-primary | Gray 900 | Gray 50 | Primary text |
--color-text-secondary | Gray 500 | Gray 400 | Secondary text |
--color-text-disabled | Gray 300 | Gray 600 | Disabled text |
Status Colors
| Token | Light | Dark | Usage |
|---|---|---|---|
--color-success | #059669 | #34D399 | Success states |
--color-danger | #DC2626 | #F87171 | Errors, destructive actions |
--color-warning | #D97706 | #FBBF24 | Warnings |
--color-info | #2563EB | #60A5FA | Informational |
Usage
/* Always use semantic tokens, not primitive values */
/* ✅ Good */
.card {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
}
/* ❌ Bad — hardcoded colors don't respect themes */
.card {
background: #f9fafb;
color: #111827;
}
Accessibility
All color combinations meet WCAG 2.1 AA contrast requirements:
| Pair | Contrast Ratio | Pass |
|---|---|---|
| Text Primary / BG Primary | 15.4:1 | ✅ AAA |
| Text Secondary / BG Primary | 7.1:1 | ✅ AA |
| Primary / White | 6.3:1 | ✅ AA |