Skip to content
Levityby Katie
All work

Leading lululemon’s design system strategy

Created and implemented a unified, scalable system - defining the strategy, foundations, components, and standards that drove design excellence, efficiency, and alignment across teams worldwide.

  • Design System
  • Strategy & Optimization

Token cascade: the semantic token interactive/primary is remapped from red/700 (#C8102F) to neutral/950 (#140F0F); every component using it updates, and a composite product card adapts from desktop to mobile and turns its badge off.

Change one token, and every component that uses it updates.

Overview & Impact

Over the past two years, I’ve led lululemon’s global design system strategy, focusing on design excellence, scalability, and operational efficiency. This initiative consolidated fragmented libraries, improved cross-team collaboration, and built a flexible, token-driven foundation that supports consistency, responsiveness, and the company’s global rebrand.

Libraries unified into a systemCounted in Figma as the components inside seven platform and regional libraries were consolidated into one source of truth.
7 → 1
Reduction in redundant workTimed against the old process: a brand color change once meant editing every detached logo, component and version by hand across teams. Linked to a semantic token, it propagates from a single edit.
65%
Fewer detached instancesMeasured in Figma’s library analytics, which report how often teams detach from the shared components.
35%

My Role

As Sr. Product Designer, I defined and delivered the end-to-end strategy and implementation of the system.

  • Strategy & Vision: Established the roadmap and guiding principles for a unified system across platforms and regions.
  • Foundations: Built shared, tokenized structures for color, type, spacing, and radius to enable global scalability.
  • Components: Rebuilt and optimized core components for responsiveness, accessibility, and flexibility.
  • Standards & Governance: Created contribution workflows, approval systems, and comprehensive documentation.
  • Education & Adoption: Led workshops and usability tests to build confidence and empower designers to work efficiently.
Design Systems team
  • KHMe · Sr. Product Designer
  • Team member
  • Team member
  • Team member

Designs & foundations, to:

  • International Web
  • North America Web
  • iOS
  • B2B
Company
lululemon
Dates
Jun 2023 - Nov 2025
Team
Design Systems
Website
lululemon.com
A Figma variables panel titled “.Colors”, listing text tokens — default, subdued, disabled, inverse, info, success, warning, error and accent — mapped across Current-Web, Current-iOS and New Branding columns.A Figma variables panel titled “.WIP Type”, listing size tokens from heading-xxl down to subtitle with separate Current-Desktop and New-Mobile values.A lululemon “New Arrivals” page at desktop width, showing a filled and an outlined “Shop Matching Sets” button above a product carousel.The same lululemon “New Arrivals” page at mobile width, the carousel cropped to a single product column.

The Challenge

  • Trust & Adoption

    Designers felt unheard, and the system didn’t follow its own standards or meet their use cases - leading to low adoption and lack of trust.

  • Consistency & Quality

    Teams created local one-off components that varied slightly and broke visual cohesion, resulting in inconsistent experiences across platforms.

  • Scalability & Growth

    With digital growing rapidly, global expansion, and a rebrand on the horizon, fragmented libraries made scaling inefficient.

  • Clarity & Guidance

    A lack of approval workflows and documentation left teams uncertain about how to contribute or follow best practices.

Process

Timeline

  1. 2023

    Audit & Discovery

    Catalogued components, styles, redundancies, and adoption issues.

  2. Strategy & Definition

    Defined token architecture, quality standards, and system roadmap.

  3. 2024

    Foundations & Tokenization

    Rolled out tokens across the org and set scalable guidelines.

  4. Component Optimization

    Rebuilt, optimized, and added components; established approval & deprecation workflows.

  5. 2025

    Rebrand Implementation

    Applied the optimized system and tokens to the global rebrand rollout.

Phase 1

Audit & Discovery

To understand the health of our design system, I audited all active libraries across Web, iOS, International, and B2B, reviewing component structures, naming, accessibility, and token use. I also led designer interviews and workshops to uncover pain points around adoption, governance, and workflow efficiency.

The audit revealed extensive redundancy and inconsistency - with multiple teams rebuilding the same components differently. Rigid components and missing foundations made the system hard to use and scale, while accessibility gaps and lack of governance reduced trust and adoption.

These insights became the blueprint for the next phase: defining a unified strategy, shared foundations, and a scalable governance model to move the organization toward a single, cohesive design system.

A comparison of inline message states across iOS and Web — success, info, error and warning — showing the two platforms styling the same four alerts differently.
A FigJam board titled “Existing NA Web Design System Components”, where dozens of component screenshots are covered in green and red sticky notes marking what designers use and what they consider broken.A grid of six design-system library covers — myDay, INTL Product Design, NA Web UI, NA Web Supplementary, BBR Design Language and B2B — showing the separate libraries in use before consolidation.A FigJam survey board asking “How do you feel about the design system and why?”, with designers’ grades plotted from D− to A averaging C+, above rows of sticky-note comments.

Phase 2

Strategy & Definition

Building on the audit insights, I defined a clear strategy and structure for lululemon’s global design system. This included creating a unified roadmap across Web, iOS, International, and B2B, establishing naming conventions, metadata standards, and component organization, and aligning with engineering and brand partners on scalable token architecture.

The new strategy focused on unification, scalability, and clarity - consolidating fragmented libraries, setting quality standards, and introducing governance workflows and documentation templates. These foundations enabled a shared language across teams and positioned the system to scale globally, setting the stage for implementation and tokenization in the next phase.

A FigJam planning board breaking the design-system work into numbered epics — rebuilding the system, library restructuring, a sustainable process, education, and collaboration — each with its requirements on sticky notes beneath.

Phase 3

Foundations & Tokenization

With the system strategy in place, I built shared foundations and a tokenized architecture. Tokens for color, spacing, radius, and typography unified Web and iOS, eliminating redundant styles and the inconsistencies that had slowed production.

Responsive spacing, adaptive type scales, and regional text collections automated responsiveness and localization, so components adjusted across devices, languages, and markets. What was fixed and fragile became dynamic and globally adaptable - groundwork for lululemon’s rebrand and international growth.

Six design-system foundation tiles — Type, Color, Spacing, Motion, Icons and Radius — each a line-drawn icon on a white card.

Universal Foundations

Primitive Collections for iOS & Web

These consist of:

  • Type primitives tokens
  • Color primitives tokens
  • Static spacing & radius tokens
  • Icon library
  • Motion library
  • FF4647
  • 8 px grid
  • Font Family
  • Motion
  • Icons

Web Foundations

Semantic Collections for Web

These consist of:

  • Responsive type tokens
  • Semantic color tokens
  • Responsive spacing & layout tokens
  • Region language & font tokens
  • Brand/Primary

    Light | Dark

  • Gap/Small

    Mobile | Tablet | Desktop

  • Heading Size

    Mobile | Tablet | Desktop

  • Text Copy

    English | German | Korean

Phase 4

Component Optimization

After establishing the system foundations, I rebuilt key components to be lean, adaptive, and responsive. Many legacy components were rigid, fixed-width, and duplicated across teams. By restructuring them with token-based spacing, typography, and flexible properties, I created dynamic, reusable building blocks that scale seamlessly across breakpoints and content types.

This optimization replaced dozens of redundant variants with streamlined, responsive structure. Designers could now build layouts that automatically adapted to any screen or configuration, improving efficiency while maintaining consistency and quality.

Fewer component variantsStreamlined dozens of rigid component versions into flexible, adaptive structures.
80%
Faster design workflowsAutomated responsiveness, cutting time to create breakpoints from hours to minutes.
70%

Phase 5

Rebrand Implementation

Using the new foundations and evolved components, we successfully launched lululemon’s global rebrand - bringing international and web experiences under one cohesive design system. Shared tokens and responsive components allowed teams to update color, type, and spacing instantly, ensuring brand consistency and accelerating rollout across platforms.

The same page after the rebrand: a floating translucent navigation bar with sentence-case links, a split hero, and rounded pill buttons built from the unified component library.
The lululemon homepage before the rebrand: a boxed white navigation bar with all-caps links, a solid white overlay panel listing categories, and a hard-edged “Shop What’s New” button over the hero photo.
The lululemon homepage before and after the rebrand rollout. Drag the divider to compare, or use the arrow keys.

Ongoing

Education & Adoption

With the new system in place, I focused on empowering designers to use it effectively. I led hands-on workshops, office hours, and usability tests to teach responsive design practices, variable use, and governance workflows. These sessions helped bridge gaps in understanding and built confidence in the system’s flexibility.

By pairing education with continuous feedback loops, we increased system adoption and reduced reliance on one-off solutions.

Designers reported faster project starts, greater trust in component reliability, and clearer understanding of how to contribute - turning the system from a resource into a shared foundation for collaboration and quality.

A FigJam workshop board teaching Figma auto layout, with step-by-step panels and a build-your-own exercise area.

Results & Impact

The new design system streamlined workflows, strengthened collaboration, and elevated design quality across teams. By unifying foundations and modernizing components, we eliminated waste, improved responsiveness, and built a scalable framework built to support global growth and brand evolution.

Increase in adoptionTracked in Figma’s library analytics, which count how often teams insert components from the shared library.
85%
Foundations tokenizedEvery color, type, spacing and radius value in the system resolves to a token rather than a hard-coded style.
100%

Summary

Through this initiative, I shaped lululemon’s design system into a scalable, trusted foundation that empowered teams to design and deliver with consistency and confidence. The work bridged strategy and execution - aligning people, process, and technology to reduce friction and enable growth. It was built to evolve as a living system, supporting lululemon’s global brand and the teams who bring it to life.

The lululemon logo, embossed white on white.