№ canva-com

Canva

Electric lavender gradients flow over clean, rounded sans-serifs, fostering limitless creative energy.

Ecosystem Indexplayful minimalism saaslight

The page uses a soft, gradient color palette and rounded icons to create a friendly, approachable feel. The layout is modular, presenting a variety of design tools in an engaging way. It feels like a curated collection of possibilities. · design platform, graphic design, online editor, creative tools, ai design, visual communication, easy design, canva features

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: pastel · saturated · muted

SwatchHexOKLCHSuggested roleCopy

Hex#7b2cfc
OKLCHoklch(54.1% 0.273 291)
RoleDominant
find sites →
Hex#14a0b7
OKLCHoklch(65.0% 0.111 213)
RoleSurface
find sites →
Hex#97e5f3
OKLCHoklch(87.6% 0.079 210)
RoleInk
find sites →
Hex#5e6f8d
OKLCHoklch(53.9% 0.052 262)
RoleAccent
find sites →
Hex#d1d7ce
OKLCHoklch(87.2% 0.014 135)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Sample
h1	Canva Sans	24px	600	1.33	Aa Bb Cc
h2	Times	15px	700	1.4	Aa Bb Cc
h3	Times	12px	700	1.4	Aa Bb Cc
body	Times	10px	400	1.4	Aa Bb Cc
button	Canva Sans	14px	600	1.57	Aa Bb Cc

Spacing scale

48px

Radius scale

0px

10px

12px

20px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #7b2cfc;
  --color-surface: #14a0b7;
  --color-ink: #97e5f3;
  --color-accent: #5e6f8d;
  --color-detail: #d1d7ce;
}

