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.
Status tones
Two StatusBadge states with a colour of their own, not a system meaning. Use them only for those states and their charts; never for a series, never as a caution.
var(--status-info)The blue of a StatusBadge state: Created, and the badge info tone. #155dfc in light (what Tailwind v4 blue-600 renders), #50a2ff in dark. Not the info of an Alert or Toast, which is --primary-text.
var(--status-refunded)The orange of the Refunded state. #ca3500 in light (Tailwind v4 orange-700), #ff8904 in dark. A state, never a caution: caution is --warning.
Series
Which entity a mark is: a market, a method, a currency, a provider. Six slots and Other, assigned by entity and never by rank: each entity takes its slot by its place in a fixed catalogue, most common first, and past the sixth it goes in a table. A series never impersonates a state, and status and identity never share a chart. The 20-colour --chart-* set stays for screens that mirror production.
var(--series-1)The brand indigo. A chart with one series is always this slot.
var(--series-2)Orange. Identity only: it never stands for a caution.
var(--series-3)Teal. Identity only, 14.5 (OKLab) from --success. Under 3:1 in light: show its labels.
var(--series-4)Gold, the one amber the system allows, as a declared exception. Identity only, never a caution: the caution tone is --warning, and this slot never shares a chart with a status. Under 3:1 in light: show its labels.
var(--series-5)Pink. Under 3:1 in light: show its labels.
var(--series-6)Blue.
var(--series-other)Other: the folded tail past the sixth entity. Always grey.
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.).