What are Tokens ?

Design Tokens are [key, value] pairs that define design choices such as Color, Typography, or Scale. Tokens are defined using CSS variables, and are sometimes styled via native HTML tags (ex: Typography rules can target h1 elements directly).

Tokens provide the base values used to build Blocks, Layouts, and Recipes.

All the tokens that are currently defined can be found in the CSS library’s tokens folder

The generation of design tokens in this library is still a work in progress. More detailed documentation coming soon!

Resources

• W3C Design Tokens Community Group
• Open Props : A design tokens library
• Cobalt UI: The tool I used to generate the design tokens from JSON files
• Style Dictionary: Another tool to generate design tokens