NovaMed / Design System

Clinical. Clean.
Trusted.

A modern UI design system built for medical SaaS platforms. Sky blue precision meets healthcare trust — optimized for daily clinical workflows.

Plus Jakarta Sans Sky Blue #0EA5E9 Light Default Dark/Light Mode WCAG AA
Color Tokens
Semantic color system — consistent across both light and dark modes.
Brand & Accent
accent
—
accent-hover
—
accent-dim
alpha
Semantic Colors
success
—
warning
—
danger
—
info
—
Surfaces
bg-base
page
bg-surface
cards
bg-elevated
raised
text-primary
headings
text-secondary
body
text-muted
hints
Typography
Plus Jakarta Sans for headings — Inter for body text.
display / 36px / 800
Patient Overview
h1 / 28px / 700
Medical Records
h2 / 22px / 700
Vital Signs
h3 / 18px / 600
Appointment Notes
body / 14px / 400
Patient presents with mild chest discomfort and shortness of breath. No prior cardiac history. Recommended ECG and blood panel.
small / 12px / 400
Last updated: Dr. Rivera · Cardiology · March 2025
caption / 11px mono
PATIENT_ID: NM-2025-00341 · VISIT: FOLLOW_UP
Buttons
All interactive button states and variants.
Primary Actions
Secondary & Ghost
Semantic
Status Badges
Patient and appointment status indicators.
Active Pending Critical Scheduled Discharged Recovered
Form Inputs
Clinical data entry components — precise, accessible.
👤
🩺
Notes are encrypted and stored per HIPAA guidelines.
💊
⚠ Possible interaction detected with Warfarin.
KPI Cards
Key metrics for clinical dashboard overview.
Total Patients 👥
2,847
↑ 12% vs last month
Appointments Today 📅
34
↑ 8% vs yesterday
Avg Wait Time ⏱
14m
↓ 3m vs target 10m
Revenue MTD 💰
$94.2k
↑ 18% vs last month
Patient Table
Sortable data table — patient roster with status and actions.
Patient Age Condition Status Last Visit Actions
Maria Santos
ID: NM-2025-001		 47 Cardiovascular Active Mar 18, 2025
James Thornton
ID: NM-2025-002		 63 Respiratory Critical Mar 20, 2025
Ana Villarreal
ID: NM-2025-003		 29 Orthopedic Scheduled Mar 15, 2025
Robert Kim
ID: NM-2025-004		 55 Neurological Pending Mar 10, 2025
Elena Marchetti
ID: NM-2025-005		 38 Cardiovascular Discharged Feb 28, 2025
Appointment Cards
Upcoming appointment widgets with physician details.
9:30
AM
Maria Santos
Cardiology Follow-up · Room 204
⏱ 45 min 📋 4th visit
ER
Dr. E. Rivera
Cardiology
Confirmed
11:00
AM
James Thornton
Pulmonology · ICU Floor 3
⏱ 60 min 🚨 Priority
ML
Dr. M. Lee
Pulmonology
Urgent
MedAssist AI
Clinical notes assistant — powered by AI for faster documentation.
🩺
MedAssist AI
Online — Clinical Mode
GPT-4.1
Hello Dr. Rivera. I've reviewed your morning schedule — 8 appointments, 2 follow-ups flagged for priority review. James Thornton (ICU) has new lab results available. Shall I prepare a summary?
MedAssist · 8:52 AM
Yes, summarize Thornton's overnight labs and flag any critical values.
Dr. Rivera · 8:54 AM
🚨 Critical: WBC 18.4 (↑ ref 4.5–11.0), CRP 142 mg/L (↑). Troponin normal. Chest X-ray shows increased infiltrates bilateral. Suggest pulmonology consult and broad-spectrum antibiotics review.
MedAssist · 8:54 AM
Theme Compare
Light mode default for clinical use — dark mode for low-light environments.
☀️ Light Mode (Default)
--bg-base: #F0F7FF
--accent: #0EA5E9
--text-primary: #0C1A2E
Font: Plus Jakarta Sans
🌙 Dark Mode
--bg-base: #040D18
--accent: #38BDF8
--text-primary: #E8F4FD
Font: Plus Jakarta Sans
CSS Token Export
Copy the complete design token set for implementation.
/* NovaMed Design System v1.0 — Light Theme */
/* Backgrounds */
--bg-base: #F0F7FF;
--bg-surface: #FFFFFF;
--bg-elevated: #E8F3FD;

/* Accent — Sky Blue */
--accent: #0EA5E9;
--accent-hover: #0284C7;
--accent-dim: rgba(14,165,233,0.10);

/* Semantic */
--success: #10B981;
--warning: #F59E0B;
--danger: #EF4444;

/* Typography */
--font-heading: 'Plus Jakarta Sans';
--font-body: 'Inter';
--font-mono: 'DM Mono';
NOVAMED DESIGN SYSTEM v1.0 · STUDIOFLOW.TOP · BUILT WITH ❤ BY APTOCODE