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

Color

Base colors

color:light
color:dark

Theme colors

primary
primary:000
primary:100
primary:200
primary:300
primary:400
primary:500
primary:600
accent
accent:000
accent:100
accent:200
accent:300
accent:400
accent:500
accent:600
highlight
highlight:000
highlight:100
highlight:200
highlight:300
highlight:400
highlight:500
highlight:600

Semantic colors

info
info:000
info:100
info:200
info:300
info:400
info:500
info:600
success
success:000
success:100
success:200
success:300
success:400
success:500
success:600
warning
warning:000
warning:100
warning:200
warning:300
warning:400
warning:500
warning:600
error
error:000
error:100
error:200
error:300
error:400
error:500
error:600

Typography

Fox Jumps Over Dog

Fox Jumps Over Dog

Fox Jumps Over Dog

Fox Jumps Over Dog

Fox Jumps Over Dog
Fox Jumps Over Dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog