Inventory

When I began documenting Kazoo’s design system, we were already halfway through implementing a new user experience for the unified product. So not only did we have legacy design systems, but we were halfway through building out a new one. I started by creating an inventory. First, I gathered all the patterns we had in our design files and created a central library from commonly used components. Then, working with other designers, we sorted examples into broad categories like inputs, colors, avatars, and buttons. 

Once we had a sense of our design components, we looked at our Engineering library to see how their component library compared to our Product Design library. With a foundation of how we wanted things to look and operate and an understanding of how they actually looked an operated, we identified key areas we could improve immediately, starting with fundamentals.

Foundations

I had an inventory of 30 text styles, two system blues, too many variations of success, warning, and info colors & grays to count, and layouts that were sometimes spaced on an 8px grid, but often visually recalibrated to 27, 44, 10, 5px… spacing depending on which designer created a component. So the first thing I did was narrow text styles, define colors, and established an 8pt grid spacing system for consistent visual cadence. 

Accessibility

The first test these core elements went through was for accessibility. Take for example, our success green. The original selection for this color was #64E38C, which is a bright and minty hue. However, we used that color as a background for white text. The color ratio when overlaying white on that green was 1.62, according to contrast-ratio.com. This usage was unacceptable, so I sought to define a new green that met visibility standards and worked with the other colors we were using in the application.