Colors

Drivers

The only values a tenant changes. Everything else is derived.

brand

#1d82ff

primary, ring & sidebar accents

canvas

#f9f8f6

surface ladder, tint & text hue

--hue

--c-bg

0.0029

--bg-l

0.9793

--contrast

0.83

--brand-h

257

--brand-c

0.195

--brand-l

0.62

Active tenant Opus — two input colors derive the seven OKLCH drivers, which derive every token below. Switch tenants in the panel above and watch everything recolor.

Raw palette

The primitive ramps every semantic token is sampled from — generated from the drivers, so they recolor with the tenant.

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

Neutral alpha rampoklch(0.2 · 0.0029 · 85 / A)

0.020.050.10.150.20.30.40.550.70.85

Live 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

Page background, sidebar background

--color-gray-50

--color-gray-100

Secondary surface

Inset cards, muted panels

--color-gray-100

--color-gray-200

Tertiary surface

Secondary controls, deeper wells

--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

bg-canvas

bg-primary

bg-subtle

bg-secondary

bg-tertiary

bg-elevated

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-accent-primary	—
Primary hover	--color-accent-primary-hover	—
Primary active	--color-accent-primary-active	—
Primary foreground	--color-accent-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, while inset 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 tenant brand hue so generative surfaces read as “AI” regardless of tenant. 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 fixed across tenants 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	—