# Whimsical · Design system migration spec

> Source: https://whimsical.com  ·  Curated by OpenDesign  ·  en

> A great example of a modern SaaS tool that balances professional restraint with a distinct brand identity.

## 1. Identity DNA

Whimsical's design system is a digital canvas meeting room for engineers, built to serve as a purpose-built whiteboard for technical teams and agents. Like a well-organized physical workshop, every element is positioned for clarity and focused collaboration, from its clean surfaces to its deliberate typographic hierarchy.

**One-liner:** Purpose-built whiteboard for technical teams and agents
**Keywords:** whiteboard · collaboration · technical · ideas · planning
**Analogy:** A digital canvas meeting room for engineers

## 2. Color

The palette operates on a high-contrast principle: deep, rich purple serves as the primary accent against pristine white and soft gray surfaces. This restraint ensures functional clarity while establishing a distinct brand presence.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F4F5` | card background |
| `--bg-quiet` | `#F5F4F5` | quiet area |
| `--ink` | `#220A33` | body text |
| `--ink-soft` | `#5C275E` | secondary text |
| `--muted` | `#6A5C70` | placeholder |
| `--muted-soft` | `#EAE9ED` | weak hint |
| `--accent` | `#9E39E5` | single accent |
| `--line` | `rgba(224,219,227,1)` | divider |

**Color principle:** High contrast ink on clean surfaces with vibrant purple accents

The system prioritizes legibility and functional contrast over decorative color, using accent hues sparingly to guide attention.

## 3. Typography

Typography pairs a clean, geometric humanist sans-serif for body text with a display font for large, impactful headlines. The rules enforce tight negative tracking for display text and medium weights for interactive elements, maintaining a strict hierarchy that supports efficient scanning.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 1.0 | 700 | -0.96px | Hero headlines |
| h2 | 32px | 1.2 | 700 | -0.3px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Body text |

**Type rules:**
- Use tight negative tracking for large display text
- Use medium weights for interactive elements
- Maintain strict typographic hierarchy

## 4. Spacing

An 8-pixel vertical rhythm underpins all layout and component spacing, creating a consistent and predictable grid for content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px vertical rhythm

## 5. Surfaces

Surfaces are defined by minimal borders and soft, diffuse elevation shadows rather than hard edges. This creates a clear sense of depth on predominantly light gray backgrounds without introducing visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 16px 32px -4px rgba(37,8,53,0.06)
  - 0px 12px 16px -4px rgba(37,8,53,0.2)
- **Borders:** 1px solid rgba(224,219,227,1)

## 6. Layout

The layout skeleton is a 12-column fluid grid with centered content, providing a flexible structure for varied page compositions. Ample whitespace and left-aligned body copy in feature grids ensure content remains uncluttered and easy to navigate.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** 12-column fluid grid with centered content

## 7. Motion & Interaction

Motion philosophy favors smooth, subtle transitions for interactive elements, such as hover states and card lifts. All animations are purposeful, designed to provide immediate visual feedback and enhance usability without becoming a distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.3, 0.1, 0, 1)`
- **Patterns:**
  - Smooth hover transitions for interactive elements
  - Subtle lift on card hover

- **Hover:** Subtle background color change or transform
- **Click:** Immediate visual feedback
- **Transition:** All properties transition smoothly with specific easing
- **Keyboard:** Standard focus outlines for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, clear, and encouraging, using bold, concise statements and direct action verbs. It avoids overly casual slang, dense jargon without context, and aggressive sales language.

- **Tone:** Professional, clear, and encouraging
- **Headline style:** Bold, concise statements about value
- **CTA style:** Direct action verbs like 'Get started free'
- **Avoid:** Overly casual slang / Dense technical jargon without context / Aggressive sales language

### Don'ts
- ❌ 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

The system deliberately does not employ dark mode, heavy drop shadows, playful display fonts, neon colors, excessive borders, or centered long-form text.

## System Prompt (paste into AI tool)

```
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.
```
