Client mobile / fidelity pass
Identical layouts, states and copy to the selected direction — re-rendered against a typeface, a type scale with a weight range, 4pt spacing, a radius ramp, three elevation levels and an imagery treatment. The point is to judge whether the direction survives contact with product fidelity, and to give implementation something it can build from.
Colour is unchanged. Every value comes from the brand colour standard — periwinkle fills carry ink, white-text controls use #4E49E1, and at most one --brand fill exists per screen (here: the paused-session dock). Two muted greys and the online green were darkened to clear 4.5:1, which the original narrowly missed.
Type is a proposal, not a decision. IBM Plex Sans, paired with IBM Plex Sans Arabic — chosen because Arabic and RTL are a committed requirement and Plex is one of very few families whose Arabic companion was drawn alongside the Latin. Coach voice is Plex Serif italic.
Elevation carries the product rule. At most one raised surface per screen, and it is the one thing you have to decide about. The habit tray, informational context and the progress surfaces are flat. On “nothing due” and “all done” nothing is raised at all — the screen is literally at rest.
The home surface. Never more than one thing to do on screen — shown across its states, including a session paused and docked for resume. Repeatable habits live in a quiet tray below the card; a habit never becomes the card itself.
Slow on the negatives today — quality over load.
Nothing else due until your check-in tonight.
“Finish whenever you're ready — I've kept your place.”
The live workout: Timeline by default, a manual Focus mode, and the come-back moment when a deferred exercise is re-presented.
Slow on the negatives. — Ahmed
Last one to circle back.
The seam: a focused conversation, one tap from the avatar. It invites and reflects, but never carries the instruction to act.
First run teaches the loop by running it: meet the coach, then do one real action before ever reaching Today.
“Hi Sam — glad you're here. We'll keep this simple: one thing a day, and I'm right here whenever you need me.”
Most days this takes two minutes.
We'll tell you when there's something to do.
That's a log. That's the whole loop — one tap, done.
The app is closed most of the day, so the notification is the product surface. Every ping is coach-framed, and simple check-ins are answerable inline.
The quiet third surface, off the main path — where the data we keep off Today lives. Momentum is accumulation, never a streak that punishes a gap, so the grid reads as density rather than pass/fail.
“Strong on push days — let's build on that.” — Ahmed
What the screens above are built from. This is the part implementation needs — the original set had eighteen ad-hoc type sizes, nine radii, one font weight and no elevation, so nothing above could be rebuilt from it consistently.
--t-hero--t-xl--t-lg--t-md--t-base--t-sm--t-xs--t-2xsOne weight for one job. Bold is reserved for numbers the client acted on, so weight itself signals “this is your data”.
Eight steps, no values in between. Replaces the original's 9 / 11 / 13 / 18px one-off paddings.
Chip · button · card · sheet and dock · pill. The bigger the surface, the softer the corner.
Elevation encodes the product rule: only the thing you must decide about is raised. On dark, surfaces step up in lightness instead — shadow alone does not read.
Press scales to 0.985 and dims 5%. Offline, queued and synced are drawn — the committed sync contract needs them and the original set had none.
Exercise media renders duotone — periwinkle-to-indigo with a single highlight — so photography sits inside the palette instead of fighting it. Glyphs here stand in for the real frames. The coach avatar is a photo slot with a presence ring.
Not resolved by this pass, and worth naming rather than implying: