Home ∣ Design Process ∣ Fundamentals ∣ Guidelines ∣ Accessibility ∣ Methods ∣ Research Design Systems ∣ AI ∣ Software Dev ∣ Low-Code Dev ∣ Soft Skills ∣ Career ∣ Tools ∣ Links
Atomic design is a methodology that allows (and requires) you to describe and organize every component of your design system. This approach divides design components into 5 different categories.
These are the smallest building blocks; individual legos. These elements cannot be divided into smaller parts without losing any use (ex. a button needs a label or icon).
These are more complex entities consisting of several atoms. Molecules are already functional elements that could be put anywhere on the page and work on their own. Usually they need to be a part of an organism, to truly have a value.
Truly functional parts of a page, made from groups of atoms and molecules. Many organisms function on their own, without relying on other elements on the page. They are usually huge components. Organisms can become quite sophisticated and have smaller organisms inside.