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 · outlineA 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 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.
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)
bg-surface-1
A raised surface — cards, panels, table headers.
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.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)
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)
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)
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%)
bg-backdrop
The scrim behind a modal.
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)
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.
text-primary
Headings and the highest-emphasis text.
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)
text-tertiary
Supporting text — captions, metadata, section labels.
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)
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)
text-on-color
Text on a filled accent or status surface.
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)
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.
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.
bg-accent-primary
The filled primary action.
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)
text-accent-primary
Accent text and links.
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)
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.
bg-success-primary
A filled confirmation surface.
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)
bg-warning-primary
A filled caution surface.
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)
bg-danger-primary
A filled destructive surface.
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)
bg-info-primary
A filled informational surface.
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)
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.
text-icon-primary
The default icon color, matching primary text.
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)
text-icon-tertiary
A decorative or low-emphasis glyph.
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)
text-icon-on-color
An icon on a filled surface.
oklch(1 0 0) · oklch(0.9851 0 0)
Link
Inline navigation. Links are the one place accent color appears in running text.
text-link-primary
An inline link at rest.
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)
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)
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.
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.
bg-scrollbar-thumb
oklch(0.1482 0.0034 196.79 / 20%) · oklch(1 0 0 / 20%)
bg-scrollbar-thumb-rest
transparent
bg-scrollbar-thumb-surface
transparent
bg-scrollbar-thumb-surface-hover
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%)
bg-scrollbar-thumb-active
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)
bg-surface-1
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.1917 0.002 286.21)
bg-layer-1
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)
bg-layer-1-active
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)
bg-layer-2
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)
bg-layer-2-active
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)
bg-layer-3
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)
bg-layer-3-active
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)
bg-layer-transparent
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%)
bg-layer-transparent-active
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%)
bg-layer-disabled
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)
bg-accent-primary-hover
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)
bg-accent-subtle
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)
bg-accent-subtle-active
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)
bg-blue-subtle
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)
bg-info-primary
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)
bg-info-subtle-1
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)
bg-success-subtle
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)
bg-warning-primary
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)
bg-warning-subtle
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)
bg-danger-primary-hover
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)
bg-danger-primary-selected
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)
bg-danger-subtle-hover
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)
bg-danger-subtle-selected
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)
bg-danger-transparent-hover
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)
bg-danger-transparent-selected
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%)
bg-inverse
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)
bg-inverse-active
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)
bg-icon-placeholder
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)
bg-plans-neutral-subtle
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)
bg-plans-brand-subtle
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)
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.
text-icon-primary
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)
text-icon-tertiary
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)
text-icon-disabled
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)
text-icon-accent-primary
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)
text-icon-accent-secondary
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)
text-icon-blue-secondary
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)
text-icon-info-secondary
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)
text-icon-danger-primary
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)
text-icon-success-primary
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)
text-icon-warning-primary
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)
text-icon-warning-subtle
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)
text-icon-on-color-disabled
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)
text-icon-states-completed
oklch(0.6166 0.1469 147.06)
text-icon-states-unstarted
oklch(0.5375 0.0134 264.46)
text-icon-states-backlog
oklch(0.626 0.0129 264.48)
text-icon-states-cancelled
oklch(0.606746 0.044136 266.4101)
text-icon-states-started
oklch(0.675392 0.143996 70.6276)
text-icon-states-monitoring
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.
text-primary
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)
text-tertiary
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)
text-disabled
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)
text-accent-secondary
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)
text-blue-secondary
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)
text-info-secondary
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)
text-on-color-disabled
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)
text-success-primary
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)
text-warning-primary
oklch(0.4747 0.135757 44.9806) · oklch(0.7724 0.172798 65.367)
text-warning-secondary
oklch(0.6671 0.1685 53.38)
text-danger-primary
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)
text-link-primary
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)
text-link-secondary
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)
text-plans-neutral-color
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)
text-plans-brand-color
oklch(0.9911 0 0) · oklch(0.2029 0.03 232.24) · oklch(0.9847 0.0083 236.56)
text-priority-urgent
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)
text-priority-medium
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)
text-priority-none
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)
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.
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)
border-accent-subtle
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)
border-blue-subtle
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)
border-info-subtle
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)
border-success-subtle
oklch(0.8679 0.0829 153.02) · oklch(0.4003 0.0918 149.37) · oklch(0.7401 0.166 149.61)
border-warning-strong
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)
border-danger-strong
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)
border-icon-tertiary
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)
border-priority-high
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)
border-priority-low
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)
border-priority-unlit
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.
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)
ring-color-accent-subtle
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)
ring-color-blue-subtle
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)
ring-color-info-subtle
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)
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)
ring-color-warning-strong
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)
ring-color-danger-strong
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)
Outline · 18 tokens
The offset focus indicator, mirroring the border vocabulary on the same terms as ring.
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)
outline-color-accent-subtle
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)
outline-color-blue-subtle
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)
outline-color-info-subtle
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)
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)
outline-color-warning-strong
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)
outline-color-danger-strong
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)
SVG fill · 19 tokens
The text ladder reprojected onto SVG `fill`, for artwork that does not follow `currentColor`.
fill-primary
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)
fill-tertiary
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)
fill-disabled
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)
fill-accent-secondary
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)
fill-on-color-disabled
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)
fill-success
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)
fill-success-secondary
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)
fill-warning-primary
oklch(0.4747 0.135757 44.9806) · oklch(0.7724 0.172798 65.367)
fill-warning-secondary
oklch(0.6671 0.1685 53.38)
fill-danger
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)
fill-danger-secondary
oklch(0.5284 0.185 28.96) · oklch(0.72 0.124 24.83)
SVG stroke · 19 tokens
The same ladder on SVG `stroke`.
stroke-primary
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)
stroke-tertiary
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)
stroke-disabled
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)
stroke-accent-secondary
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)
stroke-on-color-disabled
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)
stroke-success
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)
stroke-success-secondary
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)
stroke-warning-primary
oklch(0.4747 0.135757 44.9806) · oklch(0.7724 0.172798 65.367)
stroke-warning-secondary
oklch(0.6671 0.1685 53.38)
stroke-danger
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)
stroke-danger-secondary
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.