atomic-design-guide

Atomic design hierarchy organizes UI components into atoms, molecules, organisms, templates, and pages. You need it to structure component placement, enforce dependency direction, and manage reuse across your design system.

Decide component level by evaluating its dependencies and ownership. Atoms are basic elements, molecules combine atoms, and organisms group molecules. Apply promotion rules to move components up when reuse or ownership emerges.

Enforce dependency direction by ensuring higher-level components like organisms never import lower-level atoms directly. This guide provides clear rules to prevent cross-level imports and maintain strict component organization within the hierarchy.

Promote a component to a higher atomic design level when shared ownership or reuse across multiple organisms emerges. This guide provides practical promotion criteria to standardize when and how to move components up the hierarchy.

Extract shared substructures by identifying common patterns across organisms and moving them to an appropriate lower level. This guide provides governance rules to standardize extraction and maintain consistent UI component organization.