atomic-designlisted

# Atomic Design — Component Hierarchy Methodology Atomic design is a mental model for breaking any user interface into five distinct levels of structural complexity — atoms, molecules, organisms, templates, and pages — borrowed from chemistry's atoms-to-matter progression. It gives teams a shared vocabulary for talking about UI structure and a repeatable way to decide "does this need to be its own piece, and how big should that piece be?" The methodology itself is **framework-agnostic**: it describes how to think about composition, not which library or platform renders the result. ## Why atomic design (rationale) Without a shared hierarchy, teams tend to build UI ad hoc: some pieces get over-extracted into components nobody reuses, others get duplicated because nobody realized a smaller shared piece already existed, and naming drifts (is this a "card," a "widget," a "block"?). Atomic design solves three recurring problems: - **Consistency** — the same five labels describe every piece of UI, so a design system and its implementation stay aligned no matter who's talking about it. - **Reuse** — decomposing top-down into smaller named levels surfaces the shared building blocks (a label, a button) that would otherwise get re-created inside every larger piece that needs one. - **Scalable vocabulary** — "this is a molecule, not an organism" is a fast, unambiguous design conversation once the levels are understood, replacing long back-and-forth about scope. The levels are