Atomic Design

Citation

Frost, B. (2016). Atomic Design. bradfrost.com.

A methodology for creating design systems using a chemistry-inspired hierarchy: atoms, molecules, organisms, templates, and pages.

Atoms: Basic building blocks (HTML tags, form labels, inputs, buttons. Can’t be broken down further.

Molecules: Groups of atoms bonded together. A search form (label + input + button) is a molecule.

Organisms: Complex components composed of molecules and atoms.

Templates: Page-level structures placing organisms into layout.

Pages: Specific instances with real content.

Build small, reusable components that combine into larger systems. The hierarchy isn’t linear, you can start anywhere.

This methodology directly inspires the vault’s Atom → Molecule → Organism structure for knowledge.