Open 1ntEgr8 opened 3 years ago
First, define a base design unit. Then assign a range of values based on a certain array of multipliers. For example, you could say 1 design unit = 12px
, and the range of values is [0.1,0.2,0.5,1,2,4,8]
. Then the final range of values would be 12px * [0.1,0.2,0.5,1,2,4,8]
.
Note that px
can be replaced by any other CSS unit like rem
or fr
For colors, we can define a base for each category, and algorithmically generate a palette of colors.
The above approach discretizes the token space and provides developers with a finite set of choices. This can help maintain consistency across our UIs.
A design system is a set of guidelines for composing UI that is conformant with the look and feel of a brand. One of the artifacts produced is a list of design tokens.
Design tokens are a finite set of values with semantically meaningful labels that can be applied to style UI. This can include things like tokens for typography (sans, sans-serif, etc), color (primary, secondary, etc), and spacing (ramps for padding and spacing levels). Each token has a name, and a corresponding value. This set of values defines a list of design tokens that can be used to realize a design system in the form of UI.
Goals of this issue:
Prior art/examples: