Foundations

Colors

Pure monochrome, dark-first. Emphasis is carried by contrast and weight — there is no accent hue in the primary palette. The brand violet (`accent-brand`) is intentionally siloed and used only for active tab labels and the AI escape hatch.

Semantic surfaces

--color-background
Page canvas.
--color-foreground
Default text on background.
--color-card
Elevated surface — panels, modals, popovers.
--color-card-foreground
Text on card.
--color-popover
Floating menus and tooltips.
--color-popover-foreground
Text on popover.
--color-primary
Solid action surface (default Button).
--color-primary-foreground
Text on primary.
--color-secondary
Equal-weight alternative to primary.
--color-secondary-foreground
Text on secondary.
--color-muted
Subtle backgrounds — empty states, hovers.
--color-muted-foreground
De-emphasised text, captions.
--color-accent
Hover surface for menus, breadcrumbs, items.
--color-accent-foreground
Text on accent.
--color-border
All chrome borders, dividers.
--color-input
Form field borders.
--color-ring
Focus ring.

Status

--color-destructive
Errors, irreversible actions.
--color-destructive-foreground
Text on destructive.
--color-warning
Cautionary states — soft yellow.
--color-warning-foreground
Text on warning.
--color-success
Confirmation, completed states.
--color-success-foreground
Text on success.
--color-info
Informational banners, hints.
--color-info-foreground
Text on info.

Brand

--color-accent-brand
Iris violet. Applied point-wise (active tab + AI affordance only).

Neutral ramp

14-stop grayscale. Use these directly only when no semantic token fits — most of the system reads from the semantic ones above.

n-50

n-100

n-150

n-200

n-300

n-400

n-500

n-600

n-700

n-800

n-850

n-900

n-950