Design tokens

What are design tokens? Why use them?

A design token is a variable used to store design-related values, such as colors. They act as a single source of truth for design properties, simplifying the maintenance of interface elements and enabling features, such as theming.

The App UI Kit exposes design tokens as JavaScript variables, CSS variables, and React component props. Apps can use these tokens to customize components or create components that match the look and feel of Canva.

Your app must be wrapped in AppUiProvider, for design tokens to work, even if you're using custom components.

Using design tokens

CSS variables

You can use the CSS variables in global stylesheets, CSS modules, or your app's source code:

.button {
  background-color: var(--ui-kit-color-primary);
}

css

The variables are written in kebab case and prefixed with --ui-kit-.

JavaScript variables

You can use the JavaScript variables in your app's source code:

import { AppUiProvider, tokens } from "@canva/app-ui-kit";
import "@canva/app-ui-kit/styles.css";

function App() {
  return (
    <AppUiProvider>
      <div style={{ backgroundColor: tokens.colorPrimary }}>Hello world.</div>
    </AppUiProvider>
  );
}

tsx

The variables are written in camel case, without a prefix.

React component props

The props of some components only accept certain tokens. This prevents you from using components in a way that would be unfamiliar to Canva's users. For example, the Button component only has three color variants:

<Button variant="primary">Click me</Button>
<Button variant="secondary">Click me</Button>
<Button variant="tertiary">Click me</Button>

tsx

These props are documented in Storybook and available as autocomplete options via IntelliSense.

List of design tokens

You can find the reference documentation for the tokens on the following pages: