Brad Frost's Atomic Design: build systems, not pages

When investigating something complex, we often begin by dissecting the problem into the smallest parts possible so that we can then put them back together to form a whole. This was running through web designer Brad Frost’s mind when he began thinking about how design systems could be constructed more methodically. He worried that design systems, which focus on aesthetics like color, typography, and texture, were too subjective. Since everyone involved in a design project has their own unique perspective, these subjective aesthetics made it difficult for everyone to agree on the “right” solution. He wanted a better way to show clients and team members the steps that lead to a finished design. So Frost crafted a methodology inspired by the tenets of chemistry, specifically that all matter at its core is comprised of atoms. He tested his theory by breaking down entire interfaces into fundamental building blocks, then clicking the blocks back together to form something functional and recognizable. Frost says this Atomic Design approach allows anyone to build design systems that “promote consistency and scalability while simultaneously showing things in their final context.” As an antithesis to legacy design systems, Frost argued that his theory built systems almost automatically, instead of “cherry picking patterns after the fact.”

Atomic Design, which started as a blog post and was later expanded into a book, directed designers and developers to “build systems, not pages,” by starting with the smallest elements possible and combining them intelligently until you reach a pleasing composition.

The most elemental building block

While legacy design systems like those created by Christopher Alexander and Jenifer Tidwell were made of what Frost classifies as complex molecules, organisms, templates, and pages, Frost saw a building block smaller than any of those, which in his world of design was markdown. He titled the tiniest HTML element atoms and classified them as “the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.” Those most basic atomic units bond together to form molecules, like a form label + input button, and so on until a recognizable page emerges. Frost calls the page stage essential since it’s the phase where the effectiveness of the design system is tested. If the design looks lousy, there’s a problem with the system itself. Because Atomic Design’s structure provided a common naming convention familiar to both designers and developers, it was easy for anyone with knowledge of Atomic Design to jump into a new project and know where and how to modify molecules, organisms, and templates to influence the final context of the design.

Putting the atoms in motion

Frost, along with two partners and a team of developers, put the Atomic Design methodology into practice with Pattern Lab, a pattern library built on Atomic principles. According to Frost, in the 5+ years it’s been around, Pattern Lab has morphed into a powerful software that today serves as the frontend foundation for some of the world’s biggest companies.

Developers working in React, a JavaScript library for building user interfaces, made use of Atomic Design in their work and relied on Atomic’s componentization strategy to create toolkits that allowed for consistent, repeatable code. By simplifying complicated elements, developers could create more complex components and containers of components for user interfaces. This disassembly also ensured a solid legacy, and a structure that allowed other developers to understand the architecture quickly, and help grow projects at scale.

What started as a desire to pull back the curtain and give everyday people a better understanding of a design’s final form turned into an atom-powered how-to for creating design systems at their most elemental level. As technology advances and problems become seemingly more complex, designers and developers will return to Frost’s Atomic Design to find clarity through simplification.