π Atomic Design (archive)
Atomic design is a strategy for creating design systems by breaking elements into distinct levels:
- Atoms are the smallest building blocks, that is HTML elements (like inputs, buttons and headings)
- Molecules combine atoms together to build something useful (like a form or a card)
- Organisms combine molecules to create distinct sections of an interface (like the header or the product grid)
These are combined to make the actual designs in the form of:
- Templates are organisms stitched together to form pages.
- Pages are specific instances of templates.
This system allows you to design by assembling rather than deconstructing which means you don’t have to cherry pick patterns later.