feat(login-page): full HF logo, primary title, pill CTA, refined layout

- Inline the complete official Hugging Face logo SVG (face + both hugging
hands), fixing the previously truncated mark in the button
- Move the title to primary color and bump it to a fluid clamp size with
Apple-grade letter-spacing
- Replace the outlined CTA with a pill-shaped primary button: vertical
gradient fill, layered inset highlights, soft elevation, 1px lift on
hover with deeper shadow, slightly tighter letter-spacing
- Drop the "after signing in, refresh this page" hint since the OAuth flow
redirects automatically
- Add a soft radial primary tint on the page background and a discreet
wordmark below the CTA for brand presence
- Use the SF / Source Sans Pro stack with antialiasing tuned for both light
and dark modes
- Simplify renderLoginPage: hint slot removed, callers now only pass title
and description

Made-with: Cursor

backend/src/create-app.ts

@@ -21,34 +21,32 @@ export { debouncedSave, resetSaveTimers, resetPublishedRestored } from "./persis
 const DEFAULT_DOC_NAME = "default";
 
 /**
- * Inline SVG of the official Hugging Face brand logo (the smiling face).
- * Source: https://huggingface.co/front/assets/huggingface_logo-noborder.svg
+ * Full inline SVG of the official Hugging Face brand logo (smiling face
+ * with both hugging hands). Drawn from
+ * https://huggingface.co/front/assets/huggingface_logo-noborder.svg
+ * so the page has zero network dependencies.
  */
-const HF_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" width="28" height="26" aria-hidden="true" focusable="false">
+const HF_LOGO_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 95 88" width="22" height="20" aria-hidden="true" focusable="false">
   <path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z"/>
   <path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z"/>
   <path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z"/>
   <path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z"/>
   <path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd"/>
   <path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Z"/>
