diff --git a/frontend/src/features/liberation/components/ProgressBar.jsx b/frontend/src/features/liberation/components/ProgressBar.jsx
index a949e65..f627c6f 100644
--- a/frontend/src/features/liberation/components/ProgressBar.jsx
+++ b/frontend/src/features/liberation/components/ProgressBar.jsx
@@ -74,12 +74,12 @@ export default function ProgressBar({ startChapter, currentPoints, completionDat
       <div className="space-y-3">
         <div className="flex items-center gap-2">
           <div className="flex-1 flex flex-col items-center gap-2">
-            <span className="text-base font-bold" style={{ color: '#a78bfa' }}>1차 해방</span>
-            <div style={{ width: '100%', height: 3, background: 'rgba(167, 139, 250, 0.5)', borderRadius: 999 }} />
+            <span className="text-base font-bold" style={{ color: 'var(--liberation-primary)' }}>1차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'var(--liberation-primary-bar)', borderRadius: 999 }} />
           </div>
           <div className="flex-1 flex flex-col items-center gap-2">
-            <span className="text-base font-bold" style={{ color: '#fda4af' }}>2차 해방</span>
-            <div style={{ width: '100%', height: 3, background: 'rgba(253, 164, 175, 0.5)', borderRadius: 999 }} />
+            <span className="text-base font-bold" style={{ color: 'var(--liberation-secondary)' }}>2차 해방</span>
+            <div style={{ width: '100%', height: 3, background: 'var(--liberation-secondary-bar)', borderRadius: 999 }} />
           </div>
         </div>
         <div className="flex gap-2">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f611b4b..5e2c5ea 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -140,6 +140,11 @@
   --btn-danger-bg: #dc2626;
   --btn-danger-bg-hover: #ef4444;
   --btn-danger-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
+
+  --liberation-primary: #a78bfa;
+  --liberation-primary-bar: rgba(167, 139, 250, 0.5);
+  --liberation-secondary: #fda4af;
+  --liberation-secondary-bar: rgba(253, 164, 175, 0.5);
 }
 
 /* 테마 토큰 - light */
@@ -276,6 +281,11 @@
   --btn-danger-bg: #dc2626;
   --btn-danger-bg-hover: #b91c1c;
   --btn-danger-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
+
+  --liberation-primary: #7c3aed;
+  --liberation-primary-bar: rgba(124, 58, 237, 0.5);
+  --liberation-secondary: #e11d48;
+  --liberation-secondary-bar: rgba(225, 29, 72, 0.5);
 }
 
 html, body, #root {