Spacing

A spacing system simplifies the creation of page layouts and UI.

Space

The token space-100 represents the base unit: 8px. Other tokens are named relative to that:

  • space-50 = 4px (50% of base unit)
  • space-200 = 16px (200% of base unit)
  • space-400 = 32px (400% of base unit)
  • and so on…

The table below displays all the current space tokens, along with their equivalent values and can be used in both code and Figma to ensure consistency in layout and component spacing.