The spacing scale is designed to give designers and authors flexibility while still providing a consistent visual balance to the UI.

The spacing scale units are based on 0.5rem. 1rem commonly equals 16px, so our spacing units are based on 8px. Because rems are relative to the root which can vary by browser, the exact pixel size may change.

Usage guidelines

Consider the following when choosing which spacing style to apply:

  • The overall layout of the page
  • The relationship between information or components
  • How the layout will reflow on smaller viewports

Naming

Most components have these options for top margin:

  • Default — this is the default top margin
  • Increase — this will increase the top margin by one step
  • Decrease — this will decreases the top margin by one step
  • Remove — this will remove the top margin