Excalidraw — design system & UI screens

Design · 1 screen · 4 sections · https://excalidraw.com/

Minimal whiteboard canvas with the Excalidraw mark and hand-drawn get-started hints.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/excalidraw.

Decoded design system

Excalidraw's decoded design system: background #FFFFFF, text #000000, accent #FA5252, link #FA5252, primary #6965DB; type scale h1 32px / h2 24px / body 16px; 4px spacing base; 8px base radius. The single interactive/action color is #6965DB — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFEF`
border	`#D8D8D8`
text	`#000000`
text_muted	`#606060`
primary	`#6965DB`
accent	`#FA5252`
link	`#FA5252`
secondary	`#228BE6`
button_bg	`#6965DB`
button_text	`#FFFFFF`

Using these colors

Action color #6965DB — the single interactive color; only on things you click or must notice, never large fills.
primary, button_bg are all #6965DB — one role, not several (the action color).
accent, link are all #FA5252 — one role, not several (the action color).
accent #FA5252 — accent for emphasis — keep it rare on the page.
secondary #228BE6 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Assistant
Body: Arial
h1: 32px
h2: 24px
body: 16px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 8px, 10px, 12px, 14px, 16px, 24px, 32px

Radii

base: 8px
button: 8px

Shadow

rgb(255, 255, 255) 0px 0px 0px 1px

Shadows (elevation)

subtle: rgb(255, 255, 255) 0px 0px 0px 1px
card: rgba(0, 0, 0, 0.17) 0px 0px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 7px 14px 0px

Motion

Micro-interactions run at 500ms (dominant) with ease-in-out.

durations: 500ms
easings: ease-in-out
animated properties: transform

Native design tokens

Token	Value
`--sab`	`0px`
`--sal`	`0px`
`--sar`	`0px`
`--sat`	`0px`

Button states (measured)

primary hover: border 1px solid rgb(91, 87, 209) · background #5B57D1
primary focus: box-shadow rgb(87, 83, 208) 0px 0px 0px 1px

Layout (measured)

container max-width: 690px

Responsive (measured)

breakpoints: 861px · 1024px
mobile (390px): hero 32px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Virtual whiteboard for hand-drawn diagrams