Tokens & States

Tokens & States 🔗

Color tokens are design decisions, translated into data. They act as a “source of truth” to help ensure that product experiences feel unified and cohesive.

Introduction

Tokens are our way to apply visual foundations in our react based applications.

Tokens are name and value pairings that represent small, repeated design decisions. A token can be color, font style and size or even a unit of white space.

One of the most important topics are accessibility. And tokens are a great way to ensure that what we do in our applications has the right contrasts in order to secure a good user experience.

Color Tokens

The way our color tokens are structured is that they all have their base in our palette. From there by making a token for each design decision we ensure that each decision is maintained properly.

• Color tokens consist of a shade or value from our palette.

• By picking colors from our list of color tokens instead of directly from our palette. We ensure that the right color is used at the right time to a higher degree than by using our palette directly.

Property	Description
Surface	Used for bigger elements in order to make hierarchy and depth on pages
Background	Colors for backgrounds on smaller elements and components such as buttons, badges, inputs and more
Stroke	Used to make elements stand out and increase variant and/or contrast on background.
Text	Colors designated for text use only
Icon	Colors designated for iconography use only

By following the same pattern on each of these categories you end up with colors working together.

Illustration: The first word in any token tells us what kind of token it is. Color, spacing or Border radius token. Spacing and border radius tokens falls under the category “value tokens” as they are built up of a single value. And are means to secure that we are using the correct amount of “white space” in our applications

Property	Role	Emphasis	State
Surface Background Stroke Text Icon	danger	solid	hover

Illustration: Shows how a token color state could look like for a component

Component States

• Default : Used for the default state of a component
• Hover : Occurs when hovering over a component
• Active : The active state of a component (on / off)
• Focus : When tabbing to a component or giving focus through other means
• Disabled : When the component is not interactable and out of potential of focus
• OnClick : In the process of clicking a component

Value Tokens

Radius

Name	Pixel	Rem
radius.none	0 px	0 rem
radius.tiny	2 px	0.2 rem
radius.small	4 px	0.4 rem
radius.medium	6 px	0.6 rem
radius.large	8 px	0.8 rem
radius.xlarge	10 px	1 rem
radius.xxlarge	12 px	1.2 rem
radius.round	200 px	20 rem

Spacing

Name	Pixel	Rem
spacing.none	0 px	0 rem
spacing.tiny	4 px	0.4 rem
spacing.small	8 px	0.8 rem
spacing.medium	12 px	1.2 rem
spacing.large	24 px	2.4 rem
spacing.xlarge	48 px	4.8 rem

Tokens in Figma

All tokens can be found as Local variables
Here we make our tokens and they are divided into seperate lists.

• 01.Palette
• 02.Colors
• 03.Value tokens