Spaces

All spacing (margins and paddings) for components and typography are multiples of 8px (i.e. 0.5rem). Whenever possible, make sure that objects line up, both vertically and horizontally. By building your product you are free to define your spaces from the following scale by keeping in mind the following guidelines:

  • Avoid choosing spaces outside the scale
  • Keep space consistency in your product
  • The distance of elements has to reflect their hierarchically relation
  • Chose small distances for close relation (e.g. checkbox to label) and large distances for distant relations (e.g. Header to Intro).
00rem0px
10.5rem8px
21rem16px
31.5rem24px
42rem32px
52.5rem40px
63rem48px
73.5rem56px
84rem64px
94.5rem72px
105rem80px