diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
index ab7d029..73f3e65 100644
--- a/packages/docs/src/css/custom.css
+++ b/packages/docs/src/css/custom.css
@@ -4,29 +4,144 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+/* Import Hoverkraft brand fonts */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap");
+
+/* Hoverkraft modern color palette */
 :root {
-  --ifm-color-primary: #007acc;
-  --ifm-color-primary-dark: #006bb3;
-  --ifm-color-primary-darker: #0066aa;
-  --ifm-color-primary-darkest: #005588;
-  --ifm-color-primary-light: #0088d4;
-  --ifm-color-primary-lighter: #0099ee;
-  --ifm-color-primary-lightest: #00aaff;
+  /* Hoverkraft brand colors */
+  --hk-primary: #1d2026;
+  --hk-secondary: #1998ff;
+  --hk-accent: #ff5a02;
+  --hk-info: #00b3ff;
+  --hk-warning: #ffe671;
+  --hk-danger: #ff696d;
+  --hk-success: #00d663;
+  --hk-light: #506690;
+  --hk-dark: #000000;
+
+  /* Docusaurus theme variables using Hoverkraft colors */
+  --ifm-color-primary: #1998ff;
+  --ifm-color-primary-dark: #0585e6;
+  --ifm-color-primary-darker: #0580db;
+  --ifm-color-primary-darkest: #046ab5;
+  --ifm-color-primary-light: #33abff;
+  --ifm-color-primary-lighter: #40b0ff;
+  --ifm-color-primary-lightest: #66c2ff;
+
+  /* Secondary colors */
+  --ifm-color-secondary: #ff5a02;
+  --ifm-color-info: #00b3ff;
+  --ifm-color-success: #00d663;
+  --ifm-color-warning: #ffe671;
+  --ifm-color-danger: #ff696d;
+
+  /* Typography */
+  --ifm-font-family-base:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+  --ifm-font-family-monospace: "Roboto Mono", "Monaco", "Consolas", "Courier New", monospace;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  /* Background and text colors */
+  --ifm-background-color: #ffffff;
+  --ifm-navbar-background-color: #ffffff;
+  --ifm-footer-background-color: #1d2026;
+  --ifm-footer-color: #ffffff;
+
+  /* Code highlighting */
+  --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.1);
+
+  /* Custom properties for components */
+  --ifm-navbar-shadow: 0 1px 3px rgba(29, 32, 38, 0.1);
+  --ifm-button-border-radius: 8px;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark mode colors using Hoverkraft palette */
 [data-theme="dark"] {
-  --ifm-color-primary: #00aaff;
-  --ifm-color-primary-dark: #0099ee;
-  --ifm-color-primary-darker: #0088d4;
-  --ifm-color-primary-darkest: #007acc;
-  --ifm-color-primary-light: #1bb5ff;
-  --ifm-color-primary-lighter: #33c0ff;
-  --ifm-color-primary-lightest: #66d1ff;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary: #1998ff;
+  --ifm-color-primary-dark: #0585e6;
+  --ifm-color-primary-darker: #0580db;
+  --ifm-color-primary-darkest: #046ab5;
+  --ifm-color-primary-light: #33abff;
+  --ifm-color-primary-lighter: #40b0ff;
+  --ifm-color-primary-lightest: #66c2ff;
+
+  /* Dark theme background */
+  --ifm-background-color: #1d2026;
+  --ifm-background-surface-color: #252832;
+
+  /* Dark theme text */
+  --ifm-font-color-base: #ffffff;
+  --ifm-font-color-secondary: #506690;
+
+  /* Dark theme navbar */
+  --ifm-navbar-background-color: #252832;
+  --ifm-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+  /* Code highlighting for dark mode */
+  --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.2);
+}
+
+/* Enhanced button styles with Hoverkraft branding */
+.button--primary {
+  background: linear-gradient(45deg, #1998ff, #ff5a02);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.button--primary:hover {
+  background: linear-gradient(45deg, #0585e6, #e64a00);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(25, 152, 255, 0.3);
+}
+
+/* Navbar enhancements */
+.navbar {
+  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.95) !important;
+}
+
+[data-theme="dark"] .navbar {
+  background: rgba(37, 40, 50, 0.95) !important;
+}
+
+/* Footer styling with Hoverkraft colors */
+.footer--dark {
+  background: linear-gradient(135deg, #1d2026 0%, #252832 100%);
+}
+
+/* Custom link colors */
+a {
+  color: #1998ff;
+}
+
+a:hover {
+  color: #ff5a02;
+  text-decoration: none;
+}
+
+/* Enhanced focus states for accessibility */
+button:focus,
+.button:focus,
+a:focus {
+  outline: 2px solid #1998ff;
+  outline-offset: 2px;
+}
+
+/* Code block enhancements */
+.prism-code {
+  border-radius: 8px;
+}
+
+/* Table of contents styling */
+.table-of-contents__link {
+  color: #506690;
+}
+
+.table-of-contents__link:hover,
+.table-of-contents__link--active {
+  color: #1998ff;
 }
 
 /* Demo styles for showcasing theme features */
@@ -63,9 +178,9 @@
 }
 
 .color-swatch--secondary {
-  background-color: var(--hk-color-secondary, #6c757d);
+  background-color: var(--ifm-color-secondary);
 }
 
 .color-swatch--accent {
-  background-color: var(--hk-color-accent, #ff6b35);
+  background-color: var(--hk-accent);
 }
diff --git a/packages/docs/src/pages/index.module.css b/packages/docs/src/pages/index.module.css
index 2a4a5ae..d48bb97 100644
--- a/packages/docs/src/pages/index.module.css
+++ b/packages/docs/src/pages/index.module.css
@@ -1,9 +1,5 @@
 :root {
-  --homepage-hero-gradient: linear-gradient(
-    135deg,
-    rgba(0, 122, 204, 0.95) 0%,
-    rgba(0, 170, 255, 0.95) 100%
-  );
+  --homepage-hero-gradient: linear-gradient(135deg, #1d2026 0%, #506690 50%, #1998ff 100%);
 }
 
 .heroBanner {
@@ -20,6 +16,18 @@
   overflow: hidden;
 }
 
+.heroBanner::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+  opacity: 0.2;
+  pointer-events: none;
+}
+
 .heroBanner::after {
   content: "";
   position: absolute;
@@ -48,6 +56,17 @@
   color: rgba(255, 255, 255, 0.92);
 }
 
+/* Respect user motion preferences for animations */
+@media (prefers-reduced-motion: no-preference) {
+  .heroTitle {
+    animation: fadeInUp 0.6s ease-out backwards;
+  }
+
+  .heroSubtitle {
+    animation: fadeInUp 0.7s ease-out 0.1s backwards;
+  }
+}
+
 .heroButtons {
   display: flex;
   flex-wrap: wrap;
@@ -57,6 +76,21 @@
 
 .heroButtons a {
   min-width: 190px;
+  transition: all 0.3s ease;
+}
+
+/* Respect user motion preferences for hover effects */
+@media (prefers-reduced-motion: no-preference) {
+  .heroButtons a:hover {
+    transform: translateY(-2px);
+  }
+}
+
+/* Respect user motion preferences for animations */
+@media (prefers-reduced-motion: no-preference) {
+  .heroButtons {
+    animation: fadeInUp 0.8s ease-out 0.3s backwards;
+  }
 }
 
 .section {
@@ -87,8 +121,9 @@
   border-radius: calc(var(--ifm-global-radius) * 1.5);
   padding: 1.75rem;
   transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
+    transform 0.3s ease,
+    box-shadow 0.3s ease,
+    border-color 0.3s ease;
   background: var(--ifm-color-content-secondary, #ffffff);
 }
 
@@ -99,7 +134,38 @@
 
 .featureCard:hover {
   transform: translateY(-4px);
-  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 16px 30px rgba(25, 152, 255, 0.2);
+  border-color: #1998ff;
+}
+
+/* Respect user motion preferences for animations */
+@media (prefers-reduced-motion: no-preference) {
+  .featureCard {
+    animation: fadeInUp 0.6s ease-out backwards;
+  }
+
+  .featureCard:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+
+  .featureCard:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .featureCard:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .featureTitle {
@@ -127,6 +193,32 @@
   position: relative;
   overflow: hidden;
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  transition: all 0.3s ease;
+}
+
+/* Respect user motion preferences for animations and hover effects */
+@media (prefers-reduced-motion: no-preference) {
+  .swatch {
+    animation: fadeInUp 0.6s ease-out backwards;
+    will-change: transform;
+  }
+
+  .swatch:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+
+  .swatch:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+
+  .swatch:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+
+  .swatch:hover {
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
+  }
 }
 
 .swatch span {
@@ -163,14 +255,14 @@
   margin-top: 4rem;
   padding: 2rem;
   border-radius: calc(var(--ifm-global-radius) * 1.5);
-  background: rgba(0, 122, 204, 0.1);
-  border: 1px solid rgba(0, 122, 204, 0.2);
+  background: linear-gradient(135deg, rgba(25, 152, 255, 0.1), rgba(255, 90, 2, 0.05));
+  border: 1px solid rgba(25, 152, 255, 0.3);
   text-align: center;
 }
 
 [data-theme="dark"] .callout {
-  background: rgba(0, 170, 255, 0.1);
-  border-color: rgba(0, 170, 255, 0.2);
+  background: linear-gradient(135deg, rgba(25, 152, 255, 0.15), rgba(255, 90, 2, 0.1));
+  border-color: rgba(25, 152, 255, 0.4);
 }
 
 .calloutTitle {
diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx
index 21f1803..8c33f7a 100644
--- a/packages/docs/src/pages/index.tsx
+++ b/packages/docs/src/pages/index.tsx
@@ -17,9 +17,8 @@ const FeatureList: FeatureItem[] = [
     emoji: "🎨",
     description: (
       <>
-        Fully own the visual identity of your documentation with curated color
-        palettes, typography scales, and polished spacing tokens that make every
-        page look editorial-ready.
+        Fully own the visual identity of your documentation with curated color palettes, typography
+        scales, and polished spacing tokens that make every page look editorial-ready.
       </>
     ),
   },
@@ -28,9 +27,8 @@ const FeatureList: FeatureItem[] = [
     emoji: "🧱",
     description: (
       <>
-        Ship faster with Layout, Logo, and Footer components that balance
-        personality and usability. Every piece is theme-able, accessible, and
-        ready to extend.
+        Ship faster with Layout, Logo, and Footer components that balance personality and usability.
+        Every piece is theme-able, accessible, and ready to extend.
       </>
     ),
   },
@@ -39,9 +37,8 @@ const FeatureList: FeatureItem[] = [
     emoji: "⚡️",
     description: (
       <>
-        Built on the latest Docusaurus 3 stack with TypeScript definitions,
-        automated validation, and thoughtful defaults so you can iterate with
-        confidence.
+        Built on the latest Docusaurus 3 stack with TypeScript definitions, automated validation,
+        and thoughtful defaults so you can iterate with confidence.
       </>
     ),
   },
@@ -65,19 +62,19 @@ const colorSwatches = [
   {
     name: "Primary",
     token: "var(--ifm-color-primary)",
-    fallback: "#007acc",
+    fallback: "#1998ff",
     description: "Call-to-action buttons and highlights",
   },
   {
     name: "Secondary",
-    token: "var(--hk-color-secondary, #6c757d)",
-    fallback: "#6c757d",
+    token: "var(--hk-color-secondary, #ff5a02)",
+    fallback: "#ff5a02",
     description: "Navigation and supportive accents",
   },
   {
     name: "Accent",
-    token: "var(--hk-color-accent, #ff6b35)",
-    fallback: "#ff6b35",
+    token: "var(--hk-color-accent, #ff5a02)",
+    fallback: "#ff5a02",
     description: "Interactive elements and emphasis",
   },
 ];
@@ -116,26 +113,17 @@ export default function Home(): JSX.Element {
       <main>
         <section className={clsx(styles.section, styles.heroBanner)}>
           <div className={styles.heroContent}>
-            <h1 className={styles.heroTitle}>
-              Hoverkraft Theme for Docusaurus
-            </h1>
+            <h1 className={styles.heroTitle}>Hoverkraft Theme for Docusaurus</h1>
             <p className={styles.heroSubtitle}>
-              Craft documentation that feels premium out-of-the-box. The
-              Hoverkraft theme blends an opinionated visual system with
-              pragmatic components that stay out of your way and let your
-              content shine.
+              Craft documentation that feels premium out-of-the-box. The Hoverkraft theme blends an
+              opinionated visual system with pragmatic components that stay out of your way and let
+              your content shine.
             </p>
             <div className={styles.heroButtons}>
-              <Link
-                className="button button--primary button--lg"
-                to="/docs/getting-started"
-              >
+              <Link className="button button--primary button--lg" to="/docs/getting-started">
                 Start building
               </Link>
-              <Link
-                className="button button--secondary button--lg"
-                to="/docs/components/layout"
-              >
+              <Link className="button button--secondary button--lg" to="/docs/components/layout">
                 Explore components
               </Link>
               <Link className="button button--outline button--lg" to="/blog">
@@ -147,13 +135,10 @@ export default function Home(): JSX.Element {
 
         <section className={styles.section}>
           <div className="container">
-            <h2 className={styles.sectionTitle}>
-              Everything your docs need to stand out
-            </h2>
+            <h2 className={styles.sectionTitle}>Everything your docs need to stand out</h2>
             <p className={styles.sectionSubtitle}>
-              We distilled years of product storytelling into a reusable design
-              system that works for launches, integrations, and long-form
-              documentation.
+              We distilled years of product storytelling into a reusable design system that works
+              for launches, integrations, and long-form documentation.
             </p>
             <div className={styles.features}>
               {FeatureList.map((props) => (
@@ -167,9 +152,8 @@ export default function Home(): JSX.Element {
           <div className="container">
             <h2 className={styles.sectionTitle}>Color system ready to remix</h2>
             <p className={styles.sectionSubtitle}>
-              Update three CSS variables and the entire site adapts—from hero
-              gradients to code blocks and footers—while respecting
-              accessibility contrast ratios.
+              Update three CSS variables and the entire site adapts—from hero gradients to code
+              blocks and footers—while respecting accessibility contrast ratios.
             </p>
             <div className={styles.palette}>
               {colorSwatches.map((swatch) => (
@@ -191,46 +175,32 @@ export default function Home(): JSX.Element {
           <div className="container">
             <h2 className={styles.sectionTitle}>Built for modern teams</h2>
             <p className={styles.sectionSubtitle}>
-              Every detail—from TypeScript support to content structure—was
-              designed to keep teams shipping purposeful, consistent
-              documentation.
+              Every detail—from TypeScript support to content structure—was designed to keep teams
+              shipping purposeful, consistent documentation.
             </p>
             <div className={styles.integrationList}>
               {integrationHighlights.map(({ title, copy }) => (
                 <div key={title} className={styles.integrationCard}>
-                  <h3 style={{ marginBottom: "0.5rem", fontSize: "1.1rem" }}>
-                    {title}
-                  </h3>
+                  <h3 style={{ marginBottom: "0.5rem", fontSize: "1.1rem" }}>{title}</h3>
                   <p style={{ margin: 0 }}>{copy}</p>
                 </div>
               ))}
             </div>
             <div className={styles.callout}>
-              <h3 className={styles.calloutTitle}>
-                Ready to bring Hoverkraft to your docs?
-              </h3>
+              <h3 className={styles.calloutTitle}>Ready to bring Hoverkraft to your docs?</h3>
               <p>
-                Follow the installation guide, wire up the theme config, and
-                customize the layout in minutes. We included live examples,
-                copy-ready snippets, and a migration path for existing sites.
+                Follow the installation guide, wire up the theme config, and customize the layout in
+                minutes. We included live examples, copy-ready snippets, and a migration path for
+                existing sites.
               </p>
               <div className={styles.calloutButtons}>
-                <Link
-                  className="button button--primary button--lg"
-                  to="/docs/installation"
-                >
+                <Link className="button button--primary button--lg" to="/docs/installation">
                   Install the theme
                 </Link>
-                <Link
-                  className="button button--secondary button--lg"
-                  to="/docs/configuration"
-                >
+                <Link className="button button--secondary button--lg" to="/docs/configuration">
                   Configure Hoverkraft
                 </Link>
-                <Link
-                  className="button button--outline button--lg"
-                  to="/docs/migration"
-                >
+                <Link className="button button--outline button--lg" to="/docs/migration">
                   Migrate an existing site
                 </Link>
               </div>
diff --git a/packages/theme/src/theme/Footer/index.tsx b/packages/theme/src/theme/Footer/index.tsx
index 7b05206..4948b1f 100644
--- a/packages/theme/src/theme/Footer/index.tsx
+++ b/packages/theme/src/theme/Footer/index.tsx
@@ -1,15 +1,51 @@
+import type React from "react";
+
 import "./styles.css";
 
+function HoverkraftLogo(): React.ReactElement {
+  return (
+    <svg
+      className="hoverkraft-footer__logo"
+      viewBox="0 0 200 60"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-label="Hoverkraft Logo"
+    >
+      <defs>
+        <linearGradient id="logoGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stopColor="#1998ff" />
+          <stop offset="100%" stopColor="#ff5a02" />
+        </linearGradient>
+      </defs>
+      {/* Stylized "H" icon */}
+      <rect x="10" y="15" width="8" height="30" fill="url(#logoGradient)" rx="2" />
+      <rect x="32" y="15" width="8" height="30" fill="url(#logoGradient)" rx="2" />
+      <rect x="18" y="27" width="14" height="6" fill="url(#logoGradient)" rx="2" />
+      {/* Text "Hoverkraft" */}
+      <text
+        x="55"
+        y="38"
+        fontFamily="Inter, sans-serif"
+        fontSize="24"
+        fontWeight="700"
+        fill="#ffffff"
+      >
+        Hoverkraft
+      </text>
+    </svg>
+  );
+}
+
 export default function HoverkraftFooter(): JSX.Element {
   return (
-    <footer className="hoverkraft-footer">
+    <footer className="hoverkraft-footer" role="contentinfo">
       <div className="hoverkraft-footer__content">
-        <div className="hoverkraft-footer__section">
-          <h4>Hoverkraft</h4>
+        <div className="hoverkraft-footer__section hoverkraft-footer__brand">
+          <HoverkraftLogo />
           <p>Building the future of technology.</p>
         </div>
 
-        <div className="hoverkraft-footer__section">
+        <nav className="hoverkraft-footer__section" aria-label="Resources">
           <h4>Resources</h4>
           <ul className="hoverkraft-footer__links">
             <li>
@@ -22,9 +58,9 @@ export default function HoverkraftFooter(): JSX.Element {
               <a href="/community">Community</a>
             </li>
           </ul>
-        </div>
+        </nav>
 
-        <div className="hoverkraft-footer__section">
+        <nav className="hoverkraft-footer__section" aria-label="Company">
           <h4>Company</h4>
           <ul className="hoverkraft-footer__links">
             <li>
@@ -37,7 +73,7 @@ export default function HoverkraftFooter(): JSX.Element {
               <a href="/contact">Contact</a>
             </li>
           </ul>
-        </div>
+        </nav>
       </div>
 
       <div className="hoverkraft-footer__bottom">
diff --git a/packages/theme/src/theme/Footer/styles.css b/packages/theme/src/theme/Footer/styles.css
index cd4c46a..1382a0e 100644
--- a/packages/theme/src/theme/Footer/styles.css
+++ b/packages/theme/src/theme/Footer/styles.css
@@ -1,8 +1,21 @@
 .hoverkraft-footer {
-  background: linear-gradient(135deg, var(--hk-color-dark) 0%, #000 100%);
+  background: linear-gradient(135deg, #1d2026 0%, #252832 100%);
   color: var(--hk-color-light);
-  padding: 2rem 0;
+  padding: 3rem 0 1.5rem;
   border-top: 3px solid var(--hk-color-primary);
+  position: relative;
+}
+
+.hoverkraft-footer::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+  opacity: 0.3;
+  pointer-events: none;
 }
 
 .hoverkraft-footer__content {
@@ -12,6 +25,28 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 2rem;
+  position: relative;
+  z-index: 1;
+}
+
+.hoverkraft-footer__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.hoverkraft-footer__logo {
+  height: 50px;
+  width: auto;
+  max-width: 200px;
+  transition: transform 0.3s ease;
+}
+
+/* Respect user motion preferences for logo animation */
+@media (prefers-reduced-motion: no-preference) {
+  .hoverkraft-footer__logo:hover {
+    transform: scale(1.05);
+  }
 }
 
 .hoverkraft-footer__section h4 {
@@ -24,7 +59,7 @@
 .hoverkraft-footer__section p {
   margin-bottom: 0.5rem;
   color: rgba(248, 249, 250, 0.8);
-  line-height: 1.5;
+  line-height: 1.6;
 }
 
 .hoverkraft-footer__links {
@@ -40,18 +75,27 @@
 .hoverkraft-footer__links a {
   color: rgba(248, 249, 250, 0.8);
   text-decoration: none;
-  transition: color 0.2s ease;
+  transition: all 0.3s ease;
+  display: inline-block;
 }
 
 .hoverkraft-footer__links a:hover {
   color: var(--hk-color-primary);
+  transform: translateX(4px);
+}
+
+.hoverkraft-footer__links a:focus {
+  outline: 2px solid var(--hk-color-primary);
+  outline-offset: 2px;
 }
 
 .hoverkraft-footer__bottom {
   border-top: 1px solid rgba(248, 249, 250, 0.1);
   margin-top: 2rem;
-  padding-top: 1rem;
+  padding-top: 1.5rem;
   text-align: center;
+  position: relative;
+  z-index: 1;
 }
 
 .hoverkraft-footer__bottom p {
@@ -62,7 +106,7 @@
 
 @media (max-width: 768px) {
   .hoverkraft-footer {
-    padding: 1.5rem 0;
+    padding: 2rem 0 1rem;
   }
 
   .hoverkraft-footer__content {
diff --git a/packages/theme/src/theme/Layout/index.tsx b/packages/theme/src/theme/Layout/index.tsx
index b123d2f..25a3ebc 100644
--- a/packages/theme/src/theme/Layout/index.tsx
+++ b/packages/theme/src/theme/Layout/index.tsx
@@ -42,22 +42,24 @@ export default function HoverkraftLayout(props: Props): JSX.Element {
 
   return (
     <LayoutProvider>
-      <PageMetadata
-        title={title}
-        description={description}
-        keywords={keywords}
-        image={image}
-      />
+      <PageMetadata title={title} description={description} keywords={keywords} image={image} />
 
       <div className={containerClassName}>
+        {/* Skip to content link for accessibility */}
+        <a href="#main-content" className="skip-to-content">
+          Skip to main content
+        </a>
+
         <div className="hoverkraft-layout">
           {!noNavbar && (
-            <header className={cx("hoverkraft-header", "navbar")}>
+            <header className={cx("hoverkraft-header", "navbar")} role="banner">
               <HoverkraftLogo />
               <h1>{heading}</h1>
             </header>
           )}
-          <main className={mainClassName}>{children}</main>
+          <main id="main-content" className={mainClassName} role="main">
+            {children}
+          </main>
           {!noFooter && <HoverkraftFooter />}
         </div>
       </div>
diff --git a/packages/theme/src/theme/Layout/styles.css b/packages/theme/src/theme/Layout/styles.css
index 53d2297..63bf812 100644
--- a/packages/theme/src/theme/Layout/styles.css
+++ b/packages/theme/src/theme/Layout/styles.css
@@ -1,33 +1,85 @@
 /* Hoverkraft Theme Branding Styles */
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Roboto+Mono:wght@400;500;600;700&display=swap");
+
+/* Global smooth scrolling - respecting user preferences */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
+}
 
 :root {
-  /* Hoverkraft Color Palette */
-  --hk-color-primary: #007acc;
-  --hk-color-secondary: #6c757d;
-  --hk-color-accent: #ff6b35;
-  --hk-color-dark: #1a1a1a;
+  /* Hoverkraft Modern Color Palette */
+  --hk-color-primary: #1998ff;
+  --hk-color-secondary: #ff5a02;
+  --hk-color-accent: #ff5a02;
+  --hk-color-dark: #1d2026;
   --hk-color-light: #f8f9fa;
+  --hk-color-info: #00b3ff;
+  --hk-color-success: #00d663;
+  --hk-color-warning: #ffe671;
+  --hk-color-danger: #ff696d;
+  --hk-color-gray: #506690;
 
   /* Override Docusaurus default colors with Hoverkraft branding */
-  --ifm-color-primary: var(--hk-color-primary);
-  --ifm-color-primary-dark: #006bb3;
-  --ifm-color-primary-darker: #0066aa;
-  --ifm-color-primary-darkest: #005588;
-  --ifm-color-primary-light: #0088d4;
-  --ifm-color-primary-lighter: #0099ee;
-  --ifm-color-primary-lightest: #00aaff;
+  --ifm-color-primary: #1998ff;
+  --ifm-color-primary-dark: #0585e6;
+  --ifm-color-primary-darker: #0580db;
+  --ifm-color-primary-darkest: #046ab5;
+  --ifm-color-primary-light: #33abff;
+  --ifm-color-primary-lighter: #40b0ff;
+  --ifm-color-primary-lightest: #66c2ff;
 
   /* Secondary colors */
-  --ifm-color-secondary: var(--hk-color-secondary);
-  --ifm-color-info: var(--hk-color-primary);
-  --ifm-color-warning: var(--hk-color-accent);
+  --ifm-color-secondary: #ff5a02;
+  --ifm-color-info: #00b3ff;
+  --ifm-color-success: #00d663;
+  --ifm-color-warning: #ffe671;
+  --ifm-color-danger: #ff696d;
 
   /* Typography */
   --ifm-font-family-base:
-    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", sans-serif;
-  --ifm-font-family-monospace:
-    "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Courier New", monospace;
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+  --ifm-font-family-monospace: "Roboto Mono", "Monaco", "Consolas", "Courier New", monospace;
+  --ifm-code-font-size: 95%;
+
+  /* Background and surface colors */
+  --ifm-background-color: #ffffff;
+  --ifm-navbar-background-color: #ffffff;
+  --ifm-footer-background-color: #1d2026;
+  --ifm-footer-color: #ffffff;
+
+  /* Enhanced UI elements */
+  --ifm-navbar-shadow: 0 1px 3px rgba(29, 32, 38, 0.1);
+  --ifm-button-border-radius: 8px;
+  --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.1);
+}
+
+/* Dark mode colors */
+[data-theme="dark"] {
+  --ifm-color-primary: #1998ff;
+  --ifm-color-primary-dark: #0585e6;
+  --ifm-color-primary-darker: #0580db;
+  --ifm-color-primary-darkest: #046ab5;
+  --ifm-color-primary-light: #33abff;
+  --ifm-color-primary-lighter: #40b0ff;
+  --ifm-color-primary-lightest: #66c2ff;
+
+  /* Dark theme background */
+  --ifm-background-color: #1d2026;
+  --ifm-background-surface-color: #252832;
+
+  /* Dark theme text */
+  --ifm-font-color-base: #ffffff;
+  --ifm-font-color-secondary: #506690;
+
+  /* Dark theme navbar */
+  --ifm-navbar-background-color: #252832;
+  --ifm-navbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+
+  /* Code highlighting for dark mode */
+  --docusaurus-highlighted-code-line-bg: rgba(25, 152, 255, 0.2);
 }
 
 .hoverkraft-theme {
@@ -41,36 +93,56 @@
 }
 
 .hoverkraft-header {
-  background-color: var(--hk-color-primary);
-  color: white;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  color: var(--hk-color-dark);
   padding: 1rem 2rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--ifm-navbar-shadow);
   display: flex;
   align-items: center;
   gap: 1rem;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+[data-theme="dark"] .hoverkraft-header {
+  background: rgba(37, 40, 50, 0.95);
+  color: white;
 }
 
 .hoverkraft-header h1 {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
+  background: linear-gradient(45deg, var(--hk-color-primary), var(--hk-color-secondary));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .hoverkraft-main {
   flex: 1;
   padding: 2rem;
-  background-color: var(--hk-color-light);
+  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+}
+
+[data-theme="dark"] .hoverkraft-main {
+  background: linear-gradient(180deg, #1d2026 0%, #252832 100%);
 }
 
 /* Custom button styles with Hoverkraft branding */
 .button--primary {
-  background-color: var(--hk-color-primary);
-  border-color: var(--hk-color-primary);
+  background: linear-gradient(45deg, var(--hk-color-primary), var(--hk-color-secondary));
+  border: none;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 15px rgba(25, 152, 255, 0.3);
 }
 
 .button--primary:hover {
-  background-color: var(--ifm-color-primary-dark);
-  border-color: var(--ifm-color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 8px 25px rgba(25, 152, 255, 0.4);
 }
 
 /* Logo styles */
@@ -79,22 +151,85 @@
   align-items: center;
   text-decoration: none;
   color: inherit;
+  transition: all 0.3s ease;
 }
 
 .hoverkraft-logo:hover {
   text-decoration: none;
   color: inherit;
+  transform: scale(1.05);
 }
 
 .hoverkraft-logo__image {
   height: 32px;
   width: auto;
+  transition: transform 0.3s ease;
+}
+
+.hoverkraft-logo:hover .hoverkraft-logo__image {
+  transform: rotate(-5deg) scale(1.1);
 }
 
 .hoverkraft-logo--text .hoverkraft-logo__text {
   font-size: 1.25rem;
   font-weight: 700;
+  background: linear-gradient(45deg, var(--hk-color-primary), var(--hk-color-secondary));
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-size: 200% 200%;
+}
+
+/* Respect user motion preferences for animations */
+@media (prefers-reduced-motion: no-preference) {
+  .hoverkraft-logo--text .hoverkraft-logo__text {
+    animation: gradient-shift 3s ease infinite;
+  }
+}
+
+@keyframes gradient-shift {
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Enhanced link colors and focus states for accessibility */
+a {
+  color: var(--hk-color-primary);
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: var(--hk-color-secondary);
+  text-decoration: none;
+}
+
+/* Accessibility: Enhanced focus states */
+button:focus,
+.button:focus,
+a:focus {
+  outline: 2px solid var(--hk-color-primary);
+  outline-offset: 2px;
+}
+
+/* Skip to content link for accessibility */
+.skip-to-content {
+  position: absolute;
+  top: -40px;
+  left: 0;
+  background: var(--hk-color-primary);
   color: white;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  z-index: 100;
+}
+
+.skip-to-content:focus {
+  top: 0;
 }
 
 /* Responsive design */
diff --git a/packages/theme/src/theme/Logo/index.tsx b/packages/theme/src/theme/Logo/index.tsx
index b40a3b8..1159bc6 100644
--- a/packages/theme/src/theme/Logo/index.tsx
+++ b/packages/theme/src/theme/Logo/index.tsx
@@ -1,6 +1,6 @@
 export default function HoverkraftLogo(): JSX.Element {
   return (
-    <a href="/" className="hoverkraft-logo hoverkraft-logo--text">
+    <a href="/" className="hoverkraft-logo hoverkraft-logo--text" aria-label="Hoverkraft Home">
       <span className="hoverkraft-logo__text">Hoverkraft</span>
     </a>
   );