Agriculture Design System
Design System for the Export Service

Spacing tokens

Space is the distance between interface elements. It can affect grouping, visual hierarchy, and aesthetics.

Use the following guidelines when making decisions about spacing:

  • the amount of spacing between elements should depend on how closely related they are
  • elements spaced closer together appear to be grouped and are assumed to be related
  • placing more space between elements helps separate them
  • placing more space around elements can help make them more prominent
  • ensure there is sufficient space between elements to help users distinguish between them.

Spacing tokens

All spacing between interface elements should use the following predefined spacing options to help ensure consistency and speed up design and development time.

Spacing options are based on increments of 8px in order to align to an 8px grid.

0 (0px)
0.25 (4px)
0.5 (8px)
0.75 (12px)
1 (16px)
1.5 (24px)
2 (32px)
3 (48px)
4 (64px)
5 (80px)
6 (96px)

How to use spacing tokens

In order to improve consistency, each spacing token is used for a specific purpose. More closely related elements have less spacing between them.

0.5rem (8px)
  • Spacing between icons and text.
  • Spacing between labels/hints and input fields.
0.75rem (12px)
1rem (16px)
  • Used in medium sized components, like Callout, for the space between typography.

  • Used for gaps between cards in Card lists.
  • Used for the padding in small sized components like Accordion.

1.5rem (24px)
  • Used for the gutter between layout columns.
  • Used for the horizontal and vertical gaps between cards in Card grids.

  • Used for the padding inside medium sized components, like Callout, Card and Page alert.

  • Used as a top margin for paragraphs in Prose body text.

2rem (32px)
  • Used in Form stack as the gap between form fields.

3rem (48px)
  • Used for the top padding in PageContent.

  • Used in SectionContent as the gap between component blocks.

  • Used in forms as the gap between fieldsets and input groups.
4rem (64px)