diff --git a/apps/web/src/components/admin/modals/BanUserModal.tsx b/apps/web/src/components/admin/modals/BanUserModal.tsx
index 63efd7223..6b53f1657 100644
--- a/apps/web/src/components/admin/modals/BanUserModal.tsx
+++ b/apps/web/src/components/admin/modals/BanUserModal.tsx
@@ -24,8 +24,8 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
         className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
         onClick={onClose}
       ></div>
-      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
-        <div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
+      <div className="relative w-full max-w-md bg-kodo-graphite border border-destructive rounded-xl shadow-2xl animate-scaleIn overflow-hidden">
+        <div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
           <h3 className="font-bold text-destructive flex items-center gap-2">
             <ShieldBan className="w-5 h-5 fill-current" /> Suspend User
           </h3>
@@ -46,7 +46,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               Reason
             </label>
             <select
-              className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
+              className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
               value={reason}
               onChange={(e) => setReason(e.target.value)}
             >
@@ -64,7 +64,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               Details (Internal Note)
             </label>
             <textarea
-              className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm resize-none h-24"
+              className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm resize-none h-24"
               placeholder="Provide context for this ban..."
               value={details}
               onChange={(e) => setDetails(e.target.value)}
@@ -89,7 +89,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               </span>
               <div
                 onClick={() => setIsPermanent(!isPermanent)}
-                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-kodo-red' : 'bg-muted'}`}
+                className={`w-10 h-5 rounded-full relative cursor-pointer transition-colors ${isPermanent ? 'bg-destructive' : 'bg-muted'}`}
               >
                 <div
                   className={`absolute top-1 w-3 h-3 bg-white rounded-full transition-all ${isPermanent ? 'left-6' : 'left-1'}`}
@@ -111,7 +111,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
               <input
                 type="number"
                 min="1"
-                className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-kodo-red outline-none text-sm"
+                className="w-full bg-kodo-void border border-border rounded p-2 text-white focus:border-destructive outline-none text-sm"
                 value={duration}
                 onChange={(e) => setDuration(e.target.value)}
               />
