Hair Hunter · Design System
Token Spec Sheet
Checkpoint A — for creative director approval
01 — Typography
Three voices, one brand
Bebas Neue — display, headlines
The Hunt for the Perfect Cut
Cormorant Italic — elegant accents, pull quotes
“A gentleman is measured by the edge of his line-up.”
Barlow — body & interface, weights 300–600
Book your barber in two taps. Every visit earns points across all three branches — Dubai Marina, Downtown Dubai, and Beirut.
02 — Semantic Color
Ink · Brass · Paper
Components only ever reference semantic roles — flip the theme toggle and every swatch below re-maps. Raw hex exists in exactly one file.
--background
Page background
--surface
Cards
--surface-raised
Popovers, sticky bars
--accent
CTAs, active states
--accent-soft
Brass tint fills
--destructive
Errors, cancellations
--success
Confirmations
Primary text — 15.7:1
Secondary text — ≥4.9:1
Brass accent text — ≥5.2:1
Brass tint surface
For selected states & highlights
Ink on brass — the CTA pairing (5.7:1)
03 — Per-Branch Money & Motion
Minor units in, branch format out
Dubai Marina
AED 120.00
stored: 12000
Downtown Dubai
AED 150.00
stored: 15000
Beirut
$45.00
stored: 4500
Micro-interactions run 150–300ms on token curves and collapse to 0 under prefers-reduced-motion. Hover the cards above.