The Kissmetrics platform has been iterated on and grown significantly over it’s 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.
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.
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.
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.
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.
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.
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.
This final color palette replaced hundreds of designated hex values across the site, creating a system that is far more fluid and extensible.