Home
DESIGN.mdStar on GitHub

Sketch diagrams with a hand-drawn feel

An open-source virtual whiteboard — draw boxes, arrows and text that look scrawled by hand.

Colors
Brand · one friendly violet
Surfaces · floating islands on a canvas
Sketch palette · the drawing (content, not chrome)
Typography
Excalifont ≈ Shantell / 700
Hand-drawn display · 52px
Sketch it out!
≈ Shantell
Excalifont ≈ Shantell / 400
Canvas text · labels
user → server → database
hand-drawn
Assistant / 400
UI · body · 15px
The interface stays crisp so the sketchiness lives on the canvas.
Assistant
Nunito / 800
Wordmark
EXCALIDRAW
Nunito
Signature · Hand-drawn canvas
Stroke
Background
Fill
Sloppiness
Edges
100%
click a shape to edit it →
drag Sloppiness to re-sketch
Pick a tool, then click a shape to select it — change its stroke, fill or sloppiness and the whole drawing re-sketches with real hand-drawn (rough) strokes. Deterministic — seeded roughness.
Components
Buttons
Tool tiles
Command
Radius
12 island
10 tool
6 swatch
pill
Guardrails
Do
Render shapes with the hand-drawn, rough look — wobbly double strokes & hachure fills.
Keep one friendly violet for active tool, selection & CTAs; let the canvas stay neutral.
Use hand-drawn type (≈ Shantell) on the canvas; keep UI in Assistant & legible.
Float the UI as rounded islands over a full-bleed canvas; support a true dark canvas.
Offer sloppiness — the roughness is the point; keep it deterministic per drawing.
Don't
Render shapes as crisp precise vectors — that kills the hand-drawn identity.
Add a second brand hue; violet is the only chrome accent.
Set dense UI or long body in the hand-drawn font — it belongs on the canvas.
Crowd the canvas with heavy chrome — the islands float; the drawing leads.
Make the violet loud or gradient-y — it's one flat, friendly indigo-violet.