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
- 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