diff --git a/frontend/src/index.css b/frontend/src/index.css
index cb55e21..2ccc993 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -5,185 +5,435 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * CodeIntel V2 Design System
+ * Premium dark theme with glassmorphism
+ */
+
 @layer base {
-  body {
-    @apply bg-white text-gray-900 antialiased;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-  }
-  
-  code, pre {
-    font-family: 'JetBrains Mono', Monaco, Consolas, monospace;
-  }
   :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
+    /* Background */
+    --color-bg-primary: #09090b;
+    --color-bg-secondary: #0f0f11;
+    --color-bg-tertiary: #18181b;
+    --color-bg-hover: #27272a;
+    
+    /* Text */
+    --color-text-primary: #fafafa;
+    --color-text-secondary: #a1a1aa;
+    --color-text-muted: #71717a;
+    --color-text-disabled: #52525b;
+    
+    /* Accent (Indigo) */
+    --color-accent: #6366f1;
+    --color-accent-hover: #818cf8;
+    --color-accent-muted: #4f46e5;
+    --color-accent-glow: rgba(99, 102, 241, 0.15);
+    
+    /* Semantic */
+    --color-success: #22c55e;
+    --color-warning: #f59e0b;
+    --color-error: #ef4444;
+    --color-info: #3b82f6;
+    
+    /* Border */
+    --color-border: #27272a;
+    --color-border-muted: #18181b;
+    --color-border-accent: #6366f1;
+    
+    /* Glass */
+    --glass-bg: rgba(255, 255, 255, 0.03);
+    --glass-bg-hover: rgba(255, 255, 255, 0.05);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-border-hover: rgba(255, 255, 255, 0.12);
+    --glass-blur: 20px;
+    --glass-blur-strong: 40px;
+    
+    /* Typography */
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace;
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 2rem;
+    --text-4xl: 2.5rem;
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
+    --leading-relaxed: 1.75;
+    
+    /* Spacing */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    
+    /* Animation */
+    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
+    --duration-slower: 600ms;
+    
+    /* Shadow */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+    --shadow-glow: 0 0 20px var(--color-accent-glow);
+    --shadow-glow-lg: 0 0 40px var(--color-accent-glow);
+    
+    /* Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-full: 9999px;
+    
+    /* Shadcn compatibility (HSL format) */
+    --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
+    --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
+    --primary: 239 84% 67%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4% 16%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 240 5% 65%;
+    --accent: 239 84% 67%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
+    --border: 240 4% 16%;
+    --input: 240 4% 16%;
+    --ring: 239 84% 67%;
+    --radius: 0.75rem;
+    --chart-1: 239 84% 67%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
   }
+
+  * {
+    @apply border-border;
+  }
+  
+  html {
+    @apply antialiased;
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--color-bg-primary);
+    color: var(--color-text-primary);
+    line-height: var(--leading-normal);
+  }
+  
+  code, pre, kbd, samp {
+    font-family: var(--font-mono);
+  }
+
+  ::selection {
+    background: var(--color-accent-glow);
+    color: var(--color-text-primary);
+  }
 }
 
+/* ============================================
+   Components
+   ============================================ */
+
 @layer components {
-  .card {
-    @apply bg-white rounded-lg border border-gray-200 shadow-sm;
+  /* Glass effect */
+  .glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
+    transition: all var(--duration-normal) var(--ease-out-expo);
+  }
+  
+  .glass:hover {
+    background: var(--glass-bg-hover);
+    border-color: var(--glass-border-hover);
   }
   
+  .glass-strong {
+    background: var(--glass-bg-hover);
+    backdrop-filter: blur(var(--glass-blur-strong));
+    -webkit-backdrop-filter: blur(var(--glass-blur-strong));
+    border: 1px solid var(--glass-border-hover);
+  }
+
+  /* Buttons */
   .btn {
-    @apply px-4 py-2 rounded-md font-medium text-sm transition-colors duration-150 
-           disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-2;
+    @apply px-4 py-2 rounded-lg font-medium text-sm inline-flex items-center justify-center gap-2;
+    transition: all var(--duration-normal) var(--ease-out-expo);
+  }
+  
+  .btn:disabled {
+    @apply opacity-50 cursor-not-allowed;
   }
   
   .btn-primary {
-    @apply btn bg-blue-600 hover:bg-blue-700 text-white;
+    @apply btn text-white;
+    background: var(--color-accent);
+  }
+  
+  .btn-primary:hover:not(:disabled) {
+    background: var(--color-accent-hover);
+    box-shadow: var(--shadow-glow);
   }
   
   .btn-secondary {
-    @apply btn bg-white hover:bg-gray-50 text-gray-700 border border-gray-300;
+    @apply btn;
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-primary);
+    border: 1px solid var(--color-border);
+  }
+  
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--color-bg-hover);
+    border-color: var(--color-border-accent);
   }
   
   .btn-ghost {
-    @apply btn bg-transparent hover:bg-gray-100 text-gray-600;
+    @apply btn;
+    background: transparent;
+    color: var(--color-text-secondary);
   }
   
