Design System · v1.0
A care OS that feels warm on paper.
Tokens, components, and motion. Source Serif 4 stands in for Tiempos Headline; Geist stands in for National 2. All tokens declared in theme.json and rendered as --wp--preset--* custom properties site-wide.
01 · Foundations
Calm, confident, clinical without being cold.
Cardiogram threads intake, triage, routing, virtual visits, and ambient charting into a single graph. The system carries that voice into every pixel: serif weight, warm surfaces, and specific numbers over adjectives.
Principles
Calm over clever
Earned adjectives. Short sentences. Never an exclamation mark.
Specific numbers
48 min saved per shift. 870 protocols. $2.4M in year one.
Color does the work
Warm cream, deep navy, and yellow moments replace icon filler.
Serif carries weight
Editorial display for what matters; sans for the rest.
Voice
“The note writes itself. You sign it.”
Do — calm, active, earned
Copy patterns
Do
- Every heartbeat, answered.
- Answers before appointments.
- 48 min saved per shift.
Don’t
- Supercharge your workflow with AI!
- We help you do more with less.
- Revolutionary healthcare platform.
02 · Color
Warm paper, grounded navy, one spotlight.
Reds carry the emotion, navies the trust, yellow appears once per screen. Surfaces stay warm to keep the product from feeling cold and clinical.
Brand · warm
Reds bring urgency and heart. Red is primary; pink is a 1× accent.
Brand · cool
Navies ground the system. Deep navy is the only dark section color.
Spotlight
Yellow is used as a spotlight, not decoration. Expect it once per screen.
Surfaces
Paper is the default page. Cream for tonal shifts, white for cards.
Foreground
Three levels of emphasis on light. Two on dark.
Pairings
Section canvases — never gradients, never imagery-as-background.
Default · Paper
Every heartbeat, answered.
A short supporting sentence that lives beneath the display line.
Read more →
Section · Navy + Yellow
Every heartbeat, answered.
A short supporting sentence that lives beneath the display line.
Read more →
Spotlight · Yellow
Every heartbeat, answered.
A short supporting sentence that lives beneath the display line.
Read more →
Marquee · Red
Every heartbeat, answered.
A short supporting sentence that lives beneath the display line.
Read more →
03 · Type
Serif weight. Sans for the work. Mono for the whisper.
Source Serif 4 stands in for Tiempos Headline; Geist stands in for National 2. Both substitutions are declared in the README and swap cleanly if the licenses come through.
Families
One serif, one sans, one mono. Nothing more.
Display · editorial
Answers before appointments.
Source Serif 4
‘Source Serif 4’, Georgia, serif
UI · body · labels
48 min saved per shift, every shift.
Geist
Geist, system-ui, sans-serif
Eyebrows · data
MODULE · CARE ROUTER · v3.4
Geist Mono
‘Geist Mono’, ui-monospace
Scale
Clamp()-based display · fixed body and labels.
Every heartbeat, answered.
A complete care OS.
Shaped to your world.
Symptom Intelligence
Cardiogram threads intake, triage, and virtual visits into a single continuous clinical graph.
Calm, confident, clinical without being cold. Senior clinician, not marketing blurb.
MODULE · CARE ROUTER
04 · Buttons & inputs
Pills only. Never square.
One primary per screen. Ghost for counterweight. Dark for low-contrast moments. Yellow for spotlight CTAs. All live on radius 999, with a 1px lift on hover and a 3px arrow slide.
Variant family
Primary · Ghost · Dark · Accent · On-dark.
Sizes
SM · MD · LG — density-matched.
05 · Cards & badges
Flat on color. Elevated on hover.
Module cards carry a 24×4 accent stripe, 20px radius, and a 3px lift with a single shadow elevation. Stat cards invert on navy and spotlight yellow labels.
Module cards
Four accents rotate to mark unrelated modules.
Symptom Intelligence
Capture patient signals across every touchpoint.
Care Router
Send each patient to the right clinician, every time.
Virtual Visits
Chat, phone, video, and async in one surface.
Ambient Charting
Notes, orders, and codes written for you.
Stat cards
Dark surface, yellow label, serif number.
Result
$2.4M
saved in year one
Throughput
48 min
returned per shift
Library
870+
peer-reviewed protocols
Reach
40M
encounters analyzed
Badges & chips
Status pills, tags, and live-data chips.
New
Spotlight
● Live
Clinical
HIPAA
SOC 2
System nominal · 99.98%
Radii
6, 10, 14, 20, 24, 28, 999 — never 4, never square.
–r-xs
6px
–r-sm
10px
–r-md
14px
–r-lg
20px
–r-xl
24px
–r-xxl
28px
–r-pill
999px
Spacing · 8px base
Ten steps from 4 to 120 px.
–space-1
4px
–space-2
8px
–space-3
12px
–space-4
16px
–space-5
24px
–space-6
32px
–space-7
48px
–space-8
64px
–space-9
96px
–space-10
120px
06 · Navigation & layers
Sticky, blurred, 76px tall.
The site nav at the top of this page is the live nav. Below is the footer pattern: deep navy, yellow wordmark, mono columns. The actual footer renders at the bottom of every template.
Footer
Deep navy, yellow wordmark, mono columns.
07 · Iconography & imagery
One glyph. No emoji. Color does the work.
The Cardiogram heart is the only brand illustration. Marketing avoids heavy icon systems — color blocks, mono eyebrows, and type carry the semantics icons usually would.
Lockups
Glyph + wordmark · wordmark solo · glyph solo.
Cardiogram
Cardiogram
Imagery
Real photography only. Use placeholders until available.
Clinician · Portrait
Ambient · Exam room
Product · UI close-up
Patient · Candid
08 · Motion
200–350 ms. Ease-out with a hint of overshoot.
Hover lifts 1px on buttons, 3px on cards. Arrows slide 3px right. The fade-on-load utility is available for above-the-fold reveals.
Tokens
Durations and the brand easing curve.
–dur-fast
Hover color, subtle state
150ms
–dur-med
Transforms, fades
250ms
–dur-slow
Mega menus, reveals
450ms
–ease-out
Default curve — ease-out, slight overshoot
cubic-bezier(0.22, 1, 0.36, 1)
Shadows
Three presets — hover, modal, float. Shadows sit on hover only; rest sits flat on color blocks.
–shadow-hover
Card lift on hover
0 24px 60px -30px rgba(17,25,67,0.25)
–shadow-modal
Floating dialog
0 30px 60px -20px rgba(0,0,0,0.4)
–shadow-float
Toast / floating bar
0 28px 60px -30px rgba(17,25,67,0.2)