The EZShield Style Guide was a project I self-initiated due to frustrations I experienced while designing and developing our dashboard. Over time our unique styles had grown larger and more expansive. I set out to build this tool so that we could unify our visuals and start down the path to a more modularized code base.

The first task was to tackle our use of color across the site. I did some investigating in our code and found we were using over 170 unique colors in our CSS. Most of these were very similar, if not imperceptible, to the human eye but it highlighted just how seriously we needed to set and adhere to some standards. I reduced it down so that we now have just a handful of core colors with a couple variants. These are now used across multiple departments to bring this cohesive look to our websites, email, print, and mobile apps.

‍

‍

Our typography was another issue that had gotten out of hand. Much like the colors, there were an embarrassingly high count of unique fonts, sizes, weights, what-have-you, in use. In the same way, I came up with some sane defaults and refactored our code to match, which really tightened up our typography and improved readability.

Our style guide is a living document and a work in progress. We adjust it from time to time to close gaps in our implementation or, as happens from time to time, when we change our mind on something.

‍