ELC Multi-Brand Design System

The Estée Lauder Companies run a portfolio of prestige beauty brands, and each of them has to look unlike the others while shipping on the same shared commerce platforms. The Enterprise Design System is the answer to that challenge: one component library that serves all brand websites, with a theme per brand.

As Director of the Enterprise Design System I ran the team that built and maintained it: the multi-brand theming architecture, the processes around it, the adoption program, and the roadmap for leadership.

Ten brand theme-library covers with versions and release statuses: Aveda, Bobbi Brown, Clinique, EL Blue Line, Tom Ford, MAC, Lab Series, La Mer, Kilian, Jo Malone

Project goals

  1. A single component library that renders as any brand through theme libraries;
  2. Create adoption and DS support processes for consumers across the org;
  3. Establish a formal design systems team and ways of working with Product and Engineering;
  4. Envision a multi-year system roadmap and regularly report to leadership on the progress.

My role

  • Director, Enterprise Design System, 2024 to 2026, leading a team of nine designers and design technologists,
  • Multi-brand theme architecture: tokens & variables, typography, color, iconography, images & assets, responsiveness and themeability,
  • Annual planning, resource allocation, hiring and team management, quarterly roadmaps and performance reviews,
  • Contribution guidelines, triage and support protocol, brand onboarding waves, education and workshops.
16
brand themes

plus one deliberately off test brand

262k
component insertions

Components v2.3, one year, 21 teams

1.0M
variable insertions

Themes v2.4, one year, 25 teams

0.24%
detach rate

51 detachments in 21,000+ inserts

522
typography configurations

from four components and one token pool

~10 min
to theme a wire

down from weeks

System architecture

The library structure in multi-brand theming architectures is what makes theming practical. A single component library is paired with a white-label theme that includes typography styles, iconography, and photography assets. Brand libraries house typography styles, custom component overrides, icons, and photography. Proof of architecture ran on Figma library swap, replaced with a custom-built plugin down the line.

Tokens are managed through Token Studio and live in the repository, so any destructive actions with Figma files are easily recoverable and do not reach production directly. Sandbox files provide an environment where brand teams can explore evolutions of their brand. Another custom plugin exposes variable mappings visually for targeted updates.

Figma library architecture across three levels: token infrastructure, the libraries the design system owns, and downstream wires and branded mocks
Three levels: the token infrastructure with Token Studio and CI/CD sync, the libraries the design system owns, and the downstream layer where UX owns the wires and brands own the mocks.

Theming architecture

Each brand runs on four token layers: primitives, a semantic theme with light and dark modes, a responsive collection with four breakpoints, and composite typography styles. Typography turned out to be the hard part: Figma variables cannot hold case or decoration, so I made each style a recipe of seven properties, five bound to variables and two set on the style itself. Four typography components over one shared pool unlock 522 configurations, and a brand can rebind any of them without touching the pool, the components, or another brand.

How theming resolves: core components hold no styles, the EDS theme file defines them from semantic variables, and brand libraries swap in per brand
Core components are white-label B&W; the theme file defines them from semantic variables, and each brand library swaps in its own type, icons, photography and component overrides.
Typographic properties table: every value customized per brand, naming conventions fixed by architecture
The customization surface, as the architecture doc defines it; every typographic value is open to the brand, while naming conventions and the component-to-style connections stay fixed as the anchors that make theming possible.

Leading and growing the team

I took over a team of two designers and grew it to nine people working across theming, components, wires, blocks, and developer support, pairing up designers based on skillsets and career goals. All hiring decisions were backed up by resource allocation diagrams highlighting the gaps new hires could fill.

Each phase of the system development required modifications in the team rituals: component development was collaborative within the team, while theme development had to be collaborative across the org.

Resource allocation chart: eight rows of percentage allocations across four quarters, plus three proposed hires
Resource allocation sheet as presented to LT.

Roadmaps and leadership

The multi-year roadmap broken down into quarterly goals helped to set expectations with the leadership team early on. The teams were tasked not only to build a component library, theming, and adoption protocols but also to create reusable block patterns (composite components) as well as to rebuild Enterprise wires (full UX workflows) using new components to unlock themeability.

The full design-system roadmap page: FY24 swimlanes, brand waves, and the years beyond sketched to the right
DS roadmap: the FY24-26 swimlanes and brand waves

Adoption, by the numbers

Design System success is measured by two parameters: how often it is used and whether it's used as designed. Between 200k component inserts and over 1m variables used across 25 teams, the detachment rate stayed extremely low, ~0.24%. Established processes for maintenance requests made it easier to ask for components to be fixed rather than circumventing the system, with a 1 request per day average rate of ticket closure. As a result, theming a large Enterprise wire went from weeks to around 10 minutes with 80 to 95% coverage.

Figma library analytics for EDS Components v2.3: a year of component insertions and the top adopting teams
The library analytics, year view: the ramp from launch to 25,000-insert weeks, with the top adopting teams surfaced.

Work done at The Estée Lauder Companies. Figures are from Figma library analytics and internal planning documents; the brand-level usage shown is limited to public brands.