Atomic Design is a methodology for creating design systems. It was introduced by Brad Frost to help designers and developers build consistent, scalable, and reusable UI components. The core idea is to break down interfaces into five hierarchical stages, inspired by chemistry:
⸻
🧪 1. Atoms
Atoms are the smallest building blocks of the interface. They can’t be broken down further and serve as the basic HTML elements or smallest components.
Examples:
- Buttons ()
- Input fields ()
- Labels ()
- Colors, fonts, spacing units
⸻
🧬 2. Molecules
Molecules are groups of atoms bonded together to form a functional unit. They are relatively simple combinations of atoms.
Examples:
- Search bar (input + button)
- Form label with input field
- Icon + text label component
⸻
🧱 3. Organisms
Organisms are complex components composed of groups of molecules and/or atoms. They form distinct sections of a UI.
Examples:
- Header (logo + nav menu + search form)
- Product card (image + title + price + button)
- Footer with multiple columns
⸻
🧾 4. Templates
Templates are page-level objects that combine organisms to form layouts. They focus on structure, not content.
Examples:
- E-commerce product page layout
- Blog post layout
- Dashboard grid
⸻
🖥️ 5. Pages
Pages are specific instances of templates that include real content. They help test the design system in context.
Examples:
- Homepage with real product data
- Blog post with actual text and images
- Admin panel populated with user data
⸻
🔄 Why Use Atomic Design?
- Promotes consistency across the UI
- Encourages reusability and modularity
- Makes it easier to maintain and scale design systems
- Aligns designers and developers under the same structure
⸻
💡 Real-World Example
Building a Login Form:
- Atom: Input field, label, button
- Molecule: Input group (label + input)
- Organism: Complete login form (input group + submit button)
- Template: Auth page layout with the form centered
- Page: Login page with actual content (e.g., error messages, branding)