@import "tailwindcss";

@theme {
  /* palette */
  --color-neutral-950: #000000;
  --color-neutral-50-1: #f9fafb;
  --color-neutral-800: #1d1d1d;
  --color-neutral-300: #9fa8b2;
  --color-pink-300: #e085f4;
  --color-pink-500: #ae3ec9;
  --color-blue-500: #4465e9;
  --color-neutral-900: #0c0d0e;
  --color-neutral-500: #6e7477;
  --color-neutral-100: #edf0f2;
  --color-neutral-700-1: #323334;
  --color-neutral-50-2: #ffffff;
  --color-neutral-700-2: #2e2e2e;
  --color-blue-400: #4ba1f1;

  /* surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #edf0f2;
  --color-surface-2: #9fa8b2;
  --color-surface-3: #6e7477;
  --color-surface-4: #323334;

  /* fonts */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* type scale (utilities: text-{role}, leading-{role}, tracking-{role}) */
  --text-display: 24px;
  --text-display--line-height: 1.6;
  --text-display--letter-spacing: nullpx;
  --text-body: 12px;
  --text-body--line-height: 1.6;
  --text-body--letter-spacing: nullpx;
  --text-link: 12px;
  --text-link--line-height: 1.6;
  --text-link--letter-spacing: nullpx;
  --text-ui-action: 12px;
  --text-ui-action--line-height: 1.6;
  --text-ui-action--letter-spacing: nullpx;

  /* radii (utilities: rounded-{name}) */
  --radius-none: 0;
  --radius-lg: 9px;

  /* spacing (utilities: p-{key}, m-{key}, gap-{key}, …) */
  --spacing-base: 4px;
}

:root {
  /* palette */
  --color-neutral-950: #000000;
  --color-neutral-50-1: #f9fafb;
  --color-neutral-800: #1d1d1d;
  --color-neutral-300: #9fa8b2;
  --color-pink-300: #e085f4;
  --color-pink-500: #ae3ec9;
  --color-blue-500: #4465e9;
  --color-neutral-900: #0c0d0e;
  --color-neutral-500: #6e7477;
  --color-neutral-100: #edf0f2;
  --color-neutral-700-1: #323334;
  --color-neutral-50-2: #ffffff;
  --color-neutral-700-2: #2e2e2e;
  --color-blue-400: #4ba1f1;

  /* surfaces */
  --surface-0: #ffffff;
  --surface-1: #edf0f2;
  --surface-2: #9fa8b2;
  --surface-3: #6e7477;
  --surface-4: #323334;

  /* type scale */
  --text-display: 24px;
  --leading-display: 1.6;
  --tracking-display: nullpx;
  --text-body: 12px;
  --leading-body: 1.6;
  --tracking-body: nullpx;
  --text-link: 12px;
  --leading-link: 1.6;
  --tracking-link: nullpx;
  --text-ui-action: 12px;
  --leading-ui-action: 1.6;
  --tracking-ui-action: nullpx;

  /* font families */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

  /* radii */
  --radius-none: 0;
  --radius-lg: 9px;

  /* spacing */
  --spacing-base: 4px;
}

{
  "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
  }
}