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:
- Component/content spacing
There is a practice to tokenise some of the standard variables:
Carbon Design System utilises token names such as “$spacing-01”
Carbon example: Carbon Design System
Salesforce uses the “$spacing-large”, $spacing-medium", $spacing-none" token names as an example.
Salesforce example: Design Tokens - Lightning Design System
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.