HR ERP — Final Design System
v1.0 · Midnight Navy + Sky Blue · DM Sans + Inter · Production Ready
Sidebar: #0D1F35 Refined Primary: #0EA5E9 Sky Blue Font: DM Sans + Inter WCAG AA Contrast ✓
Foundation — Sidebar & Brand
Sidebar (Midnight Navy — Refined)
Sidebar BG
#0D1F35
--sb-bg
Main sidebar background
Primary (Sky Blue)
Primary
Hover
Mid
Light
Tint
#0EA5E9
--primary
Buttons, links, active states
Success (Emerald)
500
400
200
50
#10B981
--success
Active, approved, present
Warning (Amber)
500
300
200
50
#F59E0B
--warning
Pending, late, caution
Danger (Red)
500
300
100
50
#EF4444
--danger
Absent, rejected, error
AI / New Feature
500
400
200
50
#8B5CF6
--ai
AI score, new features, premium
Neutral (Slate)
950
700
500
400
300
200
100
50
Slate Scale
--text-body / --border
Text, borders, surfaces
Sidebar Text Colors — Refined (Middle Variant)
#F1F5F9
Company name, user name
#64A0C8
Tenant subtitle, user role
#B8D0E8
Inactive menu items
#4A6FA5
Section labels (MAIN, HR TOOLS)
#7DD3FC
Active menu item text
Contrast ratios (WCAG)
#B8D0E8 on #0D1F35 4.6:1 ✓ AA
#F1F5F9 on #0D1F35 12.1:1 ✓ AAA
#7DD3FC on #0D1F35 5.8:1 ✓ AA
#64748B on #0B1929 (old) 1.8:1 ✗ FAIL
Sidebar — All States
Default — Dashboard active
HR ERP
InfiKuber Technologies
MAIN
Dashboard
Employees
Attendance
Payroll
Leaves 3
HR TOOLS
Recruitment
Compliance
Analytics
ACCOUNT
Settings
RK
Ramesh Kumar
HR Manager
Payroll active
HR ERP
Acme Corp Pvt Ltd
MAIN
Dashboard
Employees
Attendance
Payroll
Leaves
Expenses
HR TOOLS
Recruitment
Analytics
AS
Anjali Singh
Admin
Employee role — self-service only
HR ERP
InfiKuber Technologies
MY WORKSPACE
Dashboard
My Attendance
My Leaves 1
My Payslips
Expenses
GPS Check-in
PS
Priya Shah
Employee · EMP-001
Color Change Summary — Before vs After
Element Before (broken) After (refined) Contrast ratio Result
Sidebar background #0B1929 → #0D1F35 — Slightly lighter
Inactive menu text #64748B ✗ → #B8D0E8 ✓ 1.8:1 → 4.6:1 WCAG AA Pass
Inactive menu icons #334155 ✗ → #4A6FA5 ✓ 1.6:1 → 3.2:1 Visible now
Section labels (MAIN) #334155 ✗ → #4A6FA5 ✓ 1.6:1 → 3.2:1 Readable
Tenant subtitle #64748B ✗ → #64A0C8 ✓ 1.8:1 → 3.6:1 Blue-tinted, clear
Company name #FFFFFF → #F1F5F9 12.1:1 Warm white, premium
Active item text #7DD3FC → #7DD3FC 5.8:1 Already perfect ✓
Font Pairing — DM Sans + Inter
DM Sans — Headings & Numbers
Employee Dashboard
₹48.2L
Used for: Page titles, section headings, stat card numbers, modal titles, logo text. Geometric and confident — used by Razorpay, Notion, Swiggy.
Inter — Body, Forms & Tables
Employee has applied for 3 days of casual leave from 18–20 March 2026. Please review and approve or reject with a comment.
Used for: Body text, form labels, table cells, buttons, badges, descriptions. Maximum readability at small sizes — the standard for data-heavy enterprise UIs worldwide.
Complete Type Scale
DM Sans · 28px · 700 · -1px Employee Management
DM Sans · 22px · 700 · -.5px Payroll Overview — March 2026
DM Sans · 18px · 700 · -.3px Run Payroll for March 2026
Inter · 16px · 600 · 0 Pending Leave Approvals
Inter · 14px · 600 · 0 Attendance Summary · April 2026
Inter · 13px · 400 · 0 Employee submitted leave request from 18–20 March for personal reasons.
Inter · 12px · 400 · 0 Last updated 5 minutes ago · Auto-refreshes every 30 seconds
Inter · 11px · 700 · .6px · CAPS Department · Designation · Status
JetBrains Mono · 12px · 400 GET /api/payroll/run · 200 OK · 142ms
DM Sans · 40px · 700 · -2px 142
Do's and Don'ts
✅ DO — Use this
Page Title in DM Sans Bold
Body text in Inter Regular — clear and readable
LABELS IN CAPS + TRACKING
₹48.2L
Stat numbers in DM Sans — big, bold, spaced tight
❌ DON'T — Avoid this
Page title in light weight — looks weak
BODY TEXT IN CAPS — hard to read
labels without uppercase treatment
₹48.2L
Stat in regular weight — no impact, looks cheap
Buttons — All Variants & Sizes
Status Badges
Active Approved Present Pending On Leave Late Rejected Absent Suspended In Review Processing AI Scored New Feature Reimbursed Draft Inactive
Stat Cards
142
Total Employees
↑ +5 this month
₹48.2L
Monthly Payroll
↑ 3.2% vs last month
94.2%
Attendance Rate
↓ 1.1% vs last week
8
Pending Approvals
3 urgent — review now
Notifications
Leave approved
Your leave for 18–20 Mar 2026 has been approved by Ramesh Kumar
2m ago
Payslip ready
February 2026 payslip generated. Net salary: ₹82,450
1h ago
Attendance late
Priya Shah checked in 42 minutes late today. 3rd time this month.
3h ago
Expense rejected
Your travel expense of ₹4,200 was rejected — missing original receipt
Yesterday
Employee Data Table
Employees
142 total
Employee Department Designation Join Date Status Actions
PS
Priya Shah
EMP-001 · priya@company.com
 Engineering Senior Developer 01 Jan 2023 Active
