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

Playbook

Color

Base colors

bg:light

bg:dark

Theme colors

primary

surface:0:primary

surface:1:primary

surface:2:primary

surface:3:primary

surface:4:primary

surface:5:primary

accent

surface:0:accent

surface:1:accent

surface:2:accent

surface:3:accent

surface:4:accent

surface:5:accent

highlight

surface:0:highlight

surface:1:highlight

surface:2:highlight

surface:3:highlight

surface:4:highlight

surface:5:highlight

Semantic colors

info

surface:0:info

surface:1:info

surface:2:info

surface:3:info

surface:4:info

surface:5:info

success

surface:0:success

surface:1:success

surface:2:success

surface:3:success

surface:4:success

surface:5:success

warning

surface:0:warning

surface:1:warning

surface:2:warning

surface:3:warning

surface:4:warning

surface:5:warning

danger

surface:0:danger

surface:1:danger

surface:2:danger

surface:3:danger

surface:4:danger

surface:5:danger

Typography

Fox Jumps Over Dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog