Spacing

In order to offer a unified experience to our users, it is very important that we are also consistent in the use of spacing in our interfaces. With the use of an escalation of rhythm to the product and we create familiarity throughout the pages.
Spacing can be applied both vertically and horizontally.

If you want to use margin you may replace use for m and to use padding replace for p.

Default

use-0

0rem (0px)

use-1

0.25rem (4px)

use-2

0.50rem (8px)

use-3

0.75rem (12px)

use-4

1rem (16px)

use-5

1.25rem (20px)

use-6

1.5rem (24px)

use-7

2rem (32px)

use-8

2.5rem (40px)

use-9

3rem (48px)

use-10

3.5rem (56px)

use-11

4rem (64px)

use-12

4.5rem (72px)

Horizontal

You must use "s" to margin start or "e" to margin end on the horizontal spacings.

use(s/e)-0

0rem (0px)

use(s/e)-1

0.25rem (4px)

use(s/e)-2

0.50rem (8px)

use(s/e)-3

0.75rem (12px)

use(s/e)-4

1rem (16px)

use(s/e)-5

1.25rem (20px)

use(s/e)-6

1.5rem (24px)

use(s/e)-7

2rem (32px)

use(s/e)-8

2.5rem (40px)

use(s/e)-9

3rem (48px)

use(s/e)-10

3.5rem (56px)

use(s/e)-11

4rem (64px)

use(s/e)-12

4.5rem (72px)

Vertical

You must use "t" to margin top or "b" to margin bottom on the vertical spacings.

use(t/b)-0

0rem (0px)

use(t/b)-1

0.25rem (4px)

use(t/b)-2

0.50rem (8px)

use(t/b)-3

0.75rem (12px)

use(t/b)-4

1rem (16px)

use(t/b)-5

1.25rem (20px)

use(t/b)-6

1.5rem (24px)

use(t/b)-7

2rem (32px)

use(t/b)-8

2.5rem (40px)

use(t/b)-9

3rem (48px)

use(t/b)-10

3.5rem (56px)

use(t/b)-11

4rem (64px)

use(t/b)-12

4.5rem (72px)