diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 675b4cbd..dfd4fdfb 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -61,22 +61,22 @@ html.dark {
 }
 
 html.light {
-  --color-bg-base: #f8f9fa;
-  --color-bg-surface: #ffffff;
+  --color-bg-base: #eef1f6;
+  --color-bg-surface: rgba(247, 249, 252, 0.86);
   --color-bg-elevated: #ffffff;
-  --color-bg-input: #f1f3f5;
-  --color-bg-hover: rgba(0, 0, 0, 0.04);
-  --color-glass: rgba(0, 0, 0, 0.03);
-  --color-border-default: rgba(0, 0, 0, 0.1);
-  --color-border-subtle: rgba(0, 0, 0, 0.06);
+  --color-bg-input: rgba(255, 255, 255, 0.72);
+  --color-bg-hover: rgba(15, 23, 42, 0.06);
+  --color-glass: rgba(15, 23, 42, 0.035);
+  --color-border-default: rgba(15, 23, 42, 0.12);
+  --color-border-subtle: rgba(15, 23, 42, 0.07);
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #6b7280;
   --color-text-muted: #9ca3af;
   --color-overlay: rgba(0, 0, 0, 0.2);
-  --color-bg-inset: rgba(0, 0, 0, 0.02);
+  --color-bg-inset: rgba(15, 23, 42, 0.035);
   --foreground-rgb: 26, 26, 26;
-  --background-start-rgb: 248, 249, 250;
-  --background-end-rgb: 248, 249, 250;
+  --background-start-rgb: 238, 241, 246;
+  --background-end-rgb: 238, 241, 246;
 
   /* Light theme: same hues, slightly higher chroma + darker lightness
      so chips read with enough weight against a white surface. */
diff --git a/frontend/src/components/layout/GlobalSidebar.tsx b/frontend/src/components/layout/GlobalSidebar.tsx
index 3ea29f11..a06673ec 100644
--- a/frontend/src/components/layout/GlobalSidebar.tsx
+++ b/frontend/src/components/layout/GlobalSidebar.tsx
@@ -28,7 +28,7 @@ export default function GlobalSidebar({ activeTab, onTabChange }: GlobalSidebarP
   };
 
   return (
-    <aside className="w-56 flex-shrink-0 h-full border-r border-glass-border bg-surface backdrop-blur-xl flex flex-col">
+    <aside className="w-56 flex-shrink-0 h-full border-r border-glass-border bg-glass backdrop-blur-xl flex flex-col">
       {/* Branding */}
       <div className="p-5 border-b border-glass-border">
         <LumenXBranding size="sm" />
diff --git a/frontend/src/components/layout/LumenXBranding.tsx b/frontend/src/components/layout/LumenXBranding.tsx
index 64d83fa6..4fd53aa1 100644
--- a/frontend/src/components/layout/LumenXBranding.tsx
+++ b/frontend/src/components/layout/LumenXBranding.tsx
@@ -21,22 +21,22 @@ export default function LumenXBranding({ size = "md", showSlogan = true }: Lumen
         </div>
         <div className="flex flex-col justify-center">
           <div className="flex items-baseline gap-0">
-            <span className={`font-mono ${titleSize} font-bold tracking-tight text-white`}>
+            <span className={`font-mono ${titleSize} font-bold tracking-normal text-foreground`}>
               LUMEN
             </span>
-            <span className={`font-mono ${titleSize} font-black tracking-tight text-[#646cff]`}>
+            <span className={`font-mono ${titleSize} font-black tracking-normal text-primary`}>
               X
             </span>
           </div>
           {size !== "sm" && (
-            <span className="font-mono text-[10px] text-white/30 tracking-[0.2em] uppercase -mt-0.5">
+            <span className="font-mono text-[10px] text-text-muted tracking-[0.2em] uppercase -mt-0.5">
               Studio
             </span>
           )}
         </div>
       </div>
       {showSlogan && (
-        <p className="font-mono text-[8px] text-white/20 tracking-[0.15em] text-center mt-2.5 uppercase">
+        <p className="font-mono text-[8px] text-text-muted tracking-[0.15em] text-center mt-2.5 uppercase">
           Render Noise into Narrative
         </p>
       )}
diff --git a/frontend/src/components/modules/playground/AssetPickerModal.tsx b/frontend/src/components/modules/playground/AssetPickerModal.tsx
index dc0a190c..d2e028c1 100644
--- a/frontend/src/components/modules/playground/AssetPickerModal.tsx
+++ b/frontend/src/components/modules/playground/AssetPickerModal.tsx
@@ -222,7 +222,7 @@ export default function AssetPickerModal({
     <AnimatePresence>
       {isOpen && (
         <motion.div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
           variants={overlayVariants}
           initial="hidden"
           animate="visible"
@@ -233,7 +233,7 @@ export default function AssetPickerModal({
           <motion.div
             className="
               w-[640px] max-h-[80vh]
-              bg-[#141416] border border-white/[0.08]
+              bg-elevated border border-glass-border
               rounded-2xl shadow-2xl
               flex flex-col overflow-hidden
             "
@@ -248,7 +248,7 @@ export default function AssetPickerModal({
             {/* Header                                                          */}
             {/* -------------------------------------------------------------- */}
             <div className="flex items-center justify-between px-5 pt-5 pb-3">
-              <h2 className="text-sm font-semibold text-white/90">
+              <h2 className="text-sm font-semibold text-foreground">
                 选择素材
               </h2>
 
@@ -257,7 +257,7 @@ export default function AssetPickerModal({
                 onClick={onClose}
                 className="
                   w-7 h-7 rounded-lg flex items-center justify-center
-                  text-white/40 hover:text-white/80 hover:bg-white/[0.06]
+                  text-text-secondary hover:text-foreground hover:bg-hover-bg
                   transition-colors
                 "
               >
@@ -278,8 +278,8 @@ export default function AssetPickerModal({
                       transition-colors
                       ${
                         activeTab === tab.key
-                          ? 'bg-[#646cff]/15 text-[#646cff] border border-[#646cff]/30'
-                          : 'text-white/50 hover:text-white/70 hover:bg-white/[0.04] border border-transparent'
+                          ? 'bg-primary/15 text-primary border border-primary/30'
+                          : 'text-text-secondary hover:text-foreground hover:bg-hover-bg border border-transparent'
                       }
                     `}
                   >
@@ -296,8 +296,8 @@ export default function AssetPickerModal({
             <div className="flex-1 overflow-y-auto px-5 pb-2 min-h-0">
               {loading && (
                 <div className="flex flex-col items-center justify-center py-16 gap-3">
-                  <Loader2 className="w-6 h-6 text-white/30 animate-spin" />
-                  <span className="text-xs text-white/40">加载中...</span>
+                  <Loader2 className="w-6 h-6 text-text-secondary animate-spin" />
+                  <span className="text-xs text-text-secondary">加载中...</span>
                 </div>
               )}
 
@@ -307,7 +307,7 @@ export default function AssetPickerModal({
                   <button
                     type="button"
                     onClick={fetchAssets}
-                    className="text-xs text-[#646cff] hover:underline"
+                    className="text-xs text-primary hover:underline"
                   >
                     重试
                   </button>
@@ -316,11 +316,11 @@ export default function AssetPickerModal({
 
               {!loading && !error && filteredAssets.length === 0 && (
                 <div className="flex flex-col items-center justify-center py-16 gap-2">
-                  <Image className="w-8 h-8 text-white/20" />
-                  <span className="text-xs text-white/40">
+                  <Image className="w-8 h-8 text-text-muted" />
+                  <span className="text-xs text-text-secondary">
                     暂无可用素材
                   </span>
-                  <span className="text-[11px] text-white/25">
+                  <span className="text-[11px] text-text-muted">
                     在 Playground 中生成内容后，输出将出现在这里
                   </span>
                 </div>
@@ -343,12 +343,12 @@ export default function AssetPickerModal({
                         }
                         className={`
                           relative aspect-square rounded-lg overflow-hidden
-                          bg-white/[0.04] cursor-pointer
+                          bg-input-bg cursor-pointer
                           transition-all duration-150
                           ${
                             isSelected
-                              ? 'border-2 border-[#646cff] ring-2 ring-[#646cff]/30'
-                              : 'border border-white/[0.04] hover:border-[#646cff]/50'
+                              ? 'border-2 border-primary ring-2 ring-primary/30'
+                              : 'border border-glass-border hover:border-primary/50'
                           }
                         `}
                       >
@@ -378,7 +378,7 @@ export default function AssetPickerModal({
 
                         {/* Selected checkmark */}
                         {isSelected && (
-                          <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-[#646cff] flex items-center justify-center">
+                          <div className="absolute top-1.5 right-1.5 w-5 h-5 rounded-full bg-primary flex items-center justify-center">
                             <Check className="w-3 h-3 text-white" />
                           </div>
                         )}
@@ -399,14 +399,14 @@ export default function AssetPickerModal({
             {/* -------------------------------------------------------------- */}
             {/* Footer                                                          */}
             {/* -------------------------------------------------------------- */}
-            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-white/[0.06]">
+            <div className="flex items-center justify-end gap-2 px-5 py-4 border-t border-glass-border">
               <button
                 type="button"
                 onClick={onClose}
                 className="
                   px-4 py-2 rounded-lg text-xs
-                  text-white/60 hover:text-white/80
-                  hover:bg-white/[0.04]
+                  text-text-secondary hover:text-foreground
+                  hover:bg-hover-bg
                   transition-colors
                 "
               >
@@ -421,8 +421,8 @@ export default function AssetPickerModal({
                   transition-all
                   ${
                     selected
-                      ? 'bg-[#646cff] text-white hover:bg-[#545ae0] shadow-lg shadow-[#646cff]/20'
-                      : 'bg-white/[0.06] text-white/30 cursor-not-allowed'
+                      ? 'bg-primary text-white hover:bg-secondary shadow-lg shadow-primary/20'
+                      : 'bg-glass text-text-muted cursor-not-allowed'
                   }
                 `}
               >
diff --git a/frontend/src/components/modules/playground/DetailPanel.tsx b/frontend/src/components/modules/playground/DetailPanel.tsx
index edfc31fd..4b1f1b74 100644
--- a/frontend/src/components/modules/playground/DetailPanel.tsx
+++ b/frontend/src/components/modules/playground/DetailPanel.tsx
@@ -203,9 +203,9 @@ export default function DetailPanel({
       />
 
       {/* Container */}
-      <div className="fixed inset-4 md:inset-8 z-50 bg-[#0e0e11] border border-white/[0.06] rounded-2xl shadow-2xl flex overflow-hidden">
+      <div className="fixed inset-4 md:inset-8 z-50 bg-elevated border border-glass-border rounded-2xl shadow-2xl flex overflow-hidden">
         {/* ─── LEFT SIDE (Media) ─────────────────────────────────────────── */}
-        <div className="relative w-[60%] h-full bg-[#080809] flex items-center justify-center">
+        <div className="relative w-[60%] h-full bg-surface-inset flex items-center justify-center">
           {mediaUrl ? (
             isVideo ? (
               <video
@@ -221,7 +221,7 @@ export default function DetailPanel({
               />
             )
           ) : (
-            <div className="flex flex-col items-center gap-2 text-white/20">
+            <div className="flex flex-col items-center gap-2 text-text-muted">
               <Video className="w-12 h-12" />
               <span className="font-mono text-xs">No media</span>
             </div>
@@ -247,29 +247,29 @@ export default function DetailPanel({
         </div>
 
         {/* ─── RIGHT SIDE (Details) ──────────────────────────────────────── */}
-        <div className="relative w-[40%] h-full overflow-y-auto p-6 border-l border-white/[0.06]">
+        <div className="relative w-[40%] h-full overflow-y-auto p-6 border-l border-glass-border">
           {/* Close button */}
           <button
             onClick={onClose}
-            className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-white/[0.04] border border-white/[0.08] flex items-center justify-center hover:bg-white/[0.10] transition-colors"
+            className="absolute top-4 right-4 w-8 h-8 rounded-lg bg-glass border border-glass-border flex items-center justify-center hover:bg-hover-bg transition-colors"
           >
-            <X className="w-4 h-4 text-white/60" />
+            <X className="w-4 h-4 text-text-secondary" />
           </button>
 
           {/* Section 1: Title */}
           <div className="mb-6 pr-10">
-            <h2 className="text-lg font-semibold text-white mb-1">
+            <h2 className="text-lg font-semibold text-foreground mb-1">
               {generation.model_id}
             </h2>
             <div className="flex items-center gap-2 mb-1">
-              <span className="font-mono text-[10px] bg-white/[0.06] text-white/60 rounded px-[6px] py-[2px] uppercase">
+              <span className="font-mono text-[10px] bg-glass text-text-secondary rounded px-[6px] py-[2px] uppercase">
                 {MODE_LABELS[generation.mode] || generation.mode}
               </span>
-              <span className="font-mono text-[10px] text-white/30">
+              <span className="font-mono text-[10px] text-text-muted">
                 {generation.id.slice(0, 8)}
               </span>
             </div>
-            <p className="font-mono text-[11px] text-white/30">
+            <p className="font-mono text-[11px] text-text-muted">
               {formatTimestamp(generation.created_at)}
             </p>
           </div>
@@ -279,7 +279,7 @@ export default function DetailPanel({
             {mediaUrl && (
               <button
                 onClick={handleDownload}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-white/[0.06] border border-white/[0.08] text-white/80 text-sm font-medium hover:bg-white/[0.10] transition-colors"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-glass border border-glass-border text-text-secondary text-sm font-medium hover:bg-hover-bg hover:text-foreground transition-colors"
               >
                 <Download className="w-4 h-4" />
                 Download
@@ -291,8 +291,8 @@ export default function DetailPanel({
                 disabled={saving}
                 className={`w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border text-sm font-medium transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-wait ${
                   saved
-                    ? 'bg-white/[0.04] border-green-500/20 text-green-400 hover:border-white/[0.12] hover:text-white/60'
-                    : 'bg-white/[0.06] border-white/[0.08] text-white/80 hover:bg-white/[0.10]'
+                    ? 'bg-green-500/10 border-green-500/25 text-green-500 hover:bg-green-500/15'
+                    : 'bg-glass border-glass-border text-text-secondary hover:bg-hover-bg hover:text-foreground'
                 }`}
               >
                 <Star
@@ -304,7 +304,7 @@ export default function DetailPanel({
             {!isVideo && output?.media_path && onGenerateVideo && (
               <button
                 onClick={() => onGenerateVideo(output.media_path)}
-                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-[#646cff]/10 border border-[#646cff]/20 text-[#646cff] text-sm font-medium hover:bg-[#646cff]/20 transition-colors"
+                className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-primary/10 border border-primary/20 text-primary text-sm font-medium hover:bg-primary/20 transition-colors"
               >
                 <Video className="w-4 h-4" />
                 Generate Video
@@ -337,14 +337,14 @@ export default function DetailPanel({
               </h3>
               <button
                 onClick={handleCopyPrompt}
-                className="flex items-center gap-1 px-2 py-1 rounded text-[10px] text-white/40 hover:text-white/60 hover:bg-white/[0.06] transition-colors"
+                className="flex items-center gap-1 px-2 py-1 rounded text-[10px] text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors"
               >
                 <Copy className="w-3 h-3" />
                 {copied ? 'Copied' : 'Copy'}
               </button>
             </div>
-            <div className="max-h-40 overflow-y-auto rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
-              <p className="text-[12px] text-white/70 leading-relaxed whitespace-pre-wrap break-words">
+            <div className="max-h-40 overflow-y-auto rounded-lg bg-input-bg border border-glass-border p-3">
+              <p className="text-[12px] text-text-secondary leading-relaxed whitespace-pre-wrap break-words">
                 {generation.prompt || '(empty)'}
               </p>
             </div>
@@ -359,8 +359,8 @@ export default function DetailPanel({
               <div className="grid grid-cols-2 gap-x-4 gap-y-2">
                 {paramEntries.map(([label, value]) => (
                   <div key={label}>
-                    <p className="text-[10px] text-white/40 mb-0.5">{label}</p>
-                    <p className="text-[12px] text-white font-mono truncate">
+                    <p className="text-[10px] text-text-secondary mb-0.5">{label}</p>
+                    <p className="text-[12px] text-foreground font-mono truncate">
                       {value}
                     </p>
                   </div>
@@ -375,8 +375,8 @@ export default function DetailPanel({
               <h3 className="font-mono text-[10px] uppercase tracking-[0.18em] text-amber-500/80 mb-2">
                 NEGATIVE PROMPT
               </h3>
-              <div className="max-h-28 overflow-y-auto rounded-lg bg-white/[0.03] border border-white/[0.06] p-3">
-                <p className="text-[12px] text-white/50 leading-relaxed whitespace-pre-wrap break-words">
+              <div className="max-h-28 overflow-y-auto rounded-lg bg-input-bg border border-glass-border p-3">
+                <p className="text-[12px] text-text-secondary leading-relaxed whitespace-pre-wrap break-words">
                   {generation.negative_prompt}
                 </p>
               </div>
diff --git a/frontend/src/components/modules/playground/GalleryView.tsx b/frontend/src/components/modules/playground/GalleryView.tsx
index d06d8c46..8e8ff0a9 100644
--- a/frontend/src/components/modules/playground/GalleryView.tsx
+++ b/frontend/src/components/modules/playground/GalleryView.tsx
@@ -89,7 +89,7 @@ export default function GalleryView({
   if (generations.length === 0) {
     return (
       <div className="flex flex-col h-full items-center justify-center">
-        <p className="text-sm text-white/30">No results to display</p>
+        <p className="text-sm text-text-muted">No results to display</p>
       </div>
     );
   }
@@ -106,7 +106,7 @@ export default function GalleryView({
     <div className="flex flex-col h-full">
       {/* Main media area */}
       <div
-        className="flex-1 flex items-center justify-center p-6 bg-[#050508]"
+        className="flex-1 flex items-center justify-center p-6 bg-surface-inset"
         onClick={handleClick}
       >
         {current.status === 'completed' && mediaUrl ? (
@@ -115,14 +115,14 @@ export default function GalleryView({
               key={current.id}
               src={mediaUrl}
               controls
-              className="max-w-full max-h-full object-contain rounded-lg cursor-pointer hover:ring-2 hover:ring-[#646cff]/30 transition-all duration-200"
+              className="max-w-full max-h-full object-contain rounded-lg cursor-pointer hover:ring-2 hover:ring-primary/30 transition-all duration-200"
             />
           ) : (
             <img
               key={current.id}
               src={mediaUrl}
               alt={current.prompt}
-              className="max-w-full max-h-full object-contain rounded-lg cursor-pointer hover:scale-[1.01] hover:ring-2 hover:ring-[#646cff]/30 transition-all duration-200"
+              className="max-w-full max-h-full object-contain rounded-lg cursor-pointer hover:scale-[1.01] hover:ring-2 hover:ring-primary/30 transition-all duration-200"
             />
           )
         ) : current.status === 'failed' ? (
@@ -130,22 +130,22 @@ export default function GalleryView({
             <AlertCircle className="w-10 h-10" />
             <p className="font-mono text-xs">Generation failed</p>
             {current.error && (
-              <p className="text-[10px] text-white/30 max-w-xs text-center line-clamp-3">
+              <p className="text-[10px] text-text-muted max-w-xs text-center line-clamp-3">
                 {current.error}
               </p>
             )}
             {onRetry && (
               <button
                 onClick={() => onRetry(current)}
-                className="mt-2 px-3 py-1.5 rounded text-xs font-medium text-[#646cff] bg-[#646cff]/10 hover:bg-[#646cff]/20 transition-colors"
+                className="mt-2 px-3 py-1.5 rounded text-xs font-medium text-primary bg-primary/10 hover:bg-primary/20 transition-colors"
               >
                 Retry
               </button>
             )}
           </div>
         ) : (
-          <div className="flex flex-col items-center gap-3 text-white/30">
-            <div className="w-8 h-8 border-2 border-white/10 border-t-[#646cff] rounded-full animate-spin" />
+          <div className="flex flex-col items-center gap-3 text-text-muted">
+            <div className="w-8 h-8 border-2 border-glass-border border-t-primary rounded-full animate-spin" />
             <p className="font-mono text-xs">
               {current.status === 'pending' ? 'Queued...' : 'Generating...'}
             </p>
@@ -154,32 +154,32 @@ export default function GalleryView({
       </div>
 
       {/* Info bar */}
-      <div className="px-6 py-3 bg-[#0a0a0d] space-y-1.5">
-        <p className="text-xs text-white/50 line-clamp-2 leading-relaxed cursor-pointer hover:text-white/70 transition-colors" onClick={handleClick} title="点击查看详情">
+      <div className="px-6 py-3 bg-surface space-y-1.5">
+        <p className="text-xs text-text-secondary line-clamp-2 leading-relaxed cursor-pointer hover:text-foreground transition-colors" onClick={handleClick} title="点击查看详情">
           {current.prompt || '(no prompt)'}
         </p>
         <div className="flex items-center gap-2">
-          <span className="font-mono text-[9px] bg-white/[0.06] text-white/40 rounded px-[6px] py-[2px]">
+          <span className="font-mono text-[9px] bg-glass text-text-secondary rounded px-[6px] py-[2px]">
             {current.model_id || current.mode}
           </span>
           {current.parameters.size && (
-            <span className="font-mono text-[9px] bg-white/[0.04] text-white/30 rounded px-[6px] py-[2px]">
+            <span className="font-mono text-[9px] bg-glass text-text-muted rounded px-[6px] py-[2px]">
               {(current.parameters.size as string).replace('*', '×').replace('x', '×')}
             </span>
           )}
           {current.parameters.resolution && !current.parameters.size && (
-            <span className="font-mono text-[9px] bg-white/[0.04] text-white/30 rounded px-[6px] py-[2px]">
+            <span className="font-mono text-[9px] bg-glass text-text-muted rounded px-[6px] py-[2px]">
               {current.parameters.resolution as string}
             </span>
           )}
-          <span className="font-mono text-[9px] text-white/30 ml-auto">
+          <span className="font-mono text-[9px] text-text-muted ml-auto">
             {formatTime(current.created_at)}
           </span>
         </div>
       </div>
 
       {/* Thumbnail strip */}
-      <div className="h-20 shrink-0 px-4 py-2 border-t border-white/[0.06] overflow-x-auto">
+      <div className="h-20 shrink-0 px-4 py-2 border-t border-glass-border overflow-x-auto">
         <div
           ref={thumbnailStripRef}
           className="flex gap-2 h-full items-center"
@@ -200,8 +200,8 @@ export default function GalleryView({
                 onClick={() => setSelectedIndex(idx)}
                 className={`w-14 h-14 rounded-md overflow-hidden border-2 cursor-pointer shrink-0 transition-colors ${
                   isSelected
-                    ? 'border-[#646cff]'
-                    : 'border-transparent hover:border-white/20'
+                    ? 'border-primary'
+                    : 'border-transparent hover:border-primary/30'
                 }`}
               >
                 {isFailed ? (
@@ -209,8 +209,8 @@ export default function GalleryView({
                     <AlertCircle className="w-4 h-4 text-red-400/60" />
                   </div>
                 ) : genIsVideo ? (
-                  <div className="w-full h-full bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1a] flex items-center justify-center">
-                    <Video className="w-4 h-4 text-white/30" />
+                  <div className="w-full h-full bg-surface-inset flex items-center justify-center">
+                    <Video className="w-4 h-4 text-text-muted" />
                   </div>
                 ) : genMediaUrl ? (
                   <img
@@ -219,8 +219,8 @@ export default function GalleryView({
                     className="w-full h-full object-cover"
                   />
                 ) : (
-                  <div className="w-full h-full bg-white/[0.04] flex items-center justify-center">
-                    <div className="w-3 h-3 border border-white/10 border-t-[#646cff] rounded-full animate-spin" />
+                  <div className="w-full h-full bg-surface-inset flex items-center justify-center">
+                    <div className="w-3 h-3 border border-glass-border border-t-primary rounded-full animate-spin" />
                   </div>
                 )}
               </button>
diff --git a/frontend/src/components/modules/playground/MediaInput.tsx b/frontend/src/components/modules/playground/MediaInput.tsx
index e9b44ad5..c5dfa834 100644
--- a/frontend/src/components/modules/playground/MediaInput.tsx
+++ b/frontend/src/components/modules/playground/MediaInput.tsx
@@ -224,7 +224,7 @@ export default function MediaInput() {
   if (!hasMedia) {
     return (
       <div className="space-y-2">
-        <label className="block text-xs font-medium text-white/70">
+        <label className="block text-xs font-medium text-text-secondary">
           {config.label}
         </label>
 
@@ -239,23 +239,23 @@ export default function MediaInput() {
             transition-colors
             ${
               dragOver
-                ? 'border-[#646cff]/50 bg-[#646cff]/5'
-                : 'border-white/[0.08] hover:border-white/15 hover:bg-white/[0.02]'
+                ? 'border-primary/50 bg-primary/5'
+                : 'border-glass-border hover:border-primary/40 hover:bg-hover-bg'
             }
             ${uploading ? 'pointer-events-none opacity-60' : ''}
           `}
         >
           {config.icon === 'video' ? (
-            <Film className="w-8 h-8 text-white/40" />
+            <Film className="w-8 h-8 text-text-secondary" />
           ) : (
-            <ImagePlus className="w-8 h-8 text-white/40" />
+            <ImagePlus className="w-8 h-8 text-text-secondary" />
           )}
 
-          <span className="text-xs text-white/60">
+          <span className="text-xs text-text-secondary">
             {uploading ? '上传中...' : '拖拽或点击上传'}
           </span>
 
-          <span className="text-[11px] text-white/40">{config.hint}</span>
+          <span className="text-[11px] text-text-muted">{config.hint}</span>
         </div>
 
         {/* Action buttons */}
@@ -266,8 +266,8 @@ export default function MediaInput() {
             disabled={uploading}
             className="
               flex-1 px-3 py-1.5 rounded-lg text-xs
-              border border-white/[0.08] text-white/70
-              hover:bg-white/[0.04] hover:text-white/90
+              border border-glass-border text-text-secondary
+              hover:bg-hover-bg hover:text-foreground
               transition-colors disabled:opacity-40
             "
           >
@@ -278,8 +278,8 @@ export default function MediaInput() {
             onClick={() => setShowAssetPicker(true)}
             className="
               flex-1 px-3 py-1.5 rounded-lg text-xs
-              border border-[#646cff]/30 text-[#646cff]
-              hover:bg-[#646cff]/10
+              border border-primary/30 text-primary
+              hover:bg-primary/10
               transition-colors
             "
           >
@@ -305,17 +305,17 @@ export default function MediaInput() {
 
   return (
     <div className="space-y-2">
-      <label className="block text-xs font-medium text-white/70">
+      <label className="block text-xs font-medium text-text-secondary">
         {config.label}
       </label>
 
-      <div className="border border-solid border-white/[0.08] rounded-xl p-3 space-y-3">
+      <div className="border border-solid border-glass-border rounded-xl p-3 space-y-3 bg-glass">
         {/* Thumbnail row */}
         <div className="flex flex-wrap gap-2">
           {inputMedia.map((path, index) => (
             <div
               key={path + index}
-              className="group relative w-20 h-[60px] rounded-lg overflow-hidden bg-white/[0.04] border border-white/[0.06]"
+              className="group relative w-20 h-[60px] rounded-lg overflow-hidden bg-input-bg border border-glass-border"
             >
               {isVideoPath(path) ? (
                 <video
@@ -362,9 +362,9 @@ export default function MediaInput() {
               disabled={uploading}
               className="
                 w-20 h-[60px] rounded-lg
-                border border-dashed border-white/[0.08]
+                border border-dashed border-glass-border
                 flex items-center justify-center
-                text-white/30 hover:text-white/50 hover:border-white/15
+                text-text-muted hover:text-text-secondary hover:border-primary/40
                 transition-colors disabled:opacity-40
               "
             >
@@ -375,7 +375,7 @@ export default function MediaInput() {
 
         {/* File count for r2v */}
         {config.multiple && (
-          <div className="text-[11px] text-white/40">
+          <div className="text-[11px] text-text-secondary">
             {inputMedia.length} / {config.maxFiles} 张
           </div>
         )}
@@ -389,8 +389,8 @@ export default function MediaInput() {
           disabled={uploading}
           className="
             flex-1 px-3 py-1.5 rounded-lg text-xs
-            border border-white/[0.08] text-white/70
-            hover:bg-white/[0.04] hover:text-white/90
+            border border-glass-border text-text-secondary
+            hover:bg-hover-bg hover:text-foreground
             transition-colors disabled:opacity-40
           "
         >
@@ -401,8 +401,8 @@ export default function MediaInput() {
           onClick={() => setShowAssetPicker(true)}
           className="
             flex-1 px-3 py-1.5 rounded-lg text-xs
-            border border-[#646cff]/30 text-[#646cff]
-            hover:bg-[#646cff]/10
+            border border-primary/30 text-primary
+            hover:bg-primary/10
             transition-colors
           "
         >
diff --git a/frontend/src/components/modules/playground/ModeSelector.tsx b/frontend/src/components/modules/playground/ModeSelector.tsx
index 54af7492..2b76d0b5 100644
--- a/frontend/src/components/modules/playground/ModeSelector.tsx
+++ b/frontend/src/components/modules/playground/ModeSelector.tsx
@@ -35,15 +35,15 @@ export default function ModeSelector() {
   return (
     <div className="space-y-2.5">
       {/* Level 1: Category switch */}
-      <div className="flex gap-[2px] p-[3px] bg-white/[0.03] rounded-lg border border-white/[0.04]">
+      <div className="flex gap-[2px] p-[3px] bg-glass rounded-lg border border-glass-border">
         <button
           type="button"
           onClick={() => handleCategoryChange('image')}
           className={[
             'flex-1 flex items-center justify-center gap-2 py-2.5 rounded-md text-xs font-semibold cursor-pointer transition-all',
             category === 'image'
-              ? 'text-white bg-[#646cff] shadow-[0_2px_8px_rgba(100,108,255,0.3)]'
-              : 'text-white/40 hover:text-white/60 hover:bg-white/[0.04]',
+              ? 'text-white bg-primary shadow-[0_2px_8px_rgba(100,108,255,0.3)]'
+              : 'text-text-secondary hover:text-foreground hover:bg-hover-bg',
           ].join(' ')}
         >
           <Image size={14} />
@@ -55,8 +55,8 @@ export default function ModeSelector() {
           className={[
             'flex-1 flex items-center justify-center gap-2 py-2.5 rounded-md text-xs font-semibold cursor-pointer transition-all',
             category === 'video'
-              ? 'text-white bg-[#646cff] shadow-[0_2px_8px_rgba(100,108,255,0.3)]'
-              : 'text-white/40 hover:text-white/60 hover:bg-white/[0.04]',
+              ? 'text-white bg-primary shadow-[0_2px_8px_rgba(100,108,255,0.3)]'
+              : 'text-text-secondary hover:text-foreground hover:bg-hover-bg',
           ].join(' ')}
         >
           <Film size={14} />
@@ -66,7 +66,7 @@ export default function ModeSelector() {
 
       {/* Level 2: Video sub-mode pills (only when video category is active) */}
       {category === 'video' && (
-        <div className="flex gap-[2px] p-[2px] bg-white/[0.02] rounded-md border border-white/[0.04]">
+        <div className="flex gap-[2px] p-[2px] bg-glass rounded-md border border-glass-border">
           {VIDEO_SUB_MODES.map((m) => (
             <button
               key={m.key}
@@ -75,8 +75,8 @@ export default function ModeSelector() {
               className={[
                 'flex-1 py-[6px] rounded-md text-[11px] font-medium text-center cursor-pointer transition-all',
                 mode === m.key
-                  ? 'text-white bg-white/[0.1] border border-white/[0.08]'
-                  : 'text-white/35 hover:text-white/55 hover:bg-white/[0.03]',
+                  ? 'text-foreground bg-hover-bg border border-glass-border'
+                  : 'text-text-secondary hover:text-foreground hover:bg-hover-bg',
               ].join(' ')}
             >
               {m.label}
diff --git a/frontend/src/components/modules/playground/ModelSelector.tsx b/frontend/src/components/modules/playground/ModelSelector.tsx
index 92fba5ea..38ddb764 100644
--- a/frontend/src/components/modules/playground/ModelSelector.tsx
+++ b/frontend/src/components/modules/playground/ModelSelector.tsx
@@ -62,29 +62,29 @@ export default function ModelSelector() {
       <button
         type="button"
         onClick={() => setOpen((prev) => !prev)}
-        className="flex items-center gap-[10px] px-[14px] py-[10px] border border-white/[0.08] rounded-lg bg-black/30 cursor-pointer w-full text-left transition-colors hover:border-white/[0.15]"
+        className="flex items-center gap-[10px] px-[14px] py-[10px] border border-glass-border rounded-lg bg-input-bg cursor-pointer w-full text-left transition-colors hover:border-primary/40"
       >
         <span className="w-2 h-2 rounded-full bg-emerald-400 shrink-0" />
-        <span className="flex-1 text-[13px] font-medium text-white truncate">
+        <span className="flex-1 text-[13px] font-medium text-foreground truncate">
           {selected?.displayName ?? 'Select model'}
         </span>
-        <span className="font-mono text-[10px] text-white/40 uppercase tracking-wider shrink-0">
+        <span className="font-mono text-[10px] text-text-secondary uppercase tracking-wider shrink-0">
           {selected?.family ?? ''}
         </span>
-        <span className="text-white/40 text-xs shrink-0">&#9662;</span>
+        <span className="text-text-secondary text-xs shrink-0">&#9662;</span>
       </button>
 
       {open && (
-        <div className="absolute top-full mt-1 w-full bg-[#141416] border border-white/[0.08] rounded-lg shadow-xl z-20 max-h-60 overflow-y-auto">
+        <div className="absolute top-full mt-1 w-full bg-elevated border border-glass-border rounded-lg shadow-xl z-20 max-h-60 overflow-y-auto">
           {availableModels.length === 0 && (
-            <div className="px-3 py-2 text-[12px] text-white/40">当前模式无可用模型</div>
+            <div className="px-3 py-2 text-[12px] text-text-secondary">当前模式无可用模型</div>
           )}
           {groupedModels.map((group, gi) => (
             <div key={group.family}>
-              {gi > 0 && <div className="border-t border-white/[0.04] mx-2" />}
+              {gi > 0 && <div className="border-t border-glass-border mx-2" />}
               {groupedModels.length > 1 && (
                 <div className="px-3 pt-2 pb-1">
-                  <span className="font-mono text-[9px] text-white/30 uppercase tracking-[0.15em]">
+                  <span className="font-mono text-[9px] text-text-muted uppercase tracking-[0.15em]">
                     {group.family}
                   </span>
                 </div>
@@ -94,20 +94,20 @@ export default function ModelSelector() {
                   key={m.id}
                   type="button"
                   onClick={() => handleSelect(m.id)}
-                  className={`flex items-center gap-[10px] w-full px-3 py-2 text-left transition-colors hover:bg-white/[0.06] ${
-                    m.id === modelId ? 'bg-white/[0.08] text-white' : 'text-white/80'
+                  className={`flex items-center gap-[10px] w-full px-3 py-2 text-left transition-colors hover:bg-hover-bg ${
+                    m.id === modelId ? 'bg-hover-bg text-foreground' : 'text-text-secondary'
                   }`}
                 >
                   <span className="flex-1 text-[13px] font-medium truncate">
                     {m.displayName}
                   </span>
                   {m.recommended && (
-                    <span className="text-[8px] font-mono text-[#646cff] bg-[#646cff]/10 px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0">
+                    <span className="text-[8px] font-mono text-primary bg-primary/10 px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0">
                       推荐
                     </span>
                   )}
                   {m.id === modelId && (
-                    <span className="text-[#646cff] shrink-0">✓</span>
+                    <span className="text-primary shrink-0">✓</span>
                   )}
                 </button>
               ))}
diff --git a/frontend/src/components/modules/playground/ParameterBar.tsx b/frontend/src/components/modules/playground/ParameterBar.tsx
index c7b5c8f9..a841e824 100644
--- a/frontend/src/components/modules/playground/ParameterBar.tsx
+++ b/frontend/src/components/modules/playground/ParameterBar.tsx
@@ -64,24 +64,24 @@ function ParamDropdown({
 
   return (
     <div className="flex flex-col gap-[6px]">
-      <span className="text-[11px] font-medium text-white/40">{label}</span>
+      <span className="text-[11px] font-medium text-text-secondary">{label}</span>
       <div ref={containerRef} className="relative">
         <button
           type="button"
           disabled={disabled}
           onClick={() => !disabled && setOpen((o) => !o)}
-          className={`w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-white text-xs font-medium transition cursor-pointer ${
+          className={`w-full flex items-center justify-between px-3 py-2.5 rounded-lg bg-input-bg border border-glass-border text-foreground text-xs font-medium transition cursor-pointer ${
             disabled
               ? 'opacity-50 cursor-not-allowed'
-              : 'hover:border-white/[0.15]'
+              : 'hover:border-primary/40'
           }`}
         >
           <span>{display(value)}</span>
-          {!disabled && <ChevronDown className={`w-3 h-3 text-white/40 transition-transform ${open ? 'rotate-180' : ''}`} />}
+          {!disabled && <ChevronDown className={`w-3 h-3 text-text-secondary transition-transform ${open ? 'rotate-180' : ''}`} />}
         </button>
 
         {open && (
-          <div className="absolute top-full mt-1 w-full bg-[#141416] border border-white/[0.08] rounded-lg shadow-xl z-30 max-h-48 overflow-y-auto">
+          <div className="absolute top-full mt-1 w-full bg-elevated border border-glass-border rounded-lg shadow-xl z-30 max-h-48 overflow-y-auto">
             {options.map((opt) => (
               <div
                 key={opt}
@@ -89,12 +89,12 @@ function ParamDropdown({
                   onChange(opt);
                   setOpen(false);
                 }}
-                className="px-3 py-2 text-xs flex items-center justify-between hover:bg-white/[0.06] cursor-pointer"
+                className="px-3 py-2 text-xs flex items-center justify-between hover:bg-hover-bg cursor-pointer"
               >
-                <span className={opt === value ? 'text-white' : 'text-white/60'}>
+                <span className={opt === value ? 'text-foreground' : 'text-text-secondary'}>
                   {display(opt)}
                 </span>
-                {opt === value && <Check className="w-3 h-3 text-[#646cff]" />}
+                {opt === value && <Check className="w-3 h-3 text-primary" />}
               </div>
             ))}
           </div>
@@ -126,15 +126,15 @@ function PillToggle({
 }) {
   return (
     <div className="flex flex-col gap-[6px]">
-      <span className="text-[11px] font-medium text-white/40">{label}</span>
-      <div className="flex gap-0 p-[2px] bg-white/[0.03] rounded-lg border border-white/[0.04]">
+      <span className="text-[11px] font-medium text-text-secondary">{label}</span>
+      <div className="flex gap-0 p-[2px] bg-glass rounded-lg border border-glass-border">
         <button
           type="button"
           onClick={() => onChange(true)}
           className={`flex-1 px-3 py-[6px] rounded-md text-[11px] font-medium text-center cursor-pointer transition-all ${
             value
-              ? 'bg-[#646cff] text-white shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
-              : 'text-white/40 hover:text-white/60'
+              ? 'bg-primary text-white shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
+              : 'text-text-secondary hover:text-foreground'
           }`}
         >
           ON
@@ -144,8 +144,8 @@ function PillToggle({
           onClick={() => onChange(false)}
           className={`flex-1 px-3 py-[6px] rounded-md text-[11px] font-medium text-center cursor-pointer transition-all ${
             !value
-              ? 'bg-[#646cff] text-white shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
-              : 'text-white/40 hover:text-white/60'
+              ? 'bg-primary text-white shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
+              : 'text-text-secondary hover:text-foreground'
           }`}
         >
           OFF
@@ -185,13 +185,13 @@ function DurationStepper({
 
   return (
     <div className="flex flex-col gap-[6px]">
-      <span className="text-[11px] font-medium text-white/40">时长</span>
-      <div className="flex items-center gap-0 rounded-lg border border-white/[0.08] bg-white/[0.04] overflow-hidden">
+      <span className="text-[11px] font-medium text-text-secondary">时长</span>
+      <div className="flex items-center gap-0 rounded-lg border border-glass-border bg-input-bg overflow-hidden">
         <button
           type="button"
           disabled={value <= min}
           onClick={() => onChange(Math.max(min, value - step))}
-          className="px-3 py-2.5 text-white/60 hover:text-white hover:bg-white/[0.06] transition disabled:opacity-30 disabled:cursor-not-allowed text-sm font-medium shrink-0"
+          className="px-3 py-2.5 text-text-secondary hover:text-foreground hover:bg-hover-bg transition disabled:opacity-30 disabled:cursor-not-allowed text-sm font-medium shrink-0"
         >
           −
         </button>
@@ -202,22 +202,22 @@ function DurationStepper({
             value={value}
             onChange={handleInputChange}
             onBlur={handleBlur}
-            className="w-8 bg-transparent text-center font-mono text-xs font-medium text-white outline-none"
+            className="w-8 bg-transparent text-center font-mono text-xs font-medium text-foreground outline-none"
           />
-          <span className="text-[10px] text-white/40 font-mono">s</span>
+          <span className="text-[10px] text-text-secondary font-mono">s</span>
         </div>
         <button
           type="button"
           disabled={value >= max}
           onClick={() => onChange(Math.min(max, value + step))}
-          className="px-3 py-2.5 text-white/60 hover:text-white hover:bg-white/[0.06] transition disabled:opacity-30 disabled:cursor-not-allowed text-sm font-medium shrink-0"
+          className="px-3 py-2.5 text-text-secondary hover:text-foreground hover:bg-hover-bg transition disabled:opacity-30 disabled:cursor-not-allowed text-sm font-medium shrink-0"
         >
           +
         </button>
       </div>
       <div className="flex justify-between px-1">
-        <span className="text-[9px] text-white/20 font-mono">{min}s</span>
-        <span className="text-[9px] text-white/20 font-mono">{max}s</span>
+        <span className="text-[9px] text-text-muted font-mono">{min}s</span>
+        <span className="text-[9px] text-text-muted font-mono">{max}s</span>
       </div>
     </div>
   );
@@ -315,8 +315,8 @@ export default function ParameterBar() {
   // Batch pill renderer (reused for both image and video)
   const batchPills = (
     <div className="flex flex-col gap-[6px]">
-      <span className="text-[11px] font-medium text-white/40">批量生成</span>
-      <div className="flex gap-0 p-[2px] bg-white/[0.03] rounded-lg border border-white/[0.04]">
+      <span className="text-[11px] font-medium text-text-secondary">批量生成</span>
+      <div className="flex gap-0 p-[2px] bg-glass rounded-lg border border-glass-border">
         {BATCH_OPTIONS.map((n) => (
           <button
             key={n}
@@ -324,8 +324,8 @@ export default function ParameterBar() {
             onClick={() => setBatchSize(n)}
             className={`flex-1 py-[6px] rounded-md font-mono text-xs font-medium cursor-pointer transition-all text-center ${
               batchSize === n
-                ? 'text-white bg-[#646cff] shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
-                : 'text-white/40 hover:text-white/60'
+                ? 'text-white bg-primary shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
+                : 'text-text-secondary hover:text-foreground'
             }`}
           >
             x{n}
@@ -414,15 +414,15 @@ export default function ParameterBar() {
             {/* Duration */}
             {durationFixed ? (
               <div className="flex flex-col gap-[6px]">
-                <span className="text-[11px] font-medium text-white/40">时长</span>
-                <div className="w-full flex items-center px-3 py-2.5 rounded-lg bg-white/[0.04] border border-white/[0.08] text-white/40 text-xs font-medium">
+                <span className="text-[11px] font-medium text-text-secondary">时长</span>
+                <div className="w-full flex items-center px-3 py-2.5 rounded-lg bg-input-bg border border-glass-border text-text-secondary text-xs font-medium">
                   {durationValue}s (固定)
                 </div>
               </div>
             ) : modelDuration?.type === 'buttons' ? (
               <div className="flex flex-col gap-[6px]">
-                <span className="text-[11px] font-medium text-white/40">时长</span>
-                <div className="flex gap-0 p-[2px] bg-white/[0.03] rounded-lg border border-white/[0.04]">
+                <span className="text-[11px] font-medium text-text-secondary">时长</span>
+                <div className="flex gap-0 p-[2px] bg-glass rounded-lg border border-glass-border">
                   {modelDuration.options.map((n) => (
                     <button
                       key={n}
@@ -430,8 +430,8 @@ export default function ParameterBar() {
                       onClick={() => updateParam('duration', n)}
                       className={`flex-1 py-[6px] rounded-md font-mono text-xs font-medium cursor-pointer transition-all text-center ${
                         durationValue === n
-                          ? 'text-white bg-[#646cff] shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
-                          : 'text-white/40 hover:text-white/60'
+                          ? 'text-white bg-primary shadow-[0_1px_4px_rgba(100,108,255,0.3)]'
+                          : 'text-text-secondary hover:text-foreground'
                       }`}
                     >
                       {n}s
@@ -461,7 +461,7 @@ export default function ParameterBar() {
           <button
             type="button"
             onClick={() => setShowAdvanced(!showAdvanced)}
-            className="text-[11px] font-medium text-white/40 hover:text-white/60 transition-colors cursor-pointer"
+            className="text-[11px] font-medium text-text-secondary hover:text-foreground transition-colors cursor-pointer"
           >
             {showAdvanced ? '▾' : '▸'} 高级参数
           </button>
@@ -470,11 +470,11 @@ export default function ParameterBar() {
             <div className="grid grid-cols-2 gap-3 mt-3">
               {supportsSeed && (
                 <div className="flex flex-col gap-[6px]">
-                  <span className="text-[11px] font-medium text-white/40">Seed</span>
+                  <span className="text-[11px] font-medium text-text-secondary">Seed</span>
                   <input
                     type="number"
                     placeholder="随机"
-                    className="bg-white/[0.04] border border-white/[0.08] rounded-lg px-3 py-2.5 text-xs text-white font-mono w-full outline-none focus:border-white/[0.15] transition placeholder:text-white/20"
+                    className="bg-input-bg border border-glass-border rounded-lg px-3 py-2.5 text-xs text-foreground font-mono w-full outline-none focus:border-primary/40 transition placeholder:text-text-muted"
                     value={parameters.seed ?? ''}
                     onChange={(e) => {
                       const val = e.target.value;
diff --git a/frontend/src/components/modules/playground/PlaygroundPage.tsx b/frontend/src/components/modules/playground/PlaygroundPage.tsx
index cc359af8..0a4be1d1 100644
--- a/frontend/src/components/modules/playground/PlaygroundPage.tsx
+++ b/frontend/src/components/modules/playground/PlaygroundPage.tsx
@@ -190,19 +190,19 @@ export default function PlaygroundPage() {
   // ─── Render ────────────────────────────────────────────────────────────────
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-[#050508] text-white">
+    <div className="flex h-full flex-col overflow-hidden bg-background text-foreground">
       {/* ═══ PAGE HEADER ═══ */}
-      <header className="flex shrink-0 items-center justify-between border-b border-white/[0.04] px-7 py-5">
+      <header className="flex shrink-0 items-center justify-between border-b border-glass-border px-7 py-5">
         <div className="flex items-center">
-          <h1 className="font-['Space_Grotesk',sans-serif] text-xl font-semibold tracking-tight text-white">
+          <h1 className="font-['Space_Grotesk',sans-serif] text-xl font-semibold tracking-tight text-foreground">
             创作台
           </h1>
-          <span className="ml-[10px] font-mono text-[11px] uppercase tracking-[0.1em] text-white/40">
+          <span className="ml-[10px] font-mono text-[11px] uppercase tracking-[0.1em] text-text-secondary">
             {resultCount} results
           </span>
         </div>
         <div className="flex items-center gap-3">
-          <span className="rounded border border-white/[0.08] px-2 py-1 font-mono text-[10px] uppercase tracking-[0.18em] text-white/40">
+          <span className="rounded border border-glass-border bg-glass px-2 py-1 font-mono text-[10px] uppercase tracking-[0.18em] text-text-secondary">
             {MODE_LABELS[mode]}
           </span>
         </div>
@@ -211,18 +211,18 @@ export default function PlaygroundPage() {
       {/* ═══ SPLIT LAYOUT ═══ */}
       <div className="flex flex-1 overflow-hidden min-h-0">
         {/* ─── LEFT: INPUT PANEL ─── */}
-        <aside className="flex w-[420px] shrink-0 flex-col overflow-y-auto border-r border-white/[0.08] bg-white/[0.02] scrollbar-thin">
+        <aside className="flex w-[420px] shrink-0 flex-col overflow-y-auto border-r border-glass-border bg-surface scrollbar-thin">
           {/* Mode */}
           <section className="px-6 py-5">
-            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
+            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-text-secondary">
               生成模式
             </div>
             <ModeSelector />
           </section>
 
           {/* Model */}
-          <section className="border-t border-white/[0.04] px-6 py-5">
-            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
+          <section className="border-t border-glass-border px-6 py-5">
+            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-text-secondary">
               模型
             </div>
             <ModelSelector />
@@ -230,8 +230,8 @@ export default function PlaygroundPage() {
 
           {/* Media Input (conditional) */}
           {showMediaInput && (
-            <section className="border-t border-white/[0.04] px-6 py-5">
-              <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
+            <section className="border-t border-glass-border px-6 py-5">
+              <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-text-secondary">
                 {mode === 'v2v' ? '源视频' : mode === 'r2v' ? '参考素材' : '首帧图片'}
               </div>
               <MediaInput />
@@ -239,16 +239,16 @@ export default function PlaygroundPage() {
           )}
 
           {/* Prompt */}
-          <section className="border-t border-white/[0.04] px-6 py-5">
-            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
+          <section className="border-t border-glass-border px-6 py-5">
+            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-text-secondary">
               Prompt
             </div>
             <PromptInput />
           </section>
 
           {/* Parameters */}
-          <section className="border-t border-white/[0.04] px-6 py-5">
-            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-white/40">
+          <section className="border-t border-glass-border px-6 py-5">
+            <div className="mb-3 font-mono text-[10px] font-medium uppercase tracking-[0.18em] text-text-secondary">
               参数
             </div>
             <ParameterBar />
@@ -258,22 +258,22 @@ export default function PlaygroundPage() {
           <div className="flex-1" />
 
           {/* Generate CTA (sticky) */}
-          <div className="sticky bottom-0 border-t border-white/[0.08] bg-[#050508] px-6 py-5">
+          <div className="sticky bottom-0 border-t border-glass-border bg-surface px-6 py-5">
             <button
               type="button"
               onClick={handleGenerate}
               disabled={!canGenerate}
               className={[
-                'relative w-full overflow-hidden rounded-lg px-6 py-[14px]',
+                'group relative w-full overflow-hidden rounded-lg px-6 py-[14px]',
                 "font-['Space_Grotesk',sans-serif] text-sm font-semibold tracking-[0.02em] text-white",
                 'transition-all duration-150',
                 canGenerate
-                  ? 'bg-[#646cff] hover:bg-[#535bf2] hover:shadow-[0_4px_20px_rgba(100,108,255,0.35)] active:scale-[0.98] cursor-pointer'
-                  : 'bg-[#646cff]/40 cursor-not-allowed',
+                  ? 'bg-primary hover:bg-secondary hover:shadow-[0_4px_20px_rgba(100,108,255,0.35)] active:scale-[0.98] cursor-pointer'
+                  : 'bg-primary/40 cursor-not-allowed',
               ].join(' ')}
             >
               {/* Glow overlay */}
-              <span className="pointer-events-none absolute inset-0 bg-gradient-to-br from-purple-600/20 via-[#646cff]/10 to-pink-500/15 opacity-0 transition-opacity duration-250 group-hover:opacity-100" />
+              <span className="pointer-events-none absolute inset-0 bg-gradient-to-br from-purple-600/20 via-primary/10 to-pink-500/15 opacity-0 transition-opacity duration-250 group-hover:opacity-100" />
               <span className="relative">{generateLabel}</span>
             </button>
           </div>
diff --git a/frontend/src/components/modules/playground/PromptHistoryDrawer.tsx b/frontend/src/components/modules/playground/PromptHistoryDrawer.tsx
index 748991fd..821d1998 100644
--- a/frontend/src/components/modules/playground/PromptHistoryDrawer.tsx
+++ b/frontend/src/components/modules/playground/PromptHistoryDrawer.tsx
@@ -128,17 +128,17 @@ export default function PromptHistoryDrawer() {
       {/* Drawer */}
       <div
         ref={drawerRef}
-        className="fixed right-0 top-0 h-full w-[400px] bg-[#141416] border-l border-white/[0.08] shadow-2xl flex flex-col transition-transform duration-250 ease-out"
+        className="fixed right-0 top-0 h-full w-[400px] bg-elevated border-l border-glass-border shadow-2xl flex flex-col transition-transform duration-250 ease-out"
         style={{ transform: visible ? 'translateX(0)' : 'translateX(100%)' }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* ── Header ─────────────────────────────────────────────────── */}
-        <div className="px-5 py-4 border-b border-white/[0.04] flex items-center justify-between shrink-0">
-          <h2 className="text-sm font-medium text-white/90">Prompt 历史</h2>
+        <div className="px-5 py-4 border-b border-glass-border flex items-center justify-between shrink-0">
+          <h2 className="text-sm font-medium text-foreground">Prompt 历史</h2>
           <button
             type="button"
             onClick={handleClose}
-            className="w-7 h-7 rounded-md flex items-center justify-center text-white/40 hover:text-white/70 hover:bg-white/[0.06] transition-colors cursor-pointer"
+            className="w-7 h-7 rounded-md flex items-center justify-center text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors cursor-pointer"
           >
             <X className="w-4 h-4" />
           </button>
@@ -147,13 +147,13 @@ export default function PromptHistoryDrawer() {
         {/* ── Search ─────────────────────────────────────────────────── */}
         <div className="px-5 py-3 shrink-0">
           <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-white/30 pointer-events-none" />
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-muted pointer-events-none" />
             <input
               type="text"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               placeholder="搜索历史 prompt..."
-              className="w-full bg-white/[0.04] border border-white/[0.06] rounded-lg pl-9 pr-3 py-2 text-xs text-white/80 placeholder:text-white/25 outline-none focus:border-white/[0.12] transition-colors"
+              className="w-full bg-input-bg border border-glass-border rounded-lg pl-9 pr-3 py-2 text-xs text-foreground placeholder:text-text-muted outline-none focus:border-primary/40 transition-colors"
             />
           </div>
         </div>
@@ -162,7 +162,7 @@ export default function PromptHistoryDrawer() {
         <div className="flex-1 overflow-y-auto px-5 py-2">
           {filtered.length === 0 ? (
             <div className="flex items-center justify-center h-full">
-              <p className="text-xs text-white/25">
+              <p className="text-xs text-text-muted">
                 {search.trim() ? '无匹配结果' : '暂无生成历史'}
               </p>
             </div>
@@ -173,26 +173,26 @@ export default function PromptHistoryDrawer() {
                 className={[
                   'py-3',
                   idx < filtered.length - 1
-                    ? 'border-b border-white/[0.04]'
+                    ? 'border-b border-glass-border'
                     : '',
                 ].join(' ')}
               >
                 {/* Prompt text */}
-                <p className="text-[12px] text-white/80 leading-relaxed line-clamp-3 mb-2">
+                <p className="text-[12px] text-foreground leading-relaxed line-clamp-3 mb-2">
                   {entry.prompt}
                 </p>
 
                 {/* Meta row */}
                 <div className="flex items-center gap-1.5 mb-2">
-                  <span className="font-mono text-[9px] bg-[#646cff]/15 text-[#646cff] rounded px-[6px] py-[2px] uppercase">
+                  <span className="font-mono text-[9px] bg-primary/15 text-primary rounded px-[6px] py-[2px] uppercase">
                     {MODE_LABELS[entry.mode] || entry.mode}
                   </span>
                   {entry.model_id && (
-                    <span className="font-mono text-[9px] bg-white/[0.04] text-white/40 rounded px-[6px] py-[2px]">
+                    <span className="font-mono text-[9px] bg-glass text-text-secondary rounded px-[6px] py-[2px]">
                       {entry.model_id}
                     </span>
                   )}
-                  <span className="font-mono text-[9px] text-white/25 ml-auto">
+                  <span className="font-mono text-[9px] text-text-muted ml-auto">
                     {relativeTime(entry.created_at)}
                   </span>
                 </div>
@@ -202,7 +202,7 @@ export default function PromptHistoryDrawer() {
                   <button
                     type="button"
                     onClick={() => handleCopy(entry.prompt)}
-                    className="flex items-center gap-1 text-[11px] text-white/40 hover:text-white/70 transition-colors cursor-pointer"
+                    className="flex items-center gap-1 text-[11px] text-text-secondary hover:text-foreground transition-colors cursor-pointer"
                   >
                     <Copy className="w-3 h-3" />
                     复制
@@ -210,7 +210,7 @@ export default function PromptHistoryDrawer() {
                   <button
                     type="button"
                     onClick={() => handleSaveAsTemplate(entry.prompt)}
-                    className="flex items-center gap-1 text-[11px] text-white/40 hover:text-white/70 transition-colors cursor-pointer"
+                    className="flex items-center gap-1 text-[11px] text-text-secondary hover:text-foreground transition-colors cursor-pointer"
                   >
                     <BookmarkPlus className="w-3 h-3" />
                     存为模板
diff --git a/frontend/src/components/modules/playground/PromptInput.tsx b/frontend/src/components/modules/playground/PromptInput.tsx
index e10308ee..8c19da49 100644
--- a/frontend/src/components/modules/playground/PromptInput.tsx
+++ b/frontend/src/components/modules/playground/PromptInput.tsx
@@ -25,7 +25,7 @@ export default function PromptInput() {
         value={prompt}
         onChange={(e) => setPrompt(e.target.value.slice(0, MAX_LENGTH))}
         placeholder="描述你想生成的内容..."
-        className="w-full min-h-[120px] max-h-[280px] resize-y p-[14px] border border-white/[0.08] rounded-xl bg-black/30 text-white text-[13px] leading-relaxed placeholder-white/40 focus:border-[#646cff] focus:ring-[3px] focus:ring-[#646cff]/12 outline-none"
+        className="w-full min-h-[120px] max-h-[280px] resize-y p-[14px] border border-glass-border rounded-xl bg-input-bg text-foreground text-[13px] leading-relaxed placeholder:text-text-muted focus:border-primary/60 focus:ring-[3px] focus:ring-primary/15 outline-none"
       />
 
       {/* Toolbar — below the textarea, not overlapping */}
@@ -33,7 +33,7 @@ export default function PromptInput() {
         <button
           type="button"
           onClick={() => setShowTemplateModal(true)}
-          className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium text-white/40 hover:text-white/60 hover:bg-white/[0.06] transition-colors"
+          className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors"
         >
           <Copy size={12} />
           模板
@@ -41,19 +41,19 @@ export default function PromptInput() {
         <button
           type="button"
           onClick={() => setShowHistoryDrawer(true)}
-          className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium text-white/40 hover:text-white/60 hover:bg-white/[0.06] transition-colors"
+          className="inline-flex items-center gap-1 px-2 py-1 rounded text-[11px] font-medium text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors"
         >
           <Clock size={12} />
           历史
         </button>
-        <span className="ml-auto font-mono text-[10px] text-white/30">
+        <span className="ml-auto font-mono text-[10px] text-text-muted">
           {prompt.length} / {MAX_LENGTH}
         </span>
       </div>
 
       {/* Negative prompt toggle */}
       <div
-        className="flex items-center gap-[6px] py-[6px] text-[11px] text-white/40 cursor-pointer hover:text-white/60 mt-2"
+        className="flex items-center gap-[6px] py-[6px] text-[11px] text-text-secondary cursor-pointer hover:text-foreground mt-2"
         onClick={() => setShowNegPrompt((v) => !v)}
       >
         <span
@@ -70,7 +70,7 @@ export default function PromptInput() {
           value={negativePrompt}
           onChange={(e) => setNegativePrompt(e.target.value)}
           placeholder="不希望出现的内容..."
-          className="w-full min-h-[60px] resize-y p-[10px] border border-white/[0.04] rounded-lg bg-black/30 text-white/60 text-xs placeholder-white/40 focus:border-[#646cff] focus:ring-[3px] focus:ring-[#646cff]/12 outline-none"
+          className="w-full min-h-[60px] resize-y p-[10px] border border-glass-border rounded-lg bg-input-bg text-text-secondary text-xs placeholder:text-text-muted focus:border-primary/60 focus:ring-[3px] focus:ring-primary/15 outline-none"
         />
       )}
 
diff --git a/frontend/src/components/modules/playground/PromptTemplateModal.tsx b/frontend/src/components/modules/playground/PromptTemplateModal.tsx
index 40843e3e..854d1006 100644
--- a/frontend/src/components/modules/playground/PromptTemplateModal.tsx
+++ b/frontend/src/components/modules/playground/PromptTemplateModal.tsx
@@ -9,7 +9,7 @@ import { usePlaygroundStore, type PlaygroundTemplate } from "./usePlaygroundStor
 const CATEGORIES = [
   { value: "image", label: "图像", color: "text-blue-400" },
   { value: "video", label: "视频", color: "text-purple-400" },
-  { value: "general", label: "通用", color: "text-white/50" },
+  { value: "general", label: "通用", color: "text-text-secondary" },
 ] as const;
 
 type CategoryValue = (typeof CATEGORIES)[number]["value"];
@@ -138,7 +138,7 @@ export default function PromptTemplateModal() {
     <>
       <div
         aria-hidden="true"
-        className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm"
+        className="fixed inset-0 z-50 bg-black/70 backdrop-blur-sm"
         onClick={() => setShowTemplateModal(false)}
       />
 
@@ -148,23 +148,23 @@ export default function PromptTemplateModal() {
           role="dialog"
           aria-modal="true"
           tabIndex={-1}
-          className="pointer-events-auto w-[560px] max-h-[85vh] bg-[#0e0e11] border border-white/[0.06] rounded-2xl shadow-[0_24px_80px_rgba(0,0,0,0.8)] flex flex-col overflow-hidden outline-none"
+          className="pointer-events-auto w-[560px] max-h-[85vh] bg-elevated border border-glass-border rounded-2xl shadow-[0_24px_80px_rgba(0,0,0,0.28)] flex flex-col overflow-hidden outline-none"
         >
           {/* Header */}
-          <div className="px-6 py-5 border-b border-white/[0.06] flex items-center justify-between shrink-0">
+          <div className="px-6 py-5 border-b border-glass-border flex items-center justify-between shrink-0">
             <div className="flex items-center gap-3">
-              <div className="w-8 h-8 rounded-lg bg-[#646cff]/15 flex items-center justify-center">
-                <BookmarkPlus size={16} className="text-[#646cff]" />
+              <div className="w-8 h-8 rounded-lg bg-primary/15 flex items-center justify-center">
+                <BookmarkPlus size={16} className="text-primary" />
               </div>
               <div>
-                <h2 className="text-[15px] font-semibold text-white">Prompt 模板</h2>
-                <p className="text-[10px] text-white/30 mt-0.5">保存常用提示词，一键套用</p>
+                <h2 className="text-[15px] font-semibold text-foreground">Prompt 模板</h2>
+                <p className="text-[10px] text-text-muted mt-0.5">保存常用提示词，一键套用</p>
               </div>
             </div>
             <button
               type="button"
               onClick={() => setShowTemplateModal(false)}
-              className="grid h-8 w-8 place-items-center rounded-lg text-white/30 transition-colors hover:bg-white/[0.06] hover:text-white/60"
+              className="grid h-8 w-8 place-items-center rounded-lg text-text-secondary transition-colors hover:bg-hover-bg hover:text-foreground"
             >
               <X size={16} />
             </button>
@@ -180,13 +180,13 @@ export default function PromptTemplateModal() {
                 className={[
                   "px-3 py-1.5 rounded-md text-[11px] font-medium transition-all",
                   filterCat === c.value
-                    ? "text-white bg-white/[0.08] border border-white/[0.08]"
-                    : "text-white/35 hover:text-white/55 hover:bg-white/[0.03] border border-transparent",
+                    ? "text-foreground bg-hover-bg border border-glass-border"
+                    : "text-text-secondary hover:text-foreground hover:bg-hover-bg border border-transparent",
                 ].join(" ")}
               >
                 {c.label}
                 {c.value !== "all" && (
-                  <span className="ml-1.5 text-[9px] text-white/20">
+                  <span className="ml-1.5 text-[9px] text-text-muted">
                     {templates.filter((t) => t.category === c.value).length}
                   </span>
                 )}
@@ -198,11 +198,11 @@ export default function PromptTemplateModal() {
           <div className="flex-1 overflow-y-auto px-6 py-3 min-h-0 space-y-2">
             {filtered.length === 0 && (
               <div className="flex flex-col items-center justify-center py-12 text-center">
-                <Sparkles size={28} className="text-white/10 mb-3" />
-                <p className="text-[13px] text-white/25 mb-1">
+                <Sparkles size={28} className="text-text-muted mb-3" />
+                <p className="text-[13px] text-text-secondary mb-1">
                   {filterCat === "all" ? "暂无模板" : `暂无${categoryMeta(filterCat).label}模板`}
                 </p>
-                <p className="text-[11px] text-white/15">点击下方「新建」创建你的第一个模板</p>
+                <p className="text-[11px] text-text-muted">点击下方「新建」创建你的第一个模板</p>
               </div>
             )}
 
@@ -211,22 +211,22 @@ export default function PromptTemplateModal() {
               return (
                 <div
                   key={tpl.id}
-                  className="group p-4 rounded-xl bg-white/[0.02] border border-white/[0.04] hover:border-white/[0.1] hover:bg-white/[0.03] transition-all"
+                  className="group p-4 rounded-xl bg-glass border border-glass-border hover:border-primary/30 hover:bg-hover-bg transition-all"
                 >
                   <div className="flex items-start gap-3">
                     <div className="flex-1 min-w-0">
                       <div className="flex items-center gap-2 mb-1.5">
-                        <span className="text-[13px] font-medium text-white truncate">{tpl.name}</span>
-                        <span className={`text-[9px] font-mono uppercase px-1.5 py-[2px] rounded bg-white/[0.05] shrink-0 ${meta.color}`}>
+                        <span className="text-[13px] font-medium text-foreground truncate">{tpl.name}</span>
+                        <span className={`text-[9px] font-mono uppercase px-1.5 py-[2px] rounded bg-glass shrink-0 ${meta.color}`}>
                           {meta.label}
                         </span>
                         {tpl.default_mode && (
-                          <span className="text-[9px] font-mono uppercase px-1.5 py-[2px] rounded bg-white/[0.04] text-white/25 shrink-0">
+                          <span className="text-[9px] font-mono uppercase px-1.5 py-[2px] rounded bg-glass text-text-muted shrink-0">
                             {tpl.default_mode}
                           </span>
                         )}
                       </div>
-                      <p className="text-[11px] text-white/40 line-clamp-2 leading-[1.6]">{tpl.prompt}</p>
+                      <p className="text-[11px] text-text-secondary line-clamp-2 leading-[1.6]">{tpl.prompt}</p>
                     </div>
 
                     {/* Actions — visible on hover */}
@@ -237,7 +237,7 @@ export default function PromptTemplateModal() {
                         className={`h-7 w-7 rounded-md flex items-center justify-center transition-colors ${
                           isTemplateFavorited(tpl.id)
                             ? 'text-amber-400'
-                            : 'text-white/25 hover:text-amber-400/70'
+                            : 'text-text-muted hover:text-amber-400/70'
                         }`}
                         title={isTemplateFavorited(tpl.id) ? '取消收藏' : '收藏'}
                       >
@@ -246,7 +246,7 @@ export default function PromptTemplateModal() {
                       <button
                         type="button"
                         onClick={() => handleApply(tpl)}
-                        className="h-7 px-2.5 rounded-md text-[11px] font-medium text-[#646cff] bg-[#646cff]/10 hover:bg-[#646cff]/20 transition-colors flex items-center gap-1"
+                        className="h-7 px-2.5 rounded-md text-[11px] font-medium text-primary bg-primary/10 hover:bg-primary/20 transition-colors flex items-center gap-1"
                       >
                         <Copy size={11} />
                         套用
@@ -255,7 +255,7 @@ export default function PromptTemplateModal() {
                         type="button"
                         onClick={() => handleDelete(tpl.id)}
                         disabled={deletingId === tpl.id}
-                        className="h-7 w-7 rounded-md flex items-center justify-center text-white/25 hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-30"
+                        className="h-7 w-7 rounded-md flex items-center justify-center text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors disabled:opacity-30"
                       >
                         <Trash2 size={12} />
                       </button>
@@ -267,7 +267,7 @@ export default function PromptTemplateModal() {
           </div>
 
           {/* Footer: create form */}
-          <div className="border-t border-white/[0.06] shrink-0">
+          <div className="border-t border-glass-border shrink-0">
             {/* Toggle row */}
             <div className="px-6 py-3 flex items-center">
               {!formOpen ? (
@@ -275,7 +275,7 @@ export default function PromptTemplateModal() {
                   <button
                     type="button"
                     onClick={() => setFormOpen(true)}
-                    className="inline-flex items-center gap-1.5 text-xs font-medium text-white/40 hover:text-white/60 transition-colors"
+                    className="inline-flex items-center gap-1.5 text-xs font-medium text-text-secondary hover:text-foreground transition-colors"
                   >
                     <Plus size={14} />
                     新建模板
@@ -284,7 +284,7 @@ export default function PromptTemplateModal() {
                     <button
                       type="button"
                       onClick={handlePrefill}
-                      className="ml-auto inline-flex items-center gap-1.5 text-[11px] font-medium text-white/30 hover:text-white/50 transition-colors"
+                      className="ml-auto inline-flex items-center gap-1.5 text-[11px] font-medium text-text-muted hover:text-text-secondary transition-colors"
                     >
                       <Copy size={11} />
                       从当前输入保存
@@ -293,11 +293,11 @@ export default function PromptTemplateModal() {
                 </>
               ) : (
                 <>
-                  <span className="text-xs font-medium text-white/60">新建模板</span>
+                  <span className="text-xs font-medium text-text-secondary">新建模板</span>
                   <button
                     type="button"
                     onClick={() => { setFormOpen(false); setForm(EMPTY_FORM); }}
-                    className="ml-auto text-[11px] text-white/30 hover:text-white/50 transition-colors"
+                    className="ml-auto text-[11px] text-text-muted hover:text-text-secondary transition-colors"
                   >
                     收起
                   </button>
@@ -315,13 +315,13 @@ export default function PromptTemplateModal() {
                     value={form.name}
                     onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
                     placeholder="模板名称"
-                    className="flex-1 h-9 px-3 text-[13px] bg-white/[0.04] border border-white/[0.06] rounded-lg text-white placeholder:text-white/20 outline-none focus:border-[#646cff]/40 transition-colors"
+                    className="flex-1 h-9 px-3 text-[13px] bg-input-bg border border-glass-border rounded-lg text-foreground placeholder:text-text-muted outline-none focus:border-primary/40 transition-colors"
                     autoFocus
                   />
                 </div>
 
                 {/* Category pills */}
-                <div className="flex gap-0 p-[2px] bg-white/[0.02] rounded-lg border border-white/[0.04]">
+                <div className="flex gap-0 p-[2px] bg-glass rounded-lg border border-glass-border">
                   {CATEGORIES.map((c) => (
                     <button
                       key={c.value}
@@ -330,8 +330,8 @@ export default function PromptTemplateModal() {
                       className={[
                         "flex-1 py-[6px] rounded-md text-[11px] font-medium text-center cursor-pointer transition-all",
                         form.category === c.value
-                          ? "text-white bg-[#646cff] shadow-[0_1px_4px_rgba(100,108,255,0.3)]"
-                          : "text-white/35 hover:text-white/50",
+                          ? "text-white bg-primary shadow-[0_1px_4px_rgba(100,108,255,0.3)]"
+                          : "text-text-secondary hover:text-foreground",
                       ].join(" ")}
                     >
                       {c.label}
@@ -345,7 +345,7 @@ export default function PromptTemplateModal() {
                   onChange={(e) => setForm((f) => ({ ...f, prompt: e.target.value }))}
                   placeholder="输入 Prompt 内容..."
                   rows={5}
-                  className="w-full min-h-[120px] px-3 py-2.5 text-[13px] leading-relaxed bg-white/[0.04] border border-white/[0.06] rounded-lg text-white placeholder:text-white/20 outline-none focus:border-[#646cff]/40 transition-colors resize-y"
+                  className="w-full min-h-[120px] px-3 py-2.5 text-[13px] leading-relaxed bg-input-bg border border-glass-border rounded-lg text-foreground placeholder:text-text-muted outline-none focus:border-primary/40 transition-colors resize-y"
                 />
 
                 {/* Submit */}
@@ -356,8 +356,8 @@ export default function PromptTemplateModal() {
                   className={[
                     "w-full h-9 rounded-lg text-[13px] font-medium transition-all",
                     form.name.trim() && form.prompt.trim()
-                      ? "bg-[#646cff] text-white hover:bg-[#535bf2] shadow-[0_2px_12px_rgba(100,108,255,0.25)]"
-                      : "bg-white/[0.04] text-white/20 cursor-not-allowed",
+                      ? "bg-primary text-white hover:bg-secondary shadow-[0_2px_12px_rgba(100,108,255,0.25)]"
+                      : "bg-glass text-text-muted cursor-not-allowed",
                   ].join(" ")}
                 >
                   {busy ? "保存中…" : "保存模板"}
diff --git a/frontend/src/components/modules/playground/ResultCard.tsx b/frontend/src/components/modules/playground/ResultCard.tsx
index 1222f4e6..b91f6874 100644
--- a/frontend/src/components/modules/playground/ResultCard.tsx
+++ b/frontend/src/components/modules/playground/ResultCard.tsx
@@ -56,9 +56,9 @@ function FailedCard({ generation, onRetry, onDelete }: { generation: PlaygroundG
   };
 
   return (
-    <div className="rounded-xl border border-red-500/20 bg-white/[0.04] overflow-hidden">
+    <div className="rounded-xl border border-red-500/25 bg-red-500/[0.04] overflow-hidden">
       <div
-        className="relative overflow-hidden bg-[#141416] flex flex-col items-center justify-center cursor-pointer"
+        className="relative overflow-hidden bg-surface-inset flex flex-col items-center justify-center cursor-pointer"
         style={{ aspectRatio: expanded ? undefined : '16/9', minHeight: expanded ? 120 : undefined }}
         onClick={() => setExpanded((v) => !v)}
       >
@@ -66,7 +66,7 @@ function FailedCard({ generation, onRetry, onDelete }: { generation: PlaygroundG
         <div className="relative text-center px-4 py-3 w-full">
           <p className="font-mono text-[10px] text-red-400/80 uppercase mb-2">生成失败</p>
           {error && (
-            <p className={`text-[10px] text-white/40 leading-relaxed break-all ${expanded ? '' : 'line-clamp-2'}`}>
+            <p className={`text-[10px] text-text-secondary leading-relaxed break-all ${expanded ? '' : 'line-clamp-2'}`}>
               {error}
             </p>
           )}
@@ -77,7 +77,7 @@ function FailedCard({ generation, onRetry, onDelete }: { generation: PlaygroundG
           {onRetry && (
             <button
               onClick={(e) => { e.stopPropagation(); onRetry(generation); }}
-              className="inline-flex items-center gap-1 px-2.5 py-1 rounded text-[10px] font-medium text-[#646cff] bg-[#646cff]/10 hover:bg-[#646cff]/20 transition-colors"
+              className="inline-flex items-center gap-1 px-2.5 py-1 rounded text-[10px] font-medium text-primary bg-primary/10 hover:bg-primary/20 transition-colors"
             >
               ↻ 重试
             </button>
@@ -93,25 +93,25 @@ function FailedCard({ generation, onRetry, onDelete }: { generation: PlaygroundG
           {error && (
             <button
               onClick={handleCopy}
-              className="inline-flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium text-white/40 hover:text-white/60 hover:bg-white/[0.06] transition-colors"
+              className="inline-flex items-center gap-1 px-2 py-1 rounded text-[10px] font-medium text-text-secondary hover:text-foreground hover:bg-hover-bg transition-colors"
             >
               {copied ? <Check className="w-3 h-3 text-green-400" /> : <Copy className="w-3 h-3" />}
               {copied ? '已复制' : '复制全文'}
             </button>
           )}
-          <span className="text-[9px] text-white/20 ml-auto">
+          <span className="text-[9px] text-text-muted ml-auto">
             {expanded ? '收起' : '展开'}
           </span>
         </div>
       </div>
 
       <div className="px-3 py-[10px]">
-        <p className="text-[11px] text-white/60 line-clamp-2 mb-1.5">{prompt}</p>
+        <p className="text-[11px] text-text-secondary line-clamp-2 mb-1.5">{prompt}</p>
         <div className="flex items-center gap-2">
-          <span className="font-mono text-[9px] bg-white/[0.04] text-white/40 rounded px-[6px] py-[2px]">
+          <span className="font-mono text-[9px] bg-glass text-text-secondary rounded px-[6px] py-[2px]">
             {model_id || mode}
           </span>
-          <span className="font-mono text-[9px] text-white/30">
+          <span className="font-mono text-[9px] text-text-muted">
             {formatTime(created_at)}
           </span>
         </div>
@@ -171,21 +171,21 @@ function CompletedCard({ generation, onGenerateVideo, onOpenDetail }: { generati
 
   return (
     <div
-      className="group rounded-xl border border-white/[0.08] bg-white/[0.04] overflow-hidden hover:border-white/15 transition cursor-pointer"
+      className="group rounded-xl border border-glass-border bg-glass overflow-hidden hover:border-primary/35 transition cursor-pointer"
       onClick={() => onOpenDetail?.(generation)}
     >
       {/* Media area */}
-      <div className="relative overflow-hidden bg-[#141416]" style={{ aspectRatio: '16/9' }}>
+      <div className="relative overflow-hidden bg-surface-inset" style={{ aspectRatio: '16/9' }}>
         {mediaUrl ? (
           isVideo ? (
-            <div className="w-full h-full bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1a] flex items-center justify-center">
-              <Video className="w-8 h-8 text-white/20" />
+            <div className="w-full h-full bg-surface-inset flex items-center justify-center">
+              <Video className="w-8 h-8 text-text-muted" />
             </div>
           ) : (
             <img src={mediaUrl} alt={prompt} className="w-full h-full object-cover" />
           )
         ) : (
-          <div className="w-full h-full bg-gradient-to-br from-[#1a1a2e] to-[#0f0f1a]" />
+          <div className="w-full h-full bg-surface-inset" />
         )}
 
         {/* Video badge top-left */}
@@ -225,27 +225,27 @@ function CompletedCard({ generation, onGenerateVideo, onOpenDetail }: { generati
 
       {/* Info area */}
       <div className="px-3 py-[10px]">
-        <p className="text-[11px] text-white/60 line-clamp-2 mb-1.5">{prompt}</p>
+        <p className="text-[11px] text-text-secondary line-clamp-2 mb-1.5">{prompt}</p>
         <div className="flex items-center gap-1.5 flex-wrap">
-          <span className="font-mono text-[9px] bg-white/[0.04] text-white/40 rounded px-[6px] py-[2px]">
+          <span className="font-mono text-[9px] bg-glass text-text-secondary rounded px-[6px] py-[2px]">
             {model_id || mode}
           </span>
           {/* Size or resolution tag */}
           {generation.parameters.size && (
-            <span className="font-mono text-[9px] bg-white/[0.04] text-white/30 rounded px-[6px] py-[2px]">
+            <span className="font-mono text-[9px] bg-glass text-text-muted rounded px-[6px] py-[2px]">
               {(generation.parameters.size as string).replace('*', '×').replace('x', '×')}
             </span>
           )}
           {generation.parameters.resolution && !generation.parameters.size && (
-            <span className="font-mono text-[9px] bg-white/[0.04] text-white/30 rounded px-[6px] py-[2px]">
+            <span className="font-mono text-[9px] bg-glass text-text-muted rounded px-[6px] py-[2px]">
               {generation.parameters.resolution as string}
             </span>
           )}
           {/* Mode badge */}
-          <span className="font-mono text-[9px] bg-[#646cff]/10 text-[#646cff]/70 rounded px-[6px] py-[2px] uppercase">
+          <span className="font-mono text-[9px] bg-primary/10 text-primary rounded px-[6px] py-[2px] uppercase">
             {MODE_LABELS[mode] || mode}
           </span>
-          <span className="font-mono text-[9px] text-white/30 ml-auto">{formatTime(created_at)}</span>
+          <span className="font-mono text-[9px] text-text-muted ml-auto">{formatTime(created_at)}</span>
           {saved && (
             <span className="flex items-center gap-0.5 text-[9px] text-green-400/70">
               <Star className="w-2.5 h-2.5 fill-current" />
@@ -263,16 +263,16 @@ export default function ResultCard({ generation, onGenerateVideo, onRetry, onOpe
   // ─── PROCESSING STATE ───────────────────────────────────────────────────────
   if (status === 'pending' || status === 'processing') {
     return (
-      <div className="rounded-xl border border-white/[0.08] bg-white/[0.04] overflow-hidden">
+      <div className="rounded-xl border border-glass-border bg-glass overflow-hidden">
         {/* Media area */}
-        <div className="relative overflow-hidden bg-[#141416]" style={{ aspectRatio: '16/9' }}>
+        <div className="relative overflow-hidden bg-surface-inset" style={{ aspectRatio: '16/9' }}>
           {/* Skeleton shimmer */}
           <div className="absolute inset-0 overflow-hidden">
             <div
               className="absolute inset-0 animate-shimmer"
               style={{
                 background:
-                  'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)',
+                  'linear-gradient(90deg, transparent 0%, var(--color-glass) 50%, transparent 100%)',
                 backgroundSize: '200% 100%',
               }}
             />
@@ -280,16 +280,16 @@ export default function ResultCard({ generation, onGenerateVideo, onRetry, onOpe
 
           {/* Centered spinner + text */}
           <div className="absolute inset-0 flex flex-col items-center justify-center gap-2">
-            <div className="w-6 h-6 border-2 border-white/10 border-t-[#646cff] rounded-full animate-spin" />
-            <span className="font-mono text-[10px] text-white/40 uppercase">
+            <div className="w-6 h-6 border-2 border-glass-border border-t-primary rounded-full animate-spin" />
+            <span className="font-mono text-[10px] text-text-secondary uppercase">
               {status === 'pending' ? '排队中...' : '生成中...'}
             </span>
           </div>
 
           {/* Progress bar */}
-          <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-white/[0.04]">
+          <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-glass">
             <div
-              className="h-full bg-[#646cff] transition-all duration-1000 ease-out"
+              className="h-full bg-primary transition-all duration-1000 ease-out"
               style={{ width: `${getElapsedProgress(created_at)}%` }}
             />
           </div>
@@ -297,12 +297,12 @@ export default function ResultCard({ generation, onGenerateVideo, onRetry, onOpe
 
         {/* Info area */}
         <div className="px-3 py-[10px]">
-          <p className="text-[11px] text-white/60 line-clamp-2 mb-1.5">{prompt}</p>
+          <p className="text-[11px] text-text-secondary line-clamp-2 mb-1.5">{prompt}</p>
           <div className="flex items-center gap-2">
-            <span className="font-mono text-[9px] bg-white/[0.04] text-white/40 rounded px-[6px] py-[2px]">
+            <span className="font-mono text-[9px] bg-glass text-text-secondary rounded px-[6px] py-[2px]">
               {model_id || mode}
             </span>
-            <span className="font-mono text-[9px] text-white/30">
+            <span className="font-mono text-[9px] text-text-muted">
               {formatTime(created_at)}
             </span>
           </div>
diff --git a/frontend/src/components/modules/playground/ResultGallery.tsx b/frontend/src/components/modules/playground/ResultGallery.tsx
index 7188d365..f5c381f6 100644
--- a/frontend/src/components/modules/playground/ResultGallery.tsx
+++ b/frontend/src/components/modules/playground/ResultGallery.tsx
@@ -157,9 +157,9 @@ export default function ResultGallery() {
   if (history.length === 0) {
     return (
       <div className="flex flex-col flex-1 overflow-hidden min-w-0 items-center justify-center">
-        <Sparkles className="w-12 h-12 text-white/40 opacity-40 mb-4" />
-        <p className="text-sm text-white/40 mb-1">暂无生成结果</p>
-        <p className="text-xs text-white/25">输入提示词并点击生成，结果将展示在这里</p>
+        <Sparkles className="w-12 h-12 text-text-secondary opacity-40 mb-4" />
+        <p className="text-sm text-text-secondary mb-1">暂无生成结果</p>
+        <p className="text-xs text-text-muted">输入提示词并点击生成，结果将展示在这里</p>
       </div>
     );
   }
@@ -167,26 +167,26 @@ export default function ResultGallery() {
   return (
     <div className="flex flex-col flex-1 overflow-hidden min-w-0">
       {/* Header */}
-      <div className="px-7 py-4 flex items-center justify-between border-b border-white/[0.04] shrink-0">
+      <div className="px-7 py-4 flex items-center justify-between border-b border-glass-border shrink-0">
         <div className="flex items-center gap-2">
-          <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/40">
+          <span className="font-mono text-[11px] uppercase tracking-[0.18em] text-text-secondary">
             生成结果
           </span>
-          <span className="font-mono text-[10px] bg-white/[0.06] text-white/50 rounded px-[6px] py-[1px]">
+          <span className="font-mono text-[10px] bg-glass text-text-secondary rounded px-[6px] py-[1px]">
             {filtered.length}
           </span>
         </div>
 
         <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1 rounded-md bg-white/[0.04] p-[3px]">
+          <div className="flex items-center gap-1 rounded-md bg-glass p-[3px]">
             {filters.map((f) => (
               <button
                 key={f.key}
                 onClick={() => setActiveFilter(f.key)}
                 className={`rounded px-2.5 py-1 text-[11px] font-medium transition-colors ${
                   activeFilter === f.key
-                    ? 'bg-white/[0.08] text-white/80'
-                    : 'text-white/40 hover:text-white/60'
+                    ? 'bg-hover-bg text-foreground'
+                    : 'text-text-secondary hover:text-foreground'
                 }`}
               >
                 {f.label}
@@ -194,13 +194,13 @@ export default function ResultGallery() {
             ))}
           </div>
 
-          <div className="flex items-center gap-0.5 rounded-md bg-white/[0.04] p-[3px]">
+          <div className="flex items-center gap-0.5 rounded-md bg-glass p-[3px]">
             <button
               onClick={() => setViewMode('grid')}
               className={`rounded p-1.5 transition-colors ${
                 viewMode === 'grid'
-                  ? 'bg-white/[0.08] text-white'
-                  : 'text-white/30 hover:text-white/50'
+                  ? 'bg-hover-bg text-foreground'
+                  : 'text-text-muted hover:text-text-secondary'
               }`}
               title="Grid view"
             >
@@ -210,8 +210,8 @@ export default function ResultGallery() {
               onClick={() => setViewMode('gallery')}
               className={`rounded p-1.5 transition-colors ${
                 viewMode === 'gallery'
-                  ? 'bg-white/[0.08] text-white'
-                  : 'text-white/30 hover:text-white/50'
+                  ? 'bg-hover-bg text-foreground'
+                  : 'text-text-muted hover:text-text-secondary'
               }`}
               title="Gallery view"
             >
@@ -238,11 +238,11 @@ export default function ResultGallery() {
                     key={item.key}
                     className="col-span-full flex items-center gap-3 py-2"
                   >
-                    <div className="flex-1 h-px bg-white/[0.06]" />
-                    <span className="font-mono text-[9px] text-white/40 uppercase tracking-wider whitespace-nowrap">
+                    <div className="flex-1 h-px bg-border-subtle" />
+                    <span className="font-mono text-[9px] text-text-secondary uppercase tracking-wider whitespace-nowrap">
                       {item.label}
                     </span>
-                    <div className="flex-1 h-px bg-white/[0.06]" />
+                    <div className="flex-1 h-px bg-border-subtle" />
                   </div>
                 );
               }