Atomic Design
Atomic Design is a methodology for creating modular, scalable design systems by breaking down user interfaces into smaller, reusable pieces, organized hierarchically.
Atomic Design Level
| Level | Description | Example |
|---|---|---|
| Atoms | Basic building blocks, the smallest UI units | Buttons, labels, inputs |
| Molecules | Groups of atoms functioning together | Search bar (input + button) |
| Organisms | Relatively complex UI sections made of molecules | Header, Card, Form section |
| Templates | Page-level structure with placeholders | Blog page layout, product page |
| Pages | Fully fleshed-out templates with real content | Live website pages |
Last updated on