Design System Pt. 2 — Atom

The start of Atomic Design.


If you haven’t read part one of this post, you can read Design Systems Pt. 1 – Introduction here. It goes through the basics of what a design system is and how we got started with our process.

The first thing we are going to be talking about is the Atoms. Atoms, like in biology, are the building blocks of everything. We go through and define what the building blocks are for our site. The things we defined were: colors, typography, buttons, form elements, icons, and alerts.

Colors

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

Continue your education and continue with the third post in this series. You can find it within the blog

Continue to follow along in the series as we roll through more pieces of the system handbook. This will end up being a 10 part series and you can continue to follow along on this website. I’ve continued to evolve the system at Blue Nile and feel that sharing my experience would be helpful for other designers. Let me know the comments below if there is anything specific that you would want me to include in my series?