The design system
13 UX foundations. ~125 semantic tokens. 13 reusable components. CI-enforced and visible in shipped screens.
The 13 principles
- 1.Clarity over cleverness
- 2.Touch affordances above 44pt
- 3.One primary CTA per screen
- 4.Progressive disclosure by default
- 5.Motion communicates state change, not personality
- 6.Empty states teach, not decorate
- 7.Error recovery beats error prevention
- 8.Loading states beat spinners
- 9.Color is a last-resort differentiator
- 10.Every interactive element has a disabled variant
- 11.Accessibility is a constraint, not a feature
- 12.Typography owns hierarchy
- 13.Spacing owns grouping
Onboarding flow — six screens
The first-run path uses the same typography, spacing, card radius, and CTA logic as the rest of the app — so onboarding feels like the beginning of the product, not a separate mini-site. Every screen offers an explicit skip; no step blocks.
Brand entry. One CTA, no chrome, the wordmark and the value proposition. The first frame the user judges the app on.
A concrete outcome chosen up front, with large touch targets and a single primary action. The progress bar at top is the only navigation chrome.
Training experience and weekly frequency calibrate the program. Skip is always available — onboarding never blocks.
Permission with intent. Each data type listed by purpose, recovery and readiness explicitly named. Skip with a clear later-in-Settings escape.
Honest analytics. Green checks on what is collected, red on what is not — health values and personal information stay local. Continue Without is just as prominent as Accept.
Email or Apple, both equally weighted, log-in for returning users, skip-for-now for trial. The ladder reads top-down by friction.
Live app — daily use with mock data
Four screens from the daily flow, captured against a seeded test profile so the data is realistic without exposing real users. Same tokens, same components, same metric-tile grammar carried from onboarding into Home, Training, Session-Complete, and Nutrition.
Personalized greeting, rotating achievements card, contextual day type (rest day with Start Recovery + Log Meal), body-composition snapshot below the fold. All actions are one tap away.
Week strip with completion dots, suggested session card with progress ring, exercise rows showing sets / rep range / rest plus an inline coaching note in the brand orange.
Modal presentation honours every PR. Duration, exercises, total sets, and volume rendered in the same metric-tile grammar as the home dashboard. Share is one tap.
Macro targets at the top, named strategy beneath ("Continuous deficit"), Repeat Last for the daily ritual, meals timestamped with kcal + protein. Same chip and card grammar as the rest of the app.
Under the hood
What the principles and screens look like at the token layer — the raw inputs every view in the app composes from.