Whimsical

Item: Whimsical
Rating: 7.9

Whiteboard for diagrams, wireframes and docs for product teams.

whimsical.com Save page

7.9/10MABTU rating

DESKTOP · 1440 × 7,667/ ↗

MOBILE · 390

Section outline · Home

01heroGradient landscape panel, board screenshot, logos along bottom1,353
02statementLarge gradient-text headline608
03featuresStaggered rounded product crops with short copy1,520
04gridSix feature tiles on colour glows1,663
05templatesCard grid of board types1,154
06cta footerGradient panel containing footer links1,328

Rating · Home

Visual design8.2

UX & clarity7.8

Originality7.8

Craft & consistency8.0

Motion6.5

Performance & a11y7.7

This page scores 7.8; the site score weights the home page double.

Main colours

Light·white background·vivid

Typography

Agrandir-0cfc125464d8d15eheading · font · self-hosted Manrope-79d1da00e5f47c83body · sans · self-hosted

Stack & style

Astro

Minimal Gradient-heavy Rounded / soft Product-UI-led Bento grid Logo cloud Marquee Process steps Sticky header Transparent header

Also: Cloudflare, Plausible

Design DNA

White page with a heavy rounded geometric sans. The hero is a large rounded panel with a purple-to-coral sunset gradient and blurred hill shapes behind a centred headline and board screenshot, with logos at its bottom edge. A big violet-to-magenta gradient headline introduces staggered product cards whose rounded tops echo the gradient hills. A six-tile 'essentials' grid uses screenshots floating on blurred colour glows, then template cards and a closing gradient panel that contains the footer.

Worth borrowing

Wrap the footer inside the closing gradient panel so the page ends on the same art as the hero.
Crop product screenshots into rounded frames with a sliver of the brand gradient peeking at the edge.
Place small feature screenshots on blurred colour glows instead of card backgrounds.