diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index ce83a0c..f2720d2 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -2,14 +2,8 @@ name: Validate OpenAPI Specs
 
 on:
   pull_request:
-    paths:
-      - "specs/**"
-      - ".spectral.yaml"
   push:
     branches: [main]
-    paths:
-      - "specs/**"
-      - ".spectral.yaml"
 
 jobs:
   validate:
diff --git a/docs/index.html b/docs/index.html
index dda48d3..b2cc6d5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,60 +3,193 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Smile Identity API Reference</title>
+    <title>Smile ID API Reference</title>
+    <meta name="description" content="OpenAPI 3.0 reference for the Smile ID v3 API." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700"
+      href="https://fonts.googleapis.com/css2?family=Epilogue:wght@300;400;500;600;700;800&display=swap"
       rel="stylesheet"
     />
     <style>
-      html, body { margin: 0; padding: 0; height: 100%; font-family: "Roboto", sans-serif; }
-      #app { display: flex; height: 100vh; }
-      #sidebar {
-        width: 260px;
-        flex: 0 0 260px;
-        background: #2B3990;
+      :root {
+        --brand-navy: #151F72;
+        --brand-navy-deep: #00065C;
+        --brand-blue: #1E40AF;
+        --brand-orange: #FF9B00;
+        --brand-cream: #F9F0E7;
+        --ink: #1F2937;
+        --ink-muted: #4A5565;
+        --line: rgba(255, 255, 255, 0.08);
+        --sidebar-w: 280px;
+        --header-h: 64px;
+        --font-sans: "Epilogue", ui-sans-serif, system-ui, -apple-system,
+          BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+          sans-serif;
+      }
+
+      * { box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font-family: var(--font-sans);
+        color: var(--ink);
+        background: #fff;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      #header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: var(--header-h);
+        background: var(--brand-navy);
         color: #fff;
-        overflow-y: auto;
-        padding: 24px 0;
+        display: flex;
+        align-items: center;
+        padding: 0 28px;
+        z-index: 10;
+        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
       }
-      #sidebar h1 {
-        font-family: "Montserrat", sans-serif;
-        font-size: 16px;
+      #header .wordmark {
+        display: flex;
+        align-items: center;
+        gap: 10px;
         font-weight: 700;
-        margin: 0 0 16px;
-        padding: 0 20px;
-        letter-spacing: 0.04em;
+        font-size: 17px;
+        letter-spacing: -0.01em;
+        text-decoration: none;
+        color: #fff;
+      }
+      #header .wordmark .dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--brand-orange);
+      }
+      #header .subtitle {
+        margin-left: 14px;
+        padding-left: 14px;
+        border-left: 1px solid rgba(255, 255, 255, 0.18);
+        font-size: 13px;
+        font-weight: 400;
+        opacity: 0.78;
+      }
+      #header .spacer { flex: 1; }
+      #header a.external {
+        color: rgba(255, 255, 255, 0.78);
+        font-size: 13px;
+        text-decoration: none;
+        margin-left: 20px;
+        transition: color 0.15s;
+      }
+      #header a.external:hover { color: #fff; }
+
+      #app {
+        display: flex;
+        height: calc(100vh - var(--header-h));
+        margin-top: var(--header-h);
+      }
+
+      #sidebar {
+        width: var(--sidebar-w);
+        flex: 0 0 var(--sidebar-w);
+        background: var(--brand-navy-deep);
+        color: rgba(255, 255, 255, 0.92);
+        overflow-y: auto;
+        padding: 24px 0 32px;
+        font-size: 14px;
+        display: flex;
+        flex-direction: column;
+      }
+      #sidebar > ul:last-of-type { margin-bottom: auto; }
+      #sidebar h2 {
+        font-family: var(--font-sans);
+        font-size: 11px;
+        font-weight: 600;
+        margin: 0 0 12px;
+        padding: 0 24px;
+        letter-spacing: 0.12em;
         text-transform: uppercase;
-        opacity: 0.8;
+        color: rgba(255, 255, 255, 0.55);
       }
-      #sidebar ul { list-style: none; margin: 0; padding: 0; }
+      #sidebar ul { list-style: none; margin: 0 0 24px; padding: 0; }
       #sidebar li a {
         display: block;
-        padding: 8px 20px;
-        color: #fff;
+        padding: 9px 24px;
+        color: rgba(255, 255, 255, 0.82);
         text-decoration: none;
-        font-size: 14px;
+        font-weight: 500;
         border-left: 3px solid transparent;
-        transition: background 0.15s, border-color 0.15s;
+        transition: background 0.15s, color 0.15s, border-color 0.15s;
+      }
+      #sidebar li a:hover {
+        background: rgba(255, 255, 255, 0.05);
+        color: #fff;
       }
-      #sidebar li a:hover { background: rgba(255,255,255,0.07); }
       #sidebar li a.active {
-        background: rgba(255,255,255,0.1);
-        border-left-color: #fff;
-        font-weight: 700;
+        background: rgba(255, 255, 255, 0.07);
+        color: #fff;
+        border-left-color: var(--brand-orange);
+        font-weight: 600;
+      }
+      #sidebar .footer {
+        margin-top: auto;
+        padding: 20px 24px;
+        border-top: 1px solid var(--line);
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.55);
+        line-height: 1.5;
+      }
+      #sidebar .footer a {
+        color: rgba(255, 255, 255, 0.78);
+        text-decoration: none;
+        border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
+      }
+      #sidebar .footer a:hover { color: #fff; }
+
+      #content {
+        flex: 1;
+        overflow: auto;
+        background: #fff;
+      }
+
+      /* Tighter type inside Redoc to feel native to the wrapper */
+      #redoc-container .api-info h1 { font-family: var(--font-sans); }
+
+      @media (max-width: 768px) {
+        #app { flex-direction: column; }
+        #sidebar { width: 100%; flex: 0 0 auto; max-height: 30vh; }
       }
-      #content { flex: 1; overflow: auto; }
     </style>
   </head>
   <body>
+    <header id="header">
+      <a class="wordmark" href="?">
+        <span class="dot"></span>
+        <span>Smile ID</span>
+      </a>
+      <span class="subtitle">API Reference</span>
+      <div class="spacer"></div>
+      <a class="external" href="https://docs.usesmileid.com/" target="_blank" rel="noopener">Documentation</a>
+      <a class="external" href="https://www.usesmileid.com/" target="_blank" rel="noopener">usesmileid.com</a>
+    </header>
+
     <div id="app">
       <aside id="sidebar">
-        <h1>Smile ID API</h1>
+        <h2>APIs</h2>
         <ul id="spec-list"></ul>
+        <div class="footer">
+          OpenAPI 3.0 specs for the Smile ID v3 API.<br />
+          See <a href="https://github.com/smileidentity/api-reference">smileidentity/api-reference</a> on GitHub.
+        </div>
       </aside>
-      <div id="content">
+      <main id="content">
         <div id="redoc-container"></div>
-      </div>
+      </main>
     </div>
 
     <script>
@@ -80,7 +213,7 @@ <h1>Smile ID API</h1>
       // <!-- SPEC_LIST_END -->
 
       const params = new URLSearchParams(window.location.search);
-      const selected = SPECS.find(s => s.file === params.get("spec")) || SPECS[0];
+      const selected = SPECS.find((s) => s.file === params.get("spec")) || SPECS[0];
 
       const list = document.getElementById("spec-list");
       for (const spec of SPECS) {
@@ -92,22 +225,54 @@ <h1>Smile ID API</h1>
         li.appendChild(a);
         list.appendChild(li);
       }
+      document.title = `${selected.label} — Smile ID API Reference`;
     </script>
     <script src="https://cdn.redoc.ly/redoc/v2.4.0/bundles/redoc.standalone.js"></script>
     <script>
       Redoc.init(
         `../specs/v3/${selected.file}.yaml`,
         {
-          theme: {
-            colors: { primary: { main: "#2B3990" } },
-            typography: {
-              fontFamily: '"Roboto", sans-serif',
-              headings: { fontFamily: '"Montserrat", sans-serif' }
-            }
-          },
           hideDownloadButton: false,
           expandResponses: "200,201,202",
-          nativeScrollbars: true
+          nativeScrollbars: true,
+          theme: {
+            colors: {
+              primary: { main: "#151F72" },
+              success: { main: "#00A544" },
+              warning: { main: "#FF9B00" },
+              error: { main: "#FB2C36" },
+              text: { primary: "#1F2937", secondary: "#4A5565" },
+              http: {
+                get: "#1E40AF",
+                post: "#00A544",
+                put: "#FF9B00",
+                delete: "#FB2C36",
+                patch: "#C07EFF"
+              }
+            },
+            typography: {
+              fontSize: "15px",
+              fontFamily:
+                '"Epilogue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+              headings: {
+                fontFamily:
+                  '"Epilogue", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+                fontWeight: "700"
+              },
+              code: {
+                fontFamily:
+                  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                fontSize: "13px"
+              },
+              links: { color: "#1E40AF", hover: "#001096" }
+            },
+            sidebar: {
+              width: "240px",
+              backgroundColor: "#F9F0E7",
+              textColor: "#1F2937"
+            },
+            rightPanel: { backgroundColor: "#0B0F2C", textColor: "#E2E8F0" }
+          }
         },
         document.getElementById("redoc-container")
       );
