CURATED · OPEN · FREE

Excalidraw

A collaborative whiteboard tool designed for speed and simplicity, featuring a signature hand-drawn aesthetic.

designtool

↓ Download design system (1 MB)Open in OpenDesign

Visit: https://excalidraw.com

📦 Browse pack contents →

Identity DNA

sketchwhiteboardcollaborativehand-drawnminimal

A blank canvas with a pencil, ready for rapid ideation

Color

#6969dbAccent

#1b1b1fInk

#999999Ink soft

#ecf0f4BG

#f1f0ffBG soft

#ffffffBG quiet

#b8b8b8Muted

rgba(0,0,0,0.1)Line

High-contrast hand-drawn lines on a soft, neutral canvas background.

Typography

hand-drawn · humanist-sans · monospace

display32px · 700
body16px · 400
caption14px · 400

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

Flexible and organic, dictated by the canvas elements rather than a strict grid.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle 1px borders in neutral grays for UI containers.

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)

Layout

8pxgutter

768 / 1024breakpoints

Infinite canvas with absolute positioning for user-created elements.

Motion & Interaction

220msmicro

400mssmall

800msmedium

ease-in-outeasing

Smooth transitions for tool selection and UI state changes. · Subtle transform animations for interactive elements.

Subtle shadow changes and color shifts on interactive elements. · Immediate visual feedback on tool selection.

Components

button Rounded rectangles with subtle shadows for UI controls.
card Simple bordered containers for settings or tooltips.
chip Keyboard shortcut indicators displayed in bordered rounded rectangles.
input Text input fields with clean borders and minimal styling.
hero Centralized brand logo and primary call-to-action links.

Voice & Don'ts

Tone Helpful, direct, and slightly informal.
Headlines Hand-drawn, expressive, and visually distinct.
CTAs Clear and action-oriented, often paired with keyboard shortcuts.

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.
Avoid: Avoid overly corporate or sterile language.
Avoid: Avoid complex or confusing instructional text.
Avoid: Avoid hidden UI elements that require discovery.

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

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.

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