Speed Meets Consistency: A Design System Built to Scale
Lessons from a Scalable Design System Rebuild
Earlier this year, I led the rebuild of a digital design system for a fast-growing, cost-effective gym brand as part of their 2025 rebrand.
But this wasn’t just a case of refreshing colours or updating components — the goal was to create a robust, accessible, and themed system that could scale across both web and mobile platforms.
The Challenge
The existing system (originally migrated from Sketch) was fragmented and unsustainable:
Two conflicting grid systems
No spacing tokens
Inconsistent foundations for colour, typography, and components
No theme support for light or dark mode
Accessibility issues, including WCAG 2.2 contrast failures
A bespoke brand font that wasn’t correctly packaged for digital use
Approach
I rebuilt the system from the ground up in Figma, with an emphasis on accessibility, scalability and theming:
Defined structured design tokens — spacing, grid, colour, and typography — using REM units and semantic naming.
Used Figma Variables and Modes to enable seamless switching between light and dark themes.
Repackaged the custom font for digital use, created a typographic token system and resolved inconsistent naming issues.
Built atomic, modular components using Figma Variants, Auto Layout and slots.
Prioritised accessibility from the outset — ensuring keyboard navigation, focus states and contrast ratios were all baked in.
Documented everything and aligned with engineers using shared tokens and Storybook.
The Outcome
50+ scalable components in a single-source Figma library
Fully themeable system supporting light and dark modes – 0 duplication
A faster design-to-dev workflow
A brand rollout that remained WCAG-compliant across platforms
50+
App Components
3
Scalable Themes
10+
Templates
100%
Accessible