Spacing Styles Tokens

Idea Overview

Enable a new type style set, which lets users predefine and name common spacing units used in various design systems as a style set which is included in shared libraries.

What’s it’s Value

  • Makes it easier to remember the spacing rules that a design team has defined.
  • Aligns design and development teams if spacing tokens are being used.
  • Enables spacing consistency across design teams.

Several design systems utilise a standard set of “px” or “rem” units which are used for:

  • Padding
  • Margins
  • Gutters
  • Component/content spacing

Industry Examples
There is a practice to tokenise some of the standard variables:

  1. Carbon Design System utilises token names such as “$spacing-01”
    Carbon example: Carbon Design System

  2. Salesforce uses the “$spacing-large”, $spacing-medium", $spacing-none" token names as an example.
    Salesforce example: Design Tokens - Lightning Design System

  3. Atlassian uses “Comfortable”, “Cozy”, Compact" to define their default gutter spacing (40px, 16px, 4px).
    Atlassian example: Grid - Foundations - Atlassian Design System

How it might work:
This is a quick and silly mock to explore how it might work… maybe.

3 Likes

This is exactly what we are looking for.
Great would be if the Spacings are selectable in all the Inputfileds (Autolayout etc) as well. So that you can set a spacer token like you set a text style but on every value of a autolayout.

3 Likes

This thread can be closed and I’ll refer visitors to this idea thread instead: