Canva

canva.com

The reference for full-bleed candy gradient skies (teal #00c4cc into violet #7d2ae8) carrying a white humanist hero, where colour is the product showcase rather than decoration.

SaaS Product flagship

Design tokens

background
surface
text
textMuted
accent
border
tone1
tone2
display
Canva Sans
body
Canva Sans
mono

Do / Don't

Reference it for

  • Full-viewport diagonal gradient as the hero canvas: linear-gradient(135deg, #00c4cc, #7d2ae8) fading down to near-white, letting the gradient do the storytelling instead of a photo
  • Oversized friendly question headline at ~80px white Canva Sans humanist sans, whisper-tight tracking, sitting confidently against the chromatic sky
  • Pale frosted pill buttons (Sign up / Log in) in the nav, plus a single near-white primary CTA (Start designing for free) with inset shadow rgba(53,65,90,0.2) 0 0 0 1px inset
  • Centred nav with the script wordmark hard left, six plain text links centred, two pill auth buttons hard right
  • Mood-pair gradient roster reused as section backgrounds: coralSunset (#ff3d4d into #ff6105), emeraldMeadow (#007d26 into #00b100), violet-to-white ultraviolet horizon
  • 8px rounded flat surfaces with barely-there blue-tinted elevation: rgba(64,79,109,0.06) 0 0 0 0.5px, rgba(24,44,89,0.137) 0 2px 4px
  • Product tile floated into the hero on the gradient (the laptop/canvas frame) at 16px radius, bridging hero and showcase
  • Generous vertical rhythm from the spacing scale (44/48/76px gaps) keeping the saturated palette from feeling cramped

Do not copy

  • The Canva hand-cut italic script wordmark, the only curved letterform in the system
  • Canva Sans, the proprietary humanist sans that is not licensable
  • The exact brand violet #8b3dff / deep amethyst #9729ff as your own brand colour
  • The 'Introducing Canva ai 2.0' product artwork inside the floated frame
  • The literal 'What will you design today?' question-headline phrasing
  • The specific six-item product nav taxonomy (Design / Product / Plans / Business / Education / Help)