UI/UX Design Overview
This document provides an overview of the UI/UX design system and screen specifications for iHospita HMS.
Design Principles
1. Clarity First
- Clear visual hierarchy
- Obvious call-to-action buttons
- Minimal cognitive load
2. Efficiency
- Minimize clicks for common tasks
- Keyboard shortcuts for power users
- Quick search and filters
3. Consistency
- Unified component library
- Consistent navigation patterns
- Predictable interactions
4. Accessibility
- WCAG 2.1 AA compliance
- High contrast support
- Screen reader friendly
Technology Stack
| Application | Framework | UI Library |
|---|---|---|
| Portal | React + Vite | Ant Design v5 |
| Console | Next.js 15 | Ant Design v5 |
| Queue Display | Next.js 15 | Tailwind CSS |
| Landing | Next.js 15 | Tailwind + shadcn/ui |
Color Palette
Primary Colors
| Color | Hex | Usage |
|---|---|---|
| Primary | #1890ff | Buttons, links, active states |
| Primary Dark | #096dd9 | Hover states |
| Primary Light | #40a9ff | Backgrounds |
Semantic Colors
| Color | Hex | Usage |
|---|---|---|
| Success | #52c41a | Success messages, confirmations |
| Warning | #faad14 | Warnings, cautions |
| Error | #ff4d4f | Errors, destructive actions |
| Info | #1890ff | Information messages |
Neutral Colors
| Color | Hex | Usage |
|---|---|---|
| Title | #262626 | Headings |
| Text | #595959 | Body text |
| Secondary | #8c8c8c | Secondary text |
| Border | #d9d9d9 | Borders, dividers |
| Background | #f5f5f5 | Page backgrounds |
Typography
Font Family
- Primary: Inter, -apple-system, BlinkMacSystemFont
- Khmer: Battambang, Noto Sans Khmer
Font Sizes
| Scale | Size | Usage |
|---|---|---|
| h1 | 38px | Page titles |
| h2 | 30px | Section titles |
| h3 | 24px | Card titles |
| h4 | 20px | Subsections |
| body | 14px | Body text |
| small | 12px | Captions, labels |
Layout Structure
Portal Layout
┌─────────────────────────────────────────────────────────────────┐
│ Header: Logo │ Search │ Notifications │ User Menu │
├──────────┬──────────────────────────────────────────────────────┤
│ │ │
│ Sidebar │ Main Content Area │
│ │ │
│ • Menu │ ┌────────────────────────────────────────────────┐ │
│ • Items │ │ Page Header with Breadcrumb │ │
│ │ ├────────────────────────────────────────────────┤ │
│ │ │ │ │
│ │ │ Content Area │ │
│ │ │ │ │
│ │ └────────────────────────────────────────────────┘ │
│ │ │
└──────────┴──────────────────────────────────────────────────────┘
Screen Categories
Portal Screens
- Dashboard - Overview and key metrics
- Patient Management - Patient list, profile, registration
- Enrollment - Service selection, invoice creation
- Clinical - Consultation, prescriptions
- Pharmacy - Dispensing, inventory
- Laboratory - Test orders, results
- Billing - Payments, receipts
Console Screens
- Hospital Management - CRUD operations
- User Management - Admin user creation
- Analytics - Platform metrics
Component Library
Based on Ant Design v5:
- Buttons: Primary, Secondary, Text, Link
- Forms: Input, Select, DatePicker, Upload
- Tables: Pro Table with sorting, filtering
- Cards: Standard, Statistics, Feature
- Modals: Confirmation, Form, Information
- Notifications: Toast, Alert, Message
Responsive Breakpoints
| Breakpoint | Width | Target |
|---|---|---|
| xs | < 576px | Mobile |
| sm | >= 576px | Small tablets |
| md | >= 768px | Tablets |
| lg | >= 992px | Small desktops |
| xl | >= 1200px | Desktops |
| xxl | >= 1600px | Large screens |