Design system
Components, states, colours, typography — single source of truth for Outbound HR
Colour palette
Status colours always paired with a label in UI. Money emphasis: deep green.
Status colours
Typography
Plus Jakarta Sans. Tabular numerals for currency & counters.
Heading 26 · Page title
Heading 22 · Page H2
Heading 18 · Section
Heading 16 · Card title
Body 14 · default reading size
Caption 12 · muted
₹19,68,000 tabular-numerals
Buttons
Primary, ghost, soft, dark, danger, muted · sm / default / lg · disabled state
Form fields
Text, currency, percent, date, time, select, textarea, switch, dropzone
Status pills
Always paired with a label. Use the matching colour class.
Present
Absent
Late
On leave
WFH
Field
Holiday
Pending
Approved
Rejected
Draft
Disbursed
Locked
Leave-type chips
CL · Casual
SL · Sick
PL · Privilege
Comp-off
WFH
Maternity
Bereavement
Unpaid · LOP
KPI tiles
5 colour variants. Use sparingly for visual hierarchy.
Approval card
Avatar + body + actions. Keyboard A / R when hovered.
Karthik V. SL · Sick leave
📅 14 May → 15 May · 2 days · Bal after: 2 SL · Document attached 📎
"Fever and throat infection, medical certificate attached."
Leave balance card
Bar fills based on used / total.
PL Privilege Leave
6 / 18 · 12 avail
Wizard stepper
Horizontal stepper with done / active / upcoming states.
Calendar day cells
All states paired with a small tag for accessibility.
5P
6Late
7Absent
8Leave
9WFH
10Field
11Holiday
12
13Today
14
15
Empty state
Friendly, useful — never an error.
All caught up
You've handled every approval for today. Nice work 👏
Audit timeline
Append-only · used in activity logs.
2 hrs ago
Priya R. updated Permanent address · old → new
14 Apr 2026
System uploaded Apr 2026 payslip · Net ₹1,09,492
02 Apr 2026
Sneha R. approved PL · 02 Apr → 05 Apr · 4 days
Toast notifications
Bottom-right, 2.4s auto-dismiss.
Pages in this build
22 pages of HRMS · click to navigate