By defining a grid, the contents are located by constructing the screens, maintaining homogeneity throughout the structure. An indispensable requirement to allow a correct distribution in the different screen resolutions.
The components are located and adapted to the retraction, as if they were the legs of a puzzle, composing the screens.
The cut-off points are jumps in which the screen can change its layout. Setting standards ensures design integrity for all screen sizes.
Between 1025px and 1280px
Between 1025px and 1280px
Between 874px and 1024px
Between 600px and 873px
Up to 599px
Our grid consists of 12 columns for desktop resolutions, 8 columns for tablet and 4 columns for mobile
Our grid consists of 12 columns for desktop resolutions, 8 columns for tablet and 4 columns for mobile
It consists of 12 columns. The content will be integrated within a container with a maximum width of 1200px, margin between columns of 24px, and margin on the screen itself of 24px
Se Consists of 8 columns. It consists of a margin between columns of 16px, and margin on the screen itself of 16px
It consists of 4 columns. The margin between columns is 16px with a margin on the screen itself of 16px.
It consists of 4 columns. The margin between columns is 16px with a margin on the screen itself of 16px.
Send an email to the Design System team at
