Atomic design is a methodology for creating design systems based on dividing the interface into structured elements. There are five distinct levels, but we use a more simplified structure consisting of three:

• Atoms
• Molecules
• Organisms

In the context of web interfaces, atoms are the smallest elements, such as input fields, buttons, or icons.

Molecules are a combination of atoms with each other, our building blocks that can be connected to create organisms. They have their own properties and play the role of the skeleton of our design system. For example, a separate input field and a button may not be so useful on their own, but by combining them, we get a functional block that can be used to interact with the user.

Organisms are combinations of molecules that form larger, independent sections of the interface. These elements include complex combinations, such as navigation bars, product cards, or contact forms.