--- version: alpha name: "canva.com" description: "Design system extracted from https://www.canva.com/ on 2026-10-28" colors: background: "#ffffff" foreground: "#0f1015" muted-foreground: "#333438" primary: "#8b3dff" on-primary: "#ffffff" typography: headline-display: fontFamily: "Canva Sans" fontSize: "84px" fontWeight: 400 lineHeight: "89.04px" letterSpacing: "-1.5px" headline-lg: fontFamily: "Canva Sans" fontSize: "56px" fontWeight: 400 lineHeight: "61.6px" letterSpacing: "-0.56px" headline-md: fontFamily: "Canva Sans" fontSize: "28px" fontWeight: 500 lineHeight: "35px" letterSpacing: "-0.28px" body-md: fontFamily: "Canva Sans" fontSize: "18px" fontWeight: 400 lineHeight: "25.2px" label-md: fontFamily: "Canva Sans" fontSize: "13px" fontWeight: 400 lineHeight: "1.4" button: fontFamily: "Canva Sans" fontSize: "14px" fontWeight: 600 lineHeight: "22px" rounded: none: "0px" lg: "10px" xl: "24px" full: "9999px" spacing: unit: "4px" 1: "4px" 2: "8px" 3: "12px" 4: "16px" 5: "24px" 6: "32px" 7: "48px" components: button-ghost: backgroundColor: "#ffffff" textColor: "#ffffff" typography: "{typography.button}" rounded: "12px" height: "32px" padding: "4px 8px" button-secondary: backgroundColor: "#ffffffe5" textColor: "#0f1015" typography: "{typography.button}" rounded: "10px" height: "32px" padding: "0px 12px" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "12px" height: "40px" padding: "0px 16px" --- # canva.com ## Overview Canva: Visual Suite for Everyone: Canva is a free-to-use online graphic design tool. Use it to create social media posts, presentations, posters, videos, logos and more. Gently rounded controls, layered shadows for depth, large display type at 84px / 400, a single violet accent on neutrals. The site ships in light mode by default. Measured from 2283 rendered elements at 1440px wide on 2026-10-28. Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot: - `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold - `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page - `screenshots/brand-logo.png`: primary logo lockup - `screenshots/brand-icon-1.png`: representative interface icon - `screenshots/brand-icon-2.png`: representative interface icon - `screenshots/brand-icon-3.png`: representative interface icon - `screenshots/brand-icon-4.png`: representative interface icon - `screenshots/media-icon-1-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-2-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-3-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/media-icon-4-source-hd.png`: representative interface icon / high-resolution source capture - `screenshots/region-r1-context.jpg`: r1 context: page context - `screenshots/region-r1-detail.png`: r1 detail: native-resolution local detail - `screenshots/region-r1-icons.png`: r1 icons: icon placement and nearby text - `screenshots/region-r2-context.jpg`: r2 context: page context - `screenshots/region-r2-detail.png`: r2 detail: native-resolution local detail - `screenshots/region-r2-icons.png`: r2 icons: icon placement and nearby text - `screenshots/region-r3-context.jpg`: r3 context: page context - `screenshots/region-r3-detail.png`: r3 detail: native-resolution local detail - `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold - `screenshots/tablet-768-fold.png`: Tablet 768, above the fold - `screenshots/phone-390-fold.png`: Phone 390, above the fold - `screenshots/phone-390-full.jpg`: Phone 390, full page - `screenshots/phone-390-menu.png`: Phone 390, navigation menu open - `screenshots/media-logo-upscaled.png`: primary logo lockup / upscaled.png - `screenshots/media-logo-optimized.webp`: primary logo lockup / optimized.webp - `screenshots/media-icon-1-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-1-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-1-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-2-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-2-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-3-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-3-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-3-optimized.webp`: representative interface icon / optimized.webp - `screenshots/media-icon-4-upscaled.png`: representative interface icon / upscaled.png - `screenshots/media-icon-4-transparent.png`: representative interface icon / transparent.png - `screenshots/media-icon-4-optimized.webp`: representative interface icon / optimized.webp - `screenshots/c-button-1--rest.png`: Button 1 ("Latest launches"), rest - `screenshots/c-button-1--hover.png`: Button 1 ("Latest launches"), hover - `screenshots/c-button-1--focus.png`: Button 1 ("Latest launches"), focus - `screenshots/c-button-1--active.png`: Button 1 ("Latest launches"), active - `screenshots/c-icon-button-1--rest.png`: Icon button 1, rest - `screenshots/c-icon-button-1--focus.png`: Icon button 1, focus - `screenshots/c-nav-link-1--rest.png`: Navigation link 1 ("Canva home"), rest - `screenshots/c-nav-link-1--focus.png`: Navigation link 1 ("Canva home"), focus - `screenshots/c-menu-button-1--rest.png`: Menu / dropdown trigger 1 ("Design"), rest - `screenshots/c-menu-button-1--hover.png`: Menu / dropdown trigger 1 ("Design"), hover - `screenshots/c-menu-button-1--selected.png`: Menu / dropdown trigger 1 ("Design"), clicked - `screenshots/c-tabs-1--rest.png`: Tabs 1 ("AIPresentationsSocialVid"), rest - `screenshots/c-tabs-1--selected.png`: Tabs 1 ("AIPresentationsSocialVid"), another tab selected - `screenshots/c-card-1--rest.png`: Card 1 ("AIPresentationsSocialVid"), rest - `screenshots/c-button-2--rest.png`: Button 2 ("Explore Magic Layers(ope"), rest - `screenshots/c-button-2--hover.png`: Button 2 ("Explore Magic Layers(ope"), hover - `screenshots/c-button-2--focus.png`: Button 2 ("Explore Magic Layers(ope"), focus - `screenshots/c-button-2--active.png`: Button 2 ("Explore Magic Layers(ope"), active - `screenshots/c-icon-button-2--rest.png`: Icon button 2, rest - `screenshots/c-icon-button-2--hover.png`: Icon button 2, hover - `screenshots/c-icon-button-2--focus.png`: Icon button 2, focus - `screenshots/c-icon-button-2--active.png`: Icon button 2, active - `screenshots/c-button-3--rest.png`: Button 3 ("English (US)"), rest - `screenshots/c-button-3--hover.png`: Button 3 ("English (US)"), hover - `screenshots/c-button-3--focus.png`: Button 3 ("English (US)"), focus - `screenshots/c-button-3--active.png`: Button 3 ("English (US)"), active - `screenshots/c-button-3--selected.png`: Button 3 ("English (US)"), clicked - `screenshots/c-button-4--rest.png`: Button 4, rest - `screenshots/c-button-4--focus.png`: Button 4, focus - `screenshots/c-icon-button-4--rest.png`: Icon button 4, rest - `screenshots/c-icon-button-4--focus.png`: Icon button 4, focus - `screenshots/c-icon-button-4--selected.png`: Icon button 4, clicked - `screenshots/c-button-5--rest.png`: Button 5 ("Browse all templates(ope"), rest - `screenshots/c-button-5--hover.png`: Button 5 ("Browse all templates(ope"), hover ## Logo and icon references Read `BRAND.md` for measured logo proportions, SVG treatments, representative icon crops and favicon declarations. Begin with `START_HERE.md` for a compact handoff; raw evidence is optional. ## Colors | Token | Value | Use | | --- | --- | --- | | background | `#ffffff` | Page background | | foreground | `#0f1015` | Primary text | | muted-foreground | `#333438` | Secondary text, captions | | primary | `#8b3dff` | Candidate accent (semantic role inferred): Selected from measured button, link, text, painted-area and theme colors. It is not proof of a filled primary button; follow the observed component recipes. | | on-primary | `#ffffff` | Text on the accent | Full painted palette by area (largest first): `#0f1015`, `#ffffff`, `#8b3dff`, `#585a5e`. Gradients in use: `linear-gradient(rgba(0, 0, 0, 0), rgb(246, 247, 248))`; `linear-gradient(rgb(153, 43, 255) 0%, rgb(90, 50, 250) 222px, rgb(19, 163, 181) 375px, rgb(147, 232, 246) 60%, rgb(255, 255, 255) 100%)`; `linear-gradient(90deg, rgb(0, 196, 204), rgb(90, 50, 250), rgb(125, 42, 232))`. The accent `#8b3dff` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral. ## Typography - **Canva Sans** for h1, h2, h3, body, button: self-hosted webfont; verify availability and permission; **Inter** is the suggested stand-in. See FONTS.md and fonts.css for source face/weight mappings, loading recipes, actual rendered-font evidence and explicit substitutions. Do not infer a Google Fonts family name from a site-specific alias. | Role | Family | Size | Weight | Line height | Tracking | | --- | --- | --- | --- | --- | --- | | headline-display | Canva Sans | 84px | 400 | 89.04px | -1.5px | | headline-lg | Canva Sans | 56px | 400 | 61.6px | -0.56px | | headline-md | Canva Sans | 28px | 500 | 35px | -0.28px | | body-md | Canva Sans | 18px | 400 | 25.2px | normal | | label-md | Canva Sans | 13px | 400 | 1.4 | normal | | button | Canva Sans | 14px | 600 | 22px | normal | - label-md: fallback (source label); inferred fields: fontSize, fontFamily, fontWeight, lineHeight. Type scale in use: 10px, 13px, 14px, 16px, 24px, 28px, 32px, 64px. Base body size 18px. The hero heading (h1) renders at 84px / 400, center aligned, up to 1376px wide, tracking -1.5px. Sample: "What will you design today?". See REGIONS.md, regions.css and the region crops for nested surfaces, gradients, shadows and icon placement. These are local recipes; do not flatten them into site-wide averages. ## Layout - Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 24, 32, 48 (px). - Flex and grid gaps: 4, 8, 12, 16, 24, 32 px. - Content max width: 1288px, centred. - Breakpoints: 600px, 900px, 1200px, 1416px, 1650px. - Header: 80px tall, sticky, background `rgba(0, 0, 0, 0)`; 3 nav links at 10px / 400 (Canva home · Sign up · Log in). ## Elevation & Depth Shadows in use, most common first: - shadow-1: `rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px` - shadow-2: `rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px` - shadow-3: `rgba(53, 65, 90, 0.2) 0px 0px 0px 1px inset` - shadow-4: `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset` ## Shapes - Buttons: 10px - Inputs: 10px - Cards and panels: 0px - Images and media: 0px - Radius scale: none 0px, lg 10px, xl 24px, full 9999px ## Components ### Button, ghost Background transparent (it sits on `#ffffff`, so place it on that colour), text `#ffffff`, border none, radius 12px, height 32px, padding 4px 8px, 13.3333px / 400. Sample label: "Design". ### Button, secondary Background `#ffffffe5`, text `#0f1015`, border none, radius 10px, height 32px, padding 0px 12px, 14px / 600, shadow `rgba(255, 255, 255, 0.08) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(0, 0, 0, 0.25) 0px -1px 0.5px 0px inset, rgba(0, 0, 0, 0.14) 0px 1px 2px 0px, rgba(0, 0, 0, 0.07) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`. Sample label: "Log in". ### Button, primary Background `#8b3dff`, text `#ffffff`, border none, radius 12px, height 40px, padding 0px 16px, 14px / 600, shadow `rgba(255, 255, 255, 0.16) 0px 24px 24px -18px inset, rgba(255, 255, 255, 0.25) 0px 1px 0.5px 0px inset, rgba(21, 30, 130, 0.12) 0px -1px 0.5px 0px inset, rgba(21, 30, 130, 0.07) 0px 1px 2px 0px, rgba(21, 30, 130, 0.03) 0px 3px 4px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`. Sample label: "Start designing for free". ### Link Colour `#8b3dff`, underline, weight 400. ### Full inventory `COMPONENTS.md` carries every component kind found on the page (14 of 87 in the checklist, 26 variants) with each state that was measured live (hover, keyboard focus, pressed, disabled, checked, filled, invalid, open: 22 state changes, 0 overlays opened) and a cropped screenshot of each; `components.css` is the same as a stylesheet. Read it before building any control. Summary: | Component | Variants | States measured | Sample | | --- | --- | --- | --- | | Button | ghost, secondary, ghost-with-icon sm, ghost lg, ghost, ghost lg, ghost sm, secondary sm | hover, focus, active, open | "Latest launches" | | Icon button | secondary, filled, secondary, secondary | focus, hover, active, open | | | Header / navbar | default | rest only | "DesignDigital designDigital de" | | Navigation link | plain | focus | "Canva home" | | Menu / dropdown trigger | ghost | hover, open | "Design" | | Tabs | plain | selected | "AIPresentationsSocialVideoPrin" | | Footer | default | rest only | "Download Canva for freeWindows" | | Skip link | default | rest only | "Skip to main content" | | Badge / pill / tag | neutral-pill | rest only | "1 of 2" | | Card | elevated | rest only | "AIPresentationsSocialVideoPrin" | | Image / figure | aspect-2.4, aspect-1.17, aspect-1.78 | rest only | | | Video / media embed | default | rest only | | Not on this page (do not invent them; if the build needs one, derive it from the nearest kind above): Toggle / segmented control, Button group, Text link, Floating action button, Close / dismiss button, Text input, Search field, Textarea, Select (native), Combobox / custom select, Checkbox, Radio, Switch / toggle, Range slider, File input / dropzone, Date / time input, Input with attached button or addon, Field label, Help / hint text, Validation error text, Fieldset / form section, Breadcrumb, Pagination, Stepper / progress steps, Sidebar navigation, Footer link, Back to top, Social icon links, Theme toggle, Language / region switch, Tooltip, Popover, Dropdown menu, Dialog / modal, Drawer / sheet / off-canvas, Toast / snackbar, Banner / announcement bar, Cookie / consent notice, Lightbox / media viewer, Chip (removable / selectable tag), Alert / callout, Progress bar, Spinner / loader, Skeleton / shimmer, Counter / notification dot, Empty state, Rating / stars, Pricing card / plan, Feature item (icon + title + text), Testimonial / quote card, Stat / metric, Styled list, List row / menu row, Table, Table row, Accordion / disclosure, Avatar, Avatar stack, Divider, Code block / inline code, Keyboard key, Blockquote, Carousel / slider, Logo strip, Icon, Eyebrow / kicker, FAQ block, Call-to-action band, Newsletter / signup form, Search results / listing row, Section band, Grid of items, Sticky bar. ## Dark Mode No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute. ## Responsive Behavior | Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons | | --- | --- | --- | --- | --- | --- | --- | --- | --- | | desktop 1440px | 1288px | 32px | 10px | 24px, 3 lines, center | 80px, 2 links, 1 CTA | text only | 5→5 col; 2→2 col; 2→1 col | content-width | | laptop 1024px | 928px | 48px | 10px | 24px, 2 lines, center | 80px, 2 links, 8 CTA | text only | 2→2 col; 2→1 col; 2→1 col | 1 full-width | | tablet 768px | 672px | 48px | 10px | 24px, 5 lines, center | 80px, hamburger (Open navigation menu), 2 CTA | text only | 2→1 col; 2→2 col; 2→1 col | 3 full-width | | phone 390px | 342px | 24px | 10px | 21px, 3 lines, center | 80px, hamburger (Open navigation menu), 2 CTA | text only | 5→5 col; 2→1 col; 2→1 col | 5 full-width | - H1 goes 24px → 21px (88%), 3 → 3 lines. - Nav collapses to a hamburger by 390px (first seen at 768px); header 80px → 80px. - Card grids: 5 columns → 5 columns on phones (gap normal 8px → normal 0px). - Body text is 10px at the sampled desktop and phone widths. - Phone side gutter 24px. - 5 buttons stretch full-width on phones. - Section top padding 256px → 64px. ## Interaction & Motion 274 elements carry transitions; typical 0.1s with linear, mostly on background-color, color, border-color. 1 running keyframe animations (x8ht0xs-B 1.4s infinite). - Hover on button-primary ("Log in"): background #ffffffe5 → #ffffff; cursor pointer; transition background-color, box-shadow, color, transform | 0.1s, 0.1s, 0.1s, 0.07s | linear, linear, linear, ease. - Hover on button-secondary ("Start designing"): background #ffffffe5 → #ffffff; cursor pointer; transition background-color, box-shadow, color, transform | 0.1s, 0.1s, 0.1s, 0.07s | linear, linear, linear, ease. - Hover on nav-link ("Canva home"): no visible change; cursor pointer. - Focus on button-primary: outline 1px auto rgb(238, 238, 238), offset 1px. - No tooltips: nothing on the page carries tooltip attributes or roles and no tooltip styles exist. Do not add tooltips when rebuilding. - 6 aria-haspopup triggers exist; none opened on hover (click-to-open menus). - No scroll-reveal: content is visible without scrolling into view. Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`. ## Do's and Don'ts - Treat the 4px spacing base as an inference. Preserve measured regional and component padding and gaps, including values outside that scale. - Use `#8b3dff` where supported by measured component or regional evidence; its accent role is inferred. - Do keep body text at 18px in Canva Sans. - Do match corner radii per element class (buttons 10px, cards 0px); do not pick one radius for everything. - Keep measured shadows on their owning layers. Regional and component recipes take precedence over the site-wide list; do not invent heavier shadows. - Preserve gradient stops and layer order from regional/component recipes or the global samples above. A missing CSS gradient does not prove an image-backed effect is absent; inspect its pixels. - Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment. - Note: Page background comes from page-wrapper; large surface colors remain in the palette.