A deliberately quiet developer surface built so the live canvas can be the loud thing — restrained and light rather than the hand-drawn look the category suggests, with the playful shape palette confined to the embedded editor and never leaking into chrome; Archivo is set with a line-height below the font size and tracking held constant across both display roles, everything beneath them collapses to 14px, and three separate token families cover light chrome, a complete inverted set and code frames.
Browse tldraw in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: tldraw.dev (live DOM, computed styles + the published shadcn-style--background/--primary/--alt-*token set), 2026-07-19. Coverage: SDK marketing / developer landing. The editor product itself is embedded live on the page; a separateapp/capture is not required. Note: the site is light and restrained, not the playful hand-drawn chalk look the category hint implied — the playfulness lives inside the embedded canvas, not in the chrome.
tldraw's developer site is deliberately quiet so the live canvas can be the loud thing. The chrome is a near-white #fefefe with pure-black headings, #404047 body text, #e3e3e3 hairlines and one blue #155dfc — an ordinary, well-built SaaS surface. What makes it distinctive is the split: an **alt-* token family (#0d0d0d surface, #fff foreground) gives the page a fully-specified inverted mode used for dark panels and the secondary CTA, and a separate code-chrome-* family styles code frames independently of both. Type is Archivo throughout at a very compressed scale — headings are 48px and 32px with line-height *below* the font size** (48/45.12, 32/30.08) and -0.96px tracking, while everything else, including h3 subheadings, sits at just 14px. Colour appears only in the embedded editor's shape palette. Feels: restrained, developer-first, tightly set, canvas-forward.
| Token | Hex | Role / usage |
|---|---|---|
background | #fefefe | Page canvas |
foreground | #1d1d1d | Default foreground |
card / popover | #fff | Card and popover fill |
card-foreground / popover-foreground | #1d1d1d | Text on card/popover |
primary | #155dfc | THE accent — primary button |
primary-hover | #2b7fff | Primary hover |
primary-foreground | #fff | Text on primary |
secondary | #fafafa | Secondary fill |
secondary-foreground | #262626 | Text on secondary |
muted | #fafafa | Muted fill |
muted-background | #f4f4f5 | Muted ground |
muted-foreground | #aaa | Muted text |
text | #404047 | Body copy |
emphasis / heading-foreground | #000 | Headings |
border / input | #e3e3e3 | Hairlines and field borders |
overlay | #000 | Modal overlay |
highlight | #fafa98 | Highlighter yellow |
star-accent | #fe9a00 | GitHub-star accent |
alt-*) family| Token | Hex |
|---|---|
alt-surface | #0d0d0d |
alt-surface-hover | #18181b |
alt-foreground | #fff |
alt-foreground-hover | #fefefe |
alt-muted-foreground | #ccc |
alt-muted | #ccc |
code-chrome-*) family| Token | Hex |
|---|---|
code-background | #ebeded |
code-chrome-surface | #18181b |
code-chrome-foreground | #fafafa |
code-chrome-muted-foreground | #a1a1aa |
code-chrome-border | #27272a |
code-chrome-frame | #e4e4e7 |
violet #ae3ec9 · light-violet #e085f4 · blue #4465e9 · light-blue #4ba1f1 · orange #f1ac4b · grey #9fa8b2 · grey-2 #888d91 · ink #2e2e2e
#c586c0 keyword · #569cd6 type · #9cdcfe identifier · #ce9178 string · #d4d4d4 default · #808080 comment · #cccccc chrome
Rules. Chrome is white, black and one blue. The shape palette belongs to the *canvas* and must not leak into buttons or headings. The alt-* family is a complete inverted set — use it wholesale for dark panels rather than hand-mixing darks.
Archivo, "Archivo Fallback" for all text"Geist Mono", "Geist Mono Fallback"| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero h1 | 48/45.12 | 600 | -0.96px |
| Section h2 | 32/30.08 | 600 | -0.96px |
| Sub-heading h3 | 14/19.25 | 500 | normal |
| Body | 14/21 | 400 | normal (#404047) |
| Button label | 14 | 400 (500 on tonal) | normal |
| Small button | 12 | 500 | normal |
Patterns: both display roles run a line-height below the font size (48/45.12 and 32/30.08 — a 0.94 ratio) with -0.96px tracking held constant at both sizes rather than scaled. Below the two display roles the scale collapses hard: h3 subheadings and body copy are both 14px, so hierarchy comes almost entirely from weight (600 / 500 / 400) and colour (black / #404047). Sentence case throughout.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.