AK
Amit Kulkarni
EMP-042 · amit@company.com
 Design UI/UX Designer 15 Mar 2023 On Leave
RM
Riya Mehta
EMP-018 · riya@company.com
 HR HR Executive 12 Jun 2022 Active
SP
Suresh Patil
EMP-067 · suresh@company.com
 Sales Sales Manager 03 Aug 2021 On Notice
Showing 1–4 of 142 employees
Spacing System
2px
4px
6px
8px
10px
12px
16px
20px
24px
32px
Border Radius System
4px
sm · tags
8px
md · inputs
12px
lg · cards
16px
xl · modals
full
pill · avatar
Full Admin Dashboard Preview
HR ERP
InfiKuber Technologies
MAIN
Dashboard
Employees
Attendance
Payroll
Leaves 5
Expenses 3
HR TOOLS
Recruitment
Compliance
Analytics
Audit Logs
ADMIN
Settings
RK
Ramesh Kumar
HR Manager
Search employees, payroll, leaves... ⌘K
RK
Good morning, Ramesh 👋
Monday, 14 March 2026 · InfiKuber Technologies · Pro Plan
142
Total Employees
↑ +5 this month
₹48.2L
Monthly Payroll
↑ 3.2% vs last
94.2%
Attendance Rate
↓ 1.1% this week
8
Pending Approvals
3 urgent today
Payroll trend 2026
Monthly total in lakhs
Oct
Nov
Dec
Jan
Feb
Mar
Recent employees
Latest additions
PS
Priya Shah
Engineering · EMP-001
Active
AK
Amit Kulkarni
Design · EMP-042
On Leave
RM
Riya Mehta
HR · EMP-018
Active
Form — Add Employee (Step 1 of 5)
Add New Employee
Fill in the details below. All fields marked * are required.
✓
Personal
2
Job
3
Salary
4
Bank
5
Docs
Select the direct reporting manager for this employee.
Input States
Invalid PAN format. Must be ABCDE1234F
PAN format is valid ✓
This field is auto-generated by the system.
Complete CSS Variables — Copy into your project
/* ══ HR ERP Design System v1.0 ══ */
/* Midnight Navy + Sky Blue + DM Sans + Inter */

:root {

/* ── Sidebar (Refined — All text visible) ── */
--sb-bg: #0D1F35;
--sb-active-bg: rgba(14,165,233,.18);
--sb-section-text: #4A6FA5; /* MAIN, HR TOOLS labels */
--sb-item-text: #B8D0E8; /* Inactive menu items — 4.6:1 */
--sb-item-icon: #4A6FA5; /* Inactive icons */
--sb-active-text: #7DD3FC; /* Active item — 5.8:1 */
--sb-active-icon: #0EA5E9;
--sb-company-name: #F1F5F9; /* Logo text — 12.1:1 */
--sb-tenant-name: #64A0C8; /* Subtitle — 3.6:1 */

/* ── Primary Brand (Sky Blue) ── */
--primary: #0EA5E9;
--primary-hover: #0284C7;
--primary-light: #E0F2FE;
--primary-text: #075985;

/* ── Page & Card Backgrounds ── */
--page-bg: #F8FAFC;
--card-bg: #FFFFFF;
--surface: #F1F5F9;
--topbar-bg: #FFFFFF;
--topbar-border: #E2E8F0;

/* ── Typography Colors ── */
--text-h: #0B1929; /* Headings */
--text-body: #334155; /* Body text */
--text-muted: #64748B; /* Labels, captions */
--text-placeholder: #94A3B8; /* Placeholders */
--border: #E2E8F0;

/* ── Semantic Colors ── */
--success: #10B981; --success-light: #ECFDF5;
--warning: #F59E0B; --warning-light: #FFFBEB;
--danger: #EF4444; --danger-light: #FEF2F2;
--ai: #8B5CF6; --ai-light: #F5F3FF;

/* ── Fonts ── */
--font-heading: 'DM Sans', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* ── Radius ── */
--radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
}

/* Google Fonts import (add to <head>) */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap');
Token Reference Table
TokenColorValueUse case
--sb-bg#0D1F35Sidebar background
--sb-item-text#B8D0E8Inactive menu text (was broken #64748B)
--sb-section-text#4A6FA5MAIN / HR TOOLS labels + icons
--sb-active-text#7DD3FCActive menu item text
--sb-company-name#F1F5F9Logo title, user name
--sb-tenant-name#64A0C8Company subtitle, user role
--primary#0EA5E9Primary buttons, links, active states
--page-bg#F8FAFCMain page background
--card-bg#FFFFFFCard and panel background
--text-h#0B1929All headings and page titles
--success#10B981Active, approved, present
--warning#F59E0BPending, late, caution
--danger#EF4444Absent, rejected, errors
--ai#8B5CF6AI features, new/premium badges