Color scales
The raw palette: 24 ranges × 11 steps, generated in OKLCH on a shared lightness ladder — the same step number carries the same visual weight in every range. Click any swatch to copy its variable (Shift+click, or Shift+Enter from the keyboard, for the hex). Semantic design tokens and brand palettes are aliases into these steps.
The scale grid
Skip the swatch grid@import "@busy-office/ui/css/scales";Bands are light-theme roles, read from the shipped tokens: backgrounds, hover, and selected fills alias 50–100; borders 200–300; control borders, disabled text, and dark-theme accents 400–500; solid fills 600–700; text 600–950. A swatch's tooltip names the semantic tokens that consume it.
How to use a step
Reach for a semantic token first
— it already resolves to the right step in both themes, and every
semantic pairing is contrast-gated. Use a raw step directly only for
app-specific surfaces the semantic tier doesn't name (a chart series,
a calendar category, a tag color) — and know what you're taking on:
raw steps are theme-static (pick mid steps, or pair a
light and a dark step yourself under [data-theme="dark"])
and outside the contrast gate (the 32-pair AA check
covers semantic tokens and brand presets, not ad-hoc raw pairings).
The raw tier is also not semver API (see
versioning): step
values may be retuned in any release; the semantic tier is the stable
contract.
/* core range — available in the default bundle, both themes get 500 */
.chart-series--revenue { stroke: var(--bo-palette-blue-500); }
/* mist is an EXTENDED range — this needs the opt-in import first:
@import "@busy-office/ui/css/scales"; */
.tag--logistics { background: var(--bo-palette-mist-100); color: var(--bo-palette-mist-800); }
[data-theme="dark"] .tag--logistics { background: var(--bo-palette-mist-800); color: var(--bo-palette-mist-100); }