PowerWeight — brand and icon system
A complete visual identity for a personal-trainer app — logo, hand-drawn characters, and a flat-icon library — built from one three-colour palette so every screen reads as a single product.
Role · Designer · illustrator · brand
What this covered
- One identity from a three-colour palette — mustard, off-white, charcoal — applied to logo, characters and icons alike.
- A dumbbell wordmark that works as both the app icon and the launch-screen anchor.
- Hand-drawn characters that double as empty-state art, onboarding coaches and avatar choices.
- A flat-icon family (dumbbell, calendar, chart, mail, pin) drawn to one spec so any row reads as one set.
- Published as a full Behance case, with a device-recorded screencast of the app in motion.
Discipline
The brief
PowerWeight was a personal-trainer mobile app concept — workouts, a training calendar, body-progress tracking. The identity had to read as friendly and human on a screen the size of a hand: not gym-bro, not clinical corporate-wellness. That pointed at rounded geometry, a single warm accent, and characters that looked like people you'd actually want coaching you rather than stock-photo athletes.
A palette of three, on purpose
Mustard for brand and accent, off-white for surfaces, charcoal for outlines — and nothing else. A palette this tight is a constraint that pays off: with no extra colour to lean on, hierarchy has to come from weight, shape and spacing, so every glyph and illustration gets stress-tested. If a mark reads at 24px in mustard, it reads anywhere, in any state.
The mark: a wordmark you can shrink to an icon
The logo is a hand-lettered 'POWER WEIGHT' banner slung between two dumbbell plates. It was drawn to survive scaling: at full size it's a friendly wordmark, and cropped to the plates alone it becomes the app icon and the launch-screen anchor. One drawing, two jobs — the brand and the home-screen presence are literally the same asset.
Characters before screens
The illustrations were drawn first, before a single screen was wireframed. They had to carry the brand voice on their own — consistent proportions, one outline weight, the same eye and hand treatment across the flexing hero and the coach avatars. Once the character system held together as a family, the UI's only job was to get out of their way. The hero doubles as the launch screen and as the empty state on an unstarted workout library.
Icons as one family
Every utility icon — dumbbell, calendar, progress chart, mail, location pin — shares the same corner radius, the same stroke weight, and the same proportion of negative space. Drawing them as a set, to a single spec, means they sit together in a tab bar or a settings list without anyone having to think about it. Consistency here is invisible when it works and glaring when it doesn't.
Looking back
This is early work — 2017, published on Behance — and it holds up because the discipline is right: constrain the palette, draw the mark to scale, treat illustrations and icons as systems rather than one-offs. The same instincts run through everything I've designed since; here they're at their most concentrated because there was so little to hide behind.
In motion
The app in motion — onboarding, workout library, calendar, progress tab. Recorded on a real device, no edits.
Screens
Hero illustration
The flagship character. Used as the app's launch screen and as the empty state on the workout library.
Coach avatars · outline
Outline variants for picker rows. Same head proportions across all avatars so the row reads as one set.
Coach avatars · the pair
Matched male / female pair. Built so swapping coaches in onboarding doesn't change the visual rhythm of the screen.
Filled variant
Filled treatment for the larger profile-header use. Same character, second voice — quieter when surrounded by white space.
Brand mark · filled
The dumbbell as the literal brand. Mustard fill, used in the logo lockup and as the launch-screen anchor.
Brand mark · outline
Outline treatment for in-app use where the filled mustard would compete with content. Same icon, lower volume.
Calendar — utility icon
Workout-schedule glyph. Same outline thickness and corner radius as the rest of the library so it sits in any row.
Pin — gym location
Geo pin for the gym-finder. Stripped to a silhouette so it reads at any size.
Progress — chart icon
Progress / analytics tab. Same square footprint as every other tab-bar glyph, no special-case treatment.
Mail — notifications
Notification glyph. Drawn with the same envelope flap proportions used in the rest of the system.