Foundations
Color
Warm, natural, never clinical. The palette is one warm-neutral ramp plus an earthen accent for consumer work, and a cool family reserved strictly for B2B.
Primitive ramps
Raw, immutable color values. Named brand colors land at fixed stops in the Sand ramp — a single source of truth that reconciles the conflicting values across the legacy guides.
The warm neutral backbone. cream=50, solace=400, driftwood=700, obsidian=900.
Umber Haven — the primary B2C accent.
Cool palette, B2B only. vapor=200, current=600, abyss=900.
Cool light neutral. stillness=200.
Success — desaturated to sit beside the warm neutrals.
Warning — warm gold, never neon.
Danger — earthy clay rather than red.
Semantic tokens
Components only ever reference these. Each one resolves to a different primitive per theme, which is why a single component renders coherently across all four brand × scheme combinations. The swatches below reflect the theme selected in the top bar.
| Value | Token | Usage |
|---|---|---|
color.bg.canvas | Page background | |
color.bg.surface | Cards and raised surfaces | |
color.bg.sunken | Recessed / hover fills | |
color.text.primary | Primary text | |
color.text.secondary | Secondary / body text | |
color.text.muted | Captions, metadata | |
color.accent.default | Primary actions, links | |
color.accent.subtle | Accent backgrounds | |
color.border.subtle | Hairline dividers | |
color.border.strong | Emphasized borders | |
color.feedback.success | Success states | |
color.feedback.warning | Warning states | |
color.feedback.danger | Errors, destructive actions |