diff --git a/apps/web/src/components/Breadcrumbs.astro b/apps/web/src/components/Breadcrumbs.astro
index 24117e3..afd0d53 100644
--- a/apps/web/src/components/Breadcrumbs.astro
+++ b/apps/web/src/components/Breadcrumbs.astro
@@ -20,7 +20,7 @@ const { items } = Astro.props;
       return (
         <li class:list={['flex items-center gap-1', isMiddle && 'breadcrumb-middle']}>
           {index > 0 && (
-            <span class:list={['text-gray-400 dark:text-gray-600', isMiddle && 'breadcrumb-middle']} aria-hidden="true">&gt;</span>
+            <span class:list={['text-gray-400 dark:text-gray-600', isMiddle && 'breadcrumb-middle']} aria-hidden="true">›</span>
           )}
           {isLast || !item.href ? (
             <span class="text-gray-900 dark:text-gray-100" aria-current={isLast ? "page" : undefined}>
diff --git a/apps/web/src/layouts/BaseLayout.astro b/apps/web/src/layouts/BaseLayout.astro
index 1a8d545..a2fdcc1 100644
--- a/apps/web/src/layouts/BaseLayout.astro
+++ b/apps/web/src/layouts/BaseLayout.astro
@@ -61,13 +61,13 @@ const titleEntries = Object.entries(TITLE_NAMES)
       })();
     </script>
   </head>
-  <body class="h-full bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
+  <body class="h-full bg-warm-white text-slate dark:bg-navy-dark dark:text-gray-100">
     <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded focus:bg-navy focus:px-4 focus:py-2 focus:text-white focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-navy">
       Skip to content
     </a>
     <div class="flex h-full flex-col lg:flex-row">
       <!-- Sidebar -->
-      <aside class="w-full border-b border-gray-200 bg-gray-50 font-sans lg:w-64 lg:flex-shrink-0 lg:border-b-0 lg:border-r dark:border-gray-800 dark:bg-gray-900 lg:flex lg:flex-col lg:h-full">
+      <aside class="w-full border-b border-gray-200 bg-warm-gray font-sans lg:w-64 lg:flex-shrink-0 lg:border-b-0 lg:border-r dark:border-gray-800 dark:bg-[#0B1926] lg:flex lg:flex-col lg:h-full">
         <div class="flex items-center justify-between p-4 lg:flex-col lg:items-start lg:gap-4">
           <a href={base} class="text-lg font-bold text-navy dark:text-amber">
             US Code Tracker
diff --git a/apps/web/src/pages/statute/[...slug].astro b/apps/web/src/pages/statute/[...slug].astro
index aef9c1f..151089e 100644
--- a/apps/web/src/pages/statute/[...slug].astro
+++ b/apps/web/src/pages/statute/[...slug].astro
@@ -287,16 +287,20 @@ const readingTimeMin = Math.max(1, Math.round(wordCount / 200));
     </aside>
   </div>
 
-  <!-- Prev / Next section navigation -->
-  <nav class="not-prose mt-8 flex items-center justify-between border-t border-gray-200 pt-4 font-sans text-sm dark:border-gray-800" aria-label="Section navigation">
+  <!-- Prev / Next section navigation with title previews -->
+  <nav class="not-prose mt-8 flex items-center justify-between border-t border-gray-200 pt-4 font-sans dark:border-gray-800" aria-label="Section navigation">
     {prevSection ? (
-      <a href={`${base}statute/${prevSection.id}/`} class="flex items-center gap-1 text-teal hover:underline">
-        <span aria-hidden="true">&larr;</span> &sect; {prevSection.data.usc_section}
+      <a href={`${base}statute/${prevSection.id}/`} class="flex flex-col gap-0.5 rounded-lg px-3 py-2 transition-colors hover:bg-warm-gray dark:hover:bg-gray-800 max-w-[45%]">
+        <span class="text-[11px] text-gray-400">&larr; Previous</span>
+        <span class="text-sm font-medium text-teal">&sect; {prevSection.data.usc_section}</span>
+        <span class="truncate text-xs text-gray-500">{prevSection.data.title.replace(/^Section \S+ - /, '')}</span>
       </a>
     ) : <span></span>}
     {nextSection ? (
-      <a href={`${base}statute/${nextSection.id}/`} class="flex items-center gap-1 text-teal hover:underline">
-        &sect; {nextSection.data.usc_section} <span aria-hidden="true">&rarr;</span>
+      <a href={`${base}statute/${nextSection.id}/`} class="flex flex-col items-end gap-0.5 rounded-lg px-3 py-2 transition-colors hover:bg-warm-gray dark:hover:bg-gray-800 max-w-[45%] ml-auto text-right">
+        <span class="text-[11px] text-gray-400">Next &rarr;</span>
+        <span class="text-sm font-medium text-teal">&sect; {nextSection.data.usc_section}</span>
+        <span class="truncate text-xs text-gray-500">{nextSection.data.title.replace(/^Section \S+ - /, '')}</span>
       </a>
     ) : <span></span>}
   </nav>
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 1ae4658..4170033 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -6,11 +6,20 @@
 @theme {
   --font-serif: "Georgia", "Times New Roman", serif;
   --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --color-navy: #1B3A5C;
-  --color-teal: #0D7377;
-  --color-teal-bright: #14a3a8;
-  --color-amber: #D4A843;
-  --color-slate: #4A5568;
+  /* USWDS-influenced civic palette */
+  --color-navy: #1A4480;
+  --color-navy-dark: #112F4E;
+  --color-navy-light: #D9E8F6;
+  --color-teal: #0F6E56;
+  --color-teal-bright: #70E8B1;
+  --color-amber: #C2850C;
+  --color-amber-light: #FEF0C8;
+  --color-crimson: #B50909;
+  --color-crimson-light: #FDE0DB;
+  --color-slate: #3D4551;
+  /* Warm neutrals — evokes legal publishing */
+  --color-warm-white: #FAFAF8;
+  --color-warm-gray: #F0EDE8;
 }
 
 /* Legal text readability — 19px desktop, 16px mobile */
@@ -160,3 +169,12 @@
   .prose ul { break-inside: auto; }
   a[href]::after { content: none !important; }
 }
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
