Bringing more character to the Zalando Design System with theming
Senior Product Designer Gonzalo Vasquez shares how the Zalando Design System team built theming capabilities for our Fashion Store and what they learnt from the process.
Contents
- The visual language of design systems
- The Zalando multi-propositions challenge
- From a consistent to a cohesive and configurable visual language
- ZDS design tokens
- Theming and colour approach with Colour Schemes
- Figma Variables and design tokens
- Designer Theme
- The future of ZDS theming
The visual language of design systems
How an actor assumes different looks and personalities is not only down to makeup and costumes. Often, they change their voice, mannerisms, and even their physique. Each role an actor plays undoubtedly leaves a mark on them, but can it also change who they are as a person? We can apply this same question to the process of altering a design system.
Design systems are usually expressed through a consistent visual language. It’s a brilliant way to establish visual coherency and allow teams to build new features without starting from a blank canvas. The visual language of many design systems tends to be fixed and constant, delivering a set of colour palettes, typography styles and sizes, spacing measures, shapes, and motion presets. These elements, like the visual cues that shapeshift an actor into a character, can rapidly become the recognisable face of the product.
Previously, the Zalando Design System (ZDS) team created The Label, a visual language that equipped us to deliver consistent customer experiences across journeys and platforms. It incorporated recognisable design elements such as vibrant colours, typography pairing, tailored iconography, and high-contrast UI elements. However, we recently identified potential benefits in extending the design system to allow for more variations in the visual language of the Fashion Store.
This new strategic direction was supported by the desire of various internal teams to tailor the current visual language based on our customer’s unique needs. In the design systems realm, these differentiations are usually referred to as themes. A themeable design system can represent different “personalities” supporting more than one visual language. But how far can this shapeshifting go before it changes the core design system?
The Zalando multi-propositions challenge
At the forefront of this transformation was the new experience for Zalando Designer, aimed at creating a more authentic environment for luxury brands. This project challenged us to extend our definitions to implement a tailored theme that would make sense within the customer journey. Most importantly, it encouraged us to reflect on what could happen in the future, and how the system could scale to support other themes or propositions that may arise following our business strategy.
This evolution was even more pressing as some product teams, moving in the same direction as Designer, were already designing and implementing different visual languages on top of the Zalando Design System, overriding existing styles. The problem was that even though these implementations had successful workarounds, they had many drawbacks such as:
- Local overrides were scattered among projects
- Duplication of components and component variants
- Manual changes were required across many touchpoints
In summary, this approach was not scalable.
From a consistent to a cohesive and configurable visual language
Theming is a huge revamp and upgrade to the Zalando Design System. It transforms our visual language from being consistent to cohesive, and more importantly, configurable.
Our exploration considered the following problems:
- Define terms and align across platforms
- Consolidate our current visual language foundations; introduce design tokens that feed the Fashion Store on web, iOS and Android
- Work with the product team to design and build a new theme for luxury brand experiences (Designer Theme)
- Design and implement a scalable token infrastructure and interface that would allow ZDS to manage and deploy new and future themes.
We started by taking a step back and defining the concept of a ‘theme’ within our team. There are many definitions out there, and they are all correct, but not all of them will work for the specific case. Depending on whether we are trying to cover many brands, propositions, or seasonal campaigns, or we are considering a white-label approach, the definitions can look very different.
At ZDS, we defined a theme as:
- A defined set of changes in our design system visual language, retaining the same functionalities and structure of the design system
- It provides a distinctive and tailored look and feel for propositions
- It maintains coherency with the overall brand identity of Zalando
Design systems build themes based on design tokens. Tokens are the standard solution within the industry, especially if we want to scale and have control and visibility of the possible changes. At ZDS, we went on a full exploration to define design tokens, creating a categorisation and naming system and considering how to apply them in a multi-platform setup. For the web platform, we already had a token set in place (CSS variables). However, it had to be extended and challenged to make use of Style Dictionary and for it to be consumed by our app platforms.
Only Colour, Typography and Grid styles were available on Figma when we started the project. Figma did not initially release design token integration. However, Variables, released in 2023, was a good improvement on previous tools. Variables types, along with Variables Collections and Modes, became a great fit for the architecture we were building.
We also have a Colour Snap tool, which we use to manage all the campaign colours. It helps us to cover all the UI with very few colour tokens. Instead of designers needing to hand-pick colours, Colour Snap automatically selects them from the product image. Most of Zalando’s bright background colours come from this tool. It also sets the text in our components to be light or dark depending on the colours offered to ensure accessible colour contrast combinations.
Design tokens
Like actors in a film or play, design tokens can assume different values across themes while still being the same token. The main idea is to infuse components with tokens. As a result, these components can assume different “personalities” and ultimately represent different themes. This exercise usually starts with colours. We built a small and scalable set of colour tokens based on a simple framework: Background, Text, and Border. Finally, we built systematic naming conventions for current and future design tokens. We ditched the idea of primitive or global tokens in favour of a purely semantic approach. We also opened the door for a few specific cases to use component tokens.
Our final set of design token covers:
- Colour
- Typography
- Font family
- Border
- Ratio
- Size
- Spacing
- Grid & Breakpoints
Theming and colour approach with Colour Schemes
Usually, a new theme is created by changing (overriding) colours and typography. We wanted to reduce the need to create a new theme every time a team would ask for more colour variations. As such, we introduced a concept called Colour Schemes. The mix of our high-contrast UI with our current visual language and Colour Snap tool allowed us to deliver countless combinations. We grouped all these options under different Colour Schemes per theme. Depending on whether the backgrounds are light or dark, colour options are dictated based on the contrast. Colour Schemes are a subset of a theme; they only affect colours, and each theme can have more than one colour scheme.
Our Base Theme offers three colour schemes:
- Default
- Monochrome light (light background and dark text)
- Monochrome dark (dark background and light text)
The Designer Theme, with its monochromatic approach, only needs one default colour scheme:
Colour Schemes can be combined and nested under the same theme. This huge range of possible combinations enabled us to begin removing a large number of colour-related components and variants. In Figma and Web libraries, we deprecated all the variants referring to “Light/Dark,” “White/Black,” “OnLight/OnDark,” and “Inverted.” Meanwhile, we transitioned to only using Colour Schemes to set light or dark containers.
Figma Variables and design tokens
We opted not to use external plugins early on, given the support needed for our wider design community. We built a full set of collections with Figma Variables for our two initial themes (Base and Designer) and a collection with three Colour Schemes.
Designer Theme
As I mentioned earlier, the main reason to introduce theming was the upcoming Designer experience. This theme would solve a specific challenge for the Designer proposition which couldn’t be covered by Zalando’s existing Base Theme without heavy intervention in the UI. When the product design team behind Designer, Emerging Propositions, set out to reimagine the experience, they tried to answer the following question:
How might we create an elevated Designer experience that speaks the same language as luxury brands and tells a consistent story across the journey?
As we worked on implementing the infrastructure and migrating our ZDS components, we successfully covered most of the particularities of this new visual language. But from a product perspective, a theme feature is not a silver bullet, especially within an e-commerce space where changes and experimentation happen daily. Trying to include everything in the theme would turn our design system team into a bottleneck for every update or feature that needs to be tested and released.
The future of ZDS theming
Following the successful launch of the Designer experience, the Emerging Propositions team has been working hard on the new releases, focusing on motion elements that will deliver an even more elevated Zalando Designer experience. This improvement to our design system means motion capabilities will also be available for the wider Zalando experience. At ZDS, we are continually enhancing the system with new features, specifically using Colour Schemes to support a wide range of colour combinations and typography style variations. Besides this, there is an ongoing effort to spread the word and usage of design tokens through presentations, demos, and constant communication with our over 200-strong product design community.
Christian Bale said acting centres around empathy: “It’s got to do with putting yourself in other people’s shoes and seeing how far you can come to truly understand them.” Likewise, the visual “personalities” our design system represents are driven by a deep understanding of our customers’ needs. With all the new capabilities our team has delivered, the Zalando Design System is also imbued with the creative spark it needs to powerfully perform, meeting the upcoming challenges of Zalando’s ever-evolving design approach.
If you are eager to learn more about the Zalando Design System’s evolution, our team will present the theming topic in depth at Figma’s Config 2024 conference from the 26th to the 27th of June in San Francisco.
Key learnings
Are you about to tackle a similar revamp of your organisation’s design system? Here are some of our key learnings from the process of implementing theming into the Zalando Design System.
- Defining concepts like design tokens and theming as a team focuses discussions and improves alignment.
- Start with a small set of design tokens and go from there. Aim to have a manageable list of tokens that can help designers and engineers instead of trying to cover every use case.
- Don’t be afraid of component-level tokens. You can use them for some components, which can give you great flexibility to set the features of different themes while introducing controlled complexity. They don’t need to be exposed to users outside the design system team.
- Involve your engineers early in the exploration process, not only to review components and specs but also to discuss the architecture approach, naming conventions and reserved concepts — especially if you support more than one platform.
- Documenting decisions early on is key. This will give you internal consistency during the project and spread the word with the community later in the release.
- After the rollout of your set of tokens and theming capabilities, deliver continuous training and education sessions to bring all your users on board. This is a mindset shift for some designers and the success of token adoption is a long-term goal.
ZDS currently has an open position for a Senior Product Designer. View all job vacancies here.
Next up, read Art Director for Product Design Michael Feeney’s take on how to (re)introduce feel-good emotions into digital products in the dawning age of AI.
