Switch between the rendered Visual preview and the Raw DESIGN.md.
tldraw's design system embodies the essence of a minimal, intelligent whiteboarding tool—clean, distraction-free, and purposefully functional. The visual language prioritizes clarity and directness, using a sophisticated dark-neutral foundation paired with precisely calibrated accent colors that emerge only when needed. The aesthetic is modern and stripped-back, avoiding unnecessary ornamentation while maintaining warmth through carefully chosen grays and purple-blue accents. This creates an environment where content and collaboration take center stage, allowing users to focus entirely on creative expression without competing visual noise.
Key Characteristics:
#0C0D0E): Primary text, headings, and dominant UI elements; the foundational color establishing the system's refined aesthetic#000000): Deepest text color and high-contrast elements; used for maximum readability and visual weight#3182ED): Primary interactive accent; used for links, primary CTAs, and highlight states#AE3EC9): Secondary accent for collaborative highlights and feature emphasis#E085F4): Tertiary accent; bright call-to-action and feature distinction#4465E9): Interactive element accent; alternative blue for button states#4BA1F1): Light interactive accent; used for secondary actions and hover states#EDD0F2): Light neutral button background for secondary actions (inferred from neutral scale)#F9FAFB): Interactive element backgrounds; hover states and subtle surface elevation#2E2E2E): Secondary text and reduced-prominence UI elements#888D91): Tertiary text and disabled states#6E7477): Icon color and muted content#909090): Border and divider color#FCFCFC): Subtle background variation and card surfaces#FFFFFF): High-contrast backgrounds and content containers#FFFFFF): Primary container background for cards and modal surfaces#F9FAFB): Subtle section differentiation and UI containers#909090): Structural dividers and component outlines#4CB05E): Confirmation states, successful actions, and positive feedback#F1AC4B): Cautionary states and attention-requiring notifications#E03131): Error states, destructive actions, and critical feedbackPrimary: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif
Secondary: Inter (system-wide default; no secondary font stack needed)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Hero | Inter | 32px | 700 | 44.8px | -0.02em | Large headings and page titles |
| Heading 1 | Inter | 24px | 700 | 38.4px | -0.01em | Section headings and major content blocks |
| Heading 2 | Inter | 20px | 600 | 32px | -0.01em | Subsection headings and feature titles |
| Heading 3 | Inter | 16px | 600 | 25.6px | 0em | Card titles and component headings |
| Body Large | Inter | 14px | 400 | 22.4px | 0em | Primary body text and descriptions |
| Body Regular | Inter | 12px | 500 | 19.2px | 0em | Standard body copy, UI labels, and interactive text |
| Caption | Inter | 11px | 400 | 17.6px | 0.02em | Small informational text and metadata |
| Label / Button | Inter | 12px | 500 | 19.2px | 0em | Button text, form labels, and navigation items |
| Code / Monospace | "Courier New", monospace | 12px | 400 | 19.2px | 0em | Code snippets and technical content |
#EDD0F2 (light neutral, inferred from interactive patterns)#2E2E2E12px500Inter8px 16px9px0px none40px19.2px#E0D0F2, text remains #2E2E2E#D0C0F2, slight inset shadow inset 0 1px 3px rgba(0, 0, 0, 0.1)#F5F5F5, text color #909090, cursor not-allowedrgba(0, 0, 0, 0) (transparent)#0C0D0E12px500Inter0px0px0px none40px19.2px#3182ED, background remains transparent#4465E9, underline 1px solid #4465E9#909090, cursor not-allowedrgba(0, 0, 0, 0) (transparent)#6E747712px500Inter0px 12px0px0px none40px40px19.2px#F9FAFB, text color #0C0D0E#FCFCFC, text color #0C0D0E, subtle inset shadow#909090, cursor not-allowedrgba(0, 0, 0, 0) (transparent)#6E747712px500Inter0px0px0px none28px28px19.2px#F9FAFB, text color #0C0D0E#FCFCFC, text color #0C0D0Ergba(0, 0, 0, 0) (transparent)#00000012px500Inter0px 8px0px0px none30px19.2pxnone (default), underline (hover)#3182ED, underline 1px solid #3182ED#4465E9, underline 2px solid #4465E9#AE3EC9rgba(0, 0, 0, 0) (transparent)#0C0D0E12px500Inter4px 8px 4px 10px0px0px none40px19.2pxnone (default)#3182ED, background rgba(49, 130, 237, 0.08)#4465E9, background rgba(68, 101, 233, 0.12)#FFFFFF1px solid #E0E0E0 (inferred neutral border)9px16px0 1px 3px rgba(0, 0, 0, 0.08)0 4px 12px rgba(0, 0, 0, 0.12), background #FCFCFC#F9FAFB1px solid #E8E8E8 (inferred)9px16px 12pxnone#FFFFFF, border 1px solid #E0E0E0#FFFFFF1px solid #D0D0D0 (inferred)6px (slightly smaller than buttons)8px 12px12px400Inter#2E2E2E19.2px2px solid #3182ED, box shadow 0 0 0 3px rgba(49, 130, 237, 0.1)#888D91#F5F5F5, border 1px solid #D8D8D8, text color #909090, cursor not-allowed16px1px solid #D0D0D03px#FFFFFF#3182ED#FFFFFF0 0 0 2px rgba(49, 130, 237, 0.2), border 1px solid #3182ED16px2px solid #D0D0D050%#FFFFFF6px diameter, color #3182ED0 0 0 2px rgba(49, 130, 237, 0.2)#FFFFFF1px solid #E8E8E856px (inferred)0 16px#0C0D0E#3182ED2px solid #3182ED4px#6E7477none#0C0D0E, background rgba(0, 0, 0, 0.04)#4CB05E#FFFFFF11px5004px 8px4pxnone#F1AC4B#FFFFFF11px5004px 8px4pxnone#E03131#FFFFFF11px5004px 8px4pxnoneBase Unit: 4px
Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
Usage Context:
8px (small/compact), 12px (standard), 16px (generous)24px (tight), 32px (standard), 48px (loose)12px (compact), 16px (standard), 24px (spacious)64px (desktop), 32px (tablet), 16px (mobile)12px (headers/footers), 16px (content areas)1200px16px between columns (desktop), 12px (tablet), 8px (mobile)64px vertical, 16px horizontal (desktop); 48px vertical, 12px horizontal (tablet); 32px vertical, 16px horizontal (mobile)1000px for reading-focused content; full-width minus gutters for collaborative/whiteboard areasWhitespace is treated as an active design element, not empty space. The system employs generous margins and padding to create visual breathing room and reduce cognitive load. Every element is surrounded by adequate space to establish clear relationships and hierarchy. Whitespace amplifies content importance and facilitates quick scanning and comprehension in a collaborative environment where visual clarity is paramount.
0px (buttons, navigation items, and utilitarian elements)4px (form inputs, badges, and compact components)6px (secondary cards and medium containers)9px (primary buttons, cards, and featured components)50% (avatars, icon buttons, and radio buttons)| Level | Treatment | Use |
|---|---|---|
| Flat (L0) | box-shadow: none | Backgrounds, card surfaces, and baseline UI |
| Raised (L1) | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) | Standard cards, panels, and subtle elevation |
| Elevated (L2) | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) | Hover states on cards, dropdowns, and secondary panels |
| Prominent (L3) | box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) | Modal overlays, popovers, and high-priority content |
| Floating (L4) | box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20) | Floating action buttons, top-level modals, and floating toolbars |
Shadow Philosophy:
The elevation system uses subtle, soft shadows that increase in blur and spread as depth increases. Shadows are always dark with low opacity (rgba(0, 0, 0, 0.08–0.20)), maintaining the refined aesthetic while providing clear depth cues. The system avoids harsh, high-contrast shadows that could disrupt the clean whiteboarding canvas. Shadows are applied conservatively—primarily to interactive elements, hover states, and modal surfaces—allowing the content area to remain visually calm and focused.
#0C0D0E and #000000 for text and dominant UI; use #2E2E2E, #6E7477, and #888D91 for progressive de-emphasis.#3182ED) as the primary interactive accent. Use it consistently for links, primary CTAs, focus states, and active navigation items.8px padding for buttons and 12px gap between form controls ensures clarity and prevents accidental taps on mobile.#4CB05E, #F1AC4B, and #E03131 for status messaging.16px, gaps use 12px). This creates visual coherence and predictable layouts.#3182ED and #AE3EC9) in the same interactive context. Reserve purple for secondary emphasis and feature distinction; blue is always primary interaction.0px for clarity and efficiency; only primary and secondary cards use rounded corners.8px vertically or 12px horizontally. Minimum button touch target is 40px × 40px for accessibility.#909090) for text smaller than 12px. Contrast degrades; use darker grays for captions and fine print.64px for internal component margins. Larger separation should be achieved through section breaks or visual containers.rgba(49, 130, 237, 0.08)) for larger content areas.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile (XS) | 320px–479px | Single column, full-width containers, stacked navigation, 16px page margins, 8px component gaps |
| Mobile (SM) | 480px–767px | Single column, 16px page margins, 12px component gaps, bottom navigation for mobile |
| Tablet (MD) | 768px–1023px | 2–3 column grid, 32px page margins, 16px gutter width, collapsible navigation |
| Desktop (LG) | 1024px–1279px | 4–6 column grid, 48px page margins, 16px gutter width, full horizontal navigation |
| Desktop (XL) | 1280px+ | 12-column grid, 64px page margins, centered max-width container 1200px |
44px × 44px (mobile); 40px × 40px (desktop)40px minimum (all platforms)40px × 40px (mobile), 32px × 32px (desktop, if necessary)8px 12px minimum to meet touch-friendly spacing40px (mobile and desktop for consistency)8px horizontal/vertical clearance to prevent accidental activation56px height); tablet uses collapsible hamburger menu with slide-out drawer; mobile uses bottom tab navigation.16px gutter; tablet reduces column count and increases gutter to 12px; mobile stacks vertically with 24px gap between cards.500px centered on screen; tablet and mobile modals expand to full width minus 16px margins with bottom alignment.#3182ED)#0C0D0E)#2E2E2E), Medium Gray (#888D91)#FFFFFF)#F9FAFB)#909090)#4CB05E)#F1AC4B)#E03131)#E085F4), Vibrant Purple (#AE3EC9)#6E7477) text on transparent background#F9FAFB)Always use #3182ED (Blueprint Blue) as the primary interactive color for links, primary button backgrounds, focus states, and active navigation indicators. This is the visual anchor for all interactive feedback.
Apply consistent 12px / 500 weight / 19.2px line-height to all button and navigation text. This creates a unified interaction language across all clickable elements.
Use the button height standard of 40px for all interactive elements (buttons, inputs, selects, navigation items) to maintain visual rhythm and touch-friendly dimensions.
Reserve #0C0D0E (Brand Dark) for all primary text, headings, and strong visual emphasis. Use progressively lighter grays (#2E2E2E, #6E7477, #888D91) for secondary, tertiary, and disabled text respectively.
Apply border-radius 9px only to primary cards, secondary containers, and featured buttons. Keep navigation items, utility buttons, and form elements at 0px for clarity and efficiency.
Implement the elevation system strictly: flat (L0), raised (L1, 0 1px 3px), elevated (L2, 0 4px 12px), prominent (L3, 0 8px 24px), floating (L4, 0 12px 32px). Shadows increase only with interaction or overlay depth; no shadow stacking.
Use semantic color codes consistently: #4CB05E (success), #F1AC4B (warning), #E03131 (error). These are mutually exclusive state indicators and must never be mixed or reinterpreted.
Maintain the spacing base unit of 4px and scale: 4, 8, 12, 16, 24, 32, 48, 64px. Component padding uses 8px/12px/16px; margins use 24px/32px/48px; gaps use 12px/16px/24px.
Ensure all text meets WCAG AA contrast minimum of 4.5:1 (normal text) or 3:1 (large text ≥18px or ≥14px bold). Never use #909090 or lighter for body text; reserve for disabled/ghost states.
On mobile, enforce a minimum touch target of 44px × 44px and ensure 8px minimum clearance between tap targets. Use the responsive breakpoint strategy to adapt layouts from desktop 12-column grid to tablet 6-column grid to mobile single-column stacked layout.