What is Whimsical's primary brand color?

Whimsical's brand voltage is a deep plum at #250835 — wired in CSS as --purple-800 and --base-800, and used as the primary CTA fill, the body-shadow ink under every cream card, and the lower-stop on every brand gradient. It appears 19 times across the captured page: 10 as shadow ink, 8 inside gradients, and 1 as a flat background fill. The hero gradient itself runs from this plum at the bottom-left through a mid-violet around 50% to a lavender pink (#ba59ff) at the top-right. The purple is held against off-white surfaces below the fold and against rainbow product nodes inside the laptop mockup.

What typeface does Whimsical use, and what should I use as a substitute?

Whimsical pairs Agrandir for display and Manrope for chrome. Agrandir runs at 24px / 48px / 64px / 72px / 96px in weight 700 with tight negative letter-spacing (-0.24px on h3, -0.64px on h1, -0.96px on the 96px hero); it carries the hero headline and every section header. Manrope runs at 9px / 12px / 13px / 14px / 16px in weights 500–700; it carries the nav links, the CTA pill labels, body paragraphs, and an uppercase kicker tier (9px / 700 / 1.35px tracking). For Agrandir, the closest open-source substitute is Avenir or Inter at the same sizes; for Manrope, Manrope is itself open-source and can be used directly.

Why does Whimsical use a gradient hero instead of a flat surface?

Whimsical's hero is a violet-to-magenta gradient field that runs the deep plum #250835 at the corners through a mid-violet around 50% to a lavender pink #ba59ff toward the top-right, with a 15-percent grain texture riding on top (wired as --gradient-primary-vertical in the CSS). A flat purple would conflict with the editor mockup's rainbow sticky-note nodes — the gradient absorbs them into a single chromatic mood. Below the fold the gradient gives way to a warm off-white canvas and the rainbow product palette returns inside lavender / mint / aqua illustrated cards. The hero is the only gradient surface; everything below is flat.

What is Whimsical's corner-radius philosophy?

The radius scale is binary: utility tier and illustrative tier. The utility tier runs 8px (9 occurrences, used on dropdowns and small chips), 12px (13 occurrences, the dominant rounding — used on the CTA pill, the nav-link hover pills, and most cards), and 16px (7 occurrences, used on the larger illustrated cards). The illustrative tier jumps straight to 80px / 120px / 160px — used on the rainbow-colored super-rounded feature cards below the fold (the lavender flow-chart card, the mint wireframes card, the aqua diagrams card). There is no 24 / 32 / 48px middle tier. The jump is intentional: the small radii read as utility chrome; the giant radii read as illustrative shapes that belong with the laptop mockup.

Whimsical Design System

Whimsical's marketing site uses a violet-to-magenta gradient as the entire above-fold canvas, with 96px Agrandir display in white.

About Whimsical DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source whimsical.com

Productivity & SaaS
Design & Creative Tools

Whimsical's marketing site does something most diagramming brands avoid: it gives the hero a saturated gradient instead of a flat surface. The above-fold is a violet-to-magenta gradient field (deep plum at the corners, lavender toward the center, with a grain texture overlay riding on top), carrying a 96px Agrandir display headline in white ("Where great ideas take shape"), a dark plum CTA pill, and a tilted laptop mockup showing the Whimsical editor surface with rainbow-colored sticky-note nodes — mint, aqua, blue, purple, hot-pink, yellow — laid out across a flow diagram. Where Figma and Miro keep their hero canvases on white or near-white, and Notion sits on a warm cream surface, Whimsical paints the entire above-fold with the brand's purple territory and lets the editor mockup carry the chromatic variety.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 9 color tokens organized around a deep plum base (#250835), a near-white off-canvas (#ffffff at 96.8% lightness), a soft lilac surface tier (#efe3ed), and a brand purple ladder spanning lavender to magenta. 14 typography tokens cover Agrandir display in five sizes (24px / 48px / 64px / 72px / 96px at weight 700 with tight negative letter-spacing) and Manrope in seven sizes (9px / 12px / 13px / 14px / 16px in weights 500–700, plus an uppercase kicker tier at 9px with 1.35px tracking). A radius scale split into utility tier (8–16px) and illustrative tier (80–160px). 16 components covering the gradient hero, the dark plum CTA pill, the lavender illustrated card, the laptop mockup frame, the section-header kicker, and the top-nav.

Feed this file to Claude or Cursor and it reproduces Whimsical's specific moves: violet-to-magenta gradient hero instead of a flat surface, deep plum as the load-bearing CTA fill, Agrandir display at weight 700 with tight negative tracking, Manrope chrome at 13–16px with the uppercase 9px kicker tier, and the binary radius split between 12px utility rounding and 80–160px illustrative rounding. The one move worth borrowing only if your product surface is itself visually rich: the willingness to let the editor mockup do all the chromatic variety while the marketing chrome stays inside the purple gradient.

What makes it distinct

Violet-to-magenta gradient herothe above-fold is a purple gradient field rather than a flat surface, with a grain texture overlay riding on top
Two-face display + bodyAgrandir at 48–96px for every display moment, Manrope at 13–16px in weights 500–700 for every chrome label
Deep plum base #250835the darkest tone in the system, used as the primary CTA fill and as the shadow ink across every cream-card lift
Super-rounded illustrative cardsradii jump from 12px utility rounding to 80–160px on the rainbow-colored feature cards below the fold
Rainbow product palettesticky-note nodes in mint, aqua, blue, purple, hot-pink, and yellow render the editor canvas inside the laptop mockup

Live at whimsical.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

whimsical.com

Explore Whimsical

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.