A methodology for building UI component libraries by structuring elements into five hierarchical levels: Atoms (basic building blocks like buttons and icons), Molecules (simple component groups), Organisms (complex UI sections), Templates (page-level layouts), and Pages. Developed by Brad Frost, it creates a shared vocabulary between designers and developers for building consistent, scalable systems.
Common contexts
- Auditing an existing component library to identify which elements are atoms versus molecules before refactoring
- Structuring a new design system so engineers and designers share the same component taxonomy
- Breaking a complex form organism into reusable molecules to reduce inconsistency across product areas
Use when
Introduce atomic design thinking when a team is building a component library from scratch or restructuring an existing one that has grown inconsistent. The naming framework is most valuable during kickoff conversations — it gives designers, engineers, and product leads a shared language before a single component is built.
Avoid when
Don't let the atomic hierarchy become an obstacle to shipping — spending weeks debating whether a component is a molecule or an organism is a sign the methodology has become the goal instead of the means. The taxonomy should serve communication, not governance.
The atoms-to-pages hierarchy is most useful as a conversation tool during system design, not as a strict taxonomy to enforce — teams that fight about where a component 'fits' are usually missing the real problem, which is unclear ownership.
Real-world examples
- IBM's Carbon Design System is structured around atomic design principles, with atoms like buttons and inputs composing molecules like form fields and organisms like navigation bars.
- Airbnb's internal design system DLS (Design Language System) uses atomic design hierarchy so engineers and designers share a common component vocabulary.
- Shopify's Polaris design system organises components from atoms (icons, colour tokens) through to page-level templates used across the merchant admin interface.