Atomic Design (by Brad Frost) is a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.

Atomic Design consists of five stages: 

Atoms – Molecules – Organisms – Templates – Pages

Atoms

Atoms are the building blocks of matter. In web interfaces, they are our Html tags such as Input, form label, and buttons. They can also include abstract elements such as color palettes, fonts, and animations.

Molecules

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. In interfaces, molecules are relatively 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. These are combinations of atoms brought together for reuse.

Organisms

Molecules give us some building blocks to work with, and we can now combine them to form organisms. Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

Templates

At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.