A calm, accessible foundation for frail care.
Tokens, typography, and components that bring trust, clarity, and emotional reassurance to every screen — for caregivers, nurses, doctors, and families.
Foundations
Design tokens
Every color, font, radius, and shadow in the platform is a semantic token defined in src/styles.css. Components inherit them automatically — never use raw hex in feature code.
Color palette
Brand blues, healthcare accents, and semantic status tokens.
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600
brand-700
brand-800
brand-900
Success
Warning
Destructive
Info
Accent
Background
Surface 1
Surface 2
Surface 3
Muted
Brand gradients
Signature MedGuardian gradients. Use the cool brand gradient for hero/marketing surfaces; the warm gradient for alerts, urgency, and accent moments.
Cool · brand-gradient
linear-gradient(135deg, brand-900 → brand-700 → brand-500)
Utility: bg-brand-gradient
Warm · warm-gradient
linear-gradient(90deg, #F62938 → #F7A132)
Utility: bg-warm-gradient
Soft surface
warm-gradient-soft
For alert banners, warning cards, and gentle highlight surfaces.
Gradient text
Always there. Always watching.
Utility: text-warm-gradient
Typography
Comfortaa for headings, Inter for body and UI.
Compassionate care, simplified
Bringing peace of mind to every family
Coordinating caregivers with clarity
Medication schedules that just work
Patient vitals at a glance
Daily activity timeline
Body 1 — Generous reading size for primary descriptive text.
Body 2 — Comfortable for paragraphs in cards and sections.
Body 3 — The default body size used across most UI surfaces.
Body 4 — Supporting copy, secondary information, captions in dense layouts.
Label / Caption
Spacing
4px base grid with semantic tokens. Consistent spacing creates calm, breathable layouts.
p-4, gap-6) in components.4px · space-1
Micro gaps, icon padding
8px · space-2
Tight gaps, badge padding
12px · space-3
Small gaps, compact rows
16px · space-4
Default gaps, card content
20px · space-5
Medium gaps, form groups
24px · space-6
Section inner gaps
32px · space-8
Card-to-card gaps
40px · space-10
Page section gaps
48px · space-12
Large section gaps
64px · space-16
Hero spacing
80px · space-20
Major section breaks
Page gutter
Horizontal page padding — px-6 (24px)
Section gap
Vertical gap between page sections — space-y-10 (40px)
Card padding
Internal card padding — p-6 (24px)
Inline gap
Gap between buttons, badges, chips — gap-2 or gap-3 (8–12px)
Card header (gap-2 = 8px)
Card title
Card description line
Content row (gap-4 = 16px)
Action bar (gap-3 = 12px)
Buttons
Soft, accessible, 44px minimum touch target.
Form controls
Reassuring, large, easy to read.
Please enter a valid email address.
Family updates
Share progress weekly.
Critical alerts only
Mute non-urgent notifications.
Data display
Stat cards, badges, and care-focused layouts.
Active patients
248
+12 this week
Scheduled visits
36
Today
Medications due
14
Next hour
Open alerts
2
-3 vs yesterday
82 · Room 12
09:42
Morning medication administered
08:15
Vitals logged by Nurse Adeyemi
07:30
Breakfast — full portion
Feedback & states
Alerts, loading skeletons, and empty states.
Shift handover ready
All medications administered
Blood pressure trending high
Critical alert
No active alerts
When something needs attention, it'll show up here. Take a breath — everything's calm.
Navigation
Calm wayfinding patterns.