diff --git a/apps/web/src/styles/landing.css b/apps/web/src/styles/landing.css
index 0305b1a..df119ab 100644
--- a/apps/web/src/styles/landing.css
+++ b/apps/web/src/styles/landing.css
@@ -17,6 +17,27 @@
   }
 }
 
+/* Reduced motion: disable non-essential animations while preserving critical state changes */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  
+  /* Preserve focus and state change animations for accessibility */
+  :focus,
+  :focus-visible,
+  [data-state="open"],
+  [data-state="closed"],
+  [aria-expanded="true"],
+  [aria-expanded="false"] {
+    transition-duration: var(--duration-fast) !important;
+  }
+}
+
 /* Hero decorative gradients — adapt to primary token in both themes */
 .hero-glow::before {
   content: "";
diff --git a/apps/web/src/ui/landing/footer.tsx b/apps/web/src/ui/landing/footer.tsx
index bfb486a..0990dee 100644
--- a/apps/web/src/ui/landing/footer.tsx
+++ b/apps/web/src/ui/landing/footer.tsx
@@ -162,7 +162,10 @@ export function Footer() {
           <span className="flex items-center gap-2">
             <span
               className="inline-block h-[5px] w-[5px] rounded-full bg-emerald-400"
-              style={{ animation: "pulseDot 2s ease-in-out infinite" }}
+              style={{ 
+                animation: "pulseDot var(--duration-slow) var(--ease-smooth) infinite",
+                animationDuration: "2s" 
+              }}
             />
             Mainnet · block 84,218,402
           </span>
diff --git a/apps/web/src/ui/landing/hero.tsx b/apps/web/src/ui/landing/hero.tsx
index d10736e..30ca46c 100644
--- a/apps/web/src/ui/landing/hero.tsx
+++ b/apps/web/src/ui/landing/hero.tsx
@@ -245,7 +245,10 @@ export function Hero() {
           <span className="font-mono-num inline-flex items-center gap-2.5 border border-border bg-card/50 px-3 py-1.5 text-11-5 uppercase tracking-[0.14em] text-muted-foreground">
             <span
               className="inline-block h-1.5 w-1.5 rounded-full bg-primary shadow-[0_0_8px_var(--color-primary)]"
-              style={{ animation: "pulseDot 2.4s ease-in-out infinite" }}
+              style={{ 
+                animation: "pulseDot var(--duration-slow) var(--ease-smooth) infinite",
+                animationDuration: "2.4s"
+              }}
             />
             Mainnet · v1.4 · Lagos UTC+1
           </span>
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index e41c6b3..ab495ba 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -88,6 +88,30 @@
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    
+    /*
+     * Motion duration and easing tokens (DS-010).
+     *
+     * Standardizes timing for micro-interactions, panel transitions, and page-level animations.
+     * All motion respects prefers-reduced-motion to ensure accessibility.
+     * 
+     * Duration scale:
+     * - fast (150ms):   Micro-interactions (hover states, focus rings, tooltips)
+     * - normal (250ms): Standard UI transitions (dropdowns, modals, tab switches)
+     * - slow (400ms):   Page-level animations (drawer slides, route transitions)
+     *
+     * Easing functions:
+     * - ease-smooth:    General purpose for most UI transitions
+     * - ease-bounce:    Playful interactions, attention-grabbing elements
+     *
+     * Usage: duration-fast, duration-normal, duration-slow, ease-smooth, ease-bounce
+     */
+    --duration-fast: 150ms;     /* Micro-interactions: hover, focus, tooltips */
+    --duration-normal: 250ms;   /* UI transitions: dropdowns, modals, tabs */
+    --duration-slow: 400ms;     /* Page animations: drawers, route changes */
+    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);  /* Default easing for smooth transitions */
+    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Playful bounce effect */
+    
     --font-sans: 'Geist Variable', sans-serif;
 
     /*