Colours

Palette

Interactive

--color-interactive

Buttons, links, focus rings

Interactive hover

--color-interactive-hover

Hover and pressed states

Text

--color-text

Body copy, headings

Text subtle

--color-text-subtle

Captions, secondary labels

Surface

--color-surface

Cards, form inputs

Surface raised

--color-surface-raised

Code blocks, inline code

Border

--color-border

Dividers, card borders

Success

--color-success

Positive outcomes, confirmations, pass states

Danger

--color-danger

Errors, destructive actions, failures

Inactive

--color-inactive

Disabled, skipped, or not-applicable states

Warning

--color-warning

Pending actions, to-do items, caution states

Status variants

Each status colour comes with a base, background, and border variant for use in badges, banners, and notification states.

Success

--color-success
--color-success-bg
--color-success-border

Danger

--color-danger
--color-danger-bg
--color-danger-border

Inactive

--color-inactive
--color-inactive-bg
--color-inactive-border

Warning

--color-warning
--color-warning-bg
--color-warning-border

Primitive scales

Primitives are the raw palette — OKLCH-defined, perceptually uniform values that don’t change between themes. Components should never reference primitives directly; use semantic tokens instead. These are shown here for reference when creating new semantic mappings.

Scale structure (12 steps)

Steps	Role	Example usage
1-2	App & subtle backgrounds	Page background, hover tint
3-5	Component backgrounds	Card, input, button states
6-8	Borders	Subtle, normal, strong borders
9-10	Solid backgrounds	Primary button fill, badge
11-12	Text	Low-contrast, high-contrast text

Steps 11-12 meet WCAG AA contrast (4.5:1) against steps 1-2.

Sand (warm)

123456789101112

Gray (neutral)

123456789101112

Slate (cool)

123456789101112

Red

123456789101112

Orange

123456789101112

Amber

123456789101112

Yellow

123456789101112

Green

123456789101112

Teal

123456789101112

Cyan

123456789101112

Blue

123456789101112

Indigo

123456789101112

Purple

123456789101112

Pink

123456789101112

Rose

123456789101112

Semantic colour rules

• Never use raw hex values in component or app CSS — always reference a semantic token.
• Use --color-interactive for interactive elements (buttons, links, focus rings). Use --color-interactive-hover for hover and pressed states.
• Status colours (success, danger, inactive, warning) each come with a -bg and -border variant.
• Primitives (--color-primitive-*) are only for defining new semantic tokens in theme files — never use them in components.