Atomic Design provides a clear methodology for crafting modular and scalable design systems.

It gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact. Atomic Design is not a linear process, but rather 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.

All elements in Atomic Design are broken down into elements, starting at the most basic and increasing in complexity.

	Atoms 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. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)
	Molecules 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.
	Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.
	Templates are where components come together in the context of a full page layout.
	Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Related Reading

• Atomic Design and the Atomic Design Methodology by Brad Frost
• 10 Reasons You Should be Using Atomic Design. Creative BLOQ article