From 4b814c9a1721e237242c59b1931af31b9d9af3f1 Mon Sep 17 00:00:00 2001
From: cynarAI <155274210+cynarAI@users.noreply.github.com>
Date: Fri, 9 Oct 2026 16:13:38 +0200
Subject: [PATCH] Greet with the header's ev-eyes wordmark and a calmer welcome
 type scale (#184)

Welcome and sign-in now show the same animated wordmark as the sidebar header
("ev" plus the Oo eyes) instead of the teal face. The welcome tagline, subline and
buttons drop to the shared title and body sizes.


Claude-Session: https://claude.ai/code/session_01Tgvrj34NMnaqvtgvruYQZZ

Co-authored-by: Claude <noreply@anthropic.com>
---
 apps/web/e2e/welcome.spec.ts   |  9 +++++----
 apps/web/src/pages/Auth.tsx    |  4 ++--
 apps/web/src/pages/Welcome.tsx | 22 +++++++++-------------
 3 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/apps/web/e2e/welcome.spec.ts b/apps/web/e2e/welcome.spec.ts
index 69e1a39..f2f76db 100644
--- a/apps/web/e2e/welcome.spec.ts
+++ b/apps/web/e2e/welcome.spec.ts
@@ -1,16 +1,17 @@
 import { expect, test } from "@playwright/test";
 import { captureScreenshot } from "./helpers";
 
-test("the welcome and sign-in screens carry the same evOo logo", async ({ page }, testInfo) => {
+test("the welcome and sign-in screens carry the evOo wordmark from the header", async ({
+  page,
+}, testInfo) => {
   await page.setViewportSize({ width: 390, height: 844 });
   for (const scheme of ["dark", "light"] as const) {
     await page.emulateMedia({ colorScheme: scheme });
     await page.goto("/", { waitUntil: "domcontentloaded" });
-    await expect(page.getByText("evOo", { exact: true })).toBeVisible();
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-welcome-${scheme}`);
     await page.goto("/sign-in", { waitUntil: "domcontentloaded" });
-    await expect(page.locator('img[src="/evoo-logo.svg"]')).toBeVisible();
+    await expect(page.locator(".evoo-mascot-container")).toBeVisible();
     await captureScreenshot(page, testInfo, `phone-sign-in-${scheme}`);
   }
 });
diff --git a/apps/web/src/pages/Auth.tsx b/apps/web/src/pages/Auth.tsx
index f885bec..00cdf40 100644
--- a/apps/web/src/pages/Auth.tsx
+++ b/apps/web/src/pages/Auth.tsx
@@ -1,6 +1,6 @@
 import { Trans, useLingui } from "@lingui/react/macro";
 import { readBoundedJsonResponse, signupRequiresEmailVerification } from "@rakazo/core";
-import { Button, Input, Label } from "@rakazo/ui-web";
+import { Button, EvooMascot, Input, Label } from "@rakazo/ui-web";
 import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useSearchParams } from "react-router-dom";
@@ -337,7 +337,7 @@ function AuthFrame({
   return (
     <div className="flex min-h-full items-center justify-center bg-background px-6 py-16 text-foreground">
       <form onSubmit={onSubmit} className="flex w-[460px] flex-col items-center">
-        <img src="/evoo-logo.svg" alt="" className="size-[74px]" />
+        <EvooMascot size={56} showWordmark />
         <h1 aria-live="polite" className="mb-9 mt-7 text-4xl font-medium tracking-tight">
           {title}
         </h1>
diff --git a/apps/web/src/pages/Welcome.tsx b/apps/web/src/pages/Welcome.tsx
index ed6f141..40d3a4f 100644
--- a/apps/web/src/pages/Welcome.tsx
+++ b/apps/web/src/pages/Welcome.tsx
@@ -1,4 +1,5 @@
 import { Trans } from "@lingui/react/macro";
+import { EvooMascot } from "@rakazo/ui-web";
 import { useNavigate } from "react-router-dom";
 import { WindowChrome } from "./WindowChrome";
 
@@ -9,33 +10,28 @@ export function WelcomePage() {
       <div className="app-drag flex gap-2 px-5 py-[18px]">
         <WindowChrome />
       </div>
-      <div className="flex flex-1 flex-col items-center justify-center gap-10 px-6 pb-[90px]">
-        <div className="flex flex-col items-center gap-6 sm:flex-row sm:gap-[26px]">
-          <img src="/evoo-logo.svg" alt="" className="size-[88px]" />
-          <div className="text-[76px] leading-none tracking-[-0.03em] text-foreground font-['EvOo_Display',sans-serif]">
-            evOo
-          </div>
-        </div>
-        <div className="max-w-[520px] space-y-3 text-center">
-          <p className="text-balance text-[27px] leading-[1.35] text-foreground/90 font-medium">
+      <div className="flex flex-1 flex-col items-center justify-center gap-8 px-6 pb-[90px]">
+        <EvooMascot size={72} showWordmark interactive trackPointer="hover" />
+        <div className="max-w-[420px] space-y-2 text-center">
+          <p className="text-balance text-ui-title font-medium text-foreground/90">
             <Trans>Your specialists. One calm place to talk.</Trans>
           </p>
-          <p className="text-balance text-ui-title-sm leading-[1.5] text-foreground/60">
+          <p className="text-balance text-ui-body text-foreground/60">
             <Trans>Simple to start. Expert when you need it.</Trans>
           </p>
         </div>
-        <div className="flex flex-col sm:flex-row items-center gap-4">
+        <div className="flex flex-col sm:flex-row items-center gap-3">
           <button
             type="button"
             onClick={() => navigate("/sign-in")}
-            className="app-no-drag rounded-full bg-primary text-primary-foreground px-[34px] py-[15px] text-[19px] font-medium transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-primary text-primary-foreground px-7 py-3 text-ui-body font-medium transition hover:scale-[1.04]"
           >
             <Trans>Sign in</Trans>&nbsp;&nbsp;→
           </button>
           <button
             type="button"
             onClick={() => navigate("/sign-up")}
-            className="app-no-drag rounded-full bg-accent px-[34px] py-[15px] text-[19px] text-foreground transition hover:scale-[1.04]"
+            className="app-no-drag rounded-full bg-accent px-7 py-3 text-ui-body text-foreground transition hover:scale-[1.04]"
           >
             <Trans>Sign up</Trans>
           </button>