The design language
One engine. Two products. One restraint.
Granite isn't two websites that happen to match. It's one deterministic engine wearing two colours — held to two tones, a single accent, and one idea that runs through everything: the coach changed something, and you can see exactly what.
One engine, two products
The same deterministic core proposes, corrects and explains under every product. What changes is who it's for — and the one colour it wears.
The Granite engine
Deterministic, inspectable, on-device. It holds a value, rewrites it when your data says so, and shows the rule it used.
The correction is the brand
One idea sits under the whole system: the coach changed something because of you. It's the logo, the accent chip, the invert. Struck old value, chipped new one — rendered the same way everywhere, in five states.
-
Pain flagged
Leg press
60 kghold 50 kg Held -
Joint protected
Back squat
back squatfront squat Swapped -
Earned it
Bench press
92.5 kg95 kg Progressed -
Fatigue arrived
This week
builddeload Deloaded -
Criteria met
Return
not yetmet — your call Cleared
Two tones, one accent, two colours
Everything is black and white until something changes. The accent is the only colour
on the page, and it's the only thing that ever inverts. Each product carries a
different one — set by a single data-product attribute.
Three typefaces, a wide range
Geist carries the structure — the wordmark, the section titles, the body. Geist Mono is the data, the labels, the system talking. A system serif is the third voice, and it is rationed: only the handful of lines built to sound felt rather than built — a hero thesis, a headline, a campaign close. Everywhere else stays exactly as it was.
The road back
Return isn’t a date. It’s thresholds, met on the body.
Return to function and return to sport
Granite plans the road back, guides your patient down it, and shows you the whole caseload between visits — so the return stays your call, made on evidence.
GEIST MONO · CASELOAD · 5 ACTIVE · WK 18 · 92% ≥ 90%
One line-icon language
Thin line-work on a 24px grid, rounded joins, stroke following currentColor
so every icon takes the product accent and inverts cleanly. One sprite, every page.
- target
- user
- clipboard
- phone
- loop
- calendar
- eye-off
- help
- compass
- route
- shield
- lock
- video
- sliders
- message
- clock
- heart
- barbell
- whistle
- cross
The restraint, in one place
Always
- Two tones. One accent, and it's the only colour
- The accent is the only thing that inverts
- British English, sentence case, plain words
- Real data, real screenshots, custom line-work
Never
- Gradients, stock photography, drop shadows for show
- Testimonials or logos that don't exist yet
- Announcing the category or self-declaring a title
- Accent used as decoration rather than meaning