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.
Using colors
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 and available as autocomplete options via IntelliSense.
List of color tokens
Hierarchical
These colors are used to provide hierarchy around the product.
Primary
Used for primary actions, such as for buttons and badges.
Secondary
Used for secondary actions, in areas such as buttons and badges.
Tertiary
Used for tertiary actions, in areas such as buttons and badges.
Contrast
Used for situations when contrast is hard to achieve, such as buttons on top of images.
Tonal
These colors are used to provide tonal differences around the product.
Positive
Used for positive actions, such as alert messages and badges.
Critical
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.
Warn
Used for warnings, in areas such as alert messages or badges.
Info
Used for general info, in areas such as alert messages or badges.
Neutral
Used for neutral info, in areas such as badges.
Contextual
These colors are used for specific use cases such as backgrounds, typography, and borders.
Background
Used for different elevations of background surfaces, such as page backgrounds, dialogs, flyouts, and more.
Border
Used to group content or create separation between sections of content.
Overlay
Used to style an overlay, increasing the separation between the foreground and the background.
Typography
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).