A Design System Built to Grow
This project involved creating a scalable design system for a gym website redesign, addressing current needs while laying the foundations for a potential future app. The goal was to ensure both platforms could share the same visual language without having to start from scratch.
Company
—
Client
—
Project year
2026
Role
Product Designer
A Design System Built to Grow
This project involved creating a scalable design system for a gym website redesign, addressing current needs while laying the foundations for a potential future app. The goal was to ensure both platforms could share the same visual language without having to start from scratch.
Company
—
Client
—
Project year
2026
Role
Product Designer
A Design System Built to Grow
This project involved creating a scalable design system for a gym website redesign, addressing current needs while laying the foundations for a potential future app. The goal was to ensure both platforms could share the same visual language without having to start from scratch.
Company
—
Client
—
Project year
2026
Role
Product Designer
The problem
Class bookings and membership purchases are currently handled through a third-party app, outside the gym's control. The website redesign was an opportunity to establish a design foundation that works for the website today while preparing for a potential future app, allowing both platforms to share the same visual language from day one instead of having to rebuild everything later.
THE CHALLENGES
Typography: Balancing Brand Identity and Usability
The original typeface (Tusker Grotesk) was designed exclusively for the logo. When used digitally, its uneven visual alignment required custom padding on individual containers to align it with other elements — an approach that wouldn't scale. I looked for an alternative that preserved the brand's personality without straying too far from its identity, eventually choosing Anton for headings.
Typography: Balancing Brand Identity and Usability
The original typeface (Tusker Grotesk) was designed exclusively for the logo. When used digitally, its uneven visual alignment required custom padding on individual containers to align it with other elements — an approach that wouldn't scale. I looked for an alternative that preserved the brand's personality without straying too far from its identity, eventually choosing Anton for headings.
Component Adaptation Across Devices
The second challenge was adapting components for tablet and mobile, where screen space is limited and hover states are unavailable. Many components relied on hover to communicate interactivity, so I had to rethink how these interactions would work across different screen sizes.
Component Adaptation Across Devices
The second challenge was adapting components for tablet and mobile, where screen space is limited and hover states are unavailable. Many components relied on hover to communicate interactivity, so I had to rethink how these interactions would work across different screen sizes.
The process
AUDITING THE EXISTING DESIGN
The process
AUDITING THE EXISTING DESIGN
I started by analysing the existing website in detail to identify which components were being used and which would need to be carried over into the redesign, albeit with a different visual style.
I found several inconsistencies, such as buttons using different typefaces (Montserrat and Tusker Grotesk), headings with inconsistent italic styling, and other variations across the UI.
I also reviewed the existing style guide, as it would serve as the starting point for building the new design system.
I started by analysing the existing website in detail to identify which components were being used and which would need to be carried over into the redesign, albeit with a different visual style.
I found several inconsistencies, such as buttons using different typefaces (Montserrat and Tusker Grotesk), headings with inconsistent italic styling, and other variations across the UI.
I also reviewed the existing style guide, as it would serve as the starting point for building the new design system.
FOUNDATIONS
FOUNDATIONS
FOUNDATIONS
Colors
I defined a colour scale for the brand, neutral tones and semantic colours (success, error and warning).
Typography
Grid & Spacing
Corner radius
Icons
Colors
I defined a colour scale for the brand, neutral tones and semantic colours (success, error and warning).
Typography
Grid & Spacing
Corner radius
Icons
Colors
I defined a colour scale for the brand, neutral tones and semantic colours (success, error and warning).
Typography
Grid & Spacing
Corner radius
Icons
COMPONENTS
I built the components with two key principles in mind: scalability and interaction. Each component includes its own variants, states and animations to ensure smooth transitions between states.
The biggest challenge was adapting them for tablet and mobile, where screen space is more limited and hover states are unavailable. Many components relied on hover to communicate interactivity, so I had to rethink how these interactions would work across different screen sizes.
STYLE GUIDE
STYLE GUIDE
I brought everything together in a single document covering the specifications, states and behaviours of each foundation and component. It serves as a reference for two audiences: new designers joining the project and developers responsible for its implementation.
I brought everything together in a single document covering the specifications, states and behaviours of each foundation and component. It serves as a reference for two audiences: new designers joining the project and developers responsible for its implementation.
THE OUTCOME
THE OUTCOME
The design system provides the foundation for the website redesign. Designing a new screen no longer means making decisions about colours, typography or spacing from scratch, but combining existing components.
Components behave consistently across desktop, tablet and mobile, laying the groundwork for a potential future gym app without having to start from scratch. The style guide, documenting specifications, states and behaviours, also helps minimise ambiguity between design and development.
The design system provides the foundation for the website redesign. Designing a new screen no longer means making decisions about colours, typography or spacing from scratch, but combining existing components.
Components behave consistently across desktop, tablet and mobile, laying the groundwork for a potential future gym app without having to start from scratch. The style guide, documenting specifications, states and behaviours, also helps minimise ambiguity between design and development.