{
  "theme": "light",
  "category": "creative",
  "tags": [
    "warm",
    "sans-only",
    "type-first",
    "minimal",
    "playful",
    "vibrant",
    "creative",
    "soft-corners"
  ],
  "northStar": "An infinite-canvas whiteboard that's instantly familiar — the toolbar is the entire UI, the rest is yours.",
  "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": "neutral-950",
      "hex": "#000000",
      "group": "neutral",
      "role": "neutral step 950",
      "tailwind": null
    },
    {
      "name": "neutral-50-1",
      "hex": "#f9fafb",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "gray-50",
        "hex": "#f9fafb",
        "deltaE": 0
      }
    },
    {
      "name": "neutral-800",
      "hex": "#1d1d1d",
      "group": "neutral",
      "role": "neutral step 800",
      "tailwind": {
        "name": "stone-900",
        "hex": "#1c1917",
        "deltaE": 0.016
      }
    },
    {
      "name": "neutral-300",
      "hex": "#9fa8b2",
      "group": "neutral",
      "role": "neutral step 300",
      "tailwind": {
        "name": "gray-400",
        "hex": "#99a1af",
        "deltaE": 0.021
      }
    },
    {
      "name": "pink-300",
      "hex": "#e085f4",
      "group": "pink",
      "role": "pink step 300",
      "tailwind": null
    },
    {
      "name": "pink-500",
      "hex": "#ae3ec9",
      "group": "pink",
      "role": "pink step 500",
      "tailwind": null
    },
    {
      "name": "blue-500",
      "hex": "#4465e9",
      "group": "blue",
      "role": "blue step 500",
      "tailwind": null
    },
    {
      "name": "neutral-900",
      "hex": "#0c0d0e",
      "group": "neutral",
      "role": "neutral step 900",
      "tailwind": {
        "name": "stone-950",
        "hex": "#0c0a09",
        "deltaE": 0.012
      }
    },
    {
      "name": "neutral-500",
      "hex": "#6e7477",
      "group": "neutral",
      "role": "neutral step 500",
      "tailwind": {
        "name": "neutral-500",
        "hex": "#737373",
        "deltaE": 0.009
      }
    },
    {
      "name": "neutral-100",
      "hex": "#edf0f2",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "gray-100",
        "hex": "#f3f4f6",
        "deltaE": 0.014
      }
    },
    {
      "name": "neutral-700-1",
      "hex": "#323334",
      "group": "neutral",
      "role": "neutral step 700",
      "tailwind": null
    },
    {
      "name": "neutral-50-2",
      "hex": "#ffffff",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "zinc-50",
        "hex": "#fafafa",
        "deltaE": 0.015
      }
    },
    {
      "name": "neutral-700-2",
      "hex": "#2e2e2e",
      "group": "neutral",
      "role": "neutral step 700",
      "tailwind": null
    },
    {
      "name": "blue-400",
      "hex": "#4ba1f1",
      "group": "blue",
      "role": "blue step 400",
      "tailwind": {
        "name": "blue-400",
        "hex": "#51a2ff",
        "deltaE": 0.019
      }
    }
  ],
  "surfaces": [
    {
      "level": 0,
      "name": "background",
      "hex": "#ffffff",
      "purpose": "Page background"
    },
    {
      "level": 1,
      "name": "surface-1",
      "hex": "#edf0f2",
      "purpose": "Cards / elevated panels"
    },
    {
      "level": 2,
      "name": "surface-2",
      "hex": "#9fa8b2",
      "purpose": "Elevation tier 2"
    },
    {
      "level": 3,
      "name": "surface-3",
      "hex": "#6e7477",
      "purpose": "Elevation tier 3"
    },
    {
      "level": 4,
      "name": "surface-floor",
      "hex": "#323334",
      "purpose": "Elevation tier 4"
    }
  ],
  "elevationPhilosophy": "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": [
    {
      "family": "Inter",
      "weight": "500",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    }
  ],
  "typeScale": [
    {
      "role": "display",
      "size": 24,
      "lineHeight": 1.6,
      "letterSpacing": null
    },
    {
      "role": "body",
      "size": 12,
      "lineHeight": 1.6,
      "letterSpacing": null
    },
    {
      "role": "link",
      "size": 12,
      "lineHeight": 1.6,
      "letterSpacing": null
    },
    {
      "role": "ui-action",
      "size": 12,
      "lineHeight": 1.6,
      "letterSpacing": null
    }
  ],
  "spacing": {
    "radius": {
      "none": "0",
      "lg": "9px"
    },
    "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.",
  "dos": [
    "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)"
  ],
  "donts": [
    "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"
  ],
  "brandColor": {
    "hex": "#ae3ec9",
    "source": "heuristic",
    "chroma": 0.219
  }
}