Design System Pt. 2 — Atom

The start of Atomic Design.


If you haven’t read part one of the design systems posts, 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 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