Canva — design system & UI screens
Vivid purple-to-teal gradient hero introducing Canva AI 2.0 with an oversized question headline.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/canva.
Decoded design system
Canva's decoded design system: background #FFFFFF, text #000000, accent #8B3DFF, link #8B3DFF, primary #9E9EFF; type scale h1 24px / h2 15px / body 14px; 4px spacing base; 12px base radius. The single interactive/action color is #8B3DFF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #9E9EFF |
| accent | #8B3DFF |
| link | #8B3DFF |
| secondary | #CCE1FF |
| button_bg | #8B3DFF |
| button_text | #FFFFFF |
Using these colors
- Action color
#8B3DFF— the single interactive color; only on things you click or must notice, never large fills. accent,link,button_bgare all#8B3DFF— one role, not several (the action color).- accent
#8B3DFF— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - primary
#9E9EFF— a brand color — but the call-to-action uses #8B3DFF, not this. - secondary
#CCE1FF— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Canva Sans
- Body: Canva Sans
- h1: 24px
- h2: 15px
- body: 14px
Spacing
- base unit: 4px
- scale: 4px, 6px, 7px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
Radii
- base: 12px
- button: 12px
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
Shadows (elevation)
- subtle:
rgba(64, 79, 109, 0.07) 0px 0px 0px 0.5px, rgba(21, 30, 130, 0.12) 0px 2px 5px 0px, rgba(21, 30, 130, 0.06) 0px 6px 12px 0px
Motion
Micro-interactions run at 100ms (dominant) with linear.
- durations: 100ms · 150ms · 70ms
- easings:
linear·ease - animated properties: background-color, color, transform, border-color
Native design tokens
| Token | Value |
|---|---|
--HfWZ1A | #3e2a14 |
--Mm01yw | #612dae |
--a7O9QQ | #13162099 |
--XxI4hg | #0f1015d9 |
--x1gpxm7a | #101219b2 |
--x12g387 | #c3eac4 |
--gFgXSg | #404f6d0f |
--pDEiUA | #1c213080 |
--xstli9h | #fff |
--xqjd72j | #fff |
…and 99 more measured on the page.
Button states (measured)
- primary hover: background
#FFFFFF - primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1288px - nav: 80px sticky
Motion choreography (measured)
Load order: div.x1ghz6dp×4 → div.x1ghz6dp → div.x1ghz6dp×4 → div.x1ghz6dp → div.MxWveQ×63 → div.m75YQA×18
Scroll reveal: 40 elements rest at opacity 0, animate in over 200ms.
Stagger: div ×46 — 150ms apart.
Responsive (measured)
- breakpoints: 600px · 899px · 1200px · 1416px · 1649px
- mobile (390px): hero 21px · nav hamburger
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →