# Excalidraw · Design system migration spec

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

> The design is a masterclass in building a complex tool that feels simple and approachable through a hand-drawn aesthetic.

## 1. Identity DNA

Excalidraw’s identity is built on a single, clarifying analogy: a blank canvas with a pencil, ready for rapid ideation. This sketch-like, hand-drawn aesthetic defines every surface and interaction, framing the digital tool as an extension of a physical brainstorming session.

**One-liner:** A collaborative whiteboard tool designed for speed and simplicity, featuring a signature hand-drawn aesthetic.
**Keywords:** sketch · whiteboard · collaborative · hand-drawn · minimal
**Analogy:** A blank canvas with a pencil, ready for rapid ideation

## 2. Color

The color system is intentionally sparse, built on a light, neutral canvas background. A single purple accent provides focus for interactive elements and brand identity, maintaining the high-contrast clarity essential for a sketch metaphor.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ecf0f4` | main background |
| `--bg-soft` | `#f1f0ff` | card background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#1b1b1f` | body text |
| `--ink-soft` | `#999999` | secondary text |
| `--muted` | `#b8b8b8` | placeholder |
| `--accent` | `#6969db` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** High-contrast hand-drawn lines on a soft, neutral canvas background.

The principle is restraint: color is used sparingly to guide interaction, never to decorate.

## 3. Typography

Typography serves two distinct roles. A custom, hand-drawn font expresses the brand and on-canvas elements, while a clean humanist-sans ensures legibility for all UI controls and system text.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 700 | 0px | Brand logo |
| body | 16px | 1.35 | 400 | 0px | Default text |
| caption | 14px | 1.4 | 400 | 0px | Secondary instructions |

**Type rules:**
- Use a hand-drawn style font for the primary logo and on-canvas elements.
- Use a clean humanist-sans for UI elements, menus, and system messages.
- Maintain high legibility with standard 16px base sizing for canvas UI.

## 4. Spacing

Spacing rhythm is organic and flexible, dictated by the canvas elements themselves rather than a rigid underlying grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Flexible and organic, dictated by the canvas elements rather than a strict grid.

## 5. Surfaces

Surfaces are defined by subtle depth, using soft shadows and light 1px borders. This creates a clear hierarchy without introducing heavy, decorative elements that would break the sketch aesthetic.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 0px 0px 1px rgba(255, 255, 255, 1)
  - 0px 0px 1px 0px rgba(0, 0, 0, 0.17)
  - 0px 7px 14px 0px rgba(0, 0, 0, 0.05)
- **Borders:** Subtle 1px borders in neutral grays for UI containers.

## 6. Layout

The layout skeleton is an infinite canvas, where user-created elements are absolutely positioned. This is complemented by floating, contextual toolbars and minimal fixed UI to maximize creative space.

- **Breakpoints:** 768 / 1024 px

**Skeleton:** Infinite canvas with absolute positioning for user-created elements.

## 7. Motion & Interaction

Motion philosophy is functional and unobtrusive. All transitions are smooth and subtle, providing immediate feedback for tool selection and state changes without distracting from the primary task.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `ease-in-out`
- **Patterns:**
  - Smooth transitions for tool selection and UI state changes.
  - Subtle transform animations for interactive elements.

- **Hover:** Subtle shadow changes and color shifts on interactive elements.
- **Click:** Immediate visual feedback on tool selection.
- **Transition:** All transitions are smooth and use ease-in-out timing.
- **Keyboard:** Extensive keyboard shortcuts displayed directly in the UI for efficiency.

## 8. Voice & Don'ts

The editorial voice is helpful, direct, and slightly informal, matching the tool's accessible ethos. Headlines are hand-drawn and expressive, while calls to action are clear and action-oriented, often paired with keyboard shortcuts.

- **Tone:** Helpful, direct, and slightly informal.
- **Headline style:** Hand-drawn, expressive, and visually distinct.
- **CTA style:** Clear and action-oriented, often paired with keyboard shortcuts.
- **Avoid:** Avoid overly corporate or sterile language. / Avoid complex or confusing instructional text. / Avoid hidden UI elements that require discovery.

### Don'ts
- ❌ Don't use a dark theme — the screenshot shows a light, bright canvas background.
- ❌ Don't use sharp 90-degree corners on UI elements — the screenshot shows a preference for 4px to 12px border-radius.
- ❌ Don't use purely geometric, sterile fonts — the screenshot prominently features a hand-drawn font for the brand.
- ❌ Don't hide keyboard shortcuts — the screenshot shows them clearly labeled next to UI actions.
- ❌ Don't use heavy, dark borders — the screenshot shows light, subtle 1px borders and soft shadows.
- ❌ Don't use a complex, multi-column layout — the screenshot shows a minimalist, canvas-centric interface.

The system deliberately avoids dark themes, sharp corners, sterile typography, and hidden functionality—choices that would contradict its core identity as a simple, sketch-based canvas.

## System Prompt (paste into AI tool)

```
Excalidraw is a minimalist, collaborative whiteboard tool that prioritizes a sketch-like, hand-drawn aesthetic. The primary accent color is a soft purple (#6969db) used for highlights and the brand mark, set against a light gray canvas (#ecf0f4). The typography mixes a custom hand-drawn font for on-canvas elements with a clean humanist-sans for UI components. Key interaction patterns include floating toolbars and inline keyboard shortcut labels. Critical design constraints: maintain a high-contrast, sketchy visual style; use rounded corners for all UI elements; and avoid dark modes or overly complex, corporate layouts.
```