# Color

The semantic color roles Propel ships, what each one means, and when to reach for it.

Propel's colors are named for the job they do, never for the color they happen to be. You write
`bg-danger-subtle`, not `bg-red-100`, so the same markup stays correct when the theme changes and a
reader can tell what a line of markup means without opening a palette.

Most names follow one pattern:

```
bg-danger-subtle-hover
│  │      │      └─ state      hover · active · selected
│  │      └──────── emphasis   primary · secondary · subtle · strong · transparent
│  └─────────────── intent     accent · success · warning · danger · info
└────────────────── property   bg · text · text-icon · border · ring · outline
```

A slot is dropped when it has nothing to say. The surface stack and the content ladders skip
intent and name a step in a scale instead — `bg-surface-1`, `text-tertiary` — and control states
like `disabled` and `placeholder` take the emphasis slot for themselves. A token is added when a
real component needs it, so not every combination exists.

The roles below are a reading order, not the whole namespace: the tokens you reach for by hand,
each with the job it does. Propel ships 286 semantic color tokens in total —
every one of them is listed under [Every token](#every-token) at the end of the page, with its
value in all four themes.

Each swatch strip carries the four themes in the order the theme switcher offers them — light,
dark, light contrast, dark contrast — and the values beneath it collapse to one entry when a token
resolves the same everywhere.

## Surfaces

The stack a page is built from. Canvas sits furthest back, surfaces lift above it, and layers are the interactive fills that sit on top and respond to hover, selection, and press.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `bg-canvas` | The page itself. Everything else sits on top of it. | `oklch(0.9614 0.0013 286.38)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.1689 0.0021 286.18)` |
| `bg-surface-1` | A raised surface — cards, panels, table headers. | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` |
| `bg-surface-2` | One step above surface-1, for a selected or nested surface. | `oklch(0.9911 0 0)` | `oklch(0.2158 0.0025 230.82)` | `oklch(0.9911 0 0)` | `oklch(0.1917 0.002 286.21)` |
| `bg-layer-1` | The default interactive fill, for rows and controls that react to the pointer. | `oklch(0.9821 0 0)` | `oklch(0.2158 0.0025 230.82)` | `oklch(0.9821 0 0)` | `oklch(0.2158 0.0025 230.82)` |
| `bg-layer-2` | A recessed fill — the inside of an input or a well. | `oklch(1 0 0)` | `oklch(0.2378 0.0029 230.83)` | `oklch(1 0 0)` | `oklch(0.2378 0.0029 230.83)` |
| `bg-layer-3` | The deepest fill, for a control nested inside a layer. | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2593 0.0033 230.84)` |
| `bg-layer-transparent` | A fill that tints whatever it sits on instead of painting over it. | `oklch(1 0 0 / 0%)` | `oklch(0.1482 0.0034 196.79 / 0%)` | `oklch(1 0 0 / 0%)` | `oklch(0.1482 0.0034 196.79 / 0%)` |
| `bg-backdrop` | The scrim behind a modal. | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(0.1482 0.0034 196.79 / 80%)` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(0.1482 0.0034 196.79 / 80%)` |
| `bg-inverse` | A surface that flips against the theme, for tooltips and toasts. | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |

## Text

An emphasis ladder from primary down to tertiary, plus the colors for text on a filled or inverse surface. Pick by emphasis rather than by how light the color looks. Placeholder and disabled sit below the ladder and are state colors, not content colors.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `text-primary` | Headings and the highest-emphasis text. | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `text-secondary` | Body copy and the default for most interface text. | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `text-tertiary` | Supporting text — captions, metadata, section labels. | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `text-placeholder` | Unfilled input text. Not a color for real content. | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `text-disabled` | Text in a disabled control. Exempt from contrast rules, so never use it for content. | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `text-on-color` | Text on a filled accent or status surface. | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `text-inverse` | Text on an inverse surface. | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` |

## Border

Neutral edges step from subtle up to strong. Subtle is the default divider and container edge; the darker steps are for an edge that has to hold over a fill or read as deliberate.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `border-subtle` | The default 1px divider and container edge. | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `border-subtle-1` | A half-step darker — the edge tooltips, active tabs, and hovered controls hold on a raised fill. | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `border-strong` | A deliberate edge — a control outline, or a divider over a fill. | `oklch(0.8782 0.0035 247.86)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `border-disabled` | The edge of a disabled control. | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` |
| `border-inverse` | An edge on an inverse surface. | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(0.1149 0 0)` | `oklch(0.9851 0 0)` |

## Accent

Plane blue, and the only color that means 'act here'. It marks the primary action, the current selection, links, and focus. Used on more than a small share of a screen it stops reading as a signal.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `bg-accent-primary` | The filled primary action. | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `bg-accent-subtle` | A tinted accent surface — a selected row, an active nav item. | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` |
| `text-accent-primary` | Accent text and links. | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `border-accent-strong` | A focused control's border. The same name, as ring-accent-strong, paints the focus ring. | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |

## Status

Four meanings — success, warning, danger, and info — each with a filled and a subtle surface, a text color, and a border. Reserve them for state. A danger color on something that isn't destructive spends the one signal the user reliably reads.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `bg-success-primary` | A filled confirmation surface. | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` |
| `bg-success-subtle` | A tinted success surface, for banners and badges. | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` |
| `bg-warning-primary` | A filled caution surface. | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` |
| `bg-warning-subtle` | A tinted caution surface. | `oklch(0.9617 0.0592 95.89)` | `oklch(0.3042 0.0853 45.16)` | `oklch(0.9617 0.0592 95.89)` | `oklch(0.3042 0.0853 45.16)` |
| `bg-danger-primary` | A filled destructive surface. | `oklch(0.5284 0.185 28.96)` | `oklch(0.5954 0.1956 28.51)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.5954 0.1956 28.51)` |
| `bg-danger-subtle` | A tinted danger surface, for error banners. | `oklch(0.9503 0.0186 21.57)` | `oklch(0.2437 0.0729 27.55)` | `oklch(0.9503 0.0186 21.57)` | `oklch(0.2437 0.0729 27.55)` |
| `bg-info-primary` | A filled informational surface. | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `bg-info-subtle` | A tinted informational surface. | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` |

## Icon

Icons take their color from text, not from a parallel palette — the icon tokens mirror the text ladder and the status meanings so a glyph and its label always agree. SVGs follow currentColor, so setting the text color is usually enough.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `text-icon-primary` | The default icon color, matching primary text. | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `text-icon-secondary` | An icon beside secondary text. | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `text-icon-tertiary` | A decorative or low-emphasis glyph. | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `text-icon-disabled` | An icon in a disabled control. | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `text-icon-on-color` | An icon on a filled surface. | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |

## Link

Inline navigation. Links are the one place accent color appears in running text.

| Utility | Purpose | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- | --- |
| `text-link-primary` | An inline link at rest. | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` |
| `text-link-primary-hover` | The same link on hover. | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `text-link-secondary` | A quieter link, for dense or secondary navigation. | `oklch(0.4928 0.0079 233.77)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.8455 0.0035 230.72)` |

## Labels

Labels are the one place Propel offers color without meaning attached: 8 hues
for user-chosen tags, where the color is a handle rather than a signal. Every hue carries the same
7 properties — fills, hover and focus states, text, border, and icon — and
yellow alone adds an extra `icon-strong` step.

Because labels live in the shared color namespace, the property appears twice in the utility — the
indigo fill is `bg-label-indigo-bg`. Each cell below pairs the light value with the dark.

| Color | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `label-crimson-bg` | `oklch(0.9503 0.0186 21.57)` | `oklch(0.3249 0.106 28.39)` | `oklch(0.9503 0.0186 21.57)` | `oklch(0.3249 0.106 28.39)` |
| `label-crimson-bg-strong` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.4754 0.1647 28.98)` |
| `label-crimson-hover` | `oklch(0.8847 0.0455 23.1)` | `oklch(0.4209 0.1438 29.01)` | `oklch(0.8847 0.0455 23.1)` | `oklch(0.4209 0.1438 29.01)` |
| `label-crimson-icon` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` |
| `label-crimson-text` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` |
| `label-crimson-border` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.72 0.124 24.83)` |
| `label-crimson-focus` | `oklch(0.5954 0.1956 28.51)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5954 0.1956 28.51)` | `oklch(0.72 0.124 24.83)` |
| `label-emerald-bg` | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` |
| `label-emerald-bg-strong` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.4965 0.1172 149.18)` |
| `label-emerald-hover` | `oklch(0.8679 0.0829 153.02)` | `oklch(0.4003 0.0918 149.37)` | `oklch(0.8679 0.0829 153.02)` | `oklch(0.4003 0.0918 149.37)` |
| `label-emerald-icon` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `label-emerald-text` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `label-emerald-border` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `label-emerald-focus` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.5883 0.1413 149.06)` |
| `label-grey-bg` | `oklch(0.9461 0 0)` | `oklch(0.3407 0 0)` | `oklch(0.9461 0 0)` | `oklch(0.3407 0 0)` |
| `label-grey-bg-strong` | `oklch(0.4386 0 0)` | `oklch(0.5208 0 0)` | `oklch(0.4386 0 0)` | `oklch(0.5208 0 0)` |
| `label-grey-hover` | `oklch(0.9067 0 0)` | `oklch(0.4386 0 0)` | `oklch(0.9067 0 0)` | `oklch(0.4386 0 0)` |
| `label-grey-icon` | `oklch(0.4386 0 0)` | `oklch(0.7668 0 0)` | `oklch(0.4386 0 0)` | `oklch(0.7668 0 0)` |
| `label-grey-text` | `oklch(0.4386 0 0)` | `oklch(0.7668 0 0)` | `oklch(0.4386 0 0)` | `oklch(0.7668 0 0)` |
| `label-grey-border` | `oklch(0.5208 0 0)` | `oklch(0.65 0 0)` | `oklch(0.5208 0 0)` | `oklch(0.65 0 0)` |
| `label-grey-focus` | `oklch(0.65 0 0)` | `oklch(0.6993 0 0)` | `oklch(0.65 0 0)` | `oklch(0.6993 0 0)` |
| `label-indigo-bg` | `oklch(0.9415 0.022 263.19)` | `oklch(0.3019 0.1051 262.16)` | `oklch(0.9415 0.022 263.19)` | `oklch(0.3019 0.1051 262.16)` |
| `label-indigo-bg-strong` | `oklch(0.458 0.1753 262.2)` | `oklch(0.5291 0.2045 262.05)` | `oklch(0.458 0.1753 262.2)` | `oklch(0.5291 0.2045 262.05)` |
| `label-indigo-hover` | `oklch(0.8828 0.045 263.07)` | `oklch(0.3862 0.1436 262.12)` | `oklch(0.8828 0.045 263.07)` | `oklch(0.3862 0.1436 262.12)` |
| `label-indigo-icon` | `oklch(0.458 0.1753 262.2)` | `oklch(0.7066 0.121 263.57)` | `oklch(0.458 0.1753 262.2)` | `oklch(0.7066 0.121 263.57)` |
| `label-indigo-text` | `oklch(0.458 0.1753 262.2)` | `oklch(0.7066 0.121 263.57)` | `oklch(0.458 0.1753 262.2)` | `oklch(0.7066 0.121 263.57)` |
| `label-indigo-border` | `oklch(0.458 0.1753 262.2)` | `oklch(0.6322 0.1556 262.59)` | `oklch(0.458 0.1753 262.2)` | `oklch(0.6322 0.1556 262.59)` |
| `label-indigo-focus` | `oklch(0.579 0.1807 262.31)` | `oklch(0.6322 0.1556 262.59)` | `oklch(0.579 0.1807 262.31)` | `oklch(0.6322 0.1556 262.59)` |
| `label-orange-bg` | `oklch(0.964 0.0219 58.79)` | `oklch(0.2896 0.0746 51.86)` | `oklch(0.964 0.0219 58.79)` | `oklch(0.2896 0.0746 51.86)` |
| `label-orange-bg-strong` | `oklch(0.5737 0.162 45.72)` | `oklch(0.5737 0.162 45.72)` | `oklch(0.5737 0.162 45.72)` | `oklch(0.5737 0.162 45.72)` |
| `label-orange-hover` | `oklch(0.9152 0.0522 56.77)` | `oklch(0.3897 0.105571 48.3415)` | `oklch(0.9152 0.0522 56.77)` | `oklch(0.3897 0.105571 48.3415)` |
| `label-orange-icon` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` |
| `label-orange-text` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` |
| `label-orange-border` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` | `oklch(0.5059 0.141467 46.3267)` | `oklch(0.801 0.1323 55.27)` |
| `label-orange-focus` | `oklch(0.801 0.1323 55.27)` | `oklch(0.801 0.1323 55.27)` | `oklch(0.801 0.1323 55.27)` | `oklch(0.801 0.1323 55.27)` |
| `label-pink-bg` | `oklch(0.9394 0.0201 340.71)` | `oklch(0.326 0.0807 344.57)` | `oklch(0.9394 0.0201 340.71)` | `oklch(0.326 0.0807 344.57)` |
| `label-pink-bg-strong` | `oklch(0.5704 0.1574 345.25)` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.5704 0.1574 345.25)` | `oklch(0.4947 0.1333 344.88)` |
| `label-pink-hover` | `oklch(0.8759 0.0418 339.71)` | `oklch(0.4162 0.1108 344.66)` | `oklch(0.8759 0.0418 339.71)` | `oklch(0.4162 0.1108 344.66)` |
| `label-pink-icon` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` |
| `label-pink-text` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` |
| `label-pink-border` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` | `oklch(0.4947 0.1333 344.88)` | `oklch(0.736 0.0938 342.16)` |
| `label-pink-focus` | `oklch(0.6673 0.1206 342.89)` | `oklch(0.6673 0.1206 342.89)` | `oklch(0.6673 0.1206 342.89)` | `oklch(0.6673 0.1206 342.89)` |
| `label-purple-bg` | `oklch(0.9421 0.0162 293.74)` | `oklch(0.2861 0.0795 287.41)` | `oklch(0.9421 0.0162 293.74)` | `oklch(0.2861 0.0795 287.41)` |
| `label-purple-bg-strong` | `oklch(0.4895 0.157 286.65)` | `oklch(0.4895 0.157 286.65)` | `oklch(0.4895 0.157 286.65)` | `oklch(0.4895 0.157 286.65)` |
| `label-purple-hover` | `oklch(0.8808 0.0343 293.03)` | `oklch(0.3617 0.1077 287.53)` | `oklch(0.8808 0.0343 293.03)` | `oklch(0.3617 0.1077 287.53)` |
| `label-purple-icon` | `oklch(0.5527 0.1361 288.8)` | `oklch(0.779 0.0639 293.01)` | `oklch(0.5527 0.1361 288.8)` | `oklch(0.779 0.0639 293.01)` |
| `label-purple-text` | `oklch(0.4895 0.157 286.65)` | `oklch(0.779 0.0639 293.01)` | `oklch(0.4895 0.157 286.65)` | `oklch(0.779 0.0639 293.01)` |
| `label-purple-border` | `oklch(0.4895 0.157 286.65)` | `oklch(0.6139 0.1164 290.19)` | `oklch(0.4895 0.157 286.65)` | `oklch(0.6139 0.1164 290.19)` |
| `label-purple-focus` | `oklch(0.6978 0.0888 291.44)` | `oklch(0.6978 0.0888 291.44)` | `oklch(0.6978 0.0888 291.44)` | `oklch(0.6978 0.0888 291.44)` |
| `label-yellow-bg` | `oklch(0.9297 0.0545 86.15)` | `oklch(0.3142 0.0586 82.21)` | `oklch(0.9297 0.0545 86.15)` | `oklch(0.3142 0.0586 82.21)` |
| `label-yellow-bg-strong` | `oklch(0.5522 0.1093 80.44)` | `oklch(0.425 0.0824 81.46)` | `oklch(0.5522 0.1093 80.44)` | `oklch(0.425 0.0824 81.46)` |
| `label-yellow-hover` | `oklch(0.9297 0.0545 86.15)` | `oklch(0.425 0.0824 81.46)` | `oklch(0.9297 0.0545 86.15)` | `oklch(0.425 0.0824 81.46)` |
| `label-yellow-icon` | `oklch(0.425 0.0824 81.46)` | `oklch(0.79 0.1466 82.04)` | `oklch(0.425 0.0824 81.46)` | `oklch(0.79 0.1466 82.04)` |
| `label-yellow-text` | `oklch(0.425 0.0824 81.46)` | `oklch(0.79 0.1466 82.04)` | `oklch(0.425 0.0824 81.46)` | `oklch(0.79 0.1466 82.04)` |
| `label-yellow-border` | `oklch(0.7399 0.1487 79.36)` | `oklch(0.79 0.1466 82.04)` | `oklch(0.7399 0.1487 79.36)` | `oklch(0.79 0.1466 82.04)` |
| `label-yellow-focus` | `oklch(0.8167 0.1342 83.9)` | `oklch(0.8167 0.1342 83.9)` | `oklch(0.8167 0.1342 83.9)` | `oklch(0.8167 0.1342 83.9)` |

