Atomic methodology

Harbor is assembled from five interlocking layers — atoms, molecules, organisms, templates, and pages. Smaller pieces are combined into larger ones. Nothing on a page appears that was not first defined as a molecule or organism here.

01 — Atoms Atomic

The irreducible interface primitives. Can't be broken down further without losing meaning.

// <Button> — Atom / 34 of 34
<Button variant="primary">Primary</Button>

02 — Molecules Molecular

Small groups of atoms bonded for a single purpose.

// Atoms used: Input, Button
<SearchField placeholder="Search components…" />

03 — Organisms Organism

Distinct interface sections made of molecules and atoms. Organisms can stand alone.

// Molecules: SearchField · Atoms: Logo, Nav, Avatar
<SiteHeader currentUser={jl} />

04 — Templates Template

Layout skeletons. Describe structure, not content.

05 — Pages Page

Specific instances of templates, with real copy, data, and media.