Design System
Haven Style Guide
Brand tokens generated by the design token pipeline from brand.json.
All values are WCAG AA compliant.
Color Palette
Brand Colors
Terracotta
#a3522d · primary
Terracotta Deep
#8a4425 · secondary
Eucalyptus
#2c6e63 · accent
Semantic Colors
In Stock
#2c6e63
Low Stock
#996d1a
Unavailable
#b5403a
Info
#4a7fa5
Neutral Scale
50
100
200
300
400
500
600
700
800
900
950
Surfaces
Background
#faf9f7
Card
#ffffff
Muted
#f5f3f0
Typography
Display — DM Serif Display
The quick brown fox
jumps over the lazy dog
Used for: h1, h2, h3, product names in editorial layouts, category headers
Body — DM Sans
The quick brown fox jumps over the lazy dog
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
Used for: body text, navigation, buttons, labels, descriptions
Type Scale
Components
Buttons
Primary CTA uses fg/bg inversion (dark on light). Accent (terracotta) used for emphasis. Tertiary for filters and secondary actions.
Badges
Product Cards
Modern Leather Sectional
Top-grain leather with reversible chaise
$2,499
Compact Student Desk
48" x 24" · Engineered wood
$129
Velvet Lounge Sofa
Performance velvet, 3-seat
Left: Gatherer editorial card (4:3 ratio, serif heading, description). Center: Hunter compact card (square, quick-add). Right: Sale treatment.
Form Elements
Spacing & Radius
Border Radius
none
sm
md
lg
xl
2xl
full
Haven uses minimal radius (0-6px). Rounded-sm (2px) for most elements. No pill shapes except full-round badges.
Voice & Tone
Do
Solid walnut with a waterfall edge and matte lacquer finish. Sized for smaller living rooms — 48 inches won't overwhelm the space.
Don't
This stunning, best-in-class coffee table features a thoughtfully designed silhouette crafted from premium materials to elevate any living space.
Do
Sofas built to hold up to real life. Pet-friendly fabrics, washable covers, frames that don't creak at year five.
Don't
Discover our curated collection of world-class sofas, each thoughtfully designed to transform your living room into a sanctuary of style.
Voice Attributes
Warm
Conversational, like a knowledgeable friend — not a salesperson, not a robot.
Confident
Declarative, specific, backed by product knowledge. No hedging.
Editorial
Reads like a shelter magazine, not a product catalog. Story over specs.
Unhurried
No pressure. Furniture is a considered purchase. Give space to decide.
Dev Mode Overlay
Add ?dev=true to any URL to see the persona detection overlay.
Dev Mode
Detected: gatherer (80% confidence)
Uses accent (eucalyptus) for dev mode chrome to visually separate from commerce UI.