GlowSims · Sandstone
Design tokens
Warm stone neutrals, three typefaces, soft warm depth, configurable stage-category colours. The --brand accent is injected from config (try INSTITUTE_BRAND=glowsims).
Type scale
Display 28/34 · serif 800
Heading 1 · 23/28 · serif 800
Heading 2 · 18/24 · serif 700
Heading 3 · 15/20 · sans 600
Body · 14/21 · sans 400 — the quick brown fox
Body small · 12.75/19 · sans 400
Caption · 12/16 · sans 500
Overline · 11 · upper
Mono · 12.75 · HEU-2026-00142 · 42,000 PKR
Typefaces
Source Serif 4
--font-head · display / headings
Hanken Grotesk
--font-sans · body / UI
IBM Plex Mono
--font-mono · data / refs
Neutral ramp (warm stone)
n-50
--n-50
n-100
--n-100
n-200
--n-200
n-300
--n-300
n-400
--n-400
n-500
--n-500
n-600
--n-600
n-700
--n-700
n-800
--n-800
n-900
--n-900
bg
--bg
surface
--surface
surface-2
--surface-2
border
--border
border-strong
--border-strong
text
--text
text-2
--text-2
text-3
--text-3
Brand accent (injected per institute — SWAPPABLE)
brand
--brand
brand-strong
--brand-strong
brand-soft
--brand-soft
brand-soft-2
--brand-soft-2
brand-border
--brand-border
Semantic (constant)
success
--success
success-soft
--success-soft
success-strong
--success-strong
warning
--warning
warning-soft
--warning-soft
warning-strong
--warning-strong
danger
--danger
danger-soft
--danger-soft
danger-strong
--danger-strong
Stage-category badges (StageBadge)
intakereviewinterviewdecisionpaymentenrolmentterminal
Depth — hairline border + one soft warm shadow
--e1
--e2
--e3
--e4
Tailwind utilities → CSS-var tokens
bg-brand-soft
surface · border-line · shadow-e1
success