Building Blocks Framework

This is the way we build components on the prototypes.


Atoms are the smallest piece of User Interface we can build, some of them must be used just on specific places and other ones can be spread throughout the application. Furthermore, they have been separated in two types.

Be careful when creating and especially when editing Atoms, since they can be applied anywhere in the applications, they have en exponential risk to break things you are not aware.

Global Atoms

Global Atoms are those Atoms which can be used anywhere in the system, it guarantees consistency and so the ease to learn.

Contextual Atoms

This type of component is based on its context and responsibilities and must not be used in a context or be responsible for something it was not initially created for. In the end, they do not make sense outside of their context, look at the example below:

Contextual Atoms do not make sense outside their context

The design of each component is based on their meaning so using a component for something it was not initially created increases the probability of breaking the design somewhere else.

Using Contextual Atoms in their respective place makes much more sense, look at the example below:


Are a composition of Atoms, usually shape rows or columns. Often they build items of a list. You can notice in the image below a few Contextual Atoms and Global atoms shaping molecules.


Shape blocks of Molecules. Its responsibility is to wrap Molecules and also may add a few other Atoms around it.

From Atoms to Organisms