The Spacing System#

We use increments of 4 pixels to space content within components and relative to components.

Spacing within components#

  • Use the form layout component to automatically add spacing between input fields and their labels.
  • Use the text container component to automatically add spacing between paragraphs, lists, or other text components.
  • Use the Base token (16px) inline with text and atom-level components (between text and component) eg. Badge component.

Choosing spacing#

Common values#

  • Use small spacing between small components and components with a close functional relationship.
  • Use large spacing between large components or components that don't share a close functional relationship.

Xxsmall (4px) between#

  • Icons and text.

  • Input titles and input fields (built into the component).

    This spacing is built into:

  • The button component.

  • The input component.

Xsmall (8px ) between#

  • Buttons

Base (16px) and Large (20px)#

Last updated on by Larissa Hsia