/* CSS variables exposed by source */
:root {
  --xz780lh: #242c3d66;
  --HfWZ1A: #3e2a14;
  --4sJsqA: #39466024;
  --Mm01yw: #612dae;
  --x15t4y1o: #fff;
  --a7O9QQ: #13162099;
  --xnxrlhk: #3d8bff;
  --xdtx5m7: 400;
  --al4BcQ: 0 0 0 1px #404f6d0f, 0 0 8px 0 #39466024;
  --xjs6pkv: #0f101500;
  --XxI4hg: #0f1015d9;
  --x1be2sc2: 0px 24px 24px -18px inset #ffffff29, 0px 1px .5px 0px inset #ffffff40, 0px -1px .5px 0px inset #151e821f, 0px 1px 2px 0px #151e8212, 0px 3px 4px 0px #151e8208;
  --x1xhhelp: 400;
  --pDEiUA: #1c213080;
  --gFgXSg: #404f6d0f;
  --U8pJuw: linear-gradient(135deg, #00c4cc, #7d2ae8);
  --9luNoA: #fff;
  --x7gypcq: 0em;
  --safe-area-inset-bottom: 0px;
  --jz0LSw: #008009;
  --qKnIjA: 1.1;
  --q5aPlw: calc(.1rem*64);
  --4zRigw: #ffffffb2;
  --x1vto1m6: 1.25;
  --x1rx4e74: calc(64 * .1rem);
  --KwfPsg: #0f101500;
  --xcCO9w: #1c213080;
  --x1p5og4y: #b61629;
  --1sn2Sg: #a370fc26;
  --JF44pw: 0px 0px 0px .5px #404f6d0f,0px 8px 16px 0px #151e821f,0px 24px 24px 0px #151e820f;
  --x1oqqnha: #4a2e7e;
  --x2qrp50: 400;
  --xsee12u: 1.1;
  --O8dBuQ: #0f1015;
  --xgfqmhp: 0px 0px 0px .5px #404f6d12, 0px 2px 5px 0px #151e821f, 0px 6px 12px 0px #151e820f;
  --W1_3nw: #404f6d0f;
  --x1t1u828: #db142c;
  --xqnz2do: #0f1015d9;
  --xe3pc16: 1.1;
  --xhf5vib: linear-gradient(90deg, #00c4cc 0%, #7d2ae8 100%);
  --M05zEQ: 0 0 0 1px #404f6d0f, 0 0 8px 0 #39466024;
  --4DkvNQ: #3d8bff;
  --xe2ivut: #1c213080;
  --xm1503g: 600;
  --gJAqkA: #ffffff80;
  --x1cqhvjm: #db142c;
  --xo18w50: #133416;
  --xmy1rsr: #1c213080;
  --xsdo7ii: #fff;
  --x19dd7i0: #ffd9ad;
  --x1bw7z3e: #911826;
  --jDAtXQ: #1c213080;
  --igdHlg: #35415a33;
  --0ypBAQ: #35415a33;
  --x1lk3xck: #fff;
  --A3YTsg: calc(.1rem*32);
  --XZIM8Q: #352459;
  --VsFRFg: #40576d0a;
  --32-5Rg: calc(.1rem*84);
  --x4uufk8: #fff;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Canva.
Reference design system (extracted from the live site):
- Palette: #7b2cfc, #14a0b7, #97e5f3, #5e6f8d, #d1d7ce
- Typefaces: Canva Sans, Times
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/canva-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Canva Sans

24px

600

1.33

Aa Bb Cc

Times

15px

700

1.4

Aa Bb Cc

Times

12px

700

1.4

Aa Bb Cc

body

Times

10px

400

1.4

Aa Bb Cc

button

Canva Sans

14px

600

1.57

Aa Bb Cc

:root { --color-dominant: #7b2cfc; --color-surface: #14a0b7; --color-ink: #97e5f3; --color-accent: #5e6f8d; --color-detail: #d1d7ce; } /* CSS variables exposed by source */ :root { --xz780lh: #242c3d66; --HfWZ1A: #3e2a14; --4sJsqA: #39466024; --Mm01yw: #612dae; --x15t4y1o: #fff; --a7O9QQ: #13162099; --xnxrlhk: #3d8bff; --xdtx5m7: 400; --al4BcQ: 0 0 0 1px #404f6d0f, 0 0 8px 0 #39466024; --xjs6pkv: #0f101500; --XxI4hg: #0f1015d9; --x1be2sc2: 0px 24px 24px -18px inset #ffffff29, 0px 1px .5px 0px inset #ffffff40, 0px -1px .5px 0px inset #151e821f, 0px 1px 2px 0px #151e8212, 0px 3px 4px 0px #151e8208; --x1xhhelp: 400; --pDEiUA: #1c213080; --gFgXSg: #404f6d0f; --U8pJuw: linear-gradient(135deg, #00c4cc, #7d2ae8); --9luNoA: #fff; --x7gypcq: 0em; --safe-area-inset-bottom: 0px; --jz0LSw: #008009; --qKnIjA: 1.1; --q5aPlw: calc(.1rem*64); --4zRigw: #ffffffb2; --x1vto1m6: 1.25; --x1rx4e74: calc(64 * .1rem); --KwfPsg: #0f101500; --xcCO9w: #1c213080; --x1p5og4y: #b61629; --1sn2Sg: #a370fc26; --JF44pw: 0px 0px 0px .5px #404f6d0f,0px 8px 16px 0px #151e821f,0px 24px 24px 0px #151e820f; --x1oqqnha: #4a2e7e; --x2qrp50: 400; --xsee12u: 1.1; --O8dBuQ: #0f1015; --xgfqmhp: 0px 0px 0px .5px #404f6d12, 0px 2px 5px 0px #151e821f, 0px 6px 12px 0px #151e820f; --W1_3nw: #404f6d0f; --x1t1u828: #db142c; --xqnz2do: #0f1015d9; --xe3pc16: 1.1; --xhf5vib: linear-gradient(90deg, #00c4cc 0%, #7d2ae8 100%); --M05zEQ: 0 0 0 1px #404f6d0f, 0 0 8px 0 #39466024; --4DkvNQ: #3d8bff; --xe2ivut: #1c213080; --xm1503g: 600; --gJAqkA: #ffffff80; --x1cqhvjm: #db142c; --xo18w50: #133416; --xmy1rsr: #1c213080; --xsdo7ii: #fff; --x19dd7i0: #ffd9ad; --x1bw7z3e: #911826; --jDAtXQ: #1c213080; --igdHlg: #35415a33; --0ypBAQ: #35415a33; --x1lk3xck: #fff; --A3YTsg: calc(.1rem*32); --XZIM8Q: #352459; --VsFRFg: #40576d0a; --32-5Rg: calc(.1rem*84); --x4uufk8: #fff; }

Build a landing page in the visual style of Canva. Reference design system (extracted from the live site): - Palette: #7b2cfc, #14a0b7, #97e5f3, #5e6f8d, #d1d7ce - Typefaces: Canva Sans, Times - Macrostructure: Ecosystem Index Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/canva-com