Clean indigo healthcare UI for small Indian clinics — reception, billing, diagnostics, X-ray, and the medical store. Trinaitra lime appears only as a restrained brand and AI accent. Theme selection persists and respects system preference.
Colour tokens
Indigo for actions and selection. Neutral surfaces for most UI. Trinaitra lime reserved for branding and AI accents. Semantic greens stay for success.
Neutral surface hierarchy
About 70% of the interface — backgrounds and cards stay calm.
--background
#F6F7FB
--surface
#FFFFFF
--surface-secondary
#F0F2FA
--surface-elevated
#FFFFFF
--foreground
#1D2433
--muted-foreground
#697386
--border
#E1E5EF
--input-border
#D5DAE6
Indigo primary scale
About 20% — buttons, active nav, tabs, links, focus rings, charts.
--primary
#5B5BD6
--primary-hover
#4848BC
--primary-pressed
#3F3FA8
--primary-foreground
#FFFFFF
--primary-soft
#EEEFFF
--primary-soft-foreground
#4747B2
Sidebar navigation
Dark indigo/navy sidebar with indigo active state.
--sidebar
#202443
--sidebar-foreground
#F3F4FF
--sidebar-muted
#AEB3CD
--sidebar-active
#5B5BD6
--sidebar-active-foreground
#FFFFFF
--sidebar-hover
#2A2E52
Trinaitra lime accent
About 10% with semantics — branding, AI insights, optional chart accent. Not used for primary buttons or generic success.
--accent
#B8DC74
--accent-soft
#F0F7E2
--accent-foreground
#31451C
Semantic status colours
Success, information, warning, and danger — always paired with text labels.
--success
#38856B
--success-bg
#E7F3EE
--info
#477F93
--info-bg
#E7F1F5
--warning
#B77926
--warning-bg
#F8EFDF
--danger
#B34D59
--danger-bg
#F9E9EB
Dark mode reference
Typography
Inter with a clear hierarchy. Page titles use tight letter spacing without excessive bold weight.
Display · 28px
Doctor's Plus
Page heading · 22–30px
Today's appointments
Page description · 14–15px
Queue, wait times, and follow-ups for today.
Section heading · 20–22px
Billing summary
Card heading · 14px
Patient: Ananya Sharma
Body · 14px
Chest X-ray report ready for review.
Secondary · 12px
Token DP-2841 · OPD Room 2
Label · 11px
PRESCRIPTION STATUS
Spacing scale
4px base grid: 4, 8, 12, 16, 20, 24, and 32px.
Corner radius
Cards use 10px, controls 8px, small elements 6px. Badges and avatars are fully rounded.
Card · 10px
Control · 8px
Small · 6px
Full
Form controls
Text, search, number, date, select, and textarea with helper and validation messaging.
As printed on Aadhaar or hospital card
Please select a department before booking.
Visible to the consulting doctor
Assigned by reception
This prescription code is already used.
Checkboxes
Visit type
Badges & appointment statuses
Status is always shown with a label, never colour alone.
Alerts, progress & toasts
Lab samples collected
Payment received
Low stock alert
X-ray machine offline
Prescription saved
Sent to pharmacy counter for DP-10482.
Report uploaded
Chest X-ray PDF attached to Fatima Khan.
Cards
Patients today
46
Collections
₹48,200
Lab orders
19
X-ray queue
5
Standard content card
Compact clinical surface with 16px padding and a 1px border.
Ananya Sharma
Checked in29 yrs · Female · ID DP-10482
AI clinical insight
Moderate confidencePatient's last three visits show rising fasting glucose. Consider HbA1c with today's blood work.
Suggested next step: Add HbA1c to lab order and schedule diet counselling.
Empty & skeleton states
No X-ray reports yet
Upload or link a diagnostic report once the radiology technician finishes the scan.
Dialogs, confirmation & dropdown
Responsive data table
Desktop table with contained horizontal scroll. Mobile shows card rows so patient name and actions stay usable.
| Patient | Doctor / Desk | Time | Type | Status | Bill | Actions |
|---|---|---|---|---|---|---|
Fatima Khan DP-10391 | Dr. Kavya Nair | 2:40 PM | OPD | Checked in | ₹600 | |
Suresh Patil DP-10405 | Dr. Arjun Menon | 3:00 PM | X-ray review | Waiting | ₹1,200 | |
Lakshmi Iyer DP-10422 | Dr. Kavya Nair | 3:20 PM | Follow-up | Scheduled | ₹450 | |
Imran Shaikh DP-10431 | Lab desk | 3:30 PM | Diagnostics | Completed | ₹2,150 |
Fatima Khan
DP-10391 · 2:40 PM
OPD · Dr. Kavya Nair · ₹600
Suresh Patil
DP-10405 · 3:00 PM
X-ray review · Dr. Arjun Menon · ₹1,200
Lakshmi Iyer
DP-10422 · 3:20 PM
Follow-up · Dr. Kavya Nair · ₹450
Imran Shaikh
DP-10431 · 3:30 PM
Diagnostics · Lab desk · ₹2,150
Charts
Series order: indigo primary, muted healthcare blue comparison, then optional Trinaitra lime. Semantic colours are reserved for meaningful status.
OPD visits this week
Green Valley Clinic · comparison with last week
Billing collections
Collected vs pending dues (₹)
Empty chart state
Shown when a clinic has no trend data yet
No visit trends yet
Patient visit data will appear here once appointments are recorded.