Large padding
Used for how-it-works steps and the final call to action.
Design reference
Tokens, logo and components.
Everything below is rendered from the real stylesheet and components, so what you see here is what ships. Use the toggle to check both themes. Source of truth: design/README.md and web/src/app/globals.css.
Theme
Colour
Warm paper, deep harbor, a single rose accent. Contrast figures measured 2026-11-01 against WCAG 2.x relative luminance.
Surfaces
paper
#f8f3ec / #0f1719
Page background
paper-deep
#efe6d9 / #0a1113
Recessed areas
surface
#fffdf9 / #172226
Cards
surface-raised
#ffffff / #1d2a2f
Inputs, raised rows
line
#e2d8c9 / #2a383e
Hairlines
line-strong
#c9bca8 / #3b4c53
Input borders
Ink
ink
#172026 / #ede7dd
Text
14.97:1 on paper (light)
ink-soft
#3f4a52 / #c9c2b6
Body text on cards
ink-muted
#6b747b / #9aa3a8
Secondary text
4.31:1 light, 7.07:1 dark
ink-faint
#98a0a6 / #6f7a80
Placeholders, decorative only
Brand
harbor
#16465a / #7fb3c9
Primary actions, symbol line
9.24:1 on paper; 11.04:1 on dark
harbor-deep
#0e2f3d / #a9d0df
Hover
harbor-soft
#d6e4ea / #1b3642
Tints, info banner
rose
#d45d6a / #e8858f
The companion dot, display accents
3.41:1 on paper: graphics and large text only
rose-deep
#b4404e / #f2a6ad
Rose text and rose buttons
5.03:1 on paper; white on rose-deep 5.46:1
rose-soft
#f6dcdf / #3d2328
Tints, selection
Status and focus
sage
#5f8f73 / #86b898
Taken, success
3.36:1: icons and dots, never text alone
sage-soft
#dcebe1 / #1f3328
Success badge background
ink on sage-soft 13:1
amber
#c98a2e / #e0a85a
Skipped, caution
2.66:1: icons and dots, never text alone
amber-soft
#f6e7cc / #3a2d17
Caution badge background
danger
#b23a3a / #e07a7a
Errors, destructive
danger-soft
#f5d9d6 / #3d1f1f
Error banner background
focus
#2f7fa3 / #8cc5de
Focus ring (3 px, offset 3 px)
Status colours are never used for text on their own
Sage and amber colour icons, dots and soft badge backgrounds. Badge text is always ink.
Type
Fraunces (variable: opsz, SOFT) for display at opsz 144, SOFT 50, weight 500 to 600, letter spacing -0.015 em. Manrope for text and UI.
Display 1
Your medicines, taken the way they were prescribed.
Display 2
Small, steady, and on your side.
Heading
Reminders that respect your clock
Subheading
Three screens, no clutter.
Body 1 rem / 1.6
Cardiac Companion reminds you at the times you chose, keeps a clear record of what you took, and shares it with your care team only when you say so. Manrope 400, with ss01 and cv11 enabled.
UI 0.95 rem
Semibold labelMuted helper textEyebrowmono 14px
Spacing and radii
Spacing scale 4 to 96 px. Sections use 96 px vertical rhythm on desktop and 64 px on phones.
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- 96
sm, 8 px
inputs
md, 14 px
cards, rows
lg, 24 px
panels, phone frame
pill
buttons, badges
Shadows and motion
Shadows are soft and warm. Motion uses one ease-out curve, cubic-bezier(0.22, 1, 0.36, 1), and every animation stops under prefers-reduced-motion.
shadow-soft
cards, primary buttons
shadow-float
floating nav, phone frame, sheets
fast
160 ms
hover and press
base
280 ms
state changes, accordion
slow
640 ms
entrances (cc-rise)
drift
18 s to 24 s
atmosphere, stops under reduced motion
cc-rise entrance
cc-pulse-ring, for a due reminder
Logo
An open heart drawn as one calm line, completed by a companion dot. The line is harbor, the dot is rose.
On light
On dark
Mono
Inherits currentColor. Use when only one colour is available.
Clear space
Keep at least half the symbol height free on every side.
Wordmark in the UI
The SVG wordmark is outlined Fraunces at weight 560, opsz 72, SOFT 60. In navigation and footers the same settings are applied to live text so it stays selectable:
Cardiac Companion
Do not
- Do not rotate the symbol or close the gap between the line and the dot.
- Do not outline the symbol, add gradients, or add a pulse line.
- Do not recolour the dot; it is rose in every variant except mono.
- Do not place the symbol smaller than 16 px or the lockup narrower than 120 px.
- Do not set the wordmark in another typeface or change its letter spacing.
- Do not crowd the mark: keep half its height clear on every side.
Components
Shared primitives from web/src/components/ui, rendered live. The phone mock is the same component used on the landing page.
Buttons
Fields
We will only email you about Cardiac Companion.
Codes are six characters.
Badges
TakenSkippedNext reminder 21:00SharedRevokedSynthetic data
Banners
Synthetic data only
Do not enter real patient information. This preview runs on synthetic records.
Your address is confirmed.
Clock change this weekend
Reminders will follow your local time automatically.
Could not save
We could not save your address right now. Nothing was stored. Please try again in a minute.
Cards
Default card
Surface background, hairline border, soft shadow, 24 px radius.
Phone mock
Tuesday 3 March
Today
Next reminder 21:00
- Metoprolol 25 mg8:00 taken at 8:04Undo
- Apixaban 5 mg8:00 due nowTakenSkip
- Atorvastatin 20 mg21:00 this evening21:00
This week
Learn
Keep one current list of your medicinesSource: MedlinePlus, accessed 1 Nov 2026
Shared with Riverbend Cardiology
CSS only: 24 px radius, thin line border, warm float shadow, and a hover tilt within two degrees that is skipped under reduced motion. Every name and dose is synthetic.