Spacing base unit

It is the basic unit of measurement used to create consistent spacing between elements of our design. We use a 4-point grid system — each step is a multiple of 4px.

Scale

The scale below ensures that elements like buttons, icons, text, and images are consistently spaced from each other. The grid lists the Figma token name, rem, and pixel values.

TokenFigma variableRemPixelsVisual representation
--spacer-0q-spacer-00rem0px
--spacer-1q-spacer-10.25rem4px
--spacer-2q-spacer-20.5rem8px
--spacer-3q-spacer-30.75rem12px
--spacer-4q-spacer-41rem16px
--spacer-5q-spacer-51.5rem24px
--spacer-6q-spacer-62rem32px
--spacer-7q-spacer-73rem48px