Design tokens

A design token is a central location to store design related information such as colors, fonts, animations and so on. These raw values can then be transformed and be formatted to fit the needs of any platform.

“With design tokens, you can capture low-level values and then use them to create the styles for your product or app. You can maintain a scalable and consistent visual system for UI development.”

—Robin Rendle, What Are Design Tokens?

Introduction

What are design tokens?

Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.

Screenshot of some design tokens with relation

Naming convention

We are using a design token structure and naming convention inspired by this article.

NamespaceObjectBaseModifier
System
Theme
Domain
Group
Component
Element
Category
Concept
Property
Variant
State
Scale
Mode
$ids-color-accent
ids
color
accent
$rlx-dark-mesh-background-color-1
rlx
dark
mesh
background-color
1
$rlx-light-mesh-background-color-1
rlx
light
mesh
background-color
1
$ids-primary-button-background-color
ids
primary-button
background-color
$ids-avatar-border-color
ids
avatar
border-color
$ids-avatar-border-width
ids
avatar
border-width
$ids-avatar-status-size-2
ids
avatar
status
size
2

Design token types

Global tokens

Global tokens are the primitive values in our design language, represented by context-agnostic names. Our color palette, animation, typography, and dimension values are all recorded as global tokens. These can be directly used, and are inherited by all other token types.

Screenshot of some the global design token relation

Alias tokens

Alias tokens relate to a specific context or abstraction. Aliases help communicate the intended purpose of a token, and are effective when a value with a single intent will appear in multiple places.

Screenshot of some design tokens with relation

Component specific tokens

Component-specific tokens are an exhaustive representation of every value associated with a component. They often inherit from alias tokens, but are named in a way that allows engineering teams to be as specific as possible in applying tokens in component development.

Screenshot of some design tokens with relation

Global tokens {# specific-global-tokens}

For more documentation about the global tokens, please see the respective documentation page:

Size tokens

Global size tokens are used for specifying dimensions and spacing for every If Design System component.

NameValuePixelsExample
$size-40.25rem4px
$size-80.5rem8px
$size-120.75rem12px
$size-161rem16px
$size-201.25rem20px
$size-241.5rem24px
$size-281.75rem28px
$size-322rem32px
$size-362.25rem36px
$size-402.5rem40px
$size-442.75rem44px
Not all global size tokens are displayed in this chart.

Color

Global color tokens are used as a base for color throughout the If Design System.

NameValueExample
$color-base-blue-1000054f0#0054f0
$color-base-brown-1006e625e#6e625e
$color-base-brown-200331e11#331e11
Not all global color tokens are displayed in this chart.

Component tokens

Component tokens are specific to given component only. The tokens can be override/used in themes with css variables.

NameValueExample
$ids-avatar-border-colorrgb(110,98,94)
$ids-avatar-status-size-21rem
$ids-avatar-initials-font-size-31.375rem
A

Table of Contents

Edit this section, Opens in new window

Guidelines

Use design tokens directly in your files, otherwise, use functions, mixins, or utility classes as in the examples below. See individual design token section in the component guidelines for more details.

Color tokens

Token Mixin Utility Class
$color-background-light-beige N/A .if.color.background.light-beige
$color-infographic-yellow N/A .if.color.infographic.yellow

Icon tokens

Token Mixin Utility Class
$if-icon-product-ai @include IDS_ICONS_Icon_Product_Ai .if.icon.product.ai
$if-icon-ui-trashcan @include IDS_ICONS_Icon_Ui_Trashcan .if.icon.ui.trashcan

Typography tokens

Token Mixin Utility Class
Aa$font-weight-126 N/A .if.font.weight-126

Microcopy tokens

Name 🏴󠁧󠁢󠁥󠁮󠁧󠁿 🇳🇴 🇸🇪 🇩🇰 🇫🇮 🇪🇪 🇱🇻 🇱🇹 🇷🇺 🇬🇱
$copy-choices-yes yes ja ja ja joo jah jā taip да aap
$copy-choices-no no nei nej nej ei ei nē ne нет naamik
$copy-choices-cancel cancel avbryt avbryt annullere peruuttaa tühista atcelt atšaukti аннулировать annul
$copy-choices-maybe maybe kanskje kanske måske voi olla võib olla var būt gal būt может быть taamaassimavoq
Edit this section, Opens in new window

Usage

This walkthrough will guide you in how to use the design tokens from the design system.

Always make sure you have the latest code. For this example, we will use the design tokens from the color-package.

$ npm i @ids-core/color

Importing and using primary colors with SCSS/SASS

The same method applies for Stylus and LESS!

In your *.scss or *.sass file, you have for example a link that needs correct hover color

a.if:hover {
    color: ? ? ? ?;
}

Add the import from the design system (use your preferred build system to handle aliases and paths):

@import '~@ids-core/color/src/primary';

a.if:hover {
    color: ? ? ? ?;
}

Use the SCSS variable in your code:

@import '~@ids-core/color/src/primary';

a.if:hover {
    color: $color-interaction-dark-blue;
}

And you're done!

Importing and using support colors with JavaScript

An example with React:

import React from 'react';
import IF_COLORS_SUPPORT from '@ids-core/color/src/support';

const DisabledButton = ({ ...props }) => (
    <button
        type="button"
        onClick={...}
        onKeyPress={...}
        style={{
            backgroundColor: IF_COLORS_SUPPORT.blue.rgb
        }}
    >
        {title}
    </button>
)

Or:

import React from 'react';
import { colorBlueSupport } from '@ids-core/color/src/color-variables.module.js'

const DisabledButton = ({ ...props }) => (
    <button
        type="button"
        onClick={...}
        onKeyPress={...}
        style={{
            backgroundColor: colorBlueSupport
        }}
    >
        {title}
    </button>
)
Edit this section, Opens in new window
Contact us, Opens in new window