Version 0.40.0

Code Guidelines

Atomic Design

Atomic Design Structure

Saagie Design System is based on the Atomic Design principles developed by Brad Frost. Atomic Design methodology involves breaking an interface layout down into its basic components, which are then reused throughout the same interface. The main point in using this method is to create a flexible and future-proof design elements without reinventing the wheel.

Atomic Design vocabulary and structure has been invented by analogy to atomic theory. Like in chemistry, each element of the layout is basically classified according to its own composition.

There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Layouts (originally named templates)
  5. Pages

Let’s examine each stage in a bit more detail.


Atoms are the must irreducible elements of a web interface. Like in chemistry, they are the tiniest building blocks. Atoms refer to the basic HTML tags such as an input text field or a button. They are totally useless on their own, and yet once combined with others, they form the base of every interface elements. Also, as all the elements should easily adapt any component size and context.


Molecules are groups of atoms bonded together in a way that they form the smallest functional units. A form group, for instance, is a molecule which combines two atoms (an input text field and a label).


Organisms are basically a set of molecules joined together to form a relatively complex but coherent section of an interface. For example, a form group molecule combined with a title , a link and a button can make a login organism.


Templates consist of groups of organisms fasten together to build pages. It's at this level that we start to appreciate the layout in action.


Pages are specific instances of templates filled with example contents to illustrate how the finish interface might look. Here place holder content is replaced with a real representative content to give an accurate depiction of what a user will ultimately see.