Atomic design

Introduction

Atomic design was developed by Brad Frost as a methodology for creating design systems that promote consistency and scalability. Atomic design involves breaking down a webpage or interface into its smallest parts and then combining them to form bigger and more complex components. This guide will outline the key levels of atomic design.

The five levels of atomic design

The atomic design methodology is composed of five distinct levels: atoms, molecules, organisms, templates and pages.

Atoms

Atoms are the smallest possible components, like HTML tags such as form labels, inputs, buttons, or even more abstract elements such as colour palettes, fonts, or even invisible aspects like animations. These are the building blocks of a design. To follow atomic design standards, you should begin by identifying all the atoms in your project. This could involve defining all the basic tags you use, your chosen fonts, the color palette, and so forth. Keep these atoms consistent throughout your design.

Molecules

Molecules are groups of two or more atoms. They are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can combine to form a “search form” molecule. When creating your design, ensure you have identified and defined all the molecules that make up your interfaces. Molecules cannot include other molecules, only atoms.

Organisms

Organisms are composed of molecules and atoms. To qualify as an organism, a group should contain at least one molecule and one additional element (or more), which can be either an atom or another molecule. Organisms form distinct sections of an interface that work together as a unit to provide a certain function. For example, a header might consist of a logo (an atom), main navigation (a molecule), and a list of social media channels (another molecule). Following atomic design, you must identify all the organisms in your interface, and ensure they are consistent and reusable. Organisms cannot include other organisms.

Templates

Templates consist of groups of organisms, molecules and atoms arranged in a layout, defining the design's underlying content structure. They are essentially the framework or the skeleton of pages. Templates do not include real representative content, and instead focus on the page's underlying content structure rather than the page's final content.

In Storybook, templates are categorized under pages.

Pages

Pages are instances where groups of organisms, molecules and atoms are stitched together to form a meaningful interface. Pages are filled with real representative content to give an accurate view of what a user will see.

How to follow atomic design

  1. Understand and identify components: The first step is understanding the structure of your design and identifying each component at each level of the atomic design hierarchy. This could be as simple as listing out all the atoms (like buttons, text, images) and grouping them to form molecules (like a search bar) and so on.
  2. Consistency and reusability: Atomic design promotes consistency and reusability. Ensure that you maintain consistency in the usage of atoms across the interface. Similarly, molecules and organisms should be reusable.
  3. Iterative approach: Atomic design is an iterative process. As you build, you'll often need to revise and refine your atoms, molecules, organisms, and templates.
  4. Use of Storybook: In our workflow, we use Storybook as a pattern library (in other words, a collection of user interface design elements). This tool helps us to organize and access all the various elements in our design, keeping track of our atoms, molecules, organisms, and templates, and ensuring their consistency and reusability.

In Storybook atoms, molecules, and organisms are our building blocks. Pages and templates show how these blocks fit together but aren't used directly by apps. For better organization, pages and templates are kept in apps/storybook in our monorepos.