Design teardown
Canva
A white marketing page with a purple-to-teal hero, huge regular-weight sans headlines, and large rounded product cards. Controls stay small, pill-shaped, and lightly shadowed.
canva.com
Design character
Soft spectacle
The first screen is a full-bleed color wash with a centered headline, one quiet sentence, and a looping product frame. Below that, the page settles onto white with oversized section titles, paired gradient cards, and a near edge-to-edge poster strip. Type is friendly and short; color does the shouting.
Typography
Interface and display type are the same geometric sans, Canva Sans, with Arabic and Noto fallbacks. Display sizes use weight 400 and a slight negative track; buttons and nav jump to 500 and 600. The script mark in the header and closing band is an image, not this face.
Color system
The page ground is white and the text is near-black. Brand color shows up as purple fills and as long gradients that run from violet through indigo into teal or cyan. Feature cards each take their own wash: magenta, blue, orange, red, or violet.
Spacing and geometry
Spacing follows an 8px rhythm with generous vertical gaps between sections. Controls are compact; cards and the hero frame carry the large radii. Edges are usually a 1px inset hairline rather than a solid border.
Layout
A sticky header sits over a centered hero, then stacked full-width sections. Headlines are centered. Cards appear in pairs or a horizontal row. The poster strip runs almost edge to edge.
Motion
The hero product frame is a muted video that autoplays and loops. Buttons ease color, shadow, and a slight transform in about a tenth of a second. A horizontal poster row pages with a circular control, and the category pills swap the card row.
UI fingerprint
- Wash then white The opening screen is a violet-to-cyan gradient that fades to white. The rest of the page stays white and lets each card carry its own color.
- Regular display The largest headlines are weight 400 with a small negative track, so the page feels light even at 64px and 96px.
- Pill controls Actions, category chips, and the carousel arrow are fully rounded, with a soft inset highlight rather than a heavy shadow.
- Product in the frame A rounded looping video shows the editor in use, then the story continues as large cards and a poster strip.