UI Kit
Every reusable component in the Phase 1 design system, in both light and dark mode
Color
Semantic tokens — never reference a raw hex outside variables.css
Primary
Secondary
Success
Warning
Danger
Info
Typography
Inter, one family across headings and body
Heading 1 / 28px semibold
Heading 2 / 22px semibold
Heading 3 / 18px semibold
Heading 4 / 16px semibold
Body text / 15px regular — used for descriptions and paragraph content across the admin.
Small text / 13px — secondary metadata, captions.
Label / 12px medium uppercase-tracked for table headers & form labels
Buttons
Form Components
As it appears on ID
Enter a valid email address
Diabetes
Hypertension
Asthma
Click to upload or drag and drop — PDF, JPG up to 10MB
Feedback
Appointment confirmed
Olivia Bennett is scheduled for 9:30 AM with Dr. Lee.Bed capacity high
Ward B is at 92% occupancy.Payment failed
Card ending 4471 was declined.System update
Scheduled maintenance tonight at 11 PM.
Confirmed
Pending
Cancelled
Completed
Draft
Hover for tooltip
Navigation
Patient overview content goes here.
Visit history content goes here.
Uploaded documents go here.
- 1
- 2
- 3
Data Components
8.2%
3,482
Stat card
Info cardSupplementary note or tip
DR
Bed occupancy78%
- Prescription created
- Lab report uploaded
Overlays
Table
| Patient | Department | Status | |
|---|---|---|---|
| Olivia Bennett | Cardiology | Confirmed | |
| Noah Whitfield | Neurology | Pending |
Common UI States
Every data component should design for these, not just the happy path
Loading (skeleton)
Loading (spinner)
No records found
Try adjusting your filters or add a new patient to get started.
Couldn't load data
Something went wrong on our end. Please try again.