Canva DESIGN.md

Creative-tool design with playful confidence, rainbow-gradient energy, and strong workflow simplification. Canva combines bright brand color, rounded UI, approachable motion, and productivity-first editor structure to make advanced design tasks feel easy and joyful.

1. Visual Theme & Atmosphere

Overall Aesthetic

Canva communicates creative power made simple. The interface needs to feel cheerful, fast, and polished, but it can’t become chaotic because users spend long sessions inside the editor and homepage dashboards.

Mood & Feeling

• Playful: creativity should feel inviting, not intimidating
• Simple: complex design actions should feel easy and guided
• Collaborative: workflows should support teams and shared brand systems
• Productive: the editor is a serious work surface despite the bright personality
• Global: the design must scale across templates, docs, video, AI, and presentations

Design Density

Medium density. Canva often shows many features and entry points, but it stays accessible through rounded cards, bright signposting, and simplified action groups.

Visual Character

• Signature turquoise-to-purple gradient energy
• Friendly rounded controls and cards
• Light, airy editor shells around more colorful content
• Simple iconography and approachable microinteractions
• Joyful without losing productivity focus

2. Color Palette & Roles

Signature Brand Colors

Neutral Foundation

Semantic Colors

Color Usage Rules

• Use gradients and bright accents for identity moments, not every surface.
• Keep editor UI largely neutral so user content can shine.
• Use purple and pink selectively to mark AI or premium/creative moments.

3. Typography Rules

Font Stack

css/* Canva-style friendly modern sans */
--font-sans: Canva Sans, Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Canva typography should feel friendly, modern, and frictionless. It supports creative confidence by staying readable and non-intimidating.

Practical Rules

• Keep labels short and action-based.
• Let the brand feel optimistic through generous spacing and rounded shapes.
• Use strong hierarchy for feature discovery, not clutter.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: linear-gradient(90deg, #00C4CC 0%, #7D2AE8 100%);
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #1E293B;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  font: 400 16px/1.2 Inter, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #2B8CFF;
  box-shadow: 0 0 0 3px rgba(43, 140, 255, 0.14);
}

Cards and Editor Panels

Template Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 20px;
}

Editor Panel

css.editor-panel {
  background: #FFFFFF;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(30, 41, 59, 0.08);
}

5. Layout Principles

Spacing Scale

Layout Rules

• Keep homepage and editor shells light and navigable.
• Use visual grouping to separate create, brand, templates, and AI tools.
• Let user content and template previews carry more color than the UI shell.
• Use rounded cards and gentle motion to keep exploration fun.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 6px 14px rgba(30, 41, 59, 0.06);
}

.shadow-panel {
  box-shadow: 0 16px 28px rgba(30, 41, 59, 0.12);
}

Depth Rules

• Use gentle depth and rounded surfaces.
• Keep the editor productive, not toy-like.
• Let gradients stay mostly in hero and highlight moments.

7. Do's and Don'ts

Do

• Use Canva’s gradient energy for identity moments.
• Keep the editor shell neutral and productivity-friendly.
• Make complex actions feel simple and guided.
• Use rounded surfaces and approachable spacing.
• Support collaboration and brand-system workflows clearly.

Don't

• Flood every screen with rainbow accents.
• Let playful styling reduce clarity.
• Overload discovery pages with too many equal-priority cards.
• Make the product feel generic enterprise software.

8. Responsive Behavior

Responsive Rules

• Stack cards and editor utilities cleanly on smaller screens.
• Preserve clear CTA and search access on homepage views.
• Keep template previews visually rich even when narrower.
• Maintain large, touch-friendly controls in the editor and dashboards.

Mobile Character

Canva mobile should still feel joyful and productive. The bright brand personality should remain, but workflows must stay organized and fast to navigate.

9. Agent Prompt Guide

Quick Reference

• Mood: playful, productive, creative, approachable
• Signature colors: turquoise, blue, purple, pink
• Core layout: neutral editor shell plus colorful template content
• Typography: friendly modern sans
• Components: gradient primary buttons, rounded cards, soft editor panels

Prompt Snippet

textDesign this interface in the style of Canva’s current product and homepage experience. Use a friendly modern sans, a turquoise-to-purple brand gradient for key identity moments, rounded controls, light neutral editor surfaces, and colorful template-driven content. The result should feel playful, productive, and easy to use rather than cluttered or overly enterprise.