diff --git a/frontend/src/index.css b/frontend/src/index.css
index d106f45..2320ec9 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,144 +1,135 @@
 @import "tailwindcss";
 
 @theme {
-  --color-gray-50: #F5E6E6;
-  --color-gray-100: #F0E0E0;
-  --color-gray-200: #E8D0D0;
-  --color-gray-300: #D4B5B5;
-  --color-gray-400: #C0A0A0;
-  --color-gray-500: #999999;
-  --color-gray-600: #8C6C6C;
-  --color-gray-700: #6C5050;
-  --color-gray-800: #4C3434;
-  --color-gray-900: #333333;
-  --color-blue-50: #FDF5F0;
-  --color-blue-100: #FAF0E8;
+  --color-gray-50: #FAF5F0;
+  --color-gray-100: #F0EAE5;
+  --color-gray-200: #E5DDD5;
+  --color-gray-300: #D5CCCC;
+  --color-gray-400: #A09090;
+  --color-gray-500: #707070;
+  --color-gray-600: #505050;
+  --color-gray-700: #404040;
+  --color-gray-800: #2A2A2A;
+  --color-gray-900: #1A1A1A;
+  --color-blue-50: #FDF0F0;
+  --color-blue-100: #FAE5E5;
   --color-blue-500: #C9A96E;
-  --color-blue-600: #D4A5A5;
-  --color-blue-700: #C9A96E;
+  --color-blue-600: #C07A7A;
+  --color-blue-700: #B06060;
+  --color-brand-500: #C07A7A;
+  --color-brand-600: #C07A7A;
+  --color-brand-700: #B06060;
+  --color-slate-100: #F0EAE5;
+  --color-slate-200: #E5DDD5;
+  --color-slate-300: #D5CCCC;
+  --color-slate-400: #A09090;
+  --color-slate-500: #707070;
+  --color-slate-600: #505050;
+  --color-slate-700: #404040;
+  --color-slate-800: #2A2A2A;
 }
 
-.dark .bg-blue-600,
-.dark .bg-blue-700:hover {
-  background-color: #9B8EC4 !important;
-  border-color: #9B8EC4 !important;
+.rounded-btn { border-radius: 0.5rem; }
+
+body {
+  background-color: #FAF5F0;
+  color: #1A1A1A;
+}
+
+a { color: #404040; }
+a:hover { color: #B06060; }
+
+.bg-blue-600 {
+  background-color: #C07A7A !important;
   color: #FFFFFF !important;
 }
+.bg-blue-600:hover { background-color: #B06060 !important; }
+.bg-blue-700 { background-color: #B06060 !important; color: #FFFFFF !important; }
+.text-blue-600 { color: #C07A7A !important; }
+.text-blue-700 { color: #B06060 !important; }
 
-.dark .bg-blue-500 {
-  background-color: #4CB8A7 !important;
+button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]),
+button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]) {
+  background-color: #FFFFFF !important;
+  border: 1px solid #D5CCCC;
+  color: #1A1A1A !important;
+}
+button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]):hover,
+button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]):hover {
+  background-color: #F0EAE5 !important;
 }
 
 .dark {
-  background-color: #1A1830 !important;
+  background-color: #3C384C !important;
 }
 
-.dark body {
-  background-color: #1A1830 !important;
+.dark * {
+  color: #F4F0E8 !important;
 }
 
-.dark .bg-gray-50,
-.dark .bg-white,
-.dark aside,
-.dark header {
-  background-color: #282540 !important;
-}
-
-.dark .dark\:bg-gray-900 {
-  background-color: #1A1830 !important;
-}
-
-.dark .dark\:bg-gray-800 {
-  background-color: #2C2840 !important;
-}
-
-.dark .dark\:bg-gray-700,
-.dark .dark\:hover\:bg-gray-100:hover {
-  background-color: #3A3650 !important;
-}
-
-.dark input,
-.dark select {
-  background-color: #2C2840 !important;
-  border-color: #3A3650 !important;
-  color: #E8E4F0 !important;
-}
-
-.dark .border-gray-200,
-.dark .dark\:border-gray-700 {
-  border-color: #3A3650 !important;
-}
-
-.dark .text-gray-900,
-.dark .text-gray-800,
-.dark .text-gray-700,
-.dark h2,
-.dark .font-bold,
-.dark .font-semibold {
-  color: #E8E4F0 !important;
-}
-
-.dark .text-gray-600,
-.dark .dark\:text-gray-400 {
-  color: #C8C0D8 !important;
-}
-
-.dark .text-gray-500 {
-  color: #A8A0C0 !important;
-}
-
-.dark .text-gray-400,
-.dark .dark\:text-gray-300 {
+.dark .bg-blue-600,
+.dark .bg-blue-700,
+.dark [class*="text-blue-"],
+.dark [class*="text-brand-"] {
   color: #9B8EC4 !important;
 }
 
-.dark .text-blue-600 {
-  color: #9B8EC4 !important;
-}
-
-.dark .text-blue-700 {
-  color: #4CB8A7 !important;
-}
-
-.dark .dark\:bg-gray-50 {
-  background-color: #1A1830 !important;
-}
-
-button.rounded-lg:not([class*="bg-blue"]),
-button.rounded-md:not([class*="bg-blue"]),
-.btn-ghost {
-  background-color: rgba(255,255,255,0.85) !important;
-}
-
-button.rounded-lg:not([class*="bg-blue"]):hover,
-button.rounded-md:not([class*="bg-blue"]):hover,
-.btn-ghost:hover {
-  background-color: var(--color-gray-100) !important;
-}
-
-.dark button.rounded-lg:not([class*="bg-blue"]),
-.dark button.rounded-md:not([class*="bg-blue"]),
-.dark .btn-ghost {
-  background-color: #2C2840 !important;
-  border-color: #3A3650 !important;
-  color: #E8E4F0 !important;
-}
-
-.dark button.rounded-lg:not([class*="bg-blue"]):hover,
-.dark button.rounded-md:not([class*="bg-blue"]):hover,
-.dark .btn-ghost:hover {
-  background-color: #3A3650 !important;
-}
-
-.bg-blue-600,
-.bg-blue-700:hover {
-  background-color: #D4A5A5 !important;
-  border: 1px solid #D4A5A5;
+.dark .bg-blue-600:hover,
+.dark .bg-blue-700:hover,
+.dark .bg-brand-600:hover,
+.dark .bg-brand-700:hover {
+  background-color: #4CB8A7 !important;
   color: #FFFFFF !important;
 }
 
-.bg-blue-600:hover,
-.bg-blue-700 {
-  background-color: #C9A96E !important;
-  border-color: #C9A96E !important;
+.dark .bg-blue-600,
+.dark .bg-blue-700,
+.dark .bg-brand-600,
+.dark .bg-brand-700 {
+  background-color: #9B8EC4 !important;
+  color: #FFFFFF !important;
+}
+
+.dark .bg-white,
+.dark .bg-gray-50,
+.dark aside,
+.dark header {
+  background-color: #4C485C !important;
+  border-color: #5C5870 !important;
+}
+
+.dark .dark\:bg-gray-900,
+.dark .dark\:bg-gray-800,
+.dark .dark\:bg-gray-700,
+.dark .dark\:bg-slate-800 {
+  background-color: #4C485C !important;
+}
+
+.dark .dark\:hover\:bg-gray-100:hover {
+  background-color: #5C5870 !important;
+}
+
+.dark input,
+.dark select,
+.dark textarea {
+  background-color: #4C485C !important;
+  border-color: #5C5870 !important;
+}
+
+.dark .dark\:border-gray-700,
+.dark .border-gray-200,
+.dark .dark\:border-slate-700,
+.dark .dark\:border-slate-600 {
+  border-color: #5C5870 !important;
+}
+
+.dark button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]),
+.dark button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]) {
+  background-color: #5C5870 !important;
+  border-color: #6C6880 !important;
+}
+
+.dark button.rounded-lg:not([class*="bg-blue"]):not([class*="bg-brand"]):hover,
+.dark button.rounded-md:not([class*="bg-blue"]):not([class*="bg-brand"]):hover {
+  background-color: #6C6880 !important;
 }
diff --git a/frontend/src/pages/ProjectsPage.tsx b/frontend/src/pages/ProjectsPage.tsx
index 1ffccd3..863a586 100644
--- a/frontend/src/pages/ProjectsPage.tsx
+++ b/frontend/src/pages/ProjectsPage.tsx
@@ -38,8 +38,8 @@ export default function ProjectsPage() {
       </div>
 
       <div className="mb-8 flex gap-2">
-        <input value={name} onChange={e => setName(e.target.value)} placeholder="项目名称" className="w-40" />
-        <input value={desc} onChange={e => setDesc(e.target.value)} placeholder="描述（可选）" className="flex-1" />
+        <input value={name} onChange={e => setName(e.target.value)} placeholder="项目名称" className="w-40 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800" />
+        <input value={desc} onChange={e => setDesc(e.target.value)} placeholder="描述（可选）" className="flex-1 rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-brand-500 focus:outline-none dark:border-slate-600 dark:bg-slate-800" />
         <button onClick={() => createMut.mutate()} disabled={!name.trim()}
           className="inline-flex items-center gap-1.5 rounded-btn bg-brand-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-all duration-200 hover:bg-brand-700 active:scale-[0.98] disabled:opacity-50">
           <Plus size={14} /> 新建