🔖 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.