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