12 sections — type scale, weights, colours, lists, blockquotes, code, labels & more
1 — Heading Scale
H1 – H6 Progression
DM Sans at progressively smaller sizes with matched weights
2.25 remH1 · 900
Heading 1 — Page Title
1.75 remH2 · 800
Heading 2 — Section Header
1.375 remH3 · 700
Heading 3 — Card Title
1.125 remH4 · 700
Heading 4 — Subsection Label
0.9375 remH5 · 700
Heading 5 — Label Group
0.8125 remH6 · 700
Heading 6 — Small Label
2 — Display & Hero Sizes
Large Display Text
For hero banners, stat values, and feature highlights
4 remDisplay XL
128
3 remDisplay L
94.3%
2.5 remDisplay M
₹1.24Cr
1.875 remDisplay S
88.2 / 100
3 — Body Text Sizes
Paragraph & Body Text
Core reading sizes at different scales
1.0625 remBody LG
HRNexus streamlines every aspect of people management. From payroll to performance reviews, attendance tracking to compliance — it all flows through one unified dashboard.
0.9375 remBody MD
The standard body text size used across all content areas. Optimal for reading at 65–70 characters per line. Paired with a 1.65–1.75 line-height for comfortable readability.
0.875 remBody SM
Smaller body text for table rows, card content, and supporting copy. Still comfortable to read but appropriately compact for dense data layouts and detail views.
0.8125 remBody XS
Extra small body text for captions, footnotes, helper text below form fields, and secondary descriptive content. Typically rendered in the muted text colour for visual hierarchy.
4 — Font Weights
Weight Scale — DM Sans
All supported weights from Regular to Black
400The quick brown fox jumps over the lazy dog — Regular
500The quick brown fox jumps over the lazy dog — Medium
600The quick brown fox jumps over the lazy dog — SemiBold
700The quick brown fox jumps over the lazy dog — Bold
800The quick brown fox jumps over the lazy dog — ExtraBold
900The quick brown fox jumps over the lazy dog — Black
5 — Text Colours
Semantic Text Colours
System palette — all adapt to dark mode via CSS variables
--body-text
Primary body text
Main content, headings, labels
--body-text-muted
Muted secondary text
Captions, placeholders, helpers
--color-primary
Primary accent text
Links, highlights, active states
#10B981
Success / Positive text
Approvals, growth, active status
#EF4444
Danger / Error text
Errors, rejections, critical alerts
#F59E0B
Warning / Caution text
Pending items, warnings, review
#7C3AED
Purple accent text
Premium features, promotions
#0EA5E9
Info / Cyan text
Information callouts, hints
Gradient
Gradient text effect
CSS background-clip gradient
6 — Styles, Decorations & Transforms
Text Modifiers
Italic, strikethrough, underline, small caps and more
"HRNexus completely transformed how we handle payroll and performance reviews. What used to take 3 days now takes 3 hours."
— Sarah Chen, Senior UX Designer
Success
Payroll for December 2024 has been processed successfully. ₹1.24Cr disbursed to 128 employees. All PF, ESI, and TDS deductions applied correctly.
Warning
14 pending leave requests require manager approval. Performance reviews close in 6 days. Please ensure all team assessments are submitted by December 20th.
Critical
Security alert: MFA not enabled on 6 admin accounts. Two-factor authentication is mandatory for all admin-level access from December 31, 2024 onwards.
8 — List Styles
Bullet List
Annual leave — 18 days per year, accrued monthly
Sick leave — 10 days (non-carry-forward)
Maternity leave — 26 weeks fully paid
Paternity leave — 15 working days
Compensatory off — within 60 days of worked day
Checklist
Employee directory configured
Payroll rules set up
Leave policies defined
Performance templates — pending
2FA for admin accounts — pending
Numbered / Ordered
Submit self-assessment form by Dec 20
Manager schedules 1:1 review session
HR calibrates scores across departments
Final ratings published by Jan 5, 2025
Increment letters issued by Jan 15, 2025
9 — Code & Monospace
Code Typography
Inline code, keyboard shortcuts, and syntax-highlighted blocks
Inline Code
Use GET /api/v2/employees to fetch the full roster. Filter by department using ?dept=engineering. Response includes id, name, role, and score fields.
Keyboard Shortcuts
Press ⌘ + K to open search. Use Esc to dismiss modals. Tab advances through form fields.
Code Block
// Fetch employee by ID — HRNexus REST API v2const getEmployee = async (id) => {
const res = await fetch(`/api/v2/employees/${id}`, {
headers: { 'Authorization': `Bearer ${token}` }
});
if (!res.ok) throw new Error('Employee not found');
return res.json(); // { id, name, dept, score, status }
};
10 — Labels, Captions & Section Titles
UI Label Patterns
Consistent small-text patterns used throughout the UI
Section Label (uppercase, muted)
HR Core Features
Form Label (small, bold)
Table Header Label
Employee NameDepartmentPerformanceStatus
Caption / Helper text
Leave balance resets on January 1st. Carry-forward capped at 30 days.
Timestamp / Meta text
Updated 2 minutes ago · Dec 14, 2024 at 9:15 AM IST
11 — Truncation & Overflow Handling
Text Overflow Patterns
Ellipsis, line-clamp, and wrapping control
Single-line ellipsis (text-overflow: ellipsis)
Sarah Chen — Senior UX Designer — Product Department — Joined March 15, 2021 — Employee #EMP-0042 — Bangalore, India
Two-line clamp (-webkit-line-clamp: 2)
HRNexus is a comprehensive HR management platform that helps growing teams manage every aspect of their workforce — from hiring and onboarding, to payroll processing, performance reviews, attendance tracking, and statutory compliance — all from a single unified dashboard that adapts to your company's unique policies and workflows.
No-wrap (white-space: nowrap) with horizontal scroll
Employee: Sarah Chen | Dept: Product | Role: Sr UX Designer | Score: 94 | Status: Active | Start: 2021-03-15 | Salary: ₹95,000 | Leave: 18 days remaining
Headings, body copy, and supporting text in a realistic layout
HRNexus — Employee Handbook 2025
Chapter 4: Performance & Growth
Last updated December 2024 · 12 min read
At HRNexus, we believe that continuous feedback drives better outcomes than annual surprises. Our performance framework is built around quarterly review cycles, 360° peer input, and transparent goal-setting that aligns individual growth with company strategy.
4.1 Review Cycles
Reviews run quarterly. The Q4 cycle is the annual review — it carries the most weight for compensation decisions and career progression. Managers rate on five competencies: Impact, Collaboration, Communication, Growth, and Leadership.
"The best review conversations happen when both the manager and employee have already been thinking about these questions all quarter — not just in the final week."
— Emily Rodriguez, HR Lead
4.2 Score Interpretation
90–100 Outstanding — exceeds all expectations consistently
75–89 Exceeds — regularly goes above scope of role
60–74 Meets — solid performance, delivers on core responsibilities
Below 60 Improvement needed — performance plan initiated
Scores are calibrated across departments by HR to ensure consistent standards. Individual raw scores may be adjusted during calibration. Final scores are shared with employees within 10 working days of the review close date. For queries, contact hr@hrnexus.com.