Design System: Foundation / Colors

Tealium has had a few minor efforts at creating a design system. After two separate attempts that were incredibly incomplete, and difficult to maintain. It became a goal for 2020 to institute a full fledged design system. In doing so, foundational elements such as grids, iconography, and typography topped the list, with priority number one being a color system.

Unlike most design systems which focus on a just a few hues, and possibly 8 levels of brightness, Tealium's design system is intended to eventually extend beyond the product alone, and into customer touch-points including community forums, and marketing material. We desired to build out a full pallet across many hues that could be used for user generated badges and labels, while still looking good with the product pallet.

As a whole, the the color system was inspired by San Diego, the home of Tealium's headquarters. The vibrant colors of the consistently blue sky, aqua color of the water, yellow accents on buildings, etc. all played a part. The overall look of the product is white and bright, and the vibrant accent colors give it a friendly feel that is fitting with the company's culture and offsets the dreary corporate feel of legacy enterprise applications of the past.

Several system level constraints helped define our pallet such as reserving status colors like red, orange, and green to only be used for indicating status (success, failure, warning). This drove the use of desaturated colors like Mint and Coral to be incorporated for use in areas such as customer defined labels, as well as in charts and graph visualizations. Blues and purples, being status neutral, were expanded to allow a broader range of hues for use in gradients and well as charts and graph visualizations.

Care was taken to avoid a muddy looking pallet as dark shades of yellow and orange often do if applied uniformly across hues. Similarly, the pallet was reduced by removing many of the darker colors where it wouldn't be clear what the difference between the colors would be, for example Aqua 850 vs. Sky 850.

Another deliberate decision was to avoid a straight pallet of grays. Our system grays start out with no saturation on the light side, and build up a slight blue saturation as they get darker. While gray is appropriate and often used to shade areas such as header backgrounds and toolbars, the slightly saturated dark text helps takes away dullness of gray on gray.