DESIGN.md inspired by Canva

---
name: Canva
tagline: "A bright creative toolkit where templates turn intent into output."
updated_at: 2026-08-05T01:25:51.586Z
published_at: 2026-08-05T01:25:51.586Z
author: webdesignhot
source_url: https://www.canva.com/
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [design-tools, saas]
tags: [design-tools, creative, templates, collaboration, visual]
preview_swatch: ["#ffffff", "#8b3dff", "#0d0e10"]
related: [affinity, protopie, figma]
description: "Canva presents design as an accessible creation flow: a neutral canvas, a compact product hierarchy, and a vivid purple action supported by a broader rainbow of creative accents. The system should keep the starting task obvious while allowing templates, media, collaboration, and publishing to remain visible without overwhelming the first decision."

aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent-cyan
  muted: text-soft
  border: border

colors:
  bg: '#ffffff'
  surface: '#f5f5f5'
  text: '#0d0e10'
  brand: '#8b3dff'
  on-brand: '#ffffff'
  border: '#e7e7e7'
  text-soft: '#5b5c60'
  border-soft: '#f0f0f0'
  accent-cyan: '#00c4cc'
  accent-green: '#00d639'
  accent-pink: '#ff5c8a'
  accent-yellow: '#ffcc00'

typography:
  display:
    family: 'Canva Sans, system-ui, -apple-system, sans-serif'
    weights: [500, 600, 700]
  body:
    family: 'Canva Sans, system-ui, -apple-system, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 80, weight: 700, lineHeight: 1.0,  tracking: '-0.03em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.02em',  family: display }
    h1:              { size: 40, weight: 700, lineHeight: 1.1,  tracking: '-0.018em', family: display }
    h2:              { size: 32, weight: 600, lineHeight: 1.2,  tracking: '-0.012em', family: display }
    h3:              { size: 24, weight: 600, lineHeight: 1.25, tracking: '-0.005em', family: display }
    h4:              { size: 20, weight: 600, lineHeight: 1.3,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-sm:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0',        family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

components:
  button-primary: { bg: brand, text: on-brand, padding: '10px 16px', radius: 8 }
  button-ghost:   { bg: transparent, text: text, border: border, padding: '10px 16px', radius: 8 }
  card:           { bg: surface, border: border, radius: 12, padding: 24 }
  input:          { bg: bg, border: border, text: text, radius: 8, padding: '8px 12px' }

lineage:
  summary: "Recorded from the current canva public site during the 2026-08-05 catalog audit."
  influences:
    - name: "Canva public homepage"
      role: "Source for the template-first creation model and public brand color normalization; the homepage fallback font was not treated as authoritative."
      url: https://www.canva.com/
---

## 1. Visual Theme & Atmosphere

Canva presents design as an accessible creation flow: a neutral canvas, a compact product hierarchy, and a vivid purple action supported by a broader rainbow of creative accents. The system should keep the starting task obvious while allowing templates, media, collaboration, and publishing to remain visible without overwhelming the first decision. The public composition should feel authored at first glance, then become predictable when a user starts a task. Keep the product or service evidence visible instead of replacing it with abstract decoration.

**Key Characteristics**
- A clear primary action
- A stable content hierarchy
- Readable metadata
- Intentional surface contrast
- Responsive media treatment
- Text equivalents for visual state

## 2. Color Palette & Roles

Use `#ffffff` and `#f5f5f5` for the working canvas and tool surfaces, with `#0d0e10` for high-contrast copy. Normalize the sampled CTA to Canva purple `#8b3dff`; supporting accents can use `#00c4cc`, `#00d639`, `#ff5c8a`, and `#ffcc00` as labeled media or category signals. Purple should identify creation and publish actions, not become a full-page gradient. Keep gray borders light and let artwork supply the expressive color.

Use color roles consistently: background for the page ground, surface for grouped content, text for reading, brand for the primary action, border for structure, and semantic colors for states with text labels. Preview swatches should show the canvas, brand action, and primary reading color.

## 3. Typography Rules

The production sampling exposed a fallback serif in the hero, so the catalog uses Canva Sans as the implementation-facing family rather than treating that fallback as a brand rule. Use a clear sans hierarchy for tool navigation and compact settings; let template artwork carry personality. Headlines can be large and friendly, but controls, file names, dimensions, and export formats must remain literal and stable.

Suggested hierarchy: display-hero for the first promise, display-lg for a major section, h1 for the page task, h2 for grouped content, h3 for cards, body-lg for introductions, body for explanations, body-sm for metadata, label for controls, and caption for timestamps or secondary context. Never use tracking as a substitute for hierarchy.

## 4. Component Stylings

Use purple for the primary “Create a design” or “Publish” action, with black or white secondary controls depending on surface. Template cards need an image, format, title, and edit action; do not hide the canvas type in an icon. Toolbars should use familiar icons with accessible labels, grouped by creation task. Inputs for dimensions and copy need visible labels, and media chips should identify type, status, and selection. Navigation should separate templates, projects, brand assets, and collaboration.

Treat controls as a system: every filled action needs a hover, pressed, disabled, and focus treatment; every card needs a stable content order; every input needs a label and error state. Use familiar icons inside tool buttons and give unfamiliar icons a tooltip.

## 5. Layout Principles

Use a 1280px canvas with a 12-column template discovery grid and a 720px measure for editorial help. The creation entry point can use a wide statement beside format shortcuts, while the editor itself needs stable tool rails and a fixed canvas region. Use 16/24px gaps inside cards and 64/96px bands between product stories. Preserve thumbnail aspect ratios across templates.

Prefer full-width bands with constrained inner content over decorative nested cards. Stable aspect ratios, explicit grid tracks, and fixed control dimensions keep media and labels from shifting the page as content loads.

## 6. Shapes & Radius Scale

Use 4px for icon controls, 8px for buttons and inputs, 12px for template cards, and 16px for featured format panels. Full pills are reserved for format filters, not primary actions. Keep canvas and editor panels mostly rectangular so the creative artifact, not the chrome, owns the shape language.

Keep the radius scale intentional: micro controls, standard controls, comfortable cards, relaxed feature panels, and pills only for true categorical selectors. A rounded rectangle should communicate an action or grouped item, not decorate every section.

## 7. Depth & Elevation

Use flat white and light gray surfaces for the workspace. A selected template can receive a purple border and a small shadow; floating menus and dialogs may use a stronger neutral shadow. Avoid stacking cards inside cards in the editor. Let the canvas edge, toolbar grouping, and selection outline establish depth before using elevation.

Elevation should explain interaction or layering. If a surface can be understood through contrast, spacing, and a border, do not add a shadow. Every overlay needs a scrim, a clear title, an escape path, and focus restoration.

## 8. Interaction & Motion

Use 150ms for toolbar and hover feedback, 240ms for menu and panel transitions, and 320ms for template preview or canvas changes. Do not auto-pan or repeatedly animate creative media. Provide a motion preference in showcase surfaces and honor reduced motion by making the selected template or export state immediate.

Use motion to confirm an action, expose a relationship, or orient the user. Do not use looping motion to manufacture attention. Make the final state available without animation and ensure reduced-motion preferences remove nonessential transitions.

## 9. Accessibility & A11y

Use dark text on white or light gray and verify white text on purple for every CTA size. Every icon-only editor action needs an accessible name and tooltip; selected tools need a non-color state. Canvas content should have a meaningful alternative or an explicit artifact label. Keyboard focus must remain visible when menus, panels, and selection tools change.

Use semantic landmarks, a single logical heading order, keyboard-operable controls, and text alternatives for status. Test focus against every surface, including imagery, selected states, dialogs, and disabled-looking controls. Do not use a color difference as the only error, progress, rating, or selection signal.

## 10. Responsive Behavior

At 640px, turn the template grid into a single column and move format shortcuts into a labeled horizontal rail. At 1024px, collapse secondary editor panels while keeping the primary canvas and toolbar usable. At 1280px, show the full discovery grid and creation entry point. Keep 44px touch targets, stable thumbnail ratios, and avoid shrinking the canvas into an unreadable preview.

Responsive changes should reflow tasks rather than merely scale the desktop composition. Preserve the first useful action, the content subject, and the state explanation at every breakpoint. If a control row cannot fit, group it under a labeled disclosure instead of allowing clipped text.

## 11. Content & Voice

Use friendly, action-led copy: “Create a design”, “Start from a template”, “Resize”, and “Share”. Explain the format and export consequence before asking for a decision. Empty states should offer a starting template or recent project. Avoid claiming that every creative task is effortless; provide the controls and constraints the user needs.

Microcopy should state the object, action, and consequence. Keep empty states useful, error messages recoverable, and confirmation messages specific. Avoid claims that cannot be understood or verified from the surrounding interface.

## 12. Dark Mode & Theming

Treat the catalog preview as a light-first Canva system. The colorful accents are content and category tools, not a single global gradient. A dark editor theme would need separate canvas, toolbar, focus, and selection tokens; do not produce it by simply inverting artwork or making purple the only signal.

Theme tokens must cover background, surface, text, muted text, border, primary action, primary foreground, focus ring, and semantic states. A theme toggle should preserve the user’s position and announce the current mode; never use an automatic inversion that damages imagery or clinical/product evidence.

## 13. Lineage & Influences

Canva combines template marketplace discovery with the affordances of a lightweight creative suite. Its design language borrows from consumer software through accessible actions and colorful output, while the editor needs the discipline of a professional production tool. It rejects tool-first complexity at the entry point but cannot hide format, collaboration, or export constraints.

The lineage is a design rationale, not a claim that the source site uses every implementation token in this file. The sampled source URL and recorded production observations remain the authority for brand-specific color and typography decisions.

## 14. Do's and Don'ts

**Do**
- Make the creation format explicit.
- Let the artifact carry expressive color.
- Use purple for creation decisions.
- Label icon-only tools.
- Keep canvas dimensions and export visible.
- Use stable template thumbnails.
- Preserve keyboard selection state.
- Offer a clear starting template.

**Don't**
- Do not make the whole interface a gradient.
- Do not hide format in an icon.
- Do not put toolbars inside decorative cards.
- Do not use color as the only selected state.
- Do not shrink the canvas below inspectable size.
- Do not promise effortless export without constraints.
- Do not animate artwork continuously.
- Do not make every action purple.

## 15. Agent Prompt Guide

### Quick Color Reference

- Background: use the sampled canvas token.
- Foreground: use the sampled reading token.
- Primary: use the brand action token.
- Surface: use the grouped-content token.
- Border: use the quiet structural divider.
- Focus: use a high-contrast visible ring.

### Example Component Prompts

- Create a Canva-like template discovery hero with a white canvas, purple “Create a design” action, format shortcuts, and a clear template grid.
- Design a template card with artwork, format, title, and edit action while preserving a fixed aspect ratio.
- Build a compact editor toolbar using familiar icons, tooltips, selected outlines, and a stable canvas region.
- Create an export panel that exposes format, dimensions, transparency, and a direct publish action.

### Iteration Guide

1. Check the first creation decision at 320px.
2. Remove any decorative color that competes with the artwork.
3. Verify every icon action has a name.
4. Test selected tools without color perception.
5. Keep export constraints visible before confirmation.
6. Ensure the canvas remains inspectable at every breakpoint.