Atomic design learning page

Atoms
Molecules
Organisms
Templates
Pages

Atoms

Basic UI building blocks that cannot be broken down further without losing their function.

Measurements for an atomic search input and icon.

Molecules

A simple group of elements working together.

Search input molecule example.

Organisms

A more complex component combining atoms and molecules into a distinct interface section.

Navigation organism example.

Templates

A page-level arrangement showing component placement and underlying content structure.

Template wireframe example.

Pages

A specific template instance. Realistic content helps test the design and reveal necessary adjustments.

Finished page example with realistic project content.

© 2026 Dong Sun. References: Atomic Design by Brad Frost and Figma Community resource.