Kissmetrics Color Consolidation

How do you rework CSS to eliminate bloat and overcome technical debt?

The Problem

The Kissmetrics platform has been iterated on and grown significantly over its lifetime. A lot of people had their hands on the product over the years, and as it matured, the color palette got a little scattered. The Kissmetrics platform CSS had thousands of color definitions. Our task was to consolidate all of these colors into using a newly defined color system.

Guiding Principle

Styling systems foster extensible codebases.

Kissmetrics

kissmetrics.com

Marketers use Kissmetrics to find the people behind the interactions. We helped them make their product even better.

Competencies used
  • Front-end Development
  • Interface Design

926 original colors

20 final colors

With numerous people working on the same product, the colors were difficult to keep consistent without a clear plan. New Sass variables for the same color had been unknowingly created in numerous occasions. Sometimes variables were used, sometimes seemingly arbitrary greys were chosen. We came up with a plan to fix this problem, involving multiple steps, to ensure nothing was broken in the process.

The Process

Replace all hex colors with existing variables

Our first step was to get everything on an equal playing field. We replaced every hex value color definition with an already defined sass variable.

Map similar colors to existing variables

After every color definition in the entire app was using a sass variable, the next step was to map similar colors to existing variables. By combining like colors at this stage, it allowed us to easily transition all current variables to the new variables.

Create new variables for the new color palette

At this stage we had brought the color definitions down from thousands to around 150. We used these colors to make any adjustments to our newly defined color palette, and then created all new variables for colors in the app moving forward. We decided on namespacing the Sass variables as to not get confused down the road.

Map existing variables to new variables

Our colors sass file now had two sets of color definitions -- the new colors and the old colors. With every color in the app pointing to the old variables, we pointed the old variables to the new variables and tested the app for any possible issues.

Map existing color definitions to new variables

At this point, the app was using all new color definition and the completely consolidated color palette. The final step was to change every color definition pointing to an old variable to now point to a new namespaced color variable. With that final change, the entire app was now using the new color palette and all old variables could be removed.

The Outcome

This final color palette replaced hundreds of designated hex values across the site, creating a system that is far more fluid and extensible.

$green--light $green $green--dark $blue--light $blue
$blue--dark $red--light $red $red--dark $black
$black--90 $black--80 $black--70 $black--60 $black--50
$black--40 $black--30 $black--20 $black--10 $white