Design & Accessibility
What is Atomic Design?
Atomic Design is the methodology that organizes components into 5 levels: atoms, molecules, organisms, templates and pages — coined by Brad Frost.
Atoms are the simplest blocks (input, label, button). Molecules combine atoms (a search field = input + button). Organisms combine molecules (a whole header). Templates define layout without content. Pages are templates with real content.
Useful for organizing Storybook libraries. Common critique: modern products skip some levels (components go straight to app without becoming "templates"). Use the vocabulary, not the orthodox method.
Related terms
Frequently asked questions
Is Atomic Design required for a design system?
No. It is a useful vocabulary, but mature teams adapt (some merge molecules and organisms, skip templates).
How to distinguish a molecule from an organism?
Molecules do ONE thing (search field); organisms are a UI block (header with nav + search + avatar).