TrackActive MeDesign system · Tide · Concept
Design
system
Tokens and components behind the 2026 concept, rebuilt on the Tide direction. One blue in eleven depths, Archivo from narrow to wide, Instrument Serif for human moments, and Sunrise kept to small touch points.
Icon system Open prototype arrow_forward
01
One job per screen
A single hero action. Everything else steps down a level in size, weight or surface.
02
Colour means something
Blue is the brand: the sky at the top of every screen. Bright blue with ink text is the one action per screen; Sunrise is a small touch point. Deep Tide means focus. Amber and red are clinical status only.
03
Motion explains
Six named motions: line draw, breathing glow, photo push, shimmer, rolling numbers, tick with ripple. Nothing moves just to be noticed.
04
Respond, visibly
Every check-in or rating changes something, and we show what changed.
Typography
Archivo, one family across its width axis: narrow and heavy (wdth 62–70, 800) for numbers and confident headlines; normal width for UI and clinical text; wide caps (wdth 110) for eyebrows. Instrument Serif italic, sparingly, for warm human lines.
Display · 80 narrowSession done.
Title · 34/700Your plan
Human · serif 36Morning, Ann
Heading · 20/600How did that feel?
Body L · 17/24Answer a few questions and we'll build your plan.
Body · 15/22Most people see a clear improvement within 6 weeks.
Eyebrow · 11 wideToday · Strengthen phase
Data · 60 tabular7 → 3
Colour · Tide ramp
#009DD1 sits at 500. It only reaches 3.2:1 with white, so it marks, draws and fills. Links and selection use 700 (6.4:1). The primary action is a bright blue pill #1AB0EA with ink text #041F2F (6.8:1), hover #5FC8F0. The same pill works on Deep Tide. Sunrise is touch points only: play marks inside buttons and the player's play/pause. Never a button fill.
50
100
200
300
400
500
600
Act700
800
900
950
18.4:1
Ink
#0A1218
Ink 2
#33424D
Cloud
#F3F7F9
Touch
Sunrise
#FF9E6D
check_circleConfirmed#00658C / #EEF9FD
pan_toolCaution#8F5300 / #FBEFD9
errorCritical#B3261E / #FBE8E6
Green retires: confirmations use the blue ramp, so the clinical palette is just amber and red, and both stay rare.
Colour hierarchy · who gets to be loud
Two modes, each with one dominant field, one structural colour and one accent at a fixed share. Day is the default. Deep Tide takes over only when the person needs to focus or it's late.
Day · Blue skyToday, Plan, My back, Progress, detail
52 White
Cards and reading surfaces 38 Blue
Sky behind the header, charts, the primary action 8 Ink
Text, icon chips inside actions 2 Sunrise
Touch points only: play marks, player play/pause
Focus · Deep TideExercise player, evening Today
72 Navy
The whole field 14 Depth
Raised surfaces, photo fades 11 Blue
The light: action, active tab, glow 3 Sunrise
Touch points only
Rewards keep First Light, the only warm gradient. The bright blue pill with ink text always means "do this"; one per screen. Sunrise is never a button fill.
Atmosphere · four gradients, one per mood
Atmosphere sits underneath; controls on top stay flat and solid. Each gradient has a job, so the app's mood tells you where you are.
Morning
Water
Arrive · welcome, onboarding
Deep
Tide
Focus · exercise player, evenings
First
Light
Achieve · session done, milestones
Blue
sky
Everyday · Today, Plan, Progress, My back
Hero cards · one per screen
Session card · photo Core &
glutes Start sessionplay_arrow
Milestone card · First Light
Week
three. Most people stop here. You kept going.
9sessions 2h06moving 7→3pain
Confirm · tick with ripple
Logged. One draw, one ripple, then still. Used for check-ins, saved feedback and session completion.
Spacing · 4pt base
4
8
12
16
20 margin
24
28 section
40
56 button
Mobile grid: 20pt margins and a single column. 28pt between sections, 12–18pt within. Tap targets are at least 44pt, and 56pt for primary actions and steppers.
Radius · surface · motion
Flat · 14–18Notes, options
Card · 24Hairline only
Hero · 28One per screen
State change150–200ms · ease-out
Screen push / sheet360–420ms · (.2,.8,.2,1)
Confirmation pop450ms · overshoot 1.08
Figure demo1.25s · (.65,0,.35,1) loop
Buttons · hover any default
DefaultHoverPressedDisabledLoading Primary Secondary Text On photo / Deep Tide
Start sessionplay_arrow Make it easier replay pause
Destructive Only used for red-flag routes, never for routine actions.
Text input
Choice rows · rating
Too easyDefault
About rightHover
ChallengingSelectedcheck
PainfulDisabled
Selection is shown by a 2pt ring, a coloured face, a check and a heavier weight, so it never relies on colour alone.
Pain scale
remove
4Moderate
add
On your mind, but you can do most things.
A 0–10 NRS that meets the 56pt tap target. Steppers adjust the value, the rising track shows it, and every step has a plain-language description.
Navigation · tabs
todayToday
event_notePlan
insightsProgress
accessibility_newMy back
4 weeksAll
M13
W15
F17
S18
Day states: done (filled dot), today (inverted), planned (ring), rest (none).
Progress indicators
Settle ✓
Strengthen
Return
Goal progress60%
7
Rep ringPlayer only. The count is readable from 2m away.
Status · feedback
checkLogged: same as yesterday
auto_awesomePlan updated: bridges 12 → 14 reps
tuneMade gentler for today
emergency_homeGet checked the same day
cloud_offYou're offline. Sessions still work.Retry
Exercise components · illustration
One figure system: capsule limbs, a round head and a floor line, shared with the programme icons. Working muscles are brand blue. It loops on detail and drives the player in real time.
04 · DefaultGlute bridge2 × 12 · hold 3s chevron_right
check 03 · CompletedBird-dog2 × 8 each side
Loading
Your chart starts tomorrow
Check in for two days and you'll see how your pain is changing.
Check in now Empty state