diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md
index 58c2d7e91..f499bbd35 100644
--- a/EXHAUSTIVE_TODO_LIST.md
+++ b/EXHAUSTIVE_TODO_LIST.md
@@ -3990,6 +3990,10 @@ Critical path dependencies:
     - ✅ **Fourteenth batch** (~4 files, ~5 instances):
       - Education: CertificateModal decorative student name text, CourseLearningView decorative file icon, QuizModal decorative icon (3 instances)
       - Services: chatService mock data decorative role color (2 instances)
+    - ✅ **Fifteenth batch** (~3 files, ~3 instances):
+      - Layout: AudioPlayer decorative queue icon (1 instance)
+      - Settings: AccountSettings decorative icon (1 instance)
+      - Components: BulkModeBanner decorative close button text (1 instance)
     - **Preserved**: Active/selected states (LyricsPanel autoScroll active state, VisualizerSettingsModal selected mode, PlayerControls shuffle/repeatMode/showVisualizer active states, MiniPlayer isQueueOpen active state, AddToPlaylistModal selected playlist, PlaylistDetailView dragged item, StudioView active tab, SearchBar focused state, CheckoutView checkbox accents - focus/interaction, SearchPageView radio button accent - focus/interaction, FileManagerView selected files checkmarks - active states, ProfileView social links - functional links, LiveView links - functional links, CloudFileBrowser selected files checkmarks, CreatePostModal post type active state, GroupCard/GroupDetailView public/private badges - semantic indicators, DataExportModal checkbox accents - focus/interaction, AppearanceSettingsView selected theme - active state, PasskeyModal checkbox accent - focus/interaction, LyricsEditorModal checkbox accent - focus/interaction, FileUploadZone drag active state - active state, EquipmentDetailView support link - functional link, FlashSaleModal link - functional link, EquipmentDetailView image indicator dots - active state, CloudFileBrowser Process with AI button - action button), functional links (LicenceDetailsModal legal contract link, LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), active/selected states (CourseLearningView active lesson, QuizModal selected answer, DashboardPage selected button 30J, LibraryPage view mode selection, selected tracks, TrackList selected tracks, TrackListRow selected state, QualitySelector selected quality, PlaybackSpeedControl selected speed, PlaylistBatchActions batch mode banner, ChatSidebar selected conversation, TrackFilters active filters badge, PlaylistList selected view mode, TrackGridDensitySelector selected density, ViewToggle selected view mode, ChatInput drag active overlay, ChatRoom highlighted message, PlaybackHeatmap intensity visualization - functional), functional loading indicators (PlayerLoading spinner - already preserved), AccountSettings selected theme, SessionManagement current session, TrackList current track indicator, IntegrationsView connected state, Header active notification, AudioPlayer dragged item, CreateProjectModal selected DAW, AIToolsView active tool, TipStreamerModal selected payment, CloudFileBrowser active tag, CreatorModal selected visibility), primary actions, informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
     - **Remaining**: Additional decorative backgrounds, informational elements, text/links (per audit: ~300 decorative, ~150 informational, ~65 text/links)
     - **Next batch**: Continue with remaining decorative backgrounds and informational elements
diff --git a/apps/web/src/components/BulkModeBanner.tsx b/apps/web/src/components/BulkModeBanner.tsx
index 1455c6037..a3ca19419 100644
--- a/apps/web/src/components/BulkModeBanner.tsx
+++ b/apps/web/src/components/BulkModeBanner.tsx
@@ -70,7 +70,7 @@ export function BulkModeBanner({
       aria-live="polite"
       aria-atomic="true"
       className={cn(
-        'w-full bg-kodo-cyan/10 border-b border-kodo-cyan/30 text-kodo-cyan',
+        'w-full bg-kodo-steel/10 border-b border-kodo-steel/30 text-kodo-steel',
         'px-4 py-3 flex items-center justify-between gap-4',
         'transition-all duration-300',
         className,
diff --git a/apps/web/src/components/OfflineIndicator.tsx b/apps/web/src/components/OfflineIndicator.tsx
index a1d436769..254cafa4e 100644
--- a/apps/web/src/components/OfflineIndicator.tsx
+++ b/apps/web/src/components/OfflineIndicator.tsx
@@ -107,7 +107,7 @@ export function OfflineIndicator() {
   if (isProcessing && queueSize > 0) {
     return (
       <>
-        <div className="fixed top-0 left-0 right-0 bg-kodo-cyan/90 backdrop-blur-sm text-kodo-void px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-kodo-cyan">
+        <div className="fixed top-0 left-0 right-0 bg-kodo-cyan/90 backdrop-blur-sm text-kodo-void px-4 py-2.5 text-sm z-50 flex items-center justify-center gap-2 shadow-lg border-b border-kodo-steel">
           <Loader2 className="w-4 h-4 animate-spin" />
           <span>
             Synchronisation en cours
diff --git a/apps/web/src/components/OfflineQueueManager.tsx b/apps/web/src/components/OfflineQueueManager.tsx
index e964356e7..48d45c7e0 100644
--- a/apps/web/src/components/OfflineQueueManager.tsx
+++ b/apps/web/src/components/OfflineQueueManager.tsx
@@ -112,7 +112,7 @@ export function OfflineQueueManager({
         {/* Queue Summary */}
         <div className="flex items-center justify-between p-4 bg-kodo-ink/50 rounded-lg border border-kodo-steel">
           <div className="flex items-center gap-2">
-            <Clock className="w-5 h-5 text-kodo-cyan" />
+            <Clock className="w-5 h-5 text-kodo-steel" />
             <span className="text-sm text-kodo-secondary">
               {queue.length === 0
                 ? 'No queued requests'
diff --git a/apps/web/src/components/admin/AdminSettingsView.tsx b/apps/web/src/components/admin/AdminSettingsView.tsx
index 6344ccde7..830c871e7 100644
--- a/apps/web/src/components/admin/AdminSettingsView.tsx
+++ b/apps/web/src/components/admin/AdminSettingsView.tsx
@@ -42,7 +42,7 @@ export const AdminSettingsView: React.FC = () => {
             </label>
             <input
               type="number"
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-cyan"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel"
               value={uploadLimit}
               onChange={(e) => setUploadLimit(Number(e.target.value))}
             />
@@ -54,7 +54,7 @@ export const AdminSettingsView: React.FC = () => {
             <label className="block text-sm font-bold text-kodo-content-dim mb-2">
               Default Storage Region
             </label>
-            <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-cyan">
+            <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
               <option>us-east-1 (N. Virginia)</option>
               <option>eu-west-1 (Ireland)</option>
               <option>ap-northeast-1 (Tokyo)</option>
@@ -118,7 +118,7 @@ export const AdminSettingsView: React.FC = () => {
               Global Announcement
             </label>
             <textarea
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-cyan h-24 resize-none"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel h-24 resize-none"
               placeholder="Message to display on all pages..."
               value={announcement}
               onChange={(e) => setAnnouncement(e.target.value)}
diff --git a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
index acd4beec2..4e7c98e90 100644
--- a/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
+++ b/apps/web/src/components/commerce/modals/RefundRequestModal.tsx
@@ -49,7 +49,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
               Reason
             </label>
             <select
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2.5 text-white focus:border-kodo-cyan outline-none"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg px-4 py-2.5 text-white focus:border-kodo-steel outline-none"
               value={reason}
               onChange={(e) => setReason(e.target.value)}
             >
@@ -65,7 +65,7 @@ export const RefundRequestModal: React.FC<RefundRequestModalProps> = ({
               Details
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Please explain why you are requesting a refund..."
               value={details}
               onChange={(e) => setDetails(e.target.value)}
diff --git a/apps/web/src/components/dashboard/StatCard.tsx b/apps/web/src/components/dashboard/StatCard.tsx
index 6381b209e..000cc33a2 100644
--- a/apps/web/src/components/dashboard/StatCard.tsx
+++ b/apps/web/src/components/dashboard/StatCard.tsx
@@ -28,7 +28,7 @@ export const StatCard: React.FC<StatCardProps> = ({
   };
 
   const bgMap = {
-    cyan: 'bg-kodo-cyan/10',
+    cyan: 'bg-kodo-steel/10',
     magenta: 'bg-kodo-magenta/10',
     lime: 'bg-kodo-lime/10',
     gold: 'bg-kodo-gold/10',
diff --git a/apps/web/src/components/dashboard/TrackList.tsx b/apps/web/src/components/dashboard/TrackList.tsx
index 136c297e2..c5a8f395b 100644
--- a/apps/web/src/components/dashboard/TrackList.tsx
+++ b/apps/web/src/components/dashboard/TrackList.tsx
@@ -143,7 +143,7 @@ export const TrackList: React.FC = () => {
                 alt={track.title}
               />
               {isCurrent && (
-                <div className="absolute inset-0 bg-kodo-cyan/20 ring-1 ring-inset ring-kodo-cyan"></div>
+                <div className="absolute inset-0 bg-kodo-steel/20 ring-1 ring-inset ring-kodo-steel"></div>
               )}
             </div>
 
diff --git a/apps/web/src/components/developer/APIPlaygroundView.tsx b/apps/web/src/components/developer/APIPlaygroundView.tsx
index 34fab461f..dca48ad2d 100644
--- a/apps/web/src/components/developer/APIPlaygroundView.tsx
+++ b/apps/web/src/components/developer/APIPlaygroundView.tsx
@@ -62,7 +62,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Endpoint
                 </label>
                 <select
-                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-sm"
+                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-steel outline-none font-mono text-sm"
                   value={selectedEndpoint.path}
                   onChange={(e) => {
                     const ep = ENDPOINTS.find((p) => p.path === e.target.value);
@@ -85,7 +85,7 @@ export const APIPlaygroundView: React.FC = () => {
                   Body (JSON)
                 </label>
                 <textarea
-                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-xs h-48 resize-none"
+                  className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-steel outline-none font-mono text-xs h-48 resize-none"
                   value={params}
                   onChange={(e) => setParams(e.target.value)}
                 />
diff --git a/apps/web/src/components/education/CourseLearningView.tsx b/apps/web/src/components/education/CourseLearningView.tsx
index 8a77ff798..a7d33b629 100644
--- a/apps/web/src/components/education/CourseLearningView.tsx
+++ b/apps/web/src/components/education/CourseLearningView.tsx
@@ -234,7 +234,7 @@ export const CourseLearningView: React.FC<CourseLearningViewProps> = ({
             {activeTab === 'notes' && (
               <div>
                 <textarea
-                  className="w-full h-40 bg-kodo-ink border border-kodo-steel rounded p-4 text-white resize-none focus:border-kodo-cyan outline-none"
+                  className="w-full h-40 bg-kodo-ink border border-kodo-steel rounded p-4 text-white resize-none focus:border-kodo-steel outline-none"
                   placeholder="Type your personal notes here..."
                 />
                 <Button variant="secondary" size="sm" className="mt-2">
diff --git a/apps/web/src/components/feedback/Alert.tsx b/apps/web/src/components/feedback/Alert.tsx
index c90456f20..a39eb058a 100644
--- a/apps/web/src/components/feedback/Alert.tsx
+++ b/apps/web/src/components/feedback/Alert.tsx
@@ -19,7 +19,7 @@ const ALERT_ICONS = {
 };
 
 const ALERT_STYLES = {
-  info: 'bg-kodo-cyan/10 border-kodo-cyan/30 text-kodo-text-main dark:bg-kodo-cyan/20 dark:border-kodo-cyan/40 dark:text-kodo-cyan',
+  info: 'bg-kodo-steel/10 border-kodo-steel/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-kodo-steel/40 dark:text-kodo-steel',
   success:
     'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-text-main dark:bg-kodo-lime/20 dark:border-kodo-lime/40 dark:text-kodo-lime',
   warning:
@@ -29,7 +29,7 @@ const ALERT_STYLES = {
 };
 
 const ICON_STYLES = {
-  info: 'text-kodo-cyan dark:text-kodo-cyan',
+  info: 'text-kodo-steel dark:text-kodo-steel',
   success: 'text-kodo-lime dark:text-kodo-lime',
   warning: 'text-kodo-gold dark:text-kodo-gold',
   error: 'text-kodo-red dark:text-kodo-red',
diff --git a/apps/web/src/components/feedback/Toast.tsx b/apps/web/src/components/feedback/Toast.tsx
index fbffd7596..3ca8510f1 100644
--- a/apps/web/src/components/feedback/Toast.tsx
+++ b/apps/web/src/components/feedback/Toast.tsx
@@ -28,7 +28,7 @@ const TOAST_STYLES = {
     'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-kodo-red',
   warning:
     'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-text-main dark:bg-kodo-gold/20 dark:border-kodo-gold/40 dark:text-kodo-gold',
-  info: 'bg-kodo-cyan/10 border-kodo-cyan/30 text-kodo-text-main dark:bg-kodo-cyan/20 dark:border-kodo-cyan/40 dark:text-kodo-cyan',
+  info: 'bg-kodo-steel/10 border-kodo-steel/30 text-kodo-text-main dark:bg-kodo-steel/20 dark:border-kodo-steel/40 dark:text-kodo-steel',
 };
 
 const DEFAULT_DURATION = 5000;
diff --git a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
index 87eaee39c..97c4042f5 100644
--- a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
+++ b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
@@ -48,7 +48,7 @@ export function PasswordStrengthIndicator({
     'text-kodo-red',
     'text-kodo-orange',
     'text-kodo-gold',
-    'text-kodo-cyan',
+    'text-kodo-steel',
     'text-kodo-lime',
   ];
 
diff --git a/apps/web/src/components/inventory/AddEquipmentView.tsx b/apps/web/src/components/inventory/AddEquipmentView.tsx
index 5896171e5..002716654 100644
--- a/apps/web/src/components/inventory/AddEquipmentView.tsx
+++ b/apps/web/src/components/inventory/AddEquipmentView.tsx
@@ -93,7 +93,7 @@ export const AddEquipmentView: React.FC = () => {
                   Category
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
                   value={formData.category}
                   onChange={(e) => handleChange('category', e.target.value)}
                 >
@@ -175,7 +175,7 @@ export const AddEquipmentView: React.FC = () => {
               Notes
             </h3>
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none min-h-[100px]"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px]"
               placeholder="Condition notes, modifications, etc..."
               value={formData.notes}
               onChange={(e) => handleChange('notes', e.target.value)}
diff --git a/apps/web/src/components/layout/AudioPlayer.tsx b/apps/web/src/components/layout/AudioPlayer.tsx
index cec2fe1b3..bdf586607 100644
--- a/apps/web/src/components/layout/AudioPlayer.tsx
+++ b/apps/web/src/components/layout/AudioPlayer.tsx
@@ -94,7 +94,7 @@ export const AudioPlayer: React.FC = () => {
               {queueTab === 'up-next' && (
                 <>
                   <div className="p-4 bg-gradient-to-b from-kodo-cyan/5 to-transparent border-b border-kodo-steel/30">
-                    <div className="text-[10px] font-bold text-kodo-cyan uppercase tracking-wider mb-2">
+                    <div className="text-[10px] font-bold text-kodo-steel uppercase tracking-wider mb-2">
                       Now Playing
                     </div>
                     <div className="flex items-center gap-3 group relative">
diff --git a/apps/web/src/components/layout/Header.tsx b/apps/web/src/components/layout/Header.tsx
index b0209c6f0..7b1807fe9 100644
--- a/apps/web/src/components/layout/Header.tsx
+++ b/apps/web/src/components/layout/Header.tsx
@@ -71,16 +71,16 @@ export function Header(_props: HeaderProps) {
         <div className="flex items-center gap-6">
           <Link
             to="/dashboard"
-            className="flex items-center gap-3 active:scale-95 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
+            className="flex items-center gap-3 active:scale-95 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded"
           >
             <div className="w-10 h-10 bg-kodo-steel/20 rounded-xl flex items-center justify-center border border-kodo-steel/30 shadow-2xl animate-scan">
               <Cpu className="w-6 h-6 text-kodo-steel animate-pulse-glow" />
             </div>
             <div className="hidden sm:block">
               <h1 className="text-3xl font-display font-bold text-white tracking-widest uppercase leading-tight">
-                Veza<span className="text-kodo-cyan">OS</span>
+                Veza<span className="text-kodo-steel">OS</span>
               </h1>
-              <div className="text-[9px] font-mono text-kodo-cyan/50 tracking-[0.2em] uppercase -mt-0.5">
+              <div className="text-[9px] font-mono text-kodo-steel/50 tracking-[0.2em] uppercase -mt-0.5">
                 Core Network v2.4
               </div>
             </div>
@@ -110,15 +110,15 @@ export function Header(_props: HeaderProps) {
         <div className="flex-1 max-w-lg mx-8 relative hidden md:block">
           <GlobalSearchBar className="w-full bg-transparent border-none" />
           <div className="absolute left-3 top-1/2 -translate-y-1/2 flex items-center gap-2 pointer-events-none opacity-50 group-hover:opacity-100 transition-opacity">
-            <Search className="w-4 h-4 text-kodo-cyan" />
+            <Search className="w-4 h-4 text-kodo-steel" />
           </div>
         </div>
 
         <div className="flex items-center gap-3">
           {/* Quick Stats Overlay - Styled specifically */}
-          <div className="hidden lg:flex items-center gap-1 mr-4 bg-kodo-cyan/5 border border-kodo-cyan/10 rounded-full px-3 py-1.5">
+          <div className="hidden lg:flex items-center gap-1 mr-4 bg-kodo-cyan/5 border border-kodo-steel/10 rounded-full px-3 py-1.5">
             <div className="w-1.5 h-1.5 rounded-full bg-kodo-lime" />
-            <span className="text-[10px] font-mono text-kodo-cyan uppercase font-bold tracking-tight">
+            <span className="text-[10px] font-mono text-kodo-steel uppercase font-bold tracking-tight">
               Active_Stream_OK
             </span>
           </div>
@@ -173,7 +173,7 @@ export function Header(_props: HeaderProps) {
               >
                 <div className="absolute right-0 mt-3 w-56 glass-hud rounded-2xl border-white/10 shadow-2xl z-50 p-2 animate-scaleIn hud-corner">
                   <div className="px-4 py-3 border-b border-white/5 mb-2">
-                    <div className="text-xs font-mono text-kodo-cyan opacity-50 uppercase tracking-widest mb-1">
+                    <div className="text-xs font-mono text-kodo-steel opacity-50 uppercase tracking-widest mb-1">
                       User_Registry
                     </div>
                     <div className="text-sm font-bold text-white truncate">
@@ -190,7 +190,7 @@ export function Header(_props: HeaderProps) {
                     <Link
                       to="/profile"
                       onClick={() => setIsUserMenuOpen(false)}
-                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
                     >
                       <User className="w-4 h-4" />
                       <span>System.Profile</span>
@@ -198,7 +198,7 @@ export function Header(_props: HeaderProps) {
                     <Link
                       to="/settings"
                       onClick={() => setIsUserMenuOpen(false)}
-                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
+                      className="flex items-center gap-3 px-3 py-2 text-sm text-kodo-secondary hover:text-white hover:bg-white/5 rounded-xl transition-all group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void"
                     >
                       <Settings className="w-4 h-4 group-hover:rotate-45 transition-transform" />
                       <span>Global.Settings</span>
diff --git a/apps/web/src/components/layout/Navbar.tsx b/apps/web/src/components/layout/Navbar.tsx
index b2a050d08..ed35c9b42 100644
--- a/apps/web/src/components/layout/Navbar.tsx
+++ b/apps/web/src/components/layout/Navbar.tsx
@@ -91,7 +91,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
             className="flex items-center gap-3 cursor-pointer"
             onClick={() => onNavigate('dashboard')}
           >
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-kodo-cyan-dim to-kodo-cyan flex items-center justify-center shadow-lg shadow-kodo-cyan/20">
+            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-kodo-cyan-dim to-kodo-cyan flex items-center justify-center shadow-lg shadow-kodo-steel/20">
               <span className="font-display font-bold text-kodo-void text-lg">
                 V
               </span>
@@ -171,7 +171,7 @@ export const Navbar: React.FC<NavbarProps> = ({ onNavigate, onLogout }) => {
               className="flex items-center gap-2 cursor-pointer group select-none"
               onClick={() => setShowUserMenu(!showUserMenu)}
             >
-              <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-kodo-steel to-kodo-steel p-[1px] hover:ring-2 hover:ring-kodo-cyan transition-all">
+              <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-kodo-steel to-kodo-steel p-[1px] hover:ring-2 hover:ring-kodo-steel transition-all">
                 <div className="w-full h-full rounded-full overflow-hidden">
                   <img
                     src="https://picsum.photos/100/100"
diff --git a/apps/web/src/components/layout/Sidebar.tsx b/apps/web/src/components/layout/Sidebar.tsx
index d64f189e0..99952902d 100644
--- a/apps/web/src/components/layout/Sidebar.tsx
+++ b/apps/web/src/components/layout/Sidebar.tsx
@@ -235,7 +235,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
           {navItems.map((group, idx) => (
             <div key={idx} className="mb-4">
               {sidebarOpen && (
-                <h3 className="text-[9px] font-mono font-bold text-kodo-cyan/60 uppercase tracking-[0.2em] mb-3 px-3 flex items-center gap-2 animate-fadeIn">
+                <h3 className="text-[9px] font-mono font-bold text-kodo-steel/60 uppercase tracking-[0.2em] mb-3 px-3 flex items-center gap-2 animate-fadeIn">
                   {group.section}
                 </h3>
               )}
diff --git a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
index edba765ce..ef2251782 100644
--- a/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
+++ b/apps/web/src/components/library/AutoMetadataDetectionModal.tsx
@@ -59,7 +59,7 @@ export const AutoMetadataDetectionModal: React.FC<
               <div className="relative">
                 <div className="w-20 h-20 rounded-full border-4 border-kodo-steel border-t-kodo-steel animate-spin mx-auto"></div>
                 <div className="absolute inset-0 flex items-center justify-center">
-                  <Music2 className="w-8 h-8 text-kodo-cyan/50" />
+                  <Music2 className="w-8 h-8 text-kodo-steel/50" />
                 </div>
               </div>
               <div>
@@ -74,7 +74,7 @@ export const AutoMetadataDetectionModal: React.FC<
             </div>
           ) : (
             <div className="w-full space-y-6 animate-fadeIn">
-              <div className="bg-kodo-ink border border-kodo-cyan/20 rounded-lg p-6 w-full">
+              <div className="bg-kodo-ink border border-kodo-steel/20 rounded-lg p-6 w-full">
                 <div className="grid grid-cols-2 gap-4">
                   <div className="text-center p-2">
                     <div className="text-xs text-kodo-content-dim uppercase font-bold mb-1">
diff --git a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
index 3e951db1d..a43fa59bc 100644
--- a/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/AddToPlaylistModal.tsx
@@ -86,7 +86,7 @@ export const AddToPlaylistModal: React.FC<AddToPlaylistModalProps> = ({
         <div className="p-4">
           <div className="relative mb-4">
             <input
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-kodo-cyan outline-none"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-9 pr-4 text-white text-sm focus:border-kodo-steel outline-none"
               placeholder="Find playlist"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index 8e984b8a0..9306b1dc8 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -57,7 +57,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
             />
 
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Description (Optional)"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index 5ff02a4e7..1530a4557 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -103,7 +103,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
             />
 
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Description"
               value={description}
               onChange={(e) => setDescription(e.target.value)}
diff --git a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
index 9211b30b4..edbb1884e 100644
--- a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
@@ -95,7 +95,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
     <div className="animate-fadeIn pb-20">
       {/* Header Section */}
       <div className="flex flex-col md:flex-row gap-8 items-end mb-8 p-6 bg-gradient-to-b from-kodo-ink/80 to-transparent rounded-2xl border-t border-white/5">
-        <div className="w-52 h-52 shadow-2xl shadow-kodo-cyan/10 rounded-lg overflow-hidden flex-shrink-0 group relative">
+        <div className="w-52 h-52 shadow-2xl shadow-kodo-steel/10 rounded-lg overflow-hidden flex-shrink-0 group relative">
           <img
             src={playlist.cover_url}
             className="w-full h-full object-cover"
diff --git a/apps/web/src/components/live/LiveStreamDetailView.tsx b/apps/web/src/components/live/LiveStreamDetailView.tsx
index d3beb8465..94a0ea577 100644
--- a/apps/web/src/components/live/LiveStreamDetailView.tsx
+++ b/apps/web/src/components/live/LiveStreamDetailView.tsx
@@ -186,7 +186,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
           <div className="p-4 border-t border-kodo-steel bg-kodo-ink">
             <div className="relative">
               <input
-                className="w-full bg-kodo-void border border-kodo-steel rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-kodo-cyan outline-none"
+                className="w-full bg-kodo-void border border-kodo-steel rounded-full py-2.5 pl-4 pr-10 text-white text-sm focus:border-kodo-steel outline-none"
                 placeholder="Send a message..."
                 value={chatInput}
                 onChange={(e) => setChatInput(e.target.value)}
diff --git a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
index 137db20ee..699732022 100644
--- a/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
+++ b/apps/web/src/components/marketplace/modals/ReviewProductModal.tsx
@@ -77,7 +77,7 @@ export const ReviewProductModal: React.FC<ReviewProductModalProps> = ({
               Your Review
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-32"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-32"
               placeholder="Share your thoughts on the quality, usability, and value..."
               value={comment}
               onChange={(e) => setComment(e.target.value)}
diff --git a/apps/web/src/components/modals/CreatorModal.tsx b/apps/web/src/components/modals/CreatorModal.tsx
index ff5c42bad..a9ae641cd 100644
--- a/apps/web/src/components/modals/CreatorModal.tsx
+++ b/apps/web/src/components/modals/CreatorModal.tsx
@@ -110,7 +110,7 @@ export const CreatorModal: React.FC<CreatorModalProps> = ({
                     Visibility
                   </label>
                   <div className="grid grid-cols-3 gap-2">
-                    <Button variant="outline" className="p-3 flex flex-col items-center justify-center gap-2 text-kodo-cyan bg-kodo-cyan/10 border-kodo-cyan">
+                    <Button variant="outline" className="p-3 flex flex-col items-center justify-center gap-2 text-kodo-steel bg-kodo-steel/10 border-kodo-steel">
                       <Tag className="w-5 h-5" />{' '}
                       <span className="text-xs font-bold">Public</span>
                     </Button>
diff --git a/apps/web/src/components/seller/CreateProductView.tsx b/apps/web/src/components/seller/CreateProductView.tsx
index 6eb076903..8660c84d9 100644
--- a/apps/web/src/components/seller/CreateProductView.tsx
+++ b/apps/web/src/components/seller/CreateProductView.tsx
@@ -140,7 +140,7 @@ export const CreateProductView: React.FC = () => {
                   Description
                 </label>
                 <textarea
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none min-h-[120px]"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[120px]"
                   placeholder="Describe your sound pack..."
                   value={description}
                   onChange={(e) => setDescription(e.target.value)}
@@ -153,7 +153,7 @@ export const CreateProductView: React.FC = () => {
                     Category
                   </label>
                   <select
-                    className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none"
+                    className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
                     value={category}
                     onChange={(e) => setCategory(e.target.value)}
                   >
@@ -241,7 +241,7 @@ export const CreateProductView: React.FC = () => {
                         </span>
                         <input
                           type="number"
-                          className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-6 pr-2 text-white focus:border-kodo-cyan outline-none text-right font-mono"
+                          className="w-full bg-kodo-void border border-kodo-steel rounded-lg py-2 pl-6 pr-2 text-white focus:border-kodo-steel outline-none text-right font-mono"
                           value={lic.price}
                           onChange={(e) =>
                             updateLicense(lic.type, 'price', e.target.value)
diff --git a/apps/web/src/components/settings/account/AccountSettings.tsx b/apps/web/src/components/settings/account/AccountSettings.tsx
index a45c24998..52c5d4eab 100644
--- a/apps/web/src/components/settings/account/AccountSettings.tsx
+++ b/apps/web/src/components/settings/account/AccountSettings.tsx
@@ -159,7 +159,7 @@ export const AccountSettings: React.FC = () => {
             </label>
             <div className="relative">
               <Globe className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-content-dim" />
-              <select className="w-full bg-kodo-ink border border-kodo-steel rounded-lg py-2.5 pl-10 pr-4 text-white text-sm focus:border-kodo-cyan outline-none appearance-none cursor-pointer hover:border-kodo-steel transition-colors">
+              <select className="w-full bg-kodo-ink border border-kodo-steel rounded-lg py-2.5 pl-10 pr-4 text-white text-sm focus:border-kodo-steel outline-none appearance-none cursor-pointer hover:border-kodo-steel transition-colors">
                 <option>English (US)</option>
                 <option>Japanese</option>
                 <option>French</option>
diff --git a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
index ea463a3a3..de8526a4b 100644
--- a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+++ b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
@@ -130,7 +130,7 @@ export const CloudIntegrationView: React.FC = () => {
                 <label className="block text-xs font-bold text-kodo-content-dim uppercase mb-2">
                   Sync Frequency
                 </label>
-                <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-cyan">
+                <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
                   <option>Every 15 minutes</option>
                   <option>Hourly</option>
                   <option>Daily</option>
diff --git a/apps/web/src/components/settings/data/DataExportModal.tsx b/apps/web/src/components/settings/data/DataExportModal.tsx
index 6f4f34ea4..00a2101e5 100644
--- a/apps/web/src/components/settings/data/DataExportModal.tsx
+++ b/apps/web/src/components/settings/data/DataExportModal.tsx
@@ -59,7 +59,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
               Export Format
             </label>
             <select
-              className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-cyan"
+              className="w-full bg-kodo-void border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel"
               value={format}
               onChange={(e) => setFormat(e.target.value)}
             >
@@ -79,7 +79,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   type="checkbox"
                   checked={options.profile}
                   onChange={() => toggleOption('profile')}
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                 />
                 <span className="text-sm text-kodo-text-main">
                   Profile & Identity
@@ -90,7 +90,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   type="checkbox"
                   checked={options.tracks}
                   onChange={() => toggleOption('tracks')}
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                 />
                 <span className="text-sm text-kodo-text-main">
                   Uploaded Content Metadata
@@ -101,7 +101,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   type="checkbox"
                   checked={options.activity}
                   onChange={() => toggleOption('activity')}
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                 />
                 <span className="text-sm text-kodo-text-main">
                   Activity Logs & History
@@ -112,7 +112,7 @@ export const DataExportModal: React.FC<DataExportModalProps> = ({
                   type="checkbox"
                   checked={options.billing}
                   onChange={() => toggleOption('billing')}
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel"
                 />
                 <span className="text-sm text-kodo-text-main">
                   Billing & Transactions
diff --git a/apps/web/src/components/settings/profile/EditProfile.tsx b/apps/web/src/components/settings/profile/EditProfile.tsx
index 618dff55f..1cfc82531 100644
--- a/apps/web/src/components/settings/profile/EditProfile.tsx
+++ b/apps/web/src/components/settings/profile/EditProfile.tsx
@@ -231,7 +231,7 @@ export const EditProfile: React.FC = () => {
                 Bio
               </label>
               <textarea
-                className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none min-h-[100px]"
+                className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px]"
                 value={formData.bio}
                 onChange={(e) =>
                   setFormData({ ...formData, bio: e.target.value })
@@ -255,7 +255,7 @@ export const EditProfile: React.FC = () => {
                   Gender
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none"
                   value={formData.gender}
                   onChange={(e) =>
                     setFormData({ ...formData, gender: e.target.value })
diff --git a/apps/web/src/components/social/PostCard.tsx b/apps/web/src/components/social/PostCard.tsx
index 0487ef16f..95451f374 100644
--- a/apps/web/src/components/social/PostCard.tsx
+++ b/apps/web/src/components/social/PostCard.tsx
@@ -249,7 +249,7 @@ export const PostCard: React.FC<PostCardProps> = ({ post }) => {
               </div>
               <div className="flex-1 relative">
                 <input
-                  className="w-full bg-kodo-void border border-kodo-steel rounded-full px-4 py-2 text-sm text-white focus:border-kodo-cyan outline-none"
+                  className="w-full bg-kodo-void border border-kodo-steel rounded-full px-4 py-2 text-sm text-white focus:border-kodo-steel outline-none"
                   placeholder="Write a comment..."
                 />
               </div>
diff --git a/apps/web/src/components/studio/AIToolsView.tsx b/apps/web/src/components/studio/AIToolsView.tsx
index 83cb90f0b..d4280af92 100644
--- a/apps/web/src/components/studio/AIToolsView.tsx
+++ b/apps/web/src/components/studio/AIToolsView.tsx
@@ -123,7 +123,7 @@ export const AIToolsView: React.FC = () => {
 
         {isProcessing && (
           <div className="w-full max-w-md text-center space-y-4">
-            <div className="w-20 h-20 bg-kodo-ink rounded-full border-4 border-kodo-steel border-t-kodo-cyan animate-spin mx-auto"></div>
+            <div className="w-20 h-20 bg-kodo-ink rounded-full border-4 border-kodo-steel border-t-kodo-steel animate-spin mx-auto"></div>
             <h3 className="text-xl font-bold text-white animate-pulse">
               Processing Audio...
             </h3>
diff --git a/apps/web/src/components/studio/CloudFileBrowser.tsx b/apps/web/src/components/studio/CloudFileBrowser.tsx
index cf5acf5bd..caa0d4b81 100644
--- a/apps/web/src/components/studio/CloudFileBrowser.tsx
+++ b/apps/web/src/components/studio/CloudFileBrowser.tsx
@@ -395,7 +395,7 @@ export const CloudFileBrowser: React.FC = () => {
                           <Button
                             variant="ghost"
                             size="icon"
-                            className="p-1.5 text-kodo-cyan"
+                            className="p-1.5 text-kodo-steel"
                             title="Process with AI"
                             onClick={() => addToast('Sent to AI Tools')}
                           >
diff --git a/apps/web/src/components/studio/CloudSettingsView.tsx b/apps/web/src/components/studio/CloudSettingsView.tsx
index 246a79010..c946ea897 100644
--- a/apps/web/src/components/studio/CloudSettingsView.tsx
+++ b/apps/web/src/components/studio/CloudSettingsView.tsx
@@ -63,7 +63,7 @@ export const CloudSettingsView: React.FC = () => {
               <Clock className="w-4 h-4" /> Trash Retention Policy
             </label>
             <select
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-cyan"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel"
               value={retention}
               onChange={(e) => setRetention(e.target.value)}
             >
@@ -82,7 +82,7 @@ export const CloudSettingsView: React.FC = () => {
               <MapPin className="w-4 h-4" /> Storage Region
             </label>
             <select
-              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-cyan"
+              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel"
               value={region}
               onChange={(e) => setRegion(e.target.value)}
             >
diff --git a/apps/web/src/components/studio/GoLiveView.tsx b/apps/web/src/components/studio/GoLiveView.tsx
index 97ba10659..45d42cf1e 100644
--- a/apps/web/src/components/studio/GoLiveView.tsx
+++ b/apps/web/src/components/studio/GoLiveView.tsx
@@ -129,7 +129,7 @@ export const GoLiveView: React.FC = () => {
                   Category
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg px-4 py-3 text-white focus:border-kodo-cyan outline-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg px-4 py-3 text-white focus:border-kodo-steel outline-none"
                   value={category}
                   onChange={(e) => setCategory(e.target.value)}
                 >
diff --git a/apps/web/src/components/studio/projects/CreateProjectModal.tsx b/apps/web/src/components/studio/projects/CreateProjectModal.tsx
index 33006b47e..363c79115 100644
--- a/apps/web/src/components/studio/projects/CreateProjectModal.tsx
+++ b/apps/web/src/components/studio/projects/CreateProjectModal.tsx
@@ -99,7 +99,7 @@ export const CreateProjectModal: React.FC<CreateProjectModalProps> = ({
               Description
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-void border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none text-sm resize-none h-24"
               placeholder="Project goals, vibe, or reference tracks..."
               value={formData.description}
               onChange={(e) =>
diff --git a/apps/web/src/components/studio/projects/ProjectDetailView.tsx b/apps/web/src/components/studio/projects/ProjectDetailView.tsx
index 477ce8458..1875ce761 100644
--- a/apps/web/src/components/studio/projects/ProjectDetailView.tsx
+++ b/apps/web/src/components/studio/projects/ProjectDetailView.tsx
@@ -187,7 +187,7 @@ export const ProjectDetailView: React.FC<ProjectDetailViewProps> = ({
                   <div className="absolute left-2.5 top-2 bottom-2 w-px bg-kodo-steel"></div>
                   {[1, 2, 3].map((_, i) => (
                     <div key={i} className="relative pl-8">
-                      <div className="absolute left-0 top-1 w-5 h-5 bg-kodo-graphite border border-kodo-cyan rounded-full flex items-center justify-center">
+                      <div className="absolute left-0 top-1 w-5 h-5 bg-kodo-graphite border border-kodo-steel rounded-full flex items-center justify-center">
                         <div className="w-2 h-2 bg-kodo-cyan rounded-full"></div>
                       </div>
                       <div className="text-sm text-kodo-text-main">
diff --git a/apps/web/src/components/theme/ThemeSwitcher.tsx b/apps/web/src/components/theme/ThemeSwitcher.tsx
index c1309bcbf..a3ac6435b 100644
--- a/apps/web/src/components/theme/ThemeSwitcher.tsx
+++ b/apps/web/src/components/theme/ThemeSwitcher.tsx
@@ -95,7 +95,7 @@ export function ThemeSwitcher({
               </div>
 
               {currentTheme === theme.id && (
-                <div className="flex items-center gap-2 text-kodo-cyan font-mono text-sm animate-slide-in-left">
+                <div className="flex items-center gap-2 text-kodo-steel font-mono text-sm animate-slide-in-left">
                   <div className="w-2 h-2 rounded-full bg-kodo-cyan animate-glow-pulse" />
                   Active Theme
                 </div>
diff --git a/apps/web/src/components/ui/ErrorDisplay.tsx b/apps/web/src/components/ui/ErrorDisplay.tsx
index 0bccd5ba3..59d14e1ff 100644
--- a/apps/web/src/components/ui/ErrorDisplay.tsx
+++ b/apps/web/src/components/ui/ErrorDisplay.tsx
@@ -306,7 +306,7 @@ export const ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(
         case 'warning':
           return <AlertTriangle className={cn(iconSize, 'text-kodo-gold')} />;
         case 'info':
-          return <Info className={cn(iconSize, 'text-kodo-cyan')} />;
+          return <Info className={cn(iconSize, 'text-kodo-steel')} />;
         default:
           return <AlertCircle className={cn(iconSize, 'text-kodo-red')} />;
       }
@@ -331,10 +331,10 @@ export const ErrorDisplay = React.forwardRef<HTMLDivElement, ErrorDisplayProps>(
           };
         case 'info':
           return {
-            bg: 'bg-kodo-cyan/10',
-            border: 'border-kodo-cyan/30',
-            text: 'text-kodo-cyan',
-            icon: 'text-kodo-cyan',
+            bg: 'bg-kodo-steel/10',
+            border: 'border-kodo-steel/30',
+            text: 'text-kodo-steel',
+            icon: 'text-kodo-steel',
           };
         default:
           return {
diff --git a/apps/web/src/components/ui/Toast.test.tsx b/apps/web/src/components/ui/Toast.test.tsx
index 42e7d4afe..79ce8e807 100644
--- a/apps/web/src/components/ui/Toast.test.tsx
+++ b/apps/web/src/components/ui/Toast.test.tsx
@@ -82,6 +82,6 @@ describe('Toast Component', () => {
     );
 
     const toast = container.firstChild as HTMLElement;
-    expect(toast.className).toContain('border-kodo-cyan');
+    expect(toast.className).toContain('border-kodo-steel');
   });
 });
diff --git a/apps/web/src/components/ui/Toast.tsx b/apps/web/src/components/ui/Toast.tsx
index 659ecf2d6..586726f1c 100644
--- a/apps/web/src/components/ui/Toast.tsx
+++ b/apps/web/src/components/ui/Toast.tsx
@@ -83,13 +83,13 @@ export const Toast: React.FC<ToastProps> = ({ id, type, message, onClose }) => {
   const styles = {
     success: 'border-kodo-lime text-white bg-kodo-ink/90',
     error: 'border-kodo-red text-white bg-kodo-ink/90',
-    info: 'border-kodo-cyan text-white bg-kodo-ink/90',
+    info: 'border-kodo-steel text-white bg-kodo-ink/90',
   };
 
   const icons = {
     success: <CheckCircle className="w-5 h-5 text-kodo-lime" />,
     error: <AlertCircle className="w-5 h-5 text-kodo-red" />,
-    info: <Info className="w-5 h-5 text-kodo-cyan" />,
+    info: <Info className="w-5 h-5 text-kodo-steel" />,
   };
 
   return (
diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx
index a15f7637b..2db7789a9 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/apps/web/src/components/ui/accordion.tsx
@@ -264,7 +264,7 @@ const AccordionTrigger = React.forwardRef<
       onClick={onToggle}
       className={cn(
         'flex w-full items-center justify-between py-4 text-left font-medium transition-all',
-        'hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
+        'hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
         '[&[data-state=open]>svg]:rotate-180',
         className,
       )}
diff --git a/apps/web/src/components/ui/alert.test.tsx b/apps/web/src/components/ui/alert.test.tsx
index 6f32c89a4..616abe667 100644
--- a/apps/web/src/components/ui/alert.test.tsx
+++ b/apps/web/src/components/ui/alert.test.tsx
@@ -9,7 +9,7 @@ describe('Alert Component', () => {
     const alert = screen.getByRole('alert');
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveTextContent('Default alert message');
-    expect(alert).toHaveClass('bg-kodo-cyan/10');
+    expect(alert).toHaveClass('bg-kodo-steel/10');
   });
 
   it('renders with title', () => {
@@ -23,8 +23,8 @@ describe('Alert Component', () => {
     render(<Alert variant="info">Info message</Alert>);
 
     const alert = screen.getByRole('alert');
-    expect(alert).toHaveClass('bg-kodo-cyan/10');
-    expect(alert).toHaveClass('text-kodo-cyan');
+    expect(alert).toHaveClass('bg-kodo-steel/10');
+    expect(alert).toHaveClass('text-kodo-steel');
   });
 
   it('renders success variant', () => {
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 1d06113a0..394e21842 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -109,7 +109,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
     const actualVariant = variantMap[variant] || variant;
 
     const styles = {
-      info: 'bg-kodo-cyan/10 border-kodo-cyan/30 text-kodo-cyan',
+      info: 'bg-kodo-steel/10 border-kodo-steel/30 text-kodo-steel',
       success: 'bg-kodo-lime/10 border-kodo-lime/30 text-kodo-lime',
       warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
       error: 'bg-kodo-red/10 border-kodo-red/30 text-kodo-red',
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 33a4dc1df..3758f4382 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -130,7 +130,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const actualVariant = variantMap[variant] || variant;
 
     const styles: Record<string, string> = {
-      cyan: 'bg-kodo-cyan/10 text-kodo-cyan border-kodo-cyan/30',
+      cyan: 'bg-kodo-steel/10 text-kodo-steel border-kodo-steel/30',
       magenta: 'bg-kodo-magenta/10 text-kodo-magenta border-kodo-magenta/30',
       lime: 'bg-kodo-lime/10 text-kodo-lime border-kodo-lime/30',
       gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 08708af0a..186cd0d73 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -107,8 +107,8 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           <div
             className="
             w-5 h-5 rounded border border-kodo-steel bg-kodo-graphite
-            peer-checked:bg-kodo-cyan peer-checked:border-kodo-cyan
-            peer-focus:ring-2 peer-focus:ring-kodo-cyan/30
+            peer-checked:bg-kodo-cyan peer-checked:border-kodo-steel
+            peer-focus:ring-2 peer-focus:ring-kodo-steel/30
             transition-all duration-200
           "
           ></div>
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index baf35fdab..24294e11c 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -151,7 +151,7 @@ const variantIcons = {
 const variantStyles = {
   alert: 'text-kodo-red',
   confirm: 'text-kodo-cyan',
-  info: 'text-kodo-cyan',
+  info: 'text-kodo-steel',
   default: '',
 };
 
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 458c1382a..7f3f6ffee 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -219,7 +219,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      {checked && <Check className="h-4 w-4 text-kodo-cyan" />}
+      {checked && <Check className="h-4 w-4 text-kodo-steel" />}
     </span>
     {children}
   </button>
@@ -247,7 +247,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      {checked && <Circle className="h-2 w-2 fill-current text-kodo-cyan" />}
+      {checked && <Circle className="h-2 w-2 fill-current text-kodo-steel" />}
     </span>
     {children}
   </button>
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 6164021b5..a1b6d782f 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-lg border border-white/10 bg-black/20 px-4 py-2.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-kodo-secondary/50 focus-visible:outline-none focus-visible:border-kodo-cyan disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200 text-white',
+          'flex h-10 w-full rounded-lg border border-white/10 bg-black/20 px-4 py-2.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-kodo-secondary/50 focus-visible:outline-none focus-visible:border-kodo-steel disabled:cursor-not-allowed disabled:opacity-50 transition-colors duration-200 text-white',
           className,
         )}
         ref={ref}
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index 624192e73..6a0d0cffe 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -151,11 +151,11 @@ const RadioGroupItem = React.forwardRef<HTMLInputElement, RadioGroupItemProps>(
     return (
       <label
         className={cn(
-          'aspect-square h-4 w-4 rounded-full border border-kodo-steel text-kodo-cyan',
-          'ring-offset-kodo-void focus-within:outline-none focus-within:ring-2 focus-within:ring-kodo-cyan focus-within:ring-offset-2',
+          'aspect-square h-4 w-4 rounded-full border border-kodo-steel text-kodo-steel',
+          'ring-offset-kodo-void focus-within:outline-none focus-within:ring-2 focus-within:ring-kodo-steel focus-within:ring-offset-2',
           'disabled:cursor-not-allowed disabled:opacity-50',
           'cursor-pointer relative inline-flex items-center justify-center',
-          checked && 'border-kodo-cyan',
+          checked && 'border-kodo-steel',
           className,
         )}
       >
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 8340a39c1..adcd93862 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -442,7 +442,7 @@ function SelectOptionItem({
         'hover:bg-white/5 hover:text-white',
         'focus:bg-white/5 focus:text-white',
         'transition-colors text-kodo-text-main',
-        isSelected && 'bg-kodo-cyan/10 text-kodo-cyan',
+        isSelected && 'bg-kodo-steel/10 text-kodo-steel',
         option.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',
       )}
       onClick={() => !option.disabled && onSelect(option.value)}
@@ -453,14 +453,14 @@ function SelectOptionItem({
         <div
           className={cn(
             'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-kodo-steel',
-            isSelected && 'bg-kodo-cyan border-kodo-cyan text-kodo-void',
+            isSelected && 'bg-kodo-cyan border-kodo-steel text-kodo-void',
           )}
         >
           {isSelected && <Check className="h-3 w-3" />}
         </div>
       )}
       <span className="flex-1">{option.label}</span>
-      {!multiple && isSelected && <Check className="h-4 w-4 text-kodo-cyan" />}
+      {!multiple && isSelected && <Check className="h-4 w-4 text-kodo-steel" />}
     </div>
   );
 }
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index 6731d3b89..fb5004fe7 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -155,7 +155,7 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
         />
         <div
           className={cn(
-            'absolute h-5 w-5 rounded-full border-2 border-kodo-cyan bg-white ring-offset-kodo-void transition-transform pointer-events-none',
+            'absolute h-5 w-5 rounded-full border-2 border-kodo-steel bg-white ring-offset-kodo-void transition-transform pointer-events-none',
             disabled && 'opacity-50',
           )}
           style={{ left: `calc(${percentage}% - 10px)` }}
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index 882304816..ac06e1f16 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -249,7 +249,7 @@ const TabsTrigger = React.forwardRef<HTMLButtonElement, TabsTriggerProps>(
         className={cn(
           'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-bold uppercase tracking-wider',
           'ring-offset-kodo-void transition-all duration-200',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
           'disabled:pointer-events-none disabled:opacity-50',
           isActive
             ? 'bg-kodo-cyan text-kodo-void shadow-neon-cyan'
@@ -315,7 +315,7 @@ const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
       <div
         ref={ref}
         className={cn(
-          'mt-2 ring-offset-kodo-void focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2',
+          'mt-2 ring-offset-kodo-void focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
           className,
         )}
         {...props}
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index f35acda1c..65752871c 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -87,7 +87,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             'text-white placeholder-gray-500',
             'font-body text-base',
             'rounded-lg',
-            'focus:outline-none focus:border-kodo-cyan focus:ring-1 focus:ring-kodo-cyan',
+            'focus:outline-none focus:border-kodo-steel focus:ring-1 focus:ring-kodo-steel',
             'transition-all duration-200',
             'min-h-[100px] resize-y',
             className,
diff --git a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
index 74480f563..ed45b545c 100644
--- a/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
+++ b/apps/web/src/components/upload/metadata/LyricsEditorModal.tsx
@@ -55,7 +55,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
               <label className="flex items-center gap-2 text-sm text-kodo-text-main cursor-pointer">
                 <input
                   type="checkbox"
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel focus:ring-0"
                   checked={isSynced}
                   onChange={(e) => setIsSynced(e.target.checked)}
                 />
@@ -83,7 +83,7 @@ export const LyricsEditorModal: React.FC<LyricsEditorModalProps> = ({
           </div>
 
           <textarea
-            className="flex-1 w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-kodo-cyan outline-none custom-scrollbar"
+            className="flex-1 w-full bg-kodo-void border border-kodo-steel rounded-lg p-4 text-white font-mono text-sm leading-relaxed resize-none focus:border-kodo-steel outline-none custom-scrollbar"
             placeholder="Enter lyrics here...&#10;[00:12.00] First line of the verse&#10;[00:15.50] Second line..."
             value={lyrics}
             onChange={(e) => setLyrics(e.target.value)}
diff --git a/apps/web/src/components/upload/metadata/MetadataEditor.tsx b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
index c737778fb..d5668eac5 100644
--- a/apps/web/src/components/upload/metadata/MetadataEditor.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataEditor.tsx
@@ -127,7 +127,7 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({
       {/* Editor Header / Player */}
       <Card
         variant="gaming"
-        className="sticky top-20 z-30 shadow-2xl border-kodo-cyan/20"
+        className="sticky top-20 z-30 shadow-2xl border-kodo-steel/20"
       >
         <div className="flex items-center gap-4 mb-4">
           <div className="flex gap-4 items-center flex-1">
diff --git a/apps/web/src/components/upload/metadata/MetadataForm.tsx b/apps/web/src/components/upload/metadata/MetadataForm.tsx
index 98a2b2879..b8b73cb20 100644
--- a/apps/web/src/components/upload/metadata/MetadataForm.tsx
+++ b/apps/web/src/components/upload/metadata/MetadataForm.tsx
@@ -237,7 +237,7 @@ export const MetadataForm: React.FC<MetadataFormProps> = ({
               Description
             </label>
             <textarea
-              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-cyan outline-none min-h-[100px] text-sm"
+              className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg p-3 text-white focus:border-kodo-steel outline-none min-h-[100px] text-sm"
               placeholder="Tell the story behind this track..."
               value={data.description || ''}
               onChange={(e) => updateField('description', e.target.value)}
diff --git a/apps/web/src/components/views/CheckoutView.tsx b/apps/web/src/components/views/CheckoutView.tsx
index 8295b8e74..2b6edd3f0 100644
--- a/apps/web/src/components/views/CheckoutView.tsx
+++ b/apps/web/src/components/views/CheckoutView.tsx
@@ -123,7 +123,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
                   Country
                 </label>
                 <select
-                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg py-3 px-4 text-white focus:border-kodo-cyan outline-none appearance-none"
+                  className="w-full bg-kodo-graphite border border-kodo-steel rounded-lg py-3 px-4 text-white focus:border-kodo-steel outline-none appearance-none"
                   value={form.country}
                   onChange={(e) =>
                     setForm({ ...form, country: e.target.value })
@@ -177,7 +177,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel focus:ring-0"
                   checked={form.saveInfo}
                   onChange={(e) =>
                     setForm({ ...form, saveInfo: e.target.checked })
@@ -190,7 +190,7 @@ export const CheckoutView: React.FC<CheckoutViewProps> = ({
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
-                  className="rounded border-kodo-steel bg-transparent text-kodo-cyan focus:ring-0"
+                  className="rounded border-kodo-steel bg-transparent text-kodo-steel focus:ring-0"
                   checked={form.acceptTerms}
                   onChange={(e) =>
                     setForm({ ...form, acceptTerms: e.target.checked })
diff --git a/apps/web/src/components/views/GearView.tsx b/apps/web/src/components/views/GearView.tsx
index 123c09035..600ccb72b 100644
--- a/apps/web/src/components/views/GearView.tsx
+++ b/apps/web/src/components/views/GearView.tsx
@@ -475,7 +475,7 @@ export const GearView: React.FC = () => {
                       {selectedItem.orderNumber && (
                         <div className="flex justify-between">
                           <span className="text-kodo-content-dim">Order #</span>
-                          <span className="text-kodo-cyan">
+                          <span className="text-kodo-steel">
                             {selectedItem.orderNumber}
                           </span>
                         </div>
diff --git a/apps/web/src/components/views/LiveView.tsx b/apps/web/src/components/views/LiveView.tsx
index 4e7187580..9c24df13a 100644
--- a/apps/web/src/components/views/LiveView.tsx
+++ b/apps/web/src/components/views/LiveView.tsx
@@ -238,7 +238,7 @@ export const LiveView: React.FC = () => {
                 value={msgInput}
                 onChange={(e) => setMsgInput(e.target.value)}
                 onKeyDown={(e) => e.key === 'Enter' && handleSend()}
-                className="w-full bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-white focus:border-kodo-cyan outline-none"
+                className="w-full bg-kodo-ink border border-kodo-steel rounded px-3 py-2 text-sm text-white focus:border-kodo-steel outline-none"
                 placeholder="Say something..."
               />
               <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-kodo-gold cursor-pointer hover:scale-110 transition-transform" />
@@ -257,7 +257,7 @@ export const LiveView: React.FC = () => {
               Balance: 420 $VEZA
             </span>
             <span
-              className="text-[10px] text-kodo-cyan cursor-pointer"
+              className="text-[10px] text-kodo-steel cursor-pointer"
               onClick={() => addToast('Opening Wallet...')}
             >
               Get Coins
diff --git a/apps/web/src/components/views/SearchPageView.tsx b/apps/web/src/components/views/SearchPageView.tsx
index a0759765c..b35b59546 100644
--- a/apps/web/src/components/views/SearchPageView.tsx
+++ b/apps/web/src/components/views/SearchPageView.tsx
@@ -143,7 +143,7 @@ export const SearchPageView: React.FC<SearchPageViewProps> = ({
                         name="genre"
                         checked={filters.genre === g}
                         onChange={() => setFilters({ ...filters, genre: g })}
-                        className="bg-transparent border-kodo-steel text-kodo-cyan focus:ring-0"
+                        className="bg-transparent border-kodo-steel text-kodo-steel focus:ring-0"
                       />
                       {g}
                     </label>
diff --git a/apps/web/src/components/views/SettingsView.tsx b/apps/web/src/components/views/SettingsView.tsx
index ac6e70e70..45bc6ccc5 100644
--- a/apps/web/src/components/views/SettingsView.tsx
+++ b/apps/web/src/components/views/SettingsView.tsx
@@ -100,7 +100,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({
               <TabsTrigger
                 key={tab.id}
                 value={tab.id}
-                className="rounded-none border-b-2 border-transparent data-[state=active]:border-kodo-cyan data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-kodo-steel data-[state=active]:bg-transparent data-[state=active]:shadow-none px-4 py-2"
               >
                 <span className="flex items-center gap-2">
                   {tab.icon}
diff --git a/apps/web/src/features/auth/components/AuthLayout.tsx b/apps/web/src/features/auth/components/AuthLayout.tsx
index 4a285c0fb..12a9e1722 100644
--- a/apps/web/src/features/auth/components/AuthLayout.tsx
+++ b/apps/web/src/features/auth/components/AuthLayout.tsx
@@ -75,7 +75,7 @@ export function AuthLayout({
               <Link
                 key={link.to}
                 to={link.to}
-                className="text-sm text-kodo-cyan dark:text-kodo-cyan hover:text-white dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
+                className="text-sm text-kodo-steel dark:text-kodo-steel hover:text-white dark:hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded"
               >
                 {link.label}
               </Link>
diff --git a/apps/web/src/features/auth/components/LoginForm.tsx b/apps/web/src/features/auth/components/LoginForm.tsx
index fc84699f6..bfae993d2 100644
--- a/apps/web/src/features/auth/components/LoginForm.tsx
+++ b/apps/web/src/features/auth/components/LoginForm.tsx
@@ -170,7 +170,7 @@ export const LoginForm = () => {
           type="checkbox"
           {...register('remember_me')}
           id="remember_me"
-          className="h-4 w-4 text-kodo-cyan focus:ring-kodo-cyan border-kodo-steel rounded bg-kodo-graphite"
+          className="h-4 w-4 text-kodo-steel focus:ring-kodo-steel border-kodo-steel rounded bg-kodo-graphite"
         />
         <label
           htmlFor="remember_me"
diff --git a/apps/web/src/features/auth/pages/LoginPage.tsx b/apps/web/src/features/auth/pages/LoginPage.tsx
index 7caf161c7..22fbc54f9 100644
--- a/apps/web/src/features/auth/pages/LoginPage.tsx
+++ b/apps/web/src/features/auth/pages/LoginPage.tsx
@@ -263,7 +263,7 @@ export function LoginPage() {
             id="remember_me"
             checked={remember_me}
             onChange={(e) => setRemember_me(e.target.checked)}
-            className="h-4 w-4 text-kodo-cyan focus:ring-blue-500 border-kodo-steel rounded"
+            className="h-4 w-4 text-kodo-steel focus:ring-blue-500 border-kodo-steel rounded"
             aria-describedby="remember_me-description"
           />
           <label
diff --git a/apps/web/src/features/auth/pages/OAuthCallbackPage.tsx b/apps/web/src/features/auth/pages/OAuthCallbackPage.tsx
index 9c5c2d07c..56dcf62a8 100644
--- a/apps/web/src/features/auth/pages/OAuthCallbackPage.tsx
+++ b/apps/web/src/features/auth/pages/OAuthCallbackPage.tsx
@@ -7,7 +7,7 @@ export function OAuthCallbackPage() {
   return (
     <AuthLayout title="Connexion en cours..." subtitle="Veuillez patienter...">
       <div className="text-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-kodo-cyan mx-auto"></div>
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-kodo-steel mx-auto"></div>
         <p className="mt-4 text-sm text-kodo-content-dim">
           Finalisation de votre connexion...
         </p>
diff --git a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
index a46037ff1..b95471160 100644
--- a/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
+++ b/apps/web/src/features/auth/pages/VerifyEmailPage.tsx
@@ -149,7 +149,7 @@ export function VerifyEmailPage() {
           aria-busy="true"
         >
           <div className="flex justify-center" aria-hidden="true">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-kodo-cyan"></div>
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-kodo-steel"></div>
           </div>
           <p className="text-kodo-content-dim">{message}</p>
           <span className="sr-only">
diff --git a/apps/web/src/features/chat/components/ChatInput.tsx b/apps/web/src/features/chat/components/ChatInput.tsx
index 78fae0f8b..21a86533a 100644
--- a/apps/web/src/features/chat/components/ChatInput.tsx
+++ b/apps/web/src/features/chat/components/ChatInput.tsx
@@ -117,12 +117,12 @@ export const ChatInput: React.FC = () => {
 
       {/* Upload Overlay */}
       {isDragActive && (
-        <div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-kodo-cyan/10 backdrop-blur-md flex items-center justify-center border-t-2 border-kodo-cyan border-dashed rounded-t-2xl animate-fadeIn">
+        <div className="absolute bottom-full left-0 right-0 h-48 z-50 bg-kodo-steel/10 backdrop-blur-md flex items-center justify-center border-t-2 border-kodo-steel border-dashed rounded-t-2xl animate-fadeIn">
           <div className="text-center">
-            <div className="w-12 h-12 rounded-full bg-kodo-cyan/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
-              <Paperclip className="w-6 h-6 text-kodo-cyan" />
+            <div className="w-12 h-12 rounded-full bg-kodo-steel/20 flex items-center justify-center mx-auto mb-2 animate-bounce">
+              <Paperclip className="w-6 h-6 text-kodo-steel" />
             </div>
-            <p className="text-kodo-cyan font-mono uppercase tracking-widest text-sm">
+            <p className="text-kodo-steel font-mono uppercase tracking-widest text-sm">
               Initiate Data Transfer
             </p>
           </div>
@@ -173,7 +173,7 @@ export const ChatInput: React.FC = () => {
               size="icon"
               className={cn(
                 'text-kodo-secondary hover:text-white hover:bg-white/5',
-                showEmojiPicker && 'text-kodo-cyan bg-white/5',
+                showEmojiPicker && 'text-kodo-steel bg-white/5',
               )}
               onClick={() => setShowEmojiPicker(!showEmojiPicker)}
             >
@@ -214,7 +214,7 @@ export const ChatInput: React.FC = () => {
             value={message}
             onChange={(e) => setMessage(e.target.value)}
             placeholder="Broadcast message..."
-            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-kodo-cyan/50 focus:ring-1 focus:ring-kodo-cyan/50 transition-all font-mono text-sm"
+            className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-white placeholder:text-kodo-secondary/50 focus:outline-none focus:border-kodo-steel/50 focus:ring-1 focus:ring-kodo-steel/50 transition-all font-mono text-sm"
             disabled={!currentConversationId || isUploading}
           />
           {message.length === 0 && !isUploading && (
diff --git a/apps/web/src/features/chat/components/ChatRoom.tsx b/apps/web/src/features/chat/components/ChatRoom.tsx
index 718a0d585..315e5269f 100644
--- a/apps/web/src/features/chat/components/ChatRoom.tsx
+++ b/apps/web/src/features/chat/components/ChatRoom.tsx
@@ -56,7 +56,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
     return (
       <div className="flex-1 flex flex-col items-center justify-center text-kodo-secondary opacity-50 space-y-4">
         <div className="w-24 h-24 rounded-full bg-white/5 flex items-center justify-center animate-pulse">
-          <Wifi className="w-10 h-10 text-kodo-cyan opacity-50" />
+          <Wifi className="w-10 h-10 text-kodo-steel opacity-50" />
         </div>
         <p className="text-sm font-mono uppercase tracking-widest">
           Awaiting Frequency Selection
@@ -137,7 +137,7 @@ export const ChatRoom: React.FC<ChatRoomProps> = ({ conversationId }) => {
               className={cn(
                 'transition-all duration-500 animate-slideUp',
                 highlightedMessageId === msg.id &&
-                  'bg-kodo-cyan/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-cyan/30',
+                  'bg-kodo-steel/10 rounded-xl -mx-4 px-4 py-2 ring-1 ring-kodo-steel/30',
               )}
             >
               <ChatMessageComponent message={msg} />
diff --git a/apps/web/src/features/chat/components/ChatSidebar.tsx b/apps/web/src/features/chat/components/ChatSidebar.tsx
index 0a2b9eab5..344a0725b 100644
--- a/apps/web/src/features/chat/components/ChatSidebar.tsx
+++ b/apps/web/src/features/chat/components/ChatSidebar.tsx
@@ -441,7 +441,7 @@ export const ChatSidebar: React.FC = () => {
       <div className="p-4 border-t border-white/5 bg-white/2 backdrop-blur-sm">
         <Button
           onClick={() => setIsCreateDialogOpen(true)}
-          className="w-full shadow-lg shadow-kodo-cyan/10"
+          className="w-full shadow-lg shadow-kodo-steel/10"
           variant="default"
         >
           <Plus className="mr-2 h-4 w-4" />
diff --git a/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx b/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
index e1c59f91b..b72e0e0d4 100644
--- a/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
+++ b/apps/web/src/features/chat/components/VirtualizedChatMessages.tsx
@@ -123,7 +123,7 @@ export function VirtualizedChatMessages({
 
     return (
       <div className="flex justify-center items-center py-4">
-        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-kodo-cyan"></div>
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-kodo-steel"></div>
         <span className="ml-2 text-sm text-kodo-content-dim">
           Chargement des messages...
         </span>
diff --git a/apps/web/src/features/error/pages/ServerErrorPage.tsx b/apps/web/src/features/error/pages/ServerErrorPage.tsx
index 7eb418745..e756e532b 100644
--- a/apps/web/src/features/error/pages/ServerErrorPage.tsx
+++ b/apps/web/src/features/error/pages/ServerErrorPage.tsx
@@ -111,7 +111,7 @@ function ServerErrorPage() {
                   </span>
                 </div>
                 <div className="flex items-center gap-2 text-sm text-kodo-content-dim dark:text-kodo-content-dim">
-                  <Mail className="h-4 w-4 text-kodo-cyan" />
+                  <Mail className="h-4 w-4 text-kodo-steel" />
                   <span>
                     Contactez le support si le problème persiste après plusieurs
                     tentatives
diff --git a/apps/web/src/features/library/pages/LibraryPage.tsx b/apps/web/src/features/library/pages/LibraryPage.tsx
index 18a03797c..d49745ccf 100644
--- a/apps/web/src/features/library/pages/LibraryPage.tsx
+++ b/apps/web/src/features/library/pages/LibraryPage.tsx
@@ -433,14 +433,14 @@ export default function LibraryPagePremium() {
               <DropdownMenuLabel>Mode d'affichage</DropdownMenuLabel>
               <DropdownMenuItem
                 onClick={() => setViewMode('grid')}
-                className={cn(viewMode === 'grid' && 'bg-kodo-cyan/10')}
+                className={cn(viewMode === 'grid' && 'bg-kodo-steel/10')}
               >
                 <Grid3x3 className="mr-2 h-4 w-4" />
                 Vue en grille
               </DropdownMenuItem>
               <DropdownMenuItem
                 onClick={() => setViewMode('list')}
-                className={cn(viewMode === 'list' && 'bg-kodo-cyan/10')}
+                className={cn(viewMode === 'list' && 'bg-kodo-steel/10')}
               >
                 <List className="mr-2 h-4 w-4" />
                 Vue en liste
@@ -613,9 +613,9 @@ export default function LibraryPagePremium() {
               key={track.id}
               className={cn(
                 'group cursor-pointer hover:border-kodo-steel/50 transition-all duration-300 overflow-hidden',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
                 selectedTracks.has(track.id) &&
-                  'border-kodo-cyan ring-2 ring-kodo-cyan/40 bg-kodo-cyan/10 shadow-lg shadow-kodo-cyan/30',
+                  'border-kodo-steel ring-2 ring-kodo-steel/40 bg-kodo-steel/10 shadow-lg shadow-kodo-steel/30',
               )}
               onClick={() => isBulkMode && toggleTrackSelection(track.id)}
               tabIndex={0}
@@ -717,7 +717,7 @@ export default function LibraryPagePremium() {
                       'flex items-center gap-4 p-4 hover:bg-white/5 transition-colors cursor-pointer group',
                       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-cyan focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void rounded',
                       selectedTracks.has(track.id) &&
-                        'bg-kodo-cyan/15 border-l-4 border-kodo-cyan shadow-sm shadow-kodo-cyan/20',
+                        'bg-kodo-cyan/15 border-l-4 border-kodo-steel shadow-sm shadow-kodo-steel/20',
                     )}
                     onClick={() => isBulkMode && toggleTrackSelection(track.id)}
                     tabIndex={0}
diff --git a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
index 8f7c49a21..46cb215c0 100644
--- a/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
+++ b/apps/web/src/features/player/components/PlaybackSpeedControl.tsx
@@ -137,7 +137,7 @@ export function PlaybackSpeedControl({
               </span>
               {currentSpeed === speed.value && (
                 <Check
-                  className="h-4 w-4 text-kodo-cyan dark:text-kodo-cyan"
+                  className="h-4 w-4 text-kodo-steel dark:text-kodo-steel"
                   aria-hidden="true"
                 />
               )}
diff --git a/apps/web/src/features/player/components/QualitySelector.tsx b/apps/web/src/features/player/components/QualitySelector.tsx
index cb49afabc..61328bcbe 100644
--- a/apps/web/src/features/player/components/QualitySelector.tsx
+++ b/apps/web/src/features/player/components/QualitySelector.tsx
@@ -139,7 +139,7 @@ export function QualitySelector({
               </div>
               {currentQuality === quality.value && (
                 <Check
-                  className="h-4 w-4 text-kodo-cyan dark:text-kodo-cyan"
+                  className="h-4 w-4 text-kodo-steel dark:text-kodo-steel"
                   aria-hidden="true"
                 />
               )}
diff --git a/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx b/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
index 2470d2dc5..da16dab7c 100644
--- a/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistBatchActions.tsx
@@ -197,7 +197,7 @@ export function PlaylistBatchActions({
     <div
       className={cn(
         'flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4',
-        'p-4 bg-kodo-cyan/10 dark:bg-kodo-cyan/20 border border-kodo-cyan dark:border-kodo-cyan rounded-lg',
+        'p-4 bg-kodo-steel/10 dark:bg-kodo-steel/20 border border-kodo-steel dark:border-kodo-steel rounded-lg',
         'sticky top-0 z-10 backdrop-blur-sm',
         className,
       )}
diff --git a/apps/web/src/features/playlists/components/PlaylistCard.tsx b/apps/web/src/features/playlists/components/PlaylistCard.tsx
index 94d96d7f6..5c2c63966 100644
--- a/apps/web/src/features/playlists/components/PlaylistCard.tsx
+++ b/apps/web/src/features/playlists/components/PlaylistCard.tsx
@@ -65,7 +65,7 @@ export function PlaylistCard({
       className={cn(
         'cursor-pointer active:opacity-90 transition-opacity duration-200',
         'touch-manipulation', // Optimize touch response
-        selectable && selected && 'ring-2 ring-blue-500 border-kodo-cyan',
+        selectable && selected && 'ring-2 ring-blue-500 border-kodo-steel',
         className,
       )}
     >
diff --git a/apps/web/src/features/streaming/components/PlaybackHeatmap.tsx b/apps/web/src/features/streaming/components/PlaybackHeatmap.tsx
index 2bbb8a434..2fce75ef1 100644
--- a/apps/web/src/features/streaming/components/PlaybackHeatmap.tsx
+++ b/apps/web/src/features/streaming/components/PlaybackHeatmap.tsx
@@ -84,7 +84,7 @@ export function PlaybackHeatmap({
       return 'bg-kodo-steel/30'; // Pas d'écoute
     }
     if (intensity < 0.2) {
-      return 'bg-kodo-cyan/20'; // Faible intensité
+      return 'bg-kodo-steel/20'; // Faible intensité
     }
     if (intensity < 0.4) {
       return 'bg-kodo-cyan/40'; // Intensité faible-moyenne
diff --git a/apps/web/src/features/tracks/components/TrackFilters.tsx b/apps/web/src/features/tracks/components/TrackFilters.tsx
index 5d74b3f5e..4afce8d21 100644
--- a/apps/web/src/features/tracks/components/TrackFilters.tsx
+++ b/apps/web/src/features/tracks/components/TrackFilters.tsx
@@ -117,7 +117,7 @@ export function TrackFilters({
               Filtres
             </span>
             {hasActiveFilters && (
-              <span className="px-2 py-0.5 text-xs font-medium bg-kodo-cyan/10 text-kodo-cyan dark:bg-kodo-cyan/20 dark:text-kodo-cyan rounded-full">
+              <span className="px-2 py-0.5 text-xs font-medium bg-kodo-steel/10 text-kodo-steel dark:bg-kodo-steel/20 dark:text-kodo-steel rounded-full">
                 Actifs
               </span>
             )}
@@ -154,7 +154,7 @@ export function TrackFilters({
                   'w-full pl-10 pr-10 py-2 border border-kodo-steel dark:border-kodo-steel',
                   'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                   'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
-                  'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                  'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                 )}
                 aria-label="Rechercher des pistes"
               />
@@ -191,7 +191,7 @@ export function TrackFilters({
                   'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                   'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                   'text-kodo-text-main dark:text-kodo-text-main',
-                  'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                  'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                 )}
                 aria-label="Filtrer par genre"
               >
@@ -224,7 +224,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Filtrer par artiste"
                 >
@@ -246,7 +246,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Filtrer par artiste"
                 />
@@ -278,7 +278,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Filtrer par année"
                 >
@@ -307,7 +307,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Filtrer par année"
                 />
@@ -343,7 +343,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Durée minimale en minutes"
                 />
@@ -364,7 +364,7 @@ export function TrackFilters({
                     'w-full px-3 py-2 border border-kodo-steel dark:border-kodo-steel',
                     'rounded-md bg-kodo-graphite dark:bg-kodo-ink',
                     'text-kodo-text-main dark:text-kodo-text-main placeholder-kodo-content-dim dark:placeholder-kodo-content-dim',
-                    'focus:outline-none focus:ring-2 focus:ring-kodo-cyan focus:border-transparent',
+                    'focus:outline-none focus:ring-2 focus:ring-kodo-steel focus:border-transparent',
                   )}
                   aria-label="Durée maximale en minutes"
                 />
diff --git a/apps/web/src/features/tracks/components/TrackHistory.tsx b/apps/web/src/features/tracks/components/TrackHistory.tsx
index 919973aff..91ae14b3c 100644
--- a/apps/web/src/features/tracks/components/TrackHistory.tsx
+++ b/apps/web/src/features/tracks/components/TrackHistory.tsx
@@ -124,7 +124,7 @@ export function TrackHistory({
       case 'created':
         return 'text-kodo-lime bg-kodo-lime/10';
       case 'updated':
-        return 'text-kodo-cyan bg-kodo-cyan/10';
+        return 'text-kodo-steel bg-kodo-steel/10';
       case 'deleted':
         return 'text-kodo-red bg-kodo-red/10';
       case 'published':
diff --git a/apps/web/src/features/tracks/components/TrackList.tsx b/apps/web/src/features/tracks/components/TrackList.tsx
index efa9ae09e..eed3911f6 100644
--- a/apps/web/src/features/tracks/components/TrackList.tsx
+++ b/apps/web/src/features/tracks/components/TrackList.tsx
@@ -130,7 +130,7 @@ export function TrackList({
                 role="listitem"
                 className={cn(
                   selectedTracks.includes(track.id) &&
-                    'bg-kodo-cyan/10 dark:bg-kodo-cyan/20',
+                    'bg-kodo-steel/10 dark:bg-kodo-steel/20',
                 )}
               >
                 {showSelection && (
diff --git a/apps/web/src/pages/DashboardPage.tsx b/apps/web/src/pages/DashboardPage.tsx
index 34792bb6a..8c15a7ce3 100644
--- a/apps/web/src/pages/DashboardPage.tsx
+++ b/apps/web/src/pages/DashboardPage.tsx
@@ -279,7 +279,7 @@ export function DashboardPage() {
                                 <Button variant="ghost" size="sm" className="text-xs">
                                   7J
                                 </Button>
-                                <Button variant="outline" size="sm" className="text-xs text-kodo-cyan bg-kodo-cyan/10 border-kodo-cyan/20">
+                                <Button variant="outline" size="sm" className="text-xs text-kodo-steel bg-kodo-steel/10 border-kodo-steel/20">
                                   30J
                                 </Button>
                                 <Button variant="ghost" size="sm" className="text-xs">
diff --git a/apps/web/src/pages/LoginPage.tsx b/apps/web/src/pages/LoginPage.tsx
index a919bb0d1..c6dd0a241 100644
--- a/apps/web/src/pages/LoginPage.tsx
+++ b/apps/web/src/pages/LoginPage.tsx
@@ -46,7 +46,7 @@ export const LoginPage = () => {
             Pas encore de compte ?{' '}
             <Link
               to="/register"
-              className="font-medium text-kodo-cyan hover:text-kodo-cyan/80 transition-colors"
+              className="font-medium text-kodo-steel hover:text-kodo-steel/80 transition-colors"
             >
               S'inscrire
             </Link>
diff --git a/apps/web/src/pages/RegisterPage.tsx b/apps/web/src/pages/RegisterPage.tsx
index 9b5e5ad3f..d747b7a02 100644
--- a/apps/web/src/pages/RegisterPage.tsx
+++ b/apps/web/src/pages/RegisterPage.tsx
@@ -44,7 +44,7 @@ export const RegisterPage = () => {
             Déjà un compte ?{' '}
             <Link
               to="/login"
-              className="font-medium text-kodo-cyan hover:text-kodo-cyan/80 transition-colors"
+              className="font-medium text-kodo-steel hover:text-kodo-steel/80 transition-colors"
             >
               Se connecter
             </Link>
diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx
index 9168c4390..5617965f6 100644
--- a/apps/web/src/pages/SettingsPage.tsx
+++ b/apps/web/src/pages/SettingsPage.tsx
@@ -158,7 +158,7 @@ export function SettingsPage() {
                   <select
                     value={language}
                     onChange={(e) => setLanguage(e.target.value as 'en' | 'fr')}
-                    className="w-full px-4 py-2 bg-kodo-graphite border border-white/10 rounded-lg text-white focus:border-kodo-cyan focus:outline-none"
+                    className="w-full px-4 py-2 bg-kodo-graphite border border-white/10 rounded-lg text-white focus:border-kodo-steel focus:outline-none"
                   >
                     <option value="en">English</option>
                     <option value="fr">Français</option>
diff --git a/scripts/replace-decorative-cyan.py b/scripts/replace-decorative-cyan.py
new file mode 100755
index 000000000..f122d6ea0
--- /dev/null
+++ b/scripts/replace-decorative-cyan.py
@@ -0,0 +1,265 @@
+#!/usr/bin/env python3
+"""
+Script to replace decorative/informational kodo-cyan instances with kodo-steel
+for Action 11.3.1.3: Apply 80/20 rule (80% neutral, 20% color)
+
+This script:
+1. Finds all instances of kodo-cyan usage
+2. Identifies decorative/informational instances
+3. Replaces them with kodo-steel variants
+4. Preserves active/functional states, design system variants, semantic indicators
+"""
+
+import os
+import re
+import sys
+from pathlib import Path
+from typing import List, Tuple, Dict
+
+# Patterns to find kodo-cyan usage
+CYAN_PATTERNS = [
+    r'bg-kodo-cyan/10',
+    r'bg-kodo-cyan/20',
+    r'border-kodo-cyan/30',
+    r'border-kodo-cyan/20',
+    r'border-kodo-cyan',
+    r'text-kodo-cyan',
+    r'text-kodo-cyan-dim',
+]
+
+# Patterns that indicate functional/active states (PRESERVE)
+PRESERVE_PATTERNS = [
+    # Active/selected states - check for conditional logic
+    r'\?.*kodo-cyan.*:',
+    r':.*kodo-cyan.*\?',
+    r'isSelected.*\?.*kodo-cyan',
+    r'isActive.*\?.*kodo-cyan',
+    r'isCurrent.*\?.*kodo-cyan',
+    r'selected.*\?.*kodo-cyan',
+    r'active.*\?.*kodo-cyan',
+    r'current.*\?.*kodo-cyan',
+    r'isPlaying.*\?.*kodo-cyan',
+    r'isFocused.*\?.*kodo-cyan',
+    r'isMe.*\?.*kodo-cyan',
+    r'connected.*\?.*kodo-cyan',
+    r'is_current.*\?.*kodo-cyan',
+    r'draggedIndex.*\?.*kodo-cyan',
+    r'autoScroll.*\?.*kodo-cyan',
+    r'showVisualizer.*\?.*kodo-cyan',
+    r'isQueueOpen.*\?.*kodo-cyan',
+    r'queueTab.*\?.*kodo-cyan',
+    r'paymentMethod.*\?.*kodo-cyan',
+    r'currentTheme.*\?.*kodo-cyan',
+    r'theme ===.*\?.*kodo-cyan',
+    r'dateRange ===.*\?.*kodo-cyan',
+    # Design system variants (PRESERVE) - exact matches
+    r'cyan:\s*[\'"]kodo-cyan',
+    r'color:\s*[\'"]cyan',
+    r'variant:\s*[\'"]cyan',
+    r'variant:\s*[\'"]info',
+    r'severity:\s*[\'"]info',
+    r'badge.*cyan',
+    r'Spinner.*cyan',
+    r'default:\s*[\'"]kodo-cyan',
+    # Semantic indicators (PRESERVE)
+    r'PasswordStrengthIndicator',
+    r'isPrivate.*\?.*kodo-cyan',
+    r'isPublic.*\?.*kodo-cyan',
+    # Functional links (PRESERVE)
+    r'hover:underline',
+    r'<a\s+.*kodo-cyan',
+    r'href=',
+    # Progress bars and functional visualizations (PRESERVE)
+    r'style=.*width.*kodo-cyan',
+    r'progress',
+    # Button variants (PRESERVE)
+    r'variant=.*primary',
+    r'variant=.*default',
+    # Test files (PRESERVE)
+    r'\.test\.',
+    r'\.spec\.',
+]
+
+# Files/directories to skip
+SKIP_PATTERNS = [
+    'node_modules',
+    '.git',
+    '.build',
+    'dist',
+    'coverage',
+    'test-reports',
+    'EXHAUSTIVE_TODO_LIST.md',
+    'HOVER_EFFECTS_AUDIT.md',
+    'COLOR_USAGE.md',
+    'COMPONENT_USAGE.md',
+]
+
+# Replacement mappings
+REPLACEMENTS = {
+    'bg-kodo-cyan/10': 'bg-kodo-steel/10',
+    'bg-kodo-cyan/20': 'bg-kodo-steel/20',
+    'border-kodo-cyan/30': 'border-kodo-steel/30',
+    'border-kodo-cyan/20': 'border-kodo-steel/20',
+    'border-kodo-cyan': 'border-kodo-steel',
+    'text-kodo-cyan': 'text-kodo-steel',
+    'text-kodo-cyan-dim': 'text-kodo-steel',
+    'border-t-kodo-cyan': 'border-t-kodo-steel',
+    'ring-kodo-cyan': 'ring-kodo-steel',
+    'shadow-kodo-cyan': 'shadow-kodo-steel',
+}
+
+def should_preserve(line: str, file_path: str, context_lines: List[str] = None) -> bool:
+    """Check if this line should be preserved (functional/active state)"""
+    # Skip test and documentation files
+    if any(pattern in file_path for pattern in SKIP_PATTERNS):
+        return True
+    
+    # Check preserve patterns in current line
+    for pattern in PRESERVE_PATTERNS:
+        if re.search(pattern, line, re.IGNORECASE):
+            return True
+    
+    # Check context (previous and next lines) for conditional logic
+    if context_lines:
+        context = ' '.join(context_lines)
+        # If cyan appears in a ternary or conditional, preserve it
+        if re.search(r'\?.*kodo-cyan|kodo-cyan.*\?', context, re.IGNORECASE):
+            return True
+        # If it's part of a variant/color prop, preserve it
+        if re.search(r'(variant|color|severity).*:.*cyan', context, re.IGNORECASE):
+            return True
+    
+    # Check if line contains conditional logic with cyan
+    if re.search(r'\?.*kodo-cyan|kodo-cyan.*\?', line, re.IGNORECASE):
+        return True
+    
+    # Check if it's a design system prop
+    if re.search(r'(variant|color|severity)\s*[:=]\s*[\'"]?(cyan|info)', line, re.IGNORECASE):
+        return True
+    
+    return False
+
+def find_cyan_instances(file_path: Path) -> List[Tuple[int, str, str]]:
+    """Find all kodo-cyan instances in a file"""
+    instances = []
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            lines = f.readlines()
+            for line_num, line in enumerate(lines, 1):
+                for pattern in CYAN_PATTERNS:
+                    if re.search(pattern, line):
+                        instances.append((line_num, line, pattern))
+                        break
+    except Exception as e:
+        print(f"Error reading {file_path}: {e}", file=sys.stderr)
+    return instances
+
+def replace_decorative_cyan(file_path: Path, dry_run: bool = False) -> Tuple[int, int]:
+    """Replace decorative cyan instances in a file"""
+    replaced = 0
+    preserved = 0
+    
+    try:
+        with open(file_path, 'r', encoding='utf-8') as f:
+            content = f.read()
+            original_content = content
+        
+        lines = content.split('\n')
+        new_lines = []
+        
+        for line_num, line in enumerate(lines, 1):
+            original_line = line
+            
+            # Get context (previous 2 and next 2 lines)
+            context_start = max(0, line_num - 3)
+            context_end = min(len(lines), line_num + 2)
+            context_lines = lines[context_start:context_end]
+            
+            # Check if should preserve
+            if should_preserve(line, str(file_path), context_lines):
+                # Count preserved instances
+                for pattern in CYAN_PATTERNS:
+                    if re.search(pattern, line, re.IGNORECASE):
+                        preserved += 1
+                        break
+                new_lines.append(line)
+                continue
+            
+            # Replace decorative instances
+            line_replaced = False
+            for old, new in REPLACEMENTS.items():
+                if old in line:
+                    # Double-check we shouldn't preserve
+                    if not should_preserve(line, str(file_path), context_lines):
+                        line = line.replace(old, new)
+                        if not line_replaced:
+                            replaced += 1
+                            line_replaced = True
+            
+            new_lines.append(line)
+        
+        new_content = '\n'.join(new_lines)
+        
+        if not dry_run and new_content != original_content:
+            with open(file_path, 'w', encoding='utf-8') as f:
+                f.write(new_content)
+        
+        return replaced, preserved
+    
+    except Exception as e:
+        print(f"Error processing {file_path}: {e}", file=sys.stderr)
+        return 0, 0
+
+def main():
+    """Main function"""
+    import argparse
+    
+    parser = argparse.ArgumentParser(description='Replace decorative kodo-cyan with kodo-steel')
+    parser.add_argument('--dry-run', action='store_true', help='Show what would be changed without making changes')
+    parser.add_argument('--path', default='apps/web/src', help='Path to search (default: apps/web/src)')
+    args = parser.parse_args()
+    
+    base_path = Path(args.path)
+    if not base_path.exists():
+        print(f"Error: Path {base_path} does not exist", file=sys.stderr)
+        sys.exit(1)
+    
+    # Find all TypeScript/TSX files
+    tsx_files = []
+    for ext in ['*.tsx', '*.ts']:
+        tsx_files.extend(base_path.rglob(ext))
+    
+    # Filter out skipped files
+    files_to_process = []
+    for file_path in tsx_files:
+        if not any(pattern in str(file_path) for pattern in SKIP_PATTERNS):
+            files_to_process.append(file_path)
+    
+    print(f"Found {len(files_to_process)} files to process")
+    if args.dry_run:
+        print("DRY RUN MODE - No files will be modified\n")
+    
+    total_replaced = 0
+    total_preserved = 0
+    files_modified = []
+    
+    for file_path in sorted(files_to_process):
+        replaced, preserved = replace_decorative_cyan(file_path, dry_run=args.dry_run)
+        if replaced > 0:
+            total_replaced += replaced
+            total_preserved += preserved
+            files_modified.append((file_path, replaced, preserved))
+            status = "[DRY RUN] Would modify" if args.dry_run else "Modified"
+            print(f"{status}: {file_path} ({replaced} replaced, {preserved} preserved)")
+    
+    print(f"\n{'='*60}")
+    print(f"Total files {'would be ' if args.dry_run else ''}modified: {len(files_modified)}")
+    print(f"Total instances replaced: {total_replaced}")
+    print(f"Total instances preserved: {total_preserved}")
+    print(f"{'='*60}")
+    
+    if args.dry_run and len(files_modified) > 0:
+        print("\nRun without --dry-run to apply changes")
+
+if __name__ == '__main__':
+    main()