• Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
• Molecules are collections of atoms that form relatively simple UI components.
• Organisms are relatively complex components that form discrete sections of an interface.
• Templates place components within a layout and demonstrate the design’s underlying content structure.
• Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner

• Are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning
• These *atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
• Are the smallest functional unit

• Each interface atom has its own unique properties, such as the dimensions of a hero image, or the font size of a primary heading

• Are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties, and become more tangible and operational than atoms.

• Are groups of atoms bonded together that take on distinct new properties.

• For example, a form label, search input, and button can join together to create a search form molecule.

• Creating simple components helps UI designers and developers adhere to the single responsibility principle, an age-old computer science precept that encourages a “do one thing and do it well” mentality. Burdening a single pattern with too much complexity makes software unwieldy. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.

• Are assemblies of molecules functioning together as a unit.
• While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again.

• Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

• Important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. Design systems must account for the dynamic nature of content, so it’s very helpful to articulate important properties of components like image sizes and character lengths for headings and text passages.

• Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action.

• The page stage is the most concrete stage of atomic design
• This is what users will see and interact with when they visit your experience.
• And this is where you see all those components coming together to form a beautiful and functional user interface.

In addition to demonstrating the final interface as your users will see it, pages are essential for testing the effectiveness of the underlying design system. It is at the page stage that we’re able to take a look at how all those patterns hold up when real content is applied to the design system.

One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete. We can simultaneously see our interfaces broken down to their atomic elements and also see how those elements combine together to form our final experiences.

A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI. The interface patterns we establish must accurately reflect the nature of the text, images, and other content that live inside them. Similarly, our content should be aware of the manner in which it will be presented. The close relationship between content and design requires us to consider both as we construct our UIs.

Atomic design gives us a language for discussing the structure of our UI patterns and also the content that goes inside those patterns. While there is a clean separation between the content structure skeleton (templates) and the final content (pages), atomic design recognizes the two very much influence each other. For instance, take the following example:

On the left we see the UI’s content skeleton, which consists of the same person block molecule repeated again and again. On the right we see what happens when we populate each instance of the person block molecule with representative content. Visualizing the content skeleton and the representative final content allows us to create patterns that accurately reflect the content that lives inside them. If a person’s name were to wrap onto five lines within the pattern, we would need to address that broken behavior at a more atomic level.

The content we pour into our UIs at the page stage will influence the characteristics and parameters of the underlying design patterns.

• Mustache