To build the system we followed a popular and robust methodology called Atomic Design. It is a methodology created by Brad Frost that seeks to guide the construction of interface design systems in a more deliberate way and with an explicit order and hierarchy.
‍
In chemistry, atomic elements have fixed properties that define them. Oxygen and hydrogen alone are atoms with independent properties. However, when these elements combine, they create molecules, which acquire their own characteristics, formed by the atoms they contain.
‍
The atomic design methodology is applied in the design process as a guide for building everything from small elements to templates and pages. It begins by tracing the foundational elements, or atoms, that will be necessary for the design of the components.

The Brand System is the core identity of a brand. It encompasses a small set of specific colors, typefaces, logos, and defines the visual aesthetic and the voice and tone of the product.

UI Visual Language is the system by which the product use elements of design to communicate meaning with users via the interface. This system is the foundational mechanism by which a brand translates to user interfaces.

The Component System is where the visual language is applied to components. Design and development overlap, as this is a collaborative process. The design token system and API system are shared areas between design and development.

Changes in business models, product growth, the emergence of new technologies, among other reasons, mean that product design is constantly evolving and growing. Therefore, it is necessary for the system to be flexible to undergo changes at any time. The systems are intended to have the final version of the component but, they must support modifications and levels for distribution. We design the systems to be versatile under any circumstances.