Design tokens

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.

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);
}

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

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>
  );
}

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

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>

These props are documented in Storybook⁠(opens in a new tab or window) and available as autocomplete options via IntelliSense.

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

• Colors
• Shadows
• Spacing
• Transitions