Colors

A semantic palette in three tiers. Components consume tier-2 roles; those resolve to tier-1 primitives. Light and dark are variants of every role.

How it works

Pick a role, never a raw value — color-ink-strong, not palette.neutral-950. Each role references one palette primitive (shown as → palette.*) and may shift between schemes. Surface fills live on the Backgrounds & Surfaces page.

Ink

Text and foreground.

Active themeToken · palette refComponentsUsage for

active

--color-ink-strongL oklch(0.145 0 0)D oklch(0.985 0 0)→ palette.ink

Button Accordion Hero

Primary text on canvas.

active

--color-ink-regularL oklch(0.340 0 0)D oklch(0.840 0 0)→ palette.neutral-700

Breadcrumb Badge Sheet

Secondary text.

active

--color-ink-subtleL oklch(0.580 0 0)D oklch(0.580 0 0)→ palette.neutral-500

Code-block Spinner Tag

Tertiary text, captions, placeholders.

active

--color-ink-inverseL oklch(0.985 0 0)D oklch(0.145 0 0)→ palette.canvas

Button Badge Toggle

Text on accent or dark surfaces.

Accent

One red — emphatic. In the suprematist canvas, red is a single role. Each tier-2 accent role anchors to a step on the tier-1 accent ramp.

Active themeToken · palette refComponentsUsage for

active

--color-accentL oklch(0.585 0.210 28)D oklch(0.585 0.210 28)→ palette.accent-500

Button Tag Switch

Primary actions, focus, emphasis.

active

--color-accent-strongL oklch(0.420 0.170 28)D oklch(0.420 0.170 28)→ palette.accent-700

Button Form-button

Active / pressed accent state.

active

--color-accent-mutedL oklch(0.920 0.050 28)D oklch(0.240 0.100 28)→ palette.accent-100

Tag Code

Subtle accent backgrounds.

Status

Feedback hues. Danger intentionally aliases accent.

Active themeToken · palette refComponentsUsage for

active

--color-dangerL oklch(0.566 0.202 30.2)D oklch(0.720 0.180 28)→ palette.danger

Button Badge Toast

Errors, destructive actions.

active

--color-warningL oklch(0.800 0.137 83.3)D oklch(0.800 0.137 83.3)→ palette.warning

Badge Icon Toast

Caution, pending states.

active

--color-successL oklch(0.475 0.125 146.2)D oklch(0.750 0.150 145)→ palette.success

Badge State Toast

Confirmation, success.

active

--color-infoL oklch(0.458 0.171 261.8)D oklch(0.680 0.170 260)→ palette.info

Badge Icon Toast

Neutral information.

Border

Three thicknesses of edge.

Active themeToken · palette refComponentsUsage for

active

--color-border-defaultL oklch(0.218 0 0)D oklch(0.985 0 0)→ palette.border-default

Divider Kbd Popover

Default 1px edges.

active

--color-border-strongL oklch(0.145 0 0)D oklch(0.995 0 0)→ palette.border-strong

Button Select Switch

Emphasised edges, active rails.

active

--color-border-mutedL oklch(0.808 0.016 90.3)D oklch(0.340 0 0)→ palette.border-muted

Accordion Sheet Divider

Hairline, low-contrast edges.

Palette — neutral

Thirteen perceptually-uniform achromatic stops (tier 1). Brand seeds anchor at neutral-50 (canvas) and neutral-950 (ink); intermediate stops feed ink & border roles.

canvas50

100

200

300

400

500

600

700

800

900

ink950

1000

neutral-500 → ink-subtle · neutral-700 → ink-regular · neutral-950 → ink-strong

Palette — accent

OKLCH-interpolated red, hue locked at 28°. Seed accent (#D32F1E) anchors near 500.

100

200

300

400

accent500

600

700

800

900

950

accent-500 → accent · accent-700 → accent-strong · accent-200 → accent-muted

Palette — seeds & status

Named brand seeds and status hues, taken verbatim from canvas.md.

ink

oklch(0.145 0 0) · brand near-black

canvas

oklch(0.985 0 0) · brand near-white

bone

oklch(0.914 0.019 86.1) · warm editorial

surface-raised

oklch(1 0 0) · cards (light)

surface-overlay

oklch(0.145 0 0 / 0.65) · scrim

danger

oklch(0.566 0.202 30.2) · = accent

warning

oklch(0.800 0.137 83.3)

success

oklch(0.475 0.125 146.2)

info

oklch(0.458 0.171 261.8)