CURATED · OPEN · FREE

tldraw

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

designtool

↓ Download design system (0 MB)Open in OpenDesign

Visit: https://www.tldraw.com

📦 Browse pack contents →

Identity DNA

canvasdrawingwhiteboardminimalutility

A clean, digital whiteboard with hidden chrome

Color

#2070f0Accent

#000000Ink

#2e2e2eInk soft

#ffffffBG

#f9fafbBG soft

#6e7477Muted

rgba(0,0,0,0.1)Line

Neutral canvas with a single vibrant blue for primary actions

Typography

humanist-sans

body12px · 500
caption16px · 500
h124px · 700

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

Spacing

2px

4px

8px

12px

16px

24px

32px

8px base grid

Surfaces

sm · 9px

md · 11px

lg · 14px

pill · 999px

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.16) 0px 0px 2px 0px · rgba(0, 0, 0, 0.24) 0px 2px 3px 0px

Motion & Interaction

200msmicro

400mssmall

800msmedium

ease-in-outeasing

Smooth transitions for UI panel visibility

Cursor changes to pointer on interactive elements · Active states indicated by color changes or subtle shadows

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.

Voice & Don'ts

Tone minimal, functional, and unobtrusive
Headlines Concise, action-oriented labels
CTAs Direct and clear, like 'Sign in to share'

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.
Avoid: Cluttering the canvas with unnecessary UI
Avoid: Using overly decorative fonts
Avoid: Employing a wide range of primary colors

Inside the pack — real screenshots

tldraw — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko