diff --git a/crates/gateway/config-ui/ui/src/components/tab-bar.test.mjs b/crates/gateway/config-ui/ui/src/components/tab-bar.test.mjs
index 9fcac64db..f96f03471 100644
--- a/crates/gateway/config-ui/ui/src/components/tab-bar.test.mjs
+++ b/crates/gateway/config-ui/ui/src/components/tab-bar.test.mjs
@@ -1,8 +1,8 @@
 // Pins the tab bar: the right-side actions cluster shows the baked crate
 // version (or the dev fallback) as a muted `vX.Y.Z` span, and the seven
-// tabs are Cursor's settings nav - a sticky left column of grouped links
-// that marks the current route, keeps a label for every icon, and
-// collapses to a 40px icon-only column under 710px.
+// tabs are the sidebar - a full-height left rail of grouped links that
+// marks the current route, keeps a label for every icon, collapses to its
+// icons from its toggle, and always shows only the icons under 710px.
 import assert from "node:assert/strict";
 import test from "node:test";
 
@@ -36,7 +36,8 @@ test("the primary nav is a column beside the content, with a divider between eac
     root.querySelector(".desk-layout > .desk-content > main#main"),
     "the content column holds main",
   );
-  const sequence = [...nav.children].map((child) =>
+  assert.ok(nav.firstElementChild.matches("button.tab-nav-toggle"), "the toggle leads the sidebar");
+  const sequence = [...nav.querySelectorAll(":scope > .tab, :scope > [role='separator']")].map((child) =>
     child.getAttribute("role") === "separator" ? "|" : child.textContent,
   );
   assert.deepEqual(
@@ -64,15 +65,15 @@ test("the nav marks exactly the current route and follows the hash", async () =>
   }
 });
 
-test("every nav cell has a 12px icon and a label that survives the icon-only column", async () => {
+test("every nav cell has a 14px icon and a label that survives the icon-only rail", async () => {
   const { root } = await openDesk();
   const tabs = [...root.querySelectorAll(".tab-nav .tab")];
   assert.equal(tabs.length, 7);
   for (const tab of tabs) {
     const icon = tab.querySelector("svg");
     assert.ok(icon, `${tab.textContent} has an icon`);
-    assert.equal(icon.getAttribute("width"), "12");
-    assert.equal(icon.getAttribute("height"), "12");
+    assert.equal(icon.getAttribute("width"), "14");
+    assert.equal(icon.getAttribute("height"), "14");
     assert.equal(icon.getAttribute("aria-hidden"), "true");
     const label = tab.querySelector(".tab-label");
     assert.ok(label && label.textContent !== "", "the label stays in the DOM for assistive tech");
@@ -80,31 +81,70 @@ test("every nav cell has a 12px icon and a label that survives the icon-only col
   }
 });
 
-test("the nav column is sticky and clamp-wide, 48px from the content, and icon-only under 710px", async () => {
+test("the toggle collapses the sidebar to its icons and expands it again", async () => {
+  const { root } = await openDesk();
+  const nav = root.querySelector("nav.tab-nav");
+  const toggle = nav.querySelector(".tab-nav-toggle");
+  assert.equal(toggle.getAttribute("aria-controls"), nav.id, "the toggle names the sidebar it controls");
+  assert.equal(toggle.getAttribute("aria-expanded"), "true", "the sidebar starts expanded");
+  assert.equal(toggle.getAttribute("aria-label"), "Collapse sidebar");
+  assert.equal(nav.classList.contains("is-collapsed"), false);
+
+  toggle.click();
+  assert.equal(nav.classList.contains("is-collapsed"), true, "a press collapses the sidebar");
+  assert.equal(toggle.getAttribute("aria-expanded"), "false");
+  assert.equal(toggle.getAttribute("aria-label"), "Expand sidebar");
+  assert.equal(nav.querySelectorAll(".tab .tab-label").length, 7, "the labels stay as link names");
+
+  toggle.click();
+  assert.equal(nav.classList.contains("is-collapsed"), false, "a second press expands it");
+  assert.equal(toggle.getAttribute("aria-expanded"), "true");
+});
+
+test("the sidebar is a full-height chrome rail under the header strip", async () => {
+  const header = await bundledDeclarations(".tab-bar");
+  assert.equal(header.get("position"), "sticky");
+  assert.equal(header.get("height"), "var(--desk-header-height)");
+
   const layout = await bundledDeclarations(".desk-layout");
   assert.equal(layout.get("display"), "flex");
-  assert.equal(squash(layout.get("gap")), "48px", "a 48px gap to the content");
+  assert.equal(squash(layout.get("min-height")), "calc(100svh-var(--desk-header-height))");
 
   const nav = await bundledDeclarations(".tab-nav");
   assert.equal(nav.get("position"), "sticky");
-  assert.equal(squash(nav.get("width")), "clamp(100px,25%,200px)");
+  assert.equal(nav.get("inset-block-start"), "var(--desk-header-height)", "pinned under the header");
+  assert.equal(squash(nav.get("height")), "calc(100svh-var(--desk-header-height))", "full height");
+  assert.equal(nav.get("width"), "var(--sidebar-width)");
+  assert.equal(nav.get("background"), "var(--chrome)");
+  assert.equal(squash(nav.get("border-right")), "1pxsolidvar(--line)");
 
   const cell = await bundledDeclarations(".tab");
-  assert.equal(squash(cell.get("padding")), "4px6px", "cells are padded 4px 6px");
-  assert.equal(cell.get("border-radius"), "var(--radius)", "a 6px radius");
-  assert.equal(cell.get("font-size"), "var(--font-size-sm)", "12px text");
-  assert.equal(cell.get("line-height"), "var(--line-height-sm)", "16px lines");
-  assert.equal(cell.get("color"), "var(--cursor-text-secondary)");
+  assert.equal(cell.get("border-radius"), "var(--radius)", "a 9px radius");
+  assert.equal(cell.get("font-size"), "var(--font-size-base)");
+  assert.equal(cell.get("color"), "var(--dim)");
   const hover = await bundledDeclarations(".tab:hover");
   const selected = await bundledDeclarations(".tab[aria-current=page]");
-  assert.equal(hover.get("background"), "var(--cursor-bg-quaternary)", "6% hover fill");
-  assert.equal(selected.get("background"), "var(--cursor-bg-quaternary)", "6% selected fill");
+  assert.equal(hover.get("background"), "var(--panel-2)", "a hover raises the cell one step");
+  assert.equal(hover.get("color"), "var(--text)");
+  assert.equal(selected.get("background"), "var(--panel-3)", "the current page two steps");
+  assert.equal(selected.get("color"), "var(--text)");
 
   const divider = await bundledDeclarations(".tab-divider");
-  assert.equal(squash(divider.get("border-top")), "1pxsolidvar(--cursor-stroke-tertiary)");
+  assert.equal(squash(divider.get("border-top")), "1pxsolidvar(--line-soft)");
+
+  const collapsed = await bundledDeclarations(".tab-nav.is-collapsed");
+  assert.equal(collapsed.get("width"), "var(--sidebar-collapsed-width)");
+  const toggleRule = await bundledDeclarations(".tab-nav-toggle");
+  assert.equal(toggleRule.get("align-self"), "flex-end", "the toggle hugs its chevron at the rail's end");
+  const collapsedToggle = await bundledDeclarations(".tab-nav.is-collapsed .tab-nav-toggle");
+  assert.equal(collapsedToggle.get("align-self"), "center", "and centers over the icon column");
+  const collapsedLabel = await bundledDeclarations(".tab-nav.is-collapsed .tab-label");
+  assert.equal(squash(collapsedLabel.get("clip-path")), "inset(50%)", "the label hides but stays readable");
 
   const narrow = await bundledDeclarations(".tab-nav", { media: NARROW });
-  assert.equal(narrow.get("width"), "40px", "a 40px column");
+  assert.equal(narrow.get("width"), "var(--sidebar-collapsed-width)", "icons only in a narrow window");
+  const narrowToggle = await bundledDeclarations(".tab-nav-toggle", { media: NARROW });
+  assert.equal(narrowToggle.get("display"), "none", "the narrow rail has nothing to toggle");
   const label = await bundledDeclarations(".tab-label", { media: NARROW });
   assert.equal(squash(label.get("clip-path")), "inset(50%)", "the label hides but stays readable");
 });
diff --git a/crates/gateway/config-ui/ui/src/components/tab-bar.ts b/crates/gateway/config-ui/ui/src/components/tab-bar.ts
index 8e151a0ef..f68a877c4 100644
--- a/crates/gateway/config-ui/ui/src/components/tab-bar.ts
+++ b/crates/gateway/config-ui/ui/src/components/tab-bar.ts
@@ -1,12 +1,15 @@
-// The tab bar: a slim header strip with the medallion (standalone only),
-// the profile switcher, and the right cluster holding the connection dot
+// The tab bar: a header strip with the medallion (standalone only), the
+// profile switcher, and the right cluster holding the connection dot
 // [Adapted: llama-swap] plus the container the Apply/Revert pair mounts
-// into; and, as its own element, Cursor's settings nav - seven icon+label
-// links in three groups, set in a sticky left column that drops its labels
-// and becomes a 40px icon column in a narrow window. The caller mounts the
-// strip above the desk and the nav beside the content.
+// into; and, as its own element, the sidebar - seven icon+label links in
+// three groups under a collapse toggle, set in a full-height left rail that
+// collapses to its icons on request and always in a narrow window. The
+// caller mounts the strip above the desk and the sidebar beside the
+// content.
 
 import {
+  ChevronLeft,
+  ChevronRight,
   Cloud,
   Cpu,
   Folder,
@@ -30,8 +33,8 @@ const APP_VERSION = typeof __APP_VERSION__ === "string" ? __APP_VERSION__ : "dev
 /** One tab: destination view, label, lucide icon, and hash target. */
 type Tab = readonly [view: PageId, label: string, icon: IconNode, href: string];
 
-/** The nav's icon size: Cursor's 12px settings-nav glyphs. */
-const ICON_SIZE = 12;
+/** The sidebar's icon size. */
+const ICON_SIZE = 14;
 
 /**
  * The tabs in nav order, grouped: the gateway's own settings, then the
@@ -68,7 +71,7 @@ export interface TabBarOptions {
 export interface TabBar {
   /** The `<header class="tab-bar">` strip: medallion, profile switcher, actions. */
   element: HTMLElement;
-  /** The `<nav class="tab-nav">` column of grouped links, mounted beside the content. */
+  /** The `<nav class="tab-nav">` sidebar of grouped links, mounted beside the content. */
   nav: HTMLElement;
   /** Moves `aria-current` (and the selected fill) to `view`. */
   setActivePage(view: PageId | null): void;
@@ -97,7 +100,30 @@ export function createTabBar(options: TabBarOptions): TabBar {
 
   const nav = document.createElement("nav");
   nav.setAttribute("aria-label", "Primary");
+  nav.id = "primary-nav";
   nav.className = "tab-nav";
+  // The toggle collapses the sidebar to its icons; the state lasts for the
+  // session only.
+  const toggle = document.createElement("button");
+  toggle.type = "button";
+  toggle.className = "tab-nav-toggle";
+  toggle.setAttribute("aria-controls", nav.id);
+  const setCollapsed = (collapsed: boolean) => {
+    nav.classList.toggle("is-collapsed", collapsed);
+    toggle.setAttribute("aria-expanded", String(!collapsed));
+    toggle.setAttribute("aria-label", collapsed ? "Expand sidebar" : "Collapse sidebar");
+    toggle.title = toggle.getAttribute("aria-label") ?? "";
+    toggle.replaceChildren(
+      lucideElement(collapsed ? ChevronRight : ChevronLeft, {
+        "aria-hidden": "true",
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+      }),
+    );
+  };
+  setCollapsed(false);
+  toggle.addEventListener("click", () => setCollapsed(!nav.classList.contains("is-collapsed")));
+  nav.append(toggle);
   const tabByPage = new Map<PageId, HTMLAnchorElement>();
   TAB_GROUPS.forEach((group, index) => {
     if (index > 0) {
@@ -110,8 +136,8 @@ export function createTabBar(options: TabBarOptions): TabBar {
       const tab = document.createElement("a");
       tab.className = "tab";
       tab.href = href;
-      // The label is the link's name; the column hides it, so a tooltip
-      // keeps the icon-only column readable.
+      // The label is the link's name; a collapsed sidebar hides it, so a
+      // tooltip keeps the icon-only rail readable.
       tab.title = label;
       const svg = lucideElement(icon, {
         "aria-hidden": "true",
diff --git a/crates/gateway/config-ui/ui/src/pages/models-page.test.mjs b/crates/gateway/config-ui/ui/src/pages/models-page.test.mjs
index 044791674..a45480638 100644
--- a/crates/gateway/config-ui/ui/src/pages/models-page.test.mjs
+++ b/crates/gateway/config-ui/ui/src/pages/models-page.test.mjs
@@ -40,6 +40,17 @@ test("Local and Remote tabs render only their catalog subsets", async () => {
   assert.equal(root.querySelector(".orphan-section"), null, "Remote never shows local files");
 });
 
+test("the Local split carries the green family and the Remote split the blue", async () => {
+  const { dom, root } = await open();
+  assert.ok(root.querySelector(".models-split.fam-local"), "Local marks its split");
+  assert.equal(root.querySelector(".models-split.fam-remote"), null);
+
+  navigate(dom, "#/remote");
+  await settle();
+  assert.ok(root.querySelector(".models-split.fam-remote"), "Remote marks its split");
+  assert.equal(root.querySelector(".models-split.fam-local"), null);
+});
+
 test("STT entries show the Mic badge and implicit non-editable kind", async () => {
   const { dom, root } = await open();
   const row = [...root.querySelectorAll(".model-row")].find((entry) =>
@@ -362,16 +373,28 @@ test("a non-numeric entry in a model's numeric field raises an alert under the i
   assert.equal(fixed.querySelector("input").value, "512", "the edit is kept");
 });
 
-test("model rows sit 12px apart with no hover fill, and the search box takes Cursor's padding", async () => {
+test("model rows sit 12px apart, mark the selection with a family-colored rule, and the search box is a pill", async () => {
   const list = await bundledDeclarations(".model-list");
   assert.equal(list.get("display"), "flex");
   assert.equal(list.get("flex-direction"), "column");
   assert.equal(list.get("gap"), "var(--space-3)", "a 12px gap");
   const hover = await bundledDeclarations(".model-row:hover");
-  assert.equal(hover.get("background"), undefined, "no hover fill");
+  assert.equal(hover.get("background"), "var(--panel-2)", "a hover raises the row");
+  const selected = await bundledDeclarations(".model-row[aria-current=true]");
+  assert.equal(selected.get("border-inline-start-color"), "var(--accent)");
+  const local = await bundledDeclarations(".fam-local .model-row[aria-current=true]");
+  assert.equal(local.get("border-inline-start-color"), "var(--good)", "Local rows take green");
+  const remote = await bundledDeclarations(".fam-remote .model-row[aria-current=true]");
+  assert.equal(remote.get("border-inline-start-color"), "var(--blue)", "Remote rows take blue");
   const search = await bundledDeclarations(".models-toolbar .input");
-  assert.equal(squash(search.get("padding")), "5px12px", "padding 5px 12px");
-  assert.equal(search.get("border-radius"), "var(--radius-sm)", "a 4px radius");
+  assert.equal(squash(search.get("padding")), "5px14px", "padding 5px 14px");
+  assert.equal(search.get("border-radius"), "var(--radius-full)", "a pill");
+  const sideBySide = await bundledDeclarations(".split-list", { media: "(min-width: 768px)" });
+  assert.equal(
+    sideBySide.get("padding-inline-end"),
+    "var(--space-4)",
+    "the list's toolbar stays 16px off the divider, as the detail pane does",
+  );
   const spin = await bundledDeclarations(".models-refresh.is-loading svg");
   assert.match(spin.get("animation") ?? "", /spin/, "the icon rotates while loading");
 });
diff --git a/crates/gateway/config-ui/ui/src/pages/models-page.ts b/crates/gateway/config-ui/ui/src/pages/models-page.ts
index 10768e8a6..cbaa5f4e1 100644
--- a/crates/gateway/config-ui/ui/src/pages/models-page.ts
+++ b/crates/gateway/config-ui/ui/src/pages/models-page.ts
@@ -119,7 +119,9 @@ export function createModelsPage(deps: ModelsPageDeps): ModelsPage {
     title.textContent = deps.scope === "local" ? "Local" : "Remote";
 
     const split = document.createElement("div");
-    split.className = "split models-split";
+    // The family class picks the scope's hue for selections and filters:
+    // green for Local, blue for Remote.
+    split.className = `split models-split fam-${deps.scope}`;
     listBox = document.createElement("div");
     listBox.className = "split-list";
     detailBox = document.createElement("div");
diff --git a/crates/gateway/config-ui/ui/src/pages/settings-page.test.mjs b/crates/gateway/config-ui/ui/src/pages/settings-page.test.mjs
index 524468ccc..7727a0460 100644
--- a/crates/gateway/config-ui/ui/src/pages/settings-page.test.mjs
+++ b/crates/gateway/config-ui/ui/src/pages/settings-page.test.mjs
@@ -183,6 +183,8 @@ test("the About panel renders the medallion, version, and license link", async (
   const license = root.querySelector(".about-license");
   assert.equal(license.href, "https://www.boost.org/LICENSE_1_0.txt");
   assert.equal(license.rel, "noopener");
+  const licenseRule = await bundledDeclarations(".about-license");
+  assert.equal(licenseRule.get("color"), "var(--blue-text)", "the license link reads as a link, not an action");
 });
 
 test("a settings section puts its title above the card and lays each row as label, control, help", async () => {
@@ -210,18 +212,19 @@ test("a settings section puts its title above the card and lays each row as labe
   assert.deepEqual(order, ["label", "control", "help"], "the grid reads label, control, then help");
 });
 
-test("the card is a 4% tinted 12px block with no border or padding, and its rows are grid cells", async () => {
+test("the card is a raised 12px block with a line border and no padding, and its rows are grid cells", async () => {
   const card = await bundledDeclarations(".settings-card");
   assert.equal(card.get("border"), "0", "no border on the wrapper");
   assert.equal(card.get("padding"), "0", "no padding on the wrapper");
   assert.equal(card.get("background"), "none");
 
   const heading = await bundledDeclarations(".settings-card .section-heading");
-  assert.equal(heading.get("font-size"), "var(--font-size-sm)", "a 12px title");
-  assert.equal(heading.get("color"), "var(--cursor-text-secondary)");
+  assert.equal(heading.get("font-size"), "var(--font-size-lg)", "a 15px title");
+  assert.equal(heading.get("color"), "var(--text)");
 
   const body = await bundledDeclarations(".settings-card > .section-body");
-  assert.equal(body.get("background"), "var(--cursor-bg-quinary)", "a 4% tint");
+  assert.equal(body.get("background"), "var(--panel-2)", "the raised surface");
+  assert.equal(squash(body.get("border")), "1pxsolidvar(--line)", "a line border");
   assert.equal(body.get("border-radius"), "var(--radius-xl)", "a 12px radius");
   assert.equal(body.get("padding"), "0");
 
@@ -230,11 +233,11 @@ test("the card is a 4% tinted 12px block with no border or padding, and its rows
   const control = await bundledDeclarations(".field-row>:not(.field-head):not(.field-help)");
   assert.equal(control.get("grid-column"), "2", "the control sits on the right");
   const label = await bundledDeclarations(".field-head label");
-  assert.equal(label.get("font-size"), "var(--font-size-base)", "a 13px label");
+  assert.equal(label.get("font-size"), "var(--font-size-base)", "a 13.5px label");
   assert.equal(label.get("font-weight"), "400");
   const help = await bundledDeclarations(".field-help");
-  assert.equal(help.get("font-size"), "var(--font-size-base)", "13px help text");
-  assert.equal(help.get("color"), "var(--cursor-text-secondary)");
+  assert.equal(help.get("font-size"), "var(--font-size-base)", "13.5px help text");
+  assert.equal(help.get("color"), "var(--dim)");
 });
 
 test("banners are 12px cards, the pending one in the accent tint, and callouts carry a 4px left bar", async () => {
@@ -242,15 +245,15 @@ test("banners are 12px cards, the pending one in the accent tint, and callouts c
   assert.equal(banner.get("border-radius"), "var(--radius-xl)");
   assert.equal(squash(banner.get("padding")), "12px14px");
   const pending = await bundledDeclarations(".banner-pending");
-  assert.equal(pending.get("background"), "var(--cursor-accent-subtle)", "accent at 8%");
+  assert.equal(pending.get("background"), "var(--accent-subtle)", "accent at 8%");
   assert.equal(
     squash(pending.get("border-color")),
-    "color-mix(insrgb,var(--cursor-accent)20%,transparent)",
+    "color-mix(insrgb,var(--accent)20%,transparent)",
     "accent at 20%",
   );
   for (const [selector, color] of [
-    [".banner-restart", "var(--warning)"],
-    [".banner-warning", "var(--warning)"],
+    [".banner-restart", "var(--warn)"],
+    [".banner-warning", "var(--warn)"],
     [".banner-danger", "var(--danger)"],
   ]) {
     const callout = await bundledDeclarations(selector);
diff --git a/crates/gateway/config-ui/ui/src/styles/base.css b/crates/gateway/config-ui/ui/src/styles/base.css
index 2f4ea94c7..ccdf78a86 100644
--- a/crates/gateway/config-ui/ui/src/styles/base.css
+++ b/crates/gateway/config-ui/ui/src/styles/base.css
@@ -1,6 +1,6 @@
 /* Foundation stylesheet: cascade layer order, reset, typography, and
    focus defaults. The design tokens come from shared-ui/tokens.css (the
-   Cursor Dark sheet both Runvil UIs share), imported by main.ts
+   Gateway UI style guide's palette), imported by main.ts
    ahead of this file so the layer order below is declared before any
    layered component rules. Later selectors stay low-specificity because
    precedence is settled by the layer order declared here. */
@@ -52,20 +52,21 @@
 
 	html {
 		height: 100%;
+		font-size: var(--font-size-root);
 	}
 
 	body {
 		min-height: 100vh;
 		min-height: 100svh;
-		background: var(--bg-primary);
-		color: var(--text-primary);
+		background: var(--panel);
+		color: var(--text);
 		font-family: var(--font);
 		font-size: var(--font-size-base);
 	}
 
 	h1 {
-		font-size: 1.25rem;
-		font-weight: 600;
+		font-size: var(--font-size-title);
+		font-weight: var(--font-weight-title);
 	}
 
 	code,
@@ -76,11 +77,11 @@
 	}
 
 	a {
-		color: var(--cursor-text-link);
+		color: var(--blue-text);
 	}
 
 	:focus-visible {
-		outline: 2px solid var(--cursor-accent);
+		outline: 2px solid var(--accent);
 		outline-offset: 2px;
 	}
 
diff --git a/crates/gateway/config-ui/ui/src/styles/controls.css b/crates/gateway/config-ui/ui/src/styles/controls.css
index 3c91e63d3..516c3e647 100644
--- a/crates/gateway/config-ui/ui/src/styles/controls.css
+++ b/crates/gateway/config-ui/ui/src/styles/controls.css
@@ -29,7 +29,7 @@
 	   row, so no hover wash and no pointer. */
 	.menu-group-label {
 		padding: var(--space-2) var(--space-2) var(--space-1);
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-xs);
 		font-weight: 600;
 		letter-spacing: 0.04em;
@@ -62,8 +62,8 @@
 		border-radius: 9999px;
 		background: linear-gradient(
 			to right,
-			var(--text-secondary) calc(var(--slider-progress) * 100%),
-			var(--cursor-bg-tertiary) calc(var(--slider-progress) * 100%)
+			var(--dim) calc(var(--slider-progress) * 100%),
+			var(--panel-3) calc(var(--slider-progress) * 100%)
 		);
 	}
 	.slider::-webkit-slider-thumb {
@@ -73,82 +73,85 @@
 		margin-top: -5px;
 		border: 0;
 		border-radius: 50%;
-		background: var(--text-secondary);
+		background: var(--dim);
 		transition: box-shadow 140ms ease-out;
 	}
 	.slider:hover::-webkit-slider-thumb,
 	.slider:active::-webkit-slider-thumb {
-		box-shadow: 0 0 0 8px var(--cursor-bg-secondary);
+		box-shadow: 0 0 0 8px var(--line);
 	}
 	.slider::-moz-range-track {
 		height: 4px;
 		border-radius: 9999px;
-		background: var(--cursor-bg-tertiary);
+		background: var(--panel-3);
 	}
 	.slider::-moz-range-progress {
 		height: 4px;
 		border-radius: 9999px;
-		background: var(--text-secondary);
+		background: var(--dim);
 	}
 	.slider::-moz-range-thumb {
 		width: 14px;
 		height: 14px;
 		border: 0;
 		border-radius: 50%;
-		background: var(--text-secondary);
+		background: var(--dim);
 		transition: box-shadow 140ms ease-out;
 	}
 	.slider:hover::-moz-range-thumb,
 	.slider:active::-moz-range-thumb {
-		box-shadow: 0 0 0 8px var(--cursor-bg-secondary);
+		box-shadow: 0 0 0 8px var(--line);
 	}
 	.slider:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
 
-	/* Quant-style pill: h-6 rounded-full px-2.5, ~11.5px text. The
-	   accent variant reads the Cursor accent on its 8% tint. */
+	/* Tag pill: 24px tall and fully rounded, 11px text, a line border on
+	   the raised surface. A status reads as a tinted pill: the accent
+	   variant carries the accent on its 8% fill under a 35% border. */
 	.pill {
 		display: inline-flex;
 		align-items: center;
 		gap: 0.25rem;
-		height: 1.5rem;
+		height: var(--height-xs);
 		padding-inline: 0.625rem;
-		border-radius: 9999px;
-		background: var(--cursor-bg-quaternary);
-		color: var(--text-primary);
-		font-size: 0.71875rem;
+		border: 1px solid var(--line);
+		border-radius: var(--radius-full);
+		background: var(--panel-2);
+		color: var(--dim);
+		font-size: var(--font-size-xs);
 		font-weight: 500;
 		white-space: nowrap;
 	}
 	.pill-accent {
-		background: var(--cursor-accent-subtle);
-		color: var(--cursor-accent);
+		border-color: color-mix(in srgb, var(--accent) var(--tint-line), transparent);
+		background: color-mix(in srgb, var(--accent) var(--tint-fill), transparent);
+		color: var(--accent);
 	}
 
-	/* Chip/tag input: a wrapping soft field holding removable chips and
-	   a bare inline text entry. */
+	/* Chip/tag input: a wrapping bordered field, like .input, holding
+	   removable chips and a bare inline text entry. */
 	.chip-input {
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
 		gap: 0.375rem;
 		min-height: 2.25rem;
-		padding: 0.375rem 0.875rem;
-		border: 1px solid transparent;
-		border-radius: 1.125rem;
-		background: var(--cursor-bg-quaternary);
+		padding: 0.375rem var(--space-3);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		background: var(--panel);
 	}
 	.chip-input:focus-within {
-		border-color: var(--cursor-stroke-primary);
+		border-color: var(--line-focus);
 	}
 	.chip-input > input {
 		flex: 1;
 		min-width: 6ch;
 		border: 0;
 		background: transparent;
-		color: var(--text-primary);
+		color: var(--text);
 	}
 	/* The container's focus-within stroke is the visible focus
 	   indicator for the inner entry; a second ring inside the field
@@ -178,7 +181,7 @@
 		inset: -4px;
 	}
 	.chip-remove:hover {
-		background: var(--cursor-bg-secondary);
+		background: var(--line);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
diff --git a/crates/gateway/config-ui/ui/src/styles/layout.css b/crates/gateway/config-ui/ui/src/styles/layout.css
index 973e69f72..25a407c8f 100644
--- a/crates/gateway/config-ui/ui/src/styles/layout.css
+++ b/crates/gateway/config-ui/ui/src/styles/layout.css
@@ -16,8 +16,8 @@
 		height: 2.25rem;
 		padding-inline: 0.875rem;
 		border-radius: 9999px;
-		background: var(--cursor-accent);
-		color: var(--cursor-text-invert);
+		background: var(--accent);
+		color: var(--on-accent);
 		font-weight: 500;
 		text-decoration: none;
 		transform: translateY(-200%);
@@ -26,54 +26,82 @@
 		transform: translateY(0);
 	}
 
-	/* Tab bar: a slim header strip on the chrome surface holding the
-	   medallion, the profile switcher, and the right cluster. The nav
-	   it used to carry is its own column below. */
+	/* Tab bar: the header strip on the chrome surface holding the
+	   medallion, the profile switcher, and the right cluster. It stays
+	   pinned while the content scrolls, and the sidebar sits under it. */
 	.tab-bar {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 30;
 		display: flex;
 		align-items: center;
 		gap: var(--space-2);
-		min-height: var(--space-10);
-		padding-inline: var(--space-3);
-		background: var(--bg-secondary);
-		border-bottom: 1px solid var(--border);
+		height: var(--desk-header-height);
+		padding-inline: var(--space-4);
+		background: var(--chrome);
+		border-bottom: 1px solid var(--line);
 	}
 
-	/* The desk: the nav column and the content column, 48px apart. */
+	/* The desk: the sidebar and the content column, filling the window
+	   under the header strip. */
 	.desk-layout {
 		display: flex;
-		align-items: flex-start;
-		gap: 48px;
-		padding: var(--space-4) var(--space-4) 0;
+		min-height: calc(100svh - var(--desk-header-height));
 	}
 	.desk-content {
 		flex: 1;
 		min-width: 0;
-		padding-block-end: var(--space-4);
+		padding: var(--space-5) var(--space-6);
 	}
 
-	/* Settings nav [Cursor]: a sticky column of cells, 12px text and 12px
-	   icons, a 6% fill for the hovered and the selected cell, and a hairline
-	   between groups. A narrow window keeps only the icons. */
+	/* Sidebar: a full-height rail on the chrome surface, pinned under the
+	   header strip. Cells are 13px with 14px icons; a hover raises the
+	   surface one step and the current page two, both lifting the text.
+	   A soft line separates the groups. The toggle collapses the rail to
+	   its icons, and a narrow window always shows only the icons. */
 	.tab-nav {
 		position: sticky;
-		inset-block-start: var(--space-4);
+		inset-block-start: var(--desk-header-height);
+		align-self: flex-start;
 		flex: none;
-		width: clamp(100px, 25%, 200px);
 		display: flex;
 		flex-direction: column;
-		gap: var(--space-1);
+		gap: 2px;
+		width: var(--sidebar-width);
+		height: calc(100svh - var(--desk-header-height));
+		padding: var(--space-3) var(--space-2);
+		overflow-y: auto;
+		background: var(--chrome);
+		border-right: 1px solid var(--line);
+		transition: width var(--duration-normal) ease-out;
+	}
+	/* The toggle hugs its chevron, so its focus ring frames the chevron
+	   rather than the rail's full width. */
+	.tab-nav-toggle {
+		align-self: flex-end;
+		display: flex;
+		justify-content: flex-end;
+		padding: var(--space-1) var(--space-2) var(--space-2);
+		border: 0;
+		border-radius: var(--radius-sm);
+		background: none;
+		color: var(--faint);
+		cursor: pointer;
+	}
+	.tab-nav-toggle:hover {
+		color: var(--text);
 	}
 	.tab {
 		display: flex;
 		align-items: center;
-		gap: var(--space-1-5);
-		padding: 4px 6px;
+		gap: var(--space-2);
+		padding: var(--space-2) 10px;
 		border-radius: var(--radius);
-		color: var(--cursor-text-secondary);
-		font-size: var(--font-size-sm);
+		color: var(--dim);
+		font-size: var(--font-size-base);
 		font-weight: 400;
 		line-height: var(--line-height-sm);
+		white-space: nowrap;
 		text-decoration: none;
 		cursor: pointer;
 	}
@@ -81,22 +109,47 @@
 		flex: none;
 	}
 	.tab:hover {
-		background: var(--cursor-bg-quaternary);
+		background: var(--panel-2);
+		color: var(--text);
 	}
 	.tab[aria-current="page"] {
-		background: var(--cursor-bg-quaternary);
-		color: var(--cursor-text-primary);
+		background: var(--panel-3);
+		color: var(--text);
 	}
 	.tab-divider {
-		margin-block: var(--space-1);
-		border-top: 1px solid var(--cursor-stroke-tertiary);
+		margin: var(--space-1-5) var(--space-1);
+		border-top: 1px solid var(--line-soft);
+	}
+	.tab-nav.is-collapsed {
+		width: var(--sidebar-collapsed-width);
+	}
+	.tab-nav.is-collapsed .tab-nav-toggle {
+		align-self: center;
+		justify-content: center;
+	}
+	.tab-nav.is-collapsed .tab {
+		justify-content: center;
+		padding-inline: 0;
+	}
+	/* The hidden label stays in the accessibility tree as the link's name. */
+	.tab-nav.is-collapsed .tab-label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
 	}
 	@media (max-width: 709.98px) {
 		.tab-nav {
-			width: 40px;
+			width: var(--sidebar-collapsed-width);
+		}
+		.tab-nav-toggle {
+			display: none;
 		}
 		.tab {
 			justify-content: center;
+			padding-inline: 0;
 		}
 		.tab-label {
 			position: absolute;
@@ -139,15 +192,18 @@
 		.split {
 			flex-direction: row;
 		}
+		/* The list keeps the detail pane's 16px off the divider, so its
+		   toolbar never touches the line. */
 		.split-list {
 			flex: 0 1 clamp(460px, 32%, 620px);
 			max-width: 44%;
-			border-right: 1px solid var(--border);
+			padding-inline-end: var(--space-4);
+			border-right: 1px solid var(--line);
 		}
 	}
 
 	/* Persistent banners (pending changes, restart required): 12px cards with
-	   a 12px 14px padding. The pending-changes banner is the accent at 8% with
+	   a 12px 14px padding. The pending-changes banner is the accent tint with
 	   an accent border at 20%; the restart, warning, and danger callouts carry
 	   a 4px left bar. The explicit display beats the UA [hidden] rule, so the
 	   hidden state needs its own counterpart. */
@@ -156,10 +212,10 @@
 		align-items: center;
 		gap: var(--space-3);
 		padding: 12px 14px;
-		border: 1px solid var(--cursor-stroke-secondary);
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-bg-quaternary);
-		color: var(--cursor-text-primary);
+		background: var(--panel-2);
+		color: var(--text);
 	}
 	.banner[hidden] {
 		display: none;
@@ -169,8 +225,8 @@
 		margin-block-end: var(--space-3);
 	}
 	.banner-pending {
-		border-color: color-mix(in srgb, var(--cursor-accent) 20%, transparent);
-		background: var(--cursor-accent-subtle);
+		border-color: color-mix(in srgb, var(--accent) 20%, transparent);
+		background: var(--accent-subtle);
 	}
 	.banner-restart,
 	.banner-warning,
@@ -178,7 +234,7 @@
 		border-left-width: 4px;
 	}
 	.banner-restart {
-		border-left-color: var(--warning);
+		border-left-color: var(--warn);
 	}
 	.banner-danger {
 		border-left-color: var(--danger);
@@ -204,10 +260,10 @@
 		width: 320px;
 		max-width: calc(100vw - 2rem);
 		padding: var(--space-3) var(--space-4) 0;
-		border: 1px solid var(--cursor-stroke-secondary);
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-editor);
-		color: var(--cursor-text-primary);
+		background: var(--panel);
+		color: var(--text);
 		animation: modal-form-open var(--duration-slower) var(--ease-out-cubic) both;
 	}
 	.modal > h2 {
@@ -248,24 +304,24 @@
 		flex-direction: column;
 		gap: 0.625rem;
 		padding: var(--space-4);
-		border: 0;
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-bg-quinary);
+		background: var(--panel-2);
 	}
 	.metric-label {
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
 		font-weight: 600;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 	}
 	.metric-value {
-		font-family: var(--font-mono);
-		font-size: 0.875rem;
+		font-size: 1.25rem;
+		font-weight: 600;
 		font-variant-numeric: tabular-nums;
 	}
 	.progress__fill.is-warning {
-		background: var(--warning);
+		background: var(--warn);
 	}
 	.progress__fill.is-danger {
 		background: var(--danger);
@@ -291,9 +347,9 @@
 		gap: 1rem;
 		width: min(20rem, 100%);
 		padding: 2rem;
-		border: 1px solid var(--border);
-		border-radius: 0.75rem;
-		background: var(--bg-secondary);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-xl);
+		background: var(--panel-2);
 		text-align: center;
 	}
 	.key-card form {
@@ -309,7 +365,7 @@
 	   input it describes. */
 	.field-error {
 		margin: 0;
-		color: var(--cursor-danger);
+		color: var(--danger);
 		font-size: var(--font-size-sm);
 		line-height: var(--line-height-sm);
 	}
@@ -326,7 +382,7 @@
 	}
 	.tab-version {
 		font-size: 0.75rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 
 	/* Connection dot: gray until the first API outcome arrives. The
@@ -335,10 +391,10 @@
 		width: 0.5rem;
 		height: 0.5rem;
 		border-radius: 50%;
-		background: var(--text-secondary);
+		background: var(--dim);
 	}
 	.status-dot.is-ok {
-		background: var(--success);
+		background: var(--good);
 	}
 	.status-dot.is-bad {
 		background: var(--danger);
@@ -358,10 +414,10 @@
 		display: inline-flex;
 		width: 1rem;
 		margin-inline-end: 0.375rem;
-		color: var(--cursor-accent);
+		color: var(--accent);
 	}
 	.menu-item.is-pending {
-		background: var(--cursor-accent-subtle);
+		background: var(--accent-subtle);
 	}
 
 	/* Apply overlay activity: the one row holds the spinner and the
@@ -379,14 +435,14 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.stage.is-active,
 	.stage.is-done {
-		color: var(--text-primary);
+		color: var(--text);
 	}
 	.stage.is-failed {
-		color: var(--danger-text);
+		color: var(--danger);
 	}
 	.stage-icon {
 		display: inline-flex;
@@ -398,8 +454,8 @@
 	.spinner {
 		width: 14px;
 		height: 14px;
-		border: 2px solid var(--cursor-bg-secondary);
-		border-top-color: var(--cursor-accent);
+		border: 2px solid var(--line);
+		border-top-color: var(--accent);
 		border-radius: 50%;
 		animation: spin 800ms linear infinite;
 	}
@@ -412,7 +468,7 @@
 	/* Stub view empty state. */
 	.page-empty {
 		margin-block-start: 0.5rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 }
 
@@ -430,8 +486,9 @@
 		flex: 1;
 		min-width: 10rem;
 		height: auto;
-		padding: 5px 12px;
-		border-radius: var(--radius-sm);
+		padding: 5px 14px;
+		border-radius: var(--radius-full);
+		background: var(--panel-2);
 	}
 	.models-refresh {
 		display: inline-flex;
@@ -443,30 +500,37 @@
 		border: 0;
 		border-radius: var(--radius);
 		background: transparent;
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		cursor: pointer;
 	}
 	.models-refresh:hover {
-		background: var(--cursor-bg-tertiary);
-		color: var(--cursor-text-primary);
+		background: var(--panel-3);
+		color: var(--text);
 	}
 	.models-refresh.is-loading svg {
 		animation: spin 800ms linear infinite;
 	}
 	.filter-chips {
-		display: flex;
-		gap: 0.25rem;
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: var(--space-1);
+		padding: 3px;
+		border: 1px solid var(--line-soft);
+		border-radius: var(--radius-full);
+		background: var(--panel);
 	}
 	.filter-chip {
-		border: 1px solid transparent;
+		border: 0;
+		background: none;
+		color: var(--dim);
 		cursor: pointer;
 	}
 	.filter-chip:hover {
-		background: var(--cursor-bg-tertiary);
+		color: var(--text);
 	}
 	.filter-chip[aria-pressed="true"] {
-		background: var(--cursor-accent-subtle);
-		border-color: var(--cursor-accent);
+		background: color-mix(in srgb, var(--accent) 14%, transparent);
+		color: var(--accent);
 	}
 	.filter-chip:disabled {
 		opacity: 0.6;
@@ -487,7 +551,7 @@
 	.model-list-empty {
 		margin: 0;
 		padding: var(--space-5) var(--space-3);
-		color: var(--cursor-text-tertiary);
+		color: var(--faint);
 		text-align: center;
 	}
 	.model-row {
@@ -495,12 +559,32 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.625rem 0.75rem;
-		border-radius: var(--radius);
-		color: var(--text-primary);
+		border-inline-start: 2px solid transparent;
+		border-radius: var(--radius-sm);
+		color: var(--text);
 		text-decoration: none;
 	}
 	.model-row[aria-current="true"] {
-		background: var(--cursor-accent-subtle);
+		border-inline-start-color: var(--accent);
+		background: var(--panel-2);
+	}
+	.model-row:hover {
+		background: var(--panel-2);
+	}
+	/* Local rows and filters take the green family, Remote the blue. */
+	.fam-local .model-row[aria-current="true"] {
+		border-inline-start-color: var(--good);
+	}
+	.fam-remote .model-row[aria-current="true"] {
+		border-inline-start-color: var(--blue);
+	}
+	.fam-local .filter-chip[aria-pressed="true"] {
+		background: color-mix(in srgb, var(--good) 14%, transparent);
+		color: var(--good-text);
+	}
+	.fam-remote .filter-chip[aria-pressed="true"] {
+		background: color-mix(in srgb, var(--blue) 14%, transparent);
+		color: var(--blue-text);
 	}
 	.model-name {
 		font-family: var(--font-mono);
@@ -510,7 +594,7 @@
 	.model-row .source-icon {
 		display: inline-flex;
 		margin-inline-start: auto;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 
 	/* Loading skeletons: pulsing surface rectangles standing in for
@@ -519,7 +603,7 @@
 		height: 2.5rem;
 		margin-block-end: 0.5rem;
 		border-radius: var(--radius);
-		background: var(--bg-tertiary);
+		background: var(--panel-3);
 		animation: skeleton-pulse 1.2s ease-in-out infinite alternate;
 	}
 	@keyframes skeleton-pulse {
@@ -536,14 +620,14 @@
 	.orphan-section {
 		margin-block-start: 1rem;
 		padding-block-start: 0.75rem;
-		border-block-start: 1px solid var(--border);
+		border-block-start: 1px solid var(--line);
 	}
 	.orphan-heading {
 		margin: 0 0 0.5rem;
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
 		font-weight: 600;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 	}
 	.orphan-row {
@@ -554,7 +638,7 @@
 	}
 	.orphan-size {
 		margin-inline-start: auto;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 		font-variant-numeric: tabular-nums;
 	}
@@ -587,7 +671,7 @@
 		flex-direction: column;
 		gap: 0.5rem;
 		padding-block-end: 1rem;
-		border-block-end: 1px solid var(--border);
+		border-block-end: 1px solid var(--line);
 	}
 	/* The editable title: an input drawn as the heading until hover
 	   or focus reveals the field surface. */
@@ -597,14 +681,14 @@
 		border: 1px solid transparent;
 		border-radius: var(--radius);
 		background: transparent;
-		color: var(--text-primary);
+		color: var(--text);
 		font-family: var(--font-mono);
-		font-size: 1.375rem;
-		font-weight: 600;
+		font-size: var(--font-size-title);
+		font-weight: var(--font-weight-title);
 	}
 	.detail-title:hover,
 	.detail-title:focus-visible {
-		background: var(--cursor-bg-quaternary);
+		background: var(--panel-2);
 	}
 	.detail-meta {
 		display: flex;
@@ -612,7 +696,7 @@
 		gap: 0.5rem;
 	}
 	.detail-status {
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.8125rem;
 	}
 	.detail-source {
@@ -620,7 +704,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		margin: 0;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.detail-actions {
 		display: flex;
@@ -635,18 +719,18 @@
 	.file-cache-path {
 		flex: 1;
 		min-width: 12rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.file-status[data-status="downloaded"] {
-		color: var(--success-text);
+		color: var(--good-text);
 	}
 	.file-status[data-status="missing"] {
-		color: var(--warning);
+		color: var(--warn);
 	}
 
 	.detail-section {
 		padding-block: 0.75rem;
-		border-block-end: 1px solid var(--border);
+		border-block-end: 1px solid var(--line);
 	}
 	.section-heading {
 		margin: 0;
@@ -658,7 +742,7 @@
 		padding: 0.375rem 0;
 		border: 0;
 		background: none;
-		color: var(--text-primary);
+		color: var(--text);
 		font-size: 0.9375rem;
 		font-weight: 600;
 		text-align: start;
@@ -668,7 +752,7 @@
 		content: "";
 		margin-inline-end: 0.5rem;
 		border-block: 4px solid transparent;
-		border-inline-start: 6px solid var(--text-secondary);
+		border-inline-start: 6px solid var(--dim);
 		transition: transform 140ms ease-out;
 	}
 	.section-toggle[aria-expanded="true"]::before {
@@ -685,7 +769,7 @@
 		margin-block: 0.25rem;
 	}
 
-	/* One registry field, a Cursor Settings row: the label and its help text
+	/* One registry field, a settings row: the label and its help text
 	   stack on the left, the control sits on the right, and an alert for a bad
 	   entry runs under both. The row's children arrive in the order head,
 	   control, help, so the grid places them by role rather than by order. */
@@ -696,7 +780,7 @@
 		row-gap: var(--space-1);
 		align-items: center;
 		padding: var(--space-3);
-		border-block-end: 1px solid var(--cursor-stroke-quaternary);
+		border-block-end: 1px solid var(--line-soft);
 	}
 	.field-row:last-child {
 		border-block-end: 0;
@@ -738,7 +822,7 @@
 	}
 	.field-help {
 		margin: 0;
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-base);
 	}
 
@@ -755,31 +839,39 @@
 	}
 	.cloud-table {
 		width: 100%;
-		border-collapse: collapse;
+		border: 1px solid var(--line);
+		border-collapse: separate;
+		border-spacing: 0;
+		border-radius: var(--radius-xl);
+		background: var(--panel-2);
+		overflow: hidden;
 		font-size: 0.8125rem;
 	}
 	.cloud-table th,
 	.cloud-table td {
 		padding: 0.5rem 0.625rem;
-		border-block-end: 1px solid var(--border);
+		border-block-end: 1px solid var(--line);
 		text-align: start;
 	}
 	.cloud-table thead th {
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
+		font-weight: 600;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
+		border-block-end-color: var(--line);
 	}
 	.cloud-name-id {
 		display: block;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.cloud-variant-row .cloud-name-primary {
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.cloud-no-add {
 		display: block;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.cloud-add__body {
@@ -795,7 +887,7 @@
 	.cloud-add__label {
 		display: grid;
 		gap: var(--space-1);
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-sm);
 	}
 	.cloud-add__label .input {
@@ -820,7 +912,7 @@
 	}
 	.chat-template-custom label,
 	.chat-template-resolution dt {
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.chat-template-resolution {
@@ -835,7 +927,7 @@
 	}
 	.chat-template-resolution dd {
 		margin: 0;
-		color: var(--text-primary);
+		color: var(--text);
 		font-size: 0.75rem;
 		overflow-wrap: anywhere;
 	}
@@ -844,7 +936,7 @@
 		width: 0.375rem;
 		height: 0.375rem;
 		border-radius: 50%;
-		background: var(--cursor-accent);
+		background: var(--accent);
 	}
 	.field-reset {
 		display: inline-flex;
@@ -856,12 +948,12 @@
 		border: 0;
 		border-radius: 50%;
 		background: transparent;
-		color: var(--text-secondary);
+		color: var(--dim);
 		cursor: pointer;
 	}
 	.field-reset:hover {
-		background: var(--cursor-bg-tertiary);
-		color: var(--text-primary);
+		background: var(--panel-3);
+		color: var(--text);
 	}
 
 	.slider-row {
@@ -879,7 +971,7 @@
 		font-variant-numeric: tabular-nums;
 	}
 	.readout-suffix {
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 		font-variant-numeric: tabular-nums;
 		white-space: nowrap;
@@ -902,22 +994,25 @@
 		width: 100%;
 		padding: 0.625rem 0.75rem;
 		border: 0;
-		border-radius: var(--radius);
+		border-inline-start: 2px solid transparent;
+		border-radius: var(--radius-sm);
 		background: none;
-		color: var(--text-primary);
+		color: var(--text);
 		text-align: start;
 		cursor: pointer;
 	}
 	.result-row:hover {
-		background: var(--bg-tertiary);
+		background: var(--panel-2);
 	}
 	.result-row[aria-pressed="true"] {
-		background: var(--cursor-accent-subtle);
+		border-inline-start-color: var(--accent);
+		background: var(--panel-2);
 	}
 	.result-avatar {
 		flex-shrink: 0;
-		border-radius: 9px;
-		background: var(--bg-tertiary);
+		border: 1px solid var(--line-soft);
+		border-radius: var(--radius-lg);
+		background: var(--logo-tile);
 	}
 	.result-main {
 		display: flex;
@@ -931,7 +1026,7 @@
 		align-items: center;
 		gap: 0.625rem;
 		margin: 0;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.6875rem;
 		font-variant-numeric: tabular-nums;
 	}
@@ -946,8 +1041,8 @@
 	.hub-detail-title {
 		margin: 0;
 		font-family: var(--font-mono);
-		font-size: 1.375rem;
-		font-weight: 600;
+		font-size: var(--font-size-title);
+		font-weight: var(--font-weight-title);
 		overflow-wrap: anywhere;
 	}
 	.hub-publisher {
@@ -955,11 +1050,11 @@
 		align-items: center;
 		gap: 0.375rem;
 		margin: 0;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.verified-badge {
 		display: inline-flex;
-		color: var(--cursor-accent);
+		color: var(--accent);
 	}
 	.pill-row {
 		display: flex;
@@ -971,24 +1066,30 @@
 	/* Quant picker table [Unsloth] quant selector + [LM Studio] fit. */
 	.quant-table {
 		width: 100%;
-		border-collapse: collapse;
+		border: 1px solid var(--line);
+		border-collapse: separate;
+		border-spacing: 0;
+		border-radius: var(--radius-xl);
+		background: var(--panel-2);
+		overflow: hidden;
 		font-size: 0.8125rem;
 	}
 	.quant-table th,
 	.quant-table td {
 		padding: 0.5rem 0.625rem;
-		border-block-end: 1px solid var(--border);
+		border-block-end: 1px solid var(--line);
 		text-align: start;
 	}
 	.quant-table thead th {
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
 		font-weight: 600;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
+		border-block-end-color: var(--line);
 	}
 	.quant-table .is-recommended {
-		background: var(--cursor-accent-subtle);
+		background: var(--accent-subtle);
 	}
 	.quant-name {
 		display: flex;
@@ -1010,33 +1111,42 @@
 
 	/* Fit badges: lightened text companions keep AA on the surfaces. */
 	.fit-badge {
+		border: 1px solid var(--line);
+		background: none;
+		color: var(--dim);
 		white-space: nowrap;
 	}
 	.fit-badge[data-fit="gpu"] {
-		color: var(--success-text);
+		border-color: color-mix(in srgb, var(--good) var(--tint-line), transparent);
+		background: color-mix(in srgb, var(--good) var(--tint-fill), transparent);
+		color: var(--good-text);
 	}
 	.fit-badge[data-fit="partial"] {
-		color: var(--warning);
+		border-color: color-mix(in srgb, var(--warn) var(--tint-line), transparent);
+		background: color-mix(in srgb, var(--warn) var(--tint-fill), transparent);
+		color: var(--warn);
 	}
 	.fit-badge[data-fit="cpu"] {
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.fit-badge[data-fit="none"] {
-		color: var(--danger-text);
+		border-color: color-mix(in srgb, var(--danger) var(--tint-line), transparent);
+		background: color-mix(in srgb, var(--danger) var(--tint-fill), transparent);
+		color: var(--danger);
 	}
 
 	/* Rendered README below the detail card. */
 	.readme {
 		margin-block-start: 1rem;
 		padding-block-start: 1rem;
-		border-block-start: 1px solid var(--border);
+		border-block-start: 1px solid var(--line);
 	}
 	.readme-heading {
 		margin: 0 0 0.5rem;
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
 		font-weight: 600;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 	}
 	.markdown {
@@ -1054,9 +1164,10 @@
 		font-size: 1.125rem;
 	}
 	.markdown pre {
-		padding: 0.75rem;
-		border-radius: var(--radius);
-		background: var(--bg-tertiary);
+		padding: 0.75rem 0.875rem;
+		border: 1px solid var(--line);
+		border-radius: var(--radius-lg);
+		background: var(--panel-2);
 		overflow-x: auto;
 	}
 	.markdown code {
@@ -1067,12 +1178,12 @@
 	}
 	.markdown :is(th, td) {
 		padding: 0.375rem 0.625rem;
-		border: 1px solid var(--border);
+		border: 1px solid var(--line);
 	}
 	.markdown blockquote {
 		padding-inline-start: 0.75rem;
-		border-inline-start: 3px solid var(--border);
-		color: var(--text-secondary);
+		border-inline-start: 3px solid var(--line);
+		color: var(--dim);
 	}
 }
 
@@ -1085,7 +1196,7 @@
 		flex-direction: column;
 	}
 	.banner-warning {
-		border-left-color: var(--warning);
+		border-left-color: var(--warn);
 	}
 
 	/* Nav column [Unsloth] settings category list: stacked pill links. */
@@ -1119,21 +1230,21 @@
 	}
 	.settings-nav-link {
 		display: block;
-		padding: 4px 6px;
-		border-radius: var(--radius);
-		color: var(--cursor-text-secondary);
-		font-size: var(--font-size-sm);
+		padding: var(--space-2) var(--space-3);
+		border-radius: var(--radius-sm);
+		color: var(--dim);
+		font-size: var(--font-size-base);
 		font-weight: 400;
 		line-height: var(--line-height-sm);
 		text-decoration: none;
 	}
 	.settings-nav-link:hover {
-		background: var(--cursor-bg-quaternary);
-		color: var(--cursor-text-primary);
+		background: var(--panel-2);
+		color: var(--text);
 	}
 	.settings-nav-link[aria-current="true"] {
-		background: var(--cursor-bg-quaternary);
-		color: var(--cursor-text-primary);
+		background: var(--accent-subtle);
+		color: var(--accent);
 	}
 	.settings-panel {
 		flex: 1;
@@ -1143,9 +1254,9 @@
 		gap: 1rem;
 	}
 
-	/* A settings section: its title (12px, secondary) sits above a 4% tinted
-	   12px card that has no border or padding of its own - its rows pad
-	   themselves. The wrapper stays bare. */
+	/* A settings section: its 15px title sits above a raised 12px card with
+	   a line border and no padding of its own - its rows pad themselves.
+	   The wrapper stays bare. */
 	.settings-card {
 		padding: 0;
 		border: 0;
@@ -1155,17 +1266,18 @@
 		display: flex;
 		align-items: center;
 		gap: var(--space-2);
-		margin-block-end: var(--space-1-5);
-		color: var(--cursor-text-secondary);
-		font-size: var(--font-size-sm);
-		font-weight: 400;
+		margin-block-end: var(--space-2);
+		color: var(--text);
+		font-size: var(--font-size-lg);
+		font-weight: 600;
 		line-height: var(--line-height-sm);
 	}
 	.settings-card > .section-body,
 	.settings-card > .env-body {
 		padding: 0;
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-bg-quinary);
+		background: var(--panel-2);
 		overflow: hidden;
 	}
 	.settings-card > .env-body {
@@ -1178,7 +1290,7 @@
 	/* System live extras. */
 	.metric-sub {
 		margin: 0;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.metric-label svg {
@@ -1192,16 +1304,16 @@
 		inset-block: -0.1875rem;
 		inset-inline-start: calc(var(--progress) * 100%);
 		width: 1px;
-		background: var(--border);
+		background: var(--line);
 	}
 	.vendor-chip {
 		font-weight: 600;
 	}
 	.gpu-devices {
 		padding: var(--space-4);
-		border: 0;
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-bg-quinary);
+		background: var(--panel-2);
 	}
 	.gpu-device-row {
 		display: flex;
@@ -1221,7 +1333,7 @@
 		gap: 0.5rem;
 	}
 	.secret-mask {
-		color: var(--text-secondary);
+		color: var(--dim);
 		letter-spacing: 0.2em;
 	}
 	.secret-field .input {
@@ -1238,7 +1350,7 @@
 		font-weight: 600;
 	}
 	.about-license {
-		color: var(--cursor-accent);
+		color: var(--blue-text);
 	}
 }
 
@@ -1274,17 +1386,19 @@
 		min-width: 0;
 		padding: 0.5rem 0.75rem;
 		border: 0;
-		border-radius: var(--radius);
+		border-inline-start: 2px solid transparent;
+		border-radius: var(--radius-sm);
 		background: none;
-		color: var(--text-primary);
+		color: var(--text);
 		text-align: start;
 		cursor: pointer;
 	}
 	.profile-select:hover {
-		background: var(--bg-tertiary);
+		background: var(--panel-2);
 	}
 	.profile-select[aria-pressed="true"] {
-		background: var(--cursor-accent-subtle);
+		border-inline-start-color: var(--accent);
+		background: var(--panel-2);
 	}
 	/* The "No profile" row is not a checklist: a static label with its
 	   own Set Active instead of a pressable row that opens an editor. */
@@ -1294,7 +1408,7 @@
 		gap: 0.5rem;
 		min-width: 0;
 		padding: 0.5rem 0.75rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.profile-none .set-active-none {
 		margin-inline-start: auto;
@@ -1305,12 +1419,13 @@
 		align-items: center;
 		gap: 0.375rem;
 		margin: 0;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.8125rem;
 	}
 	.pill-stale {
-		background: color-mix(in srgb, var(--warning) 20%, transparent);
-		color: var(--warning);
+		border-color: color-mix(in srgb, var(--warn) var(--tint-line), transparent);
+		background: color-mix(in srgb, var(--warn) var(--tint-fill), transparent);
+		color: var(--warn);
 	}
 	.profile-name {
 		font-family: var(--font-mono);
@@ -1321,10 +1436,10 @@
 		display: flex;
 		flex-direction: column;
 		gap: 0.75rem;
-		padding: 1rem;
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		background: var(--bg-secondary);
+		padding: var(--space-4);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-xl);
+		background: var(--panel-2);
 	}
 	.profile-summary-title {
 		display: flex;
@@ -1336,21 +1451,21 @@
 	}
 	.profiles-heading {
 		margin: 0;
-		color: var(--text-secondary);
-		font-size: 0.6875rem;
+		color: var(--faint);
+		font-size: var(--font-size-xs);
 		font-weight: 600;
-		letter-spacing: 0.08em;
+		letter-spacing: 0.05em;
 		text-transform: uppercase;
 	}
 	.start-from {
 		margin: 0 0 0.75rem;
 		padding: 0.625rem 0.75rem;
-		border: 1px solid var(--border);
+		border: 1px solid var(--line);
 		border-radius: var(--radius);
 	}
 	.start-from legend {
 		padding-inline: 0.25rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.radio-row {
@@ -1379,7 +1494,7 @@
 		gap: var(--space-3);
 	}
 	.env-body .section-heading {
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-sm);
 		font-weight: 400;
 		line-height: var(--line-height-sm);
@@ -1395,7 +1510,7 @@
 		align-items: center;
 		gap: var(--space-2);
 		padding-block: var(--space-2);
-		border-block-end: 1px solid var(--cursor-stroke-quaternary);
+		border-block-end: 1px solid var(--line-soft);
 	}
 	.env-key {
 		min-width: 12rem;
@@ -1407,7 +1522,7 @@
 		font-family: var(--font);
 	}
 	.secret-state {
-		color: var(--cursor-text-tertiary);
+		color: var(--faint);
 		font-size: var(--font-size-sm);
 	}
 	.secret-state[hidden] {
@@ -1427,7 +1542,7 @@
 	}
 	.env-used-by {
 		flex-basis: 100%;
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.env-add-row {
@@ -1448,7 +1563,7 @@
 	}
 	.hf-status {
 		font-size: 0.8125rem;
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 
 	.review-modal {
@@ -1463,13 +1578,13 @@
 	}
 	.diff-table :is(th, td) {
 		padding: 0.375rem 0.5rem;
-		border-block-end: 1px solid var(--border);
+		border-block-end: 1px solid var(--line);
 		text-align: start;
 		vertical-align: top;
 		overflow-wrap: anywhere;
 	}
 	.diff-table thead th {
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.6875rem;
 		font-weight: 600;
 		letter-spacing: 0.08em;
@@ -1480,10 +1595,10 @@
 		font-weight: 400;
 	}
 	.diff-running {
-		color: var(--text-secondary);
+		color: var(--dim);
 	}
 	.diff-pending {
-		color: var(--cursor-accent);
+		color: var(--accent);
 	}
 
 	.profile-editor-header,
@@ -1515,7 +1630,7 @@
 		margin-block-end: 0.5rem;
 	}
 	.shuttle-count {
-		color: var(--text-secondary);
+		color: var(--dim);
 		font-size: 0.75rem;
 	}
 	.shuttle-search {
@@ -1527,7 +1642,7 @@
 		max-height: 22rem;
 		margin: 0;
 		padding: 0.25rem;
-		border: 1px solid var(--border-strong);
+		border: 1px solid var(--line);
 		border-radius: var(--radius);
 		list-style: none;
 		overflow-y: auto;
@@ -1545,10 +1660,10 @@
 		cursor: pointer;
 	}
 	.shuttle-option:hover {
-		background: var(--bg-tertiary);
+		background: var(--panel-3);
 	}
 	.shuttle-option[aria-selected="true"] {
-		background: var(--cursor-accent-subtle);
+		background: var(--accent-subtle);
 	}
 	.profile-kind {
 		margin-inline-start: auto;
@@ -1569,9 +1684,9 @@
 	}
 	.vram-summary {
 		padding: 0.75rem;
-		border: 1px solid var(--border);
-		border-radius: var(--radius);
-		background: var(--cursor-bg-quinary);
+		border: 1px solid var(--line);
+		border-radius: var(--radius-xl);
+		background: var(--panel-2);
 	}
 	.vram-total,
 	.vram-budget,
@@ -1590,15 +1705,15 @@
 		border: 0;
 		border-radius: 50%;
 		background: transparent;
-		color: var(--text-secondary);
+		color: var(--dim);
 		cursor: help;
 	}
 	.vram-unknown,
 	.vram-budget[data-state="warning"] {
-		color: var(--warning);
+		color: var(--warn);
 	}
 	.vram-budget[data-state="over"] {
-		color: var(--danger-text);
+		color: var(--danger);
 	}
 	.discover-types {
 		flex-basis: 100%;
@@ -1624,6 +1739,9 @@
 	.has-status-bar .desk {
 		padding-block-end: calc(var(--status-bar-height) + 1rem);
 	}
+	.has-status-bar .tab-nav {
+		padding-block-end: calc(var(--status-bar-height) + var(--space-3));
+	}
 
 	/* Endpoint LEDs in the desk's indicators group: green ready, amber
 	   provisioning, gray unconfigured. The fills match the connection
@@ -1642,13 +1760,13 @@
 		width: 0.5rem;
 		height: 0.5rem;
 		border-radius: 50%;
-		background: var(--text-secondary);
+		background: var(--dim);
 	}
 	.status-led[data-state="ready"] .status-led-dot {
-		background: var(--success);
+		background: var(--good);
 	}
 	.status-led[data-state="provisioning"] .status-led-dot {
-		background: var(--warning);
+		background: var(--warn);
 	}
 	.status-bar-summary {
 		font-variant-numeric: tabular-nums;
diff --git a/crates/gateway/config-ui/ui/src/styles/tokens.test.mjs b/crates/gateway/config-ui/ui/src/styles/tokens.test.mjs
index f700108cb..7ee65903f 100644
--- a/crates/gateway/config-ui/ui/src/styles/tokens.test.mjs
+++ b/crates/gateway/config-ui/ui/src/styles/tokens.test.mjs
@@ -1,5 +1,5 @@
 // Pins the CSS wiring end to end: the esbuild bundle must emit
-// dist/app.css containing the shared Cursor Dark design tokens
+// dist/app.css containing the style guide's design tokens
 // (shared-ui/tokens.css) and the cascade layer order, and
 // dist/index.html must link that stylesheet - a dropped import in
 // main.ts or a dropped <link> would ship an unstyled UI without any
@@ -18,13 +18,8 @@ const distDir = path.join(path.dirname(fileURLToPath(import.meta.url)), "..", ".
 test("the bundled stylesheet defines the design tokens and layer order", async () => {
   const css = await readFile(path.join(distDir, "app.css"), "utf8");
   // \s* tolerates minified output; /i tolerates hex case changes.
-  assert.match(css, /--cursor-base:\s*#F0F0F0/i, "the Cursor Dark primitive is defined");
-  assert.match(css, /--accent:\s*#e4b570/i, "the Runvil gold accent token is defined");
-  assert.match(
-    css,
-    /--bg-primary:\s*var\(--cursor-editor\)/,
-    "the page background aliases the Cursor editor surface",
-  );
+  assert.match(css, /--panel:\s*#131520/i, "the page surface is defined");
+  assert.match(css, /--accent:\s*#ff8a1e/i, "the orange accent token is defined");
   assert.match(
     css,
     /@layer reset,\s*base,\s*components,\s*utilities/,
@@ -32,8 +27,8 @@ test("the bundled stylesheet defines the design tokens and layer order", async (
   );
   assert.match(
     css,
-    /textarea\.input\s*\{[^}]*height:\s*auto[^}]*border-radius:\s*0?\.75rem/,
-    "multiline inputs keep the rounded rectangle radius and natural height",
+    /textarea\.input\s*\{[^}]*height:\s*auto[^}]*border-radius:\s*var\(--radius\)/,
+    "multiline inputs keep the field radius and natural height",
   );
   assert.match(
     css,
@@ -51,79 +46,85 @@ test("the desk page links the bundled stylesheet", async () => {
   );
 });
 
-// The gateway sheet carries the same IDE values as @workshop/look, because
-// the two UIs are copies of one Cursor look. Hex literals compare without
-// case; a value written as a formula compares as written.
-const IDE_TOKENS = {
-  "--cursor-red": "#E34671",
-  "--cursor-blue": "#81A1C1",
-  "--cursor-cyan": "#88C0D0",
-  "--cursor-accent": "#81A1C1",
-  "--cursor-sidebar": "#141414",
-  "--cursor-shadow-primary": "#00000066",
-  "--cursor-bg-active": "#F0F0F01E",
-  "--cursor-bg-focused": "#F0F0F01E",
-  "--cursor-text-link": "#81A1C1",
-  "--cursor-text-invert": "#181818",
-  "--radius-xs": "2px",
+// The palette is the Gateway UI style guide's, value for value. Hex
+// literals compare without case.
+const STYLE_GUIDE_TOKENS = {
+  "--chrome": "#0f1118",
+  "--panel": "#131520",
+  "--panel-2": "#171a26",
+  "--panel-3": "#1c2030",
+  "--line": "#262b3a",
+  "--line-soft": "#20242f",
+  "--line-focus": "#33405e",
+  "--text": "#eceef4",
+  "--dim": "#9aa2b4",
+  "--faint": "#697082",
+  "--accent": "#ff8a1e",
+  "--accent-dim": "#8a4f16",
+  "--good": "#4bbf73",
+  "--good-text": "#5fd08a",
+  "--blue": "#4d8dfe",
+  "--blue-text": "#6ea6ff",
+  "--warn": "#e8b06a",
+  "--danger": "#e06a6a",
+  "--logo-tile": "#0c0e14",
+  "--font-size-root": "14.5px",
+  "--radius": "9px",
+  "--radius-xl": "12px",
 };
 
-test("the bundled stylesheet carries the IDE token values", async () => {
+test("the bundled stylesheet carries the style guide's palette", async () => {
   const css = await readFile(path.join(distDir, "app.css"), "utf8");
-  for (const [name, value] of Object.entries(IDE_TOKENS)) {
+  for (const [name, value] of Object.entries(STYLE_GUIDE_TOKENS)) {
     assert.match(css, new RegExp(`${name}:\\s*${value}\\s*;`, "i"), `${name} is ${value}`);
   }
   // The minifier writes 300ms as .3s, so the duration is pinned by value.
   assert.match(css, /--duration-slower:\s*(300ms|\.3s)\s*;/, "the slow transition is 300ms");
-  assert.match(
-    css,
-    /--cursor-shadow-secondary:\s*color-mix\(in srgb,\s*var\(--cursor-shadow-primary\) 60%,\s*transparent\)/,
-    "the secondary shadow ink is 60% of the widget shadow",
-  );
-  assert.match(
-    css,
-    /--cursor-shadow-tertiary:\s*color-mix\(in srgb,\s*var\(--cursor-shadow-primary\) 30%,\s*transparent\)/,
-    "the tertiary shadow ink is 30% of the widget shadow",
-  );
-  assert.match(
-    css,
-    /--cursor-accent-hover:\s*color-mix\(in srgb,\s*white 10%,\s*var\(--cursor-accent\)\)/,
-    "the accent hover mixes 10% white into the accent",
-  );
-  assert.match(
-    css,
-    /--code-font:\s*Consolas, Menlo, Monaco, "Droid Sans Mono", "Courier New", monospace/,
-    "the code font is Cursor's stack",
-  );
+  assert.doesNotMatch(css, /--cursor-/, "no Cursor Dark token survives");
 });
 
-test("the tertiary and quaternary text names are the Cursor tiers, not swapped literals", async () => {
-  const css = await readFile(path.join(distDir, "app.css"), "utf8");
-  assert.match(css, /--text-tertiary:\s*var\(--cursor-text-tertiary\)\s*;/);
-  assert.match(css, /--text-quaternary:\s*var\(--cursor-text-quaternary\)\s*;/);
-  assert.match(css, /--cursor-text-tertiary:\s*color-mix\(in srgb,\s*var\(--cursor-base\) 60%/);
-  assert.match(css, /--cursor-text-quaternary:\s*color-mix\(in srgb,\s*var\(--cursor-base\) 36%/);
+test("the root size is the style guide's 14.5px", async () => {
+  const html = await bundledDeclarations("html");
+  assert.equal(html.get("font-size"), "var(--font-size-root)");
 });
 
-test("buttons take Cursor's 24px control values and the accent primary", async () => {
+test("the primary button is the orange wash, the rest neutral raised, danger a red tint", async () => {
   const button = await bundledDeclarations(".button");
-  assert.equal(button.get("height"), "var(--height-sm)", "24px tall");
-  assert.equal(button.get("padding-inline"), "var(--space-2)", "8px padding");
-  assert.equal(button.get("border-radius"), "var(--radius)", "a 6px radius");
-  assert.equal(button.get("font-size"), "var(--font-size-base)", "13px");
-  assert.equal(button.get("font-weight"), "400");
+  assert.equal(button.get("height"), "var(--height-sm)", "28px tall");
+  assert.equal(button.get("padding-inline"), "var(--space-3)", "12px padding");
+  assert.equal(button.get("border-radius"), "var(--radius)", "a 9px radius");
+  assert.equal(button.get("color"), "var(--dim)");
   const small = await bundledDeclarations(".button-sm");
-  assert.equal(small.get("height"), "var(--height-xs)", "20px tall");
-  assert.equal(small.get("border-radius"), "var(--radius-sm)", "a 4px radius");
+  assert.equal(small.get("height"), "var(--height-xs)", "24px tall");
+  assert.equal(small.get("border-radius"), "var(--radius-sm)", "an 8px radius");
   const primary = await bundledDeclarations(".button-primary");
-  assert.equal(primary.get("background"), "var(--cursor-accent)", "the accent replaces the gold");
-  assert.equal(primary.get("color"), "var(--cursor-text-invert)");
-  const hover = await bundledDeclarations(".button-primary:hover");
-  assert.equal(hover.get("background"), "var(--cursor-accent-hover)");
-  const secondary = await bundledDeclarations(".button-secondary");
-  const secondaryHover = await bundledDeclarations(".button-secondary:hover");
-  assert.equal(secondary.get("background"), "var(--cursor-bg-tertiary)", "an 8% fill");
-  assert.equal(secondaryHover.get("background"), "var(--cursor-bg-secondary)", "a 14% hover");
+  assert.equal(squash(primary.get("border-color")), "var(--accent-dim)");
+  assert.match(squash(primary.get("background")), /^linear-gradient\(180deg,color-mix\(insrgb,var\(--accent\)18%,transparent\)/);
+  assert.equal(primary.get("color"), "var(--accent)");
+  const neutral = await bundledDeclarations(".button-outline");
+  assert.equal(neutral.get("border-color"), "var(--line)");
+  assert.equal(neutral.get("background"), "var(--panel-2)");
+  const neutralHover = await bundledDeclarations(".button-outline:hover");
+  assert.equal(neutralHover.get("background"), "var(--panel-3)", "a hover steps the surface up");
+  const danger = await bundledDeclarations(".button-danger");
+  assert.equal(danger.get("color"), "var(--danger)");
+  const disabled = await bundledDeclarations(".button:disabled");
+  assert.match(disabled.get("opacity"), /^0?\.5$/, "the minifier may drop the leading zero");
+  for (const selector of [".button-primary:disabled", ".button-danger:disabled"]) {
+    const disabledAction = await bundledDeclarations(selector);
+    assert.equal(disabledAction.get("border-color"), "var(--line)", `${selector} loses its family border`);
+    assert.equal(disabledAction.get("background"), "var(--panel-2)", `${selector} loses its wash`);
+    assert.equal(disabledAction.get("color"), "var(--faint)", `${selector} loses its text color`);
+  }
+});
+
+test("fields are bordered and light their border on focus", async () => {
+  const input = await bundledDeclarations(".input");
+  assert.equal(squash(input.get("border")), "1pxsolidvar(--line)");
+  assert.equal(input.get("border-radius"), "var(--radius)");
+  assert.equal(input.get("background"), "var(--panel)");
+  const focus = await bundledDeclarations(".input:focus");
+  assert.equal(focus.get("border-color"), "var(--line-focus)");
 });
 
 test("the switch is the single shared 32x20 track with a 16px thumb that moves 12px", async () => {
@@ -131,10 +132,10 @@ test("the switch is the single shared 32x20 track with a 16px thumb that moves 1
   const track = await bundledDeclarations(".switch");
   assert.equal(track.get("width"), "32px");
   assert.equal(track.get("height"), "20px");
-  assert.equal(track.get("background"), "var(--cursor-bg-secondary)", "14% white when off");
+  assert.equal(track.get("background"), "var(--line)", "the line color when off");
   assert.equal(squash(track.get("transition")), "background-colorvar(--duration-slow)ease");
   const on = await bundledDeclarations(".switch[aria-checked=true]");
-  assert.equal(on.get("background"), "var(--cursor-green)");
+  assert.equal(on.get("background"), "var(--good)");
   const thumb = await bundledDeclarations(".switch::after");
   assert.equal(thumb.get("width"), "16px");
   assert.equal(thumb.get("height"), "16px");
@@ -149,15 +150,16 @@ test("modals take the form modal values", async () => {
   const dialog = await bundledDeclarations(".modal-dialog");
   assert.equal(dialog.get("width"), "320px", "a 320px card");
   assert.equal(dialog.get("border-radius"), "var(--radius-xl)", "a 12px radius");
-  assert.equal(squash(dialog.get("border")), "1pxsolidvar(--cursor-stroke-secondary)", "a 12% stroke");
+  assert.equal(squash(dialog.get("border")), "1pxsolidvar(--line)", "a line border");
+  assert.equal(dialog.get("background"), "var(--panel-2)", "the raised surface");
   assert.equal(dialog.get("box-shadow"), "none");
   assert.match(dialog.get("animation") ?? "", /var\(--duration-slower\)/, "opens in 300ms");
   const title = await bundledDeclarations(".modal-dialog > h2");
   assert.equal(squash(title.get("padding")), "var(--space-3)var(--space-4)", "header 12px 16px");
-  assert.equal(title.get("font-size"), "var(--font-size-lg)", "a 14px title");
+  assert.equal(title.get("font-size"), "var(--font-size-lg)", "a 15px title");
   const actions = await bundledDeclarations(".modal-actions");
   assert.equal(actions.get("padding"), "10px", "footer padding 10px");
-  assert.equal(squash(actions.get("border-top")), "1pxsolidvar(--cursor-stroke-tertiary)", "an 8% top border");
+  assert.equal(squash(actions.get("border-top")), "1pxsolidvar(--line-soft)", "a soft top divider");
 });
 
 test("both modal families drop the scale-in under reduced motion", async () => {
diff --git a/crates/shared-ui/controls.css b/crates/shared-ui/controls.css
index 450f0aa24..f6385dac3 100644
--- a/crates/shared-ui/controls.css
+++ b/crates/shared-ui/controls.css
@@ -1,31 +1,31 @@
-/* Button, input, select, and switch base classes shared by both UIs, on
-   the Cursor Dark tokens from tokens.css. The rules live in the components
-   cascade layer: a consuming UI that declares its own layer order (the
-   gateway's base.css declares `reset, base, components, utilities`)
-   keeps its overrides winning on specificity, and a consuming UI with
-   no layers lets its unlayered rules override these. Interactive classes
-   inherit the consuming UI's focus convention - no focus frames are
-   added here.
+/* Button, input, select, and switch base classes, on the tokens from
+   tokens.css. The rules live in the components cascade layer: a
+   consuming UI that declares its own layer order (the gateway's base.css
+   declares `reset, base, components, utilities`) keeps its overrides
+   winning on specificity, and a consuming UI with no layers lets its
+   unlayered rules override these. Interactive classes inherit the
+   consuming UI's focus convention - no focus frames are added here.
 
-   The buttons and the switch carry Cursor's control values, the same ones
-   @workshop/look uses; the input and select keep the gateway's own soft
-   surface. */
+   The values are the Gateway UI style guide's: one orange primary action
+   per view, neutral raised buttons for the rest, a red tint for
+   destructive actions, and bordered fields that light their border on
+   focus. */
 
 @layer components {
-	/* Buttons: 24px tall, 8px padding, 6px radius, 13px weight 400. -sm is
-	   20px tall with a 4px radius; -xs is the same size, kept for the
-	   gateway's compact rows. A variant class picks the fill. */
+	/* Buttons: 28px tall, 12px padding, 9px radius. -sm and -xs are 24px
+	   tall with an 8px radius; -xs also drops to 12px text. A variant
+	   class picks the fill; a bare .button is a borderless text button. */
 	.button {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--space-1);
+		gap: var(--space-1-5);
 		height: var(--height-sm);
-		padding-inline: var(--space-2);
+		padding-inline: var(--space-3);
 		border: 1px solid transparent;
 		border-radius: var(--radius);
 		background: transparent;
-		color: var(--cursor-text-primary);
+		color: var(--dim);
 		font-size: var(--font-size-base);
 		font-weight: 400;
 		white-space: nowrap;
@@ -33,97 +33,118 @@
 		transition: background-color var(--duration-normal) ease-out, color var(--duration-normal) ease-out,
 			border-color var(--duration-normal) ease-out;
 	}
+	.button:hover {
+		color: var(--text);
+	}
 	.button:disabled {
-		border-color: transparent;
-		background: var(--cursor-control-disabled-bg);
-		color: var(--cursor-control-disabled-text);
+		opacity: 0.5;
 		pointer-events: none;
 	}
 	.button-sm,
 	.button-xs {
 		height: var(--height-xs);
+		padding-inline: var(--space-2);
 		border-radius: var(--radius-sm);
 	}
 	.button-xs {
 		font-size: var(--font-size-sm);
 	}
-	/* Dark label on Cursor's accent; hover mixes 10% white into it. */
+	/* The primary action: an orange wash over the dim accent border, with
+	   accent text. */
 	.button-primary {
-		background: var(--cursor-accent);
-		color: var(--cursor-text-invert);
+		border-color: var(--accent-dim);
+		background: linear-gradient(
+			180deg,
+			color-mix(in srgb, var(--accent) 18%, transparent),
+			color-mix(in srgb, var(--accent) 6%, transparent)
+		);
+		color: var(--accent);
+		font-weight: 600;
 	}
 	.button-primary:hover {
-		background: var(--cursor-accent-hover);
+		border-color: var(--accent);
+		color: var(--accent-hover);
 	}
-	.button-secondary {
-		background: var(--cursor-bg-tertiary);
+	/* Neutral raised buttons: a hover steps the surface up one level and
+	   lifts the text. */
+	.button-secondary,
+	.button-outline {
+		border-color: var(--line);
+		background: var(--panel-2);
 	}
-	.button-secondary:hover {
-		background: var(--cursor-bg-secondary);
+	.button-secondary:hover,
+	.button-outline:hover {
+		background: var(--panel-3);
 	}
 	.button-ghost {
 		background: transparent;
 	}
 	.button-ghost:hover {
-		background: var(--cursor-bg-tertiary);
-	}
-	.button-outline {
-		border-color: var(--cursor-stroke-secondary);
-		background: transparent;
-	}
-	.button-outline:hover {
-		background: var(--cursor-bg-quaternary);
+		background: var(--panel-2);
 	}
 	.button-danger {
-		border-color: var(--danger);
-		background: color-mix(in srgb, var(--danger) 10%, transparent);
-		color: var(--danger-text);
+		border-color: color-mix(in srgb, var(--danger) 30%, transparent);
+		background: color-mix(in srgb, var(--danger) 7%, transparent);
+		color: var(--danger);
 	}
 	.button-danger:hover {
-		background: color-mix(in srgb, var(--danger) 15%, transparent);
+		background: color-mix(in srgb, var(--danger) 14%, transparent);
+		color: var(--danger);
+	}
+	/* A disabled action drops its family color: at half opacity alone, an
+	   orange or red wash still reads as ready to press. */
+	.button-primary:disabled,
+	.button-danger:disabled {
+		border-color: var(--line);
+		background: var(--panel-2);
+		color: var(--faint);
 	}
 
-	/* Text input: rounded-full on the Cursor input surface. */
+	/* Text input: a bordered field on the page surface; focus lights the
+	   border. */
 	.input {
 		height: 2.25rem;
-		padding-inline: 0.875rem;
-		border: 1px solid transparent;
-		border-radius: 9999px;
-		background: var(--cursor-bg-input-surface);
-		color: var(--text-primary);
-		font-size: 0.8125rem;
+		padding-inline: var(--space-3);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		background: var(--panel);
+		color: var(--text);
+		font-size: var(--font-size-base);
 	}
 	.input::placeholder {
-		color: var(--input-placeholder);
+		color: var(--faint);
 	}
 	input::-ms-reveal {
 		display: none;
 	}
-	.input:hover {
-		background: var(--cursor-bg-tertiary);
+	.input:focus {
+		border-color: var(--line-focus);
+	}
+	.input:disabled {
+		opacity: 0.45;
 	}
 	.input[aria-invalid="true"] {
-		border-color: var(--cursor-danger);
+		border-color: color-mix(in srgb, var(--danger) 60%, transparent);
 	}
 	textarea.input {
 		height: auto;
 		padding-block: 0.625rem;
-		border-radius: 0.75rem;
+		border-radius: var(--radius);
 	}
 
-	/* Select trigger: same pill-and-soft-surface family as .input. */
+	/* Select trigger: the same bordered field as .input. */
 	.select {
 		display: inline-flex;
 		align-items: center;
 		justify-content: space-between;
 		gap: 0.5rem;
 		height: 2.25rem;
-		padding-inline: 0.875rem;
-		border: 1px solid transparent;
-		border-radius: 9999px;
-		background: var(--cursor-bg-input-surface);
-		color: var(--text-primary);
-		font-size: 0.8125rem;
+		padding-inline: var(--space-3);
+		border: 1px solid var(--line);
+		border-radius: var(--radius);
+		background: var(--panel);
+		color: var(--text);
+		font-size: var(--font-size-base);
 		cursor: pointer;
 	}
 	.select::after {
@@ -135,7 +156,7 @@
 		transform: translateY(-0.125rem) rotate(45deg);
 	}
 	.select:hover {
-		background: var(--cursor-bg-tertiary);
+		background: var(--panel-2);
 	}
 	.select:disabled {
 		opacity: 0.5;
@@ -145,8 +166,8 @@
 		height: 2rem;
 	}
 
-	/* Switch, on a <button role="switch" aria-checked>: a 32x20 track, 14%
-	   white when off and green when on, with a 16px white thumb that moves
+	/* Switch, on a <button role="switch" aria-checked>: a 32x20 track, the
+	   line color when off and green when on, with a 16px white thumb that moves
 	   12px over 200ms. The thumb is the ::after. */
 	.switch {
 		position: relative;
@@ -158,7 +179,7 @@
 		padding: 0;
 		border: 0;
 		border-radius: var(--radius-full);
-		background: var(--cursor-bg-secondary);
+		background: var(--line);
 		cursor: pointer;
 		transition: background-color var(--duration-slow) ease;
 	}
@@ -175,7 +196,7 @@
 		transition: transform var(--duration-slow) ease;
 	}
 	.switch[aria-checked="true"] {
-		background: var(--cursor-green);
+		background: var(--good);
 	}
 	.switch[aria-checked="true"]::after {
 		transform: translateX(12px);
diff --git a/crates/shared-ui/dropdown.css b/crates/shared-ui/dropdown.css
index 29fd1c37a..45168d7ac 100644
--- a/crates/shared-ui/dropdown.css
+++ b/crates/shared-ui/dropdown.css
@@ -1,11 +1,11 @@
 /* The shared menu surface (.menu, .menu-item) and the floating action
-   menu (.menu-popup) from dropdown.ts, on the Cursor Dark tokens. The
+   menu (.menu-popup) from dropdown.ts, on the shared tokens. The
    gateway's select listboxes and profile switcher consume the surface
    classes with their own behavior; the workshop's action menus come from
    dropdown.ts. Converged from the gateway's controls.css menu rules and
    the workshop's murm-ui-derived dropdown stylesheet; the danger rows
-   keep the neutral hover wash because --danger-text is tuned to pass
-   4.5:1 on --bg-hover. All rules live in the components layer so a
+   keep the neutral hover wash because --danger holds its contrast on
+   --panel-3. All rules live in the components layer so a
    consumer's own rules override them.
 
    Derived from murm-ui 0.2.0 styles/dropdown.css, copyright (c) 2026
@@ -16,9 +16,9 @@
 	.menu {
 		min-width: 8rem;
 		padding: var(--space-1);
-		border: 1px solid var(--border);
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--bg-elevated);
+		background: var(--panel-2);
 		box-shadow: var(--shadow-popup);
 	}
 	.menu-item {
@@ -31,27 +31,28 @@
 		border: 0;
 		border-radius: var(--radius);
 		background: transparent;
-		color: var(--text-primary);
+		color: var(--text);
 		font: inherit;
 		font-size: var(--font-size-base);
 		text-align: start;
 		cursor: pointer;
 	}
 	.menu-item:hover {
-		background: var(--bg-hover);
+		background: var(--panel-3);
 	}
-	/* Keyboard focus reads through the same state background; Cursor
-	   menus draw no focus frame. */
+	/* Keyboard focus reads through the same state background; menus draw
+	   no focus frame. */
 	.menu-item:focus-visible {
 		outline: none;
-		background: var(--bg-hover);
+		background: var(--panel-3);
 	}
 	.menu-item[aria-selected="true"],
 	.menu-item--selected {
-		background: var(--cursor-bg-secondary);
+		background: var(--panel-3);
+		color: var(--text);
 	}
 	.menu-item--danger {
-		color: var(--danger-text);
+		color: var(--danger);
 	}
 	.menu-item__icon {
 		display: flex;
@@ -67,7 +68,7 @@
 	}
 	.menu-item__check {
 		margin-inline-start: auto;
-		color: var(--cursor-icon-primary);
+		color: var(--text);
 	}
 
 	/* The floating action menu: fixed against the viewport, fading in. */
diff --git a/crates/shared-ui/modal.css b/crates/shared-ui/modal.css
index 5fab692cc..ba4755d6d 100644
--- a/crates/shared-ui/modal.css
+++ b/crates/shared-ui/modal.css
@@ -1,9 +1,9 @@
-/* Default skin for modal.ts's base classes, on the Cursor Dark tokens: the
-   form modal Cursor's settings pages and quick prompts open, the same
-   values @workshop/look gives its `form` skin. A 320px card with a 12px
-   radius and a 12% stroke and no shadow; a 14px title in a 12px 16px
-   header, a body padded 12px 16px 16px, and a footer padded 10px over an
-   8% top border, Cancel first and the primary action last. It opens in
+/* Default skin for modal.ts's base classes, on the shared tokens: the
+   form modal the settings pages and quick prompts open. A 320px card on
+   the raised surface with a 12px radius, a line border, and no shadow; a
+   15px title in a 12px 16px header, a body padded 12px 16px 16px, and a
+   footer padded 10px over a soft divider, Cancel first and the primary
+   action last. It opens in
    300ms, scaling up from 0.97, over a 0.5 backdrop.
 
    Every rule sits in the components layer, so a consumer's own per-prefix
@@ -25,11 +25,11 @@
 		width: 320px;
 		max-width: calc(100vw - 2rem);
 		padding: 0;
-		border: 1px solid var(--cursor-stroke-secondary);
+		border: 1px solid var(--line);
 		border-radius: var(--radius-xl);
-		background: var(--cursor-editor);
+		background: var(--panel-2);
 		box-shadow: none;
-		color: var(--cursor-text-primary);
+		color: var(--text);
 		animation: modal-form-open var(--duration-slower) var(--ease-out-cubic) both;
 	}
 	.modal-dialog > h2 {
@@ -41,7 +41,7 @@
 	.modal-dialog > p {
 		margin: 0;
 		padding: var(--space-3) var(--space-4) 0;
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-base);
 	}
 	.modal-dialog > div:not(.modal-actions) {
@@ -51,7 +51,7 @@
 		padding: var(--space-3) var(--space-4) var(--space-4);
 	}
 	.modal-dialog > div:not(.modal-actions) label {
-		color: var(--cursor-text-secondary);
+		color: var(--dim);
 		font-size: var(--font-size-sm);
 	}
 	.modal-dialog > div:not(.modal-actions) .input {
@@ -67,7 +67,7 @@
 		gap: var(--space-2);
 		margin: 0;
 		padding: 10px;
-		border-top: 1px solid var(--cursor-stroke-tertiary);
+		border-top: 1px solid var(--line-soft);
 	}
 
 	@keyframes modal-form-open {
diff --git a/crates/shared-ui/package.json b/crates/shared-ui/package.json
index 600e7bd35..5ca0a385a 100644
--- a/crates/shared-ui/package.json
+++ b/crates/shared-ui/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "description": "Runvil shared UI primitives: the Cursor Dark token sheet and the behavioral components (modal, dropdown, toast stack, status bar view, progress bar, button/input bases) consumed by both esbuild-built UIs (gateway-config-ui and workshop-server).",
+  "description": "Runvil shared UI primitives: the Gateway token sheet and the behavioral components (modal, dropdown, toast stack, status bar view, progress bar, button/input bases) consumed by the gateway config UI (gateway-config-ui).",
   "exports": {
     "./tokens.css": "./tokens.css",
     "./controls.css": "./controls.css",
diff --git a/crates/shared-ui/shimmer.css b/crates/shared-ui/shimmer.css
index c5e4f0adf..bc76839e7 100644
--- a/crates/shared-ui/shimmer.css
+++ b/crates/shared-ui/shimmer.css
@@ -17,11 +17,11 @@
 .ws-shimmer-text {
 	background-image: linear-gradient(
 		90deg,
-		color-mix(in srgb, var(--text-primary) 60%, transparent) 0,
-		color-mix(in srgb, var(--text-primary) 60%, transparent) 25%,
-		var(--cursor-text-primary) 60%,
-		color-mix(in srgb, var(--text-primary) 60%, transparent) 75%,
-		color-mix(in srgb, var(--text-primary) 60%, transparent) 100%
+		color-mix(in srgb, var(--text) 60%, transparent) 0,
+		color-mix(in srgb, var(--text) 60%, transparent) 25%,
+		var(--text) 60%,
+		color-mix(in srgb, var(--text) 60%, transparent) 75%,
+		color-mix(in srgb, var(--text) 60%, transparent) 100%
 	);
 	background-size: 200% 100%;
 	background-clip: text;
@@ -46,6 +46,6 @@
 		background-clip: unset;
 		-webkit-background-clip: unset;
 		-webkit-text-fill-color: unset;
-		color: var(--text-muted);
+		color: var(--dim);
 	}
 }
diff --git a/crates/shared-ui/status-bar.css b/crates/shared-ui/status-bar.css
index ff7a48361..700519fdb 100644
--- a/crates/shared-ui/status-bar.css
+++ b/crates/shared-ui/status-bar.css
@@ -19,7 +19,7 @@
 		display: flex;
 		align-items: center;
 		background: var(--status-bar-bg);
-		border-top: 1px solid var(--border);
+		border-top: 1px solid var(--line);
 		font-size: 12px;
 		line-height: 22px;
 		font-variant-numeric: tabular-nums;
diff --git a/crates/shared-ui/toast.css b/crates/shared-ui/toast.css
index e69d536f1..8e54a495c 100644
--- a/crates/shared-ui/toast.css
+++ b/crates/shared-ui/toast.css
@@ -1,4 +1,4 @@
-/* The toast stack, bottom-right, on the Cursor Dark tokens. A consumer
+/* The toast stack, bottom-right, on the shared tokens. A consumer
    whose chrome occupies the viewport bottom (the workshop's status bar)
    retunes the offset through --toast-inset-block-end. Rules live in the
    components layer so consumer overrides win. */
@@ -20,14 +20,14 @@
 		min-width: 240px;
 		max-width: 360px;
 		padding: 0.625rem 0.875rem;
-		border: 1px solid var(--border);
+		border: 1px solid var(--line);
 		border-left-width: 3px;
 		border-radius: var(--radius);
-		background: var(--bg-secondary);
+		background: var(--chrome);
 		box-shadow: 0 8px 24px rgb(0 0 0 / 0.4);
 	}
 	.toast-success {
-		border-left-color: var(--success);
+		border-left-color: var(--good);
 	}
 	.toast-error {
 		border-left-color: var(--danger);
diff --git a/crates/shared-ui/tokens.css b/crates/shared-ui/tokens.css
index 375823390..39c66e80a 100644
--- a/crates/shared-ui/tokens.css
+++ b/crates/shared-ui/tokens.css
@@ -1,152 +1,75 @@
 /* ==========================================================================
-   Runvil shared Cursor Dark token sheet
-
-   The single source of truth for every visual value both UIs (the gateway
-   config UI and the workshop) share: palette, type, spacing, radius, and
-   the status bar's progress and LED effects. Both esbuild builds bundle
-   this file; no component stylesheet hardcodes a color or a themed length.
-
-   The surface, text, border, spacing, radius, shadow, and motion values
-   mirror Cursor's dark theme (extracted from its workbench tokens); the
-   accent stays Runvil gold. The --cursor-* values are exact copies
-   from Cursor's installed theme - never approximate them, and keep the
-   color-mix() formulas intact (never encode premultiplied RGB as
-   straight-alpha hex).
-
-   The IDE values (red, blue, cyan, the accent, the sidebar, the state
-   backgrounds, the shadow inks, the control and tier tokens) are the same
-   ones @workshop/look carries: the two UIs are copies of one Cursor look,
-   and a value changed there is changed here. The "Generic aliases" block
-   at the end maps the names the gateway config UI's components consume
-   onto the same Cursor Dark values, so both UIs read one sheet.
+   Runvil Gateway token sheet
+
+   The single source of truth for every visual value the gateway config UI
+   uses: palette, type, spacing, radius, control heights, and the status
+   bar's progress and LED effects. No component stylesheet hardcodes a
+   color or a themed length.
+
+   The palette is the Gateway UI style guide's (the PromptForge_Models
+   mock), with its reconcile list applied: --faint is the visible
+   #697082, the status colors and their text tints are tokens, the
+   unused violet is gone, and the radius scale is the one components use.
+
+   Hue carries meaning. Orange --accent is the primary action and the
+   selection; green --good is success, set, and "Local"; blue is "Remote"
+   and links; amber --warn is warnings and tight states; red --danger is
+   destructive and failure. A status reads as a tinted pill, not as
+   colored text alone.
    ========================================================================== */
 
 :root {
-  /* Cursor Dark primitives (from cursor-dark-color-theme.json + JS registry) */
-  --cursor-base: #F0F0F0;
-  --cursor-chrome: #141414;
-  --cursor-editor: #181818;
-  --cursor-sidebar: #141414;
-  --cursor-focus: #F0F0F0;
-  /* The IDE's accent is its button background, which is also its link color. */
-  --cursor-accent: #81A1C1;
-  --cursor-brand: #F54E00;
-  --cursor-blue: #81A1C1;
-  --cursor-cyan: #88C0D0;
-  --cursor-green: #3FA266;
-  --cursor-red: #E34671;
-  --cursor-danger: #E34671;
-  --cursor-yellow: #F1B467;
-  --cursor-magenta: #B48EAD;
-  --cursor-orange: #D08770;
-  --cursor-purple: #9386F2;
-  --cursor-multitask: #B180D7;
-
-  /* Cursor Dark derived surfaces */
-  --cursor-bg-quinary: color-mix(in srgb, var(--cursor-base) 4%, transparent);
-  --cursor-bg-quaternary: color-mix(in srgb, var(--cursor-base) 6%, transparent);
-  --cursor-bg-tertiary: color-mix(in srgb, var(--cursor-base) 8%, transparent);
-  --cursor-bg-secondary: color-mix(in srgb, var(--cursor-base) 14%, transparent);
-  --cursor-bg-primary: color-mix(in srgb, var(--cursor-base) 20%, transparent);
-  --cursor-bg-active: #F0F0F01E;
-  --cursor-bg-focused: #F0F0F01E;
-  --cursor-bg-card: var(--cursor-bg-quaternary);
-  --cursor-bg-elevated: #181818;
-  --cursor-bg-input-surface: var(--cursor-bg-quaternary);
-  --cursor-bg-input-field: color-mix(in srgb, var(--cursor-base) 3%, transparent);
-
-  /* Cursor Dark accent (the IDE's primary button and link color) */
-  --cursor-accent-hover: color-mix(in srgb, white 10%, var(--cursor-accent));
-  --cursor-accent-subtle: color-mix(in srgb, var(--cursor-accent) 8%, transparent);
-
-  /* Cursor Dark disabled controls */
-  --cursor-control-disabled-bg: var(--cursor-bg-tertiary);
-  --cursor-control-disabled-text: var(--cursor-text-quaternary);
-
-  /* Cursor Dark derived strokes */
-  --cursor-stroke-quaternary: color-mix(in srgb, var(--cursor-base) 4%, transparent);
-  --cursor-stroke-tertiary: color-mix(in srgb, var(--cursor-base) 8%, transparent);
-  --cursor-stroke-secondary: color-mix(in srgb, var(--cursor-base) 12%, transparent);
-  --cursor-stroke-primary: color-mix(in srgb, var(--cursor-base) 20%, transparent);
-  --cursor-stroke-focused: color-mix(in srgb, var(--cursor-focus, var(--cursor-base)) 15%, transparent);
-
-  /* Cursor Dark derived text */
-  --cursor-text-primary: #F0F0F0;
-  --cursor-text-secondary: color-mix(in srgb, var(--cursor-base) 74%, transparent);
-  --cursor-text-tertiary: color-mix(in srgb, var(--cursor-base) 60%, transparent);
-  --cursor-text-quaternary: color-mix(in srgb, var(--cursor-base) 36%, transparent);
-  --cursor-text-link: #81A1C1;
-  --cursor-text-invert: #181818;
-
-  /* Cursor Dark derived icons */
-  --cursor-icon-primary: #F0F0F0;
-  --cursor-icon-secondary: color-mix(in srgb, var(--cursor-base) 66%, transparent);
-  --cursor-icon-tertiary: color-mix(in srgb, var(--cursor-base) 52%, transparent);
-  --cursor-icon-quaternary: color-mix(in srgb, var(--cursor-base) 28%, transparent);
-
-  /* Cursor Dark shadows: the IDE derives the secondary and tertiary inks
-     as 60% and 30% of the widget shadow, and builds its box-shadow stacks
-     from them. The stacks' 1px ring is the widget border. */
-  --cursor-shadow-primary: #00000066;
-  --cursor-shadow-secondary: color-mix(in srgb, var(--cursor-shadow-primary) 60%, transparent);
-  --cursor-shadow-tertiary: color-mix(in srgb, var(--cursor-shadow-primary) 30%, transparent);
-  --cursor-box-shadow-base:
-    0 0 0 1px var(--cursor-stroke-tertiary),
-    0 0 4px 0px var(--cursor-shadow-secondary),
-    0 8px 24px -2px var(--cursor-shadow-secondary);
-  --cursor-box-shadow-xl:
-    0 0 0 1px var(--cursor-stroke-tertiary),
-    0 0 4px 0 var(--cursor-shadow-secondary),
-    0 12px 24px 0 var(--cursor-shadow-secondary),
-    0 24px 36px 0 var(--cursor-shadow-secondary);
-
-  /* VS Code theme surfaces (white-based alpha, for desk chrome) */
-  --bg: #181818;
-  --bg-raised: #141414;
-  --bg-hover: #F0F0F011;
-  --bg-card: #F0F0F00A;
-  --bg-input: #F0F0F00A;
-  --bg-elevated: #181818;
-
-  /* Text and borders (opacity tiers over the dark surfaces) */
-  --text: #F0F0F0;
-  --text-muted: #F0F0F0BD;
-  /* The quieter label tiers are the Cursor tiers themselves. */
-  --text-tertiary: var(--cursor-text-tertiary);
-  --text-quaternary: var(--cursor-text-quaternary);
-  --input-placeholder: #F0F0F099;
-  --border: #F0F0F013;
-  --border-subtle: #F0F0F011;
-
-  /* Accent and semantics */
-  --accent: #e4b570;
-  --accent-dim: #b89059;
-  --danger: #E34671;
-  --danger-text: #FC6B83;
-  --on-danger: #ffffff;
-  --hover-glow: var(--accent, #e4b570);
-  --color-red: var(--cursor-red);
-  --color-green: #3FA266;
-  --color-yellow: #F1B467;
-  --color-cyan: var(--cursor-cyan);
-  --color-blue: var(--cursor-blue);
-  --color-purple: #9386F2;
+  /* Surfaces, darkest to lightest: the title strip and sidebar, the page,
+     a raised card or row, and the hovered or active step above it. */
+  --chrome: #0f1118;
+  --panel: #131520;
+  --panel-2: #171a26;
+  --panel-3: #1c2030;
+  /* The tile behind a logo or avatar. */
+  --logo-tile: #0c0e14;
+
+  /* Borders: structural lines, inner row dividers, and a focused field. */
+  --line: #262b3a;
+  --line-soft: #20242f;
+  --line-focus: #33405e;
+
+  /* Text: primary, secondary, and tertiary (labels, meta, eyebrows). */
+  --text: #eceef4;
+  --dim: #9aa2b4;
+  --faint: #697082;
+
+  /* Families. Each base color has a lighter text tint that holds
+     contrast on the panels. */
+  --accent: #ff8a1e;
+  --accent-dim: #8a4f16;
+  --accent-hover: color-mix(in srgb, var(--accent) 88%, #ffffff);
+  --accent-subtle: color-mix(in srgb, var(--accent) 10%, transparent);
+  --on-accent: var(--panel);
+  --good: #4bbf73;
+  --good-text: #5fd08a;
+  --blue: #4d8dfe;
+  --blue-text: #6ea6ff;
+  --warn: #e8b06a;
+  --danger: #e06a6a;
+
+  /* A family's tinted pill: an 8% fill under a 35% border. */
+  --tint-fill: 8%;
+  --tint-line: 35%;
 
   /* Type */
-  --font-prose: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", sans-serif;
-  --code-font: Consolas, Menlo, Monaco, "Droid Sans Mono", "Courier New", monospace;
+  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
+  --font-mono: ui-monospace, Menlo, monospace;
+  /* The root size; rem lengths scale from it. */
+  --font-size-root: 14.5px;
   --font-size-xs: 11px;
   --font-size-sm: 12px;
-  --font-size-base: 13px;
-  --font-size-lg: 14px;
-  --line-height-xs: 14px;
+  --font-size-label: 12.5px;
+  --font-size-base: 13.5px;
+  --font-size-lg: 15px;
+  --font-size-title: 22px;
   --line-height-sm: 16px;
-  --line-height-base: 18px;
-  --line-height-lg: 22px;
-  --letter-spacing-base: -0.08px;
-  --letter-spacing-lg: -0.15px;
   --font-weight-medium: 500;
-  --font-weight-semibold: 590;
+  --font-weight-title: 650;
 
   /* Spacing scale (4px base unit) */
   --space-1: 4px;
@@ -156,154 +79,60 @@
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-9: 36px;
   --space-10: 40px;
-  --space-11: 44px;
-  --space-12: 48px;
-  --space-13: 52px;
-  --space-14: 56px;
-  --space-15: 60px;
-  --space-16: 64px;
-  --space-17: 68px;
-  --space-18: 72px;
-  --space-19: 76px;
-  --space-20: 80px;
 
-  /* Radius */
-  --radius-xs: 2px;
-  --radius: 6px;
-  --radius-sm: 4px;
-  --radius-lg: 8px;
+  /* Radius: 8px small controls, 9px buttons and fields, 10px tiles,
+     12px cards, 14px large surfaces, and the pill. */
+  --radius-sm: 8px;
+  --radius: 9px;
+  --radius-lg: 10px;
   --radius-xl: 12px;
+  --radius-2xl: 14px;
   --radius-full: 9999px;
 
   /* Control heights */
-  --height-xs: 20px;
-  --height-sm: 24px;
-  --height-base: 28px;
-  --height-lg: 32px;
+  --height-xs: 24px;
+  --height-sm: 28px;
+  --height-base: 32px;
 
   /* Shadows */
-  --shadow-primary: var(--cursor-shadow-primary);
-  --shadow-secondary: var(--cursor-shadow-secondary);
-  --shadow-tertiary: var(--cursor-shadow-tertiary);
-  --shadow-popup: 0 3px 8px var(--cursor-shadow-secondary), 0 2px 5px var(--cursor-shadow-secondary), 0 1px 1px var(--cursor-shadow-secondary);
-
-  /* Syntax highlighting (code blocks) */
-  --syntax-bg: #181818;
-  --syntax-fg: #D6D6DD;
-  --syntax-keyword: #82D2CE;
-  --syntax-string: #E394DC;
-  --syntax-function: #EFB080;
-  --syntax-number: #EBC88C;
-  --syntax-comment: #E4E4E45E;
-  --syntax-constant: #F8C762;
-  --syntax-link: #87C3FF;
+  --shadow-ink: #00000066;
+  --shadow-popup: 0 8px 24px color-mix(in srgb, var(--shadow-ink) 60%, transparent);
 
   /* Motion */
-  --duration-instant: 50ms;
-  --duration-fast: 100ms;
   --duration-normal: 150ms;
   --duration-slow: 200ms;
   --duration-slower: 300ms;
   --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
 
-  /* Component tokens (consumed by the agent-window components) */
-  --mention-bg: color-mix(in srgb, #81A1C1 12%, transparent);
-  --mention-text: #81A1C1;
-  --tool-card-bg: #181818;
-  --tool-card-border: var(--cursor-stroke-tertiary);
-  --tool-card-header-height: 28px;
-  --prompt-input-bg: var(--cursor-bg-input-surface);
-  --prompt-input-border: var(--cursor-stroke-secondary);
-  --prompt-input-border-focus: var(--cursor-stroke-primary);
-  --prompt-input-min-height: 18px;
-  --prompt-input-max-height: 200px;
-  --prompt-input-radius: 6px;
-  --model-trigger-height: 24px;
-  --model-trigger-radius: 9999px;
-  --token-ring-track: var(--cursor-stroke-secondary);
-  --token-ring-fill: var(--cursor-icon-secondary);
-  --agent-max-width: 840px;
-  --agent-card-radius: 12px;
-  --feed-padding-inline: 12px;
-  --feed-row-gap: 14px;
-  --agent-outer-padding: 12px;
-  --bubble-radius: 12px;
-  --assistant-inset: 13px;
-  --space-2-5: 10px;
-  --token-ring-size: 16px;
+  /* Desk chrome: the title strip and the sidebar beside the content. */
+  --desk-header-height: 56px;
+  --sidebar-width: 150px;
+  --sidebar-collapsed-width: 56px;
 
   /* Status bar */
   --status-bar-height: 22px;
-  --status-bar-bg: #141414;
-  --status-bar-text: #F0F0F099;
-  --status-bar-text-error: #FC6B83;
-  --status-bar-padding-inline: 7px;
-  --status-bar-gap: 3px;
+  --status-bar-bg: var(--chrome);
+  --status-bar-text: var(--faint);
+  --status-bar-text-error: var(--danger);
 
   /* Status bar barberpole (the fill and track also color the block
      progress bar in progress.css) */
   --progress-width: 144px; /* 1.5in at CSS 96dpi; px so it composes with sibling px tokens */
   --progress-height: 6px; /* also sets the stripe width: one stripe is one bar height */
-  --progress-fill: #3FA266; /* the sliding stripes */
-  --progress-track: #F0F0F011; /* the gaps between stripes */
+  --progress-fill: var(--accent); /* the sliding stripes */
+  --progress-track: var(--line-soft); /* the gaps between stripes */
   --progress-glow: 4px; /* blur radius of the barberpole's box-shadow glow */
 
   /* Status bar activity LED */
   --led-size: 10px;
-  --led-green: #3FA266;
-  --led-amber: #F1B467;
-  --led-off: #F0F0F011;
+  --led-green: var(--good);
+  --led-amber: var(--warn);
+  --led-off: var(--line-soft);
   --led-core: #ffffff;
   --led-glow-radius: 6px;
   --led-pulse-ms: 250ms;
   --led-fade-in-ms: 60ms;
   --led-lens-highlight: #F0F0F02E;
   --led-lens-shadow: #00000073;
-
-  /* Window title bar (custom Windows chrome) */
-  --titlebar-height: 35px;
-  --titlebar-bg: #141414;
-  --titlebar-foreground: #F0F0F084;
-  --titlebar-divider: #F0F0F013;
-  --titlebar-accent: var(--accent);
-  --titlebar-glyph: #F0F0F05C;
-  --titlebar-hover: #F0F0F011;
-  --titlebar-control-width: 46px;
-  --titlebar-close-hover: #E34671;
-  --titlebar-close-glyph-hover: #ffffff;
-  --titlebar-icon-size: 20px;
-  --titlebar-font-size: 13px;
-  /* left inset clearing the native traffic lights under macOS overlay chrome */
-  --titlebar-macos-inset: 78px;
-  --titlebar-popover-min-width: 160px;
-  --titlebar-popover-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-
-  /* Scrollbars (applied globally by the consuming UI's base sheet) */
-  --scrollbar-width: 8px; /* thin; also the thumb's rounding diameter */
-  --scrollbar-thumb: #F0F0F011;
-  --scrollbar-thumb-hover: #F0F0F01E;
-
-  /* ------------------------------------------------------------------
-     Generic aliases: the token names the gateway config UI's components
-     consume, mapped onto the Cursor Dark values above so both UIs read
-     one sheet. The accent stays Runvil gold in both products.
-     ------------------------------------------------------------------ */
-  --bg-primary: var(--cursor-editor);
-  --bg-secondary: var(--cursor-chrome);
-  --bg-tertiary: var(--cursor-bg-tertiary);
-  --text-primary: var(--cursor-text-primary);
-  --text-secondary: var(--cursor-text-secondary);
-  --accent-hover: color-mix(in srgb, var(--accent) 88%, #ffffff);
-  --accent-subtle: color-mix(in srgb, var(--accent) 15%, transparent);
-  --success: var(--cursor-green);
-  --success-text: color-mix(in srgb, var(--cursor-green) 55%, #ffffff);
-  --warning: var(--cursor-yellow);
-  --border-strong: var(--cursor-stroke-secondary);
-  --font: var(--font-prose);
-  --font-mono: var(--code-font);
 }