---
name: tldraw
description: "A masterclass in minimalist utility design, where the interface disappears to let the user's work take center stage."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#2e2e2e"
  tertiary: "#2070f0"
  neutral: "#6e7477"
  bg-soft: "#f9fafb"
  line: "rgba(0,0,0,0.1)"

typography:
  body:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "0px"
  h1:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.6
    fontWeight: 700
    letterSpacing: "0px"

rounded:
  sm: 9px
  md: 11px
  lg: 14px
  pill: 999px

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

---

## Overview

A minimalist, collaborative canvas tool designed to get out of the way of your ideas.

*A clean, digital whiteboard with hidden chrome*

## Colors

Neutral canvas with a single vibrant blue for primary actions

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#2e2e2e`)** — uses `ink-soft` token
- **Accent (`#2070f0`)** — uses `accent` token
- **Muted (`#6e7477`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans

- Use a neutral sans-serif for UI elements
- Maintain a consistent weight of 500 for standard UI text
- Use bold weight sparingly, primarily for headings

## Layout

Full-screen canvas with fixed-position toolbars and panels

*Rhythm:* 8px base grid

## Elevation & Depth

- rgba(0, 0, 0, 0.16) 0px 0px 2px 0px
- rgba(0, 0, 0, 0.24) 0px 2px 3px 0px
- Borders: 1px solid rgba(0,0,0,0.1)

## Shapes

- `sm`: 9px
- `md`: 11px
- `lg`: 14px
- `pill`: 999px

## Components

- **button:** Primary buttons are solid blue with white text and pill-shaped radii; secondary buttons are gray or outlined.
- **card:** No traditional cards; UI is presented as floating panels with shadows.
- **chip:** No chips observed.
- **input:** No text inputs visible; the interface is primarily icon-based.
- **hero:** The entire canvas acts as the hero space.

## Do's and Don'ts

**Don't:**
- Don't use a dark background — screenshot shows a bright white canvas.
- Don't use a wide variety of fonts — screenshot shows a consistent humanist-sans.
- Don't use heavy drop shadows — screenshot shows subtle, realistic shadows.
- Don't clutter the UI — screenshot shows minimal, floating toolbars.
- Don't use a complex color palette — screenshot shows a neutral base with a single blue accent.
- Don't use overly complex typography — screenshot shows simple, weight-based hierarchy.

---

## System Prompt (paste into AI agent)

```
This is tldraw, a minimalist whiteboard tool. The design is centered around a vast white canvas with unobtrusive UI. Key colors include a white background (#ffffff), near-black ink (#000000), and a vibrant blue accent (#2070f0) for primary actions. The typography relies on a clean humanist-sans-serif, primarily in weight 500. Critical donts include: avoid dark mode or dark backgrounds, avoid decorative or serif fonts, and avoid complex color palettes that distract from the canvas. The layout is full-screen with floating toolbars and panels, prioritizing the user's content over the interface itself.
```