33 Shades of Green. How We Designed Themed Palettes for X5’s Internal Interfaces
We had 24 components of buttons, four types of select views, ten styles of typography, one palette of Google Material and three request for themed interfaces from Perekrestok, Pyaterochka and X5.
My name is Georgiy, I have been working in x5 since 2019. I designed UX/UI for data-intensive B2B web services, including tables, cards, forms, and dashboards. Starting 2021, I have been engaged in design management.
In this article, I’ll share how we created color palettes and changed the appearance of internal interfaces as per requests from retail chains through theming, namely:
- How we created and adjusted various shades of colors.
- Which tools we used in our workflow.
- How we organized our work.
- The way we tested different palettes and themes.
- Which barriers and challenges we encountered and how we sorted them out.
- What was the result of work and how the palettes influenced the design culture in X5.
Problem definition
At the beginning of the journey, we used Google Material palettes. We chose blue as the accent color to create a neutral informational background, which is better perceived by people with visual impairment.
X5 interfaces are built on Colors [Base] and Colors [Additional] palettes. The first one is used for components and the design of interfaces, while the second one is employed for graphs and labels. Let’s discuss Colors [Base] — the main palette that consists of grey and blue shades:
In 2019, in X5 there was already some progress in components design, and products interfaces were built using the X5’ domestic design system named Join. Then designers began to receive requests for theming.
“Why are the interfaces blue and the brand-book is mostly green?”. Perekrestok
Therefore, we had to develop color palettes for the internal interfaces of Perekrestok, Pyaterochka and X5 retail chains, taking into account the following restrictions:
- Brand-book, including colors and recommendations on their use.
- Available features and supported functions in Figma to work with colors and themes.
- Existing palette progress in our design system.
By the time we started receiving requests for theming, four products had already been under design, awaiting for the Pyaterochka and X5 palettes. Five more products were getting ready for design with the Pyaterochka and Perekrestok palettes. If we did not fix this issue, each time designers would have created local color styles. In the absence of regulations on using colors in internal interfaces, we would face a number of unsystematic solutions that would lead to:
- Increased design debt on the corporate level.
- The lack of uniformity in related products.
- Problems in interacting with interfaces, since most users work with multiple products and have to deal with two or more web-services.
Preparations
We studied the brand-books and websites of retail chains. The accent colors were green and red, so we did not consider black and grey. Red color is associated with an error and is not suitable as an accent color for B2B interfaces, utilized for many-hours-long user sessions:
Then there were also greens. However, it was a bit embarrassing that repainting interface components in green would correlate with the confirming ‘Success’ message. Which is why we looked through the interfaces from different companies that used various shades of green, checked how the interface behaves, and also made test prototypes based on green palette in order to make a decision:
Having found no confirmation of our hypothesis, we concluded that the user perfectly understands the purpose of various interface elements and won’t confuse the confirmational message about successfully loaded files with the green-painted Input element in focused state, when entering the value.
To better understand the task, we wrote out the criteria that we used when working on colors and themes:
- Three independent palettes for each of the brands to cover their business needs.
- Convenient change-over between themes for designers.
- Rapid implementation of theming for development needs.
Developing palettes
Base Palette
The origins of the Base palette are rooted in 2019, when the X5 logo was still orange-black. But we’ve decided that rather than taking corporate orange as an accent color, we will be using the blue Material palette so as not to increase the cognitive load on users. The color naming convention was adopted and adapted from the Material Palette, where the 10th was a light shade, and the 100th was dark.
Initially, the neutral shades were made grey without any other tinctures:
It took us some time to understand that such a color scheme makes our interfaces look dirty. So we tinted the neutral shades, taking the Hue value of color Accent Base 90 as a basis, so that the interfaces look cleaner and more pleasant:
The number of products built using the base palette was growing, and their interface becoming more difficult. As a result, we were facing certain challenges:
- grouping text or functional blocks on a white background;
- designation of lines of the second level in tables;
- hover state of cards on the background painted with Grey 10.
We decided to introduce an additional color level — Grey 5 and Accent 5. For this, we had to shift the steps 10, 15, 20, 30 and test them in our interfaces.
As a result, we’ve got palette of neutral and accent colors, which fits well in tables, cards, forms, text blocks and other interfaces with lots of interactive elements:
Accent palettes and the basic color
We needed to decide which colors from the brand-book we should use as accent. In the dark shades of green the interface of X5 looked gloomy, and in the brighter shades, the interface of Perekrestok looked a bit psychedelic:
We chose moderate green because:
- In terms of brightness, the color from the Pyaterochka brand-book resembled the blue color from the Base palette used for Primary buttons.
- Moderate greens of Pyaterochka and Perekrestok were similar to each other, hence, we could reuse our existing assets.
This is how it looked:
We spelled out every branded color from dark to light using the Material Palette plugin:
The basic level is marked with white circles. The basic level is the color from the brand-book, which we use for Primary Buttons, Checkbox, Tabs, Links and other elements to show interactivity or selected state:
It was evident, that X5 palette was lighter than the Base, Perekrestok or Pyaterochka palettes. We thought that it would be nice to make a single basic color for accent palette at level 80. To achieve this:
- We agreed it with representatives of the X5 brand and raised the base color in the X5 palette a step higher to make it darker.
- In the Base Accent palette, the base color was moved one step lower to make it lighter.
After we determined the base color, we proceeded to manually adjusting the palette.
There were 11 shades in the reference palette of Base, and the plugin generated just 10 colors. We decided to start with the Pyaterochka palettes and edit light colors to add shade 5. First, we adjusted the shades in the HSB color model. We tried to keep the Hue value for the palette and change only the Saturation and Brightness values. However, the shades changed unevenly, and the perception of the tone relative to neighboring colors was distorted. Then we switched to HSL, since it allows to define the values of Hue, Saturation and Lightness independently of each other, making the color brighter or darker, more saturated or bleached:
We added shade 5 to each accent palette, labeled the base color and repeated these steps for the Pyaterochka and Perekrestok palettes. We liked the result:
Grey palette for each theme
Grey color from the Base palette was not visually suitable for themed interfaces; green buttons looked alien on the blue grey background. So, for each of the themes we made a different grey color. The tone of the grey palette was generated via colorscheme.ru:
What we did:
- we took the accent color code and turned on the tetrad mode;
- searched for color by moving the additional slider;
- wrote down the HEX code of the color that we received and took the Hue value;
- duplicated the Base Gray palette and applied the Hue value to it, leaving Saturation and Lightness values unchanged;
- manually adjusted the resulting colors.
And so, we got three grey palettes for Pyaterochka, Perekrestok and X5:
Theming for interfaces
Before Figma published its updates to Variables, we did theming through the Swap Library. I would like to tell you in more detail how we came to this, for you to see the reasoning and logic behind our decisions.
1. Since designers are using the same theme, we decided to divide the palettes into separate files in Figma in order to include only those files that are useful in our work. The resulting files were Base, TSX (Perekrestok), TS5 (Pyaterochka), and X5. Each contained an accent and grey palettes:
2. We considered various options for storing design system components, for example:
- Splitting libraries by themes → each themed UI kit = one file in Figma.
- Add themed components to certain Variants library. For example, Variants with buttons for Base theme consists of 72 button components, plus 216 components for Perekrestok, Pyaterochka and X5.
- Classify by types: atoms, molecules, organisms. The first file would store the components, needed for main elements. The second file would store such components as Buttons, Selects, Dropdown Lists, etc. And the third one would store complex organisms, such as filter collector, table setting functionality, etc.
As a result, we decided to keep the UI kit in one file, since alternative solutions would require modifications and lead to inconvenience in maintaining the component base:
3. To reduce the risks and speed up design process, we decided not to use our own solutions and plugins in Figma. We opted for the built-in functionality of Figma — Swap Library:
We tested, compared, switched themes. In the end, we decided to completely replace blue with green. This decision fits the chosen toolkit; it can be easily described and implemented:
We paint components one to one, using the Swap Library. I.e. we change accent and grey colors of the Base palette to the same-level accent and grey colors of the green palette.
Variables
On June 21, 2023, Figma published Variables. We studied and tested its functionality, then we put together a plan of moving to Variables. We decided to use the following procedure:
- In Colors [Base] file we introduced variables using the Styles to Variables Converter plugin.
- We manually added new columns with colors for TCX (Perekrestok), TC5 (Pyaterochka) and X5 themes.
- For the UI kit file, we used the Destroyer plugin to remove color styles.
Then we published the changes:
You can watch videos on working with plugins on the Figma channel.
How it works
For designers who build layouts using the blue Base theme, the move to Variables happened smoothly in the background.
As for designers that work with green themes of Perekrestok, Pyaterochka and X5, we have provided two scenarios:
- Create new layouts using Variables, and convert the old ones to Variables as needed through the Selection Colors panel.
- Convert old layouts using the Swap Library to the Base theme, remove styles with the Destroyer plugin for local components, and then switch to one of the green themes using Variables.
Depending on the number of layouts, the designer decides which scenario to use.
Testing
During tests, we used the layouts of real interfaces, rather than just colored plates, leveled in tone. We tried to make the color hierarchy more visible, so that users could easily see each state of controls — default / hover / selected / disabled.
To achieve this, we repainted the layouts from other designers using the Selection Colors panel, to take into account various use scenarios. Here’s what we managed to find out during our tests:
- In the Libraries panels, we’ve put the Base, Perekrestok, Pyaterochka and X5 palettes first, since when constructing local components, they are used more often than additional colors:
- 7 out of 10 interfaces are designed using the Base palette, so we decided to set the blue theme by default. The TCX (Perekrestok), TC5 (Pyaterochka) and X5 themes are switched on by designer independently:
- The blue link in the Selected cell with a green background turned out to be a holy war. We decided that blue links are a web standard and hence are more familiar to the user. However, they do not comply with our principle of the “repainting one to one”. We studied various designs from other companies and decided that designers would paint links to green or blue at their own discretion:
Workflow management
We worked on palettes and theming in parallel with the main tasks and under the certain time constraints.
With the completion of the project, I put together some notes I made for myself on the workflow management that can be useful to you:
- Without written records, insights tend to be lost and forgotten in less than a week. That is why we documented all the agreements we came to during discussions.
- One-hour-long meetings once a week were counterproductive. We were spending 30 minutes just to reproduce the agreements and determine further steps. It took us some time to realize this and to extend the timeslots to work with the palette.
- We tried to run a Kanban board, we used Figma functionality to comment our workflows, but the most efficient approach was keeping the ‘plan/fact’ table. In the ‘fact’ column we wrote down the protocols of the meetings, and in the ‘plan’ column we put down the steps to start the next call with. These work notes could be used to bring back the agreements, rationalize decisions or write an article.
- The larger the working group, the more time it takes to agree. There were three of us, working on the palette, and sometimes we invited other designers to find out opinion from the outside.
- Sometimes we came across tasks that completely baffled us, so we had to elaborate such issues ourselves, to study the materiel and come back with new ideas.
- During discussion, it is easy to lose all sense of time and bury yourself in details. You have to moderate your meetings to make them productive and efficient.
- Make the upper-level plan of work and set up schedules. Looming deadlines leave no room for procrastination, help avoid unnecessary detail and bring you to the result. However, extreme time pressure can make things insane.
Results
During our ‘palette project’, we gathered in the requirements, created colors, thought out the theme switching, tested it, wrote instructions and held a meeting with designers to discuss theming and how to use it.
Every year, the number of products using the Base, Pyaterochka, Perekrestok and X5 palettes are growing — today there are 45 such products.
We created palettes, improved the user experience and enhanced user’s interaction with interfaces, raising the design culture in X5 to a new level:
- Now each brand has its own interface theme for internal products that inherits corporate colors. You don’t change just the web services palette of a retail chain, so the continuity of the brand and the uniformity of interfaces are preserved.
- We defined the base color level for all accent palettes, so the visual hierarchy on the products is perceived the same. People will not have to get used to local patterns in products, which improves the overall user experience.
- We tested the palettes on various interfaces received from designers; we found controversial solutions and suggested some ways to improve them. Discussing our progress with UX/UI specialists helped to reveal the nuances of creating palettes and the theming apparatus. As a result, the themed palettes expanded the designers’ tools, making their work more convenient and faster.
