Originally idealized by Brad Frost - Atomic system is an organizational model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time.
Atoms
Atoms serve as the foundational building blocks that comprise all our user interfaces. They includes basic elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.
Molecules
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
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
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
