Design System & Tokens

Extracted from the prototype's :root rules. Light-only — no dark-mode variant. A single typeface (Nunito) is used across all four artifacts.

Color tokens

Token	Value	Used for
--navy	#1B3A4B	Primary dark surface
--navy-deep	#0F2433	Top nav bg, headlines, primary buttons
--sky	#2E6B8A	Links, follow-up pills
--gold	#C9A227	Primary CTA, brand accent
--gold-bright	#D4AF37	Hero brand accent, highlights
--gold-light	#FBF5E0	AI/eyebrow chips, hover background
--mint	#4D8E7F	Well-visit, "signed", success
--mint-light	#E8F2EF	Mint pill background
--rose	#B0616F	Sick visits, allergy alerts, urgent
--rose-light	#FDE8EB	Rose pill background
--bg	#F6F3F0	Warm off-white page background
--card	#FFFFFF	Card surface
--text	#1E1A17	Body text
--muted	#8A7F76	Secondary text
--border	#E5DBD6	Subtle borders
--warm	#EAE3DF	Warm secondary surface
--radius	16px	Card radius
--radius-sm	10px	Small radius
--shadow	0 2px 12px rgba(27,58,75,0.08)	Default elevation
--shadow-lg	0 8px 32px rgba(27,58,75,0.12)	Modal / hero elevation

Typography

• Family: Nunito (Google Fonts), weights 300/400/600/700/800/900. Used everywhere.
• Headlines: weight 900, negative letter-spacing (-0.5 to -2.5px).
• Hero h1: 80px / 900 / -2.5px tracking.
• Section h2: 44px / 900 / -1.5px tracking.
• Body: 15–16px / 400 / line-height 1.55.
• Eyebrow: 11–13px / 800 / +1.5px tracking / uppercase / gold (--gold).

Status / tier color mapping

Pill / tag	Color token
Sick visit · Newborn · Urgent · Critical allergy	--rose
Well-visit · Signed · Success · Auto-filed	--mint
Follow-up · ADHD follow-up	--sky
Refill due · Refill request · Window-opening · Prospect / consult	--gold
New family · Up to date · Block / lunch	--muted / --warm
Schedule II / locked Rx	--rose over --gold-light

The same color system threads through:

• Calendar appointment blocks — full-bleed color background.
• Patient list status pills — small rounded pills.
• Family-divider rows in the patient list — neutral warm.
• Top-nav badges (Inbox 9, Prescriptions 2) — rounded pill, count inside.

Layout primitives

• Top nav — position: sticky; top: 0; navy background with backdrop blur.
• Three-column patient chart — left rail (180 px) · center scroll · right clinical sidebar (~280 px).
• Sticky bottom action bar — pinned in the chart view; Start visit · AI scribe (gold) is always within the user's thumb reach on iPad.
• Floating ⚡ FAB — bottom-right, opens the Ask AI panel; also bound to ⌘J / Ctrl+J.
• Universal ⌘K command palette — overlay with arrow-key + Enter selection.
• Detail drawer — slides in from the right; closed via Escape.
• Note editor overlay — full-screen #noteEditorOverlay with inline auto-save and section-tagged provenance.

Iconography

The prototype is emoji-as-icon (no SVG icon set). Examples:

• 🩺 patient · 👶 newborn · 💊 Rx · 📅 appointment · ✉️ inbox · 📎 docs
• ⚡ AI · 🎙️ scribe · ⚙️ auto-pulled · ✍ Yogini · ✓ signed
• 🏠 home visit · 📞 call · 📷 photo upload

For production, we'll replace these with a consistent SVG set (likely Phosphor or Lucide) keyed to the same tokens.

Animations

• Toast slide-in / fade-out — 250 ms.
• Detail drawer slide-in from right — 200 ms ease-out.
• Recording-banner pulse on the dot — 1.5 s loop.
• AI-panel typing dots — 3 staggered keyframe pulses.
• Calendar appointment hover — translate-y(-1px) + shadow-lg.

Mobile constraints (/onboarding/)

The parent flow lives in a CSS iPhone bezel — iframe-style framed canvas. Only renders correctly at narrow viewport. Step indicator is an 8-pip dot strip at the top. Bottom action button is full-width within the frame.

Notes for migration to our design system

• The branding palette is navy + gold + warm off-white — close to but distinct from our existing branding doc. Reconcile against Branding before committing to v1.
• No dark mode in this prototype. If we add dark mode in v1, derive a parallel token set; do not invert.
• The light pill backgrounds (--gold-light, --mint-light, --rose-light) are essential — without them the bright --rose and --gold pills become accessibility hazards on white cards.