Foundation
Token Explorer
Three-layer reference: primitives (--bh-*), semantic (--ds-*), and component tokens. Click any row to copy.
Layer 1 — Primitives
Raw values defined in tokens/bauhaus.css. Never use these directly in components — always via Layer 2 semantic tokens.
Primary palette
Tonal scales
10 OKLCH-derived steps per primary. Step 500 = canonical value. Token: --bh-<family>-<step>
--bh-red-*--bh-blue-*--bh-yellow-*--bh-neutral-*Type scale
Spacing — 8px base unit
Motion — one easing, three durations
Layer 2 — Semantic
Intent-driven aliases defined in tokens/semantic.css. Components consume these — never primitives.
Colors
--ds-color-agency5:1 AA#D42020Authority / AI action — active states, destructive
--ds-color-agency-subtle1.1:1 FAIL#FFEBEBAgency background tint
--ds-color-temporal7:1 AAA#2B44D4Processing / time — loading, in-flight, links
--ds-color-temporal-subtle1.1:1 FAIL#EBEBFFTemporal background tint
--ds-color-validation2.5:1 FAIL#C49A1AQuality / enrichment — caution, confirmation, thresholds
WCAG: On dark surface only: 5.96:1 WCAG AA. On light surface use --ds-text-validation-inline instead.
--ds-color-validation-subtle1.1:1 FAIL#FFF0C8Validation background tint
--ds-color-error6.9:1 AA#B01010System failure — distinct from agency red
--ds-color-error-subtle1.1:1 FAIL#FFEBEBError background tint
--ds-color-outcome-positive4.9:1 AA#2E7D32Success — healthy, completed, gains
--ds-color-outcome-caution3.6:1 FAIL#E65100Warning — near-limit, attention needed
--ds-color-outcome-negative5.4:1 AA#C62828Failure — failed, losses, breaches
Surfaces
Text hierarchy
Never use --ds-border-separator or --ds-border-structure as text color — they fail WCAG (2.3:1).
Borders
Semantic spacing
Motion tokens
Layer 3 — Component
Component-scoped tokens defined at the bottom of tokens/semantic.css. These are the only tokens component source code should reference for component-specific styling.
Button tokens
Primary
Secondary
Danger
Badge tokens
Input tokens
IBAN format required