Colors
Design tokens for dark and light themes. Four text tiers, two accent colors, three status colors.
Page
Surface
Accent
Success
Error
Warning
| Token | Variable | Dark | Light | Usage |
|---|---|---|---|---|
| Page | --bg-page | rgb(10, 10, 12) | rgb(250, 250, 250) | Main background |
| Surface | --bg-surface | rgba(255,255,255,0.04) | rgba(0,0,0,0.03) | Cards, inputs |
| Primary | --text-primary | rgb(250, 250, 250) | rgb(9, 9, 11) | Headings, main text |
| Secondary | --text-secondary | rgb(161, 161, 170) | rgb(63, 63, 70) | Body text |
| Tertiary | --text-tertiary | rgb(113, 113, 122) | rgb(82, 82, 91) | Labels, meta |
| Quaternary | --text-quaternary | rgb(82, 82, 91) | rgb(130, 130, 140) | Placeholders, muted |
| Accent Primary | --accent-primary | rgb(99, 102, 241) | rgb(99, 102, 241) | Buttons, active states, CTAs |
| Accent Secondary | --accent-secondary | rgb(52, 211, 153) | rgb(16, 185, 129) | Success, growth, income |
| Error | --error | rgb(239, 68, 68) | rgb(220, 38, 38) | Alerts, destructive actions |
| Warning | --warning | rgb(245, 158, 11) | rgb(217, 119, 6) | Cautions, paused states |
| Success | --success | rgb(34, 197, 94) | rgb(21, 128, 61) | Live, active, confirmed |