Color
How color carries meaning in BCMS — status, emphasis, and brand — and why it's the tool we reach for last. This is the reasoning behind the palette; for the actual values and swatches, see Colors in Tokens.
Color is the loudest signal — spend it carefully
In a dense enterprise screen, color is the strongest attention-grabbing tool there is. That power is exactly why it's the last emphasis tool to reach for: position, size, weight, and space come first. Used everywhere, color stops meaning anything.
Reserve saturated color for status and the single most important element on a screen.
Don't color every card, header, and chip — when everything is colored, nothing stands out.
Let neutrals (the volcanic-ash grays) do the structural work; color is the accent on top.
Don't use color as the only way to distinguish two things — see “survives greyscale” below.
Use semantic tokens, not raw palette values
Reach for the semantic token that names the job (--color-success, --color-text-secondary), never a raw scale value (--moss-canopy-500) in product code. Semantic tokens carry meaning, adapt automatically to dark mode, and keep status consistent everywhere.
| Use | Avoid | Why |
|---|---|---|
| --color-success | --moss-canopy-500 | Names the intent; swaps correctly in dark mode. |
| --color-text-secondary | #667085 | Adapts to theme; one source of truth for muted text. |
| --color-border | --volcanic-ash-200 | Stays consistent if the neutral ramp is retuned. |
Status colors mean one thing
The four intents have fixed meanings across the whole product. A risk manager learns them once and trusts them everywhere — so never repurpose green for a non-success state or red for mere emphasis.
| Intent | Token | Means |
|---|---|---|
| Success | --color-success | Done, ready, healthy, passed. The positive resting state. |
| Warning | --color-warning | Needs attention soon, but not broken. Degraded, nearing a limit. |
| Error | --color-error | Failed, blocked, or destructive. Something needs action now. |
| Info | --color-info | Neutral emphasis — a tip, a link, a non-urgent callout. |
Hierarchy must survive greyscale
Roughly 1 in 12 men has some form of color-blindness, and any screen may be read in greyscale, in sunlight, or under stress. If meaning lives in color alone, it's lost for those readers. Always pair color with a second signal — an icon, a label, a shape, or position.
Pair a status color with an icon or word — a red dot beside “Critical”.
Don't distinguish pass from fail with green vs. red dots alone.
Check text and icons meet contrast against their actual background, including tinted surfaces.
Don't put muted text on a colored fill without re-checking the 4.5:1 ratio.
Brand vs. product color
The marketing palette can be expressive and saturated. Inside BCMS, color is functional: it encodes state and draws the eye to the one thing that matters. When in doubt, the product is calmer than the brand.