Tokens

This is a list of all the available design tokens used in the Triptease design system. These tokens are exposed as CSS custom properties, and can be imported into an existing stylesheet using the @import rule:

@import url('https://cdn.design-system.triptease.io/base.css');

The following design token groups are currently available:

• Colours
• Spacing
• Typography

Token structure

Tokens are grouped into types, categories, and values. For example the token for the primary colour, at a contrast ratio of 500, is --color-primary-500.

Using tokens in CSS

If the base CSS is imported, the tokens can be used in CSS using the var function:

.my-element {
    color: var(--color-primary-500);
}