Clinical Aurora
The tokens, components and patterns behind the new MediCore Pro. Calm, precise and quietly futuristic, built for long shifts on any screen, in light and dark.
Calm
Generous whitespace, one primary action per view, colour reserved for meaning.
Honest
Real loading, empty and error states. No placeholder numbers, ever.
Accessible
AA contrast in both themes, visible focus, full keyboard support.
Foundations
Colour
Brand scales are fixed values. Everything a component uses goes through semantic tokens, which switch between light and dark mode on their own.
Brand scales
Raw scales for illustrations, charts and the rare one-off. Components should not reach for these directly.
Pulse
Brand teal. Primary actions, focus rings, active states. Use sparingly.
50
100
200
300
400
500
600
700
800
900
950
Iris
AI and intelligence features, secondary chart series.
50
100
200
300
400
500
600
700
800
900
950
Coral
Critical, occupied, destructive.
50
100
200
300
400
500
600
700
800
900
950
Amber
Pending, low stock, warnings.
50
100
200
300
400
500
600
700
800
900
950
Mint
Success, available, admitted.
50
100
200
300
400
500
600
700
800
900
950
Slate
Cool neutrals for text, borders and surfaces.
50
100
200
300
400
500
600
700
800
900
950
Semantic surfaces and text
Switch the theme to see these change.
background
card
popover
muted
subtle
primary
accent
destructive
border
input
foreground
muted-foreground
Chart palette
Colour-blind safe order. Always pair series with a legend or direct labels.
chart-1
chart-2
chart-3
chart-4
chart-5
chart-6
chart-7
Status tones
Each tone has a soft surface, an accessible text colour, a border and a solid accent. Status is never shown by colour alone.
brand
Brand highlights
success
Available, admitted, paid
warning
Pending, low, expiring
danger
Critical, occupied, failed
info
Scheduled, informational
ai
AI and analytics
neutral
Discharged, inactive
Foundations
Typography
Plus Jakarta Sans for headings, Inter for reading, JetBrains Mono for IDs and figures. Headline sizes are fluid, so they scale smoothly from phones to large screens.
Type scale
text-display
Plus Jakarta Sans 700 · clamp(36px, 84px)
One calm system
text-h1
Plus Jakarta Sans 700 · clamp(30px, 48px)
Emergency unit overview
text-h2
Plus Jakarta Sans 600 · clamp(24px, 36px)
Beds by ward
text-h3
Plus Jakarta Sans 600 · clamp(19px, 22px)
Pharmacy batches expiring soon
text-body
Inter 400 · 15px / 1.6
Every screen shows honest loading, empty and error states, so staff always know what they are looking at.
text-sm
Inter 400 · 14px / 1.5
Table cells, form labels and most app copy use 14px.
text-caption
Inter 400 · 12px / 1.45
Captions, helper text and timestamps.
Numbers and identifiers
Use font-mono for IDs and tabular-nums anywhere figures line up in columns.
Record ID
PT-000482
Amount (tabular)
₹1,24,580.00
Brand gradient text
Clinical Aurora
Foundations
Depth, shape and motion
Soft layered shadows, 1px hairlines and 14 to 20px radii. Motion runs 150 to 300ms with a calm ease-out, and turns off for anyone who prefers reduced motion.
Elevation
shadow-xs
Cards, inputs
shadow-sm
Raised controls
shadow-md
Hover lift
shadow-lg
Menus, toasts
shadow-xl
Dialogs, drawers
shadow-glow
Hero CTAs only
Radius
rounded-sm
8px
rounded-md
11px
rounded-lg
14px
rounded-xl
20px
rounded-2xl
25px
Motion
Hover each tile. Durations: 150ms for small feedback, 200ms default, 300ms for panels.
duration-150 · ease-calm
duration-200 · ease-calm
duration-300 · ease-calm
Components
Form controls
Labels sit above fields. Errors appear under the field with an icon, are linked to it for screen readers, and match the messages the server returns.
Text input
Used for appointment reminders.
Username must be 3 to 50 characters.
Password, select and textarea
8+ characters with at least one letter and one digit. Turn on Caps Lock to see the hint.
Select a blood group.
Checkbox
One day before the appointment.
Please confirm before dispensing.
Switch and segmented control
Notify the on-duty nurse when vitals cross thresholds.
Table density
Selected: comfortable
Components
Badges and status
Every legacy colour name still works and maps onto the seven semantic tones. StatusBadge decides colour and icon from the status text, so the same status looks the same on every screen.
Badge variants
All names used across the existing pages.
With dot and live pulse
With icon
Sizes
StatusBadge
Colour, icon and label together, never colour alone.
Components
Cards and KPIs
Cards are quiet by default: a hairline border and the lightest shadow. They lift only when they are clickable. KPI values count up once when data arrives and show an em dash when there is no data, never a placeholder number.
The numbers below are illustrative, for this page only.
Patients admitted
128
Billed this month
₹12,48,300
Bed occupancy
No data
Blood inventory
Units on hand by group
Standard card with header, content and footer.
Interactive card
Lifts on hover, focusable, opens on Enter
Use for module tiles and quick actions.
Glass with brand stripe
For floating panels over the aurora
Legacy props (tealStripe, glass, hoverLift) still work.
Components
Avatars and keyboard keys
Initials fall back automatically when there is no photo or it fails to load. Titles such as Dr. are skipped.
Avatar
Group
Kbd
Components
Feedback and states
Every screen has three honest states besides success: loading (skeletons shaped like the content), empty (what it means and what to do next) and error (the server message, a retry, and the request ID when there is one).
Alerts
Toasts
Announced politely to screen readers. Errors stay a little longer.
Spinner
For inline busy states only. Regions use skeletons.
Skeletons
Empty states
No patients admitted
Admitted patients appear here with their ward, bed and attending doctor.
No upcoming appointments
Book one from the Appointments tab.
Nothing expiring
No batches expire in the next 30 days.
Error states
The server ran into a problem
The billing service did not respond.
403 from the server
You do not have access to this
Your role cannot void bills.
Network failure
Cannot reach the server
Check your connection and try again.
Components
Data tables
Sticky header, quiet zebra rows, sortable columns where data is local, row action menus, a density toggle and pagination driven by the API meta object. On phones, tables either scroll sideways or switch to stacked cards.
Data-driven table
<Table columns data loading error emptyTitle />. Switch the state to preview each one. Rows are illustrative.
- Item ID
- INV-1042
- Item
- Nitrile examination gloves (M)
- In stock
- 1,240 pairs
- Status
- In stock
- Item ID
- INV-1043
- Item
- Sodium chloride 0.9%, 500 ml
- In stock
- 86 bags
- Status
- Low stock
- Item ID
- INV-1044
- Item
- Surgical masks, 3 ply
- In stock
- 3,600 pieces
- Status
- In stock
- Item ID
- INV-1045
- Item
- Disposable syringes, 5 ml
- In stock
- 0 pieces
- Status
- Out of stock
- Item ID
- INV-1046
- Item
- Pulse oximeter probes
- In stock
- 24 units
- Status
- In stock
Composition API
<Table><TableHeader><TableRow><TableHead>… for custom layouts.
Pagination
Collapses to previous, current and next on small screens.
Components
Overlays
Create and edit forms open in a side drawer. Short content uses a modal. Destructive actions go through a confirm dialog that collects a reason whenever the API needs one. All of them trap focus, close on Escape and return focus where it was.
Drawer with a form
Inline validation, then a server error mapped onto the matching field.
Fill the form and submit to see the sample server error land on the phone field. Swipe right on touch screens to close.
Modal and confirm
Action menu
Command palette
In the app shell, typing also queries GET /search and shows matching records.
Patterns
Light and dark, side by side
The same components rendered in a forced light and a forced dark scope. Both are tuned for WCAG AA contrast.
light scope
Ward 3, bed 12
General medicine
dark scope
Ward 3, bed 12
General medicine