Net-A-Porter & Mr Porter — One design system for two luxury brandsNet-A-Porter & Mr Porter — One design system for two luxury brands

The brands: Net-A-Porter and Mr Porter, two luxury fashion retailers owned by YNAP. Each had its own design system and style guide.The brands: Net-A-Porter and Mr Porter, two luxury fashion retailers owned by YNAP. Each had its own design system and style guide.

The goal: one design system that runs both brands in a single application, on web and native app, in English, Arabic and Korean.The goal: one design system that runs both brands in a single application, on web and native app, in English, Arabic and Korean.

Team: I started on my own; two senior and two junior designers then joined and reported to me. A lead designer above me handled communication with the wider business, and the developers were from Mindera.Team: I started on my own; two senior and two junior designers then joined and reported to me. A lead designer above me handled communication with the wider business, and the developers were from Mindera.

My part: I defined the token architecture, built the component system, led the team of four designers and created the first page templates for both brands.My part: I defined the token architecture, built the component system, led the team of four designers and created the first page templates for both brands.

Timeline: October 2022 to March 2023.Timeline: October 2022 to March 2023.

The two brands share a business but not a look. Net-A-Porter is minimal, with a black header. Mr Porter is editorial, with a light header split by a heavy black rule, and underlines.The two brands share a business but not a look. Net-A-Porter is minimal, with a black header. Mr Porter is editorial, with a light header split by a heavy black rule, and underlines.

There was no shared token structure, and swapping colours and fonts can’t turn one header into the other. When I proposed a single navigation component for both brands, engineering said it couldn’t be done.There was no shared token structure, and swapping colours and fonts can’t turn one header into the other. When I proposed a single navigation component for both brands, engineering said it couldn’t be done.

Core tokens: the raw palette and type scale for both brands, down to their two slightly different blacks, plus 23 core text styles set in each brand’s typefaces.Core tokens: the raw palette and type scale for both brands, down to their two slightly different blacks, plus 23 core text styles set in each brand’s typefaces.

Decision tokens: names that describe how a component uses a value, such as --color-primary-default, --accordion-title-font or --checkout-payment-summary-total-font. Each brand points them at its own core values.Decision tokens: names that describe how a component uses a value, such as --color-primary-default, --accordion-title-font or --checkout-payment-summary-total-font. Each brand points them at its own core values.

Why: components only ever reference decision tokens, so a component built once takes on the right brand when the theme changes. More than 30 component-level typography tokens carry each brand’s personality, and colour decision tokens keep interactive states consistent.Why: components only ever reference decision tokens, so a component built once takes on the right brand when the theme changes. More than 30 component-level typography tokens carry each brand’s personality, and colour decision tokens keep interactive states consistent.

What it meant: each brand keeps its own identity, with one set of components to build and maintain rather than two.What it meant: each brand keeps its own identity, with one set of components to build and maintain rather than two.

What I saw: the differences between the headers weren’t only colour and type. Mr Porter has elements that Net-A-Porter doesn’t, such as the rule between the logo row and the navigation row.What I saw: the differences between the headers weren’t only colour and type. Mr Porter has elements that Net-A-Porter doesn’t, such as the rule between the logo row and the navigation row.

What I did: I re-architected the navigation component from the inside: its atoms and molecules, its layer structure and its groups. Every difference between the brands became a token value. The rule between the two rows, for example, is 0px tall for Net-A-Porter and 4px for Mr Porter, so it disappears in one theme. The visual design didn’t change by a single pixel.What I did: I re-architected the navigation component from the inside: its atoms and molecules, its layer structure and its groups. Every difference between the brands became a token value. The rule between the two rows, for example, is 0px tall for Net-A-Porter and 4px for Mr Porter, so it disappears in one theme. The visual design didn’t change by a single pixel.

The outcome: two days later, I demoed it to a room of about ten people: one component that became either header when only the tokens changed, so both brands could share one navigation. The working demo moved the discussion from whether it could be done to how to adopt it.The outcome: two days later, I demoed it to a room of about ten people: one component that became either header when only the tokens changed, so both brands could share one navigation. The working demo moved the discussion from whether it could be done to how to adopt it.

Components: more than 200 shared components, each themed for both brands, so over 400 brand-specific versions: buttons, forms, accordions, product cards, banners, carousels, controls, notifications and dialogs, on shared foundations for colour, spacing, grid, shadow and radius.Components: more than 200 shared components, each themed for both brands, so over 400 brand-specific versions: buttons, forms, accordions, product cards, banners, carousels, controls, notifications and dialogs, on shared foundations for colour, spacing, grid, shadow and radius.

Specs for developers: every component documents whether it differs between the brands, with specs for each brand across four breakpoints and line heights that work for English, Arabic and Korean.Specs for developers: every component documents whether it differs between the brands, with specs for each brand across four breakpoints and line heights that work for English, Arabic and Korean.

Page templates: more than 13 on the system, each in both brands, including navigation, search, product pages and checkout. Ten of them also have native app screens.Page templates: more than 13 on the system, each in both brands, including navigation, search, product pages and checkout. Ten of them also have native app screens.

The team: the four designers in my team used my components to build the site’s pages, and built out checkout and the Arabic and Korean versions on the system.The team: the four designers in my team used my components to build the site’s pages, and built out checkout and the Arabic and Korean versions on the system.

The brief: Net-A-Porter also runs in Arabic, so the system had to work right to left as well as left to right.The brief: Net-A-Porter also runs in Arabic, so the system had to work right to left as well as left to right.

Mirrored layouts: pages and components flip for Arabic. On the product page, the images move to the right, the details to the left, and arrows point the other way.Mirrored layouts: pages and components flip for Arabic. On the product page, the images move to the right, the details to the left, and arrows point the other way.

Start and end, not left and right: spacing and alignment are specced as start and end, so one spec works in both directions.Start and end, not left and right: spacing and alignment are specced as start and end, so one spec works in both directions.

Arabic type: type styles and line heights set for Arabic script.Arabic type: type styles and line heights set for Arabic script.

Who did it: I set the rules for right to left, and the team and I designed the Arabic pages on the system together, such as this product page.Who did it: I set the rules for right to left, and the team and I designed the Arabic pages on the system together, such as this product page.

The project stopped before launch when the wider business deal it was tied to fell through.The project stopped before launch when the wider business deal it was tied to fell through.

What it reached: by then, the system worked across both brands, including the navigation, and the first page templates and the team’s pages were built on it.What it reached: by then, the system worked across both brands, including the navigation, and the first page templates and the team’s pages were built on it.

What it proved: one component library can carry two distinct luxury brands, including structural differences that standard theming can’t handle.What it proved: one component library can carry two distinct luxury brands, including structural differences that standard theming can’t handle.

A working demo settles an argument: two days of building convinced the room faster than any discussion could.A working demo settles an argument: two days of building convinced the room faster than any discussion could.

Theming is more than colour and type: when brands differ in structure, the structure itself has to live in tokens.Theming is more than colour and type: when brands differ in structure, the structure itself has to live in tokens.