---
title: "Canva design system"
variant: extended
source: https://www.canva.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/canva-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Canva · Design System

> A bright canvas for making anything

**Theme:** light · **Industry:** design · **Source:** https://www.canva.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Canva pairs generous white space and friendly sans-serif typography with vivid gradients and lively examples of its creative tools. The homepage moves from an immersive product-led hero into feature cards, template galleries, audience-specific panels, and a gradient closing CTA.

## North star

Keep the page calm and legible on white, then use bold gradients and real creative-work examples as focused bursts of energy.

## Overview

The page balances a clean white canvas with concentrated bursts of saturated color. The opening hero uses a purple-to-blue-to-teal gradient behind oversized white Canva Sans lettering, while the rest of the page returns to white so product imagery and colorful cards stand out. Canva Sans carries nearly all interface and headline text; headings are light and spacious, while compact navigation and body labels use stronger weights. The layout is centered and modular, with wide galleries and varied card sizes that suggest a flexible creative workspace. Feature panels use vivid gradients and rounded corners, but their artwork—not extra interface decoration—does most of the visual work. A broad gradient CTA near the bottom echoes the hero, followed by a quiet, pale footer. Treat illustration and template colors as content rather than fixed brand tokens.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#0f1015` | `--color-deep-ink` | neutral | Primary dark text, inverse footer surface, and selected dark interface details. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light card interiors, and text over saturated gradient areas. |
| Canva Teal | `#00c4cc` | `--color-canva-teal` | brand | Bright teal stop in the hero and CTA gradients; not a dominant flat section fill. |
| Vivid Violet | `#7d2ae8` | `--color-vivid-violet` | brand | Purple end of the horizontal teal-to-violet gradient and select gradient artwork. |
| Electric Purple | `#8b3dff` | `--color-electric-purple` | accent | Primary free-start CTA fill and occasional purple action or text accent. |
| Indigo Pulse | `#5a32fa` | `--color-indigo-pulse` | accent | Core gradient stop in the hero and branded feature backgrounds. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Measured dark text and navigation details; the screenshot’s primary text reads near-black. |
| Soft Mist | `#f6f7f8` | `--color-soft-mist` | surface | Pale footer transition and subdued light background detail. |
| Slate Charcoal | `#333438` | `--color-slate-charcoal` | neutral | Secondary dark text, especially supporting copy and footer labels. |
| Blush Tint | `#ffd6d8` | `--color-blush-tint` | semantic | Soft pink gradient detail and decorative content color, not a defining page surface. |
| Quiet Graphite | `#585a5e` | `--color-quiet-graphite` | neutral | Muted footer and button detail; secondary interface text rather than headline color. |
| Lavender Haze | `#ead6ff` | `--color-lavender-haze` | semantic | Pale lavender found in gradient or creative artwork, not a general page background. |
| Coral Blush | `#ffb8bb` | `--color-coral-blush` | accent | Soft pink accent within gradient and decorative artwork. |
| Neon Orchid | `#992bff` | `--color-neon-orchid` | accent | Vivid opening stop in a multicolor gradient section. |
| Ocean Teal | `#13a3b5` | `--color-ocean-teal` | accent | Mid-gradient transition color in branded gradient artwork. |
| Sky Aqua | `#93e8f6` | `--color-sky-aqua` | accent | Light aqua gradient stop fading toward white. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0f1015` (Deep Ink) · `--color-text` → `#0f1015` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#000000` (Pure Black) · `--color-accent` → `#8b3dff` (Electric Purple) · `--color-accent-2` → `#5a32fa` (Indigo Pulse) · `--color-accent-3` → `#ffb8bb` (Coral Blush) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0f1015` | `#ffffff` | 19:1 | AAA |
| `#ffffff` | `#0f1015` | 19:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0f1015` | 1.11:1 | fail |
| `#8b3dff` | `#ffffff` | 4.99:1 | AA |
| `#8b3dff` | `#0f1015` | 3.81:1 | AA-large |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgb(246, 247, 248))`
- `linear-gradient(rgb(153, 43, 255) 0%, rgb(90, 50, 250) 222px, rgb(19, 163, 181) 375px, rgb(147, 232, 246) 60%, rgb(255, 255, 255) 100%)`
- `linear-gradient(90deg, rgb(0, 196, 204), rgb(90, 50, 250), rgb(125, 42, 232))`
- `linear-gradient(rgb(255, 214, 216) 0%, rgb(255, 214, 216) 0%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Canva Sans | `--font-body` | webfont | 600, 400, 500 | Headlines, navigation, body copy, buttons, and nearly all interface text. | Inter |
| Times New Roman | `--font-times-new-roman` | system | 400 | Small measured fallback or incidental caption text; not a defining visual voice in the screenshots. | Noto Serif |

- **Canva Sans:** Use friendly clean sans forms; headlines are regular-weight with subtly tight tracking, while navigation and labels are medium or semibold.
- **Times New Roman:** Keep serif use incidental and minimal; avoid letting fallback caption styling override Canva Sans-led interface typography.

### Type scale — Augmented Fourth (ratio ≈ 1.431, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 84px | 400 | 1.06 | -0.018em | — | Canva Sans | Oversized centered hero headline over the opening gradient. |
| h1 | 64px | 400 | 1.25 | -0.01em | — | Canva Sans | Primary page or major feature headline. |
| h2 | 56px | 400 | 1.1 | -0.01em | — | Canva Sans | Section titles above feature, suite, and template groups. |
| h3 | 36px | 500 | 1.25 | -0.01em | — | Canva Sans | Feature-card and prominent panel headings. |
| h4 | 28px | 500 | 1.25 | -0.01em | — | Canva Sans | Smaller feature and supporting panel titles. |
| body | 14px | 600 | 1.57 | 0 | — | Canva Sans | Supporting descriptions, CTA labels, and compact interface copy. |
| caption | 10px | 400 | normal | 0 | — | Times New Roman | Incidental tiny captions; not a visible brand-defining style. |
| nav | 14px | 500 | 1.57 | 0 | — | Canva Sans | Top navigation links and compact site navigation. |

OpenType features in use: `"ss02", "ss03"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 4, 6, 8, 9, 12, 16, 24, 32, 48 px.
- Section rhythm 32px · element gap 4px · card padding 8px · max content width 1376px.

The page is centered within a wide desktop canvas, with measured max width of 1376px and a compact 4px-based spacing system. The hero is centered, followed by stacked full-width white sections containing mixed two-column feature panels and broad template galleries. Headings are generally centered; the footer switches to a denser, left-aligned multi-column directory. Keep generous visual breathing room between major bands, while card contents and navigation remain compact.

## Shape & elevation

- Radius: button `50%` · card `9999px` · badge `9999px` · nav `12px` · link `12px` · xs `10px` · sm `12px` · md `24px` · pill `9999px`
- Shadow `inset` (link, button): `rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(`
- Shadow `inset-2` (link, button, nav): `rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0,`
- Shadow `inset-3` (footer, button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
- Shadow `md` (other, card): `rgba(64, 79, 109, 0.07) 0px 0px 0px 0.5px, rgba(21, 30, 130, 0.12) 0px 2px 5px 0px, rgba(21, 30, 130, 0.06) 0px 6px 12px 0px`
- Shadow `inset-4` (footer, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(53, 65, 90, 0.2) 0px 0px 0px 1px inset`
- Shadow `inset-5` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset`
- Motion: standard transition `0.1s linear` on interactive elements.

Most page structure is flat white with no pronounced section borders. Product mockups and cards gain separation through soft, low-contrast shadows and rounded corners; interactive controls can use subtle inset highlights. Layer visual content within feature cards, but keep the overall page free of heavy outlines or deep drop shadows.

## Imagery

Use product UI, design previews, templates, and colorful editorial examples as the main imagery. The hero includes a large interface mockup with a visible canvas and editing tools; subsequent sections use card-based artwork and template thumbnails. Mix photography, illustration, and video previews as content requires, framing them in rounded panels. Preserve their colorfulness without imposing a uniform filter, since artwork palettes are intentionally varied.

## Components

### Gradient hero

Centered white headline, supporting line, rounded CTA, and a large product-editor preview on a vivid purple-to-teal background.

### Primary CTA

Purple #8b3dff fill, white Canva Sans semibold label, rounded rectangle treatment, and a subtle inset highlight.

### Feature card

Rounded colorful panel with a concise heading, small light CTA, and product artwork or video preview.

### Tool category strip

Compact horizontal group of creation categories with small colorful icons, labels, and a pill-like selected state.

### Template gallery

Wide, image-led grid of mixed-format template thumbnails with a centered heading and browse actions.

### Closing CTA band

Full-width teal-to-purple gradient, centered white message, and a small light button.

### Footer directory

Quiet pale footer with Canva mark, grouped link columns, download options, and a compact legal row.

### Measured component styles

- **Primary button** (“Start designing for free”): background #8b3dff · text #ffffff · radius 12px · padding 0px 16px · 600 14px Canva Sans · shadow rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0
- **Secondary button**: background #585a5e · text #ffffff · radius 48px · padding 8px · 400 13.3333px Arial
- **Link** (“Explore Magic Layers (opens in a new tab”): transparent background · text #0f1015 · radius 12px · padding 0px 16px · 600 14px Canva Sans · shadow rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0
- **Card** (“AI Presentations Social Video Print Shop”): transparent background · text #000000 · radius 9999px · padding 8px · 400 10px Times New Roman · shadow rgba(64, 79, 109, 0.07) 0px 0px 0px 0.5px, rgba(21, 30, 130, 0.12) 0px 2px 5px 0
- **Badge** (“1 of 2”): background #717379 · text #ffffff · radius 9999px · padding 0px 6px · 600 11px Canva Sans
- **Navigation item** (“Canva home Design Product Plans Business”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px Times New Roman

## Do

- Use Canva Sans as the dominant interface and heading face.
- Keep the main canvas white and reserve color for focused sections and creative content.
- Use vivid gradients for the hero and closing CTA.
- Show realistic editor UI, templates, or finished design examples.
- Use rounded cards and controls with restrained, soft elevation.
- Center major section headings and vary card sizes to create an editorial rhythm.

## Don't

- Do not turn every section into a saturated gradient.
- Do not use heavy borders or deep shadows around routine content.
- Do not make the interface feel corporate or text-dense.
- Do not apply one color filter to diverse template artwork.
- Do not use serif typography as the main interface voice.
- Do not crowd the hero headline, CTA, or product preview.

## Agent prompt

Build a new Canva-style page using a clean white canvas (#ffffff) and Canva Sans, with Inter as the closest free substitute. Create a centered, oversized hero with white text over a vivid gradient using Electric Purple (#8b3dff), Indigo Pulse (#5a32fa), Canva Teal (#00c4cc), and Sky Aqua (#93e8f6), plus a rounded light CTA and prominent product preview. Continue with airy white sections, centered titles, rounded colorful feature cards, and image-led template galleries. Treat the bright artwork as content, not a rigid palette. Use Deep Ink (#0f1015) for primary text, restrained soft shadows for layered previews, and a pale quiet footer. Keep navigation and labels compact, section transitions spacious, and decoration subordinate to actual product examples.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and intro above CTA and large two-column editor preview. | Primary free-start CTA, Product preview | Full-bleed gradient, White display text, Rounded button |
| 2 | feature-grid | Centered tool heading and category strip above a staggered, colorful feature-card grid. | Tool category selection, Feature exploration links | Pill category strip, Gradient cards, Media previews |
| 3 | feature-split | Centered section heading followed by two large side-by-side promotional panels. | Explore suite action, Presentation discovery | Two-column cards, Illustrated product imagery, Contrasting gradients |
| 4 | gallery | Centered heading and actions above a wide, multi-column thumbnail gallery. | Start designing action, Browse all templates, Carousel navigation | Mixed-format thumbnails, Rounded image cards, Gallery arrows |
| 5 | feature-grid | Centered title above a two-column arrangement of large audience and inspiration panels. | Audience-specific exploration, Inspiration discovery | Large gradient panels, Rounded modular cards, Short light CTAs |
| 6 | cta | Full-width gradient band with centered message and compact button. | Get started action | Teal-to-purple gradient, White heading, Light rounded CTA |
| 7 | footer | Pale full-width footer with brand and downloads, grouped link columns, and a compact bottom utility row. | Grouped site navigation, Download choices, Legal and locale links | Multi-column directory, Small text links, Quiet pale background |

## Source CSS custom properties (selected)

```css
--R07nfg: calc(.1rem*12);
--gFgXSg: #404f6d0f;
--x7bg8nn: #1a62ff;
--xfgw0cl: calc(32 * .1rem);
--xz15bgx: -.01em;
--x1ecmbga: .15s cubic-bezier(.35, 0, .58, 1);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/canva-com