Skip to content
#ask-design-system

Guides

Introduction

Stable

How this design system is organised and how to consume tokens and components.

Purpose

This documentation site describes Checkatrade design tokens and React components shipped as npm packages. Use it as the source of truth for visual language, spacing, typography, and interactive patterns.

Packages

PackageRole
@checkatrade/tokensCSS variables for colour, type, spacing, radii, and semantic aliases.
@checkatrade/components-webReact components built with those tokens and Tailwind CSS v4.

Consuming in an app

  1. Install dependencies and import token CSS once (globally), for example import '@checkatrade/tokens/css'.
  2. Configure Tailwind v4 with an @theme block that maps design utilities to the same var(--…) names as Storybook and this site (see the Core section and your app’s Storybook globals.css).
  3. Import components from @checkatrade/components-web and pass props as documented on each component page.

Contributing

Add or change tokens in the tokens package, then update consumer @theme maps. Add components in packages/web, export them from the package entry, and document them here with a page under Components and an entry in the sidebar navigation config.