Wiz'rd

Preview & Download

Review your theme in the preview panel, then download as JSON tokens. The ZIP contains DTCG-formatted JSON organised into raw/, alias/, and system/ directories — the same format used by Figma token plugins and the Toucan CLI.

Project Name

Used for the ZIP filename and suggested directory name.

Contains raw/, alias/, and system/ directories with DTCG JSON files.

What to do with the download

1. Install the CLI if needed

npm install -D @toucan-ui/cli

2. Extract the ZIP into your project

unzip ~/Downloads/custom-tokens.zip -d ./tokens/custom

3. Point your config at the tokens

{
  "tokens": "./tokens/custom",
  "outDir": "./css"
}

This tells the CLI to compile your tokens instead of the default preset.

4. Build

npx toucan build

5. Import the compiled CSS

/* globals.css */
@import './css/toucan.css';

The JSON files are also compatible with Figma token plugins and can be used as input to other Style Dictionary build targets.

Live Preview

Display Large

Display Medium

Display Small

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Large body text for lead paragraphs.

Default body text in the surface colour.

Small text for captions and secondary content.

Extra-small text for fine print and labels.

Muted text for supporting information.

Code

const theme = createTheme(tokens);

export default theme;

Buttons

Badges

PrimarySuccessDangerWarningInfo

Inputs

Toggle

Radio Group

Box / Card

Elevated box with medium radius and padding.

Alerts

Informational message.
Success message.

Avatars

Accordion

Content for the first accordion section.

Link

Default linkSmall link

Breadcrumb

Tabs

Overview panel content.

Separator

Horizontal separator shown above and below.

Slider

Progress & Skeleton