diff --git a/frontend/src/components/ui/DesignSystemStyles.astro b/frontend/src/components/ui/DesignSystemStyles.astro
index 5b98500..f5012bc 100644
--- a/frontend/src/components/ui/DesignSystemStyles.astro
+++ b/frontend/src/components/ui/DesignSystemStyles.astro
@@ -61,6 +61,22 @@
     --ui-glass-bg: rgba(24, 24, 27, 0.65);
     --ui-glass-border: rgba(255, 255, 255, 0.08);
     --ui-soft-highlight: rgba(129, 140, 248, 0.16);
+
+    --ui-space-1: 0.25rem;
+    --ui-space-2: 0.5rem;
+    --ui-space-3: 0.75rem;
+    --ui-space-4: 1rem;
+    --ui-space-5: 1.25rem;
+    --ui-space-6: 1.5rem;
+    --ui-space-8: 2rem;
+
+    --ui-font-size-xs: 0.75rem;
+    --ui-font-size-sm: 0.875rem;
+    --ui-font-size-md: 1rem;
+    --ui-font-size-lg: 1.125rem;
+    --ui-font-weight-medium: 500;
+    --ui-font-weight-semibold: 600;
+    --ui-font-weight-bold: 700;
   }
 
   * {
@@ -216,10 +232,27 @@
     gap: 0.5rem;
     padding: 0.625rem 1rem;
     border-radius: var(--radius-sm);
-    font-weight: 600;
-    font-size: 0.875rem;
+    font-weight: var(--ui-font-weight-semibold);
+    font-size: var(--ui-font-size-sm);
     line-height: 1;
     white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: transform var(--motion-fast) var(--easing-standard), background-color var(--motion-fast) var(--easing-standard), border-color var(--motion-fast) var(--easing-standard), box-shadow var(--motion-fast) var(--easing-standard), opacity var(--motion-fast) var(--easing-standard);
+  }
+
+  .ui-btn:active {
+    transform: translateY(1px);
+  }
+
+  :where(button.ui-btn):disabled,
+  :where(a.ui-btn)[aria-disabled='true'] {
+    opacity: 0.55;
+    cursor: not-allowed;
+    pointer-events: none;
+    transform: none;
+    box-shadow: none;
   }
 
   .ui-btn-primary {
@@ -227,20 +260,25 @@
     color: var(--color-on-primary);
   }
 
-  .ui-btn-primary:hover {
+  :where(.ui-btn-primary):not([aria-disabled='true']):not(:disabled):hover {
     background: var(--color-primary-hover);
     color: var(--color-on-primary);
     transform: translateY(-1px);
     box-shadow: 0 10px 30px rgba(99, 102, 241, 0.24);
   }
 
+  :where(.ui-btn-primary):not([aria-disabled='true']):not(:disabled):active {
+    transform: translateY(0);
+    box-shadow: var(--shadow-sm);
+  }
+
   .ui-btn-secondary {
     background: transparent;
     border-color: var(--color-border);
     color: var(--color-text);
   }
 
-  .ui-btn-secondary:hover {
+  :where(.ui-btn-secondary):not([aria-disabled='true']):not(:disabled):hover {
     border-color: var(--color-border-hover);
     background: rgba(255, 255, 255, 0.06);
     color: var(--color-text);
@@ -251,7 +289,7 @@
     color: var(--color-on-primary);
   }
 
-  .ui-btn-success:hover {
+  :where(.ui-btn-success):not([aria-disabled='true']):not(:disabled):hover {
     background: var(--color-success-hover);
     color: var(--color-on-primary);
     transform: translateY(-1px);
@@ -263,7 +301,7 @@
     color: var(--color-on-primary);
   }
 
-  .ui-btn-danger:hover {
+  :where(.ui-btn-danger):not([aria-disabled='true']):not(:disabled):hover {
     background: var(--color-error-hover);
     color: var(--color-on-primary);
     transform: translateY(-1px);
@@ -275,7 +313,7 @@
     color: var(--color-on-primary);
   }
 
-  .ui-btn-info:hover {
+  :where(.ui-btn-info):not([aria-disabled='true']):not(:disabled):hover {
     background: var(--color-info-hover);
     color: var(--color-on-primary);
     transform: translateY(-1px);