diff --git a/frontend/autometabuilder/components/layout/PageLayout.tsx b/frontend/autometabuilder/components/layout/PageLayout.tsx
index ecc5b53..844147a 100644
--- a/frontend/autometabuilder/components/layout/PageLayout.tsx
+++ b/frontend/autometabuilder/components/layout/PageLayout.tsx
@@ -15,7 +15,7 @@ export default function PageLayout({ navItems, section, onSectionChange, t, chil
   return (
     <Box sx={{ display: "flex" }}>
       <Sidebar items={navItems} selected={section} onSelect={onSectionChange} t={t} />
-      <Box component="main" sx={{ flexGrow: 1, p: 3, bgcolor: "#04070f", minHeight: "100vh" }}>
+      <Box component="main" sx={{ flexGrow: 1, p: 3, bgcolor: "var(--color-app-bg)", minHeight: "100vh" }}>
         <Toolbar disableGutters>
           <div>
             <Typography variant="h4" color="text.primary" gutterBottom>
diff --git a/frontend/autometabuilder/components/layout/Sidebar.tsx b/frontend/autometabuilder/components/layout/Sidebar.tsx
index a588d41..9085b99 100644
--- a/frontend/autometabuilder/components/layout/Sidebar.tsx
+++ b/frontend/autometabuilder/components/layout/Sidebar.tsx
@@ -11,13 +11,13 @@ type SidebarProps = {
 export default function Sidebar({ items, selected, onSelect, t }: SidebarProps) {
   return (
     <Drawer variant="permanent" anchor="left" sx={{ width: 220, flexShrink: 0 }}>
-      <Box sx={{ height: "100%", backgroundColor: "#0f172a" }}>
+      <Box sx={{ height: "100%", backgroundColor: "var(--color-sidebar-bg)" }}>
         <Box sx={{ px: 3, py: 2 }}>
           <Typography variant="overline" color="text.secondary">
             {t("ui.app.name", "AutoMetabuilder")}
           </Typography>
         </Box>
-        <Divider sx={{ borderColor: "rgba(255,255,255,0.08)" }} />
+        <Divider sx={{ borderColor: "var(--color-divider)" }} />
         <List>
           {items.map((item) => (
             <ListItemButton
@@ -26,7 +26,7 @@ export default function Sidebar({ items, selected, onSelect, t }: SidebarProps)
               onClick={() => onSelect(item.section)}
               data-section={item.section}
               sx={{
-                color: selected === item.section ? "#fff" : "rgba(226,232,240,0.8)",
+                color: selected === item.section ? "var(--color-text-strong)" : "var(--color-text-muted-strong)",
               }}
             >
               <ListItemText primary={t(item.label_key, item.default_label)} primaryTypographyProps={{ fontSize: 14 }} />
diff --git a/frontend/autometabuilder/components/sections/DashboardSection.tsx b/frontend/autometabuilder/components/sections/DashboardSection.tsx
index 5208ae8..1f42877 100644
--- a/frontend/autometabuilder/components/sections/DashboardSection.tsx
+++ b/frontend/autometabuilder/components/sections/DashboardSection.tsx
@@ -42,7 +42,7 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
   };
 
   return (
-    <Paper id="dashboard" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="dashboard" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
       <Typography variant="h5" gutterBottom>
         {t("ui.dashboard.title", "Dashboard")}
       </Typography>
@@ -50,7 +50,7 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
         {t("ui.dashboard.subtitle", "Control the bot and monitor system activity")}
       </Typography>
       <Stack direction={{ xs: "column", md: "row" }} spacing={3} mt={2}>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
           <Typography variant="subtitle1" gutterBottom>
             {t("ui.dashboard.bot_control", "Bot Control")}
           </Typography>
@@ -99,11 +99,11 @@ export default function DashboardSection({ status, logs, onRun, t }: DashboardSe
             {feedback}
           </Typography>
         </Paper>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
           <Typography variant="subtitle1" gutterBottom>
             {t("ui.dashboard.logs.title", "Recent Logs")}
           </Typography>
-          <Box component="pre" sx={{ maxHeight: 240, overflow: "auto", fontSize: 12, color: "white" }}>
+          <Box component="pre" sx={{ maxHeight: 240, overflow: "auto", fontSize: 12, color: "var(--color-text-strong)" }}>
             {logs.slice(-1200) || t("ui.dashboard.status.idle", "Idle")}
           </Box>
         </Paper>
diff --git a/frontend/autometabuilder/components/sections/PromptSection.tsx b/frontend/autometabuilder/components/sections/PromptSection.tsx
index 1622267..a110ff7 100644
--- a/frontend/autometabuilder/components/sections/PromptSection.tsx
+++ b/frontend/autometabuilder/components/sections/PromptSection.tsx
@@ -22,7 +22,7 @@ export default function PromptSection({ content, onSave, t }: PromptSectionProps
   };
 
   return (
-    <Paper id="prompt" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="prompt" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
       <Typography variant="h5" gutterBottom>
         {t("ui.prompt.title", "Prompt Builder")}
       </Typography>
@@ -37,9 +37,9 @@ export default function PromptSection({ content, onSave, t }: PromptSectionProps
         fullWidth
         InputProps={{
           sx: {
-            backgroundColor: "#030712",
+            backgroundColor: "var(--color-input-bg)",
             borderRadius: 2,
-            color: "white",
+            color: "var(--color-text-strong)",
             fontFamily: "JetBrains Mono, monospace",
           },
         }}
diff --git a/frontend/autometabuilder/components/sections/SettingsSection.tsx b/frontend/autometabuilder/components/sections/SettingsSection.tsx
index 5ce2a12..599c1fd 100644
--- a/frontend/autometabuilder/components/sections/SettingsSection.tsx
+++ b/frontend/autometabuilder/components/sections/SettingsSection.tsx
@@ -35,7 +35,7 @@ export default function SettingsSection({ envVars, onSave, t }: SettingsSectionP
   };
 
   return (
-    <Paper id="settings" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="settings" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
       <Typography variant="h5" gutterBottom>
         {t("ui.settings.title", "Settings")}
       </Typography>
@@ -51,9 +51,9 @@ export default function SettingsSection({ envVars, onSave, t }: SettingsSectionP
             onChange={(event) => updateField(key, event.target.value)}
             InputProps={{
               sx: {
-                backgroundColor: "#030712",
+                backgroundColor: "var(--color-input-bg)",
                 borderRadius: 1,
-                color: "white",
+                color: "var(--color-text-strong)",
               },
             }}
           />
diff --git a/frontend/autometabuilder/components/sections/TranslationsSection.tsx b/frontend/autometabuilder/components/sections/TranslationsSection.tsx
index a91c8d9..017277a 100644
--- a/frontend/autometabuilder/components/sections/TranslationsSection.tsx
+++ b/frontend/autometabuilder/components/sections/TranslationsSection.tsx
@@ -75,7 +75,7 @@ export default function TranslationsSection({ languages, onRefresh, t }: Transla
   };
 
   return (
-    <Paper id="translations" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="translations" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
       <Typography variant="h5" gutterBottom>
         {t("ui.translations.title", "Translations")}
       </Typography>
@@ -101,9 +101,9 @@ export default function TranslationsSection({ languages, onRefresh, t }: Transla
           onChange={(event) => setEditorValue(event.target.value)}
           InputProps={{
             sx: {
-              backgroundColor: "#030712",
+              backgroundColor: "var(--color-input-bg)",
               borderRadius: 2,
-              color: "white",
+              color: "var(--color-text-strong)",
               fontFamily: "JetBrains Mono, monospace",
             },
           }}
diff --git a/frontend/autometabuilder/components/sections/WorkflowSection.tsx b/frontend/autometabuilder/components/sections/WorkflowSection.tsx
index 3852352..60880d4 100644
--- a/frontend/autometabuilder/components/sections/WorkflowSection.tsx
+++ b/frontend/autometabuilder/components/sections/WorkflowSection.tsx
@@ -27,7 +27,7 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
   };
 
   return (
-    <Paper id="workflow" sx={{ p: 3, mb: 3, backgroundColor: "#0d111b" }}>
+    <Paper id="workflow" sx={{ p: 3, mb: 3, backgroundColor: "var(--color-panel-bg)" }}>
       <Typography variant="h5" gutterBottom>
         {t("ui.workflow.title", "Workflow Builder")}
       </Typography>
@@ -44,10 +44,10 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
             sx={{
               width: "100%",
               fontFamily: "JetBrains Mono, monospace",
-              backgroundColor: "#030712",
-              border: "1px solid rgba(148, 163, 184, 0.4)",
+              backgroundColor: "var(--color-input-bg)",
+              border: "1px solid var(--color-border-muted)",
               borderRadius: 2,
-              color: "white",
+              color: "var(--color-text-strong)",
               p: 2,
             }}
           />
@@ -60,7 +60,7 @@ export default function WorkflowSection({ content, packages, onSave, onTemplateS
             </Typography>
           </Stack>
         </Box>
-        <Paper sx={{ flex: 1, p: 2, backgroundColor: "#0b1221" }}>
+        <Paper sx={{ flex: 1, p: 2, backgroundColor: "var(--color-panel-alt)" }}>
           <Stack spacing={2}>
             <Box>
               <Typography variant="subtitle1" gutterBottom>
diff --git a/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx b/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx
index ad5e059..6302601 100644
--- a/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowGraphPanel.tsx
@@ -30,7 +30,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
   }, []);
 
   return (
-    <Paper sx={{ p: 2, backgroundColor: "#0b1221" }}>
+    <Paper sx={{ p: 2, backgroundColor: "var(--color-panel-alt)" }}>
       <Typography variant="subtitle1" gutterBottom>
         {t("ui.workflow.graph.title", "Workflow Graph")}
       </Typography>
@@ -45,7 +45,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
         <Typography color="error">{error}</Typography>
       ) : (
         <>
-          <Stack spacing={1} divider={<Divider light sx={{ borderColor: "rgba(255,255,255,0.08)" }} />}>
+          <Stack spacing={1} divider={<Divider light sx={{ borderColor: "var(--color-divider)" }} />}>
             {graph?.nodes.map((node) => (
               <Box key={node.id} sx={{ display: "flex", flexDirection: "column" }}>
                 <Stack direction="row" alignItems="center" spacing={1}>
@@ -60,7 +60,7 @@ export default function WorkflowGraphPanel({ t }: WorkflowGraphPanelProps) {
               </Box>
             ))}
           </Stack>
-          <Divider sx={{ my: 2, borderColor: "rgba(255,255,255,0.08)" }} />
+          <Divider sx={{ my: 2, borderColor: "var(--color-divider)" }} />
           <Stack spacing={1}>
             {graph?.edges.map((edge, index) => (
               <Typography key={`${edge.from}-${edge.to}-${edge.var}-${index}`} variant="caption" color="text.secondary">
diff --git a/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx b/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx
index 857111d..34be84a 100644
--- a/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowPalette.tsx
@@ -43,7 +43,7 @@ export default function WorkflowPalette({ t }: WorkflowPaletteProps) {
   const hasQuery = search.trim().length > 0;
 
   return (
-    <Paper sx={{ p: 2, backgroundColor: "#0b1221" }}>
+    <Paper sx={{ p: 2, backgroundColor: "var(--color-panel-alt)" }}>
       <Typography variant="subtitle1" gutterBottom>
         {t("ui.workflow.palette.title", "Workflow Palette")}
       </Typography>
@@ -66,7 +66,7 @@ export default function WorkflowPalette({ t }: WorkflowPaletteProps) {
           {`${t("ui.workflow.palette.empty", "No matching nodes.")} "${search.trim()}"`}
         </Typography>
       ) : (
-        <Stack spacing={1} divider={<Divider sx={{ borderColor: "rgba(255,255,255,0.08)" }} />}>
+        <Stack spacing={1} divider={<Divider sx={{ borderColor: "var(--color-divider)" }} />}>
           {entries.map(([id, plugin]) => (
             <WorkflowPaletteCard key={id} id={id} plugin={plugin} t={t} />
           ))}
diff --git a/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx b/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx
index 7f502e7..f2b5640 100644
--- a/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx
+++ b/frontend/autometabuilder/components/workflow/WorkflowPaletteCard.tsx
@@ -40,7 +40,7 @@ function renderPortChips(
         key={`${direction}-${name}`}
         label={`${direction === "in" ? "⮂" : "⮀"} ${portLabel}`}
         size="small"
-        sx={{ backgroundColor: "rgba(255,255,255,0.08)", color: "white" }}
+        sx={{ backgroundColor: "var(--color-divider)", color: "var(--color-text-strong)" }}
       />
     );
   });
diff --git a/frontend/autometabuilder/styles/_variables.scss b/frontend/autometabuilder/styles/_variables.scss
index 33c908a..a58e045 100644
--- a/frontend/autometabuilder/styles/_variables.scss
+++ b/frontend/autometabuilder/styles/_variables.scss
@@ -1,9 +1,14 @@
 $body-bg: #05060a;
+$app-bg: #04070f;
 $panel-bg: #0d111b;
+$panel-bg-alt: #0b1221;
+$input-bg: #030712;
+$sidebar-bg: #0f172a;
 $border-color: #1f2937;
 $accent: #f97316;
 $accent-strong: #fb923c;
 $text: #e2e8f0;
+$text-strong: #ffffff;
 $muted: #94a3b8;
 $radius: 0.75rem;
 
diff --git a/frontend/autometabuilder/styles/globals.scss b/frontend/autometabuilder/styles/globals.scss
index 94e466d..096e0b3 100644
--- a/frontend/autometabuilder/styles/globals.scss
+++ b/frontend/autometabuilder/styles/globals.scss
@@ -3,6 +3,18 @@
 :root {
   color: $text;
   background: $body-bg;
+  --color-body-bg: #{$body-bg};
+  --color-app-bg: #{$app-bg};
+  --color-panel-bg: #{$panel-bg};
+  --color-panel-alt: #{$panel-bg-alt};
+  --color-input-bg: #{$input-bg};
+  --color-sidebar-bg: #{$sidebar-bg};
+  --color-text: #{$text};
+  --color-text-strong: #{$text-strong};
+  --color-text-muted: #{$muted};
+  --color-text-muted-strong: #{rgba($text, 0.8)};
+  --color-border-muted: #{rgba($muted, 0.4)};
+  --color-divider: #{rgba($text, 0.08)};
 }
 
 * {