diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 6fe67fc..a470f6b 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -389,6 +389,24 @@
     box-shadow: var(--shadow-sm);
   }
 
+  .ui-card-soft {
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .ui-card-pad-md {
+    padding: 1.1rem;
+  }
+
+  .ui-card-interactive {
+    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
+  }
+
+  .ui-card-interactive:hover {
+    transform: translateY(-2px);
+    border-color: var(--color-border-hover);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
   .ui-card-glass {
     background: var(--ui-glass-bg);
     border-color: var(--ui-glass-border);
diff --git a/frontend/src/pages/delegations.astro b/frontend/src/pages/delegations.astro
index 995343e..f251130 100644
--- a/frontend/src/pages/delegations.astro
+++ b/frontend/src/pages/delegations.astro
@@ -270,20 +270,6 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
     gap: 1rem;
   }
 
-  .delegation-card, .delegate-card {
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid var(--color-border);
-    border-radius: 14px;
-    padding: 1.1rem;
-    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
-  }
-
-  .delegation-card:hover, .delegate-card:hover {
-    transform: translateY(-2px);
-    border-color: var(--color-border-hover);
-    background: rgba(255, 255, 255, 0.05);
-  }
-
   .delegation-card header {
     display: flex;
     justify-content: space-between;
@@ -657,7 +643,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
         const safeId = escapeHtml(d.id);
 
         return `
-          <div class="delegation-card">
+          <div class="delegation-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
             <header>
               <span class="delegate-name">→ ${safeName}</span>
               <span class="scope-badge">${scopeLabel}</span>
@@ -708,7 +694,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
         const createdAt = d.created_at ? new Date(d.created_at).toLocaleDateString() : '';
 
         return `
-          <div class="delegation-card">
+          <div class="delegation-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
             <header>
               <span class="delegate-name">← ${safeName}</span>
               <span class="scope-badge">${scopeLabel}</span>
@@ -747,7 +733,7 @@ import DelegationGraph from '../components/voting/DelegationGraph.astro';
         const votes = Number(d.total_votes_cast) || 0;
 
         return `
-          <div class="delegate-card">
+          <div class="delegate-card ui-card ui-card-soft ui-card-interactive ui-card-pad-md">
             <div class="delegate-info">
               <h3>${safeName}</h3>
               <p class="bio">${safeBio}</p>