Design System
HRMSElegance Design System - The source of truth for UI development
HRMSElegance Design System
This design system defines the source of truth for all UI development in the HRMS project. It is based on the HRMSElegance prototype and must be followed by all developers and AI coding agents.
Visual Reference
This is what you are building. All UI implementations must match this aesthetic:
Desktop Views
Profile page with gradient balance cards, tabs navigation, and reporting structure
Settings page with sidebar navigation and form layouts
Key Components
Sidebar with blue active states, user profile at bottom
Additional Screenshots
The following screenshots should be added to /public/images/design-system/:
| Page | Filename | Key Features |
|---|---|---|
| Dashboard | dashboard.png | Gradient stats cards, widget grid, "Good morning" greeting |
| Employees | employees.png | Table with avatars, department badges, status indicators |
| Time Off | time-off.png | Balance cards with progress bars, request list |
| Documents | documents.png | Category groups, document cards |
| AI Assistant | ai-assistant-collapsed.png | Floating button + modal overlay |
| AI Assistant | ai-assistant-expanded.png | Full-screen chat interface |
| Profile Mobile | profile-mobile.png | Mobile-responsive layout |
See /public/images/design-system/README.md for instructions on capturing missing screenshots.
Quick Reference
| Element | Value |
|---|---|
| Primary Color | #008CF0 (blue-500) |
| Background | #F2F2F7 (gray-100) |
| Card Radius | rounded-2xl (16px) |
| Card Shadow | shadow-lg shadow-gray-200/50 |
| Card Padding | p-6 minimum |
Design Philosophy
This design follows the HRMSElegance prototype aesthetic:
- Background: Apple-style
#F2F2F7with white cards - Sidebar: Theme-aware (white in light mode, dark gray in dark mode)
- Stats Cards: COLORFUL gradients with white text and hover lift effects
- Content Cards: White with soft shadows, no borders
- Buttons: Primary blue (#008CF0), pill-shaped with scale effects
- AI Button: Violet→Purple→Fuchsia gradient with glow effect
- Whitespace: Generous spacing throughout
- Transitions: Spring-based animations with Framer Motion
DO NOT create a wireframe with plain white cards and gray borders. Use COLOR strategically.
Documentation Structure
| Section | Purpose |
|---|---|
| Design Tokens | Colors, spacing, shadows, radius |
| Components | Component patterns and code examples |
| Layouts | Sidebar, TopBar, page structure |
| Configuration | Tailwind, CSS, shadcn config |
| AI Rules | Mandatory rules for AI agents |
| Validation | Implementation checklists |
Tech Stack
- React 19.x with TypeScript
- Tailwind CSS 3.4 with CSS variables
- shadcn/ui components (Radix UI primitives)
- Framer Motion for animations
- Lucide React for icons
- Recharts for data visualization
Critical Rules Summary
- NEVER create plain white cards with gray borders
- ALWAYS use gradient backgrounds for stats cards
- ALWAYS use
shadow-lgon content cards (not borders) - ALWAYS use
rounded-2xl(16px) on cards - ALWAYS use CSS variables (
bg-card, notbg-white) - ALWAYS support dark mode with
dark:variants - NEVER use spacing less than
p-6on cards
See AI Rules for the complete governance document.