Skip to main content
More in Learn

What Is Atomic Design?

Atomic Design is a methodology for creating design systems introduced by Brad Frost. It's a concept that applies chemistry principles to design, breaking down interfaces into their fundamental building blocks and working from there.

The atomic design approach provides a clear and systematic framework for scalability, consistency, and modularity in design projects.

Atomic Design consists of five distinct levels:

  1. Atoms. Atoms are a design's most basic building blocks, similar to atoms in chemistry. These include HTML elements like buttons, inputs, headings, or any other individual component that cannot be broken down further without losing its functionality.
  2. Molecules. Molecules are relatively simple groups of UI elements (atoms) functioning together as a unit. For example, a form label, search input, and button can combine to create a search form molecule.
  3. Organisms. Organisms are relatively complex UI components composed of groups of molecules (and possibly individual atoms). An example of an organism might be a website header with a logo, main navigation, and search form.
  4. Templates. Templates are page-level objects that place components (organisms, molecules, and atoms) into a layout and articulate the design’s underlying content structure. They form a tangible UI demonstrating the design's functionality without actual content.
  5. Pages. Pages are templates that show a UI with accurate representative content in place. This is the stage where the design comes to life with content, images, and text.

The Atomic Design methodology encourages consistency, reusability, and scalability, making it an effective approach for large, complex projects involving many UI components. It helps maintain design consistency and coherency by reusing components, facilitating a more efficient and streamlined design and development process.

This approach is particularly beneficial when used with component-based development processes and tools like React or Vue.js.

To learn more about atomic design, please check out the original book on it (Amazon link).

People showing thumbs up

Need further assistance?

Ask the Crystallize team or other enthusiasts in our slack community.

Join our slack community