A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
24tokens
11type steps
1radius steps
10pxspacing base
Canva, in one page
Canva's iOS app is a friendly, confidence-building creation tool. Its whole personality says *you can design this* — to a non-designer, on a phone, in two minutes. The atmosphere is bright, rounded and gradient-forward. The default workspace is near-white (#FFFFFF / #F7F8FA), every container has a soft 12–16pt corner radius, and the unmistakable Canva signal is the cyan→purple brand gradient (#00C4CC → #7D2AE8). That gradient is the logo, the floating create button, the primary CTA, and the hero rails of the template galleries. Color is used generously but with discipline: the gradient for *brand and action*, full-color thumbnails for *content*, and a calm neutral grey for *chrome*.
The home screen is the heart of the app and the screen this guide treats as the signature: a personal greeting ("Hi, Mel 👋"), a prominent rounded search field ("Search templates, photos…"), a horizontally scrolling row of design-type tiles (Instagram Post, Presentation, Doc, Whiteboard, Video — each a gradient-filled rounded icon), then vertically stacked template galleries ("Recommended", "Your designs", "Presentations", "Social media") rendered as a responsive 3-up thumbnail grid. Premium templates wear a small gold PRO badge. The bottom is a 5-slot tab bar — Home, Templates, a center gradient create FAB, Projects, You — with the FAB lifted slightly and casting the only meaningful shadow.
The other defining surface is the design editor: a full-screen canvas (the artboard) centered on a neutral backdrop, a top bar (back, undo/redo, Pro, share, the gradient Done), and a bottom tool rail of element types (Templates, Elements, Text, Uploads, Photos, Draw, Projects, Apps). Tapping a tool slides up a bottom-sheet picker. Selecting an element raises a contextual toolbar (color, font, size, position, transparency, animate). The editor is where Canva's "anyone can design" promise is delivered — heavy color in the content, restrained neutral chrome around it. The brand typeface is Canva Sans, a rounded geometric humanist; this guide uses Plus Jakarta Sans (free, SIL OFL) as a faithful free stand-in — same friendly roundness, same tight display tracking.
Key Characteristics:
- Bright near-white workspace (
#FFFFFF) light / warm-neutral (#18191B) dark — friendly, never harsh - Cyan→purple brand gradient (
#00C4CC → #7D2AE8) is the logo, the create FAB, the primary CTA, template hero rails - Home = personal greeting + big rounded search + horizontal design-type tile row + stacked template galleries
- Design-type tiles — gradient-filled rounded-square icons (Instagram, Presentation, Doc, Whiteboard, Video…)
- Template galleries — responsive 3-up thumbnail grid; full-color content, gold PRO badges on premium
- 5-slot bottom tab bar with a centered, lifted gradient create FAB (the one shadowed element)
- Design editor — neutral artboard backdrop, bottom tool rail, contextual element toolbar, slide-up pickers
- Pill-shaped buttons everywhere — primary uses the gradient; secondary is solid purple or neutral outline
- Generous 12–16pt rounded corners on every card, tile, sheet and field — softness is the brand
- Pro is gold (
#FFC24B) — the single premium accent, distinct from the brand gradient - Plus Jakarta Sans (Canva Sans stand-in) — rounded geometric humanist, tight display tracking, heavy weights for headings
- Bottom-sheet pickers — every tool, share flow and design-type chooser slides up as a rounded sheet
Do's and don'ts
Do
- Use a bright near-white workspace (
#FFFFFF/#F7F8FA) light, warm-neutral (#18191B) dark — friendly, never harsh - Reserve the cyan→purple gradient (
#00C4CC → #7D2AE8) for brand + primary action (logo, create FAB, primary CTA, hero rails) - Round everything generously — 12–16pt radii on cards/tiles/sheets, 999pt pills on buttons
- Build home as greeting + big rounded search + horizontal design-type tile rail + stacked template galleries
- Give each design-type tile its own gradient (Instagram, Presentation, Doc, Whiteboard, Video)
- Keep template thumbnails full-color with optional gold PRO badges — content is loud, chrome is quiet
- Center the create FAB in the tab bar, lifted, with a tinted purple glow — the one elevated element
- Use gold (
#FFC24B) exclusively for Pro / premium — never mix it with the brand gradient's meaning - Slide tools, share flows and design-type choosers up as rounded bottom sheets with a grab handle
- Use heavy display weights (800) with tight negative tracking for greetings and section titles
Don't
- Don't use pure black (
#000000) for canvas or text — warm-neutral#18191B/ near-black#0D0E10 - Don't overuse the gradient — secondary buttons are solid purple or neutral outline, not gradient
- Don't use sharp corners — Canva's softness (rounded, pill) is the entire brand feel
- Don't dim or desaturate content thumbnails in dark mode — only the chrome dims
- Don't put shadows on flat rows or chrome — shadows are for raised content cards and the FAB only
- Don't use the brand gradient for Pro — Pro is gold; the gradient is brand/action
- Don't replace the centered create FAB with a plain tab — the lifted gradient
+is the signature - Don't use thin/hairline weights for headings — Canva is confident and rounded (700/800)
- Don't apply in-editor content fonts to app chrome — app UI is always Canva Sans / Plus Jakarta Sans
- Don't open tools as full-screen pages — Canva uses slide-up bottom sheets
- Don't crowd buttons with square corners — every button is a pill
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Canva design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- cyan→purple brand gradient: #00c4cc
- Canva Cyan: #00c4cc
- Canva Purple: #7d2ae8
- Canva Gradient: #00c4cc
- Canva Blue: #3b5cff
- Canva Purple Pressed: #6a1fd0
- Canvas White: #ffffff
- Workspace Grey: #f7f8fa
- Surface Raised: #ffffff
- Surface Pressed: #eef0f4
Type:
- families: Canva Sans, Plus Jakarta Sans, Fallback Stack
- scale: 9, 10, 11, 12, 14, 15, 16, 18, 22
- weights: 400, 600, 700, 800
Shape:
- radius: 24
- elevation: Surface Raised (`#FFFFFF`): Cards, tiles, sheets (with shadow, not border). | 12pt corner radius, full-color, no border; soft shadow on light, flat on dark | Background: `#FFFFFF` / `#1F2023`, 16pt top corners, soft shadow
Spacing: 10, 11, 12, 14
Rules:
- Use a bright near-white workspace (`#FFFFFF` / `#F7F8FA`) light, warm-neutral (`#18191B`) dark — friendly, never harsh
- Reserve the cyan→purple gradient (`#00C4CC → #7D2AE8`) for brand + primary action (logo, create FAB, primary CTA, hero rails)
- Round everything generously — 12–16pt radii on cards/tiles/sheets, 999pt pills on buttons
- Build home as greeting + big rounded search + horizontal design-type tile rail + stacked template galleries
- Give each design-type tile its own gradient (Instagram, Presentation, Doc, Whiteboard, Video)
- Keep template thumbnails full-color with optional gold PRO badges — content is loud, chrome is quiet
Avoid:
- Don't use pure black (`#000000`) for canvas or text — warm-neutral `#18191B` / near-black `#0D0E10`
- Don't overuse the gradient — secondary buttons are solid purple or neutral outline, not gradient
- Don't use sharp corners — Canva's softness (rounded, pill) is the entire brand feel
- Don't dim or desaturate content thumbnails in dark mode — only the chrome dims
- Don't put shadows on flat rows or chrome — shadows are for raised content cards and the FAB only
- Don't use the brand gradient for Pro — Pro is gold; the gradient is brand/action
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Canva Cyan (
#00C4CC): Brand gradient start; "See all" links, selected states, inline accents. - Canva Purple (
#7D2AE8): Brand gradient end; solid secondary buttons, selected tool highlight. - Canva Gradient (
#00C4CC → #7D2AE8, 135°): Logo, create FAB, primary CTA, design-type tiles, template hero rails. - Canva Blue (
#3B5CFF): Secondary action / link blue, info accents (used inside gradients and as a flat link). - Canva Purple Pressed (
#6A1FD0): Pressed state for gradient/purple buttons (apply via 0.93 brightness).
Canvas & Surfaces (Light Mode)
- Canvas White (
#FFFFFF): Primary light app background and editor sheet. - Workspace Grey (
#F7F8FA): Home background behind cards, editor artboard backdrop. - Surface Raised (
#FFFFFF): Cards, tiles, sheets (with shadow, not border). - Surface Pressed (
#EEF0F4): Pressed rows / chips. - Divider (
#E6E8EC): Hairline separators, search-field outline.
Canvas & Surfaces (Dark Mode)
- Dark Canvas (
#18191B): Primary dark background — warm-neutral, NOT pure black. - Dark Surface 1 (
#1F2023): Cards, tiles, panels. - Dark Surface 2 (
#27282C): Search field, raised chips, hovered rows. - Dark Divider (
#303135): Hairline separators and the tab-bar top border.
Text
- Text Primary Light (
#0D0E10): Headlines and body on white. - Text Secondary Light (
#6F7178): Metadata, captions, placeholder. - Text Tertiary Light (
#A4A6AD): Disabled, inactive tab labels. - Text Primary Dark (
#ECECEE): Headlines and body on dark. - Text Secondary Dark (
#A4A6AD): Metadata, captions on dark. - Text Tertiary Dark (
#6F7178): Disabled, inactive tab labels on dark.
Template / Accent Palette
Canva's template thumbnails and design-type tiles use a wide gradient set. These are the recurring brand-adjacent gradients used on tiles and rails.
| Role | Gradient (Light + Dark identical) |
|---|---|
| Brand / Action | #00C4CC → #7D2AE8 |
| Cyan / Blue tile | #00C4CC → #3B5CFF |
| Purple / Magenta tile | #7D2AE8 → #C13AE0 |
| Warm / Sunset tile | #FF7A59 → #FFC24B |
| Fresh / Mint tile | #1FC77C → #00C4CC |
| Indigo tile | #3B5CFF → #7D2AE8 |
| Coral tile | #FF5163 → #FF7A59 |
Semantic
- Pro Gold (
#FFC24B): Canva Pro badge, upgrade CTAs, premium-element lock — the single premium accent. - Success Green (
#1FC77C): Saved / synced / published confirmation. - Error Red (
#FF5163): Delete confirmation, upload-failure banner. - Warning Amber (
#FFC24B): Reuses Pro Gold for quota / limit warnings. - Selection Tint (
#7D2AE81F): ~12% purple overlay on a selected element on the artboard.
Type scaleRead the full spec
Font Family
- Primary:
Canva Sans(Canva's proprietary rounded geometric humanist). Free stand-in:Plus Jakarta Sans(by Tokotype, SIL OFL) — same friendly roundness, excellent display weights. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - In-design fonts: the editor exposes hundreds of user-selectable fonts for *content text* — that is design data, not app chrome. App UI always uses Canva Sans / Plus Jakarta Sans.
- Weights used: 400 (body), 500 (labels), 600 (emphasis / chips), 700 (section headings), 800 (display / greeting).
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Plus Jakarta Sans | 32pt | 800 | 1.15 | -0.6pt | Onboarding / large titles |
| Greeting | Plus Jakarta Sans | 26pt | 800 | 1.2 | -0.3pt | "Hi, {name} 👋" home header |
| Section Title | Plus Jakarta Sans | 22pt | 700 | 1.25 | -0.2pt | "Recommended", "Your designs" |
| Subsection | Plus Jakarta Sans | 18pt | 700 | 1.3 | -0.1pt | Sheet titles, sub-headers |
| Body | Plus Jakarta Sans | 16pt | 400 | 1.5 | 0pt | Paragraph / descriptions |
| Label | Plus Jakarta Sans | 15pt | 600 | 1.35 | 0pt | Tile labels, template names |
| Button | Plus Jakarta Sans | 16pt | 700 | 1.0 | 0pt | Primary / secondary buttons |
| Meta | Plus Jakarta Sans | 14pt | 400 | 1.4 | 0pt | "Edited 2 hours ago · Shared" |
| Chip / Type Label | Plus Jakarta Sans | 12pt | 600 | 1.3 | 0.1pt | Design-type tile labels |
| Tab Label | Plus Jakarta Sans | 10pt | 600 | 1.0 | 0.1pt | Bottom tab labels |
| Pro Badge | Plus Jakarta Sans | 9pt | 800 | 1.0 | 0.3pt | Gold PRO badge on thumbnails |
| Tool Label | Plus Jakarta Sans | 11pt | 600 | 1.2 | 0.1pt | Editor bottom tool-rail labels |
Principles
- Friendly, rounded, confident: heavy display weights (800) with tight negative tracking for greetings/titles; warm and approachable, never corporate-thin.
- Weight concentrated at 400 / 500 / 600 / 700 / 800: regular body, semibold labels/chips, bold headings, extrabold display. No thin, no hairline.
- App chrome ≠ design content: app UI is always Canva Sans; the hundreds of in-editor fonts apply only to the user's content text.
- Labels are semibold: tile labels, template names and chips sit at 600 — readable at small sizes over busy thumbnails.
- Dynamic Type first-class: greeting, section titles, body, meta scale; tab labels, chip labels, the Pro badge and tool labels stay fixed.
Components and layoutRead the full spec
Buttons
Primary Button (Create a design / Done)
- Shape: pill, 999pt corner radius
- Background: linear gradient
#00C4CC → #7D2AE8at 135° - Text:
#FFFFFF, Plus Jakarta Sans 16pt weight 700 - Padding: 14pt vertical, 28pt horizontal
- Pressed: brightness 0.93 + scale 0.98
- The home create FAB is a 46–56pt rounded square (16pt radius) with this gradient + the only app shadow
rgba(125,42,232,0.45) 0 6px 16px
Secondary Solid Button (Continue)
- Background: solid
#7D2AE8(Canva Purple) - Text:
#FFFFFF, 15pt weight 700 - Padding: 12pt vertical, 22pt horizontal
- Corner radius: 999pt (pill)
- Pressed: background
#6A1FD0
Outline / Neutral Button (Use template)
- Background: transparent
- Text:
#0D0E10light /#ECECEEdark, 15pt weight 600 - Border: 1.5pt
#E6E8EC/#303135 - Corner radius: 999pt (pill)
- Padding: 11pt vertical, 20pt horizontal
- Pressed: background
#EEF0F4/#27282C
Pro Button (Try Pro / Upgrade)
- Background:
#FFC24B(Pro Gold) - Text:
#1A1205, 14pt weight 800 - Corner radius: 999pt (pill)
- Padding: 10pt vertical, 18pt horizontal
- Often paired with a small crown glyph
Text Button (See all / Skip)
- Font: Plus Jakarta Sans 15pt weight 600
- Color:
#00C4CC(Canva Cyan) - No background, no underline
- Pressed: opacity 0.6
Icon Button (top bar undo / share / settings)
- 22pt glyph in a 44pt hit area
- Color:
#0D0E10/#ECECEE - Pressed: background circle
#EEF0F4/#27282Cat 36pt
Core Atoms
Design-Type Tile
- A vertical unit: a 56pt rounded-square (16pt radius) gradient icon + a 12pt w600 label below
- Each type has its own gradient (Instagram cyan-blue, Presentation purple-magenta, Doc sunset, Whiteboard mint, Video indigo)
- Tap scales 0.96 then opens that type's template gallery or a new blank doc
Template Thumbnail
- Aspect ratio matches the design type (3:4 portrait social, 16:9 presentation, 1:1 square)
- 12pt corner radius, full-color, no border; soft shadow on light, flat on dark
- Optional gold PRO badge top-right:
#FFC24Bbg,#1A1205text, 9pt w800, 6pt radius - Tap opens the template detail / "Customize this template" sheet
Search Field
- Height: 46pt, 14pt corner radius
- Background:
#F7F8FA/#27282C - Leading magnifier 17pt
#6F7178 - Placeholder "Search templates, photos…" 15pt
#6F7178 - Focus: 1.5pt
#00C4CCborder
Pro Badge / Lock
- Gold pill or a small crown glyph in
#FFC24B; on premium elements a lock overlay with the same gold
Avatar
- 34pt circle, gradient fill if no photo, white initial in Plus Jakarta Sans 14pt w700
Navigation
Bottom Tab Bar
- Height: 70pt + safe area
- Background:
#FFFFFF/#18191Bat 94% + blur, 0.5pt top border#E6E8EC/#303135 - 5 slots: Home, Templates, create FAB (center), Projects, You
- The center slot is a 46pt rounded-square (16pt radius) gradient FAB, lifted -4pt, shadow
rgba(125,42,232,0.45) 0 6px 16px— the one elevated element - Icon size: 22pt; active label/icon
#0D0E10/#ECECEE; inactive#A4A6AD - Labels: Plus Jakarta Sans 10pt w600, always shown (except under the FAB)
Home Top Bar
- Greeting "Hi, {name} 👋" Plus Jakarta Sans 26pt w800 leading; trailing 34pt avatar
- No title bar — the greeting *is* the header; transparent over the workspace
Editor Top Bar
- Height: 52pt + safe area
- Leading: back chevron; center-left: undo / redo
- Trailing: Pro (gold), share glyph, gradient Done pill
- Background:
#FFFFFF/#18191B, 0.5pt bottom divider
Editor Bottom Tool Rail
- Height: ~64pt + safe area
- Horizontal scroll of tools: Templates, Elements, Text, Uploads, Photos, Draw, Projects, Apps
- Each: 24pt glyph + 11pt w600 label, inactive
#6F7178, active#7D2AE8 - Tapping a tool slides up its bottom-sheet picker
Input Fields
Text Field (project name, search)
- Height: 46pt, 14pt corner radius
- Background:
#F7F8FA/#27282C, no border at rest - Focus: 1.5pt
#00C4CCborder - Placeholder
#6F717815pt; text#0D0E10/#ECECEE16pt
Contextual Element Toolbar (editor)
- Appears above the keyboard / above the artboard when an element is selected
- A horizontal scroll of round/pill controls: color swatch, font, size stepper, alignment, transparency, layer, animate, delete
- Background:
#FFFFFF/#1F2023, 16pt top corners, soft shadow
Distinctive Components
Create FAB (center tab)
- The signature affordance: a centered, lifted, gradient rounded-square
+button in the tab bar. Tap opens the "Create a design" bottom sheet — recent sizes, design types, custom-size, import.
Design-Type Tile Row
- A horizontally scrolling rail of gradient tiles on home. The fastest path to a new design; each tile's gradient is part of Canva's color identity.
Template Gallery Grid
- Stacked, titled sections ("Recommended", "Your designs", "Presentations") each a horizontally scrollable or 3-up grid of full-color thumbnails with optional gold PRO badges. Content is loud; chrome is quiet.
Bottom-Sheet Picker
- Every tool, design-type chooser, share flow and font picker is a rounded bottom sheet (16–24pt top corners) that slides up over a dimmed backdrop with a grab handle.
Design Editor (Artboard)
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Template grid 2–3-up; insets 16pt; FAB 46pt |
| iPhone 13/14/15 | 390pt | Standard: grid 3-up, insets 18pt |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated by transparent home top bar |
| iPhone 15/16 Pro Max | 430pt | Grid 3-up larger thumbnails; insets 20pt |
| iPad (portrait) | 768pt | Grid 4-up; design-type tiles wrap; editor rail at bottom |
| iPad (landscape) | 1024pt+ | Grid 5–6-up; editor shows a persistent left tool sidebar + canvas |
Dynamic Type
- Greeting, section titles, body, meta: full scale
- Tab labels (10pt), chip/type labels (12pt), Pro badge (9pt), tool labels (11pt): FIXED (layout-sensitive)
- Template names truncate to 1 line with ellipsis at large type sizes
Orientation
- Home and galleries reflow column count on rotation (3→4→5-up)
- The editor is the key orientation case: portrait = bottom tool rail; landscape (iPad) = left sidebar + canvas
- Artboard re-fits to screen on rotation; zoom resets to fit
Touch Targets
- Tab icons / create FAB: 46pt FAB, 44pt hit for tabs
- Design-type tile: 56pt icon, 76pt full-tile tap
- Template thumbnail: full thumbnail tappable (min 100pt)
- Top-bar icon buttons: 22pt glyph, 44pt hit
- Editor tool-rail item: 24pt glyph, 56pt hit
Safe Area Handling
- Top: transparent home bar / editor bar respects safe area + Dynamic Island
- Bottom: tab bar + create FAB + home indicator respected; sheets dock above the home indicator
- Keyboard: project-name and search fields scroll above keyboard; the contextual element toolbar sits directly above the keyboard in the editor
- Sides: 18pt home inset (16pt SE)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-canva {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #0d0e10;
--heading-color: #0d0e10;
--link-color: #00767c;
--link-hover-color: #004549;
--border-color: #d3d4d4;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(13,14,16,0.06);
--card-hover-shadow: 0 6px 18px rgba(13,14,16,0.12);
--header-bg: #0d0e10;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #626264;
--button-bg: #00c4cc;
--button-text-color: #000000;
--button-hover-bg: #009399;
--button-border: none;
--button-border-radius: 24px;
--button-secondary-bg: #f0f1f1;
--button-secondary-text-color: #0d0e10;
--button-secondary-hover-bg: #e2e2e2;
--button-secondary-border: 1px solid #d3d4d4;
--prompt-bg: #f3f3f3;
--prompt-text-color: #0d0e10;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 24px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- grammarly 87.4%
- plenty of fish 86.0%
- life360 83.4%
- lemon8 80.9%
- nubank 80.2%
Where this came from
- Source document
ios/design-md/productivity/canva/DESIGN.md· 25.8 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.