diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index fab6786..b1d788f 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -5,10 +5,12 @@ import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { login } from '@/lib/auth-actions';
+import { BRAND_YELLOW } from '@/components/brand/brand';
+import { TesseraLogo } from '@/components/brand/tessera-logo';
 
 /**
  * Split-screen login page (D-01).
- * Left: Tessera branding with primary yellow (#ffed00) background.
+ * Left: Tessera branding on the brand yellow background (BRAND_YELLOW).
  * Right: Login form on neutral background.
  * No sidebar or header (D-04, handled by (auth) layout).
  */
@@ -37,35 +39,15 @@ export default function LoginPage() {
   return (
     <div className="flex min-h-screen">
       {/* Left: Branding panel (hidden on mobile, visible on md+) */}
-      <div className="hidden md:flex md:flex-1 items-center justify-center bg-[#ffed00]">
-        <div className="flex flex-col items-center gap-6 px-8 text-center">
-          {/* Tessera logo / text */}
-          <h1 className="text-6xl font-extrabold text-gray-900 tracking-tight">
-            Tessera
-          </h1>
+      <div
+        className="hidden md:flex md:flex-1 items-center justify-center"
+        style={{ backgroundColor: BRAND_YELLOW }}
+      >
+        <div className="flex flex-col items-center gap-6 px-8 text-center text-gray-900">
+          <TesseraLogo variant="stacked" size={112} plateOutline={false} />
           <p className="text-xl text-gray-800 max-w-md leading-relaxed">
             {t('branding.tagline')}
           </p>
-          {/* Abstract grid icon representing modules */}
-          <div className="mt-4">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="80"
-              height="80"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-gray-800 opacity-50"
-            >
-              <rect x="3" y="3" width="7" height="7" rx="1" />
-              <rect x="14" y="3" width="7" height="7" rx="1" />
-              <rect x="14" y="14" width="7" height="7" rx="1" />
-              <rect x="3" y="14" width="7" height="7" rx="1" />
-            </svg>
-          </div>
         </div>
       </div>
 
@@ -74,9 +56,7 @@ export default function LoginPage() {
         <div className="w-full max-w-sm space-y-8">
           {/* Mobile-only branding */}
           <div className="text-center md:hidden">
-            <h1 className="text-3xl font-extrabold text-primary tracking-tight">
-              Tessera
-            </h1>
+            <TesseraLogo variant="horizontal" size={32} />
             <p className="mt-2 text-sm text-muted-foreground">
               {t('branding.tagline')}
             </p>
diff --git a/apps/web/src/app/(auth)/reset-password/[token]/page.tsx b/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
index c3c240b..cadb64e 100644
--- a/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
+++ b/apps/web/src/app/(auth)/reset-password/[token]/page.tsx
@@ -4,6 +4,7 @@ import { useState, useTransition, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import { useParams, useRouter } from 'next/navigation';
 import Link from 'next/link';
+import { TesseraLogo } from '@/components/brand/tessera-logo';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
@@ -81,9 +82,7 @@ export default function ResetPasswordTokenPage() {
       <div className="w-full max-w-sm space-y-8">
         {/* Heading */}
         <div className="text-center">
-          <h1 className="text-3xl font-extrabold text-primary tracking-tight">
-            Tessera
-          </h1>
+          <TesseraLogo variant="horizontal" size={32} />
           <h2 className="mt-4 text-2xl font-bold text-foreground">
             {t('resetPassword.newPasswordTitle')}
           </h2>
diff --git a/apps/web/src/app/(auth)/reset-password/page.tsx b/apps/web/src/app/(auth)/reset-password/page.tsx
index de1d4e7..8d95bc7 100644
--- a/apps/web/src/app/(auth)/reset-password/page.tsx
+++ b/apps/web/src/app/(auth)/reset-password/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useTransition } from 'react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
+import { TesseraLogo } from '@/components/brand/tessera-logo';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
 
@@ -52,9 +53,7 @@ export default function ResetPasswordPage() {
       <div className="w-full max-w-sm space-y-8">
         {/* Heading */}
         <div className="text-center">
-          <h1 className="text-3xl font-extrabold text-primary tracking-tight">
-            Tessera
-          </h1>
+          <TesseraLogo variant="horizontal" size={32} />
           <h2 className="mt-4 text-2xl font-bold text-foreground">
             {t('resetPassword.title')}
           </h2>
diff --git a/apps/web/src/components/brand/tessera-logo.tsx b/apps/web/src/components/brand/tessera-logo.tsx
index 3727984..9018d26 100644
--- a/apps/web/src/components/brand/tessera-logo.tsx
+++ b/apps/web/src/components/brand/tessera-logo.tsx
@@ -109,7 +109,7 @@ export function TesseraLogo({
       <span className={`inline-flex flex-col items-center gap-2 ${className ?? ''}`}>
         <LogoMark size={size} plateOutline={plateOutline} ariaLabel={ariaLabel} />
         <span
-          className={`text-2xl font-bold tracking-tight text-foreground ${wordmarkClassName ?? ''}`}
+          className={`text-2xl font-bold tracking-tight ${wordmarkClassName ?? ''}`}
         >
           {t('appName')}
         </span>
@@ -121,7 +121,7 @@ export function TesseraLogo({
     <span className={`inline-flex items-center gap-2 ${className ?? ''}`}>
       <LogoMark size={size} plateOutline={plateOutline} ariaLabel={ariaLabel} />
       <span
-        className={`font-bold tracking-tight text-foreground ${wordmarkClassName ?? ''}`}
+        className={`font-bold tracking-tight ${wordmarkClassName ?? ''}`}
       >
         {t('appName')}
       </span>
diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index df6ab11..30e28e5 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
+import { TesseraLogo } from '@/components/brand/tessera-logo';
 import { useSidebarStore } from '@/lib/stores/sidebar-store';
 import { useAuthStore } from '@/lib/stores/auth-store';
 import { fetchCurrentUser, logout } from '@/lib/auth-actions';
@@ -88,9 +89,7 @@ export function Header() {
             <line x1="3" y1="18" x2="21" y2="18" />
           </svg>
         </button>
-        <span className="text-lg font-bold text-primary">
-          {t('common.appName')}
-        </span>
+        <TesseraLogo variant="horizontal" size={28} />
       </div>
 
       {/* Center: Breadcrumb / page title */}
diff --git a/apps/web/src/components/layout/sidebar.test.tsx b/apps/web/src/components/layout/sidebar.test.tsx
index 95ae563..01d497c 100644
--- a/apps/web/src/components/layout/sidebar.test.tsx
+++ b/apps/web/src/components/layout/sidebar.test.tsx
@@ -33,6 +33,7 @@ vi.mock('next-intl', () => ({
       },
       common: {
         appName: 'Tessera',
+        'brand.logoAlt': 'Tessera Logo',
       },
     };
     return map[ns]?.[key] ?? key;
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index bdbf9c6..8dfa6da 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
+import { TesseraLogo } from '@/components/brand/tessera-logo';
 import { useSidebarStore } from '@/lib/stores/sidebar-store';
 import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
 import { SidebarSearch } from '@/components/layout/sidebar-search';
@@ -19,7 +20,6 @@ interface SidebarModule {
 
 export function Sidebar() {
   const t = useTranslations('sidebar');
-  const tCommon = useTranslations('common');
   const { isCollapsed, isMobileOpen, toggle, setMobileOpen } = useSidebarStore();
   const [activeModules, setActiveModules] = useState<SidebarModule[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
@@ -223,9 +223,7 @@ export function Sidebar() {
           />
           <aside className="fixed left-0 top-0 z-50 h-full w-[var(--sidebar-width)] bg-sidebar shadow-lg">
             <div className="flex h-[var(--header-height)] items-center justify-between border-b border-sidebar-border px-4">
-              <span className="text-lg font-bold text-primary">
-                {tCommon('appName')}
-              </span>
+              <TesseraLogo variant="horizontal" size={28} />
               <button
                 onClick={() => setMobileOpen(false)}
                 className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
diff --git a/apps/web/src/components/settings/account-settings-form.tsx b/apps/web/src/components/settings/account-settings-form.tsx
index 02d08c0..d026943 100644
--- a/apps/web/src/components/settings/account-settings-form.tsx
+++ b/apps/web/src/components/settings/account-settings-form.tsx
@@ -10,8 +10,9 @@ import {
   updateAccentColorAction,
 } from '@/lib/auth-actions';
 import { useAuthStore } from '@/lib/stores/auth-store';
+import { BRAND_YELLOW } from '@/components/brand/brand';
 
-const DEFAULT_ACCENT = '#ffed00';
+const DEFAULT_ACCENT = BRAND_YELLOW;
 
 export function AccountSettingsForm() {
   const t = useTranslations('settings');