When your design system meets a brand refresh: a reality check

In 2023, as Back Market approached its 10th anniversary, the company decided to mature beyond its rebellious teenage years and retire its signature sticker-like illustrations for a new brand identity. What began in June 2022 as 'just updating fonts and colors' evolved into a comprehensive year-long transformation of our design system and products.

Year

2023

Role

Design System, Design Ops, Management

As a design manager of the design system team, I was in charge of planning the different steps of the migration to the new brand identity and ensuring that every product designer in the company adds the knowledge and tools to go through those different as smoothly as possible without interrupting too much the delivery of new features for their product squad.

Detailed project timeline for Back Market's brand refresh spanning from January to May. The Gantt chart shows parallel workstreams including brand exploration, typographic and color tokens system development, fonts delivery, component migration, and website soft launch milestones with key validation points marked.
Detailed project timeline for Back Market's brand refresh spanning from January to May. The Gantt chart shows parallel workstreams including brand exploration, typographic and color tokens system development, fonts delivery, component migration, and website soft launch milestones with key validation points marked.
Detailed project timeline for Back Market's brand refresh spanning from January to May. The Gantt chart shows parallel workstreams including brand exploration, typographic and color tokens system development, fonts delivery, component migration, and website soft launch milestones with key validation points marked.

Our team seized this opportunity to introduce a new semantic token system for Colors and Typography. This system addressed unique challenges in our new brand identity - including the management of nine different primary colors - while supporting expansion into Asian markets with full Japanese and Korean language support.

2210

new tokens

68

components updated

76

design files migrated

Color token documentation displaying Back Market's semantic color system. The grid shows color scales for various brand colors including purple, cornflower blue, emerald green, and blush pink, with percentages indicating opacity levels and usage guidance notes for maintaining brand consistency.
Color token documentation displaying Back Market's semantic color system. The grid shows color scales for various brand colors including purple, cornflower blue, emerald green, and blush pink, with percentages indicating opacity levels and usage guidance notes for maintaining brand consistency.
Color token documentation displaying Back Market's semantic color system. The grid shows color scales for various brand colors including purple, cornflower blue, emerald green, and blush pink, with percentages indicating opacity levels and usage guidance notes for maintaining brand consistency.
Typography system documentation showing Back Market's semantic text tokens across different weights. The grid displays various 'Aa' samples in multiple colors including black, gold, red, green, blue, purple, and burgundy, each labeled with their semantic token names such as 'main.text.static.default' and 'main.text.static.warning'
Typography system documentation showing Back Market's semantic text tokens across different weights. The grid displays various 'Aa' samples in multiple colors including black, gold, red, green, blue, purple, and burgundy, each labeled with their semantic token names such as 'main.text.static.default' and 'main.text.static.warning'
Typography system documentation showing Back Market's semantic text tokens across different weights. The grid displays various 'Aa' samples in multiple colors including black, gold, red, green, blue, purple, and burgundy, each labeled with their semantic token names such as 'main.text.static.default' and 'main.text.static.warning'
Typography foundations documentation showing Back Market's multilingual type system. The page displays body text samples in Latin, Japanese, and Korean scripts with regular, bold, italic, and bold italic variants, featuring the company's brand messaging about electronic waste reduction in all three languages.
Typography foundations documentation showing Back Market's multilingual type system. The page displays body text samples in Latin, Japanese, and Korean scripts with regular, bold, italic, and bold italic variants, featuring the company's brand messaging about electronic waste reduction in all three languages.
Typography foundations documentation showing Back Market's multilingual type system. The page displays body text samples in Latin, Japanese, and Korean scripts with regular, bold, italic, and bold italic variants, featuring the company's brand messaging about electronic waste reduction in all three languages.

Accessibility became a cornerstone of this refresh. We redesigned most of our component APIs to meet WCAG 2.2 requirements, ensuring Back Market's experience would be truly inclusive for all users. This meant rethinking contrast ratios, interaction states, and information hierarchies across our entire component library.

Design system component documentation showing various list items variations in their default, hover, and active states. The systematic grid layout displays multiple component variants including those with tags, suffixes, and different interaction states, demonstrating the comprehensive nature of Back Market's component library
Design system component documentation showing various list items variations in their default, hover, and active states. The systematic grid layout displays multiple component variants including those with tags, suffixes, and different interaction states, demonstrating the comprehensive nature of Back Market's component library
Design system component documentation showing various list items variations in their default, hover, and active states. The systematic grid layout displays multiple component variants including those with tags, suffixes, and different interaction states, demonstrating the comprehensive nature of Back Market's component library
Component variations showing Back Market's mood system applied to the same electronic waste counter widget. The grid demonstrates how a single component appears across different brand mood color schemes including black, white, purple, green, pink, brown, and blue, maintaining consistent structure while adapting to each context.
Component variations showing Back Market's mood system applied to the same electronic waste counter widget. The grid demonstrates how a single component appears across different brand mood color schemes including black, white, purple, green, pink, brown, and blue, maintaining consistent structure while adapting to each context.
Component variations showing Back Market's mood system applied to the same electronic waste counter widget. The grid demonstrates how a single component appears across different brand mood color schemes including black, white, purple, green, pink, brown, and blue, maintaining consistent structure while adapting to each context.

The final phase focused on our documentation infrastructure. Through targeted workshops with designers, engineers, and product managers, we uncovered pain points in our existing documentation. This led to a complete overhaul of our documentation site's information architecture and the creation of new writing guidelines to ensure consistency across all design system documentation.

Back Market's design system documentation site 'Revolve' showing the components overview page. The interface features a navigation sidebar, component categories, and detailed descriptions for action components like buttons and contextual menus, with a header showcasing pink-themed UI elements against a light background.
Back Market's design system documentation site 'Revolve' showing the components overview page. The interface features a navigation sidebar, component categories, and detailed descriptions for action components like buttons and contextual menus, with a header showcasing pink-themed UI elements against a light background.
Back Market's design system documentation site 'Revolve' showing the components overview page. The interface features a navigation sidebar, component categories, and detailed descriptions for action components like buttons and contextual menus, with a header showcasing pink-themed UI elements against a light background.
Editorial Card component documentation in the Revolve design system. The page displays the anatomy of the card with numbered callouts for thumbnail, kicker, headline, body, and call-to-action elements, using a MacBook pricing guide example to demonstrate real-world implementation.
Editorial Card component documentation in the Revolve design system. The page displays the anatomy of the card with numbered callouts for thumbnail, kicker, headline, body, and call-to-action elements, using a MacBook pricing guide example to demonstrate real-world implementation.
Editorial Card component documentation in the Revolve design system. The page displays the anatomy of the card with numbered callouts for thumbnail, kicker, headline, body, and call-to-action elements, using a MacBook pricing guide example to demonstrate real-world implementation.
Color moods documentation page showing Back Market's theming system introduced in their 2023 brand refresh. The page explains how moods function as subpage themes with a color palette featuring 10 shades including main, inverse, purple, cornflower, emerald, blush, coffee, bush, tangaroa, and violet.
Color moods documentation page showing Back Market's theming system introduced in their 2023 brand refresh. The page explains how moods function as subpage themes with a color palette featuring 10 shades including main, inverse, purple, cornflower, emerald, blush, coffee, bush, tangaroa, and violet.
Color moods documentation page showing Back Market's theming system introduced in their 2023 brand refresh. The page explains how moods function as subpage themes with a color palette featuring 10 shades including main, inverse, purple, cornflower, emerald, blush, coffee, bush, tangaroa, and violet.

To explore the technical architecture and engineering solutions behind our mobile apps migration, check out Jean-Charles Sorin's detailed breakdown in his article:

Discover the Magic Working Behind our New Mobile App Rebranding.

See More

See More

v1.2

© 2025

v1.2

© 2025

v1.2

© 2025

tl;dr

tl;dr

tl;dr