What is Atomic design?

‍What is Atomic design?

Atomic design is a methodology composed of five individual stages that come together to create interface design systems in a more intentional and hierarchical manner.

1. Atoms: The atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces. Atoms can’t break down any further without ceasing to be functional. This includes basic elements such as buttons, form labels, inputs etc.
2. Molecules: These are simple groups of UI elements functioning together as a unit.For example, a form label, search input, and button can join together to create a search form molecule.
3. Organisms: These form distinct sections of an interface. They are fairly complex UI components, composed of groups of molecules and/or atoms and/or other organisms.  
4. Templates: Templates are page-level objects that place components into a layout. Their focus is to articulate the page’s underlying content structure rather than the page’s final content.
5. Pages: Pages are the most concrete stage of atomic design, as they highlight the user experience - what they will see and engage with. Pages utilise specific instances of templates that show what a UI looks like with real representative content in place.

‍‍