Colors

Drivers

The frozen OKLCH constants the whole palette is derived from.

brand

#1d82ff

primary, ring & sidebar accents

canvas

#f9f8f6

surface ladder, tint & text hue

--hue

--c-bg

0.003

--bg-l

0.979

--contrast

0.84

--brand-h

257

--brand-c

0.195

--brand-l

0.62

The two Opus source colors derive the seven OKLCH drivers, which derive every token below. The drivers are frozen constants in globals.css — the dashboard always ships this one theme.

Raw palette

The primitive ramps every semantic token is sampled from — generated from the frozen drivers.

Neutral ramp--color-gray-*

100

200

300

400

500

600

700

800

900

950

Red ramp--color-red-* · oklch(L · C · 17)

Green ramp--color-green-* · oklch(L · C · 145)

Yellow ramp--color-yellow-* · oklch(L · C · 91)

Orange ramp--color-orange-* · oklch(L · C · 55)

Purple ramp--color-purple-* · oklch(L · C · 295)

Teal ramp--color-teal-* · oklch(L · C · 180)

AI ramp--color-ai-* · saturated identity colors

Brand rampoklch(L · 0.195 · 257)

0.97

0.92

0.85

0.76

0.66

0.56

0.47

0.38

0.3

0.22

White alpha rampoklch(1 · 0 · 0 / A)

0.020.050.10.150.20.30.40.550.70.85

Dark alpha rampoklch(0 · 0 · 0 / A)

0.020.050.10.150.20.30.40.550.70.85

Brand anchors

--brand

oklch(0.62 0.195 257)

--brand-hover

oklch(0.570 0.195 257)

Neutral gray tokens

The named gray steps product tokens sample from, light to dark.

--color-gray-0

White

Cards, popovers, elevated surfaces

--color-gray-0

--color-gray-25

Near-white

Subtle canvas-adjacent tint

--color-gray-25

--color-gray-50

Canvas · secondary

Page shell, sidebar, trays, grouped blocks

--color-gray-50

--color-gray-100

Tertiary · inset

Recessed wells, stronger nested hierarchy

--color-gray-100

--color-gray-200

Deeper step

Available primitive step beyond tertiary

--color-gray-200

--color-gray-300

Soft neutral

Available primitive step

--color-gray-300

--color-gray-400

Disabled

Disabled text and icons

--color-gray-400

--color-gray-500

Tertiary text

Hints, metadata, low-emphasis labels

--color-gray-500

--color-gray-600

Secondary text

Sidebar text, supporting copy

--color-gray-600

--color-gray-700

Strong neutral

Available primitive step

--color-gray-700

--color-gray-800

Primary icon

Default icon color

--color-gray-800

--color-gray-900

Inverse surface

Dark surfaces

--color-gray-900

--color-gray-950

Primary text

Headings and body text

--color-gray-950

Semantic layer

Product UI should use these role tokens: backgrounds, text, icons, borders, state, accent, and full status triplets.

Backgrounds

App shell & page backgroundbg-canvas

Cards, panels & tablesbg-primary

Gentle section inside whitebg-subtle

Menus, popovers & dialogsbg-elevated

Menu itemAnother actionMore options

Grouped traybg-secondary

Inset wellbg-tertiary

White surfacebg-primary

Nested traybg-secondary

Grouped blockbg-secondary

Text

Primary — section titles and key content

Secondary — supporting copy and descriptions

Tertiary — metadata, timestamps, helper text

Disabled — inactive or unavailable text

Inverse — on dark, brand, or strong status fills

Icons

primary

secondary

tertiary

disabled

inverse

Borders and states

border-primary

border-secondary

border-tertiary

state-hover

state-pressed

state-selected

Accent

Status triplets

SuccessWarningErrorInfoAI

