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.


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


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


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


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.