From 6718f21031d32dff28b472521b1ccb88494886aa Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Wed, 8 Apr 2026 23:34:57 -0400
Subject: [PATCH 1/2] Update hero tagline, add stats bar, rename nav label to
 UI

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 packages/ghost-ui/src/app/ui/page.tsx         |  2 +-
 .../ghost-ui/src/components/docs/dock.tsx     |  2 +-
 .../ghost-ui/src/components/docs/hero.tsx     | 27 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/ghost-ui/src/app/ui/page.tsx b/packages/ghost-ui/src/app/ui/page.tsx
index 0451f28..f063f37 100644
--- a/packages/ghost-ui/src/app/ui/page.tsx
+++ b/packages/ghost-ui/src/app/ui/page.tsx
@@ -100,7 +100,7 @@ export default function DesignLanguageIndex() {
       <AnimatedPageHeader
         kicker="Design Language"
         title="Ghost UI"
-        description="A shared design language for our tools."
+        description="The shared design language across Ghost — foundations, primitives, and AI-native components."
       />
 
       <div
diff --git a/packages/ghost-ui/src/components/docs/dock.tsx b/packages/ghost-ui/src/components/docs/dock.tsx
index ca4d956..5bb1f7a 100644
--- a/packages/ghost-ui/src/components/docs/dock.tsx
+++ b/packages/ghost-ui/src/components/docs/dock.tsx
@@ -37,7 +37,7 @@ import { cn } from "@/lib/utils";
 const nav: { name: string; path: string; icon: LucideIcon }[] = [
   { name: "Home", path: "/", icon: Home },
   { name: "Tools", path: "/tools", icon: Wrench },
-  { name: "Design Language", path: "/ui", icon: Palette },
+  { name: "UI", path: "/ui", icon: Palette },
 ];
 
 export function Dock() {
diff --git a/packages/ghost-ui/src/components/docs/hero.tsx b/packages/ghost-ui/src/components/docs/hero.tsx
index 126ece2..6d3ecb3 100644
--- a/packages/ghost-ui/src/components/docs/hero.tsx
+++ b/packages/ghost-ui/src/components/docs/hero.tsx
@@ -3,12 +3,18 @@
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useEffect, useRef } from "react";
+import { getAllComponents } from "@/lib/component-registry";
 
 gsap.registerPlugin(ScrollTrigger);
 
 export function Hero() {
   const containerRef = useRef<HTMLElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
+  const statsRef = useRef<HTMLDivElement>(null);
+
+  const allComponents = getAllComponents();
+  const totalCount = allComponents.length;
+  const aiCount = allComponents.filter((c) => c.isAI).length;
 
   useEffect(() => {
     const ctx = gsap.context(() => {
@@ -27,6 +33,13 @@ export function Hero() {
         });
       }
 
+      // Animate stats bar
+      const stats = containerRef.current?.querySelector(".hero-stats");
+      if (stats) {
+        gsap.set(stats, { y: 20, opacity: 0 });
+        tl.to(stats, { y: 0, opacity: 1, duration: 0.8 }, "-=0.4");
+      }
+
       // Parallax on scroll — heading moves up faster
       if (headingRef.current) {
         gsap.to(headingRef.current, {
@@ -101,8 +114,20 @@ export function Hero() {
           className="mt-4 text-center text-muted-foreground leading-relaxed whitespace-nowrap"
           style={{ fontSize: "clamp(0.875rem, 1.5vw, 1.125rem)" }}
         >
-          design infrastructure for decentralized systems.
+          tooling for decentralized design
         </p>
+        <div
+          ref={statsRef}
+          className="hero-stats mt-6 flex items-center justify-center gap-x-5 gap-y-2 flex-wrap text-sm text-muted-foreground"
+        >
+          <span>{totalCount} Components</span>
+          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
+          <span>{aiCount} AI-Native</span>
+          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
+          <span>5 Theme Presets</span>
+          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
+          <span>shadcn Compatible</span>
+        </div>
       </div>
     </section>
   );

From 2641e07830e9072b181fb9a7288015e8cc8e19bd Mon Sep 17 00:00:00 2001
From: Nahiyan Khan <nahiyan@squareup.com>
Date: Thu, 9 Apr 2026 07:46:47 -0400
Subject: [PATCH 2/2] Unify card hover style and remove stats bar from hero

Replace scale+shadow hover with sliding title fill on UI and
Foundations cards to match Tools page. Remove stats bar from hero.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ghost-ui/src/app/foundations/page.tsx     |  9 ++++---
 packages/ghost-ui/src/app/ui/page.tsx         |  9 ++++---
 .../ghost-ui/src/components/docs/hero.tsx     | 25 -------------------
 3 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/packages/ghost-ui/src/app/foundations/page.tsx b/packages/ghost-ui/src/app/foundations/page.tsx
index 560b170..6825a16 100644
--- a/packages/ghost-ui/src/app/foundations/page.tsx
+++ b/packages/ghost-ui/src/app/foundations/page.tsx
@@ -83,11 +83,14 @@ export default function FoundationsIndex() {
           <Link
             key={item.href}
             to={item.href}
-            className="foundation-card group rounded-[var(--radius-card-sm)] border border-border-card bg-card p-10 transition-all duration-200 hover:scale-[1.03] hover:shadow-elevated"
+            className="foundation-card group rounded-[var(--radius-card-sm)] border border-border-card hover:border-foreground/25 bg-card p-10 transition-colors duration-300"
           >
             <div className="mb-6">{item.visual}</div>
-            <span className="font-display text-lg font-bold tracking-tight">
-              {item.name}
+            <span className="relative inline-block font-display text-lg font-bold tracking-tight">
+              <span className="relative z-10 transition-colors duration-300 group-hover:text-background">
+                {item.name}
+              </span>
+              <span className="absolute inset-0 bg-foreground origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out" />
             </span>
             <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
               {item.description}
diff --git a/packages/ghost-ui/src/app/ui/page.tsx b/packages/ghost-ui/src/app/ui/page.tsx
index f063f37..3bba503 100644
--- a/packages/ghost-ui/src/app/ui/page.tsx
+++ b/packages/ghost-ui/src/app/ui/page.tsx
@@ -111,11 +111,14 @@ export default function DesignLanguageIndex() {
           <Link
             key={item.href}
             to={item.href}
-            className="dl-card group rounded-[var(--radius-card-sm)] border border-border-card bg-card p-10 transition-all duration-200 hover:scale-[1.03] hover:shadow-elevated"
+            className="dl-card group rounded-[var(--radius-card-sm)] border border-border-card hover:border-foreground/25 bg-card p-10 transition-colors duration-300"
           >
             <div className="mb-6">{item.visual}</div>
-            <span className="font-display text-lg font-bold tracking-tight">
-              {item.name}
+            <span className="relative inline-block font-display text-lg font-bold tracking-tight">
+              <span className="relative z-10 transition-colors duration-300 group-hover:text-background">
+                {item.name}
+              </span>
+              <span className="absolute inset-0 bg-foreground origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out" />
             </span>
             <p className="mt-2 text-sm text-muted-foreground leading-relaxed">
               {item.description}
diff --git a/packages/ghost-ui/src/components/docs/hero.tsx b/packages/ghost-ui/src/components/docs/hero.tsx
index 6d3ecb3..ce79afb 100644
--- a/packages/ghost-ui/src/components/docs/hero.tsx
+++ b/packages/ghost-ui/src/components/docs/hero.tsx
@@ -3,18 +3,12 @@
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 import { useEffect, useRef } from "react";
-import { getAllComponents } from "@/lib/component-registry";
 
 gsap.registerPlugin(ScrollTrigger);
 
 export function Hero() {
   const containerRef = useRef<HTMLElement>(null);
   const headingRef = useRef<HTMLHeadingElement>(null);
-  const statsRef = useRef<HTMLDivElement>(null);
-
-  const allComponents = getAllComponents();
-  const totalCount = allComponents.length;
-  const aiCount = allComponents.filter((c) => c.isAI).length;
 
   useEffect(() => {
     const ctx = gsap.context(() => {
@@ -33,13 +27,6 @@ export function Hero() {
         });
       }
 
-      // Animate stats bar
-      const stats = containerRef.current?.querySelector(".hero-stats");
-      if (stats) {
-        gsap.set(stats, { y: 20, opacity: 0 });
-        tl.to(stats, { y: 0, opacity: 1, duration: 0.8 }, "-=0.4");
-      }
-
       // Parallax on scroll — heading moves up faster
       if (headingRef.current) {
         gsap.to(headingRef.current, {
@@ -116,18 +103,6 @@ export function Hero() {
         >
           tooling for decentralized design
         </p>
-        <div
-          ref={statsRef}
-          className="hero-stats mt-6 flex items-center justify-center gap-x-5 gap-y-2 flex-wrap text-sm text-muted-foreground"
-        >
-          <span>{totalCount} Components</span>
-          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
-          <span>{aiCount} AI-Native</span>
-          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
-          <span>5 Theme Presets</span>
-          <span className="hidden h-3 w-px bg-border sm:block" aria-hidden />
-          <span>shadcn Compatible</span>
-        </div>
       </div>
     </section>
   );