Token	Variable	Value
Backgrounds
Canvas	--color-bg-canvas	—
Primary	--color-bg-primary	—
Subtle	--color-bg-subtle	—
Secondary	--color-bg-secondary	—
Tertiary	--color-bg-tertiary	—
Elevated	--color-bg-elevated	—
Text
Primary	--color-text-primary	—
Secondary	--color-text-secondary	—
Tertiary	--color-text-tertiary	—
Disabled	--color-text-disabled	—
Inverse	--color-text-inverse	—
Icons
Primary	--color-icon-primary	—
Secondary	--color-icon-secondary	—
Tertiary	--color-icon-tertiary	—
Disabled	--color-icon-disabled	—
Inverse	--color-icon-inverse	—
Borders
Primary	--color-border-primary	—
Secondary	--color-border-secondary	—
Tertiary	--color-border-tertiary	—
States
Hover	--color-state-hover	—
Pressed	--color-state-pressed	—
Selected	--color-state-selected	—
Focus	--color-state-focus	—
Overlay scrim	--color-overlay-scrim	—
Accent
Primary	--color-action-primary	—
Primary hover	--color-action-primary-hover	—
Primary active	--color-action-primary-active	—
Primary foreground	--color-action-primary-foreground	—
Secondary	--color-action-secondary	—
Secondary hover	--color-action-secondary-hover	—
Secondary active	--color-action-secondary-active	—
Secondary foreground	--color-action-secondary-foreground	—
Destructive	--color-action-destructive	—
Destructive hover	--color-action-destructive-hover	—
Destructive active	--color-action-destructive-active	—
Destructive foreground	--color-action-destructive-foreground	—
Status backgrounds
Success bg	--color-status-success-bg	—
Warning bg	--color-status-warning-bg	—
Error bg	--color-status-error-bg	—
Info bg	--color-status-info-bg	—
AI bg	--color-status-ai-bg	—
Status text
Success text	--color-status-success-text	—
Warning text	--color-status-warning-text	—
Error text	--color-status-error-text	—
Info text	--color-status-info-text	—
AI text	--color-status-ai-text	—
Status borders
Success border	--color-status-success-border	—
Warning border	--color-status-warning-border	—
Error border	--color-status-error-border	—
Info border	--color-status-info-border	—
AI border	--color-status-ai-border	—

shadcn tokens remain available as the adapter layer for primitives; product UI should prefer this API.

Primitive neutrals

Lower-level implementation tokens, tinted by --hue. The semantic layer above is the product-facing API.

Token	Variable	Value
Surfaces
Background	--background	—
Card	--card	—
Popover	--popover	—
Secondary	--secondary	—
Muted	--muted	—
Accent	--accent	—
Text
Foreground	--foreground	—
Muted foreground	--muted-foreground	—
Card foreground	--card-foreground	—
Popover foreground	--popover-foreground	—
Secondary foreground	--secondary-foreground	—
Accent foreground	--accent-foreground	—
Borders
Border	--border	—
Input	--input	—

Elevation — surfaces nested in z-order

--color-bg-canvaslowest dashboard layer

--color-bg-primarynormal white container

--color-bg-subtlealmost-white background

--color-bg-tertiaryrecessed well

--color-bg-secondary

--color-bg-elevated

The warm canvas sits lowest. White base and raised surfaces sit above it; subtle surfaces create almost-white background areas; secondary shares the canvas gray for trays and grouped blocks; inset tertiary surfaces create recessed areas inside containers.

Brand & interaction

Derived from the brand drivers. --ring and hover states follow the brand.

Token	Variable	Value
Primary	--primary	—
Primary foreground	--primary-foreground	—
Ring	--ring	—

Status

Fixed, not brand-derived — error must read as error. Meaning is always paired with an icon + label so it survives a red brand (§11).

Token	Variable	Value
Destructive	--destructive	—
Destructive foreground	--destructive-foreground	—
Success	--success	—

12 overdueOn trackAlmost done

AI accent

Fixed violet — held off the brand hue so generative surfaces always read as “AI”. Used for assistant panels, draft borders, and proposal cards.

Token	Variable	Value
AI	--ai	—
AI foreground	--ai-foreground	—

AI draft — approve or discard in the outline

Dock door safety · 6 screens

Proposal card surface

Sidebar chrome

Dedicated tokens for the nav rail.

Token	Variable	Value
Sidebar	--sidebar	—
Sidebar foreground	--sidebar-foreground	—
Sidebar primary	--sidebar-primary	—
Sidebar primary fg	--sidebar-primary-foreground	—
Sidebar accent	--sidebar-accent	—
Sidebar accent fg	--sidebar-accent-foreground	—
Sidebar border	--sidebar-border	—
Sidebar ring	--sidebar-ring	—

Chart series

Intentionally independent hues so data stays distinguishable — these do not follow the brand hue.

Token	Variable	Value
Chart 1	--chart-1	—
Chart 2	--chart-2	—
Chart 3	--chart-3	—
Chart 4	--chart-4	—
Chart 5	--chart-5	—