--- version: alpha name: Canva description: Friendly design-for-all platform — proprietary Canva Sans with ss02/ss03 optical features, deep near-black canvas, electric violet primary, teal-to-purple gradient hero, and generously rounded 8px/16px button geometry. colors: # Surface / canvas background: "#0f1015" # deep near-black — the dominant page canvas surface: "#ffffff" # white panels, card surfaces, nav on scroll surface-dark: "#101219" # was rgba(16,18,25,0.698) over dark bg — Google format requires hex # Ink / text ink: "#ffffff" # primary text on dark canvas ink-dark: "#0f1015" # text on light/white surfaces on-background: "#ffffff" # headings on dark canvas on-surface: "#0f1015" # text on white panels # Brand accent — violet / purple primary: "#8b3dff" # electric violet — primary CTA, links, brand highlight primary-light: "#a370fc" # lighter violet — hover links, secondary emphasis on-primary: "#ffffff" # white text on violet buttons # Gradient stops — hero teal-to-purple gradient-teal: "#00c4cc" # hero gradient start (teal/cyan) gradient-purple: "#7d2ae8" # hero gradient end (deep purple) # Palette pastel chips — brand builder swatches swatch-peach: "#ffdac4" # peach pastel chip swatch-pink: "#ffd6d8" # pink pastel chip swatch-lavender: "#f9defb" # lavender pastel chip — estimated from rgb(249,222,251) swatch-lilac: "#ead6ff" # lilac pastel chip # Borders border: "#353f5a" # was rgba(53,65,90,0.2) inset shadow — opaque mid-slate border border-light: "#333333" # was rgba(255,255,255,0.2) over dark bg — Google format requires hex # Shadow tints shadow-card: "#40506d" # was rgba(64,79,109,0.06) — Google format requires hex shadow-deep: "#182c59" # was rgba(24,44,89,0.137) — deeper blue-black shadow tint typography: display-hero: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, Helvetica, Arial, sans-serif" fontSize: 96px fontWeight: 400 lineHeight: 1.06 letterSpacing: -1.5px fontFeature: '"ss02", "ss03"' display: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, Helvetica, Arial, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.10 letterSpacing: -0.64px fontFeature: '"ss02", "ss03"' heading-section: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 72px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.72px fontFeature: '"ss02", "ss03"' heading-sub: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 42px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.42px fontFeature: '"ss02", "ss03"' heading-card: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0px body: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0px button-ui: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.38 letterSpacing: 0px nav-link: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.57 letterSpacing: 0px caption: fontFamily: "Canva Sans, Noto Sans Variable, Noto Sans, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 600 lineHeight: 1.45 letterSpacing: 0.1px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px rounded: none: 0px sm: 8px md: 16px lg: 48px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 9px 16px button-primary-hover: backgroundColor: "{colors.primary-light}" textColor: "{colors.on-primary}" button-white: backgroundColor: "{colors.surface}" textColor: "{colors.ink-dark}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 9px 20px button-white-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" button-ghost: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 9px 12px button-ghost-hover: backgroundColor: "{colors.border}" textColor: "{colors.ink}" button-outline: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 9px 16px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-dark}" rounded: "{rounded.sm}" padding: 24px card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink-dark}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink-dark}" badge: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 24px tag-pill: backgroundColor: "{colors.surface-dark}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px --- # Canva Design System ## Overview Canva's interface plants its flag in an unusual position for a creative tool: it opens not on white but on a deep near-black canvas (`{colors.background}`), immediately communicating ambition rather than neutrality. The page functions as a stage — the dark surround recedes so that the vibrant teal-to-purple gradient hero (`{colors.gradient-teal}` bleeding into `{colors.gradient-purple}`) reads as luminous and cinematic. It's a home page that behaves like a product demo: step into the theatre, and the creativity comes to you. The proprietary Canva Sans typeface is the quiet backbone of the whole system. It runs at optical weight 400 for display sizes — unusually light for a headline font — with OpenType features `ss02` and `ss03` engaged across sizes, smoothing the numerals and rounding specific letterforms for warmth. Most headlines carry deliberate negative tracking (-0.64px to -1.5px) that tightens spacing at large sizes without cramping. At functional sizes (buttons, navigation, captions), the font shifts to weight 600, grounding labels with just enough heft to read against both the dark canvas and white card surfaces. The effect is a single-family system that successfully spans epic-scale hero headlines and 11px UI labels, from expressive to utilitarian in one typeface. Shape language is the third pillar. The system is built around a modest 8px default radius (`{rounded.sm}`) on buttons and inputs, stepping up to 16px (`{rounded.md}`) for larger UI surfaces, with 48px `{rounded.lg}` reserved for playful pill-like feature buttons. Full-pill shapes (`{rounded.pill}`) appear on category chips and avatar clusters. Nothing is sharp-cornered, nothing is hyper-rounded — Canva's radii sit in the reliable middle register of friendly-but-precise, matching a brand that aims to feel approachable to everyone from first-time users to professional designers. **Key Characteristics:** - Deep near-black canvas (`{colors.background}`) — sets the stage, not a neutral background - Teal-to-purple hero gradient (`{colors.gradient-teal}` → `{colors.gradient-purple}`) — the brand's most cinematic gesture - Proprietary Canva Sans with `ss02`/`ss03` optical features — single typeface scales from 96px hero to 11px label - Electric violet (`{colors.primary}`) as the sole brand accent — CTAs, hover states, links - Negative letter-spacing on all display text (-0.42px to -1.5px) - 8px default button radius (`{rounded.sm}`) — precise, friendly, not extreme - Pastel swatch system (`{colors.swatch-peach}`, `{colors.swatch-pink}`, `{colors.swatch-lavender}`, `{colors.swatch-lilac}`) — signals the color richness users get inside the product - Feathery multi-layer card shadow (`{colors.shadow-card}`, `{colors.shadow-deep}`) — lifts interactive surfaces off the canvas - Weight 600 for all UI chrome; 400-500 for display and body reading ## Colors ### Surface & Canvas - **Near-Black** (`{colors.background}`): The dominant page canvas — not quite black, with a subtle warm blue undertone at `#0f1015`. Everything reads against this. - **White** (`{colors.surface}`): Cards, panels, nav on scroll, feature thumbnails. - **Dark Surface** (`{colors.surface-dark}`): Ghost button fills, secondary UI zones, subtle dark overlays. ### Ink / Text - **White** (`{colors.ink}`): Primary display and body text on the dark canvas. - **Near-Black** (`{colors.ink-dark}`): Text on light/white card surfaces. - **On Background** (`{colors.on-background}`): Hero and section headlines on the canvas. - **On Surface** (`{colors.on-surface}`): Body text on white panels. ### Brand Accent - **Electric Violet** (`{colors.primary}`): The sole primary brand accent. Used for the main CTA button (purple "Start designing for free"), links, and focus states. The defining color of the Canva interface. - **Soft Violet** (`{colors.primary-light}`): Hover/secondary emphasis — lighter version of violet for link hover states. - **On Primary** (`{colors.on-primary}`): White text on violet surfaces. ### Gradient - **Teal** (`{colors.gradient-teal}`) / **Deep Purple** (`{colors.gradient-purple}`): The hero gradient pair — sweeps from a bright cyan-teal to a saturated purple. Used full-width in the hero and echoed in product feature sections. ### Pastel Swatches - `{colors.swatch-peach}`, `{colors.swatch-pink}`, `{colors.swatch-lavender}`, `{colors.swatch-lilac}`: The brand builder palette chips shown in product demos — warm pastel accents that signal the richness of the product's color system without competing with the primary violet accent. ### Borders & Shadows - **Slate Border** (`{colors.border}`): Mid-slate inset border for ghost buttons and form fields. - **Card Shadow** (`{colors.shadow-card}`, `{colors.shadow-deep}`): Blue-black tints used for the multi-layer elevation shadows on interactive cards (originally rgba values, flattened to opaque per the Google spec). ## Typography ### Font Family - **Primary**: `Canva Sans`, a proprietary variable sans-serif with fallbacks: `Noto Sans Variable, Noto Sans, Helvetica, Arial, sans-serif` - **OpenType Features**: `"ss02"` and `"ss03"` are active on all display and heading sizes — these stylistic sets produce smoother, more optical numeral forms and warmer letterform cuts at large sizes. ### Hierarchy The full type scale lives in the `typography:` token block. | Token | Use | |---|---| | `display-hero` | 96px / 400 / -1.5px — the marquee homepage headline | | `heading-section` | 72px / 400 / -0.72px — large section titles | | `display` | 64px / 400 / -0.64px — secondary hero and feature headers | | `heading-sub` | 42px / 500 / -0.42px — sub-section lead text | | `heading-card` | 32px / 600 / 0px — card and feature tile headings | | `body-large` | 24px / 400 / 0px — intro paragraphs and section leads | | `body` | 18px / 500 / 0px — standard body, feature descriptions | | `button-ui` | 16px / 600 / 0px — all button labels, nav items | | `nav-link` | 14px / 600 / 0px — navigation links, small UI labels | | `caption` | 11px / 600 / 0.1px — tiny category labels, chips | ### Principles - **Single-family depth**: Canva Sans handles every typographic role from 96px hero to 11px label without a secondary typeface. - **Light at display scale**: Hero and section headings run at 400 — the weight stays light, letting size and color do the hierarchy work. - **Negative tracking on large text**: All display sizes compress letter-spacing (-0.42px to -1.5px), which tightens headlines and gives them a polished, editorial rhythm. - **Weight pivot at UI scale**: Below ~24px, the font shifts to 600 for all chrome text — ensuring legibility on both the dark canvas and white surface cards. - **Feature activation**: `ss02`/`ss03` on display sizes only — functional UI text at 16px and below runs without these features, keeping rendering crisp. ## Layout ### Spacing System Base unit is **8px**. Scale in YAML: `xs` (4px) through `4xl` (64px). The 4px sub-step handles tight icon gaps and chip internals; 8px is the standard component-internal step. ### Grid & Container - Max content width: ~1280px, centered - Hero: full-width gradient band, headline centered - Feature sections: alternating image-left / text-right splits; card grid rows below - Breakpoints span from 352px (XS mobile) through 1920px (widescreen) with 27 defined stops — unusually granular, reflecting Canva's global, device-diverse user base ### Whitespace Philosophy - **Dark canvas with light islands**: The near-black background makes white card surfaces read as luminous and focused. - **Generous section spacing**: Major section transitions use `{spacing.4xl}` (64px) vertical rhythm. - **Dense feature rows**: Template grid and use-case cards are tightly packed to communicate variety — the density is intentional product marketing. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Canvas background, nav items | | Subtle (Level 1) | `0 0 0 0.5px rgba(64,79,109,0.06)` | Resting card outlines | | Card (Level 2) | `0 2px 4px rgba(24,44,89,0.137) + 0 6px 12px rgba(24,44,89,0.07)` | Interactive cards, feature tiles | | Elevated (Level 3) | `0 8px 16px rgba(24,44,89,0.137) + 0 24px 24px rgba(24,44,89,0.07)` | Modals, floating panels | | Focus Ring | `2px solid {colors.primary}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: Canva uses a blue-black shadow stack (tinted toward `{colors.shadow-deep}`) rather than neutral grey. The multi-layer recipe — a fine hairline outline at 0.5px, then a tight 2/4px lift, then a wider diffuse 6/12px bloom — creates polished card elevation that feels neither heavy nor flat. On the dark canvas, shadows are nearly imperceptible; they become visible when cards appear on lighter section backgrounds. ## Shapes The full radius scale lives in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `none` | 0px | Reserved for edge-to-edge section backgrounds | | `sm` | 8px | Standard buttons, inputs, cards, thumbnails | | `md` | 16px | Larger feature cards, overlay panels | | `lg` | 48px | Playful pill-adjacent buttons (e.g. video play controls) | | `pill` | 9999px | Category chips, avatar clusters, tag badges | The system uses two working radii: `{rounded.sm}` (8px) for most interactive elements and `{rounded.md}` (16px) for larger surfaces. The 48px `{rounded.lg}` appears sparingly on oversized circular controls. The result is a system that feels consistent and friendly without becoming aggressively pill-shaped. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — Electric violet (`{colors.primary}`) fill, white text, 8px radius. The main "Start designing for free" CTA. Hover lightens to `{colors.primary-light}`. - **`button-white`** — White (`{colors.surface}`) fill, dark text, 16px radius. The softer secondary action ("Sign in", "Try X"). Hover shifts text to violet. - **`button-ghost`** — Dark fill (`{colors.surface-dark}`), white text, 8px radius. Used inside dark sections and for in-app navigation elements. - **`button-outline`** — Transparent fill with inset white border. Appears on hero/gradient sections where the violet primary would clash. ### Cards - **`card`** — White surface, 8px radius, feathery multi-layer shadow. Used for feature tiles and template thumbnails. - **`card-dark`** — Dark surface fill, white text, 8px radius. Used in dark-background sections for secondary feature breakdowns. ### Inputs - **`input`** — White fill, slate-tinted inset border, 8px radius. Focus ring uses `{colors.primary}` solid outline. ### Navigation - **`nav-bar`** — Near-black background, white labels, violet primary CTA pinned right ("Sign up" / "Log in"). Uses 14px/600 nav-link typography. ### Badges & Tags - **`badge`** — Violet fill, white text, full pill. For status and count indicators. - **`tag-pill`** — Dark surface, white text, full pill. For category labels and template chips in the gallery browser. ## Do's and Don'ts ### Do - Open on the near-black canvas (`{colors.background}`) — the dark stage is the brand's first impression - Use `{colors.primary}` (electric violet) as the one and only interactive accent — CTAs, links, focus rings - Engage OpenType `ss02`/`ss03` features on display text for Canva Sans's warmest letterforms - Apply negative letter-spacing on all display and heading sizes (-0.42px to -1.5px) - Use the teal-to-purple gradient (`{colors.gradient-teal}` → `{colors.gradient-purple}`) in full-width hero and feature sections - Default to `{rounded.sm}` (8px) for buttons and cards; step up to `{rounded.md}` (16px) only for larger surfaces - Use the multi-layer blue-black shadow (`{colors.shadow-card}`, `{colors.shadow-deep}`) for card elevation — not neutral grey - Show the pastel swatch system (`{colors.swatch-peach}`, `{colors.swatch-pink}`) in template previews and product demos to signal color richness ### Don't - Don't use a white or light background as the page canvas — the dark stage is intentional, not a dark-mode variant - Don't introduce a second typeface — Canva Sans handles everything from 96px to 11px - Don't add brand colors beyond `{colors.primary}` violet — the gradient and pastel swatches exist only in product/demo contexts - Don't use default 400 weight for buttons and UI labels — the system is weight 600 below 24px - Don't apply `ss02`/`ss03` to nav and caption text — feature activation is display-only - Don't use sharp 0px corners on any interactive element - Don't flatten the shadow to a single layer — the three-layer card shadow is the elevation signature - Don't lock the hero to a static image — the gradient with the kinetic product preview is the hero pattern --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | <432px | Single column; hero headline scales to ~36px; nav collapses to hamburger | | Mobile | 432–599px | Minor reflow; CTA goes full-width below headline | | Tablet Small | 600–899px | Two-column card grid begins; nav simplifies | | Tablet | 900–1039px | Feature split sections activate; hero scales ~64px | | Desktop | 1040–1279px | Full layout; 3-4 column template grid | | Large Desktop | ≥1280px | Max ~1280px container; hero at full 96px | | Widescreen | ≥1920px | Background extends edge-to-edge; content centered at max-width | ### Touch Targets - Primary buttons use 9px vertical padding plus line-height — comfortable thumb target even at 16px font - Template thumbnail cards are large touch targets (min 120px height in grid rows) - Navigation tap targets are padded internally to exceed 44px minimum ### Collapsing Strategy - **Navigation**: full horizontal menu → hamburger toggle; Log In and Sign Up persist as icon buttons - **Hero**: headline scales from 96px → ~36px; subhead collapses; CTA stretches to full width - **Feature sections**: side-by-side split → stacked vertically; image above copy - **Template grid**: 4 columns → 3 → 2 → 1 column - **Spacing**: section vertical padding compresses from 64px toward 32px ### Image Behavior - Template thumbnails and product demo images scale proportionally within grid cells - Hero gradient is CSS-based and stretches naturally to any viewport width - Illustration and product screenshots scale with `object-fit: cover` in constrained viewports --- ## Agent Prompt Guide ### Quick Color Reference - Background: Near-Black (`{colors.background}`) - Text (on dark): White (`{colors.ink}`) - Text (on light): Near-Black (`{colors.ink-dark}`) - Brand accent / CTA: Electric Violet (`{colors.primary}`) - Gradient: Teal (`{colors.gradient-teal}`) → Purple (`{colors.gradient-purple}`) - Border: Slate (`{colors.border}`) ### Example Component Prompts - "Create a hero section on a near-black canvas (`{colors.background}`). Full-width teal-to-purple gradient banner (`{colors.gradient-teal}` → `{colors.gradient-purple}`, linear-gradient 135deg). Above the gradient: center a white headline at 96px Canva Sans weight 400, letter-spacing -1.5px, ss02/ss03 features (`{typography.display-hero}`). Below: a short white subhead at 24px/400 (`{typography.body-large}`). Below that: a violet CTA button (`{colors.primary}`, white text, `{rounded.sm}` radius, 9px 16px padding) reading 'Start designing for free'." - "Build a feature card: white surface (`{colors.surface}`), 8px radius (`{rounded.sm}`), three-layer shadow (0 0 0 0.5px `{colors.shadow-card}`, 0 2px 4px `{colors.shadow-deep}`, 0 6px 12px `{colors.shadow-card}`). Inside: a 32px/600 heading (`{typography.heading-card}`) in near-black, followed by 18px body copy (`{typography.body}`). Bottom-right: a small violet badge (`{colors.primary}`, white text, full pill radius, `{typography.caption}`)." - "Design a primary navigation bar: near-black background (`{colors.background}`), horizontal layout with Canva logo left. Center: five 14px/600 white nav links (`{typography.nav-link}`). Right: a ghost 'Sign up' button (transparent fill, inset white border, `{rounded.sm}`) and a violet 'Log in' button (`{colors.primary}`, white text, `{rounded.sm}`)." - "Create a template chip tag: dark surface (`{colors.surface-dark}`), white caption text (`{typography.caption}`), full pill radius (`{rounded.pill}`), 4px 12px padding. Use as a filter label in the template browser row." - "Render a gradient-feature section: full-bleed linear-gradient 135deg from `{colors.gradient-teal}` to `{colors.gradient-purple}`. Overlay a centered white heading at 64px Canva Sans 400 (`{typography.display}`), a 24px body lead (`{typography.body-large}`), and a white-outline ghost button below (transparent fill, 1px white inset border, `{rounded.sm}`, `{typography.button-ui}`)." ### Iteration Guide 1. Start on the near-black canvas (`{colors.background}`). If the page looks like dark-mode, it's correct — the dark stage is the brand foundation, not a variant. 2. The only interactive accent is `{colors.primary}` (violet). No teal, no gradient on buttons — gradient is background only. 3. All display text is Canva Sans at weight 400 with negative tracking. If a headline looks bold or spaced-out, reduce weight and tighten letter-spacing. 4. Activate `ss02`/`ss03` on text ≥32px. Drop features below 24px for crisp rendering. 5. Default button radius is `{rounded.sm}` (8px). Only step up to `{rounded.md}` (16px) for modal/panel containers. 6. Shadow recipe: three layers (hairline, tight, diffuse) using blue-black tint — not neutral grey. 7. Show the pastel swatch grid inside product demos to communicate color range. Never use pastels in UI chrome. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Canva. Brand names and trademarks belong to their respective owners.