diff --git a/apps/web/src/components/player/MiniPlayer.tsx b/apps/web/src/components/player/MiniPlayer.tsx
index 7181a9cb2..0628da8c8 100644
--- a/apps/web/src/components/player/MiniPlayer.tsx
+++ b/apps/web/src/components/player/MiniPlayer.tsx
@@ -63,7 +63,7 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
           </p>
         </div>
         <button
-          className="text-muted-foreground hover:text-kodo-magenta transition-colors ml-2"
+          className="text-muted-foreground hover:text-primary transition-colors ml-2"
           onClick={() => addToast('Added to Liked Songs')}
         >
           <Heart className="w-5 h-5" />
@@ -103,14 +103,14 @@ export const MiniPlayer: React.FC<MiniPlayerProps> = ({
       {/* 3. Right Actions */}
       <div className="flex items-center justify-end gap-4 w-[30%] min-w-[200px]">
         <button
-          className="text-muted-foreground hover:text-kodo-magenta transition-colors hidden xl:block"
+          className="text-muted-foreground hover:text-primary transition-colors hidden xl:block"
           title="Lyrics"
           onClick={onExpand}
         >
           <Mic2 className="w-4 h-4" />
         </button>
         <button
-          className="text-muted-foreground hover:text-kodo-lime transition-colors"
+          className="text-muted-foreground hover:text-success transition-colors"
           title="Devices"
           onClick={() => addToast('Device Menu')}
         >
diff --git a/apps/web/src/components/player/PlaybackSpeedModal.tsx b/apps/web/src/components/player/PlaybackSpeedModal.tsx
index 54dad9f0e..59f9e30af 100644
--- a/apps/web/src/components/player/PlaybackSpeedModal.tsx
+++ b/apps/web/src/components/player/PlaybackSpeedModal.tsx
@@ -19,7 +19,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
 
   return (
     <div className="absolute bottom-20 right-0 md:right-auto md:left-1/2 md:-translate-x-1/2 w-80 bg-card border border-border rounded-xl shadow-2xl z-50 animate-fadeIn overflow-hidden">
-      <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
+      <div className="p-4 border-b border-border bg-muted flex justify-between items-center">
         <h3 className="font-bold text-white flex items-center gap-2 text-sm">
           <Gauge className="w-4 h-4 text-warning" /> Playback Speed
         </h3>
@@ -45,7 +45,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
             step="0.05"
             value={playbackRate}
             onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
-            className="w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-kodo-gold [&::-webkit-slider-thumb]:rounded-full"
+            className="w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-warning [&::-webkit-slider-thumb]:rounded-full"
           />
         </div>
 
@@ -74,7 +74,7 @@ export const PlaybackSpeedModal: React.FC<PlaybackSpeedModalProps> = ({
           </div>
           <div
             onClick={togglePitchCorrection}
-            className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-kodo-gold' : 'bg-muted'}`}
+            className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${pitchCorrection ? 'bg-warning' : 'bg-muted'}`}
           >
             <div
               className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${pitchCorrection ? 'left-6' : 'left-1'}`}
diff --git a/apps/web/src/components/player/PlayerControls.tsx b/apps/web/src/components/player/PlayerControls.tsx
index 28bd61883..746d8a703 100644
--- a/apps/web/src/components/player/PlayerControls.tsx
+++ b/apps/web/src/components/player/PlayerControls.tsx
@@ -48,14 +48,14 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
       {/* 1. Playback Modifiers */}
       <div className="flex items-center gap-4 relative">
         <button
-          className={`transition-colors hover:text-foreground ${shuffle ? 'text-primary' : 'text-kodo-content-dim'}`}
+          className={`transition-colors hover:text-foreground ${shuffle ? 'text-primary' : 'text-muted-foreground'}`}
           onClick={toggleShuffle}
           title="Shuffle"
         >
           <Shuffle className={layout === 'full' ? 'w-5 h-5' : 'w-4 h-4'} />
         </button>
         <button
-          className={`transition-colors hover:text-foreground relative ${repeatMode !== 'off' ? 'text-primary' : 'text-kodo-content-dim'}`}
+          className={`transition-colors hover:text-foreground relative ${repeatMode !== 'off' ? 'text-primary' : 'text-muted-foreground'}`}
           onClick={toggleRepeat}
           title="Repeat"
         >
@@ -71,7 +71,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
       {/* 2. Main Transport */}
       <div className="flex items-center gap-6">
         <button
-          className="text-kodo-content-dim hover:text-foreground transition-colors"
+          className="text-muted-foreground hover:text-foreground transition-colors"
           onClick={prevTrack}
         >
           <SkipBack
@@ -105,7 +105,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
           )}
         </button>
         <button
-          className="text-kodo-content-dim hover:text-foreground transition-colors"
+          className="text-muted-foreground hover:text-foreground transition-colors"
           onClick={nextTrack}
         >
           <SkipForward
@@ -123,7 +123,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
         {layout === 'full' && (
           <>
             <button
-              className={`text-kodo-content-dim hover:text-warning transition-colors ${showSpeed ? 'text-warning' : ''}`}
+              className={`text-muted-foreground hover:text-warning transition-colors ${showSpeed ? 'text-warning' : ''}`}
               onClick={() => {
                 setShowSpeed(!showSpeed);
                 setShowVisualizer(false);
@@ -133,7 +133,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
               <Gauge className="w-5 h-5" />
             </button>
             <button
-              className={`text-kodo-content-dim hover:text-foreground transition-colors ${showVisualizer ? 'text-primary' : ''}`}
+              className={`text-muted-foreground hover:text-foreground transition-colors ${showVisualizer ? 'text-primary' : ''}`}
               onClick={() => {
                 setShowVisualizer(!showVisualizer);
                 setShowSpeed(false);
@@ -149,7 +149,7 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
         <div className="flex items-center gap-2 group w-24">
           <button
             onClick={toggleMute}
-            className="text-kodo-content-dim hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground"
           >
             {isMuted || volume === 0 ? (
               <VolumeX className="w-4 h-4" />
diff --git a/apps/web/src/components/player/VisualizerSettingsModal.tsx b/apps/web/src/components/player/VisualizerSettingsModal.tsx
index cd46e392d..a58e55773 100644
--- a/apps/web/src/components/player/VisualizerSettingsModal.tsx
+++ b/apps/web/src/components/player/VisualizerSettingsModal.tsx
@@ -39,7 +39,7 @@ export const VisualizerSettingsModal: React.FC<
               <button
                 key={mode}
                 onClick={() => updateSetting('mode', mode)}
-                className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-kodo-cyan/10 border-kodo-cyan text-kodo-cyan' : 'bg-muted border-transparent text-muted-foreground hover:text-foreground'}`}
+                className={`px-2 py-1.5 rounded text-xs font-bold capitalize transition-all border ${visualizerSettings.mode === mode ? 'bg-primary/10 border-primary text-primary' : 'bg-muted border-transparent text-muted-foreground hover:text-foreground'}`}
               >
                 {mode}
               </button>
@@ -61,7 +61,7 @@ export const VisualizerSettingsModal: React.FC<
             onChange={(e) =>
               updateSetting('sensitivity', Number(e.target.value))
             }
-            className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-kodo-cyan [&::-webkit-slider-thumb]:rounded-full"
+            className="w-full h-1 bg-muted rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:rounded-full"
           />
         </div>
 
diff --git a/apps/web/src/features/player/components/NextPreviousButtons.tsx b/apps/web/src/features/player/components/NextPreviousButtons.tsx
index f8fc1dc58..097c90612 100644
--- a/apps/web/src/features/player/components/NextPreviousButtons.tsx
+++ b/apps/web/src/features/player/components/NextPreviousButtons.tsx
@@ -43,7 +43,7 @@ export function NextPreviousButtons({
     default:
       'bg-primary text-primary-foreground hover:bg-primary focus:ring-primary',
     ghost:
-      'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
+      'bg-transparent text-foreground hover:bg-muted focus:ring-primary',
     outline:
       'border border-border bg-card text-foreground hover:bg-muted focus:ring-muted',
   };
diff --git a/apps/web/src/features/player/components/PlayPauseButton.tsx b/apps/web/src/features/player/components/PlayPauseButton.tsx
index 85ce46abc..d5bc6d4be 100644
--- a/apps/web/src/features/player/components/PlayPauseButton.tsx
+++ b/apps/web/src/features/player/components/PlayPauseButton.tsx
@@ -41,7 +41,7 @@ export function PlayPauseButton({
     default:
       'bg-primary text-primary-foreground hover:bg-primary focus:ring-primary',
     ghost:
-      'bg-transparent text-kodo-text-main hover:bg-kodo-void focus:ring-gray-500 dark:text-kodo-text-main dark:hover:bg-kodo-graphite',
+      'bg-transparent text-foreground hover:bg-muted focus:ring-primary',
     outline:
       'border border-border bg-card text-foreground hover:bg-muted focus:ring-muted',
   };
diff --git a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
index c2d45adb4..3608c613c 100644
--- a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
+++ b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
@@ -87,7 +87,7 @@ export function PlaybackSpeedControl({
         disabled={disabled}
         className={cn(
           'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
-          'bg-white dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel',
+          'bg-card border border-border',
           'text-foreground',
           'hover:bg-muted',
           'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
diff --git a/apps/web/src/features/player/components/ProgressBar.tsx b/apps/web/src/features/player/components/ProgressBar.tsx
index 32cfca951..454a8d285 100644
--- a/apps/web/src/features/player/components/ProgressBar.tsx
+++ b/apps/web/src/features/player/components/ProgressBar.tsx
@@ -157,8 +157,8 @@ export function ProgressBar({
       {/* Progress track */}
       <div
         className={cn(
-          'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
-          isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
+          'absolute left-0 top-0 h-full bg-primary rounded-full transition-all',
+          isDragging && 'bg-primary',
         )}
         style={{ width: `${displayProgress}%` }}
       />
@@ -166,7 +166,7 @@ export function ProgressBar({
       {/* Hover indicator */}
       {hoverTime !== null && !disabled && (
         <div
-          className="absolute top-0 h-full w-0.5 bg-kodo-cyan dark:bg-kodo-cyan opacity-50"
+          className="absolute top-0 h-full w-0.5 bg-primary opacity-50"
           style={{ left: `${displayProgress}%` }}
         />
       )}
@@ -174,7 +174,7 @@ export function ProgressBar({
       {/* Thumb */}
       <div
         className={cn(
-          'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
+          'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full',
           'opacity-0 group-hover:opacity-100 transition-opacity',
           isDragging && 'opacity-100',
           disabled && 'opacity-0',
diff --git a/apps/web/src/features/player/components/QualitySelector.tsx b/apps/web/src/features/player/components/QualitySelector.tsx
index edcd83aa6..a771639b3 100644
--- a/apps/web/src/features/player/components/QualitySelector.tsx
+++ b/apps/web/src/features/player/components/QualitySelector.tsx
@@ -84,7 +84,7 @@ export function QualitySelector({
         className={cn(
           'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg',
           'bg-card border border-border',
-          'text-kodo-text-main dark:text-kodo-text-main',
+          'text-foreground',
           'hover:bg-muted',
           'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
           'disabled:opacity-50 disabled:cursor-not-allowed',
@@ -122,7 +122,7 @@ export function QualitySelector({
                 'focus:outline-none focus:bg-muted',
                 'transition-colors',
                 currentQuality === quality.value &&
-                  'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
+                  'bg-primary/10',
               )}
               role="option"
               aria-selected={currentQuality === quality.value}
@@ -132,7 +132,7 @@ export function QualitySelector({
                   {quality.label}
                 </span>
                 {quality.description && (
-                  <span className="text-xs text-kodo-content-dim dark:text-kodo-content-dim">
+                  <span className="text-xs text-muted-foreground">
                     {quality.description}
                   </span>
                 )}
diff --git a/apps/web/src/features/player/components/TrackInfo.tsx b/apps/web/src/features/player/components/TrackInfo.tsx
index ba9fe8559..bd9e01bf4 100644
--- a/apps/web/src/features/player/components/TrackInfo.tsx
+++ b/apps/web/src/features/player/components/TrackInfo.tsx
@@ -53,14 +53,14 @@ export function TrackInfo({
               alt={`Cover de ${track.title}`}
               className={cn(
                 coverSizes[coverSize],
-                'rounded-lg object-cover bg-kodo-slate dark:bg-kodo-steel',
+                'rounded-lg object-cover bg-muted',
               )}
             />
           ) : (
             <div
               className={cn(
                 coverSizes[coverSize],
-                'rounded-lg bg-kodo-slate dark:bg-kodo-steel flex items-center justify-center',
+                'rounded-lg bg-muted flex items-center justify-center',
               )}
             >
               <Music
diff --git a/apps/web/src/features/player/components/VolumeControl.tsx b/apps/web/src/features/player/components/VolumeControl.tsx
index 3112a7eed..122a48ca8 100644
--- a/apps/web/src/features/player/components/VolumeControl.tsx
+++ b/apps/web/src/features/player/components/VolumeControl.tsx
@@ -142,8 +142,8 @@ export function VolumeControl({
             {/* Volume track */}
             <div
               className={cn(
-                'absolute left-0 top-0 h-full bg-kodo-cyan dark:bg-kodo-cyan rounded-full transition-all',
-                isDragging && 'bg-kodo-cyan dark:bg-kodo-cyan',
+                'absolute left-0 top-0 h-full bg-primary rounded-full transition-all',
+                isDragging && 'bg-primary',
               )}
               style={{ width: `${displayVolume}%` }}
             />
@@ -151,7 +151,7 @@ export function VolumeControl({
             {/* Thumb */}
             <div
               className={cn(
-                'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-kodo-cyan dark:bg-kodo-cyan rounded-full',
+                'absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-primary rounded-full',
                 'opacity-0 group-hover:opacity-100 transition-opacity',
                 isDragging && 'opacity-100',
                 disabled && 'opacity-0',