Colors
Live color palette. All values update as you change the theme. Mode: dark, Accent: blue, Gray: neutral.
Backgrounds
Page and container backgrounds.
Page
--ds-background-100Recessed
--ds-background-200Surfaces
Card, panel, and interactive surface fills. Translucent on dark mode.
Surface
--ds-gray-100Surface Hover
--ds-gray-200Surface Active
--ds-gray-300Borders
Solid and alpha borders for different contexts.
Default
--ds-gray-400Hover
--ds-gray-500Alpha 100
--ds-gray-alpha-100Alpha 400
--ds-gray-alpha-400Alpha 500
--ds-gray-alpha-500Text
Foreground colors for different emphasis levels.
Primary
gray-1000Secondary
gray-900Muted
gray-600Disabled
gray-500Accent
Primary interactive color. Changes with theme accent selection.
Accent (700)
--ds-blue-700Accent Text (900)
--ds-blue-900ButtonLinkFocus ringActive tab
Semantic
Fixed meaning colors for status, feedback, and alerts.
Success
Fill
--ds-green-700Text
--ds-green-900Warning
Fill
--ds-amber-700Text
--ds-amber-900Error
Fill
--ds-red-700Text
--ds-red-900Data Visualization
Use in this order for charts. Max 6 colors.
1. Blue
--ds-blue-7002. Teal
--ds-teal-7003. Purple
--ds-purple-7004. Amber
--ds-amber-7005. Pink
--ds-pink-7006. Green
--ds-green-700Tailwind Mapping
| Tailwind Class | CSS Variable | Usage |
|---|---|---|
bg-background | --ds-background-100 | Page background |
bg-surface | --ds-gray-100 | Card/panel fill |
bg-surface-hover | --ds-gray-200 | Hover state |
bg-surface-active | --ds-gray-300 | Active/selected state |
border-border | --ds-gray-alpha-400 | Default borders |
text-foreground | --ds-gray-1000 | Primary text |
text-foreground-secondary | --ds-gray-900 | Secondary text |
text-foreground-muted | --ds-gray-600 | Placeholder, hints |
text-accent-foreground | --ds-blue-900 | Links, accent text |
bg-accent | --ds-blue-700 | Accent fills |
text-destructive-foreground | --ds-red-900 | Error text |
text-success-foreground | --ds-green-900 | Success text |
text-warning-foreground | --ds-amber-900 | Warning text |