A primer on atomic design

Modular UI design is well-articulated in Brad Frost’s notorious 2013 blog post, Atomic Design (now a book by the same name). Frost argues that modular design systems need a clear sense of hierarchy in a taxonomy of components. So that hierarchy can be inferred from the names of classes of components, he proposes classifying components using terms from basic chemistry: atoms, molecules, and organisms.

In atomic design, atoms are the basic building blocks of user interfaces, including HTML elements likes buttons, inputs, labels, and anything “that can’t be broken down any further without ceasing to be functional.” Most of the components in the Seeds component library can be considered atoms since they are React equivalents of basic HTML elements plus some extensions, such as switches, icons, and tooltips.

Things start getting interesting when you put atoms together to form molecules. In atomic design, “molecules are relatively simple groups of UI elements functioning together as a unit.” In the Sprout web app, an example of a molecule would be the Filter component, which combines a checkbox, label, icon, button, and link.