TrackActive Me
Icon system · Tide · Concept
Icons,
redrawn
From four colour-coded illustration styles to one quiet line. Fewer drawings, one figure, one warm point — so the icons point at the body, not at themselves.
{{ heroGlyph }}
24 grid● warm point
One line1.5px stroke, round caps and joins, on a 24 grid. Scales to 48 for topics with the same weight.
One warm pointSunrise marks the single thing that matters: the sore spot, the reward, the focus. Never decoration.
One figureProgramme marks share the capsule figure from the exercise player. The body map uses a soft silhouette, in women's and men's versions.
Colour is stateRed, purple and yellow category codes retire. Blue means active, Sunrise means earned or focused.
01 · Glyphs · 24px
Out of
the bubble
The old sub-icons were white reversed out of blue discs, which made every glyph read as a button. Freed from the disc, they sit beside type at text weight and invert cleanly for the Deep Tide player.
{{ g.svg }}
{{ g.label }}
{{ g.svg }}
{{ g.label }}
02 · Helpful advice · 48px
Objects,
not scenes
Each topic reduces to one object you could hold — a leaf, a plaster, a chair. The yellow blobs become a single Sunrise point that lands where the advice does.
{{ t.svg }}
{{ t.label }}
03 · Recovery programmes · Body map
One body,
fourteen places
Fourteen cropped drawings become one soft silhouette with a breathing Sunrise point. People recognise where it hurts faster on a whole body than on a fragment. Women's and men's figures follow the profile setting, and the same body becomes the tap-to-select pain map in onboarding.
{{ r.svg }} {{ r.view }}
{{ r.label }}
04 · Programme marks
Seven marks,
not thirty
The capsule figure from the exercise player holds each pose; the working limbs light up in blue. Duration stops being a new drawing with a teal badge and becomes type — so one mark covers 10, 15, 30 and 45 minutes.
{{ p.svg }}
{{ p.label }} {{ p.family }}
Duration as type Strength full body — the old sheet needed four illustrations. Now it's one mark and a rolling number.
{{ d.svg }}
{{ d.min }} MIN
05 · Milestones · First Light
Earned
in warm light
Rewards are the only icons that glow. Earned milestones sit in the First Light gradient; the next one waits as a cool outline, so progress reads as the water warming.
{{ m.svg }}
{{ m.label }} {{ m.state }}
06 · Recovery measurement scale
Faces that
don't shout
The seven faces stay — they help people who think in feelings, not numbers. Drawn in line, they rest as quiet outlines and only fill when chosen. Tap one.
Compared with when you started How is your back today?
Much worse{{ faceWord }}Much better
07 · Before
The current set: four illustration styles, three category colours and a drawing per duration. Shown for comparison.
Previous icons: advice, sub-icons, scale Previous icons: flexibility and recovery Previous icons: strength
Concept redesign · not affiliated production work