App UI Kit
Components
Accordion(opens in a new tab or window)Alert(opens in a new tab or window)Avatar(opens in a new tab or window)AvatarGroup(opens in a new tab or window)AudioCard(opens in a new tab or window)Badge(opens in a new tab or window)Box(opens in a new tab or window)Button(opens in a new tab or window)Carousel(opens in a new tab or window)Checkbox(opens in a new tab or window)CheckboxGroup(opens in a new tab or window)ColorSelector(opens in a new tab or window)Column(opens in a new tab or window)Columns(opens in a new tab or window)CustomizableSelect(opens in a new tab or window)DateInput(opens in a new tab or window)EmbedCard(opens in a new tab or window)FileInput(opens in a new tab or window)FileInputItem(opens in a new tab or window)Flyout(opens in a new tab or window)FlyoutMenu(opens in a new tab or window)FormField(opens in a new tab or window)Grid(opens in a new tab or window)HorizontalCard(opens in a new tab or window)Icons(opens in a new tab or window)ImageCard(opens in a new tab or window)InputPill(opens in a new tab or window)Link(opens in a new tab or window)LoadingIndicator(opens in a new tab or window)Masonry(opens in a new tab or window)MultilineInput(opens in a new tab or window)NumberInput(opens in a new tab or window)Pill(opens in a new tab or window)PillsInput(opens in a new tab or window)Placeholder(opens in a new tab or window)ProgressBar(opens in a new tab or window)RadioGroup(opens in a new tab or window)Rows(opens in a new tab or window)Scrollable(opens in a new tab or window)SearchInputMenu(opens in a new tab or window)SegmentedControl(opens in a new tab or window)Select(opens in a new tab or window)Slider(opens in a new tab or window)Swatch(opens in a new tab or window)Switch(opens in a new tab or window)Tabs(opens in a new tab or window)Text(opens in a new tab or window)TextInput(opens in a new tab or window)TextPlaceholder(opens in a new tab or window)TimeInput(opens in a new tab or window)Title(opens in a new tab or window)TitlePlaceholder(opens in a new tab or window)TruncatedText(opens in a new tab or window)TypographyCard(opens in a new tab or window)VideoCard(opens in a new tab or window)
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.
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>
TSX
These props are documented in Storybook(opens in a new tab or window) and available as autocomplete options via IntelliSense.
List of color tokens
Actions
These colors are used to perform actions, in such components as buttons, menu items or pills.
Primary
Key actions that represent the main purpose of the interface.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-primary-bg | colorActionPrimaryBg | ||
--ui-kit-color-action-primary-bg-hovered | colorActionPrimaryBgHovered | ||
--ui-kit-color-action-primary-bg-pressed | colorActionPrimaryBgPressed | ||
--ui-kit-color-action-primary-fg | colorActionPrimaryFg |
Secondary
Supporting actions such as secondary buttons and pills.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-secondary-bg | colorActionSecondaryBg | ||
--ui-kit-color-action-secondary-bg-hovered | colorActionSecondaryBgHovered | ||
--ui-kit-color-action-secondary-bg-pressed | colorActionSecondaryBgPressed | ||
--ui-kit-color-action-secondary-fg | colorActionSecondaryFg | ||
--ui-kit-color-action-secondary-border | colorActionSecondaryBorder |
Tertiary
Subdued actions such as menu items and teritary buttons.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-tertiary-bg | colorActionTertiaryBg | ||
--ui-kit-color-action-tertiary-bg-hovered | colorActionTertiaryBgHovered | ||
--ui-kit-color-action-tertiary-bg-pressed | colorActionTertiaryBgPressed | ||
--ui-kit-color-action-tertiary-fg | colorActionTertiaryFg |
Overlay
Actions that appear over busy and vibrant backgrounds.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-overlay-bg | colorActionOverlayBg | ||
--ui-kit-color-action-overlay-bg-hovered | colorActionOverlayBgHovered | ||
--ui-kit-color-action-overlay-bg-pressed | colorActionOverlayBgPressed | ||
--ui-kit-color-action-overlay-bg-disabled | colorActionOverlayBgDisabled | ||
--ui-kit-color-action-overlay-fg | colorActionOverlayFg | ||
--ui-kit-color-action-overlay-fg-disabled | colorActionOverlayFgDisabled |
Selected
Actions that indicate a user selection or the origin of an effect.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-selected-bg | colorActionSelectedBg | ||
--ui-kit-color-action-selected-bg-hovered | colorActionSelectedBgHovered | ||
--ui-kit-color-action-selected-bg-pressed | colorActionSelectedBgPressed | ||
--ui-kit-color-action-selected-fg | colorActionSelectedFg | ||
--ui-kit-color-action-selected-border | colorActionSelectedBorder |
General
Universal color states that apply across multiple components.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-action-bg-disabled | colorActionBgDisabled | ||
--ui-kit-color-action-fg-disabled | colorActionFgDisabled | ||
--ui-kit-color-action-border-disabled | colorActionBorderDisabled | ||
--ui-kit-color-action-subtle-bg-disabled | colorActionSubtleBgDisabled | ||
--ui-kit-color-action-subtle-fg-disabled | colorActionSubtleFgDisabled |
Feedback
Positive
Successes and other positive information.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-positive-bg | colorFeedbackPositiveBg | ||
--ui-kit-color-feedback-positive-fg | colorFeedbackPositiveFg | ||
--ui-kit-color-feedback-positive-subtle-bg | colorFeedbackPositiveSubtleBg | ||
--ui-kit-color-feedback-positive-subtle-fg | colorFeedbackPositiveSubtleFg |
Info
General information.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-info-bg | colorFeedbackInfoBg | ||
--ui-kit-color-feedback-info-fg | colorFeedbackInfoFg | ||
--ui-kit-color-feedback-info-subtle-bg | colorFeedbackInfoSubtleBg | ||
--ui-kit-color-feedback-info-subtle-fg | colorFeedbackInfoSubtleFg |
Warn
Cautionary information.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-warn-bg | colorFeedbackWarnBg | ||
--ui-kit-color-feedback-warn-fg | colorFeedbackWarnFg | ||
--ui-kit-color-feedback-warn-subtle-bg | colorFeedbackWarnSubtleBg | ||
--ui-kit-color-feedback-warn-subtle-fg | colorFeedbackWarnSubtleFg |
Critical
Errors and problems.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-critical-bg | colorFeedbackCriticalBg | ||
--ui-kit-color-feedback-critical-fg | colorFeedbackCriticalFg | ||
--ui-kit-color-feedback-critical-subtle-bg | colorFeedbackCriticalSubtleBg | ||
--ui-kit-color-feedback-critical-subtle-fg | colorFeedbackCriticalSubtleFg |
Hint
Hints and assistive information.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-hint-bg | colorFeedbackHintBg | ||
--ui-kit-color-feedback-hint-fg | colorFeedbackHintFg | ||
--ui-kit-color-feedback-hint-subtle-bg | colorFeedbackHintSubtleBg | ||
--ui-kit-color-feedback-hint-subtle-fg | colorFeedbackHintSubtleFg |
Overlay
Info over busy backgrounds.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-feedback-overlay-bg | colorFeedbackOverlayBg | ||
--ui-kit-color-feedback-overlay-fg | colorFeedbackOverlayFg |
UI
Neutral grays, focus and overlay colors for use within UI components, such as alert or thumbnail backgrounds.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-ui-border | colorUiBorder | ||
--ui-kit-color-ui-border-focused | colorUiBorderFocused | ||
--ui-kit-color-ui-neutral-subtle-bg | colorUiNeutralSubtleBg | ||
--ui-kit-color-ui-neutral-bg | colorUiNeutralBg | ||
--ui-kit-color-ui-neutral-strong-bg | colorUiNeutralStrongBg | ||
--ui-kit-color-ui-neutral-strongest-bg | colorUiNeutralStrongestBg | ||
--ui-kit-color-ui-overlay-bg | colorUiOverlayBg |
Content
General text and icons.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-content-fg | colorContentFg | ||
--ui-kit-color-content-subtle-fg | colorContentSubtleFg | ||
--ui-kit-color-content-subtlest-fg | colorContentSubtlestFg | ||
--ui-kit-color-content-placeholder-fg | colorContentPlaceholderFg | ||
--ui-kit-color-content-positive-fg | colorContentPositiveFg | ||
--ui-kit-color-content-info-fg | colorContentInfoFg | ||
--ui-kit-color-content-warn-fg | colorContentWarnFg | ||
--ui-kit-color-content-critical-fg | colorContentCriticalFg |
Control
Form elements such as text inputs, selects, pickers, sliders and switches.
General
Default states for interactive form elements.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-control-bg | colorControlBg | ||
--ui-kit-color-control-bg-disabled | colorControlBgDisabled | ||
--ui-kit-color-control-strong-border | colorControlStrongBorder | ||
--ui-kit-color-control-border-disabled | colorControlBorderDisabled | ||
--ui-kit-color-control-border-focused | colorControlBorderFocused | ||
--ui-kit-color-control-border-hovered | colorControlBorderHovered |
Critical
Error states and validation problems in form controls.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-control-critical-border | colorControlCriticalBorder |
Selected
Active or chosen states in form controls.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-control-selected-bg | colorControlSelectedBg | ||
--ui-kit-color-control-selected-bg-hovered | colorControlSelectedBgHovered | ||
--ui-kit-color-control-selected-bg-pressed | colorControlSelectedBgPressed | ||
--ui-kit-color-control-selected-bg-disabled | colorControlSelectedBgDisabled | ||
--ui-kit-color-control-selected-fg | colorControlSelectedFg | ||
--ui-kit-color-control-selected-fg-disabled | colorControlSelectedFgDisabled | ||
--ui-kit-color-control-selected-border | colorControlSelectedBorder |
Link
Navigational link elements.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-link-fg | colorLinkFg | ||
--ui-kit-color-link-fg-hovered | colorLinkFgHovered | ||
--ui-kit-color-link-fg-pressed | colorLinkFgPressed | ||
--ui-kit-color-link-fg-disabled | colorLinkFgDisabled |
Handle
Tactile handles and grabbers.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-color-handle-bg | colorHandleBg | ||
--ui-kit-color-handle-bg-disabled | colorHandleBgDisabled |
Surface backgrounds
Elevation backgrounds of various surface containers.
CSS variable | JavaScript variable | Dark theme | Light theme |
|---|---|---|---|
--ui-kit-elevation-surface-floating-bg | elevationSurfaceFloatingBg | ||
--ui-kit-elevation-surface-raised-bg | elevationSurfaceRaisedBg | ||
--ui-kit-elevation-surface-bg | elevationSurfaceBg | ||
--ui-kit-elevation-sunken-bg | elevationSunkenBg |