+  <path fill="#FF9D0B" d="M17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z"/>
+  <path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z"/>
+  <path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z"/>
+  <path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z"/>
 </svg>`;
 
 interface LoginPageOptions {
   title: string;
   description: string;
-  /** Optional secondary line shown below the button (e.g. "after signing in, refresh"). */
-  hint?: string;
 }
 
-function renderLoginPage({ title, description, hint }: LoginPageOptions): string {
+function renderLoginPage({ title, description }: LoginPageOptions): string {
   const safeTitle = escapeHtml(title);
   const safeDescription = escapeHtml(description);
-  const hintHtml = hint
-    ? `<p class="login__hint">${escapeHtml(hint).replace(
-        /\{refresh\}/g,
-        `<a class="login__hint-link" href="/editor">refresh this page</a>`,
-      )}</p>`
-    : "";
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -59,20 +57,39 @@ function renderLoginPage({ title, description, hint }: LoginPageOptions): string
   <style>
     :root {
       --primary-color: oklch(0.75 0.12 47);
-      --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);
-      --page-bg: #ffffff;
-      --text-color: rgba(0, 0, 0, .85);
-      --muted-color: rgba(0, 0, 0, .6);
-      --border-color: rgba(0, 0, 0, .15);
-      --button-radius: 6px;
-      --font-stack: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+      --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.06) c h);
+      --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);
+      --on-primary: #1a0f0a;
+      --page-bg: #fafaf9;
+      --text-color: #1a1a1a;
+      --muted-color: rgba(0, 0, 0, .58);
+      --shadow-soft:
+        0 1px 1px rgba(0, 0, 0, .04),
+        0 4px 10px rgba(0, 0, 0, .04),
+        0 16px 32px rgba(0, 0, 0, .05);
+      --shadow-button:
+        inset 0 1px 0 rgba(255, 255, 255, .25),
+        inset 0 -1px 0 rgba(0, 0, 0, .12),
+        0 1px 2px rgba(0, 0, 0, .12),
+        0 6px 16px color-mix(in srgb, var(--primary-color) 30%, transparent);
+      --shadow-button-hover:
+        inset 0 1px 0 rgba(255, 255, 255, .3),
+        inset 0 -1px 0 rgba(0, 0, 0, .12),
+        0 2px 4px rgba(0, 0, 0, .14),
+        0 10px 26px color-mix(in srgb, var(--primary-color) 38%, transparent);
+      --font-stack: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
+        "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
     }
     @media (prefers-color-scheme: dark) {
       :root {
-        --page-bg: #0f1115;
-        --text-color: rgba(255, 255, 255, .9);
-        --muted-color: rgba(255, 255, 255, .65);
-        --border-color: rgba(255, 255, 255, .18);
+        --on-primary: #0f1115;
+        --page-bg: #0c0d10;
+        --text-color: rgba(255, 255, 255, .92);
+        --muted-color: rgba(255, 255, 255, .58);
+        --shadow-soft:
+          0 1px 1px rgba(0, 0, 0, .35),
+          0 4px 10px rgba(0, 0, 0, .35),
+          0 16px 32px rgba(0, 0, 0, .35);
       }
     }
     * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -81,72 +98,101 @@ function renderLoginPage({ title, description, hint }: LoginPageOptions): string
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 24px;
+      padding: 32px;
       font-family: var(--font-stack);
-      background: var(--page-bg);
+      background:
+        radial-gradient(
+          ellipse 720px 520px at 50% -10%,
+          color-mix(in srgb, var(--primary-color) 18%, transparent),
+          transparent 65%
+        ),
+        radial-gradient(
+          ellipse 480px 360px at 100% 110%,
+          color-mix(in srgb, var(--primary-color) 9%, transparent),
+          transparent 70%
+        ),
+        var(--page-bg);
       color: var(--text-color);
       -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
     .login {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
       text-align: center;
-      max-width: 460px;
+      max-width: 480px;
       width: 100%;
     }
     .login__title {
-      font-size: 1.625rem;
+      color: var(--primary-color);
+      font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem);
       font-weight: 600;
-      letter-spacing: -0.01em;
-      margin-bottom: 0.5rem;
+      letter-spacing: -0.025em;
+      line-height: 1.1;
+      margin-bottom: 14px;
     }
     .login__description {
-      font-size: 1rem;
-      line-height: 1.55;
+      max-width: 380px;
+      font-size: 1.0625rem;
+      line-height: 1.5;
       color: var(--muted-color);
-      margin-bottom: 2rem;
+      margin-bottom: 40px;
     }
     .login__btn {
       display: inline-flex;
       align-items: center;
-      gap: 12px;
-      padding: 14px 22px;
+      gap: 10px;
+      padding: 14px 28px;
       font-family: inherit;
       font-size: 1rem;
       font-weight: 600;
-      color: var(--text-color);
-      background: transparent;
-      border: 1.5px solid var(--primary-color);
-      border-radius: var(--button-radius);
+      letter-spacing: -0.005em;
+      color: var(--on-primary);
+      background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--primary-color) 100%, white 8%),
+        var(--primary-color)
+      );
+      border: 0;
+      border-radius: 999px;
       text-decoration: none;
       cursor: pointer;
-      transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
+      box-shadow: var(--shadow-button);
+      transition:
+        transform 180ms cubic-bezier(.2, .9, .3, 1),
+        box-shadow 180ms ease,
+        background 180ms ease;
     }
     .login__btn:hover {
-      background: color-mix(in srgb, var(--primary-color) 12%, transparent);
-      border-color: var(--primary-color-hover);
+      transform: translateY(-1px);
+      background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--primary-color-hover) 100%, white 6%),
+        var(--primary-color-hover)
+      );
+      box-shadow: var(--shadow-button-hover);
     }
     .login__btn:active {
-      transform: translateY(1px);
+      transform: translateY(0);
+      background: var(--primary-color-active);
     }
     .login__btn:focus-visible {
       outline: 2px solid var(--primary-color);
-      outline-offset: 3px;
+      outline-offset: 4px;
     }
     .login__btn svg {
       flex-shrink: 0;
       display: block;
+      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15));
     }
-    .login__hint {
-      margin-top: 1.25rem;
-      font-size: 0.9rem;
+    .login__brand {
+      margin-top: 56px;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      letter-spacing: 0.02em;
       color: var(--muted-color);
-    }
-    .login__hint-link {
-      color: var(--primary-color);
-      text-decoration: none;
-      border-bottom: 1px dashed color-mix(in srgb, var(--primary-color) 50%, transparent);
-    }
-    .login__hint-link:hover {
-      border-bottom-style: solid;
+      opacity: 0.85;
     }
   </style>
 </head>
@@ -158,7 +204,7 @@ function renderLoginPage({ title, description, hint }: LoginPageOptions): string
       ${HF_LOGO_SVG}
       <span>Sign in with Hugging Face</span>
     </a>
-    ${hintHtml}
+    <p class="login__brand">Research Article Template Editor</p>
   </main>
 </body>
 </html>`;
@@ -177,7 +223,7 @@ function sendLoginPage(res: express.Response) {
   res.status(200).send(
     renderLoginPage({
       title: "This article is not yet published",
-      description: "Log in with your Hugging Face account to access the editor.",
+      description: "Sign in with your Hugging Face account to access the editor.",
     }),
   );
 }
@@ -314,7 +360,6 @@ export function createApp() {
             renderLoginPage({
               title: "Editor access",
               description: "Sign in with your Hugging Face account to start editing.",
-              hint: "After signing in, come back and {refresh}.",
             }),
           );
           return;