Colors that make sense
A walk through our journey with semantic colors
Over the past months, we revamped how we approached colors in our design system, Cobalt. Colors are a fundamental element of UI: They structure visual language, help to define the brand, and are used by developers and designers every day for building our product.
However, without clear guidelines, colors can lead to a very messy product when they are misused by multiple designers.
Let me tell you how we did it and what challenges we faced throughout this project which is, as you will see, not as simple as it seems: .
- I will first explain how colors were managed at Getaround, both on the design and tech side
- I will outline the limit of this system, and ask how we could improve it
- Then I will introduce you to the world of Semantic Colors
- Finally I’ll go concrete and show you how we implemented it, and the advantages it brought!
This is the first post of a 3-articles series.
Follow Inside Getaround to be alerted when we publish the next posts.
1️⃣ How we used to manage colors at Getaround
On the design side
Like many design teams, we use Figma as our primary design tool.
Our colors are documented in a “Foundations” library where you can find all the common styles we use in our product like font styles, colors, icons, and more.
This library feeds then the dedicated system librairies we work with on a daily basis (iOS, Android, Web, Emails).
The color names used to be based on their appearance.
For instance Purple color was our primary color, and Graphite-Base regular color for basic texts.
On the tech side
In our apps we used to have the same system.
In addition there were some semantic colors, but only on iOS, and developers didn’t tend to use them.
2️⃣ Limitations we faced with our old system
Working with this system, teams repeatedly faced the same questions:
- How can we be sure that colors are used in the same way from one designer to another?
- Without proper guidelines, how can we be sure to handover correctly from designer to developer?
- What if tomorrow we have to revamp our branding with a completely new color scheme?
Let’s try to find out how did we end up in this situation?
No clear color usage guidelines
All designers used the same color palette but there were no explicit rules or guidelines on how to use them since the Getaround rebranding in 2019 As well as introducing inconsistencies, designers were lost when choosing a color.
They then would start building their own references and each designer had a different source of truth.
Design debt from the old Drivy branding
Remember, we used to be Drivy before (we joined forces with Getaround to go global). Some old colours were still in use from the previous brand (shades of blues on button, titles…). No real action plan was on the agenda to harmonise them.
3️⃣ What we imagined for a new color system
In early 2021 we had the chance to work on a long-term UI vision for our iOS and Android apps.
We asked ourselves “What would our apps look like in 5 years?”
We stepped back for a moment and thought about how the Getaround brand could be at the center of our visual approach.
The Cobalt team working on the design system took the opportunity to rethink the color system. However, to make this vision a reality we had some challenges ahead :
Build strong guidelines
How can we make sure that every designer can rely on a color system that is easy to understand and to use? Having a simple system would make adoption faster.
Accessible by design
How can we make sure to design accessible colors from the start?
Future Proof
How can we make a system that is easy to maintain and meets industry standards now and tomorrow (ex: enable dark mode)
4️⃣ Our new color system: Semantic Colors
During our exploratory phases, working in a shared environment in Figma pushed us to save and document the design decisions we made.
Like how we should name our accent color: (Accent? Primary?)
We also tested what the app screens could look like in dark mode, and how to correctly support that. Should we create a separate color palette or create a dark version of each component?
We started to discuss the issue with our engineers to understand what solutions they had to handle these problems.
The concept of semantic colors was quickly put on the table by engineers as they knew and use this concept very well. Fantastic!
But how could designers appropriate and use this concept?
But what is a semantic color?
Semantic refers to a way of naming colors based on how they are used as opposed to their hue.
It’s possible to even go further by naming colors according to the way they are applied on a screen
For example backgrounds colors , buttons background colors , text colors, icons colors, etc…
From an appearance-based color scheme…
… to a semantic-based color scheme
☝️Semantic colors are not new, more and more in products are adopting them. We were inspired by Google, Apple, Shopify and Asana
Clearly this color system has many advantages. So let me explain now how we adapted this concept in practice to our product and our usages:
Deep dive into semantic colors
Our new color system is composed of 2 things:
- The Base Palette
- The Semantic colors
The Base Palette
We worked closely with the Brand team who defined a whole new branding that we took into account while working on these new foundations.
Each color of the brand is adapted in several shades in order a create a larger panel of possibilities: the Base Palette. It represents all possible colors that can be displayed in the Product. The team might not use them all, but they will pick the ones that work the best in the Product.
To learn more about our journey towards a more accessible product, you can check the second part of this series here:
🍭Re-approaching colors in a more inclusive way (follow Inside Getaround to be notified when new posts are out!)
Semantic Colors
Semantic colors are built upon the Base palette that serves as reference.
As I explained before, the naming doesn’t refer to the “appearance” of the color anymore (magenta, brown, green…) but to UI elements they are applied to (Text, Icon, Button, Background…) and the state of this element (Active, Inactive, Success…).
See here the nomenclature and some examples:
This means that a color from the base palette can be used in multiple semantic colors:
This is how we readapted the color naming based on this new principle:
We conducted internal user tests with designers and engineers via design critics to define the best way possible to name our Semantic Colors.
We tried a lot of different approaches for naming, and found that having too detailed a naming system would be too complicated to maintain and use for the size of our team and Product.
We decided to have something simple to maintain while having the enough possibilities in terms of naming.
5️⃣ The benefits of Semantic Colors for Getaround
Semantic colors embed design principles
Semantic colors focus on the purpose of the colors. It removes guess work for designer and developers on what color to use, as the visual language directly conveys the design decision.
It unlocks Dark mode
A Semantic color can be adapted in different themes. The name of the Semantic color is always the same but its appearance can change depending on the chosen mode. For instance, the semantic color Primary background could refer to a White in the Light Mode and a Black 500 in the Dark mode. Depending the mode chosen by the user the right color will be displayed automatically. That was a real game changer for our Design System as it would make it even more future proof.
Semantic colors are efficient and flexible
Using semantic colors will also make it easier if we are to update our colors in the future.
Let’s say we want to change our primary color to blue (for a rebranding for example — see Update 1 on the visual below).
We will just have to update the Purple from the Base palette to Blue.
All Semantic colors linked to that color will be magically updated too.
Another situation could be to update a color for a specific UI element such as a button (see Update 2 on the visual below)without touching the other element that use the Purple color. In that case, we would just have to update the ButtonBackground.Primary color. Simple.
Without that system in place, updating colors would have gone through a lot of QA to make sure that changes are applied everywhere.
Guidelines for color combinations
This system seems rather easy to use, but some questions remain for designers:
- When can i use Text.Info?
- When can i use Fill.Subdued?
- When can i use Icon.AccenAlt?
To help designers in their color choices, we created an interactive guide that lists all possible color combinations.
We created this guide in a figma prototype, which gets updates each time a change is made to the design system colors. It highlights the semantic color combinations which are permitted, to maximize consistency. For example Text.Info color can only be used on Background.Info color.
It’s a useful companion when creating a component or for a designer’s onboarding to appropriate the Getaround visual language.
Results
Going with this new color system has resulted in several changes :
- We extracted the colors from the “Foundation” library (see §1) and split them between Dark and Light mode. This move allows us to easily switch a design file from 🌝 Light to 🌚 Dark mode with the Figma swipe library feature. This also makes the library lighter and easier to maintain.
- The Semantic colors have been successfully implemented on our iOS and Android apps, and we are now working on using the same system on our web platform. We will soon have a centralized color scheme to deal with colors on all systems.
🙂 To be continued - articles 2 & 3 of this series are coming soon, follow Inside Getaround to be notified when they’re out:
> Re-approaching colors in a more inclusive way (now available)
> Semantic Colors, part 3 (🌚 Dark mode) (Coming soon)
Thanks
This article was made with the help of the Cobalt squad (Design System team) and the brand team 💜
Like the sound of product design at Getaround? Got plenty of ideas on how to make our product better? We’d love to hear from you. Take a look at our vacancies.
Your own experience with colors
Did you experiment with semantic colors or an alternate classification method? Do you have additional questions on our journey with Semantic Colors? Let me know in the comments below.
And if you liked this topic, give this article a few claps 👏, it helps us pinpoint the most interesting topics to talk about next.
