8m read
882 words
Building an unofficial design system for ClassPass
Role
Product Designer
UX Researcher
Tools
Figma
ZeroHeight
Timeline
8 weeks
CONTEXT
ClassPass is a monthly membership that enables you to book fitness services via their app.
ClassPass' parent company recently merged with another fitness giant, increasing their company evaluation to $7.5B.
PROBLEM
ClassPass is worth $7.5B but there are still major inconsistencies on the mobile app
Excessive text styles
There is an excessive amount of text styles that exist within the app.
Inconsistent button styles
Button styles are used inconsistently within the core flows.
SOLUTION
Introducing Hercules Design System
Hercules is an unofficial design system built by reverse-engineering the ClassPass product. The name reflects a core ClassPass value, no pain, no gain.
How did we get here?
PART 1
Deconstructing the ClassPass mobile app
Before designing the system, we had to understand what we were working with. That meant identifying the key components and foundational elements of what we believe are the ClassPass mobile app's most visited pages: Home, Studio, Search, and Workouts.
We began bucketing every single UI element into atoms, molecules, and organisms, as per Brad Frost's atomic design guidelines.
*ClassPass has both a website and a mobile app but because users mainly utilize the app to book their services, it would be more impactful to standardize that.
IDENTIFYING THE PROBLEM
Uncovering the inconsistencies in typography and buttons
While deconstructing, we found glaring issues that we couldn't ignore. We identified 14 different styles in total and inconsistent usage of button styles. As the fitness industry consolidates and ClassPass grows, the need for consistency increases as it is a core piece of good branding.
Screenshot of the typography styles we found
Screenshot of the button styles we found
PRINCIPLES
Defining the principles that guide Hercules
Before building components or defining tokens, the system needed a a set of principles to guide every decision that followed and ensure consistency across the system at scale.
Clarity over cleverness
Understandable and usable
Frictionless by default
Low commitment: ClassPass's core promise, built into the system
Inclusive by construction
Accessible and inclusive, not bolted on
Crafted with feeling
Enjoyable, delightful, human
Consciously scalable
Built to grow without breaking
PART 2
Building the UI Kit
After identifying a problem, we moved into building a scalable and efficient design system that can alleviate those issues. Using Figma, we created a comprehensive UI kit with proper foundations, reusable components, and modular patterns to streamline the design and development process.
Hercules UI Kit
TOKEN SYSTEM
Raw, primitive, and semantic tokens
Hercules uses a three-tier token architecture.
Raw tokens define the base values — every color, size, and weight available in the system.
Primitive tokens give those values meaning by organizing them into a structured palette.
Semantic tokens tie everything to intent, mapping values to specific use cases like surface, text, and interactive states.
This hierarchy keeps the system flexible at the foundation and consistent at the surface. We chose to utilize the kebab-case because it's a widely used system that designers and developers everywhere can understand.
CONTRIBUTIONS
Standardizing color, spacing, and layout grids
I standardized the color system to ensure that decisions are intentional and consistent across every component and screen. Instead of designers and developers picking raw hex vales, every color in the UI now connects to a token with a defined purpose. This makes the system easier to maintain, scale, and hand off.
I also standardized the spacing system across the UI. There are now 11 different spacing tokens that are referenced for semantic tokens. This makes layouts feel cohesive, speeds up design decisions, and ensures engineering implements spacing the same way every time.
I established a 4-column responsive grid system based on common breakpoint standards. This ensures that every screen is structured the same way with consistent margins, gutters, and padding.
CORE COMPONENTS
Core components & patterns
The Hercules design system documents recurring designs found across the ClassPass product. This allows designers and developers to build with confidence and with speed. It also ensures consistency; every button, card, and carousel behaves the same way across the product.
USER TESTING
Designers love our system but it can be improved
After our initial prototype, we conducted 3 user tests with other designers in our class. We asked our participants to recreate a screen using our design system and 3/3 successfully completed the task. The test also revealed some typography issues within the containers that house the UI elements. Our designers had this to say:
"The process was pretty straightforward."
"There wasn't really anything confusing."
DOCUMENTATION
More than just a UI kit
A design system is more than a UI kit; it's a shared language that requires documentation, context, and rationale behind every decision. Hercules is documented in ZeroHeight, where design principles, accessibility standards, components, and best practices live in one accessible place.
NEXT STEPS
Expand Hercules to make more comprehensive
With more time, we would expand the design system to contain UI elements from the whole app. As of version 1, we only deconstructed four of the main flows but the goal is a complete, living system that scales with the product.
OUTCOME
We built a design system for ClassPass from 0 -> 1
Upon completion, we pitched our design system to our classmates. We were able to clearly communicate why a design system matters, how it supports efficient cross-functional collaboration, and how it can benefit ClassPass as it grows.
