diff --git a/packages/graph-explorer/src/components/Alert.tsx b/packages/graph-explorer/src/components/Alert.tsx
index 3f3dd393e..23f703006 100644
--- a/packages/graph-explorer/src/components/Alert.tsx
+++ b/packages/graph-explorer/src/components/Alert.tsx
@@ -7,7 +7,7 @@ const alertVariants = cva({
   base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   variants: {
     variant: {
-      default: "bg-card text-card-foreground",
+      default: "bg-background text-foreground",
       primary:
         "text-primary-foreground bg-primary-subtle/50 border-primary-foreground/50 *:data-[slot=alert-description]:text-primary-foreground/90 [&>svg]:text-current",
       danger:
diff --git a/packages/graph-explorer/src/components/Checkbox.tsx b/packages/graph-explorer/src/components/Checkbox.tsx
index fef257dde..10809d436 100644
--- a/packages/graph-explorer/src/components/Checkbox.tsx
+++ b/packages/graph-explorer/src/components/Checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({
   return (
     <CheckboxPrimitive.Root
       className={cn(
-        "focus-visible:ring-ring-3 group peer border-primary bg-primary size-[16px] shrink-0 rounded-sm border text-white shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:ring-primary group peer border-primary bg-primary size-[16px] shrink-0 rounded-sm border text-white shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
         "data-[state=unchecked]:bg-background data-[state=unchecked]:border-input-border",
         className,
       )}
diff --git a/packages/graph-explorer/src/components/CodeEditor.tsx b/packages/graph-explorer/src/components/CodeEditor.tsx
index 9263fca8b..cc2dbc167 100644
--- a/packages/graph-explorer/src/components/CodeEditor.tsx
+++ b/packages/graph-explorer/src/components/CodeEditor.tsx
@@ -58,9 +58,11 @@ type MonacoThemeData = Parameters<Monaco["editor"]["defineTheme"]>[1];
 
 const lightTheme = createMonacoTheme({
   // DEV NOTE: This is currently limited to the colors needed for JSON syntax highlighting.
-  foreground: "#1f2937",
-  background: "#f9fafb",
-  mutedForeground: "#9ca3af",
+  // Monaco requires hex values, so these mirror the design system tokens
+  // (see docs/agents/design.md) rather than referencing the CSS variables.
+  foreground: "#18181b", // --color-foreground (gray-900)
+  background: "#fafafa", // --color-background-alt (gray-50)
+  mutedForeground: "#a1a1aa", // gray-400
   keys: "#3730a3",
   strings: "#9f1239",
   numbers: "#065f46",
diff --git a/packages/graph-explorer/src/components/EmptyState.tsx b/packages/graph-explorer/src/components/EmptyState.tsx
index bfeff4479..223141dfa 100644
--- a/packages/graph-explorer/src/components/EmptyState.tsx
+++ b/packages/graph-explorer/src/components/EmptyState.tsx
@@ -26,9 +26,8 @@ const emptyStateIconStyles = cva({
   base: "mb-6 flex size-24 items-center justify-center rounded-full text-7xl text-white group-data-[size=small]/empty:mb-3 group-data-[size=small]/empty:size-10 [&>svg]:size-1/2",
   variants: {
     variant: {
-      info: "bg-empty-info-gradient shadow-[0_0_20px_2px_hsl(205,95%,71%,70%)]",
-      error:
-        "bg-empty-error-gradient shadow-[0_0_20px_2px_rgba(255,144,119,0.7)]",
+      info: "bg-empty-info-gradient shadow-brand-300/70 shadow-[0_0_20px_2px]",
+      error: "bg-empty-error-gradient shadow-[0_0_20px_2px] shadow-red-300/70",
       subtle: "bg-muted text-muted-foreground rounded-lg",
     },
   },
diff --git a/packages/graph-explorer/src/components/SidebarTabs.tsx b/packages/graph-explorer/src/components/SidebarTabs.tsx
index b08616a9b..b9469e57f 100644
--- a/packages/graph-explorer/src/components/SidebarTabs.tsx
+++ b/packages/graph-explorer/src/components/SidebarTabs.tsx
@@ -39,7 +39,7 @@ function SidebarTabsTrigger({
   return (
     <TabsPrimitive.Trigger
       className={cn(
-        "focus-visible:ring-ring-3 bg-background text-muted-foreground ring-offset-muted data-[state=active]:border-b-primary-foreground data-[state=active]:text-primary-foreground inline-flex grow items-center justify-center gap-2 border-y-2 border-transparent border-y-transparent px-4 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-medium [&_svg]:size-4",
+        "focus-visible:ring-primary bg-background text-muted-foreground ring-offset-muted data-[state=active]:border-b-primary-foreground data-[state=active]:text-primary-foreground inline-flex grow items-center justify-center gap-2 border-y-2 border-transparent border-y-transparent px-4 py-2 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-medium [&_svg]:size-4",
         className,
       )}
       {...props}
@@ -55,7 +55,7 @@ function SidebarTabsContent({
   return (
     <TabsPrimitive.Content
       className={cn(
-        "ring-offset-background focus-visible:ring-ring-3 h-full overflow-y-auto focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        "ring-offset-background focus-visible:ring-primary h-full overflow-y-auto focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx b/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
index 21088dbe9..c81bae21a 100644
--- a/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
+++ b/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
@@ -236,7 +236,7 @@ function ClickableTypeText({
         <button
           type="button"
           className={cn(
-            "hover:text-foreground hover:bg-primary-subtle focus-visible:ring-ring-3 cursor-pointer bg-transparent p-0 font-[inherit] focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+            "hover:text-foreground hover:bg-primary-subtle focus-visible:ring-primary cursor-pointer bg-transparent p-0 font-[inherit] focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
             className,
           )}
           style={style}