Color
Semantic color tokens, interaction states, status colors, and the primitive palettes they reference.
Color tokens define the visual identity across all BDS themes. The system separates primitive color scales (raw hex values) from semantic color roles (purpose-bound aliases). Components reference the semantic roles only.
Never use a token outside its semantic category. --text-* is for text. --background-* is for backgrounds. --border-* is for borders. No --text-primary on a background-color. The cascade is a contract — bypassing it leaks brand drift everywhere it isn't caught.
Click any swatch to copy var(--token-name) to your clipboard.
Page and surface
Background
Text
Border
Interaction states
Hover, press, and disabled. These replace filter: brightness() and opacity hacks — the proper tokens compose with the rest of the cascade.
Status
Canonical Figma tokens for positive, negative, and warning states. Background variants are saturated; surface variants are subtle tints.
Extended status (gap-fills) — additional status tokens not yet in Figma.
Presence
Online/offline indicator tokens used by Avatar and Dot components.
Primitives
Raw color scales from the Figma Brand Kit. Components reference these via semantic tokens — never directly. The primitives change rarely; the semantic mappings change per theme.
Grayscale
Poppy (brand primary)
Tan
Orange
Yellow
Green
Blue
Purple
Pink
Related
- Color Pairings — which text token is WCAG-safe on which surface (brand + service tiers, both themes), the contrast matrix, and the CI gate
- Color primitive tier — the closed
tiervocabulary, tonal-scale emission rules, and the deprecated suffix-alias migration - Client Themes → Per-audience scope binding — multi-brand scope-based token re-binding for sites like Vale Partners and brikdesigns.com
- Cascade rules — the three-layer architecture every consumer follows
- Atmospheres — the mood overlay layer that sits on top of theme tokens
- Storybook → Color contrast compliance
Token Anatomy
The six disambiguated concepts that describe every BDS token — Anatomy, Tier, Library, Layer, Mode, Tenet — and the four-tier abstraction stack every token belongs to.
Color Pairings
The accessible foreground/background pairing system — which text token is WCAG-safe on which surface, for brand and service-tier colors, in both themes, enforced by a CI gate and portable to client themes.