Getting Started with Tokens

What are tokens?

Design tokens are the single source of truth for Checkatrade’s visual language. They live in the @checkatrade/tokens package and are distributed as CSS custom properties — covering colour, typography, spacing, border radius, and semantic aliases.

Installation

npm install @checkatrade/tokens

Importing the tokens

Import the token CSS once at the root of your app — for example in your global stylesheet or app entry point:

import '@checkatrade/tokens/css';

This makes every --color-*, --typography-*, --spacing-*, and --border-radius-* variable available globally.

Using tokens in Tailwind v4

Map tokens to Tailwind utilities in an @theme block in your global CSS:

@theme inline {
  --color-brand: var(--color-background-action-brand-primary);
  --text-body-md: var(--typography-body-font-size-md);
  --text-body-md--line-height: var(--typography-body-line-height-md);
}

Once mapped, use them as standard Tailwind utilities: text-body-md, text-brand, and so on.

Using tokens directly in CSS

You can reference any token directly without Tailwind:

.my-component {
  color: var(--color-ink-body-default);
  font-size: var(--typography-body-font-size-md);
  padding: var(--spacing-4);
}

Available token groups

Group	Prefix	Example
Colour	--color-*	--color-ink-body-default
Typography	--typography-*	--typography-body-font-size-md
Spacing	--spacing-*	--spacing-4
Border radius	--border-radius-*	--border-radius-md

See the Colours, Typography, and Spacing pages for the full token reference.