Canva

---
name: canva-com-design-system
source: https://www.canva.com/
extracted: 2026-07-03
theme: light  # measured from neutral usage weight
colors:  # roles inferred from usage frequency + luminance; names verified against values
  canvas: "#ffffff"
  ink: "#000000"
  accent: "#0f1015"  # deep-blue
  accent-2: "#7d2ae8"  # indigo
  accent-3: "#1c2130"  # deep-blue
fonts:
  primary: "Noto Sans"
---

# Canva: Visual Suite for Everyone — Design System

Extracted from **https://www.canva.com/** on 2026-07-03.

> Canva is a free-to-use online graphic design tool. Use it to create social media posts, presentations, posters, videos, logos and more.

Every value below is mined from the site's live CSS (120 native custom properties, ranked usage counts). Role assignments are inferred from usage and luminance and marked as such — treat them as a strong starting point, not gospel.

## Overview

The system reads as light: measured neutral usage weighs 227 light against 48 dark. The palette is chromatic: 12 saturated values against 2 neutrals, led by deep-blue (`#0f1015`). **Noto Sans** carries the interface. Geometry mixes sharp corners (4px) with full pills.

## Usage rules

Derived from the measured usage below — each rule cites its evidence.

- Chromatic color carries 54% of measured usage — this palette uses color structurally. Saturated values can hold large surfaces here; timidity would misrepresent the source.
- The theme is light (measured neutral weight 227:48). Don't flip individual sections to the opposite mode.
- The most-used radius is the full pill (x29); mid-size radii are the exception in this system.
- The only shadows are blur-less hairline offsets — this system barely uses elevation; don't add soft drop shadows.

## Colors

### Neutrals (light → dark)

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `neutral-50` | `#ffffff` | 227 | **canvas** — lightest neutral, matches the measured light-leaning theme |
| `neutral-950` | `#000000` | 48 | **ink** — darkest neutral, highest contrast against canvas |

### Accents

| Token | Value | Usage | Inferred role |
| --- | --- | --- | --- |
| `deep-blue` | `#0f1015` | 57 | **accent** — most-used chromatic color |
| `indigo` | `#7d2ae8` | 41 | **accent-2** — supporting chromatic color |
| `deep-blue-2` | `#1c2130` | 38 | **accent-3** — supporting chromatic color |
| `indigo-2` | `#a370fc` | 34 | — |
| `teal` | `#00c4cc` | 26 | — |
| `indigo-3` | `#8b3dff` | 24 | — |
| `blue` | `#5a32fa` | 22 | — |
| `cyan` | `#1a73e8` | 16 | — |
| `teal-2` | `#13a3b5` | 16 | — |
| `red` | `#fd4958` | 16 | — |
| `indigo-4` | `#992bff` | 15 | — |
| `pale-indigo` | `#f1ebff` | 15 | — |

### Dark mode

The source defines 60 dark-mode variants (via dark selector). Both halves of the system, first 30:

| Token | Light | Dark |
| --- | --- | --- |
| `--tk9EiQ` | — | `dark` |
| `--xpFk1A` | — | `#ffffff26` |
| `--Kd3K9A` | — | `#7630d7` |
| `--DVEAGQ` | — | `#612dae` |
| `--V0s6Og` | — | `#4a2e7e` |
| `--PqRKXQ` | — | `#fff` |
| `--R-jrhg` | — | `#ffffff00` |
| `--GXtk9g` | — | `#ffffff12` |
| `--xGXQgA` | — | `#ffffff26` |
| `--oAdupw` | — | `#fff` |
| `--8-4niA` | — | `#ffffff33` |
| `--wd-tZA` | — | `#ffffff00` |
| `--ntzWpQ` | — | `#ffffff12` |
| `--BorQ6g` | — | `#ffffff26` |
| `--O8dBuQ` | — | `#fff` |
| `--EvA8JQ` | — | `#13162099` |
| `--gIrJLw` | — | `#101219b2` |
| `--XxI4hg` | — | `#0f1015d9` |
| `--SvgSpA` | — | `#13162099` |
| `--N8Oz5g` | — | `#fff` |
| `--4zRigw` | — | `#ffffffb2` |
| `--wv7owA` | — | `#b61629` |
| `--m9I-bA` | — | `#911826` |
| `--Hxdoag` | — | `#721d27` |
| `--pxBf3A` | — | `#fff` |
| `--1sn2Sg` | — | `#a370fc4d` |
| `--4HnQxA` | — | `#a370fc4d` |
| `--NRjSsw` | — | `#a370fc33` |
| `--GviWcg` | — | `#fff` |
| `--kl47TA` | — | `#a370fc` |

`variables.css` ships these as a `prefers-color-scheme: dark` override block.

## Typography

**Noto Sans** is the primary interface face. Full list by usage:

| Family | Usage |
| --- | --- |
| Noto Sans | 18 |
| Canva Sans | 8 |
| Noto Sans Vietnamese | 5 |
| Noto Sans Variable | 3 |
| Google Sans | 2 |
| Roboto-Regular | 1 |
| Roboto | 1 |
| Helvetica | 1 |

**Size scale (px):** `11`, `12`, `14`, `16`, `17.5`, `18`, `24`, `36`, `48`, `66`, `88`, `128`

**Weights in use:** `100` (x3), `300` (x1), `400` (x38), `500` (x14), `600` (x29), `700` (x13)

**Line-heights (unitless):** `1`, `1.04`, `1.06`, `1.1`, `1.2`, `1.25`, `1.4`, `1.6`

**Letter-spacing values:** `-1.5px`, `-.64px`, `-.28px`, `-.01em`, `.25px`, `.3px`

## Spacing

Most-used values (px): `1`, `2`, `4`, `6`, `8`, `10`, `12`, `16`, `24`, `32`, `48`, `64`

## Border radius

| Token | Value | Usage |
| --- | --- | --- |
| `radius-sm` | `4px` | 8 |
| `radius-md` | `8px` | 8 |
| `radius-lg` | `10px` | 11 |
| `radius-xl` | `12px` | 19 |
| `radius-2xl` | `16px` | 11 |
| `radius-3xl` | `20px` | 12 |
| `radius-4xl` | `24px` | 7 |
| `radius-full` | `9999px` | 29 |

## Shadows (ordered by blur radius)

- `shadow-sm` — `0 -16px 20px rgba(14,19,24,.04)` (x2)
- `shadow-md` — `shadowSurface` (x2)

## Breakpoints

`352px`, `410px`, `432px`, `599px`, `600px`, `880px`, `899px`, `900px`

## Starter recipes

Tokens composed into components. The source site's real components were **not** inspected — these are starting points built from the extracted values, with contrast ratios computed rather than assumed.

```css
.button-primary {
  background: var(--color-accent); /* #0f1015 */
  color: var(--color-canvas); /* #ffffff — contrast 19.0:1 */
  border-radius: 9999px; /* pill — mined as 9999px */
  font-weight: 500;
}

.modal {
  background: var(--color-canvas); /* #ffffff */
  border-radius: 12px;
  box-shadow: var(--shadow-md); /* largest mined shadow */
}

.modal-backdrop {
  background: color-mix(in srgb, var(--color-ink) 55%, transparent); /* scrim from #000000 */
}

.input-error {
  border-color: #fd4958; /* mined token: red */
  /* error text: #fd4958 on canvas — contrast 3.3:1, below AA; darken for message text */
}
```

## Observations

- 2 of 14 extracted colors are neutrals.
- 2 distinct shadows; the softest reaches 0px blur.
- 8 breakpoints, from 352px to 900px.
- The site ships a large native token system (120+ custom properties) — prefer those names when extending it.

## Native CSS custom properties

First 40 of 120:

```css
:root {
  --wczjwA: calc(var(----lgQg, 0.1rem)*42);
  --32-5Rg: calc(var(----lgQg, 0.1rem)*36);
  --q5aPlw: calc(var(----lgQg, 0.1rem)*36);
  --XAu0sw: calc(var(----lgQg, 0.1rem)*32);
  --OJy8Yg: calc(var(----lgQg, 0.1rem)*32);
  --Vf8OSg: calc(var(----lgQg, 0.1rem)*36);
  --A3YTsg: calc(var(----lgQg, 0.1rem)*24);
  --Dynksw: calc(var(----lgQg, 0.1rem)*21);
  --VrAiwg: calc(var(----lgQg, 0.1rem)*16);
  --5QGiVg: calc(var(----lgQg, 0.1rem)*14);
  --R07nfg: calc(var(----lgQg, 0.1rem)*12);
  --m8t8Kw: calc(var(----lgQg, 0.1rem)*21);
  --ZYsOLQ: calc(var(----lgQg, 0.1rem)*18);
  --__4QUw: calc(var(----lgQg, 0.1rem)*16);
  --ZOMbtg: calc(var(----lgQg, 0.1rem)*14);
  --ylZqXQ: calc(var(----lgQg, 0.1rem)*12);
  --ggP9YA: calc(var(----lgQg, 0.1rem)*11);
  --Csadrg: 1.1;
  --3HwnTg: 1.1;
  --guGCJg: 1.1;
  --Pz31Ow: 1.1;
  --qKnIjA: 1.25;
  --a60EZw: 1.25;
  --KMUE6w: 1.25;
  --moczTQ: calc(var(----lgQg, 0.1rem)*26);
  --VbcScA: calc(var(----lgQg, 0.1rem)*24);
  --0LLpdQ: calc(var(----lgQg, 0.1rem)*20);
  ---eZrnA: calc(var(----lgQg, 0.1rem)*18);
  --Vr1mRA: 1.5;
  --HMj1Lg: 1.5;
  --lQwhPA: calc(var(----lgQg, 0.1rem)*24);
  --X8ysKw: calc(var(----lgQg, 0.1rem)*22);
  --RJKbrQ: calc(var(----lgQg, 0.1rem)*20);
  --xQU-mQ: calc(var(----lgQg, 0.1rem)*16);
  --x1ji1vbh: 6px;
  --x1oenytr: 10px;
  --x1mwufea: 12px;
  --x12tkvam: 16px;
  --xtymr81: 24px;
  --x1cchj8c: 9999px;
}
```

## Files

- `tailwind.css` — Tailwind v4 `@theme` block; tokens become utilities (e.g. `bg-neutral-900`, `text-deep-blue`).
- `variables.css` — framework-agnostic `:root` variables, same values.
- `tokens.json` — W3C Design Tokens format for Figma plugins, Style Dictionary, etc.