Reach for a label hue only when the user picked it. Anything the system decides belongs to a status
or accent token, so a red the user chose can never be mistaken for an error the system raised.

Two hues do not currently clear WCAG AA for body text on their own tinted background in light mode
— orange at 3.00:1 and pink at 4.04:1. Both are legible at large-text sizes, and a label is a short
tag rather than running copy, but don't reach for those two pairs to carry text a reader has to
parse at small sizes.

## Beyond the roles

The border vocabulary is mirrored into `ring` and `outline`, so a focus indicator can carry the
same meaning as an edge. Focus lives here: controls pair `ring-2` with `ring-accent-strong`,
invalid fields swap it for `ring-danger-strong`, and toast and switch draw an offset
`outline-accent-strong` instead. The text ladder reappears as `stroke` and `fill` for SVG that
doesn't follow `currentColor`.

The remaining tokens are product vocabulary rather than roles: colors for work-item states and
priorities, plan tiers, and the scrollbar thumb, plus a raw `blue` set that `info` resolves
through. Of these only the scrollbar colors appear in the library's own source — the rest exist
for Plane's products, and none belong in new component work.

Two of those sets carry a ladder worth knowing about. Priority runs `urgent · high · medium · low ·
none · unlit` across both `text-` and `border-`, and resolves per theme, so a priority glyph reads
at the same weight in dark as in light; `unlit` is the dimmed segment of an indicator rather than a
sixth level of urgency. Work-item state colors are the exception to theming — one value each, held
across all four themes, because a state's color is an identity rather than a contrast decision.

## Every token

The complete namespace — 229 tokens across eight utility families, plus the
57 label tokens in the grid above. This list is generated from the token source
rather than written by hand, so a token cannot ship without appearing here.

Read it as a reference: the roles above tell you which token to pick, this tells you what exists.
`ring` and `outline` mirror `border` name for name and value for value, and `fill` and `stroke`
mirror the text ladder — they are listed in full rather than summarised, because a mirror that
quietly stopped mirroring is exactly the kind of drift a generated list is here to catch.

### Background (67 tokens)

Every fill: the surface stack, the interactive layers with their hover, active, and selected states, the status and accent fills, the plan tiers, and the scrollbar thumb.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `bg-scrollbar-thumb` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` |
| `bg-scrollbar-thumb-rest` | `transparent` | `transparent` | `transparent` | `transparent` |
| `bg-scrollbar-thumb-surface` | `transparent` | `transparent` | `transparent` | `transparent` |
| `bg-scrollbar-thumb-surface-hover` | `oklch(0.1482 0.0034 196.79 / 8%)` | `oklch(1 0 0 / 10%)` | `oklch(0.1482 0.0034 196.79 / 8%)` | `oklch(1 0 0 / 10%)` |
| `bg-scrollbar-thumb-hover` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(1 0 0 / 30%)` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(1 0 0 / 30%)` |
| `bg-scrollbar-thumb-active` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(1 0 0 / 30%)` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(1 0 0 / 30%)` |
| `bg-canvas` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.1689 0.0021 286.18)` |
| `bg-surface-1` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` |
| `bg-surface-2` | `oklch(0.9911 0 0)` | `oklch(0.2158 0.0025 230.82)` | `oklch(0.9911 0 0)` | `oklch(0.1917 0.002 286.21)` |
| `bg-layer-1` | `oklch(0.9821 0 0)` | `oklch(0.2158 0.0025 230.82)` | `oklch(0.9821 0 0)` | `oklch(0.2158 0.0025 230.82)` |
| `bg-layer-1-hover` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` |
| `bg-layer-1-active` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` |
| `bg-layer-1-selected` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` |
| `bg-layer-2` | `oklch(1 0 0)` | `oklch(0.2378 0.0029 230.83)` | `oklch(1 0 0)` | `oklch(0.2378 0.0029 230.83)` |
| `bg-layer-2-hover` | `oklch(0.9911 0 0)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.9911 0 0)` | `oklch(0.2593 0.0033 230.84)` |
| `bg-layer-2-active` | `oklch(0.9821 0 0)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.9821 0 0)` | `oklch(0.3011 0.0041 230.85)` |
| `bg-layer-2-selected` | `oklch(0.9821 0 0)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.9821 0 0)` | `oklch(0.3011 0.0041 230.85)` |
| `bg-layer-3` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2593 0.0033 230.84)` |
| `bg-layer-3-hover` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` |
| `bg-layer-3-active` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3415 0.0049 230.86)` |
| `bg-layer-3-selected` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3415 0.0049 230.86)` |
| `bg-layer-transparent` | `oklch(1 0 0 / 0%)` | `oklch(0.1482 0.0034 196.79 / 0%)` | `oklch(1 0 0 / 0%)` | `oklch(0.1482 0.0034 196.79 / 0%)` |
| `bg-layer-transparent-hover` | `oklch(0.1482 0.0034 196.79 / 4%)` | `oklch(1 0 0 / 5%)` | `oklch(0.1482 0.0034 196.79 / 4%)` | `oklch(1 0 0 / 5%)` |
| `bg-layer-transparent-active` | `oklch(0.1482 0.0034 196.79 / 6%)` | `oklch(1 0 0 / 7%)` | `oklch(0.1482 0.0034 196.79 / 6%)` | `oklch(1 0 0 / 7%)` |
| `bg-layer-transparent-selected` | `oklch(0.1482 0.0034 196.79 / 8%)` | `oklch(1 0 0 / 10%)` | `oklch(0.1482 0.0034 196.79 / 8%)` | `oklch(1 0 0 / 10%)` |
| `bg-layer-disabled` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3999 0.0059 230.87)` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3999 0.0059 230.87)` |
| `bg-accent-primary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `bg-accent-primary-hover` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.700818 0.114497 235.2901)` |
| `bg-accent-primary-active` | `oklch(0.3399 0.0783 240.32)` | `oklch(0.754482 0.09526 233.5243)` | `oklch(0.3399 0.0783 240.32)` | `oklch(0.754482 0.09526 233.5243)` |
| `bg-accent-subtle` | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` |
| `bg-accent-subtle-hover` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` |
| `bg-accent-subtle-active` | `oklch(0.9008 0.0587 232)` | `oklch(0.4088 0.077702 237.13)` | `oklch(0.9008 0.0587 232)` | `oklch(0.4088 0.077702 237.13)` |
| `bg-blue-primary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `bg-blue-subtle` | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` |
| `bg-blue-subtle-1` | `oklch(0.9319 0.0316 255.59)` | `oklch(0.3796 0.1453 265.47)` | `oklch(0.9319 0.0316 255.59)` | `oklch(0.3796 0.1453 265.47)` |
| `bg-info-primary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `bg-info-subtle` | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` | `oklch(0.9705 0.0142 254.6)` | `oklch(0.2383 0.0798 266.19)` |
| `bg-info-subtle-1` | `oklch(0.9319 0.0316 255.59)` | `oklch(0.3796 0.1453 265.47)` | `oklch(0.9319 0.0316 255.59)` | `oklch(0.3796 0.1453 265.47)` |
| `bg-success-primary` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` |
| `bg-success-subtle` | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` | `oklch(0.9563 0.0256 154.47)` | `oklch(0.2982 0.0631 150.55)` |
| `bg-success-subtle-1` | `oklch(0.9153 0.0531 153.59)` | `oklch(0.2982 0.0631 150.55)` | `oklch(0.9153 0.0531 153.59)` | `oklch(0.2982 0.0631 150.55)` |
| `bg-warning-primary` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` |
| `bg-warning-secondary` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` |
| `bg-warning-subtle` | `oklch(0.9617 0.0592 95.89)` | `oklch(0.3042 0.0853 45.16)` | `oklch(0.9617 0.0592 95.89)` | `oklch(0.3042 0.0853 45.16)` |
| `bg-danger-primary` | `oklch(0.5284 0.185 28.96)` | `oklch(0.5954 0.1956 28.51)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.5954 0.1956 28.51)` |
| `bg-danger-primary-hover` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.5284 0.185 28.96)` |
| `bg-danger-primary-active` | `oklch(0.4209 0.1438 29.01)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.4209 0.1438 29.01)` | `oklch(0.4754 0.1647 28.98)` |
| `bg-danger-primary-selected` | `oklch(0.4209 0.1438 29.01)` | `oklch(0.5954 0.1956 28.51)` | `oklch(0.4209 0.1438 29.01)` | `oklch(0.5954 0.1956 28.51)` |
| `bg-danger-subtle` | `oklch(0.9503 0.0186 21.57)` | `oklch(0.2437 0.0729 27.55)` | `oklch(0.9503 0.0186 21.57)` | `oklch(0.2437 0.0729 27.55)` |
| `bg-danger-subtle-hover` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` |
| `bg-danger-subtle-active` | `oklch(0.8851 0.042 23.45)` | `oklch(0.3449 0.1141 28.77)` | `oklch(0.8851 0.042 23.45)` | `oklch(0.3449 0.1141 28.77)` |
| `bg-danger-subtle-selected` | `oklch(0.8851 0.042 23.45)` | `oklch(0.3449 0.1141 28.77)` | `oklch(0.8851 0.042 23.45)` | `oklch(0.3449 0.1141 28.77)` |
| `bg-danger-transparent` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` |
| `bg-danger-transparent-hover` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` |
| `bg-danger-transparent-active` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` |
| `bg-danger-transparent-selected` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` | `oklch(0.9213 0.0289 22.96)` | `oklch(0.2859 0.0905 28.06)` |
| `bg-backdrop` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(0.1482 0.0034 196.79 / 80%)` | `oklch(0.1482 0.0034 196.79 / 30%)` | `oklch(0.1482 0.0034 196.79 / 80%)` |
| `bg-inverse` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `bg-inverse-hover` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `bg-inverse-active` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `bg-inverse-selected` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `bg-icon-placeholder` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `bg-on-color` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `bg-plans-neutral-subtle` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` |
| `bg-plans-neutral-solid` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.8455 0.0035 230.72)` |
| `bg-plans-brand-subtle` | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` | `oklch(0.9715 0.0167 230.9)` | `oklch(0.2513 0.0418 234.6)` |
| `bg-plans-brand-solid` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9704 0.011421 230.82)` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9704 0.011421 230.82)` |

### Icon (30 tokens)

The icon ladder in full, mirroring the text ladder rung for rung and adding the work-item state colors, which hold one value across all four themes.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `text-icon-primary` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `text-icon-secondary` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `text-icon-tertiary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `text-icon-placeholder` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `text-icon-disabled` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `text-icon-accent-subtle` | `oklch(0.8414 0.0947 233.08)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.8414 0.0947 233.08)` | `oklch(0.700818 0.114497 235.2901)` |
| `text-icon-accent-primary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `text-icon-accent-primary-inverse` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.8969 0.040089 231.35)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.8969 0.040089 231.35)` |
| `text-icon-accent-secondary` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9856 0.005 228.82)` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9856 0.005 228.82)` |
| `text-icon-blue-primary` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` |
| `text-icon-blue-secondary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `text-icon-info-primary` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` |
| `text-icon-info-secondary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `text-icon-danger` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `text-icon-danger-primary` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `text-icon-danger-secondary` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `text-icon-success-primary` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `text-icon-success-secondary` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` |
| `text-icon-warning-primary` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` |
| `text-icon-warning-secondary` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` |
| `text-icon-warning-subtle` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.557 0.158291 45.3594)` |
| `text-icon-on-color` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `text-icon-on-color-disabled` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` |
| `text-icon-inverse` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` |
| `text-icon-states-completed` | `oklch(0.6166 0.1469 147.06)` | `oklch(0.6166 0.1469 147.06)` | `oklch(0.6166 0.1469 147.06)` | `oklch(0.6166 0.1469 147.06)` |
| `text-icon-states-unstarted` | `oklch(0.5375 0.0134 264.46)` | `oklch(0.5375 0.0134 264.46)` | `oklch(0.5375 0.0134 264.46)` | `oklch(0.5375 0.0134 264.46)` |
| `text-icon-states-backlog` | `oklch(0.626 0.0129 264.48)` | `oklch(0.626 0.0129 264.48)` | `oklch(0.626 0.0129 264.48)` | `oklch(0.626 0.0129 264.48)` |
| `text-icon-states-cancelled` | `oklch(0.606746 0.044136 266.4101)` | `oklch(0.606746 0.044136 266.4101)` | `oklch(0.606746 0.044136 266.4101)` | `oklch(0.606746 0.044136 266.4101)` |
| `text-icon-states-started` | `oklch(0.675392 0.143996 70.6276)` | `oklch(0.675392 0.143996 70.6276)` | `oklch(0.675392 0.143996 70.6276)` | `oklch(0.675392 0.143996 70.6276)` |
| `text-icon-states-monitoring` | `oklch(0.6068 0.2124 264.39)` | `oklch(0.6068 0.2124 264.39)` | `oklch(0.6068 0.2124 264.39)` | `oklch(0.6068 0.2124 264.39)` |

### Text (33 tokens)

The emphasis ladder, the status and accent text colors, links, plan tiers, and the priority ramp.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `text-primary` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `text-secondary` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `text-tertiary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `text-placeholder` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `text-disabled` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `text-accent-primary` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `text-accent-secondary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` |
| `text-blue-primary` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` |
| `text-blue-secondary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `text-info-primary` | `oklch(0.4878 0.2432 264.4)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.4878 0.2432 264.4)` | `oklch(0.8071 0.1007 250.45)` |
| `text-info-secondary` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.704 0.1583 253.63)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.704 0.1583 253.63)` |
| `text-on-color` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `text-on-color-disabled` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` |
| `text-inverse` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` |
| `text-success-primary` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `text-success-secondary` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` |
| `text-warning-primary` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` |
| `text-warning-secondary` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` |
| `text-danger-primary` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `text-danger-secondary` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `text-link-primary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` |
| `text-link-primary-hover` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `text-link-secondary` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.8455 0.0035 230.72)` |
| `text-plans-neutral-primary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `text-plans-neutral-color` | `oklch(0.9911 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(0.9911 0 0)` | `oklch(0.1917 0.002 286.21)` |
| `text-plans-brand-primary` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9409 0.022883 231.01)` | `oklch(0.2093 0.0438 234.02)` | `oklch(0.9409 0.022883 231.01)` |
| `text-plans-brand-color` | `oklch(0.9911 0 0)` | `oklch(0.2029 0.03 232.24)` | `oklch(0.9847 0.0083 236.56)` | `oklch(0.2029 0.03 232.24)` |
| `text-priority-urgent` | `oklch(0.5225 0.1931 27.84)` | `oklch(0.619596 0.2036 26.8022)` | `oklch(0.5225 0.1931 27.84)` | `oklch(0.619596 0.2036 26.8022)` |
| `text-priority-high` | `oklch(0.5534 0.1739 38.4)` | `oklch(0.7207 0.1745 48.61)` | `oklch(0.5534 0.1739 38.4)` | `oklch(0.7207 0.1745 48.61)` |
| `text-priority-medium` | `oklch(0.6339 0.1386 65.59)` | `oklch(0.7163 0.1165 80.56)` | `oklch(0.6339 0.1386 65.59)` | `oklch(0.7163 0.1165 80.56)` |
| `text-priority-low` | `oklch(0.5461 0.2152 262.88)` | `oklch(0.7532 0.1273 258.52)` | `oklch(0.5461 0.2152 262.88)` | `oklch(0.7532 0.1273 258.52)` |
| `text-priority-none` | `oklch(0.6138 0.0159 254.66)` | `oklch(0.6372 0.0158 254.65)` | `oklch(0.6138 0.0159 254.66)` | `oklch(0.6372 0.0158 254.65)` |
| `text-priority-unlit` | `oklch(0.7679 0.0145 258.35)` | `oklch(0.4607 0.0157 251.71)` | `oklch(0.7679 0.0145 258.35)` | `oklch(0.4607 0.0157 251.71)` |

### Border (25 tokens)

Neutral edges, the status and accent edges, and the priority ramp again — a border and its text share one value so a chip's edge and label always agree.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `border-subtle` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `border-subtle-1` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `border-strong` | `oklch(0.8782 0.0035 247.86)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `border-strong-1` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `border-inverse` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(0.1149 0 0)` | `oklch(0.9851 0 0)` |
| `border-disabled` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` |
| `border-accent-strong` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `border-accent-subtle` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` |
| `border-blue-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `border-blue-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `border-info-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `border-info-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `border-success-strong` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` |
| `border-success-subtle` | `oklch(0.8679 0.0829 153.02)` | `oklch(0.4003 0.0918 149.37)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.4003 0.0918 149.37)` |
| `border-warning-strong` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` |
| `border-warning-subtle` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` |
| `border-danger-strong` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `border-danger-subtle` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` |
| `border-icon-tertiary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `border-priority-urgent` | `oklch(0.5225 0.1931 27.84)` | `oklch(0.619596 0.2036 26.8022)` | `oklch(0.5225 0.1931 27.84)` | `oklch(0.619596 0.2036 26.8022)` |
| `border-priority-high` | `oklch(0.5534 0.1739 38.4)` | `oklch(0.7207 0.1745 48.61)` | `oklch(0.5534 0.1739 38.4)` | `oklch(0.7207 0.1745 48.61)` |
| `border-priority-medium` | `oklch(0.6339 0.1386 65.59)` | `oklch(0.7163 0.1165 80.56)` | `oklch(0.6339 0.1386 65.59)` | `oklch(0.7163 0.1165 80.56)` |
| `border-priority-low` | `oklch(0.5461 0.2152 262.88)` | `oklch(0.7532 0.1273 258.52)` | `oklch(0.5461 0.2152 262.88)` | `oklch(0.7532 0.1273 258.52)` |
| `border-priority-none` | `oklch(0.6138 0.0159 254.66)` | `oklch(0.6372 0.0158 254.65)` | `oklch(0.6138 0.0159 254.66)` | `oklch(0.6372 0.0158 254.65)` |
| `border-priority-unlit` | `oklch(0.7679 0.0145 258.35)` | `oklch(0.4607 0.0157 251.71)` | `oklch(0.7679 0.0145 258.35)` | `oklch(0.4607 0.0157 251.71)` |

### Ring (18 tokens)

Focus indicators. These mirror the border vocabulary exactly — same names, same resolved values — so a ring can carry the same meaning as an edge.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `ring-color-subtle` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `ring-color-subtle-1` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `ring-color-strong` | `oklch(0.8782 0.0035 247.86)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `ring-color-strong-1` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `ring-color-inverse` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(0.1149 0 0)` | `oklch(0.9851 0 0)` |
| `ring-color-disabled` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` |
| `ring-color-accent-strong` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `ring-color-accent-subtle` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` |
| `ring-color-blue-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `ring-color-blue-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `ring-color-info-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `ring-color-info-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `ring-color-success-strong` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` |
| `ring-color-success-subtle` | `oklch(0.8679 0.0829 153.02)` | `oklch(0.4003 0.0918 149.37)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.4003 0.0918 149.37)` |
| `ring-color-warning-strong` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` |
| `ring-color-warning-subtle` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` |
| `ring-color-danger-strong` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `ring-color-danger-subtle` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` |

### Outline (18 tokens)

The offset focus indicator, mirroring the border vocabulary on the same terms as ring.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `outline-color-subtle` | `oklch(0.9396 0.0017 247.84)` | `oklch(0.2593 0.0033 230.84)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `outline-color-subtle-1` | `oklch(0.9123 0.0017 247.84)` | `oklch(0.3011 0.0041 230.85)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `outline-color-strong` | `oklch(0.8782 0.0035 247.86)` | `oklch(0.3415 0.0049 230.86)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `outline-color-strong-1` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `outline-color-inverse` | `oklch(1 0 0)` | `oklch(0.1917 0.002 286.21)` | `oklch(0.1149 0 0)` | `oklch(0.9851 0 0)` |
| `outline-color-disabled` | `oklch(0.9614 0.0013 286.38)` | `oklch(0.2378 0.0029 230.83)` | `oklch(0.8466 0.0043 236.51)` | `oklch(0.3999 0.0059 230.87)` |
| `outline-color-accent-strong` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.6311 0.126281 238.01)` |
| `outline-color-accent-subtle` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` | `oklch(0.9428 0.0341 230.22)` | `oklch(0.3208 0.05806 236.44)` |
| `outline-color-blue-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `outline-color-blue-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `outline-color-info-strong` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` | `oklch(0.5465 0.2455 262.87)` | `oklch(0.8071 0.1007 250.45)` |
| `outline-color-info-subtle` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` | `oklch(0.882 0.0588 253.97)` | `oklch(0.4242 0.1982 265.5)` |
| `outline-color-success-strong` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.5883 0.1413 149.06)` |
| `outline-color-success-subtle` | `oklch(0.8679 0.0829 153.02)` | `oklch(0.4003 0.0918 149.37)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.4003 0.0918 149.37)` |
| `outline-color-warning-strong` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.557 0.158291 45.3594)` |
| `outline-color-warning-subtle` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` | `oklch(0.9244 0.1203 95.85)` | `oklch(0.4149 0.1126 45.88)` |
| `outline-color-danger-strong` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |
| `outline-color-danger-subtle` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` | `oklch(0.72 0.124 24.83)` | `oklch(0.3449 0.1141 28.77)` |

### SVG fill (19 tokens)

The text ladder reprojected onto SVG `fill`, for artwork that does not follow `currentColor`.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `fill-primary` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `fill-secondary` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `fill-tertiary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `fill-placeholder` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `fill-disabled` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `fill-accent-primary` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `fill-accent-secondary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` |
| `fill-on-color` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `fill-on-color-disabled` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` |
| `fill-inverse` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` |
| `fill-success` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `fill-success-primary` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `fill-success-secondary` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` |
| `fill-warning` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` |
| `fill-warning-primary` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` |
| `fill-warning-secondary` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` |
| `fill-danger` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `fill-danger-primary` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `fill-danger-secondary` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |

### SVG stroke (19 tokens)

The same ladder on SVG `stroke`.

| Utility | Light | Dark | Light contrast | Dark contrast |
| --- | --- | --- | --- | --- |
| `stroke-primary` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` | `oklch(0.1689 0.0021 286.18)` | `oklch(0.9235 0.001733 230.6853)` |
| `stroke-secondary` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` | `oklch(0.3225 0.0045 219.62)` | `oklch(0.8455 0.0035 230.72)` |
| `stroke-tertiary` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` | `oklch(0.4176 0.0072 239.98)` | `oklch(0.7655 0.0054 230.76)` |
| `stroke-placeholder` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` | `oklch(0.4928 0.0079 233.77)` | `oklch(0.6835 0.0074 230.81)` |
| `stroke-disabled` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` | `oklch(0.5819 0.0089 228.96)` | `oklch(0.5989 0.0096 230.88)` |
| `stroke-accent-primary` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` | `oklch(0.4347 0.104093 242.4823)` | `oklch(0.6311 0.126281 238.01)` |
| `stroke-accent-secondary` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` | `oklch(0.4799 0.1158 242.91)` | `oklch(0.700818 0.114497 235.2901)` |
| `stroke-on-color` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` | `oklch(1 0 0)` | `oklch(0.9851 0 0)` |
| `stroke-on-color-disabled` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` | `oklch(0.1482 0.0034 196.79 / 20%)` | `oklch(1 0 0 / 20%)` |
| `stroke-inverse` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` | `oklch(1 0 0)` | `oklch(0.1689 0.0021 286.18)` |
| `stroke-success` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `stroke-success-primary` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` | `oklch(0.4965 0.1172 149.18)` | `oklch(0.7785 0.1398 151.07)` |
| `stroke-success-secondary` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` | `oklch(0.6567 0.1599 148.98)` | `oklch(0.7401 0.166 149.61)` |
| `stroke-warning` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` |
| `stroke-warning-primary` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` | `oklch(0.4747 0.135757 44.9806)` | `oklch(0.7724 0.172798 65.367)` |
| `stroke-warning-secondary` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` | `oklch(0.6671 0.1685 53.38)` |
| `stroke-danger` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `stroke-danger-primary` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` | `oklch(0.4754 0.1647 28.98)` | `oklch(0.791 0.0874 23.59)` |
| `stroke-danger-secondary` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` | `oklch(0.5284 0.185 28.96)` | `oklch(0.72 0.124 24.83)` |

## Guidelines

Author every color as a semantic utility. Reaching past it to a palette step is what breaks
theming: the semantic layer is the only thing that re-resolves across light, dark, and the two
contrast themes, so an element painted with a raw step keeps its color when everything around it
changes.

Color is never the only carrier of meaning. A status that reads only as red fails for anyone who
can't separate it from green, so pair it with an icon, a label, or position. The same applies to
required fields, chart series, and diff highlighting.

Keep the accent rare. It marks the primary action, the current selection, and links, and its
scarcity is what makes it read as "act here" — a second filled accent button on the same view is
one too many.

Don't use `text-disabled` for content. It is exempt from contrast requirements because WCAG excuses
inactive controls, so it is the one text token that can legitimately fail a contrast check. Text a
reader has to parse belongs on the `primary` through `tertiary` ladder.