lululemon · 2023 to 2025

Canvas: Scaling lululemon’s internal design ecosystem

A shared design foundation for complex enterprise tools, built alongside active product development.

Project scope

teams building tools in Excel: 20+
designers coordinated: 3
engineers coordinated: 9

The Raw Materials Costing Tool home, the first tool to prove Canvas worked. Switch between the vendor and lululemon costing views.

01 · System context

lululemon operates two design systems: DAISY supports customer-facing experiences, while Canvas powers internal tools for product development, sourcing, and costing.

When I was brought in, the internal tools existed only as Excel spreadsheets. DAISY’s library didn’t work for any of the tooling, and more than 20 teams were building tools this way. lululemon wanted a design system for internal tooling, and there was nothing to start from.

I led design for both Canvas and the Raw Materials Costing Tool, coordinating 3 designers and 9 engineers across parallel workstreams.

lululemon.com homepage built with DAISY: the main navigation and a fall outerwear campaign with the headline Quiet the weather. — **DAISY**Customer-facing experiences.

Header of an internal Canvas screen: the Raw Material Costing title bar, the Create a cost sheet heading, and tabbed sections. — **Canvas**Internal tools for product development, sourcing, and costing.

02 · System problem

SymptomMore than 20 teams ran product development, sourcing, and costing work in Excel spreadsheets instead of designed tools.

Root causeDAISY was built for customer-facing experiences and didn’t work for any of the tooling. There was no system for internal tools at all.

System responseGet something usable in one month. Working with the dev director, we skinned PrimeNG to create Canvas v1, then refined it through a rebrand six months later.

The same costing work in Canvas: the Create a cost sheet screen with eight step tabs showing a cost per step, the buyer request, labeled specification fields, a live offered price compared with the target, a cost breakdown, and Save and Submit buttons. — Illustration with sample data. Costing moved from spreadsheets into a designed, widely adopted Angular tool.

03 · System architecture

Canvas started as a skin on PrimeNG, which gave teams proven component behavior from day one. Six months into v1, lululemon’s rebrand gave Canvas a palette of its own, tuned for clarity in dense tools.

PrimeNGComponent behavior. PrimeNG provided the underlying structure and interactions, so teams could modernize quickly instead of rebuilding common UI elements.

CanvasDesign system. A PrimeNG skin in the first month, then a clearer palette after the rebrand: shared styling, component specifications, and interaction patterns for complex internal workflows.

Internal toolsImplementation. Teams consumed Canvas components across their tools, creating consistent experiences while retaining the flexibility to address product-specific needs.

Comparison board. Top row, stock PrimeNG: tabs, a donut chart, a success message, and a checkbox. Bottom row, the Canvas versions: tabs at desktop, mobile, and item sizes; a 95% on-time performance ring; error, info, success, warning, and neutral messages; and checkboxes in seven states. — Stock PrimeNG components (top) and their Canvas versions (bottom): tabs, charts, messages, and form controls.

04 · Key decisions

Constraint: There was nothing to start from, more than 20 teams were building tools in Excel, and we had one month to get something usable.
Decision: Working with the dev director, skin PrimeNG instead of building components from scratch.
Tradeoff: Canvas worked within PrimeNG’s component structure, so some changes were limited to what PrimeNG allowed.

Stock PrimeNG tabs with a blue active underline. — PrimeNG tabs

Canvas tabs in desktop, mobile, and item sizes, with a red active underline. — Canvas tabs, in three sizes

Constraint: Six months into v1, lululemon rebranded. Brand red competed with error states, and DAISY introduced a new set of warm tones.
Decision: Strip brand red from components so errors stay clear. After a round of testing and research, keep a neutral gray palette for clarity, and adopt the warm dark grays and blues.
Tradeoff: Canvas became a little more disconnected from the main brand, but the tools were clearer to use.

Constraint: Teams were adopting Canvas mid-transition. Some were still half in Excel while they built, and others got something up quickly in React that didn’t fully match.
Decision: Let teams adopt the system where they were, then bring their tools into alignment over time instead of requiring a full switch up front.
Tradeoff: Some items were only skinned to match Canvas at first, without using the actual components.

05 · Accessibility

Accessibility lives in the component specs, so every team inherits it.

06 · Scaling the system

Click a stage to see how components moved from request to retirement.

Propose

Review

Document

Implement

Maintain

Select a stage above.

07 · Adoption

The Raw Materials Costing Tool was the first to prove the design system worked. It secured both budget and additional executive buy-in for Canvas.

Cost sheets are dense, multi-step forms. In the Raw Materials Costing Tool, Canvas patterns like grouped fields, clear required and optional states, autosave, and status tags keep that complexity manageable.

Designed primarily for desktop. Floor managers and other supplier roles can also view it on tablets and phones.

Try it: the Create a cost sheet flow, rebuilt with sample data. Move through the steps and the offered price updates as you type. It isn’t lululemon’s production code.

A second tool, the POC Tracker, built on the same Canvas components.

Try it: the POC Tracker’s create request flow, rebuilt with sample data. A different workflow on the same Canvas components: filters, status tags, selectable table rows, and request actions. It isn’t lululemon’s production code.

Components migrated: 78
Teams onboarded: 8

08 · Outcome

Months to full migration, no product freeze: 6
Vendors using the costing tools: 500+

What changed: Internal tools that once lived in Excel now share one foundation, and each team moved onto it on its own release schedule.

What I’d change next: I would have taken us out of the PrimeNG ecosystem earlier. We stayed in it for a while to buy time on the front end, but it boxed us in.

See the leadership story on kirstenstryker.com ← All work