Style Guide - Single Page


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.

Style Guide - Color

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 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.