What is Excalidraw's primary brand color?

Excalidraw's brand voltage is an indigo violet at #6965db. It appears six times across the captured marketing surface — twice as text inside the wordmark, three times as a selection border on the active tool slot in the toolbar, and once as the soft fill on the rocket icon. The Share pill in the top-right corner is a slightly more saturated violet that sits in the same hue family. Apart from the indigo, every other rendered color on the page is structural: a near-black ink #1b1b1f for body text and toolbar icons, gray hairlines at #b8b8b8 and #999999, and a single lavender pill #ececf4 that carries the Excalidraw+ CTA. There is no green, no orange, no secondary accent — the system is one indigo on white.

What typeface does Excalidraw use, and what should I use as a substitute?

Excalidraw pairs two faces. The first is Excalifont — Excalidraw's own hand-drawn sketchy face — which renders every on-canvas annotation: the sketchy wordmark, the storage warning paragraph, and the pointing-arrow captions. It is shipped with the app and falls back to Xiaolai. The second is Assistant, a humanist sans, used at 12–16px in weights 400 and 500 for the toolbar tooltips, the command rows, and the zoom controls. For the sketchy face, the closest open-source substitute is Virgil (the original hand-drawn font Excalidraw used before Excalifont) or Caveat at 1.1 line-height. For Assistant, Open Sans or Inter at the same weights transfer cleanly.

Why is the canvas pure white instead of a near-white?

The canvas renders pure #ffffff. Many drawing tools (Figma, Miro) tint their canvas with a one-tone-off gray to soften contrast with white UI; Excalidraw keeps it pure white because the sketchy Excalifont face needs maximum contrast to read as ink-on-paper rather than as digital text. The hand-drawn arrows pointing at the toolbar are rendered in a gray #b8b8b8 that visually approximates pencil-on-paper, and the contrast only reads correctly against pure white. Tinting the canvas even one step toward gray would compress that contrast and make the arrows feel like UI strokes rather than annotations.

What is Excalidraw's corner-radius philosophy?

The system runs a tight three-step radius scale: 4px (3 occurrences, used on the kbd shortcut chips), 6px (4 occurrences, used on the help-button frame and dropdown items), and 8px (37 occurrences — dominant on the toolbar slots, the Share pill, the Excalidraw+ button, the welcome-card command rows, and the zoom-control housing). There is no 12px or 16px tier and no fully-rounded pill. The 8px default keeps interactive surfaces feeling like Post-it notes — soft enough to be tappable, square enough to read as toolbar slots rather than capsule pills.

Can I use this DESIGN.md to build my own whiteboard or sketch-style app?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Excalidraw's specific moves: pure white canvas, indigo as a single chromatic voltage held in the wordmark and tool-selection states, Excalifont sketchy face for annotations paired with a humanist sans for chrome, and uniform 8px rounding on every interactive surface. The token references resolve cleanly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. The editor-as-marketing move is the borrowable principle only if your product is itself visually self-evident in one viewport — most marketing pages still need an interstitial layer.

Excalidraw Design System

Excalidraw's marketing surface is the editor itself — Excalifont sketchy annotations on pure white, a single indigo wordmark, an 8px-radius toolbar.

About Excalidraw DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source excalidraw.com

Design & Creative Tools
Productivity & SaaS

Excalidraw's marketing site is the application itself. There is no separate landing page, no hero photograph, no testimonial wall — visiting excalidraw.com renders the live editor on a white canvas, with a horizontal toolbar floating at the top, a burger menu top-left, zoom controls bottom-left, a question-mark help button bottom-right, and a centered welcome card carrying the indigo wordmark, a sketch-style storage warning, and four flat command rows. Hand-drawn pencil arrows in the Excalifont face point at every chrome element with sketchy captions ("Pick a tool & Start drawing!", "Export, preferences, languages...", "Shortcuts & help"). The page communicates the entire product surface in one viewport without ever leaving the tool.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 10 color tokens organized around a near-black ink #1b1b1f, a gray hairline tier, a single brand indigo #6965db wired into the rocket-logo wordmark and tool-selection states, and a soft lavender pill #ececf4 carrying the primary CTA. 11 typography tokens cover Excalifont sketch in two sizes (16px and 18px), Assistant sans in four sizes (12–16px) at weights 400 and 500, and a small Arial fallback tier. A radius scale of 4 / 6 / 8 px with 8px dominant. A spacing scale on 4px increments through 32px. 14 components covering the toolbar tile, Share pill, Excalidraw+ button, welcome card, hand-drawn-arrow annotation, and the four bottom-corner utility buttons.

Feed this file to Claude or Cursor and it reproduces Excalidraw's specific moves: pure white canvas instead of a tinted near-white, sketchy Excalifont face for any annotation-style copy paired with Assistant sans for chrome labels, indigo held in reserve as a single brand voltage, and 8px rounding everywhere. One caveat: the editor-as-marketing move only works if the product itself is visually self-evident in one viewport — most SaaS surfaces need a separate marketing skin because the in-product canvas does not communicate what the tool does on its own.

What makes it distinct

Editor-as-marketinglanding on excalidraw.com drops you straight into the drawing tool with hand-drawn arrows annotating the UI, no marketing chrome
Excalifont sketchy facethe hand-drawn typeface used for every on-canvas annotation, sitting beside Assistant sans for the toolbar chrome
Indigo voltage at #6965dbappears six times total as wordmark fill, Share-button background, and tool selection ring; no other chromatic accent on the page
Lavender Excalidraw+ pilla soft #ececf4 fill carries the only call-to-action, kept quiet so it does not compete with the canvas
8px radius dominates37 of 44 captured radii sit at 8px; the toolbar slots, Share pill, and Excalidraw+ button all share the same single rounding step

Live at excalidraw.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

excalidraw.com

Explore Excalidraw

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Excalidraw design system FAQ

Common questions about Excalidraw's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Excalidraw — official site

Excalidraw's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.