diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index dd916757..7e84f06e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,12 +9,14 @@ import { AuthProvider } from "./services/AuthContext";
  *
  * - Wraps the entire application
  * - Provides consistent layout with Header and Footer
+ * - Applies the Godly-inspired dark theme (slate-950 background, design-tokens.json)
  * - Renders the routed pages inside the main content area
  */
 const App: React.FC = () => {
   return (
     <AuthProvider>
-      <div className="min-h-screen flex flex-col">
+      {/* dark class activates the slate-950/900 dark design system */}
+      <div className="dark min-h-screen flex flex-col bg-background text-foreground">
         {/* Global header */}
         <Header />
 
@@ -31,3 +33,4 @@ const App: React.FC = () => {
 };
 
 export default App;
+
diff --git a/frontend/src/presentation/pages/HomePage.tsx b/frontend/src/presentation/pages/HomePage.tsx
index c6ea86c1..f5cc2f1a 100644
--- a/frontend/src/presentation/pages/HomePage.tsx
+++ b/frontend/src/presentation/pages/HomePage.tsx
@@ -31,6 +31,7 @@ interface DisplayItem {
 /**
  * Home page component — introduces Bench Analytics and highlights
  * its main features to encourage user engagement.
+ * Styled to match the Godly-inspired dark design system (design-tokens.json).
  */
 const Home: React.FC = () => {
   const navigate = useNavigate();
@@ -52,7 +53,7 @@ const Home: React.FC = () => {
     {
       title: "Matchup Analysis",
       description:
-        "Generate optimized lineups based on each batter’s statistical profile.",
+        "Generate optimized lineups based on each batter's statistical profile.",
       icon: Target,
     },
     {
@@ -84,18 +85,26 @@ const Home: React.FC = () => {
   ];
 
   return (
-    <div className="space-y-12">
+    <div className="space-y-16">
       {/* ---------- Hero Section ---------- */}
-      {/* Introduces the platform and main call-to-action buttons */}
-      <section className="relative overflow-hidden rounded-lg flex justify-center items-center min-h-[400px]">
-        <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-[calc(100%-1rem)] max-w-6xl h-[400px] bg-gradient-to-r from-blue-900/10 to-red-600/10 rounded-2xl" />
-        <div className="relative text-center space-y-6 p-8 md:p-12 max-w-4xl">
-          <h1 className="text-4xl md:text-6xl text-primary">
-            Your lineup. Our analytics.
+      <section className="relative overflow-hidden rounded-xl flex justify-center items-center min-h-[480px]">
+        {/* Radial gradient background glow */}
+        <div
+          className="absolute inset-0 rounded-xl"
+          style={{
+            background:
+              "radial-gradient(ellipse 80% 60% at 50% 50%, rgba(59,130,246,0.10) 0%, rgba(239,68,68,0.05) 60%, transparent 100%)",
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        />
+        <div className="relative text-center space-y-8 p-10 md:p-16 max-w-4xl">
+          <h1 className="text-5xl md:text-7xl font-extrabold text-foreground tracking-tight">
+            Your lineup.{" "}
+            <span className="text-primary">Our analytics.</span>
             <br />
-            <span className="text-red-600">Their problem.</span>
+            <span className="text-accent">Their problem.</span>
           </h1>
-          <p className="text-xl md:text-2xl text-muted-foreground">
+          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
             Stop guessing. Start winning. Our advanced analytics platform helps
             coaches optimize batting orders, analyze matchups, and make smarter
             decisions backed by data.
@@ -104,7 +113,7 @@ const Home: React.FC = () => {
             <Button
               size="lg"
               onClick={() => navigate("/lineup")}
-              className="text-lg px-8 py-6"
+              className="text-base px-8 py-6 bg-primary hover:bg-primary/90 text-white font-semibold shadow-glow-blue"
             >
               Start Optimizing
             </Button>
@@ -112,11 +121,11 @@ const Home: React.FC = () => {
             <Button
               size="lg"
               onClick={() => navigate("/how-to-guide")}
-              className="text-lg px-8 py-6"
+              className="text-base px-8 py-6 font-semibold"
               style={{
-                border: "1px solid rgba(0, 0, 0, 0.2)",
-                color: "rgba(0,0,0,0.7)",
-                backgroundColor: "transparent",
+                background: "rgba(255,255,255,0.05)",
+                border: "1px solid rgba(255,255,255,0.12)",
+                color: "var(--foreground)",
               }}
             >
               Learn How
@@ -125,42 +134,46 @@ const Home: React.FC = () => {
         </div>
       </section>
 
-      {/* ---------- Features Grid ---------- */}
-      {/* Displays key platform features in a responsive grid of cards */}
-      <div className="space-y-2">
-        <h2 className="text-xl md:text-3xl text-primary text-center">
+      {/* ---------- Features Section Header ---------- */}
+      <div className="space-y-3 text-center">
+        <h2 className="text-3xl md:text-4xl font-bold text-foreground">
           Everything You Need to Win
         </h2>
-        <h3 className="text-base text-center text-muted-foreground">
+        <p className="text-base text-muted-foreground">
           Comprehensive tools designed specifically for baseball coaches.
-        </h3>
+        </p>
       </div>
+
+      {/* ---------- Features Grid ---------- */}
       <div className="grid md:grid-cols-2 gap-6 max-w-6xl mx-auto">
         {features.map((feature, index) => {
           const Icon = feature.icon;
+          const isAccent = index % 2 === 1;
           return (
             <Card
               key={feature.title}
-              className={index % 2 === 1 ? "border-[var(--accent-red)]/20" : ""}
+              style={
+                isAccent
+                  ? { boxShadow: "var(--shadow-glow-red)", borderColor: "rgba(239,68,68,0.18)" }
+                  : {}
+              }
             >
               <CardHeader>
                 <div
-                  className={`w-12 h-12 rounded-lg flex items-center justify-center mb-3 ${
-                    index % 2 === 1 ? "bg-red-600/10" : "bg-blue-900/10"
-                  }`}
+                  className="w-12 h-12 rounded-md flex items-center justify-center mb-3"
+                  style={{
+                    background: isAccent
+                      ? "rgba(239,68,68,0.12)"
+                      : "rgba(59,130,246,0.12)",
+                  }}
                 >
                   <Icon
-                    className={`h-6 w-6 ${
-                      index % 2 === 1 ? "text-red-600" : "text-blue-900"
-                    }`}
+                    className="h-6 w-6"
+                    style={{ color: isAccent ? "#ef4444" : "#3b82f6" }}
                   />
                 </div>
                 <CardTitle
-                  className={
-                    index % 2 === 1
-                      ? "text-[var(--accent-red)]"
-                      : "text-primary"
-                  }
+                  style={{ color: isAccent ? "#ef4444" : "var(--foreground)" }}
                 >
                   {feature.title}
                 </CardTitle>
@@ -173,21 +186,30 @@ const Home: React.FC = () => {
         })}
       </div>
 
-      {/* ---------- Benefits Grid ---------- */}
-      {/* Displays our benefits in block */}
-
-      <section className="bg-gray-100/50 rounded-lg p-8 max-w-6xl mx-auto">
-        <h2 className="text-3xl mb-8 text-center text-primary">Key Benefits</h2>
-        <div className="grid md:grid-cols-3 gap-6">
-          {benefits.map((benefit, index) => {
+      {/* ---------- Benefits Section ---------- */}
+      <section
+        className="rounded-xl p-10 max-w-6xl mx-auto"
+        style={{
+          background: "var(--surface)",
+          border: "1px solid var(--border)",
+        }}
+      >
+        <h2 className="text-3xl font-bold mb-10 text-center text-foreground">
+          Key Benefits
+        </h2>
+        <div className="grid md:grid-cols-3 gap-8">
+          {benefits.map((benefit) => {
             const Icon = benefit.icon;
             return (
-              <div key={benefit.title} className="text-center space-y-3">
-                <div className="w-16 h-16 rounded-full bg-blue-900/10 flex items-center justify-center mx-auto">
-                  <Icon className="h-8 w-8 text-blue-900" />
+              <div key={benefit.title} className="text-center space-y-4">
+                <div
+                  className="w-16 h-16 rounded-xl flex items-center justify-center mx-auto"
+                  style={{ background: "rgba(59,130,246,0.12)" }}
+                >
+                  <Icon className="h-8 w-8 text-primary" />
                 </div>
-                <h3 className="font-medium">{benefit.title}</h3>
-                <p className="text-sm text-muted-foreground">
+                <h3 className="font-semibold text-foreground">{benefit.title}</h3>
+                <p className="text-sm text-muted-foreground leading-relaxed">
                   {benefit.description}
                 </p>
               </div>
@@ -197,21 +219,27 @@ const Home: React.FC = () => {
       </section>
 
       {/* ---------- CTA Section ---------- */}
-      {/* Final call-to-action to encourage signup */}
-      <section className="relative rounded-2xl flex justify-center items-center min-h-[250px]">
-        <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 w-[calc(100%-1rem)] max-w-6xl h-[250px] bg-gradient-to-r from-blue-900/10 to-red-600/10 rounded-2xl" />
-        <div className="relative text-center space-y-6 p-8 md:p-12 max-w-4xl">
-          <h2 className="text-2xl md:text-4xl text-primary">
+      <section className="relative rounded-xl flex justify-center items-center min-h-[280px]">
+        <div
+          className="absolute inset-0 rounded-xl"
+          style={{
+            background:
+              "radial-gradient(ellipse 80% 70% at 50% 50%, rgba(239,68,68,0.10) 0%, rgba(59,130,246,0.05) 60%, transparent 100%)",
+            border: "1px solid rgba(255,255,255,0.06)",
+          }}
+        />
+        <div className="relative text-center space-y-6 p-10 md:p-14 max-w-3xl">
+          <h2 className="text-3xl md:text-4xl font-bold text-foreground">
             Ready to Transform Your Team?
           </h2>
-          <p className="text-lg md:text-xl text-muted-foreground">
+          <p className="text-lg text-muted-foreground">
             Start today and unlock tools that make every decision smarter,
             faster, and more confident.
           </p>
           <Button
             size="lg"
             onClick={() => navigate("/lineup")}
-            className="text-lg px-8 py-6 bg-red-600 hover:bg-red-700"
+            className="text-base px-8 py-6 bg-accent hover:bg-accent/90 text-white font-semibold shadow-glow-red"
           >
             Start Building Lineups <MoveRight className="ml-2 h-5 w-5" />
           </Button>
diff --git a/frontend/src/shared/design-tokens.json b/frontend/src/shared/design-tokens.json
new file mode 100644
index 00000000..2df74a00
--- /dev/null
+++ b/frontend/src/shared/design-tokens.json
@@ -0,0 +1,109 @@
+{
+  "meta": {
+    "name": "Bench Analytics Design System",
+    "version": "2.0.0",
+    "description": "Godly-inspired dark UI design tokens: slate-950/900 backgrounds, glassmorphism cards, subtle glow effects, and high-contrast typography."
+  },
+  "colors": {
+    "background": {
+      "page":    { "value": "#020617", "tailwind": "slate-950", "usage": "Main page / body background" },
+      "surface": { "value": "#0f172a", "tailwind": "slate-900", "usage": "Cards, panels, elevated surfaces" },
+      "header":  { "value": "rgba(2,6,23,0.85)", "usage": "Fixed header glassmorphism background (with backdrop-blur)" },
+      "overlay": { "value": "rgba(15,23,42,0.85)", "usage": "Glassmorphism card background (with backdrop-blur)" },
+      "subtle":  { "value": "#1e293b", "tailwind": "slate-800", "usage": "Hover states, input backgrounds" }
+    },
+    "primary": {
+      "DEFAULT":    { "value": "#3b82f6", "tailwind": "blue-500", "usage": "Primary interactive elements, links" },
+      "hover":      { "value": "#2563eb", "tailwind": "blue-600", "usage": "Primary button hover state" },
+      "foreground": { "value": "#ffffff", "usage": "Text on primary-colored backgrounds" },
+      "glow":       { "value": "rgba(59,130,246,0.35)", "usage": "Blue glow for box-shadow accent" }
+    },
+    "accent": {
+      "red":         { "value": "#ef4444", "tailwind": "red-500", "usage": "Danger, destructive actions, baseball accent" },
+      "redHover":    { "value": "#dc2626", "tailwind": "red-600", "usage": "Red accent hover" },
+      "redGlow":     { "value": "rgba(239,68,68,0.35)", "usage": "Red glow box-shadow" }
+    },
+    "text": {
+      "primary":   { "value": "#f8fafc", "tailwind": "slate-50",  "usage": "Headings, high-emphasis text" },
+      "secondary": { "value": "#94a3b8", "tailwind": "slate-400", "usage": "Body text, descriptions, metadata" },
+      "muted":     { "value": "#64748b", "tailwind": "slate-500", "usage": "Placeholder text, disabled states" }
+    },
+    "border": {
+      "subtle":  { "value": "rgba(255,255,255,0.08)", "usage": "Default card / panel borders" },
+      "medium":  { "value": "rgba(255,255,255,0.12)", "usage": "Focused inputs, hover card borders" },
+      "strong":  { "value": "rgba(255,255,255,0.20)", "usage": "Dividers, emphasized borders" }
+    },
+    "chart": {
+      "1": { "value": "#3b82f6", "tailwind": "blue-500" },
+      "2": { "value": "#10b981", "tailwind": "emerald-500" },
+      "3": { "value": "#f59e0b", "tailwind": "amber-500" },
+      "4": { "value": "#ef4444", "tailwind": "red-500" },
+      "5": { "value": "#8b5cf6", "tailwind": "violet-500" }
+    }
+  },
+  "spacing": {
+    "density": "marketing",
+    "note": "Generous padding/margins typical of modern SaaS marketing pages.",
+    "scale": {
+      "xs":  { "value": "0.25rem",  "px": "4px"  },
+      "sm":  { "value": "0.5rem",   "px": "8px"  },
+      "md":  { "value": "1rem",     "px": "16px" },
+      "lg":  { "value": "1.5rem",   "px": "24px" },
+      "xl":  { "value": "2rem",     "px": "32px" },
+      "2xl": { "value": "3rem",     "px": "48px" },
+      "3xl": { "value": "4rem",     "px": "64px" }
+    },
+    "cardPadding":    { "value": "1.5rem", "px": "24px" },
+    "sectionGap":     { "value": "4rem",   "px": "64px" },
+    "containerMax":   { "value": "80rem",  "px": "1280px" }
+  },
+  "borderRadius": {
+    "note": "Standard rounded corners — not fully circular, not sharp.",
+    "none":   { "value": "0px" },
+    "sm":     { "value": "6px",  "usage": "Small badges, tags" },
+    "md":     { "value": "8px",  "usage": "Buttons, inputs" },
+    "lg":     { "value": "12px", "usage": "Cards, panels (primary radius)" },
+    "xl":     { "value": "16px", "usage": "Hero sections, large containers" },
+    "2xl":    { "value": "24px", "usage": "Modal overlays" },
+    "full":   { "value": "9999px", "usage": "Pills, avatars" }
+  },
+  "effects": {
+    "glassmorphism": {
+      "card": {
+        "background":    "rgba(15,23,42,0.80)",
+        "backdropBlur":  "12px",
+        "border":        "1px solid rgba(255,255,255,0.08)",
+        "boxShadow":     "0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4)"
+      }
+    },
+    "boxShadow": {
+      "sm":        "0 1px 2px rgba(0,0,0,0.4)",
+      "md":        "0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4)",
+      "lg":        "0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4)",
+      "glowBlue":  "0 0 20px rgba(59,130,246,0.25), 0 4px 6px -1px rgba(0,0,0,0.4)",
+      "glowRed":   "0 0 20px rgba(239,68,68,0.25), 0 4px 6px -1px rgba(0,0,0,0.4)"
+    },
+    "ring": {
+      "focus": "0 0 0 2px rgba(59,130,246,0.5)"
+    }
+  },
+  "typography": {
+    "fontFamily": "Inter, system-ui, -apple-system, sans-serif",
+    "scale": {
+      "xs":   { "size": "0.75rem",  "lineHeight": "1rem",    "weight": 400 },
+      "sm":   { "size": "0.875rem", "lineHeight": "1.25rem", "weight": 400 },
+      "base": { "size": "1rem",     "lineHeight": "1.5rem",  "weight": 400 },
+      "lg":   { "size": "1.125rem", "lineHeight": "1.75rem", "weight": 500 },
+      "xl":   { "size": "1.25rem",  "lineHeight": "1.75rem", "weight": 600 },
+      "2xl":  { "size": "1.5rem",   "lineHeight": "2rem",    "weight": 700 },
+      "3xl":  { "size": "1.875rem", "lineHeight": "2.25rem", "weight": 700 },
+      "4xl":  { "size": "2.25rem",  "lineHeight": "2.5rem",  "weight": 800 },
+      "5xl":  { "size": "3rem",     "lineHeight": "1",       "weight": 800 },
+      "6xl":  { "size": "3.75rem",  "lineHeight": "1.1",       "weight": 900 }
+    },
+    "contrastRatio": {
+      "heading-to-body": "slate-50 (#f8fafc) on slate-950 (#020617) — approx 18:1 contrast",
+      "body-to-background": "slate-400 (#94a3b8) on slate-950 (#020617) — approx 7:1 contrast"
+    }
+  }
+}
diff --git a/frontend/src/ui/components/card.tsx b/frontend/src/ui/components/card.tsx
index b1513850..e0c23e2a 100644
--- a/frontend/src/ui/components/card.tsx
+++ b/frontend/src/ui/components/card.tsx
@@ -3,14 +3,15 @@ import { cn } from "../../utils";
 
 /**
  * Card Component
- * Base container with border, rounded corners, and flexible layout.
+ * Glassmorphism container with frosted-glass background, subtle white border,
+ * and rounded-lg corners — aligned with design-tokens.json.
  */
 function Card({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+        "glass-card glass-card-hover text-card-foreground flex flex-col gap-6 rounded-lg",
         className
       )}
       {...props}
@@ -38,7 +39,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 
 /**
  * CardTitle
- * Primary heading for the card.
+ * Primary heading for the card — slate-50 for high contrast.
  */
 function CardTitle({
   className,
@@ -48,7 +49,7 @@ function CardTitle({
   return (
     <h4
       data-slot="card-title"
-      className={cn("leading-none", className)}
+      className={cn("leading-none text-foreground font-semibold", className)}
       {...props}
     >
       {children}
@@ -58,13 +59,13 @@ function CardTitle({
 
 /**
  * CardDescription
- * Secondary text or description below the title.
+ * Secondary text — slate-400 for measured contrast against dark background.
  */
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <p
       data-slot="card-description"
-      className={cn("text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm leading-relaxed", className)}
       {...props}
     />
   );
@@ -124,3 +125,4 @@ export {
   CardDescription,
   CardContent,
 };
+
diff --git a/frontend/src/ui/layout/Footer.tsx b/frontend/src/ui/layout/Footer.tsx
index 3c0ef7ec..07f85591 100644
--- a/frontend/src/ui/layout/Footer.tsx
+++ b/frontend/src/ui/layout/Footer.tsx
@@ -4,14 +4,21 @@ import { useNavigate } from "react-router-dom";
 
 /**
  * Footer Component
- * Displays site-wide footer with navigation links, support info, and company details.
+ * Dark themed footer matching the Godly design system (slate-900 surface,
+ * subtle white borders, muted text).
  */
 export const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear(); // Dynamic year for copyright
   const navigate = useNavigate(); // Used for client-side navigation
 
   return (
-    <footer className="bg-gray-50 border-t border-gray-200 mt-16">
+    <footer
+      className="mt-16"
+      style={{
+        background: "var(--surface)",
+        borderTop: "1px solid var(--border)",
+      }}
+    >
       <div className="max-w-7xl mx-auto px-6 py-10">
         <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
           {/* --- Logo + Description --- */}
@@ -19,34 +26,34 @@ export const Footer: React.FC = () => {
             <img
               src={logo}
               alt="Bench Analytics"
-              className="h-10 w-auto cursor-pointer"
+              className="h-10 w-auto cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
               onClick={() => navigate("/")}
             />
-            <p className="text-sm text-gray-500 max-w-xs leading-relaxed">
+            <p className="text-sm text-muted-foreground max-w-xs leading-relaxed">
               Advanced lineup optimization for baseball coaches.
             </p>
           </div>
 
           {/* --- Product Links --- */}
           <div>
-            <h4 className="text-sm font-semibold text-gray-900 mb-3">
+            <h4 className="text-sm font-semibold text-foreground mb-3">
               Product
             </h4>
-            <ul className="space-y-2 text-sm text-gray-500">
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/lineup")}
               >
                 Lineup Optimizer
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/lineup")}
               >
                 Player Analytics
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/lineup")}
               >
                 Team Management
@@ -56,24 +63,24 @@ export const Footer: React.FC = () => {
 
           {/* --- Support Links --- */}
           <div>
-            <h4 className="text-sm font-semibold text-gray-900 mb-3">
+            <h4 className="text-sm font-semibold text-foreground mb-3">
               Support
             </h4>
-            <ul className="space-y-2 text-sm text-gray-500">
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/how-to-guide")}
               >
                 How-to Guide
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/how-to-guide")}
               >
                 Documentation
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/how-to-guide")}
               >
                 Contact Support
@@ -83,24 +90,24 @@ export const Footer: React.FC = () => {
 
           {/* --- Company Links --- */}
           <div>
-            <h4 className="text-sm font-semibold text-gray-900 mb-3">
+            <h4 className="text-sm font-semibold text-foreground mb-3">
               Company
             </h4>
-            <ul className="space-y-2 text-sm text-gray-500">
+            <ul className="space-y-2 text-sm text-muted-foreground">
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/about")}
               >
                 About Us
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/about")}
               >
                 Privacy Policy
               </li>
               <li
-                className="hover:text-gray-700 cursor-pointer"
+                className="hover:text-foreground cursor-pointer transition-colors"
                 onClick={() => navigate("/about")}
               >
                 Terms of Service
@@ -110,10 +117,14 @@ export const Footer: React.FC = () => {
         </div>
 
         {/* --- Divider + Copyright --- */}
-        <div className="border-t border-gray-200 mt-10 pt-6 text-center text-sm text-gray-500">
+        <div
+          className="mt-10 pt-6 text-center text-sm text-muted-foreground"
+          style={{ borderTop: "1px solid var(--border)" }}
+        >
           © {currentYear} Bench Analytics. All rights reserved.
         </div>
       </div>
     </footer>
   );
 };
+
diff --git a/frontend/src/ui/layout/Header.tsx b/frontend/src/ui/layout/Header.tsx
index 0039b916..f668bb35 100644
--- a/frontend/src/ui/layout/Header.tsx
+++ b/frontend/src/ui/layout/Header.tsx
@@ -23,7 +23,15 @@ export function Header() {
   )?.id;
 
   return (
-    <header className="border-b bg-card shadow-sm">
+    <header
+      className="fixed top-0 left-0 right-0 z-50"
+      style={{
+        background: "var(--header-bg)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        borderBottom: "1px solid var(--border)",
+      }}
+    >
       <div className="container mx-auto px-4">
         <div className="flex h-20 items-center justify-between">
           {/* --- Logo --- */}
@@ -41,13 +49,17 @@ export function Header() {
                 key={item.id}
                 variant={activeSection === item.id ? "default" : "ghost"}
                 onClick={() => navigate(item.path)}
-                className="px-4"
+                className={
+                  activeSection === item.id
+                    ? "px-4 bg-primary text-white hover:bg-primary/90"
+                    : "px-4 text-muted-foreground hover:text-foreground hover:bg-white/5"
+                }
               >
                 {item.label}
               </Button>
             ))}
 
-            <span className="text-muted-foreground mx-2 select-none text-lg">
+            <span className="text-muted-foreground mx-2 select-none text-lg opacity-30">
               |
             </span>
 
@@ -55,13 +67,13 @@ export function Header() {
             <div className="flex items-center space-x-3">
               {user ? (
                 <>
-                  <span className="text-sm text-gray-700">
-                    Logged in as <strong>{user}</strong>
+                  <span className="text-sm text-muted-foreground">
+                    Logged in as <strong className="text-foreground">{user}</strong>
                   </span>
                   <Button
                     onClick={logout}
                     variant="outline"
-                    className="ml-2 bg-red-600 text-white hover:bg-red-700"
+                    className="ml-2 border-accent/40 text-accent hover:bg-accent/10 hover:border-accent/60"
                   >
                     Logout
                   </Button>
@@ -69,16 +81,16 @@ export function Header() {
               ) : (
                 <>
                   <Button
-                    variant="default"
+                    variant="ghost"
                     onClick={() => navigate("/login")}
-                    className="bg-blue-700 text-white hover:bg-blue-800"
+                    className="text-muted-foreground hover:text-foreground hover:bg-white/5"
                   >
                     Login
                   </Button>
                   <Button
                     variant="default"
                     onClick={() => navigate("/register")}
-                    className="bg-blue-700 text-white hover:bg-blue-800"
+                    className="bg-primary text-white hover:bg-primary/90 shadow-glow-blue"
                   >
                     Register
                   </Button>
@@ -91,3 +103,4 @@ export function Header() {
     </header>
   );
 }
+
diff --git a/frontend/src/ui/theme/index.css b/frontend/src/ui/theme/index.css
index b5e89a84..8243c5b4 100644
--- a/frontend/src/ui/theme/index.css
+++ b/frontend/src/ui/theme/index.css
@@ -3,125 +3,145 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Custom Properties */
+/*
+ * Design tokens driven by design-tokens.json (Godly-inspired dark UI).
+ * Slate-950 page background, slate-900 surfaces, glassmorphism cards,
+ * subtle white borders, blue primary accent, high-contrast typography.
+ */
 :root {
-  --font-size: 18px;
-
-  /* Core colors */
-  --background: #ffffff;
-  --foreground: #111827;
-  --card: #ffffff;
-  --card-foreground: #111827;
-  --popover: #f9fafb;
-  --popover-foreground: #111827;
-
-  /* Semantic colors */
-  --primary: #1e3a8a;
+  --font-size: 16px;
+
+  /* ── Backgrounds ─────────────────────────────────────────── */
+  --background: #020617;           /* slate-950  – page / body */
+  --surface:    #0f172a;           /* slate-900  – elevated surfaces */
+  --subtle:     #1e293b;           /* slate-800  – inputs, hover states */
+  --header-bg:  rgba(2, 6, 23, 0.85); /* fixed header glassmorphism bg */
+
+  /* ── Core semantic tokens ────────────────────────────────── */
+  --card:            rgba(15, 23, 42, 0.80);  /* glassmorphism card bg */
+  --card-foreground: #f8fafc;                 /* slate-50 */
+  --popover:         #0f172a;
+  --popover-foreground: #f8fafc;
+  --foreground:      #f8fafc;                 /* slate-50 – primary text */
+
+  /* ── Primary (blue) ──────────────────────────────────────── */
+  --primary:            #3b82f6;  /* blue-500 */
+  --primary-hover:      #2563eb;  /* blue-600 */
   --primary-foreground: #ffffff;
-  --secondary: #dbeafe;
-  --secondary-foreground: #1e3a8a;
-  --muted: #ececf0;
-  --muted-foreground: #717182;
-  --accent: #dbeafe;
-  --accent-foreground: #1e3a8a;
-  --accent-red: #dc2626;
-  --accent-red-foreground: #ffffff;
-  --destructive: #d4183d;
-  --destructive-foreground: #ffffff;
+  --primary-glow:       rgba(59, 130, 246, 0.35);
 
-  /* UI */
-  --border: rgba(0, 0, 0, 0.1);
-  --input: transparent;
-  --input-background: #f3f3f5;
-  --switch-background: #cbced4;
-  --ring: #3b82f6;
+  /* ── Secondary ───────────────────────────────────────────── */
+  --secondary:            #1e293b;  /* slate-800 */
+  --secondary-foreground: #94a3b8;  /* slate-400 */
 
-  /* Charts */
-  --chart-1: #f59e0b;
-  --chart-2: #10b981;
-  --chart-3: #6366f1;
-  --chart-4: #f97316;
-  --chart-5: #8b5cf6;
+  /* ── Muted / body text ───────────────────────────────────── */
+  --muted:            #1e293b;  /* slate-800 */
+  --muted-foreground: #94a3b8;  /* slate-400 */
 
-  /* Radius */
-  --radius: 0.625rem;
+  /* ── Accent (red – baseball brand) ──────────────────────── */
+  --accent:             #ef4444;  /* red-500 */
+  --accent-foreground:  #ffffff;
+  --accent-red:         #ef4444;
+  --accent-red-foreground: #ffffff;
+  --accent-glow:        rgba(239, 68, 68, 0.35);
 
-  /* Sidebar */
-  --sidebar: #ffffff;
-  --sidebar-foreground: #111827;
-  --sidebar-primary: #1e3a8a;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: #e0e7ff;
-  --sidebar-accent-foreground: #1e3a8a;
-  --sidebar-border: #d1d5db;
-  --sidebar-ring: #3b82f6;
-
-  /* Font weights */
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-}
+  /* ── Destructive ─────────────────────────────────────────── */
+  --destructive:            #ef4444;
+  --destructive-foreground: #ffffff;
 
-/* Dark Mode Variables using Tailwind stable dark mode */
-.dark {
-  --background: #111827;
-  --foreground: #f9fafb;
-  --card: #1f2937;
-  --card-foreground: #f9fafb;
-  --popover: #374151;
-  --popover-foreground: #f9fafb;
+  /* ── Borders ─────────────────────────────────────────────── */
+  --border:  rgba(255, 255, 255, 0.08);   /* subtle white border */
+  --border-medium: rgba(255, 255, 255, 0.12);
+  --border-strong: rgba(255, 255, 255, 0.20);
 
-  --primary: #3b82f6;
-  --primary-foreground: #ffffff;
-  --secondary: #1e40af;
-  --secondary-foreground: #f9fafb;
-  --muted: #374151;
-  --muted-foreground: #d1d5db;
-  --accent: #2563eb;
-  --accent-foreground: #f9fafb;
-  --destructive: #b91c1c;
-  --destructive-foreground: #f9fafb;
-
-  --border: #4b5563;
-  --input: #1f2937;
-  --ring: #2563eb;
-
-  --chart-1: #f59e0b;
-  --chart-2: #10b981;
-  --chart-3: #6366f1;
-  --chart-4: #f97316;
-  --chart-5: #8b5cf6;
-
-  --sidebar: #1f2937;
-  --sidebar-foreground: #f9fafb;
-  --sidebar-primary: #3b82f6;
-  --sidebar-primary-foreground: #f9fafb;
-  --sidebar-accent: #2563eb;
-  --sidebar-accent-foreground: #f9fafb;
-  --sidebar-border: #4b5563;
-  --sidebar-ring: #2563eb;
+  /* ── Inputs ──────────────────────────────────────────────── */
+  --input:            #1e293b;  /* slate-800 */
+  --input-background: #1e293b;
+  --switch-background: #334155;
+  --ring: #3b82f6;
+
+  /* ── Charts ──────────────────────────────────────────────── */
+  --chart-1: #3b82f6;  /* blue-500 */
+  --chart-2: #10b981;  /* emerald-500 */
+  --chart-3: #f59e0b;  /* amber-500 */
+  --chart-4: #ef4444;  /* red-500 */
+  --chart-5: #8b5cf6;  /* violet-500 */
+
+  /* ── Border radius ───────────────────────────────────────── */
+  --radius: 0.75rem;   /* 12px – primary card radius */
+  --radius-sm: 0.375rem; /* 6px  – badges / tags */
+  --radius-md: 0.5rem;   /* 8px  – buttons / inputs */
+  --radius-xl: 1rem;     /* 16px – hero sections */
+
+  /* ── Shadows ─────────────────────────────────────────────── */
+  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
+  --shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --shadow-lg:       0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.25), 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --shadow-glow-red:  0 0 20px rgba(239, 68, 68, 0.25), 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+
+  /* ── Sidebar ─────────────────────────────────────────────── */
+  --sidebar:                  #0f172a;
+  --sidebar-foreground:       #f8fafc;
+  --sidebar-primary:          #3b82f6;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent:           #1e293b;
+  --sidebar-accent-foreground: #94a3b8;
+  --sidebar-border:           rgba(255, 255, 255, 0.08);
+  --sidebar-ring:             #3b82f6;
+
+  /* ── Font weights ────────────────────────────────────────── */
+  --font-weight-normal:   400;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
 }
 
 /* Base Layer */
 @layer base {
   * {
-    @apply border-gray-200 outline-gray-300;
+    border-color: var(--border);
+    outline-color: var(--primary);
   }
 
   body {
     background-color: var(--background);
     color: var(--foreground);
+    font-family: Inter, system-ui, -apple-system, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Typography — high header-to-body contrast as per design tokens */
+  /* Base font size set to 16px per design-tokens.json (standard for dense analytics UIs) */
+  h1 { font-size: 3.75rem; font-weight: 800; line-height: 1.1; color: var(--foreground); }
+  h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--foreground); }
+  h3 { font-size: 1.5rem;  font-weight: 700; line-height: 1.3; color: var(--foreground); }
+  h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--foreground); }
+  p  { font-size: 1rem;    font-weight: 400; line-height: 1.6; color: var(--muted-foreground); }
+  label  { font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
+  button { font-size: 0.875rem; font-weight: 500; }
+  input  { font-size: 0.875rem; font-weight: 400; }
+}
+
+/* Glassmorphism utility class */
+@layer components {
+  .glass-card {
+    background: var(--card);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--radius);
+  }
+
+  .glass-card-hover {
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
   }
 
-  /* Typography Defaults */
-  :where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) {
-    h1 { font-size: 1.5rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    h2 { font-size: 1.25rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    h3 { font-size: 1.125rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    h4 { font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    p { font-size: 1rem; font-weight: var(--font-weight-normal); line-height: 1.5; }
-    label { font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    button { font-size: 1rem; font-weight: var(--font-weight-medium); line-height: 1.5; }
-    input { font-size: 1rem; font-weight: var(--font-weight-normal); line-height: 1.5; }
+  .glass-card-hover:hover {
+    border-color: var(--border-medium);
+    box-shadow: var(--shadow-glow-blue);
   }
 }
 
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a7436b99..a0726ff6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,7 +3,7 @@
  * 
  * - Specifies files to scan for class names (`content`)
  * - Extends the default theme with design tokens
- * - Integrates with our centralized design system
+ * - Integrates with our centralized design system (design-tokens.json)
  */
 /** @type {import('tailwindcss').Config} */
 const config = {
@@ -13,9 +13,11 @@ const config = {
   ],
   theme: {
     extend: {
-      // Colors using CSS variables
+      // Colors using CSS variables (driven by design-tokens.json)
       colors: {
         background: 'var(--background)',
+        surface:    'var(--surface)',
+        subtle:     'var(--subtle)',
         foreground: 'var(--foreground)',
         card: {
           DEFAULT: 'var(--card)',
@@ -27,7 +29,9 @@ const config = {
         },
         primary: {
           DEFAULT: 'var(--primary)',
+          hover:      'var(--primary-hover)',
           foreground: 'var(--primary-foreground)',
+          glow:       'var(--primary-glow)',
         },
         secondary: {
           DEFAULT: 'var(--secondary)',
@@ -42,14 +46,15 @@ const config = {
           foreground: 'var(--accent-foreground)',
           red: 'var(--accent-red)',
           redForeground: 'var(--accent-red-foreground)',
+          glow: 'var(--accent-glow)',
         },
         destructive: {
           DEFAULT: 'var(--destructive)',
           foreground: 'var(--destructive-foreground)',
         },
         border: 'var(--border)',
-        input: 'var(--input)',
-        ring: 'var(--ring)',
+        input:  'var(--input)',
+        ring:   'var(--ring)',
         chart: {
           1: 'var(--chart-1)',
           2: 'var(--chart-2)',
@@ -58,11 +63,20 @@ const config = {
           5: 'var(--chart-5)',
         },
       },
-      // Border radius
+      // Border radius aligned with design-tokens.json
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
+        sm:  'var(--radius-sm)',   // 6px  – badges / tags
+        md:  'var(--radius-md)',   // 8px  – buttons / inputs
+        lg:  'var(--radius)',      // 12px – cards / panels (default)
+        xl:  'var(--radius-xl)',   // 16px – hero sections
+      },
+      // Box shadows aligned with design-tokens.json
+      boxShadow: {
+        sm:        'var(--shadow-sm)',
+        md:        'var(--shadow-md)',
+        lg:        'var(--shadow-lg)',
+        'glow-blue': 'var(--shadow-glow-blue)',
+        'glow-red':  'var(--shadow-glow-red)',
       },
     },
   },