From 7b2c2118a7804433e4e12113b9c4e2ddc29e051a Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Tue, 3 Mar 2026 08:08:02 -0500
Subject: [PATCH] feat: recolor BrandLogo to cyan gradient, split BrandWordmark
 for gradient Flow text

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/common/BrandLogo.tsx  | 43 ++++++++-----------
 .../src/components/common/BrandWordmark.tsx   |  9 ++--
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/common/BrandLogo.tsx b/frontend/src/components/common/BrandLogo.tsx
index 278be087..9b952c9b 100644
--- a/frontend/src/components/common/BrandLogo.tsx
+++ b/frontend/src/components/common/BrandLogo.tsx
@@ -5,42 +5,37 @@ interface BrandLogoProps {
   className?: string
 }
 
-/**
- * ResolutionFlow brand logo icon — white monochrome.
- * sm (32x32) for header/navbar, lg (80x80) for login/register pages.
- */
 export function BrandLogo({ size = 'sm', className }: BrandLogoProps) {
   const sizeClasses = size === 'sm' ? 'h-8 w-8' : 'h-20 w-20'
-
   const strokeBase = size === 'sm' ? 1 : 2
   const strokeThick = size === 'sm' ? 1.25 : 2.5
   const dashArray = size === 'sm' ? '1 1.5' : '2 3'
   const nodeR = size === 'sm' ? { outer: 2.5, inner: 2.75 } : { outer: 5, inner: 5.5 }
   const hubR = size === 'sm' ? { glow: 5, solid: 3.5 } : { glow: 10, solid: 7 }
-
   const vb = size === 'sm' ? '0 0 40 40' : '0 0 80 80'
   const s = size === 'sm' ? 1 : 2
+  const gradId = size === 'sm' ? 'logoGradSm' : 'logoGradLg'
+  const gradEnd = String(40 * (size === 'sm' ? 1 : 2))
 
   return (
     <svg viewBox={vb} fill="none" className={cn(sizeClasses, className)}>
-      {/* Input nodes */}
-      <circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill="white" opacity="0.35" />
-      <circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill="white" opacity="0.5" />
-      <circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill="white" opacity="0.5" />
-      <circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill="white" opacity="0.35" />
-
-      {/* Connecting lines */}
-      <path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
-      <path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
-      <path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" opacity="0.6" />
-      <path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke="white" strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.45" />
-
-      {/* Central hub */}
-      <circle cx={18 * s} cy={20 * s} r={hubR.glow} fill="white" opacity="0.15" />
-      <circle cx={18 * s} cy={20 * s} r={hubR.solid} fill="white" />
-
-      {/* Output arrow */}
-      <path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke="white" strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
+      <defs>
+        <linearGradient id={gradId} x1="0" y1="0" x2={gradEnd} y2={gradEnd} gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#06b6d4" />
+          <stop offset="100%" stopColor="#22d3ee" />
+        </linearGradient>
+      </defs>
+      <circle cx={5 * s} cy={7 * s} r={nodeR.outer} fill={`url(#${gradId})`} opacity="0.5" />
+      <circle cx={5 * s} cy={15 * s} r={nodeR.inner} fill={`url(#${gradId})`} opacity="0.7" />
+      <circle cx={5 * s} cy={25 * s} r={nodeR.inner} fill={`url(#${gradId})`} opacity="0.7" />
+      <circle cx={5 * s} cy={33 * s} r={nodeR.outer} fill={`url(#${gradId})`} opacity="0.5" />
+      <path d={`M${7.5 * s} ${7 * s}L${14 * s} ${17 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.4" />
+      <path d={`M${7.75 * s} ${15 * s}L${14 * s} ${19 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" opacity="0.5" />
+      <path d={`M${7.75 * s} ${25 * s}L${14 * s} ${21 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" opacity="0.5" />
+      <path d={`M${7.5 * s} ${33 * s}L${14 * s} ${23 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeBase} strokeLinecap="round" strokeDasharray={dashArray} opacity="0.4" />
+      <circle cx={18 * s} cy={20 * s} r={hubR.glow} fill={`url(#${gradId})`} opacity="0.15" />
+      <circle cx={18 * s} cy={20 * s} r={hubR.solid} fill={`url(#${gradId})`} opacity="0.9" />
+      <path d={`M${21.5 * s} ${20 * s}H${35 * s}M${35 * s} ${20 * s}L${30 * s} ${15 * s}M${35 * s} ${20 * s}L${30 * s} ${25 * s}`} stroke={`url(#${gradId})`} strokeWidth={strokeThick} strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   )
 }
diff --git a/frontend/src/components/common/BrandWordmark.tsx b/frontend/src/components/common/BrandWordmark.tsx
index e93f8e72..bd0e9318 100644
--- a/frontend/src/components/common/BrandWordmark.tsx
+++ b/frontend/src/components/common/BrandWordmark.tsx
@@ -5,20 +5,17 @@ interface BrandWordmarkProps {
   className?: string
 }
 
-/**
- * ResolutionFlow wordmark — clean white text.
- * sm for header/navbar, lg for login/register pages.
- */
 export function BrandWordmark({ size = 'sm', className }: BrandWordmarkProps) {
   return (
     <span
       className={cn(
-        'font-semibold tracking-tight text-white',
+        'font-heading font-bold tracking-tight',
         size === 'sm' ? 'text-xl' : 'text-3xl',
         className
       )}
     >
-      ResolutionFlow
+      <span className="text-foreground">Resolution</span>
+      <span className="text-gradient-brand">Flow</span>
     </span>
   )
 }