CarMax Color System: Part 1
In October of 2018 CarMax’s design team began to take a second look at their current Color System. It had been around since 2014 and was heavily inspired by Material Design’s Color theory. Nothing was truly wrong with the system but there were some flaws that the Design Team had kept uncovering. The amount of color combinations that passed WCAG AA were very limited, there were four families for blue, & within those color families there were large inconsistencies.
This page is the first of three that explain where the Color System is currently, what it used to be, & the work behind creating the new Color System. Each section dives deeper & deeper into how accessibility was the backbone of Color System 2.0.
Brand Colors
Color System 2.0 works just like any other, the main brand colors are the most dominant while secondary and tertiary colors compliment the rest of designs. For CarMax, our three main colors are Blue-900 (#053361), Yellow-600 (#FD900), & White.
Primary Color Palettes
The following is the system broken up into its’ individual values. Each color family is based on a hue degree which is then divided into 11 color values using a 50 to 1000 labelling structure. The theory behind the hue designations and labelling system will be explained in the following sections but for now just enjoy!
These three families are our primaries since they consume the brand colors. White is left off the Slate 210º family but the Design Team knows it’s available to use. In most of the website’s UI design, yellows are used as accents and backgrounds. The slates are great for typography, component states, & dark mode explorations. Our blues are used for button colors, active states of components, & pervasive as backgrounds.
Yellow
Blue 210º
Slate 210º
Secondary Color Palettes
Just as important but not utilized as often are our secondary colors. These families allow CarMax’s product teams to add splashes of accent color to either emphasize hierarchy or solve usability problems. Though it may seem off-brand, the Raspberry family gave us an opportunity to bring a modern feel into the website and does very well in emphasizing labels, components, or illustrations.
Green 105º
Raspberry 330º
Red 360º
Color Jobs
Once the colors were decided, we wanted to categorize some of the values with certain uses. Since blue is our brand color we wanted to use it as a success indicator alternative & not just use green.
Using the Colors
Below are a few examples of how the colors are used on the website.
Illustrations created by Ashley Smith.