Colors

Three inputs, one palette

A theme is only a background, a foreground and an accent per mode. globals.css mixes every surface, line and text tone from those three with color-mix in oklab, scaled by the contrast factor --k. Switch the mode or pick a theme and every swatch on this page follows. Never hardcode hex or zinc classes for chrome.

Theme inputs

The canvas

--theme-bg = preset.background

Ink: text, icons, hairlines

--theme-fg = preset.foreground

The one primary action, focus, selection

--theme-accent = preset.accent

Text that reads on the accent

--theme-accent-fg = onColor(accent)

--theme-bg · --theme-fg · --theme-accent · --theme-accent-fg · --k

Surfaces

Page and full-bleed layout regions

--background = var(--theme-bg)

Cards, tiles, the soft surface

--surface-1 = light: white 72% · dark: fg 4.5%

Wells, tracks, subtle fills

--surface-2 = fg 4% · dark 7%

Hovered rows and menu items

--surface-hover = fg 7% · dark 11%

Menus, dialogs, toasts

--popover = light: white 85% · dark: fg 7%

App sidebar

--sidebar = fg 2.5% · dark 2%

bg-background · bg-surface-1 · bg-surface-2 · bg-surface-hover · bg-popover · bg-sidebar

Lines and focus

Hairlines around every surface

--border = fg 10%

Hover and selected outlines

--border-strong = fg 22%

Focus ring, used at /30–/40

--ring = accent 45% transparent

border-border · border-border-strong · ring-ring

Accent

Create workspaceSelectedWhite in dark and black in light by default; themes tint it.

bg-primary text-primary-foreground · the one primary action per view

Text tones

Policy synthesis

Titles, values, body you must read

--foreground

Policy synthesis

Frame captions, secondary emphasis

foreground/80

Policy synthesis

Descriptions, captions, placeholders

--muted-foreground

Policy synthesis

Disabled text, quiet metadata

foreground/40

text-foreground · text-muted-foreground · text-foreground/N

Status accents

EmeraldHealthy, running, saved

AmberPending, warning, needs a look

RedFailed, destructive

CyanInformational, data in flight

emerald · amber · red · cyan — state only, never decoration

Chart ramp

--chart-1 … --chart-5 · foreground mixed toward the background