Level 2: Molecules — Purpose-Built Functional Units

Molecules are relatively simple groups of UI atoms bonded together to function as a single unit:

The Classic Search Molecule

Combine three distinct atoms:

1. A text label atom ('Search our docs')
2. An input field atom (<input type="text">)
3. A button atom with magnifying glass icon (<button>)

Individually, these atoms are inert. Bonded together, they form a Search Form Molecule with a clear, single purpose: submitting a search query.

Molecules are designed for high reusability across headers, footers, sidebars, and empty states.