# tldraw • very good free whiteboard — Design System

## North Star
> An infinite-canvas whiteboard that's instantly familiar — the toolbar is the entire UI, the rest is yours.

**Theme:** light
**Category:** creative
**Tags:** `warm` · `sans-only` · `type-first` · `minimal` · `playful` · `vibrant` · `creative` · `soft-corners`

## Description
tldraw is a collaborative drawing app whose entire design system fits in two floating UI clusters: a centered bottom toolbar of drawing tools and a right-side style picker of pure color swatches and shape options. Off-white canvas, black/dark UI elements, vibrant categorical color set, and a custom display logo treatment. The product is the canvas — chrome stays out of the way.

## Colors
| Name | Hex | Group | Role | Tailwind |
|---|---|---|---|---|
| neutral-950 | `#000000` | neutral | neutral step 950 | — |
| neutral-50-1 | `#f9fafb` | neutral | neutral step 50 | `gray-50` (Δ0) |
| neutral-800 | `#1d1d1d` | neutral | neutral step 800 | `stone-900` (Δ0.016) |
| neutral-300 | `#9fa8b2` | neutral | neutral step 300 | `gray-400` (Δ0.021) |
| pink-300 | `#e085f4` | pink | pink step 300 | — |
| pink-500 | `#ae3ec9` | pink | pink step 500 | — |
| blue-500 | `#4465e9` | blue | blue step 500 | — |
| neutral-900 | `#0c0d0e` | neutral | neutral step 900 | `stone-950` (Δ0.012) |
| neutral-500 | `#6e7477` | neutral | neutral step 500 | `neutral-500` (Δ0.009) |
| neutral-100 | `#edf0f2` | neutral | neutral step 100 | `gray-100` (Δ0.014) |
| neutral-700-1 | `#323334` | neutral | neutral step 700 | — |
| neutral-50-2 | `#ffffff` | neutral | neutral step 50 | `zinc-50` (Δ0.015) |
| neutral-700-2 | `#2e2e2e` | neutral | neutral step 700 | — |
| blue-400 | `#4ba1f1` | blue | blue step 400 | `blue-400` (Δ0.019) |

## Surfaces (Elevation)
| Level | Name | Hex | Purpose |
|---|---|---|---|
| 0 | background | `#ffffff` | Page background |
| 1 | surface-1 | `#edf0f2` | Cards / elevated panels |
| 2 | surface-2 | `#9fa8b2` | Elevation tier 2 |
| 3 | surface-3 | `#6e7477` | Elevation tier 3 |
| 4 | surface-floor | `#323334` | Elevation tier 4 |

**Elevation philosophy.** Floating UI clusters lift slightly off the canvas with a subtle border and rounded corners. Two elevation tiers: canvas (flat) and floating toolbars (one shadow tier above).

## Typography

### Inter — weight 500
*body*

## Type Scale
| Role | Size | Line-height | Tracking |
|---|---|---|---|
| `display` | 24px | 1.6 |  |
| `body` | 12px | 1.6 |  |
| `link` | 12px | 1.6 |  |
| `ui-action` | 12px | 1.6 |  |

## Spacing & Radius

**Radius**
- `none`: 0
- `lg`: 9px

**Spacing**
- `base`: 4px

## Layout
Two floating clusters anchored to the bottom (toolbar) and right (style/color/shape pickers). Top-left holds branding + menu. The rest is the infinite canvas.

## Imagery
No marketing imagery — this is the live product surface. Vibrant categorical color swatches, simple geometric shape primitives, and arrow/text/sticker tool icons.

## Do
- Keep the canvas white and chrome-light — the drawing space is the product
- Use the bottom toolbar pattern for primary tools — it's the navigational anchor
- Anchor the color picker on the right with full saturation swatches in a 4-column grid
- Pair vibrant categorical colors with neutral controls (black tools, gray surfaces)

## Don't
- Don't add chrome bars, sidebars, or borders to the canvas
- Don't use serif type — the whole UI is sans/system
- Don't shadow the floating panels heavily; subtle elevation is enough
- Don't crowd the toolbar — group by function, hide advanced behind overflow