# Atomic Design Atomic Design is a methodology for creating [[Design Systems]] introduced by [[Brad Frost]] in 2013. Using a chemistry metaphor, it breaks interfaces into five hierarchical levels—atoms, molecules, organisms, templates, and pages—enabling teams to build consistent UIs from small, reusable components up to complete pages. Frost developed Atomic Design while working on large-scale projects where maintaining UI consistency was challenging. The methodology influenced countless design systems and popularized component-driven design. His book *Atomic Design* (2016) remains the definitive reference. ## The Five Levels | Level | Chemistry Analogy | UI Example | |-------|-------------------|------------| | **Atoms** | Basic elements | Buttons, labels, inputs, icons | | **Molecules** | Simple compounds | Search form (input + button) | | **Organisms** | Complex structures | Header, footer, card grid | | **Templates** | Page blueprints | Layout with placeholder content | | **Pages** | Final instances | Templates with real content | ## Level Details - **Atoms**: Smallest functional units—HTML tags, design tokens, basic elements - **Molecules**: Groups of atoms working together (search field = label + input + button) - **Organisms**: Complex, distinct sections of interface (navigation bar, product card) - **Templates**: Page-level structures showing content layout without real data - **Pages**: Specific instances of templates with actual content for testing ## Criticisms and Limitations - **Interpretation varies**: Different teams classify components differently (molecule vs organism) - **Metaphor breaks down**: Templates and pages don't follow chemistry analogy - **Ambiguous boundaries**: Where does a molecule end and organism begin? - **Context-dependent**: Same component might be atom in one context, molecule in another [[Hannah Heinson]] proposed [[Atomic Design 2.0]] to address some of these issues. ## Benefits - Provides shared vocabulary for design and development - Encourages thinking in reusable components - Scales from small elements to full pages - Promotes consistency across products ## References - https://atomicdesign.bradfrost.com (free book) - https://bradfrost.com/blog/post/atomic-web-design/ ## Related - [[Brad Frost]] - [[Design Systems]] - [[Atomic Design 2.0]] - [[User Interface Design]] - [[Hannah Heinson]]