CURATED · OPEN · FREE

Whimsical

Purpose-built whiteboard for technical teams and agents

designtool

↓ Download design system (29 MB)Open in OpenDesign

Visit: https://whimsical.com

📦 Browse pack contents →

Identity DNA

whiteboardcollaborationtechnicalideasplanning

A digital canvas meeting room for engineers

Color

#9E39E5Accent

#220A33Ink

#5C275EInk soft

#FFFFFFBG

#F5F4F5BG soft

#6A5C70Muted

rgba(224,219,227,1)Line

High contrast ink on clean surfaces with vibrant purple accents

Typography

humanist-sans · monospace

display96px · 700
h232px · 700
body16px · 400

Use tight negative tracking for large display text · Use medium weights for interactive elements · Maintain strict typographic hierarchy

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

8px vertical rhythm

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(224,219,227,1)

0px 16px 32px -4px rgba(37,8,53,0.06) · 0px 12px 16px -4px rgba(37,8,53,0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

12-column fluid grid with centered content

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.3, 0.1, 0, 1)easing

Smooth hover transitions for interactive elements · Subtle lift on card hover

Subtle background color change or transform · Immediate visual feedback

Components

button Solid dark background with white text or outlined styles
card Clean containers with subtle shadows and rounded corners
chip Small rounded tags for labels
input Clean bordered fields with clear focus states
hero Large gradient background with centered bold typography

Voice & Don'ts

Tone Professional, clear, and encouraging
Headlines Bold, concise statements about value
CTAs Direct action verbs like 'Get started free'

Don't use dark mode interfaces — the screenshot shows a predominantly white/light gray background
Don't use heavy drop shadows — the screenshot shows soft, diffuse elevation shadows
Don't use playful, rounded display fonts — the screenshot shows clean, geometric humanist sans-serif typography
Don't use neon or highly saturated colors — the screenshot shows a restrained palette with deep purple accents
Don't clutter the layout with excessive borders — the screenshot shows minimal border usage
Don't use centered alignment for long paragraphs — the screenshot shows left-aligned body copy in feature grids
Avoid: Overly casual slang
Avoid: Dense technical jargon without context
Avoid: Aggressive sales language

Inside the pack — real screenshots

Whimsical — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

Whimsical is a professional productivity tool positioning itself as a purpose-built whiteboard for technical teams. The design relies on a high-contrast palette featuring a deep, rich purple as the primary accent against clean white and soft gray surfaces. The typography pairs a display font for large, impactful headlines with a highly readable sans-serif for body text. Critical constraints include avoiding dark mode or overly playful aesthetics; the interface is structured and efficient. Maintain generous whitespace and ensure all interactive elements have smooth, deliberate transitions. The layout should prioritize clarity and focused collaboration, avoiding visual noise or heavy ornamentation.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko