Foundation

Design Tokens

COLOR

Primary Palette
Gray Scale

TYPOGRAPHY

Display Font
Bebas Neue
var(--bh-font-display)
HERO · H1 · H2 · H3 · STATS · OVERSIZE LABELS
UI Font
DIN Alternate
var(--bh-font-ui)
LABELS · BODY · CAPTIONS · UI COPY
HERO
Legibility as aesthetic.
96px / 0.9
H1
Legibility as aesthetic.
72px / 0.9
H2
Legibility as aesthetic.
48px / 1.1
H3
Legibility as aesthetic.
32px / 1.1
LABEL
Legibility as aesthetic.
12px / 1.5
BODY
Legibility as aesthetic.
14px / 1.5
CAPTION
Legibility as aesthetic.
12px / 1.5

SPACING

--bh-space-1
8px
--bh-space-2
16px
--bh-space-3
24px
--bh-space-4
32px
--bh-space-6
48px
--bh-space-8
64px
--bh-space-12
96px

MOTION

Mechanical easing only. Animation reveals process — it does not decorate. Frequency inversely proportional to duration.

SNAP
80ms
--bh-duration-snap
FAST
160ms
--bh-duration-fast
MEDIUM
300ms
--bh-duration-medium

BORDERS

FINE
--bh-border-fine
1px
MID
--bh-border-mid
2px
HEAVY
--bh-border-heavy
4px

SEMANTIC LAYER

Semantic tokens alias primitives to intent. Components consume --ds-* tokens, never raw --bh-* values. Theme changes require only updating the semantic layer — primitives and components remain untouched.

LAYER 1
PRIMITIVE
--bh-*
--bh-red: #FF0000
--bh-space-4: 32px
--bh-size-body: 14px
→
LAYER 2
SEMANTIC
--ds-*
--ds-color-agency
--ds-space-inset-lg
--ds-type-body-size
→
LAYER 3
COMPONENT
--ds-btn-*
--ds-btn-danger-bg
--ds-input-border
--ds-card-bg-dark
Intent Colors
--ds-color-agency
→ --bh-red
active authority · destructive action · AI-initiated
--ds-color-temporal
→ --bh-blue
processing · informational · historical · in-flight
--ds-color-validation
→ --bh-yellow
enrichment · quality signal · caution · success
--ds-color-error
→ (direct)
system failure · validation error · distinct from agency
Surface Hierarchy
GROUND
--ds-surface-ground
RAISED
--ds-surface-raised
OVERLAY
--ds-surface-overlay
INVERSE
--ds-surface-inverse
INV RAISED
--ds-surface-inverse-raised
Semantic Spacing
--ds-space-inset-xs8px
tight component padding
--ds-space-inset-sm16px
compact padding
--ds-space-inset-md24px
comfortable padding
--ds-space-inset-lg32px
spacious padding
--ds-space-stack-md32px
between sections
--ds-space-stack-lg64px
major section break
--ds-space-stack-xl96px
page-level separation
← PHILOSOPHYCOMPONENTS →