Skip to main content

Atomic Design

Atomic Design is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.

🪜 Five distinct levels in atomic design​

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

In ours project you will see:

src/
  - patterns/
    - 01-atoms/
    - 02-molecules/ 
    - 03-organisms/
    - 04-templates/

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 like color palettes, fonts and even more invisible aspects of an interface like animations.

Molecules​

Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

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 section of an interface.

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 together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

Pages​

Pages are specific instances of templates.

LOOKING FOR MORE?

Check: