Atomic Design | Brad Frost - Deepstash
What is Atomic Design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Te...

9

STASHED IN:

79

Atomic Design | Brad Frost

bradfrost.com

STASHED IN:

0 Comments

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements li...

3

STASHED IN:

70

Molecules

Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These ...

STASHED IN:

70

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct...

STASHED IN:

70

Templates

At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched togeth...

STASHED IN:

70

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are t...

1

STASHED IN:

70

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP: