Canva

Overview

Canva is a democratized visual design platform that transforms complex creative workflows into intuitive, accessible experiences. The design system embodies a "Vibrant Minimalism" aesthetic—a bold, gradient-driven visual language paired with clean, purposeful UI elements that guide users from inspiration to creation. The brand serves creators of all skill levels, from solopreneurs to enterprise teams, making professional-grade design accessible to anyone. The emotional response is one of creative empowerment: users feel capable, inspired, and energized by the platform's visual energy and responsive interactions.

Canva's voice is conversational, encouraging, and action-oriented. The tone avoids jargon while maintaining sophistication; it speaks to users as creative peers, not novices. Vocabulary emphasizes possibility and ease: "Make," "Create," "Design," "Share." The brand personality is optimistic, inclusive, and forward-thinking. Example sentence in Canva's voice: "What will you design today?"—a question that assumes capability and invites exploration.

Colors

Canva's color system is built on a vibrant primary accent—a vivid purple (#8b3dff)—that dominates CTAs, interactive states, and brand moments. This primary is paired with a bright cyan secondary (#00c4cc) for supporting accents and a bold red tertiary (#db142c) for alerts and emphasis. The surface stack is clean and neutral: white (#ffffff) as the base, with subtle grays (#f5f5f5 to #d8d8d8) for container hierarchy. The on-surface text is a near-black (#0f1015) for maximum legibility. Primary (#8b3dff) is used exclusively on primary CTAs ("Sign up," "Start designing"), with a 20% opacity shadow (rgba(139, 61, 255, 0.2)) for depth. Secondary (#00c4cc) appears on supporting actions and data highlights. Tertiary (#db142c) signals errors and critical feedback. The surface stack follows a stric

Typography

Canva's type system uses a custom Canva Sans font family (with fallbacks to IBM Plex Sans Arabic, Noto Sans, and system fonts) across all weights (400–700). The hierarchy is built on a 4px baseline grid: display (60px, 700 weight, -0.04em tracking) anchors hero sections; headline-lg (48px, 700 weight) and headline-md (32px, 600 weight) structure page sections; title-lg (20px, 600 weight) labels subsections; body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry primary content; label-md (14px, 600 weight) and label-sm (12px, 500 weight) label UI controls and metadata. The type pairing communicates clarity and confidence: bold, generous headlines (700 weight, tight tracking) contrast with open, readable body text (400 weight, 1.5x line-height). O

Layout

Canva uses a fluid 12-column grid with a max-width of 1280px, centered on the viewport. The page rhythm is driven by a 24px gutter (md spacing) between columns and 40px (lg spacing) for section separation. The hero section spans full width with a vibrant gradient background (purple #8b3dff to cyan #00c4cc), establishing visual energy immediately. Content sections use 24px padding (md) on mobile, scaling to 40px (lg) on desktop. The container-max-width of 1280px ensures readability on ultra-wide screens. White-space is generous: 64px (xl spacing) between major sections, 24px (md) between cards within a section. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for standard gutters, lg (40px) for section breaks, xl (64px) for major lay

Elevation & Depth

Depth in Canva is achieved through a three-tier shadow system that mimics physical elevation. Level 1 (Base): no shadow; elements sit flush on the surface. Level 2 (Standard Cards/Buttons): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation and focus. Level 3 (Elevated/Modals/Hover States): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), lifting elements prominently above the canvas. Interactive elements use dynamic shadows: buttons transition from Level 2 (rest) to Level 3 (hover) over 200ms, signaling interactivity. Primary buttons add a color-tinted shadow (0 2px 8px rgba(139

Shapes

Canva's shape philosophy is "Soft-Technical"—a balance between approachability and precision. Buttons and primary CTAs use a full pill shape (border-radius: 9999px, or 20px on smaller elements), creating a friendly, inviting aesthetic that encourages clicks. Cards and containers use 16px (rounded.lg) for a modern, slightly rounded appearance that feels contemporary without being overly organic. Input fields use 8px (rounded.DEFAULT) for a clean, functional look. Modals and elevated surfaces use 20px (rounded.xl) to match button styling and create visual cohesion. The full-pill radius (9999px)

Components

Action Elements Primary buttons use a vibrant purple background (#8b3dff) with white text, 12px horizontal padding, and a full pill shape (border-radius: 9999px). Height is fixed at 48px to ensure touch-friendly targets. At rest, they cast a subtle purple-tinted shadow (0 2px 8px rgba(139, 61, 255, 0.2)). On hover, the background darkens to #7630d7 and the shadow deepens (0 4px 12px rgba(139, 61, 255, 0.3)), with a 150ms transition. Active state drops the background to #612dae and reduces shadow to 0 2px 4px rgba(139, 61, 255, 0.2). Secondary buttons use a light gray background (#e0e0e0) with dark text, a 1px outline border, and the same 48px height and pill shape. Ghost buttons are transparent with purple text and no shadow; on hover, they gain a subtle purple overlay (rgba(139, 61, 2

Do's and Don'ts

**Do**

• Do use the primary purple (#8b3dff) exclusively for primary CTAs and key interactive moments—it's the brand's signature accent and should never be diluted or overused.
• Do maintain the 24px gutter and 40px section spacing consistently across all pages to create a predictable, rhythmic layout that feels intentional and polished.
• Do apply the full pill shape (border-radius: 9999px) to primary buttons and badges to signal their importance and encourage interaction.
• Do use the three-tier shadow system (Level 1: none, Level 2: 0 3px 8px rgba(0,0,0,0.15), Level 3: 0 8px 24px rgba(0,0,0,0.12)) to create clear visual hierarchy without relying on color alone.
• Do pair bold, generous headlines (700 weight, tight tracking) with open, readable body text (400 weight, 1.5x line-height) to create visual contrast and improve scannability.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs—reserve the vibrant purple for the most important actions, and use secondary/tertiary only for supporting elements or status indicators.
• Don't apply border-radius greater than 20px to cards or containers; the full pill shape is reserved for buttons and badges to maintain visual distinction.
• Don't mix shadow levels within a single component state; use Level 2 for standard elements and Level 3 only for elevated or hover states to avoid visual confusion.
• Don't reduce line-height below 1.4x on body text or below 1.2x on headlines; Canva's typography relies on generous vertical spacing for legibility and visual breathing room.
• Don't hardcode colors in component definitions; always reference the color token system (e.g., {colors.primary}) so the design system remains wired and maintainable.