☂️ Design Tokens

[1ntEgr8]

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:

• [ ] Establish a list of design tokens with default values
• [ ] Design a configuration API for modification of tokens in a safe way (by safe I mean in a way that doesn't destroy the look and feel of the UI) #1
• [ ] Outline usage guidelines for developers (both for those working in this repo, and those outside)

Prior art/examples:

• shoelace
• fast design
• material design
• base web
• tailwind css customization

[1ntEgr8]

List of tokens

• font-size
• font-weight
• colors:
  • primary
  • secondary
  • tertiary
  • success
  • warning
  • danger
  • black
  • grey
  • light-grey
• animation
  • speed
  • easing functions
• border-radius
• elevation
  • z-index
• spacing

Assigning values to tokens

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.