Colors

An overview of colors in the App UI Kit.

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>
tsx

These props are documented in Storybook 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.

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-primarycolorPrimary
--ui-kit-color-primary-hovercolorPrimaryHover
--ui-kit-color-primary-activecolorPrimaryActive
--ui-kit-color-primary-disabledcolorPrimaryDisabled
--ui-kit-color-primary-forecolorPrimaryFore
--ui-kit-color-primary-fore-disabledcolorPrimaryForeDisabled

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-secondarycolorSecondary
--ui-kit-color-secondary-hovercolorSecondaryHover
--ui-kit-color-secondary-activecolorSecondaryActive
--ui-kit-color-secondary-disabledcolorSecondaryDisabled
--ui-kit-color-secondary-forecolorSecondaryFore
--ui-kit-color-secondary-fore-disabledcolorSecondaryForeDisabled

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-tertiarycolorTertiary
--ui-kit-color-tertiary-hovercolorTertiaryHover
--ui-kit-color-tertiary-activecolorTertiaryActive
--ui-kit-color-tertiary-disabledcolorTertiaryDisabled
--ui-kit-color-tertiary-forecolorTertiaryFore
--ui-kit-color-tertiary-fore-disabledcolorTertiaryForeDisabled

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-contrastcolorContrast
--ui-kit-color-contrast-hovercolorContrastHover
--ui-kit-color-contrast-activecolorContrastActive
--ui-kit-color-contrast-disabledcolorContrastDisabled
--ui-kit-color-contrast-forecolorContrastFore
--ui-kit-color-contrast-fore-disabledcolorContrastForeDisabled

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

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-positivecolorPositive
--ui-kit-color-positive-hovercolorPositiveHover
--ui-kit-color-positive-activecolorPositiveActive
--ui-kit-color-positive-disabledcolorPositiveDisabled
--ui-kit-color-positive-lowcolorPositiveLow
--ui-kit-color-positive-forecolorPositiveFore
--ui-kit-color-positive-fore-lowcolorPositiveForeLow
--ui-kit-color-positive-fore-disabledcolorPositiveForeDisabled

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.

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-criticalcolorCritical
--ui-kit-color-critical-hovercolorCriticalHover
--ui-kit-color-critical-activecolorCriticalActive
--ui-kit-color-critical-disabledcolorCriticalDisabled
--ui-kit-color-critical-lowcolorCriticalLow
--ui-kit-color-critical-forecolorCriticalFore
--ui-kit-color-critical-fore-lowcolorCriticalForeLow
--ui-kit-color-critical-fore-disabledcolorCriticalForeDisabled

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-warncolorWarn
--ui-kit-color-warn-hovercolorWarnHover
--ui-kit-color-warn-activecolorWarnActive
--ui-kit-color-warn-disabledcolorWarnDisabled
--ui-kit-color-warn-lowcolorWarnLow
--ui-kit-color-warn-forecolorWarnFore
--ui-kit-color-warn-fore-lowcolorWarnForeLow
--ui-kit-color-warn-fore-disabledcolorWarnForeDisabled

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-infocolorInfo
--ui-kit-color-info-hovercolorInfoHover
--ui-kit-color-info-activecolorInfoActive
--ui-kit-color-info-disabledcolorInfoDisabled
--ui-kit-color-info-lowcolorInfoLow
--ui-kit-color-info-forecolorInfoFore
--ui-kit-color-info-fore-lowcolorInfoForeLow
--ui-kit-color-info-fore-disabledcolorInfoForeDisabled

Used for neutral info, in areas such as badges.

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-neutralcolorNeutral
--ui-kit-color-neutral-hovercolorNeutralHover
--ui-kit-color-neutral-activecolorNeutralActive
--ui-kit-color-neutral-disabledcolorNeutralDisabled
--ui-kit-color-neutral-lowcolorNeutralLow
--ui-kit-color-neutral-forecolorNeutralFore
--ui-kit-color-neutral-fore-lowcolorNeutralForeLow
--ui-kit-color-neutral-fore-disabledcolorNeutralForeDisabled

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.

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-canvascolorCanvas
--ui-kit-color-tabdockcolorTabdock
--ui-kit-color-pagecolorPage
--ui-kit-color-surfacecolorSurface

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-bordercolorBorder
--ui-kit-color-border-hovercolorBorderHover
--ui-kit-color-border-activecolorBorderActive
--ui-kit-color-border-disabledcolorBorderDisabled
--ui-kit-color-border-criticalcolorBorderCritical
--ui-kit-color-border-lowcolorBorderLow
--ui-kit-color-border-strongcolorBorderStrong

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

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-overlaycolorOverlay

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).

CSS variableJavaScript variableDark themeLight theme
--ui-kit-color-typography-primarycolorTypographyPrimary
--ui-kit-color-typography-secondarycolorTypographySecondary
--ui-kit-color-typography-tertiarycolorTypographyTertiary
--ui-kit-color-typography-placeholdercolorTypographyPlaceholder
--ui-kit-color-typography-positivecolorTypographyPositive
--ui-kit-color-typography-infocolorTypographyInfo
--ui-kit-color-typography-warncolorTypographyWarn
--ui-kit-color-typography-criticalcolorTypographyCritical
--ui-kit-color-typography-critical-hovercolorTypographyCriticalHover
--ui-kit-color-typography-critical-activecolorTypographyCriticalActive
--ui-kit-color-typography-linkcolorTypographyLink
--ui-kit-color-typography-link-hovercolorTypographyLinkHover
--ui-kit-color-typography-link-activecolorTypographyLinkActive