One grid, three radii, seven type roles, one card anatomy, three chart heights. Every component below is drawn with the same stylesheet as the screens canvas, in light and dark, and in the four layers of the pixel-grid method: grid, padding and areas, structure, type.
Intro film
Motion
Seventy seconds of the app moving: the mark resolves, then Train, logging a session,
Apple Health and WHOOP, a year of training on Progress, a grid of the charts themselves, and the
mark again. The screens are not mock-ups of the artboards — they are the artboards, inlined into
the composition and rendered, and every chart in the grid is drawn by the same builder the
library uses, so neither can drift from what you see below. Each section gets one statement
beside the screen rather than before it, and its own camera move: a pull-out from a session row,
a push in to the effort card, a plain travel down the providers screen, a slow creep into the
heatmap. Each move aims itself by measuring the live layout, so a changed artboard cannot
mis-aim it. The track is Trip-Hop | At peace by TurtleBeats under the Pixabay licence;
its tempo was measured off the waveform at 92.3 BPM, and the film is cut to exactly
twenty-seven of its bars with a scene change every five, so every cut lands on a downbeat. Both
films start muted, since no browser autoplays sound; use the controls to hear it.
16:9 · 70.2 s · the wide cut carries a caption beside each screen,
one claim and one qualifier, beside the screen they describe.
9:16 · 70.2 s · the lettering sits above the device rather than
beside it, and the same four camera moves run underneath.
01
Grid
Base 8, half step 4. Allowed spacing: 4 · 8 · 16 · 24 · 32. Screen inset 16, card gap 16, section gap 24, inside a card padding 16 and gap 8, label-to-value 4. Row gap 12 is the one carried-over exception, because it is the iOS list-row gap.
4
8
16
24
32
Where
Value
Screen inset
16
Card stack gap
16
Section gap
24
Inside a card
padding 16 · gap 8 · label-to-value 4
Row
min 44 · icon 28 · gap 12
Bottom clearance
96 above the tab bar · 120 above a pinned action
02
Radius, border, elevation
Cards carry a 0.5 hairline and no shadow. Tiles are a fill with no border. Controls are capsules. Native chrome keeps its iOS geometry.
16 · card, list group, sheet
12 · tile, receipt, field, chart frame
capsule · every control
2 · indicator
03
Type
SF Pro, Light / Regular / Medium, with SF Rounded for numerals, on Apple's Dynamic Type sizes. Seven roles, five sizes, three weights. At most three roles per card. No bold, no semibold; emphasis is weight 500 or the secondary colour, never a size.
SF ProPrimary
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? !
Every role but one. Light, Regular and Medium; no bold, no semibold.
SF Pro RoundedNumerals
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? !
The numeral role only — the one hero number on a card, tabular so digits do not shift.
largeTitleProgress34 / 41 · 500 · navigation large title
numeral3h 20m34 / 41 tabular · SF Rounded · 300 · the one hero number
Neutral first. One accent for controls. A status triad. One chart hue per screen, Apple system cyan, and every mark is a gradient inside that hue: bars run deep to light, areas fade to nothing, the highlighted quadrant is a diagonal wash, the heatmap steps are the hue at 30 · 50 · 75 · 100. The eyebrow of a chart card takes the hue; everything else on the card stays neutral.
canvas#F3F6FB · #0B1020
surface#FFFFFF · #151B2B
elevated#E7ECF5 · #20283A
ink#111114 · #F5F5F7
secondary#5B616B · #A2A6AE
accent#0066CC · #2B93FF · every control
success#26714C · #68D5A0
warning#8A5B0A · #F0BD62
danger#B42318 · #FF8A80
Chart hue and its gradients
chart#32ADE6 · #64D2FF · system cyan · every mark
chart deep#1E8FD6 · #32ADE6 · gradient end · bar top, line end
areachart 38% → 0 down
barchart deep → chart down
zonechart 16% → 4% diagonal
05
The card
Every card on every screen has the same anatomy, in this order: eyebrow (label) · title · context line (caption) · body · caption · action. Cards differ only in what fills the body. Progress, before and after, is on the screens canvas.
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Last 12 weeksSessions per week2 so far this week · past weeks median 3
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
Next stepOne more session keeps the rhythm2 of 3 this week · on pace
Thursday is usually open
Open Train
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Last 12 weeksSessions per week2 so far this week · past weeks median 3
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
Next stepOne more session keeps the rhythm2 of 3 this week · on pace
Thursday is usually open
Open Train
06
App icon
A belt on a dark ground, in the iOS superellipse. The neutral icon carries a white band; a recorded belt swaps the band for the belt colour and shows its stripes on the rank patch, the same geometry as the belt rail. Never a photograph, never text, never the accent. Choosing an icon never changes the rank.
Black Belt (neutral)
White belt
Blue belt
Purple belt
Brown belt
Black belt
Sizes
120 pt
76 pt
60 pt
40 pt
29 pt
07
Components, layered
Four views of each component: the 8-point grid it snaps to, its padding and areas (tinted), its structure, and its type roles on the dark ground.
Component
Card
01 Grid
Last 12 weeksSessions per week2 so far this week · median 3
Full width minus 32 inset; height snaps to 8.
02 Padding & areas
Last 12 weeksSessions per week2 so far this week · median 3
16 all sides; header, body, footer stacked with gap 8.
03 Structure
Last 12 weeksSessions per week2 so far this week · median 3
Hairline, radius 16, surface fill. No shadow, stripe, gradient, or emoji.
04 Type
Last 12 weeksSessions per week2 so far this week · median 3
label · title · caption
Component
Metric tile
01 Grid
Sessions32 imported
Mat time3h 20mof 4h target
Two per row, gap 8, min width 166.
02 Padding & areas
Sessions32 imported
Mat time3h 20mof 4h target
12 all sides; value above label, gap 4.
03 Structure
Sessions32 imported
Mat time3h 20mof 4h target
Elevated fill, radius 12, no border.
04 Type
Sessions32 imported
Mat time3h 20mof 4h target
label · title (tabular) · caption
Component
Row
01 Grid
Gi · FundamentalsToday · 72 min · Hard
Open matThu · 55 min · Moderate
Min height 44; 56 with two lines.
02 Padding & areas
Gi · FundamentalsToday · 72 min · Hard
Open matThu · 55 min · Moderate
16 horizontal, 12 vertical; icon 28, text, trailing, gap 12.
03 Structure
Gi · FundamentalsToday · 72 min · Hard
Open matThu · 55 min · Moderate
Rows in a card with padding 0 and a hairline between; chevron 16 in secondary.
04 Type
Gi · FundamentalsToday · 72 min · Hard
Open matThu · 55 min · Moderate
headline · caption
Component
Session row
01 Grid
Gi · FundamentalsSat 10:42 · 72 min · Alliance
No-GiFri 19:05 · 55 min · Alliance · to confirm
DrillingTue 18:30 · 45 min · Home
Height 64 in a native list group, one group per week.
02 Padding & areas
Gi · FundamentalsSat 10:42 · 72 min · Alliance
No-GiFri 19:05 · 55 min · Alliance · to confirm
DrillingTue 18:30 · 45 min · Home
16 horizontal, 10 vertical; map thumbnail 44, text, five effort dots, chevron 16, gap 12.
03 Structure
Gi · FundamentalsSat 10:42 · 72 min · Alliance
No-GiFri 19:05 · 55 min · Alliance · to confirm
DrillingTue 18:30 · 45 min · Home
Map thumbnail with the pin in accent, or the type icon in a tile when no place is known. Imported sessions add the WHOOP symbol and "to confirm".
04 Type
Gi · FundamentalsSat 10:42 · 72 min · Alliance
No-GiFri 19:05 · 55 min · Alliance · to confirm
DrillingTue 18:30 · 45 min · Home
headline · caption
Component
Week header
01 Grid
Aug 25 – 31 · goal met3h 15m
Open matSat 09:00 · 90 min · Gracie Barra
Height 32 above each week group; native section-header style.
02 Padding & areas
Aug 25 – 31 · goal met3h 15m
Open matSat 09:00 · 90 min · Gracie Barra
16 horizontal; label left, total right, verdict symbol 16.
03 Structure
Aug 25 – 31 · goal met3h 15m
Open matSat 09:00 · 90 min · Gracie Barra
Uppercase label in secondary; check for goal met, cross for missed, nothing for the current week.
04 Type
Aug 25 – 31 · goal met3h 15m
Open matSat 09:00 · 90 min · Gracie Barra
label
Component
Belt scrubber
01 Grid
WhiteBluePurpleBrownBlack
Capsule track 44 high with five stops and a 36 knob; the rank patch 88 × 32 below.
02 Padding & areas
WhiteBluePurpleBrownBlack
Ground is the belt colour; drag the knob to change belt, tap the patch to add a stripe.
03 Structure
WhiteBluePurpleBrownBlack
The one belt control: onboarding, Edit profile (sheet) and Add promotion. Replaces the belt picker rails and the stripe stepper.
04 Type
WhiteBluePurpleBrownBlack
largeTitle (rank name) · caption
Component
Primary button
01 Grid
Log session
Open Train
Weekly recap
Height 48, full width inside the inset; one per screen.
02 Padding & areas
Log session
Open Train
Weekly recap
24 horizontal; icon 22 + gap 8 + label.
03 Structure
Log session
Open Train
Weekly recap
Capsule, accent fill. Secondary is bordered 48; tertiary is a 44-tall link.
Manual ratings · 42 sessionsEffort spreadMedian: Hard
Plot height 44 / 132 / 220.
02 Padding & areas
Manual ratings · 42 sessionsEffort spreadMedian: Hard
Card padding 16; title, context, plot, caption, gap 8.
03 Structure
Manual ratings · 42 sessionsEffort spreadMedian: Hard
One mark hue; axis caption 11 in secondary; hairline gridlines.
04 Type
Manual ratings · 42 sessionsEffort spreadMedian: Hard
label · title · caption
Component
Cumulative chart
01 Grid
All time
142 sessionsSince Jan 2023 · 3.2 a month
Full card width; plot 132; header toggle 3 × 36 by 32.
02 Padding & areas
All time
142 sessionsSince Jan 2023 · 3.2 a month
Card padding 16; header row with the toggle trailing; plot; no caption.
03 Structure
All time
142 sessionsSince Jan 2023 · 3.2 a month
The one card with a header control: a segmented icon toggle (sessions · hours · days). Area and line in the screen hue, open end point, three dashed gridlines.
04 Type
All time
142 sessionsSince Jan 2023 · 3.2 a month
label · title · caption
Component
Quadrant chart
01 Grid
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
Full card width; plot 220 so the quadrants stay near square.
02 Padding & areas
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
Card padding 16; header with two toggles trailing (metric · window); plot; one caption.
03 Structure
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
One dot per session: x session hours, y the morning reading. Median lines dashed; the quadrant that matters tinted in the screen hue with its dots labelled by date; corner labels in the label role.
04 Type
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
label · title · caption
Component
Week map
01 Grid
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GI
–
NG
–
Rest
OM
–
GI
–
GI
–
Rest
OM
Rest
–
DR
GI
–
Rest
–
Rest
GI
–
NG
–
Rest
OM
Card padding 16; weekday header, then one row per week, last 4 weeks.
03 Structure
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GI
–
NG
–
Rest
OM
–
GI
–
GI
–
Rest
OM
Rest
–
DR
GI
–
Rest
–
Rest
GI
–
NG
–
Rest
OM
Logged day: elevated cell with the session type (GI · NG · OM · DR). Missed: dashed hairline cell. Rest day: text only. Future: blank. Today outlined in ink.
04 Type
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GI
–
NG
–
Rest
OM
–
GI
–
GI
–
Rest
OM
Rest
–
DR
GI
–
Rest
–
Rest
GI
–
NG
–
Rest
OM
label · title · caption
Component
Map
01 Grid
PlaceAlliance · San DiegoMain mats · 2.4 km from home
Full card width; tile 132 high, radius 12.
02 Padding & areas
PlaceAlliance · San DiegoMain mats · 2.4 km from home
Card padding 16; header, then the map tile; no caption.
03 Structure
PlaceAlliance · San DiegoMain mats · 2.4 km from home
A map snapshot in neutral: elevated ground, streets in surface, parks in success at 18%, the pin in accent with a soft halo. Title is the place, context the room and distance.
04 Type
PlaceAlliance · San DiegoMain mats · 2.4 km from home
label · title · caption
Component
Comparison bars
01 Grid
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
Full card width; two tracks 6 high per row, gap 4.
02 Padding & areas
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
Card padding 16; header, then one row per measure: label, this value, usual value, two tracks.
03 Structure
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
This session on top in the family hue, the 90-day median below at 40%. Title states the difference in words.
04 Type
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
label · caption (tabular)
Component
Inline callout
01 Grid
Last 12 weeksSessions per weekTouching Aug 3 – 9
Capsule 22 high, radius 11, above the plot; rule from the capsule to the mark.
02 Padding & areas
Last 12 weeksSessions per weekTouching Aug 3 – 9
Capsule padding 8 horizontal; sits inside the plot's top 8 so nothing grows.
03 Structure
Last 12 weeksSessions per weekTouching Aug 3 – 9
On touch: the touched mark at full hue, other marks dim to 35%, a dashed rule (3 3) in secondary from the capsule to the mark, the capsule in ink with canvas text. Lift to dismiss. Never together with a fixed inspector.
04 Type
Last 12 weeksSessions per weekTouching Aug 3 – 9
label · title · caption; capsule 11 / 500
Component
Heart-rate zones
01 Grid
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
Five rows, 28 high, gap 8; label column 96, track fills, value 48.
02 Padding & areas
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
Card padding 16; header, five zone rows, one caption.
03 Structure
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
Apple Fitness pattern: zone name and bpm range left, a 12 pt track filled proportionally to time in the zone colour (grey, cyan, green, orange, red), minutes right. Title names the zone with the most time.
04 Type
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
label · title · caption
Component
Notification
01 Grid
Training tonightin 1h
Alliance · 6:00 PM · Gi
System banner; app icon 38; title row, body at most two lines.
02 Padding & areas
Training tonightin 1h
Alliance · 6:00 PM · Gi
System padding.
03 Structure
Training tonightin 1h
Alliance · 6:00 PM · Gi
Ten templates on the canvas: training tonight, streak at risk, welcome back, Apple Health imported, camp countdown, backup done, trial ending, registration deadline, competition tomorrow, backup did not finish. Label + value copy, a time, no emoji, no sentence the app cannot back. Every notification deep-links to the screen it names.
04 Type
Training tonightin 1h
Alliance · 6:00 PM · Gi
title 15 / 500 · body 15 / 400 · time 13
Component
Lock Screen widgets
01 Grid
2/3
3h 19mThis week · 2 of 3 sessions
Circular: the weekly ring; three rectangular options (this week, heatmap 12 weeks, cumulative all time); inline: ring glyph + text.
02 Padding & areas
2/3
3h 19mThis week · 2 of 3 sessions
System.
03 Structure
2/3
3h 19mThis week · 2 of 3 sessions
White on the system material at four opacity steps; no accent, no hue, because the Lock Screen renders monochrome. The user picks one rectangular option: this week (mat time, caption, seven-day strip), heatmap (12 weeks × 7, 7 pt cells), or cumulative (total, month delta, all-time curve).
04 Type
2/3
3h 19mThis week · 2 of 3 sessions
value 22 / 500 · caption 13
Component
Week card
01 Grid
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
Day strip 44: seven 28 pt cells at 53 pt pitch, initial 9 under each; mat-time bar 44: 12 pt track, capsule, target tick 1 pt.
02 Padding & areas
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
Card padding 16; header, gap 4, strip, gap 8, bar.
03 Structure
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
The rolling week as a picture: logged days fill with the volume gradient, imported days are a ring of the same gradient, missed days a hairline circle, rest days a dot, today an accent ring. The bar is mat time against the target on the grey track; the tick is the target. Load is one word in the context line. Replaces the three text tiles at the top of Progress.
04 Type
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
label · numeral · caption; day initials 9
Component
Recovery card
01 Grid
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Observed values · not a clinical range
Segmented control on the eyebrow line, trailing; plot 132 in the selected family hue.
02 Padding & areas
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Observed values · not a clinical range
Card padding 16; header, gap 4, plot, caption.
03 Structure
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Observed values · not a clinical range
One card for HRV, Sleep and Recovery. The segment picks the metric; title is its value, context its 28-day median, the chart and the hue follow (green, indigo, teal). Selection persists for the launch, default HRV. A missing source keeps the segment and shows the empty state in the body, never a blank chart. Replaces three stacked cards on Progress.
WHOOP · that morningRecovery 71%HRV vs 28-day median · sleep vs 8h
71%
Recovery
48
HRV
7:12
Sleep
Three rings 72, gap 16, equal columns; ring stroke 8; label under each.
02 Padding & areas
WHOOP · that morningRecovery 71%HRV vs 28-day median · sleep vs 8h
71%
Recovery
48
HRV
7:12
Sleep
Card padding 16; header, the ring row.
03 Structure
WHOOP · that morningRecovery 71%HRV vs 28-day median · sleep vs 8h
71%
Recovery
48
HRV
7:12
Sleep
Activity-style rings in the family hue: fill is the value against its reference (recovery %, HRV vs median, sleep vs 8 h); value inside, label below. Replaces text tiles wherever a value has a reference.
04 Type
WHOOP · that morningRecovery 71%HRV vs 28-day median · sleep vs 8h
71%
Recovery
48
HRV
7:12
Sleep
label · title · caption; value 17 / 500 inside
Component
Heatmap
01 Grid
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
365 days, 53 × 7, cell 5, gap 1, no scroll.
02 Padding & areas
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Inside a card; month initials above, weekday initials left.
03 Structure
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Cells radius 1 in elevated; four steps of the effort hue; today outlined.
04 Type
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
label · title · caption
08
Flows for review
Onboarding as the user meets it, then the two paid surfaces. Read left to right. Notes for the rethink sit under each strip.
Onboarding · 3 steps + paywall
Every session. A step forward.A year on the mat, kept by you
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Private · stays on this iPhone
Get started
Back
Your belt
Step 2 of 3
Purple belt2 stripes · drag to change · tap the patch to add a stripe
WhiteBluePurpleBrownBlack
Current rankPurple belt · 2 stripesWhere the journal begins
Your name
Academy (optional)
Continue
Back
Your connections
Step 3 of 3
ConnectionsSet up now or laterOptional · health data stays on this device
Apple HealthWorkouts and recovery context
WHOOPTraining and recovery data
NotificationsReminders
iCloud backupHealth-scrubbed journal copy
Continue
Back
Black Belt Pro
7 days freeKeep the journal goingJordan · purple belt · 134 sessions this year
OctNovDecJanFebMarAprMayJunJulAugSep
Plan$39.99 a year$3.33 a month · 7 days free · cancel any time
AnnualMonthlyFounder
IncludedEverythingNo ads · no data sold
Unlimited logging and history
Progress, trends, the year heatmap
Apple Health and WHOOP
Export any time
Start 7-day free trial
Restore purchases
Privacy PolicyTerms of Use
Decision (owner, 2026-09-06): the paywall stays where it is, fifth and before the first log, with the 7-day free trial. Considered and declined: starting the trial at the first logged session. Still open: merging Profile and Goals into one screen, and moving Connections entirely into Settings.
Subscription · gate and settings
Subscribe to Black Belt
Welcome backKeep the journal goingYour journal is intact · 134 sessions this year
OctNovDecJanFebMarAprMayJunJulAugSep
Plan$39.99 a year$3.33 a month · 7 days free · cancel any time
AnnualMonthlyFounder
IncludedEverythingNo ads · no data sold
Unlimited logging and history
Progress, trends, the year heatmap
Apple Health and WHOOP
Export any time
Start 7-day free trial
Restore purchases
Privacy PolicyTerms of Use
Settings
Subscription
Black Belt AnnualTrialRenews Sep 9, 2026 · $39.99 a year
Manage in App Store
Restore purchases
Rethink: the gate and the onboarding paywall are the same three cards, which is right. Subscription in Settings is one card and two rows; the plan, price, and renew date are the only facts a user looks for there and they are in the context line. A single "Manage in App Store" row would do.
08b
Navigation
Every artboard on the canvas and every way to reach it. Filled blue: tab roots. White: pushed screens (back label). Grey with a blue dashed edge: sheets. Red edge: dialogs. Dotted: states of the screen they hang from, not destinations. Checked against the artboard list at build: none missing · no orphans.
Fixed while drawing this (2026-09-06): Profile duplicated the Journal and Subscription rows that live in Settings (Profile keeps Goals and Health & recovery, the training rows). Two paths to Goals and Health & recovery remain by design: from Profile and from Settings. Location rows stay drawn for v1.1.
09
Screens
Every screen on the canvas, light and dark, drawn with the same stylesheet as the components above. Core screens first — Train, Log session, Session detail, Progress, Profile and Settings — then onboarding, states, accessibility and widgets. Order otherwise follows the app: onboarding, Train, Progress, Profile and Settings, states.
Rectangular · cumulative, all timeThree rectangular options the user picks between: this week (mat time, caption, seven-day strip), heatmap (12 weeks × 7 at 7 pt cells, four opacity steps), cumulative (total, month delta, the all-time curve with an open end point). Inline: ring glyph + "2 of 3 · 3h 19m". Circular: the weekly ring, count inside. All white on the system material at four opacity steps; the accent and the family hues are never used on the Lock Screen, because it renders monochrome.
Saturday, September 62 of 3 · 3h 19m10:42
2/3
3h 19mThis week · 2 of 3 sessions
Rectangular · this week
134sessions 12 weeks
Rectangular · heatmap, last 12 weeks
142all time · +9 this month
Rectangular · cumulative, all timeThree rectangular options the user picks between: this week (mat time, caption, seven-day strip), heatmap (12 weeks × 7 at 7 pt cells, four opacity steps), cumulative (total, month delta, the all-time curve with an open end point). Inline: ring glyph + "2 of 3 · 3h 19m". Circular: the weekly ring, count inside. All white on the system material at four opacity steps; the accent and the family hues are never used on the Lock Screen, because it renders monochrome.
In-app messages · one rule, four surfaces
Design
In-app messages
One message at a time. An error is never a toast, because a surface that dismisses itself is the wrong place for something you have to fix.
Nothinga log you just made
Confirmation is motion (§8f): the row lands and pulses, the week header ticks, the haptic fires on the landing frame.
Milestone toastthe goal that log completed
Weekly goal met
Toastfinished while you were not watching
Backup done
Inline bannera failure scoped to one card
Apple HealthHeart rateLast synced 3 days ago
Not syncingOpen Health & recovery to reconnect
Pinned bannera state that persists and can be acted on
2 imports waiting· review before Saturday
Design
In-app messages
One message at a time. An error is never a toast, because a surface that dismisses itself is the wrong place for something you have to fix.
Nothinga log you just made
Confirmation is motion (§8f): the row lands and pulses, the week header ticks, the haptic fires on the landing frame.
Milestone toastthe goal that log completed
Weekly goal met
Toastfinished while you were not watching
Backup done
Inline bannera failure scoped to one card
Apple HealthHeart rateLast synced 3 days ago
Not syncingOpen Health & recovery to reconnect
Pinned bannera state that persists and can be acted on
2 imports waiting· review before Saturday
Widgets · Home Screen, small and medium
Small · 158 × 158
This week
2/3
2 of 33h 19m
Last session
Gi · 72 minSat 10:42 · effort 4
Medium · 338 × 158
Last 4 weeks11 of 19 daysMon to Sun · today outlined3h 19m this week
Last 365 days134 sessions
Lock Screen widgets are on their own artboard · every widget deep-links to the screen it names
Small · 158 × 158
This week
2/3
2 of 33h 19m
Last session
Gi · 72 minSat 10:42 · effort 4
Medium · 338 × 158
Last 4 weeks11 of 19 daysMon to Sun · today outlined3h 19m this week
Last 365 days134 sessions
Lock Screen widgets are on their own artboard · every widget deep-links to the screen it names
Navigation · every screen and every way to reach it
NavigationFilled: tab roots. Outlined: pushed screens, back label. Rounded fill: sheets. Red edge: dialogs. Dashed: states of the screen they hang from, not destinations. Checked against the artboard list at build.
10
Charts
Every chart in the system, each as its card, light and dark. Three heights: 44 for a sparkline, 132 for a card chart, 220 for a timeline or quadrant. One family hue per card as a gradient; axis text caption 11 in secondary; gridlines hairlines; reference lines dashed. Every chart states its window and source in the context line.
Week card · day strip + target bar
Rolling 7 days3 sessions3h 20m · up 30 min on last week · 2 imported
Week card · first week
Rolling 7 days1 session1h · first week · nothing to compare yet
Rolling 7 days1 session1h · first week · nothing to compare yet
Sessions per week · bars 132
Last 12 weeksSessions per week2 so far this week · past weeks median 3
Last 12 weeksSessions per week2 so far this week · past weeks median 3
Sessions per week · mid-touch callout
Last 12 weeksSessions per weekTouching Aug 3 – 9
Last 12 weeksSessions per weekTouching Aug 3 – 9
Cumulative · area 132 + toggle
All time
142 sessionsSince Jan 2023 · 3.2 a month
All time
142 sessionsSince Jan 2023 · 3.2 a month
Mat time · area 132
Last 12 weeksMat time3h 20m a week on average · 1 week off
Last 12 weeksMat time3h 20m a week on average · 1 week off
Effort spread · bars 132
Manual ratingsEffort spread42 sessions · median: Hard
Manual ratingsEffort spread42 sessions · median: Hard
Resting heart rate · trend 132
Apple Health · todayResting heart rate52 bpm · 28-day median 54
Observed values · not a clinical range
Apple Health · todayResting heart rate52 bpm · 28-day median 54
Observed values · not a clinical range
Recovery · trend 132 + segmented (HRV)
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Observed values · not a clinical range
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Observed values · not a clinical range
Recovery · Sleep segment
Apple Health · last night
HRVSleepRecovery
7h 12mSleep · 28-day median 6h 50m · above your usual
Time asleep · not a sleep score
Apple Health · last night
HRVSleepRecovery
7h 12mSleep · 28-day median 6h 50m · above your usual
Time asleep · not a sleep score
Recovery · Recovery segment
WHOOP · this morning
HRVSleepRecovery
71%Recovery · 28-day median 64% · above your usual
WHOOP recovery · observed, not prescribed
WHOOP · this morning
HRVSleepRecovery
71%Recovery · 28-day median 64% · above your usual
WHOOP recovery · observed, not prescribed
Recovery · empty segment
Apple Health · last night
HRVSleepRecovery
No sleep dataSleep · nothing recorded in the last 28 days
Sleep from Apple Health appears here
Connect Apple Health
Apple Health · last night
HRVSleepRecovery
No sleep dataSleep · nothing recorded in the last 28 days
Sleep from Apple Health appears here
Connect Apple Health
Recovery · one source (Apple Health only)
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Apple Health only · connect WHOOP for recovery
Apple Health · today
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
Apple Health only · connect WHOOP for recovery
Recovery · source switched mid-history
WHOOP · this morning
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
WHOOP since Aug 12 · Apple Health before · one series, never stitched
WHOOP · this morning
HRVSleepRecovery
48 msHRV · 28-day median 44 · above your usual
WHOOP since Aug 12 · Apple Health before · one series, never stitched
Quadrant · 220 + two toggles
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
Last 90 days · WHOOP
3090
4 long · low HRVSession hours × HRV that morning
Observed values · not a clinical range
Year heatmap · 53 × 7
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Last 365 daysMat rhythm134 sessions · 118 active days
OctNovDecJanFebMarAprMayJunJulAugSep
Week map · last 4 weeks
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GI
–
NG
–
Rest
OM
–
GI
–
GI
–
Rest
OM
Rest
–
DR
GI
–
Rest
–
Rest
GI
–
NG
–
Rest
OM
Last 4 weeks11 of 19 training daysRest days Fri · Sun · today outlined
Mon
Tue
Wed
Thu
Fri
Sat
Sun
GI
–
NG
–
Rest
OM
–
GI
–
GI
–
Rest
OM
Rest
–
DR
GI
–
Rest
–
Rest
GI
–
NG
–
Rest
OM
Streak · weekly goal
Weekly goal5 weeks in a rowGoal met in 9 of the last 12 weeks
Weekly goal5 weeks in a rowGoal met in 9 of the last 12 weeks
Training mix · treemap, categorical
All timeTraining mix52 sessions
Gi28 · 54%
No-Gi12 · 23%
Open mat7 · 13%
Drilling3 · 6%
Competition2 · 4%
All timeTraining mix52 sessions
Gi28 · 54%
No-Gi12 · 23%
Open mat7 · 13%
Drilling3 · 6%
Competition2 · 4%
Heart-rate zones · Apple style rows
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
Apple HealthZone 4 · 18 min58 min recorded · zones from your observed max
Zone 1< 118 bpm
4:00
Zone 2118–137 bpm
9:00
Zone 3138–156 bpm
14:00
Zone 4157–175 bpm
18:20
Zone 5> 175 bpm
7:00
Observed values · not a clinical range
Heart rate · timeline 220
Apple Health · 58 of 72 min recordedHeart rateAvg 142 bpm · peak 178
Observed values · not a clinical range
Apple Health · 58 of 72 min recordedHeart rateAvg 142 bpm · peak 178
Observed values · not a clinical range
Comparison bars · this vs usual
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
Compared with your usual+12 min · hardervs 90-day median · 60 min · effort 3
Duration72 min· usual 60 min
Effort4 of 5· usual 3 of 5
Last 10 sessions · bars, this one at full hue
Last 10 sessions72 min · above your usualMedian 60 min · this session is the full bar
Last 10 sessions72 min · above your usualMedian 60 min · this session is the full bar
11
Never ship
A fourth type role on a card.
A spacing value that is not 4 · 8 · 16 · 24 · 32.
A radius that is not 16 · 12 · capsule · 2.
A data hue on anything that is not a chart mark.
Two filled buttons on one screen.
A shadow on a content card.
A chart without its window and source.
A sentence where a label and a value would do; more than one caption per card.