Color

Light gray-50 · Dark gray-950

Light white · Dark gray-900

Light gray-100 · Dark gray-800

Light gray-200 · Dark gray-950

The groove behind segmented controls (Tabs solid, Segmented). It is defined by a relationship rather than a fixed grey: always one step deeper than the card surface, and in both themes the raised pill must read as closer to the viewer. Do not substitute the hovered surface — in light mode it is only 3.3% lighter than white, and in dark mode it is lighter than the pill, which inverts the elevation.

Light gray-100 · Dark gray-800

Static area backgrounds: grouping containers, board columns, swim lanes, note strips. It currently resolves to the same value as the hovered surface but means something different — writing hover: for a permanent background is a semantic mismatch.

Light gray-100 · Dark gray-800

Same value and meaning as the subtle background; the name exists to match the shadcn/ui vocabulary, where --muted is a weak background. Before 0.28.0 this name held the secondary text colour — the exact opposite of the ecosystem — and it has since been renamed to the secondary text token below.

Light gray-200 · Dark gray-800

Light transparent · Dark gray-800 (same as border)

Use only with border-* on elevated surfaces. It is transparent in light mode; text-, bg-, or fill- would become invisible, so use border or muted-foreground for fill and text.

Light gray-900 · Dark gray-50

Light gray-600 · Dark gray-400

Descriptive copy, timestamps, placeholders, disabled labels. Named --color-muted before 0.28.0.

Light brand-700 · Dark brand-400

The matching text colour is -foreground, but it only matches this solid fill: in light mode it is plain white. Painting a tint of your own (-subtle, or /12) and reaching for text-x-foreground by naming intuition gives you white on white and the text disappears — while dark mode looks right, so whoever develops in dark mode never sees it. On a tint the text colour is the semantic colour itself: solid = bg-x + text-x-foreground, soft = bg-x-subtle + text-x, outline = border-x + text-x.

Light brand-500 · Dark brand-500

Every semantic hover token picks the step between the light and dark values, so it moves one step towards lower contrast in both themes.

Light brand-50 · Dark surface + 16% brand-400

Tinted backgrounds: notice bars, selected rows, Tag and Badge fills, the active sidebar item. The direction flips in dark mode — instead of getting lighter, the semantic colour is mixed into the surface, so the fill stays deeper than the surface and only picks up the hue. Do not derive these by mixing the accent towards white; that is wrong in dark mode.

Light brand-200 · Dark surface + 34% brand-400

Light brand-500 · Dark brand-400

Light danger-700 · Dark danger-400

The matching text colour is -foreground, but it only matches this solid fill: in light mode it is plain white. Painting a tint of your own (-subtle, or /12) and reaching for text-x-foreground by naming intuition gives you white on white and the text disappears — while dark mode looks right, so whoever develops in dark mode never sees it. On a tint the text colour is the semantic colour itself: solid = bg-x + text-x-foreground, soft = bg-x-subtle + text-x, outline = border-x + text-x.

Light danger-500 · Dark danger-500

Light danger-50 · Dark surface + 16% danger-400

Tinted backgrounds: notice bars, selected rows, Tag and Badge fills, the active sidebar item. The direction flips in dark mode — instead of getting lighter, the semantic colour is mixed into the surface, so the fill stays deeper than the surface and only picks up the hue. Do not derive these by mixing the accent towards white; that is wrong in dark mode.

Light danger-200 · Dark surface + 34% danger-400

Light success-700 · Dark success-500

The matching text colour is -foreground, but it only matches this solid fill: in light mode it is plain white. Painting a tint of your own (-subtle, or /12) and reaching for text-x-foreground by naming intuition gives you white on white and the text disappears — while dark mode looks right, so whoever develops in dark mode never sees it. On a tint the text colour is the semantic colour itself: solid = bg-x + text-x-foreground, soft = bg-x-subtle + text-x, outline = border-x + text-x.

Light success-600 · Dark success-600

Light success-50 · Dark surface + 16% success-500

Tinted backgrounds: notice bars, selected rows, Tag and Badge fills, the active sidebar item. The direction flips in dark mode — instead of getting lighter, the semantic colour is mixed into the surface, so the fill stays deeper than the surface and only picks up the hue. Do not derive these by mixing the accent towards white; that is wrong in dark mode.

Light success-200 · Dark surface + 34% success-500

Light warning-700 · Dark warning-500

The matching text colour is -foreground, but it only matches this solid fill: in light mode it is plain white. Painting a tint of your own (-subtle, or /12) and reaching for text-x-foreground by naming intuition gives you white on white and the text disappears — while dark mode looks right, so whoever develops in dark mode never sees it. On a tint the text colour is the semantic colour itself: solid = bg-x + text-x-foreground, soft = bg-x-subtle + text-x, outline = border-x + text-x.

Light warning-600 · Dark warning-600

Light warning-50 · Dark surface + 16% warning-500

Tinted backgrounds: notice bars, selected rows, Tag and Badge fills, the active sidebar item. The direction flips in dark mode — instead of getting lighter, the semantic colour is mixed into the surface, so the fill stays deeper than the surface and only picks up the hue. Do not derive these by mixing the accent towards white; that is wrong in dark mode.

Light warning-200 · Dark surface + 34% warning-500

Light info-700 · Dark info-400

Hints, explanations and neutral notices, deliberately separate from the primary colour: primary means “this is actionable”, info means “this is an explanation”. Both are blues but 30° apart in hue — borrowing the primary colour for notices spends the scarcest attention budget on the page on descriptive copy. The matching text colour is -foreground, but it only matches this solid fill: in light mode it is plain white. Painting a tint of your own (-subtle, or /12) and reaching for text-x-foreground by naming intuition gives you white on white and the text disappears — while dark mode looks right, so whoever develops in dark mode never sees it. On a tint the text colour is the semantic colour itself: solid = bg-x + text-x-foreground, soft = bg-x-subtle + text-x, outline = border-x + text-x.

Light info-500 · Dark info-500

Light info-50 · Dark surface + 16% info-400

Tinted backgrounds: notice bars, selected rows, Tag and Badge fills, the active sidebar item. The direction flips in dark mode — instead of getting lighter, the semantic colour is mixed into the surface, so the fill stays deeper than the surface and only picks up the hue. Do not derive these by mixing the accent towards white; that is wrong in dark mode.

Light info-200 · Dark surface + 34% info-400