---
name: Excalidraw
description: "The design is a masterclass in building a complex tool that feels simple and approachable through a hand-drawn aesthetic."
version: alpha

colors:
  background: "#ecf0f4"
  primary: "#1b1b1f"
  secondary: "#999999"
  tertiary: "#6969db"
  neutral: "#b8b8b8"
  bg-soft: "#f1f0ff"
  bg-quiet: "#ffffff"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: hand-drawn
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.35
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A collaborative whiteboard tool designed for speed and simplicity, featuring a signature hand-drawn aesthetic.

*A blank canvas with a pencil, ready for rapid ideation*

## Colors

High-contrast hand-drawn lines on a soft, neutral canvas background.

- **Background (`#ecf0f4`)** — uses `bg` token
- **Primary text (`#1b1b1f`)** — uses `ink` token
- **Secondary text (`#999999`)** — uses `ink-soft` token
- **Accent (`#6969db`)** — uses `accent` token
- **Muted (`#b8b8b8`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** hand-drawn
- **Body:** humanist-sans
- **Mono:** monospace

- Use a hand-drawn style font for the primary logo and on-canvas elements.
- Use a clean humanist-sans for UI elements, menus, and system messages.
- Maintain high legibility with standard 16px base sizing for canvas UI.

## Layout

Infinite canvas with absolute positioning for user-created elements.

*Rhythm:* Flexible and organic, dictated by the canvas elements rather than a strict grid.

## Elevation & Depth

- 0px 0px 0px 1px rgba(255, 255, 255, 1)
- 0px 0px 1px 0px rgba(0, 0, 0, 0.17)
- 0px 7px 14px 0px rgba(0, 0, 0, 0.05)
- Borders: Subtle 1px borders in neutral grays for UI containers.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded rectangles with subtle shadows for UI controls.
- **card:** Simple bordered containers for settings or tooltips.
- **chip:** Keyboard shortcut indicators displayed in bordered rounded rectangles.
- **input:** Text input fields with clean borders and minimal styling.
- **hero:** Centralized brand logo and primary call-to-action links.

## Do's and Don'ts

**Don't:**
- Don't use a dark theme — the screenshot shows a light, bright canvas background.
- Don't use sharp 90-degree corners on UI elements — the screenshot shows a preference for 4px to 12px border-radius.
- Don't use purely geometric, sterile fonts — the screenshot prominently features a hand-drawn font for the brand.
- Don't hide keyboard shortcuts — the screenshot shows them clearly labeled next to UI actions.
- Don't use heavy, dark borders — the screenshot shows light, subtle 1px borders and soft shadows.
- Don't use a complex, multi-column layout — the screenshot shows a minimalist, canvas-centric interface.

---

## System Prompt (paste into AI agent)

```
Excalidraw is a minimalist, collaborative whiteboard tool that prioritizes a sketch-like, hand-drawn aesthetic. The primary accent color is a soft purple (#6969db) used for highlights and the brand mark, set against a light gray canvas (#ecf0f4). The typography mixes a custom hand-drawn font for on-canvas elements with a clean humanist-sans for UI components. Key interaction patterns include floating toolbars and inline keyboard shortcut labels. Critical design constraints: maintain a high-contrast, sketchy visual style; use rounded corners for all UI elements; and avoid dark modes or overly complex, corporate layouts.
```