The rare product whose playfulness is content rather than styling. The marketing page is flat white with all structural type in Assistant — a variable grotesque whose weights land on odd steps like 480 — and every word of it, from the 56px hero down to captions, set in a deep indigo-navy #030064 that replaces black entirely; letter-spacing stays normal even at 56px, which is the opposite of the category default. On top of that clean layer floats a genuinely hand-drawn one: pastel sketch marks, collaborator name-tags trailing cursor arrows, a marker-stroke SVG highlight behind a word set in Excalifont, and a hand-lettered arrow annotating the CTA. Chrome stays disciplined underneath — 9999px pills, one violet #6965db, a single 1px #c5c5d0 hairline, and a four-layer fractional ambient shadow instead of borders. The editor surface inverts the idea: white 8px Islands with a three-layer shadow float in the corners of an infinite canvas, all chrome sits between 12 and 16px at weight 400 with nothing bold or tracked, hover fills are the violet-tinted #f1f0ff, and the five stroke and five fill colours belong strictly to drawn shapes.
Browse Excalidraw in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: plus.excalidraw.com (live DOM, computed styles), 2026-07-21. Coverage: home page (hero, Create section, logo wall, CTA band, nav). Pricing/Teams not captured. Responsive: breakpoints not captured (Tailwind defaults presumed, not claimed).
A white page that behaves like a sheet of paper someone has been drawing on. All the structural type is a clean variable grotesque (Assistant) in a deep indigo-navy, and *on top of it* float genuinely hand-drawn elements: a hero word set in Excalifont with a wobbly marker highlight behind it, scattered sketch marks, pastel collaborator name-tags with cursor arrows, and a curly hand-lettered "14 days of free trial" arrow pointing at the CTA. The chrome itself is disciplined — full pills, one violet, no gradients, no borders on the nav — so the hand-drawn layer reads as *content on the canvas* rather than as a decorative typeface choice. It deliberately avoids the enterprise-whiteboard look: no dark mode hero, no gradient mesh, no product screenshot in a tilted 3D frame.
Feels: playful, papery, unfussy, warm.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #030064 | ALL text — headings, body, nav, buttons on light. Not black. |
| primary | #6965db | The one accent: primary pill fill, hand-drawn annotations, links |
| primary-hover | #5753d0 | Hover fill |
| primary-active | #4440bf | Active / pressed |
| logo-text | #190064 | Wordmark only |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page ground — 60 of the page's blocks are pure white |
| surface-high | #f1f0ff | Faint violet wash on hover fills |
| dark-band | #232329 | The single inverted block on the page |
| border-outline-variant | #c5c5d0 | The only hairline — 1px, on the secondary button |
| Token | Hex | Role / usage |
|---|---|---|
| github-fill | #ffe599 | GitHub star pill background |
| github-border | #705400 | 1px border on that pill (a real brown, not a tint) |
| annotation-blue | #004170 | One hand-lettered annotation in a deeper blue |
Rules: the accent is #6965db and there is only one of it — every other hue on the page is *drawn content* (pastel sketch marks, name-tags, the mint highlight), never chrome. Text is never #000000 and never a grey; it is #030064 at every size including captions.
Assistant, -apple-system, system-ui, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif — a variable face, so weights land on non-standard steps (480).Excalifont, Xiaolai — the same face the editor draws with.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| h1 hero | 56 / 64.4 | 600 | normal |
| h1 highlighted word (Excalifont) | 56 | 400 | normal |
| h2 section | 44 / 50.6 | 600 | normal |
| h3 / eyebrow | 14 / 20 | 700 | normal |
| Body | 16 / 24 | 400 | normal |
| Nav link | 14 / 20 | 480 | normal |
| Button label | 14–16 / 20 | 500–600 | normal |
| Annotation (Excalifont) | 20 | 480 | normal |
| Small annotation (Excalifont) | 13–14 | 400 | normal |
| Badge (Excalifont) | 12 | 480 | normal |
Patterns: tracking is normal on every role, including the 56px hero — no negative-tracking display trick anywhere. Weight ceiling is 600 for sans (700 only on the 14px h3). Nothing is uppercase. The hand-drawn face never carries structure — only a highlighted word, badges and margin annotations.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
Source: excalidraw.com (live DOM, computed styles + the app's own published CSS custom properties), 2026-07-21. Coverage: editor shell — welcome screen, top toolbar, left properties island, zoom/undo bar, colour pickers. Light theme only; dark theme ships (--theme-filter) but was not captured. No login required — this is the real product surface, not a mock.
The editor is chrome floating on an infinite white canvas: there is no app frame, no sidebar, no header bar. Every control lives inside an "Island" — a white 8px-radius panel with a soft three-layer shadow — that hovers over the drawing surface with the canvas visible all around it. Chrome is deliberately quiet and monochrome so the drawing is the only saturated thing on screen; the single violet #6965db marks selection and the primary action, and the entire hand-drawn character is confined to the *canvas contents* and to the greyed Excalifont hints on the empty welcome screen. It avoids the usual design-tool look: no dark shell, no dense inspector, no icon rail.
Feels: light, floating, quiet, unintimidating.
Text & icons
| Token | Hex | Role / usage |
|---|---|---|
--color-on-surface / --text-primary-color / --icon-fill-color | #1b1b1f | All primary text and icons |
--color-logo-text | #190064 | Wordmark |
--color-on-primary-container | #030064 | Text on violet containers |
--color-disabled / --keybinding-color | #b8b8b8 | Disabled labels, shortcut hints, welcome hints |
--ExcTextField--placeholder | #c5c5d0 | Placeholders |
--input-label-color | #495057 | Field labels |
Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
--island-bg-color / --color-surface-lowest / --popup-bg-color / --sidebar-bg-color | #ffffff | Every floating panel |
--color-surface-mid | #f6f6f9 | Faint fill |
--color-surface-low / --ExcTextField--background | #ececf4 | Inset fields, segmented tracks |
--color-surface-high / --button-hover-bg / --button-active-bg / --default-border-color / --sidebar-border-color | #f1f0ff | Hover + active fills (a violet-tinted grey) |
--color-surface-primary-container | #e0dfff | Selected tool container |
--popup-secondary-bg-color / --input-hover-bg-color | #f1f3f5 | Popup secondary ground |
--dialog-border-color / --list-border-color / --avatar-border-color | #ebebeb | Hairlines |
--input-border-color / --scrollbar-thumb | #ced4da | Input border, scrollbar |
--color-border-outline | #767680 | Strong outline |
--color-border-outline-variant | #c5c5d0 | Soft outline |
--overlay-bg-color | rgba(255,255,255,.88) | Modal scrim — white, not black |
Grey ramp (published): --color-gray-10 #f5f5f5 · 20 #ebebeb · 30 #d6d6d6 · 40 #b8b8b8 · 50 #999999 · 60 #7a7a7a · 70 #5c5c5c · 80 #3d3d3d · 85 #242424 · 90 #1e1e1e · 100 #121212.
Accent
| Token | Hex | Role / usage |
|---|---|---|
--color-primary / --color-selection / --color-logo-icon / --color-promo | #6965db | Selection, active tool, primary button |
--color-primary-hover / --color-brand-hover | #5753d0 | Hover |
--color-primary-darker | #5b57d1 | — |
--color-brand-active / --color-primary-darkest… | #4440bf | Active / pressed, field focus border |
--color-primary-light | #e3e2fe | Light violet fill |
--color-primary-light-darker | #d7d5ff | Light violet fill, pressed |
Semantic
| Token | Hex | Role / usage |
|---|---|---|
--color-danger | #db6965 | Danger |
--color-danger-background / --button-destructive-bg-color | #fff0f0 / #ffe3e3 | Danger grounds |
--color-danger-color / --button-destructive-color | #700000 / #c92a2a | Danger text |
--color-warning | #fceeca | Warning ground (text stays #1b1b1f) |
--color-warning-dark → -darkest | #f5c354 → #f3ab2c → #ec8b14 | Warning ramp |
--color-success / -contrast / -text | #cafccc / #65bb6a / #268029 | Success |
--background-color-badge / --color-badge | #d3ffd2 / #0b6513 | Badge |
--link-color / hover / active | #1c7ed6 / #1971c2 / #a5d8ff | Links |
--focus-highlight-color | #a5d8ff | Focus highlight |
--select-highlight-color | #339af0 | Text selection |
Canvas element palette (drawing content only — never chrome)
| Stroke top-picks | #1e1e1e · #e03131 · #2f9e44 · #1971c2 · #f08c00 |
|---|---|
| Fill top-picks | transparent · #ffc9c9 · #b2f2bb · #a5d8ff · #ffec99 |
Rules: chrome is monochrome plus one violet. The five-stroke / five-fill palette is the *drawing's* colour and must never appear on a button, panel or border. Hover and active fills are the violet-tinted #f1f0ff, not a neutral grey.
Assistant, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif (--ui-font).Excalifont, Xiaolai — the canvas face, also used for the empty-state hints.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Base | 16 | 400 | normal |
| Panel legend / label | 12 | 400 | normal |
| Menu item | 14 | 400 | normal |
| Menu shortcut | 12 | 400 | normal |
| Button label | 13.33 | 400 | normal |
| Welcome heading (Excalifont) | 18 / 21.6 | 400 | normal |
| Welcome decor / arrows (Excalifont) | 36 | 400 | normal |
Patterns: nothing in the chrome is bold, uppercase or tracked. The whole UI sits between 12 and 16px at weight 400 — hierarchy comes entirely from colour steps (#1b1b1f → #999999 → #b8b8b8) and from panel grouping. The hand-drawn face appears in chrome *only* as #b8b8b8 empty-state hints.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.