feat: add indigo brand color to logo throughout site

nullcoder · claude · nullcoder · commit dc81da81c7c9 · 2025-06-07T13:12:45.000-07:00
- Update header logo with indigo-600/400 for strong brand presence - Apply muted indigo (80% opacity) to footer for subtle reinforcement - Use soft indigo (50% opacity) for 404 page floating ghost - Add CSS custom properties --ghost-brand for easy color management - Different intensities create visual hierarchy while maintaining consistency The indigo color (#6366f1) matches our favicon and adds personality while keeping the overall design professional and clean. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/globals.css b/app/globals.css
@@ -123,6 +123,7 @@
 
 :root {
   --radius: 0.625rem;
+  --ghost-brand: #6366f1;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -157,6 +158,7 @@
 }
 
 .dark {
+  --ghost-brand: #818cf8;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -8,7 +8,7 @@ export default function NotFound() {
     <div className="container mx-auto flex min-h-[80vh] flex-col items-center justify-center px-4 text-center">
       {/* Floating Ghost */}
       <div className="animate-float mb-8">
-        <GhostLogo size="2xl" className="text-muted-foreground/50" />
+        <GhostLogo size="2xl" className="text-indigo-500/50" />
       </div>
 
       {/* 404 Text with Glitch Effect */}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -31,7 +31,7 @@ export function Footer({ className, buildId }: FooterProps) {
             {/* Left section - Branding */}
             <div className="space-y-2 text-center md:text-left">
               <div className="flex items-center justify-center gap-2 md:justify-start">
-                <GhostLogo className="text-primary" />
+                <GhostLogo className="text-indigo-600/80 dark:text-indigo-400/80" />
                 <span className="text-lg font-semibold">GhostPaste</span>
               </div>
               <p className="text-muted-foreground text-sm">
diff --git a/components/header.tsx b/components/header.tsx
@@ -57,7 +57,10 @@ export function Header() {
           href="/"
           className="flex items-center gap-2 text-lg font-semibold transition-opacity hover:opacity-80"
         >
-          <GhostLogo size="lg" className="text-primary" />
+          <GhostLogo
+            size="lg"
+            className="text-indigo-600 dark:text-indigo-400"
+          />
           <span>GhostPaste</span>
         </Link>
 
@@ -130,7 +133,10 @@ export function Header() {
             >
               <SheetHeader className="p-6 pb-0">
                 <SheetTitle className="flex items-center gap-2 text-lg">
-                  <GhostLogo size="sm" className="text-primary" />
+                  <GhostLogo
+                    size="sm"
+                    className="text-indigo-600 dark:text-indigo-400"
+                  />
                   <span>GhostPaste</span>
                 </SheetTitle>
               </SheetHeader>
