Scalable color system
Process
Product color usage audits
Deep research into color systems and color science
Design iterations
Final design
Timeline
5 months
Role
Design lead
Outcome
Light / Dark mode support
Supports up to 12 categorical colors
Sets the foundation for accessible and inclusive color choices in our UI
Future-proofed to scale or change
The challenge
My first project with Magnetic was to create a color system that would scale as Magnetic grew. This color system powers everything in Magnetic (e.g. color tokens for text, buttons, status / severity, charting colors, and more).
Why the previous color palette wouldn’t work
In evaluating the previous color palette, there were several reasons why it wouldn’t scale:
⚠️ Not comprehensive
Lacked enough hues, tints, and shades to support a set of accessible and distinguishable categorical colors
⚠️ No dark mode support
Created with only light mode in mind
⚠️ Non-scalable
No easy way to scale up to add more colors
⚠️ No decipherable meaning / structure
The system’s structure did not allow for an easy way to understand how a color could potentially be used
The previous set of accent colors intended for use in charts. These became washed out in dark mode, couldn’t support the number of categories needed, and didn’t allow for accessible choices.
The solution
✅ Supports light and dark modes
✅ Is systematic in nature with easy-to-follow rules
✅ Can grow or contract if needed
✅ Allows for visually pleasing and accessible choices
Overview
The color palette was created with the LCH color space in mind, where each level in the color ramp represents the amount of light present.
0 is pure black (no light in the color), while 100 is pure white.
Neutral greys have 18 total tints/ shades while all other colors have 12.
Naming structure
Colors that are at the same number in the ramp have approximately the same level of lightness and therefore the same contrast ratios.
For example, because all 60-level colors pass 3:1 against white, they can be used as an icon or graphical element.
Easy-to-apply rules
As part of WCAG guidance on color contrast, there are two key contrast ratios to keep in mind:
Normal body text must pass a contrast ratio of 4.5:1.
Large text and graphical elements such as icons, input field borders, and charting elements (e.g. lines in a line graph), must pass a contrast ratio of 3:1.
Because colors at the same level have the same contrast ratios, this allows for easy decisions when we are deciding on what colors to use in our color tokens (without the need to constantly check contrast).
For light mode:
All 60-level and darker shades pass 3:1 against white (neutral-100)
All 50-level and darker shades pass 4.5:1 against white (neutral-100)
For dark mode:
All 60-level and lighter tints pass 4.5:1 against the main dark mode background (neutral-15)
All 50-level and lighter tints pass at least 3:1 against neutral-15
Color palette <> usage
A key in all of this is that the color system was not created in isolation.
Instead, it was a constant interplay between the colors and where and how they would be used. Thinking through questions such as:
What will be used for our primary text?
Background for the buttons?
What are the potential categorical colors we need?
How will this look in dark mode?
Questions like these helped to guide iteration on the particular hues, tints, and shades in the color system to ensure that we were thinking of real-world usage before finalizing the color system.
Preparing for the future
Choosing the text colors is an example of thinking deeply about usage in the creation of the color system.
Our primary body text uses neutral-15, while our heading text uses neutral-25. Why is that? Color science shows that the smaller the text (and/or lighter in font weight), the higher contrast it needs to be in order to be readable.
APCA is a new and improved way of calculating color contrast, which provides better insight into color contrast for readability (it’s coming to WCAG in the near future). With these colors specifically picked for text, we not only achieve the Silver level of APCA, but also provide the optimal color contrast for readability and future-proof Magnetic for once APCA gets codified into WCAG 3.0.
Key learnings
Through the work and all the deep color research that went into it, I became deeply knowledgeable about so many facets related to color and UI design.
I’ve captured some of the most helpful resources in this document to share with others looking to dive deeper.
The foundation for all things color in Magnetic
The color system is the available set of colors to be used in light and dark modes for elements like buttons, text, backgrounds, status colors, and categorical colors in charts.
Let’s take a look next at how we came to create Magnetic’s default set of accessible status colors.