A Scalable Design System for Brand Growth & Accessibility

Assignment

Role: User Interface Lead Designer, Design Systems
Client: National fitness brand, 2025 rebrand
Tools: Figma, Storybook, Miro, User Testing, GA
Collaboration: Design, Engineering, Brand, Accessibility

A national fitness brand underwent a 2025 rebrand. The existing design system, migrated from Sketch, was fragmented and unsustainable. It had conflicting grids, lacked spacing tokens, contained inconsistent foundations in colour, typography, and components, offered no support for theming, failed WCAG 2.2 accessibility standards, and used a brand font not prepared for digital use.

Task

Lead the rebuild of the design system in Figma to deliver a scalable, accessible, and themeable framework that supported both web and mobile platforms while aligning with brand growth and engineering requirements.

Action

Rebuilt the system in Figma with accessibility and scalability as core principles.

Defined structured design tokens for spacing, grid, colour, and typography using REM units and semantic naming.

Implemented Variables and Modes for light and dark themes.

Repackaged and standardised the custom brand font, creating typographic tokens and correcting naming inconsistencies.

Built atomic, modular components using Variants, Auto Layout, and slots.

Embedded accessibility features: keyboard navigation, focus states, and compliant contrast ratios.

Documented the framework and integrated with engineering using shared tokens and Storybook.

Result

– 50+ modular components into a centralised Figma library.

– Two scalable themes (no duplication).

– Produced reusable templates to accelerate design output.

– Achieved full WCAG 2.2 compliance across platforms.

– Reduced design-to-development friction.