Design System & Component Gallery
Production-grade UI primitives crafted for high-density clinical environments, accessible WCAG AA compliance, and dual-language readability.
1. Brand Identity & SVG Logo
Inline SVG combining the clinical cross mark with neural network synaptic nodes.
2. Button Variants
All buttons enforce a minimum 44px touch target, visible focus rings, and Framer Motion micro-interactions.
3. Status & Clinical Badges
Color coded badges: AI-Generated (Purple), Doctor-Verified (Green), Urgent Alert (Coral), Clinical Warning (Amber).
4. Interactive Medical Cards
Rounded-2xl borders, soft shadows, glassmorphism accents, and hover elevations.
Dr. Aarav Mehta
Chief of Clinical Operations
Engineered with rounded-2xl geometry, gentle elevation shadows, and theme responsiveness.
Real-Time Dictation
Hindi + English Code-Switching
Listens to doctor-patient conversation in real-time, extracts symptoms and generates SOAP notes in <120 seconds.
Drug Contraindication
Patient Allergy: Penicillin V
Proposed Amoxicillin 500mg conflicts with charted hypersensitivity. Recommended alternative: Azithromycin 500mg.
5. Skeleton Loaders
Smooth shimmer placeholders for high-speed clinical data fetching.
6. Clinical Toasts & Banners
Trigger interactive toasts with clinical severity levels.
7. Empty State Displays
Accessible, localized empty displays with contextual action buttons.
No patients currently in queue
All scheduled patients for this shift have been attended to or the queue is idle.
No medications prescribed yet
Begin dictating or select clinical diagnosis to activate AI prescription agent.