Atomic Design

up:: Design


  • Atoms: Basic building blocks. HTML tags like input, button, label.
  • Molecules: Combined Atoms. eg. a form.
  • Organisms: Group of molecules, eg. a site header.
  • Templates: Multiple organisms, eg. a wireframe.
  • Pages: A specific template where placeholder content is replaced with real representative content.


Atomic design 2022: what we can learn from Eames and other design giants

  • Ions: colour, padding, states
  • Atoms: buttons, text input, labels
  • Molecules: pagination, dialog box
  • Organisms: Cards, navbar, date picker
  • Complex Organisms: UI, App, Web