What is Canva's primary brand color?

Canva's brand is not a single hex — it is a 135-degree linear gradient running from cyan #00c4cc to violet #7d2ae8. The gradient appears as the wordmark stripe in the top nav, the primary 'Start designing' CTA fill, and a closing voltage band above the footer. Outside those three placements the chrome is monochrome: deep ink #0f1015 on white #ffffff, with a 40% alpha white token used only for inverse text on the gradient footer band. Pure black #000000 exists in the palette but is reserved for hairline borders, not text.

What typography does Canva use, and what should I use if Canva Sans isn't available?

Canva runs a single variable typeface, Canva Sans, with Noto Sans Variable as the production fallback for languages outside the Canva Sans glyph range. The display tier is unusually quiet — the 84px hero holds at weight 400 with -1.5px letter-spacing, the 64px section headline runs weight 400 at -0.64px, and even the 56px sub-display stays at 400. Body copy sits at 16px/24px weight 400; navigation chips run 14px weight 600. Inter or Geist are the closest open-source substitutes — both have a similar humanist construction and support a wide variable axis. Pull display tracking to roughly -1.8% to match Canva Sans's signature.

What are Canva's pastel showcase tiles?

The product showcase grid uses six pastel fills as tile backgrounds: peach #ffdac4, blush #ffd6d8, lavender #f9defb, cream #ffe9ac, mint-tint #93e8f6, and a 15% alpha lilac wash derived from violet #a370fc. Each tile is a rounded-8px content rectangle filled with one pastel and a flat illustration; cards never combine two pastels and never use a gradient as a tile fill. The gradient is reserved for chrome — wordmark, primary CTA, footer band. This is the system's primary depth device, replacing the drop shadow that most marketing sites would reach for.

Why is everything an 8px rectangle?

8px is the canonical content radius — it appears 144 times in the extracted CSS, against 24 occurrences for the 16px hero-tile radius and 8 for the 9999px pill. Tiles, search inputs, video frames, and feature cards all converge on 8px. Pills (9999px) are reserved for chips above showcase tiles (e.g. 'AI', 'Photo editor', 'Video'); the 16px radius escalates a section-hero tile up from the content rectangle. There is no 4px or 12px content radius in the chrome. The visual rule: chips are pills, tiles are 8px rectangles, hero tiles are 16px rectangles, full stop.

Does Canva's marketing site have a dark mode?

No — the homepage is light-only. The closest analog is the gradient voltage band above the footer, where #ffffff at the top fades into the cyan-violet stripe with weight-400 white display type ('Start designing with Canva') set at 64px. That band is the only inverse surface on the page and shows up exactly once. The Canva editor itself ships with a dark workspace theme, but that surface lives behind authentication and isn't represented in this DESIGN.md, which captures only the public marketing experience.

Can I use this DESIGN.md to build my own React app?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent reproduces Canva's specific contrast — quiet 400-weight Canva Sans on a white canvas, single 135-degree cyan-violet gradient for chrome voltage, 8px pastel tiles for the showcase grid — rather than a generic SaaS theme. You can also reference the tokens directly: every color, type style, radius and spacing value is a quoted value ready to paste into Tailwind config, CSS variables, or your own component library.

Canva Design System

Canva's design system as a DESIGN.md file.

About Canva DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source canva.com

Design & Creative Tools
Productivity & SaaS

Canva's marketing canvas is the rare case where a visual-suite brand resists the urge to paint the whole page. The frame is light and quiet — a white #ffffff canvas, deep #0f1015 ink, and Canva Sans variable type set at weight 400 across most of the surface. What carries the brand is a single 135-degree linear gradient running from cyan #00c4cc to violet #7d2ae8, applied as the wordmark stripe, the primary CTA fill, and a final footer band that closes the page. Nothing else in the chrome reaches for color. The top nav is monochrome, body copy holds at an 85% alpha ink wash against white, and pill chips above the showcase tiles use a 15% alpha lilac wash, not the saturated purple it descends from.

This page packages the whole system into a single DESIGN.md file built on the Google Labs spec. Inside: 22 color tokens grouped into brand gradient stops, pastel tile fills, ink scales and structural neutrals; 11 type styles spanning the 84px hero down to the 14px chip label, all on Canva Sans; 5 corner radii anchored by the 8px content rectangle that appears 144 times on the page; 9 spacing increments built around a 4px-12px chip rhythm and 32px tile gutter; and 21 components covering the gradient CTA, pill chips, pastel tiles, top nav, search input, video showcase frame, and footer voltage band. Every token resolves to a quoted hex, px, or weight that a build tool or AI agent can read directly.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Canva's specific contrast — quiet typographic chrome interrupted by a single gradient voltage and tinted pastel tiles — rather than a generic marketing-site theme. Reference the tokens directly to wire them into Tailwind config, CSS variables, or your own component library. The system is worth studying because it solves a problem visual-creation tools usually get wrong: how to feel friendly and playful without leaning on a rainbow palette. Where most design-tool sites stack five accent hues, Canva picks two and runs them as a single mark.

What makes it distinct

Gradient as wordmarkthe 135deg #00c4cc-to-#7d2ae8 stripe is the only chromatic accent in the chrome, scoped to logo, primary CTA and footer band
Hero at weight 400the 84px Canva Sans display headline runs regular, not bold, with -1.5px tracking; confidence by typographic restraint
8px is the canonical radius144 occurrences against 24 for the 16px tile and 8 for the 9999px pill, a single content-rectangle voice across the page
Pastel tile vocabularypeach #ffdac4, blush #ffd6d8, lavender #f9defb and a 15% alpha lilac chip wash fill the product-showcase tiles instead of drop shadows
Deep ink not blackbody copy and headings sit at #0f1015 (a warm near-black), reserving pure #000000 for hairline borders only

Live at canva.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

canva.com

Explore Canva

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Canva design system FAQ

Common questions about Canva's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Canva — official site

The live homepage this spec was extracted from — see the gradient wordmark, pastel tile grid and Canva Sans hero in motion.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Canva in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→