We use a Modular Grid System, which help us keep the visuals aligned and give our users the same visual positioning experience that helps them define the location of each item on the screen easily and in some cases the can figure out the location of any CTA or element faster way.

Width

We take the full width with a max of (1800px), any other case we leave whitespaces from the right and left with this values depends on the screen size


Columns/Module

We use 12 Columns in desktop and mobile since it is the best practices.


Gutter

Gutter between columns each other is fixed value: 40px.


Baseline

Our baseline value is 40px. We use this value to unify as much as possible in the case of whitespaces and sizing.


Columns/Module height

For each module hight, we use 1 or 2 or 3 extra counts of baselines. The major rule here is we must create any kind of components (expect buttons and for elements only) shaped by grouping one or more baseline are. Then we leave another baseline at least as whitespace.