Deep Indigo — style guide
The ReForce design system. Toggle the theme (top-right) to see every token adapt. Nothing here hard-codes a colour — it all flows from the tokens in @reforce/ui.
Typography — Exo
Run your businessDisplay · Exo 800
Page titleH1 · Exo 700
Section headingH2 · Exo 700
Card titleH3 · Exo 600
The quick brown fox jumps.Body · Exo 400 · 15px
Emphasised body text.Body medium · Exo 500
LABELS & CAPTIONSLabel · Exo 600 · 12px
₹ 12,40,000Metric · Exo 700 · tnum
RF-116 · 0042 · 99.9%Data · Exo 500 · 13px · tnum
Surfaces
Ink--ink
Background--bg
Surface--surface
Surface 2--surface-2
Surface 3--surface-3
Accent
Accent--accent
Accent hover--accent-h
Accent soft--accent-soft
Accent softink--accent-softink
Semantic
Success--success
Warning--warning
Danger--danger
Info--info
Funnel hues
Property--funnel-property
Home Loan--funnel-loan
Insurance--funnel-insurance
Interiors--funnel-interiors
Data-viz ramp
Buttons
Status pills
ActivePendingOverdueNew
Radius
sm
md
lg
xl