Coveo
Product designer
Description
Revamped Coveo's design system as a product designer intern for the Platform team.
About the company
Coveo is a leading provider of AI-assisted search experiences to major customers such as United Airlines, Dell, Adobe and Salesforce.
Creating an accessible palette
Following Coveo's brand guidelines, I created a new color palette for Coveo's products to improve accessibility and enable theming in dark and light mode.
The revamped color palette was build in the HSLuv color space to provide perceptually uniform and user-friendly color representations.
Color palette revamp for Coveo products build in Primer Prism.
Percpetually uniform colors
Perceptually uniform colors means that two colors will appear as bright to users even if they are different colors. For instance, the colors below have the same contrast despite different hues.
Two equal shades with the same contrast.
Perceptual uniformity is useful to ensure that colors are visually consistent and predictable to the human eye across colors and equal shades.
This uniformity is possible when all color scales follow the same lightness curve as shown below.
Lightness curve applied to the purple and blue color scale.
Arriving at perceptual uniformity across shades was accomplished in part by using Primer Prism, a tool developed at Github when facing a similar challenge as ours.
I recommend this article Perceptually uniform color spaces, for a deeper dive on perceptual uniformity with colors.
Color accessibility
Perceptual uniformity enables to create a single color contrast grid where contrast between each color grade from the palette is clearly laid out.
The grid was shared with designers to be sure that accessible color pairs could be easily chosen when assigning colors to design tokens.
The goal was to ensure that content across the Coveo platform is readable and usable for individuals with various levels of visual impairment.
Color contrast grid developed for Coveo's color palette.
Dark and light mode
A perceptually uniform color palette also helps make sure that color transformations, such as lightening or darkening are consistent across shades. When handling dark and light mode, this helps attain a uniform look in both across color themes.
Coveo's modal component in light and dark mode.
Creating design tokens
Design tokens are arguably a must-have to ensure a uniform and consistent application of design foundations across interfaces.
So I started with establishing naming conventions for our design tokens, then built a tool for naming our tokens, and finally created, tested and applied the tokens as Figma variables in our existing libraries.
Naming conventions
Naming conventions were created based on our current needs and existing systems, and iteratively validated with our design system users.
Design tokens naming structure.
To provide a structure for segmenting tokens, three classes were established: primitives (the color palette), generics as core set of tokens, and component-specific tokens. More on this approach can be found on the design system guide.
Multi-layer architecture to serve tokens as Figma variables.
To name the tokens according to conventions and with uniformity across use cases, I created a design token naming tool using Google sheets. Tokens could then be exported to a JSON file and later be imported in Figma.
Snapshot of tool created to name tokens.
Once the tokens were imported in Figma, values were assigned to each token. The color contrast grid was used here to ensure the chosen shades would be accesible when applied.
Design tokens implemented with Figma variables.
Implementation in Figma
Tokens were implemented in Figma using variables. We chose a three-tiered dependency structure to segment tokens in Figma. This meant a separate Figma library for each set of tokens.
For broad adoption of tokens across design teams, I also made sure the tokens could be easily found using specific keywords via Figma’s style search functionality.
Searching for text color tokens via Figma search
Once color tokens were created, it was time to test. Testing was done by applying the newly created variables to a duplicate of our component library.
This allowed to directly evaluate tokens and adjust when needed.
Documentation
A documentation was built to ensure standards and best practices could be consulted and referenced by users of the design system.
It was a way for me to share all the secrets I discovered along the journey of creating the palette and the design tokens.
Fields forming the token naming convention.
Teammates said
I had the chance to work with some talented, hard working and smart people. Here are some of the things they said about my work.
Gustavo R.
Staff designer
•
Coveo
You've been consistently raising the bar and improving our standards from day 1 (or more like week 2).
I was truly impressed by your work defining a more accessible palette, your recommendations on luminance and its unbreakable logic, or the thorough DS audit you so skillfully prepared and broke down for us to better understand.
Our Design System practice at Coveo is still in need of love, water and sunshine to continue growing healthily, and your contributions so far have already made a huge impact in its maturity, and ours as a team.
Thank you so much for all the difference you've made so far Dom. Really looking forward to see how we unravel the implementation of tokens and other demons
Hugo B.
Design lead
•
Coveo
Domenico is certainly the most talented intern I've worked with to date.
Meticulous, attentive to detail, and striving for perfection in every assignment, he quickly became autonomous and a key and indispensable part of the team.
It's a real pleasure to work with him, and I already know that he'll soon become an even better designer!
