Design Tokens

[Bigalan09]

Design tokens are a way of using variables instead of hard-coded values to ensure a better UI consistency across different platforms.

• Colour
  • primary
  • secondary
  • tertiary
  • Data visual colours - use with tags, etc
  • Fonts - family, weights, sizes
  • border radius
  • box shadow
  • space - margin, padding, position
  • sizes - used with sizing scale - used for both width and height properties
  • opacity
  • z-index - managing virtual stacking order across applications
  • line height
  • transitions / animations
  • media queries

I suggest we use something like Style Dictionary