🔒
1
2
3
4
5
6
7
A8
9
0
Excalidraw+ Share
Stroke
Background
Stroke width
Sloppiness
Opacity
Export, preferences, … Pick a tool &
Start drawing!

Your drawings are saved in your browser’s storage.
Save your work to a file regularly to avoid losing it.

Shortcuts &
help
100%+
?
Components

Everything is an Island

Toolbar

An Island at 44px holding 36px tool buttons, each with a subscript shortcut.

Properties panel

Appears only when a tool or element is active; 12px legends over segmented rows.

Popup / dialog

Same white ground, same 8px radius, same three-layer shadow. No border.

Controls

Monochrome chrome, one violet

Share Hover Active Excalidraw+ Ghost · hover Reset canvas Disabled
Saved
Room name Hover border Focused field

Buttons and tool icons are 36px at 8px; menu items 42px at 6px. Rest is transparent, hover is the violet-tinted #f1f0ff, and the selected state is #e0dfff with a #6965db glyph. Fields sit on #ececf4 behind an #ebebeb border that steps to #5753d0 on hover and #4440bf on focus.

Typography

12–16px, weight 400, nothing bold

Base · Assistant · 16 · 400 · normalThe base UI size before component overrides.
Menu item · Assistant · 14 · 400 · normalLive collaboration…
Button label · Assistant · 13.33 · 400 · normalShare
Panel legend · Assistant · 12 · 400 · normalSloppiness
Menu shortcut · Assistant · 12 · 400 · normalCmd+Shift+E
Welcome heading · Excalifont · 18/21.6 · 400 · normalYour drawings are saved in your browser’s storage.
Welcome decor · Excalifont · 36 · 400 · normalPick a tool!
Palette

Published custom properties

Text & icons
on-surface#1b1b1f
logo-text#190064
on-primary-container#030064
input-label#495057
disabled / keybinding#b8b8b8
placeholder#c5c5d0
Surfaces & borders
island-bg / surface-lowest#ffffff
surface-mid#f6f6f9
surface-low#ececf4
surface-high / hover#f1f0ff
primary-container#e0dfff
popup-secondary#f1f3f5
dialog-border#ebebeb
input-border#ced4da
outline-variant#c5c5d0
border-outline#767680
Grey ramp
gray-10#f5f5f5
gray-20#ebebeb
gray-30#d6d6d6
gray-40#b8b8b8
gray-50#999999
gray-60#7a7a7a
gray-70#5c5c5c
gray-80#3d3d3d
gray-85#242424
gray-90#1e1e1e
gray-100#121212
Accent
primary / selection#6965db
primary-hover#5753d0
primary-darker#5b57d1
brand-active#4440bf
primary-darkest#4a47b1
primary-light#e3e2fe
primary-light-darker#d7d5ff
Semantic
danger#db6965
danger-background#fff0f0
danger-color#700000
destructive-bg#ffe3e3
destructive-color#c92a2a
warning#fceeca
warning-dark#f5c354
warning-darker#f3ab2c
warning-darkest#ec8b14
success#cafccc
success-contrast#65bb6a
success-text#268029
badge-bg#d3ffd2
badge#0b6513
link#1c7ed6
link-hover#1971c2
focus-highlight#a5d8ff
select-highlight#339af0
Canvas element palette — drawing content only, never chrome
stroke 1#1e1e1e
stroke 2#e03131
stroke 3#2f9e44
stroke 4#1971c2
stroke 5#f08c00
fill 2#ffc9c9
fill 3#b2f2bb
fill 4#a5d8ff
fill 5#ffec99
Depth & motion

One shadow, two radii, no borders

6px · border-radius-md
8px · border-radius-lg
50% · avatars, help
island-shadow · .17 0 0 1px / .08 0 0 3px / .05 0 7px 14px
overlay-bg-color · rgba(255,255,255,.88) — a white scrim, not a dark one

Motion in the shell is limited to short colour and background fades on hover and active; the canvas itself is redrawn imperatively by rough.js (the Sloppiness control is its roughness parameter) rather than animated in CSS. No keyframes, scroll effects or animation library in the chrome.