Bernardo Presser
TL;DR
Product
White-label platform for fitness and wellness creators, web and native
Goal
Make the aesthetic that attracts creators systematic, from marketing surfaces to product
My role
Visual language, comms design system, product design system, design workflow
Team
Me + head of design + COO (designer turned engineer) + product team
Constraints
Components must survive creator customization; web and native in parallel; an existing library that predated tokens
Shipped
Imagery direction and image bank, comms design system, code-based product design system publishing to web and native Storybooks
Result
App rebuilt feature by feature on the new system; design decisions ship as reviewed PRs; comms system self-served by non-designers

→ Context

A white-label platform where fitness and wellness creators launch their own branded apps. Ask creators why they signed and they point to the brand: the website and marketing look like the world they want their own apps to live in.

The engagement started with imagery. Fitness visuals split between two clichés: hyper-real gym content from social feeds, and flawless stock footage of perfect studios and perfect people. The platform wanted a third position, images that read as neither and never read as AI.

The work grew from there into a full visual language, a comms design system the team operates without a designer in the loop, a product design system, and the workflow to rebuild the app on it.

The bar came from the platform’s own top creators, who produce their brands at fashion-editorial level, with shoots, crews, and art direction.

Social comp: "Honestly, what does it take to launch your fitness platform?" set over a full-bleed portrait
Social comp: "Don't just teach. Build the journey." with the image on a shelf above the copy

Comps made by the client team using the Marketing and Comms Design system and generated imagery.

Four values in, a whole card out

Palette
Corners
Cover: a creator sitting cross-legged on a mat, planning a session
28 min Video
Low-impact strength — full body

A joint-friendly session that builds real strength without pounding your knees. Dumbbells if you have them, a sturdy chair if you don’t.

Beginner No equipment needed
Three brand colours and a corner style are the entire client-facing configuration. Everything else is derived — including which direction the label ink flips.

→ The Visual Language

The organizing concept came from fashion and art magazines: creators are the artists, and the system treats them that way.

Bodies appear as form and movement, not as before-and-after. Natural light, warm neutrals, film grain over digital sharpness. Imagery gets the treatment a gallery gives its work: generous borders, generous white space, copy that sits beside the image, never over it.

Warmth lives in the photography. The interface chrome stays close to achromatic, warm white and near-black, so color enters through the image.

Typography works as architecture: a bold sans paired with a contemporary serif, hierarchy built from scale and space, sharp edges throughout. The rules are about ratios, not taste, which is what makes the system usable by people who don’t design.

Brand surface: "Your platform. Not ours." set over a single image
Brand surface: "A Netflix-style experience, built your way."

One promoted piece, three shapes

The same billboard as a poster with its caption on a shelf, as a full-bleed cinematic crop, or with no cover at all — a missing image is an authoring choice, not a broken state. The shape changes; the grammar holding it does not.

→ The Process

  1. Mapped the territory: research across thirty brands and twenty creators.
  2. Mood boards, then an imagery direction, then a generation pipeline and an art-directed image bank.
  3. Codified the comms design system in Claude Design; the team now makes its own reports, decks, banners, and social posts.
  4. Derived the product design system from the editorial one and moved it into code.
  5. Features get spec’d by an agent from the app repo, then designed live in web and native playgrounds, in the browser.
  6. Every component is audited by a review skill before promotion: token integrity, hardcoded values, redundancy.
  7. Promotion is a reviewed pull request to web and native Storybooks in one monorepo; playgrounds publish as working prototypes for engineering.

→ What Failed First

Three attempts at the product design system failed before one worked.

  • Reusing the editorial system for product screens. Editorial systems are opinionated. They ask for copy, density, and layout drama that product surfaces can’t sustain.
  • Generating screens from the system with AI tools. Every session reinterprets the system, so the same request produces different screens on different days. Great for exploration, no good as a source of truth.
  • Rebuilding in Figma. The library predated the token structure that would let a change cascade, so improving the system meant rebuilding components one by one, by hand. Progress was real, just slow.

→ The Decisions

  • Source of truth in code. The one place where tokens, review, and both platforms live together. The COO, a designer turned engineer, proposed it; I agreed on the spot.
  • Derive, don’t dilute. The product system keeps the editorial DNA, sharp corners, hairline rules, the type pairing, as an optional layer over a clean core.
  • Gate promotion behind an audit. No component enters the system with broken tokens, hardcoded values, or a job an existing component already does.
  • Design in the browser. Iteration happens against real rendering and real states, web and native side by side. Claude Design generates variations in parallel when the first output plays it too safe.
  • Freedom with guardrails. Creators get fewer options where choice creates setup friction, more where it creates expression: component variants, layout options like grid versus carousel.
  • Let native diverge. Modules are redesigned per platform rather than forced into parity.
  • Specs as the handoff. Engineers get the spec and a running prototype, then implement in their own stack.

One component, two layouts

Palette
Cover: two people resting on a studio floor in warm light

Wind-down breathing — before sleep

8:40 / 22:40
The audio transport answers to its own width rather than the window's. Narrow the page and the split card collapses to a stack, the waveform thins, and the corners flatten — a container query following the component, not the screen.

→ Designing for White-Label

Every decision above has to survive the platform’s defining constraint: creators customize their apps.

A handful of brand inputs fan out across hundreds of variables. Fonts come from a curated pool, palettes are adjustable, and pages are assembled from modules, so a component is never seen in one context with one typeface. It has to look composed under combinations nobody previewed, and it has to make a solo creator shooting on a phone look as intentional as one with a production crew.

The seam is deliberate. The system holds the grammar, the spread logic, the type ratios, the spacing discipline, while the creator’s brand fills it.

One screen, three brands, three weeks

Palette
Corners
Week
One session in, two to go.
Your schedule
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Achievements
2Active days
2Workouts completed
1Audio listened
1Recipes made
The progress screen assembled entirely from published components. Retint it, square its corners, or change how the week went — the layout never moves.

→ Outcomes

The app is being rebuilt feature by feature on the new design system, with design decisions shipping as reviewed pull requests to both platforms.

  • The comms design system is in daily use across social, the website, reports, and decks, run by the team through Claude Design.
  • One design system publishes to web and native Storybooks from a single monorepo, so the two platforms stay in step.
  • Every promoted component has passed the token audit, so the system stays clean as it grows.
  • Engineers work from specs and running prototypes rather than static redlines.

Built to be read from the floor

3 / 7 9:05 left
Paused · 0:00 Forearm plank

Mat 0:32
All exercises
Rest · 30s
Circuit A · Finisher × 2 rounds
Rest · 20s

Press play. Tap the frame to send the controls away and bring them back.

A guided workout in place of continuous playback. The exercise name hands the screen to the clock after three seconds, and the chrome withdraws when you stop touching it — giving the frame back to the demonstrator.