diff --git a/canvas/src/__tests__/reduced-motion.test.ts b/canvas/src/__tests__/reduced-motion.test.ts
index 3f7eee05..328eb7df 100644
--- a/canvas/src/__tests__/reduced-motion.test.ts
+++ b/canvas/src/__tests__/reduced-motion.test.ts
@@ -13,6 +13,12 @@ function readSrc(rel: string) {
   return readFileSync(join(root, "src", rel), "utf8");
 }
 
+function usesGuardedPulse(src: string): boolean {
+  if (src.includes("motion-safe:animate-pulse")) return true;
+  if (src.includes("from \"@/lib/design-tokens\"") || src.includes("from '@/lib/design-tokens'")) return true;
+  return false;
+}
+
 describe("prefers-reduced-motion compliance", () => {
   it("globals.css contains @media (prefers-reduced-motion: reduce) block", () => {
     const css = readSrc("app/globals.css");
@@ -34,10 +40,10 @@ describe("prefers-reduced-motion compliance", () => {
     expect(src).toContain("motion-safe:animate-pulse");
   });
 
-  it("StatusDot.tsx uses motion-safe:animate-pulse", () => {
+  it("StatusDot.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
     const src = readSrc("components/StatusDot.tsx");
     expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
-    expect(src).toContain("motion-safe:animate-pulse");
+    expect(usesGuardedPulse(src)).toBe(true);
   });
 
   it("Toolbar.tsx uses motion-safe:animate-pulse", () => {
@@ -52,16 +58,16 @@ describe("prefers-reduced-motion compliance", () => {
     expect(src).toContain("motion-safe:animate-pulse");
   });
 
-  it("Legend.tsx uses motion-safe:animate-pulse", () => {
+  it("Legend.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
     const src = readSrc("components/Legend.tsx");
     expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
-    expect(src).toContain("motion-safe:animate-pulse");
+    expect(usesGuardedPulse(src)).toBe(true);
   });
 
-  it("SearchDialog.tsx uses motion-safe:animate-pulse", () => {
+  it("SearchDialog.tsx uses motion-safe:animate-pulse (inline or via shared tokens)", () => {
     const src = readSrc("components/SearchDialog.tsx");
     expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
-    expect(src).toContain("motion-safe:animate-pulse");
+    expect(usesGuardedPulse(src)).toBe(true);
   });
 
   it("TerminalTab.tsx uses motion-safe:animate-pulse", () => {
@@ -76,6 +82,12 @@ describe("prefers-reduced-motion compliance", () => {
     expect(src).toContain("motion-safe:animate-pulse");
   });
 
+  it("design-tokens.ts uses motion-safe:animate-pulse, not bare animate-pulse", () => {
+    const src = readSrc("lib/design-tokens.ts");
+    expect(src.includes("animate-pulse") && !src.includes("motion-safe:animate-pulse")).toBe(false);
+    expect(src).toContain("motion-safe:animate-pulse");
+  });
+
   it("globals.css disables animate-in and slide-in classes under reduced-motion", () => {
     const css = readSrc("app/globals.css");
     expect(css).toContain(".animate-in");
diff --git a/canvas/src/components/CommunicationOverlay.tsx b/canvas/src/components/CommunicationOverlay.tsx
index 7b0c49c7..ebc2c177 100644
--- a/canvas/src/components/CommunicationOverlay.tsx
+++ b/canvas/src/components/CommunicationOverlay.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { useCanvasStore } from "@/store/canvas";
 import { api } from "@/lib/api";
+import { COMM_TYPE_LABELS } from "@/lib/design-tokens";
 
 interface Communication {
   id: string;
@@ -143,14 +144,17 @@ export function CommunicationOverlay() {
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-1.5 min-w-0">
                   <span className={typeColor} aria-hidden="true">{typeIcon}</span>
+                  <span className="sr-only">{COMM_TYPE_LABELS[c.type] ?? c.type}</span>
                   <span className="text-zinc-300 font-medium truncate">
                     {c.sourceName}
                   </span>
                   <span className="text-zinc-400" aria-hidden="true">→</span>
+                  <span className="sr-only">to</span>
                   <span className="text-zinc-300 truncate">{c.targetName}</span>
                 </div>
                 <div className="flex items-center gap-1 shrink-0">
                   <span className={statusColor} aria-hidden="true">{statusIcon}</span>
+                  <span className="sr-only">{c.status}</span>
                   <span className="text-zinc-400">{age}</span>
                 </div>
               </div>
diff --git a/canvas/src/components/ContextMenu.tsx b/canvas/src/components/ContextMenu.tsx
index d4be6ec5..5e1d2f4f 100644
--- a/canvas/src/components/ContextMenu.tsx
+++ b/canvas/src/components/ContextMenu.tsx
@@ -5,6 +5,7 @@ import { useCanvasStore, type WorkspaceNodeData } from "@/store/canvas";
 import { api } from "@/lib/api";
 import { showToast } from "./Toaster";
 import { ConfirmDialog } from "./ConfirmDialog";
+import { statusDotClass } from "@/lib/design-tokens";
 
 interface MenuItem {
   label: string;
@@ -277,9 +278,7 @@ export function ContextMenu() {
         <div className="flex items-center gap-1.5 mt-0.5">
           <div
             aria-hidden="true"
-            className={`w-1.5 h-1.5 rounded-full ${
-              isOnline ? "bg-emerald-400" : isOfflineOrFailed ? "bg-red-400" : "bg-zinc-500"
-            }`}
+            className={`w-1.5 h-1.5 rounded-full ${statusDotClass(contextMenu.nodeData.status)}`}
           />
           <span className="text-[10px] text-zinc-500">{contextMenu.nodeData.status}</span>
         </div>
diff --git a/canvas/src/components/EmptyState.tsx b/canvas/src/components/EmptyState.tsx
index 998d88c0..52cab350 100644
--- a/canvas/src/components/EmptyState.tsx
+++ b/canvas/src/components/EmptyState.tsx
@@ -4,6 +4,8 @@ import { useState, useEffect } from "react";
 import { api } from "@/lib/api";
 import { useCanvasStore } from "@/store/canvas";
 import { OrgTemplatesSection } from "./TemplatePalette";
+import { Spinner } from "./Spinner";
+import { TIER_CONFIG } from "@/lib/design-tokens";
 
 interface Template {
   id: string;
@@ -15,13 +17,6 @@ interface Template {
   skill_count: number;
 }
 
-const TIER_COLORS: Record<number, string> = {
-  1: "text-zinc-400 border-zinc-700/60",
-  2: "text-sky-400 border-sky-500/30",
-  3: "text-violet-400 border-violet-500/30",
-  4: "text-amber-400 border-amber-500/30",
-};
-
 export function EmptyState() {
   const [templates, setTemplates] = useState<Template[]>([]);
   const [loading, setLoading] = useState(true);
@@ -105,17 +100,20 @@ export function EmptyState() {
 
         {/* Template grid */}
         {loading ? (
-          <div className="text-xs text-zinc-400 py-4">Loading templates...</div>
+          <div className="flex items-center justify-center gap-2 text-xs text-zinc-400 py-4">
+            <Spinner />
+            Loading templates...
+          </div>
         ) : templates.length > 0 ? (
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-2.5 mb-4 text-left">
             {templates.map((t) => {
-              const tierColor = TIER_COLORS[t.tier] || TIER_COLORS[1];
+              const tierColor = TIER_CONFIG[t.tier]?.border || TIER_CONFIG[1].border;
               return (
                 <button
                   key={t.id}
                   onClick={() => deploy(t)}
                   disabled={!!deploying}
-                  className="group rounded-xl border border-zinc-800/60 bg-zinc-900/50 px-3.5 py-3 hover:border-blue-500/40 hover:bg-zinc-900/80 transition-all disabled:opacity-50 text-left"
+                  className="group rounded-xl border border-zinc-800/60 bg-zinc-900/50 px-3.5 py-3 hover:border-blue-500/40 hover:bg-zinc-900/80 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:border-zinc-800/60 disabled:hover:bg-zinc-900/50 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
                 >
                   <div className="flex items-center gap-2 mb-1">
                     <span className="text-sm font-medium text-zinc-200 group-hover:text-zinc-100 truncate">
@@ -144,7 +142,7 @@ export function EmptyState() {
         <button
           onClick={createBlank}
           disabled={!!deploying}
-          className="w-full rounded-xl border border-dashed border-zinc-700/60 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 hover:bg-zinc-900/50 transition-all disabled:opacity-50"
+          className="w-full rounded-xl border border-dashed border-zinc-700/60 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 hover:bg-zinc-900/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-zinc-400 disabled:hover:border-zinc-700/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
         >
           {deploying === "blank" ? "Creating..." : "+ Create blank workspace"}
         </button>
diff --git a/canvas/src/components/Legend.tsx b/canvas/src/components/Legend.tsx
index e649b6d5..ad7ec8fa 100644
--- a/canvas/src/components/Legend.tsx
+++ b/canvas/src/components/Legend.tsx
@@ -1,5 +1,9 @@
 "use client";
 
+import { STATUS_CONFIG } from "@/lib/design-tokens";
+
+const LEGEND_STATUSES = ["online", "provisioning", "degraded", "failed", "paused", "offline"] as const;
+
 export function Legend() {
   return (
     <div className="fixed bottom-6 left-4 z-30 bg-zinc-900/95 border border-zinc-700/50 rounded-xl px-4 py-3 shadow-xl shadow-black/30 backdrop-blur-sm max-w-[280px]">
@@ -9,12 +13,9 @@ export function Legend() {
       <div className="mb-2">
         <div className="text-[11px] text-zinc-500 font-medium mb-1">Status</div>
         <div className="flex flex-wrap gap-x-3 gap-y-1">
-          <StatusItem color="bg-emerald-400" label="Online" />
-          <StatusItem color="bg-sky-400 motion-safe:animate-pulse" label="Starting" />
-          <StatusItem color="bg-amber-400" label="Degraded" />
-          <StatusItem color="bg-red-400" label="Failed" />
-          <StatusItem color="bg-indigo-400" label="Paused" />
-          <StatusItem color="bg-zinc-500" label="Offline" />
+          {LEGEND_STATUSES.map((s) => (
+            <StatusItem key={s} color={STATUS_CONFIG[s].dot} label={STATUS_CONFIG[s].label} />
+          ))}
         </div>
       </div>
 
diff --git a/canvas/src/components/SearchDialog.tsx b/canvas/src/components/SearchDialog.tsx
index d6fe0f0f..f272dd17 100644
--- a/canvas/src/components/SearchDialog.tsx
+++ b/canvas/src/components/SearchDialog.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useCanvasStore } from "@/store/canvas";
+import { statusDotClass } from "@/lib/design-tokens";
 
 export function SearchDialog() {
   const open = useCanvasStore((s) => s.searchOpen);
@@ -142,12 +143,7 @@ export function SearchDialog() {
               >
                 <div
                   aria-hidden="true"
-                  className={`w-2 h-2 rounded-full shrink-0 ${
-                    node.data.status === "online" ? "bg-emerald-400" :
-                    node.data.status === "failed" ? "bg-red-400" :
-                    node.data.status === "provisioning" ? "bg-sky-400 motion-safe:animate-pulse" :
-                    "bg-zinc-500"
-                  }`}
+                  className={`w-2 h-2 rounded-full shrink-0 ${statusDotClass(node.data.status)}`}
                 />
                 <div className="min-w-0 flex-1">
                   <div className="text-sm text-zinc-200 truncate">{node.data.name}</div>
diff --git a/canvas/src/components/SidePanel.tsx b/canvas/src/components/SidePanel.tsx
index 6b0295fd..d9bef424 100644
--- a/canvas/src/components/SidePanel.tsx
+++ b/canvas/src/components/SidePanel.tsx
@@ -186,10 +186,10 @@ export function SidePanel() {
             aria-controls={`panel-${tab.id}`}
             tabIndex={panelTab === tab.id ? 0 : -1}
             onClick={() => setPanelTab(tab.id)}
-            className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-1 focus-visible:ring-zinc-600 ${
+            className={`shrink-0 px-3 py-2.5 text-[10px] font-medium tracking-wide transition-all rounded-t-lg mx-0.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70 ${
               panelTab === tab.id
                 ? "text-zinc-100 bg-zinc-800/40 border-b-2 border-blue-500"
-                : "text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800/20"
+                : "text-zinc-500 hover:text-zinc-200 hover:bg-zinc-800/40"
             }`}
           >
             <span className="mr-1 opacity-50" aria-hidden="true">{tab.icon}</span>
diff --git a/canvas/src/components/Spinner.tsx b/canvas/src/components/Spinner.tsx
new file mode 100644
index 00000000..46a86a20
--- /dev/null
+++ b/canvas/src/components/Spinner.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+const SIZES = { sm: "w-3 h-3", md: "w-4 h-4", lg: "w-5 h-5" } as const;
+
+export function Spinner({ size = "md" }: { size?: keyof typeof SIZES }) {
+  return (
+    <svg className={`${SIZES[size]} motion-safe:animate-spin`} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" opacity="0.25" />
+      <path d="M12 2a10 10 0 0 1 10 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}
diff --git a/canvas/src/components/StatusDot.tsx b/canvas/src/components/StatusDot.tsx
index 6e234892..9dcddb41 100644
--- a/canvas/src/components/StatusDot.tsx
+++ b/canvas/src/components/StatusDot.tsx
@@ -1,13 +1,6 @@
 "use client";
 
-export const STATUS_COLORS: Record<string, string> = {
-  online: "bg-emerald-400",
-  offline: "bg-zinc-500",
-  paused: "bg-indigo-400",
-  degraded: "bg-amber-400",
-  failed: "bg-red-400",
-  provisioning: "bg-sky-400 motion-safe:animate-pulse",
-};
+import { STATUS_CONFIG, statusDotClass } from "@/lib/design-tokens";
 
 export function StatusDot({
   status,
@@ -17,10 +10,10 @@ export function StatusDot({
   size?: "sm" | "md";
 }) {
   const sizeClass = size === "md" ? "w-2.5 h-2.5" : "w-2 h-2";
-  const glowClass = status === "online" ? "shadow-sm shadow-emerald-400/50" : "";
+  const glowClass = STATUS_CONFIG[status]?.glow ?? "";
   return (
     <div
-      className={`${sizeClass} rounded-full shrink-0 ${STATUS_COLORS[status] || "bg-zinc-600"} ${glowClass}`}
+      className={`${sizeClass} rounded-full shrink-0 ${statusDotClass(status)} ${glowClass}`}
     />
   );
 }
diff --git a/canvas/src/components/TemplatePalette.tsx b/canvas/src/components/TemplatePalette.tsx
index e94f6363..8387f538 100644
--- a/canvas/src/components/TemplatePalette.tsx
+++ b/canvas/src/components/TemplatePalette.tsx
@@ -5,6 +5,8 @@ import { api } from "@/lib/api";
 import { checkDeploySecrets, type PreflightResult } from "@/lib/deploy-preflight";
 import { MissingKeysModal } from "./MissingKeysModal";
 import { ConfirmDialog } from "./ConfirmDialog";
+import { Spinner } from "./Spinner";
+import { TIER_CONFIG } from "@/lib/design-tokens";
 
 interface Template {
   id: string;
@@ -90,7 +92,8 @@ export function OrgTemplatesSection() {
       </div>
 
       {loading && (
-        <div role="status" aria-live="polite" className="text-[10px] text-zinc-500">
+        <div role="status" aria-live="polite" className="flex items-center gap-1.5 text-[10px] text-zinc-500">
+          <Spinner size="sm" />
           Loading…
         </div>
       )}
@@ -141,12 +144,7 @@ export function OrgTemplatesSection() {
   );
 }
 
-const TIER_LABELS: Record<number, { label: string; color: string }> = {
-  1: { label: "T1", color: "text-zinc-400 bg-zinc-800/60" },
-  2: { label: "T2", color: "text-sky-400 bg-sky-950/40" },
-  3: { label: "T3", color: "text-violet-400 bg-violet-950/40" },
-  4: { label: "T4", color: "text-amber-400 bg-amber-950/40" },
-};
+const TIER_LABELS = TIER_CONFIG;
 
 function ImportAgentButton({ onImported }: { onImported: () => void }) {
   const [importing, setImporting] = useState(false);
@@ -354,7 +352,8 @@ export function TemplatePalette() {
 
           <div className="flex-1 overflow-y-auto p-3 space-y-2">
             {loading && (
-              <div role="status" aria-live="polite" className="text-xs text-zinc-500 text-center py-8">
+              <div role="status" aria-live="polite" className="flex items-center justify-center gap-2 text-xs text-zinc-500 text-center py-8">
+                <Spinner />
                 Loading…
               </div>
             )}
@@ -380,7 +379,7 @@ export function TemplatePalette() {
                   key={t.id}
                   onClick={() => handleDeploy(t)}
                   disabled={isDeploying}
-                  className="w-full text-left bg-zinc-800/40 hover:bg-zinc-800/70 border border-zinc-700/40 hover:border-zinc-600/50 rounded-xl p-3 transition-all disabled:opacity-50 group"
+                  className="w-full text-left bg-zinc-800/40 hover:bg-zinc-800/70 border border-zinc-700/40 hover:border-zinc-600/50 rounded-xl p-3 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-zinc-800/40 disabled:hover:border-zinc-700/40 group focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70"
                 >
                   <div className="flex items-center justify-between mb-1">
                     <span className="text-[12px] font-semibold text-zinc-200 group-hover:text-zinc-100 truncate">
diff --git a/canvas/src/components/Toolbar.tsx b/canvas/src/components/Toolbar.tsx
index 4305db30..7af056a4 100644
--- a/canvas/src/components/Toolbar.tsx
+++ b/canvas/src/components/Toolbar.tsx
@@ -7,6 +7,7 @@ import { SettingsButton } from "@/components/settings/SettingsButton";
 import { settingsGearRef } from "@/components/settings/SettingsPanel";
 import { ConfirmDialog } from "@/components/ConfirmDialog";
 import { showToast } from "@/components/Toaster";
+import { statusDotClass } from "@/lib/design-tokens";
 
 export function Toolbar() {
   const nodes = useCanvasStore((s) => s.nodes);
@@ -120,15 +121,15 @@ export function Toolbar() {
 
       {/* Status counts */}
       <div className="flex items-center gap-2.5">
-        <StatusPill color="bg-emerald-400" count={counts.online} label="online" />
+        <StatusPill color={statusDotClass("online")} count={counts.online} label="online" />
         {counts.offline > 0 && (
-          <StatusPill color="bg-zinc-500" count={counts.offline} label="offline" />
+          <StatusPill color={statusDotClass("offline")} count={counts.offline} label="offline" />
         )}
         {counts.provisioning > 0 && (
-          <StatusPill color="bg-sky-400 motion-safe:animate-pulse" count={counts.provisioning} label="starting" />
+          <StatusPill color={statusDotClass("provisioning")} count={counts.provisioning} label="starting" />
         )}
         {counts.failed > 0 && (
-          <StatusPill color="bg-red-400" count={counts.failed} label="failed" />
+          <StatusPill color={statusDotClass("failed")} count={counts.failed} label="failed" />
         )}
       </div>
 
@@ -259,7 +260,7 @@ function WsStatusPill({ status }: { status: "connected" | "connecting" | "discon
   if (status === "connected") {
     return (
       <div className="flex items-center gap-1.5" title="Real-time updates: connected">
-        <div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+        <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("online")}`} />
         <span className="text-[10px] text-zinc-500">Live</span>
       </div>
     );
@@ -274,7 +275,7 @@ function WsStatusPill({ status }: { status: "connected" | "connecting" | "discon
   }
   return (
     <div className="flex items-center gap-1.5" title="Real-time updates: disconnected">
-      <div className="w-1.5 h-1.5 rounded-full bg-red-400" />
+      <div className={`w-1.5 h-1.5 rounded-full ${statusDotClass("failed")}`} />
       <span className="text-[10px] text-zinc-500">Offline</span>
     </div>
   );
diff --git a/canvas/src/components/WorkspaceNode.tsx b/canvas/src/components/WorkspaceNode.tsx
index 5d4a6d39..ad469de6 100644
--- a/canvas/src/components/WorkspaceNode.tsx
+++ b/canvas/src/components/WorkspaceNode.tsx
@@ -5,6 +5,7 @@ import { Handle, Position, type NodeProps, type Node } from "@xyflow/react";
 import { useCanvasStore, type WorkspaceNodeData } from "@/store/canvas";
 import { showToast } from "@/components/Toaster";
 import { Tooltip } from "@/components/Tooltip";
+import { STATUS_CONFIG, TIER_CONFIG } from "@/lib/design-tokens";
 import { useShallow } from "zustand/react/shallow";
 
 /** Stable selector: returns children, grandchild flag, and descendant count for a node */
@@ -27,15 +28,6 @@ function useHierarchyInfo(parentId: string) {
   return { children, hasGrandchildren, descendantCount };
 }
 
-const STATUS_CONFIG: Record<string, { dot: string; glow: string; label: string; bar: string }> = {
-  online: { dot: "bg-emerald-400", glow: "shadow-emerald-400/50", label: "Online", bar: "from-emerald-500/20 to-transparent" },
-  offline: { dot: "bg-zinc-500", glow: "", label: "Offline", bar: "from-zinc-600/10 to-transparent" },
-  paused: { dot: "bg-indigo-400", glow: "", label: "Paused", bar: "from-indigo-500/10 to-transparent" },
-  degraded: { dot: "bg-amber-400", glow: "shadow-amber-400/50", label: "Degraded", bar: "from-amber-500/20 to-transparent" },
-  failed: { dot: "bg-red-400", glow: "shadow-red-400/50", label: "Failed", bar: "from-red-500/20 to-transparent" },
-  provisioning: { dot: "bg-sky-400 motion-safe:animate-pulse", glow: "shadow-sky-400/50", label: "Starting", bar: "from-sky-500/20 to-transparent" },
-};
-
 /** Eject/extract arrow icon — visually distinct from delete ✕ */
 function EjectIcon() {
   return (
@@ -46,13 +38,6 @@ function EjectIcon() {
   );
 }
 
-const TIER_CONFIG: Record<number, { label: string; color: string }> = {
-  1: { label: "T1", color: "text-zinc-500 bg-zinc-800/80" },
-  2: { label: "T2", color: "text-sky-400 bg-sky-950/50" },
-  3: { label: "T3", color: "text-violet-400 bg-violet-950/50" },
-  4: { label: "T4", color: "text-amber-400 bg-amber-950/50" },
-};
-
 export function WorkspaceNode({ id, data }: NodeProps<Node<WorkspaceNodeData>>) {
   const statusCfg = STATUS_CONFIG[data.status] || STATUS_CONFIG.offline;
   const tierCfg = TIER_CONFIG[data.tier] || { label: `T${data.tier}`, color: "text-zinc-500 bg-zinc-800" };
@@ -123,6 +108,7 @@ export function WorkspaceNode({ id, data }: NodeProps<Node<WorkspaceNodeData>>)
           : "bg-zinc-900/90 border border-zinc-700/80 hover:border-zinc-500/60 shadow-lg shadow-black/30 hover:shadow-xl hover:shadow-black/40"
         }
         backdrop-blur-sm
+        focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/70 focus-visible:ring-offset-1 focus-visible:ring-offset-zinc-950
       `}
     >
       {/* Status gradient bar at top */}
diff --git a/canvas/src/lib/design-tokens.ts b/canvas/src/lib/design-tokens.ts
new file mode 100644
index 00000000..61078405
--- /dev/null
+++ b/canvas/src/lib/design-tokens.ts
@@ -0,0 +1,25 @@
+export const STATUS_CONFIG: Record<string, { dot: string; glow: string; label: string; bar: string }> = {
+  online: { dot: "bg-emerald-400", glow: "shadow-emerald-400/50", label: "Online", bar: "from-emerald-500/20 to-transparent" },
+  offline: { dot: "bg-zinc-500", glow: "", label: "Offline", bar: "from-zinc-600/10 to-transparent" },
+  paused: { dot: "bg-indigo-400", glow: "", label: "Paused", bar: "from-indigo-500/10 to-transparent" },
+  degraded: { dot: "bg-amber-400", glow: "shadow-amber-400/50", label: "Degraded", bar: "from-amber-500/20 to-transparent" },
+  failed: { dot: "bg-red-400", glow: "shadow-red-400/50", label: "Failed", bar: "from-red-500/20 to-transparent" },
+  provisioning: { dot: "bg-sky-400 motion-safe:animate-pulse", glow: "shadow-sky-400/50", label: "Starting", bar: "from-sky-500/20 to-transparent" },
+};
+
+export function statusDotClass(status: string): string {
+  return STATUS_CONFIG[status]?.dot ?? "bg-zinc-500";
+}
+
+export const TIER_CONFIG: Record<number, { label: string; color: string; border: string }> = {
+  1: { label: "T1", color: "text-zinc-500 bg-zinc-800/80", border: "text-zinc-400 border-zinc-700/60" },
+  2: { label: "T2", color: "text-sky-400 bg-sky-950/50", border: "text-sky-400 border-sky-500/30" },
+  3: { label: "T3", color: "text-violet-400 bg-violet-950/50", border: "text-violet-400 border-violet-500/30" },
+  4: { label: "T4", color: "text-amber-400 bg-amber-950/50", border: "text-amber-400 border-amber-500/30" },
+};
+
+export const COMM_TYPE_LABELS: Record<string, string> = {
+  a2a_send: "sent",
+  a2a_receive: "received",
+  task_update: "task update",
+};