diff --git a/apps/web/src/components/ui/FocusTrap.stories.tsx b/apps/web/src/components/ui/FocusTrap.stories.tsx
index b36f5e04a..c92f91244 100644
--- a/apps/web/src/components/ui/FocusTrap.stories.tsx
+++ b/apps/web/src/components/ui/FocusTrap.stories.tsx
@@ -26,7 +26,7 @@ export const Interactive: Story = {
                     {active ? 'Disable Focus Trap' : 'Enable Focus Trap'}
                 </Button>
 
-                <div className={`p-6 border rounded-lg transition-colors ${active ? 'border-kodo-cyan bg-card' : 'border-kodo-steel'}`}>
+                <div className={`p-6 border rounded-lg transition-colors ${active ? 'border-primary bg-card' : 'border-border'}`}>
                     <h3 className="mb-4 font-bold">{active ? 'Focus Trapped Here' : 'Normal Navigation'}</h3>
 
                     <FocusTrap {...args} active={active} onEscape={() => setActive(false)}>
@@ -41,13 +41,13 @@ export const Interactive: Story = {
                     </FocusTrap>
 
                     {active && (
-                        <p className="mt-4 text-sm text-kodo-content-dim">
+                        <p className="mt-4 text-sm text-muted-foreground">
                             Try tabbing through inputs. Focus should stay within this box. Press Escape to exit.
                         </p>
                     )}
                 </div>
 
-                <div className="p-4 border border-dashed border-kodo-steel opacity-50">
+                <div className="p-4 border border-dashed border-border opacity-50">
                     <p>Elements outside trap (cannot reach freely when active)</p>
                     <Button variant="ghost" className="mt-2">Outside Button</Button>
                 </div>
diff --git a/apps/web/src/components/views/profile-view/ProfileViewOverview.tsx b/apps/web/src/components/views/profile-view/ProfileViewOverview.tsx
index ce27e9c84..1a0c94815 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewOverview.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewOverview.tsx
@@ -64,7 +64,7 @@ export function ProfileViewOverview({
           </div>
         </div>
       ) : (
-        <div className="p-8 text-center text-kodo-content-dim bg-kodo-graphite rounded-2xl border border-kodo-steel border-dashed">
+        <div className="p-8 text-center text-muted-foreground bg-muted rounded-2xl border border-border border-dashed">
           No tracks available.
         </div>
       )}
@@ -84,7 +84,7 @@ export function ProfileViewOverview({
                 className="flex items-center gap-4 p-2 hover:bg-white/5 rounded transition-colors cursor-pointer group"
                 onClick={() => playTrack(track)}
               >
-                <div className="text-kodo-content-dim w-4 text-center font-mono text-xs">
+                <div className="text-muted-foreground w-4 text-center font-mono text-xs">
                   {i + 1}
                 </div>
                 <div className="w-10 h-10 rounded overflow-hidden">
diff --git a/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx b/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
index 4904fb463..a51c58f8b 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewSidebar.tsx
@@ -38,8 +38,8 @@ export function ProfileViewSidebar({ profile }: ProfileViewSidebarProps) {
             </div>
           )}
           {profile.socials?.instagram && (
-            <div className="flex items-center gap-4 text-sm text-kodo-content-dim hover:text-white cursor-pointer transition-colors">
-              <Instagram className="w-4 h-4 text-kodo-steel" />
+            <div className="flex items-center gap-4 text-sm text-muted-foreground hover:text-foreground cursor-pointer transition-colors duration-[var(--duration-normal)]">
+              <Instagram className="w-4 h-4 text-muted-foreground" />
               <span>{profile.socials.instagram}</span>
             </div>
           )}
diff --git a/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx b/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
index 06402459a..51481f8c9 100644
--- a/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
+++ b/apps/web/src/components/views/profile-view/ProfileViewTrackCard.tsx
@@ -33,7 +33,7 @@ export function ProfileViewTrackCard({ track, mode }: ProfileViewTrackCardProps)
           <h4 className="font-bold truncate w-full">{track.title}</h4>
         </div>
         {track.isPremium && (
-          <div className="absolute top-2 right-2 bg-kodo-gold text-black text-xs font-bold px-2 py-0.5 rounded shadow-lg">
+          <div className="absolute top-2 right-2 bg-warning text-warning-foreground text-xs font-bold px-2 py-0.5 rounded-lg shadow-lg">
             PRO
           </div>
         )}
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.stories.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.stories.tsx
index 949255d85..7df774570 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.stories.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof FileTableRow> = {
     (Story) => (
       <div className="max-w-layout-content bg-background p-4">
         <table className="w-full">
-          <thead className="text-xs text-kodo-content-dim uppercase">
+          <thead className="text-xs text-muted-foreground uppercase">
             <tr>
               <th className="p-4 w-10" />
               <th className="p-4">Name</th>
@@ -20,7 +20,7 @@ const meta: Meta<typeof FileTableRow> = {
               <th className="p-4 text-right">Actions</th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-kodo-steel/30">
+          <tbody className="divide-y divide-border">
             <Story />
           </tbody>
         </table>