Skip to main content

Spacing Styles Tokens

  • October 22, 2022
  • 3 replies
  • 4836 views

Jared_e1

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.

This topic has been closed for replies.

3 replies

Serge_Weibel

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.


Jared_e1
  • Author
  • 2 replies
  • November 9, 2022

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


  • 0 replies
  • February 7, 2023

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings