@tangle-network/brand 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# Changelog
+
+## 0.2.0 — 2026-05-04
+
+- **Breaking:** stops shipping fonts (`src/styles/fonts.css` removed, `./styles/fonts.css` export removed). Consumer apps must now load fonts themselves via `@fontsource/*` (recommended) or HTML `<link>`. Reasoning:
+  - `@import url(...)` inside library CSS breaks downstream when CSS chain-imports get reordered (mirrors `tangle-network/sandbox-ui#28`).
+  - Library-shipped Google Fonts requests are privacy-hostile.
+  - Consumers cannot fall back when the network fails.
+  See README "Fonts" section for migration.
+- Selection color updated to teal `rgba(56, 178, 172, 0.22)` for cross-package consistency with sandbox-ui.
+- Added GitHub Actions release workflow (`.github/workflows/release.yml`) — auto-publishes to npm and GitHub Packages on `package.json` version bump merged to `main`.
+
+## 0.1.0 — 2026-04-24
+
+Initial release. Extracted from `@tangle-network/sandbox-ui` as the single source of truth for Tangle brand across every app.
+
+- Design tokens: MD3 + shadcn HSL bridge, dark (`:root`) + light (`[data-sandbox-theme="vault"]`)
+- Depth stack, status colors, brand accent (indigo), code/syntax palette
+- Fonts: Geist / Geist Mono / Outfit / Manrope / Inter via Google Fonts
+- Tailwind v4 `@theme` preset: `bg-brand*`, `bg-depth-*`, `text-fg*`, `text-status-*`, font-family + radii
+- Logo: `TangleKnot` SVG and `Logo` composed component, sizes `sm | md | lg | xl`, optional suffix
+- Base styles + utilities: `.text-gradient-brand`, `.glow-brand`, `.surface-card`, `.bg-mesh`, `.noise`, `.status-dot-*`

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tangle Network
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# @tangle-network/brand
+
+Single source of truth for the Tangle design system. Design tokens, logo, and a Tailwind v4 theme preset, shared across every Tangle app (`tangle-website`, `sandbox-ui`, `evals`, `agent-builder`, product surfaces).
+
+**Scope:** tokens, not components. Components live in `@tangle-network/sandbox-ui`.
+
+## Install
+
+```bash
+pnpm add @tangle-network/brand
+```
+
+## Use
+
+### Tailwind v4 app
+
+```css
+/* app.css */
+@import "@tangle-network/brand/styles";
+@import "tailwindcss";
+```
+
+That single import wires:
+
+- CSS custom properties for dark (`:root`) and light (`[data-sandbox-theme="vault"]`)
+- Tailwind v4 `@theme` block so `bg-brand`, `text-fg-muted`, `rounded-lg`, `font-display`, etc. just work
+- Base styles and a handful of utility classes (`.text-gradient-brand`, `.depth-1..4`, `.status-dot-*`)
+
+Fonts are **not** bundled — see [Fonts](#fonts) below.
+
+### Finer control
+
+```css
+@import "@tangle-network/brand/styles/tokens";
+@import "tailwindcss";
+@import "@tangle-network/brand/styles/theme";
+@import "@tangle-network/brand/styles/globals";
+```
+
+### Logo
+
+```tsx
+import { Logo, TangleKnot } from "@tangle-network/brand";
+
+<Logo size="lg" />
+<Logo size="md" suffix="Sandbox" />
+<TangleKnot size={48} />
+```
+
+## What's in the palette
+
+- **Accent** — indigo `#6366F1` / `#818CF8` / `#A5AAFC`
+- **Depth stack** — `#0C0B1D` → `#262448` (dark); `#f4f4f9` → `#dcdbe8` (light)
+- **Status** — emerald / amber / coral for running / stopped / error
+- **Radii** — 6/8/12/16px (dark); 2/4/6/8px (light/"vault")
+
+Light theme activates via `data-sandbox-theme="vault"` on a parent element.
+
+## Fonts
+
+brand references the following font families in its design tokens but does **not** bundle them — consumer apps must load the fonts themselves. This is deliberate:
+
+- (a) `@import url(...)` inside library CSS breaks downstream when CSS chain-imports get reordered — once the dist CSS is inlined after any rule, the URL `@import` is no longer at the top of the merged stylesheet, the CSS spec disallows it, and PostCSS rejects the build. Mirrors `tangle-network/sandbox-ui#28`.
+- (b) Shipping a third-party Google Fonts request from a library is privacy-hostile.
+- (c) Consumers cannot fall back when the network fails.
+
+| Family       | Role                                | Used as CSS variable |
+| ------------ | ----------------------------------- | -------------------- |
+| Geist        | UI body text (dark)                 | `--font-sans`        |
+| Geist Mono   | Code, terminal                      | `--font-mono`        |
+| Outfit       | Display / headings (dark)           | `--font-display`     |
+| Manrope      | Display / headings (vault)          | `--font-display`     |
+| Inter        | UI body text (vault)                | `--font-sans`        |
+
+Pick one loading strategy that fits your app:
+
+**1. Self-hosted via `@fontsource/*`** (recommended — no external network request):
+
+```bash
+pnpm add @fontsource/geist-sans @fontsource/geist-mono @fontsource/outfit @fontsource/manrope @fontsource/inter
+```
+
+```tsx
+// app entry
+import "@fontsource/geist-sans/400.css";
+import "@fontsource/geist-sans/500.css";
+import "@fontsource/geist-sans/600.css";
+import "@fontsource/geist-sans/700.css";
+import "@fontsource/geist-mono/400.css";
+import "@fontsource/geist-mono/500.css";
+import "@fontsource/outfit/500.css";
+import "@fontsource/outfit/700.css";
+import "@fontsource/manrope/500.css";
+import "@fontsource/manrope/700.css";
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/600.css";
+```
+
+**2. Google Fonts via HTML `<link>`:**
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap"
+/>
+```
+
+Any family you omit falls back per the `--font-*` token chain.
+
+## Policy
+
+- **No additions without a cross-app audit.** New tokens land here or nowhere; do not fork this into apps.
+- **Version as a product.** Semver. Breaking token changes are major bumps.
+- **Sandbox-ui as the stress-test surface.** Tokens ship here only after sandbox-ui has used them in anger.
+
+## Development
+
+```bash
+pnpm install
+pnpm build
+```
+
+To iterate inside a consuming app, link locally:
+
+```bash
+# in ~/webb/brand
+pnpm link --global
+
+# in the consumer
+pnpm link --global @tangle-network/brand
+```
+
+Or use a `file:` path dependency (`"@tangle-network/brand": "file:../brand"`).

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LogoProps {
+    size?: "sm" | "md" | "lg" | "xl";
+    variant?: "full" | "icon";
+    suffix?: string | null;
+    className?: string;
+}
+declare function TangleKnot({ size, className, }: {
+    size?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function Logo({ size, variant, suffix, className, }: LogoProps): react_jsx_runtime.JSX.Element;
+
+export { Logo, type LogoProps, TangleKnot };

package/dist/index.js

@@ -0,0 +1,67 @@
+// src/logo.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: { icon: 24, text: "text-base", suffix: "text-xs", gap: "gap-1.5" },
+  md: { icon: 28, text: "text-lg", suffix: "text-sm", gap: "gap-2" },
+  lg: { icon: 36, text: "text-2xl", suffix: "text-base", gap: "gap-2.5" },
+  xl: { icon: 48, text: "text-3xl", suffix: "text-lg", gap: "gap-3" }
+};
+function TangleKnot({
+  size = 32,
+  className
+}) {
+  const uid = React.useId();
+  const g1 = `tk-a-${uid}`;
+  const g2 = `tk-b-${uid}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "20 45 156 140",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-label": "Tangle",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Tangle" }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: g1, x1: "36.79", y1: "58.78", x2: "145.99", y2: "183.59", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#8E59FF" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#6888F9" })
+          ] }),
+          /* @__PURE__ */ jsxs("linearGradient", { id: g2, x1: "36.78", y1: "169.38", x2: "145.99", y2: "44.57", gradientUnits: "userSpaceOnUse", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#8E59FF" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#6888F9" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("path", { d: "M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z", fill: `url(#${g1})` }),
+        /* @__PURE__ */ jsx("path", { opacity: "0.8", d: "M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z", fill: `url(#${g2})` })
+      ]
+    }
+  );
+}
+function Logo({
+  size = "md",
+  variant = "full",
+  suffix = null,
+  className
+}) {
+  const cfg = sizeConfig[size];
+  if (variant === "icon") {
+    return /* @__PURE__ */ jsx(TangleKnot, { size: cfg.icon, className });
+  }
+  const cls = ["flex items-center", cfg.gap, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
+    /* @__PURE__ */ jsx(TangleKnot, { size: cfg.icon, className: "shrink-0" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: `font-bold tracking-tight ${cfg.text}`, children: "Tangle" }),
+      suffix ? /* @__PURE__ */ jsx("span", { className: `font-medium text-gradient-brand ${cfg.suffix}`, children: suffix }) : null
+    ] })
+  ] });
+}
+export {
+  Logo,
+  TangleKnot
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@tangle-network/brand",
+  "version": "0.2.0",
+  "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tangle-network/brand"
+  },
+  "bugs": {
+    "url": "https://github.com/tangle-network/brand/issues"
+  },
+  "homepage": "https://github.com/tangle-network/brand",
+  "sideEffects": [
+    "./src/styles/*.css",
+    "./dist/styles/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles": {
+      "style": "./src/styles/index.css",
+      "default": "./src/styles/index.css"
+    },
+    "./styles/index.css": "./src/styles/index.css",
+    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/globals.css": "./src/styles/globals.css",
+    "./styles/theme.css": "./src/styles/theme.css"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "prepublishOnly": "pnpm build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.0"
+  },
+  "keywords": [
+    "tangle",
+    "design-system",
+    "brand",
+    "tokens",
+    "tailwind"
+  ]
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { Logo, TangleKnot, type LogoProps } from "./logo.js";

package/src/logo.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+export interface LogoProps {
+  size?: "sm" | "md" | "lg" | "xl";
+  variant?: "full" | "icon";
+  suffix?: string | null;
+  className?: string;
+}
+
+const sizeConfig = {
+  sm: { icon: 24, text: "text-base", suffix: "text-xs", gap: "gap-1.5" },
+  md: { icon: 28, text: "text-lg", suffix: "text-sm", gap: "gap-2" },
+  lg: { icon: 36, text: "text-2xl", suffix: "text-base", gap: "gap-2.5" },
+  xl: { icon: 48, text: "text-3xl", suffix: "text-lg", gap: "gap-3" },
+} as const;
+
+export function TangleKnot({
+  size = 32,
+  className,
+}: {
+  size?: number;
+  className?: string;
+}) {
+  const uid = React.useId();
+  const g1 = `tk-a-${uid}`;
+  const g2 = `tk-b-${uid}`;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="20 45 156 140"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-label="Tangle"
+    >
+      <title>Tangle</title>
+      <defs>
+        <linearGradient id={g1} x1="36.79" y1="58.78" x2="145.99" y2="183.59" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#8E59FF" />
+          <stop offset="1" stopColor="#6888F9" />
+        </linearGradient>
+        <linearGradient id={g2} x1="36.78" y1="169.38" x2="145.99" y2="44.57" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#8E59FF" />
+          <stop offset="1" stopColor="#6888F9" />
+        </linearGradient>
+      </defs>
+      <path d="M170.74 150.082C170.747 142.848 167.464 135.908 161.612 130.784C155.76 125.66 147.818 122.772 139.528 122.754L104.921 122.754C104.704 119.939 104.567 117.062 104.567 114.078C104.567 111.095 104.429 108.231 104.236 105.403L139.528 105.403C147.746 105.288 155.582 102.359 161.347 97.2467C167.112 92.135 170.343 85.2506 170.343 78.0787C170.343 70.9069 167.112 64.0225 161.347 58.9107C155.582 53.799 147.746 50.8696 139.528 50.7545L56.817 50.7545C48.5993 50.8696 40.7628 53.799 34.9981 58.9107C29.2334 64.0225 26.0025 70.9069 26.0025 78.0787C26.0025 85.2506 29.2334 92.135 34.9981 97.2467C40.7628 102.359 48.5993 105.288 56.817 105.403L89.3238 106.163C91.5854 106.163 91.7785 111.095 91.7785 114.078C91.7785 117.062 91.9156 119.925 92.1091 122.754L56.817 122.754C48.5993 122.869 40.7628 125.798 34.9981 130.91C29.2334 136.022 26.0025 142.906 26.0025 150.078C26.0025 157.25 29.2334 164.134 34.9981 169.246C40.7628 174.358 48.5993 177.287 56.817 177.402L139.528 177.402C147.816 177.384 155.757 174.497 161.609 169.374C167.461 164.252 170.745 157.314 170.74 150.082ZM157.952 78.0752C157.954 82.3443 156.016 86.4397 152.562 89.463C149.108 92.4863 144.42 94.1905 139.528 94.2017L102.881 94.2017C101.554 86.2073 99.0244 78.4005 95.3585 70.9829C93.7421 67.7691 91.6728 64.7438 89.1983 61.9769L139.528 61.9769C144.415 61.988 149.097 63.6884 152.55 66.7056C156.003 69.7228 157.946 73.811 157.952 78.0752ZM56.817 94.2017C51.9157 94.2017 47.2151 92.5027 43.7493 89.4784C40.2835 86.4541 38.3364 82.3522 38.3364 78.0752C38.3364 73.7982 40.2835 69.6964 43.7493 66.6721C47.2151 63.6478 51.9157 61.9487 56.817 61.9487L65.1139 61.9487C72.4433 61.9487 79.3856 67.0146 83.7074 75.5071C86.6658 81.491 88.77 87.7697 89.9724 94.2017L56.817 94.2017ZM38.3929 150.082C38.3907 145.812 40.3293 141.717 43.7834 138.694C47.2374 135.67 51.9248 133.966 56.817 133.955L93.4637 133.955C94.7912 141.949 97.3206 149.756 100.987 157.174C102.603 160.388 104.672 163.413 107.147 166.18L56.817 166.18C51.9304 166.169 47.2479 164.468 43.7948 161.451C40.3416 158.434 38.3993 154.346 38.3929 150.082ZM112.686 152.65C109.728 146.666 107.623 140.387 106.421 133.955L139.528 133.955C144.429 133.955 149.13 135.654 152.596 138.678C156.062 141.703 158.009 145.804 158.009 150.082C158.009 154.359 156.062 158.46 152.596 161.485C149.13 164.509 144.429 166.208 139.528 166.208L131.231 166.208C123.934 166.208 116.992 161.142 112.686 152.65Z" fill={`url(#${g1})`} />
+      <path opacity="0.8" d="M170.74 78.0752C170.747 85.3089 167.463 92.2492 161.612 97.3728C155.76 102.496 147.817 105.384 139.527 105.403L104.92 105.403C104.702 108.217 104.565 111.095 104.565 114.078C104.565 117.062 104.428 119.925 104.235 122.754L139.527 122.754C147.745 122.869 155.582 125.798 161.347 130.91C167.112 136.022 170.342 142.906 170.342 150.078C170.342 157.25 167.112 164.134 161.347 169.246C155.582 174.358 147.745 177.287 139.527 177.402L56.8149 177.402C48.597 177.287 40.7604 174.358 34.9956 169.246C29.2307 164.134 25.9998 157.25 25.9998 150.078C25.9998 142.906 29.2307 136.022 34.9956 130.91C40.7604 125.798 48.597 122.869 56.8149 122.754L89.3223 121.994C91.5839 121.994 91.777 117.062 91.777 114.078C91.777 111.095 91.9141 108.231 92.1076 105.403L56.8149 105.403C48.597 105.288 40.7604 102.359 34.9956 97.2468C29.2307 92.135 25.9998 85.2506 25.9998 78.0788C25.9998 70.9069 29.2307 64.0225 34.9956 58.9108C40.7604 53.799 48.597 50.8696 56.8149 50.7545L139.527 50.7545C147.816 50.7731 155.757 53.6602 161.609 58.7823C167.46 63.9043 170.744 70.8428 170.74 78.0752ZM157.952 150.082C157.954 145.812 156.015 141.717 152.561 138.694C149.107 135.67 144.42 133.966 139.527 133.955L102.88 133.955C101.552 141.949 99.023 149.756 95.3571 157.174C93.7406 160.388 91.6712 163.413 89.1968 166.18L139.527 166.18C144.414 166.169 149.097 164.468 152.55 161.451C156.003 158.434 157.945 154.346 157.952 150.082ZM56.8149 133.955C51.9134 133.955 47.2127 135.654 43.7469 138.678C40.2811 141.703 38.334 145.805 38.334 150.082C38.334 154.359 40.2811 158.46 43.7469 161.485C47.2127 164.509 51.9134 166.208 56.8149 166.208L65.1119 166.208C72.4414 166.208 79.3838 161.142 83.7057 152.65C86.6642 146.666 88.7684 140.387 89.9708 133.955L56.8149 133.955ZM38.3904 78.0752C38.3883 82.3443 40.3269 86.4398 43.781 89.4631C47.2351 92.4863 51.9226 94.1905 56.8149 94.2017L93.4622 94.2017C94.7898 86.2073 97.3192 78.4005 100.985 70.983C102.602 67.7692 104.671 64.7438 107.145 61.9769L56.8149 61.9769C51.9282 61.9881 47.2456 63.6884 43.7924 66.7056C40.3392 69.7228 38.3968 73.8111 38.3904 78.0752ZM112.685 75.5071C109.726 81.491 107.622 87.7697 106.42 94.2017L139.527 94.2017C144.429 94.2017 149.13 92.5027 152.595 89.4784C156.061 86.4541 158.008 82.3522 158.008 78.0752C158.008 73.7982 156.061 69.6964 152.595 66.6721C149.13 63.6478 144.429 61.9488 139.527 61.9488L131.23 61.9488C123.933 61.9488 116.991 67.0147 112.685 75.5071Z" fill={`url(#${g2})`} />
+    </svg>
+  );
+}
+
+export function Logo({
+  size = "md",
+  variant = "full",
+  suffix = null,
+  className,
+}: LogoProps) {
+  const cfg = sizeConfig[size];
+
+  if (variant === "icon") {
+    return <TangleKnot size={cfg.icon} className={className} />;
+  }
+
+  const cls = ["flex items-center", cfg.gap, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={cls}>
+      <TangleKnot size={cfg.icon} className="shrink-0" />
+      <div className="flex items-baseline gap-1">
+        <span className={`font-bold tracking-tight ${cfg.text}`}>Tangle</span>
+        {suffix ? (
+          <span className={`font-medium text-gradient-brand ${cfg.suffix}`}>{suffix}</span>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/styles/globals.css

@@ -0,0 +1,105 @@
+/* Tangle brand — base styles + utilities.
+   Mirrors sandbox-ui's globals.css with sandbox-only @source rules stripped.
+   Consumers should @import this AFTER @import "tailwindcss". */
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1,
+      "ss01" 1;
+  }
+
+  ::selection {
+    background: rgba(56, 178, 172, 0.22);
+    color: hsl(var(--hsl-foreground));
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: hsl(var(--border) / 0.7);
+    border-radius: 3px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--muted-foreground) / 0.4);
+  }
+}
+
+@layer utilities {
+  .text-gradient-brand {
+    background-image: var(--tangle-gradient);
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+
+  .glow-brand {
+    box-shadow: 0 0 48px -10px hsl(var(--primary) / 0.45);
+  }
+
+  .depth-1 { background-color: var(--depth-1); }
+  .depth-2 { background-color: var(--depth-2); }
+  .depth-3 { background-color: var(--depth-3); }
+  .depth-4 { background-color: var(--depth-4); }
+
+  .surface-card {
+    background: hsl(var(--card));
+    border: 1px solid hsl(var(--border));
+    transition: border-color var(--transition-default), box-shadow var(--transition-default);
+  }
+
+  .surface-card:hover {
+    border-color: hsl(var(--border));
+  }
+
+  .bg-mesh {
+    position: relative;
+  }
+
+  .bg-mesh::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 80% 50% at 20% 40%, var(--mesh-teal), transparent),
+      radial-gradient(ellipse 60% 40% at 80% 20%, var(--mesh-violet), transparent),
+      radial-gradient(ellipse 50% 60% at 50% 80%, var(--mesh-blue), transparent);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .noise {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
+    pointer-events: none;
+  }
+
+  .status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block;
+    flex-shrink: 0;
+  }
+
+  .status-dot-running { background: var(--status-running); box-shadow: var(--shadow-status-running); }
+  .status-dot-stopped { background: var(--status-stopped); }
+  .status-dot-error { background: var(--status-error); box-shadow: var(--shadow-status-error); }
+}

package/src/styles/index.css

@@ -0,0 +1,10 @@
+/* One-line brand import — pulls tokens + globals + Tailwind v4 theme.
+   Usage in a Tailwind v4 app:
+     @import "@tangle-network/brand/styles";
+     @import "tailwindcss";
+   For finer control, import the individual files.
+   Fonts are NOT bundled — see README "Fonts" for consumer-loads-fonts strategy. */
+
+@import "./tokens.css";
+@import "./theme.css";
+@import "./globals.css";

package/src/styles/theme.css

@@ -0,0 +1,50 @@
+/* Tangle brand — Tailwind v4 @theme block.
+   Maps brand CSS custom properties into Tailwind's color/font/radius system
+   so utilities like `bg-brand-primary`, `text-text-muted`, `rounded-md`,
+   `font-display` work out of the box.
+
+   Consumers include this AFTER `@import "tailwindcss"` and
+   BEFORE their own project-local @theme overrides. */
+
+@theme {
+  /* Typography */
+  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Outfit", "Geist", sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* Radii (dark theme default — light theme overrides in tokens.css) */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-full: 999px;
+
+  /* Core brand accent (indigo) — use as `bg-brand`, `text-brand`, `ring-brand` */
+  --color-brand: #6366F1;
+  --color-brand-dim: #4F46E5;
+  --color-brand-cool: #818CF8;
+  --color-brand-glow: #A5AAFC;
+  --color-brand-emerald: #10B981;
+
+  /* Depth stack — use as `bg-depth-1` ... `bg-depth-4` */
+  --color-depth-1: #0C0B1D;
+  --color-depth-2: #141328;
+  --color-depth-3: #1D1B38;
+  --color-depth-4: #262448;
+
+  /* Semantic text — use as `text-fg`, `text-fg-muted`, `text-fg-dim` */
+  --color-fg: #fdfdfd;
+  --color-fg-muted: #8688B0;
+  --color-fg-dim: #606294;
+
+  /* Status — use as `text-status-running`, `bg-status-stopped` */
+  --color-status-running: #10B981;
+  --color-status-creating: #9B93F0;
+  --color-status-stopped: #FFB800;
+  --color-status-error: #FF4D6D;
+
+  /* Shadows — use as `shadow-card`, `shadow-glow` */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
+}

package/src/styles/tokens.css

@@ -0,0 +1,492 @@
+/* Tangle Sandbox UI design tokens */
+/* Brand: warm purple palette, #5B4ED4 primary */
+
+/* MD3 surface hierarchy */
+:root,
+[data-sandbox-ui] {
+  --md3-surface: #0a0a14;
+  --md3-surface-dim: #07070d;
+  --md3-surface-bright: #1b1a2c;
+  --md3-surface-container-lowest: #000001;
+  --md3-surface-container-low: #0d0c18;
+  --md3-surface-container: #11101e;
+  --md3-surface-container-high: #171624;
+  --md3-surface-container-highest: #1f1e30;
+  --md3-surface-variant: #1f1e30;
+  --md3-on-surface: #fdfdfd;
+  --md3-on-surface-variant: #aaa8b8;
+
+  --md3-primary: #818CF8;
+  --md3-primary-dim: #6366F1;
+  --md3-primary-container: #4F46E5;
+  --md3-on-primary: #ffffff;
+  --md3-on-primary-container: #E0E7FF;
+  --md3-primary-fixed: #A5AAFC;
+  --md3-primary-fixed-dim: #818CF8;
+
+  --md3-secondary: #C7D2FE;
+  --md3-secondary-dim: #A5B4FC;
+  --md3-secondary-container: #312E81;
+  --md3-on-secondary: #E8E5FF;
+  --md3-on-secondary-container: #E8E5FF;
+
+  --md3-tertiary: #10B981;
+  --md3-outline: #434260;
+  --md3-outline-variant: #2A293D;
+
+  --md3-error: #ff5277;
+  --md3-error-dim: #eb2855;
+  --md3-error-container: #82042b;
+  --md3-on-error: #ffffff;
+  --md3-on-error-container: #ffbdf2;
+
+  --md3-inverse-surface: #fdfdfd;
+  --md3-inverse-primary: #4F46E5;
+  --md3-inverse-on-surface: #000000;
+  --md3-surface-tint: #818CF8;
+
+  /* Semantic HSL bridge */
+  --hsl-background: 244 28% 5%;
+  --hsl-foreground: 240 18% 94%;
+  --hsl-card: 246 30% 11%;
+  --hsl-card-foreground: 240 18% 94%;
+  --hsl-popover: 246 28% 14%;
+  --hsl-popover-foreground: 240 18% 94%;
+  --hsl-primary: 239 84% 67%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 248 24% 18%;
+  --hsl-secondary-foreground: 240 16% 90%;
+  --hsl-muted: 246 22% 15%;
+  --hsl-muted-foreground: 240 14% 58%;
+  --hsl-accent: 248 26% 20%;
+  --hsl-accent-foreground: 240 16% 92%;
+  --hsl-destructive: 348 90% 60%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 244 14% 22%;
+  --hsl-input: 246 28% 14%;
+  --hsl-ring: 239 84% 67%;
+  --hsl-success: 160 84% 39%;
+  --hsl-warning: 40 94% 56%;
+  --hsl-info: 200 88% 56%;
+
+  /* Tailwind/shadcn aliases */
+  --background: var(--hsl-background);
+  --foreground: var(--hsl-foreground);
+  --card: var(--hsl-card);
+  --card-foreground: var(--hsl-card-foreground);
+  --popover: var(--hsl-popover);
+  --popover-foreground: var(--hsl-popover-foreground);
+  --primary: var(--hsl-primary);
+  --primary-foreground: var(--hsl-primary-foreground);
+  --secondary: var(--hsl-secondary);
+  --secondary-foreground: var(--hsl-secondary-foreground);
+  --muted: var(--hsl-muted);
+  --muted-foreground: var(--hsl-muted-foreground);
+  --accent: var(--hsl-accent);
+  --accent-foreground: var(--hsl-accent-foreground);
+  --destructive: var(--hsl-destructive);
+  --destructive-foreground: var(--hsl-destructive-foreground);
+  --border: var(--hsl-border);
+  --input: var(--hsl-input);
+  --ring: var(--hsl-ring);
+  --success: var(--hsl-success);
+  --warning: var(--hsl-warning);
+  --error: var(--hsl-destructive);
+  --info: var(--hsl-info);
+
+  /* Sidebar tokens */
+  --sidebar-background: 244 28% 5%;
+  --sidebar-foreground: 240 18% 94%;
+  --sidebar-primary: 239 84% 67%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 248 26% 20%;
+  --sidebar-accent-foreground: 240 16% 92%;
+  --sidebar-border: 244 14% 17%;
+  --sidebar-ring: 239 84% 67%;
+
+  /* Depth scale — Tangle deep purple surfaces */
+  --depth-1: #0C0B1D;
+  --depth-2: #141328;
+  --depth-3: #1D1B38;
+  --depth-4: #262448;
+
+  /* Status colors */
+  --status-running: #10B981;
+  --status-creating: #9B93F0;
+  --status-stopped: #FFB800;
+  --status-warm: #FF8A4C;
+  --status-cold: #4AABFF;
+  --status-error: #FF4D6D;
+  --status-deleted: #6B7094;
+
+  /* Status surface tokens — bg / border / text for each semantic color */
+  --surface-success-bg: #022c22;
+  --surface-success-border: #14532d;
+  --surface-success-text: #34D399;
+  --surface-warning-bg: #451a03;
+  --surface-warning-border: #78350f;
+  --surface-warning-text: #fbbf24;
+  --surface-danger-bg: #450a0a;
+  --surface-danger-border: #7f1d1d;
+  --surface-danger-text: #f87171;
+  --surface-info-bg: #082f49;
+  --surface-info-border: #0c4a6e;
+  --surface-info-text: #38bdf8;
+  --surface-teal-bg: #042f2e;
+  --surface-teal-border: #134e4a;
+  --surface-teal-text: #2dd4bf;
+  --surface-violet-bg: #1e1b4b;
+  --surface-violet-border: #3730a3;
+  --surface-violet-text: #B8B2F5;
+  --surface-orange-bg: #431407;
+  --surface-orange-border: #7c2d12;
+  --surface-orange-text: #fb923c;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  /* Legacy glass aliases — mapped to solid depth tokens */
+  --glass-bg: var(--depth-2);
+  --glass-bg-strong: var(--depth-3);
+  --glass-border: var(--border-subtle);
+  --glass-border-hover: var(--border-default);
+  --glass-blur: 0px;
+
+  /* Mesh gradient — Tangle brand glows */
+  --mesh-teal: rgba(16, 185, 129, 0.05);
+  --mesh-violet: rgba(99, 102, 241, 0.07);
+  --mesh-blue: rgba(129, 140, 248, 0.04);
+
+  /* Brand gradients — Tangle */
+  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
+  --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
+  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
+  --accent-surface-soft: rgba(99, 102, 241, 0.12);
+  --accent-surface-strong: rgba(99, 102, 241, 0.20);
+  --accent-text: #A5AAFC;
+
+  /* Surfaces */
+  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
+             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
+             linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
+  --bg-dark: var(--depth-1);
+  --bg-card: hsl(var(--hsl-card));
+  --bg-elevated: hsl(246 28% 17%);
+  --bg-section: hsl(246 28% 9%);
+  --bg-input: hsl(var(--hsl-input));
+  --bg-hover: rgba(99, 102, 241, 0.08);
+  --bg-selection: rgba(99, 102, 241, 0.18);
+
+  /* Text */
+  --text-primary: hsl(var(--hsl-foreground));
+  --text-secondary: hsl(240 16% 85%);
+  --text-muted: #8688B0;
+  --text-dim: #606294;
+
+  /* Brand accents — Tangle */
+  --brand-primary: #6366F1;
+  --brand-strong: #2E2A5E;
+  --brand-strong-text: #ffffff;
+  --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
+  --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
+  --brand-cool: #818CF8;
+  --brand-glow: #A5AAFC;
+  --brand-purple: #C7D2FE;
+  --brand-vibrant: #6366F1;
+  --brand-emerald: #10B981;
+
+  /* Borders */
+  --border-subtle: rgba(100, 100, 148, 0.10);
+  --border-default: rgba(100, 100, 148, 0.18);
+  --border-hover: rgba(100, 100, 148, 0.28);
+  --border-accent: rgba(99, 102, 241, 0.18);
+  --border-accent-hover: rgba(99, 102, 241, 0.35);
+
+  /* Buttons */
+  --btn-primary-bg: #6366F1;
+  --btn-primary-hover: #818CF8;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #818CF8;
+  --btn-cta-text: #FFFFFF;
+
+  /* Code / runtime syntax */
+  --code-keyword: #A5AAFC;
+  --code-string: #34D399;
+  --code-function: #6D9FFF;
+  --code-number: #FFB347;
+  --code-success: #10B981;
+  --code-comment: #606294;
+  --code-error: #FF4D6D;
+
+  /* Shadows */
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
+  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
+  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
+  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
+  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
+  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
+
+  /* Radii */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-pill: 999px;
+  --radius-full: 999px;
+  --radius: 0.625rem;
+
+  /* Density */
+  --control-height: 2.25rem;
+  --panel-padding: 1rem;
+  --content-max-width: 80rem;
+
+  /* Typography scale — override per-app for custom type hierarchy.
+     Components reference these instead of hardcoded pixel values. */
+  --font-size-xs: 0.6875rem;      /* 11px — labels, timestamps */
+  --font-size-sm: 0.75rem;        /* 12px — captions, meta */
+  --font-size-base: 0.9375rem;    /* 15px — message body */
+  --font-size-lg: 1rem;           /* 16px — emphasized text */
+  --font-size-xl: 1.25rem;        /* 20px — section headers */
+  --line-height-tight: 1.3;
+  --line-height-base: 1.75;       /* matches leading-7 */
+  --line-height-relaxed: 1.8;
+
+  /* Component spacing — override per-app for tighter/looser layouts */
+  --avatar-size: 2rem;            /* 32px — chat avatars */
+  --timeline-dot-size: 0.625rem;  /* 10px — timeline connector dots */
+  --indicator-dot-size: 0.25rem;  /* 4px — thinking indicator dots */
+  --code-padding-x: 0.75rem;
+  --code-padding-y: 0.625rem;
+  --code-font-size: 0.8125rem;
+  --code-line-height: 1.5;
+  --chat-message-px: 0.875rem;
+  --chat-message-py: 0.5rem;
+  --chat-input-py: 0.625rem;
+  --card-padding: 1.25rem;
+  --tool-card-px: 0.75rem;
+  --tool-card-py: 0.5rem;
+  --tool-icon-size: 1.75rem;
+
+  /* Syntax highlighting — override per-theme in vault section */
+  --syntax-comment: #6B7094;
+  --syntax-keyword: #A78FFF;
+  --syntax-string: #10b981;
+  --syntax-function: #6D9FFF;
+  --syntax-number: #FFB347;
+  --syntax-meta: #8263FF;
+  --syntax-error: #FF4D6D;
+  --syntax-variable: #C4C0D8;
+  --syntax-foreground: #E8E6F6;
+
+  /* Transitions */
+  --transition-fast: 0.1s ease;
+  --transition-default: 0.16s ease;
+  --transition-medium: 0.24s ease;
+
+  /* Fonts */
+  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Outfit", "Geist", sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+}
+
+[data-sandbox-theme="vault"] {
+  /* Light theme — clean professional, warm purple accents */
+
+  /* MD3 surface hierarchy */
+  --md3-surface: #f8f9fb;
+  --md3-surface-dim: #d9dae0;
+  --md3-surface-bright: #f8f9fb;
+  --md3-surface-container-lowest: #ffffff;
+  --md3-surface-container-low: #f3f4f7;
+  --md3-surface-container: #edeef2;
+  --md3-surface-container-high: #e7e8ed;
+  --md3-surface-container-highest: #e1e2e8;
+  --md3-surface-variant: #e1e2e8;
+  --md3-on-surface: #191c24;
+  --md3-on-surface-variant: #464858;
+
+  --md3-primary: #3E349E;
+  --md3-primary-dim: #352B88;
+  --md3-primary-container: #352B88;
+  --md3-on-primary: #ffffff;
+  --md3-on-primary-container: #9B93F0;
+  --md3-primary-fixed: #E8E5FF;
+  --md3-primary-fixed-dim: #C5C0F0;
+
+  --md3-secondary: #524A78;
+  --md3-secondary-dim: #3E3660;
+  --md3-secondary-container: #E8E5FF;
+  --md3-on-secondary: #ffffff;
+  --md3-on-secondary-container: #524A78;
+
+  --md3-tertiary: #065F46;
+  --md3-tertiary-container: #D1FAE5;
+  --md3-outline: #6B6E8A;
+  --md3-outline-variant: #C7C6D6;
+
+  --md3-error: #ba1a1a;
+  --md3-error-dim: #93000a;
+  --md3-error-container: #ffdad6;
+  --md3-on-error: #ffffff;
+  --md3-on-error-container: #93000a;
+
+  --md3-inverse-surface: #2e2e3e;
+  --md3-inverse-primary: #A5AAFC;
+  --md3-inverse-on-surface: #f0f1f4;
+  --md3-surface-tint: #6366F1;
+
+  /* Semantic HSL bridge */
+  --hsl-background: 225 20% 97%;
+  --hsl-foreground: 228 20% 12%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 228 20% 12%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 228 20% 12%;
+  --hsl-primary: 239 84% 67%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 242 22% 42%;
+  --hsl-secondary-foreground: 0 0% 100%;
+  --hsl-muted: 240 14% 89%;
+  --hsl-muted-foreground: 240 10% 36%;
+  --hsl-accent: 248 22% 86%;
+  --hsl-accent-foreground: 248 38% 30%;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 244 14% 78%;
+  --hsl-input: 244 12% 80%;
+  --hsl-ring: 239 84% 67%;
+  --hsl-success: 160 84% 30%;
+  --hsl-warning: 41 96% 50%;
+  --hsl-info: 212 80% 50%;
+
+  --depth-1: #f4f4f9;
+  --depth-2: #edecf4;
+  --depth-3: #e5e4ee;
+  --depth-4: #dcdbe8;
+
+  --status-running: #059669;
+  --status-creating: #3E349E;
+  --status-stopped: #B45309;
+  --status-warm: #C05621;
+  --status-cold: #1D6FA4;
+  --status-error: #ba1a1a;
+  --status-deleted: #6B6B82;
+
+  --glass-bg: var(--depth-2);
+  --glass-bg-strong: var(--depth-1);
+  --glass-border: var(--border-subtle);
+  --glass-border-hover: var(--border-default);
+
+  /* Status surface overrides — light values */
+  --surface-success-bg: #ecfdf5;
+  --surface-success-border: #a7f3d0;
+  --surface-success-text: #047857;
+  --surface-warning-bg: #fffbeb;
+  --surface-warning-border: #fde68a;
+  --surface-warning-text: #b45309;
+  --surface-danger-bg: #fff1f2;
+  --surface-danger-border: #fecdd3;
+  --surface-danger-text: #b91c1c;
+  --surface-info-bg: #f0f9ff;
+  --surface-info-border: #bae6fd;
+  --surface-info-text: #0369a1;
+  --surface-teal-bg: #f0fdfa;
+  --surface-teal-border: #99f6e4;
+  --surface-teal-text: #0f766e;
+  --surface-violet-bg: #F0EEFF;
+  --surface-violet-border: #C5C0F0;
+  --surface-violet-text: #3E349E;
+  --surface-orange-bg: #fff7ed;
+  --surface-orange-border: #fed7aa;
+  --surface-orange-text: #c2410c;
+  --surface-neutral-bg: var(--depth-3);
+  --surface-neutral-border: var(--border-subtle);
+  --surface-neutral-text: var(--text-muted);
+
+  /* Sidebar — light */
+  --sidebar-background: 232 18% 96%;
+  --sidebar-foreground: 228 20% 12%;
+  --sidebar-primary: 239 84% 67%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 240 18% 90%;
+  --sidebar-accent-foreground: 240 38% 30%;
+  --sidebar-border: 244 14% 78%;
+  --sidebar-ring: 239 84% 67%;
+
+  --mesh-teal: rgba(5, 150, 105, 0.04);
+  --mesh-violet: rgba(99, 102, 241, 0.03);
+  --mesh-blue: rgba(129, 140, 248, 0.03);
+
+  --bg-root: #f4f4f9;
+  --bg-dark: #edecf4;
+  --bg-card: #ffffff;
+  --bg-elevated: #e5e4ee;
+  --bg-section: #edecf4;
+  --bg-input: #edecf4;
+  --bg-hover: rgba(99, 102, 241, 0.05);
+  --bg-selection: rgba(99, 102, 241, 0.10);
+
+  --text-primary: #191c24;
+  --text-secondary: #3a3a50;
+  --text-muted: #5E5E7A;
+  --text-dim: #A0A0B8;
+
+  --brand-primary: #6366F1;
+  --brand-strong: #2E2A5E;
+  --brand-strong-text: #ffffff;
+  --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
+  --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
+  --brand-cool: #818CF8;
+  --brand-glow: #A5AAFC;
+  --brand-purple: #6366F1;
+  --brand-vibrant: #6366F1;
+  --brand-emerald: #059669;
+
+  --border-subtle: rgba(110, 108, 148, 0.20);
+  --border-default: rgba(110, 108, 148, 0.35);
+  --border-hover: rgba(110, 108, 148, 0.50);
+  --border-accent: rgba(99, 102, 241, 0.15);
+  --border-accent-hover: rgba(99, 102, 241, 0.30);
+
+  --btn-primary-bg: #6366F1;
+  --btn-primary-hover: #4F46E5;
+  --btn-primary-text: #ffffff;
+  --btn-cta-bg: #6366F1;
+  --btn-cta-text: #ffffff;
+
+  --code-keyword: #3E349E;
+  --code-string: #059669;
+  --code-function: #352B88;
+  --code-number: #B45309;
+  --code-success: #059669;
+  --code-comment: #6B6E8A;
+  --code-error: #ba1a1a;
+
+  --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
+  --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
+  --shadow-glow: none;
+  --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
+
+  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
+  --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
+  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
+  --accent-surface-soft: rgba(99, 102, 241, 0.06);
+  --accent-surface-strong: rgba(99, 102, 241, 0.12);
+  --accent-text: #4F46E5;
+
+  /* Typography — Manrope (headlines) + Inter (body/labels) */
+  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-display: "Manrope", "Inter", sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
+
+  /* Tighter border radius for enterprise precision */
+  --radius: 0.375rem;
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-pill: 999px;
+  --radius-full: 999px;
+}
+