Colors
The system uses CSS tokens with light and dark variants. Never hardcode hex — always use the token so everything respects the active mode.
Brand
var(--primary)Main CTA, links, active states. One Primary per screen.
var(--primary-foreground)Text on Primary surfaces.
var(--primary-text)Primary as INK — links, ghost buttons, emphasis. It lifts in dark because one indigo cannot both carry white on a button and read as text on a dark ground; the two requirements do not overlap.
Surfaces
var(--background)App base surface.
var(--card)Containers elevated over the background.
var(--muted)Subtle backgrounds: TabsList, alternating rows, code blocks.
var(--accent)Hover states and selection in menus.
var(--popover)Dropdowns, tooltip content, context menus.
Text
var(--foreground)Primary text.
var(--muted-foreground)Secondary text, hints, low-hierarchy labels.
Borders & focus
var(--border)Card borders, separators.
var(--input)Input and toggle borders.
var(--ring)Focus ring.
Semantic
var(--destructive)Destructive actions, errors, critical alerts.
var(--success)Confirmations, approved states.
var(--warning)Cautions and states that need attention but are not errors. Yellow, imported from production — amber is not in the system.
Usage
System rules when applying color on screen.
- Always use var(--token) so light and dark work automatically.
- One Primary per screen — reserve it for the main action.
- Semantics (Destructive / Success) only communicate real state, they don't decorate.
- Muted foreground for hints, timestamps, and low-hierarchy labels.
- Never hardcode #hex in components — breaks dark mode.
- Don't use Destructive as visual accent — it loses meaning.
- Don't mix Muted background with Muted foreground without checking contrast.
- Don't invent new tokens without discussing — you lose consistency with the real DS.
Tailwind palette
The full 22-family × 11-shade Tailwind default palette is available in the framework. Click any swatch to copy its class name (bg-slate-500, text-blue-600, etc.).