# Design System Inspiration of Canva (iOS)

## 1. Visual Theme & Atmosphere

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

## 2. Color Palette & Roles

### 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.

## 3. Typography Rules

### 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.

## 4. Component Stylings

### Buttons

**Primary Button (Create a design / Done)**
- Shape: pill, 999pt corner radius
- Background: linear gradient `#00C4CC → #7D2AE8` at 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: `#0D0E10` light / `#ECECEE` dark, 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` / `#27282C` at 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: `#FFC24B` bg, `#1A1205` text, 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 `#00C4CC` border

**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` / `#18191B` at 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 `#00C4CC` border
- Placeholder `#6F7178` 15pt; text `#0D0E10` / `#ECECEE` 16pt

**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)**
- A neutral-backdrop full-screen canvas with the artboard centered; top bar + bottom tool rail + contextual element toolbar. The "anyone can design" core — heavy color in content, restrained chrome.

**Pro Upsell Sheet**
- Gold-accented sheet listing Pro benefits, a feature carousel, and a gold "Start free trial" CTA — the single place gold dominates.

## 5. Layout Principles

### Spacing System
- Base unit: 4pt
- Scale: 4, 8, 10, 12, 16, 18, 22, 24, 32, 40, 48
- Home horizontal inset: 18pt
- Template grid gutter: 10pt; 3 columns on iPhone
- Section vertical rhythm: 22pt before a section header, 12pt header→content

### Grid & Container
- iPhone: single column; 18pt insets; template grid 3-up; horizontal rails scroll
- iPad portrait: 18–24pt insets; template grid 4–5-up; design-type tiles in a wrap grid
- iPad landscape: editor shows a persistent left tool panel + canvas (rail becomes a sidebar)
- Editor artboard: centered, fit-to-screen with pinch-zoom; backdrop is workspace grey

### Whitespace Philosophy
- **Friendly density**: cards and tiles are generously rounded with 10–12pt gutters — busy but breathable
- **Content is loud, chrome is quiet**: thumbnails are full-color; surrounding UI is neutral grey + one gradient accent
- **Rounded everything**: 12–16pt radii on cards/tiles/sheets, 999pt pills on buttons — softness is the brand
- **The gradient is rationed**: it marks brand + primary action only; secondary actions are solid purple or neutral outline

### Border Radius Scale
- Square (0pt): full-bleed thumbnails edges within a clipped tile (rare)
- Subtle (6pt): PRO badge, small chips
- Standard (8pt): nested controls, stepper buttons
- Comfortable (12pt): template thumbnails, cards
- Large (16pt): design-type tiles, search field, create FAB, sheet top corners
- Extra (24pt): large bottom sheets, modals
- Pill (500pt): all buttons, filter chips
- Circle (50%): avatars, round tool controls

## 6. Depth & Elevation

Canva is mostly flat with soft, diffuse shadows reserved for raised content and the create FAB.

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Backgrounds, dividers, inline rows |
| Card (Level 1) | `rgba(13,14,16,0.06) 0 2px 8px` (light) | Template thumbnails, cards on white |
| Create FAB | `rgba(125,42,232,0.45) 0 6px 16px` | The centered gradient create button only |
| Sheet (Level 2) | `rgba(13,14,16,0.12) 0 -6px 28px` | Bottom-sheet pickers, contextual toolbar |
| Modal Overlay | `rgba(13,14,16,0.45)` | Dim behind sheets and Pro upsell |

**Shadow Philosophy**: shadows are soft and diffuse (the friendly, "Canva" feel), used to lift content thumbnails off the workspace and to signal a sheet is floating. The create FAB gets a tinted purple glow so it reads as *the* primary action. On dark mode shadows nearly vanish, so cards rely on the `#1F2023` surface step and sheets add a faint 1pt `#303135` top border.

### Motion
- **Create FAB tap**: scales 0.92 then the "Create a design" sheet slides up 320ms ease-out; dim fades in parallel
- **Design-type tile tap**: scales 0.96, then push/slide to the gallery in 300ms
- **Bottom sheet**: slides up 320ms cubic-ease-out; drag-to-dismiss tracks the finger, releases with spring damping 0.85
- **Template open**: thumbnail does a shared-element-style zoom into the detail sheet over 320ms
- **Editor element select**: contextual toolbar slides up from the bottom in 220ms ease-out; selection box fades in with 8 round handles
- **Tab switch**: instant content swap; active icon does a subtle 1.05 scale pop (120ms)
- **Gradient buttons**: press = 0.93 brightness + 0.98 scale, 100ms
- **Skeleton loading**: template grid shows shimmering rounded placeholders (1.2s loop) while thumbnails fetch
- **Haptic feedback**: light impact on FAB tap, tile tap, element select, template apply; success haptic on export/publish complete

## 7. 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

## 8. Responsive Behavior

### 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)

## 9. Agent Prompt Guide

### Quick Color Reference
- Canvas (light): `#FFFFFF` / workspace `#F7F8FA`
- Canvas (dark): `#18191B`
- Surface 1 (dark): `#1F2023` · Surface 2 (dark): `#27282C`
- Divider: `#E6E8EC` light / `#303135` dark
- Text primary: `#0D0E10` light / `#ECECEE` dark
- Text secondary: `#6F7178` / `#A4A6AD`
- Canva Cyan: `#00C4CC` · Canva Purple: `#7D2AE8`
- Brand gradient: `#00C4CC → #7D2AE8` (135°)
- Canva Blue: `#3B5CFF`
- Pro Gold: `#FFC24B`
- Success: `#1FC77C` · Error: `#FF5163`
- Tile gradients: cyan-blue `#00C4CC→#3B5CFF`, purple-magenta `#7D2AE8→#C13AE0`, sunset `#FF7A59→#FFC24B`, mint `#1FC77C→#00C4CC`
- Selection tint: `#7D2AE81F`

### Example Component Prompts
- "Build the Canva home in SwiftUI: transparent top bar with 'Hi, {name} 👋' in Plus Jakarta Sans 26pt w800 leading + a 34pt gradient avatar trailing. Below: a 46pt search field, 14pt corner radius, `#27282C` fill, leading 17pt magnifier, placeholder 'Search templates, photos…' in `#A4A6AD`. Below: a horizontal scroll of design-type tiles — each a 56pt rounded-square (16pt radius) with its own gradient (Instagram `#00C4CC→#3B5CFF`, Presentation `#7D2AE8→#C13AE0`, Doc `#FF7A59→#FFC24B`) and a 12pt w600 label. Then a 'Recommended' section header (Plus Jakarta Sans 22pt w700) with a 'See all' link in `#00C4CC`, and a 3-up grid of 3:4 full-color template thumbnails, 12pt radius, optional gold PRO badge."

- "Create the Canva bottom tab bar: 5 slots — Home, Templates, center create FAB, Projects, You. Background `#18191B` @94% + blur, 0.5pt top border `#303135`. The center slot is a 46pt rounded-square (16pt radius) with gradient `#00C4CC → #7D2AE8`, lifted -4pt, shadow `rgba(125,42,232,0.45) 0 6px 16px`, white `+` glyph. Other tabs: 22pt glyph + 10pt w600 label, active `#ECECEE`, inactive `#A4A6AD`."

- "Render a Canva primary button: pill (999pt radius), linear-gradient `#00C4CC → #7D2AE8` at 135°, white text Plus Jakarta Sans 16pt w700, 14pt/28pt padding. Pressed = brightness 0.93 + scale 0.98. Add a secondary solid-purple `#7D2AE8` pill and a gold Pro pill (`#FFC24B` bg, `#1A1205` text, 14pt w800)."

- "Build a Canva template thumbnail: 3:4 aspect, 12pt corner radius, full-color gradient fill, soft shadow on light / flat on dark. Top-right gold PRO badge — `#FFC24B` background, `#1A1205` text, Plus Jakarta Sans 9pt w800, 6pt radius, 2pt/6pt padding. Tap = shared-element zoom into the customize sheet over 320ms."

- "Create the Canva 'Create a design' bottom sheet: rounded 24pt top corners, grab handle, dimmed `rgba(13,14,16,0.45)` backdrop. Title 'Create a design' Plus Jakarta Sans 18pt w700. A grid of design-type tiles (gradient rounded-square icons + 12pt w600 labels), a 'Custom size' row, and an 'Import' row. Slides up 320ms ease-out; drag-to-dismiss with spring damping 0.85."

- "Build the Canva editor bottom tool rail: ~64pt tall, horizontal scroll of tools (Templates, Elements, Text, Uploads, Photos, Draw, Apps), each a 24pt glyph + 11pt w600 label, inactive `#6F7178`, active `#7D2AE8`. Tapping a tool slides up its bottom-sheet picker. Above the keyboard, show a contextual element toolbar (color swatch, font, size stepper, alignment, transparency, animate, delete) on a `#1F2023` surface with 16pt top corners."

### Iteration Guide
1. Workspace is bright near-white (`#FFFFFF`/`#F7F8FA`) light, warm-neutral `#18191B` dark — NOT pure black, NOT harsh
2. The cyan→purple gradient `#00C4CC → #7D2AE8` is brand + primary action only — logo, create FAB, primary CTA, hero rails
3. Everything is rounded — 12–16pt radii on cards/tiles/sheets, 999pt pills on every button; softness is the brand
4. Home = greeting + big rounded search + horizontal design-type tile rail + stacked full-color template galleries
5. The create FAB is centered in the tab bar, lifted, gradient, with a tinted purple glow — the one elevated element
6. Pro is gold `#FFC24B` and *only* gold — never the brand gradient; the gradient never means "premium"
7. Content thumbnails stay full-color in dark mode — only chrome dims
8. Tools, share flows and design-type choosers are slide-up rounded bottom sheets with a grab handle
9. Headings use heavy display weights (800) with tight negative tracking; app chrome is always Canva Sans / Plus Jakarta Sans
10. Shadows are soft and diffuse, reserved for raised content cards and the FAB — chrome is flat; motion is friendly (220–320ms ease-out)