Grids

We follow the Tailwind format for the space tokens naming convention, in which each round number represents a multiple of 4px. For example: p-1=4px, p-2=8px.

Each space token should be used instead of the pixel or REM values when adding space between elements.

Our spacing system is based on a 4 pixel unit; using 16px as baseline this way 1rem=16px. The scale leverages multiples of this 4 pixel unit, following pair pixel values that originate from it.

This scale is the main foundation of our spacing system that allows us to build the UI from the 4px unit. We customized in a way this scale, making it a limited set of values that can be used to create layouts and lay out elements in the UI in a more consistent way.

As we mentioned, each value is a multiple of the base unit (4px), having a range from 0px to 80px, and having and exception of 22px for specific usage of button margin.