Atomic Design Guide

Traditional "page-based" design often leads to inconsistent styling and bloated codebases. Atomic Design provides:

These move away from chemistry into the structural realm. Templates define the layout of a page, showing how organisms function together in a wireframe-like structure. Atomic Design

Atomic Design: A Methodology for Crafting Robust Design Systems Atomic Design: A Methodology for Crafting Robust Design

Groups of atoms bonded together. For example, a label, an input field, and a button can combine to create a search form molecule . A header organism might consist of a logo

Complex UI components composed of groups of molecules and/or atoms. A header organism might consist of a logo (atom), a navigation menu (molecule), and a search form (molecule).

These are the basic building blocks of matter. In web terms, these are HTML tags like a button, an input field, or a label. They cannot be broken down further without losing their functionality.