+  .btn-ghost:hover:not(:disabled) {
+    background: var(--glass-bg);
+    color: var(--color-text-primary);
+  }
+
+  /* Inputs */
   .input {
-    @apply w-full px-3 py-2 bg-white border border-gray-300 rounded-md text-gray-900 text-sm
-           placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
-           transition-all duration-150;
+    @apply w-full px-4 py-3 rounded-lg text-sm;
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-primary);
+    transition: all var(--duration-normal) var(--ease-out-expo);
+  }
+  
+  .input::placeholder {
+    color: var(--color-text-muted);
+  }
+  
+  .input:focus {
+    outline: none;
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 3px var(--color-accent-glow);
+  }
+  
+  .input-glass {
+    @apply input;
+    background: var(--glass-bg);
+    backdrop-filter: blur(var(--glass-blur));
+    -webkit-backdrop-filter: blur(var(--glass-blur));
+    border: 1px solid var(--glass-border);
   }
   
+  .input-glass:focus {
+    background: var(--glass-bg-hover);
+    border-color: var(--color-accent);
+    box-shadow: 0 0 0 4px var(--color-accent-glow);
+  }
+
+  /* Cards */
+  .card {
+    @apply rounded-xl;
+    background: var(--color-bg-tertiary);
+    border: 1px solid var(--color-border);
+  }
+  
+  .card-elevated {
+    @apply card;
+    box-shadow: var(--shadow-lg);
+  }
+  
+  .card-glass {
+    @apply glass rounded-xl;
+  }
+
+  /* Badges */
   .badge {
-    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
+  }
+  
+  .badge-accent {
+    @apply badge;
+    background: var(--color-accent-glow);
+    color: var(--color-accent-hover);
   }
   
   .badge-success {
-    @apply badge bg-green-50 text-green-700 border border-green-200;
+    @apply badge;
+    background: rgba(34, 197, 94, 0.15);
+    color: #4ade80;
   }
   
   .badge-warning {
-    @apply badge bg-amber-50 text-amber-700 border border-amber-200;
+    @apply badge;
+    background: rgba(245, 158, 11, 0.15);
+    color: #fbbf24;
   }
   
-  .badge-danger {
-    @apply badge bg-red-50 text-red-700 border border-red-200;
+  .badge-error {
+    @apply badge;
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
   }
   
   .badge-neutral {
-    @apply badge bg-gray-100 text-gray-600 border border-gray-200;
+    @apply badge;
+    background: var(--glass-bg);
+    color: var(--color-text-secondary);
   }
-  
-  .status-dot {
-    @apply w-2 h-2 rounded-full;
+
+  /* Code */
+  .code-block {
+    @apply rounded-lg p-4 overflow-x-auto text-sm;
+    background: var(--color-bg-secondary);
+    border: 1px solid var(--color-border);
+    font-family: var(--font-mono);
   }
   
-  .code-block {
-    @apply bg-gray-50 rounded-md p-4 overflow-x-auto text-sm border border-gray-200;
+  .code-inline {
+    @apply px-1.5 py-0.5 rounded text-sm;
+    background: var(--glass-bg);
+    color: var(--color-accent-hover);
+    font-family: var(--font-mono);
   }
 }
 
-::selection {
-  background: rgba(59, 130, 246, 0.2);
-}
-
-/* Page transitions and animations */
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes slideIn {
-  from { opacity: 0; transform: translateX(-8px); }
-  to { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes scaleIn {
-  from { opacity: 0; transform: scale(0.95); }
-  to { opacity: 1; transform: scale(1); }
-}
-
-.animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
-}
-
-.animate-slide-in {
-  animation: slideIn 0.3s ease-out forwards;
-}
-
-.animate-scale-in {
-  animation: scaleIn 0.2s ease-out forwards;
-}
-
-/* Staggered animations for lists */
-.stagger-1 { animation-delay: 0.05s; }
-.stagger-2 { animation-delay: 0.1s; }
-.stagger-3 { animation-delay: 0.15s; }
-.stagger-4 { animation-delay: 0.2s; }
-.stagger-5 { animation-delay: 0.25s; }
+/* ============================================
+   Animations
+   ============================================ */
 
-/* Focus visible states */
-.focus-ring {
-  @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b];
-}
-
-/* Smooth hover transitions */
-.hover-lift {
-  @apply transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg;
+@layer utilities {
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  @keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  
+  @keyframes fade-in-down {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  
+  @keyframes scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+  
+  @keyframes blur-in {
+    from { opacity: 0; filter: blur(10px); }
+    to { opacity: 1; filter: blur(0); }
+  }
+  
+  @keyframes glow-pulse {
+    0%, 100% { box-shadow: 0 0 20px var(--color-accent-glow); }
+    50% { box-shadow: 0 0 40px var(--color-accent-glow); }
+  }
+  
+  @keyframes shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+  
+  .animate-fade-in { animation: fade-in var(--duration-normal) var(--ease-out-expo) forwards; }
+  .animate-fade-in-up { animation: fade-in-up var(--duration-normal) var(--ease-out-expo) forwards; }
+  .animate-fade-in-down { animation: fade-in-down var(--duration-normal) var(--ease-out-expo) forwards; }
+  .animate-scale-in { animation: scale-in var(--duration-normal) var(--ease-out-expo) forwards; }
+  .animate-blur-in { animation: blur-in var(--duration-slow) var(--ease-out-expo) forwards; }
+  .animate-glow-pulse { animation: glow-pulse 2s var(--ease-in-out) infinite; }
+  .animate-shimmer {
+    background: linear-gradient(90deg, var(--glass-bg) 0%, var(--glass-bg-hover) 50%, var(--glass-bg) 100%);
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+  
+  /* Stagger delays */
+  .stagger-1 { animation-delay: 50ms; }
+  .stagger-2 { animation-delay: 100ms; }
+  .stagger-3 { animation-delay: 150ms; }
+  .stagger-4 { animation-delay: 200ms; }
+  .stagger-5 { animation-delay: 250ms; }
+  .stagger-6 { animation-delay: 300ms; }
+  .stagger-7 { animation-delay: 350ms; }
+  .stagger-8 { animation-delay: 400ms; }
+  
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
 }
 
-.hover-glow {
-  @apply transition-all duration-200 hover:shadow-[0_0_20px_rgba(59,130,246,0.3)];
-}
+/* ============================================
+   Utilities
+   ============================================ */
 
-@layer base {
-  * {
-    @apply border-border;
+@layer utilities {
+  .focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: var(--color-accent);
+    --tw-ring-offset-color: var(--color-bg-primary);
   }
-  body {
-    @apply bg-background text-foreground;
+  
+  .hover-lift {
+    transition: transform var(--duration-normal) var(--ease-out-expo);
+  }
+  .hover-lift:hover { transform: translateY(-2px); }
+  
+  .hover-glow {
+    transition: box-shadow var(--duration-normal) var(--ease-out-expo);
+  }
+  .hover-glow:hover { box-shadow: var(--shadow-glow); }
+  
+  .hover-scale {
+    transition: transform var(--duration-normal) var(--ease-out-expo);
+  }
+  .hover-scale:hover { transform: scale(1.02); }
+  
+  .text-gradient {
+    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+  
+  .text-balance { text-wrap: balance; }
+  
+  /* Scrollbar */
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
   }
+  .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
+  .scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
+  .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); }
+  .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
 }
diff --git a/frontend/src/lib/design-tokens.ts b/frontend/src/lib/design-tokens.ts
new file mode 100644
index 0000000..6aeb192
--- /dev/null
+++ b/frontend/src/lib/design-tokens.ts
@@ -0,0 +1,180 @@
+/**
+ * Design System Tokens - TypeScript constants for JS/TS usage
+ * For CSS, prefer using variables directly: var(--color-accent)
+ */
+
+export const colors = {
+  bg: {
+    primary: '#09090b',
+    secondary: '#0f0f11',
+    tertiary: '#18181b',
+    hover: '#27272a',
+  },
+  text: {
+    primary: '#fafafa',
+    secondary: '#a1a1aa',
+    muted: '#71717a',
+    disabled: '#52525b',
+  },
+  accent: {
+    DEFAULT: '#6366f1',
+    hover: '#818cf8',
+    muted: '#4f46e5',
+    glow: 'rgba(99, 102, 241, 0.15)',
+  },
+  success: '#22c55e',
+  warning: '#f59e0b',
+  error: '#ef4444',
+  info: '#3b82f6',
+  border: {
+    DEFAULT: '#27272a',
+    muted: '#18181b',
+    accent: '#6366f1',
+  },
+} as const;
+
+export const glass = {
+  bg: 'rgba(255, 255, 255, 0.03)',
+  bgHover: 'rgba(255, 255, 255, 0.05)',
+  border: 'rgba(255, 255, 255, 0.08)',
+  borderHover: 'rgba(255, 255, 255, 0.12)',
+  blur: 20,
+  blurStrong: 40,
+} as const;
+
+export const typography = {
+  fontFamily: {
+    sans: "'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif",
+    mono: "'JetBrains Mono', 'Fira Code', Monaco, Consolas, monospace",
+  },
+  fontSize: {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '2rem',
+    '4xl': '2.5rem',
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75,
+  },
+} as const;
+
+export const spacing = {
+  1: '0.25rem',
+  2: '0.5rem',
+  3: '0.75rem',
+  4: '1rem',
+  5: '1.25rem',
+  6: '1.5rem',
+  8: '2rem',
+  10: '2.5rem',
+  12: '3rem',
+  16: '4rem',
+} as const;
+
+export const animation = {
+  easing: {
+    outExpo: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    outQuart: 'cubic-bezier(0.25, 1, 0.5, 1)',
+    inOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
+  },
+  duration: {
+    fast: 150,
+    normal: 250,
+    slow: 400,
+    slower: 600,
+  },
+} as const;
+
+export const shadows = {
+  sm: '0 1px 2px rgba(0, 0, 0, 0.3)',
+  md: '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3)',
+  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3)',
+  glow: '0 0 20px rgba(99, 102, 241, 0.15)',
+  glowLg: '0 0 40px rgba(99, 102, 241, 0.15)',
+} as const;
+
+export const radius = {
+  sm: '0.375rem',
+  md: '0.5rem',
+  lg: '0.75rem',
+  xl: '1rem',
+  full: '9999px',
+} as const;
+
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+export const zIndex = {
+  dropdown: 50,
+  sticky: 100,
+  modal: 200,
+  popover: 300,
+  tooltip: 400,
+  toast: 500,
+} as const;
+
+/** Get computed value of a CSS variable */
+export function getCSSVar(variable: string): string {
+  if (typeof window === 'undefined') return '';
+  return getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+}
+
+/** Set a CSS variable at runtime */
+export function setCSSVar(variable: string, value: string): void {
+  if (typeof window === 'undefined') return;
+  document.documentElement.style.setProperty(variable, value);
+}
+
+// Framer Motion presets
+export const motionVariants = {
+  fadeIn: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+  },
+  fadeInUp: {
+    initial: { opacity: 0, y: 10 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -10 },
+  },
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 },
+  },
+  blurIn: {
+    initial: { opacity: 0, filter: 'blur(10px)' },
+    animate: { opacity: 1, filter: 'blur(0px)' },
+    exit: { opacity: 0, filter: 'blur(10px)' },
+  },
+} as const;
+
+export const defaultTransition = {
+  duration: animation.duration.normal / 1000,
+  ease: [0.16, 1, 0.3, 1],
+} as const;
+
+export const staggerContainer = {
+  animate: {
+    transition: {
+      staggerChildren: 0.05,
+    },
+  },
+} as const;
+
+// Types
+export type ColorKey = keyof typeof colors;
+export type SpacingKey = keyof typeof spacing;
+export type RadiusKey = keyof typeof radius;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 3e6e80a..712fa80 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,107 +1,157 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-    darkMode: ["class"],
-    content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  darkMode: ["class"],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-  	extend: {
-  		colors: {
-  			gray: {
-  				'50': '#fafafa',
-  				'100': '#f5f5f5',
-  				'200': '#e5e5e5',
-  				'300': '#d4d4d4',
-  				'400': '#a3a3a3',
-  				'500': '#737373',
-  				'600': '#525252',
-  				'700': '#404040',
-  				'800': '#262626',
-  				'900': '#171717'
-  			},
-  			blue: {
-  				'50': '#eff6ff',
-  				'100': '#dbeafe',
-  				'500': '#3b82f6',
-  				'600': '#2563eb',
-  				'700': '#1d4ed8'
-  			},
-  			green: {
-  				'50': '#f0fdf4',
-  				'500': '#22c55e',
-  				'600': '#16a34a'
-  			},
-  			red: {
-  				'50': '#fef2f2',
-  				'500': '#ef4444',
-  				'600': '#dc2626'
-  			},
-  			amber: {
-  				'50': '#fffbeb',
-  				'500': '#f59e0b'
-  			},
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			}
-  		},
-  		fontFamily: {
-  			sans: [
-  				'Inter',
-  				'-apple-system',
-  				'BlinkMacSystemFont',
-  				'sans-serif'
-  			],
-  			mono: [
-  				'JetBrains Mono',
-  				'Monaco',
-  				'Consolas',
-  				'monospace'
-  			]
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    extend: {
+      colors: {
+        // Custom design system colors
+        bg: {
+          primary: 'var(--color-bg-primary)',
+          secondary: 'var(--color-bg-secondary)',
+          tertiary: 'var(--color-bg-tertiary)',
+          hover: 'var(--color-bg-hover)',
+        },
+        text: {
+          primary: 'var(--color-text-primary)',
+          secondary: 'var(--color-text-secondary)',
+          muted: 'var(--color-text-muted)',
+          disabled: 'var(--color-text-disabled)',
+        },
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          hover: 'var(--color-accent-hover)',
+          muted: 'var(--color-accent-muted)',
+          glow: 'var(--color-accent-glow)',
+        },
+        success: 'var(--color-success)',
+        warning: 'var(--color-warning)',
+        error: 'var(--color-error)',
+        info: 'var(--color-info)',
+        border: {
+          DEFAULT: 'var(--color-border)',
+          muted: 'var(--color-border-muted)',
+          accent: 'var(--color-border-accent)',
+        },
+        glass: {
+          bg: 'var(--glass-bg)',
+          'bg-hover': 'var(--glass-bg-hover)',
+          border: 'var(--glass-border)',
+          'border-hover': 'var(--glass-border-hover)',
+        },
+        
+        // Shadcn compatibility
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        chart: {
+          1: 'hsl(var(--chart-1))',
+          2: 'hsl(var(--chart-2))',
+          3: 'hsl(var(--chart-3))',
+          4: 'hsl(var(--chart-4))',
+          5: 'hsl(var(--chart-5))',
+        },
+      },
+      
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        mono: ['var(--font-mono)'],
+      },
+      
+      borderRadius: {
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+      },
+      
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        glow: 'var(--shadow-glow)',
+        'glow-lg': 'var(--shadow-glow-lg)',
+      },
+      
+      transitionTimingFunction: {
+        'out-expo': 'var(--ease-out-expo)',
+        'out-quart': 'var(--ease-out-quart)',
+        spring: 'var(--ease-spring)',
+      },
+      
+      transitionDuration: {
+        fast: 'var(--duration-fast)',
+        normal: 'var(--duration-normal)',
+        slow: 'var(--duration-slow)',
+        slower: 'var(--duration-slower)',
+      },
+      
+      backdropBlur: {
+        glass: 'var(--glass-blur)',
+        'glass-strong': 'var(--glass-blur-strong)',
+      },
+      
+      animation: {
+        'fade-in': 'fade-in var(--duration-normal) var(--ease-out-expo) forwards',
+        'fade-in-up': 'fade-in-up var(--duration-normal) var(--ease-out-expo) forwards',
+        'scale-in': 'scale-in var(--duration-normal) var(--ease-out-expo) forwards',
+        'blur-in': 'blur-in var(--duration-slow) var(--ease-out-expo) forwards',
+        'glow-pulse': 'glow-pulse 2s var(--ease-in-out) infinite',
+        shimmer: 'shimmer 2s infinite',
+      },
+      
+      keyframes: {
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'fade-in-up': {
+          from: { opacity: '0', transform: 'translateY(10px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        'scale-in': {
+          from: { opacity: '0', transform: 'scale(0.95)' },
+          to: { opacity: '1', transform: 'scale(1)' },
+        },
+        'blur-in': {
+          from: { opacity: '0', filter: 'blur(10px)' },
+          to: { opacity: '1', filter: 'blur(0)' },
+        },
+        'glow-pulse': {
+          '0%, 100%': { boxShadow: '0 0 20px var(--color-accent-glow)' },
+          '50%': { boxShadow: '0 0 40px var(--color-accent-glow)' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '-200% 0' },
+          '100%': { backgroundPosition: '200% 0' },
+        },
+      },
+    },
   },
   plugins: [require("tailwindcss-animate")],
 }