diff --git a/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx b/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
index 8faaf2405..17a2b63d9 100644
--- a/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
+++ b/apps/web/src/components/views/checkout-view/CheckoutViewOrderSummary.tsx
@@ -31,10 +31,10 @@ export function CheckoutViewOrderSummary({
             className="flex justify-between items-start text-sm"
           >
             <div className="flex-1 pr-4">
-              <div className="text-kodo-text-main font-medium truncate">
+              <div className="text-foreground font-medium truncate">
                 {item.product.title}
               </div>
-              <div className="text-xs text-kodo-content-dim">
+              <div className="text-xs text-muted-foreground">
                 {item.selectedLicense?.name ?? 'Standard'} License
               </div>
             </div>
@@ -46,18 +46,18 @@ export function CheckoutViewOrderSummary({
         ))}
       </div>
 
-      <div className="border-t border-kodo-steel pt-4 space-y-2 mb-6">
-        <div className="flex justify-between text-sm text-kodo-content-dim">
+      <div className="border-t border-border pt-4 space-y-2 mb-6">
+        <div className="flex justify-between text-sm text-muted-foreground">
           <span>Subtotal</span>
           <span>${cartTotal.toFixed(2)}</span>
         </div>
-        <div className="flex justify-between text-sm text-kodo-content-dim">
+        <div className="flex justify-between text-sm text-muted-foreground">
           <span>Taxes</span>
           <span>${tax.toFixed(2)}</span>
         </div>
         <div className="flex justify-between items-end pt-2">
-          <span className="font-bold text-white">Total</span>
-          <span className="text-2xl font-mono font-bold text-kodo-steel">
+          <span className="font-bold text-foreground">Total</span>
+          <span className="text-2xl font-mono font-bold text-muted-foreground">
             ${(cartTotal + tax).toFixed(2)}
           </span>
         </div>
diff --git a/apps/web/src/components/views/live-view/LiveViewChat.tsx b/apps/web/src/components/views/live-view/LiveViewChat.tsx
index ab7e60114..b118b3381 100644
--- a/apps/web/src/components/views/live-view/LiveViewChat.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewChat.tsx
@@ -39,7 +39,7 @@ export function LiveViewChat({
             >
               {msg.user}:
             </span>
-            <span className="text-kodo-text-main">{msg.text}</span>
+            <span className="text-foreground">{msg.text}</span>
           </div>
         ))}
         <div className="text-center py-2">
@@ -49,17 +49,17 @@ export function LiveViewChat({
         </div>
       </div>
 
-      <div className="p-4 bg-kodo-slate border-t border-kodo-steel">
+      <div className="p-4 bg-muted border-t border-border">
         <div className="flex gap-2">
           <div className="relative flex-1">
             <input
               value={msgInput}
               onChange={(e) => onMsgInputChange(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && onSend()}
-              className="w-full bg-kodo-ink border border-kodo-steel rounded px-4 py-2 text-sm text-white focus:border-kodo-steel outline-none"
+              className="w-full bg-background border border-border rounded-xl px-4 py-2 text-sm text-foreground focus:border-primary outline-none transition-colors duration-[var(--duration-normal)]"
               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:text-kodo-gold/80 transition-colors" />
+            <DollarSign className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-warning cursor-pointer hover:opacity-80 transition-opacity" />
           </div>
           <Button variant="primary" size="sm" className="px-4" onClick={onSend}>
             <Send className="w-4 h-4" />
diff --git a/apps/web/src/components/views/live-view/LiveViewRecommended.tsx b/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
index 6008183b8..ed095623f 100644
--- a/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
+++ b/apps/web/src/components/views/live-view/LiveViewRecommended.tsx
@@ -25,7 +25,7 @@ export function LiveViewRecommended({ onChannelClick }: LiveViewRecommendedProps
                 alt=""
                 className="w-full h-full object-cover"
               />
-              <div className="absolute bottom-2 left-2 bg-kodo-void/80 px-2 py-0.5 rounded text-xs text-white">
+              <div className="absolute bottom-2 left-2 bg-background/80 px-2 py-0.5 rounded text-xs text-foreground">
                 DJ Set
               </div>
             </div>
diff --git a/apps/web/src/components/views/marketplace-view/MarketplaceViewCategories.tsx b/apps/web/src/components/views/marketplace-view/MarketplaceViewCategories.tsx
index b441cf8a0..c29cb3c1f 100644
--- a/apps/web/src/components/views/marketplace-view/MarketplaceViewCategories.tsx
+++ b/apps/web/src/components/views/marketplace-view/MarketplaceViewCategories.tsx
@@ -29,7 +29,7 @@ export function MarketplaceViewCategories({
         >
           FILTERS
         </Button>
-        <div className="h-6 w-px bg-kodo-steel mx-2" />
+        <div className="h-6 w-px bg-border mx-2" />
         {CATEGORIES.map((cat) => (
           <button
             key={cat}
diff --git a/apps/web/src/components/views/purchases-view/PurchasesViewItem.tsx b/apps/web/src/components/views/purchases-view/PurchasesViewItem.tsx
index e8bbdad71..31e9a749a 100644
--- a/apps/web/src/components/views/purchases-view/PurchasesViewItem.tsx
+++ b/apps/web/src/components/views/purchases-view/PurchasesViewItem.tsx
@@ -39,8 +39,8 @@ export function PurchasesViewItem({
 
       <div className="flex-1 w-full text-center md:text-left">
         <h3 className="font-bold text-foreground text-lg mb-1 tracking-tight">{product.title}</h3>
-        <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 text-xs text-kodo-content-dim">
-          <span className="bg-kodo-ink px-2 py-1 rounded border border-kodo-steel text-kodo-steel">
+        <div className="flex flex-wrap items-center justify-center md:justify-start gap-4 text-xs text-muted-foreground">
+          <span className="bg-card px-2 py-1 rounded border border-border text-muted-foreground">
             {product.type ?? 'pack'}
           </span>
           <span>Order #{purchase.orderId}</span>
diff --git a/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx b/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
index bbc6e676b..654860a85 100644
--- a/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
+++ b/apps/web/src/components/views/social-view/SocialViewFeedItem.tsx
@@ -16,7 +16,7 @@ export function SocialViewFeedItem({ track, onPlay }: SocialViewFeedItemProps) {
       className="p-0 overflow-hidden mb-4 border-transparent hover:border-border"
     >
       <div className="p-4 flex items-center gap-4">
-        <div className="w-10 h-10 rounded-full bg-kodo-steel overflow-hidden">
+        <div className="w-10 h-10 rounded-full bg-muted overflow-hidden">
           <img
             src={track.coverUrl}
             alt=""
@@ -34,7 +34,7 @@ export function SocialViewFeedItem({ track, onPlay }: SocialViewFeedItemProps) {
 
       <div className="px-4 pb-4">
         <div
-          className="bg-kodo-ink p-4 rounded-xl flex items-center gap-4 border border-kodo-steel group cursor-pointer"
+          className="bg-card p-4 rounded-xl flex items-center gap-4 border border-border group cursor-pointer"
           onClick={() => onPlay(track)}
           onKeyDown={(e) => e.key === 'Enter' && onPlay(track)}
           role="button"