@@ -125,7 +125,7 @@ export const BanUserModal: React.FC<BanUserModalProps> = ({
           </Button>
           <Button
             variant="primary"
-            className="bg-kodo-red hover:bg-kodo-red border-kodo-red text-white"
+            className="bg-destructive hover:bg-destructive border-destructive text-white"
             onClick={() =>
               onConfirm(
                 reason,
diff --git a/apps/web/src/components/developer/APIPlaygroundView.tsx b/apps/web/src/components/developer/APIPlaygroundView.tsx
index 94dfb7212..1187e6738 100644
--- a/apps/web/src/components/developer/APIPlaygroundView.tsx
+++ b/apps/web/src/components/developer/APIPlaygroundView.tsx
@@ -119,7 +119,7 @@ export const APIPlaygroundView: React.FC = () => {
               <h3 className="font-bold text-white">Response</h3>
               {response && (
                 <div className="flex gap-2">
-                  <span className="text-xs font-bold text-success bg-kodo-lime/10 px-2 py-1 rounded">
+                  <span className="text-xs font-bold text-success bg-success/10 px-2 py-1 rounded">
                     200 OK
                   </span>
                   <span className="text-xs font-bold text-muted-foreground bg-white/10 px-2 py-1 rounded">
diff --git a/apps/web/src/components/education/CourseCard.tsx b/apps/web/src/components/education/CourseCard.tsx
index 0ce35e564..41ef75c9c 100644
--- a/apps/web/src/components/education/CourseCard.tsx
+++ b/apps/web/src/components/education/CourseCard.tsx
@@ -47,10 +47,10 @@ export const CourseCard: React.FC<CourseCardProps> = ({
           <span
             className={`text-xs px-2 py-0.5 rounded uppercase font-bold ${
               course.level === 'Advanced'
-                ? 'bg-kodo-red/20 text-destructive'
+                ? 'bg-destructive/20 text-destructive'
                 : course.level === 'Intermediate'
                   ? 'bg-kodo-gold/20 text-kodo-gold'
-                  : 'bg-kodo-lime/20 text-success'
+                  : 'bg-success/20 text-success'
             }`}
           >
             {course.level}
diff --git a/apps/web/src/components/education/modals/QuizModal.tsx b/apps/web/src/components/education/modals/QuizModal.tsx
index deaca7395..a1c68c2de 100644
--- a/apps/web/src/components/education/modals/QuizModal.tsx
+++ b/apps/web/src/components/education/modals/QuizModal.tsx
@@ -63,11 +63,11 @@ export const QuizModal: React.FC<QuizModalProps> = ({
         <div className="relative w-full max-w-md bg-kodo-graphite border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden p-8 text-center">
           <div className="mb-6 flex justify-center">
             {passed ? (
-              <div className="w-20 h-20 bg-kodo-lime/20 rounded-full flex items-center justify-center text-success border-2 border-kodo-lime animate-pulse">
+              <div className="w-20 h-20 bg-success/20 rounded-full flex items-center justify-center text-success border-2 border-success animate-pulse">
                 <CheckCircle className="w-10 h-10" />
               </div>
             ) : (
-              <div className="w-20 h-20 bg-kodo-red/20 rounded-full flex items-center justify-center text-destructive border-2 border-kodo-red">
+              <div className="w-20 h-20 bg-destructive/20 rounded-full flex items-center justify-center text-destructive border-2 border-destructive">
                 <AlertCircle className="w-10 h-10" />
               </div>
             )}
diff --git a/apps/web/src/components/feedback/Alert.tsx b/apps/web/src/components/feedback/Alert.tsx
index 6283b9aae..bcd179eef 100644
--- a/apps/web/src/components/feedback/Alert.tsx
+++ b/apps/web/src/components/feedback/Alert.tsx
@@ -21,11 +21,11 @@ const ALERT_ICONS = {
 const ALERT_STYLES = {
   info: 'bg-muted/10 border-border/30 text-kodo-text-main dark:bg-muted/20 dark:border-border/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-success',
+    'bg-success/10 border-success/30 text-kodo-text-main dark:bg-success/20 dark:border-success/40 dark:text-success',
   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',
   error:
-    'bg-kodo-red/10 border-kodo-red/30 text-kodo-text-main dark:bg-kodo-red/20 dark:border-kodo-red/40 dark:text-destructive',
+    'bg-destructive/10 border-destructive/30 text-kodo-text-main dark:bg-destructive/20 dark:border-destructive/40 dark:text-destructive',
 };
 
 const ICON_STYLES = {
diff --git a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
index 0d0a50b9f..9760c196d 100644
--- a/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
+++ b/apps/web/src/components/forms/PasswordStrengthIndicator.tsx
@@ -38,11 +38,11 @@ export function PasswordStrengthIndicator({
 
   const strengthLabels = ['Very Weak', 'Weak', 'Fair', 'Good', 'Strong'];
   const strengthColors = [
-    'bg-kodo-red',
+    'bg-destructive',
     'bg-kodo-orange',
     'bg-kodo-gold',
     'bg-kodo-cyan',
-    'bg-kodo-lime',
+    'bg-success',
   ];
   const strengthTextColors = [
     'text-destructive',
diff --git a/apps/web/src/components/forms/RegisterForm.tsx b/apps/web/src/components/forms/RegisterForm.tsx
index 0acb9c8d9..b4a41c2b8 100644
--- a/apps/web/src/components/forms/RegisterForm.tsx
+++ b/apps/web/src/components/forms/RegisterForm.tsx
@@ -132,8 +132,8 @@ export function RegisterForm({
               emailValue &&
               emailValidation &&
               (emailValidation.valid
-                ? 'border-kodo-lime focus-visible:ring-kodo-lime'
-                : 'border-kodo-red focus-visible:ring-red-500'),
+                ? 'border-success focus-visible:ring-kodo-lime'
+                : 'border-destructive focus-visible:ring-red-500'),
             )}
           />
           {emailValue && emailValidation && (
diff --git a/apps/web/src/components/inventory/EquipmentCard.tsx b/apps/web/src/components/inventory/EquipmentCard.tsx
index 04c693107..85b3be068 100644
--- a/apps/web/src/components/inventory/EquipmentCard.tsx
+++ b/apps/web/src/components/inventory/EquipmentCard.tsx
@@ -14,7 +14,7 @@ export const EquipmentCard: React.FC<EquipmentCardProps> = ({
   onClick,
 }) => {
   const statusColor = {
-    Active: 'text-success bg-kodo-lime/10',
+    Active: 'text-success bg-success/10',
     Maintenance: 'text-kodo-orange bg-kodo-orange/10',
     Sold: 'text-muted-foreground bg-muted/10',
     Wishlist: 'text-kodo-magenta bg-kodo-magenta/10',
diff --git a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
index d1a69a7d8..dfa627499 100644
--- a/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/CreatePlaylistModal.tsx
@@ -110,7 +110,7 @@ export const CreatePlaylistModal: React.FC<CreatePlaylistModalProps> = ({
                   </div>
                 </div>
                 <div
-                  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-kodo-lime' : 'bg-muted'}`}
+                  className={`w-8 h-4 rounded-full relative transition-colors ${isCollaborative ? 'bg-success' : 'bg-muted'}`}
                 >
                   <div
                     className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${isCollaborative ? 'left-4.5' : 'left-0.5'}`}
diff --git a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
index 5bff8f831..27c3a5b23 100644
--- a/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
+++ b/apps/web/src/components/library/playlists/EditPlaylistModal.tsx
@@ -45,7 +45,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
           className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
           onClick={() => setShowDeleteConfirm(false)}
         ></div>
-        <div className="relative w-full max-w-sm bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
+        <div className="relative w-full max-w-sm bg-kodo-graphite border border-destructive rounded-xl shadow-2xl animate-scaleIn p-6 text-center">
           <h3 className="text-xl font-bold text-white mb-2">
             Delete "{playlist.title}"?
           </h3>
@@ -58,7 +58,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
             </Button>
             <Button
               variant="primary"
-              className="bg-kodo-red hover:bg-kodo-red border-kodo-red"
+              className="bg-destructive hover:bg-destructive border-destructive"
               onClick={handleDelete}
             >
               Delete
@@ -142,7 +142,7 @@ export const EditPlaylistModal: React.FC<EditPlaylistModalProps> = ({
         <div className="p-4 border-t border-border bg-kodo-ink flex justify-between items-center">
           <Button
             variant="ghost"
-            className="text-destructive hover:bg-kodo-red/10"
+            className="text-destructive hover:bg-destructive/10"
             onClick={() => setShowDeleteConfirm(true)}
           >
             Delete Playlist
diff --git a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
index 6d12b1b70..1e6d68bf5 100644
--- a/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
+++ b/apps/web/src/components/library/playlists/PlaylistDetailView.tsx
@@ -113,7 +113,7 @@ export const PlaylistDetailView: React.FC<PlaylistDetailViewProps> = ({
             <span>
               {playlist.is_public ? 'Public Playlist' : 'Private Playlist'}
             </span>
-            {/* {playlist.isCollaborative && <span className="bg-kodo-lime/20 text-success px-2 py-0.5 rounded">Collaborative</span>} */}
+            {/* {playlist.isCollaborative && <span className="bg-success/20 text-success px-2 py-0.5 rounded">Collaborative</span>} */}
           </div>
           <h1 className="text-4xl md:text-6xl font-display font-bold text-white mb-4 leading-tight">
             {playlist.title}
diff --git a/apps/web/src/components/library/playlists/QueueView.tsx b/apps/web/src/components/library/playlists/QueueView.tsx
index 3c0b9d428..560e92c9c 100644
--- a/apps/web/src/components/library/playlists/QueueView.tsx
+++ b/apps/web/src/components/library/playlists/QueueView.tsx
@@ -75,7 +75,7 @@ export const QueueView: React.FC = () => {
           </Button>
           <Button
             variant="ghost"
-            className="text-destructive hover:bg-kodo-red/10"
+            className="text-destructive hover:bg-destructive/10"
             onClick={clearQueue}
             icon={<Trash2 className="w-4 h-4" />}
           >
@@ -146,7 +146,7 @@ export const QueueView: React.FC = () => {
               Autoplay
             </span>
             <div
-              className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-kodo-lime' : 'bg-muted'}`}
+              className={`w-8 h-4 rounded-full relative transition-colors ${autoplay ? 'bg-success' : 'bg-muted'}`}
             >
               <div
                 className={`absolute top-0.5 w-3 h-3 bg-white rounded-full transition-all ${autoplay ? 'left-4.5' : 'left-0.5'}`}
diff --git a/apps/web/src/components/live/LiveStreamDetailView.tsx b/apps/web/src/components/live/LiveStreamDetailView.tsx
index 7e9ccf848..966e6119e 100644
--- a/apps/web/src/components/live/LiveStreamDetailView.tsx
+++ b/apps/web/src/components/live/LiveStreamDetailView.tsx
@@ -111,7 +111,7 @@ export const LiveStreamDetailView: React.FC<LiveStreamDetailViewProps> = ({
           <div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent pt-24">
             <div className="flex items-end justify-between">
               <div className="flex items-center gap-4">
-                <div className="w-14 h-14 rounded-full border-2 border-kodo-red p-0.5">
+                <div className="w-14 h-14 rounded-full border-2 border-destructive p-0.5">
                   <img
                     src="https://picsum.photos/id/100/100"
                     className="w-full h-full rounded-full object-cover"
diff --git a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
index b52af991d..e025fc731 100644
--- a/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
+++ b/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx
@@ -56,7 +56,7 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
                     key={i}
                     className="flex items-start gap-4 text-sm text-kodo-text-main"
                   >
-                    <div className="mt-0.5 bg-kodo-lime/10 p-0.5 rounded-full">
+                    <div className="mt-0.5 bg-success/10 p-0.5 rounded-full">
                       <Check className="w-3 h-3 text-success" />
                     </div>
                     {feat}
@@ -71,13 +71,13 @@ export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
               </h4>
               <ul className="space-y-2">
                 <li className="flex items-start gap-4 text-sm text-muted-foreground">
-                  <div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
+                  <div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
                     <XCircle className="w-3 h-3 text-destructive" />
                   </div>
                   Do not resell or redistribute as a sample pack.
                 </li>
                 <li className="flex items-start gap-4 text-sm text-muted-foreground">
-                  <div className="mt-0.5 bg-kodo-red/10 p-0.5 rounded-full">
+                  <div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
                     <XCircle className="w-3 h-3 text-destructive" />
                   </div>
                   Content ID registration is prohibited.
diff --git a/apps/web/src/components/notifications/NotificationItem.tsx b/apps/web/src/components/notifications/NotificationItem.tsx
index 9d57c1fbf..a21f6dcbe 100644
--- a/apps/web/src/components/notifications/NotificationItem.tsx
+++ b/apps/web/src/components/notifications/NotificationItem.tsx
@@ -43,9 +43,9 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({
     if (notification.read) return 'bg-transparent';
     switch (notification.type) {
       case 'sale':
-        return 'bg-kodo-lime/5 border-l-2 border-l-kodo-lime';
+        return 'bg-success/5 border-l-2 border-l-kodo-lime';
       case 'security':
-        return 'bg-kodo-red/5 border-l-2 border-l-kodo-red';
+        return 'bg-destructive/5 border-l-2 border-l-kodo-red';
       default:
         return 'bg-kodo-cyan/5 border-l-2 border-l-kodo-cyan';
     }
diff --git a/apps/web/src/components/seller/SellerDashboardView.tsx b/apps/web/src/components/seller/SellerDashboardView.tsx
index a4aab142f..dbf21101f 100644
--- a/apps/web/src/components/seller/SellerDashboardView.tsx
+++ b/apps/web/src/components/seller/SellerDashboardView.tsx
@@ -213,8 +213,8 @@ export const SellerDashboardView: React.FC<SellerDashboardProps> = ({
               <div className="absolute left-2.5 top-2 bottom-2 w-px bg-muted"></div>
               {sales.map((sale) => (
                 <div key={sale.id} className="relative pl-8">
-                  <div className="absolute left-0 top-1.5 w-5 h-5 bg-kodo-graphite border border-kodo-lime rounded-full flex items-center justify-center">
-                    <div className="w-2 h-2 bg-kodo-lime rounded-full"></div>
+                  <div className="absolute left-0 top-1.5 w-5 h-5 bg-kodo-graphite border border-success rounded-full flex items-center justify-center">
+                    <div className="w-2 h-2 bg-success rounded-full"></div>
                   </div>
                   <div className="text-sm text-white font-bold">
                     {sale.product}
diff --git a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
index d96c14add..a4cb6e3e0 100644
--- a/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountConfirmModal.tsx
@@ -35,8 +35,8 @@ export const DeleteAccountConfirmModal: React.FC<
         className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
         onClick={loading ? undefined : onClose}
       ></div>
-      <div className="relative w-full max-w-md bg-kodo-graphite border border-kodo-red rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
-        <div className="p-4 border-b border-kodo-red/30 bg-kodo-red/10 flex justify-between items-center">
+      <div className="relative w-full max-w-md bg-kodo-graphite border border-destructive rounded-xl shadow-2xl overflow-hidden animate-scaleIn">
+        <div className="p-4 border-b border-destructive/30 bg-destructive/10 flex justify-between items-center">
           <h3 className="font-bold text-destructive flex items-center gap-2">
             <AlertTriangle className="w-5 h-5 fill-current" /> PERMANENT
             DELETION
@@ -84,7 +84,7 @@ export const DeleteAccountConfirmModal: React.FC<
           </Button>
           <Button
             variant="primary"
-            className="bg-kodo-red hover:bg-kodo-red border-kodo-red text-white"
+            className="bg-destructive hover:bg-destructive border-destructive text-white"
             onClick={handleDelete}
             disabled={loading}
           >
diff --git a/apps/web/src/components/settings/account/DeleteAccountView.tsx b/apps/web/src/components/settings/account/DeleteAccountView.tsx
index 2c50fbe40..ec439001c 100644
--- a/apps/web/src/components/settings/account/DeleteAccountView.tsx
+++ b/apps/web/src/components/settings/account/DeleteAccountView.tsx
@@ -49,12 +49,12 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
 
       <Card
         variant="default"
-        className="border-kodo-red/30 relative overflow-hidden"
+        className="border-destructive/30 relative overflow-hidden"
       >
-        <div className="absolute top-0 left-0 w-1 h-full bg-kodo-red"></div>
+        <div className="absolute top-0 left-0 w-1 h-full bg-destructive"></div>
 
         <div className="flex gap-4 mb-6">
-          <div className="w-12 h-12 bg-kodo-red/10 rounded-full flex items-center justify-center text-destructive flex-shrink-0">
+          <div className="w-12 h-12 bg-destructive/10 rounded-full flex items-center justify-center text-destructive flex-shrink-0">
             <AlertTriangle className="w-6 h-6" />
           </div>
           <div>
@@ -140,13 +140,13 @@ export const DeleteAccountView: React.FC<DeleteAccountViewProps> = ({
               placeholder="DELETE"
               value={confirmText}
               onChange={(e) => setConfirmText(e.target.value)}
-              className="border-kodo-red/50 focus:border-kodo-red focus:ring-kodo-red"
+              className="border-destructive/50 focus:border-destructive focus:ring-kodo-red"
             />
           </div>
 
           <Button
             variant="primary"
-            className="w-full bg-kodo-red hover:bg-kodo-red text-white border-kodo-red disabled:bg-kodo-graphite disabled:border-border disabled:text-muted-foreground"
+            className="w-full bg-destructive hover:bg-destructive text-white border-destructive disabled:bg-kodo-graphite disabled:border-border disabled:text-muted-foreground"
             disabled={!isFormValid}
             onClick={() => setShowFinalModal(true)}
             icon={<Trash2 className="w-4 h-4" />}
diff --git a/apps/web/src/components/settings/backups/BackupsView.tsx b/apps/web/src/components/settings/backups/BackupsView.tsx
index 851f90d88..400a5d3c5 100644
--- a/apps/web/src/components/settings/backups/BackupsView.tsx
+++ b/apps/web/src/components/settings/backups/BackupsView.tsx
@@ -99,7 +99,7 @@ export const BackupsView: React.FC = () => {
                 >
                   <div className="flex items-center gap-4 mb-2 md:mb-0 w-full md:w-auto">
                     <div
-                      className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-kodo-lime/10 text-success' : 'bg-kodo-red/10 text-destructive'}`}
+                      className={`p-2 rounded-full ${backup.status === 'Success' ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive'}`}
                     >
                       {backup.status === 'Success' ? (
                         <CheckCircle className="w-5 h-5" />
diff --git a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
index 19ad60070..5896bc231 100644
--- a/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
+++ b/apps/web/src/components/settings/cloud/CloudIntegrationView.tsx
@@ -44,7 +44,7 @@ export const CloudIntegrationView: React.FC = () => {
             </div>
           </div>
           {isConnected && (
-            <div className="flex items-center gap-2 text-success bg-kodo-lime/10 px-4 py-2 rounded-lg border border-kodo-lime/20">
+            <div className="flex items-center gap-2 text-success bg-success/10 px-4 py-2 rounded-lg border border-success/20">
               <CheckCircle className="w-5 h-5" /> Connected
             </div>
           )}
diff --git a/apps/web/src/components/settings/integrations/IntegrationsView.tsx b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
index 3ef4c1fa8..9b83399dc 100644
--- a/apps/web/src/components/settings/integrations/IntegrationsView.tsx
+++ b/apps/web/src/components/settings/integrations/IntegrationsView.tsx
@@ -171,7 +171,7 @@ export const IntegrationsView: React.FC = () => {
                   </Button>
                   <Button
                     variant="ghost"
-                    className="flex-1 text-destructive hover:bg-kodo-red/10 border border-kodo-red/30"
+                    className="flex-1 text-destructive hover:bg-destructive/10 border border-destructive/30"
                     onClick={() => toggleConnection(integration.id)}
                   >
                     Disconnect
diff --git a/apps/web/src/components/settings/security/SessionManagement.tsx b/apps/web/src/components/settings/security/SessionManagement.tsx
index 97c0df0a8..099281102 100644
--- a/apps/web/src/components/settings/security/SessionManagement.tsx
+++ b/apps/web/src/components/settings/security/SessionManagement.tsx
@@ -99,7 +99,7 @@ export const SessionManagement: React.FC = () => {
                       {session.ip_address}
                     </h4>
                     {session.is_current && (
-                      <span className="bg-kodo-lime/10 text-success text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
+                      <span className="bg-success/10 text-success text-xs px-2 py-0.5 rounded border border-success/30 font-bold">
                         CURRENT DEVICE
                       </span>
                     )}
diff --git a/apps/web/src/components/social/SharePostModal.tsx b/apps/web/src/components/social/SharePostModal.tsx
index 1d33de22f..49da128ef 100644
--- a/apps/web/src/components/social/SharePostModal.tsx
+++ b/apps/web/src/components/social/SharePostModal.tsx
@@ -103,7 +103,7 @@ export const SharePostModal: React.FC<SharePostModalProps> = ({
               onClose();
             }}
           >
-            <div className="w-10 h-10 rounded-full bg-kodo-lime/10 flex items-center justify-center text-success group-hover:bg-kodo-lime/20">
+            <div className="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success group-hover:bg-success/20">
               <Repeat className="w-5 h-5" />
             </div>
             <div className="text-left">
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index fc2cb1697..b0bf72125 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -110,9 +110,9 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
 
     const styles = {
       info: 'bg-muted/10 border-border/30 text-kodo-steel',
-      success: 'bg-kodo-lime/10 border-kodo-lime/30 text-success',
+      success: 'bg-success/10 border-success/30 text-success',
       warning: 'bg-kodo-gold/10 border-kodo-gold/30 text-kodo-gold',
-      error: 'bg-kodo-red/10 border-kodo-red/30 text-destructive',
+      error: 'bg-destructive/10 border-destructive/30 text-destructive',
     };
 
     const icons = {
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index 8345c6d4f..75f487671 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -132,7 +132,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
     const styles: Record<string, string> = {
       cyan: 'bg-muted/10 text-kodo-steel border-border/30',
       magenta: 'bg-kodo-magenta/10 text-kodo-magenta border-kodo-magenta/30',
-      lime: 'bg-kodo-lime/10 text-success border-kodo-lime/30',
+      lime: 'bg-success/10 text-success border-success/30',
       gold: 'bg-kodo-gold/10 text-kodo-gold border-kodo-gold/30',
       terminal:
         'bg-kodo-terminal/10 text-kodo-terminal border-kodo-terminal/30 font-mono',