From 79bdb97c69b05fb577a4980b902e9199e45a2e56 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sat, 15 Aug 2026 11:12:41 -0600
Subject: [PATCH] Adjust button hover

---
 .../CustomMethodCardWizard.view.tsx           |  2 +-
 .../CustomMethodCardWizardBlocksList.view.tsx | 26 ++++++----
 app/(marketing)/use-cases/page.tsx            |  4 +-
 app/components/asset/logo/Logo.tsx            |  8 ++--
 app/components/buttons/Button/Button.tsx      | 47 ++++++-------------
 app/components/cards/Icon/Icon.view.tsx       |  2 +-
 app/components/cards/Mini/Mini.container.tsx  |  4 +-
 app/components/cards/Mini/Mini.view.tsx       |  2 +-
 .../ContentThumbnailTemplate.view.tsx         | 13 ++---
 app/components/controls/Chip/Chip.view.tsx    |  4 +-
 .../controls/Incrementer/Incrementer.view.tsx |  2 +-
 .../MenuItem/MenuItem.container.tsx           |  2 +-
 .../sections/LogoWall/LogoWall.view.tsx       |  6 +--
 docs/figma-component-registry.md              |  1 +
 docs/guides/ops-backend-deploy.md             | 11 +++--
 stories/sections/LogoWall.stories.js          |  6 +--
 tests/components/Button.test.tsx              |  3 ++
 tests/components/Logo.test.tsx                | 10 ++++
 tests/unit/LogoWall.test.jsx                  | 21 +++------
 19 files changed, 82 insertions(+), 92 deletions(-)

diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
index e4616ce..aeefb01 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizard.view.tsx
@@ -88,7 +88,7 @@ function CustomMethodCardWizardViewComponent({
         />
       ) : null}
       {!fieldTypeModal && wizardStep === 3 ? (
-        <div className="flex w-full flex-col gap-4">
+        <div className="flex w-full flex-col gap-4 pt-1">
           {draftFieldBlocks.length > 0 ? (
             <CustomMethodCardWizardBlocksList
               blocks={draftFieldBlocks}
diff --git a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
index 7b3f279..ad9836b 100644
--- a/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
+++ b/app/(app)/create/components/CustomMethodCardWizard/CustomMethodCardWizardBlocksList.view.tsx
@@ -40,19 +40,27 @@ function CustomMethodCardWizardBlocksListViewComponent({
   onDragEnd,
 }: CustomMethodCardWizardBlocksListViewProps) {
   return (
-    <ul className="flex list-none flex-col gap-2 p-0" aria-label={listLabel}>
+    <ul
+      className="flex list-none flex-col gap-2 p-0 pt-1"
+      aria-label={listLabel}
+    >
       {blocks.map((block, index) => {
         const kind = block.kind as AddCustomFieldType;
         const typeLabel = fieldTypeLabels[kind];
-        const isOver = overIndex === index && draggingIndex !== index;
+        const title = block.blockTitle.trim() || typeLabel;
+        const isDragging = draggingIndex === index;
+        const isDropTarget = overIndex === index && draggingIndex !== index;
         return (
           <li
             key={block.id}
-            className={`flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border border-[var(--color-border-default-primary)] bg-[var(--color-surface-default-secondary)] pl-1 pr-3 py-2 transition-shadow ${
-              isOver
-                ? "ring-2 ring-[var(--color-border-invert-primary)] ring-offset-2 ring-offset-[var(--color-surface-default-primary)]"
-                : ""
-            } ${draggingIndex === index ? "opacity-60" : ""}`}
+            aria-grabbed={isDragging ? true : undefined}
+            className={`group flex min-h-[52px] items-stretch gap-2 rounded-[var(--measures-radius-medium,8px)] border-2 bg-[var(--color-surface-default-secondary)] py-2 pl-1 pr-3 transition-[border-color,box-shadow,opacity] ${
+              isDropTarget
+                ? "relative z-10 border-[var(--color-border-invert-primary)]"
+                : isDragging
+                  ? "relative z-20 border-[var(--color-border-default-primary)] opacity-60 shadow-[0_4px_12px_rgba(0,0,0,0.12)]"
+                  : "border-[var(--color-border-default-primary)] hover:border-[var(--color-content-default-secondary)]"
+            }`}
             onDragOver={onDragOver(index)}
             onDrop={onDrop(index)}
           >
@@ -61,8 +69,8 @@ function CustomMethodCardWizardBlocksListViewComponent({
               draggable
               onDragStart={onDragStart(index)}
               onDragEnd={onDragEnd}
-              className="flex shrink-0 cursor-grab touch-manipulation items-center justify-center rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-1 text-[var(--color-content-default-secondary)] active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
               aria-label={dragHandleAriaLabel}
+              className="flex shrink-0 cursor-grab touch-manipulation items-center self-stretch rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-1 text-[var(--color-content-default-secondary)] transition-colors active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--color-border-invert-primary)] group-hover:text-[var(--color-content-default-primary)]"
             >
               <DragHandleGlyph />
             </button>
@@ -75,7 +83,7 @@ function CustomMethodCardWizardBlocksListViewComponent({
             </span>
             <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5">
               <span className="truncate font-inter text-[14px] font-medium leading-[18px] text-[var(--color-content-default-primary)]">
-                {block.blockTitle.trim() || typeLabel}
+                {title}
               </span>
               <span className="font-inter text-[12px] leading-4 text-[var(--color-content-default-secondary)]">
                 {typeLabel}
diff --git a/app/(marketing)/use-cases/page.tsx b/app/(marketing)/use-cases/page.tsx
index fa322e6..bdb4ffb 100644
--- a/app/(marketing)/use-cases/page.tsx
+++ b/app/(marketing)/use-cases/page.tsx
@@ -38,8 +38,8 @@ const CASE_STUDY_TILE_RADIUS_CLASS = "rounded-[23.093px]";
 
 const CASE_STUDY_LINK_CLASS = [
   CASE_STUDY_TILE_RADIUS_CLASS,
-  "block shrink-0 cursor-pointer outline-none transition-transform duration-200",
-  "hover:scale-[1.02] hover:opacity-95",
+  "block shrink-0 cursor-pointer outline-none transition-[opacity,transform] duration-200",
+  "hover:opacity-95",
   "focus-visible:ring-2 focus-visible:ring-[var(--color-border-default-brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary)]",
   "active:scale-[0.98]",
 ].join(" ");
diff --git a/app/components/asset/logo/Logo.tsx b/app/components/asset/logo/Logo.tsx
index 4fbe5e7..d639006 100644
--- a/app/components/asset/logo/Logo.tsx
+++ b/app/components/asset/logo/Logo.tsx
@@ -102,15 +102,15 @@ const Logo = memo<LogoProps>(
           : "hidden";
 
     return (
-      <Link href="/" className="block" aria-label={t("logoAlt")}>
+      <Link href="/" className="group block" aria-label={t("logoAlt")}>
         <div
           className={`flex items-center ${config.containerHeight} ${
             wordmark ? config.gap : ""
-          } transition-all duration-200 ease-in-out hover:scale-[1.02] cursor-pointer`}
+          } cursor-pointer`}
         >
           {/* Logo Text - responsive visibility for topNav sizes */}
           <div
-            className={`font-bricolage-grotesque ${textColorClass} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px] transition-colors duration-200 ${wordmarkVisibilityClass}`}
+            className={`font-bricolage-grotesque ${textColorClass} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px] transition-opacity duration-200 ease-out group-hover:opacity-80 ${wordmarkVisibilityClass}`}
             aria-label={t("logoText")}
           >
             {t("logoText")}
@@ -123,7 +123,7 @@ const Logo = memo<LogoProps>(
             alt={t("logoAlt")}
             width={27.05}
             height={27.05}
-            className={`flex-shrink-0 ${config.iconSize} transition-all duration-200 ${
+            className={`flex-shrink-0 ${config.iconSize} origin-center transition-transform duration-200 ease-out group-hover:scale-110 ${
               isInverse ? "brightness-0" : ""
             }`}
             aria-hidden="true"
diff --git a/app/components/buttons/Button/Button.tsx b/app/components/buttons/Button/Button.tsx
index b29d6fb..5156a34 100644
--- a/app/components/buttons/Button/Button.tsx
+++ b/app/components/buttons/Button/Button.tsx
@@ -115,48 +115,29 @@ const Button = memo<ButtonProps>(
 
     const variantStyles: Record<string, string> = {
       filled:
-        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus-visible:bg-[var(--color-surface-inverse-primary)] focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus-visible:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-invert-brand-primary)] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-[var(--color-surface-inverse-primary)] focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       "filled-inverse":
-        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus-visible:bg-[var(--color-surface-default-primary)] focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus-visible:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-[1.5px] border-transparent hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-[var(--color-surface-default-primary)] focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       outline:
-        "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-invert-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus-visible:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-border-invert-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-default-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-invert-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       "outline-inverse":
-        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-default-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus-visible:scale-[1.02] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-[var(--color-border-default-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-border-invert-brand-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-primary)] focus-visible:outline-none focus-visible:border-[1.5px] focus-visible:border-[var(--color-border-default-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-transparent active:text-[var(--color-content-invert-primary)] active:border-[1.5px] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[1.5px] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       ghost:
-        "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus-visible:scale-[1.02] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-default-brand-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-default-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-default-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-transparent active:text-[var(--color-content-default-primary)] active:border-[var(--color-border-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-invert-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       "ghost-inverse":
-        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus-visible:scale-[1.02] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-invert-primary)] border-[1.5px] border-transparent hover:bg-transparent hover:text-[var(--color-content-invert-primary)] hover:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-brand-primary)] focus-visible:outline-none focus-visible:border-transparent focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-invert-brand-primary)] active:text-[var(--color-content-invert-primary)] active:border-[var(--color-border-invert-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-invert-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       danger:
-        "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-border-default-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-default-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] focus-visible:scale-[1.02] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-border-default-negative-primary)] border border-[var(--color-border-default-negative-primary)] hover:bg-[var(--color-surface-invert-negative-secondary)] hover:text-[var(--color-border-default-negative-primary)] hover:border-[var(--color-border-default-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-border-default-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-default-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-default-primary),0_0_0px_4px_var(--color-border-invert-primary)] active:bg-[var(--color-surface-invert-negative-primary)] active:text-[var(--color-content-invert-negative-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
       "danger-inverse":
-        "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] hover:scale-[1.02] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-invert-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] focus-visible:scale-[1.02] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+        "bg-transparent text-[var(--color-content-invert-negative-primary)] border border-[var(--color-border-invert-negative-primary)] hover:bg-transparent hover:text-[var(--color-content-invert-negative-primary)] hover:border-[var(--color-border-invert-negative-primary)] focus-visible:bg-transparent focus-visible:text-[var(--color-content-invert-negative-primary)] focus-visible:outline-none focus-visible:border-[var(--color-border-invert-negative-primary)] focus-visible:shadow-[0_0_0px_2px_var(--color-border-invert-primary),0_0_0px_4px_var(--color-border-default-primary)] active:bg-[var(--color-surface-default-negative-primary)] active:text-[var(--color-content-default-primary)] active:border-[1.5px] active:border-[var(--color-border-default-negative-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
     };
 
-    const hoverOutlineStyles: Record<string, string> = {
-      xsmall: "hover:outline-1",
-      small: "hover:outline-1",
-      medium: "hover:outline-1",
-      large: "hover:outline-2",
-      xlarge: "hover:outline-[2.5px]",
-    };
-
-    // Only apply outline styles to filled variant, not filled-inverse, outline, outline-inverse, ghost, ghost-inverse, danger, or danger-inverse
-    const outlineStyles =
-      variant === "filled-inverse" ||
-      variant === "outline" ||
-      variant === "outline-inverse" ||
-      variant === "ghost" ||
-      variant === "ghost-inverse" ||
-      variant === "danger" ||
-      variant === "danger-inverse"
-        ? ""
-        : hoverOutlineStyles[size];
-
-    // Apply state-based styles if state prop is provided (overrides default hover/focus/active)
-    // Note: State prop is informational for Figma alignment - actual state is handled by CSS pseudo-classes
-    // For now, we maintain existing behavior and state prop is for documentation/alignment purposes
-
-    const baseStyles = `inline-flex items-center justify-start box-border whitespace-nowrap shrink-0 touch-manipulation [-webkit-tap-highlight-color:transparent] ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-[transform,color,background-color,border-color,box-shadow,outline-color] duration-150 ease-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`;
+    // Hover/focus: color + border only — no scale and no extra outline (those
+    // enlarge the label). Press: active:scale-[0.98]. Same rule for nav items
+    // and cards: color, opacity, or shadow on hover; scale only on press.
+    // State prop is informational for Figma alignment; CSS pseudo-classes own
+    // the actual interaction states.
+    const baseStyles = `inline-flex items-center justify-start box-border whitespace-nowrap shrink-0 touch-manipulation [-webkit-tap-highlight-color:transparent] ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-[transform,color,background-color,border-color,box-shadow] duration-150 ease-out cursor-pointer ${variantStyles[variant]}`;
     const combinedStyles = `${baseStyles} ${className}`;
 
     const sharedA11y = {
diff --git a/app/components/cards/Icon/Icon.view.tsx b/app/components/cards/Icon/Icon.view.tsx
index c93c4ba..cee210b 100644
--- a/app/components/cards/Icon/Icon.view.tsx
+++ b/app/components/cards/Icon/Icon.view.tsx
@@ -13,7 +13,7 @@ export function IconView({
   onKeyDown,
 }: IconViewProps) {
   const interactionClass = interactive
-    ? "cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2"
+    ? "cursor-pointer transition-shadow duration-200 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-2"
     : "cursor-default";
 
   return (
diff --git a/app/components/cards/Mini/Mini.container.tsx b/app/components/cards/Mini/Mini.container.tsx
index eb9e753..47a7006 100644
--- a/app/components/cards/Mini/Mini.container.tsx
+++ b/app/components/cards/Mini/Mini.container.tsx
@@ -51,7 +51,7 @@ const MiniContainer = memo<MiniProps>(
             ...baseProps,
             href,
             className:
-              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
             tabIndex: 0,
           },
         };
@@ -64,7 +64,7 @@ const MiniContainer = memo<MiniProps>(
             ...baseProps,
             onClick,
             className:
-              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)] transition-all duration-200 hover:scale-[1.02]",
+              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
             tabIndex: 0,
             onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
               if (e.key === "Enter" || e.key === " ") {
diff --git a/app/components/cards/Mini/Mini.view.tsx b/app/components/cards/Mini/Mini.view.tsx
index fdd9434..9a115f5 100644
--- a/app/components/cards/Mini/Mini.view.tsx
+++ b/app/components/cards/Mini/Mini.view.tsx
@@ -31,7 +31,7 @@ function MiniView({
 
   const panelClass = featureGridShell
     ? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
-    : `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-all duration-200 hover:scale-[1.02] hover:shadow-lg`;
+    : `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
 
   const imageClass = featureGridShell
     ? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
index 6bd3929..74e7f3f 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.view.tsx
@@ -17,7 +17,7 @@ function ContentThumbnailTemplateView({
     return (
       <Link
         href={`/blog/${post.slug}`}
-        className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
+        className={`group block w-full ${className}`}
       >
         <div className="relative aspect-[320/225.5] w-full overflow-hidden smd:aspect-[260/390]">
           <div className="absolute inset-0 z-0">
@@ -49,7 +49,7 @@ function ContentThumbnailTemplateView({
       return (
         <Link
           href={`/blog/${post.slug}`}
-          className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
+          className={`group block ${className}`}
         >
           <div className="relative h-[390px] w-[260px] overflow-hidden">
             <div className="absolute inset-0 z-0">
@@ -71,7 +71,7 @@ function ContentThumbnailTemplateView({
     return (
       <Link
         href={`/blog/${post.slug}`}
-        className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
+        className={`group block w-full ${className}`}
       >
         <div className="relative aspect-[260/390] w-full overflow-hidden">
           <div className="absolute inset-0 z-0">
@@ -92,10 +92,7 @@ function ContentThumbnailTemplateView({
 
   if (sizing === "fixed") {
     return (
-      <Link
-        href={`/blog/${post.slug}`}
-        className={`group block transition-transform duration-200 hover:scale-[1.02] ${className}`}
-      >
+      <Link href={`/blog/${post.slug}`} className={`group block ${className}`}>
         <div className="relative h-[225.5px] w-[320px] overflow-hidden">
           <div className="absolute inset-0 z-0">
             {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -116,7 +113,7 @@ function ContentThumbnailTemplateView({
   return (
     <Link
       href={`/blog/${post.slug}`}
-      className={`group block w-full transition-transform duration-200 hover:scale-[1.02] ${className}`}
+      className={`group block w-full ${className}`}
     >
       <div className="relative aspect-[320/225.5] w-full overflow-hidden">
         <div className="absolute inset-0 z-0">
diff --git a/app/components/controls/Chip/Chip.view.tsx b/app/components/controls/Chip/Chip.view.tsx
index d41a91e..1223426 100644
--- a/app/components/controls/Chip/Chip.view.tsx
+++ b/app/components/controls/Chip/Chip.view.tsx
@@ -109,7 +109,7 @@ function ChipView({
     focus-visible:ring-[var(--color-border-default-primary,#141414)]
     focus-visible:ring-offset-2
     focus-visible:ring-offset-transparent
-    transition-[background,border-color,color,box-shadow,transform]
+    transition-[background,border-color,color,box-shadow]
     duration-200
     ease-in-out
   `
@@ -118,7 +118,7 @@ function ChipView({
 
   const stateClasses = isDisabled
     ? "cursor-not-allowed opacity-60"
-    : "cursor-pointer hover:scale-[1.02]";
+    : "cursor-pointer";
 
   const combinedClasses = [
     baseClasses,
diff --git a/app/components/controls/Incrementer/Incrementer.view.tsx b/app/components/controls/Incrementer/Incrementer.view.tsx
index 6a57b62..88d8b08 100644
--- a/app/components/controls/Incrementer/Incrementer.view.tsx
+++ b/app/components/controls/Incrementer/Incrementer.view.tsx
@@ -4,7 +4,7 @@ import { memo } from "react";
 import type { IncrementerViewProps } from "./Incrementer.types";
 
 const STEP_BUTTON_CLASSES =
-  "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,transform] duration-200 ease-in-out hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100";
+  "bg-[var(--color-surface-default-secondary,#141414)] text-[var(--color-content-default-primary,#fff)] inline-flex shrink-0 items-center justify-center overflow-clip rounded-[var(--measures-radius-full,9999px)] px-[var(--space-200,8px)] py-[var(--measures-spacing-150,6px)] transition-[background,color,opacity] duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary,#fff)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary,#000)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50";
 
 function MinusIcon() {
   return (
diff --git a/app/components/navigation/MenuItem/MenuItem.container.tsx b/app/components/navigation/MenuItem/MenuItem.container.tsx
index b340ee7..cdba605 100644
--- a/app/components/navigation/MenuItem/MenuItem.container.tsx
+++ b/app/components/navigation/MenuItem/MenuItem.container.tsx
@@ -90,7 +90,7 @@ const MenuItemContainer = memo<MenuItemProps>(
 
     // Interactive styles
     const interactiveStyles =
-      "hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100";
+      "active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100";
 
     // Disabled styles
     const disabledStyles = disabled
diff --git a/app/components/sections/LogoWall/LogoWall.view.tsx b/app/components/sections/LogoWall/LogoWall.view.tsx
index 5da57d7..02c7571 100644
--- a/app/components/sections/LogoWall/LogoWall.view.tsx
+++ b/app/components/sections/LogoWall/LogoWall.view.tsx
@@ -23,16 +23,14 @@ function LogoWallView({
             {displayLogos.map((logo, index) => (
               <div
                 key={index}
-                className={`flex items-center justify-center transition-opacity duration-500 hover:opacity-100 ${
+                className={`flex items-center justify-center ${
                   logo.order || ""
                 }`}
               >
                 <Image
                   src={logo.src}
                   alt={logo.alt}
-                  className={`${
-                    logo.size || "h-8"
-                  } w-auto object-contain transition-transform duration-500 hover:scale-105`}
+                  className={`${logo.size || "h-8"} w-auto object-contain`}
                   priority={index < 2} // Prioritize first 2 logos for above-the-fold loading
                   unoptimized // Skip optimization for local images
                   width={0}
diff --git a/docs/figma-component-registry.md b/docs/figma-component-registry.md
index 9698fed..9ccba00 100644
--- a/docs/figma-component-registry.md
+++ b/docs/figma-component-registry.md
@@ -30,6 +30,7 @@ Quick map from the Figma file **Community Rule System** (`agv0VBLiBlcnSAaiAORgPR
 ## Button conventions (Figma “Button” canvas)
 
 - **`buttons/Button/`** — **`Button.tsx`** + **`index.tsx`**. Variants (**filled**, **outline**, **ghost**, **danger**) and **`palette`** / **`size`** align with **`lib/propNormalization`**. **`href`** renders an `<a>` when not disabled.
+- **Interaction:** hover and focus change color/border (or opacity/shadow on cards) — they must not scale the control, because that enlarges the label. Reserve `active:scale-[0.98]` for press. Same rule for nav items (`MenuItem`) and cards (`Mini`, `Icon`, article thumbnails).
 - **`buttons/InlineTextButton/`** — tertiary inline **`<button>`** (underline, inherited typography) for in-paragraph controls—**not** primary actions.
 
 ## Control conventions (Figma [“Control”](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=5944-58611) canvas)
diff --git a/docs/guides/ops-backend-deploy.md b/docs/guides/ops-backend-deploy.md
index 8e49236..5d01268 100644
--- a/docs/guides/ops-backend-deploy.md
+++ b/docs/guides/ops-backend-deploy.md
@@ -225,10 +225,13 @@ maintenance window — after the final Cloudron backup (§5 phase 3 step
 ([CR-101](https://linear.app/community-rule/issue/CR-101/backend-decommission-legacy-communityrule-lamp-app))
 for operator recovery if manual lookup from the export is ever needed.
 
-**User discoverability:** link to the archive repo (or a release
-download) from the new app — footer, help page, or a static
-`/legacy-archive` page — so users looking for pre-cutover rules can
-find it without knowing Gitea exists.
+**No app-side surface.** The archive lives in the repo only. It exists
+for posterity and operator lookup, not end-user self-service — there is
+no footer link, help-page entry, or `/legacy-archive` page in the new
+app, and none is required to close
+[CR-102](https://linear.app/community-rule/issue/CR-102). Operators
+answering a "where did my rule go?" question point at the Gitea repo
+directly.
 
 ## 7. Old vs new deltas
 
diff --git a/stories/sections/LogoWall.stories.js b/stories/sections/LogoWall.stories.js
index c4fd586..5691f45 100644
--- a/stories/sections/LogoWall.stories.js
+++ b/stories/sections/LogoWall.stories.js
@@ -20,10 +20,6 @@ export default {
 ## Animations & Transitions
 
 - **Fade-in Effect**: Logos fade in from opacity 0 to 60% after component mounts (500ms transition)
-- **Hover Interactions**: Individual logos respond to hover with:
-  - Opacity change from 60% to 100%
-  - Scale transform (105% zoom)
-  - 500ms smooth transitions for all effects
 - **Loading States**: Progressive loading with fallback timer for reliable display
 
 ## Props
@@ -74,7 +70,7 @@ export const Default = {
     docs: {
       description: {
         story:
-          "Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens. Features smooth fade-in animations and hover interactions.",
+          "Default LogoWall with all partner logos. Displays in a 3×2 grid on mobile, 2×3 grid on small screens, single row on medium screens, and larger sizes on large screens. Features a fade-in on mount.",
       },
     },
   },
diff --git a/tests/components/Button.test.tsx b/tests/components/Button.test.tsx
index 8036b43..f942d60 100644
--- a/tests/components/Button.test.tsx
+++ b/tests/components/Button.test.tsx
@@ -61,6 +61,9 @@ describe("Button (behavioral tests)", () => {
     expect(button.className).toContain("duration-150");
     expect(button.className).not.toContain("duration-500");
     expect(button.className).toContain("active:scale-[0.98]");
+    expect(button.className).not.toContain("hover:scale-");
+    expect(button.className).not.toContain("focus-visible:scale-");
+    expect(button.className).not.toContain("hover:outline-");
   });
 
   it("renders as a link when href is provided", () => {
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index c11a8a8..29abcf4 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -36,6 +36,16 @@ describe("Logo (behavioral tests)", () => {
     expect(logo).toHaveAttribute("aria-label", "CommunityRule Logo");
   });
 
+  it("animates the mark on hover without scaling the wordmark", () => {
+    render(<Logo />);
+    const logo = screen.getByRole("link", { name: /communityrule logo/i });
+    const wordmark = screen.getByText("CommunityRule");
+    const mark = logo.querySelector("img");
+    expect(logo).toHaveClass("group");
+    expect(wordmark.className).not.toContain("scale-");
+    expect(mark).toHaveClass("group-hover:scale-110");
+  });
+
   it("renders logo icon", () => {
     render(<Logo />);
     expect(screen.getByAltText("CommunityRule Logo")).toBeInTheDocument();
diff --git a/tests/unit/LogoWall.test.jsx b/tests/unit/LogoWall.test.jsx
index 904cdab..3c7c8da 100644
--- a/tests/unit/LogoWall.test.jsx
+++ b/tests/unit/LogoWall.test.jsx
@@ -92,13 +92,15 @@ describe("LogoWall Component", () => {
     expect(screen.getByAltText("Food Not Bombs")).toBeInTheDocument();
   });
 
-  test("applies hover effects", () => {
+  test("does not apply hover effects on partner logos", () => {
     render(<LogoWall />);
 
-    const logoContainers = document.querySelectorAll(
-      '[class*="hover:opacity-100"]',
-    );
-    expect(logoContainers.length).toBeGreaterThan(0);
+    expect(
+      document.querySelectorAll('[class*="hover:opacity"]').length,
+    ).toBe(0);
+    expect(
+      document.querySelectorAll('[class*="hover:scale"]').length,
+    ).toBe(0);
   });
 
   test("renders with proper semantic structure", () => {
@@ -142,13 +144,4 @@ describe("LogoWall Component", () => {
     expect(foodNotBombsLogo).toBeInTheDocument();
     expect(startCoopLogo).toBeInTheDocument();
   });
-
-  test("applies scale effect on hover", () => {
-    render(<LogoWall />);
-
-    const logos = screen.getAllByRole("img");
-    logos.forEach((logo) => {
-      expect(logo).toHaveClass("hover:scale-105");
-    });
-  });
 });