Canva
canva.comThe 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)