diff --git a/web/src/App.vue b/web/src/App.vue
index e0acf22..709321a 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -66,7 +66,7 @@ const sidebarOpen = ref(false)
 /* === 侧边栏 === */
 .sidebar {
   width: 220px;
-  background: linear-gradient(180deg, var(--stone-1) 0%, var(--stone-0) 100%);
+  background: linear-gradient(180deg, var(--gray-1) 0%, var(--gray-0) 100%);
   padding: var(--size-5);
   border-right: 1px solid var(--border);
   transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/web/src/assets/base.css b/web/src/assets/base.css
index 534f31b..5bd20f6 100644
--- a/web/src/assets/base.css
+++ b/web/src/assets/base.css
@@ -12,7 +12,7 @@
 @import 'open-props/buttons/light';
 
 /* individual imports */
-@import 'open-props/indigo';
+@import 'open-props/violet';
 @import 'open-props/easings';
 @import 'open-props/animations';
 @import 'open-props/sizes';
@@ -43,12 +43,12 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--stone-4);
+  background: var(--gray-4);
   border-radius: var(--radius-2);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--stone-5);
+  background: var(--gray-5);
 }
 
 /* 按钮重置 — 覆盖 Open Props 默认样式 */
@@ -67,10 +67,10 @@ textarea {
   font-family: inherit;
   font-size: var(--font-size-1);
   padding: var(--size-2) var(--size-3);
-  border: 1px solid var(--stone-3);
+  border: 1px solid var(--gray-3);
   border-radius: var(--radius-2);
-  background-color: var(--stone-0);
-  color: var(--stone-10);
+  background-color: var(--gray-0);
+  color: var(--gray-10);
   transition: border-color 0.2s, box-shadow 0.2s;
   outline: none;
   width: 100%;
@@ -92,7 +92,7 @@ input[type="email"]::placeholder,
 input[type="number"]::placeholder,
 input[type="search"]::placeholder,
 textarea::placeholder {
-  color: var(--stone-5);
+  color: var(--gray-5);
 }
 
 /* 页面切换过渡 */
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index e9d49d4..d7826ad 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -2,17 +2,17 @@
 
 /* 使用 Open Props 的自定义颜色变量 */
 :root {
-  --brand: var(--orange-6);
-  --brand-hover: var(--orange-7);
-  --brand-light: var(--orange-2);
+  --brand: var(--violet-6);
+  --brand-hover: var(--violet-7);
+  --brand-light: var(--violet-2);
   --text-light: var(--gray-5);
-  --body-bg: var(--stone-0);
-  --surface: var(--stone-1);
-  --surface-hover: var(--stone-2);
-  --border: var(--stone-3);
-  --text-primary: var(--stone-11);
-  --text-secondary: var(--stone-7);
-  --text-muted: var(--stone-5);
+  --body-bg: var(--gray-0);
+  --surface: var(--gray-1);
+  --surface-hover: var(--gray-2);
+  --border: var(--gray-3);
+  --text-primary: var(--gray-11);
+  --text-secondary: var(--gray-7);
+  --text-muted: var(--gray-5);
 }
 
 /* 全局背景 */
@@ -79,7 +79,7 @@ li {
 
 .btn-secondary:hover {
   background-color: var(--surface-hover);
-  border-color: var(--stone-4);
+  border-color: var(--gray-4);
 }
 
 .btn-ghost {
diff --git a/web/src/components/AddLibraryDialog.vue b/web/src/components/AddLibraryDialog.vue
index 6841c07..a44f5e5 100644
--- a/web/src/components/AddLibraryDialog.vue
+++ b/web/src/components/AddLibraryDialog.vue
@@ -81,7 +81,7 @@ const handleClose = () => emit('update:modelValue', false)
   position: relative;
   border: none;
   border-radius: var(--radius-3);
-  background-color: var(--stone-0);
+  background-color: var(--gray-0);
   box-shadow: var(--shadow-5);
   padding: 0;
   width: 100%;
diff --git a/web/src/components/AudioPlayer.vue b/web/src/components/AudioPlayer.vue
index 4068240..175eb7c 100644
--- a/web/src/components/AudioPlayer.vue
+++ b/web/src/components/AudioPlayer.vue
@@ -83,8 +83,8 @@ function onVolumeChange(e) {
   align-items: center;
   gap: var(--size-3);
   padding: var(--size-4);
-  background-color: var(--stone-2);
-  border-top: 1px solid var(--stone-4);
+  background-color: var(--gray-2);
+  border-top: 1px solid var(--gray-4);
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
 }
 
@@ -107,7 +107,7 @@ function onVolumeChange(e) {
   display: block;
   font-weight: 600;
   font-size: var(--font-size-1);
-  color: var(--stone-9);
+  color: var(--gray-9);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -116,7 +116,7 @@ function onVolumeChange(e) {
 
 .track-artist {
   font-size: var(--font-size-0);
-  color: var(--stone-7);
+  color: var(--gray-7);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -136,30 +136,31 @@ function onVolumeChange(e) {
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--stone-9);
+  color: var(--gray-9);
   transition: color 0.2s;
 }
 
 .control-btn:hover {
-  color: var(--stone-11);
+  color: var(--gray-11);
 }
 
 .play-btn {
   width: var(--size-8);
   height: var(--size-8);
   border: none;
-  background: var(--stone-9);
+  background: var(--violet-6);
   border-radius: 50%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--stone-1);
-  transition: transform 0.2s;
+  color: var(--white);
+  transition: transform 0.2s, background-color 0.2s;
 }
 
 .play-btn:hover {
   transform: scale(1.1);
+  background: var(--violet-7);
 }
 
 .player-progress {
@@ -172,7 +173,7 @@ function onVolumeChange(e) {
 
 .time {
   font-size: var(--font-size-0);
-  color: var(--stone-7);
+  color: var(--gray-7);
   min-width: 35px;
 }
 
@@ -181,7 +182,7 @@ function onVolumeChange(e) {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: var(--stone-4);
+  background: var(--gray-4);
   border-radius: 2px;
   cursor: pointer;
 }
@@ -191,11 +192,15 @@ function onVolumeChange(e) {
   appearance: none;
   width: 12px;
   height: 12px;
-  background: var(--stone-9);
+  background: var(--violet-6);
   border-radius: 50%;
   cursor: pointer;
 }
 
+.progress-bar::-webkit-slider-thumb:hover {
+  background: var(--violet-7);
+}
+
 .player-volume {
   display: flex;
   align-items: center;
@@ -208,7 +213,7 @@ function onVolumeChange(e) {
   border: none;
   background: none;
   cursor: pointer;
-  color: var(--stone-9);
+  color: var(--gray-9);
 }
 
 .volume-slider {
@@ -216,7 +221,7 @@ function onVolumeChange(e) {
   height: 4px;
   -webkit-appearance: none;
   appearance: none;
-  background: var(--stone-4);
+  background: var(--gray-4);
   border-radius: 2px;
   cursor: pointer;
 }
@@ -226,11 +231,15 @@ function onVolumeChange(e) {
   appearance: none;
   width: 10px;
   height: 10px;
-  background: var(--stone-9);
+  background: var(--violet-6);
   border-radius: 50%;
   cursor: pointer;
 }
 
+.volume-slider::-webkit-slider-thumb:hover {
+  background: var(--violet-7);
+}
+
 /* 移动端响应式 */
 @media (max-width: 768px) {
   .player {
diff --git a/web/src/components/DropDown.vue b/web/src/components/DropDown.vue
index 16b1814..f5fb329 100644
--- a/web/src/components/DropDown.vue
+++ b/web/src/components/DropDown.vue
@@ -58,7 +58,7 @@ onBeforeUnmount(() => {
   top: calc(100% + 4px);
   right: 0;
   z-index: 1000;
-  background-color: var(--stone-0);
+  background-color: var(--gray-0);
   border: 1px solid var(--border);
   border-radius: var(--radius-2);
   box-shadow: var(--shadow-3);
diff --git a/web/src/components/LibraryCard.vue b/web/src/components/LibraryCard.vue
index 5196423..b770507 100644
--- a/web/src/components/LibraryCard.vue
+++ b/web/src/components/LibraryCard.vue
@@ -44,7 +44,7 @@ const viewSongs = () => {
   align-items: center;
   justify-content: center;
   gap: var(--size-2);
-  background: linear-gradient(135deg, var(--stone-1) 0%, var(--stone-2) 100%);
+  background: linear-gradient(135deg, var(--gray-1) 0%, var(--gray-2) 100%);
   border: 1px solid var(--border);
   aspect-ratio: var(--ratio-square);
   border-radius: var(--radius-3);
@@ -56,7 +56,7 @@ const viewSongs = () => {
 .library-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-3);
-  border-color: var(--stone-4);
+  border-color: var(--gray-4);
 }
 
 .card-icon {
@@ -104,7 +104,7 @@ const viewSongs = () => {
 }
 
 .card-menu-btn:hover {
-  background-color: var(--stone-3);
+  background-color: var(--gray-3);
   color: var(--text-primary);
 }
 </style>
diff --git a/web/src/views/MusicView.vue b/web/src/views/MusicView.vue
index d8d3fd8..37adfd7 100644
--- a/web/src/views/MusicView.vue
+++ b/web/src/views/MusicView.vue
@@ -130,7 +130,7 @@ onMounted(() => {
 }
 
 .empty-icon {
-  color: var(--stone-4);
+  color: var(--gray-4);
   margin-bottom: var(--size-4);
 }
 
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index e91c7ec..05c0524 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -115,7 +115,7 @@ onMounted(() => {
 }
 
 .empty-icon {
-  color: var(--stone-4);
+  color: var(--gray-4);
   margin-bottom: var(--size-4);
 }