Canva Violet
#8b3dffPrimary brand color, gradient anchor, link text, category icon accents
Canva
canva.comWebsite preview
The design language
Canva's design system is a candy-colored creative studio: a canvas that breathes, floats, and splashes through saturated gradient skies. The interface alternates between pure white workspace moments and full-bleed chromatic panels that serve as the real product showcase — teal-to-violet, magenta-to-coral, emerald-to-lime — each one a mood rather than a decorative fill. Typography is a custom humanist sans (Canva Sans) that stays warm and friendly at every weight; display sizes stretch to 80px with whisper-tight tracking, while body text sits at 16–18px in a comfortable 1.4–1.5 line height. Surfaces are flat with subtle 8px rounding and barely-there blue-tinted shadows; elevation is implied through color and gradient rather than depth. The wordmark is a hand-cut italic script, the only curved-letterform in the system, acting as a signature stamp on the otherwise geometric UI.
Color palette
brand
Soft Iris
#a370fcSecondary violet for lighter gradient stops, subdued link states, decorative icon tints
Deep Amethyst
#9729ffViolet supporting accent for decorative details and low-frequency emphasis. Do not promote it to the primary CTA color
Teal Violet Sky
#7d2ae8Hero and feature card gradient — teal to violet sweep at 135deg
Ulraviolet Horizon
#5a32faWide spectrum hero gradient — purple to cyan to white wash, the most expansive expression of the brand
accent
Ember Red
#ff3d4dWarm accent for gradient panels, social/heart icon variants, category tag punctuation
Plasma Pink
#e950f7Magenta accent for gradient sweeps, sparkle/sticker icon variants, creative expression
Solar Orange
#ff6105Orange accent for warm gradient panels, fire/print icon variants, callout energy
Coral Sunset
#ff6208Warm-to-peach gradient panel for lifestyle/print product cards
Emerald Meadow
#00b100Green gradient panel for app-integration and template discovery cards
neutral
Ink Black
#0f1015Primary text, dark surface fills, button text on light backgrounds, nav text
Pure Black
#000000Hardest text, logo wordmark rendering, high-contrast icons
Off-Black
#231f20Print-style black for rich type rendering, secondary deep fill
Slate Smoke
#575a5fMuted helper text, secondary nav, icon outlines, inactive state text
Pale Mist
#d7d9deHairline borders, focus ring halos, very-light dividers, subtle shadow tints
Paper White
#ffffffLight supporting surface for subtle backgrounds and section separation. Do not promote it to the primary CTA color
Typography
Type scale
Minor Third (1.2) · 20px basemega
80px · 400 · 1.1 · -0.8px trackingThe quick brown fox jumps
hero
64px · 400 · 1.1 · -0.64px trackingThe quick brown fox jumps
display
56px · 400 · 1.1 · -0.56px trackingThe quick brown fox jumps
heading-lg
36px · 500 · 1.25 · -0.36px trackingThe quick brown fox jumps
heading
32px · 600 · 1.25 · -0.32px trackingThe quick brown fox jumps
heading-sm
28px · 500 · 1.33 · -0.28px trackingThe quick brown fox jumps
subheading
24px · 600 · 1.4 · -0.24px trackingThe quick brown fox jumps
body-lg
18px · 600 · 1.57 · -0.18px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Times
- Weights
- 400
- Sizes
- 10px
- Line height
- 1.2
Times — detected in extracted data but not described by AI
Additional typeface
Canva Sans
- Weights
- 400, 500, 600
- Sizes
- 14, 16, 18, 24, 28, 32, 36, 56, 64, 80
- Line height
- 1.10, 1.25, 1.33, 1.38, 1.40, 1.50, 1.57
- Letter spacing
- -0.0100em at 14–80px
- Fallback
- Inter, DM Sans, or Plus Jakarta Sans
- Features
- "ss02" on, "ss03" on
Sole brand typeface — humanist sans with warm apertures, used for everything from 14px body to 80px display. Weight 400 is the workhorse; 500 carries subheads; 600 punches buttons and tag labels. The ss02/ss03 stylistic sets give alternative letterforms that add personality without going decorative.
Additional typeface
Arial
- Weights
- 400
- Sizes
- 13px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 64px
- Card padding
- 24px
- Element gap
- 12px
Border radius
cards
8pxicons
8pxpills
9999pxbuttons
8pxfeaturePanels
16pxSpacing scale
4px5px7px8px9px10px12px13px16px17px18px20px22px24px32px44px48px54px76px212px256pxGuidelines
Do
- Use full-bleed gradient panels as the chromatic stage for product features — let teal-to-violet, coral-sunset, emerald-meadow, and ultraviolet-horizon carry the visual weight, not small icon accents.
- Set all body text in Canva Sans weight 400 at 16–18px with line-height 1.5–1.57; Canva's tone is conversational, not compressed.
- Anchor every primary action with a solid white or solid Ink Black button at 8px radius, 12px/20px padding, weight 500 — never use a chromatic fill for the main CTA when it competes with gradient panels.
- Apply 8px radius as the default for all cards, buttons, and chips; reserve 16px for full-bleed gradient feature panels and 9999px for pills and search fields.
- Maintain a single -0.0100em letter-spacing across the Canva Sans scale; let the typeface's humanist warmth do the work without aggressive tracking tweaks.
- Build section rhythm as white-space → gradient-panel → white-space, with 64px section gaps; the alternation is the page's signature.
- Pair the Canva Sans geometric forms with the custom italic script wordmark for logo lockups; the script's curves are the only deviation from the system's straight geometry.
Don’t
- Don't use chromatic fills for the main CTA button — white or Ink Black only, so it never fights the gradient panels.
- Don't apply heavy drop shadows; Canva's elevation is whisper-light, with blue-tinted stacks at rgba(24,44,89,0.07–0.14) and 0.5px hairline borders.
- Don't use Canva Sans at weight 700 or above; the system maxes out at 600, and most display headlines sit at weight 400 for warmth.
- Don't introduce new chromatic accent hues — stick to the brand palette: Canva Violet, Deep Amethyst, Ember Red, Plasma Pink, Solar Orange.
- Don't compress line-height below 1.25 even for display sizes; the humanist proportions need air.
- Don't use sharp 0px radius on rectangular elements; the system is consistently rounded, and 8px is the floor.
- Don't replace Canva Sans with Times or Arial — those are fallback scaffolding for image-rendered text inside template thumbnails, not page UI.
Components
Primary White Button
Main call-to-action on gradient backgroundsWhite fill (#ffffff), Ink Black text (#0f1015), Canva Sans 16px weight 500, 8px radius, 12px vertical / 20px horizontal padding, subtle 1px inset border in rgba(53,65,90,0.2) for edge definition on bright backgrounds.
Dark Inverse Button
Primary action on white sectionsInk Black fill (#0f1015), white text, 8px radius, 12px/20px padding, white 1px inset highlight ring. Weight 500 at 16px.
Ghost Outline Button
Secondary action, navigation edgesTransparent fill, 1px border in Ink Black or white depending on context, 8px radius, 12px/16px padding, weight 500 text.
Pill Navigation Link
Top nav menu items, category tabs9999px radius, transparent fill, Canva Sans 14–16px weight 500, Ink Black text, 8px horizontal padding. Active state gets a subtle background tint or underline.
Gradient Feature Card
Primary content card for product features and category showcases16px radius, full-bleed gradient background (teal-to-violet, coral-sunset, emerald-meadow, or ultraviolet-horizon), 24–32px internal padding, white text, headline at 24–32px weight 500, body at 16px weight 400, optional white ghost button. Cards cast the standard blue-tinted shadow.
White Product Card
Template grid items, product cards on white sections8px radius, white fill (#ffffff), 24px padding, 0.5px hairline border in Pale Mist (#d7d9de), standard blue-tinted shadow stack. Interior uses Ink Black text and may include small colored icon accents.
Category Chip with Icon
Scrollable category navigation (New launches, AI, Social, Video, etc.)White fill or transparent, 8px radius, 8–12px padding, 14px weight 500 text, paired with a small 16–20px icon rendered in a brand accent color (violet, pink, orange). Sits inside a scrollable horizontal strip with 12px gaps.
Search Bar
Top-level global searchWhite fill or translucent, 9999px radius, 12–16px padding, 16px weight 400 text, with a search icon in Slate Smoke (#575a5f). Placeholder text in Slate Smoke.
Wordmark / Logo Lockup
Brand identifier in header and footerCustom italic script rendering of "Canva" in white on dark/gradient contexts, or Ink Black on white. Unique curved letterforms that contrast with the geometric Canva Sans system.
Header Navigation Bar
Top-of-page persistent navigationTransparent on the gradient hero, white when scrolled. Contains logo left, centered nav links (Design, Product, Plans, Business, Education, Help) as pill links, and Sign up + Log in buttons right. Sits at 64–72px height with 16–24px horizontal padding.
Gradient Hero Section
Above-the-fold brand statementFull-bleed Teal Violet Sky gradient (135deg), 600–700px height, centered headline at 56–64px white weight 400, subtitle at 18px white with 80% opacity, white CTA button centered, and a constellation of floating 3D design-tool icons below.
Floating Design Tool Icon
Decorative product affordance in heroSmall 48–64px glass-morphism tile (white with 40% opacity or colored gradient), 8px radius, containing a typographic or graphic symbol. Arranged in a scattered constellation to imply creative possibility.
Section Heading
Section-level title blockCanva Sans 36–56px weight 400, Ink Black, centered or left-aligned, with optional descriptive subtitle at 18px weight 400 in Slate Smoke. Sits above card grids with 40–64px gap below.
Ghost Card Link Button
"Explore" / "Learn more" inside gradient cardsWhite fill, Ink Black text, 8px radius, 8–12px padding, 14px weight 500. Sits in the top-left or bottom-left of a gradient feature card.
Surfaces & elevation
Level 0
Paper White
#ffffffBase page canvas, negative space, breathing room between gradient sections
Level 1
White Card
#ffffffFeature card surfaces on white page, category pill backgrounds
Level 2
Gradient Panel
#7d2ae8Full-bleed feature card backgrounds, hero zone — the chromatic stage where the product lives
Feature card / product tile
rgba(64, 79, 109, 0.06) 0px 0px 0px 0.5px, rgba(24, 44, 89, 0.137) 0px 2px 4px 0px, rgba(24, 44, 89, 0.07) 0px 6px 12px 0px
Primary button (light variant)
rgba(53, 65, 90, 0.2) 0px 0px 0px 1px inset
Primary button (dark variant)
rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset
Layout & imagery
Layout
Page model is centered with a max-width of 1280px for content blocks, but full-bleed gradient sections break out of the container to span the entire viewport. The hero is a full-bleed gradient with a centered headline over a teal-to-violet wash, followed by a floating icon constellation. Below the hero, sections alternate between white-space and full-bleed gradient feature cards in a 2-column asymmetric grid — one large card on the left, a smaller stacked pair on the right, or balanced equal halves. Content arrangement uses centered headline stacks followed by horizontal card carousels, not alternating text-left/image-right. The category navigation strip is a horizontal scrolling pill bar that sits above the feature card grid. Section gaps are generous (64px), creating a spacious, gallery-like rhythm rather than a dense information layout. Navigation is a thin transparent top bar that becomes white on scroll, with centered pill links and right-aligned action buttons.
Imagery
Imagery lives in two modes. The first is product-showcase photography and user-generated content embedded inside gradient feature cards — lifestyle shots of people using printed products, template previews showing Disney characters, app integration logos rendered as colorful tiles. The second is 3D-rendered design tool icons: small glass-morphism cubes containing typographic letters (T for text, C for circle, </> for code), emoji-style sticker icons (heart, sparkle, smile), and colored gradient orbs. These float in a scattered constellation in the hero and serve as the visual proxy for 'every creative tool you can imagine.' Photography is high-key, warm, and staged rather than candid; product crops are tight with no lifestyle context. Icon style is rounded, colorful, and 3D-shaded — they read as playful physical objects rather than flat UI glyphs.
Design notes
Agent Guide
**Quick Color Reference** - text: #0f1015 - background: #ffffff - border: #d7d9de - accent: #8b3dff - primary action: no distinct CTA color - gradient: linear-gradient(135deg, rgb(0,196,204), rgb(125,42,232)) **Example Component Prompts** 1. **Gradient Feature Card**: Full-bleed background with linear-gradient(135deg, rgb(0,196,204), rgb(125,42,232)). 16px border-radius. 24px padding. White headline at 24px Canva Sans weight 500, letter-spacing -0.24px. White body text at 16px weight 400. White ghost button (white fill, #0f1015 text) at top-left, 8px radius, 12px/16px padding. 2. **White Product Card**: White fill (#ffffff). 8px border-radius. 24px padding. Hairline border: 0.5px solid #d7d9de. Shadow: rgba(64,79,109,0.06) 0px 0px 0px 0.5px, rgba(24,44,89,0.137) 0px 2px 4px, rgba(24,44,89,0.07) 0px 6px 12px. Image area on top, 16px gap, then 16px Canva Sans weight 500 title in #0f1015. 3. **Hero Section**: Full-bleed gradient background linear-gradient(135deg, rgb(0,196,204), rgb(125,42,232)). Centered white headline at 64px Canva Sans weight 400, letter-spacing -0.64px. Subtitle at 18px weight 400 white. White button (fill #ffffff, text #0f1015, 8px radius, 12px/20px padding, 16px weight 500). 64px gap to floating icon constellation. 4. **Top Nav Bar**: Transparent on hero, white when scrolled. 72px height. Left: italic script wordmark. Center: pill nav links (Design, Product, Plans, Business, Education, Help) at 14px Canva Sans weight 500 in #0f1015, 9999px radius, 8px/12px padding. Right: Sign up ghost outline button and Log in dark button (#0f1015 fill, white text, 8px radius). 5. **Category Chip Row**: Horizontal scrollable strip. Chips: 8px radius, white or transparent fill, 8px/12px padding. Each chip pairs a 16px colored icon (violet #8b3dff, pink #e950f7, orange #ff6105) with 14px Canva Sans weight 500 text in #0f1015. 12px gap between chips. White background section.
Gradient System
Gradients are the real product palette. Six named gradients form a spectrum from cool to warm to natural: - **Teal Violet Sky** (135deg, teal → violet) — the default hero and product feature card - **Coral Sunset** (vertical, red → orange → peach) — lifestyle, print, commerce cards - **Emerald Meadow** (vertical, deep green → lime → cream) — app integrations, growth cards - **Ulraviolet Horizon** (98deg, deep purple → indigo → cyan → white) — the most expansive hero, reserved for peak brand moments - **Plasma Wash** (vertical, violet → magenta → pink) — creative expression, AI/Magic Studio surfaces - **Cyan Violet** (135deg, teal → indigo → violet) — secondary product feature variants All gradients sweep diagonally or vertically; none are radial. Each terminates in a lighter tone to create a sense of atmospheric depth, not flat color blocks.
Typography Attitude
Canva Sans is humanist and warm — its open apertures and slightly rounded terminals make it feel approachable, not corporate. The system makes one non-obvious choice: display headlines use weight 400, not 600–700. This puts visual mass in the letterforms and the tracking (-0.0100em) rather than the weight, keeping the tone conversational even at 64–80px. The ss02 and ss03 stylistic alternates should be on by default to add personality to the otherwise geometric character set.
Similar brands
Figma
Same approach of using a single dominant brand accent (Figma orange, Canva violet) against a white canvas with full-bleed gradient feature panels and flat rounded cards
Notion
Similar comfortable density, custom humanist sans typeface, flat surfaces with hairline borders and barely-there shadows, and the same commitment to a single whisper-tone for body text
Spline
Shared use of saturated multi-color gradients as page backgrounds and feature card fills, with white text overlaid — both treat color as the canvas, not the decoration
Stripe
Similar whisper-tight letter-spacing at display sizes (-0.0100em territory), gradient feature sections, and the pattern of alternating white workspace with chromatic content blocks
Linear
Same ultra-clean flat-surface language with 8px default radius, thin blue-tinted shadows, and pill-shaped navigation elements
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
