diff --git a/src/styles/global.css b/src/styles/global.css
index 4ccafe3..dfd552f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -89,6 +89,15 @@
   --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
   --animation-smooth: cubic-bezier(0.65, 0, 0.35, 1);
   --animation-spring: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Global UI Design Tokens */
+  --ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.2), rgb(37 99 235 / 0.1), rgb(154 52 18 / 0.2));
+  --ui-title-gradient: linear-gradient(90deg, #111827 0%, var(--primary) 50%, #ea580c 100%);
+  --ui-surface-bg: rgb(248 250 252 / 0.75);
+  --ui-surface-border: rgb(228 228 231 / 0.7);
+  --ui-surface-shadow: var(--shadow-sm);
+  --ui-surface-blur: 10px;
+  --ui-section-soft-bg: rgb(37 99 235 / 0.05);
 }
 
 .dark {
@@ -130,6 +139,14 @@
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
   --shadow-xl: 0 12px 40px rgba(59, 130, 246, 0.2);
+
+  /* Global UI Design Tokens - Dark */
+  --ui-hero-overlay: linear-gradient(135deg, rgb(30 58 138 / 0.3), rgb(37 99 235 / 0.2), rgb(154 52 18 / 0.3));
+  --ui-title-gradient: linear-gradient(90deg, #ffffff 0%, #bfdbfe 50%, #fdba74 100%);
+  --ui-surface-bg: rgb(24 24 27 / 0.7);
+  --ui-surface-border: rgb(39 39 42 / 0.7);
+  --ui-surface-shadow: var(--shadow-sm);
+  --ui-section-soft-bg: rgb(37 99 235 / 0.1);
 }
 
 @theme inline {
@@ -168,6 +185,9 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-page-surface: var(--ui-surface-bg);
+  --color-page-surface-border: var(--ui-surface-border);
+  --color-page-section-soft: var(--ui-section-soft-bg);
 }
 
 @layer base {
@@ -196,19 +216,25 @@
 /* Animation utilities */
 @layer utilities {
   .page-hero-overlay {
-    @apply absolute inset-0 pointer-events-none bg-gradient-to-br from-blue-900/20 via-primary/10 to-orange-900/20 dark:from-blue-900/30 dark:via-primary/20 dark:to-orange-900/30;
+    @apply absolute inset-0 pointer-events-none;
+    background-image: var(--ui-hero-overlay);
   }
 
   .page-title-gradient {
-    @apply bg-gradient-to-r from-gray-900 via-primary to-orange-600 dark:from-white dark:via-blue-200 dark:to-orange-300 bg-clip-text text-transparent;
+    @apply bg-clip-text text-transparent;
+    background-image: var(--ui-title-gradient);
   }
 
   .page-surface {
-    @apply rounded-2xl border border-border/70 bg-background/75 backdrop-blur-sm shadow-sm;
+    @apply rounded-2xl border;
+    background: var(--ui-surface-bg);
+    border-color: var(--ui-surface-border);
+    box-shadow: var(--ui-surface-shadow);
+    backdrop-filter: blur(var(--ui-surface-blur));
   }
 
   .page-section-soft {
-    @apply bg-primary/5 dark:bg-primary/10;
+    background: var(--ui-section-soft-bg);
   }
 
   .animate-fade-in {