Canva

Canva sets restrained Canva Sans headlines in a heavy weight on a light bone white canvas. Iris (#8b3dff) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 24px and 10px on smaller elements.

canva.com ↗

Colors

Iris

#8b3dff

Primary actions and links

Void

#0f1015

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Deep Void

#000000

Headlines and body copy

Soft Void

#101219

Surface or divider

Type scale

DisplayWhat will you design today?Canva Sans · 24px · 600

HeadingTools to power your best workCanva Sans · 24px · 600

SubheadingTurn your image into an editable layout with Magic LayersCanva Sans · 32px · 600

BodyAICanva Sans · 16px · 600

NavCanva homeTimes New Roman · 10px · 400

Buttons

ButtonStart designing for free

Style reference measured from the public page at canva.com on 2026-10-12 for design education. Canva and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Canva — Style Reference
> Canva sets restrained Canva Sans headlines in a heavy weight on a light bone white canvas. Iris (#8b3dff) is reserved for actions, on buttons with 12px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 12px, with 24px and 10px on smaller elements.

**Theme:** light · **Source:** https://www.canva.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Iris | `#8b3dff` | `--color-accent` | Primary actions and links |
| Void | `#0f1015` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Deep Void | `#000000` | `--color-ink` | Headlines and body copy |
| Soft Void | `#101219` | `--color-surface-1` | Surface or divider |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Canva Sans | 24px | 600 | 1.33 | 0 |
| Heading | Canva Sans | 24px | 600 | 1.33 | 0 |
| Subheading | Canva Sans | 32px | 600 | 1.25 | 0 |
| Body | Canva Sans | 16px | 600 | 1.50 | 0 |
| Nav | Times New Roman | 10px | 400 | normal | 0 |

Font families on the page: Times New Roman, Canva Sans, Arial. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 12px, 24px, 10px, 9999px, 50%
- Primary button: background `#8b3dff`, text `#ffffff`, radius 12px, padding 0px 16px, 14px / 600

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer