The design language for a calm, illustrated, plain-language health app built for older adults. Every screen in the redesign follows these tokens, components, and principles.
Foundation
Six principles that shape every screen
Warmth over clinical
Ivory background, sunrise hues, hand-illustrated scenes. Not a spreadsheet.
One thing per screen
The primary action is obvious, sized generously, and reachable with one thumb.
Big, readable type
17px body, 30px titles, 68px hero readings. No tiny legends, no dense rows.
Plain-language copy
"A little higher than usual" beats "132/84 (Stage 1)". Name what matters, skip jargon.
Show status, don't spell it
Color + icon + text together. Never color-only — dots, pills and words reinforce each other.
Explain before asking
Permission primers, numbered steps, and illustrated previews before system prompts.
Tokens
Color
Teal for brand and trust. Warm ivory for surfaces. Sage / peach / teal tints for card variants. Status colors are AA-contrast on their tinted backgrounds.
Brand
Brand
#0E6E7E
Brand deep
#0A5664
Brand soft
#2A8CAD
Accent
#DCEAEC
Surfaces
Background (ivory)
#FBF6EC
Surface
#FFFDF6
Sage
#EEF2E8
Peach
#FBEFE3
Teal tint
#E4EFF1
Status
OK
#1E6E3A
Warn
#8B4A00
Bad
#9B2214
Ink
Ink
#22241F
Ink 2
#55564E
Ink 3
#7A7B72
Line
#E8E2D4
Tokens
Typography
System font stack for familiar feel on iOS & Android. Titles are tight and bold; body is relaxed and roomy. Hero readings dominate their screens — the number is the screen.
132/84
Hero reading — 68px / 800 / -0.03em
Good morning, Margaret
Title — 30px / 800 / -0.015em
Take your morning blood pressure
Card title — 21px / 700
Sit down, feet flat, and rest your arm on the table. We'll walk you through it.
Body — 17px / 1.5 line-height
Wednesday, April 15
Eyebrow — 12px / 700 / uppercase
Library
Components
Every component is large, forgiving, and announces its state with more than just color.
Buttons — 58px minimum tap target
.bigbtn — primary.bigbtn.secondary
.bigbtn.ghost.bigbtn.danger
Cards — warm, padded, one task each
Morning blood pressure
Sit down, feet flat. We'll walk you through it.
.today-card
Visit with Dr. Patel
Today at 2:30 PM — in 4 hours.
.today-card.sage
1 new message
Nurse Karen sent you a note.
.today-card.peach
Status pills — color + icon + words
✓ In your usual range⚠ A little higher than usual⚑ Please call your nurse● Connected
Numbered steps
1
Sit with both feet flat
Rest your arm on a table at the level of your heart.
2
Press the Start button
On your iHealth cuff. We'll handle the rest.
✓
Camera works
Dr. Patel will be able to see you.
Live feedback
Looking for your cuff…
✓ Your cuff is ready to use.
Bluetooth is off
Form fields — generously sized
Tab bar — icon and text, always
🏠Today
❤Readings
💬Care team
👤Me
Language
Illustration
Scenes are grounded, warm, and quietly animated. A seated older adult with correct posture teaches more than a paragraph ever could. Backgrounds use ivory → sky washes; skin tones are warm; props show correct use.
Language
Voice & copy
We sound like a kind nurse, not a device manual. Use the user's name. Explain before asking. Name the body part. Never mention a BT MAC or a device model number as the primary label.
Do
"Take your morning blood pressure"
"Your blood pressure is slightly higher than your usual range this week."
"Tap below — it opens your iPhone's Bluetooth settings, then come right back."
Don't
"Measure SYS/DIA now"
"132/84 (Stage 1 HTN) — see clinician"
"Error: BT_UNAVAILABLE. Please check your settings."