Style Guide - Single Page

Color


Color was the first thing that I wanted to nail down for the style guide. Blue Nile, over the years, had multiple blue colors, inconsistent use of accent colors for secondary CTA’s, and multiple other color disagreements. The goal of this section was to give all teams across Blue Nile the set colors that we should be using and when to use them.

CTA Consolidation


The second area I wanted to address was the fact that we didn’t have a CTA hierarchy that made sense to the user. We overhauled the way our CTA’s looked, interacted and made them consistent across the board. The team and I made a conscious decision to change the secondary CTA’s to a different gray so that we could differentiate a grayed out button. Eventually, the goal is to phase out the grayed button for this exact reason. You can see what it previously was below:

Old CTA's

Typography


Typography was the third thing I tackled. The whole reason for this was because we were not consistent on the site.

Form Elements


Next, I defined all of the different form element types that were used on the site.