Colour
Navy = institutional authority · Blue = primary action · Orange = accent/CTA · Teal = success.
Typography
Urbanist for headings & display, Inter for body & UI. Hierarchy comes from weight, colour and tracking, not just size.
Display 56 Urbanist ExtraBold · -3% tracking
Heading 1 · 42
Urbanist BoldHeading 2 · 32
Urbanist SemiBoldHeading 3 · 24
Urbanist SemiBoldLead paragraph · 18 — Inter, relaxed line height for readable intros.
Body · 16 — Inter regular. The quick brown fox jumps over the lazy dog. 1234567890.
Small · 14 — secondary and meta text.
Eyebrow · uppercase tracked label
Buttons
Variants
Sizes & icons
Badges, status & tags
React
Kuala Lumpur
Remote
Form controls
Enter a valid Malaysian number.
Match score · explainable AI
The signature widget — every AI score shows the why, not just a number.
Cards
Job cards
Stat / KPI cards
Alerts
Tabs
Overview content — profile summary and highlights.
Skills content — competencies and skill-gap analysis.
Activity content — applications and interactions.
Progress meter & stepper
Profile completeness72%
Timeline & weighting sliders
Data table
| Candidate | Occupation | Match | Status |
|---|