Pick a brand in one look: every card is a live preview of a shipped
preset (@busy-office/ui/css/brand-<name>), each gated
through the full 32-pair AA contrast check in both themes — swatches,
tokens, and hex generated from the CSS that actually ships. One import
re-skins the whole framework; teal is the built-in default (no
import). The theming guide
has the recipe for defining your own.
Previews follow your theme toggle — light
values in light, the palette's dark values in dark, exactly what an
app importing it gets. Every accent in every card is an alias to a
scale step; the build fails if one
drifts to a raw hex.
Placement matters: import the preset
after@busy-office/ui/css, outside any
@layer — that ordering is what lets it win under the
cascade contract. The
installation page
shows the full stylesheet order.
Full token values
cobalt — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#1d4ed8 (blue-700)
#60a5fa (blue-400)
--bo-color-accent-strong
#1e40af (blue-800)
#93c5fd (blue-300)
--bo-color-accent-solid
#1d4ed8 (blue-700)
#2563eb (blue-600)
--bo-color-accent-subtle
#eff6ff (blue-50)
#1e3a8a (blue-900)
--bo-color-accent-text
#1e40af (blue-800)
#bfdbfe (blue-200)
--bo-color-focus-ring
#2563eb (blue-600)
#60a5fa (blue-400)
--bo-color-bg-selected
#eff6ff (blue-50)
#1e3a8a (blue-900)
forest — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#15803d (green-700)
#4ade80 (green-400)
--bo-color-accent-strong
#166534 (green-800)
#86efac (green-300)
--bo-color-accent-solid
#15803d (green-700)
#15803d (green-700)
--bo-color-accent-subtle
#f0fdf4 (green-50)
#14532d (green-900)
--bo-color-accent-text
#166534 (green-800)
#bbf7d0 (green-200)
--bo-color-focus-ring
#16a34a (green-600)
#4ade80 (green-400)
--bo-color-bg-selected
#f0fdf4 (green-50)
#14532d (green-900)
graphite — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#334155 (slate-700)
#94a3b8 (slate-400)
--bo-color-accent-strong
#1e293b (slate-800)
#cbd5e1 (slate-300)
--bo-color-accent-solid
#334155 (slate-700)
#475569 (slate-600)
--bo-color-accent-subtle
#f8fafc (slate-50)
#0f172a (slate-900)
--bo-color-accent-text
#1e293b (slate-800)
#e2e8f0 (slate-200)
--bo-color-focus-ring
#475569 (slate-600)
#94a3b8 (slate-400)
--bo-color-bg-selected
#f8fafc (slate-50)
#0f172a (slate-900)
indigo — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#4338ca (indigo-700)
#818cf8 (indigo-400)
--bo-color-accent-strong
#3730a3 (indigo-800)
#a5b4fc (indigo-300)
--bo-color-accent-solid
#4338ca (indigo-700)
#4f46e5 (indigo-600)
--bo-color-accent-subtle
#eef2ff (indigo-50)
#312e81 (indigo-900)
--bo-color-accent-text
#3730a3 (indigo-800)
#c7d2fe (indigo-200)
--bo-color-focus-ring
#4f46e5 (indigo-600)
#818cf8 (indigo-400)
--bo-color-bg-selected
#eef2ff (indigo-50)
#312e81 (indigo-900)
navy — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#1e3a8a (blue-900)
#93c5fd (blue-300)
--bo-color-accent-strong
#172554 (blue-950)
#bfdbfe (blue-200)
--bo-color-accent-solid
#1e3a8a (blue-900)
#2563eb (blue-600)
--bo-color-accent-subtle
#eff6ff (blue-50)
#1e3a8a (blue-900)
--bo-color-accent-text
#1e3a8a (blue-900)
#bfdbfe (blue-200)
--bo-color-focus-ring
#1d4ed8 (blue-700)
#93c5fd (blue-300)
--bo-color-bg-selected
#dbeafe (blue-100)
#1e3a8a (blue-900)
violet — all seven tokens, both themes
Token
Light
Hex
Dark
Hex
--bo-color-accent
#6d28d9 (violet-700)
#a78bfa (violet-400)
--bo-color-accent-strong
#5b21b6 (violet-800)
#c4b5fd (violet-300)
--bo-color-accent-solid
#6d28d9 (violet-700)
#7c3aed (violet-600)
--bo-color-accent-subtle
#f5f3ff (violet-50)
#4c1d95 (violet-900)
--bo-color-accent-text
#5b21b6 (violet-800)
#ddd6fe (violet-200)
--bo-color-focus-ring
#7c3aed (violet-600)
#a78bfa (violet-400)
--bo-color-bg-selected
#f5f3ff (violet-50)
#4c1d95 (violet-900)
Your own palette
Same recipe, no framework changes: define the accent family
(accent / strong / solid / subtle / text) plus focus-ring
and bg-selected, in both light and dark blocks,
unlayered, imported after the framework CSS. Copy any file above as a
starting point, and add your file to the contrast gate's brand scan
if you vendor the repo — the gate discovers
src/css/brand/*.css automatically. Why palettes
never touch status colors: success/warning/danger carry
MEANING (approved, on hold, overdue) that must read identically
across every brand — a re-skin that made "danger" olive would be a
correctness bug, not a theme. Palettes re-skin identity (the accent
family); semantics stay framework-owned.