Colors

Canva has a distinct and vibrant color palette. The App UI Kit exposes a subset of this palette as design tokens. You can use these colors to create a user interface that matches Canva's aesthetic.

Check out the Color design guidelines

Our design guidelines help you create a high-quality app that easily passes app review.

The colors are exposed in the following formats:

• CSS variables
• JavaScript variables
• React component props (with exceptions)

You can use the CSS and JavaScript variables as you would any other design token.

In the case of React component props, some props only accept specific colors. For example, the Alert component only accepts the following colors for the tone prop:

<Alert tone="info">This is an alert.</Alert>
<Alert tone="warn">This is an alert.</Alert>
<Alert tone="positive">This is an alert.</Alert>
<Alert tone="critical">This is an alert.</Alert>

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

These colors are used to provide hierarchy around the product.

Used for primary actions, such as for buttons and badges.

Used for secondary actions, in areas such as buttons and badges.

Used for tertiary actions, in areas such as buttons and badges.

Used for situations when contrast is hard to achieve, such as buttons on top of images.

These colors are used to provide tonal differences around the product.

Used for positive actions, such as alert messages and badges.

Used for negative actions or errors, such as alert messages and buttons, though can also be used to highlight more critical areas such as notification badges.

Used for warnings, in areas such as alert messages or badges.

Used for general info, in areas such as alert messages or badges.

Used for neutral info, in areas such as badges.

These colors are used for specific use cases such as backgrounds, typography, and borders.

Used for different elevations of background surfaces, such as page backgrounds, dialogs, flyouts, and more.

Used to group content or create separation between sections of content.

Used to style an overlay, increasing the separation between the foreground and the background.

Used for typography and typography-like elements. There are variables to account for typographical hierarchy—with all options meeting accessibility requirements—as well as variables for different tones and applications (e.g., links).