Atoms

The smallest building blocks of the site, atoms can't be broken down without losing its meaning. Atoms include individual input elements, paragraph tags, form labels and so on. Atoms can also include non-tangible elements like animations, color, font stack and other properties.

Molecules

Made up of two or more atoms, molecules should be "relatively simple groups of UI elements functioning together as a unit". Molecules give atoms purpose beyond what they can achieve by themselves, like a label next to a form input. Thinking like this encourages you to think and build in small, reusable chunks.

Organisms

We move now to organisms, which consist of molecules and atoms to form distinct areas of an interface. These are more complex than molecules; they shape regions like headers and footers. They bring together disparate molecules, like link and search, to group-related pieces to give meaning.

Templates

Akin to wireframes, templates structure entire pages and move molecules alongside each other. It's here that we see how the designer wants to prioritize content and gives context to building blocks. At this stage we can see how a page is composed and which organisms are needed to support the content.

Pages

Pages combines everything and applies them to real content. These are "essential for testing the effectiveness the underlying design system and enable stakeholders and users to get a feel for the p_. These can change how people feel about the page as it pl templates with life.