Design System Pt. 1 — Introduction

The move towards consistency.

When I got to Blue Nile, I expected a set of guidelines to design around. Call it a style guide, call it a pattern library, call is a design system, call it whatever you want… we didn’t have one. The basic idea was to try and make things look like they were all from the same designer. This sounds easy in principle, but in practice, it’s another story.

One thing I’ve learned over the years in design is that everyone has their own unique style. It’s a good thing, it helps designers produce new innovative ideas. But when designing a site where everything needs to be consistent and go together, it’s not always the best idea to just let designers have at it. That’s where a design system comes in.

The Basics

Here is a definition of what a design system is:

A visual design system is built out of the core components of typography, layout, shape or form, and color. When considering the design of a whole product, a design system should also include patterns in user flow, content strategy, copy, and tone of voice.

Below is part of the reason that we wanted to consolidate our design system. The current pattern of using buttons of all shape, size, and color was becoming worrisome to the UX team. A design system is not meant to solve every problem that arises, and it’s not meant to stifle designers creativity (I’ve heard this argument in the past) but it’s to help consistency across the site.

Button Types

It seems pretty obvious at first glance, but a design system is one way to keep things consistent across designers, pages, and projects. It becomes the backbone of the design team, allowing designers to utilize a toolbox of pre-approved components that can be put together in various ways to solve new issues when they come up. Brad Frost explains this in great detail in his post about Atomic Design (which he invented). This, in fact, is the approach we took at Blue Nile, and it all started with cataloging different atoms, molecules, and organisms across the site.

In the next part of this series, we will go into a few of the details about how we defined the components, layout, typography, etc.