What is atomic design and how does it relate to design systems?
Atomic design is a method by Brad Frost that structures interfaces from the ground up:
Atoms: Basic elements like buttons, labels, inputs
Molecules: Combinations of atoms (e.g., a form field)
Organisms: Groups of molecules forming UI sections (e.g., a header)
Templates/Pages: Larger layouts built from these blocks
It relates closely to design systems by promoting reusable components at different scales. Many design systems follow this approach, helping teams build UIs that are modular, consistent, and easy to maintain. A change to an “atom” (like a color or button style) can cascade through the system effortlessly.