How I designed a complete design system for APEX Lift, an AI-native fitness tracker, before touching a single app screen. A record of decisions, principles, and process.
Design systems are never finished, only iterated. This case study captures the design system phase: the decisions made, the rationale behind them, and how the foundation was laid before any app screen was designed. App screens, user flows, and prototype documentation will follow.
Most designers start with screens. I've done that. It's fast and satisfying until week 6 when you have 40 inconsistent button styles across 12 screens and no one can explain where anything came from. Starting with a system is not slower; it's a different kind of investment that pays off exponentially as the design grows.
Four focused weeks before opening Figma. Most of the work was decisions, not production. The production work was fast because the decisions were already made.
Before touching a single token, I wrote these down. They became the filter for every "should we or shouldn't we" conversation, with myself and eventually with the engineers.
The following documents the foundation layer of the APEX Lift design system. Each section shows the token, its value, its rationale, and how it renders in context.
Every significant design decision was logged with its rationale. This isn't just good practice; it's the difference between a portfolio piece and a portfolio story. Recruiters don't just want to see what you made. They want to know why.
The design system is the foundation. Here's what I'm building on top of it, and in what order. Each phase depends on the previous one being solid.
Currently open to senior product design roles focused on AI, systems design, and complex product challenges.
Get in touch →