From 5b91260e1a404b42fd79bcfd4703f95c27eb17c1 Mon Sep 17 00:00:00 2001
From: Cam Pedersen <cam@campedersen.com>
Date: Wed, 13 May 2026 10:54:46 -0700
Subject: [PATCH] feat(auth): redesign sign-in popups + modal in v3 design
 language
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The OAuth popup at /auth/popup.html broke at runtime because its inline
script was refused by the site CSP (script-src 'self'), leaving users
stuck on a blank "Completing sign-in…" screen. Extract the IIFE to a
sibling popup.js, matching the desktop.html/desktop.js pattern that
already exists.

While both auth bridge pages were open, rebuild them around the v3
tokens (#0E0E10 stage, #1A1A1D chrome, Inter/SF Pro, 6px radii, brand
pink #F92672) and the Splash visual vocabulary: large vcad. wordmark
with brand-pink dot, indeterminate shimmer progress bar, primary CTA
in brand pink. Drops Berkeley Mono since v3 reserves it for code.

Same pass on AuthModal.tsx:
- Wordmark text-3xl -> text-5xl to mirror Splash
- Remove idle dot pulse, top edge gradient, backdrop blur
- Opaque bg-surface, rounded-xl dialog, rounded-md controls
- Lower buttons to h-10, tighten typography hierarchy
- Replace Phosphor monochrome icons with the official 4-color Google G
  and a GitHub Octocat that uses currentColor so it tracks the theme
- Autofocus the email field on open via onOpenAutoFocus (Radix's
  default focused the close button)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 packages/app/public/auth/desktop.html      | 178 ++++++++++++-------
 packages/app/public/auth/desktop.js        |   4 +
 packages/app/public/auth/popup.html        | 196 +++++++++++----------
 packages/app/public/auth/popup.js          |  34 ++++
 packages/auth/src/components/AuthModal.tsx | 156 +++++++++-------
 5 files changed, 352 insertions(+), 216 deletions(-)
 create mode 100644 packages/app/public/auth/popup.js

diff --git a/packages/app/public/auth/desktop.html b/packages/app/public/auth/desktop.html
index 15dfbdc2..66902971 100644
--- a/packages/app/public/auth/desktop.html
+++ b/packages/app/public/auth/desktop.html
@@ -8,50 +8,56 @@
     <link rel="icon" href="/favicon.ico" />
     <style>
       @font-face {
-        font-family: "Berkeley Mono";
-        font-weight: 400;
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 100 900;
         font-display: swap;
-        src: url("/fonts/BerkeleyMono-Regular.otf") format("opentype");
-      }
-      @font-face {
-        font-family: "Berkeley Mono";
-        font-weight: 700;
-        font-display: swap;
-        src: url("/fonts/BerkeleyMono-Bold.otf") format("opentype");
+        src: url("/fonts/InterVariable.woff2") format("woff2-variations");
       }
 
-      /* Monokai Soda dark theme — matches packages/app/src/index.css. */
       :root {
         color-scheme: dark;
-        --bg: #222222;
-        --surface: #2a2a2a;
-        --border: #444444;
-        --text: #F8F8F2;
-        --text-muted: #75715E;
-        --hover: rgba(255, 255, 255, 0.1);
-        --brand: #F92672;
+        --bg: #0e0e10;
+        --surface: #1a1a1d;
+        --border: #3a3a40;
+        --text: #f5f5f5;
+        --text-muted: #9c9ca3;
+        --hover: #26262b;
+        --brand: #f92672;
+        --brand-hover: #d91e63;
       }
       @media (prefers-color-scheme: light) {
         :root {
           color-scheme: light;
-          --bg: #e8eaec;
-          --surface: #dde0e3;
-          --border: #c4c8cc;
-          --text: #1d1f23;
-          --text-muted: #6e7278;
-          --hover: rgba(0, 0, 0, 0.05);
-          --brand: #F92672;
+          --bg: #ffffff;
+          --surface: #ffffff;
+          --border: #d4d4d4;
+          --text: #000000;
+          --text-muted: #666666;
+          --hover: rgba(0, 0, 0, 0.04);
+          --brand: #f92672;
+          --brand-hover: #d91e63;
         }
       }
 
-      html, body {
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
         margin: 0;
         height: 100%;
-        font: 12px/1.5 "Berkeley Mono", ui-monospace, monospace;
+        font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text",
+          "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+          sans-serif;
         background: var(--bg);
         color: var(--text);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
+        font-optical-sizing: auto;
       }
 
       main {
@@ -60,81 +66,131 @@
         align-items: center;
         justify-content: center;
         padding: 1.5rem;
-        box-sizing: border-box;
       }
 
       .card {
         width: 100%;
-        max-width: 28rem;
-        border: 1px solid var(--border);
-        background: var(--surface);
-        padding: 1.5rem;
-      }
-
-      .header {
+        max-width: 19rem;
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 0.5rem;
-        margin-bottom: 1rem;
+        gap: 1.25rem;
+        text-align: center;
       }
-      .logo {
-        font-size: 14px;
+
+      .wordmark {
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
+          "Inter", system-ui, sans-serif;
+        font-size: 3.5rem;
         font-weight: 700;
         letter-spacing: -0.05em;
+        line-height: 1;
         color: var(--text);
+        user-select: none;
+      }
+      .wordmark .dot {
+        color: var(--brand);
       }
-      .logo .dot { color: var(--brand); }
-      .label { font-size: 12px; color: var(--text-muted); }
 
-      p { margin: 0 0 0.75rem; font-size: 12px; color: var(--text); }
-      p.muted { color: var(--text-muted); }
+      .status {
+        font-size: 13px;
+        color: var(--text-muted);
+        margin: 0;
+      }
+
+      .progress {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: var(--border);
+      }
+      .progress .bar {
+        position: absolute;
+        inset: 0 auto 0 -33%;
+        width: 33%;
+        border-radius: 999px;
+        background: var(--brand);
+        animation: slide 1.2s ease-in-out infinite;
+      }
+      @keyframes slide {
+        0% {
+          left: -33%;
+        }
+        50% {
+          left: 50%;
+        }
+        100% {
+          left: 100%;
+        }
+      }
 
       .actions {
-        margin-top: 1rem;
+        width: 100%;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
       }
 
-      button, .btn {
-        height: 2rem;
-        padding: 0 0.75rem;
+      .btn {
+        height: 2.25rem;
+        padding: 0 0.875rem;
         border: 1px solid var(--border);
-        background: var(--bg);
+        background: transparent;
         color: var(--text);
         font: inherit;
-        font-size: 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
         cursor: pointer;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        box-sizing: border-box;
+        transition: background 0.12s ease, border-color 0.12s ease;
       }
-      button:hover, .btn:hover { background: var(--hover); }
-      button:focus-visible, .btn:focus-visible {
+      .btn:hover {
+        background: var(--hover);
+      }
+      .btn.primary {
+        background: var(--brand);
+        border-color: var(--brand);
+        color: #ffffff;
+      }
+      .btn.primary:hover {
+        background: var(--brand-hover);
+        border-color: var(--brand-hover);
+      }
+      .btn:focus-visible {
         outline: 2px solid var(--brand);
-        outline-offset: -2px;
+        outline-offset: 2px;
       }
 
-      .hide { display: none; }
+      .hide {
+        display: none;
+      }
     </style>
   </head>
   <body>
     <main>
       <div class="card">
-        <div class="header">
-          <span class="logo">vcad<span class="dot">.</span></span>
-          <span class="label">Desktop sign-in</span>
+        <div class="wordmark">vcad<span class="dot">.</span></div>
+        <p id="status" class="status">Opening the desktop app…</p>
+        <div id="progress" class="progress" aria-hidden="true">
+          <div class="bar"></div>
         </div>
-        <p id="status" class="muted">Opening the desktop app…</p>
-        <div class="actions">
-          <button id="retry" class="hide" type="button">Open vcad</button>
-          <a id="web" class="btn hide" href="https://vcad.io/">Continue in browser</a>
+        <div id="actions" class="actions hide">
+          <button id="retry" class="btn primary hide" type="button">
+            Open vcad
+          </button>
+          <a id="web" class="btn hide" href="https://vcad.io/"
+            >Continue in browser</a
+          >
         </div>
         <noscript>
-          <p class="muted">
+          <p class="status">
             Enable JavaScript to complete sign-in, or open this link on the
             device where vcad is installed.
           </p>
diff --git a/packages/app/public/auth/desktop.js b/packages/app/public/auth/desktop.js
index a441b0c5..3860b3d0 100644
--- a/packages/app/public/auth/desktop.js
+++ b/packages/app/public/auth/desktop.js
@@ -13,6 +13,8 @@
   var target = "vcad://auth/callback" + search + hash;
 
   var status = document.getElementById("status");
+  var progress = document.getElementById("progress");
+  var actions = document.getElementById("actions");
   var retryBtn = document.getElementById("retry");
   var webLink = document.getElementById("web");
 
@@ -28,6 +30,8 @@
         "If vcad didn't open automatically, click below to try again. " +
         "If you don't have vcad installed, you can sign in on the web.";
     }
+    if (progress) progress.classList.add("hide");
+    if (actions) actions.classList.remove("hide");
     if (retryBtn) {
       retryBtn.classList.remove("hide");
       retryBtn.addEventListener("click", go);
diff --git a/packages/app/public/auth/popup.html b/packages/app/public/auth/popup.html
index 9eded640..2f80ede7 100644
--- a/packages/app/public/auth/popup.html
+++ b/packages/app/public/auth/popup.html
@@ -8,50 +8,56 @@
     <link rel="icon" href="/favicon.ico" />
     <style>
       @font-face {
-        font-family: "Berkeley Mono";
-        font-weight: 400;
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 100 900;
         font-display: swap;
-        src: url("/fonts/BerkeleyMono-Regular.otf") format("opentype");
-      }
-      @font-face {
-        font-family: "Berkeley Mono";
-        font-weight: 700;
-        font-display: swap;
-        src: url("/fonts/BerkeleyMono-Bold.otf") format("opentype");
+        src: url("/fonts/InterVariable.woff2") format("woff2-variations");
       }
 
       :root {
         color-scheme: dark;
-        --bg: #222222;
-        --surface: #2a2a2a;
-        --border: #444444;
-        --text: #f8f8f2;
-        --text-muted: #75715e;
-        --hover: rgba(255, 255, 255, 0.1);
+        --bg: #0e0e10;
+        --surface: #1a1a1d;
+        --border: #3a3a40;
+        --text: #f5f5f5;
+        --text-muted: #9c9ca3;
+        --hover: #26262b;
         --brand: #f92672;
+        --brand-hover: #d91e63;
       }
       @media (prefers-color-scheme: light) {
         :root {
           color-scheme: light;
-          --bg: #e8eaec;
-          --surface: #dde0e3;
-          --border: #c4c8cc;
-          --text: #1d1f23;
-          --text-muted: #6e7278;
-          --hover: rgba(0, 0, 0, 0.05);
+          --bg: #ffffff;
+          --surface: #ffffff;
+          --border: #d4d4d4;
+          --text: #000000;
+          --text-muted: #666666;
+          --hover: rgba(0, 0, 0, 0.04);
           --brand: #f92672;
+          --brand-hover: #d91e63;
         }
       }
 
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+
       html,
       body {
         margin: 0;
         height: 100%;
-        font: 12px/1.5 "Berkeley Mono", ui-monospace, monospace;
+        font: 14px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text",
+          "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+          sans-serif;
         background: var(--bg);
         color: var(--text);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
+        font-optical-sizing: auto;
       }
 
       main {
@@ -60,72 +66,108 @@
         align-items: center;
         justify-content: center;
         padding: 1.5rem;
-        box-sizing: border-box;
       }
 
       .card {
         width: 100%;
-        max-width: 24rem;
-        border: 1px solid var(--border);
-        background: var(--surface);
-        padding: 1.5rem;
-      }
-
-      .header {
+        max-width: 17rem;
         display: flex;
+        flex-direction: column;
         align-items: center;
-        gap: 0.5rem;
-        margin-bottom: 1rem;
+        gap: 1.25rem;
+        text-align: center;
       }
-      .logo {
-        font-size: 14px;
+
+      .wordmark {
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
+          "Inter", system-ui, sans-serif;
+        font-size: 3.5rem;
         font-weight: 700;
         letter-spacing: -0.05em;
+        line-height: 1;
         color: var(--text);
+        user-select: none;
       }
-      .logo .dot {
+      .wordmark .dot {
         color: var(--brand);
       }
-      .label {
-        font-size: 12px;
+
+      .status {
+        font-size: 13px;
         color: var(--text-muted);
+        margin: 0;
+        min-height: 1.25em;
       }
 
-      p {
-        margin: 0 0 0.75rem;
-        font-size: 12px;
-        color: var(--text);
-      }
-      p.muted {
-        color: var(--text-muted);
+      .progress {
+        position: relative;
+        width: 100%;
+        height: 3px;
+        overflow: hidden;
+        border-radius: 999px;
+        background: var(--border);
+      }
+      .progress .bar {
+        position: absolute;
+        inset: 0 auto 0 -33%;
+        width: 33%;
+        border-radius: 999px;
+        background: var(--brand);
+        animation: slide 1.2s ease-in-out infinite;
+      }
+      @keyframes slide {
+        0% {
+          left: -33%;
+        }
+        50% {
+          left: 50%;
+        }
+        100% {
+          left: 100%;
+        }
       }
 
       .actions {
-        margin-top: 1rem;
+        width: 100%;
         display: flex;
         flex-direction: column;
         gap: 0.5rem;
       }
 
       .btn {
-        height: 2rem;
-        padding: 0 0.75rem;
+        height: 2.25rem;
+        padding: 0 0.875rem;
         border: 1px solid var(--border);
-        background: var(--bg);
+        background: transparent;
         color: var(--text);
         font: inherit;
-        font-size: 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
         cursor: pointer;
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-        box-sizing: border-box;
+        transition: background 0.12s ease, border-color 0.12s ease;
       }
       .btn:hover {
         background: var(--hover);
       }
+      .btn.primary {
+        background: var(--brand);
+        border-color: var(--brand);
+        color: #ffffff;
+      }
+      .btn.primary:hover {
+        background: var(--brand-hover);
+        border-color: var(--brand-hover);
+      }
+      .btn:focus-visible {
+        outline: 2px solid var(--brand);
+        outline-offset: 2px;
+      }
 
       .hide {
         display: none;
@@ -135,57 +177,21 @@
   <body>
     <main>
       <div class="card">
-        <div class="header">
-          <span class="logo">vcad<span class="dot">.</span></span>
-          <span class="label">Sign-in</span>
+        <div class="wordmark">vcad<span class="dot">.</span></div>
+        <p id="status" class="status">Completing sign-in…</p>
+        <div id="progress" class="progress" aria-hidden="true">
+          <div class="bar"></div>
         </div>
-        <p id="status" class="muted">Completing sign-in…</p>
         <div class="actions">
-          <a id="continue" class="btn hide" href="/">Continue to vcad</a>
+          <a id="continue" class="btn primary hide" href="/"
+            >Continue to vcad</a
+          >
         </div>
         <noscript>
-          <p class="muted">
-            Enable JavaScript to complete sign-in.
-          </p>
+          <p class="status">Enable JavaScript to complete sign-in.</p>
         </noscript>
       </div>
     </main>
-    <script>
-      (function () {
-        var status = document.getElementById("status");
-        var continueLink = document.getElementById("continue");
-
-        try {
-          if (window.opener && !window.opener.closed) {
-            // Same-origin opener — postMessage the full URL so it can
-            // run the PKCE / OTP exchange against its own Supabase
-            // client (which holds the code verifier in localStorage).
-            window.opener.postMessage(
-              { type: "vcad:oauth-callback", url: window.location.href },
-              window.location.origin,
-            );
-            status.textContent = "Done. You can close this window.";
-            // Give the opener a tick to ack before closing — some
-            // browsers race the close against the message delivery.
-            setTimeout(function () {
-              try {
-                window.close();
-              } catch (_) {
-                /* user closes it manually */
-              }
-            }, 50);
-            return;
-          }
-        } catch (_) {
-          // Cross-origin or detached opener — fall through to the
-          // standalone path below.
-        }
-
-        // No opener (user pasted the URL into a fresh tab, or the
-        // browser killed the reference). Show a button back to the app.
-        status.textContent = "Sign-in complete.";
-        continueLink.classList.remove("hide");
-      })();
-    </script>
+    <script src="/auth/popup.js"></script>
   </body>
 </html>
diff --git a/packages/app/public/auth/popup.js b/packages/app/public/auth/popup.js
new file mode 100644
index 00000000..29db56f3
--- /dev/null
+++ b/packages/app/public/auth/popup.js
@@ -0,0 +1,34 @@
+(function () {
+  var status = document.getElementById("status");
+  var continueLink = document.getElementById("continue");
+  var progress = document.getElementById("progress");
+
+  function hideProgress() {
+    if (progress) progress.classList.add("hide");
+  }
+
+  try {
+    if (window.opener && !window.opener.closed) {
+      window.opener.postMessage(
+        { type: "vcad:oauth-callback", url: window.location.href },
+        window.location.origin,
+      );
+      status.textContent = "Signed in. You can close this window.";
+      hideProgress();
+      setTimeout(function () {
+        try {
+          window.close();
+        } catch (_) {
+          /* user closes it manually */
+        }
+      }, 50);
+      return;
+    }
+  } catch (_) {
+    // Cross-origin or detached opener — fall through to the standalone path.
+  }
+
+  status.textContent = "Sign-in complete.";
+  hideProgress();
+  continueLink.classList.remove("hide");
+})();
diff --git a/packages/auth/src/components/AuthModal.tsx b/packages/auth/src/components/AuthModal.tsx
index 0ea29680..0287e149 100644
--- a/packages/auth/src/components/AuthModal.tsx
+++ b/packages/auth/src/components/AuthModal.tsx
@@ -1,10 +1,8 @@
-import { useEffect, useState, type FormEvent } from "react";
+import { useEffect, useRef, useState, type FormEvent } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import {
   X,
   EnvelopeSimple,
-  GoogleLogo,
-  GithubLogo,
   ArrowRight,
   CircleNotch,
 } from "@phosphor-icons/react";
@@ -43,6 +41,7 @@ export function AuthModal({ open, onOpenChange, feature }: AuthModalProps) {
   const [sent, setSent] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [resendIn, setResendIn] = useState(0);
+  const emailRef = useRef<HTMLInputElement>(null);
 
   const supabase = getSupabase();
 
@@ -199,46 +198,37 @@ export function AuthModal({ open, onOpenChange, feature }: AuthModalProps) {
   return (
     <Dialog.Root open={open} onOpenChange={handleOpenChange}>
       <Dialog.Portal>
-        <Dialog.Overlay className="auth-overlay fixed inset-0 z-50 bg-black/65 backdrop-blur-sm" />
+        <Dialog.Overlay className="auth-overlay fixed inset-0 z-50 bg-black/60" />
         <Dialog.Content
           aria-describedby={undefined}
-          className="auth-content fixed left-1/2 top-1/2 z-50 w-[340px] -translate-x-1/2 -translate-y-1/2 border border-border bg-card/85 backdrop-blur-xl shadow-[0_24px_60px_-12px_rgba(0,0,0,0.6)] focus:outline-none"
+          onOpenAutoFocus={(e) => {
+            // Radix focuses the first focusable (the close button) by default.
+            // Prefer the email field — it's the only input on the form.
+            e.preventDefault();
+            emailRef.current?.focus();
+          }}
+          className="auth-content fixed left-1/2 top-1/2 z-50 w-[360px] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl border border-border bg-surface shadow-xl focus:outline-none"
         >
-          {/* Top brand edge highlight */}
-          <div
-            aria-hidden
-            className="pointer-events-none absolute inset-x-0 top-0 h-px bg-[linear-gradient(90deg,transparent,var(--color-brand),transparent)] opacity-70"
-          />
-
           {/* Close button */}
           <Dialog.Close
             aria-label="Close"
-            className="absolute right-2.5 top-2.5 z-10 p-1 text-text-muted/70 transition-colors hover:bg-hover hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/60 focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+            className="absolute right-3 top-3 z-10 flex h-7 w-7 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-hover hover:text-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
           >
-            <X size={12} />
+            <X size={16} />
           </Dialog.Close>
 
           {/* Content */}
-          <div className="flex flex-col items-center px-7 pt-7 pb-6">
+          <div className="flex flex-col items-center px-8 pt-10 pb-7">
             {/* Header */}
-            <Dialog.Title className="text-3xl font-bold tracking-tighter text-text">
-              vcad
-              <span
-                className="text-brand"
-                style={{
-                  display: "inline-block",
-                  animation: "vcad-pulse 2.4s ease-in-out infinite",
-                }}
-              >
-                .
-              </span>
+            <Dialog.Title className="text-5xl font-bold tracking-tighter leading-none text-text select-none">
+              vcad<span className="text-brand">.</span>
             </Dialog.Title>
-            <p className="mt-1 text-[11px] text-text-muted/80">
+            <p className="mt-3 text-[13px] text-text-muted text-center">
               {subtitle}
             </p>
 
             {error && (
-              <div className="mt-4 w-full border border-danger/30 bg-danger/10 p-2 text-center text-xs text-danger">
+              <div className="mt-5 w-full rounded-md border border-danger/30 bg-danger/10 px-3 py-2 text-center text-xs text-danger">
                 {error}
               </div>
             )}
@@ -252,26 +242,24 @@ export function AuthModal({ open, onOpenChange, feature }: AuthModalProps) {
                 onClose={() => handleOpenChange(false)}
               />
             ) : (
-              <div className="mt-5 flex w-full flex-col gap-2">
+              <div className="mt-6 flex w-full flex-col gap-2">
                 <ProviderButton
                   onClick={() => signInWithProvider("google")}
                   disabled={loading}
-                  icon={<GoogleLogo size={16} weight="bold" />}
+                  icon={<GoogleColorLogo />}
                   label="Continue with Google"
                 />
                 <ProviderButton
                   onClick={() => signInWithProvider("github")}
                   disabled={loading}
-                  icon={<GithubLogo size={16} weight="fill" />}
+                  icon={<GithubLogoMark />}
                   label="Continue with GitHub"
                 />
 
-                <div className="my-3 flex items-center gap-2">
-                  <div className="h-px flex-1 bg-border/70" />
-                  <span className="text-[9.5px] uppercase tracking-[0.18em] text-text-muted">
-                    or
-                  </span>
-                  <div className="h-px flex-1 bg-border/70" />
+                <div className="my-2 flex items-center gap-3">
+                  <div className="h-px flex-1 bg-border" />
+                  <span className="text-[11px] text-text-muted">or</span>
+                  <div className="h-px flex-1 bg-border" />
                 </div>
 
                 <form
@@ -280,11 +268,12 @@ export function AuthModal({ open, onOpenChange, feature }: AuthModalProps) {
                   noValidate
                 >
                   <input
+                    ref={emailRef}
                     type="email"
-                    placeholder="Email address"
+                    placeholder="you@example.com"
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
-                    className="h-11 w-full border border-border bg-bg/60 px-3 text-[13px] text-text placeholder-text-muted/50 transition-colors focus:border-brand focus:bg-bg/80 focus:outline-none"
+                    className="h-10 w-full rounded-md border border-border bg-bg px-3 text-[13px] text-text placeholder-text-muted transition-colors focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
                     disabled={loading}
                     autoComplete="email"
                   />
@@ -298,33 +287,33 @@ export function AuthModal({ open, onOpenChange, feature }: AuthModalProps) {
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-center border-t border-border px-4 py-2.5">
-            <p className="text-[10px] text-text-muted">
+          <div className="flex items-center justify-center border-t border-border-soft px-4 py-3">
+            <p className="text-[11px] text-text-muted">
               <a
                 href="https://vcad.io/terms"
-                className="hover:text-text"
+                className="hover:text-text transition-colors"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                terms
+                Terms
               </a>
-              {" · "}
+              <span className="mx-2 text-text-tert">·</span>
               <a
                 href="https://vcad.io/privacy"
-                className="hover:text-text"
+                className="hover:text-text transition-colors"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                privacy
+                Privacy
               </a>
-              {" · "}
+              <span className="mx-2 text-text-tert">·</span>
               <a
                 href="https://vcad.io/security"
-                className="hover:text-text"
+                className="hover:text-text transition-colors"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                security
+                Security
               </a>
             </p>
           </div>
@@ -350,7 +339,7 @@ function ProviderButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      className="flex h-11 w-full items-center justify-center gap-2.5 border border-border text-[13px] text-text transition-colors duration-150 hover:border-text-muted/40 hover:bg-hover disabled:cursor-not-allowed disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/60 focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+      className="flex h-10 w-full items-center justify-center gap-2.5 rounded-md border border-border bg-transparent text-[13px] font-medium text-text transition-colors duration-150 hover:bg-hover disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand"
     >
       {icon}
       {label}
@@ -364,9 +353,9 @@ function EmailCta({ loading, active }: { loading: boolean; active: boolean }) {
       <button
         type="submit"
         disabled
-        className="flex h-11 w-full items-center justify-center gap-2 border border-border bg-transparent text-[13px] text-text-muted/70"
+        className="flex h-10 w-full items-center justify-center gap-2 rounded-md border border-border bg-transparent text-[13px] text-text-muted"
       >
-        <CircleNotch size={12} className="animate-spin" />
+        <CircleNotch size={14} className="animate-spin" />
         Sending…
       </button>
     );
@@ -376,7 +365,7 @@ function EmailCta({ loading, active }: { loading: boolean; active: boolean }) {
     return (
       <button
         type="submit"
-        className="upgrade-cta group flex h-11 w-full items-center justify-center gap-2 border border-brand bg-brand text-[13px] font-medium text-primary-foreground transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand/60 focus-visible:ring-offset-2 focus-visible:ring-offset-card"
+        className="group flex h-10 w-full items-center justify-center gap-2 rounded-md border border-brand bg-brand text-[13px] font-medium text-primary-foreground transition-colors hover:bg-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-surface"
       >
         <span>Continue with email</span>
         <ArrowRight
@@ -392,7 +381,7 @@ function EmailCta({ loading, active }: { loading: boolean; active: boolean }) {
     <button
       type="submit"
       disabled
-      className="flex h-11 w-full items-center justify-center gap-2 border border-border bg-transparent text-[13px] text-text-muted/60"
+      className="flex h-10 w-full items-center justify-center gap-2 rounded-md border border-border bg-transparent text-[13px] text-text-muted/60"
     >
       Continue with email
     </button>
@@ -413,12 +402,12 @@ function SentState({
   onClose: () => void;
 }) {
   return (
-    <div className="auth-success-in mt-5 flex w-full flex-col items-center text-center">
-      <div className="mb-3 flex h-11 w-11 items-center justify-center border border-brand/30 bg-brand/12">
+    <div className="auth-success-in mt-6 flex w-full flex-col items-center text-center">
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full border border-brand/30 bg-brand/10">
         <EnvelopeSimple size={22} className="text-brand" />
       </div>
-      <p className="text-sm font-medium text-text">Check your email</p>
-      <p className="mt-1 text-[11px] text-text-muted">
+      <p className="text-[15px] font-medium text-text">Check your email</p>
+      <p className="mt-1.5 text-[12px] text-text-muted">
         We sent a sign-in link to{" "}
         <span className="text-text">{email}</span>
       </p>
@@ -427,7 +416,7 @@ function SentState({
         type="button"
         onClick={onResend}
         disabled={resendIn > 0 || loading}
-        className="mt-4 text-[11px] text-text-muted underline-offset-4 transition-colors hover:text-text hover:underline disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline"
+        className="mt-5 text-[12px] text-text-muted underline-offset-4 transition-colors hover:text-text hover:underline disabled:cursor-not-allowed disabled:opacity-50 disabled:no-underline"
       >
         {resendIn > 0 ? `Resend link in ${resendIn}s` : "Resend link"}
       </button>
@@ -435,10 +424,57 @@ function SentState({
       <button
         type="button"
         onClick={onClose}
-        className="mt-1 text-[10px] text-text-muted/70 hover:text-text"
+        className="mt-2 text-[11px] text-text-muted/70 transition-colors hover:text-text"
       >
-        close
+        Close
       </button>
     </div>
   );
 }
+
+function GoogleColorLogo() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 48 48"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        fill="#FFC107"
+        d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+      />
+      <path
+        fill="#FF3D00"
+        d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
+      />
+      <path
+        fill="#4CAF50"
+        d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+      />
+      <path
+        fill="#1976D2"
+        d="M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571.001-.001.002-.001.003-.002l6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
+      />
+    </svg>
+  );
+}
+
+function GithubLogoMark() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      className="text-text"
+    >
+      <path
+        fill="currentColor"
+        d="M12 .5C5.73.5.66 5.58.66 11.86c0 5.02 3.25 9.27 7.76 10.77.57.1.78-.25.78-.55 0-.27-.01-1-.02-1.95-3.16.69-3.83-1.52-3.83-1.52-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.14.08 1.74 1.17 1.74 1.17 1.02 1.75 2.68 1.25 3.33.95.1-.74.4-1.25.72-1.54-2.52-.29-5.18-1.26-5.18-5.62 0-1.24.44-2.26 1.17-3.05-.12-.29-.51-1.45.11-3.03 0 0 .96-.31 3.14 1.16.91-.25 1.89-.38 2.86-.39.97 0 1.95.13 2.86.39 2.18-1.47 3.14-1.16 3.14-1.16.62 1.58.23 2.74.11 3.03.73.79 1.17 1.81 1.17 3.05 0 4.37-2.67 5.33-5.21 5.61.41.35.78 1.04.78 2.1 0 1.51-.01 2.73-.01 3.1 0 .3.21.66.79.55 4.5-1.51 7.75-5.76 7.75-10.77C23.34 5.58 18.27.5 12 .5z"
+      />
+    </svg>
+  );
+}