About design tokens
Design tokens are the main format we use to distribute brand decisions across Productboard. You can think of them as variables that have their associated name, value and description. Sometimes their value can be extended with expressions or references to other design tokens.
If you’d like to read about the format see W3C’s document.
Design token format
"teal": {
"50": {
"$type": "color",
"$value": "#f2fbf9",
"$description": "Light: Contrast AAA 104º with midnight.950. Dark: Contrast AAA 105º with white."
}
}
Example of color stored in design token format.
Types of design tokens
As with other design systems, we use design tokens in multiple abstractions to create a cascading structure where global tokens are referenced in our semantic and component level. This allows us to be very flexible when creating variables for certain product use cases while keeping the core of our brand concise and manageable.
How to use
Designers
Designers can access design tokens through our Figma libraries. You get access to them when starting at the Productboard and use them with the component libraries and patterns.
Devs
Installation
You can install package for your platform using pnpm:
pnpm add @productboard/[[platform]-design-tokens]
Usage
Import tokens directly to your files or use other delivery method set up in your project. F.e.
//import design tokens build for emails in typescript format
import tokens from '@productboard/email-design-tokens';
//Use tokens in code
const fontFamily = tokens.typography.fontFamily.base;
What’s included
We have comprehensive list of tokens for everything from color, typography and border radius to shadows and motion tokens. You can access them in your regular workflow through design libraries and built packages.
You can also read about some of the token types by refering to particular section: