From d1a56f0529102854f4a5742c4c036730b887477d Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 02:18:15 -0400
Subject: [PATCH] refactor: migrate remaining components to Design System v4

111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/admin/ActionMenu.tsx  | 10 +--
 frontend/src/components/admin/AdminLayout.tsx | 10 +--
 .../src/components/admin/AdminSidebar.tsx     | 10 +--
 frontend/src/components/admin/CategoryRow.tsx | 20 ++---
 .../components/admin/CreateCategoryModal.tsx  |  8 +-
 frontend/src/components/admin/DataTable.tsx   | 14 ++--
 .../components/admin/EditCategoryModal.tsx    |  8 +-
 frontend/src/components/admin/Pagination.tsx  | 12 +--
 frontend/src/components/admin/SearchInput.tsx |  8 +-
 frontend/src/components/admin/StatusBadge.tsx |  2 +-
 .../components/analytics/CoverageHeatmap.tsx  | 46 +++++------
 .../analytics/FlowAnalyticsPanel.tsx          | 58 +++++++-------
 .../components/analytics/FlowQualityTable.tsx | 36 ++++-----
 .../components/analytics/PsaMetricsPanel.tsx  | 52 ++++++-------
 .../src/components/assistant/ChatMessage.tsx  | 10 +--
 .../src/components/assistant/ChatSidebar.tsx  | 16 ++--
 .../assistant/ConcludeSessionModal.tsx        | 62 +++++++--------
 .../assistant/SuggestedFlowCard.tsx           | 12 +--
 frontend/src/components/common/ActionMenu.tsx |  8 +-
 .../src/components/common/ConfirmDialog.tsx   |  8 +-
 .../src/components/common/ContextMenu.tsx     |  8 +-
 .../components/common/CreateFlowDropdown.tsx  | 42 +++++-----
 frontend/src/components/common/EmptyState.tsx |  8 +-
 .../src/components/common/ErrorBoundary.tsx   |  4 +-
 frontend/src/components/common/InfoTip.tsx    |  2 +-
 frontend/src/components/common/Modal.tsx      | 16 ++--
 frontend/src/components/common/PageHeader.tsx |  4 +-
 frontend/src/components/common/PageLoader.tsx |  2 +-
 .../src/components/common/PasswordInput.tsx   |  2 +-
 .../src/components/common/RichTextInput.tsx   | 16 ++--
 frontend/src/components/common/RouteError.tsx |  6 +-
 frontend/src/components/common/Spinner.tsx    |  2 +-
 frontend/src/components/common/StarRating.tsx |  4 +-
 frontend/src/components/common/TagBadges.tsx  | 10 +--
 frontend/src/components/common/TagInput.tsx   | 24 +++---
 .../src/components/copilot/CopilotPanel.tsx   | 20 ++---
 .../src/components/copilot/CopilotToggle.tsx  |  2 +-
 .../components/kb-accelerator/NodeCard.tsx    | 36 ++++-----
 .../kb-accelerator/ReviewScreen.tsx           | 34 ++++-----
 .../components/kb-accelerator/SourcePanel.tsx | 12 +--
 .../kb-accelerator/SuccessScreen.tsx          | 14 ++--
 .../kb-accelerator/UploadScreen.tsx           | 58 +++++++-------
 .../components/library/AddToFolderMenu.tsx    | 20 ++---
 .../components/library/ExportFlowModal.tsx    | 16 ++--
 .../components/library/FolderEditModal.tsx    | 24 +++---
 .../src/components/library/FolderSidebar.tsx  | 36 ++++-----
 frontend/src/components/library/ForkModal.tsx | 24 +++---
 .../components/library/ImportFlowModal.tsx    | 56 +++++++-------
 .../src/components/library/ShareTreeModal.tsx | 42 +++++-----
 .../src/components/library/SortDropdown.tsx   |  6 +-
 .../src/components/library/TreeGridView.tsx   | 36 ++++-----
 .../src/components/library/TreeListView.tsx   | 36 ++++-----
 .../src/components/library/TreeTableView.tsx  | 60 +++++++--------
 .../src/components/library/ViewToggle.tsx     | 14 ++--
 .../CollapsibleEditorSection.tsx              | 10 +--
 .../procedural-editor/IntakeFieldEditor.tsx   | 44 +++++------
 .../procedural-editor/IntakeFormBuilder.tsx   | 10 +--
 .../MaintenanceScheduleSection.tsx            | 28 +++----
 .../procedural-editor/StepEditor.tsx          | 76 +++++++++----------
 .../components/procedural-editor/StepList.tsx | 44 +++++------
 .../procedural/CompletionSummary.tsx          | 44 +++++------
 .../components/procedural/FallbackSteps.tsx   | 14 ++--
 .../procedural/InlineVariablePrompt.tsx       |  6 +-
 .../components/procedural/IntakeFormModal.tsx | 32 ++++----
 .../procedural/PrepareSessionModal.tsx        | 48 ++++++------
 .../src/components/procedural/ProgressBar.tsx | 10 +--
 .../components/procedural/StepChecklist.tsx   | 14 ++--
 .../src/components/procedural/StepDetail.tsx  | 46 +++++------
 .../components/public/FlowTemplateCard.tsx    | 26 +++----
 .../components/public/ScriptTemplateCard.tsx  | 26 +++----
 .../components/public/TemplateDetailModal.tsx | 64 ++++++++--------
 .../script-editor/ParameterCard.tsx           | 60 +++++++--------
 .../ParameterDetectorStepper.tsx              | 34 ++++-----
 .../script-editor/ParameterSchemaBuilder.tsx  | 18 ++---
 .../script-editor/ScriptBodyEditor.tsx        |  4 +-
 .../script-editor/ScriptTemplateEditor.tsx    | 74 +++++++++---------
 .../script-editor/ScriptTemplateListView.tsx  | 62 +++++++--------
 .../step-library/CustomStepModal.tsx          | 24 +++---
 .../src/components/step-library/StepCard.tsx  | 28 +++----
 .../step-library/StepDetailModal.tsx          | 74 +++++++++---------
 .../src/components/step-library/StepForm.tsx  | 50 ++++++------
 .../components/step-library/StepFormModal.tsx | 10 +--
 .../step-library/StepLibraryBrowser.tsx       | 38 +++++-----
 .../tree-editor/AIFixReviewModal.tsx          | 32 ++++----
 .../components/tree-editor/AnswerStubCard.tsx | 20 ++---
 .../tree-editor/DynamicArrayField.tsx         | 14 ++--
 .../src/components/tree-editor/FlowCanvas.tsx |  6 +-
 .../tree-editor/FlowCanvasAnswerNode.tsx      | 12 +--
 .../components/tree-editor/FlowCanvasNode.tsx | 34 ++++-----
 .../tree-editor/MetadataSidePanel.tsx         | 10 +--
 .../tree-editor/NodeEditorModal.tsx           |  2 +-
 .../tree-editor/NodeEditorPanel.tsx           | 34 ++++-----
 .../components/tree-editor/NodeFormAction.tsx | 40 +++++-----
 .../tree-editor/NodeFormDecision.tsx          | 40 +++++-----
 .../tree-editor/NodeFormResolution.tsx        | 22 +++---
 .../src/components/tree-editor/NodeList.tsx   | 50 ++++++------
 .../src/components/tree-editor/NodePicker.tsx | 20 ++---
 .../src/components/tree-editor/TreeCanvas.tsx | 28 +++----
 .../components/tree-editor/TreeCanvasNode.tsx | 36 ++++-----
 .../tree-editor/TreeEditorLayout.tsx          |  4 +-
 .../tree-editor/TreeMetadataForm.tsx          | 38 +++++-----
 .../tree-editor/ValidationSummary.tsx         |  8 +-
 .../tree-editor/code-mode/CodeModeEditor.tsx  |  2 +-
 .../tree-editor/code-mode/CodeModeToolbar.tsx | 22 +++---
 .../tree-editor/code-mode/SyntaxHelpPanel.tsx | 20 ++---
 frontend/src/components/ui/Button.tsx         | 14 ++--
 frontend/src/components/ui/FormField.tsx      |  4 +-
 frontend/src/components/ui/Input.tsx          |  4 +-
 .../src/components/ui/MarkdownContent.tsx     | 14 ++--
 frontend/src/components/ui/Skeleton.tsx       |  2 +-
 frontend/src/components/ui/Textarea.tsx       |  4 +-
 111 files changed, 1330 insertions(+), 1330 deletions(-)

diff --git a/frontend/src/components/admin/ActionMenu.tsx b/frontend/src/components/admin/ActionMenu.tsx
index 6cabd654..9bc1ae90 100644
--- a/frontend/src/components/admin/ActionMenu.tsx
+++ b/frontend/src/components/admin/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         ref={buttonRef}
         onClick={() => setOpen(!open)}
         className={cn(
-          'rounded-md p-1.5 text-muted-foreground transition-colors',
-          'hover:bg-accent hover:text-foreground'
+          'rounded-md p-1.5 text-[#848b9b] transition-colors',
+          'hover:bg-accent hover:text-[#e2e5eb]'
         )}
       >
         <MoreHorizontal className="h-4 w-4" />
@@ -63,8 +63,8 @@ export function ActionMenu({ items }: ActionMenuProps) {
         <div
           ref={menuRef}
           className={cn(
-            'fixed z-50 min-w-[160px] rounded-md border border-border',
-            'bg-card py-1 shadow-lg animate-scale-in'
+            'fixed z-50 min-w-[160px] rounded-md border border-[#1e2130]',
+            'bg-[#14161d] py-1 shadow-lg animate-scale-in'
           )}
           style={{
             top: `${menuPosition.top}px`,
@@ -81,7 +81,7 @@ export function ActionMenu({ items }: ActionMenuProps) {
                 'disabled:opacity-50 disabled:pointer-events-none',
                 item.destructive
                   ? 'text-red-400 hover:bg-red-400/10'
-                  : 'text-muted-foreground hover:bg-accent'
+                  : 'text-[#848b9b] hover:bg-accent'
               )}
             >
               {item.icon}
diff --git a/frontend/src/components/admin/AdminLayout.tsx b/frontend/src/components/admin/AdminLayout.tsx
index 7ad9d36c..2ac2e939 100644
--- a/frontend/src/components/admin/AdminLayout.tsx
+++ b/frontend/src/components/admin/AdminLayout.tsx
@@ -36,7 +36,7 @@ export function AdminLayout() {
   return (
     <div className="flex h-full">
       {/* Desktop sidebar */}
-      <div className="hidden w-60 shrink-0 border-r border-border bg-card md:block">
+      <div className="hidden w-60 shrink-0 border-r border-[#1e2130] bg-[#14161d] md:block">
         <AdminSidebar />
       </div>
 
@@ -44,14 +44,14 @@ export function AdminLayout() {
       {mobileOpen && (
         <div className="fixed inset-0 z-40 md:hidden">
           <div
-            className="absolute inset-0 bg-card/80 backdrop-blur-xs"
+            className="absolute inset-0 bg-[#14161d]/80"
             onClick={() => setMobileOpen(false)}
           />
-          <div className="absolute inset-y-0 left-0 w-60 border-r border-border bg-card shadow-xl">
+          <div className="absolute inset-y-0 left-0 w-60 border-r border-[#1e2130] bg-[#14161d] shadow-xl">
             <div className="flex h-12 items-center justify-end px-3">
               <button
                 onClick={() => setMobileOpen(false)}
-                className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
+                className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent"
               >
                 <X className="h-4 w-4" />
               </button>
@@ -67,7 +67,7 @@ export function AdminLayout() {
           {/* Mobile menu button */}
           <button
             onClick={() => setMobileOpen(true)}
-            className="mb-4 rounded-md p-2 text-muted-foreground hover:bg-accent md:hidden"
+            className="mb-4 rounded-md p-2 text-[#848b9b] hover:bg-accent md:hidden"
           >
             <Menu className="h-5 w-5" />
           </button>
diff --git a/frontend/src/components/admin/AdminSidebar.tsx b/frontend/src/components/admin/AdminSidebar.tsx
index a5a23d08..9e17cfe4 100644
--- a/frontend/src/components/admin/AdminSidebar.tsx
+++ b/frontend/src/components/admin/AdminSidebar.tsx
@@ -45,7 +45,7 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
   return (
     <aside className={cn('flex h-full flex-col', className)}>
       <div className="p-4">
-        <h2 className="text-lg font-bold text-foreground">Admin Panel</h2>
+        <h2 className="text-lg font-bold text-[#e2e5eb]">Admin Panel</h2>
       </div>
       <nav className="flex-1 space-y-1 px-3">
         {navItems.map((item) => (
@@ -56,8 +56,8 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
             className={cn(
               'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
               isActive(item.path, item.end)
-                ? 'bg-accent text-foreground'
-                : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                ? 'bg-accent text-[#e2e5eb]'
+                : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
             )}
           >
             <item.icon className="h-4 w-4" />
@@ -65,13 +65,13 @@ export function AdminSidebar({ className, onNavigate }: AdminSidebarProps) {
           </Link>
         ))}
       </nav>
-      <div className="border-t border-border p-3">
+      <div className="border-t border-[#1e2130] p-3">
         <Link
           to="/trees"
           onClick={onNavigate}
           className={cn(
             'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium',
-            'text-muted-foreground hover:bg-accent hover:text-foreground'
+            'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
           )}
         >
           <ArrowLeft className="h-4 w-4" />
diff --git a/frontend/src/components/admin/CategoryRow.tsx b/frontend/src/components/admin/CategoryRow.tsx
index 61384b93..e83e2f57 100644
--- a/frontend/src/components/admin/CategoryRow.tsx
+++ b/frontend/src/components/admin/CategoryRow.tsx
@@ -38,7 +38,7 @@ export function CategoryRow({
       ref={setNodeRef}
       style={style}
       className={cn(
-        'flex items-center gap-3 bg-card border border-border rounded-xl p-4',
+        'flex items-center gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-4',
         isDragging && 'opacity-50'
       )}
     >
@@ -47,7 +47,7 @@ export function CategoryRow({
         type="button"
         {...attributes}
         {...listeners}
-        className="cursor-grab touch-none text-muted-foreground hover:text-foreground active:cursor-grabbing"
+        className="cursor-grab touch-none text-[#848b9b] hover:text-[#e2e5eb] active:cursor-grabbing"
         aria-label="Drag to reorder"
       >
         <GripVertical className="h-5 w-5" />
@@ -56,17 +56,17 @@ export function CategoryRow({
       {/* Category Info */}
       <div className="flex-1">
         <div className="flex items-center gap-2">
-          <h3 className="font-medium text-foreground">{category.name}</h3>
+          <h3 className="font-medium text-[#e2e5eb]">{category.name}</h3>
           {!category.is_active && (
-            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-muted-foreground">
+            <span className="rounded-full bg-accent px-2 py-0.5 text-xs font-medium text-[#848b9b]">
               Archived
             </span>
           )}
         </div>
         {category.description && (
-          <p className="mt-1 text-sm text-muted-foreground">{category.description}</p>
+          <p className="mt-1 text-sm text-[#848b9b]">{category.description}</p>
         )}
-        <p className="mt-1 text-xs text-muted-foreground">
+        <p className="mt-1 text-xs text-[#848b9b]">
           {stepCount} step{stepCount !== 1 ? 's' : ''}
         </p>
       </div>
@@ -77,8 +77,8 @@ export function CategoryRow({
           type="button"
           onClick={() => onEdit(category)}
           className={cn(
-            'rounded-md border border-border bg-card p-2 text-muted-foreground',
-            'hover:bg-accent hover:text-foreground'
+            'rounded-md border border-[#1e2130] bg-[#14161d] p-2 text-[#848b9b]',
+            'hover:bg-accent hover:text-[#e2e5eb]'
           )}
           title="Edit category"
           aria-label="Edit category"
@@ -91,7 +91,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onArchive(category.id)}
             className={cn(
-              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Archive category"
@@ -104,7 +104,7 @@ export function CategoryRow({
             type="button"
             onClick={() => onRestore(category.id)}
             className={cn(
-              'rounded-md border border-input bg-background p-2 text-muted-foreground',
+              'rounded-md border border-input bg-[#0c0d10] p-2 text-[#848b9b]',
               'hover:bg-accent hover:text-accent-foreground'
             )}
             title="Restore category"
diff --git a/frontend/src/components/admin/CreateCategoryModal.tsx b/frontend/src/components/admin/CreateCategoryModal.tsx
index a42daf0d..fe970bd8 100644
--- a/frontend/src/components/admin/CreateCategoryModal.tsx
+++ b/frontend/src/components/admin/CreateCategoryModal.tsx
@@ -91,7 +91,7 @@ export function CreateCategoryModal({
         )}
 
         <div>
-          <label htmlFor="name" className="mb-1 block text-sm font-medium text-foreground">
+          <label htmlFor="name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -104,14 +104,14 @@ export function CreateCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-muted-foreground">
+          <p className="mt-1 text-xs text-[#848b9b]">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
-            Description <span className="text-muted-foreground">(optional)</span>
+          <label htmlFor="description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+            Description <span className="text-[#848b9b]">(optional)</span>
           </label>
           <Textarea
             id="description"
diff --git a/frontend/src/components/admin/DataTable.tsx b/frontend/src/components/admin/DataTable.tsx
index 7dc528ee..aa407259 100644
--- a/frontend/src/components/admin/DataTable.tsx
+++ b/frontend/src/components/admin/DataTable.tsx
@@ -50,16 +50,16 @@ export function DataTable<T>({
   }
 
   return (
-    <div className="overflow-x-auto rounded-lg border border-border">
+    <div className="overflow-x-auto rounded-lg border border-[#1e2130]">
       <table className="w-full text-sm">
         <thead>
-          <tr className="border-b border-border bg-accent">
+          <tr className="border-b border-[#1e2130] bg-accent">
             {columns.map((col) => (
               <th
                 key={col.key}
                 className={cn(
-                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-muted-foreground',
-                  col.sortable && 'cursor-pointer select-none hover:text-foreground',
+                  'px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-[#848b9b]',
+                  col.sortable && 'cursor-pointer select-none hover:text-[#e2e5eb]',
                   col.className
                 )}
                 onClick={col.sortable ? () => handleSort(col.key) : undefined}
@@ -87,7 +87,7 @@ export function DataTable<T>({
         <tbody>
           {isLoading ? (
             Array.from({ length: skeletonRows }).map((_, i) => (
-              <tr key={i} className="border-b border-border last:border-0">
+              <tr key={i} className="border-b border-[#1e2130] last:border-0">
                 {columns.map((col) => (
                   <td key={col.key} className="px-4 py-3">
                     <div className="h-4 w-3/4 animate-pulse rounded bg-accent" />
@@ -99,7 +99,7 @@ export function DataTable<T>({
             <tr>
               <td colSpan={columns.length} className="px-4 py-12 text-center">
                 {emptyState || (
-                  <span className="text-muted-foreground">No data found</span>
+                  <span className="text-[#848b9b]">No data found</span>
                 )}
               </td>
             </tr>
@@ -107,7 +107,7 @@ export function DataTable<T>({
             data.map((item) => (
               <tr
                 key={keyExtractor(item)}
-                className="border-b border-border last:border-0 hover:bg-accent transition-colors"
+                className="border-b border-[#1e2130] last:border-0 hover:bg-accent transition-colors"
               >
                 {columns.map((col) => (
                   <td key={col.key} className={cn('px-4 py-3', col.className)}>
diff --git a/frontend/src/components/admin/EditCategoryModal.tsx b/frontend/src/components/admin/EditCategoryModal.tsx
index b113bee1..898c8c2a 100644
--- a/frontend/src/components/admin/EditCategoryModal.tsx
+++ b/frontend/src/components/admin/EditCategoryModal.tsx
@@ -103,7 +103,7 @@ export function EditCategoryModal({
         )}
 
         <div>
-          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-foreground">
+          <label htmlFor="edit-name" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
             Category Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -116,14 +116,14 @@ export function EditCategoryModal({
             placeholder="e.g., Network Troubleshooting"
             required
           />
-          <p className="mt-1 text-xs text-muted-foreground">
+          <p className="mt-1 text-xs text-[#848b9b]">
             {name.length}/100 characters
           </p>
         </div>
 
         <div>
-          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-foreground">
-            Description <span className="text-muted-foreground">(optional)</span>
+          <label htmlFor="edit-description" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
+            Description <span className="text-[#848b9b]">(optional)</span>
           </label>
           <Textarea
             id="edit-description"
diff --git a/frontend/src/components/admin/Pagination.tsx b/frontend/src/components/admin/Pagination.tsx
index e8d5cbcd..1fc838cd 100644
--- a/frontend/src/components/admin/Pagination.tsx
+++ b/frontend/src/components/admin/Pagination.tsx
@@ -36,20 +36,20 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
 
   return (
     <div className="flex items-center justify-between gap-4 pt-4">
-      <span className="text-sm text-muted-foreground">
+      <span className="text-sm text-[#848b9b]">
         Showing {start}-{end} of {total}
       </span>
       <div className="flex items-center gap-1">
         <button
           onClick={() => onPageChange(page - 1)}
           disabled={page <= 1}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
         {getPageNumbers().map((p, i) =>
           p === 'ellipsis' ? (
-            <span key={`e${i}`} className="px-1 text-muted-foreground">...</span>
+            <span key={`e${i}`} className="px-1 text-[#848b9b]">...</span>
           ) : (
             <button
               key={p}
@@ -58,8 +58,8 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
                 btnBase,
                 'px-2',
                 p === page
-                  ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  ? 'bg-[#22d3ee] text-white'
+                  : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
               )}
             >
               {p}
@@ -69,7 +69,7 @@ export function Pagination({ page, totalPages, total, pageSize, onPageChange }:
         <button
           onClick={() => onPageChange(page + 1)}
           disabled={page >= totalPages}
-          className={cn(btnBase, 'px-2 text-muted-foreground hover:bg-accent hover:text-foreground')}
+          className={cn(btnBase, 'px-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]')}
         >
           <ChevronRight className="h-4 w-4" />
         </button>
diff --git a/frontend/src/components/admin/SearchInput.tsx b/frontend/src/components/admin/SearchInput.tsx
index 662ccea0..d968de69 100644
--- a/frontend/src/components/admin/SearchInput.tsx
+++ b/frontend/src/components/admin/SearchInput.tsx
@@ -40,21 +40,21 @@ export function SearchInput({ value = '', onSearch, placeholder = 'Search...', c
 
   return (
     <div className={cn('relative', className)}>
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
       <input
         type="text"
         value={localValue}
         onChange={handleChange}
         placeholder={placeholder}
         className={cn(
-          'h-9 w-full rounded-md border border-border bg-card pl-9 pr-8 text-sm text-foreground',
-          'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
+          'h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] pl-9 pr-8 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
         )}
       />
       {localValue && (
         <button
           onClick={handleClear}
-          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-muted-foreground hover:text-foreground"
+          className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[#848b9b] hover:text-[#e2e5eb]"
         >
           <X className="h-3.5 w-3.5" />
         </button>
diff --git a/frontend/src/components/admin/StatusBadge.tsx b/frontend/src/components/admin/StatusBadge.tsx
index 0f2e4b54..0c2a2251 100644
--- a/frontend/src/components/admin/StatusBadge.tsx
+++ b/frontend/src/components/admin/StatusBadge.tsx
@@ -12,7 +12,7 @@ const variantClasses: Record<BadgeVariant, string> = {
   success: 'bg-emerald-400/10 text-emerald-400',
   destructive: 'bg-red-400/10 text-red-400',
   warning: 'bg-yellow-400/10 text-yellow-400',
-  default: 'bg-accent text-muted-foreground',
+  default: 'bg-accent text-[#848b9b]',
 }
 
 export function StatusBadge({ variant = 'default', children, className }: StatusBadgeProps) {
diff --git a/frontend/src/components/analytics/CoverageHeatmap.tsx b/frontend/src/components/analytics/CoverageHeatmap.tsx
index 5b99d1fb..747d217c 100644
--- a/frontend/src/components/analytics/CoverageHeatmap.tsx
+++ b/frontend/src/components/analytics/CoverageHeatmap.tsx
@@ -39,12 +39,12 @@ function getFlowCountStyle(count: number) {
 export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
   if (data.domains.length === 0) {
     return (
-      <div className="glass-card-static p-6">
+      <div className="card-flat p-6">
         <div className="flex items-center gap-2 mb-2">
-          <MapPin size={16} className="text-foreground" />
-          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
+          <MapPin size={16} className="text-[#e2e5eb]" />
+          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Domain Coverage</h3>
         </div>
-        <p className="text-sm text-muted-foreground">
+        <p className="text-sm text-[#848b9b]">
           No session data for this period. Start using FlowPilot to see coverage metrics.
         </p>
       </div>
@@ -52,13 +52,13 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
   }
 
   return (
-    <div className="glass-card-static p-3 sm:p-5">
+    <div className="card-flat p-3 sm:p-5">
       <div className="mb-4">
         <div className="flex items-center gap-2 mb-1">
-          <MapPin size={16} className="text-foreground" />
-          <h3 className="font-heading text-sm font-semibold text-foreground">Domain Coverage</h3>
+          <MapPin size={16} className="text-[#e2e5eb]" />
+          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">Domain Coverage</h3>
         </div>
-        <p className="text-xs text-muted-foreground">
+        <p className="text-xs text-[#848b9b]">
           Resolution coverage and knowledge gaps by problem domain
         </p>
       </div>
@@ -66,26 +66,26 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
       <div className="overflow-x-auto">
         <table className="w-full">
           <thead>
-            <tr className="border-b border-border">
-              <th className="px-3 py-2 text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <tr className="border-b border-[#1e2130]">
+              <th className="px-3 py-2 text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Domain
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Flows
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Sessions
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Resolution %
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Escalation %
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Guided %
               </th>
-              <th className="px-3 py-2 text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
+              <th className="px-3 py-2 text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
                 title="Average time to resolve sessions in this domain. Green: &lt;10 min, Amber: 10–20 min, Red: &gt;20 min. Lower is better.">
                 Avg Resolution
               </th>
@@ -93,15 +93,15 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
           </thead>
           <tbody>
             {data.domains.map((row) => (
-              <tr key={row.domain} className="border-b border-border">
-                <td className="px-3 py-2 text-sm text-foreground font-medium">
+              <tr key={row.domain} className="border-b border-[#1e2130]">
+                <td className="px-3 py-2 text-sm text-[#e2e5eb] font-medium">
                   {row.domain}
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
                   {row.flow_count === 0 ? (
                     <Link
                       to="/trees/new"
-                      className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                      className="inline-flex items-center gap-1 text-xs text-[#22d3ee] hover:underline"
                     >
                       <Plus size={10} />
                       Create Flow
@@ -115,7 +115,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                     </span>
                   )}
                 </td>
-                <td className="px-3 py-2 text-sm text-right text-muted-foreground">
+                <td className="px-3 py-2 text-sm text-right text-[#848b9b]">
                   {row.session_count}
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
@@ -144,7 +144,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
                 </td>
                 <td className="px-3 py-2 text-sm text-right">
                   {row.avg_resolution_minutes == null ? (
-                    <span className="text-muted-foreground">—</span>
+                    <span className="text-[#848b9b]">—</span>
                   ) : (
                     <span
                       className={cn(
@@ -167,7 +167,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
           {data.unmapped_session_count > 0 && (
             <tfoot>
               <tr>
-                <td colSpan={7} className="px-3 py-2 text-xs text-muted-foreground">
+                <td colSpan={7} className="px-3 py-2 text-xs text-[#848b9b]">
                   {data.unmapped_session_count} sessions had no domain classification
                 </td>
               </tr>
@@ -176,7 +176,7 @@ export default function CoverageHeatmap({ data }: CoverageHeatmapProps) {
         </table>
       </div>
 
-      <div className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-label text-muted-foreground">
+      <div className="flex flex-wrap gap-4 mt-3 text-[0.625rem] font-sans text-xs text-[#848b9b]">
         <span><span className="inline-block w-2 h-2 rounded-full bg-emerald-400 mr-1" />Good</span>
         <span><span className="inline-block w-2 h-2 rounded-full bg-amber-400 mr-1" />Needs Improvement</span>
         <span><span className="inline-block w-2 h-2 rounded-full bg-rose-500 mr-1" />Critical</span>
diff --git a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
index 19923775..c868f1a8 100644
--- a/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
+++ b/frontend/src/components/analytics/FlowAnalyticsPanel.tsx
@@ -54,14 +54,14 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12">
-        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        <Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
       </div>
     )
   }
 
   if (error || !data) {
     return (
-      <div className="text-center py-12 text-muted-foreground">
+      <div className="text-center py-12 text-[#848b9b]">
         No analytics data available for this flow.
       </div>
     )
@@ -73,11 +73,11 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
     <div className="space-y-6">
       {/* Period selector */}
       <div className="flex items-center justify-between">
-        <h3 className="text-lg font-semibold text-foreground">Flow Analytics</h3>
+        <h3 className="text-lg font-semibold text-[#e2e5eb]">Flow Analytics</h3>
         <select
           value={period}
           onChange={(e) => setPeriod(e.target.value as AnalyticsPeriod)}
-          className="rounded-lg border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:outline-hidden focus:ring-1 focus:ring-ring"
+          className="rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:outline-hidden focus:ring-1 focus:ring-ring"
         >
           {PERIOD_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>
@@ -107,8 +107,8 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Area chart - Sessions over time */}
       {time_series.length > 0 && (
-        <div className="bg-card border border-border rounded-xl p-4">
-          <p className="text-sm font-semibold text-foreground mb-3">Sessions Over Time</p>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Sessions Over Time</p>
           <ResponsiveContainer width="100%" height={180}>
             <AreaChart data={time_series}>
               <CartesianGrid
@@ -192,7 +192,7 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                   className="h-2 w-2 rounded-full"
                   style={{ backgroundColor: color }}
                 />
-                <span className="text-xs text-muted-foreground capitalize">
+                <span className="text-xs text-[#848b9b] capitalize">
                   {key}
                 </span>
               </div>
@@ -203,16 +203,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Step Feedback Table with Dropoff Metrics */}
       {step_feedback.length > 0 && (
-        <div className="bg-card border border-border rounded-xl p-4">
-          <p className="text-sm font-semibold text-foreground mb-3">Step Performance</p>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Step Performance</p>
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
-                <tr className="border-b border-border">
-                  <th className="text-left py-2 pr-4 text-foreground font-medium">Step</th>
-                  <th className="text-right py-2 pr-4 text-foreground font-medium">Visits</th>
-                  <th className="text-right py-2 pr-4 text-foreground font-medium">Dropoffs</th>
-                  <th className="text-right py-2 text-foreground font-medium">Dropoff Rate</th>
+                <tr className="border-b border-[#1e2130]">
+                  <th className="text-left py-2 pr-4 text-[#e2e5eb] font-medium">Step</th>
+                  <th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Visits</th>
+                  <th className="text-right py-2 pr-4 text-[#e2e5eb] font-medium">Dropoffs</th>
+                  <th className="text-right py-2 text-[#e2e5eb] font-medium">Dropoff Rate</th>
                 </tr>
               </thead>
               <tbody>
@@ -220,23 +220,23 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                   <tr
                     key={step.node_id}
                     className={cn(
-                      'border-b border-border last:border-0',
+                      'border-b border-[#1e2130] last:border-0',
                       step.dropoff_rate > 0.2 && 'bg-red-400/5'
                     )}
                   >
-                    <td className="py-2 pr-4 text-muted-foreground truncate max-w-[200px]">
+                    <td className="py-2 pr-4 text-[#848b9b] truncate max-w-[200px]">
                       {step.node_title}
                     </td>
-                    <td className="py-2 pr-4 text-right text-muted-foreground">
+                    <td className="py-2 pr-4 text-right text-[#848b9b]">
                       {step.visit_count}
                     </td>
-                    <td className="py-2 pr-4 text-right text-muted-foreground">
+                    <td className="py-2 pr-4 text-right text-[#848b9b]">
                       {step.dropoff_count}
                     </td>
                     <td
                       className={cn(
                         'py-2 text-right font-medium',
-                        step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-muted-foreground'
+                        step.dropoff_rate > 0.2 ? 'text-red-400' : 'text-[#848b9b]'
                       )}
                     >
                       {(step.dropoff_rate * 100).toFixed(1)}%
@@ -251,13 +251,13 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
 
       {/* Recent Comments (Anonymous) */}
       {recent_comments.length > 0 && (
-        <div className="bg-card border border-border rounded-xl p-4">
-          <p className="text-sm font-semibold text-foreground mb-3">Recent Feedback</p>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+          <p className="text-sm font-semibold text-[#e2e5eb] mb-3">Recent Feedback</p>
           <div className="space-y-3">
             {recent_comments.map((item, i) => (
               <div
                 key={i}
-                className="flex items-start gap-3 border-b border-border/50 pb-3 last:border-0 last:pb-0"
+                className="flex items-start gap-3 border-b border-[#1e2130]/50 pb-3 last:border-0 last:pb-0"
               >
                 <div className="flex items-center gap-0.5 shrink-0 pt-0.5">
                   {[1, 2, 3, 4, 5].map((v) => (
@@ -267,16 +267,16 @@ export function FlowAnalyticsPanel({ treeId }: FlowAnalyticsPanelProps) {
                       className={cn(
                         v <= item.rating
                           ? 'fill-yellow-400 text-yellow-400'
-                          : 'fill-none text-muted-foreground'
+                          : 'fill-none text-[#848b9b]'
                       )}
                     />
                   ))}
                 </div>
                 <div className="min-w-0">
                   {item.comment && (
-                    <p className="text-sm text-foreground">{item.comment}</p>
+                    <p className="text-sm text-[#e2e5eb]">{item.comment}</p>
                   )}
-                  <p className="text-xs text-muted-foreground mt-0.5">
+                  <p className="text-xs text-[#848b9b] mt-0.5">
                     {new Date(item.created_at).toLocaleDateString()}
                   </p>
                 </div>
@@ -299,11 +299,11 @@ function StatCard({
   subtitle?: string
 }) {
   return (
-    <div className="bg-card border border-border rounded-xl p-4">
-      <p className="text-xs text-muted-foreground">{label}</p>
-      <p className="text-xl font-bold text-foreground mt-1">{value}</p>
+    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+      <p className="text-xs text-[#848b9b]">{label}</p>
+      <p className="text-xl font-bold text-[#e2e5eb] mt-1">{value}</p>
       {subtitle && (
-        <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>
+        <p className="text-xs text-[#848b9b] mt-0.5">{subtitle}</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/analytics/FlowQualityTable.tsx b/frontend/src/components/analytics/FlowQualityTable.tsx
index ae5b9d61..82e35d98 100644
--- a/frontend/src/components/analytics/FlowQualityTable.tsx
+++ b/frontend/src/components/analytics/FlowQualityTable.tsx
@@ -13,7 +13,7 @@ type SortColumn = 'name' | 'usage_count' | 'success_rate' | 'last_matched_at' |
 type SortDir = 'asc' | 'desc'
 
 const TYPE_LABELS: Record<string, { label: string; color: string }> = {
-  troubleshooting: { label: 'Troubleshooting', color: 'text-primary' },
+  troubleshooting: { label: 'Troubleshooting', color: 'text-[#22d3ee]' },
   procedural: { label: 'Project', color: 'text-amber-400' },
   maintenance: { label: 'Maintenance', color: 'text-blue-400' },
 }
@@ -33,7 +33,7 @@ function formatRelativeTime(dateStr: string | null): string {
 }
 
 function rateColor(value: number | null): string {
-  if (value === null) return 'text-muted-foreground'
+  if (value === null) return 'text-[#848b9b]'
   if (value > 75) return 'text-emerald-400'
   if (value >= 50) return 'text-amber-400'
   return 'text-rose-500'
@@ -110,9 +110,9 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
 
   if (data.flows.length === 0) {
     return (
-      <div className="glass-card-static p-3 sm:p-5">
+      <div className="card-flat p-3 sm:p-5">
         <div className="flex items-center justify-center min-h-[200px]">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-[#848b9b]">
             No flows found for this account. Create your first flow to start tracking quality.
           </p>
         </div>
@@ -130,20 +130,20 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
   ]
 
   return (
-    <div className="glass-card-static p-3 sm:p-5">
+    <div className="card-flat p-3 sm:p-5">
       <div className="mb-4">
         <div className="flex items-center gap-2">
-          <h3 className="font-heading text-sm font-semibold text-foreground">
+          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb]">
             Flow Quality Scores
           </h3>
           <span className="group relative">
-            <Info size={14} className="text-muted-foreground cursor-help" />
-            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-card border border-border text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
+            <Info size={14} className="text-[#848b9b] cursor-help" />
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-2 rounded-lg bg-[#14161d] border border-[#1e2130] text-xs text-[#848b9b] opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10">
               Quality score combines success rate (50%), AI confidence level (30%), and recent usage (20%). Higher is better.
             </div>
           </span>
         </div>
-        <p className="text-xs text-muted-foreground mt-1">
+        <p className="text-xs text-[#848b9b] mt-1">
           Performance and usage metrics for your troubleshooting flows
         </p>
       </div>
@@ -151,7 +151,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
       <div className="overflow-x-auto">
         <table className="w-full text-sm">
           <thead>
-            <tr className="border-b border-border">
+            <tr className="border-b border-[#1e2130]">
               {columns.map((col) => {
                 const isActive = sortCol === col.key
                 const SortIcon = isActive
@@ -160,7 +160,7 @@ export default function FlowQualityTable({ data }: FlowQualityTableProps) {
                 return (
                   <th
                     key={col.key}
-                    className="text-left py-2 px-2 font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground cursor-pointer select-none hover:text-foreground transition-colors"
+                    className="text-left py-2 px-2 font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] cursor-pointer select-none hover:text-[#e2e5eb] transition-colors"
                     onClick={() => handleSort(col.key)}
                     title={col.title}
                   >
@@ -207,7 +207,7 @@ function FlowRow({
   return (
     <tr
       className={cn(
-        'border-b border-border/50 hover:bg-card/30 transition-colors',
+        'border-b border-[#1e2130]/50 hover:bg-[#14161d]/30 transition-colors',
         isTopPerformer && 'border-l-2 border-l-emerald-400',
         needsAttention && 'border-l-2 border-l-rose-500',
       )}
@@ -217,15 +217,15 @@ function FlowRow({
         <div className="flex items-center gap-2">
           <Link
             to={getTreeEditorPath(flow.flow_id, flow.tree_type)}
-            className="text-foreground hover:text-primary transition-colors font-medium truncate max-w-[200px]"
+            className="text-[#e2e5eb] hover:text-[#22d3ee] transition-colors font-medium truncate max-w-[200px]"
           >
             {flow.name}
           </Link>
-          <span className={cn('font-label text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-muted-foreground')}>
+          <span className={cn('font-sans text-xs text-[0.5rem] uppercase tracking-wider ml-2 shrink-0', TYPE_LABELS[flow.tree_type]?.color || 'text-[#848b9b]')}>
             {TYPE_LABELS[flow.tree_type]?.label || flow.tree_type}
           </span>
           {needsAttention && (
-            <span className="shrink-0 bg-amber-400/10 text-amber-400 font-label text-[0.625rem] px-1.5 py-0.5 rounded">
+            <span className="shrink-0 bg-amber-400/10 text-amber-400 font-sans text-xs text-[0.625rem] px-1.5 py-0.5 rounded">
               Needs attention
             </span>
           )}
@@ -233,7 +233,7 @@ function FlowRow({
       </td>
 
       {/* Usage */}
-      <td className="py-2.5 px-2 text-foreground">{flow.usage_count}</td>
+      <td className="py-2.5 px-2 text-[#e2e5eb]">{flow.usage_count}</td>
 
       {/* Success Rate */}
       <td className={cn('py-2.5 px-2', rateColor(flow.success_rate))}>
@@ -241,7 +241,7 @@ function FlowRow({
       </td>
 
       {/* Last Used */}
-      <td className="py-2.5 px-2 text-muted-foreground">
+      <td className="py-2.5 px-2 text-[#848b9b]">
         {formatRelativeTime(flow.last_matched_at)}
       </td>
 
@@ -259,7 +259,7 @@ function FlowRow({
               style={{ width: `${flow.quality_score * 100}%` }}
             />
           </div>
-          <span className="text-xs text-foreground">
+          <span className="text-xs text-[#e2e5eb]">
             {(flow.quality_score * 100).toFixed(0)}
           </span>
         </div>
diff --git a/frontend/src/components/analytics/PsaMetricsPanel.tsx b/frontend/src/components/analytics/PsaMetricsPanel.tsx
index 7cf098bb..8690e256 100644
--- a/frontend/src/components/analytics/PsaMetricsPanel.tsx
+++ b/frontend/src/components/analytics/PsaMetricsPanel.tsx
@@ -19,9 +19,9 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
 
   if (!hasActivity) {
     return (
-      <div className="glass-card-static p-3 sm:p-5">
+      <div className="card-flat p-3 sm:p-5">
         <div className="flex items-center justify-center min-h-[200px]">
-          <p className="text-sm text-muted-foreground">
+          <p className="text-sm text-[#848b9b]">
             No PSA activity data for this period. Link sessions to PSA tickets to see metrics.
           </p>
         </div>
@@ -33,20 +33,20 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
     <div className="space-y-4">
       {/* Row 1 — Metric cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-        <div className="glass-card-static p-4">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Time Entries</p>
-          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.total_time_entries}</p>
-          <p className="text-xs text-muted-foreground mt-1">logged to PSA</p>
+        <div className="card-flat p-4">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Time Entries</p>
+          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.total_time_entries}</p>
+          <p className="text-xs text-[#848b9b] mt-1">logged to PSA</p>
         </div>
-        <div className="glass-card-static p-4">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Hours Logged</p>
-          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.total_hours_logged.toFixed(1)}</p>
-          <p className="text-xs text-muted-foreground mt-1">total hours tracked</p>
+        <div className="card-flat p-4">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Hours Logged</p>
+          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.total_hours_logged.toFixed(1)}</p>
+          <p className="text-xs text-[#848b9b] mt-1">total hours tracked</p>
         </div>
-        <div className="glass-card-static p-4">
-          <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Avg Hours/Session</p>
-          <p className="text-gradient-brand font-heading text-2xl mt-1">{data.avg_hours_per_session.toFixed(2)}</p>
-          <p className="text-xs text-muted-foreground mt-1">per resolved session</p>
+        <div className="card-flat p-4">
+          <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170]">Avg Hours/Session</p>
+          <p className="text-[#67e8f9] font-heading text-2xl mt-1">{data.avg_hours_per_session.toFixed(2)}</p>
+          <p className="text-xs text-[#848b9b] mt-1">per resolved session</p>
         </div>
       </div>
 
@@ -55,8 +55,8 @@ export default function PsaMetricsPanel({ data }: PsaMetricsPanelProps) {
 
       {/* Row 3 — Daily Trend Chart */}
       {data.daily_trend.length > 0 && (
-        <div className="glass-card-static p-3 sm:p-5">
-          <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+        <div className="card-flat p-3 sm:p-5">
+          <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
             PSA Activity Trend
           </h3>
           <ResponsiveContainer width="100%" height={250}>
@@ -129,8 +129,8 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
   ]
 
   return (
-    <div className="glass-card-static p-3 sm:p-5">
-      <h3 className="font-heading text-sm font-semibold text-foreground mb-4">
+    <div className="card-flat p-3 sm:p-5">
+      <h3 className="font-heading text-sm font-semibold text-[#e2e5eb] mb-4">
         Documentation Push Funnel
       </h3>
 
@@ -139,15 +139,15 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
         {steps.map((step, i) => (
           <div key={step.label} className="flex items-center gap-2 flex-1">
             <div className="bg-primary/5 border border-primary/20 rounded-lg p-3 text-center flex-1">
-              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 {step.label}
               </p>
-              <p className="text-lg font-heading text-foreground">{step.count}</p>
+              <p className="text-lg font-heading text-[#e2e5eb]">{step.count}</p>
             </div>
             {i < steps.length - 1 && (
               <div className="flex flex-col items-center shrink-0 px-1">
-                <ArrowRight size={14} className="text-muted-foreground" />
-                <span className="text-[0.625rem] text-muted-foreground font-label">
+                <ArrowRight size={14} className="text-[#848b9b]" />
+                <span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">
                   {funnelPct(steps[i].count, steps[i + 1].count)}
                 </span>
               </div>
@@ -161,15 +161,15 @@ function FunnelCard({ funnel }: { funnel: PsaFunnel }) {
         {steps.map((step, i) => (
           <div key={step.label} className="flex flex-col items-center gap-2 w-full">
             <div className="bg-primary/5 border border-primary/20 rounded-lg p-3 text-center w-full">
-              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 {step.label}
               </p>
-              <p className="text-lg font-heading text-foreground">{step.count}</p>
+              <p className="text-lg font-heading text-[#e2e5eb]">{step.count}</p>
             </div>
             {i < steps.length - 1 && (
               <div className="flex items-center gap-1">
-                <ArrowDown size={14} className="text-muted-foreground" />
-                <span className="text-[0.625rem] text-muted-foreground font-label">
+                <ArrowDown size={14} className="text-[#848b9b]" />
+                <span className="text-[0.625rem] text-[#848b9b] font-sans text-xs">
                   {funnelPct(steps[i].count, steps[i + 1].count)}
                 </span>
               </div>
diff --git a/frontend/src/components/assistant/ChatMessage.tsx b/frontend/src/components/assistant/ChatMessage.tsx
index 142c7b36..ee607629 100644
--- a/frontend/src/components/assistant/ChatMessage.tsx
+++ b/frontend/src/components/assistant/ChatMessage.tsx
@@ -16,8 +16,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
       <div
         className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
           role === 'assistant'
-            ? 'bg-primary/15 text-primary'
-            : 'bg-white/[0.08] text-muted-foreground'
+            ? 'bg-primary/15 text-[#22d3ee]'
+            : 'bg-white/[0.08] text-[#848b9b]'
         }`}
       >
         {role === 'assistant' ? <Sparkles size={14} /> : <User size={14} />}
@@ -28,8 +28,8 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         <div
           className={`rounded-2xl px-4 py-3 text-[0.875rem] leading-relaxed ${
             role === 'user'
-              ? 'bg-primary/15 text-foreground'
-              : 'bg-white/[0.04] text-foreground border border-brand-border'
+              ? 'bg-primary/15 text-[#e2e5eb]'
+              : 'bg-white/[0.04] text-[#e2e5eb] border border-brand-border'
           }`}
         >
           <MarkdownContent content={content} className="text-[0.875rem] leading-relaxed" />
@@ -38,7 +38,7 @@ export function ChatMessage({ role, content, suggestedFlows }: ChatMessageProps)
         {/* Suggested flows (assistant only) */}
         {role === 'assistant' && suggestedFlows && suggestedFlows.length > 0 && (
           <div className="space-y-1.5">
-            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
diff --git a/frontend/src/components/assistant/ChatSidebar.tsx b/frontend/src/components/assistant/ChatSidebar.tsx
index 14c5f6f3..c1bfd92d 100644
--- a/frontend/src/components/assistant/ChatSidebar.tsx
+++ b/frontend/src/components/assistant/ChatSidebar.tsx
@@ -31,7 +31,7 @@ export function ChatSidebar({
       <div className="px-4 py-3 border-b shrink-0" style={{ borderColor: 'var(--glass-border)' }}>
         <button
           onClick={onNewChat}
-          className="w-full flex items-center justify-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-4 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all"
+          className="w-full flex items-center justify-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-4 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all"
         >
           <Plus size={16} />
           New Chat
@@ -42,7 +42,7 @@ export function ChatSidebar({
       <div className="flex-1 overflow-y-auto py-2">
         {pinnedChats.length > 0 && (
           <div className="px-3 mb-1">
-            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
               Pinned
             </span>
           </div>
@@ -74,7 +74,7 @@ export function ChatSidebar({
         ))}
 
         {chats.length === 0 && (
-          <div className="px-4 py-8 text-center text-muted-foreground text-sm">
+          <div className="px-4 py-8 text-center text-[#848b9b] text-sm">
             No conversations yet
           </div>
         )}
@@ -102,14 +102,14 @@ function ChatItem({
       className={cn(
         'group flex items-center gap-2 px-3 py-2.5 mx-1.5 rounded-lg cursor-pointer transition-colors',
         isActive
-          ? 'bg-primary/10 text-foreground'
-          : 'text-muted-foreground hover:bg-white/[0.04] hover:text-foreground'
+          ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb]'
+          : 'text-[#848b9b] hover:bg-white/[0.04] hover:text-[#e2e5eb]'
       )}
     >
       <MessageSquare size={14} className="shrink-0" />
       <div className="flex-1 min-w-0">
         <div className="text-[0.8125rem] font-medium truncate">{chat.title}</div>
-        <div className="text-[0.6875rem] text-muted-foreground">
+        <div className="text-[0.6875rem] text-[#848b9b]">
           {chat.message_count} messages
         </div>
       </div>
@@ -119,11 +119,11 @@ function ChatItem({
           className="p-1 rounded hover:bg-white/[0.08]"
           title={chat.pinned ? 'Unpin' : 'Pin'}
         >
-          <Pin size={12} className={chat.pinned ? 'text-primary' : ''} />
+          <Pin size={12} className={chat.pinned ? 'text-[#22d3ee]' : ''} />
         </button>
         <button
           onClick={e => { e.stopPropagation(); onDelete() }}
-          className="p-1 rounded hover:bg-white/[0.08] text-muted-foreground hover:text-rose-400"
+          className="p-1 rounded hover:bg-white/[0.08] text-[#848b9b] hover:text-rose-400"
           title="Delete"
         >
           <Trash2 size={12} />
diff --git a/frontend/src/components/assistant/ConcludeSessionModal.tsx b/frontend/src/components/assistant/ConcludeSessionModal.tsx
index bc01cd1a..ebd10517 100644
--- a/frontend/src/components/assistant/ConcludeSessionModal.tsx
+++ b/frontend/src/components/assistant/ConcludeSessionModal.tsx
@@ -136,13 +136,13 @@ export function ConcludeSessionModal({
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-xs"
+        className="absolute inset-0 bg-black/60"
         onClick={onClose}
       />
 
       {/* Modal */}
       <div
-        className="relative w-full max-w-2xl mx-4 glass-card-static overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+        className="relative w-full max-w-2xl mx-4 card-flat overflow-hidden animate-in fade-in zoom-in-95 duration-200"
         style={{
           maxHeight: 'calc(100vh - 4rem)',
           display: 'flex',
@@ -155,21 +155,21 @@ export function ConcludeSessionModal({
           style={{ borderColor: 'var(--glass-border)' }}
         >
           <div className="flex items-center gap-3">
-            <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center">
-              <ClipboardList size={18} className="text-primary" />
+            <div className="w-9 h-9 rounded-xl bg-[rgba(34,211,238,0.10)] flex items-center justify-center">
+              <ClipboardList size={18} className="text-[#22d3ee]" />
             </div>
             <div>
-              <h2 className="text-base font-heading font-semibold text-foreground">
+              <h2 className="text-base font-heading font-semibold text-[#e2e5eb]">
                 Conclude Session
               </h2>
-              <p className="text-xs text-muted-foreground truncate max-w-[300px]">
+              <p className="text-xs text-[#848b9b] truncate max-w-[300px]">
                 {chatTitle}
               </p>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="p-2 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
+            className="p-2 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
           >
             <X size={18} />
           </button>
@@ -194,20 +194,20 @@ export function ConcludeSessionModal({
               )}
               <div
                 className={cn(
-                  'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-label font-medium transition-colors',
+                  'w-6 h-6 rounded-full flex items-center justify-center text-[0.6875rem] font-sans text-xs font-medium transition-colors',
                   step === s
-                    ? 'bg-gradient-brand text-brand-dark'
+                    ? 'bg-[#22d3ee] text-brand-dark'
                     : (i < ['select-outcome', 'add-notes', 'summary'].indexOf(step))
-                    ? 'bg-primary/20 text-primary'
-                    : 'bg-brand-border text-muted-foreground'
+                    ? 'bg-primary/20 text-[#22d3ee]'
+                    : 'bg-brand-border text-[#848b9b]'
                 )}
               >
                 {i + 1}
               </div>
               <span
                 className={cn(
-                  'text-xs font-label',
-                  step === s ? 'text-foreground' : 'text-muted-foreground'
+                  'text-xs font-sans text-xs',
+                  step === s ? 'text-[#e2e5eb]' : 'text-[#848b9b]'
                 )}
               >
                 {s === 'select-outcome' ? 'Outcome' : s === 'add-notes' ? 'Notes' : 'Summary'}
@@ -221,7 +221,7 @@ export function ConcludeSessionModal({
           {/* Step 1: Select Outcome */}
           {step === 'select-outcome' && (
             <div className="space-y-3">
-              <p className="text-sm text-muted-foreground mb-4">
+              <p className="text-sm text-[#848b9b] mb-4">
                 How did this session end?
               </p>
               {OUTCOMES.map(o => {
@@ -241,8 +241,8 @@ export function ConcludeSessionModal({
                       <Icon size={20} className={o.color} />
                     </div>
                     <div>
-                      <span className="text-sm font-semibold text-foreground block">{o.label}</span>
-                      <span className="text-xs text-muted-foreground">{o.description}</span>
+                      <span className="text-sm font-semibold text-[#e2e5eb] block">{o.label}</span>
+                      <span className="text-xs text-[#848b9b]">{o.description}</span>
                     </div>
                   </button>
                 )
@@ -255,20 +255,20 @@ export function ConcludeSessionModal({
             <div className="space-y-4">
               {/* Selected outcome badge */}
               <div className="flex items-center gap-2">
-                <div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
+                <div className={cn('px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs font-sans text-xs', selectedOutcome.bg, selectedOutcome.border, 'border')}>
                   <selectedOutcome.icon size={14} className={selectedOutcome.color} />
                   <span className={selectedOutcome.color}>{selectedOutcome.label}</span>
                 </div>
                 <button
                   onClick={() => setStep('select-outcome')}
-                  className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                  className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
                 >
                   Change
                 </button>
               </div>
 
               <div>
-                <label className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-2">
+                <label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-2">
                   Additional Notes (optional)
                 </label>
                 <textarea
@@ -282,7 +282,7 @@ export function ConcludeSessionModal({
                       : 'What still needs to be done, where you left off...'
                   }
                   rows={4}
-                  className="w-full resize-none rounded-xl border bg-card text-foreground text-sm placeholder:text-muted-foreground px-4 py-3 focus:outline-hidden focus:border-primary/30"
+                  className="w-full resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm placeholder:text-[#848b9b] px-4 py-3 focus:outline-hidden focus:border-primary/30"
                   style={{ borderColor: 'var(--glass-border)' }}
                 />
               </div>
@@ -300,7 +300,7 @@ export function ConcludeSessionModal({
             <div className="space-y-4">
               {/* Outcome badge */}
               {selectedOutcome && (
-                <div className={cn('px-3 py-1.5 rounded-lg inline-flex items-center gap-2 text-xs font-label', selectedOutcome.bg, selectedOutcome.border, 'border')}>
+                <div className={cn('px-3 py-1.5 rounded-lg inline-flex items-center gap-2 text-xs font-sans text-xs', selectedOutcome.bg, selectedOutcome.border, 'border')}>
                   <selectedOutcome.icon size={14} className={selectedOutcome.color} />
                   <span className={selectedOutcome.color}>{selectedOutcome.label}</span>
                 </div>
@@ -312,12 +312,12 @@ export function ConcludeSessionModal({
                 style={{ borderColor: 'var(--glass-border)' }}
               >
                 <div className="flex items-center justify-between mb-3">
-                  <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
-                    <Sparkles size={10} className="text-primary" />
+                  <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] flex items-center gap-1.5">
+                    <Sparkles size={10} className="text-[#22d3ee]" />
                     Generated Ticket Notes
                   </span>
                 </div>
-                <div className="prose-sm text-foreground">
+                <div className="prose-sm text-[#e2e5eb]">
                   <MarkdownContent content={summary} className="text-[0.8125rem] leading-relaxed" />
                 </div>
               </div>
@@ -335,7 +335,7 @@ export function ConcludeSessionModal({
               <div />
               <button
                 onClick={onClose}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
               >
                 Cancel
               </button>
@@ -346,14 +346,14 @@ export function ConcludeSessionModal({
             <>
               <button
                 onClick={() => setStep('select-outcome')}
-                className="px-4 py-2 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                className="px-4 py-2 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
               >
                 Back
               </button>
               <button
                 onClick={handleGenerate}
                 disabled={generating}
-                className="flex items-center gap-2 bg-gradient-brand text-brand-dark font-semibold text-sm rounded-[10px] px-5 py-2.5 hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-50"
+                className="flex items-center gap-2 bg-[#22d3ee] text-brand-dark font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50"
               >
                 {generating ? (
                   <>
@@ -376,7 +376,7 @@ export function ConcludeSessionModal({
                 {outcome === 'paused' && (
                   <button
                     onClick={handleResumeNew}
-                    className="flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
+                    className="flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium text-blue-400 bg-blue-400/10 border border-blue-400/20 hover:bg-blue-400/15 transition-all"
                   >
                     <RefreshCw size={14} />
                     Resume in New Chat
@@ -387,10 +387,10 @@ export function ConcludeSessionModal({
                 <button
                   onClick={handleCopy}
                   className={cn(
-                    'flex items-center gap-2 px-4 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
+                    'flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-semibold transition-all',
                     copied
                       ? 'bg-emerald-400/15 text-emerald-400 border border-emerald-400/30'
-                      : 'bg-gradient-brand text-brand-dark hover:opacity-90 active:scale-[0.97]'
+                      : 'bg-[#22d3ee] text-brand-dark hover:brightness-110 active:scale-[0.98]'
                   )}
                 >
                   {copied ? (
@@ -407,7 +407,7 @@ export function ConcludeSessionModal({
                 </button>
                 <button
                   onClick={onClose}
-                  className="px-4 py-2.5 rounded-[10px] text-sm text-muted-foreground hover:text-foreground bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
+                  className="px-4 py-2.5 rounded-lg text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-white/[0.04] border border-brand-border hover:border-white/[0.12] transition-all"
                 >
                   Done
                 </button>
diff --git a/frontend/src/components/assistant/SuggestedFlowCard.tsx b/frontend/src/components/assistant/SuggestedFlowCard.tsx
index 3e630e14..beb2cba5 100644
--- a/frontend/src/components/assistant/SuggestedFlowCard.tsx
+++ b/frontend/src/components/assistant/SuggestedFlowCard.tsx
@@ -18,24 +18,24 @@ export function SuggestedFlowCard({ flow }: SuggestedFlowCardProps) {
   return (
     <button
       onClick={handleClick}
-      className="w-full text-left glass-card-static p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
+      className="w-full text-left card-flat p-3 rounded-xl hover:border-white/[0.12] transition-colors group"
     >
       <div className="flex items-start gap-2">
-        <Box size={14} className="text-primary mt-0.5 shrink-0" />
+        <Box size={14} className="text-[#22d3ee] mt-0.5 shrink-0" />
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-1.5">
-            <span className="text-[0.8125rem] font-medium text-foreground truncate">
+            <span className="text-[0.8125rem] font-medium text-[#e2e5eb] truncate">
               {flow.tree_name}
             </span>
-            <span className="font-label text-[0.625rem] uppercase tracking-wider text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-wider text-[#848b9b]">
               {flow.tree_type}
             </span>
           </div>
-          <p className="text-[0.75rem] text-muted-foreground mt-0.5 line-clamp-2">
+          <p className="text-[0.75rem] text-[#848b9b] mt-0.5 line-clamp-2">
             {flow.relevance_snippet}
           </p>
         </div>
-        <ArrowRight size={14} className="text-muted-foreground group-hover:text-primary transition-colors shrink-0 mt-0.5" />
+        <ArrowRight size={14} className="text-[#848b9b] group-hover:text-[#22d3ee] transition-colors shrink-0 mt-0.5" />
       </div>
     </button>
   )
diff --git a/frontend/src/components/common/ActionMenu.tsx b/frontend/src/components/common/ActionMenu.tsx
index d4058f28..d766b28d 100644
--- a/frontend/src/components/common/ActionMenu.tsx
+++ b/frontend/src/components/common/ActionMenu.tsx
@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       <button
         onClick={() => setIsOpen(!isOpen)}
         className={cn(
-          'rounded-md border border-border p-2 text-muted-foreground',
-          'hover:bg-accent hover:text-foreground'
+          'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+          'hover:bg-accent hover:text-[#e2e5eb]'
         )}
         aria-label="Actions"
       >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
       {isOpen && (
         <div
           className={cn(
-            'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
+            'absolute z-50 mt-1 min-w-[180px] bg-[#14161d] border border-[#1e2130] rounded-lg p-1',
             align === 'right' ? 'right-0' : 'left-0'
           )}
         >
@@ -81,7 +81,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
                     ? 'cursor-not-allowed opacity-40'
                     : action.variant === 'destructive'
                       ? 'text-red-400 hover:bg-accent hover:text-red-300'
-                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                      : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
                 )}
               >
                 {Icon && <Icon className="h-4 w-4" />}
diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx
index b5b8599d..7b1a6b32 100644
--- a/frontend/src/components/common/ConfirmDialog.tsx
+++ b/frontend/src/components/common/ConfirmDialog.tsx
@@ -34,8 +34,8 @@ export function ConfirmDialog({
             onClick={onClose}
             disabled={isLoading}
             className={cn(
-              'rounded-xl border border-border px-4 py-2 text-sm font-medium',
-              'text-muted-foreground hover:bg-accent hover:text-foreground',
+              'rounded-xl border border-[#1e2130] px-4 py-2 text-sm font-medium',
+              'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
               'disabled:opacity-50 disabled:cursor-not-allowed'
             )}
           >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
               'disabled:opacity-50 disabled:cursor-not-allowed',
               confirmVariant === 'destructive'
                 ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
-                : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
+                : 'bg-[#22d3ee] text-white hover:brightness-110'
             )}
           >
             {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
         </div>
       }
     >
-      <p className="text-sm text-muted-foreground">{message}</p>
+      <p className="text-sm text-[#848b9b]">{message}</p>
     </Modal>
   )
 }
diff --git a/frontend/src/components/common/ContextMenu.tsx b/frontend/src/components/common/ContextMenu.tsx
index 0aa7ec0e..678b1b3f 100644
--- a/frontend/src/components/common/ContextMenu.tsx
+++ b/frontend/src/components/common/ContextMenu.tsx
@@ -71,12 +71,12 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
         left: position.x,
         top: position.y,
       }}
-      className="min-w-[200px] rounded-xl border border-border bg-card p-1 shadow-lg backdrop-blur-md"
+      className="min-w-[200px] rounded-xl border border-[#1e2130] bg-[#14161d] p-1 shadow-lg"
     >
       {items.map((item) => (
         <div key={item.id}>
           {item.separator && (
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
           )}
           <button
             onClick={() => {
@@ -87,11 +87,11 @@ export function ContextMenu({ position, items, onClose }: ContextMenuProps) {
               'flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
               item.variant === 'danger'
                 ? 'text-rose-400 hover:bg-rose-500/10'
-                : 'text-foreground hover:bg-brand-border'
+                : 'text-[#e2e5eb] hover:bg-brand-border'
             )}
           >
             {item.icon && (
-              <span className="flex h-4 w-4 items-center justify-center text-muted-foreground">
+              <span className="flex h-4 w-4 items-center justify-center text-[#848b9b]">
                 {item.icon}
               </span>
             )}
diff --git a/frontend/src/components/common/CreateFlowDropdown.tsx b/frontend/src/components/common/CreateFlowDropdown.tsx
index 37586ddb..581b79d2 100644
--- a/frontend/src/components/common/CreateFlowDropdown.tsx
+++ b/frontend/src/components/common/CreateFlowDropdown.tsx
@@ -65,7 +65,7 @@ export function CreateFlowDropdown({
     <div className={cn('relative', className)}>
       <button
         onClick={() => setShowMenu(!showMenu)}
-        className="flex items-center gap-2 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-primary/20 hover:opacity-90 transition-opacity"
+        className="flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white hover:brightness-110 transition-opacity"
       >
         <Plus size={16} />
         {label}
@@ -74,17 +74,17 @@ export function CreateFlowDropdown({
       {showMenu && (
         <>
           <div className="fixed inset-0 z-10" onClick={() => setShowMenu(false)} />
-          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-xs">
+          <div className="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-[#1e2130] bg-[#14161d] p-1 shadow-xl">
             {/* Troubleshooting */}
             <Link
               to="/trees/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
-              <FolderTree className="h-4 w-4 text-muted-foreground" />
+              <FolderTree className="h-4 w-4 text-[#848b9b]" />
               <div className="flex-1">
                 <div className="font-medium">Troubleshooting Tree</div>
-                <div className="text-xs text-muted-foreground">Branching decision flow</div>
+                <div className="text-xs text-[#848b9b]">Branching decision flow</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -95,27 +95,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('troubleshooting')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
 
             {/* Procedural */}
             <Link
               to="/flows/new"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
-              <ListOrdered className="h-4 w-4 text-muted-foreground" />
+              <ListOrdered className="h-4 w-4 text-[#848b9b]" />
               <div className="flex-1">
                 <div className="font-medium">Procedural Flow</div>
-                <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
+                <div className="text-xs text-[#848b9b]">Step-by-step procedure</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -126,27 +126,27 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('procedural')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
 
-            <div className="my-1 border-t border-border" />
+            <div className="my-1 border-t border-[#1e2130]" />
 
             {/* Maintenance */}
             <Link
               to="/flows/new?type=maintenance"
               onClick={() => setShowMenu(false)}
-              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
+              className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-[#e2e5eb] hover:bg-accent"
             >
               <Wrench className="h-4 w-4 text-amber-400" />
               <div className="flex-1">
                 <div className="font-medium">Maintenance Flow</div>
-                <div className="text-xs text-muted-foreground">Scheduled multi-target tasks</div>
+                <div className="text-xs text-[#848b9b]">Scheduled multi-target tasks</div>
               </div>
             </Link>
             {aiEnabled && (
@@ -157,11 +157,11 @@ export function CreateFlowDropdown({
                   setAiPromptFlowType('maintenance')
                   setAiPromptOpen(true)
                 }}
-                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-foreground hover:bg-accent"
+                className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm text-[#e2e5eb] hover:bg-accent"
               >
-                <Sparkles className="h-3.5 w-3.5 text-primary ml-0.5" />
+                <Sparkles className="h-3.5 w-3.5 text-[#22d3ee] ml-0.5" />
                 <div className="text-left">
-                  <div className="text-xs text-primary font-medium">Build with Flow Assist</div>
+                  <div className="text-xs text-[#22d3ee] font-medium">Build with Flow Assist</div>
                 </div>
               </button>
             )}
diff --git a/frontend/src/components/common/EmptyState.tsx b/frontend/src/components/common/EmptyState.tsx
index b917eb6b..cee8d013 100644
--- a/frontend/src/components/common/EmptyState.tsx
+++ b/frontend/src/components/common/EmptyState.tsx
@@ -31,17 +31,17 @@ export function EmptyState({
         </div>
       )}
       {!illustration && icon && (
-        <div className="mb-4 text-muted-foreground">{icon}</div>
+        <div className="mb-4 text-[#848b9b]">{icon}</div>
       )}
-      <h3 className="text-lg font-semibold text-foreground">{title}</h3>
+      <h3 className="text-lg font-semibold text-[#e2e5eb]">{title}</h3>
       {description && (
-        <p className="mt-2 max-w-sm text-sm text-muted-foreground">{description}</p>
+        <p className="mt-2 max-w-sm text-sm text-[#848b9b]">{description}</p>
       )}
       {action && <div className="mt-4">{action}</div>}
       {learnMoreLink && (
         <Link
           to={learnMoreLink}
-          className="mt-3 text-sm text-muted-foreground hover:text-foreground transition-colors"
+          className="mt-3 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           {learnMoreText} &rarr;
         </Link>
diff --git a/frontend/src/components/common/ErrorBoundary.tsx b/frontend/src/components/common/ErrorBoundary.tsx
index dea0c53b..3529ab59 100644
--- a/frontend/src/components/common/ErrorBoundary.tsx
+++ b/frontend/src/components/common/ErrorBoundary.tsx
@@ -39,10 +39,10 @@ function DefaultFallback({ error, resetError }: FallbackProps) {
         <h2 className="mb-2 text-xl font-semibold text-red-400">
           Something went wrong
         </h2>
-        <p className="mb-4 text-muted-foreground">
+        <p className="mb-4 text-[#848b9b]">
           An unexpected error occurred. Please try refreshing the page.
         </p>
-        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
+        <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-[#1e2130] p-3 text-left text-xs text-red-400">
           {error.message}
         </pre>
         <div className="flex justify-center gap-3">
diff --git a/frontend/src/components/common/InfoTip.tsx b/frontend/src/components/common/InfoTip.tsx
index ccaf448e..b4da66af 100644
--- a/frontend/src/components/common/InfoTip.tsx
+++ b/frontend/src/components/common/InfoTip.tsx
@@ -5,7 +5,7 @@ interface InfoTipProps {
 export function InfoTip({ text }: InfoTipProps) {
   return (
     <span
-      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-muted-foreground cursor-help shrink-0"
+      className="inline-flex items-center justify-center h-3.5 w-3.5 rounded-full border border-muted-foreground/40 text-[9px] text-[#848b9b] cursor-help shrink-0"
       title={text}
     >
       i
diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
index 92e11022..b458c125 100644
--- a/frontend/src/components/common/Modal.tsx
+++ b/frontend/src/components/common/Modal.tsx
@@ -125,7 +125,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
     >
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
+        className="absolute inset-0 bg-black/80"
         onClick={onClose}
         aria-hidden="true"
       />
@@ -134,7 +134,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
       <div
         ref={modalRef}
         className={cn(
-          'relative flex w-full flex-col border border-border bg-card shadow-lg',
+          'relative flex w-full flex-col border border-[#1e2130] bg-[#14161d] shadow-lg',
           'animate-scale-in transition-all duration-200',
           isFullScreen
             ? 'fixed inset-4 max-w-none w-auto h-auto rounded-2xl'
@@ -145,8 +145,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
         )}
       >
         {/* Header - Fixed at top */}
-        <div className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 sm:px-6 sm:py-4">
-          <h2 id="modal-title" className="text-lg font-semibold text-foreground">
+        <div className="flex shrink-0 items-center justify-between border-b border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
+          <h2 id="modal-title" className="text-lg font-semibold text-[#e2e5eb]">
             {title}
           </h2>
           <div className="flex items-center gap-1">
@@ -154,7 +154,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
               <button
                 type="button"
                 onClick={toggleFullScreen}
-                className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
                 title={isFullScreen ? 'Exit full screen' : 'Full screen'}
               >
                 {isFullScreen
@@ -166,8 +166,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
             <button
               onClick={onClose}
               className={cn(
-                'rounded-md p-1.5 text-muted-foreground transition-colors sm:p-1',
-                'hover:bg-accent hover:text-foreground',
+                'rounded-md p-1.5 text-[#848b9b] transition-colors sm:p-1',
+                'hover:bg-accent hover:text-[#e2e5eb]',
                 'focus:outline-hidden focus:ring-2 focus:ring-primary/20'
               )}
               aria-label="Close modal"
@@ -184,7 +184,7 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', a
 
         {/* Footer - Fixed at bottom */}
         {footer && (
-          <div className="shrink-0 border-t border-border px-4 py-3 sm:px-6 sm:py-4">
+          <div className="shrink-0 border-t border-[#1e2130] px-4 py-3 sm:px-6 sm:py-4">
             {footer}
           </div>
         )}
diff --git a/frontend/src/components/common/PageHeader.tsx b/frontend/src/components/common/PageHeader.tsx
index ee22d06c..df682ead 100644
--- a/frontend/src/components/common/PageHeader.tsx
+++ b/frontend/src/components/common/PageHeader.tsx
@@ -25,11 +25,11 @@ export function PageHeader({
       <div className="flex items-start gap-3">
         {icon && <div className="shrink-0">{icon}</div>}
         <div>
-          <h1 className={cn('text-2xl font-bold font-heading text-foreground', titleClassName)}>
+          <h1 className={cn('text-2xl font-bold font-heading text-[#e2e5eb]', titleClassName)}>
             {title}
           </h1>
           {description && (
-            <p className={cn('mt-1 text-sm text-muted-foreground', descriptionClassName)}>
+            <p className={cn('mt-1 text-sm text-[#848b9b]', descriptionClassName)}>
               {description}
             </p>
           )}
diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx
index 4bb62571..d180f4d8 100644
--- a/frontend/src/components/common/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader.tsx
@@ -5,7 +5,7 @@ export function PageLoader() {
     <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
-        <p className="text-sm text-muted-foreground">Loading&hellip;</p>
+        <p className="text-sm text-[#848b9b]">Loading&hellip;</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/common/PasswordInput.tsx b/frontend/src/components/common/PasswordInput.tsx
index f783d44a..c7522094 100644
--- a/frontend/src/components/common/PasswordInput.tsx
+++ b/frontend/src/components/common/PasswordInput.tsx
@@ -19,7 +19,7 @@ export function PasswordInput({ className, ...props }: PasswordInputProps) {
       <button
         type="button"
         onClick={() => setVisible((v) => !v)}
-        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         tabIndex={-1}
         title={visible ? 'Hide password' : 'Show password'}
       >
diff --git a/frontend/src/components/common/RichTextInput.tsx b/frontend/src/components/common/RichTextInput.tsx
index 914726cd..0e765744 100644
--- a/frontend/src/components/common/RichTextInput.tsx
+++ b/frontend/src/components/common/RichTextInput.tsx
@@ -233,7 +233,7 @@ export function RichTextInput({
         rows={rows}
         disabled={disabled}
         className={cn(
-          'w-full bg-card border border-border rounded-xl p-3 text-sm text-foreground placeholder:text-muted-foreground',
+          'w-full bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-sm text-[#e2e5eb] placeholder:text-[#848b9b]',
           'focus:border-[rgba(6,182,212,0.3)] focus:outline-none resize-none transition-colors',
           isDragOver && 'border-primary/50 bg-primary/5',
           disabled && 'opacity-50 cursor-not-allowed'
@@ -243,7 +243,7 @@ export function RichTextInput({
       {/* Drag overlay hint */}
       {isDragOver && (
         <div className="absolute inset-0 flex items-center justify-center rounded-xl border-2 border-dashed border-primary/50 bg-primary/5 pointer-events-none">
-          <div className="flex items-center gap-2 text-sm text-primary">
+          <div className="flex items-center gap-2 text-sm text-[#22d3ee]">
             <ImagePlus size={16} />
             Drop image to attach
           </div>
@@ -254,19 +254,19 @@ export function RichTextInput({
       {pendingUploads.length > 0 && (
         <div className="flex gap-2 flex-wrap mt-2">
           {pendingUploads.map((upload) => (
-            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-border">
+            <div key={upload.id} className="relative w-16 h-16 rounded-lg overflow-hidden border border-[#1e2130]">
               <img src={upload.preview} alt="" className="w-full h-full object-cover" />
               {upload.status === 'uploading' && (
-                <div className="absolute inset-0 bg-background/50 flex items-center justify-center">
-                  <Loader2 size={16} className="animate-spin text-primary" />
+                <div className="absolute inset-0 bg-[#0c0d10]/50 flex items-center justify-center">
+                  <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
                 </div>
               )}
               {upload.status === 'done' && (
                 <button
                   onClick={() => handleRemove(upload.id)}
-                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-background/80 border border-border flex items-center justify-center hover:bg-rose-500/20 transition-colors"
+                  className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[#0c0d10]/80 border border-[#1e2130] flex items-center justify-center hover:bg-rose-500/20 transition-colors"
                 >
-                  <X size={10} className="text-muted-foreground" />
+                  <X size={10} className="text-[#848b9b]" />
                 </button>
               )}
               {upload.status === 'error' && (
@@ -284,7 +284,7 @@ export function RichTextInput({
 
       {/* Paste hint */}
       {isFocused && !value && pendingUploads.length === 0 && (
-        <p className="text-[0.625rem] text-muted-foreground/50 mt-1">Paste screenshots with Ctrl+V</p>
+        <p className="text-[0.625rem] text-[#848b9b]/50 mt-1">Paste screenshots with Ctrl+V</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index 45ba1d71..fc6d5732 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -55,12 +55,12 @@ export function RouteError() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-[#0c0d10] p-8">
       <div className="max-w-md text-center">
-        <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
+        <h1 className="mb-2 text-4xl font-bold text-[#e2e5eb]">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>
         {errorDetails && (
-          <p className="mb-4 text-muted-foreground">{errorDetails}</p>
+          <p className="mb-4 text-[#848b9b]">{errorDetails}</p>
         )}
         <div className="flex justify-center gap-4">
           <Button variant="secondary" onClick={() => navigate(-1)}>
diff --git a/frontend/src/components/common/Spinner.tsx b/frontend/src/components/common/Spinner.tsx
index 4222704d..46a0fe26 100644
--- a/frontend/src/components/common/Spinner.tsx
+++ b/frontend/src/components/common/Spinner.tsx
@@ -15,7 +15,7 @@ export function Spinner({ size = 'md', className }: SpinnerProps) {
   return (
     <div
       className={cn(
-        'animate-spin rounded-full border-border border-t-primary',
+        'animate-spin rounded-full border-[#1e2130] border-t-primary',
         SIZES[size],
         className
       )}
diff --git a/frontend/src/components/common/StarRating.tsx b/frontend/src/components/common/StarRating.tsx
index d93e584a..813f570a 100644
--- a/frontend/src/components/common/StarRating.tsx
+++ b/frontend/src/components/common/StarRating.tsx
@@ -48,14 +48,14 @@ export function StarRating({
               sizeClasses[size],
               star <= value
                 ? 'fill-yellow-400 text-yellow-400'
-                : 'fill-none text-muted-foreground',
+                : 'fill-none text-[#848b9b]',
               !readonly && 'hover:text-yellow-300'
             )}
           />
         </button>
       ))}
       {showCount && (
-        <span className="ml-1 text-sm text-muted-foreground">
+        <span className="ml-1 text-sm text-[#848b9b]">
           ({value}/5)
         </span>
       )}
diff --git a/frontend/src/components/common/TagBadges.tsx b/frontend/src/components/common/TagBadges.tsx
index 95d850b2..855894e1 100644
--- a/frontend/src/components/common/TagBadges.tsx
+++ b/frontend/src/components/common/TagBadges.tsx
@@ -34,11 +34,11 @@ export function TagBadges({
           }}
           disabled={!onTagClick}
           className={cn(
-            'rounded-full font-label transition-colors',
+            'rounded-full font-sans text-xs transition-colors',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
             variant === 'default'
-              ? 'bg-accent text-muted-foreground hover:bg-accent'
-              : 'bg-accent/50 text-muted-foreground hover:bg-accent',
+              ? 'bg-accent text-[#848b9b] hover:bg-accent'
+              : 'bg-accent/50 text-[#848b9b] hover:bg-accent',
             !onTagClick && 'cursor-default'
           )}
         >
@@ -48,9 +48,9 @@ export function TagBadges({
       {hiddenCount > 0 && (
         <span
           className={cn(
-            'rounded-full font-label',
+            'rounded-full font-sans text-xs',
             size === 'sm' ? 'px-2 py-0.5 text-xs' : 'px-2.5 py-1 text-sm',
-            'bg-accent/50 text-muted-foreground'
+            'bg-accent/50 text-[#848b9b]'
           )}
           title={tags.slice(maxVisible).join(', ')}
         >
diff --git a/frontend/src/components/common/TagInput.tsx b/frontend/src/components/common/TagInput.tsx
index b790a727..eda5afb6 100644
--- a/frontend/src/components/common/TagInput.tsx
+++ b/frontend/src/components/common/TagInput.tsx
@@ -123,10 +123,10 @@ export function TagInput({
       <div
         className={cn(
           'flex flex-wrap gap-1.5 rounded-xl border px-2 py-1.5',
-          'bg-card text-foreground',
+          'bg-[#14161d] text-[#e2e5eb]',
           'focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/20',
           disabled ? 'cursor-not-allowed opacity-50' : '',
-          'border-border'
+          'border-[#1e2130]'
         )}
         onClick={() => inputRef.current?.focus()}
       >
@@ -136,7 +136,7 @@ export function TagInput({
             key={tag}
             className={cn(
               'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs',
-              'bg-accent text-muted-foreground'
+              'bg-accent text-[#848b9b]'
             )}
           >
             {tag}
@@ -184,8 +184,8 @@ export function TagInput({
             placeholder={tags.length === 0 ? placeholder : ''}
             disabled={disabled}
             className={cn(
-              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-foreground',
-              'placeholder:text-muted-foreground',
+              'flex-1 min-w-[80px] border-0 bg-transparent px-1 py-0.5 text-sm text-[#e2e5eb]',
+              'placeholder:text-[#848b9b]',
               'focus:outline-hidden focus:ring-0'
             )}
           />
@@ -196,8 +196,8 @@ export function TagInput({
       {showSuggestions && suggestions.length > 0 && (
         <div
           className={cn(
-            'absolute z-10 mt-1 w-full rounded-xl border border-border',
-            'bg-card shadow-lg'
+            'absolute z-10 mt-1 w-full rounded-xl border border-[#1e2130]',
+            'bg-[#14161d] shadow-lg'
           )}
         >
           {suggestions.map((suggestion, index) => (
@@ -206,13 +206,13 @@ export function TagInput({
               type="button"
               onClick={() => addTag(suggestion.name)}
               className={cn(
-                'flex w-full items-center justify-between px-3 py-2 text-sm text-muted-foreground',
+                'flex w-full items-center justify-between px-3 py-2 text-sm text-[#848b9b]',
                 'hover:bg-accent',
                 index === selectedIndex && 'bg-accent'
               )}
             >
               <span>{suggestion.name}</span>
-              <span className="text-xs text-muted-foreground">
+              <span className="text-xs text-[#848b9b]">
                 {suggestion.usage_count} trees
               </span>
             </button>
@@ -225,8 +225,8 @@ export function TagInput({
                 type="button"
                 onClick={() => addTag(inputValue)}
                 className={cn(
-                  'flex w-full items-center gap-2 border-t border-border px-3 py-2 text-sm',
-                  'hover:bg-accent text-foreground'
+                  'flex w-full items-center gap-2 border-t border-[#1e2130] px-3 py-2 text-sm',
+                  'hover:bg-accent text-[#e2e5eb]'
                 )}
               >
                 <Plus className="h-4 w-4" />
@@ -237,7 +237,7 @@ export function TagInput({
       )}
 
       {/* Helper text */}
-      <p className="mt-1 text-xs text-muted-foreground">
+      <p className="mt-1 text-xs text-[#848b9b]">
         {tags.length}/{maxTags} tags. Press Enter, Tab, comma, or semicolon to add.
       </p>
     </div>
diff --git a/frontend/src/components/copilot/CopilotPanel.tsx b/frontend/src/components/copilot/CopilotPanel.tsx
index 99d47f97..c5597aef 100644
--- a/frontend/src/components/copilot/CopilotPanel.tsx
+++ b/frontend/src/components/copilot/CopilotPanel.tsx
@@ -105,12 +105,12 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         style={{ borderColor: 'var(--glass-border)' }}
       >
         <div className="flex items-center gap-2">
-          <Sparkles size={16} className="text-primary" />
-          <span className="text-sm font-semibold text-foreground">AI Copilot</span>
+          <Sparkles size={16} className="text-[#22d3ee]" />
+          <span className="text-sm font-semibold text-[#e2e5eb]">AI Copilot</span>
         </div>
         <button
           onClick={onClose}
-          className="p-1.5 rounded-lg hover:bg-brand-border text-muted-foreground hover:text-foreground transition-colors"
+          className="p-1.5 rounded-lg hover:bg-brand-border text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
         >
           <X size={16} />
         </button>
@@ -123,8 +123,8 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             <div
               className={`max-w-[85%] rounded-xl px-3.5 py-2.5 text-[0.8125rem] leading-relaxed ${
                 msg.role === 'user'
-                  ? 'bg-primary/15 text-foreground'
-                  : 'bg-white/[0.04] text-foreground border border-brand-border'
+                  ? 'bg-primary/15 text-[#e2e5eb]'
+                  : 'bg-white/[0.04] text-[#e2e5eb] border border-brand-border'
               }`}
             >
               <MarkdownContent content={msg.content} className="text-[0.8125rem] leading-relaxed" />
@@ -134,7 +134,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         {loading && (
           <div className="flex justify-start">
             <div className="bg-white/[0.04] border border-brand-border rounded-xl px-3.5 py-2.5">
-              <Loader2 size={16} className="animate-spin text-primary" />
+              <Loader2 size={16} className="animate-spin text-[#22d3ee]" />
             </div>
           </div>
         )}
@@ -142,7 +142,7 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
         {/* Suggested flows */}
         {suggestedFlows.length > 0 && (
           <div className="space-y-2 pt-2">
-            <span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b]">
               Related Flows
             </span>
             {suggestedFlows.map(flow => (
@@ -164,19 +164,19 @@ export function CopilotPanel({ isOpen, onClose, treeId, sessionId, currentNodeId
             onKeyDown={handleKeyDown}
             placeholder="Ask about this step..."
             rows={1}
-            className="flex-1 resize-none rounded-xl border bg-card text-foreground text-[0.8125rem] placeholder:text-muted-foreground px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
+            className="flex-1 resize-none rounded-xl border bg-[#14161d] text-[#e2e5eb] text-[0.8125rem] placeholder:text-[#848b9b] px-3.5 py-2.5 focus:outline-hidden focus:border-primary/30"
             style={{ borderColor: 'var(--glass-border)' }}
             disabled={loading || initializing}
           />
           <button
             onClick={handleSend}
             disabled={!input.trim() || loading || initializing}
-            className="bg-gradient-brand text-brand-dark p-2.5 rounded-xl hover:opacity-90 active:scale-[0.97] transition-all disabled:opacity-40"
+            className="bg-[#22d3ee] text-brand-dark p-2.5 rounded-xl hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40"
           >
             <Send size={16} />
           </button>
         </div>
-        <p className="text-[0.625rem] text-muted-foreground mt-1.5 px-1">Shift + Enter for a new line</p>
+        <p className="text-[0.625rem] text-[#848b9b] mt-1.5 px-1">Shift + Enter for a new line</p>
       </div>
     </div>
   )
diff --git a/frontend/src/components/copilot/CopilotToggle.tsx b/frontend/src/components/copilot/CopilotToggle.tsx
index 6ae725ed..cf836c5f 100644
--- a/frontend/src/components/copilot/CopilotToggle.tsx
+++ b/frontend/src/components/copilot/CopilotToggle.tsx
@@ -11,7 +11,7 @@ export function CopilotToggle({ isOpen, onToggle }: CopilotToggleProps) {
   return (
     <button
       onClick={onToggle}
-      className="fixed bottom-6 right-6 z-40 bg-gradient-brand text-brand-dark p-3.5 rounded-full shadow-lg shadow-primary/30 hover:opacity-90 active:scale-[0.97] transition-all"
+      className="fixed bottom-6 right-6 z-40 bg-[#22d3ee] text-brand-dark p-3.5 rounded-full shadow-lg shadow-primary/30 hover:brightness-110 active:scale-[0.98] transition-all"
       title="Open AI Copilot"
     >
       <MessageCircle size={22} />
diff --git a/frontend/src/components/kb-accelerator/NodeCard.tsx b/frontend/src/components/kb-accelerator/NodeCard.tsx
index 72e28793..c18d297e 100644
--- a/frontend/src/components/kb-accelerator/NodeCard.tsx
+++ b/frontend/src/components/kb-accelerator/NodeCard.tsx
@@ -55,7 +55,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
   return (
     <div
       className={cn(
-        'glass-card-static border-l-4 p-4 transition-all',
+        'card-flat border-l-4 p-4 transition-all',
         confidenceColor(node.confidence_score),
         node.user_approved && 'opacity-75',
       )}
@@ -66,17 +66,17 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
       <div className="flex items-start justify-between gap-3">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-1">
-            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
               {node.node_type}
             </span>
-            <span className={cn('font-label text-[0.625rem]', confidenceTextColor(node.confidence_score))}>
+            <span className={cn('font-sans text-xs text-[0.625rem]', confidenceTextColor(node.confidence_score))}>
               {confidenceLabel(node.confidence_score)} ({Math.round(node.confidence_score * 100)}%)
             </span>
             {node.user_approved && (
-              <span className="font-label text-[0.625rem] text-emerald-400">Approved</span>
+              <span className="font-sans text-xs text-[0.625rem] text-emerald-400">Approved</span>
             )}
             {node.user_edited && (
-              <span className="font-label text-[0.625rem] text-blue-400">Edited</span>
+              <span className="font-sans text-xs text-[0.625rem] text-blue-400">Edited</span>
             )}
           </div>
 
@@ -85,27 +85,27 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <textarea
                 value={editContent}
                 onChange={e => setEditContent(e.target.value)}
-                className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary/30 focus:outline-hidden"
+                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary/30 focus:outline-hidden"
                 rows={3}
               />
               <div className="flex gap-2">
                 <button
                   onClick={() => handleAction('edit', { content: { ...node.content, question: editContent, content: editContent } })}
                   disabled={busy}
-                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-gradient-brand text-[#101114] hover:opacity-90"
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[#22d3ee] text-white hover:brightness-110"
                 >
                   Save
                 </button>
                 <button
                   onClick={() => setEditMode(false)}
-                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground"
+                  className="px-3 py-1.5 text-xs font-medium rounded-md bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]"
                 >
                   Cancel
                 </button>
               </div>
             </div>
           ) : (
-            <p className="text-sm text-foreground">{stepContent || question}</p>
+            <p className="text-sm text-[#e2e5eb]">{stepContent || question}</p>
           )}
         </div>
 
@@ -116,7 +116,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <button
                 onClick={() => handleAction('approve')}
                 disabled={busy}
-                className="p-1.5 rounded-md text-muted-foreground hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
+                className="p-1.5 rounded-md text-[#848b9b] hover:text-emerald-400 hover:bg-emerald-400/10 transition-colors"
                 title="Approve"
               >
                 <Check size={14} />
@@ -126,7 +126,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
               <button
                 onClick={() => handleAction('reject')}
                 disabled={busy}
-                className="p-1.5 rounded-md text-muted-foreground hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
+                className="p-1.5 rounded-md text-[#848b9b] hover:text-amber-400 hover:bg-amber-400/10 transition-colors"
                 title="Unapprove"
               >
                 <X size={14} />
@@ -135,7 +135,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={startEdit}
               disabled={busy}
-              className="p-1.5 rounded-md text-muted-foreground hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
+              className="p-1.5 rounded-md text-[#848b9b] hover:text-blue-400 hover:bg-blue-400/10 transition-colors"
               title="Edit"
             >
               <Pencil size={14} />
@@ -143,7 +143,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('regenerate')}
               disabled={busy}
-              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
+              className="p-1.5 rounded-md text-[#848b9b] hover:text-[#22d3ee] hover:bg-[rgba(34,211,238,0.10)] transition-colors"
               title="Regenerate"
             >
               <RotateCcw size={14} />
@@ -151,7 +151,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('insert_after', { content: { question: 'New node', type: node.node_type } })}
               disabled={busy}
-              className="p-1.5 rounded-md text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
+              className="p-1.5 rounded-md text-[#848b9b] hover:text-[#22d3ee] hover:bg-[rgba(34,211,238,0.10)] transition-colors"
               title="Insert after"
             >
               <Plus size={14} />
@@ -159,7 +159,7 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
             <button
               onClick={() => handleAction('delete')}
               disabled={busy}
-              className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
+              className="p-1.5 rounded-md text-[#848b9b] hover:text-rose-500 hover:bg-rose-500/10 transition-colors"
               title="Delete"
             >
               <Trash2 size={14} />
@@ -173,15 +173,15 @@ export function NodeCard({ node, onEdit, onHighlight }: NodeCardProps) {
         <div className="mt-3">
           <button
             onClick={() => setExpanded(!expanded)}
-            className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+            className="flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
           >
             {expanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
             {options.length} option{options.length !== 1 ? 's' : ''}
           </button>
           {expanded && (
-            <div className="mt-2 space-y-1 pl-3 border-l border-border">
+            <div className="mt-2 space-y-1 pl-3 border-l border-[#1e2130]">
               {options.map((opt, i) => (
-                <p key={i} className="text-xs text-muted-foreground">
+                <p key={i} className="text-xs text-[#848b9b]">
                   {opt.label} {opt.next_node_id && <span className="text-[#5a6170]">→ {opt.next_node_id}</span>}
                 </p>
               ))}
diff --git a/frontend/src/components/kb-accelerator/ReviewScreen.tsx b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
index 042b5a29..75c53834 100644
--- a/frontend/src/components/kb-accelerator/ReviewScreen.tsx
+++ b/frontend/src/components/kb-accelerator/ReviewScreen.tsx
@@ -30,23 +30,23 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
   return (
     <div className="flex flex-col h-full gap-4">
       {/* Header */}
-      <div className="glass-card-static p-4 flex flex-wrap items-center justify-between gap-3">
+      <div className="card-flat p-4 flex flex-wrap items-center justify-between gap-3">
         <div>
-          <h2 className="text-lg font-heading font-semibold text-foreground">{flowTitle}</h2>
+          <h2 className="text-lg font-heading font-semibold text-[#e2e5eb]">{flowTitle}</h2>
           {flowDescription && (
-            <p className="text-sm text-muted-foreground mt-0.5">{flowDescription}</p>
+            <p className="text-sm text-[#848b9b] mt-0.5">{flowDescription}</p>
           )}
         </div>
         <div className="flex items-center gap-4">
           <div className="flex items-center gap-2 text-sm">
-            <BarChart3 size={14} className="text-muted-foreground" />
-            <span className="text-muted-foreground">
-              Avg confidence: <span className="text-foreground font-medium">{Math.round(avgConfidence * 100)}%</span>
+            <BarChart3 size={14} className="text-[#848b9b]" />
+            <span className="text-[#848b9b]">
+              Avg confidence: <span className="text-[#e2e5eb] font-medium">{Math.round(avgConfidence * 100)}%</span>
             </span>
           </div>
           <div className="flex items-center gap-2 text-sm">
             <CheckCircle2 size={14} className="text-emerald-400" />
-            <span className="text-muted-foreground">
+            <span className="text-[#848b9b]">
               {approvedCount}/{nodes.length} approved
             </span>
           </div>
@@ -88,10 +88,10 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
         </div>
 
         {/* Nodes panel */}
-        <div className="flex flex-col glass-card-static overflow-hidden">
+        <div className="flex flex-col card-flat overflow-hidden">
           <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
-            <span className="text-sm font-medium text-foreground">Generated Flow</span>
-            <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
+            <span className="text-sm font-medium text-[#e2e5eb]">Generated Flow</span>
+            <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] ml-auto">
               {kbImport.target_type === 'troubleshooting' ? 'Troubleshooting' : 'Project'}
             </span>
           </div>
@@ -105,7 +105,7 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
               />
             ))}
             {nodes.length === 0 && (
-              <p className="text-sm text-muted-foreground text-center py-8">
+              <p className="text-sm text-[#848b9b] text-center py-8">
                 No nodes generated. Try converting again.
               </p>
             )}
@@ -119,9 +119,9 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
           onClick={onDiscard}
           disabled={loading}
           className={cn(
-            'px-4 py-2.5 rounded-[10px] text-sm font-medium transition-colors',
-            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground',
-            'hover:text-foreground hover:border-[rgba(255,255,255,0.12)]',
+            'px-4 py-2.5 rounded-lg text-sm font-medium transition-colors',
+            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b]',
+            'hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
         >
@@ -131,9 +131,9 @@ export function ReviewScreen({ kbImport, onEditNode, onApproveAll, onCommit, onD
           onClick={() => onCommit()}
           disabled={loading || nodes.length === 0}
           className={cn(
-            'flex items-center gap-2 px-6 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
-            'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
-            'hover:opacity-90 active:scale-[0.97]',
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
+            'bg-[#22d3ee] text-white',
+            'hover:brightness-110 active:scale-[0.98]',
             'disabled:opacity-50 disabled:cursor-not-allowed'
           )}
         >
diff --git a/frontend/src/components/kb-accelerator/SourcePanel.tsx b/frontend/src/components/kb-accelerator/SourcePanel.tsx
index cae1a7bb..599832ef 100644
--- a/frontend/src/components/kb-accelerator/SourcePanel.tsx
+++ b/frontend/src/components/kb-accelerator/SourcePanel.tsx
@@ -17,23 +17,23 @@ export function SourcePanel({ sourceText, sourceFormat, highlightExcerpt }: Sour
     return (
       <>
         <span>{sourceText.slice(0, idx)}</span>
-        <mark className="bg-primary/20 text-foreground rounded px-0.5">{highlightExcerpt}</mark>
+        <mark className="bg-primary/20 text-[#e2e5eb] rounded px-0.5">{highlightExcerpt}</mark>
         <span>{sourceText.slice(idx + highlightExcerpt.length)}</span>
       </>
     )
   }, [sourceText, highlightExcerpt])
 
   return (
-    <div className="glass-card-static flex flex-col h-full">
+    <div className="card-flat flex flex-col h-full">
       <div className="flex items-center gap-2 px-4 py-3 border-b" style={{ borderColor: 'var(--glass-border)' }}>
-        <FileText size={16} className="text-muted-foreground" />
-        <span className="text-sm font-medium text-foreground">Source Document</span>
-        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground ml-auto">
+        <FileText size={16} className="text-[#848b9b]" />
+        <span className="text-sm font-medium text-[#e2e5eb]">Source Document</span>
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] ml-auto">
           {sourceFormat}
         </span>
       </div>
       <div className="flex-1 overflow-y-auto p-4">
-        <pre className="text-sm text-muted-foreground whitespace-pre-wrap font-sans leading-relaxed">
+        <pre className="text-sm text-[#848b9b] whitespace-pre-wrap font-sans leading-relaxed">
           {renderedText}
         </pre>
       </div>
diff --git a/frontend/src/components/kb-accelerator/SuccessScreen.tsx b/frontend/src/components/kb-accelerator/SuccessScreen.tsx
index 85fe21bd..caf5b87e 100644
--- a/frontend/src/components/kb-accelerator/SuccessScreen.tsx
+++ b/frontend/src/components/kb-accelerator/SuccessScreen.tsx
@@ -18,10 +18,10 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
       </div>
 
       <div>
-        <h2 className="text-xl font-heading font-semibold text-foreground">
+        <h2 className="text-xl font-heading font-semibold text-[#e2e5eb]">
           Flow Created Successfully
         </h2>
-        <p className="text-sm text-muted-foreground mt-2">
+        <p className="text-sm text-[#848b9b] mt-2">
           Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
           and added to your library.
         </p>
@@ -31,9 +31,9 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
         <button
           onClick={onViewFlow}
           className={cn(
-            'flex items-center gap-2 px-6 py-2.5 rounded-[10px] text-sm font-semibold transition-all',
-            'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
-            'hover:opacity-90 active:scale-[0.97]'
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
+            'bg-[#22d3ee] text-white',
+            'hover:brightness-110 active:scale-[0.98]'
           )}
         >
           View Flow
@@ -42,8 +42,8 @@ export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessS
         <button
           onClick={onConvertAnother}
           className={cn(
-            'flex items-center gap-2 px-6 py-2.5 rounded-[10px] text-sm font-medium transition-colors',
-            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
+            'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors',
+            'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
             'hover:border-[rgba(255,255,255,0.12)]'
           )}
         >
diff --git a/frontend/src/components/kb-accelerator/UploadScreen.tsx b/frontend/src/components/kb-accelerator/UploadScreen.tsx
index a9b1c850..a951ddf3 100644
--- a/frontend/src/components/kb-accelerator/UploadScreen.tsx
+++ b/frontend/src/components/kb-accelerator/UploadScreen.tsx
@@ -82,16 +82,16 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
     <div className="max-w-3xl mx-auto space-y-6">
       {/* Quota info */}
       {quota && (
-        <div className="glass-card-static p-4 flex items-center justify-between">
+        <div className="card-flat p-4 flex items-center justify-between">
           <div className="flex items-center gap-3">
-            <Sparkles size={18} className="text-primary" />
+            <Sparkles size={18} className="text-[#22d3ee]" />
             <div>
-              <p className="text-sm font-medium text-foreground">
+              <p className="text-sm font-medium text-[#e2e5eb]">
                 {quota.lifetime_conversions_limit
                   ? `${quota.lifetime_conversions_limit - quota.lifetime_conversions_used} conversions remaining`
                   : 'Unlimited conversions'}
               </p>
-              <p className="text-xs text-muted-foreground">
+              <p className="text-xs text-[#848b9b]">
                 {quota.plan.charAt(0).toUpperCase() + quota.plan.slice(1)} plan
               </p>
             </div>
@@ -110,10 +110,10 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
         <button
           onClick={() => setMode('paste')}
           className={cn(
-            'flex items-center gap-2 px-4 py-2 rounded-[10px] text-sm font-medium transition-colors',
+            'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
             mode === 'paste'
-              ? 'bg-primary/10 text-foreground border border-primary/30'
-              : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+              ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border border-primary/30'
+              : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
           )}
         >
           <ClipboardPaste size={16} />
@@ -123,10 +123,10 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
           <button
             onClick={() => setMode('file')}
             className={cn(
-              'flex items-center gap-2 px-4 py-2 rounded-[10px] text-sm font-medium transition-colors',
+              'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors',
               mode === 'file'
-                ? 'bg-primary/10 text-foreground border border-primary/30'
-                : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)]'
+                ? 'bg-[rgba(34,211,238,0.10)] text-[#e2e5eb] border border-primary/30'
+                : 'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#848b9b] hover:text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)]'
             )}
           >
             <FileUp size={16} />
@@ -136,11 +136,11 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
       </div>
 
       {/* Content area */}
-      <div className="glass-card-static p-5 space-y-4">
+      <div className="card-flat p-5 space-y-4">
         {mode === 'paste' ? (
           <>
             <div>
-              <label htmlFor="kb-title" className="block font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
+              <label htmlFor="kb-title" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5">
                 Title (optional)
               </label>
               <Input
@@ -152,7 +152,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
               />
             </div>
             <div>
-              <label htmlFor="kb-content" className="block font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1.5">
+              <label htmlFor="kb-content" className="block font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1.5">
                 KB Article Content
               </label>
               <Textarea
@@ -163,7 +163,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
                 rows={12}
                 maxLength={500000}
               />
-              <p className="mt-1 text-xs text-muted-foreground">
+              <p className="mt-1 text-xs text-[#848b9b]">
                 {content.length.toLocaleString()} / 500,000 characters
               </p>
             </div>
@@ -183,15 +183,15 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
           >
             {file ? (
               <>
-                <FileText size={32} className="text-primary" />
+                <FileText size={32} className="text-[#22d3ee]" />
                 <div className="text-center">
-                  <p className="text-sm font-medium text-foreground">{file.name}</p>
-                  <p className="text-xs text-muted-foreground mt-1">
+                  <p className="text-sm font-medium text-[#e2e5eb]">{file.name}</p>
+                  <p className="text-xs text-[#848b9b] mt-1">
                     {(file.size / 1024).toFixed(1)} KB
                   </p>
                   <button
                     onClick={e => { e.stopPropagation(); setFile(null) }}
-                    className="mt-2 text-xs text-primary hover:underline"
+                    className="mt-2 text-xs text-[#22d3ee] hover:underline"
                   >
                     Remove
                   </button>
@@ -199,12 +199,12 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
               </>
             ) : (
               <>
-                <Upload size={32} className="text-muted-foreground" />
+                <Upload size={32} className="text-[#848b9b]" />
                 <div className="text-center">
-                  <p className="text-sm text-foreground">
-                    Drop a file here or <span className="text-primary">browse</span>
+                  <p className="text-sm text-[#e2e5eb]">
+                    Drop a file here or <span className="text-[#22d3ee]">browse</span>
                   </p>
-                  <p className="text-xs text-muted-foreground mt-1">
+                  <p className="text-xs text-[#848b9b] mt-1">
                     Supported: {fileFormats.map(f => FORMAT_LABELS[f] || f.toUpperCase()).join(', ')}
                   </p>
                 </div>
@@ -223,7 +223,7 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
 
       {/* Target type selector */}
       <div>
-        <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
           Target Flow Type
         </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -232,14 +232,14 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
               key={t.value}
               onClick={() => setTargetType(t.value)}
               className={cn(
-                'glass-card-static p-4 text-left transition-all',
+                'card-flat p-4 text-left transition-all',
                 targetType === t.value
                   ? 'border-primary/30 bg-primary/5'
                   : 'hover:border-[rgba(255,255,255,0.12)]'
               )}
             >
-              <p className="text-sm font-medium text-foreground">{t.label}</p>
-              <p className="text-xs text-muted-foreground mt-1">{t.description}</p>
+              <p className="text-sm font-medium text-[#e2e5eb]">{t.label}</p>
+              <p className="text-xs text-[#848b9b] mt-1">{t.description}</p>
             </button>
           ))}
         </div>
@@ -250,9 +250,9 @@ export function UploadScreen({ quota, onSubmitText, onSubmitFile, loading }: Upl
         onClick={handleSubmit}
         disabled={!canSubmit || loading || (quota != null && !quota.can_convert)}
         className={cn(
-          'w-full flex items-center justify-center gap-2 px-6 py-3 rounded-[10px] text-sm font-semibold transition-all',
-          'bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20',
-          'hover:opacity-90 active:scale-[0.97]',
+          'w-full flex items-center justify-center gap-2 px-6 py-3 rounded-lg text-sm font-semibold transition-all',
+          'bg-[#22d3ee] text-white',
+          'hover:brightness-110 active:scale-[0.98]',
           'disabled:opacity-50 disabled:cursor-not-allowed'
         )}
       >
diff --git a/frontend/src/components/library/AddToFolderMenu.tsx b/frontend/src/components/library/AddToFolderMenu.tsx
index 71d0e7c5..7c5e19cc 100644
--- a/frontend/src/components/library/AddToFolderMenu.tsx
+++ b/frontend/src/components/library/AddToFolderMenu.tsx
@@ -89,8 +89,8 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
           setIsOpen(!isOpen)
         }}
         className={cn(
-          'rounded-md border border-border p-1.5 text-muted-foreground',
-          'hover:bg-accent hover:text-foreground'
+          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+          'hover:bg-accent hover:text-[#e2e5eb]'
         )}
         title="Add to folder"
         aria-label="Add to folder"
@@ -101,14 +101,14 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
       {isOpen && (
         <div
           className={cn(
-            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-border',
-            'bg-card backdrop-blur-xs py-1 shadow-lg'
+            'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-[#1e2130]',
+            'bg-[#14161d] py-1 shadow-lg'
           )}
         >
           {isLoading ? (
-            <div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
+            <div className="px-3 py-2 text-sm text-[#848b9b]">Loading...</div>
           ) : folders.length === 0 ? (
-            <div className="px-3 py-2 text-sm text-muted-foreground">No folders yet</div>
+            <div className="px-3 py-2 text-sm text-[#848b9b]">No folders yet</div>
           ) : (
             folders.map((folder) => (
               <button
@@ -117,7 +117,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                   e.stopPropagation()
                   toggleFolder(folder.id)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
               >
                 <div
                   className="h-3 w-3 rounded-sm"
@@ -125,13 +125,13 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
                 />
                 <span className="flex-1 truncate text-left">{folder.name}</span>
                 {treeFolderIds.has(folder.id) && (
-                  <Check className="h-4 w-4 text-foreground" />
+                  <Check className="h-4 w-4 text-[#e2e5eb]" />
                 )}
               </button>
             ))
           )}
 
-          <div className="border-t border-border my-1" />
+          <div className="border-t border-[#1e2130] my-1" />
 
           <button
             onClick={(e) => {
@@ -139,7 +139,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
               setIsOpen(false)
               onFolderCreated?.()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <Plus className="h-4 w-4" />
             Create new folder
diff --git a/frontend/src/components/library/ExportFlowModal.tsx b/frontend/src/components/library/ExportFlowModal.tsx
index e241491c..10d89357 100644
--- a/frontend/src/components/library/ExportFlowModal.tsx
+++ b/frontend/src/components/library/ExportFlowModal.tsx
@@ -53,19 +53,19 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
       onClick={onClose}
     >
       <div
-        className="w-full max-w-sm rounded-xl border border-border bg-card shadow-xl"
+        className="w-full max-w-sm rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
           <div className="flex items-center gap-2">
-            <Download className="h-4 w-4 text-muted-foreground" />
-            <h2 className="text-sm font-semibold text-foreground">Export Flow</h2>
+            <Download className="h-4 w-4 text-[#848b9b]" />
+            <h2 className="text-sm font-semibold text-[#e2e5eb]">Export Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <X className="h-4 w-4" />
           </button>
@@ -73,13 +73,13 @@ export function ExportFlowModal({ treeId, treeName, onClose }: ExportFlowModalPr
 
         {/* Body */}
         <div className="px-5 py-4">
-          <p className="text-sm text-muted-foreground">
-            Export <span className="font-medium text-foreground">{treeName}</span> as a <code className="text-xs font-label">.rfflow</code> file (JSON format).
+          <p className="text-sm text-[#848b9b]">
+            Export <span className="font-medium text-[#e2e5eb]">{treeName}</span> as a <code className="text-xs font-sans text-xs">.rfflow</code> file (JSON format).
           </p>
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+        <div className="flex justify-end gap-2 border-t border-[#1e2130] px-5 py-3">
           <Button variant="secondary" onClick={onClose}>
             Cancel
           </Button>
diff --git a/frontend/src/components/library/FolderEditModal.tsx b/frontend/src/components/library/FolderEditModal.tsx
index 25a3c596..ef31025f 100644
--- a/frontend/src/components/library/FolderEditModal.tsx
+++ b/frontend/src/components/library/FolderEditModal.tsx
@@ -175,15 +175,15 @@ export function FolderEditModal({
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/80 backdrop-blur-xs" onClick={onClose} />
+      <div className="absolute inset-0 bg-black/80" onClick={onClose} />
 
       {/* Modal */}
-      <div className="relative z-10 w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-lg">
+      <div className="relative z-10 w-full max-w-md bg-[#14161d] border border-[#1e2130] rounded-2xl p-6 shadow-lg">
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-foreground">
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">
             {isEditMode ? 'Edit Folder' : initialParentId ? 'Create Subfolder' : 'Create Folder'}
           </h2>
-          <button onClick={onClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground">
+          <button onClick={onClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]">
             <X className="h-5 w-5" />
           </button>
         </div>
@@ -191,7 +191,7 @@ export function FolderEditModal({
         <form onSubmit={handleSubmit}>
           {/* Name input */}
           <div className="mb-4">
-            <label htmlFor="folder-name" className="block text-sm font-medium text-foreground">
+            <label htmlFor="folder-name" className="block text-sm font-medium text-[#e2e5eb]">
               Name
             </label>
             <input
@@ -202,9 +202,9 @@ export function FolderEditModal({
               placeholder="e.g., Citrix Issues"
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-card text-foreground placeholder:text-muted-foreground',
+                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'border-border'
+                'border-[#1e2130]'
               )}
               autoFocus
             />
@@ -212,7 +212,7 @@ export function FolderEditModal({
 
           {/* Parent folder dropdown */}
           <div className="mb-4">
-            <label htmlFor="folder-parent" className="block text-sm font-medium text-foreground">
+            <label htmlFor="folder-parent" className="block text-sm font-medium text-[#e2e5eb]">
               Parent Folder
             </label>
             <select
@@ -221,9 +221,9 @@ export function FolderEditModal({
               onChange={(e) => setParentId(e.target.value || null)}
               className={cn(
                 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-                'bg-card text-foreground',
+                'bg-[#14161d] text-[#e2e5eb]',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-                'border-border'
+                'border-[#1e2130]'
               )}
             >
               <option value="">None (root level)</option>
@@ -233,14 +233,14 @@ export function FolderEditModal({
                 </option>
               ))}
             </select>
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="mt-1 text-xs text-[#848b9b]">
               Folders can be nested up to 3 levels deep.
             </p>
           </div>
 
           {/* Color picker */}
           <div className="mb-6">
-            <label className="block text-sm font-medium text-foreground">Color</label>
+            <label className="block text-sm font-medium text-[#e2e5eb]">Color</label>
             <div className="mt-2 flex flex-wrap gap-2">
               {FOLDER_COLORS.map((c) => (
                 <button
diff --git a/frontend/src/components/library/FolderSidebar.tsx b/frontend/src/components/library/FolderSidebar.tsx
index 1d701c34..96922373 100644
--- a/frontend/src/components/library/FolderSidebar.tsx
+++ b/frontend/src/components/library/FolderSidebar.tsx
@@ -115,7 +115,7 @@ function FolderItem({
           className={cn(
             'flex w-full items-center gap-1 rounded-md py-1.5 text-sm',
             'transition-colors hover:bg-accent',
-            selectedFolderId === folder.id && 'bg-accent text-foreground font-medium'
+            selectedFolderId === folder.id && 'bg-accent text-[#e2e5eb] font-medium'
           )}
           style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '8px' }}
         >
@@ -139,7 +139,7 @@ function FolderItem({
           )}
           <Folder className="h-4 w-4 shrink-0" style={{ color: folder.color }} />
           <span className="flex-1 truncate text-left">{folder.name}</span>
-          <span className="text-xs text-muted-foreground group-hover:hidden">{folder.tree_count}</span>
+          <span className="text-xs text-[#848b9b] group-hover:hidden">{folder.tree_count}</span>
         </button>
 
         {/* Folder menu button - replaces tree count on hover */}
@@ -161,8 +161,8 @@ function FolderItem({
         {menuOpenId === folder.id && (
           <div
             className={cn(
-              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-border',
-              'bg-card backdrop-blur-xs py-1 shadow-lg'
+              'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-[#1e2130]',
+              'bg-[#14161d] py-1 shadow-lg'
             )}
           >
             <button
@@ -171,7 +171,7 @@ function FolderItem({
                 onEditFolder(folder)
                 onMenuToggle(null)
               }}
-              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             >
               <Pencil className="h-3 w-3" />
               Edit
@@ -183,7 +183,7 @@ function FolderItem({
                   onAddSubfolder(folder.id)
                   onMenuToggle(null)
                 }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
               >
                 <FolderPlus className="h-3 w-3" />
                 Add Subfolder
@@ -362,13 +362,13 @@ export function FolderSidebar({
     {/* Mobile backdrop */}
     {mobileOpen && (
       <div
-        className="fixed inset-0 z-40 bg-black/80 backdrop-blur-xs md:hidden"
+        className="fixed inset-0 z-40 bg-black/80 md:hidden"
         onClick={onMobileClose}
         aria-hidden="true"
       />
     )}
     <div className={cn(
-      'w-56 shrink-0 border-r border-border bg-transparent',
+      'w-56 shrink-0 border-r border-[#1e2130] bg-transparent',
       'hidden md:block',
       mobileOpen && 'fixed inset-y-0 left-0 z-50 block animate-slide-in-left md:relative md:animate-none'
     )}>
@@ -376,10 +376,10 @@ export function FolderSidebar({
         {/* Mobile close button */}
         {mobileOpen && (
           <div className="mb-3 flex items-center justify-between md:hidden">
-            <span className="text-sm font-medium text-foreground">Folders</span>
+            <span className="text-sm font-medium text-[#e2e5eb]">Folders</span>
             <button
               onClick={onMobileClose}
-              className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
+              className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent"
               aria-label="Close folders"
             >
               <X className="h-4 w-4" />
@@ -388,7 +388,7 @@ export function FolderSidebar({
         )}
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex w-full items-center gap-2 text-sm font-medium text-foreground"
+          className="flex w-full items-center gap-2 text-sm font-medium text-[#e2e5eb]"
         >
           {isExpanded ? (
             <ChevronDown className="h-4 w-4" />
@@ -406,7 +406,7 @@ export function FolderSidebar({
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
                 'transition-colors hover:bg-accent',
-                selectedFolderId === null && 'bg-accent text-foreground font-medium'
+                selectedFolderId === null && 'bg-accent text-[#e2e5eb] font-medium'
               )}
             >
               <Folder className="h-4 w-4" />
@@ -415,7 +415,7 @@ export function FolderSidebar({
 
             {/* Loading state */}
             {isLoading ? (
-              <div className="px-2 py-1.5 text-sm text-muted-foreground">Loading...</div>
+              <div className="px-2 py-1.5 text-sm text-[#848b9b]">Loading...</div>
             ) : (
               <>
                 {/* User folders (hierarchical) */}
@@ -445,7 +445,7 @@ export function FolderSidebar({
               onClick={() => onCreateFolder(null)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
-                'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
+                'text-[#848b9b] transition-colors hover:bg-accent hover:text-[#e2e5eb]'
               )}
             >
               <Plus className="h-4 w-4" />
@@ -460,8 +460,8 @@ export function FolderSidebar({
     {contextMenu && (
       <div
         className={cn(
-          'fixed z-50 w-44 rounded-md border border-border',
-          'bg-card backdrop-blur-xs py-1 shadow-lg'
+          'fixed z-50 w-44 rounded-md border border-[#1e2130]',
+          'bg-[#14161d] py-1 shadow-lg'
         )}
         style={{ left: contextMenu.x, top: contextMenu.y }}
         onClick={(e) => e.stopPropagation()}
@@ -471,7 +471,7 @@ export function FolderSidebar({
             onEditFolder(contextMenu.folder)
             closeContextMenu()
           }}
-          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         >
           <Pencil className="h-3 w-3" />
           Edit
@@ -482,7 +482,7 @@ export function FolderSidebar({
               handleAddSubfolder(contextMenu.folder.id)
               closeContextMenu()
             }}
-            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <FolderPlus className="h-3 w-3" />
             Add Subfolder
diff --git a/frontend/src/components/library/ForkModal.tsx b/frontend/src/components/library/ForkModal.tsx
index 7e7f1f31..bcab541d 100644
--- a/frontend/src/components/library/ForkModal.tsx
+++ b/frontend/src/components/library/ForkModal.tsx
@@ -54,19 +54,19 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
       onClick={onClose}
     >
       <div
-        className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl"
+        className="w-full max-w-md rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
           <div className="flex items-center gap-2">
-            <GitBranch className="h-4 w-4 text-muted-foreground" />
-            <h2 className="text-sm font-semibold text-foreground">Fork Flow</h2>
+            <GitBranch className="h-4 w-4 text-[#848b9b]" />
+            <h2 className="text-sm font-semibold text-[#e2e5eb]">Fork Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <X className="h-4 w-4" />
           </button>
@@ -75,7 +75,7 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
         {/* Body */}
         <form onSubmit={handleSubmit} className="space-y-4 px-5 py-4">
           <div>
-            <label htmlFor="fork-name" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+            <label htmlFor="fork-name" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
               Name <span className="text-red-400">*</span>
             </label>
             <input
@@ -87,16 +87,16 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               autoFocus
               maxLength={255}
               className={cn(
-                'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                'w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
 
           <div>
-            <label htmlFor="fork-reason" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+            <label htmlFor="fork-reason" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
               Reason for Forking{' '}
-              <span className="text-muted-foreground/60">(optional)</span>
+              <span className="text-[#848b9b]/60">(optional)</span>
             </label>
             <textarea
               id="fork-reason"
@@ -105,8 +105,8 @@ export function ForkModal({ treeId, treeName, onClose }: ForkModalProps) {
               rows={3}
               placeholder="e.g. customizing for a specific client…"
               className={cn(
-                'w-full resize-none rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                'w-full resize-none rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
           </div>
diff --git a/frontend/src/components/library/ImportFlowModal.tsx b/frontend/src/components/library/ImportFlowModal.tsx
index 6b6ad309..48fbd108 100644
--- a/frontend/src/components/library/ImportFlowModal.tsx
+++ b/frontend/src/components/library/ImportFlowModal.tsx
@@ -95,19 +95,19 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
       onClick={onClose}
     >
       <div
-        className="w-full max-w-md rounded-xl border border-border bg-card shadow-xl"
+        className="w-full max-w-md rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
           <div className="flex items-center gap-2">
-            <FileUp className="h-4 w-4 text-muted-foreground" />
-            <h2 className="text-sm font-semibold text-foreground">Import Flow</h2>
+            <FileUp className="h-4 w-4 text-[#848b9b]" />
+            <h2 className="text-sm font-semibold text-[#e2e5eb]">Import Flow</h2>
           </div>
           <button
             onClick={onClose}
             aria-label="Close"
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <X className="h-4 w-4" />
           </button>
@@ -122,18 +122,18 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   'flex flex-col items-center justify-center rounded-lg border-2 border-dashed px-4 py-8 text-center transition-colors cursor-pointer',
                   isDragging
                     ? 'border-primary/50 bg-primary/5'
-                    : 'border-border hover:border-white/[0.12]'
+                    : 'border-[#1e2130] hover:border-white/[0.12]'
                 )}
                 onClick={() => fileInputRef.current?.click()}
                 onDragOver={(e) => { e.preventDefault(); setIsDragging(true) }}
                 onDragLeave={() => setIsDragging(false)}
                 onDrop={handleDrop}
               >
-                <FileUp className="mb-2 h-8 w-8 text-muted-foreground" />
-                <p className="text-sm text-foreground">
-                  Drop .rfflow file here or <span className="text-primary cursor-pointer">browse</span>
+                <FileUp className="mb-2 h-8 w-8 text-[#848b9b]" />
+                <p className="text-sm text-[#e2e5eb]">
+                  Drop .rfflow file here or <span className="text-[#22d3ee] cursor-pointer">browse</span>
                 </p>
-                <p className="mt-1 text-xs text-muted-foreground">JSON format</p>
+                <p className="mt-1 text-xs text-[#848b9b]">JSON format</p>
               </div>
               <input
                 ref={fileInputRef}
@@ -155,7 +155,7 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
             <div className="space-y-4">
               {/* Editable name */}
               <div>
-                <label htmlFor="import-name" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+                <label htmlFor="import-name" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
                   Name
                 </label>
                 <input
@@ -165,8 +165,8 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
                   onChange={(e) => setNameOverride(e.target.value)}
                   maxLength={255}
                   className={cn(
-                    'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
-                    'placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+                    'w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+                    'placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
                   )}
                 />
               </div>
@@ -174,31 +174,31 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
               {/* Flow info */}
               <div className="space-y-2 text-xs">
                 <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">Type:</span>
-                  <span className="rounded bg-primary/10 px-2 py-0.5 font-label text-primary">
+                  <span className="text-[#848b9b]">Type:</span>
+                  <span className="rounded bg-[rgba(34,211,238,0.10)] px-2 py-0.5 font-sans text-xs text-[#22d3ee]">
                     {TYPE_LABELS[parsed.flow.tree_type] || parsed.flow.tree_type}
                   </span>
                 </div>
 
                 {parsed.flow.description && (
                   <div>
-                    <span className="text-muted-foreground">Description:</span>
-                    <p className="mt-0.5 text-foreground line-clamp-2">{parsed.flow.description}</p>
+                    <span className="text-[#848b9b]">Description:</span>
+                    <p className="mt-0.5 text-[#e2e5eb] line-clamp-2">{parsed.flow.description}</p>
                   </div>
                 )}
 
                 {parsed.flow.category && (
                   <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground">Category:</span>
-                    <span className="text-foreground">{parsed.flow.category.name}</span>
+                    <span className="text-[#848b9b]">Category:</span>
+                    <span className="text-[#e2e5eb]">{parsed.flow.category.name}</span>
                   </div>
                 )}
 
                 {parsed.flow.tags.length > 0 && (
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className="text-muted-foreground">Tags:</span>
+                    <span className="text-[#848b9b]">Tags:</span>
                     {parsed.flow.tags.map((tag) => (
-                      <span key={tag} className="rounded bg-card border border-border px-2 py-0.5 font-label text-foreground">
+                      <span key={tag} className="rounded bg-[#14161d] border border-[#1e2130] px-2 py-0.5 font-sans text-xs text-[#e2e5eb]">
                         {tag}
                       </span>
                     ))}
@@ -207,26 +207,26 @@ export function ImportFlowModal({ onClose }: ImportFlowModalProps) {
 
                 {parsed.flow.author_name && (
                   <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground">Original author:</span>
-                    <span className="text-foreground">{parsed.flow.author_name}</span>
+                    <span className="text-[#848b9b]">Original author:</span>
+                    <span className="text-[#e2e5eb]">{parsed.flow.author_name}</span>
                   </div>
                 )}
 
                 <div className="flex items-center gap-2">
-                  <span className="text-muted-foreground">Version:</span>
-                  <span className="text-foreground">v{parsed.flow.version}</span>
+                  <span className="text-[#848b9b]">Version:</span>
+                  <span className="text-[#e2e5eb]">v{parsed.flow.version}</span>
                 </div>
               </div>
 
-              <p className="text-xs text-muted-foreground">
-                Flow will be imported as a <span className="font-medium text-foreground">draft</span>.
+              <p className="text-xs text-[#848b9b]">
+                Flow will be imported as a <span className="font-medium text-[#e2e5eb]">draft</span>.
               </p>
             </div>
           )}
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-2 border-t border-border px-5 py-3">
+        <div className="flex justify-end gap-2 border-t border-[#1e2130] px-5 py-3">
           {step === 'preview' && (
             <Button
               variant="secondary"
diff --git a/frontend/src/components/library/ShareTreeModal.tsx b/frontend/src/components/library/ShareTreeModal.tsx
index cdff5e45..e0a163cb 100644
--- a/frontend/src/components/library/ShareTreeModal.tsx
+++ b/frontend/src/components/library/ShareTreeModal.tsx
@@ -115,18 +115,18 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
     <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
       {/* Backdrop */}
       <div
-        className="absolute inset-0 bg-black/80 backdrop-blur-xs"
+        className="absolute inset-0 bg-black/80"
         onClick={onClose}
       />
 
       {/* Modal */}
-      <div className="relative w-full max-w-full rounded-t-2xl bg-card border border-border shadow-lg sm:max-w-lg sm:rounded-2xl">
+      <div className="relative w-full max-w-full rounded-t-2xl bg-[#14161d] border border-[#1e2130] shadow-lg sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
-          <h2 className="text-lg font-semibold text-foreground">Share Tree</h2>
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">Share Tree</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent/50 hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent/50 hover:text-[#e2e5eb]"
           >
             <X className="h-5 w-5" />
           </button>
@@ -136,9 +136,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* Tree Info */}
           <div>
-            <h3 className="font-medium text-foreground">{tree.name}</h3>
+            <h3 className="font-medium text-[#e2e5eb]">{tree.name}</h3>
             {tree.description && (
-              <p className="mt-1 text-sm text-muted-foreground line-clamp-2">
+              <p className="mt-1 text-sm text-[#848b9b] line-clamp-2">
                 {tree.description}
               </p>
             )}
@@ -146,7 +146,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
 
           {/* Visibility Settings */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-foreground">
+            <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
               Visibility
             </label>
             <div className="space-y-2">
@@ -157,14 +157,14 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   className={cn(
                     'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
                     visibility === level
-                      ? 'border-border bg-accent text-foreground'
-                      : 'border-border bg-transparent text-muted-foreground hover:border-primary/30 hover:bg-accent/50'
+                      ? 'border-[#1e2130] bg-accent text-[#e2e5eb]'
+                      : 'border-[#1e2130] bg-transparent text-[#848b9b] hover:border-primary/30 hover:bg-accent/50'
                   )}
                 >
                   {getVisibilityIcon(level)}
                   <div className="flex-1">
                     <div className="text-sm font-medium capitalize">{level}</div>
-                    <div className="text-xs text-muted-foreground">
+                    <div className="text-xs text-[#848b9b]">
                       {getVisibilityDescription(level)}
                     </div>
                   </div>
@@ -179,7 +179,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
           {/* Share Link Generation */}
           {visibility !== 'private' && (
             <div>
-              <label className="mb-2 block text-sm font-medium text-foreground">
+              <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
                 Share Link
               </label>
 
@@ -190,11 +190,11 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                   id="allow-forking"
                   checked={allowForking}
                   onChange={(e) => setAllowForking(e.target.checked)}
-                  className="h-4 w-4 rounded border-border bg-card text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
+                  className="h-4 w-4 rounded border-[#1e2130] bg-[#14161d] text-[#e2e5eb] focus:ring-2 focus:ring-primary/20 focus:ring-offset-2 focus:ring-offset-black"
                 />
                 <label
                   htmlFor="allow-forking"
-                  className="text-sm text-muted-foreground cursor-pointer"
+                  className="text-sm text-[#848b9b] cursor-pointer"
                 >
                   Allow recipients to fork this tree
                 </label>
@@ -214,20 +214,20 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
               {/* Active Share Link */}
               {activeShare && (
                 <div className="space-y-2">
-                  <div className="flex items-center gap-2 rounded-md border border-border bg-card p-3">
+                  <div className="flex items-center gap-2 rounded-md border border-[#1e2130] bg-[#14161d] p-3">
                     <input
                       type="text"
                       value={activeShare.share_url}
                       readOnly
-                      className="flex-1 bg-transparent text-sm text-foreground outline-hidden"
+                      className="flex-1 bg-transparent text-sm text-[#e2e5eb] outline-hidden"
                     />
                     <button
                       onClick={handleCopyLink}
                       className={cn(
-                        'flex items-center gap-2 rounded-md border border-border px-3 py-1.5 text-sm font-medium transition-colors',
+                        'flex items-center gap-2 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm font-medium transition-colors',
                         copied
                           ? 'border-green-500 bg-green-500/10 text-green-400'
-                          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                          : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
                       )}
                     >
                       {copied ? (
@@ -243,13 +243,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
                       )}
                     </button>
                   </div>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-xs text-[#848b9b]">
                     {activeShare.allow_forking
                       ? 'Recipients can fork this tree'
                       : 'Forking disabled for this share'}
                   </p>
                   {shares.length > 1 && (
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-xs text-[#848b9b]">
                       {shares.length} active share links
                     </p>
                   )}
@@ -260,7 +260,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex justify-end gap-3 border-t border-border px-6 py-4">
+        <div className="flex justify-end gap-3 border-t border-[#1e2130] px-6 py-4">
           <Button variant="secondary" onClick={onClose}>
             Close
           </Button>
diff --git a/frontend/src/components/library/SortDropdown.tsx b/frontend/src/components/library/SortDropdown.tsx
index cea34d8b..a6e53c24 100644
--- a/frontend/src/components/library/SortDropdown.tsx
+++ b/frontend/src/components/library/SortDropdown.tsx
@@ -21,7 +21,7 @@ const sortOptions: { value: SortBy; label: string }[] = [
 export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
   return (
     <div className={cn('relative inline-flex items-center', className)}>
-      <span className="mr-2 flex items-center gap-1.5 text-sm text-muted-foreground">
+      <span className="mr-2 flex items-center gap-1.5 text-sm text-[#848b9b]">
         <ArrowUpDown className="h-4 w-4" />
         <span className="hidden sm:inline">Sort:</span>
       </span>
@@ -29,8 +29,8 @@ export function SortDropdown({ value, onChange, className }: SortDropdownProps)
         value={value}
         onChange={(e) => onChange(e.target.value as SortBy)}
         className={cn(
-          'rounded-md border border-border bg-card px-3 py-1.5 text-sm',
-          'text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
+          'rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm',
+          'text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
         )}
       >
         {sortOptions.map((option) => (
diff --git a/frontend/src/components/library/TreeGridView.tsx b/frontend/src/components/library/TreeGridView.tsx
index 1b091c90..93d34d14 100644
--- a/frontend/src/components/library/TreeGridView.tsx
+++ b/frontend/src/components/library/TreeGridView.tsx
@@ -34,11 +34,11 @@ export function TreeGridView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="relative bg-card border border-border rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
+          className="relative bg-[#14161d] border border-[#1e2130] rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
         >
           <div className="mb-2 flex items-start justify-between gap-2">
             <div className="flex items-center gap-2">
-              <h3 className="font-semibold text-foreground">{tree.name}</h3>
+              <h3 className="font-semibold text-[#e2e5eb]">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
                   <FileText className="h-3 w-3" />
@@ -46,7 +46,7 @@ export function TreeGridView({
                 </span>
               )}
               {tree.tree_type === 'maintenance' && (
-                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400">
+                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400">
                   <Wrench className="h-3 w-3" />
                   Maintenance
                 </span>
@@ -60,21 +60,21 @@ export function TreeGridView({
             <div className="flex items-center gap-2">
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-4 w-4 text-muted-foreground" />
+                  <Globe className="h-4 w-4 text-[#848b9b]" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-4 w-4 text-muted-foreground" />
+                  <Lock className="h-4 w-4 text-[#848b9b]" />
                 </span>
               )}
               {tree.category_info && (
-                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
+                <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
                   {tree.category_info.name}
                 </span>
               )}
             </div>
           </div>
-          <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
+          <p className="mb-3 text-sm text-[#848b9b] line-clamp-2">
             {tree.description || 'No description available'}
           </p>
 
@@ -86,7 +86,7 @@ export function TreeGridView({
           )}
 
           <div className="flex items-center justify-between">
-            <span className="text-xs text-muted-foreground">
+            <span className="text-xs text-[#848b9b]">
               v{tree.version} · {tree.usage_count} uses
             </span>
             <div className="flex items-center gap-2">
@@ -95,8 +95,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onExportTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
+                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+                    'hover:bg-accent hover:text-[#e2e5eb]'
                   )}
                   title="Export flow"
                   aria-label="Export flow"
@@ -109,8 +109,8 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
+                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+                    'hover:bg-accent hover:text-[#e2e5eb]'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -122,8 +122,8 @@ export function TreeGridView({
                 <Link
                   to={getTreeEditorPath(tree.id, tree.tree_type)}
                   className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
+                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
+                    'hover:bg-accent hover:text-[#e2e5eb]'
                   )}
                   title="Edit tree"
                   aria-label="Edit tree"
@@ -136,7 +136,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onDeleteTree(tree)}
                   className={cn(
-                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
                     'hover:bg-red-400/10 hover:text-red-400'
                   )}
                   title="Delete tree"
@@ -150,7 +150,7 @@ export function TreeGridView({
                   type="button"
                   onClick={() => onPrepareSession(tree)}
                   className={cn(
-                    'rounded-md border border-border p-2 text-muted-foreground',
+                    'rounded-md border border-[#1e2130] p-2 text-[#848b9b]',
                     'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                   )}
                   title="Prepare session for engineer"
@@ -163,8 +163,8 @@ export function TreeGridView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-gradient-brand px-3 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90'
+                  'rounded-md bg-[#22d3ee] px-3 py-2 text-sm font-medium text-white',
+                  'hover:brightness-110'
                 )}
               >
                 Start Session
diff --git a/frontend/src/components/library/TreeListView.tsx b/frontend/src/components/library/TreeListView.tsx
index ebef1397..583caab0 100644
--- a/frontend/src/components/library/TreeListView.tsx
+++ b/frontend/src/components/library/TreeListView.tsx
@@ -33,12 +33,12 @@ export function TreeListView({
       {trees.map((tree) => (
         <div
           key={tree.id}
-          className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
+          className="flex items-center gap-4 bg-[#14161d] border border-[#1e2130] rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-xs"
         >
           {/* Left: Name and Description */}
           <div className="flex-1 min-w-0">
             <div className="flex items-center gap-2 mb-1">
-              <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
+              <h3 className="font-semibold text-[#e2e5eb] truncate">{tree.name}</h3>
               {tree.status === 'draft' && (
                 <span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 shrink-0">
                   <FileText className="h-3 w-3" />
@@ -46,7 +46,7 @@ export function TreeListView({
                 </span>
               )}
               {tree.tree_type === 'maintenance' && (
-                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
+                <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                   <Wrench className="h-3 w-3" />
                   Maintenance
                 </span>
@@ -58,15 +58,15 @@ export function TreeListView({
               )}
               {tree.is_public ? (
                 <span title="Public tree">
-                  <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                  <Globe className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
                 </span>
               ) : (
                 <span title="Private tree">
-                  <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                  <Lock className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
                 </span>
               )}
             </div>
-            <p className="text-sm text-muted-foreground truncate">
+            <p className="text-sm text-[#848b9b] truncate">
               {tree.description || 'No description available'}
             </p>
           </div>
@@ -74,7 +74,7 @@ export function TreeListView({
           {/* Center: Category and Tags */}
           <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
             {tree.category_info && (
-              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
+              <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b] whitespace-nowrap">
                 {tree.category_info.name}
               </span>
             )}
@@ -87,7 +87,7 @@ export function TreeListView({
 
           {/* Right: Metadata and Actions */}
           <div className="flex items-center gap-3 shrink-0">
-            <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
+            <div className="hidden sm:flex flex-col items-end text-xs text-[#848b9b]">
               <span>v{tree.version}</span>
               <span>{tree.usage_count} uses</span>
             </div>
@@ -98,8 +98,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onExportTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-border p-1.5 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
+                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                    'hover:bg-accent hover:text-[#e2e5eb]'
                   )}
                   title="Export flow"
                   aria-label="Export flow"
@@ -112,8 +112,8 @@ export function TreeListView({
                   type="button"
                   onClick={() => onForkTree(tree.id)}
                   className={cn(
-                    'rounded-md border border-border p-1.5 text-muted-foreground',
-                    'hover:bg-accent hover:text-foreground'
+                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                    'hover:bg-accent hover:text-[#e2e5eb]'
                   )}
                   title="Fork tree"
                   aria-label="Fork tree"
@@ -126,8 +126,8 @@ export function TreeListView({
                   <Link
                     to={getTreeEditorPath(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md border border-border p-1.5 text-muted-foreground',
-                      'hover:bg-accent hover:text-foreground'
+                      'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                      'hover:bg-accent hover:text-[#e2e5eb]'
                     )}
                     title="Edit tree"
                     aria-label="Edit tree"
@@ -138,7 +138,7 @@ export function TreeListView({
                     type="button"
                     onClick={() => onDeleteTree(tree)}
                     className={cn(
-                      'rounded-md border border-border p-1.5 text-muted-foreground',
+                      'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
                       'hover:bg-red-500/20 hover:text-red-400'
                     )}
                     title="Delete tree"
@@ -153,7 +153,7 @@ export function TreeListView({
                   type="button"
                   onClick={() => onPrepareSession(tree)}
                   className={cn(
-                    'rounded-md border border-border p-1.5 text-muted-foreground',
+                    'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
                     'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                   )}
                   title="Prepare session for engineer"
@@ -166,8 +166,8 @@ export function TreeListView({
                 type="button"
                 onClick={() => onStartSession(tree.id, tree.tree_type)}
                 className={cn(
-                  'rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
-                  'hover:opacity-90 whitespace-nowrap'
+                  'rounded-md bg-[#22d3ee] px-3 py-1.5 text-sm font-medium text-white',
+                  'hover:brightness-110 whitespace-nowrap'
                 )}
               >
                 Start
diff --git a/frontend/src/components/library/TreeTableView.tsx b/frontend/src/components/library/TreeTableView.tsx
index 92a7e769..1655498f 100644
--- a/frontend/src/components/library/TreeTableView.tsx
+++ b/frontend/src/components/library/TreeTableView.tsx
@@ -73,12 +73,12 @@ export function TreeTableView({
   }
 
   return (
-    <div className="overflow-x-auto rounded-2xl border border-border">
+    <div className="overflow-x-auto rounded-2xl border border-[#1e2130]">
       <table className="w-full">
         <thead className="bg-accent/50 sticky top-0 z-10">
-          <tr className="border-b border-border">
+          <tr className="border-b border-[#1e2130]">
             <th
-              className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
+              className="px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
               onClick={() => handleSort('name')}
             >
               <div className="flex items-center gap-1">
@@ -86,11 +86,11 @@ export function TreeTableView({
                 {getSortIcon('name')}
               </div>
             </th>
-            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
+            <th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b]">
               Description
             </th>
             <th
-              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
+              className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
               onClick={() => handleSort('category')}
             >
               <div className="flex items-center gap-1">
@@ -98,11 +98,11 @@ export function TreeTableView({
                 {getSortIcon('category')}
               </div>
             </th>
-            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
+            <th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b]">
               Tags
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
               onClick={() => handleSort('version')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -111,7 +111,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
+              className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
               onClick={() => handleSort('usage')}
             >
               <div className="flex items-center justify-center gap-1">
@@ -120,7 +120,7 @@ export function TreeTableView({
               </div>
             </th>
             <th
-              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
+              className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-[#848b9b] cursor-pointer hover:text-[#e2e5eb]"
               onClick={() => handleSort('updated')}
             >
               <div className="flex items-center gap-1">
@@ -128,17 +128,17 @@ export function TreeTableView({
                 {getSortIcon('updated')}
               </div>
             </th>
-            <th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">
+            <th className="px-4 py-3 text-right text-sm font-medium text-[#848b9b]">
               Actions
             </th>
           </tr>
         </thead>
         <tbody className="bg-transparent">
           {trees.map((tree) => (
-            <tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
+            <tr key={tree.id} className="border-b border-[#1e2130] last:border-0 hover:bg-accent/50">
               <td className="px-4 py-3">
                 <div className="flex items-center gap-2">
-                  <span className="font-medium text-foreground truncate max-w-[200px]">
+                  <span className="font-medium text-[#e2e5eb] truncate max-w-[200px]">
                     {tree.name}
                   </span>
                   {tree.status === 'draft' && (
@@ -148,7 +148,7 @@ export function TreeTableView({
                     </span>
                   )}
                   {tree.tree_type === 'maintenance' && (
-                    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-label text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
+                    <span className="inline-flex items-center gap-1 rounded-full border border-amber-500/30 bg-amber-500/10 px-2 py-0.5 font-sans text-xs text-[0.625rem] uppercase tracking-wide text-amber-400 shrink-0">
                       <Wrench className="h-3 w-3" />
                       Maintenance
                     </span>
@@ -160,23 +160,23 @@ export function TreeTableView({
                   )}
                   {tree.is_public ? (
                     <span title="Public tree">
-                      <Globe className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                      <Globe className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
                     </span>
                   ) : (
                     <span title="Private tree">
-                      <Lock className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                      <Lock className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
                     </span>
                   )}
                 </div>
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-[#848b9b]">
                 <span className="truncate block max-w-[250px]">
                   {tree.description || 'No description'}
                 </span>
               </td>
               <td className="hidden lg:table-cell px-4 py-3">
                 {tree.category_info && (
-                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
+                  <span className="inline-block rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]">
                     {tree.category_info.name}
                   </span>
                 )}
@@ -186,13 +186,13 @@ export function TreeTableView({
                   <TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
                 )}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-[#848b9b]">
                 v{tree.version}
               </td>
-              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
+              <td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-[#848b9b]">
                 {tree.usage_count}
               </td>
-              <td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
+              <td className="hidden md:table-cell px-4 py-3 text-sm text-[#848b9b]">
                 {formatDate(tree.updated_at)}
               </td>
               <td className="px-4 py-3">
@@ -202,8 +202,8 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onExportTree(tree.id)}
                       className={cn(
-                        'rounded-md border border-border p-1.5 text-muted-foreground',
-                        'hover:bg-accent hover:text-foreground'
+                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                        'hover:bg-accent hover:text-[#e2e5eb]'
                       )}
                       title="Export flow"
                       aria-label="Export flow"
@@ -216,8 +216,8 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onForkTree(tree.id)}
                       className={cn(
-                        'rounded-md border border-border p-1.5 text-muted-foreground',
-                        'hover:bg-accent hover:text-foreground'
+                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                        'hover:bg-accent hover:text-[#e2e5eb]'
                       )}
                       title="Fork tree"
                       aria-label="Fork tree"
@@ -230,8 +230,8 @@ export function TreeTableView({
                       <Link
                         to={getTreeEditorPath(tree.id, tree.tree_type)}
                         className={cn(
-                          'rounded-md border border-border p-1.5 text-muted-foreground',
-                          'hover:bg-accent hover:text-foreground'
+                          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
+                          'hover:bg-accent hover:text-[#e2e5eb]'
                         )}
                         title="Edit tree"
                         aria-label="Edit tree"
@@ -242,7 +242,7 @@ export function TreeTableView({
                         type="button"
                         onClick={() => onDeleteTree(tree)}
                         className={cn(
-                          'rounded-md border border-border p-1.5 text-muted-foreground',
+                          'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
                           'hover:bg-red-500/20 hover:text-red-400'
                         )}
                         title="Delete tree"
@@ -257,7 +257,7 @@ export function TreeTableView({
                       type="button"
                       onClick={() => onPrepareSession(tree)}
                       className={cn(
-                        'rounded-md border border-border p-1.5 text-muted-foreground',
+                        'rounded-md border border-[#1e2130] p-1.5 text-[#848b9b]',
                         'hover:bg-cyan-500/10 hover:text-cyan-400 hover:border-cyan-500/30'
                       )}
                       title="Prepare session for engineer"
@@ -270,8 +270,8 @@ export function TreeTableView({
                     type="button"
                     onClick={() => onStartSession(tree.id, tree.tree_type)}
                     className={cn(
-                      'rounded-md bg-gradient-brand px-3 py-1.5 text-xs font-medium text-white shadow-lg shadow-primary/20',
-                      'hover:opacity-90 whitespace-nowrap'
+                      'rounded-md bg-[#22d3ee] px-3 py-1.5 text-xs font-medium text-white',
+                      'hover:brightness-110 whitespace-nowrap'
                     )}
                   >
                     Start
diff --git a/frontend/src/components/library/ViewToggle.tsx b/frontend/src/components/library/ViewToggle.tsx
index 88fe5b4b..e559c653 100644
--- a/frontend/src/components/library/ViewToggle.tsx
+++ b/frontend/src/components/library/ViewToggle.tsx
@@ -11,15 +11,15 @@ interface ViewToggleProps {
 
 export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
   return (
-    <div className={cn('flex items-center gap-1 rounded-md border border-border p-1', className)}>
+    <div className={cn('flex items-center gap-1 rounded-md border border-[#1e2130] p-1', className)}>
       <button
         type="button"
         onClick={() => onChange('grid')}
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'grid'
-            ? 'bg-accent text-foreground border-border'
-            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
+            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
         )}
         title="Grid view"
         aria-label="Grid view"
@@ -32,8 +32,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'list'
-            ? 'bg-accent text-foreground border-border'
-            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
+            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
         )}
         title="List view"
         aria-label="List view"
@@ -46,8 +46,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
         className={cn(
           'rounded p-1.5 transition-colors',
           view === 'table'
-            ? 'bg-accent text-foreground border-border'
-            : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+            ? 'bg-accent text-[#e2e5eb] border-[#1e2130]'
+            : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
         )}
         title="Table view"
         aria-label="Table view"
diff --git a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
index 2325e4ff..a69a1e69 100644
--- a/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
+++ b/frontend/src/components/procedural-editor/CollapsibleEditorSection.tsx
@@ -35,7 +35,7 @@ export function CollapsibleEditorSection({
   }
 
   return (
-    <div className="border-b border-border">
+    <div className="border-b border-[#1e2130]">
       <button
         type="button"
         onClick={handleToggle}
@@ -45,14 +45,14 @@ export function CollapsibleEditorSection({
       >
         <ChevronRight
           className={cn(
-            'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200',
+            'h-4 w-4 shrink-0 text-[#848b9b] transition-transform duration-200',
             isExpanded && 'rotate-90'
           )}
         />
-        <span className="shrink-0 text-muted-foreground">{icon}</span>
-        <span className="text-sm font-medium text-foreground">{title}</span>
+        <span className="shrink-0 text-[#848b9b]">{icon}</span>
+        <span className="text-sm font-medium text-[#e2e5eb]">{title}</span>
         {!isExpanded && (
-          <span className="min-w-0 truncate text-sm text-muted-foreground">
+          <span className="min-w-0 truncate text-sm text-[#848b9b]">
             — {summary}
           </span>
         )}
diff --git a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
index 679a38ee..cb204168 100644
--- a/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFieldEditor.tsx
@@ -26,49 +26,49 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
   const needsOptions = field.field_type === 'select' || field.field_type === 'multi_select'
 
   return (
-    <div className="bg-card border border-border rounded-xl p-3">
+    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
       {/* Header row */}
       <div className="flex items-center gap-2">
-        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-muted-foreground" />
+        <GripVertical className="h-4 w-4 shrink-0 cursor-grab text-[#848b9b]" />
 
         <input
           type="text"
           value={field.label}
           onChange={(e) => onUpdate({ label: e.target.value })}
           placeholder="Field label"
-          className="min-w-0 flex-1 rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="min-w-0 flex-1 rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         />
 
         <select
           value={field.field_type}
           onChange={(e) => onUpdate({ field_type: e.target.value as IntakeFieldType })}
-          className="rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FIELD_TYPE_OPTIONS.map((opt) => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
           ))}
         </select>
 
-        <label className="flex items-center gap-1 text-xs text-muted-foreground">
+        <label className="flex items-center gap-1 text-xs text-[#848b9b]">
           <input
             type="checkbox"
             checked={field.required}
             onChange={(e) => onUpdate({ required: e.target.checked })}
-            className="rounded border-border"
+            className="rounded border-[#1e2130]"
           />
           Req
         </label>
 
         <button
           onClick={() => setExpanded(!expanded)}
-          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         >
           {expanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
         </button>
 
         <button
           onClick={onRemove}
-          className="rounded p-1 text-muted-foreground hover:bg-red-500/20 hover:text-red-400"
+          className="rounded p-1 text-[#848b9b] hover:bg-red-500/20 hover:text-red-400"
         >
           <Trash2 className="h-3.5 w-3.5" />
         </button>
@@ -76,66 +76,66 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
 
       {/* Expanded details */}
       {expanded && (
-        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-border pt-3">
+        <div className="mt-3 grid grid-cols-2 gap-3 border-t border-[#1e2130] pt-3">
           <div>
-            <label className="mb-1 block text-xs text-muted-foreground">Variable Name</label>
+            <label className="mb-1 block text-xs text-[#848b9b]">Variable Name</label>
             <input
               type="text"
               value={field.variable_name}
               onChange={(e) => onUpdate({ variable_name: e.target.value.toLowerCase().replace(/[^a-z0-9_]/g, '') })}
               placeholder="e.g. server_name"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm font-mono text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm font-mono text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
-            <p className="mt-0.5 text-[10px] text-muted-foreground">Used as [VAR:{field.variable_name}]</p>
+            <p className="mt-0.5 text-[10px] text-[#848b9b]">Used as [VAR:{field.variable_name}]</p>
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-muted-foreground">Placeholder</label>
+            <label className="mb-1 block text-xs text-[#848b9b]">Placeholder</label>
             <input
               type="text"
               value={field.placeholder || ''}
               onChange={(e) => onUpdate({ placeholder: e.target.value || undefined })}
               placeholder="Hint text"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div className="col-span-2">
-            <label className="mb-1 block text-xs text-muted-foreground">Help Text</label>
+            <label className="mb-1 block text-xs text-[#848b9b]">Help Text</label>
             <input
               type="text"
               value={field.help_text || ''}
               onChange={(e) => onUpdate({ help_text: e.target.value || undefined })}
               placeholder="Description or instructions"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-muted-foreground">Default Value</label>
+            <label className="mb-1 block text-xs text-[#848b9b]">Default Value</label>
             <input
               type="text"
               value={field.default_value || ''}
               onChange={(e) => onUpdate({ default_value: e.target.value || undefined })}
               placeholder="Pre-filled value"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           <div>
-            <label className="mb-1 block text-xs text-muted-foreground">Group Name</label>
+            <label className="mb-1 block text-xs text-[#848b9b]">Group Name</label>
             <input
               type="text"
               value={field.group_name || ''}
               onChange={(e) => onUpdate({ group_name: e.target.value || undefined })}
               placeholder="e.g. Network Settings"
-              className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+              className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
             />
           </div>
 
           {needsOptions && (
             <div className="col-span-2">
-              <label className="mb-1 block text-xs text-muted-foreground">Options (one per line)</label>
+              <label className="mb-1 block text-xs text-[#848b9b]">Options (one per line)</label>
               <textarea
                 value={(field.options || []).join('\n')}
                 onChange={(e) => {
@@ -144,7 +144,7 @@ export function IntakeFieldEditor({ field, onUpdate, onRemove }: IntakeFieldEdit
                 }}
                 placeholder="Option 1&#10;Option 2&#10;Option 3"
                 rows={3}
-                className="w-full rounded border border-border bg-card px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
           )}
diff --git a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
index 7efc9910..9e36984f 100644
--- a/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
+++ b/frontend/src/components/procedural-editor/IntakeFormBuilder.tsx
@@ -10,7 +10,7 @@ export function IntakeFormBuilder() {
       <div className="mb-3 flex items-center justify-end">
         <button
           onClick={addField}
-          className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         >
           <Plus className="h-3.5 w-3.5" />
           Add Field
@@ -18,10 +18,10 @@ export function IntakeFormBuilder() {
       </div>
 
       {intakeForm.length === 0 ? (
-        <div className="rounded-lg border border-dashed border-border bg-white/2 py-8 text-center">
-          <FileText className="mx-auto mb-2 h-8 w-8 text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">No intake form fields yet</p>
-          <p className="mt-1 text-xs text-muted-foreground">
+        <div className="rounded-lg border border-dashed border-[#1e2130] bg-white/2 py-8 text-center">
+          <FileText className="mx-auto mb-2 h-8 w-8 text-[#848b9b]" />
+          <p className="text-sm text-[#848b9b]">No intake form fields yet</p>
+          <p className="mt-1 text-xs text-[#848b9b]">
             Add fields to collect project data before the procedure starts
           </p>
         </div>
diff --git a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
index ee94d36c..93aea285 100644
--- a/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
+++ b/frontend/src/components/procedural-editor/MaintenanceScheduleSection.tsx
@@ -142,7 +142,7 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
 
   if (isLoading) {
     return (
-      <div className="py-3 text-sm text-muted-foreground">Loading schedule...</div>
+      <div className="py-3 text-sm text-[#848b9b]">Loading schedule...</div>
     )
   }
 
@@ -150,11 +150,11 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
     <div className="space-y-4">
       {/* Frequency */}
       <div>
-        <label className="mb-1 block text-sm font-medium text-muted-foreground">Frequency</label>
+        <label className="mb-1 block text-sm font-medium text-[#848b9b]">Frequency</label>
         <select
           value={frequency}
           onChange={(e) => setFrequency(e.target.value)}
-          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {FREQUENCY_OPTIONS.map(opt => (
             <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -165,36 +165,36 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
       {/* Time */}
       <div className="grid grid-cols-2 gap-4">
         <div>
-          <label className="mb-1 block text-sm font-medium text-muted-foreground">Hour</label>
+          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Hour</label>
           <input
             type="number"
             min={0}
             max={23}
             value={hour}
             onChange={(e) => setHour(Number(e.target.value))}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
         <div>
-          <label className="mb-1 block text-sm font-medium text-muted-foreground">Minute</label>
+          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Minute</label>
           <input
             type="number"
             min={0}
             max={59}
             value={minute}
             onChange={(e) => setMinute(Number(e.target.value))}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
 
       {/* Timezone */}
       <div>
-        <label className="mb-1 block text-sm font-medium text-muted-foreground">Timezone</label>
+        <label className="mb-1 block text-sm font-medium text-[#848b9b]">Timezone</label>
         <select
           value={timezone}
           onChange={(e) => setTimezone(e.target.value)}
-          className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
         >
           {TIMEZONE_OPTIONS.map(tz => (
             <option key={tz} value={tz}>{tz}</option>
@@ -205,11 +205,11 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
       {/* Target List */}
       {targetLists.length > 0 && (
         <div>
-          <label className="mb-1 block text-sm font-medium text-muted-foreground">Target List (optional)</label>
+          <label className="mb-1 block text-sm font-medium text-[#848b9b]">Target List (optional)</label>
           <select
             value={selectedTargetListId}
             onChange={(e) => setSelectedTargetListId(e.target.value)}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           >
             <option value="">None — manual targets only</option>
             {targetLists.map(tl => (
@@ -226,15 +226,15 @@ export function MaintenanceScheduleSection({ treeId, onScheduleLoaded }: Mainten
         className={cn(
           'flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
           treeId
-            ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
-            : 'cursor-not-allowed border border-border bg-card text-muted-foreground opacity-50'
+            ? 'bg-[#22d3ee] text-white hover:brightness-110'
+            : 'cursor-not-allowed border border-[#1e2130] bg-[#14161d] text-[#848b9b] opacity-50'
         )}
       >
         <Clock className="h-4 w-4" />
         {isSaving ? 'Saving...' : schedule ? 'Update Schedule' : 'Create Schedule'}
       </button>
       {!treeId && (
-        <p className="text-xs text-muted-foreground">Save the flow first to configure a schedule.</p>
+        <p className="text-xs text-[#848b9b]">Save the flow first to configure a schedule.</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/procedural-editor/StepEditor.tsx b/frontend/src/components/procedural-editor/StepEditor.tsx
index 39d4506a..7d090316 100644
--- a/frontend/src/components/procedural-editor/StepEditor.tsx
+++ b/frontend/src/components/procedural-editor/StepEditor.tsx
@@ -6,7 +6,7 @@ import { FallbackSteps } from '@/components/procedural/FallbackSteps'
 
 const CONTENT_TYPE_OPTIONS: { value: StepContentType; label: string; color: string }[] = [
   { value: 'action', label: 'Action', color: 'text-blue-400' },
-  { value: 'informational', label: 'Info', color: 'text-muted-foreground' },
+  { value: 'informational', label: 'Info', color: 'text-[#848b9b]' },
   { value: 'verification', label: 'Verify', color: 'text-emerald-400' },
   { value: 'warning', label: 'Warning', color: 'text-yellow-400' },
 ]
@@ -25,24 +25,24 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   // Section header steps get a minimal editor
   if (step.type === 'section_header') {
     return (
-      <div className="bg-card border border-border rounded-xl p-4">
+      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
         <div className="mb-4 flex items-center justify-between">
-          <span className="text-sm font-medium text-muted-foreground">Edit Section Header</span>
+          <span className="text-sm font-medium text-[#848b9b]">Edit Section Header</span>
           <button
             onClick={onCollapse}
-            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <ChevronUp className="h-4 w-4" />
           </button>
         </div>
         <div>
-          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
+          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
             placeholder="Section title"
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       </div>
@@ -50,18 +50,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
   }
 
   return (
-    <div className="bg-card border border-border rounded-xl p-4">
+    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
       {/* Header */}
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-foreground">
+          <span className="flex h-6 w-6 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#e2e5eb]">
             {stepNumber}
           </span>
-          <span className="text-sm font-medium text-foreground">Edit Step</span>
+          <span className="text-sm font-medium text-[#e2e5eb]">Edit Step</span>
         </div>
         <button
           onClick={onCollapse}
-          className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         >
           <ChevronUp className="h-4 w-4" />
         </button>
@@ -70,18 +70,18 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
       <div className="space-y-4">
         {/* Title */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-muted-foreground">Title</label>
+          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Title</label>
           <input
             type="text"
             value={step.title}
             onChange={(e) => onUpdate({ title: e.target.value })}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Est. Minutes */}
         <div className="w-40">
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
             <Clock className="h-3 w-3" />
             Est. Minutes
           </label>
@@ -91,28 +91,28 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ estimated_minutes: e.target.value ? parseInt(e.target.value) : undefined })}
             placeholder="—"
             min={1}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
         {/* Description */}
         <div>
-          <label className="mb-1 block text-xs font-medium text-muted-foreground">Description / Instructions</label>
+          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Description / Instructions</label>
           <textarea
             value={step.description || ''}
             onChange={(e) => onUpdate({ description: e.target.value })}
             placeholder="Step instructions. Use [VAR:name] for variables."
             rows={4}
-            className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
           {availableVariables.length > 0 && (
             <div className="mt-1 flex flex-wrap gap-1">
-              <span className="text-[10px] text-muted-foreground">Variables:</span>
+              <span className="text-[10px] text-[#848b9b]">Variables:</span>
               {availableVariables.map((v) => (
                 <button
                   key={v.variable_name}
                   onClick={() => onUpdate({ description: (step.description || '') + `[VAR:${v.variable_name}]` })}
-                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground hover:bg-accent hover:text-muted-foreground"
+                  className="rounded bg-accent/50 px-1.5 py-0.5 font-mono text-[10px] text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
                 >
                   {v.variable_name}
                 </button>
@@ -123,7 +123,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
 
         {/* Commands */}
         <div>
-          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+          <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
             <Terminal className="h-3 w-3" />
             Commands (optional)
           </label>
@@ -132,7 +132,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             onChange={(e) => onUpdate({ commands: e.target.value || undefined })}
             placeholder="Install-WindowsFeature AD-Domain-Services -IncludeManagementTools"
             rows={3}
-            className="w-full rounded border border-border bg-card px-3 py-2 font-mono text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 font-mono text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -140,7 +140,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         <button
           type="button"
           onClick={() => setShowMore(!showMore)}
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-muted-foreground"
+          className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#848b9b]"
         >
           <Settings2 className="h-3 w-3" />
           More Options
@@ -148,10 +148,10 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
         </button>
 
         {showMore && (
-          <div className="space-y-4 border-t border-border pt-4">
+          <div className="space-y-4 border-t border-[#1e2130] pt-4">
             {/* Content Type */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-muted-foreground">Content Type</label>
+              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Content Type</label>
               <div className="flex gap-1">
                 {CONTENT_TYPE_OPTIONS.map((opt) => (
                   <button
@@ -161,7 +161,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                       'rounded px-2 py-1 text-xs font-medium transition-colors',
                       step.content_type === opt.value
                         ? 'bg-white/15 ' + opt.color
-                        : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
+                        : 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
                     )}
                   >
                     {opt.label}
@@ -182,27 +182,27 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   onChange={(e) => onUpdate({ warning_text: e.target.value || undefined })}
                   placeholder="Caution: This will restart the service..."
                   rows={2}
-                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
+                  className="w-full rounded border border-yellow-400/20 bg-yellow-400/5 px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-yellow-400/30 focus:outline-hidden focus:ring-1 focus:ring-yellow-400/20"
                 />
               </div>
             )}
 
             {/* Expected Outcome */}
             <div>
-              <label className="mb-1 block text-xs font-medium text-muted-foreground">Expected Outcome (optional)</label>
+              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Expected Outcome (optional)</label>
               <input
                 type="text"
                 value={step.expected_outcome || ''}
                 onChange={(e) => onUpdate({ expected_outcome: e.target.value || undefined })}
                 placeholder="Server should respond with..."
-                className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
 
             {/* Verification */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
                   <CheckSquare className="h-3 w-3" />
                   Verification Prompt (optional)
                 </label>
@@ -211,15 +211,15 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.verification_prompt || ''}
                   onChange={(e) => onUpdate({ verification_prompt: e.target.value || undefined })}
                   placeholder="Confirm the role was installed"
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div>
-                <label className="mb-1 block text-xs font-medium text-muted-foreground">Verification Type</label>
+                <label className="mb-1 block text-xs font-medium text-[#848b9b]">Verification Type</label>
                 <select
                   value={step.verification_type || ''}
                   onChange={(e) => onUpdate({ verification_type: e.target.value as 'checkbox' | 'text_input' || undefined })}
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 >
                   <option value="">None</option>
                   <option value="checkbox">Checkbox (confirm done)</option>
@@ -231,7 +231,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
             {/* Reference URL + Notes toggle */}
             <div className="grid grid-cols-2 gap-3">
               <div>
-                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-muted-foreground">
+                <label className="mb-1 flex items-center gap-1 text-xs font-medium text-[#848b9b]">
                   <ExternalLink className="h-3 w-3" />
                   Reference URL (optional)
                 </label>
@@ -240,16 +240,16 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                   value={step.reference_url || ''}
                   onChange={(e) => onUpdate({ reference_url: e.target.value || undefined })}
                   placeholder="https://learn.microsoft.com/..."
-                  className="w-full rounded border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                  className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                 />
               </div>
               <div className="flex items-end pb-1">
-                <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                <label className="flex items-center gap-2 text-sm text-[#848b9b]">
                   <input
                     type="checkbox"
                     checked={step.notes_enabled !== false}
                     onChange={(e) => onUpdate({ notes_enabled: e.target.checked })}
-                    className="rounded border-border"
+                    className="rounded border-[#1e2130]"
                   />
                   Allow tech notes
                 </label>
@@ -258,7 +258,7 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
 
             {/* Library Visibility — procedure_step nodes only */}
             {step.type === 'procedure_step' && <div>
-              <label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              <label htmlFor="library-visibility" className="mb-1.5 block text-xs font-medium text-[#848b9b]">
                 Library Visibility
               </label>
               <select
@@ -267,13 +267,13 @@ export function StepEditor({ step, stepNumber, onUpdate, onCollapse, availableVa
                 onChange={(e) => onUpdate({
                   library_visibility: e.target.value === '' ? undefined : e.target.value as 'team' | 'public'
                 })}
-                className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Inherit from flow</option>
                 <option value="team">Team only</option>
                 <option value="public">Public</option>
               </select>
-              <p className="mt-1 text-[10px] text-muted-foreground">
+              <p className="mt-1 text-[10px] text-[#848b9b]">
                 Controls visibility in the step library. Defaults to the flow's own visibility setting.
               </p>
             </div>}
diff --git a/frontend/src/components/procedural-editor/StepList.tsx b/frontend/src/components/procedural-editor/StepList.tsx
index 981d7dd6..6c8343cb 100644
--- a/frontend/src/components/procedural-editor/StepList.tsx
+++ b/frontend/src/components/procedural-editor/StepList.tsx
@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', label: 'Action' },
-  informational: { icon: Info, color: 'text-muted-foreground', label: 'Info' },
+  informational: { icon: Info, color: 'text-[#848b9b]', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', label: 'Verify' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', label: 'Warning' },
 }
@@ -104,9 +104,9 @@ export function StepList({ onStepContextMenu }: StepListProps) {
     <div>
       <div className="mb-4 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <Shield className="h-5 w-5 text-muted-foreground" />
-          <h2 className="text-lg font-semibold text-foreground">Steps</h2>
-          <span className="text-sm text-muted-foreground">
+          <Shield className="h-5 w-5 text-[#848b9b]" />
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">Steps</h2>
+          <span className="text-sm text-[#848b9b]">
             ({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
             {totalMinutes > 0 ? ` \u00b7 ~${totalMinutes} min` : ''})
           </span>
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
         <div className="flex items-center gap-2">
           <button
             onClick={() => addSectionHeader()}
-            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <SeparatorHorizontal className="h-3.5 w-3.5" />
             Add Section
           </button>
           <button
             onClick={() => addStep()}
-            className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1.5 rounded-md border border-[#1e2130] px-3 py-1.5 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <Plus className="h-3.5 w-3.5" />
             Add Step
@@ -138,17 +138,17 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <div
                     key={step.id}
-                    className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
+                    className="flex items-center gap-2 rounded-lg border border-dashed border-[#1e2130] bg-accent/50 px-3 py-2"
                   >
                     <CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
                     <input
                       type="text"
                       value={step.title}
                       onChange={(e) => updateStep(step.id, { title: e.target.value })}
-                      className="flex-1 bg-transparent text-sm text-muted-foreground focus:outline-hidden"
+                      className="flex-1 bg-transparent text-sm text-[#848b9b] focus:outline-hidden"
                       placeholder="Procedure Complete"
                     />
-                    <span className="text-[10px] text-muted-foreground">END</span>
+                    <span className="text-[10px] text-[#848b9b]">END</span>
                   </div>
                 )
               }
@@ -178,24 +178,24 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                 return (
                   <SortableStepWrapper key={step.id} id={step.id}>
                     {({ dragHandleProps }) => (
-                      <div className="group flex items-center gap-2 border-b border-border pb-1 pt-3" data-step-id={step.id}>
+                      <div className="group flex items-center gap-2 border-b border-[#1e2130] pb-1 pt-3" data-step-id={step.id}>
                         <button
                           type="button"
-                          className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
+                          className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
                           aria-label={`Drag to reorder section: ${step.title || 'Untitled Section'}`}
                           {...dragHandleProps}
                         >
                           <GripVertical className="h-4 w-4" />
                         </button>
                         <span
-                          className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
+                          className="min-w-0 flex-1 cursor-pointer text-xs font-semibold uppercase tracking-wider text-[#848b9b] hover:text-[#848b9b]"
                           onClick={() => setExpandedStepId(step.id)}
                         >
                           {step.title || 'Untitled Section'}
                         </span>
                         <button
                           onClick={() => removeStep(step.id)}
-                          className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                          className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
@@ -237,7 +237,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                   {({ dragHandleProps }) => (
                     <div
                       className={cn(
-                        'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
+                        'group flex flex-col rounded-xl border border-[#1e2130] px-3 py-2.5 transition-colors',
                         'hover:border-primary/30 hover:bg-accent/50',
                         isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
                       )}
@@ -247,14 +247,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                       <div className="flex items-center gap-2">
                         <button
                           type="button"
-                          className="shrink-0 cursor-grab touch-none text-muted-foreground active:cursor-grabbing"
+                          className="shrink-0 cursor-grab touch-none text-[#848b9b] active:cursor-grabbing"
                           aria-label={`Drag to reorder step ${stepNumber}: ${step.title || 'Untitled step'}`}
                           {...dragHandleProps}
                         >
                           <GripVertical className="h-4 w-4" />
                         </button>
 
-                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
+                        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-[#848b9b]">
                           {stepNumber}
                         </span>
 
@@ -263,35 +263,35 @@ export function StepList({ onStepContextMenu }: StepListProps) {
                         </span>
 
                         <span
-                          className="min-w-0 flex-1 cursor-pointer truncate text-sm text-foreground"
+                          className="min-w-0 flex-1 cursor-pointer truncate text-sm text-[#e2e5eb]"
                           onClick={() => setExpandedStepId(step.id)}
                         >
                           {step.title || 'Untitled step'}
                         </span>
 
                         {step.estimated_minutes && (
-                          <span className="shrink-0 text-[10px] text-muted-foreground">
+                          <span className="shrink-0 text-[10px] text-[#848b9b]">
                             ~{step.estimated_minutes}m
                           </span>
                         )}
 
                         <button
                           onClick={() => setExpandedStepId(step.id)}
-                          className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                          className="shrink-0 rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
                         >
                           <ChevronDown className="h-3.5 w-3.5" />
                         </button>
 
                         <button
                           onClick={() => removeStep(step.id)}
-                          className="shrink-0 rounded p-1 text-muted-foreground opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
+                          className="shrink-0 rounded p-1 text-[#848b9b] opacity-0 hover:bg-red-500/20 hover:text-red-400 group-hover:opacity-100"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
                         </button>
                       </div>
 
                       {isGhost && (
-                        <div className="mt-2 flex gap-2 border-t border-border/50 pt-2">
+                        <div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2">
                           <button
                             onClick={(e) => {
                               e.stopPropagation()
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
       {/* Add step button at bottom */}
       <button
         onClick={() => addStep()}
-        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
+        className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-[#1e2130] py-2 text-sm text-[#848b9b] transition-colors hover:border-primary/30 hover:text-[#848b9b]"
       >
         <Plus className="h-3.5 w-3.5" />
         Add Step
diff --git a/frontend/src/components/procedural/CompletionSummary.tsx b/frontend/src/components/procedural/CompletionSummary.tsx
index 0f283c5e..5877331c 100644
--- a/frontend/src/components/procedural/CompletionSummary.tsx
+++ b/frontend/src/components/procedural/CompletionSummary.tsx
@@ -59,38 +59,38 @@ export function CompletionSummary({
         <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-emerald-400/10">
           <CheckCircle2 className="h-8 w-8 text-emerald-400" />
         </div>
-        <h1 className="text-2xl font-bold text-foreground">Procedure Complete</h1>
-        <p className="mt-1 text-muted-foreground">{treeName}</p>
+        <h1 className="text-2xl font-bold text-[#e2e5eb]">Procedure Complete</h1>
+        <p className="mt-1 text-[#848b9b]">{treeName}</p>
       </div>
 
       {/* Summary stats */}
       <div className="grid grid-cols-3 gap-3">
-        <div className="bg-card border border-border rounded-xl p-3 text-center">
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
           <CheckCircle2 className="mx-auto mb-1 h-5 w-5 text-emerald-400" />
-          <div className="text-lg font-semibold text-foreground">{procedureSteps.length}</div>
-          <div className="text-xs text-muted-foreground">Steps Completed</div>
+          <div className="text-lg font-semibold text-[#e2e5eb]">{procedureSteps.length}</div>
+          <div className="text-xs text-[#848b9b]">Steps Completed</div>
         </div>
-        <div className="bg-card border border-border rounded-xl p-3 text-center">
-          <Clock className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
-          <div className="text-lg font-semibold text-foreground">{formatTime(totalMinutes)}</div>
-          <div className="text-xs text-muted-foreground">Total Time</div>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
+          <Clock className="mx-auto mb-1 h-5 w-5 text-[#848b9b]" />
+          <div className="text-lg font-semibold text-[#e2e5eb]">{formatTime(totalMinutes)}</div>
+          <div className="text-xs text-[#848b9b]">Total Time</div>
         </div>
-        <div className="bg-card border border-border rounded-xl p-3 text-center">
-          <FileText className="mx-auto mb-1 h-5 w-5 text-muted-foreground" />
-          <div className="text-lg font-semibold text-foreground">{Object.keys(variables).length}</div>
-          <div className="text-xs text-muted-foreground">Parameters</div>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3 text-center">
+          <FileText className="mx-auto mb-1 h-5 w-5 text-[#848b9b]" />
+          <div className="text-lg font-semibold text-[#e2e5eb]">{Object.keys(variables).length}</div>
+          <div className="text-xs text-[#848b9b]">Parameters</div>
         </div>
       </div>
 
       {/* Project parameters */}
       {Object.keys(variables).length > 0 && (
-        <div className="bg-card border border-border rounded-xl p-4">
-          <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Project Parameters</h3>
+        <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+          <h3 className="mb-3 text-sm font-semibold text-[#848b9b]">Project Parameters</h3>
           <div className="space-y-1.5">
             {Object.entries(variables).map(([key, value]) => (
               <div key={key} className="flex items-baseline justify-between gap-4 text-sm">
-                <span className="font-mono text-muted-foreground">{key}</span>
-                <span className="text-right text-muted-foreground">{value}</span>
+                <span className="font-mono text-[#848b9b]">{key}</span>
+                <span className="text-right text-[#848b9b]">{value}</span>
               </div>
             ))}
           </div>
@@ -98,8 +98,8 @@ export function CompletionSummary({
       )}
 
       {/* Step details */}
-      <div className="bg-card border border-border rounded-xl p-4">
-        <h3 className="mb-3 text-sm font-semibold text-muted-foreground">Step Summary</h3>
+      <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
+        <h3 className="mb-3 text-sm font-semibold text-[#848b9b]">Step Summary</h3>
         <div className="space-y-2">
           {procedureSteps.map((step, index) => {
             const completion = completions.get(step.id)
@@ -108,15 +108,15 @@ export function CompletionSummary({
                 <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2">
-                    <span className="text-muted-foreground">
+                    <span className="text-[#848b9b]">
                       {index + 1}. {step.title}
                     </span>
                   </div>
                   {completion?.notes && (
-                    <p className="mt-0.5 text-xs text-muted-foreground">Note: {completion.notes}</p>
+                    <p className="mt-0.5 text-xs text-[#848b9b]">Note: {completion.notes}</p>
                   )}
                   {completion?.verificationValue && (
-                    <p className="mt-0.5 text-xs text-muted-foreground">
+                    <p className="mt-0.5 text-xs text-[#848b9b]">
                       Verified: {completion.verificationValue}
                     </p>
                   )}
diff --git a/frontend/src/components/procedural/FallbackSteps.tsx b/frontend/src/components/procedural/FallbackSteps.tsx
index 0f8ff8fa..815cbc1b 100644
--- a/frontend/src/components/procedural/FallbackSteps.tsx
+++ b/frontend/src/components/procedural/FallbackSteps.tsx
@@ -42,7 +42,7 @@ export function FallbackSteps({
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
-        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-amber-400/80 transition-colors"
+        className="flex items-center gap-2 text-sm text-[#848b9b] hover:text-amber-400/80 transition-colors"
       >
         <AlertCircle className="h-4 w-4 text-amber-400/80 shrink-0" />
         <span>{toggleLabel}</span>
@@ -64,7 +64,7 @@ export function FallbackSteps({
                   key={fbStep.id}
                   className={cn(
                     'rounded-lg border p-3 transition-colors',
-                    'bg-white/[0.02] border-border/50',
+                    'bg-white/[0.02] border-[#1e2130]/50',
                     isCompleted && 'border-emerald-500/30 bg-emerald-500/5'
                   )}
                 >
@@ -76,12 +76,12 @@ export function FallbackSteps({
                           value={fbStep.title}
                           onChange={(e) => onUpdate?.(index, { title: e.target.value })}
                           placeholder="Fallback step title"
-                          className="flex-1 rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="flex-1 rounded border border-[#1e2130] bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                         <button
                           type="button"
                           onClick={() => onRemove?.(index)}
-                          className="shrink-0 rounded p-1.5 text-muted-foreground hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
+                          className="shrink-0 rounded p-1.5 text-[#848b9b] hover:bg-rose-500/10 hover:text-rose-400 transition-colors"
                           title="Remove fallback step"
                         >
                           <Trash2 className="h-3.5 w-3.5" />
@@ -94,17 +94,17 @@ export function FallbackSteps({
                         }
                         placeholder="Describe this alternative approach..."
                         rows={2}
-                        className="w-full rounded border border-border bg-card px-2.5 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                        className="w-full rounded border border-[#1e2130] bg-[#14161d] px-2.5 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                       />
                     </div>
                   ) : (
                     // Execute mode
                     <div>
-                      <p className={cn('text-sm font-medium', isCompleted ? 'text-emerald-400' : 'text-foreground')}>
+                      <p className={cn('text-sm font-medium', isCompleted ? 'text-emerald-400' : 'text-[#e2e5eb]')}>
                         {fbStep.title}
                       </p>
                       {fbStep.description && (
-                        <p className="mt-1 text-xs text-muted-foreground">{fbStep.description}</p>
+                        <p className="mt-1 text-xs text-[#848b9b]">{fbStep.description}</p>
                       )}
                       {!isCompleted && (
                         <div className="mt-3 flex gap-2">
diff --git a/frontend/src/components/procedural/InlineVariablePrompt.tsx b/frontend/src/components/procedural/InlineVariablePrompt.tsx
index e516c243..c7a58424 100644
--- a/frontend/src/components/procedural/InlineVariablePrompt.tsx
+++ b/frontend/src/components/procedural/InlineVariablePrompt.tsx
@@ -88,7 +88,7 @@ export function InlineVariablePrompt({
           onBlur={() => {
             if (!value) setIsEditing(false)
           }}
-          className="rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+          className="rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-[#e2e5eb] shadow-[0_0_12px_rgba(6,182,212,0.15)] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
         >
           <option value="">{placeholder}</option>
           {options.map((opt) => (
@@ -117,10 +117,10 @@ export function InlineVariablePrompt({
           onBlur={handleSubmit}
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
-          className="w-48 rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-foreground shadow-[0_0_12px_rgba(6,182,212,0.15)] placeholder:text-muted-foreground focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
+          className="w-48 rounded-md border border-cyan-500/40 bg-cyan-500/5 px-2.5 py-1 text-sm text-[#e2e5eb] shadow-[0_0_12px_rgba(6,182,212,0.15)] placeholder:text-[#848b9b] focus:border-cyan-400 focus:outline-hidden focus:ring-1 focus:ring-cyan-400/30"
         />
         {helpText && (
-          <span className="absolute -bottom-5 left-0 text-[0.625rem] text-muted-foreground whitespace-nowrap">
+          <span className="absolute -bottom-5 left-0 text-[0.625rem] text-[#848b9b] whitespace-nowrap">
             {helpText}
           </span>
         )}
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index 0b61bd49..1a9f9cb4 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -72,10 +72,10 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
     const error = errors[field.variable_name]
 
     const baseInputClass = cn(
-      'w-full rounded-lg border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1',
+      'w-full rounded-lg border bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-hidden focus:ring-1',
       error
         ? 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20'
-        : 'border-border focus:border-primary focus:ring-primary/20'
+        : 'border-[#1e2130] focus:border-primary focus:ring-primary/20'
     )
 
     let input: React.ReactNode
@@ -112,9 +112,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
               type="checkbox"
               checked={value === 'true'}
               onChange={(e) => setValue(field.variable_name, e.target.checked ? 'true' : 'false')}
-              className="rounded border-border"
+              className="rounded border-[#1e2130]"
             />
-            <span className="text-sm text-muted-foreground">{field.placeholder || field.label}</span>
+            <span className="text-sm text-[#848b9b]">{field.placeholder || field.label}</span>
           </label>
         )
         break
@@ -162,9 +162,9 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
                         : [...selected, opt]
                       setValue(field.variable_name, next.join(','))
                     }}
-                    className="rounded border-border"
+                    className="rounded border-[#1e2130]"
                   />
-                  <span className="text-sm text-muted-foreground">{opt}</span>
+                  <span className="text-sm text-[#848b9b]">{opt}</span>
                 </label>
               )
             })}
@@ -198,12 +198,12 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
     return (
       <div key={field.variable_name}>
-        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-muted-foreground">
+        <label className="mb-1 flex items-center gap-1 text-sm font-medium text-[#848b9b]">
           {field.label}
           {field.required && <span className="text-red-400">*</span>}
         </label>
         {field.help_text && (
-          <p className="mb-1.5 text-xs text-muted-foreground">{field.help_text}</p>
+          <p className="mb-1.5 text-xs text-[#848b9b]">{field.help_text}</p>
         )}
         {input}
         {error && <p className="mt-1 text-xs text-red-400">{error}</p>}
@@ -212,13 +212,13 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4 bg-black/60 backdrop-blur-xs">
-      <div className="w-full max-w-full rounded-t-2xl border border-border bg-background shadow-xl sm:max-w-lg sm:rounded-2xl">
+    <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4 bg-black/60">
+      <div className="w-full max-w-full rounded-t-2xl border border-[#1e2130] bg-[#0c0d10] shadow-xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="border-b border-border px-6 py-4">
-          <h2 className="text-lg font-semibold text-foreground">Project Information</h2>
-          <p className="mt-0.5 text-sm text-muted-foreground">
-            Fill in the details for <span className="text-muted-foreground">{treeName}</span>
+        <div className="border-b border-[#1e2130] px-6 py-4">
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">Project Information</h2>
+          <p className="mt-0.5 text-sm text-[#848b9b]">
+            Fill in the details for <span className="text-[#848b9b]">{treeName}</span>
           </p>
         </div>
 
@@ -228,7 +228,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
             {Array.from(groups.entries()).map(([groupName, groupFields]) => (
               <div key={groupName}>
                 {groupName && (
-                  <h3 className="mb-3 border-b border-border pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  <h3 className="mb-3 border-b border-[#1e2130] pb-1 text-xs font-semibold uppercase tracking-wider text-[#848b9b]">
                     {groupName}
                   </h3>
                 )}
@@ -240,7 +240,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
+          <div className="flex items-center justify-end gap-2 border-t border-[#1e2130] px-6 py-4">
             <Button
               type="button"
               variant="secondary"
diff --git a/frontend/src/components/procedural/PrepareSessionModal.tsx b/frontend/src/components/procedural/PrepareSessionModal.tsx
index 32518758..9d2d72b7 100644
--- a/frontend/src/components/procedural/PrepareSessionModal.tsx
+++ b/frontend/src/components/procedural/PrepareSessionModal.tsx
@@ -89,17 +89,17 @@ export function PrepareSessionModal({
 
   return (
     <div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
-      <div className="absolute inset-0 bg-background/60 backdrop-blur-xs" onClick={onClose} />
-      <div className="relative w-full max-w-full rounded-t-2xl border border-border bg-card shadow-2xl sm:max-w-lg sm:rounded-2xl">
+      <div className="absolute inset-0 bg-[#0c0d10]/60" onClick={onClose} />
+      <div className="relative w-full max-w-full rounded-t-2xl border border-[#1e2130] bg-[#14161d] shadow-2xl sm:max-w-lg sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-5 py-4">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-5 py-4">
           <div className="flex items-center gap-2">
             <FileText className="h-4 w-4 text-cyan-400" />
-            <h3 className="text-sm font-semibold text-foreground">Prepare Session</h3>
+            <h3 className="text-sm font-semibold text-[#e2e5eb]">Prepare Session</h3>
           </div>
           <button
             onClick={onClose}
-            className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-lg p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <X className="h-4 w-4" />
           </button>
@@ -109,30 +109,30 @@ export function PrepareSessionModal({
         <div className="max-h-[70vh] overflow-y-auto p-4 space-y-5 sm:max-h-[60vh] sm:p-5">
           {/* Flow name */}
           <div className="rounded-lg bg-accent px-3 py-2">
-            <p className="text-xs text-muted-foreground">Flow</p>
-            <p className="text-sm font-medium text-foreground">{treeName}</p>
+            <p className="text-xs text-[#848b9b]">Flow</p>
+            <p className="text-sm font-medium text-[#e2e5eb]">{treeName}</p>
           </div>
 
           {/* Context fields */}
           <div className="space-y-3">
             <div>
-              <label className="mb-1 block text-xs font-medium text-muted-foreground">Ticket Number</label>
+              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Ticket Number</label>
               <input
                 type="text"
                 value={ticketNumber}
                 onChange={(e) => setTicketNumber(e.target.value)}
                 placeholder="e.g. TKT-12345"
-                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
             <div>
-              <label className="mb-1 block text-xs font-medium text-muted-foreground">Client Name</label>
+              <label className="mb-1 block text-xs font-medium text-[#848b9b]">Client Name</label>
               <input
                 type="text"
                 value={clientName}
                 onChange={(e) => setClientName(e.target.value)}
                 placeholder="e.g. Acme Corp"
-                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               />
             </div>
           </div>
@@ -140,14 +140,14 @@ export function PrepareSessionModal({
           {/* Assignee */}
           {teamMembers.length > 0 && (
             <div>
-              <label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+              <label className="mb-1 flex items-center gap-1.5 text-xs font-medium text-[#848b9b]">
                 <UserPlus className="h-3.5 w-3.5" />
                 Assign to Engineer
               </label>
               <select
                 value={assignedToId}
                 onChange={(e) => setAssignedToId(e.target.value)}
-                className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
               >
                 <option value="">Unassigned (visible to all)</option>
                 {teamMembers.map(m => (
@@ -160,17 +160,17 @@ export function PrepareSessionModal({
           {/* Intake form fields */}
           {intakeFields.length > 0 && (
             <div className="space-y-4">
-              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
                 Variables (optional — can be filled later)
               </h4>
               {Array.from(grouped.entries()).map(([groupName, fields]) => (
                 <div key={groupName} className="space-y-3">
                   {grouped.size > 1 && (
-                    <p className="text-xs font-medium text-muted-foreground">{groupName}</p>
+                    <p className="text-xs font-medium text-[#848b9b]">{groupName}</p>
                   )}
                   {fields.map(field => (
                     <div key={field.variable_name}>
-                      <label className="mb-1 block text-xs font-medium text-muted-foreground">
+                      <label className="mb-1 block text-xs font-medium text-[#848b9b]">
                         {field.label}
                         {field.required && <span className="ml-1 text-amber-400">*</span>}
                       </label>
@@ -178,7 +178,7 @@ export function PrepareSessionModal({
                         <select
                           value={values[field.variable_name] || ''}
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
-                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         >
                           <option value="">{field.placeholder || 'Select...'}</option>
                           {field.options.map(opt => (
@@ -191,7 +191,7 @@ export function PrepareSessionModal({
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
                           placeholder={field.placeholder}
                           rows={3}
-                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                       ) : (
                         <input
@@ -199,11 +199,11 @@ export function PrepareSessionModal({
                           value={values[field.variable_name] || ''}
                           onChange={(e) => handleFieldChange(field.variable_name, e.target.value)}
                           placeholder={field.placeholder}
-                          className="w-full rounded-md border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+                          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20"
                         />
                       )}
                       {field.help_text && (
-                        <p className="mt-1 text-[0.625rem] text-muted-foreground">{field.help_text}</p>
+                        <p className="mt-1 text-[0.625rem] text-[#848b9b]">{field.help_text}</p>
                       )}
                     </div>
                   ))}
@@ -214,10 +214,10 @@ export function PrepareSessionModal({
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-3 border-t border-border px-5 py-4">
+        <div className="flex items-center justify-end gap-3 border-t border-[#1e2130] px-5 py-4">
           <button
             onClick={onClose}
-            className="rounded-[10px] px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
+            className="rounded-lg px-4 py-2 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
           >
             Cancel
           </button>
@@ -225,8 +225,8 @@ export function PrepareSessionModal({
             onClick={handleSubmit}
             disabled={isSubmitting}
             className={cn(
-              'rounded-[10px] bg-gradient-brand px-4 py-2 text-sm font-semibold text-[#101114]',
-              'shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97]',
+              'rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
+              'hover:brightness-110 active:scale-[0.98]',
               'disabled:opacity-40'
             )}
           >
diff --git a/frontend/src/components/procedural/ProgressBar.tsx b/frontend/src/components/procedural/ProgressBar.tsx
index b5f1fbf9..7220ecd2 100644
--- a/frontend/src/components/procedural/ProgressBar.tsx
+++ b/frontend/src/components/procedural/ProgressBar.tsx
@@ -20,24 +20,24 @@ export function ProgressBar({ currentStep, totalSteps, elapsedMinutes, estimated
   return (
     <div className="space-y-1.5">
       <div className="flex items-center justify-between text-xs">
-        <span className="text-muted-foreground">
+        <span className="text-[#848b9b]">
           Step {currentStep} of {totalSteps}
         </span>
         <div className="flex items-center gap-3">
           {elapsedMinutes !== undefined && (
-            <span className="text-muted-foreground">
+            <span className="text-[#848b9b]">
               {formatTime(elapsed)}
               {estimatedTotalMinutes ? (
-                <span className="text-muted-foreground"> / est. {formatTime(estimatedTotalMinutes)}</span>
+                <span className="text-[#848b9b]"> / est. {formatTime(estimatedTotalMinutes)}</span>
               ) : null}
             </span>
           )}
-          <span className="font-medium text-muted-foreground">{percentage}%</span>
+          <span className="font-medium text-[#848b9b]">{percentage}%</span>
         </div>
       </div>
       <div className="h-1.5 overflow-hidden rounded-full bg-accent">
         <div
-          className="h-full rounded-full bg-gradient-brand transition-all duration-300"
+          className="h-full rounded-full bg-[#22d3ee] transition-all duration-300"
           style={{ width: `${percentage}%` }}
         />
       </div>
diff --git a/frontend/src/components/procedural/StepChecklist.tsx b/frontend/src/components/procedural/StepChecklist.tsx
index 3bdd4942..1c26d187 100644
--- a/frontend/src/components/procedural/StepChecklist.tsx
+++ b/frontend/src/components/procedural/StepChecklist.tsx
@@ -32,7 +32,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
         return (
           <div key={step.id}>
             {showSection && (
-              <div className="mb-1 mt-3 border-b border-border pb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground first:mt-0">
+              <div className="mb-1 mt-3 border-b border-[#1e2130] pb-1 text-[10px] font-semibold uppercase tracking-wider text-[#848b9b] first:mt-0">
                 {'section_header' in step ? step.section_header : undefined}
               </div>
             )}
@@ -40,17 +40,17 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
               onClick={() => onStepClick(index)}
               className={cn(
                 'flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors',
-                isCurrent && 'bg-accent text-foreground',
-                !isCurrent && isCompleted && 'text-muted-foreground',
-                !isCurrent && !isCompleted && 'text-muted-foreground hover:bg-accent/50'
+                isCurrent && 'bg-accent text-[#e2e5eb]',
+                !isCurrent && isCompleted && 'text-[#848b9b]',
+                !isCurrent && !isCompleted && 'text-[#848b9b] hover:bg-accent/50'
               )}
             >
               {isCompleted ? (
                 <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
               ) : isCurrent ? (
-                <ArrowRight className="h-4 w-4 shrink-0 text-foreground" />
+                <ArrowRight className="h-4 w-4 shrink-0 text-[#e2e5eb]" />
               ) : (
-                <Circle className="h-4 w-4 shrink-0 text-muted-foreground" />
+                <Circle className="h-4 w-4 shrink-0 text-[#848b9b]" />
               )}
               <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-accent text-[10px] font-medium">
                 {index + 1}
@@ -64,7 +64,7 @@ export function StepChecklist({ steps, currentStepIndex, completedStepIds, onSte
                 )}
               </span>
               {'estimated_minutes' in step && step.estimated_minutes && (
-                <span className="shrink-0 text-[10px] text-muted-foreground">~{step.estimated_minutes}m</span>
+                <span className="shrink-0 text-[10px] text-[#848b9b]">~{step.estimated_minutes}m</span>
               )}
             </button>
           </div>
diff --git a/frontend/src/components/procedural/StepDetail.tsx b/frontend/src/components/procedural/StepDetail.tsx
index 73b1bea3..2331d60a 100644
--- a/frontend/src/components/procedural/StepDetail.tsx
+++ b/frontend/src/components/procedural/StepDetail.tsx
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
 
 const contentTypeConfig: Record<StepContentType, { icon: typeof Zap; color: string; bg: string; label: string }> = {
   action: { icon: Zap, color: 'text-blue-400', bg: 'bg-blue-400/10', label: 'Action' },
-  informational: { icon: Info, color: 'text-muted-foreground', bg: 'bg-accent', label: 'Info' },
+  informational: { icon: Info, color: 'text-[#848b9b]', bg: 'bg-accent', label: 'Info' },
   verification: { icon: CheckCircle2, color: 'text-emerald-400', bg: 'bg-emerald-400/10', label: 'Verification' },
   warning: { icon: AlertTriangle, color: 'text-yellow-400', bg: 'bg-yellow-400/10', label: 'Warning' },
 }
@@ -91,11 +91,11 @@ export function StepDetail({
     <div className="space-y-4">
       {/* Step header */}
       <div className="flex items-start gap-3">
-        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-foreground">
+        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-accent text-sm font-semibold text-[#e2e5eb]">
           {stepNumber}
         </span>
         <div className="min-w-0 flex-1">
-          <h2 className="text-lg font-semibold text-foreground">{step.title}</h2>
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">{step.title}</h2>
           <div className="mt-1 flex items-center gap-2">
             {isCustom ? (
               <span className="inline-flex items-center gap-1 rounded-full bg-amber-400/15 px-2 py-0.5 text-xs text-amber-400">
@@ -107,11 +107,11 @@ export function StepDetail({
                 {config.label}
               </span>
             )}
-            <span className="text-xs text-muted-foreground">
+            <span className="text-xs text-[#848b9b]">
               Step {stepNumber} of {totalSteps}
             </span>
             {'estimated_minutes' in step && step.estimated_minutes && (
-              <span className="text-xs text-muted-foreground">~{step.estimated_minutes} min</span>
+              <span className="text-xs text-[#848b9b]">~{step.estimated_minutes} min</span>
             )}
           </div>
         </div>
@@ -134,7 +134,7 @@ export function StepDetail({
 
       {/* Description */}
       {step.description && (
-        <div className="prose prose-invert prose-sm max-w-none text-muted-foreground">
+        <div className="prose prose-invert prose-sm max-w-none text-[#848b9b]">
           <p className="whitespace-pre-wrap">
             <ResolvedText
               text={step.description}
@@ -150,14 +150,14 @@ export function StepDetail({
       {commandBlocks.length > 0 && (
         <div className="space-y-3">
           {commandBlocks.map((cmd, i) => (
-            <div key={i} className="rounded-lg border border-border bg-card">
-              <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
-                <span className="text-xs font-medium text-muted-foreground">
+            <div key={i} className="rounded-lg border border-[#1e2130] bg-[#14161d]">
+              <div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-1.5">
+                <span className="text-xs font-medium text-[#848b9b]">
                   {cmd.label || (cmd.language ? cmd.language : 'Command')}
                 </span>
                 <button
                   onClick={() => handleCopyCommand(cmd.code, i)}
-                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+                  className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
                 >
                   {copiedIndex === i ? <Check className="h-3 w-3 text-emerald-400" /> : <Copy className="h-3 w-3" />}
                   {copiedIndex === i ? 'Copied' : 'Copy'}
@@ -178,37 +178,37 @@ export function StepDetail({
 
       {/* Expected outcome */}
       {'expected_outcome' in step && step.expected_outcome && (
-        <div className="rounded-lg border border-border bg-white/2 p-3">
-          <h4 className="mb-1 text-xs font-medium text-muted-foreground">Expected Outcome</h4>
-          <p className="text-sm text-muted-foreground">{resolve(step.expected_outcome)}</p>
+        <div className="rounded-lg border border-[#1e2130] bg-white/2 p-3">
+          <h4 className="mb-1 text-xs font-medium text-[#848b9b]">Expected Outcome</h4>
+          <p className="text-sm text-[#848b9b]">{resolve(step.expected_outcome)}</p>
         </div>
       )}
 
       {/* Verification */}
       {verificationPrompt && (
-        <div className="rounded-lg border border-border bg-white/2 p-3">
-          <h4 className="mb-2 text-xs font-medium text-muted-foreground">Verification</h4>
+        <div className="rounded-lg border border-[#1e2130] bg-white/2 p-3">
+          <h4 className="mb-2 text-xs font-medium text-[#848b9b]">Verification</h4>
           {verificationType === 'checkbox' ? (
-            <label className="flex items-center gap-2 text-sm text-muted-foreground">
+            <label className="flex items-center gap-2 text-sm text-[#848b9b]">
               <input
                 type="checkbox"
                 checked={!!verificationValue}
                 onChange={(e) => onVerificationChange(e.target.checked ? 'confirmed' : '')}
                 disabled={isCompleted}
-                className="rounded border-border"
+                className="rounded border-[#1e2130]"
               />
               {resolve(verificationPrompt)}
             </label>
           ) : (
             <div>
-              <p className="mb-2 text-sm text-muted-foreground">{resolve(verificationPrompt)}</p>
+              <p className="mb-2 text-sm text-[#848b9b]">{resolve(verificationPrompt)}</p>
               <input
                 type="text"
                 value={verificationValue}
                 onChange={(e) => onVerificationChange(e.target.value)}
                 disabled={isCompleted}
                 placeholder="Enter observed value..."
-                className="w-full rounded border border-border bg-card px-3 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
+                className="w-full rounded border border-[#1e2130] bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20 disabled:opacity-50"
               />
             </div>
           )}
@@ -218,13 +218,13 @@ export function StepDetail({
       {/* Notes */}
       {(!('notes_enabled' in step) || step.notes_enabled !== false) && (
         <div>
-          <label className="mb-1 block text-xs font-medium text-muted-foreground">Notes</label>
+          <label className="mb-1 block text-xs font-medium text-[#848b9b]">Notes</label>
           <textarea
             value={notes}
             onChange={(e) => onNotesChange(e.target.value)}
             placeholder="Add notes for this step..."
             rows={2}
-            className="w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
           />
         </div>
       )}
@@ -235,7 +235,7 @@ export function StepDetail({
           href={resolve(step.reference_url)}
           target="_blank"
           rel="noopener noreferrer"
-          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+          className="inline-flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb]"
         >
           <ExternalLink className="h-3.5 w-3.5" />
           Reference Documentation
@@ -251,7 +251,7 @@ export function StepDetail({
             'flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium transition-colors',
             isCompleted
               ? 'bg-emerald-400/10 text-emerald-400'
-              : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90 disabled:opacity-40 disabled:hover:opacity-100'
+              : 'bg-[#22d3ee] text-white hover:brightness-110 disabled:opacity-40 disabled:hover:opacity-100'
           )}
         >
           {isCompleted ? (
diff --git a/frontend/src/components/public/FlowTemplateCard.tsx b/frontend/src/components/public/FlowTemplateCard.tsx
index b1631f31..5f1fdc2b 100644
--- a/frontend/src/components/public/FlowTemplateCard.tsx
+++ b/frontend/src/components/public/FlowTemplateCard.tsx
@@ -18,19 +18,19 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
     <button
       type="button"
       onClick={onClick}
-      className="glass-card text-left w-full flex flex-col gap-3 p-5"
+      className="card-interactive text-left w-full flex flex-col gap-3 p-5"
     >
       <div className="flex items-start justify-between gap-2">
-        <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
+        <h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
           {template.name}
         </h3>
         <span className="shrink-0">
-          <GitBranch className="w-4 h-4 text-muted-foreground" />
+          <GitBranch className="w-4 h-4 text-[#848b9b]" />
         </span>
       </div>
 
       {template.description && (
-        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
+        <p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
           {template.description}
         </p>
       )}
@@ -40,33 +40,33 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
           {template.tags.slice(0, 3).map((tag) => (
             <span
               key={tag}
-              className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
             >
               {tag}
             </span>
           ))}
           {template.tags.length > 3 && (
-            <span className="font-label text-[0.625rem] text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
               +{template.tags.length - 3}
             </span>
           )}
         </div>
       )}
 
-      <div className="flex items-center gap-4 mt-auto pt-2 border-t border-border">
+      <div className="flex items-center gap-4 mt-auto pt-2 border-t border-[#1e2130]">
         {template.category && (
-          <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+          <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
             {template.category}
           </span>
         )}
-        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground flex items-center gap-1">
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] flex items-center gap-1">
           <Layers className="w-3 h-3" />
           {template.step_count} steps
         </span>
         {template.success_rate !== null && (
           <span
             className={cn(
-              'font-label text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
+              'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] flex items-center gap-1 ml-auto',
               template.success_rate >= 80
                 ? 'text-emerald-400'
                 : template.success_rate >= 50
@@ -82,12 +82,12 @@ export function FlowTemplateCard({ template, onClick }: FlowTemplateCardProps) {
 
       <div className="flex items-center justify-between">
         <span className={cn(
-          'font-label text-[0.625rem] px-2 py-0.5 rounded-md border',
-          'bg-primary/5 border-primary/20 text-primary'
+          'font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md border',
+          'bg-primary/5 border-primary/20 text-[#22d3ee]'
         )}>
           {typeLabels[template.tree_type] || template.tree_type}
         </span>
-        <span className="font-label text-[0.625rem] text-[#5a6170]">
+        <span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
           {template.usage_count.toLocaleString()} uses
         </span>
       </div>
diff --git a/frontend/src/components/public/ScriptTemplateCard.tsx b/frontend/src/components/public/ScriptTemplateCard.tsx
index 9fb69a16..89c9c645 100644
--- a/frontend/src/components/public/ScriptTemplateCard.tsx
+++ b/frontend/src/components/public/ScriptTemplateCard.tsx
@@ -18,24 +18,24 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
     <button
       type="button"
       onClick={onClick}
-      className="glass-card text-left w-full flex flex-col gap-3 p-5"
+      className="card-interactive text-left w-full flex flex-col gap-3 p-5"
     >
       <div className="flex items-start justify-between gap-2">
         <div className="flex items-center gap-2 min-w-0">
-          <h3 className="font-heading text-foreground text-base font-semibold leading-tight line-clamp-2">
+          <h3 className="font-heading text-[#e2e5eb] text-base font-semibold leading-tight line-clamp-2">
             {template.name}
           </h3>
           {template.is_verified && (
-            <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
+            <CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
           )}
         </div>
         <span className="shrink-0">
-          <Terminal className="w-4 h-4 text-muted-foreground" />
+          <Terminal className="w-4 h-4 text-[#848b9b]" />
         </span>
       </div>
 
       {template.description && (
-        <p className="text-muted-foreground text-sm leading-relaxed line-clamp-2">
+        <p className="text-[#848b9b] text-sm leading-relaxed line-clamp-2">
           {template.description}
         </p>
       )}
@@ -45,31 +45,31 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
           {template.tags.slice(0, 3).map((tag) => (
             <span
               key={tag}
-              className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+              className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
             >
               {tag}
             </span>
           ))}
           {template.tags.length > 3 && (
-            <span className="font-label text-[0.625rem] text-muted-foreground">
+            <span className="font-sans text-xs text-[0.625rem] text-[#848b9b]">
               +{template.tags.length - 3}
             </span>
           )}
         </div>
       )}
 
-      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-border">
+      <div className="flex items-center gap-3 mt-auto pt-2 border-t border-[#1e2130]">
         {template.complexity && (
           <span
             className={cn(
-              'font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
-              complexityColors[template.complexity] || 'text-muted-foreground border-border bg-card'
+              'font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md border',
+              complexityColors[template.complexity] || 'text-[#848b9b] border-[#1e2130] bg-[#14161d]'
             )}
           >
             {template.complexity}
           </span>
         )}
-        <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+        <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
           {template.parameter_count} param{template.parameter_count !== 1 ? 's' : ''}
         </span>
         {template.requires_elevation && (
@@ -82,7 +82,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
           {template.requires_modules.slice(0, 2).map((mod) => (
             <span
               key={mod}
-              className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
+              className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
             >
               <Package className="w-3 h-3" />
               {mod}
@@ -92,7 +92,7 @@ export function ScriptTemplateCard({ template, onClick }: ScriptTemplateCardProp
       )}
 
       <div className="flex items-center justify-end">
-        <span className="font-label text-[0.625rem] text-[#5a6170]">
+        <span className="font-sans text-xs text-[0.625rem] text-[#5a6170]">
           {template.usage_count.toLocaleString()} uses
         </span>
       </div>
diff --git a/frontend/src/components/public/TemplateDetailModal.tsx b/frontend/src/components/public/TemplateDetailModal.tsx
index 64dea909..3f3c2a64 100644
--- a/frontend/src/components/public/TemplateDetailModal.tsx
+++ b/frontend/src/components/public/TemplateDetailModal.tsx
@@ -58,29 +58,29 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
       onClick={onClose}
     >
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div className="absolute inset-0 bg-black/60" />
 
       {/* Modal */}
       <div
-        className="glass-card-static relative w-full max-w-2xl max-h-[85vh] flex flex-col"
+        className="card-flat relative w-full max-w-2xl max-h-[85vh] flex flex-col"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
-        <div className="flex items-start justify-between gap-4 p-6 border-b border-border">
+        <div className="flex items-start justify-between gap-4 p-6 border-b border-[#1e2130]">
           <div className="flex items-center gap-3 min-w-0">
             {type === 'flow' ? (
-              <GitBranch className="w-5 h-5 text-primary shrink-0" />
+              <GitBranch className="w-5 h-5 text-[#22d3ee] shrink-0" />
             ) : (
-              <Terminal className="w-5 h-5 text-primary shrink-0" />
+              <Terminal className="w-5 h-5 text-[#22d3ee] shrink-0" />
             )}
             <div className="min-w-0">
-              <h2 className="font-heading text-foreground text-xl font-semibold leading-tight flex items-center gap-2">
+              <h2 className="font-heading text-[#e2e5eb] text-xl font-semibold leading-tight flex items-center gap-2">
                 {template.name}
                 {type === 'script' && (template as PublicScriptDetail).is_verified && (
-                  <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
+                  <CheckCircle2 className="w-4 h-4 text-[#22d3ee] shrink-0" />
                 )}
               </h2>
-              <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mt-1">
+              <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mt-1">
                 {type === 'flow' ? 'Flow Template' : 'Script Template'}
               </p>
             </div>
@@ -88,7 +88,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           <button
             type="button"
             onClick={onClose}
-            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-[rgba(255,255,255,0.04)] transition-colors"
+            className="p-1.5 rounded-lg text-[#848b9b] hover:text-[#e2e5eb] hover:bg-[rgba(255,255,255,0.04)] transition-colors"
           >
             <X className="w-5 h-5" />
           </button>
@@ -97,7 +97,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
         {/* Body */}
         <div className="flex-1 overflow-y-auto p-6 space-y-6">
           {template.description && (
-            <p className="text-muted-foreground text-sm leading-relaxed">
+            <p className="text-[#848b9b] text-sm leading-relaxed">
               {template.description}
             </p>
           )}
@@ -139,7 +139,7 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
                     value={(template as PublicScriptDetail).complexity!}
                     valueClassName={
                       complexityColors[(template as PublicScriptDetail).complexity!] ||
-                      'text-foreground'
+                      'text-[#e2e5eb]'
                     }
                   />
                 )}
@@ -161,14 +161,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Tags */}
           {template.tags.length > 0 && (
             <div>
-              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
                 Tags
               </h4>
               <div className="flex flex-wrap gap-1.5">
                 {template.tags.map((tag) => (
                   <span
                     key={tag}
-                    className="font-label text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground"
+                    className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b]"
                   >
                     {tag}
                   </span>
@@ -180,10 +180,10 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Flow preview structure */}
           {type === 'flow' && (template as PublicFlowDetail).preview_structure && (
             <div>
-              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
                 Flow Preview
               </h4>
-              <div className="bg-card border border-border rounded-xl p-4">
+              <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-4">
                 <PreviewTree structure={(template as PublicFlowDetail).preview_structure!} />
               </div>
             </div>
@@ -192,22 +192,22 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Script parameters */}
           {type === 'script' && (template as PublicScriptDetail).parameters.length > 0 && (
             <div>
-              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
                 Parameters
               </h4>
               <div className="space-y-2">
                 {(template as PublicScriptDetail).parameters.map((param) => (
                   <div
                     key={param.name}
-                    className="flex items-start gap-3 bg-card border border-border rounded-xl p-3"
+                    className="flex items-start gap-3 bg-[#14161d] border border-[#1e2130] rounded-xl p-3"
                   >
-                    <code className="font-label text-xs text-primary shrink-0">
+                    <code className="font-sans text-xs text-xs text-[#22d3ee] shrink-0">
                       {param.name}
                     </code>
-                    <span className="text-muted-foreground text-sm flex-1">
+                    <span className="text-[#848b9b] text-sm flex-1">
                       {param.description}
                     </span>
-                    <span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
+                    <span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#5a6170] shrink-0">
                       {param.type}
                     </span>
                   </div>
@@ -219,14 +219,14 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
           {/* Script modules */}
           {type === 'script' && (template as PublicScriptDetail).requires_modules.length > 0 && (
             <div>
-              <h4 className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-2">
+              <h4 className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-2">
                 Required Modules
               </h4>
               <div className="flex flex-wrap gap-1.5">
                 {(template as PublicScriptDetail).requires_modules.map((mod) => (
                   <span
                     key={mod}
-                    className="font-label text-[0.625rem] px-2 py-0.5 rounded-md bg-card border border-border text-muted-foreground flex items-center gap-1"
+                    className="font-sans text-xs text-[0.625rem] px-2 py-0.5 rounded-md bg-[#14161d] border border-[#1e2130] text-[#848b9b] flex items-center gap-1"
                   >
                     <Package className="w-3 h-3" />
                     {mod}
@@ -238,17 +238,17 @@ export function TemplateDetailModal(props: TemplateDetailModalProps) {
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between gap-4 p-6 border-t border-border">
+        <div className="flex items-center justify-between gap-4 p-6 border-t border-[#1e2130]">
           <button
             type="button"
             onClick={onClose}
-            className="px-4 py-2.5 rounded-[10px] text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground hover:border-[rgba(255,255,255,0.12)] transition-colors"
+            className="px-4 py-2.5 rounded-lg text-sm font-medium bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb] hover:border-[rgba(255,255,255,0.12)] transition-colors"
           >
             Close
           </button>
           <Link
             to="/register"
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-[10px] text-sm font-semibold bg-gradient-brand text-[#101114] shadow-lg shadow-primary/20 hover:opacity-90 active:scale-[0.97] transition-all"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold bg-[#22d3ee] text-white hover:brightness-110 active:scale-[0.98] transition-all"
           >
             Sign Up to Use This
             <ChevronRight className="w-4 h-4" />
@@ -271,11 +271,11 @@ function MetaStat({
   valueClassName?: string
 }) {
   return (
-    <div className="bg-card border border-border rounded-xl p-3">
-      <div className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-1">
+    <div className="bg-[#14161d] border border-[#1e2130] rounded-xl p-3">
+      <div className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-1">
         {label}
       </div>
-      <div className={cn('text-foreground text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
+      <div className={cn('text-[#e2e5eb] text-sm font-semibold flex items-center gap-1.5', valueClassName)}>
         {icon}
         {value}
       </div>
@@ -293,17 +293,17 @@ function PreviewTree({ structure }: { structure: Record<string, unknown> }) {
 
   return (
     <div className="text-sm">
-      <div className="flex items-center gap-2 text-foreground">
-        <ChevronRight className="w-3.5 h-3.5 text-primary" />
+      <div className="flex items-center gap-2 text-[#e2e5eb]">
+        <ChevronRight className="w-3.5 h-3.5 text-[#22d3ee]" />
         <span>{name}</span>
       </div>
       {children.length > 0 && (
-        <div className="ml-5 mt-1 space-y-1 border-l border-border pl-3">
+        <div className="ml-5 mt-1 space-y-1 border-l border-[#1e2130] pl-3">
           {children.slice(0, 8).map((child, i) => (
             <PreviewTree key={i} structure={child} />
           ))}
           {children.length > 8 && (
-            <span className="text-muted-foreground text-xs">
+            <span className="text-[#848b9b] text-xs">
               +{children.length - 8} more steps...
             </span>
           )}
diff --git a/frontend/src/components/script-editor/ParameterCard.tsx b/frontend/src/components/script-editor/ParameterCard.tsx
index a4abf0f8..7c784276 100644
--- a/frontend/src/components/script-editor/ParameterCard.tsx
+++ b/frontend/src/components/script-editor/ParameterCard.tsx
@@ -55,29 +55,29 @@ export function ParameterCard({
   }
 
   return (
-    <div className="border border-border rounded-xl overflow-hidden">
+    <div className="border border-[#1e2130] rounded-xl overflow-hidden">
       {/* Header */}
       <button
         type="button"
         onClick={() => setExpanded(v => !v)}
         className="w-full flex items-center gap-2 px-3 py-2.5 bg-white/[0.02] hover:bg-white/[0.04] transition-colors"
       >
-        <GripVertical size={14} className="text-muted-foreground/50 shrink-0" />
-        {expanded ? <ChevronDown size={14} className="text-muted-foreground" /> : <ChevronRight size={14} className="text-muted-foreground" />}
-        <span className="text-sm font-medium text-foreground flex-1 text-left">
+        <GripVertical size={14} className="text-[#848b9b]/50 shrink-0" />
+        {expanded ? <ChevronDown size={14} className="text-[#848b9b]" /> : <ChevronRight size={14} className="text-[#848b9b]" />}
+        <span className="text-sm font-medium text-[#e2e5eb] flex-1 text-left">
           {param.label || param.key || `Parameter ${index + 1}`}
         </span>
-        <span className="font-label text-[0.625rem] text-muted-foreground uppercase">{param.type}</span>
+        <span className="font-sans text-xs text-[0.625rem] text-[#848b9b] uppercase">{param.type}</span>
         {param.required && <span className="text-red-400 text-xs">*</span>}
       </button>
 
       {/* Body */}
       {expanded && (
-        <div className="px-3 py-3 space-y-3 border-t border-border">
+        <div className="px-3 py-3 space-y-3 border-t border-[#1e2130]">
           {/* Row 1: key + label */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Key (used in &#123;&#123;key&#125;&#125;)</label>
               <Input
                 value={param.key}
                 onChange={e => update({ key: e.target.value.replace(/[^a-zA-Z0-9_]/g, '') })}
@@ -86,7 +86,7 @@ export function ParameterCard({
               />
             </div>
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Label</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Label</label>
               <Input
                 value={param.label}
                 onChange={e => update({ label: e.target.value })}
@@ -99,12 +99,12 @@ export function ParameterCard({
           {/* Row 2: type + group */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Type</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Type</label>
               <select
                 value={param.type}
                 onChange={e => update({ type: e.target.value as ScriptParameter['type'] })}
                 disabled={disabled}
-                className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+                className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
               >
                 {PARAM_TYPES.map(t => (
                   <option key={t.value} value={t.value}>{t.label}</option>
@@ -112,7 +112,7 @@ export function ParameterCard({
               </select>
             </div>
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Group (optional)</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Group (optional)</label>
               <Input
                 value={param.group ?? ''}
                 onChange={e => update({ group: e.target.value || null })}
@@ -125,7 +125,7 @@ export function ParameterCard({
           {/* Row 3: placeholder + help text */}
           <div className="grid grid-cols-2 gap-3">
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Placeholder</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Placeholder</label>
               <Input
                 value={param.placeholder ?? ''}
                 onChange={e => update({ placeholder: e.target.value || null })}
@@ -134,7 +134,7 @@ export function ParameterCard({
               />
             </div>
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Help text</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Help text</label>
               <Input
                 value={param.help_text ?? ''}
                 onChange={e => update({ help_text: e.target.value || null })}
@@ -146,23 +146,23 @@ export function ParameterCard({
 
           {/* Row 4: toggles */}
           <div className="flex items-center gap-4">
-            <label className="flex items-center gap-2 text-sm text-foreground">
+            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
               <input
                 type="checkbox"
                 checked={param.required}
                 onChange={e => update({ required: e.target.checked })}
                 disabled={disabled}
-                className="rounded border-border"
+                className="rounded border-[#1e2130]"
               />
               Required
             </label>
-            <label className="flex items-center gap-2 text-sm text-foreground">
+            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
               <input
                 type="checkbox"
                 checked={param.sensitive}
                 onChange={e => update({ sensitive: e.target.checked })}
                 disabled={disabled}
-                className="rounded border-border"
+                className="rounded border-[#1e2130]"
               />
               Sensitive (redacted in logs)
             </label>
@@ -170,7 +170,7 @@ export function ParameterCard({
 
           {/* Default value */}
           <div>
-            <label className="text-xs text-muted-foreground mb-1 block">Default value</label>
+            <label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
             <Input
               value={param.default !== null && param.default !== undefined ? String(param.default) : ''}
               onChange={e => update({ default: e.target.value || null })}
@@ -182,7 +182,7 @@ export function ParameterCard({
           {/* Select options (only for select type) */}
           {param.type === 'select' && (
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Options</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Options</label>
               <div className="space-y-1.5">
                 {(param.options ?? []).map((opt, i) => (
                   <div key={i} className="flex items-center gap-2">
@@ -202,7 +202,7 @@ export function ParameterCard({
                       type="button"
                       onClick={() => removeOption(i)}
                       disabled={disabled}
-                      className="p-1 text-muted-foreground hover:text-rose-500 transition-colors"
+                      className="p-1 text-[#848b9b] hover:text-rose-500 transition-colors"
                     >
                       <X size={14} />
                     </button>
@@ -212,7 +212,7 @@ export function ParameterCard({
                   type="button"
                   onClick={addOption}
                   disabled={disabled}
-                  className="flex items-center gap-1 text-xs text-primary hover:underline"
+                  className="flex items-center gap-1 text-xs text-[#22d3ee] hover:underline"
                 >
                   <Plus size={12} /> Add option
                 </button>
@@ -223,12 +223,12 @@ export function ParameterCard({
           {/* Validation (for text/number types) */}
           {(param.type === 'text' || param.type === 'number' || param.type === 'textarea') && (
             <div>
-              <label className="text-xs text-muted-foreground mb-1 block">Validation (optional)</label>
+              <label className="text-xs text-[#848b9b] mb-1 block">Validation (optional)</label>
               <div className="grid grid-cols-3 gap-2">
                 {param.type === 'number' ? (
                   <>
                     <div>
-                      <label className="text-[0.625rem] text-muted-foreground">Min value</label>
+                      <label className="text-[0.625rem] text-[#848b9b]">Min value</label>
                       <Input
                         type="number"
                         value={param.validation?.min_value ?? ''}
@@ -237,7 +237,7 @@ export function ParameterCard({
                       />
                     </div>
                     <div>
-                      <label className="text-[0.625rem] text-muted-foreground">Max value</label>
+                      <label className="text-[0.625rem] text-[#848b9b]">Max value</label>
                       <Input
                         type="number"
                         value={param.validation?.max_value ?? ''}
@@ -249,7 +249,7 @@ export function ParameterCard({
                 ) : (
                   <>
                     <div>
-                      <label className="text-[0.625rem] text-muted-foreground">Min length</label>
+                      <label className="text-[0.625rem] text-[#848b9b]">Min length</label>
                       <Input
                         type="number"
                         value={param.validation?.min_length ?? ''}
@@ -258,7 +258,7 @@ export function ParameterCard({
                       />
                     </div>
                     <div>
-                      <label className="text-[0.625rem] text-muted-foreground">Max length</label>
+                      <label className="text-[0.625rem] text-[#848b9b]">Max length</label>
                       <Input
                         type="number"
                         value={param.validation?.max_length ?? ''}
@@ -269,7 +269,7 @@ export function ParameterCard({
                   </>
                 )}
                 <div>
-                  <label className="text-[0.625rem] text-muted-foreground">Pattern (regex)</label>
+                  <label className="text-[0.625rem] text-[#848b9b]">Pattern (regex)</label>
                   <Input
                     value={param.validation?.pattern ?? ''}
                     onChange={e => updateValidation({ pattern: e.target.value || undefined })}
@@ -282,13 +282,13 @@ export function ParameterCard({
           )}
 
           {/* Actions row */}
-          <div className="flex items-center justify-between pt-1 border-t border-border">
+          <div className="flex items-center justify-between pt-1 border-t border-[#1e2130]">
             <div className="flex items-center gap-1">
               <button
                 type="button"
                 onClick={() => onMoveUp(index)}
                 disabled={isFirst || disabled}
-                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
+                className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
               >
                 ↑ Up
               </button>
@@ -296,7 +296,7 @@ export function ParameterCard({
                 type="button"
                 onClick={() => onMoveDown(index)}
                 disabled={isLast || disabled}
-                className="text-xs text-muted-foreground hover:text-foreground disabled:opacity-30 px-1.5 py-0.5"
+                className="text-xs text-[#848b9b] hover:text-[#e2e5eb] disabled:opacity-30 px-1.5 py-0.5"
               >
                 ↓ Down
               </button>
diff --git a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
index 68e54cef..4e04d05b 100644
--- a/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
+++ b/frontend/src/components/script-editor/ParameterDetectorStepper.tsx
@@ -107,7 +107,7 @@ export function ParameterDetectorStepper({
     <div className="border border-primary/20 rounded-xl bg-primary/[0.03] p-4 space-y-3">
       {/* Progress */}
       <div className="flex items-center justify-between">
-        <p className="text-xs font-medium text-foreground">
+        <p className="text-xs font-medium text-[#e2e5eb]">
           Candidate {currentIndex + 1} of {candidates.length}
         </p>
         <div className="flex items-center gap-1">
@@ -127,10 +127,10 @@ export function ParameterDetectorStepper({
 
       {/* Matched line */}
       <div className="rounded-lg bg-black/20 px-3 py-2">
-        <p className="font-label text-xs text-amber-400 break-all">
+        <p className="font-sans text-xs text-xs text-amber-400 break-all">
           {current.matchedLine}
         </p>
-        <p className="font-label text-[0.5rem] text-muted-foreground mt-1">
+        <p className="font-sans text-xs text-[0.5rem] text-[#848b9b] mt-1">
           Line {current.lineNumber} · {current.source === 'param_block' ? 'param() block' : 'variable assignment'}
         </p>
       </div>
@@ -138,7 +138,7 @@ export function ParameterDetectorStepper({
       {/* Editable fields */}
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="text-xs text-muted-foreground mb-1 block">Key</label>
+          <label className="text-xs text-[#848b9b] mb-1 block">Key</label>
           <Input
             value={key}
             onChange={e => setKey(e.target.value.replace(/[^a-zA-Z0-9_]/g, ''))}
@@ -149,7 +149,7 @@ export function ParameterDetectorStepper({
           )}
         </div>
         <div>
-          <label className="text-xs text-muted-foreground mb-1 block">Label</label>
+          <label className="text-xs text-[#848b9b] mb-1 block">Label</label>
           <Input
             value={label}
             onChange={e => setLabel(e.target.value)}
@@ -160,12 +160,12 @@ export function ParameterDetectorStepper({
 
       <div className="grid grid-cols-2 gap-3">
         <div>
-          <label className="text-xs text-muted-foreground mb-1 flex items-center gap-1.5">
+          <label className="text-xs text-[#848b9b] mb-1 flex items-center gap-1.5">
             Type
             <button
               type="button"
               onClick={() => setShowInferenceInfo(!showInferenceInfo)}
-              className="text-muted-foreground hover:text-primary transition-colors"
+              className="text-[#848b9b] hover:text-[#22d3ee] transition-colors"
               title={current.inferenceReason}
             >
               <Info size={11} />
@@ -174,20 +174,20 @@ export function ParameterDetectorStepper({
           <select
             value={type}
             onChange={e => setType(e.target.value as ScriptParameter['type'])}
-            className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+            className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
           >
             {PARAM_TYPES.map(t => (
               <option key={t.value} value={t.value}>{t.label}</option>
             ))}
           </select>
           {showInferenceInfo && (
-            <p className="text-[0.625rem] text-primary/80 mt-1 italic">
+            <p className="text-[0.625rem] text-[#22d3ee]/80 mt-1 italic">
               {current.inferenceReason}
             </p>
           )}
         </div>
         <div>
-          <label className="text-xs text-muted-foreground mb-1 block">Default value</label>
+          <label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
           <Input
             value={defaultValue}
             onChange={e => setDefaultValue(e.target.value)}
@@ -197,32 +197,32 @@ export function ParameterDetectorStepper({
       </div>
 
       <div className="flex items-center gap-4">
-        <label className="flex items-center gap-2 text-sm text-foreground">
+        <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
           <input
             type="checkbox"
             checked={required}
             onChange={e => setRequired(e.target.checked)}
-            className="rounded border-border"
+            className="rounded border-[#1e2130]"
           />
           Required
         </label>
-        <label className="flex items-center gap-2 text-sm text-foreground">
+        <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
           <input
             type="checkbox"
             checked={sensitive}
             onChange={e => setSensitive(e.target.checked)}
-            className="rounded border-border"
+            className="rounded border-[#1e2130]"
           />
           Sensitive
         </label>
       </div>
 
       {/* Actions */}
-      <div className="flex items-center justify-end gap-2 pt-1 border-t border-border">
+      <div className="flex items-center justify-end gap-2 pt-1 border-t border-[#1e2130]">
         <button
           type="button"
           onClick={handleSkip}
-          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-1.5"
+          className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-3 py-1.5"
         >
           <SkipForward size={13} />
           {isLast ? 'Skip & Finish' : 'Skip'}
@@ -231,7 +231,7 @@ export function ParameterDetectorStepper({
           type="button"
           onClick={handleAccept}
           disabled={!key.trim() || !label.trim()}
-          className="flex items-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-4 py-1.5 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-1.5 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {isLast ? (
             <><Check size={13} /> Accept &amp; Finish</>
diff --git a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
index a607fe4a..ef6848ee 100644
--- a/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
+++ b/frontend/src/components/script-editor/ParameterSchemaBuilder.tsx
@@ -97,10 +97,10 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
           type="button"
           onClick={() => mode === 'json' ? switchToVisual() : undefined}
           className={cn(
-            'flex items-center gap-1.5 font-label text-xs px-3 py-1.5 rounded-full border transition-all',
+            'flex items-center gap-1.5 font-sans text-xs text-xs px-3 py-1.5 rounded-full border transition-all',
             mode === 'visual'
-              ? 'bg-primary/10 border-primary/30 text-foreground'
-              : 'border-border text-muted-foreground hover:text-foreground'
+              ? 'bg-[rgba(34,211,238,0.10)] border-primary/30 text-[#e2e5eb]'
+              : 'border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb]'
           )}
         >
           <List size={12} /> Visual
@@ -109,10 +109,10 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
           type="button"
           onClick={() => mode === 'visual' ? switchToJson() : undefined}
           className={cn(
-            'flex items-center gap-1.5 font-label text-xs px-3 py-1.5 rounded-full border transition-all',
+            'flex items-center gap-1.5 font-sans text-xs text-xs px-3 py-1.5 rounded-full border transition-all',
             mode === 'json'
-              ? 'bg-primary/10 border-primary/30 text-foreground'
-              : 'border-border text-muted-foreground hover:text-foreground'
+              ? 'bg-[rgba(34,211,238,0.10)] border-primary/30 text-[#e2e5eb]'
+              : 'border-[#1e2130] text-[#848b9b] hover:text-[#e2e5eb]'
           )}
         >
           <Code size={12} /> JSON
@@ -122,7 +122,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
       {mode === 'visual' ? (
         <>
           {parameters.length === 0 ? (
-            <p className="text-sm text-muted-foreground py-4 text-center">
+            <p className="text-sm text-[#848b9b] py-4 text-center">
               No parameters defined. Add one to create dynamic form fields.
             </p>
           ) : (
@@ -147,7 +147,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
             type="button"
             onClick={handleAdd}
             disabled={disabled}
-            className="flex items-center gap-1.5 text-sm text-primary hover:underline self-start"
+            className="flex items-center gap-1.5 text-sm text-[#22d3ee] hover:underline self-start"
           >
             <Plus size={14} /> Add Parameter
           </button>
@@ -159,7 +159,7 @@ export function ParameterSchemaBuilder({ schema, onChange, disabled }: Props) {
             onChange={e => { setJsonText(e.target.value); setJsonError(null) }}
             disabled={disabled}
             spellCheck={false}
-            className="w-full min-h-[300px] resize-y font-label text-sm bg-card border border-border rounded-xl p-4 text-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
+            className="w-full min-h-[300px] resize-y font-sans text-xs text-sm bg-[#14161d] border border-[#1e2130] rounded-xl p-4 text-[#e2e5eb] focus:outline-none focus:border-[rgba(6,182,212,0.3)] disabled:cursor-not-allowed disabled:opacity-50"
             placeholder='{ "parameters": [...] }'
           />
           {jsonError && (
diff --git a/frontend/src/components/script-editor/ScriptBodyEditor.tsx b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
index c4c505be..4c70fbeb 100644
--- a/frontend/src/components/script-editor/ScriptBodyEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptBodyEditor.tsx
@@ -16,7 +16,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
   }, [])
 
   return (
-    <div className="rounded-xl border border-border overflow-hidden">
+    <div className="rounded-xl border border-[#1e2130] overflow-hidden">
       <Editor
         height="300px"
         language="powershell"
@@ -25,7 +25,7 @@ export function ScriptBodyEditor({ value, onChange, disabled }: Props) {
         onChange={v => onChange(v ?? '')}
         beforeMount={handleBeforeMount}
         loading={
-          <div className="flex h-[300px] items-center justify-center bg-card">
+          <div className="flex h-[300px] items-center justify-center bg-[#14161d]">
             <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
           </div>
         }
diff --git a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
index 5020548b..cd9d401a 100644
--- a/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateEditor.tsx
@@ -291,7 +291,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
   if (isLoading) {
     return (
       <div className="flex items-center justify-center py-20">
-        <Loader2 size={28} className="text-primary animate-spin" />
+        <Loader2 size={28} className="text-[#22d3ee] animate-spin" />
       </div>
     )
   }
@@ -302,22 +302,22 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
       <button
         type="button"
         onClick={handleBack}
-        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors w-fit"
+        className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors w-fit"
       >
         <ArrowLeft size={12} />
         Back to templates
       </button>
 
-      <h1 className="text-2xl font-heading font-bold text-foreground">
+      <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">
         {templateId ? 'Edit Template' : 'New Template'}
       </h1>
 
       {/* ── Metadata ──────────────────────────────────────────────── */}
-      <section className="glass-card-static p-5 space-y-4">
-        <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Metadata</p>
+      <section className="card-flat p-5 space-y-4">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Metadata</p>
 
         <div>
-          <label className="text-sm font-medium text-foreground mb-1 block">
+          <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
             Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -329,7 +329,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Description</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Description</label>
             <Textarea
               value={form.description}
               onChange={e => updateField('description', e.target.value)}
@@ -338,7 +338,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             />
           </div>
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Use Case</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Use Case</label>
             <Textarea
               value={form.use_case}
               onChange={e => updateField('use_case', e.target.value)}
@@ -350,13 +350,13 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-3 gap-4">
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">
               Category <span className="text-red-400">*</span>
             </label>
             <select
               value={form.category_id}
               onChange={e => updateField('category_id', e.target.value)}
-              className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
             >
               <option value="">Select category…</option>
               {categories.map(c => (
@@ -365,11 +365,11 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             </select>
           </div>
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Complexity</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Complexity</label>
             <select
               value={form.complexity}
               onChange={e => updateField('complexity', e.target.value as FormState['complexity'])}
-              className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
+              className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
             >
               <option value="beginner">Beginner</option>
               <option value="intermediate">Intermediate</option>
@@ -377,7 +377,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             </select>
           </div>
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Estimated Runtime</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Estimated Runtime</label>
             <Input
               value={form.estimated_runtime}
               onChange={e => updateField('estimated_runtime', e.target.value)}
@@ -388,7 +388,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
 
         <div className="grid grid-cols-2 gap-4">
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Tags (comma-separated)</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Tags (comma-separated)</label>
             <Input
               value={form.tags}
               onChange={e => updateField('tags', e.target.value)}
@@ -396,7 +396,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             />
           </div>
           <div>
-            <label className="text-sm font-medium text-foreground mb-1 block">Required Modules (comma-separated)</label>
+            <label className="text-sm font-medium text-[#e2e5eb] mb-1 block">Required Modules (comma-separated)</label>
             <Input
               value={form.requires_modules}
               onChange={e => updateField('requires_modules', e.target.value)}
@@ -406,41 +406,41 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
         </div>
 
         <div className="flex items-center gap-6">
-          <label className="flex items-center gap-2 text-sm text-foreground">
+          <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
             <input
               type="checkbox"
               checked={form.requires_elevation}
               onChange={e => updateField('requires_elevation', e.target.checked)}
-              className="rounded border-border"
+              className="rounded border-[#1e2130]"
             />
             Requires elevation (Run as Administrator)
           </label>
 
           {/* Share toggle — only for owners/admins editing an existing template */}
           {templateId && template && canShareScriptTemplate && (
-            <label className="flex items-center gap-2 text-sm text-foreground">
+            <label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
               <input
                 type="checkbox"
                 checked={template.team_id !== null}
                 onChange={e => handleShare(e.target.checked)}
-                className="rounded border-border"
+                className="rounded border-[#1e2130]"
               />
               Share with team
-              <span className="text-xs text-muted-foreground">(visible to all team members)</span>
+              <span className="text-xs text-[#848b9b]">(visible to all team members)</span>
             </label>
           )}
         </div>
       </section>
 
       {/* ── Script Body ───────────────────────────────────────────── */}
-      <section className="glass-card-static p-5 space-y-3">
-        <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
+      <section className="card-flat p-5 space-y-3">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
           Script Body <span className="text-red-400">*</span>
         </p>
-        <p className="text-xs text-muted-foreground">
-          Use <code className="font-label text-amber-400">{'{{param_key}}'}</code> for parameter placeholders.
-          Supports <code className="font-label text-amber-400">{'{% if param %} ... {% endif %}'}</code> conditionals
-          and filters like <code className="font-label text-amber-400">{'{{ param | as_secure_string }}'}</code>.
+        <p className="text-xs text-[#848b9b]">
+          Use <code className="font-sans text-xs text-amber-400">{'{{param_key}}'}</code> for parameter placeholders.
+          Supports <code className="font-sans text-xs text-amber-400">{'{% if param %} ... {% endif %}'}</code> conditionals
+          and filters like <code className="font-sans text-xs text-amber-400">{'{{ param | as_secure_string }}'}</code>.
         </p>
         <ScriptBodyEditor
           value={form.script_body}
@@ -452,7 +452,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
           <button
             type="button"
             onClick={handleDetectParameters}
-            className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-[10px] transition-all"
+            className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] hover:border-[rgba(255,255,255,0.12)] px-3 py-1.5 rounded-lg transition-all"
           >
             <Scan size={14} />
             Detect Parameters
@@ -460,7 +460,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
         )}
 
         {detectionSummary && (
-          <p className="text-xs text-muted-foreground italic">{detectionSummary}</p>
+          <p className="text-xs text-[#848b9b] italic">{detectionSummary}</p>
         )}
 
         {showStepper && detectedCandidates.length > 0 && (
@@ -475,10 +475,10 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
       </section>
 
       {/* ── Parameters Schema ─────────────────────────────────────── */}
-      <section className="glass-card-static p-5 space-y-3">
-        <p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Parameters</p>
-        <p className="text-xs text-muted-foreground">
-          Define form fields that users fill in when generating a script. Each parameter maps to a <code className="font-label text-amber-400">{'{{key}}'}</code> placeholder in the script body.
+      <section className="card-flat p-5 space-y-3">
+        <p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Parameters</p>
+        <p className="text-xs text-[#848b9b]">
+          Define form fields that users fill in when generating a script. Each parameter maps to a <code className="font-sans text-xs text-amber-400">{'{{key}}'}</code> placeholder in the script body.
         </p>
         <ParameterSchemaBuilder
           schema={form.parameters_schema}
@@ -487,14 +487,14 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
       </section>
 
       {/* ── Fixed Action Bar ──────────────────────────────────────── */}
-      <div className="fixed bottom-0 left-0 right-0 z-20 border-t border-border bg-background/80 backdrop-blur-sm px-6 py-3">
+      <div className="fixed bottom-0 left-0 right-0 z-20 border-t border-[#1e2130] bg-[#0c0d10]/80 px-6 py-3">
         <div className="max-w-5xl mx-auto flex items-center justify-between">
           <div className="flex items-center gap-3">
             <button
               type="button"
               onClick={handleSave}
               disabled={isSaving}
-              className="flex items-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-5 py-2 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
+              className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-5 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
               {templateId ? 'Save Changes' : 'Create Template'}
@@ -502,7 +502,7 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
             <button
               type="button"
               onClick={handleBack}
-              className="text-sm text-muted-foreground hover:text-foreground transition-colors px-4 py-2"
+              className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-4 py-2"
             >
               Cancel
             </button>
@@ -515,14 +515,14 @@ export function ScriptTemplateEditor({ templateId, onBack, onSaved }: Props) {
                 <button
                   type="button"
                   onClick={handleDelete}
-                  className="text-xs font-label text-rose-500 hover:text-rose-400 px-2 py-1"
+                  className="text-xs font-sans text-xs text-rose-500 hover:text-rose-400 px-2 py-1"
                 >
                   Confirm
                 </button>
                 <button
                   type="button"
                   onClick={() => setDeleteConfirm(false)}
-                  className="text-xs font-label text-muted-foreground hover:text-foreground px-2 py-1"
+                  className="text-xs font-sans text-xs text-[#848b9b] hover:text-[#e2e5eb] px-2 py-1"
                 >
                   Cancel
                 </button>
diff --git a/frontend/src/components/script-editor/ScriptTemplateListView.tsx b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
index 42432106..a1c17c25 100644
--- a/frontend/src/components/script-editor/ScriptTemplateListView.tsx
+++ b/frontend/src/components/script-editor/ScriptTemplateListView.tsx
@@ -71,7 +71,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
       {/* Back link */}
       <Link
         to="/scripts"
-        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors w-fit"
+        className="flex items-center gap-1.5 text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors w-fit"
       >
         <ArrowLeft size={12} />
         Back to Script Library
@@ -80,8 +80,8 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
       {/* Header row */}
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-2xl font-heading font-bold text-foreground">Manage Templates</h1>
-          <p className="text-sm text-muted-foreground mt-1">
+          <h1 className="text-2xl font-heading font-bold text-[#e2e5eb]">Manage Templates</h1>
+          <p className="text-sm text-[#848b9b] mt-1">
             Create and edit PowerShell script templates.
           </p>
         </div>
@@ -89,7 +89,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
           <button
             type="button"
             onClick={onCreate}
-            className="flex items-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-4 py-2 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20"
+            className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-2 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all"
           >
             <Plus size={16} />
             New Template
@@ -99,70 +99,70 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
 
       {/* Search */}
       <div className="relative w-64">
-        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+        <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#848b9b] pointer-events-none" />
         <input
           type="text"
           value={searchQuery}
           onChange={e => setSearchQuery(e.target.value)}
           placeholder="Search templates…"
-          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-border bg-card text-foreground placeholder:text-muted-foreground focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
+          className="w-full pl-8 pr-3 py-1.5 text-sm rounded-md border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-none focus:border-[rgba(6,182,212,0.3)] focus:ring-1 focus:ring-[rgba(6,182,212,0.2)]"
         />
       </div>
 
       {/* Template list */}
       {isLoading ? (
         <div className="flex items-center justify-center py-12">
-          <Loader2 size={28} className="text-primary animate-spin" />
+          <Loader2 size={28} className="text-[#22d3ee] animate-spin" />
         </div>
       ) : templates.length === 0 ? (
-        <div className="glass-card-static flex flex-col items-center justify-center gap-3 py-12 text-center">
-          <FileCode size={32} className="text-muted-foreground/40" />
-          <p className="text-sm text-muted-foreground">
+        <div className="card-flat flex flex-col items-center justify-center gap-3 py-12 text-center">
+          <FileCode size={32} className="text-[#848b9b]/40" />
+          <p className="text-sm text-[#848b9b]">
             {searchQuery ? 'No templates match your search' : 'No templates yet. Create your first one!'}
           </p>
         </div>
       ) : (
-        <div className="glass-card-static overflow-hidden">
+        <div className="card-flat overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="border-b border-border">
-                <th className="text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Name</th>
-                <th className="text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Category</th>
-                <th className="text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Complexity</th>
-                <th className="text-left font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Scope</th>
-                <th className="text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Uses</th>
-                <th className="text-right font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground px-4 py-3">Actions</th>
+              <tr className="border-b border-[#1e2130]">
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Name</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Category</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Complexity</th>
+                <th className="text-left font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Scope</th>
+                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Uses</th>
+                <th className="text-right font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] px-4 py-3">Actions</th>
               </tr>
             </thead>
             <tbody>
               {templates.map(t => (
                 <tr
                   key={t.id}
-                  className="border-b border-border last:border-b-0 hover:bg-white/[0.02] transition-colors"
+                  className="border-b border-[#1e2130] last:border-b-0 hover:bg-white/[0.02] transition-colors"
                 >
                   <td className="px-4 py-3">
-                    <span className="text-foreground font-medium">{t.name}</span>
+                    <span className="text-[#e2e5eb] font-medium">{t.name}</span>
                     {t.description && (
-                      <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">{t.description}</p>
+                      <p className="text-xs text-[#848b9b] line-clamp-1 mt-0.5">{t.description}</p>
                     )}
                   </td>
-                  <td className="px-4 py-3 text-muted-foreground">{getCategoryName(t.category_id)}</td>
+                  <td className="px-4 py-3 text-[#848b9b]">{getCategoryName(t.category_id)}</td>
                   <td className="px-4 py-3">
-                    <span className={cn('font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[t.complexity])}>
+                    <span className={cn('font-sans text-xs text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[t.complexity])}>
                       {t.complexity}
                     </span>
                   </td>
                   <td className="px-4 py-3">
                     <span className={cn(
-                      'inline-flex items-center gap-1 font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
+                      'inline-flex items-center gap-1 font-sans text-xs text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
                       t.team_id
-                        ? 'text-primary bg-primary/10 border-primary/20'
-                        : 'text-muted-foreground bg-white/5 border-border'
+                        ? 'text-[#22d3ee] bg-[rgba(34,211,238,0.10)] border-primary/20'
+                        : 'text-[#848b9b] bg-white/5 border-[#1e2130]'
                     )}>
                       {t.team_id ? <><Users size={10} /> Team</> : <><UserIcon size={10} /> Personal</>}
                     </span>
                   </td>
-                  <td className="px-4 py-3 text-right text-muted-foreground">{t.usage_count}</td>
+                  <td className="px-4 py-3 text-right text-[#848b9b]">{t.usage_count}</td>
                   <td className="px-4 py-3 text-right">
                     <div className="flex items-center justify-end gap-1">
                       {canManageScriptTemplate(t) && (
@@ -170,7 +170,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                           <button
                             type="button"
                             onClick={() => onEdit(t.id)}
-                            className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-white/5 transition-colors"
+                            className="p-1.5 rounded-md text-[#848b9b] hover:text-[#e2e5eb] hover:bg-white/5 transition-colors"
                             title="Edit template"
                           >
                             <Pencil size={14} />
@@ -180,14 +180,14 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                               <button
                                 type="button"
                                 onClick={() => handleDelete(t.id)}
-                                className="text-[0.625rem] font-label text-rose-500 hover:text-rose-400 px-1.5 py-0.5"
+                                className="text-[0.625rem] font-sans text-xs text-rose-500 hover:text-rose-400 px-1.5 py-0.5"
                               >
                                 Confirm
                               </button>
                               <button
                                 type="button"
                                 onClick={() => setDeleteConfirm(null)}
-                                className="text-[0.625rem] font-label text-muted-foreground hover:text-foreground px-1.5 py-0.5"
+                                className="text-[0.625rem] font-sans text-xs text-[#848b9b] hover:text-[#e2e5eb] px-1.5 py-0.5"
                               >
                                 Cancel
                               </button>
@@ -196,7 +196,7 @@ export function ScriptTemplateListView({ onEdit, onCreate }: Props) {
                             <button
                               type="button"
                               onClick={() => setDeleteConfirm(t.id)}
-                              className="p-1.5 rounded-md text-muted-foreground hover:text-rose-500 hover:bg-white/5 transition-colors"
+                              className="p-1.5 rounded-md text-[#848b9b] hover:text-rose-500 hover:bg-white/5 transition-colors"
                               title="Delete template"
                             >
                               <Trash2 size={14} />
diff --git a/frontend/src/components/step-library/CustomStepModal.tsx b/frontend/src/components/step-library/CustomStepModal.tsx
index 638f2a07..e64770a9 100644
--- a/frontend/src/components/step-library/CustomStepModal.tsx
+++ b/frontend/src/components/step-library/CustomStepModal.tsx
@@ -65,14 +65,14 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 backdrop-blur-xs sm:items-center sm:p-4">
-      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-border bg-card shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/80 sm:items-center sm:p-4">
+      <div className="relative flex h-[95vh] w-full max-w-full flex-col border border-[#1e2130] bg-[#14161d] shadow-lg sm:h-[90vh] sm:max-w-4xl sm:rounded-2xl">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border p-4">
-          <h2 className="text-lg font-semibold text-foreground">Add Custom Step</h2>
+        <div className="flex items-center justify-between border-b border-[#1e2130] p-4">
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">Add Custom Step</h2>
           <button
             onClick={onClose}
-            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -80,15 +80,15 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
         </div>
 
         {/* Tabs */}
-        <div className="flex border-b border-border">
+        <div className="flex border-b border-[#1e2130]">
           {canCreateSteps && (
             <button
               onClick={() => setActiveTab('create')}
               className={cn(
                 'flex-1 px-4 py-3 text-sm font-medium transition-colors',
                 activeTab === 'create'
-                  ? 'border-b-2 border-primary bg-primary/5 text-foreground'
-                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+                  ? 'border-b-2 border-primary bg-primary/5 text-[#e2e5eb]'
+                  : 'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
               )}
             >
               Type My Own
@@ -99,8 +99,8 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
             className={cn(
               'flex-1 px-4 py-3 text-sm font-medium transition-colors',
               activeTab === 'browse'
-                ? 'border-b-2 border-primary bg-primary/5 text-primary'
-                : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+                ? 'border-b-2 border-primary bg-primary/5 text-[#22d3ee]'
+                : 'text-[#848b9b] hover:bg-muted/50 hover:text-[#e2e5eb]'
             )}
           >
             Browse Library
@@ -133,10 +133,10 @@ export function CustomStepModal({ isOpen, onClose, onInsertStep }: CustomStepMod
 
         {/* Loading Overlay */}
         {isSubmitting && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black/80 backdrop-blur-xs">
+          <div className="absolute inset-0 flex items-center justify-center bg-black/80">
             <div className="flex flex-col items-center gap-3">
               <Spinner className="border-t-foreground" />
-              <p className="text-sm text-muted-foreground">Creating step...</p>
+              <p className="text-sm text-[#848b9b]">Creating step...</p>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/step-library/StepCard.tsx b/frontend/src/components/step-library/StepCard.tsx
index 7d3f6928..68af3243 100644
--- a/frontend/src/components/step-library/StepCard.tsx
+++ b/frontend/src/components/step-library/StepCard.tsx
@@ -33,7 +33,7 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
   const isOwn = currentUserId ? step.created_by === currentUserId : false
 
   return (
-    <div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
+    <div className="group rounded-lg border border-[#1e2130] bg-[#14161d] p-4 transition-shadow hover:shadow-md">
       {/* Header */}
       <div className="mb-3 flex items-start justify-between gap-2">
         <div className="flex-1">
@@ -65,12 +65,12 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           </div>
 
           {/* Title */}
-          <h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
+          <h3 className="font-semibold text-[#e2e5eb] line-clamp-2">{step.title}</h3>
         </div>
       </div>
 
       {/* Metadata */}
-      <div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
+      <div className="mb-3 space-y-1.5 text-sm text-[#848b9b]">
         {/* Category */}
         {step.category_name && (
           <div className="flex items-center gap-1.5">
@@ -116,13 +116,13 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           {visibleTags.map(tag => (
             <span
               key={tag}
-              className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground"
+              className="rounded-full bg-accent px-2 py-0.5 text-xs text-[#848b9b]"
             >
               {tag}
             </span>
           ))}
           {remainingTags > 0 && (
-            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
+            <span className="rounded-full bg-muted px-2 py-0.5 text-xs text-[#848b9b]">
               +{remainingTags} more
             </span>
           )}
@@ -138,14 +138,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
               <>
                 <button
                   onClick={() => onPreview(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
                 >
                   <Eye className="h-4 w-4" />
                   Preview
                 </button>
                 <span
                   title="Managed by source flow — fork to customize"
-                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground opacity-50 cursor-default"
+                  className="flex items-center justify-center rounded-md border border-[#1e2130] px-3 py-2 text-[#848b9b] opacity-50 cursor-default"
                 >
                   <Lock className="h-4 w-4" />
                 </span>
@@ -155,21 +155,21 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
               <>
                 <button
                   onClick={() => onPreview(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
                 >
                   <Eye className="h-4 w-4" />
                   Preview
                 </button>
                 <button
                   onClick={() => onEdit?.(step)}
-                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                  className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
                 >
                   <Pencil className="h-4 w-4" />
                   Edit
                 </button>
                 <button
                   onClick={() => onDelete?.(step)}
-                  className="flex items-center justify-center rounded-md border border-border px-3 py-2 text-muted-foreground hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
+                  className="flex items-center justify-center rounded-md border border-[#1e2130] px-3 py-2 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400 hover:border-red-400/30 transition-colors"
                   aria-label="Delete step"
                 >
                   <Trash2 className="h-4 w-4" />
@@ -181,14 +181,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
             <>
               <button
                 onClick={() => onPreview(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+                className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
               >
                 <Eye className="h-4 w-4" />
                 Preview
               </button>
               <button
                 onClick={() => onSave?.(step)}
-                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
+                className="flex flex-1 items-center justify-center gap-2 rounded-md bg-[#22d3ee] text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
               >
                 <Bookmark className="h-4 w-4" />
                 Save
@@ -200,14 +200,14 @@ export function StepCard({ step, onPreview, onInsert, onEdit, onDelete, onSave,
           <>
             <button
               onClick={() => onPreview(step)}
-              className="flex flex-1 items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              className="flex flex-1 items-center justify-center gap-2 rounded-md border border-[#1e2130] px-3 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
             >
               <Eye className="h-4 w-4" />
               Preview
             </button>
             <button
               onClick={() => onInsert?.(step)}
-              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium hover:opacity-90 transition-colors"
+              className="flex flex-1 items-center justify-center gap-2 rounded-md bg-[#22d3ee] text-white px-3 py-2 text-sm font-medium hover:brightness-110 transition-colors"
             >
               <Plus className="h-4 w-4" />
               Insert
diff --git a/frontend/src/components/step-library/StepDetailModal.tsx b/frontend/src/components/step-library/StepDetailModal.tsx
index 2b13975e..a1cb7bc6 100644
--- a/frontend/src/components/step-library/StepDetailModal.tsx
+++ b/frontend/src/components/step-library/StepDetailModal.tsx
@@ -76,10 +76,10 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
   const visibleReviews = showAllReviews ? allTextReviews : allTextReviews.slice(0, 3)
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs">
-      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-card border border-border rounded-2xl shadow-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
+      <div className="relative flex h-[90vh] w-full max-w-3xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-start justify-between border-b border-border p-6 pb-4">
+        <div className="flex items-start justify-between border-b border-[#1e2130] p-6 pb-4">
           {isLoading ? (
             <div className="h-6 w-48 animate-pulse rounded bg-accent" />
           ) : error ? (
@@ -97,7 +97,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   {step.step_type}
                 </span>
                 {step.category_name && (
-                  <span className="text-xs text-muted-foreground">{step.category_name}</span>
+                  <span className="text-xs text-[#848b9b]">{step.category_name}</span>
                 )}
                 {step.is_featured && (
                   <span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
@@ -110,12 +110,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   </span>
                 )}
               </div>
-              <h2 className="text-xl font-semibold text-foreground">{step.title}</h2>
+              <h2 className="text-xl font-semibold text-[#e2e5eb]">{step.title}</h2>
             </div>
           ) : null}
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
@@ -131,13 +131,13 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               <div className="h-4 w-5/6 animate-pulse rounded bg-accent" />
             </div>
           ) : error ? (
-            <p className="text-sm text-muted-foreground">{error}</p>
+            <p className="text-sm text-[#848b9b]">{error}</p>
           ) : step ? (
             <div className="space-y-6">
               {/* Rating */}
               {hasRating && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-foreground">Rating</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Rating</h3>
                   <div className="flex items-center gap-2">
                     <div className="flex items-center gap-1">
                       {[1, 2, 3, 4, 5].map(i => (
@@ -147,12 +147,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             'h-4 w-4',
                             i <= Math.round(step.rating_average)
                               ? 'fill-yellow-400 text-yellow-400'
-                              : 'text-muted-foreground'
+                              : 'text-[#848b9b]'
                           )}
                         />
                       ))}
                     </div>
-                    <span className="text-sm text-muted-foreground">
+                    <span className="text-sm text-[#848b9b]">
                       {step.rating_average.toFixed(1)} ({step.rating_count} {step.rating_count === 1 ? 'rating' : 'ratings'})
                     </span>
                   </div>
@@ -162,12 +162,12 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Tags */}
               {step.tags.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-foreground">Tags</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Tags</h3>
                   <div className="flex flex-wrap gap-1.5">
                     {step.tags.map(tag => (
                       <span
                         key={tag}
-                        className="rounded-full bg-accent px-2 py-1 text-xs text-muted-foreground"
+                        className="rounded-full bg-accent px-2 py-1 text-xs text-[#848b9b]"
                       >
                         {tag}
                       </span>
@@ -179,7 +179,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Instructions */}
               <div>
                 <h3 className="mb-2 text-sm font-semibold">Instructions</h3>
-                <div className="rounded-lg border border-border bg-accent/50 p-4">
+                <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
                   <MarkdownContent content={step.content.instructions} />
                 </div>
               </div>
@@ -187,8 +187,8 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Help Text */}
               {step.content.help_text && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-foreground">Help Text</h3>
-                  <div className="rounded-lg border border-border bg-blue-400/5 p-4 text-sm">
+                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Help Text</h3>
+                  <div className="rounded-lg border border-[#1e2130] bg-blue-400/5 p-4 text-sm">
                     <MarkdownContent content={step.content.help_text} />
                   </div>
                 </div>
@@ -197,19 +197,19 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {/* Commands */}
               {step.content.commands && step.content.commands.length > 0 && (
                 <div>
-                  <h3 className="mb-2 text-sm font-semibold text-foreground">Commands</h3>
+                  <h3 className="mb-2 text-sm font-semibold text-[#e2e5eb]">Commands</h3>
                   <div className="space-y-2">
                     {step.content.commands.map((cmd, index) => (
                       <div key={index} className="group relative">
                         <div className="mb-1 flex items-center justify-between">
-                          <span className="text-xs font-medium text-muted-foreground">{cmd.label}</span>
+                          <span className="text-xs font-medium text-[#848b9b]">{cmd.label}</span>
                           <button
                             onClick={() => handleCopyCommand(cmd.command, index)}
                             className={cn(
                               'flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors',
                               copiedCommandIndex === index
                                 ? 'bg-emerald-400/10 text-emerald-400'
-                                : 'bg-accent text-muted-foreground hover:bg-accent hover:text-foreground'
+                                : 'bg-accent text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]'
                             )}
                           >
                             {copiedCommandIndex === index ? (
@@ -225,7 +225,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                             )}
                           </button>
                         </div>
-                        <pre className="overflow-x-auto rounded bg-card p-3 text-xs text-foreground">
+                        <pre className="overflow-x-auto rounded bg-[#14161d] p-3 text-xs text-[#e2e5eb]">
                           <code>{cmd.command}</code>
                         </pre>
                       </div>
@@ -238,11 +238,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               {visibleReviews.length > 0 && (
                 <div>
                   <div className="mb-2 flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-foreground">Reviews</h3>
+                    <h3 className="text-sm font-semibold text-[#e2e5eb]">Reviews</h3>
                     {allTextReviews.length > 3 && (
                       <button
                         onClick={() => setShowAllReviews(v => !v)}
-                        className="text-xs text-muted-foreground hover:text-foreground hover:underline"
+                        className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
                       >
                         {showAllReviews ? 'Show less' : `See all ${allTextReviews.length} reviews`}
                       </button>
@@ -250,11 +250,11 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                   </div>
                   <div className="space-y-3">
                     {visibleReviews.map(review => (
-                      <div key={review.id} className="rounded-lg border border-border bg-accent/50 p-3">
+                      <div key={review.id} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
                         <div className="mb-2 flex items-center justify-between">
                           <div className="flex items-center gap-2 text-sm">
                             <User className="h-3.5 w-3.5" />
-                            <span className="font-medium text-foreground">{review.user_name || 'Anonymous'}</span>
+                            <span className="font-medium text-[#e2e5eb]">{review.user_name || 'Anonymous'}</span>
                             {review.verified_use && (
                               <span className="rounded bg-emerald-400/10 px-1.5 py-0.5 text-xs text-emerald-400">
                                 Verified Use
@@ -269,14 +269,14 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
                                   'h-3 w-3',
                                   i <= review.rating
                                     ? 'fill-yellow-400 text-yellow-400'
-                                    : 'text-muted-foreground'
+                                    : 'text-[#848b9b]'
                                 )}
                               />
                             ))}
                           </div>
                         </div>
-                        <p className="text-sm text-muted-foreground">{review.review_text}</p>
-                        <div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
+                        <p className="text-sm text-[#848b9b]">{review.review_text}</p>
+                        <div className="mt-2 flex items-center gap-2 text-xs text-[#848b9b]">
                           <Calendar className="h-3 w-3" />
                           {new Date(review.created_at).toLocaleDateString()}
                         </div>
@@ -287,28 +287,28 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
               )}
 
               {/* Metadata */}
-              <div className="rounded-lg border border-border bg-accent/50 p-4">
+              <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-4">
                 <div className="grid grid-cols-2 gap-3 text-sm">
                   <div>
-                    <span className="text-muted-foreground">Author:</span>
-                    <span className="ml-2 font-medium text-foreground">{step.author_name || 'Unknown'}</span>
+                    <span className="text-[#848b9b]">Author:</span>
+                    <span className="ml-2 font-medium text-[#e2e5eb]">{step.author_name || 'Unknown'}</span>
                   </div>
                   {step.is_flow_synced && step.source_tree_name && (
-                    <div className="col-span-2 flex items-center gap-1.5 text-muted-foreground">
+                    <div className="col-span-2 flex items-center gap-1.5 text-[#848b9b]">
                       <GitBranch className="h-3.5 w-3.5 shrink-0" />
-                      <span>Sourced from <span className="font-medium text-foreground">{step.source_tree_name}</span></span>
+                      <span>Sourced from <span className="font-medium text-[#e2e5eb]">{step.source_tree_name}</span></span>
                     </div>
                   )}
                   <div>
-                    <span className="text-muted-foreground">Usage Count:</span>
-                    <span className="ml-2 font-medium text-foreground">{step.usage_count}</span>
+                    <span className="text-[#848b9b]">Usage Count:</span>
+                    <span className="ml-2 font-medium text-[#e2e5eb]">{step.usage_count}</span>
                   </div>
                   <div>
-                    <span className="text-muted-foreground">Created:</span>
-                    <span className="ml-2 font-medium text-foreground">{new Date(step.created_at).toLocaleDateString()}</span>
+                    <span className="text-[#848b9b]">Created:</span>
+                    <span className="ml-2 font-medium text-[#e2e5eb]">{new Date(step.created_at).toLocaleDateString()}</span>
                   </div>
                   <div>
-                    <span className="text-muted-foreground">Visibility:</span>
+                    <span className="text-[#848b9b]">Visibility:</span>
                     <span className="ml-2 font-medium capitalize">{step.visibility}</span>
                   </div>
                 </div>
@@ -318,7 +318,7 @@ export function StepDetailModal({ stepId, onClose, onInsert }: StepDetailModalPr
         </div>
 
         {/* Footer - Actions */}
-        <div className="flex gap-2 border-t border-border p-4">
+        <div className="flex gap-2 border-t border-[#1e2130] p-4">
           <Button
             variant="secondary"
             onClick={onClose}
diff --git a/frontend/src/components/step-library/StepForm.tsx b/frontend/src/components/step-library/StepForm.tsx
index 0611f5b6..86755b9e 100644
--- a/frontend/src/components/step-library/StepForm.tsx
+++ b/frontend/src/components/step-library/StepForm.tsx
@@ -141,7 +141,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
     <form onSubmit={handleSubmit} className="space-y-6">
       {/* Step Type */}
       <div>
-        <label className="mb-2 block text-sm font-medium text-foreground">
+        <label className="mb-2 block text-sm font-medium text-[#e2e5eb]">
           Step Type <span className="text-red-400">*</span>
         </label>
         <div className="grid grid-cols-3 gap-2">
@@ -155,15 +155,15 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
                 className={cn(
                   'rounded-lg border p-3 text-left transition-colors',
                   stepType === option.value
-                    ? 'border-border bg-accent ring-2 ring-primary/20'
-                    : 'border-border hover:border-border'
+                    ? 'border-[#1e2130] bg-accent ring-2 ring-primary/20'
+                    : 'border-[#1e2130] hover:border-[#1e2130]'
                 )}
               >
                 <div className="mb-1 flex items-center gap-2">
                   <Icon className="h-4 w-4" />
-                  <span className="font-medium text-sm text-foreground">{option.label}</span>
+                  <span className="font-medium text-sm text-[#e2e5eb]">{option.label}</span>
                 </div>
-                <p className="text-xs text-muted-foreground">{option.description}</p>
+                <p className="text-xs text-[#848b9b]">{option.description}</p>
               </button>
             )
           })}
@@ -172,7 +172,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Title */}
       <div>
-        <label htmlFor="title" className="mb-2 block text-sm font-medium text-foreground">
+        <label htmlFor="title" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
           Title <span className="text-red-400">*</span>
         </label>
         <Input
@@ -187,9 +187,9 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Instructions */}
       <div>
-        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-foreground">
+        <label htmlFor="instructions" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
           Instructions <span className="text-red-400">*</span>
-          <span className="ml-2 text-xs font-normal text-muted-foreground">(Markdown supported)</span>
+          <span className="ml-2 text-xs font-normal text-[#848b9b]">(Markdown supported)</span>
         </label>
         <Textarea
           id="instructions"
@@ -203,8 +203,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Help Text */}
       <div>
-        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-foreground">
-          Help Text <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
+        <label htmlFor="helpText" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+          Help Text <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
         </label>
         <Textarea
           id="helpText"
@@ -218,13 +218,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
       {/* Commands */}
       <div>
         <div className="mb-2 flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground">
-            Commands <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
+          <label className="text-sm font-medium text-[#e2e5eb]">
+            Commands <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
           </label>
           <button
             type="button"
             onClick={addCommand}
-            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="flex items-center gap-1 rounded-md bg-accent px-2 py-1 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <Plus className="h-3 w-3" />
             Add Command
@@ -233,13 +233,13 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
         {commands.length > 0 && (
           <div className="space-y-3">
             {commands.map((cmd, index) => (
-              <div key={index} className="rounded-lg border border-border bg-accent/50 p-3">
+              <div key={index} className="rounded-lg border border-[#1e2130] bg-accent/50 p-3">
                 <div className="mb-2 flex items-center justify-between">
-                  <span className="text-xs font-medium text-muted-foreground">Command {index + 1}</span>
+                  <span className="text-xs font-medium text-[#848b9b]">Command {index + 1}</span>
                   <button
                     type="button"
                     onClick={() => removeCommand(index)}
-                    className="rounded p-1 text-muted-foreground hover:bg-red-400/10 hover:text-red-400"
+                    className="rounded p-1 text-[#848b9b] hover:bg-red-400/10 hover:text-red-400"
                   >
                     <X className="h-3 w-3" />
                   </button>
@@ -270,14 +270,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Category */}
       <div>
-        <label htmlFor="category" className="mb-2 block text-sm font-medium text-foreground">
-          Category <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
+        <label htmlFor="category" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+          Category <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
         </label>
         <select
           id="category"
           value={categoryId}
           onChange={(e) => setCategoryId(e.target.value)}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="">None</option>
           {categories.map(cat => (
@@ -288,8 +288,8 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Tags */}
       <div>
-        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-foreground">
-          Tags <span className="text-xs font-normal text-muted-foreground">(Optional)</span>
+        <label htmlFor="tagInput" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
+          Tags <span className="text-xs font-normal text-[#848b9b]">(Optional)</span>
         </label>
         <div className="flex gap-2">
           <Input
@@ -304,7 +304,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
           <button
             type="button"
             onClick={addTag}
-            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md bg-accent px-4 py-2 text-sm font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             Add
           </button>
@@ -314,7 +314,7 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
             {tags.map(tag => (
               <span
                 key={tag}
-                className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-muted-foreground"
+                className="flex items-center gap-1 rounded-full bg-accent px-2.5 py-1 text-xs text-[#848b9b]"
               >
                 {tag}
                 <button
@@ -333,14 +333,14 @@ export function StepForm({ onSubmit, onCancel, initialData, submitLabel, isSubmi
 
       {/* Visibility */}
       <div>
-        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-foreground">
+        <label htmlFor="visibility" className="mb-2 block text-sm font-medium text-[#e2e5eb]">
           Visibility
         </label>
         <select
           id="visibility"
           value={visibility}
           onChange={(e) => setVisibility(e.target.value as 'private' | 'team' | 'public')}
-          className="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+          className="w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
         >
           <option value="private">Private (only me)</option>
           <option value="team">Team (my team members)</option>
diff --git a/frontend/src/components/step-library/StepFormModal.tsx b/frontend/src/components/step-library/StepFormModal.tsx
index 422bd705..195e3ee0 100644
--- a/frontend/src/components/step-library/StepFormModal.tsx
+++ b/frontend/src/components/step-library/StepFormModal.tsx
@@ -49,17 +49,17 @@ export function StepFormModal({ isOpen, onClose, onSuccess, editingStep }: StepF
   } : undefined
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
-      <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
+      <div className="relative flex h-[90vh] w-full max-w-2xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border p-6 pb-4">
-          <h2 className="text-lg font-semibold text-foreground">
+        <div className="flex items-center justify-between border-b border-[#1e2130] p-6 pb-4">
+          <h2 className="text-lg font-semibold text-[#e2e5eb]">
             {isEditMode ? 'Edit Step' : 'Create Step'}
           </h2>
           <button
             onClick={onClose}
             disabled={isSubmitting}
-            className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
+            className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-50"
             aria-label="Close"
           >
             <X className="h-5 w-5" />
diff --git a/frontend/src/components/step-library/StepLibraryBrowser.tsx b/frontend/src/components/step-library/StepLibraryBrowser.tsx
index 68787f42..2aeffe91 100644
--- a/frontend/src/components/step-library/StepLibraryBrowser.tsx
+++ b/frontend/src/components/step-library/StepLibraryBrowser.tsx
@@ -145,16 +145,16 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
   return (
     <div className="flex h-full flex-col">
       {/* Header - Filters */}
-      <div className="space-y-4 border-b border-border p-4">
+      <div className="space-y-4 border-b border-[#1e2130] p-4">
         {/* Search */}
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#848b9b]" />
           <input
             type="text"
             placeholder="Search steps..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full rounded-md border border-border bg-card py-2 pl-10 pr-4 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="w-full rounded-md border border-[#1e2130] bg-[#14161d] py-2 pl-10 pr-4 text-sm text-[#e2e5eb] placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           />
         </div>
 
@@ -165,7 +165,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by category"
             value={selectedCategoryId || ''}
             onChange={(e) => setSelectedCategoryId(e.target.value || undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Categories</option>
             {categories.map(cat => (
@@ -178,7 +178,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by step type"
             value={selectedStepType || ''}
             onChange={(e) => setSelectedStepType((e.target.value as 'decision' | 'action' | 'solution') || undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">All Types</option>
             <option value="decision">Decision</option>
@@ -191,7 +191,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Filter by minimum rating"
             value={minRating?.toString() || ''}
             onChange={(e) => setMinRating(e.target.value ? Number(e.target.value) : undefined)}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="">Any Rating</option>
             <option value="4">4+ Stars</option>
@@ -204,7 +204,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
             aria-label="Sort steps by"
             value={sortBy}
             onChange={(e) => setSortBy(e.target.value as 'recent' | 'popular' | 'highest_rated' | 'most_used')}
-            className="rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
+            className="rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:outline-hidden focus:border-primary focus:ring-1 focus:ring-primary/20"
           >
             <option value="recent">Most Recent</option>
             <option value="popular">Most Popular</option>
@@ -216,7 +216,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {/* Popular Tags */}
         {popularTags.length > 0 && (
           <div>
-            <div className="mb-2 text-xs font-medium text-muted-foreground">Popular Tags:</div>
+            <div className="mb-2 text-xs font-medium text-[#848b9b]">Popular Tags:</div>
             <div className="flex flex-wrap gap-1.5">
               {popularTags.map(tag => (
                 <button
@@ -225,8 +225,8 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   className={cn(
                     'rounded-full px-2.5 py-1 text-xs transition-colors',
                     selectedTag === tag.tag
-                      ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
-                      : 'bg-accent text-muted-foreground hover:bg-accent'
+                      ? 'bg-[#22d3ee] text-white'
+                      : 'bg-accent text-[#848b9b] hover:bg-accent'
                   )}
                 >
                   {tag.tag} ({tag.count})
@@ -240,7 +240,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
         {hasActiveFilters && (
           <button
             onClick={clearFilters}
-            className="text-sm text-muted-foreground hover:text-foreground hover:underline"
+            className="text-sm text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
           >
             Clear all filters
           </button>
@@ -251,7 +251,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
       <div className="flex-1 overflow-y-auto p-4">
         {isLoading ? (
           <div className="flex items-center justify-center py-12">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
           </div>
         ) : error ? (
           <div className="rounded-lg border border-red-400/20 bg-red-400/10 p-4 text-center">
@@ -262,9 +262,9 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
           </div>
         ) : steps.length === 0 ? (
           hasActiveFilters ? (
-            <div className="rounded-lg border border-border bg-accent/50 p-12 text-center">
-              <p className="mb-2 text-lg font-medium text-foreground">No steps found</p>
-              <p className="text-sm text-muted-foreground">Try adjusting your filters</p>
+            <div className="rounded-lg border border-[#1e2130] bg-accent/50 p-12 text-center">
+              <p className="mb-2 text-lg font-medium text-[#e2e5eb]">No steps found</p>
+              <p className="text-sm text-[#848b9b]">Try adjusting your filters</p>
             </div>
           ) : (
             <EmptyState
@@ -288,7 +288,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('private')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-foreground">My Steps ({groupedSteps.private.length})</h3>
+                  <h3 className="text-sm font-semibold text-[#e2e5eb]">My Steps ({groupedSteps.private.length})</h3>
                   {collapsedSections.private ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -321,7 +321,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('team')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-foreground">Team Steps ({groupedSteps.team.length})</h3>
+                  <h3 className="text-sm font-semibold text-[#e2e5eb]">Team Steps ({groupedSteps.team.length})</h3>
                   {collapsedSections.team ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -354,7 +354,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
                   onClick={() => toggleSection('public')}
                   className="mb-3 flex w-full items-center justify-between"
                 >
-                  <h3 className="text-sm font-semibold text-foreground">Community ({groupedSteps.public.length})</h3>
+                  <h3 className="text-sm font-semibold text-[#e2e5eb]">Community ({groupedSteps.public.length})</h3>
                   {collapsedSections.public ? (
                     <ChevronDown className="h-4 w-4" />
                   ) : (
@@ -385,7 +385,7 @@ export function StepLibraryBrowser({ onInsert, onCreateNew, showCreateButton = f
 
       {/* Footer - Optional Create Button */}
       {showCreateButton && onCreateNew && (
-        <div className="border-t border-border p-4">
+        <div className="border-t border-[#1e2130] p-4">
           <Button onClick={onCreateNew} className="w-full">
             + Create New Step
           </Button>
diff --git a/frontend/src/components/tree-editor/AIFixReviewModal.tsx b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
index 17f21a64..029250d2 100644
--- a/frontend/src/components/tree-editor/AIFixReviewModal.tsx
+++ b/frontend/src/components/tree-editor/AIFixReviewModal.tsx
@@ -40,19 +40,19 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
   const allHandled = pendingFixes.length === 0
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-xs p-4">
-      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-card border border-border rounded-2xl shadow-lg">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
+      <div className="relative flex h-[80vh] w-full max-w-2xl flex-col bg-[#14161d] border border-[#1e2130] rounded-2xl shadow-lg">
         {/* Header */}
-        <div className="flex items-center justify-between border-b border-border px-6 py-4">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-6 py-4">
           <div className="flex items-center gap-2">
-            <Sparkles className="h-5 w-5 text-primary" />
-            <h2 className="text-lg font-semibold text-foreground">
+            <Sparkles className="h-5 w-5 text-[#22d3ee]" />
+            <h2 className="text-lg font-semibold text-[#e2e5eb]">
               AI Fix Proposals ({fixes.length})
             </h2>
           </div>
           <button
             onClick={onClose}
-            className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
           >
             <X className="h-5 w-5" />
           </button>
@@ -73,16 +73,16 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                   isApplied
                     ? 'border-emerald-400/30 bg-emerald-400/5'
                     : isSkipped
-                      ? 'border-border bg-accent/30 opacity-60'
-                      : 'border-border bg-card'
+                      ? 'border-[#1e2130] bg-accent/30 opacity-60'
+                      : 'border-[#1e2130] bg-[#14161d]'
                 )}
               >
                 {/* Fix header */}
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex-1">
                     <p className="text-sm text-red-400 mb-1">{fix.error_message}</p>
-                    <p className="text-sm text-foreground">{fix.description}</p>
-                    <p className="text-xs text-muted-foreground mt-1">
+                    <p className="text-sm text-[#e2e5eb]">{fix.description}</p>
+                    <p className="text-xs text-[#848b9b] mt-1">
                       Node: {fix.target_node_id}
                     </p>
                   </div>
@@ -92,7 +92,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                     </span>
                   )}
                   {isSkipped && (
-                    <span className="text-xs text-muted-foreground">Skipped</span>
+                    <span className="text-xs text-[#848b9b]">Skipped</span>
                   )}
                 </div>
 
@@ -101,7 +101,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                   <>
                     <button
                       onClick={() => toggleExpanded(fix.target_node_id)}
-                      className="mt-2 flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                      className="mt-2 flex items-center gap-1 text-xs text-[#848b9b] hover:text-[#e2e5eb]"
                     >
                       {isExpanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
                       {isExpanded ? 'Hide' : 'Show'} details
@@ -110,14 +110,14 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
                     {isExpanded && (
                       <div className="mt-3 grid grid-cols-2 gap-3">
                         <div>
-                          <p className="text-xs font-medium text-muted-foreground mb-1">Before</p>
-                          <pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-muted-foreground max-h-48 overflow-y-auto">
+                          <p className="text-xs font-medium text-[#848b9b] mb-1">Before</p>
+                          <pre className="overflow-x-auto rounded bg-accent/50 p-2 text-xs text-[#848b9b] max-h-48 overflow-y-auto">
                             {JSON.stringify(fix.original_node, null, 2)}
                           </pre>
                         </div>
                         <div>
                           <p className="text-xs font-medium text-emerald-400 mb-1">After</p>
-                          <pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-foreground max-h-48 overflow-y-auto">
+                          <pre className="overflow-x-auto rounded bg-emerald-400/5 p-2 text-xs text-[#e2e5eb] max-h-48 overflow-y-auto">
                             {JSON.stringify(fix.fixed_node, null, 2)}
                           </pre>
                         </div>
@@ -150,7 +150,7 @@ export function AIFixReviewModal({ fixes, onApply, onApplyAll, onClose }: AIFixR
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-between border-t border-border px-6 py-4">
+        <div className="flex items-center justify-between border-t border-[#1e2130] px-6 py-4">
           <Button variant="secondary" onClick={onClose}>
             {allHandled ? 'Done' : 'Cancel'}
           </Button>
diff --git a/frontend/src/components/tree-editor/AnswerStubCard.tsx b/frontend/src/components/tree-editor/AnswerStubCard.tsx
index 277e8aea..79389951 100644
--- a/frontend/src/components/tree-editor/AnswerStubCard.tsx
+++ b/frontend/src/components/tree-editor/AnswerStubCard.tsx
@@ -32,7 +32,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
     <div
       ref={cardRef}
       className={cn(
-        'relative min-w-[180px] max-w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50',
+        'relative min-w-[180px] max-w-[280px] rounded-xl border-2 border-dashed border-[#1e2130] bg-[#14161d]/50',
         'transition-all duration-150',
         !picking && !confirming && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30'
       )}
@@ -43,7 +43,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
         <button
           type="button"
           onClick={(e) => { e.stopPropagation(); setConfirming(true) }}
-          className="absolute top-1.5 right-1.5 rounded p-0.5 text-muted-foreground/40 hover:bg-red-500/10 hover:text-red-400 transition-colors"
+          className="absolute top-1.5 right-1.5 rounded p-0.5 text-[#848b9b]/40 hover:bg-red-500/10 hover:text-red-400 transition-colors"
           title="Delete stub"
         >
           <Trash2 className="h-3 w-3" />
@@ -51,33 +51,33 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
       )}
 
       {/* Label */}
-      <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
+      <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-[#e2e5eb] text-center">
         {label}
       </div>
 
       {/* Confirm delete */}
       {confirming ? (
         <div className="px-2 pb-2.5 text-center space-y-1.5">
-          <p className="text-[10px] text-muted-foreground">Delete this stub?</p>
+          <p className="text-[10px] text-[#848b9b]">Delete this stub?</p>
           <div className="flex items-center justify-center gap-1.5">
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onDelete(node.id) }}
-              className="rounded-md px-2 py-1 text-[10px] font-label border border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20"
+              className="rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-red-500/30 bg-red-500/10 text-red-400 hover:bg-red-500/20"
             >
               Delete
             </button>
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); setConfirming(false) }}
-              className="rounded-md px-2 py-1 text-[10px] font-label border border-border text-muted-foreground hover:bg-accent"
+              className="rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-[#1e2130] text-[#848b9b] hover:bg-accent"
             >
               Cancel
             </button>
           </div>
         </div>
       ) : !picking ? (
-        <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-label">
+        <div className="pb-2.5 text-center text-[10px] text-[#848b9b] font-sans text-xs">
           + Choose Type
         </div>
       ) : (
@@ -86,7 +86,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
             type="button"
             onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'decision') }}
             className={cn(
-              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label',
+              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs',
               'border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20'
             )}
           >
@@ -96,7 +96,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
             type="button"
             onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'action') }}
             className={cn(
-              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label',
+              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs',
               'border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20'
             )}
           >
@@ -106,7 +106,7 @@ export function AnswerStubCard({ node, fromOption, onSelectType, onDelete }: Ans
             type="button"
             onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'solution') }}
             className={cn(
-              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label',
+              'flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs',
               'border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20'
             )}
           >
diff --git a/frontend/src/components/tree-editor/DynamicArrayField.tsx b/frontend/src/components/tree-editor/DynamicArrayField.tsx
index e004d4f1..dd1f4a0f 100644
--- a/frontend/src/components/tree-editor/DynamicArrayField.tsx
+++ b/frontend/src/components/tree-editor/DynamicArrayField.tsx
@@ -51,7 +51,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveUp(index)}
                 disabled={index === 0}
-                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
+                className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-30"
                 title="Move up"
                 aria-label="Move up"
               >
@@ -61,7 +61,7 @@ export function DynamicArrayField<T>({
                 type="button"
                 onClick={() => handleMoveDown(index)}
                 disabled={index === items.length - 1}
-                className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-30"
+                className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] disabled:opacity-30"
                 title="Move down"
                 aria-label="Move down"
               >
@@ -78,7 +78,7 @@ export function DynamicArrayField<T>({
             <button
               type="button"
               onClick={() => onRemove(index)}
-              className="mt-1 rounded p-1 text-muted-foreground hover:bg-red-400/20 hover:text-red-400"
+              className="mt-1 rounded p-1 text-[#848b9b] hover:bg-red-400/20 hover:text-red-400"
               title="Remove"
               aria-label="Remove"
             >
@@ -94,9 +94,9 @@ export function DynamicArrayField<T>({
           type="button"
           onClick={onAdd}
           className={cn(
-            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-border',
-            'px-3 py-2 text-sm text-muted-foreground',
-            'hover:border-border hover:text-foreground'
+            'flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-[#1e2130]',
+            'px-3 py-2 text-sm text-[#848b9b]',
+            'hover:border-[#1e2130] hover:text-[#e2e5eb]'
           )}
         >
           <Plus className="h-4 w-4" />
@@ -106,7 +106,7 @@ export function DynamicArrayField<T>({
 
       {/* Empty state */}
       {items.length === 0 && !canAdd && (
-        <p className="text-center text-sm text-muted-foreground">No items</p>
+        <p className="text-center text-sm text-[#848b9b]">No items</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/tree-editor/FlowCanvas.tsx b/frontend/src/components/tree-editor/FlowCanvas.tsx
index 05a5b83c..2dfc7ef9 100644
--- a/frontend/src/components/tree-editor/FlowCanvas.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvas.tsx
@@ -147,13 +147,13 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
       >
         <GlowEdgeDefs />
         <Background variant={BackgroundVariant.Dots} gap={20} size={1.5} color="oklch(0.63 0.02 260 / 0.25)" />
-        <Controls showInteractive={false} className="bg-card! border-border! shadow-lg!" />
+        <Controls showInteractive={false} className="bg-[#14161d]! border-[#1e2130]! shadow-lg!" />
         {minimapVisible && (
           <MiniMap
             pannable
             zoomable
             nodeColor={minimapNodeColor}
-            className="bg-card! border-border!"
+            className="bg-[#14161d]! border-[#1e2130]!"
             nodeStrokeWidth={2}
           />
         )}
@@ -163,7 +163,7 @@ function FlowCanvasInner({ selectedNodeId, onNodeSelect, onSelectAnswerType, onN
       <button
         onClick={() => setMinimapVisible(v => !v)}
         className={cn(
-          'absolute bottom-2 right-2 z-10 rounded-lg border border-border bg-card p-2 text-muted-foreground shadow-lg hover:bg-accent hover:text-foreground transition-colors',
+          'absolute bottom-2 right-2 z-10 rounded-lg border border-[#1e2130] bg-[#14161d] p-2 text-[#848b9b] shadow-lg hover:bg-accent hover:text-[#e2e5eb] transition-colors',
           minimapVisible && 'bottom-[170px]'
         )}
         title={minimapVisible ? 'Hide minimap' : 'Show minimap'}
diff --git a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
index 9b37ce3a..4b1f0944 100644
--- a/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasAnswerNode.tsx
@@ -20,18 +20,18 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
 
       <div
         className={cn(
-          'w-[280px] rounded-xl border-2 border-dashed border-border bg-card/50 transition-all',
+          'w-[280px] rounded-xl border-2 border-dashed border-[#1e2130] bg-[#14161d]/50 transition-all',
           !picking && 'cursor-pointer hover:border-primary/40 hover:bg-accent/30',
           selected && 'ring-1 ring-primary'
         )}
         onClick={() => !picking && setPicking(true)}
       >
-        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-foreground text-center">
+        <div className="px-3 pt-2.5 pb-1 text-sm font-heading font-medium text-[#e2e5eb] text-center">
           {label}
         </div>
 
         {!picking ? (
-          <div className="pb-2.5 text-center text-[10px] text-muted-foreground font-label">
+          <div className="pb-2.5 text-center text-[10px] text-[#848b9b] font-sans text-xs">
             + Choose Type
           </div>
         ) : (
@@ -39,21 +39,21 @@ function FlowCanvasAnswerNodeComponent({ data, selected }: NodeProps) {
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'decision') }}
-              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20"
             >
               <HelpCircle className="h-2.5 w-2.5" /> Decision
             </button>
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'action') }}
-              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20"
             >
               <Zap className="h-2.5 w-2.5" /> Action
             </button>
             <button
               type="button"
               onClick={(e) => { e.stopPropagation(); onSelectType(node.id, 'solution') }}
-              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-label border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20"
+              className="flex items-center gap-1 rounded-md px-2 py-1 text-[10px] font-sans text-xs border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20"
             >
               <CheckCircle className="h-2.5 w-2.5" /> Solution
             </button>
diff --git a/frontend/src/components/tree-editor/FlowCanvasNode.tsx b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
index 7341523d..14014447 100644
--- a/frontend/src/components/tree-editor/FlowCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/FlowCanvasNode.tsx
@@ -69,7 +69,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
       <div
         onContextMenu={(e) => onContextMenu?.(e, node.id)}
         className={cn(
-          'group w-[280px] rounded-xl border border-border bg-card shadow-xs cursor-pointer transition-all',
+          'group w-[280px] rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs cursor-pointer transition-all',
           config.borderClass,
           selected && 'ring-1 ring-primary shadow-md',
           isGhost && 'border-dashed border-primary/40! opacity-60'
@@ -83,13 +83,13 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
           </span>
 
           {/* Title */}
-          <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
+          <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">
             {title}
           </span>
 
           {/* Badges */}
           {isNew && (
-            <span className="rounded-full bg-yellow-500/20 px-1.5 py-0.5 text-[10px] font-label text-yellow-400">
+            <span className="rounded-full bg-yellow-500/20 px-1.5 py-0.5 text-[10px] font-sans text-xs text-yellow-400">
               New
             </span>
           )}
@@ -105,7 +105,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
                 e.stopPropagation()
                 onDelete(node.id)
               }}
-              className="shrink-0 rounded-md p-1 text-muted-foreground opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
+              className="shrink-0 rounded-md p-1 text-[#848b9b] opacity-0 group-hover:opacity-100 hover:bg-red-500/20 hover:text-red-400 transition-all"
               title="Delete node"
             >
               <Trash2 className="h-3.5 w-3.5" />
@@ -115,19 +115,19 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Decision options preview */}
         {node.type === 'decision' && optionCount > 0 && (
-          <div className="border-t border-border px-3 py-1.5">
-            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <span className="font-label">{optionCount} option{optionCount !== 1 ? 's' : ''}</span>
+          <div className="border-t border-[#1e2130] px-3 py-1.5">
+            <div className="flex items-center gap-1.5 text-xs text-[#848b9b]">
+              <span className="font-sans text-xs">{optionCount} option{optionCount !== 1 ? 's' : ''}</span>
             </div>
             <div className="mt-1 space-y-0.5">
               {node.options!.slice(0, 3).map((opt, i) => (
-                <div key={opt.id} className="truncate text-xs text-muted-foreground">
-                  <span className="font-label text-foreground/60">{String.fromCharCode(65 + i)}</span>{' '}
+                <div key={opt.id} className="truncate text-xs text-[#848b9b]">
+                  <span className="font-sans text-xs text-[#e2e5eb]/60">{String.fromCharCode(65 + i)}</span>{' '}
                   {opt.label || '(empty)'}
                 </div>
               ))}
               {optionCount > 3 && (
-                <div className="text-xs text-muted-foreground">+{optionCount - 3} more</div>
+                <div className="text-xs text-[#848b9b]">+{optionCount - 3} more</div>
               )}
             </div>
           </div>
@@ -135,31 +135,31 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Description preview for action/solution */}
         {(node.type === 'action' || node.type === 'solution') && node.description && (
-          <div className="border-t border-border px-3 py-1.5">
-            <div className="line-clamp-2 text-xs text-muted-foreground">{node.description}</div>
+          <div className="border-t border-[#1e2130] px-3 py-1.5">
+            <div className="line-clamp-2 text-xs text-[#848b9b]">{node.description}</div>
           </div>
         )}
 
         {/* Collapse chevron */}
         {hasChildren && (
-          <div className="flex justify-center border-t border-border py-1">
+          <div className="flex justify-center border-t border-[#1e2130] py-1">
             <button
               type="button"
               onClick={(e) => {
                 e.stopPropagation()
                 onToggleCollapse(node.id)
               }}
-              className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              className="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb] transition-colors"
             >
               {isCollapsed ? (
                 <>
                   <ChevronRight className="h-3 w-3" />
-                  <span className="font-label">Expand</span>
+                  <span className="font-sans text-xs">Expand</span>
                 </>
               ) : (
                 <>
                   <ChevronDown className="h-3 w-3" />
-                  <span className="font-label">Collapse</span>
+                  <span className="font-sans text-xs">Collapse</span>
                 </>
               )}
             </button>
@@ -168,7 +168,7 @@ function FlowCanvasNodeComponent({ data, selected }: NodeProps) {
 
         {/* Ghost node accept/dismiss overlay */}
         {isGhost && (
-          <div className="mt-2 flex gap-2 border-t border-border/50 pt-2 px-3 pb-2">
+          <div className="mt-2 flex gap-2 border-t border-[#1e2130]/50 pt-2 px-3 pb-2">
             <button
               onClick={(e) => {
                 e.stopPropagation()
diff --git a/frontend/src/components/tree-editor/MetadataSidePanel.tsx b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
index 65a6e817..e811239c 100644
--- a/frontend/src/components/tree-editor/MetadataSidePanel.tsx
+++ b/frontend/src/components/tree-editor/MetadataSidePanel.tsx
@@ -28,26 +28,26 @@ export function MetadataSidePanel({ isOpen, onClose }: MetadataSidePanelProps) {
     <>
       {/* Backdrop — click to close */}
       <div
-        className="fixed inset-0 z-40 bg-background/40 backdrop-blur-xs"
+        className="fixed inset-0 z-40 bg-[#0c0d10]/40"
         onClick={onClose}
         aria-hidden="true"
       />
 
       {/* Side panel — slides in from right */}
       <div
-        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-border bg-card shadow-xl"
+        className="fixed right-0 top-0 z-50 flex h-full w-80 flex-col border-l border-[#1e2130] bg-[#14161d] shadow-xl"
         role="dialog"
         aria-label="Flow metadata"
       >
         {/* Panel header */}
-        <div className="flex items-center justify-between border-b border-border px-4 py-3">
-          <h2 className="text-sm font-semibold text-foreground font-heading">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-4 py-3">
+          <h2 className="text-sm font-semibold text-[#e2e5eb] font-heading">
             Flow Details
           </h2>
           <button
             type="button"
             onClick={onClose}
-            className="rounded p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="rounded p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             aria-label="Close metadata panel"
           >
             <X className="h-4 w-4" />
diff --git a/frontend/src/components/tree-editor/NodeEditorModal.tsx b/frontend/src/components/tree-editor/NodeEditorModal.tsx
index 43312d96..f81a455f 100644
--- a/frontend/src/components/tree-editor/NodeEditorModal.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorModal.tsx
@@ -85,7 +85,7 @@ export function NodeEditorModal({ node, onClose, isNewNode = false }: NodeEditor
   return (
     <Modal isOpen={true} onClose={onClose} title={getTitle()} size="lg" footer={footerContent} allowFullScreen={true}>
       {/* Node ID display */}
-      <div className="mb-4 text-xs text-muted-foreground">
+      <div className="mb-4 text-xs text-[#848b9b]">
         Node ID: <code className="rounded bg-accent px-1 py-0.5">{node.id}</code>
       </div>
 
diff --git a/frontend/src/components/tree-editor/NodeEditorPanel.tsx b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
index c1362b06..4e2e8c7a 100644
--- a/frontend/src/components/tree-editor/NodeEditorPanel.tsx
+++ b/frontend/src/components/tree-editor/NodeEditorPanel.tsx
@@ -135,17 +135,17 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
   // Answer stub: show type picker instead of form
   if (node.type === 'answer') {
     return (
-      <div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
-        <div className="flex items-center justify-between border-b border-border px-4 py-3">
-          <span className="text-sm font-heading font-medium text-foreground">
+      <div ref={panelRef} className="flex h-full w-[400px] shrink-0 flex-col border-l border-[#1e2130] bg-[#14161d]">
+        <div className="flex items-center justify-between border-b border-[#1e2130] px-4 py-3">
+          <span className="text-sm font-heading font-medium text-[#e2e5eb]">
             {node.title || 'Answer Placeholder'}
           </span>
-          <button onClick={handleClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
+          <button onClick={handleClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
             <X className="h-4 w-4" />
           </button>
         </div>
         <div className="flex flex-1 flex-col items-center justify-center gap-4 px-4">
-          <p className="text-sm text-muted-foreground text-center">Choose a type for this node:</p>
+          <p className="text-sm text-[#848b9b] text-center">Choose a type for this node:</p>
           <div className="flex gap-2">
             {(['decision', 'action', 'solution'] as const).map(type => {
               const cfg = TYPE_CONFIG[type]
@@ -156,7 +156,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
                   type="button"
                   onClick={() => onSelectType?.(nodeId, type)}
                   className={cn(
-                    'flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-label border transition-colors',
+                    'flex items-center gap-1.5 rounded-lg px-3 py-2 text-sm font-sans text-xs border transition-colors',
                     type === 'decision' && 'border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20',
                     type === 'action' && 'border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20',
                     type === 'solution' && 'border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20',
@@ -178,14 +178,14 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
   const isRoot = treeStructure?.id === nodeId
 
   return (
-    <div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-border bg-card">
+    <div ref={panelRef} className="flex h-full min-h-0 w-[400px] shrink-0 flex-col border-l border-[#1e2130] bg-[#14161d]">
       {/* Header */}
-      <div className="flex items-center gap-2 border-b border-border px-4 py-3 shrink-0">
+      <div className="flex items-center gap-2 border-b border-[#1e2130] px-4 py-3 shrink-0">
         <span className={cn('flex h-5 w-5 shrink-0 items-center justify-center rounded', config.badgeClass)}>
           <TypeIcon className="h-3 w-3" />
         </span>
-        <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">{title}</span>
-        <button onClick={handleClose} className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-foreground">
+        <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">{title}</span>
+        <button onClick={handleClose} className="rounded-md p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
           <X className="h-4 w-4" />
         </button>
       </div>
@@ -198,20 +198,20 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
       </div>
 
       {/* Footer */}
-      <div className="sticky bottom-0 flex items-center gap-2 border-t border-border bg-card px-4 py-3 shrink-0">
+      <div className="sticky bottom-0 flex items-center gap-2 border-t border-[#1e2130] bg-[#14161d] px-4 py-3 shrink-0">
         <button
           onClick={handleSave}
           disabled={!isDirty}
           className={cn(
-            'flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20 transition-opacity',
-            isDirty ? 'bg-gradient-brand hover:opacity-90' : 'bg-gradient-brand opacity-50 cursor-not-allowed'
+            'flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium text-white transition-opacity',
+            isDirty ? 'bg-[#22d3ee] hover:brightness-110' : 'bg-[#22d3ee] opacity-50 cursor-not-allowed'
           )}
         >
           <Save className="h-3.5 w-3.5" /> Save
         </button>
         <button
           onClick={handleClose}
-          className="rounded-lg border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+          className="rounded-lg border border-[#1e2130] px-4 py-2 text-sm text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
         >
           Cancel
         </button>
@@ -220,7 +220,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
           <>
             <button
               onClick={handleDuplicate}
-              className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="rounded-md p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
               title="Duplicate"
             >
               <Copy className="h-4 w-4" />
@@ -235,7 +235,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
                 </button>
                 <button
                   onClick={() => setShowDeleteConfirm(false)}
-                  className="rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
+                  className="rounded-md px-2 py-1 text-xs text-[#848b9b] hover:bg-accent"
                 >
                   Cancel
                 </button>
@@ -243,7 +243,7 @@ export function NodeEditorPanel({ nodeId, onClose, onSelectType }: NodeEditorPan
             ) : (
               <button
                 onClick={() => setShowDeleteConfirm(true)}
-                className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
+                className="rounded-md p-2 text-[#848b9b] hover:bg-accent hover:text-red-400"
                 title="Delete"
               >
                 <Trash2 className="h-4 w-4" />
diff --git a/frontend/src/components/tree-editor/NodeFormAction.tsx b/frontend/src/components/tree-editor/NodeFormAction.tsx
index 7fe6d886..b86a3cdb 100644
--- a/frontend/src/components/tree-editor/NodeFormAction.tsx
+++ b/frontend/src/components/tree-editor/NodeFormAction.tsx
@@ -51,7 +51,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="block text-sm font-medium text-[#e2e5eb]">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -61,9 +61,9 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           placeholder="e.g., Restart the Service"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-card text-foreground placeholder:text-muted-foreground',
+            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            titleError ? 'border-red-400' : 'border-border'
+            titleError ? 'border-red-400' : 'border-[#1e2130]'
           )}
         />
         {titleError && (
@@ -74,7 +74,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+          <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
             Description
             <InfoTip text="Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`" />
           </label>
@@ -82,14 +82,14 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
+              className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
+          <div className="mt-1 rounded-md border border-[#1e2130] bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -105,8 +105,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 **Note:** Important information here"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-              'bg-background text-foreground placeholder:text-muted-foreground',
+              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+              'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
@@ -115,7 +115,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Commands */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
           Commands
           <InfoTip text="PowerShell or CLI commands to execute" />
         </label>
@@ -132,8 +132,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               onChange={(e) => handleUpdateCommand(index, e.target.value)}
               placeholder="e.g., Get-Service BrokerAgent"
               className={cn(
-                'block w-full rounded-md border border-border px-3 py-2 font-mono text-sm',
-                'bg-background text-foreground placeholder:text-muted-foreground',
+                'block w-full rounded-md border border-[#1e2130] px-3 py-2 font-mono text-sm',
+                'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
               )}
             />
@@ -143,7 +143,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Expected Outcome */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="block text-sm font-medium text-[#e2e5eb]">
           Expected Outcome
         </label>
         <input
@@ -152,8 +152,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
           onChange={(e) => onUpdate({ expected_outcome: e.target.value })}
           placeholder="e.g., Service should show as Running"
           className={cn(
-            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-            'bg-background text-foreground placeholder:text-muted-foreground',
+            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+            'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
@@ -161,13 +161,13 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
 
       {/* Link to existing node */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
           <Link2 className="h-3.5 w-3.5" />
           Next Step
         </label>
         {hasNextNode ? (
           <div className="mt-1 flex items-center gap-2 rounded-md border border-primary/30 bg-primary/5 px-3 py-2">
-            <span className="flex-1 truncate text-sm text-foreground">
+            <span className="flex-1 truncate text-sm text-[#e2e5eb]">
               Linked to: {(() => {
                 const treeStructure = useTreeEditorStore.getState().treeStructure
                 const allNodes = collectAllNodesFlat(treeStructure)
@@ -178,7 +178,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             <button
               type="button"
               onClick={() => onUpdate({ next_node_id: undefined })}
-              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
               title="Remove link"
             >
               <X className="h-3.5 w-3.5" />
@@ -193,8 +193,8 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
               }
             }}
             className={cn(
-              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-              'bg-card text-foreground',
+              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+              'bg-[#14161d] text-[#e2e5eb]',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
@@ -212,7 +212,7 @@ export function NodeFormAction({ node, onUpdate }: NodeFormActionProps) {
             })()}
           </select>
         )}
-        <p className="mt-1 text-xs text-muted-foreground">
+        <p className="mt-1 text-xs text-[#848b9b]">
           {hasNextNode
             ? 'This action will navigate to the linked node.'
             : 'Select a node to navigate to after this action, or save to create a new placeholder.'}
diff --git a/frontend/src/components/tree-editor/NodeFormDecision.tsx b/frontend/src/components/tree-editor/NodeFormDecision.tsx
index eb84019a..b595414d 100644
--- a/frontend/src/components/tree-editor/NodeFormDecision.tsx
+++ b/frontend/src/components/tree-editor/NodeFormDecision.tsx
@@ -91,7 +91,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Question */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="block text-sm font-medium text-[#e2e5eb]">
           {isRootNode ? 'Starting Question' : 'Question'} <span className="text-red-400">*</span>
         </label>
         <input
@@ -103,9 +103,9 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
             : "e.g., Can you ping the server?"}
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-card text-foreground placeholder:text-muted-foreground',
+            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            questionError ? 'border-red-400' : 'border-border'
+            questionError ? 'border-red-400' : 'border-[#1e2130]'
           )}
         />
         {questionError && (
@@ -115,7 +115,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Help Text */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="block text-sm font-medium text-[#e2e5eb]">
           Help Text
         </label>
         <textarea
@@ -124,8 +124,8 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
           placeholder="Additional context or instructions for this decision..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-            'bg-background text-foreground placeholder:text-muted-foreground',
+            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+            'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
           )}
         />
@@ -133,13 +133,13 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
       {/* Options */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
           {isRootNode ? 'Answer Options (Branches)' : 'Options'} <span className="text-red-400">*</span>
           <InfoTip text={isRootNode
             ? "Add as many options as needed (A, B, C, D...). Each option leads to a different troubleshooting path."
             : "Each option can branch to a different next step."} />
         </label>
-        <p className="text-xs text-muted-foreground mt-1">Options become answer placeholders you can fill in later.</p>
+        <p className="text-xs text-[#848b9b] mt-1">Options become answer placeholders you can fill in later.</p>
         {optionsError && (
           <p className="mt-1 text-xs text-red-400">{optionsError.message}</p>
         )}
@@ -162,7 +162,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                 <div className="flex items-center gap-2">
                   <span className={cn(
                     'flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold',
-                    isRootNode ? 'bg-blue-500/20 text-blue-400' : 'bg-accent text-muted-foreground'
+                    isRootNode ? 'bg-blue-500/20 text-blue-400' : 'bg-accent text-[#848b9b]'
                   )}>
                     {letter}
                   </span>
@@ -186,9 +186,9 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                       }}
                       className={cn(
                         'block w-full rounded-md border px-3 py-2 text-sm',
-                        'bg-background text-foreground placeholder:text-muted-foreground',
+                        'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
                         'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary',
-                        optionLabelError ? 'border-red-400' : 'border-border'
+                        optionLabelError ? 'border-red-400' : 'border-[#1e2130]'
                       )}
                     />
                     {optionLabelError && (
@@ -205,7 +205,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
                     const target = allNodes.find(n => n.id === option.next_node_id)
                     if (!target) return null
                     return (
-                      <div className="flex items-center gap-1 text-xs text-primary" title={`Links to: ${target.label}`}>
+                      <div className="flex items-center gap-1 text-xs text-[#22d3ee]" title={`Links to: ${target.label}`}>
                         <Link2 className="h-3 w-3" />
                       </div>
                     )
@@ -218,20 +218,20 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
         {/* Quick-link: assign an option to an existing node */}
         <details className="mt-2">
-          <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
+          <summary className="cursor-pointer text-xs text-[#848b9b] hover:text-[#e2e5eb]">
             <Link2 className="inline h-3 w-3 mr-1" />
             Link an option to an existing node (cross-reference)
           </summary>
-          <div className="mt-2 space-y-2 rounded-md border border-border bg-accent/30 p-3">
-            <p className="text-xs text-muted-foreground">
+          <div className="mt-2 space-y-2 rounded-md border border-[#1e2130] bg-accent/30 p-3">
+            <p className="text-xs text-[#848b9b]">
               Select an option, then pick a target node. This creates a loop-back or cross-reference.
             </p>
             <div className="flex gap-2">
               <select
                 id="xref-option-select"
                 className={cn(
-                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
-                  'bg-card text-foreground'
+                  'flex-1 rounded-md border border-[#1e2130] px-2 py-1.5 text-xs',
+                  'bg-[#14161d] text-[#e2e5eb]'
                 )}
                 defaultValue=""
               >
@@ -245,8 +245,8 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
               <select
                 id="xref-target-select"
                 className={cn(
-                  'flex-1 rounded-md border border-border px-2 py-1.5 text-xs',
-                  'bg-card text-foreground'
+                  'flex-1 rounded-md border border-[#1e2130] px-2 py-1.5 text-xs',
+                  'bg-[#14161d] text-[#e2e5eb]'
                 )}
                 defaultValue=""
                 onChange={(e) => {
@@ -280,7 +280,7 @@ export function NodeFormDecision({ node, onUpdate }: NodeFormDecisionProps) {
 
         {/* Example hint for root node */}
         {isRootNode && (node.options?.length || 0) < 2 && (
-          <div className="mt-3 rounded-md border border-dashed border-border bg-accent/50 p-3 text-xs text-muted-foreground">
+          <div className="mt-3 rounded-md border border-dashed border-[#1e2130] bg-accent/50 p-3 text-xs text-[#848b9b]">
             <strong>Tip:</strong> Most troubleshooting trees start with 2-5 main branches.
             For example: "Connection Issues", "Performance Problems", "Error Messages", "Other".
           </div>
diff --git a/frontend/src/components/tree-editor/NodeFormResolution.tsx b/frontend/src/components/tree-editor/NodeFormResolution.tsx
index 4541813a..084459af 100644
--- a/frontend/src/components/tree-editor/NodeFormResolution.tsx
+++ b/frontend/src/components/tree-editor/NodeFormResolution.tsx
@@ -48,7 +48,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
     <div className="space-y-4">
       {/* Title */}
       <div>
-        <label className="block text-sm font-medium text-foreground">
+        <label className="block text-sm font-medium text-[#e2e5eb]">
           Title <span className="text-red-400">*</span>
         </label>
         <input
@@ -58,9 +58,9 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
           placeholder="e.g., VDA Successfully Registered"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-card text-foreground placeholder:text-muted-foreground',
+            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            titleError ? 'border-red-400' : 'border-border'
+            titleError ? 'border-red-400' : 'border-[#1e2130]'
           )}
         />
         {titleError && (
@@ -71,7 +71,7 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
       {/* Description */}
       <div>
         <div className="flex items-center justify-between">
-          <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+          <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
             Description
             <InfoTip text="Supports markdown: **bold**, *italic*, - lists, 1. numbered lists, `code`" />
           </label>
@@ -79,14 +79,14 @@ export function NodeFormResolution({ node, onUpdate }: NodeFormResolutionProps)
             <button
               type="button"
               onClick={() => setShowPreview(!showPreview)}
-              className="text-xs text-muted-foreground hover:text-foreground hover:underline"
+              className="text-xs text-[#848b9b] hover:text-[#e2e5eb] hover:underline"
             >
               {showPreview ? 'Edit' : 'Preview'}
             </button>
           )}
         </div>
         {showPreview && node.description ? (
-          <div className="mt-1 rounded-md border border-border bg-accent/50 p-3 text-sm">
+          <div className="mt-1 rounded-md border border-[#1e2130] bg-accent/50 p-3 text-sm">
             <MarkdownContent content={node.description} />
           </div>
         ) : (
@@ -101,8 +101,8 @@ Document what was done and the outcome.
 **Close ticket as:** Resolved"
             rows={5}
             className={cn(
-              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-              'bg-background text-foreground placeholder:text-muted-foreground',
+              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+              'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
             )}
           />
@@ -111,7 +111,7 @@ Document what was done and the outcome.
 
       {/* Resolution Steps */}
       <div>
-        <label className="flex items-center gap-1.5 text-sm font-medium text-foreground">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-[#e2e5eb]">
           Resolution Steps
           <InfoTip text="Step-by-step instructions for resolving the issue" />
         </label>
@@ -132,8 +132,8 @@ Document what was done and the outcome.
                 onChange={(e) => handleUpdateStep(index, e.target.value)}
                 placeholder={`Step ${index + 1}`}
                 className={cn(
-                  'block w-full rounded-md border border-border px-3 py-2 text-sm',
-                  'bg-background text-foreground placeholder:text-muted-foreground',
+                  'block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+                  'bg-[#0c0d10] text-[#e2e5eb] placeholder:text-[#848b9b]',
                   'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary'
                 )}
               />
diff --git a/frontend/src/components/tree-editor/NodeList.tsx b/frontend/src/components/tree-editor/NodeList.tsx
index 2069b955..8769804a 100644
--- a/frontend/src/components/tree-editor/NodeList.tsx
+++ b/frontend/src/components/tree-editor/NodeList.tsx
@@ -99,7 +99,7 @@ function NodeListItem({
     decision: 'bg-blue-500/20 text-blue-400',
     action: 'bg-yellow-500/20 text-yellow-400',
     solution: 'bg-green-500/20 text-green-400',
-    answer: 'bg-muted text-muted-foreground border border-dashed border-border'
+    answer: 'bg-muted text-[#848b9b] border border-dashed border-[#1e2130]'
   }
 
   const getNodeLabel = () => {
@@ -132,7 +132,7 @@ function NodeListItem({
           <span
             key={i}
             className={cn(
-              'inline-block w-5 text-center text-muted-foreground/50',
+              'inline-block w-5 text-center text-[#848b9b]/50',
               showLine ? 'border-l border-muted-foreground/30' : ''
             )}
           >
@@ -140,10 +140,10 @@ function NodeListItem({
           </span>
         ))}
         {/* Render current level connector */}
-        <span className="inline-block w-5 text-center text-muted-foreground/50 font-mono text-xs">
+        <span className="inline-block w-5 text-center text-[#848b9b]/50 font-mono text-xs">
           {isLast ? '└' : '├'}
         </span>
-        <span className="inline-block w-3 text-muted-foreground/50 font-mono text-xs">──</span>
+        <span className="inline-block w-3 text-[#848b9b]/50 font-mono text-xs">──</span>
       </div>
     )
   }
@@ -187,7 +187,7 @@ function NodeListItem({
               ? 'bg-blue-500/20 ring-2 ring-blue-500 shadow-xs'
               : 'bg-blue-500/10 border border-blue-500/30 hover:bg-blue-500/15'
             : isSelected
-            ? 'bg-primary/10 ring-1 ring-primary'
+            ? 'bg-[rgba(34,211,238,0.10)] ring-1 ring-primary'
             : 'hover:bg-accent',
           hasError && 'ring-1 ring-destructive',
           hasWarning && !hasError && 'ring-1 ring-yellow-500'
@@ -204,9 +204,9 @@ function NodeListItem({
             className="rounded p-0.5 hover:bg-muted"
           >
             {isCollapsed ? (
-              <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+              <ChevronRight className="h-3.5 w-3.5 text-[#848b9b]" />
             ) : (
-              <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+              <ChevronDown className="h-3.5 w-3.5 text-[#848b9b]" />
             )}
           </button>
         ) : (
@@ -216,7 +216,7 @@ function NodeListItem({
         {/* Drag handle */}
         {node.id !== 'root' && (
           <GripVertical
-            className="h-4 w-4 cursor-grab text-muted-foreground opacity-0 group-hover:opacity-100"
+            className="h-4 w-4 cursor-grab text-[#848b9b] opacity-0 group-hover:opacity-100"
             onMouseDown={() => { gripInitiated.current = true }}
             onMouseUp={() => { gripInitiated.current = false }}
           />
@@ -238,13 +238,13 @@ function NodeListItem({
 
         {/* From option label */}
         {fromOption && (
-          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-[#848b9b]">
             {fromOption}
           </span>
         )}
 
         {/* Node label */}
-        <span className="flex-1 truncate text-foreground">
+        <span className="flex-1 truncate text-[#e2e5eb]">
           {getNodeLabel()}
         </span>
 
@@ -272,7 +272,7 @@ function NodeListItem({
 
         {/* Node ID */}
         <span
-          className="hidden text-xs text-muted-foreground sm:inline cursor-help"
+          className="hidden text-xs text-[#848b9b] sm:inline cursor-help"
           title={`Full ID: ${node.id}`}
         >
           {node.id === 'root' ? 'root' : node.id.slice(0, 8) + '...'}
@@ -289,7 +289,7 @@ function NodeListItem({
               }}
               title="Add child node"
               aria-label="Add child node"
-              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
             >
               <Plus className="h-3 w-3" />
             </button>
@@ -302,7 +302,7 @@ function NodeListItem({
             }}
             title="Edit node"
             aria-label="Edit node"
-            className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
           >
             <Pencil className="h-3 w-3" />
           </button>
@@ -316,7 +316,7 @@ function NodeListItem({
                 }}
                 title="Duplicate node"
                 aria-label="Duplicate node"
-                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-accent-foreground"
               >
                 <Copy className="h-3 w-3" />
               </button>
@@ -328,7 +328,7 @@ function NodeListItem({
                 }}
                 title="Delete node"
                 aria-label="Delete node"
-                className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
+                className="rounded p-1 text-[#848b9b] hover:bg-destructive/20 hover:text-destructive"
               >
                 <Trash2 className="h-3 w-3" />
               </button>
@@ -340,7 +340,7 @@ function NodeListItem({
       {/* Collapsed indicator */}
       {hasChildren && isCollapsed && (
         <div
-          className="text-xs text-muted-foreground py-1"
+          className="text-xs text-[#848b9b] py-1"
           style={{ marginLeft: `${(depth + 1) * 20 + 32}px` }}
         >
           <span className="rounded bg-muted px-2 py-0.5">
@@ -536,22 +536,22 @@ export function NodeList() {
 
   if (!treeStructure) {
     return (
-      <div className="rounded-lg border border-border bg-card p-4 text-center text-sm text-muted-foreground">
+      <div className="rounded-lg border border-[#1e2130] bg-[#14161d] p-4 text-center text-sm text-[#848b9b]">
         No tree structure. Add a root node to get started.
       </div>
     )
   }
 
   return (
-    <div className="rounded-lg border border-border bg-card">
-      <div className="flex items-center justify-between border-b border-border p-3">
+    <div className="rounded-lg border border-[#1e2130] bg-[#14161d]">
+      <div className="flex items-center justify-between border-b border-[#1e2130] p-3">
         <h2 className="text-sm font-semibold text-card-foreground">Nodes</h2>
         <button
           type="button"
           onClick={() => setAddingToParent(treeStructure.id)}
           className={cn(
             'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium',
-            'bg-primary text-primary-foreground hover:bg-primary/90'
+            'bg-primary text-[#22d3ee]-foreground hover:bg-primary/90'
           )}
         >
           <Plus className="h-3 w-3" />
@@ -581,8 +581,8 @@ export function NodeList() {
 
       {/* Add Node Type Selector */}
       {addingToParent && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-xs">
-          <div className="w-full max-w-xs rounded-lg border border-border bg-card p-4 shadow-lg">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-[#0c0d10]/80">
+          <div className="w-full max-w-xs rounded-lg border border-[#1e2130] bg-[#14161d] p-4 shadow-lg">
             <h3 className="mb-3 text-sm font-semibold">Select Node Type</h3>
             <div className="space-y-2">
               <button
@@ -596,7 +596,7 @@ export function NodeList() {
                 <HelpCircle className="h-4 w-4 text-blue-500" />
                 <div>
                   <div className="font-medium">Decision</div>
-                  <div className="text-xs text-muted-foreground">Question with options</div>
+                  <div className="text-xs text-[#848b9b]">Question with options</div>
                 </div>
               </button>
               <button
@@ -610,7 +610,7 @@ export function NodeList() {
                 <Zap className="h-4 w-4 text-yellow-500" />
                 <div>
                   <div className="font-medium">Action</div>
-                  <div className="text-xs text-muted-foreground">Task to perform</div>
+                  <div className="text-xs text-[#848b9b]">Task to perform</div>
                 </div>
               </button>
               <button
@@ -624,7 +624,7 @@ export function NodeList() {
                 <CheckCircle className="h-4 w-4 text-green-500" />
                 <div>
                   <div className="font-medium">Solution</div>
-                  <div className="text-xs text-muted-foreground">Resolution endpoint</div>
+                  <div className="text-xs text-[#848b9b]">Resolution endpoint</div>
                 </div>
               </button>
             </div>
diff --git a/frontend/src/components/tree-editor/NodePicker.tsx b/frontend/src/components/tree-editor/NodePicker.tsx
index 3b8ac0bb..32a18d64 100644
--- a/frontend/src/components/tree-editor/NodePicker.tsx
+++ b/frontend/src/components/tree-editor/NodePicker.tsx
@@ -145,7 +145,7 @@ export function NodePicker({
   return (
     <div className={className}>
       {label && (
-        <label className="mb-1 block text-sm font-medium text-foreground">
+        <label className="mb-1 block text-sm font-medium text-[#e2e5eb]">
           {label}
         </label>
       )}
@@ -153,8 +153,8 @@ export function NodePicker({
       {/* Inline node creation UI */}
       {creatingNodeType ? (
         <div className="space-y-2">
-          <div className="flex items-center gap-2 rounded-md border border-border bg-accent/50 p-2">
-            <span className="text-xs font-medium text-foreground">
+          <div className="flex items-center gap-2 rounded-md border border-[#1e2130] bg-accent/50 p-2">
+            <span className="text-xs font-medium text-[#e2e5eb]">
               New {NODE_TYPE_LABELS[creatingNodeType]}:
             </span>
             <input
@@ -165,8 +165,8 @@ export function NodePicker({
               onKeyDown={handleKeyDown}
               placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
               className={cn(
-                'flex-1 rounded-md border border-border px-2 py-1 text-sm',
-                'bg-card text-foreground placeholder:text-muted-foreground',
+                'flex-1 rounded-md border border-[#1e2130] px-2 py-1 text-sm',
+                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
             />
@@ -175,7 +175,7 @@ export function NodePicker({
             <button
               type="button"
               onClick={handleCancelCreate}
-              className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="flex-1 rounded-md border border-[#1e2130] px-3 py-1.5 text-xs font-medium text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             >
               Cancel
             </button>
@@ -185,7 +185,7 @@ export function NodePicker({
               disabled={!newNodeTitle.trim()}
               className={cn(
                 'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
-                'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
+                'bg-[#22d3ee] text-white hover:brightness-110',
                 'disabled:opacity-50 disabled:cursor-not-allowed'
               )}
             >
@@ -200,9 +200,9 @@ export function NodePicker({
             onChange={(e) => handleChange(e.target.value)}
             className={cn(
               'block w-full rounded-md border px-3 py-2 text-sm',
-              'bg-card text-foreground',
+              'bg-[#14161d] text-[#e2e5eb]',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-              error ? 'border-red-400' : 'border-border'
+              error ? 'border-red-400' : 'border-[#1e2130]'
             )}
           >
             <option value="">{placeholder}</option>
@@ -250,7 +250,7 @@ export function NodePicker({
 
           {/* Show what's selected */}
           {value && selectedNode && (
-            <p className="mt-1 text-xs text-muted-foreground">
+            <p className="mt-1 text-xs text-[#848b9b]">
               → {selectedNode.label}
             </p>
           )}
diff --git a/frontend/src/components/tree-editor/TreeCanvas.tsx b/frontend/src/components/tree-editor/TreeCanvas.tsx
index 56243d7d..dd6eb458 100644
--- a/frontend/src/components/tree-editor/TreeCanvas.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvas.tsx
@@ -64,14 +64,14 @@ interface AddNodePickerProps {
 
 function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
   return (
-    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-card px-3 py-2 shadow-xs">
-      <span className="text-xs text-muted-foreground shrink-0">Add:</span>
+    <div className="flex items-center gap-2 rounded-xl border border-dashed border-primary/40 bg-[#14161d] px-3 py-2 shadow-xs">
+      <span className="text-xs text-[#848b9b] shrink-0">Add:</span>
 
       <button
         type="button"
         onClick={() => onSelect('decision')}
         className={cn(
-          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
+          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
           'border border-blue-500/30 bg-blue-500/10 text-blue-400 hover:bg-blue-500/20'
         )}
       >
@@ -83,7 +83,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
         type="button"
         onClick={() => onSelect('action')}
         className={cn(
-          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
+          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
           'border border-yellow-500/30 bg-yellow-500/10 text-yellow-400 hover:bg-yellow-500/20'
         )}
       >
@@ -95,7 +95,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
         type="button"
         onClick={() => onSelect('solution')}
         className={cn(
-          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-label',
+          'flex items-center gap-1 rounded-md px-2 py-1 text-xs font-sans text-xs',
           'border border-green-500/30 bg-green-500/10 text-green-400 hover:bg-green-500/20'
         )}
       >
@@ -106,7 +106,7 @@ function AddNodePicker({ onSelect, onCancel }: AddNodePickerProps) {
       <button
         type="button"
         onClick={onCancel}
-        className="ml-1 rounded p-0.5 text-muted-foreground hover:bg-accent"
+        className="ml-1 rounded p-0.5 text-[#848b9b] hover:bg-accent"
       >
         <X className="h-3 w-3" />
       </button>
@@ -127,9 +127,9 @@ function AddNodeButton({ label = 'Add node', onClick }: AddNodeButtonProps) {
       type="button"
       onClick={onClick}
       className={cn(
-        'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-label',
-        'border border-dashed border-border text-muted-foreground',
-        'hover:border-primary/40 hover:text-foreground hover:bg-accent/50',
+        'flex items-center gap-1 rounded-lg px-3 py-1.5 text-xs font-sans text-xs',
+        'border border-dashed border-[#1e2130] text-[#848b9b]',
+        'hover:border-primary/40 hover:text-[#e2e5eb] hover:bg-accent/50',
         'transition-all duration-150'
       )}
     >
@@ -505,7 +505,7 @@ export function TreeCanvas() {
 
           {/* Option label tag (above card, shown when this is a branch from a decision) */}
           {optionLabel && (
-            <div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-muted-foreground font-label">
+            <div className="mb-1 rounded bg-muted px-2 py-0.5 text-[10px] text-[#848b9b] font-sans text-xs">
               {optionLabel}
             </div>
           )}
@@ -547,7 +547,7 @@ export function TreeCanvas() {
                 return (
                   <div key={opt.id} className="flex flex-col items-center gap-1">
                     <div className="h-4 w-px bg-border" />
-                    <span className="text-[10px] text-muted-foreground font-label">
+                    <span className="text-[10px] text-[#848b9b] font-sans text-xs">
                       {opt.label || '(unlabeled option)'}
                     </span>
                     {pendingAddKey === key ? (
@@ -594,7 +594,7 @@ export function TreeCanvas() {
               <button
                 type="button"
                 onClick={() => handleToggleSubtreeCollapse(node.id)}
-                className="rounded-full border border-dashed border-border bg-card px-3 py-1 text-[10px] text-muted-foreground font-label hover:border-primary/40 hover:text-foreground transition-colors"
+                className="rounded-full border border-dashed border-[#1e2130] bg-[#14161d] px-3 py-1 text-[10px] text-[#848b9b] font-sans text-xs hover:border-primary/40 hover:text-[#e2e5eb] transition-colors"
               >
                 {orderedChildren.length} node{orderedChildren.length !== 1 ? 's' : ''} hidden — click to expand
               </button>
@@ -676,7 +676,7 @@ export function TreeCanvas() {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <div className="mb-2 text-muted-foreground text-sm">
+          <div className="mb-2 text-[#848b9b] text-sm">
             No tree structure. Start by saving a tree name.
           </div>
         </div>
@@ -698,7 +698,7 @@ export function TreeCanvas() {
       <div className="flex min-h-full min-w-full items-start justify-center p-8 pb-24">
         <div className="flex flex-col items-center">
           {/* START badge above root */}
-          <div className="mb-2 rounded-full border border-border bg-card px-3 py-1 text-xs font-label text-muted-foreground">
+          <div className="mb-2 rounded-full border border-[#1e2130] bg-[#14161d] px-3 py-1 text-xs font-sans text-xs text-[#848b9b]">
             START
           </div>
           <div className="mb-1 h-4 w-px bg-border" />
diff --git a/frontend/src/components/tree-editor/TreeCanvasNode.tsx b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
index d1073e2e..e745b74c 100644
--- a/frontend/src/components/tree-editor/TreeCanvasNode.tsx
+++ b/frontend/src/components/tree-editor/TreeCanvasNode.tsx
@@ -168,7 +168,7 @@ export function TreeCanvasNode({
   return (
     <div
       className={cn(
-        'relative rounded-xl border border-border bg-card shadow-xs transition-all duration-150',
+        'relative rounded-xl border border-[#1e2130] bg-[#14161d] shadow-xs transition-all duration-150',
         config.borderClass,
         isExpanded && 'ring-1 ring-primary shadow-md',
         isSelected && !isExpanded && 'ring-1 ring-primary/50',
@@ -186,7 +186,7 @@ export function TreeCanvasNode({
           'flex items-center gap-2 px-3 py-2.5',
           !isExpanded && 'cursor-pointer hover:bg-accent/50 rounded-t-xl',
           !isExpanded && 'rounded-xl',
-          isExpanded && 'sticky top-0 z-10 bg-card rounded-t-xl'
+          isExpanded && 'sticky top-0 z-10 bg-[#14161d] rounded-t-xl'
         )}
         onClick={!isExpanded ? handleCardClick : undefined}
       >
@@ -200,20 +200,20 @@ export function TreeCanvasNode({
               onDragStart(e, node.id)
             }}
           >
-            <GripVertical className="h-4 w-4 text-muted-foreground/50" />
+            <GripVertical className="h-4 w-4 text-[#848b9b]/50" />
           </span>
         )}
 
         {/* Node type badge */}
         {isRoot ? (
-          <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold bg-blue-500/30 text-blue-400 font-label shrink-0">
+          <span className="flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold bg-blue-500/30 text-blue-400 font-sans text-xs shrink-0">
             <Play className="h-3 w-3" />
             START
           </span>
         ) : (
           <span
             className={cn(
-              'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-label shrink-0',
+              'flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-sans text-xs shrink-0',
               config.badgeClass
             )}
           >
@@ -224,21 +224,21 @@ export function TreeCanvasNode({
 
         {/* From-option label */}
         {fromOption && (
-          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground truncate max-w-[80px]">
+          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] text-[#848b9b] truncate max-w-[80px]">
             {fromOption}
           </span>
         )}
 
         {/* Title text (compact mode) */}
         {!isExpanded && (
-          <span className="flex-1 truncate text-sm font-heading font-medium text-foreground">
+          <span className="flex-1 truncate text-sm font-heading font-medium text-[#e2e5eb]">
             {getTitle()}
           </span>
         )}
 
         {/* Options count badge */}
         {!isExpanded && getOptionsSummary() && (
-          <span className="text-[10px] text-muted-foreground shrink-0 font-label">
+          <span className="text-[10px] text-[#848b9b] shrink-0 font-sans text-xs">
             {getOptionsSummary()}
           </span>
         )}
@@ -265,7 +265,7 @@ export function TreeCanvasNode({
 
         {/* Unsaved badge */}
         {!isExpanded && isNew && (
-          <span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label shrink-0">
+          <span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-sans text-xs shrink-0">
             Unsaved
           </span>
         )}
@@ -276,7 +276,7 @@ export function TreeCanvasNode({
             type="button"
             onClick={(e) => { e.stopPropagation(); onToggleSubtreeCollapse() }}
             title={isSubtreeCollapsed ? 'Expand subtree' : 'Collapse subtree'}
-            className="rounded p-0.5 text-muted-foreground/50 hover:bg-accent hover:text-foreground shrink-0"
+            className="rounded p-0.5 text-[#848b9b]/50 hover:bg-accent hover:text-[#e2e5eb] shrink-0"
           >
             {isSubtreeCollapsed
               ? <ChevronsUpDown className="h-3.5 w-3.5" />
@@ -287,9 +287,9 @@ export function TreeCanvasNode({
 
         {/* Expand/collapse chevron */}
         {!isExpanded ? (
-          <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <ChevronRight className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
         ) : (
-          <ChevronDown className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <ChevronDown className="h-3.5 w-3.5 text-[#848b9b] shrink-0" />
         )}
 
         {/* Editing action buttons (expanded state) */}
@@ -297,7 +297,7 @@ export function TreeCanvasNode({
           <div className="ml-auto flex items-center gap-1 shrink-0">
             {/* New badge */}
             {isNew && (
-              <span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-label">
+              <span className="rounded bg-yellow-500/20 px-1.5 py-0.5 text-[10px] text-yellow-500 font-sans text-xs">
                 Unsaved
               </span>
             )}
@@ -311,7 +311,7 @@ export function TreeCanvasNode({
                   onDuplicate(node.id)
                 }}
                 title="Duplicate node"
-                className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
               >
                 <Copy className="h-3.5 w-3.5" />
               </button>
@@ -326,7 +326,7 @@ export function TreeCanvasNode({
                   onDelete(node.id)
                 }}
                 title="Delete node"
-                className="rounded p-1 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
+                className="rounded p-1 text-[#848b9b] hover:bg-destructive/20 hover:text-destructive"
               >
                 <Trash2 className="h-3.5 w-3.5" />
               </button>
@@ -337,7 +337,7 @@ export function TreeCanvasNode({
               type="button"
               onClick={handleCancel}
               title={isNew ? 'Cancel (deletes this node)' : 'Cancel changes'}
-              className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="rounded p-1 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             >
               <X className="h-3.5 w-3.5" />
             </button>
@@ -347,7 +347,7 @@ export function TreeCanvasNode({
               type="button"
               onClick={handleSave}
               title="Save changes"
-              className="rounded p-1 bg-gradient-brand text-white hover:opacity-90"
+              className="rounded p-1 bg-[#22d3ee] text-white hover:brightness-110"
             >
               <Check className="h-3.5 w-3.5" />
             </button>
@@ -357,7 +357,7 @@ export function TreeCanvasNode({
 
       {/* Expanded editing area */}
       {isExpanded && (
-        <div className="border-t border-border px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
+        <div className="border-t border-[#1e2130] px-3 pb-3 pt-3 max-h-[70vh] overflow-y-auto">
           {/* Validation errors */}
           {(hasError || hasWarning) && (
             <div className="mb-3 space-y-1">
diff --git a/frontend/src/components/tree-editor/TreeEditorLayout.tsx b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
index c2e81d7b..49199160 100644
--- a/frontend/src/components/tree-editor/TreeEditorLayout.tsx
+++ b/frontend/src/components/tree-editor/TreeEditorLayout.tsx
@@ -46,11 +46,11 @@ export function TreeEditorLayout({
         <>
           {/* Code Mode: Monaco editor (60%) + Preview (40%) — unchanged */}
           <div className={cn(
-            'flex flex-col overflow-hidden border-border',
+            'flex flex-col overflow-hidden border-[#1e2130]',
             isMobile ? 'h-full w-full border-b' : 'w-3/5 border-r'
           )}>
             <Suspense fallback={
-              <div className="flex h-full items-center justify-center bg-card">
+              <div className="flex h-full items-center justify-center bg-[#14161d]">
                 <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
               </div>
             }>
diff --git a/frontend/src/components/tree-editor/TreeMetadataForm.tsx b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
index 53b441a7..2894856d 100644
--- a/frontend/src/components/tree-editor/TreeMetadataForm.tsx
+++ b/frontend/src/components/tree-editor/TreeMetadataForm.tsx
@@ -56,12 +56,12 @@ export function TreeMetadataForm() {
   )
 
   return (
-    <div className="space-y-4 bg-card border border-border rounded-2xl p-4">
-      <h2 className="text-sm font-semibold text-foreground">Tree Details</h2>
+    <div className="space-y-4 bg-[#14161d] border border-[#1e2130] rounded-2xl p-4">
+      <h2 className="text-sm font-semibold text-[#e2e5eb]">Tree Details</h2>
 
       {/* Name */}
       <div>
-        <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
+        <label htmlFor="tree-name" className="block text-sm font-medium text-[#e2e5eb]">
           Name <span className="text-red-400">*</span>
         </label>
         <input
@@ -72,9 +72,9 @@ export function TreeMetadataForm() {
           placeholder="e.g., VDA Registration Troubleshooting"
           className={cn(
             'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
-            'bg-card text-foreground placeholder:text-muted-foreground',
+            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20',
-            nameError ? 'border-red-400' : 'border-border'
+            nameError ? 'border-red-400' : 'border-[#1e2130]'
           )}
         />
         {nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>}
@@ -82,7 +82,7 @@ export function TreeMetadataForm() {
 
       {/* Description */}
       <div>
-        <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
+        <label htmlFor="tree-description" className="block text-sm font-medium text-[#e2e5eb]">
           Description
         </label>
         <textarea
@@ -92,8 +92,8 @@ export function TreeMetadataForm() {
           placeholder="Brief description of what this tree troubleshoots..."
           rows={2}
           className={cn(
-            'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-            'bg-card text-foreground placeholder:text-muted-foreground',
+            'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+            'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
             'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
           )}
         />
@@ -101,7 +101,7 @@ export function TreeMetadataForm() {
 
       {/* Category */}
       <div>
-        <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
+        <label htmlFor="tree-category" className="block text-sm font-medium text-[#e2e5eb]">
           Category
         </label>
         {!customCategory ? (
@@ -110,8 +110,8 @@ export function TreeMetadataForm() {
             value={categoryId || ''}
             onChange={(e) => handleCategoryChange(e.target.value)}
             className={cn(
-              'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
-              'bg-card text-foreground',
+              'mt-1 block w-full rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+              'bg-[#14161d] text-[#e2e5eb]',
               'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
             )}
           >
@@ -132,8 +132,8 @@ export function TreeMetadataForm() {
               onChange={(e) => setCategory(e.target.value)}
               placeholder="Enter new category"
               className={cn(
-                'block min-w-0 flex-1 rounded-md border border-border px-3 py-2 text-sm',
-                'bg-card text-foreground placeholder:text-muted-foreground',
+                'block min-w-0 flex-1 rounded-md border border-[#1e2130] px-3 py-2 text-sm',
+                'bg-[#14161d] text-[#e2e5eb] placeholder:text-[#848b9b]',
                 'focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20'
               )}
               autoFocus
@@ -145,7 +145,7 @@ export function TreeMetadataForm() {
                 setCategory('')
                 setCategoryId(null)
               }}
-              className="shrink-0 rounded-md border border-border px-2.5 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="shrink-0 rounded-md border border-[#1e2130] px-2.5 py-2 text-xs text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
             >
               Cancel
             </button>
@@ -155,7 +155,7 @@ export function TreeMetadataForm() {
 
       {/* Tags */}
       <div>
-        <label className="block text-sm font-medium text-foreground">Tags</label>
+        <label className="block text-sm font-medium text-[#e2e5eb]">Tags</label>
         <div className="mt-1">
           <TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." />
         </div>
@@ -163,13 +163,13 @@ export function TreeMetadataForm() {
 
       {/* Visibility */}
       <div>
-        <label className="block text-sm font-medium text-foreground">Visibility</label>
+        <label className="block text-sm font-medium text-[#e2e5eb]">Visibility</label>
         <div className="mt-2 flex gap-4">
           <label
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              !isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
+              !isPublic ? 'border-primary/30 bg-accent text-[#e2e5eb]' : 'border-[#1e2130] text-[#848b9b] hover:bg-accent/50'
             )}
           >
             <input
@@ -186,7 +186,7 @@ export function TreeMetadataForm() {
             className={cn(
               'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
               'transition-colors',
-              isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
+              isPublic ? 'border-primary/30 bg-accent text-[#e2e5eb]' : 'border-[#1e2130] text-[#848b9b] hover:bg-accent/50'
             )}
           >
             <input
@@ -200,7 +200,7 @@ export function TreeMetadataForm() {
             <span className="text-sm">Public</span>
           </label>
         </div>
-        <p className="mt-1 text-xs text-muted-foreground">
+        <p className="mt-1 text-xs text-[#848b9b]">
           {isPublic
             ? 'Anyone can view this tree'
             : 'Only you and your team can view this tree'}
diff --git a/frontend/src/components/tree-editor/ValidationSummary.tsx b/frontend/src/components/tree-editor/ValidationSummary.tsx
index 8e769735..2158d44e 100644
--- a/frontend/src/components/tree-editor/ValidationSummary.tsx
+++ b/frontend/src/components/tree-editor/ValidationSummary.tsx
@@ -76,8 +76,8 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
             className={cn(
               'flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium transition-colors',
               isFixing
-                ? 'bg-primary/10 text-primary cursor-wait'
-                : 'bg-gradient-brand text-white shadow-xs shadow-primary/20 hover:opacity-90'
+                ? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee] cursor-wait'
+                : 'bg-[#22d3ee] text-white shadow-xs shadow-primary/20 hover:brightness-110'
             )}
           >
             {isFixing ? (
@@ -114,7 +114,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
               <div className="flex-1">
                 <p className="text-red-400">{error.message}</p>
                 {error.nodeId && (
-                  <p className="mt-0.5 text-xs text-muted-foreground">
+                  <p className="mt-0.5 text-xs text-[#848b9b]">
                     Click to select {itemLabel}: {error.nodeId}
                   </p>
                 )}
@@ -138,7 +138,7 @@ export function ValidationSummary({ errors, onSelectNode, onFixWithAI, isFixing,
               <div className="flex-1">
                 <p className="text-yellow-400">{warning.message}</p>
                 {warning.nodeId && (
-                  <p className="mt-0.5 text-xs text-muted-foreground">
+                  <p className="mt-0.5 text-xs text-[#848b9b]">
                     Click to select {itemLabel}: {warning.nodeId}
                   </p>
                 )}
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
index 8f046c07..29ce19e2 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeEditor.tsx
@@ -167,7 +167,7 @@ export function CodeModeEditor() {
           beforeMount={handleEditorWillMount}
           onMount={handleEditorDidMount}
           loading={
-            <div className="flex h-full items-center justify-center bg-card">
+            <div className="flex h-full items-center justify-center bg-[#14161d]">
               <Spinner size="sm" className="h-6 w-6 border-t-foreground" />
             </div>
           }
diff --git a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
index b2a65638..733e2c16 100644
--- a/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
+++ b/frontend/src/components/tree-editor/code-mode/CodeModeToolbar.tsx
@@ -91,15 +91,15 @@ export function CodeModeToolbar({
   }, [])
 
   return (
-    <div className="flex items-center justify-between border-b border-border bg-card px-3 py-1.5">
+    <div className="flex items-center justify-between border-b border-[#1e2130] bg-[#14161d] px-3 py-1.5">
       <div className="flex items-center gap-2">
         {/* Insert Node dropdown */}
         <div className="relative" ref={dropdownRef}>
           <button
             onClick={() => setInsertOpen(!insertOpen)}
             className={cn(
-              'flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs font-medium text-muted-foreground',
-              'hover:bg-accent hover:text-foreground'
+              'flex items-center gap-1 rounded-md border border-[#1e2130] px-2.5 py-1 text-xs font-medium text-[#848b9b]',
+              'hover:bg-accent hover:text-[#e2e5eb]'
             )}
           >
             <Plus className="h-3 w-3" />
@@ -107,24 +107,24 @@ export function CodeModeToolbar({
             <ChevronDown className="h-3 w-3" />
           </button>
           {insertOpen && (
-            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-border bg-card py-1 shadow-xl">
+            <div className="absolute left-0 top-full z-50 mt-1 w-44 rounded-lg border border-[#1e2130] bg-[#14161d] py-1 shadow-xl">
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.decision); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-blue-400" />
                 Decision
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.action); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-amber-400" />
                 Action
               </button>
               <button
                 onClick={() => { onInsertTemplate(NODE_TEMPLATES.solution); setInsertOpen(false) }}
-                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground hover:bg-accent"
+                className="flex w-full items-center gap-2 px-3 py-1.5 text-xs text-[#848b9b] hover:bg-accent"
               >
                 <span className="h-2 w-2 rounded-full bg-emerald-400" />
                 Solution
@@ -139,8 +139,8 @@ export function CodeModeToolbar({
         <div className="flex items-center gap-1.5 text-xs">
           {isValidating ? (
             <>
-              <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              <span className="text-muted-foreground">Validating...</span>
+              <Loader2 className="h-3 w-3 animate-spin text-[#848b9b]" />
+              <span className="text-[#848b9b]">Validating...</span>
             </>
           ) : isValid ? (
             <>
@@ -173,8 +173,8 @@ export function CodeModeToolbar({
           className={cn(
             'flex items-center gap-1 rounded-md px-2 py-1 text-xs',
             syntaxHelpOpen
-              ? 'bg-accent text-foreground'
-              : 'text-muted-foreground hover:bg-accent hover:text-muted-foreground'
+              ? 'bg-accent text-[#e2e5eb]'
+              : 'text-[#848b9b] hover:bg-accent hover:text-[#848b9b]'
           )}
         >
           <HelpCircle className="h-3 w-3" />
diff --git a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
index 77b06cc0..a0911ca9 100644
--- a/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
+++ b/frontend/src/components/tree-editor/code-mode/SyntaxHelpPanel.tsx
@@ -10,17 +10,17 @@ export function SyntaxHelpPanel({ open, onClose }: SyntaxHelpPanelProps) {
   if (!open) return null
 
   return (
-    <div className="flex h-full flex-col border-l border-border bg-card">
-      <div className="flex items-center justify-between border-b border-border px-3 py-2">
-        <span className="text-xs font-medium text-muted-foreground">Syntax Reference</span>
+    <div className="flex h-full flex-col border-l border-[#1e2130] bg-[#14161d]">
+      <div className="flex items-center justify-between border-b border-[#1e2130] px-3 py-2">
+        <span className="text-xs font-medium text-[#848b9b]">Syntax Reference</span>
         <button
           onClick={onClose}
-          className="rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-muted-foreground"
+          className="rounded p-0.5 text-[#848b9b] hover:bg-accent hover:text-[#848b9b]"
         >
           <X className="h-3.5 w-3.5" />
         </button>
       </div>
-      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-muted-foreground">
+      <div className="flex-1 overflow-y-auto px-3 py-3 text-[11px] leading-relaxed text-[#848b9b]">
         <Section title="Node Structure">
           <Code>{`---
 id: node_id
@@ -82,7 +82,7 @@ Description paragraph.
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="mb-4">
-      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{title}</h4>
+      <h4 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wider text-[#848b9b]">{title}</h4>
       {children}
     </div>
   )
@@ -91,8 +91,8 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function Code({ children }: { children: string }) {
   return (
     <pre className={cn(
-      'mb-2 overflow-x-auto rounded-md border border-border bg-card px-2 py-1.5',
-      'text-[10px] leading-relaxed text-muted-foreground whitespace-pre'
+      'mb-2 overflow-x-auto rounded-md border border-[#1e2130] bg-[#14161d] px-2 py-1.5',
+      'text-[10px] leading-relaxed text-[#848b9b] whitespace-pre'
     )}>
       {children}
     </pre>
@@ -102,8 +102,8 @@ function Code({ children }: { children: string }) {
 function Row({ label, code }: { label: string; code: string }) {
   return (
     <div className="flex items-center justify-between py-0.5">
-      <span className="text-muted-foreground">{label}</span>
-      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-muted-foreground">{code}</code>
+      <span className="text-[#848b9b]">{label}</span>
+      <code className="rounded bg-accent px-1 py-0.5 text-[10px] text-[#848b9b]">{code}</code>
     </div>
   )
 }
diff --git a/frontend/src/components/ui/Button.tsx b/frontend/src/components/ui/Button.tsx
index 1f662ca2..76a20aa3 100644
--- a/frontend/src/components/ui/Button.tsx
+++ b/frontend/src/components/ui/Button.tsx
@@ -3,25 +3,25 @@ import { cn } from '@/lib/utils'
 import { Spinner } from '@/components/common/Spinner'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.97]',
+  'inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98]',
   {
     variants: {
       variant: {
         primary:
-          'bg-gradient-brand text-brand-dark font-semibold shadow-lg shadow-primary/20 hover:opacity-90',
+          'bg-[#22d3ee] text-brand-dark font-semibold hover:brightness-110',
         secondary:
-          'bg-white/[0.04] border border-brand-border text-foreground hover:border-white/[0.12] hover:bg-brand-border',
+          'bg-white/[0.04] border border-brand-border text-[#e2e5eb] hover:border-white/[0.12] hover:bg-brand-border',
         destructive:
           'bg-red-400/10 text-red-400 border border-red-400/20 hover:bg-red-400/20',
         ghost:
-          'text-muted-foreground hover:bg-accent hover:text-foreground',
+          'text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]',
         link:
-          'text-primary underline-offset-4 hover:underline p-0 h-auto',
+          'text-[#22d3ee] underline-offset-4 hover:underline p-0 h-auto',
       },
       size: {
         sm: 'h-8 px-3 text-xs rounded-lg',
-        md: 'h-9 px-4 text-sm rounded-[10px]',
-        lg: 'h-10 px-6 text-sm rounded-[10px]',
+        md: 'h-9 px-4 text-sm rounded-lg',
+        lg: 'h-10 px-6 text-sm rounded-lg',
         icon: 'size-9 rounded-lg',
         'icon-sm': 'size-8 rounded-lg',
       },
diff --git a/frontend/src/components/ui/FormField.tsx b/frontend/src/components/ui/FormField.tsx
index 6e5faae3..4cc4015a 100644
--- a/frontend/src/components/ui/FormField.tsx
+++ b/frontend/src/components/ui/FormField.tsx
@@ -11,13 +11,13 @@ interface FormFieldProps {
 export function FormField({ label, htmlFor, required, hint, children }: FormFieldProps) {
   return (
     <div className="space-y-1.5">
-      <label htmlFor={htmlFor} className="text-sm font-medium text-foreground">
+      <label htmlFor={htmlFor} className="text-sm font-medium text-[#e2e5eb]">
         {label}
         {required && <span className="ml-0.5 text-red-400">*</span>}
       </label>
       {children}
       {hint && (
-        <p className="text-xs text-muted-foreground">{hint}</p>
+        <p className="text-xs text-[#848b9b]">{hint}</p>
       )}
     </div>
   )
diff --git a/frontend/src/components/ui/Input.tsx b/frontend/src/components/ui/Input.tsx
index 98f75c83..63fdd993 100644
--- a/frontend/src/components/ui/Input.tsx
+++ b/frontend/src/components/ui/Input.tsx
@@ -10,8 +10,8 @@ export function Input({ className, error, id, ...props }: InputProps) {
       <input
         id={id}
         className={cn(
-          'flex h-9 w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-          'placeholder:text-muted-foreground',
+          'flex h-9 w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b]',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',
diff --git a/frontend/src/components/ui/MarkdownContent.tsx b/frontend/src/components/ui/MarkdownContent.tsx
index ac7596e1..82cafd56 100644
--- a/frontend/src/components/ui/MarkdownContent.tsx
+++ b/frontend/src/components/ui/MarkdownContent.tsx
@@ -21,7 +21,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style bold text
         strong: ({ children }) => (
-          <strong className="font-semibold text-foreground">{children}</strong>
+          <strong className="font-semibold text-[#e2e5eb]">{children}</strong>
         ),
         // Style ordered lists
         ol: ({ children }) => (
@@ -33,7 +33,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style list items
         li: ({ children }) => (
-          <li className="text-muted-foreground">{children}</li>
+          <li className="text-[#848b9b]">{children}</li>
         ),
         // Style inline code
         code: ({ className, children, ...props }) => {
@@ -69,19 +69,19 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         ),
         // Style headers
         h1: ({ children }) => (
-          <h1 className="mb-3 text-lg font-bold text-foreground">{children}</h1>
+          <h1 className="mb-3 text-lg font-bold text-[#e2e5eb]">{children}</h1>
         ),
         h2: ({ children }) => (
-          <h2 className="mb-2 text-base font-bold text-foreground">{children}</h2>
+          <h2 className="mb-2 text-base font-bold text-[#e2e5eb]">{children}</h2>
         ),
         h3: ({ children }) => (
-          <h3 className="mb-2 text-sm font-bold text-foreground">{children}</h3>
+          <h3 className="mb-2 text-sm font-bold text-[#e2e5eb]">{children}</h3>
         ),
         // Style horizontal rules
-        hr: () => <hr className="my-4 border-border" />,
+        hr: () => <hr className="my-4 border-[#1e2130]" />,
         // Style blockquotes
         blockquote: ({ children }) => (
-          <blockquote className="mb-3 border-l-4 border-border pl-4 italic text-muted-foreground last:mb-0">
+          <blockquote className="mb-3 border-l-4 border-[#1e2130] pl-4 italic text-[#848b9b] last:mb-0">
             {children}
           </blockquote>
         ),
diff --git a/frontend/src/components/ui/Skeleton.tsx b/frontend/src/components/ui/Skeleton.tsx
index 288eb42b..cadff447 100644
--- a/frontend/src/components/ui/Skeleton.tsx
+++ b/frontend/src/components/ui/Skeleton.tsx
@@ -16,7 +16,7 @@ export function Skeleton({ className, ...props }: SkeletonProps) {
 
 export function CardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('glass-card-static p-5 space-y-3', className)}>
+    <div className={cn('card-flat p-5 space-y-3', className)}>
       <Skeleton className="h-5 w-3/4" />
       <Skeleton className="h-4 w-1/2" />
       <div className="flex gap-2 mt-4">
diff --git a/frontend/src/components/ui/Textarea.tsx b/frontend/src/components/ui/Textarea.tsx
index 6109dd1b..3e8b05d5 100644
--- a/frontend/src/components/ui/Textarea.tsx
+++ b/frontend/src/components/ui/Textarea.tsx
@@ -10,8 +10,8 @@ export function Textarea({ className, error, id, ...props }: TextareaProps) {
       <textarea
         id={id}
         className={cn(
-          'flex w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
-          'placeholder:text-muted-foreground',
+          'flex w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
+          'placeholder:text-[#848b9b]',
           'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20',
           'disabled:cursor-not-allowed disabled:opacity-50',
           error && 'border-red-400/50 focus:border-red-400 focus:ring-red-400/20',