Design Tokens
All colour is referenced via tokens only — components carry no raw hex.
Brand red vs Danger red
Brand red is for the ONE primary action & brand moments. Danger red is darker, used only for destructive + error states, and always pairs with an icon — never colour alone.
brand / primary (brand-500)
Primary CTA & brand moments only.
danger (always with an icon)
Destructive + error states only.
Brand red ramp (50 → 700)
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
Surfaces & text
surface-50
surface-100
surface-200
surface-300
ink
muted
Semantic states
successwarningdangerinfo
Tier ramp T1 → T5 (non-red, ordinal)
T1 · StarterT2 · BronzeT3 · SilverT4 · GoldT5 · Platinum
Traffic light (early-stop bands)
GOODWARNINGCRITICAL
Kill-switch (portfolio bands)
GREENAMBERREDBLACK
Radii (sm 6 · md 10 · lg 14 · xl 20 · full)
sm
md
lg
xl
full
Soft shadows
Type scale — Poppins / Inter (LTR) & Cairo (RTL)
The same scale renders with Poppins (display) + Inter (UI, tabular figures) in LTR and Cairo in RTL.
LTR · Poppins / Inter
Display
Title
Heading
Subheading
Body — the quick brown fox.
Tabular figures 0123456789 · 1,234.567
RTL · Cairo
عرض
عنوان
ترويسة
عنوان فرعي
نص — الثعلب البني السريع.
أرقام ٠١٢٣٤٥٦٧٨٩ · ١٬٢٣٤٫٥٦٧
Logo — color · inverse · mono
