Design system
Every primitive, every state. Scroll to watch the large title collapse into the bar. The question mark, top right, is on every screen and is always one tap from red-flag guidance.
One accent, doing one job at a time.
Accent
#17B1DD
Accent dark
#0E89B5
Accent on light
#0a6f94
Ink
#0B0B0D
Body
#43454D
#25D366
Surface
#FFFFFF
Sunken
#F4F4F1
Cool
#F4F6F7
Line
#E7E7E2
Accent on light (#0a6f94) is the only accent permitted for text on white. #17B1DD is a fill colour and fails contrast as text.
Anton for headings. Montserrat for everything else.
Hero, Anton 56px, 0.92
Twelve weeks
Large title, Anton 34px, 0.96
Start here
Heading, Anton 22px
Weeks one and two
Eyebrow, Montserrat 700, 12.5px, 0.18em
Prescribed for you
Body, Montserrat 500, 16px
Two short lines sit under each video. What it is for, and the two ways people get it wrong.
Sub, Montserrat 500, 14px
Opens after your week 2 call.
Label, Montserrat 600, 13px
Neck and jaw
Primary, three sizes
Secondary
Quiet
Disabled
Loading, width is held so nothing shifts
Block, and a live loading transition
Press and hold any button. They scale to 0.97 and spring back.
Stage 0
Five videos. Watch them in order, once.
Cool surface
For a card that needs to sit apart from the others without using the accent to do it.
Flat
No shadow. For a card inside a card, where a second elevation would read as a mistake.
Pressable, the whole card is the target
Loading, a skeleton that holds the shape
Empty
Nothing here yet.
Your first module opens after your assessment.
Error, inline and specific
That did not save.
You are offline. It will save by itself when you are back.
The 0 to 10 selector and the point selectors.
Numeric, 0 to 10, nothing chosen
Numeric, chosen
Numeric, disabled
Four points
Four points with hints, one chosen
Two points
Options, disabled
One question per screen. Auto-advances on tap. No submit button.
1/2
Answering yes reveals a second question. The bar above adjusts.
Saved on every tap, not at the end
{}Bottom sheet, grabber, drag it down to close.
Drag from the grabber or the title row. Past about a quarter of the way down, or a quick flick, and it closes. Escape and the backdrop close it too.
Three tabs. Nothing else.
Fixed to the bottom of this page. Currently on Today. The pill slides on a spring.