The Atomic Design approach is used in the structure of the user interface, which means that all functional elements consist of:

  • Atoms - the smallest elements that cannot be separated and that serve as elementary blocks of the interface (colors, typography, buttons, icons, etc.)

  • Molecules - groups of atoms that form relatively simple functional interface elements (pop-up, button with dropdown, navigation menu)

  • Organisms - groups of molecules that form the relatively complex parts of the interface (header, footer, sidebar)

  • Templates - help place components in the layout and demonstrate the content structure underlying the design

  • Pages - help apply real content to templates displaying the final interface

Principle of the atomic design approach