Design System

Tokens

Design tokens are semantically meaningful aliases for CSS values in a Design System — tokens can be values of properties like spacing, colour, typography, transitions, breakpoints etc. For example, a colour as a RGB / Hexadecimal value, an opacity as a number or a transition ease as Bezier coordinates.

• Using Tokens
• Typography Tokens
• Colour Tokens
• Transition Tokens

Using Tokens

There are two available formats for design tokens in the Sass build process:

• Sass variables: color: $lightblue;
• Iterable Sass maps: $color: ( $lightblue, $darkblue, $red, $orange );

Learn more

Typography Tokens

Typography tokens are written as values for the font: ... ; CSS property. This means that font-size, line-height, font-weight and font-family are encapsulated.

---

Colour Tokens

• darkblue: rgb(36,56,127)

• lightblue: rgb(0,157,220)

• green: rgb(143,212,0)

• red: rgb(241,41,56)

• orange: rgb(255,121,0)

• dark: rgb(87,86,86)

• light: rgb(225,224,224)

• lighter: rgb(245,244,244)

• white: rgb(255,255,255)

---

Transition Tokens

Hover over circle to trigger the transition animation. These tokens provide both the transition-duration and transition-timing-function. The transition-property value is required as a prefix.

• small: cubic-bezier(0.14,1,0.34,1) 200ms

• medium: cubic-bezier(0.5,0,0.1,1) 280ms

• large: cubic-bezier(0.5,0,0.1,1) 350ms