Atomic Design
Atomic design is a chemistry-inspired methodology for creating design systems, introduced by Brad Frost. Learn more here: https://atomicdesign.bradfrost.com/chapter-2/
This approach organizes UI components into a hierarchical structure, from smallest elements to complete pages. I’m using this methodology to document and organize the component library for my portfolio site, ensuring consistency and reusability across all pages.
| Level | Description | Examples |
|---|---|---|
| Atoms | Smallest, indivisible UI elements | Button, Input, Label, Icon |
| Molecules | Groups of atoms functioning together | Search bar, Menu item, Card header |
| Organisms | Complex components made of molecules/atoms | Site header, Footer, Product grid |
| Templates | Page structure with placeholder content | Homepage layout, Blog post layout |
| Pages | Templates populated with actual content | Homepage, About page, Blog post |