From 5b78cd98698f8847653dde42a86c23a464512743 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 15:32:59 -0500
Subject: [PATCH] docs(website): apply Warm Precision styling to all blog pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/website/blog/100-simulated-routers.html  | 21 ++++++++++---
 .../blog/500-devices-broke-the-api.html       | 29 ++++++++++++-----
 docs/website/blog/free-tier-cap.html          | 31 ++++++++++++++-----
 docs/website/blog/index.html                  | 21 ++++++++++---
 docs/website/blog/not-posting-on-reddit.html  | 31 ++++++++++++++-----
 docs/website/blog/not-stable-software.html    | 21 ++++++++++---
 docs/website/blog/what-you-can-do-today.html  | 21 ++++++++++---
 docs/website/blog/why-this-exists.html        | 21 ++++++++++---
 8 files changed, 153 insertions(+), 43 deletions(-)

diff --git a/docs/website/blog/100-simulated-routers.html b/docs/website/blog/100-simulated-routers.html
index c2bb89c..a26375e 100644
--- a/docs/website/blog/100-simulated-routers.html
+++ b/docs/website/blog/100-simulated-routers.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, NATS JetStream, message retention, load testing, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/100-simulated-routers.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -128,11 +143,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -223,8 +236,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/500-devices-broke-the-api.html b/docs/website/blog/500-devices-broke-the-api.html
index cc570d3..2f63caa 100644
--- a/docs/website/blog/500-devices-broke-the-api.html
+++ b/docs/website/blog/500-devices-broke-the-api.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, scaling, Docker, OOM, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/500-devices-broke-the-api.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -148,11 +163,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -237,11 +250,13 @@
   </main>
 
   <footer class="site-footer">
-    <div class="container">
+    <div class="footer-inner container">
       <div class="footer-brand">
-        <span style="display:flex;align-items:center;gap:8px;">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" style="flex-shrink:0">
+        <span class="footer-logo">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
             <rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
+            <rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
+            <rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
             <path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
             <path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
             <path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
@@ -258,8 +273,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/free-tier-cap.html b/docs/website/blog/free-tier-cap.html
index b625c7e..c1cd9f8 100644
--- a/docs/website/blog/free-tier-cap.html
+++ b/docs/website/blog/free-tier-cap.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, licensing, BSL, free tier, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/free-tier-cap.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -103,7 +118,7 @@
       max-width: 520px;
       display: block;
       margin: 0 auto 40px;
-      border-radius: 8px;
+      border-radius: 2px;
     }
     .blog-post ul {
       color: var(--text-secondary);
@@ -155,11 +170,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -233,11 +246,13 @@
   </main>
 
   <footer class="site-footer">
-    <div class="container">
+    <div class="footer-inner container">
       <div class="footer-brand">
-        <span style="display:flex;align-items:center;gap:8px;">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" style="flex-shrink:0">
+        <span class="footer-logo">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
             <rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
+            <rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
+            <rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
             <path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
             <path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
             <path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
@@ -254,8 +269,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/index.html b/docs/website/blog/index.html
index 697d9a1..3ba4427 100644
--- a/docs/website/blog/index.html
+++ b/docs/website/blog/index.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik blog, RouterOS fleet management, MSP blog, network management blog">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -22,6 +22,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-index {
       max-width: 720px;
@@ -107,11 +122,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -199,7 +212,7 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
-      <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
   </footer>
 
diff --git a/docs/website/blog/not-posting-on-reddit.html b/docs/website/blog/not-posting-on-reddit.html
index 3048c69..2166a5a 100644
--- a/docs/website/blog/not-posting-on-reddit.html
+++ b/docs/website/blog/not-posting-on-reddit.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="building in public, developer feedback, software development, Reddit, Hacker News, open source, indie software">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/not-posting-on-reddit.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -139,7 +154,7 @@
       max-width: 560px;
       margin: 32px auto;
       aspect-ratio: 16 / 9;
-      border-radius: 8px;
+      border-radius: 2px;
       overflow: hidden;
       background: #000;
       cursor: pointer;
@@ -222,11 +237,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -324,11 +337,13 @@
   </main>
 
   <footer class="site-footer">
-    <div class="container">
+    <div class="footer-inner container">
       <div class="footer-brand">
-        <span style="display:flex;align-items:center;gap:8px;">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" style="flex-shrink:0">
+        <span class="footer-logo">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="24" height="24" aria-hidden="true" style="vertical-align: middle; margin-right: 8px;">
             <rect x="2" y="2" width="60" height="60" rx="8" fill="none" stroke="#8B1A1A" stroke-width="2"/>
+            <rect x="6" y="6" width="52" height="52" rx="5" fill="none" stroke="#F5E6C8" stroke-width="1.5"/>
+            <rect x="8" y="8" width="48" height="48" rx="4" fill="#8B1A1A" opacity="0.15"/>
             <path d="M32 18 L46 32 L32 46 L18 32 Z" fill="#8B1A1A"/>
             <path d="M32 19 L38 32 L32 45 L26 32 Z" fill="#2A9D8F"/>
             <path d="M19 32 L32 26 L45 32 L32 38 Z" fill="#F5E6C8"/>
@@ -345,8 +360,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/not-stable-software.html b/docs/website/blog/not-stable-software.html
index e806f95..9e46f92 100644
--- a/docs/website/blog/not-stable-software.html
+++ b/docs/website/blog/not-stable-software.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, software development, stability, The Other Dude">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/not-stable-software.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -128,11 +143,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -215,8 +228,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/what-you-can-do-today.html b/docs/website/blog/what-you-can-do-today.html
index 096c9bb..c7bd3ee 100644
--- a/docs/website/blog/what-you-can-do-today.html
+++ b/docs/website/blog/what-you-can-do-today.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, RouterOS, MSP tools, The Other Dude, network management">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/what-you-can-do-today.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -128,11 +143,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -261,8 +274,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>
diff --git a/docs/website/blog/why-this-exists.html b/docs/website/blog/why-this-exists.html
index ee426a4..9ed0eea 100644
--- a/docs/website/blog/why-this-exists.html
+++ b/docs/website/blog/why-this-exists.html
@@ -8,7 +8,7 @@
   <meta name="keywords" content="MikroTik, fleet management, MSP, The Other Dude, open source, AI development">
   <meta name="author" content="The Other Dude">
   <meta name="robots" content="index, follow">
-  <meta name="theme-color" content="#111113">
+  <meta name="theme-color" content="#eae7de">
   <link rel="canonical" href="https://theotherdude.net/blog/why-this-exists.html">
   <link rel="icon" href="../data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='2' y='2' width='60' height='60' rx='8' fill='none' stroke='%238B1A1A' stroke-width='2'/><path d='M32 18 L46 32 L32 46 L18 32 Z' fill='%238B1A1A'/><path d='M32 19 L38 32 L32 45 L26 32 Z' fill='%232A9D8F'/><circle cx='32' cy='32' r='5' fill='%238B1A1A'/><circle cx='32' cy='32' r='2.5' fill='%232A9D8F'/></svg>">
 
@@ -44,6 +44,21 @@
   <!-- Fonts -->
 
   <link rel="stylesheet" href="../style.css?v=3">
+  <style>
+    /* Warm Precision overrides */
+    :root {
+      --background: #eae7de;
+      --surface: #f6f4ec;
+      --elevated: #f0ede4;
+      --border: rgba(40,36,28,0.12);
+      --text-primary: #1a1810;
+      --text-secondary: #5e5a4e;
+      --text-muted: #8a8578;
+      --accent: #8a7a48;
+    }
+    body { background-color: #eae7de; color: #1a1810; }
+    .dark { /* prevent dark mode */ }
+  </style>
   <style>
     .blog-post {
       max-width: 720px;
@@ -128,11 +143,9 @@
         <span>The Other Dude</span>
       </a>
       <div class="nav-links">
-        <a href="../index.html#what-it-does" class="nav-link">Features</a>
         <a href="../docs.html" class="nav-link">Docs</a>
         <a href="index.html" class="nav-link">Blog</a>
         <a href="https://github.com/staack/the-other-dude" class="nav-link" rel="noopener">GitHub</a>
-        <a href="../docs.html#quickstart" class="nav-cta">Get Started</a>
       </div>
     </div>
   </nav>
@@ -215,8 +228,8 @@
         <a href="https://github.com/staack/the-other-dude" rel="noopener">GitHub</a>
         <a href="mailto:license@theotherdude.net">Licensing</a>
       </nav>
+      <p style="margin-top:12px;font-size:0.75em;color:#8a8578;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
     </div>
-    <p style="margin-top:12px;font-size:0.75em;color:#62627F;text-align:center;">This site uses self-hosted, cookie-free analytics to measure page views and engagement. No personal data is collected or shared with third parties.</p>
   </footer>
 
 <script>