Last Updated: 1/28/2026
Colors
Our color system.
Primary
| Token | Value | Usage |
|---|---|---|
--color-primary | #2563EB | Actions, links |
--color-primary-hover | #3B82F6 | Hover state |
--color-primary-active | #1D4ED8 | Active state |
Neutrals
| Token | Value | Usage |
|---|---|---|
--color-gray-50 | #F9FAFB | Backgrounds |
--color-gray-100 | #F3F4F6 | Alt backgrounds |
--color-gray-200 | #E5E7EB | Borders |
--color-gray-500 | #6B7280 | Muted text |
--color-gray-900 | #111827 | Primary text |
Semantic
| Token | Value | Usage |
|---|---|---|
--color-success | #10B981 | Success |
--color-warning | #F59E0B | Warning |
--color-error | #EF4444 | Error |
--color-info | #3B82F6 | Info |
Usage
.button-primary {
background: var(--color-primary);
}
.button-primary:hover {
background: var(--color-primary-hover);
}Dark Mode
Colors auto-adjust for dark mode via CSS variables.