---
title: "Whimsical design system"
variant: extended
source: https://whimsical.com/
captured_at: 2026-10-12
theme: light
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/whimsical-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Whimsical · Design System

> A calm canvas for ambitious ideas

**Theme:** light · **Industry:** productivity · **Source:** https://whimsical.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Whimsical pairs a quiet, pale canvas with expressive lavender gradients and deep-plum typography. Product screenshots anchor a spacious SaaS homepage that makes collaboration tools feel approachable and tangible.

## North star

Use calm neutral space to frame vivid, rounded product imagery, with deep-plum type and one clear action per section.

## Overview

The page builds its identity around a light neutral canvas, deep plum text, and large atmospheric gradient imagery. White navigation and content cards keep the experience crisp, while lavender, rose, and blue tones create a distinctive backdrop for product previews. The hero pairs oversized centered white display type with a short supporting line and a dark, pill-like primary CTA; a large board screenshot overlaps the lower part of the scenic panel. Subsequent sections alternate between bold, sometimes gradient-filled headings, offset feature-and-screenshot layouts, and compact product cards. Agrandir gives headings a rounded, confident presence; Manrope handles navigation, body copy, links, and buttons with clear compact utility. Rounded corners recur in the hero, cards, and controls, while soft shadows are reserved for elevated interaction surfaces. The overall rhythm is airy at section level but dense inside product imagery, keeping the real interface—not decorative ornament—at the center.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#f7f7f8` | `--color-cloud-canvas` | neutral | Primary page canvas and footer ground; keeps the long homepage light and unobtrusive. |
| Deep Plum | `#250835` | `--color-deep-plum` | brand | Main headings, navigation, body emphasis, and dark primary CTA backgrounds. |
| Muted Mauve | `#6a5b72` | `--color-muted-mauve` | semantic | Secondary text, especially quieter footer and explanatory copy. |
| Plum Ink | `#473054` | `--color-plum-ink` | brand | Supporting text and restrained accent details, particularly in footer content. |
| Pure White | `#ffffff` | `--color-pure-white` | surface | Navigation, product cards, screenshot frames, and the contrasting hero CTA treatment. |
| Powder Blue | `#bbcfe4` | `--color-powder-blue` | surface | Broad footer and section-band surface; also echoes the blue within scenic product backdrops. |
| Lavender Bloom | `#e9bded` | `--color-lavender-bloom` | accent | Soft colored section surface and a key part of the brand’s pastel visual field. |
| Electric Violet | `#ab2fed` | `--color-electric-violet` | accent | Selected link text and small highlights; do not use as the page’s dominant background. |
| Haze Gray | `#f0eef2` | `--color-haze-gray` | surface | Subtle gradient fade and atmospheric transition near lighter sections. |
| Vivid Orchid | `#ba59ff` | `--color-vivid-orchid` | accent | Gradient endpoint in decorative scenic imagery, not a general-purpose text color. |
| Blush Mist | `#efe3ed` | `--color-blush-mist` | surface | Pale tinted card and text surfaces that soften otherwise white content areas. |
| Lilac Wash | `#decaff` | `--color-lilac-wash` | accent | Occasional rounded decorative card or illustration surface. |
| Neon Rose | `#ff59f1` | `--color-neon-rose` | accent | Vibrant gradient and illustration detail only; keep it out of core interface text. |

### Semantic aliases

`--color-canvas` → `#f7f7f8` (Cloud Canvas) · `--color-surface` → `#bbcfe4` (Powder Blue) · `--color-surface-2` → `#e9bded` (Lavender Bloom) · `--color-surface-3` → `#ffffff` (Pure White) · `--color-surface-4` → `#efe3ed` (Blush Mist) · `--color-text` → `#250835` (Deep Plum) · `--color-text-muted` → `#6a5b72` (Muted Mauve) · `--color-text-subtle` → `#473054` (Plum Ink) · `--color-accent` → `#473054` (Plum Ink) · `--color-accent-2` → `#e9bded` (Lavender Bloom) · `--color-accent-3` → `#ab2fed` (Electric Violet)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#250835` | `#f7f7f8` | 16.84:1 | AAA |
| `#250835` | `#bbcfe4` | 11.3:1 | AAA |
| `#250835` | `#e9bded` | 11.13:1 | AAA |
| `#250835` | `#ffffff` | 18.03:1 | AAA |
| `#6a5b72` | `#f7f7f8` | 5.85:1 | AA |
| `#6a5b72` | `#bbcfe4` | 3.93:1 | AA-large |
| `#6a5b72` | `#e9bded` | 3.87:1 | AA-large |
| `#6a5b72` | `#ffffff` | 6.26:1 | AA |
| `#473054` | `#f7f7f8` | 10.78:1 | AAA |
| `#473054` | `#bbcfe4` | 7.23:1 | AAA |

### Gradients

- `url("https://whimsical.com/_next_public/grain/15percent@1x.png"), linear-gradient(142deg, rgb(186, 89, 255) 0%, rgb(186, 89, 255) 30%, rgb(255, 89, 241))`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, color(display-p3 0.941176 0.933333 0.94902) 100%)`
- `linear-gradient(rgba(37, 8, 53, 0.08), rgba(37, 8, 53, 0.08)), url("https://whimsical.com/_next_public/abstract-bgs/tundra-sunset/m@2000x1500@1x.webp")`
- `linear-gradient(rgba(37, 8, 53, 0.08), rgba(37, 8, 53, 0.08)), url("https://whimsical.com/_next_public/abstract-bgs/purple-dawn/m@2000x2655@1x.webp")`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Manrope-79d1da00e5f47c83 | `--font-body` | webfont | 500, 700, 600 | Navigation, body copy, captions, buttons, and links. | Manrope |
| Agrandir-0cfc125464d8d15e | `--font-display` | webfont | 700 | Display and section headings. | Manrope |

- **Manrope-79d1da00e5f47c83:** Use medium body weight and bold compact controls; navigation and button labels are small and tracking is slightly open.
- **Agrandir-0cfc125464d8d15e:** Bold, rounded display forms; large headings use tight tracking and compact line height, with natural sentence case.

### Type scale — Golden Ratio (ratio ≈ 1.565, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 700 | 1 | -0.01em | — | Agrandir-0cfc125464d8d15e | Oversized hero or campaign headline. |
| h1 | 64px | 700 | 1.1 | -0.01em | — | Agrandir-0cfc125464d8d15e | Primary hero title and major page headline. |
| h2 | 48px | 700 | 1.1 | 0 | — | Agrandir-0cfc125464d8d15e | Large feature and section headlines. |
| h3 | 24px | 700 | 1.1 | -0.01em | — | Agrandir-0cfc125464d8d15e | Feature titles and card headings. |
| body | 16px | 500 | 1.4 | 0 | — | Manrope-79d1da00e5f47c83 | Explanatory copy and feature descriptions. |
| caption | 13px | 700 | 1 | 0.009em | — | Manrope-79d1da00e5f47c83 | Small labels and supporting metadata. |
| button | 13px | 700 | 1 | 0.009em | — | Manrope-79d1da00e5f47c83 | CTA labels and compact action text. |
| nav | 13px | 700 | 1 | 0.009em | — | Manrope-79d1da00e5f47c83 | Top navigation and compact menu labels. |
| link | 16px | 700 | 1 | 0 | — | Manrope-79d1da00e5f47c83 | Inline product and feature links. |
| eyebrow | 9px | 700 | 1.2 | 0.15em | uppercase | Manrope-79d1da00e5f47c83 | Small uppercase section markers above headings. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 2, 4, 8, 10, 11, 12, 16, 18, 20, 24, 32, 40, 48, 60, 64 px.
- Section rhythm 40px · element gap 2px · card padding 12px · max content width —.

Use a centered, responsive content column with generous side margins and a compact horizontal navigation bar. The hero is a wide, heavily rounded scenic panel; center its message and layer a substantial product screenshot across its lower area. Follow with alternating feature rows that switch screenshot and copy alignment, then tighter multi-column feature cards. Keep section transitions spacious and uncluttered; allow dense detail inside screenshots. No measured maximum page width is available, so adapt the container to the viewport rather than assuming a fixed value.

## Shape & elevation

- Radius: button `12px` · card `8px` · media `9px` · nav `12px` · link `16px` · xs `8px` · sm `12px` · md `16px` · lg `120px` · xl `160px`
- Shadow `lg` (link): `rgba(37, 8, 53, 0.06) 0px 16px 32px -4px`
- Shadow `md` (button): `rgba(37, 8, 53, 0.2) 0px 12px 16px -4px`
- Shadow `md-2` (nav): `rgba(37, 8, 53, 0.04) 0px 8px 16px -4px`
- Shadow `lg-2` (card): `rgba(0, 0, 0, 0.05) 0px 16px 40px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.3, 0.1, 0, 1)` on interactive elements.

Most sections sit flat on the pale canvas, with little emphasis on visible borders or hairlines. White navigation and product cards separate through surface contrast and restrained soft shadows. Use the stronger plum-tinted shadow for primary buttons and keep screenshots layered above scenic panels; avoid adding heavy outlines or stacking many shadow levels.

## Imagery

Use product UI screenshots as the main proof of value: boards, diagrams, wireframes, and collaboration features shown inside clean white interface frames. Place them over soft scenic gradients with lavender, pink, and blue hues, using rounded framing and occasional overlap. Small feature illustrations can be colorful and blurred at the edges, but keep the underlying interface legible. Scenic color is part of the image treatment, not a replacement for the measured UI palette.

## Components

### Top navigation

White, compact horizontal bar with brand mark, centered product links, and right-aligned account actions; text uses deep plum.

### Primary CTA

Deep-plum rounded button with white bold Manrope text, a right-side arrow tile, and a soft plum shadow.

### Scenic hero

Large rounded gradient/photo panel with centered white Agrandir headline, concise supporting copy, CTA, and overlapping product screenshot.

### Feature split

Alternating copy-and-screenshot rows; use a large Agrandir section heading and violet feature links.

### Product card grid

White rounded cards with compact interface previews, deep-plum titles, muted descriptions, and colored exploration links.

### Footer panel

Rounded pale-blue scenic band containing a light footer surface, grouped link columns, and restrained utility details.

### Measured component styles

- **Primary button** (“Get started free”): background #250835 · text #ffffff · radius 12px · padding 8px 40px 8px 20px · 700 16px Manrope-79d1da00e5f47c83 · shadow rgba(37, 8, 53, 0.2) 0px 12px 16px -4px
- **Secondary button** (“Get started free”): background #ffffff · text #250835 · radius 12px · padding 8px 40px 8px 20px · 700 16px Manrope-79d1da00e5f47c83 · shadow rgba(37, 8, 53, 0.2) 0px 12px 16px -4px
- **Link** (“Diagrams Quickly capture ideas and creat”): background #ffffff · text #250835 · radius 16px · padding 24px · 400 16px Manrope-79d1da00e5f47c83 · shadow rgba(37, 8, 53, 0.06) 0px 16px 32px -4px
- **Card**: background #f5f4f5 · text #250835 · radius 8px · padding 24px 0px 0px 24px · 400 16px Manrope-79d1da00e5f47c83
- **Navigation item** (“Product Resources Pricing Download Conta”): transparent background · text #250835 · radius 0px · padding 0px · 400 16px Manrope-79d1da00e5f47c83

## Do

- Keep the page canvas pale and the core interface text deep plum.
- Use gradient color in scenic panels and imagery rather than everywhere.
- Pair oversized rounded display headings with concise supporting copy.
- Show real product interface previews prominently.
- Alternate feature screenshot and copy alignment for visual rhythm.
- Reserve vivid violet links for selected actions and feature navigation.

## Don't

- Do not treat illustration-only colors as core UI colors.
- Do not make the entire page dark or heavily saturated.
- Do not crowd the hero with multiple competing actions.
- Do not add harsh borders to every card or section.
- Do not use decorative gradients behind all body content.
- Do not replace readable product screenshots with abstract decoration.

## Agent prompt

Build a new Whimsical-style SaaS page with a calm, product-led visual language. Use Cloud Canvas (#f7f7f8) as the main ground, Deep Plum (#250835) for headings and primary controls, and white (#ffffff) for navigation and cards. Add Lavender Bloom (#e9bded) and Powder Blue (#bbcfe4) through scenic image panels; reserve Electric Violet (#ab2fed) for selected links. Use bold rounded display headings, compact Manrope-like interface text, and generous section breathing room. Make product screenshots the visual evidence: frame them cleanly, layer them over gradients sparingly, and alternate their placement with concise feature copy. Keep cards and buttons rounded, use soft shadows selectively, and maintain a clear hierarchy with one prominent action at a time. Do not invent borders or overuse saturated accents.

## Source CSS custom properties (selected)

```css
--body-font-family: Manrope-79d1da00e5f47c83,"Manrope-79d1da00e5f47c83 fallback: Arial","Helvetica Neue",Helvetica,Arial,sans-serif;
--xxx-slow-duration: 1.6s;
--xx-slow-duration: 1.2s;
--x-slow-duration: .8s;
--slow-duration: .4s;
--base-duration: .2s;
--fast-duration: .1s;
--x-fast-duration: 50ms;
--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
--hd--base-font-weight: 700;
--hd-h1--letter-spacing: -8.64px;
--hd-h2--letter-spacing: -5.76px;
--hd-h3--letter-spacing: -2.56px;
--hd-h4--letter-spacing: -.96px;
--hd-h4-5--letter-spacing: -.96px;
--hd-h5--letter-spacing: -.64px;
--hd-h5-5--letter-spacing: -.64px;
--hd-h7--letter-spacing: -.24px;
--hd-h8--letter-spacing: -.2px;
--body-jumbo--letter-spacing: -.48px;
--body-jumbo--font-weight: 400;
--body--base-font-weight: 500;
--body--semibold-font-weight: 600;
--body--bold-font-weight: 700;
--body--extra-bold-font-weight: 800;
--body-extra-large--letter-spacing: .32px;
--body-large--letter-spacing: .24px;
--body-regular--letter-spacing: 0;
--body-small--letter-spacing: .14px;
--body-extra-small--letter-spacing: .24px;
--body-tiny--letter-spacing: .3px;
--link--base-font-weight: 500;
--link-extra-large--letter-spacing: .32px;
--link-large--letter-spacing: .24px;
--link--letter-spacing: .32px;
--link-small--letter-spacing: .24px;
--link-extra-small--letter-spacing: .3px;
--btn--base-font-weight: 700;
--btn-large--letter-spacing: 0;
--btn--letter-spacing: 0;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/whimsical-com