Colors

Core palettes built on oklch color space, semantic token pairs for light and dark modes, and specialized tokens for UI surfaces, charts, and sidebar.

Core Palettes

Raw color values from Style Dictionary (Tier 1). Each palette has lightness steps from 50 (lightest) to 950 (darkest).

Zinchue \u2248 286\u00b0

Slatehue \u2248 255\u00b0

Stonehue \u2248 25\u00b0

Redhue \u2248 27\u00b0

Amberhue \u2248 84\u00b0

Greenhue \u2248 147\u00b0

Bluehue \u2248 262\u00b0

Violethue \u2248 303\u00b0

Indigohue \u2248 270\u00b0

Sepiahue \u2248 55\u00b0

Semantic Tokens

Mode-aware background/foreground pairs (Tier 2). These change between light, dark, and preset themes. Toggle the theme in the sidebar to see them adapt.

Background

--background--foreground

Card

--card--card-foreground

Popover

--popover--popover-foreground

Primary

--primary--primary-foreground

Secondary

--secondary--secondary-foreground

Muted

--muted--muted-foreground

Accent

--accent--accent-foreground

Destructive

--destructive--destructive-foreground

Status Colors

Inkwell-specific semantic colors for success, warning, and info states.

Success

--success--success-foreground

Warning

--warning--warning-foreground

Info

--info--info-foreground

Surface & Input

Border, input outline, and focus ring colors.

Chart Colors

Five distinct hues for data visualization, chosen to remain distinguishable for color vision deficiency.

Sidebar

Sidebar-specific semantic pairs for navigation chrome.

Sidebar

--sidebar--sidebar-foreground

Sidebar Primary

--sidebar-primary--sidebar-primary-foreground

Sidebar Accent

--sidebar-accent--sidebar-accent-foreground