Atomic Design
Atomic Design is a methodology for building UI systems by breaking interfaces into smaller, reusable parts. It was introduced by Brad Frost and is often used as a way to structure design systems and component libraries.
Reference: Atomic Design
Why I use it here
Section titled “Why I use it here”I use Atomic Design as an organizing framework for this portfolio’s component library. It helps keep the system consistent as it grows, and it makes it easier to reason about where a component belongs and how it should be reused.
Levels
Section titled “Levels”| Level | Description | Examples |
|---|---|---|
| Atoms | Smallest, indivisible UI elements | Button, Input, Icon |
| Molecules | Groups of atoms functioning together | Form Field, Nav Item |
| Organisms | Complex components made of molecules/atoms | Header, Footer, Hero |
| Templates | Page structure with placeholder content | Layout, Blog Layout |
| Pages | Templates populated with actual content | Home, Projects, Blog |
Rules of thumb
Section titled “Rules of thumb”Atomic Design is flexible, and the boundaries won’t always be perfect. These are the guidelines I use to keep the system consistent:
- If it’s a single UI element with one job, it’s usually an atom
- If it combines a few atoms into a reusable pattern, it’s usually a molecule
- If it defines a recognizable section of UI, it’s usually an organism
- If it sets layout and structure without real content, it’s usually a template
- If it’s a full route with real content and context, it’s a page
A component can move between levels over time. The goal is clarity and reuse, not strict classification.
