Canva Design System Reference

Foundation

Color Tokens

Canva's full color palette supporting creative possibility and modern interactions — from vibrant brand purple to semantic reds and neutral scales.

Brand Purple

#8B3DFF

Primary CTA · Key interactive · Core brand

Deep Purple

#151E82

Secondary brand · Dark UI contexts

Light Purple Accent

#9E9EFF

Highlights · Light backgrounds

Vibrant Purple

#A370FC

Alternative accent · Gradient transitions

Cyan Teal

#00D9D9

Gradient terminus · Secondary accent

Black

#000000

Primary text · Strong contrast

Deep Dark

#0F1015

Dark backgrounds · Subtle contrast

Secondary Dark

#101219

Panel backgrounds · Card fills

Slate Gray

#394660

Tertiary text · Secondary UI

Medium Gray

#404F6D

Borders · Dividers · Subtle structure

White

#FFFFFF

Primary backgrounds · Light surfaces

Off-White

#F3F4F7

Subtle light backgrounds · Disabled

Error Red

#DB142C

Error states · Destructive actions

Error Dark Red

#B61629

Secondary error emphasis

Typography

Type Scale

Inter for modern clarity and accessibility, Times New Roman for structured hierarchy — a balanced typographic system supporting creative content and technical precision.

Primary Inter UI · Buttons · Body · Captions

Serif Times New Roman Headers · Lists · Hierarchical content

Monospace Courier New Code · Technical content

Display Design anything, anywhere 24px · 600 · 32px

H2 Secondary section headers 15px · 700 · normal

H3 Tertiary headers and subsections 11.7px · 700 · normal

Body The primary content text describes features, guides users, and explains design concepts clearly. 14px · 400 · 22px

Button Call to Action 14px · 600 · 22px

List Item Unordered and ordered list items 10px · 400 · normal

Caption Fine print, metadata, and helper text 12px · 400 · 18px

Code const brand = '#8B3DFF'; 12px · 400 · 18px

Layout

Spacing & Shapes

4px base grid for precision, responsive scales for all breakpoints. Rounded corners range from sharp to pill, border widths from thin to thick, enabling flexible, modern interfaces.

Spacing Scale

4px Extra Small

8px Small

12px Compact

16px Base

24px Medium

32px Large

48px Extra Large

64px Massive

Border Radius

Sharp 0px

Slight 4px

Subtle 8px

Standard 12px

Rounded 16px

Pill 20px

Full 48px

Shadows

Base (0) Flat surfaces · no elevation

Raised (1) Standard cards · mild lift

Elevated (2) Feature cards · medium emphasis

Floating (3) Modals · popovers · strong

Overlay (4) Dropdowns · max prominence

Border Widths

Thin 1px

Medium 2px

Thick 3px

Opacity

Full 100%

Heavy 50%

Medium 25%

Light 7%

Subtle 3%

Z-index / Layering

Base 1

Elevated 2

High 5

Sticky 100

Top 999

Elevation

Depth & Surfaces

Light and dark surface tiers with subtle shadows create perceived depth. White backgrounds anchor light mode; dark surfaces support elevated interactions and premium visual quality.

White Base

Primary light background — canvas for content and interactions

L0 · #FFFFFF

Off-White Surface

Subtle light background — disabled states · secondary containers

L1 · #F3F4F7

Deep Dark Panel

Dark mode primary surface — elevated containers · dark UI

L2 · #0F1015

Secondary Dark Card

Dark mode secondary surface — nested containers · cards

L3 · #101219

White #FFFFFF

Off-White #F3F4F7

Deep Dark #0F1015

Secondary Dark #101219

Border Gray #404F6D

Components

Component Library

Core interactive elements rendered at exact specifications — colors, radii, shadows, and states that power Canva's creative interface.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #8B3DFF bg · #FFFFFF text · 12px radius · 12/24px padding · 44px height · box-shadow rgba(139, 61, 255, 0.3) 0px 8px 16px. Secondary: rgba(255,255,255,0.15) bg · transparent border. Ghost: transparent with no border.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #E0E0E0 border · 8px radius · 44px height · 14px font. Focus: #8B3DFF border · 0px 0px 0px 3px rgba(139, 61, 255, 0.1) shadow.

Card

Content container — elevated surface with shadow

.card

Create your first design

Start with a template or blank canvas. Drag, drop, and design like never before.

#FFFFFF bg · #F3F4F7 border · 12px radius · 24px padding · Raised shadow (Level 1). Title: 14px/600/#000000. Body: 13px/#394660. CTA: primary purple button.

Badges

Status indicators — Primary, Error, Secondary

.badge

New Alert Draft

12px/600 · 4/12px padding · 20px radius. Primary: #8B3DFF. Error: #DB142C. Secondary: #F3F4F7 bg with #000000 text.

Guidelines

Do's & Don'ts

Design principles for consistent, accessible, and empowering use of the Canva design system across all experiences.

Do — Embrace

Use Brand Purple (#8B3DFF) as the sole primary CTA color
Apply Inter for UI text, Times New Roman for structured hierarchy
Maintain 44px minimum height on all buttons and interactive targets
Use 12px standard border-radius on buttons, cards, and inputs
Layer shadows subtly for elevated components only, never on backgrounds
Ensure 4.5:1 contrast ratio (WCAG AA) on all text pairs
Include 12px side padding on mobile layouts for comfortable spacing

Don't — Avoid

Use Error Red (#DB142C) for non-critical messaging — reserve for true errors only
Apply border-radius greater than 20px on rectangular components (unless pill)
Create buttons narrower than 44px height or inputs less than 200px width
Mix light and dark surfaces within a single panel
Apply opacity below 0.5 to text; use color shifts instead
Stack more than two shadow values unless creating glassy inset effects
Shrink padding below 12px inside buttons or 16px in cards
Forget disabled state styling — always gray out and adjust cursor

canva.com

Preview