Atomic Design by Brad Frost

Atoms are basic elements that form labels, inputs, buttons, and other basic properties like colors, fonts, and border-radius that can't be broken any further. At an individual level, atoms are abstract concepts with no real meaning. But when combined, they start to create more meaningful elements called molecules.^[2]

Modifying a single atom has a ripple effect on the entire design. Change a font, for example, and the entire look of the site’s typography is changed. Atoms are likely to show up on a mood board that might be presented to stakeholders on a design project but aren’t really deliverables on their own.

Molecules are made up of atoms bonded together. They are simple UI components like buttons, checkboxes, inputs, and similar elements functioning together as a unit. For example, if you combine a placeholder, label, input, button, and magnifying glass icon you can create a search bar. Molecules are the most basic elements that start to resemble an actual design system.

Organisms refer to complex UI components made up of groups of molecules and/or atoms and possibly other organisms. These are relatively complex sections of a user interface that form distinct parts of a system. For example, a header with a logo, navigation, and search form might collectively be referred to as an organism.

You can see that on an individual level, organisms don’t provide a whole lot of user value, but they’re key elements to an overall design. Without organisms, the final product would lack a lot of functionality.

When you start to combine organisms, you end up with templates, where a design really starts to take shape. Templates in atomic design are the equivalent of wireframes containing grayscale placeholders before real content is available. They create a tangible product that can be shared with stakeholders and users for feedback.

Templates spell out how the design will come together but don’t include actual content from the product. They’re just a skeleton, but also a key step in the design process. They start to show how the final product will actually look and work.

At the template stage, you should consider getting developer feedback to make sure that the design is workable. They can also be shown to clients as a way to support the ideas and concepts you’ve already talked to them about.

The final results of the atomic design process are pages. Pages are built on top of templates, with real content filled in. They’re not yet functional products, but they show the finished look, feel, and content of the design.

Pages can be used for real-world user testing. They should be used to get final stakeholder feedback before the designs are handed off to developers to become functional products.

Brad Frost's atomic design theory offers a practical way for designers to create and manage design systems or pattern libraries. By breaking down designs into reusable components (atoms), you can build more complex structures (molecules, organisms) that align with the larger guidelines of the design system.

In practice, this means you can build a collection of consistent UI elements like buttons, labels, and inputs, and then combine them in various ways to form more intricate layouts and templates. By doing so, you're not just designing individual pages but creating a coherent and scalable system.

This modular approach simplifies collaboration across teams and ensures that updates to a single component will reflect across all instances where it's used. Integrating atomic design into a pattern library or design system ultimately leads to a more efficient design process and a cohesive user experience across products and platforms.