Color is one of the foundational tools in Canva’s design system. It’s used in almost every component and is a powerful tool for providing hierarchy and guiding users towards particular functionality or features.
Functional colors
We use "functional" color names, which define colors based on their role in the interface. Functional colors make it easier to select the most appropriate colors for any scenario your user could encounter using your app.
We use different shades or variants of these base functional colors to communicate a component's state (e.g. active, hover, disabled).
Functional colors can be accompanied by complementary colors, like foreground colors that are meant to pair perfectly with the primary base colors. For example:
Some functional colors like the ones shown below have low-coloring options, which are more subdued than their primary base functional colors.
Best practices
- Use Canva's functional colors to design your app rather than defining custom colors. Your app will appear in dark mode the majority of the time, but it can also appear in light mode. Using functional colors will help your app stay on brand and allow it to handle theming, as functional colors will display the appropriate color based on the theme.
Usage guidelines
- You can access colors through the UI Kit, by using design tokens in your CSS (through custom variables) or importing them directly in TypeScript/JavaScript.
- When you use the UI Kit's
AppUiProvider, these color tokens will be automatically themed. - Pair functional colors with appropriate complementary colors from their set when needed. For example,
colorPrimarywithcolorPrimaryFore. - Make sure you plan for sufficient color contrast, accounting for accessibility. If you're using the appropriate functional colors, then this is taken care of automatically.
- Ask for feedback in our Slack channel if you’re unsure on how to use the colors.
List of colors
Hierarchical functional colors
These colors are used to provide hierarchy around the product.
Primary
Used for primary actions, in areas such as 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 functional colors
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 functional colors
Contextual functional colors are used for specific use cases such as backgrounds, typography, and borders. The use of these colors is mostly contained to base components and page level styles.
Typography
Used for typography and typography-like elements. There's variables to account for typographical hierarchy — with all options meeting accessibility requirements — as well as variables for different tones and applications (for example, links).
Border
Used to group content or create separation between sections of content. Used in form elements, around media, and more.
Background
Used for different elevations of background surfaces. We have 4 levels — 1 being the lowest and 4 being the highest — which makes it possible to achieve the visual outcomes desired in the product. Used for page backgrounds, dialogs, flyouts, and more.