Atoms
Basic building blocks in HTML tags, such as a form label, an input or a button.
Molecules
Grouping atoms together, such as combining a button, input and form label to build functionality.
For example, a form label, input or button aren’t too useful by themselves, but combining them together as a form and now they can actually do something together.
Organisms
Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)
Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and a list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.
Templates
Consisting mostly of groups of organisms to form a page — where clients can see a final design in place.
Pages
Pages are specific instances of templates. An ecosystem that views different template renders. We can create multiple ecosystems into a single environment — the application.