diff --git a/apps/web/src/components/docs/copy-markdown-button.tsx b/apps/web/src/components/docs/copy-markdown-button.tsx
index e784cfd2..8e5bb107 100644
--- a/apps/web/src/components/docs/copy-markdown-button.tsx
+++ b/apps/web/src/components/docs/copy-markdown-button.tsx
@@ -55,7 +55,7 @@ export function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
       <Button
         variant="ghost"
         size="sm"
-        className="bg-background h-full hover:bg-background! hover:border-primary/14 w-23.5 justify-start gap-1.5 rounded-xs border px-1.5! text-xs duration-0"
+        className="bg-background h-full hover:bg-background! hover:border-subtle-hover-border w-23.5 justify-start gap-1.5 rounded-xs border px-1.5! text-xs duration-0"
         onClick={onClick}
       >
         {copied ? <RiCheckLine className="size-3" /> : <RiFileCopyLine className="size-3" />}
@@ -72,21 +72,21 @@ export function CopyMarkdownButton({ markdownUrl }: { markdownUrl: string }) {
             />
           }
         >
-          <RiArrowDownSLine className="size-3.5" />
+          <RiArrowDownSLine />
         </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-44">
+        <DropdownMenuContent align="end">
           <DropdownMenuItem render={<Link href={markdownUrl} target="_blank" rel="noreferrer" />}>
-            <RiMarkdownLine className="size-3.5" />
+            <RiMarkdownLine />
             View as markdown
           </DropdownMenuItem>
           <DropdownMenuItem render={<Link href="/llms.txt" target="_blank" rel="noreferrer" />}>
-            <RiExternalLinkLine className="size-3.5" />
+            <RiExternalLinkLine />
             View llms.txt
           </DropdownMenuItem>
           <DropdownMenuItem
             render={<Link href="/llms-full.txt" target="_blank" rel="noreferrer" />}
           >
-            <RiExternalLinkLine className="size-3.5" />
+            <RiExternalLinkLine />
             View llms-full.txt
           </DropdownMenuItem>
         </DropdownMenuContent>
diff --git a/apps/web/src/components/docs/docs-layout.tsx b/apps/web/src/components/docs/docs-layout.tsx
index e737d28a..52877612 100644
--- a/apps/web/src/components/docs/docs-layout.tsx
+++ b/apps/web/src/components/docs/docs-layout.tsx
@@ -60,7 +60,7 @@ function SearchButton({ className }: { className?: string }) {
     <button
       type="button"
       className={cn(
-        "text-primary/70 hover:bg-muted hover:text-primary/90 inline-flex h-7.5 items-center gap-1.5 rounded-sm border bg-secondary/50 px-2 text-[14px] transition-colors dark:hover:bg-muted/50",
+        "text-primary/70 hover:bg-subtle-hover hover:text-subtle-hover-foreground inline-flex h-7.5 items-center gap-1.5 rounded-sm border bg-secondary/50 px-2 text-[14px] transition-colors",
         className,
       )}
       onClick={() => setOpenSearch(true)}
@@ -120,7 +120,7 @@ function LlmsDropdown() {
         render={
           <Button
             aria-label="Open LLM files"
-            className="size-7 text-muted-foreground"
+            className="text-muted-foreground"
             size="icon-sm"
             type="button"
             variant="ghost"
@@ -129,13 +129,13 @@ function LlmsDropdown() {
       >
         <RiRobot2Line />
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" side="top" className="w-40">
+      <DropdownMenuContent align="start" side="top">
         <DropdownMenuItem render={<Link href="/llms.txt" target="_blank" rel="noreferrer" />}>
-          <RiExternalLinkLine className="size-3.5" />
+          <RiExternalLinkLine />
           llms.txt
         </DropdownMenuItem>
         <DropdownMenuItem render={<Link href="/llms-full.txt" target="_blank" rel="noreferrer" />}>
-          <RiExternalLinkLine className="size-3.5" />
+          <RiExternalLinkLine />
           llms-full.txt
         </DropdownMenuItem>
       </DropdownMenuContent>
@@ -166,10 +166,7 @@ function DocsSidebar({
       >
         <div className="flex h-full w-full flex-col">
           <div className="flex h-12 items-center justify-between px-2.5">
-            <BrandMenu
-              linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-              wordmarkBaseClassName="h-3.5"
-            />
+            <BrandMenu linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
             <Button
               aria-label="Hide sidebar"
               className="size-7 text-muted-foreground"
@@ -260,10 +257,7 @@ function MobileSidebar({
         </SheetHeader>
         <div className="flex h-full flex-col">
           <div className="flex h-12 items-center border-b px-2.5">
-            <BrandMenu
-              linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-              wordmarkBaseClassName="h-3.5"
-            />
+            <BrandMenu linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
           </div>
           <SidebarContent onItemClick={() => onOpenChange(false)} pathname={pathname} tree={tree} />
         </div>
@@ -401,8 +395,8 @@ function SidebarItem({
       className={cn(
         "flex h-6.75 items-center gap-2 rounded-sm px-2 text-[13px] transition-none",
         active
-          ? "bg-accent/50 text-accent-foreground/80"
-          : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground/80",
+          ? "bg-accent/50 text-accent-foreground/80 hover:text-subtle-hover-foreground"
+          : "text-muted-foreground hover:bg-subtle-hover hover:text-subtle-hover-foreground",
       )}
     >
       {getDocsPageIcon(String(item.name))}
@@ -498,11 +492,7 @@ export function DocsLayout({ children, tree }: { children: ReactNode; tree: Root
           data-transparent="false"
           className="fixed top-0 z-30 flex h-12 w-full flex-row items-center justify-between border-b bg-background px-2.5 [grid-area:header] md:hidden"
         >
-          <BrandMenu
-            className="md:hidden"
-            linkClassName="rounded-sm px-2 py-1.5 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-            wordmarkBaseClassName="h-3.5"
-          />
+          <BrandMenu className="md:hidden" linkClassName="px-2" wordmarkBaseClassName="h-3.5" />
           <div className="flex items-center gap-1 md:hidden">
             <Button
               aria-label="Open search"
diff --git a/apps/web/src/components/docs/docs-page.tsx b/apps/web/src/components/docs/docs-page.tsx
index 44582dcb..e304f508 100644
--- a/apps/web/src/components/docs/docs-page.tsx
+++ b/apps/web/src/components/docs/docs-page.tsx
@@ -181,22 +181,29 @@ function DocsFooterItem({ item, index }: { item: FooterItem; index: 0 | 1 }) {
     <Link
       href={item.url}
       className={cn(
-        "flex flex-col gap-2 rounded-lg border p-4 text-sm transition-colors hover:bg-accent/80 hover:text-accent-foreground @max-lg:col-span-full",
-        index === 1 && "text-end",
+        "group focus-visible:ring-ring flex min-w-0 rounded-sm bg-secondary p-0.5 text-primary/70 focus-visible:ring-2 focus-visible:outline-none @max-lg:col-span-full",
+        index === 0 && "flex-row-reverse",
       )}
     >
-      <div
+      <div className="bg-background bg-clip-padding group-hover:border-subtle-hover-border flex min-w-0 flex-1 flex-col gap-0.5 rounded-xs border p-2.5 transition-colors duration-200">
+        <span
+          title={typeof item.name === "string" ? item.name : undefined}
+          className="line-clamp-1 text-[13px] transition-colors duration-200 group-hover:text-subtle-hover-foreground"
+        >
+          {item.name}
+        </span>
+        <span className="text-muted-foreground/70 line-clamp-1 text-xs">
+          {item.description ?? (index === 0 ? "Previous page" : "Next page")}
+        </span>
+      </div>
+      <span
         className={cn(
-          "inline-flex items-center gap-1.5 font-medium",
-          index === 1 && "flex-row-reverse",
+          "flex shrink-0 items-center text-foreground/65 transition-colors duration-200 group-hover:text-primary",
+          index === 0 ? "pr-2 pl-1.5" : "pr-1.5 pl-2",
         )}
       >
-        <Icon className="-mx-1 size-4 shrink-0" />
-        <p>{item.name}</p>
-      </div>
-      <p className="truncate text-muted-foreground">
-        {item.description ?? (index === 0 ? "Previous page" : "Next page")}
-      </p>
+        <Icon aria-hidden className="size-5" />
+      </span>
     </Link>
   );
 }
diff --git a/apps/web/src/components/layout/mini-nav-bar.tsx b/apps/web/src/components/layout/mini-nav-bar.tsx
index bfebfa24..058c3010 100644
--- a/apps/web/src/components/layout/mini-nav-bar.tsx
+++ b/apps/web/src/components/layout/mini-nav-bar.tsx
@@ -16,10 +16,7 @@ export function MiniNavBar() {
         className="bg-background border-border pointer-events-auto w-full border-b lg:hidden"
       >
         <SectionShell className="flex items-center">
-          <BrandMenu
-            linkClassName="gap-1 rounded-sm px-5 py-3 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors"
-            wordmarkClassName="scale-95"
-          />
+          <BrandMenu linkClassName="gap-1 px-5 py-3" wordmarkClassName="scale-95" />
         </SectionShell>
       </motion.div>
 
@@ -31,7 +28,7 @@ export function MiniNavBar() {
       >
         <SectionShell>
           <div className="flex h-12 items-center px-12">
-            <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+            <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
           </div>
         </SectionShell>
       </motion.div>
diff --git a/apps/web/src/components/layout/navigation-bar.tsx b/apps/web/src/components/layout/navigation-bar.tsx
index fd1c3a99..755b38eb 100644
--- a/apps/web/src/components/layout/navigation-bar.tsx
+++ b/apps/web/src/components/layout/navigation-bar.tsx
@@ -83,7 +83,7 @@ const tabBase =
   "group/tab relative flex h-full items-center justify-center gap-1.5 px-4 py-3.5 transition-colors duration-150";
 const tabActive = "bg-background";
 const tabInactive =
-  "hover:bg-foreground/[0.03] bg-transparent text-foreground/60 dark:text-foreground/40 hover:text-foreground/70";
+  "hover:bg-subtle-hover bg-transparent text-foreground/60 dark:text-foreground/40 hover:text-foreground/70";
 const labelBase =
   "text-sm tracking-wider whitespace-nowrap uppercase transition-colors duration-150";
 
@@ -124,7 +124,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
         >
           <SectionShell className="border-border border-b">
             <div className="flex h-11 w-full items-center justify-between px-5">
-              <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+              <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
               <button
                 type="button"
                 aria-label={mobileMenuOpen ? "Close navigation menu" : "Open navigation menu"}
@@ -149,7 +149,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
           <SectionShell className="border-border border-b">
             <div className="flex h-12 items-center justify-between px-12">
               {/* Logo */}
-              <BrandMenu linkClassName="-ml-2.5 rounded-sm px-2.5 py-2 hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 transition-colors" />
+              <BrandMenu linkClassName="-ml-2.5 px-2.5 py-2" />
 
               {/* Center tabs */}
               <div className="absolute inset-0 flex items-stretch justify-center">
@@ -228,7 +228,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
                             <NavLink
                               key={link.name}
                               item={link}
-                              className="text-foreground/60 hover:text-foreground hover:bg-foreground/3 flex items-center justify-between px-4 py-2 text-sm transition-colors"
+                              className="text-foreground/60 hover:text-foreground hover:bg-subtle-hover flex items-center justify-between px-4 py-2 text-sm transition-colors"
                               onClick={() => setLinksOpen(false)}
                             >
                               <span className="flex items-center gap-2.5">
@@ -287,7 +287,7 @@ export function NavigationBar({ stars = "1k" }: { stars?: string }) {
                   <NavLink
                     item={item}
                     className={`flex items-center gap-2.5 px-5 py-3.5 transition-colors ${
-                      isActive(item.path || item.href) ? "bg-foreground/4" : "hover:bg-foreground/3"
+                      isActive(item.path || item.href) ? "bg-foreground/4" : "hover:bg-subtle-hover"
                     }`}
                     onClick={() => setMobileMenuOpen(false)}
                   >
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index f05da617..a075df1e 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -16,7 +16,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "text-primary/70 hover:bg-muted hover:text-primary/90 aria-expanded:bg-muted aria-expanded:text-primary/70 dark:hover:bg-muted/50",
+          "text-primary/70 hover:bg-subtle-hover hover:text-subtle-hover-foreground aria-expanded:bg-muted aria-expanded:text-primary/70",
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
diff --git a/apps/web/src/components/ui/context-menu.tsx b/apps/web/src/components/ui/context-menu.tsx
index 2ce2d233..3698504b 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/apps/web/src/components/ui/context-menu.tsx
@@ -6,6 +6,22 @@ import { RiArrowRightSLine, RiCheckLine } from "react-icons/ri";
 
 import { cn } from "@/lib/utils";
 
+const menuContentStyles =
+  "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-sm bg-popover p-0.5 text-foreground/75 shadow-md ring-1 ring-[color:color-mix(in_srgb,var(--foreground)_10%,var(--popover))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95";
+
+const menuItemStyles =
+  "relative flex cursor-default items-center gap-1.5 rounded-xs min-h-6.75 px-2 py-0.5 text-sm text-muted-foreground outline-hidden select-none focus:bg-subtle-hover focus:text-subtle-hover-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3.5";
+
+const menuLabelStyles = "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7";
+
+const menuSeparatorStyles = "-mx-0.5 my-0.5 h-px bg-border";
+
+const menuDestructiveItemStyles =
+  "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:[&_svg]:text-destructive";
+
+const menuSubTriggerStyles =
+  "data-open:bg-subtle-hover data-open:text-subtle-hover-foreground data-popup-open:bg-subtle-hover data-popup-open:text-subtle-hover-foreground";
+
 function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
@@ -52,11 +68,7 @@ function ContextMenuContent({
       >
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            "rounded-md",
-            className,
-          )}
+          className={cn(menuContentStyles, className)}
           {...props}
         />
       </ContextMenuPrimitive.Positioner>
@@ -79,10 +91,7 @@ function ContextMenuLabel({
     <ContextMenuPrimitive.GroupLabel
       data-slot="context-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className,
-      )}
+      className={cn(menuLabelStyles, className)}
       {...props}
     />
   );
@@ -103,8 +112,9 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
-        "rounded-sm",
+        "group/context-menu-item",
+        menuItemStyles,
+        menuDestructiveItemStyles,
         className,
       )}
       {...props}
@@ -128,10 +138,7 @@ function ContextMenuSubTrigger({
     <ContextMenuPrimitive.SubmenuTrigger
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, menuSubTriggerStyles, className)}
       {...props}
     >
       {children}
@@ -164,10 +171,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       checked={checked}
       {...props}
     >
@@ -197,10 +201,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       {...props}
     >
       <span className="pointer-events-none absolute right-2">
@@ -217,7 +218,7 @@ function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Sepa
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn(menuSeparatorStyles, className)}
       {...props}
     />
   );
@@ -228,7 +229,7 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-subtle-hover-foreground",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index 72e75160..b51691a4 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -6,6 +6,22 @@ import { RiArrowRightSLine, RiCheckLine } from "react-icons/ri";
 
 import { cn } from "@/lib/utils";
 
+const menuContentStyles =
+  "z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-sm bg-popover p-0.5 text-foreground/75 shadow-md ring-1 ring-[color:color-mix(in_srgb,var(--foreground)_10%,var(--popover))] duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95";
+
+const menuItemStyles =
+  "relative flex cursor-default items-center gap-1.5 rounded-xs min-h-6.75 px-2 py-0.5 text-sm text-muted-foreground outline-hidden select-none focus:bg-subtle-hover focus:text-subtle-hover-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3.5";
+
+const menuLabelStyles = "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7";
+
+const menuSeparatorStyles = "-mx-0.5 my-0.5 h-px bg-border";
+
+const menuDestructiveItemStyles =
+  "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:[&_svg]:text-destructive";
+
+const menuSubTriggerStyles =
+  "data-open:bg-subtle-hover data-open:text-subtle-hover-foreground data-popup-open:bg-subtle-hover data-popup-open:text-subtle-hover-foreground";
+
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
@@ -38,10 +54,7 @@ function DropdownMenuContent({
       >
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
-          className={cn(
-            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-            className,
-          )}
+          className={cn(menuContentStyles, className)}
           {...props}
         />
       </MenuPrimitive.Positioner>
@@ -64,10 +77,7 @@ function DropdownMenuLabel({
     <MenuPrimitive.GroupLabel
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
-        className,
-      )}
+      className={cn(menuLabelStyles, className)}
       {...props}
     />
   );
@@ -88,7 +98,9 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item",
+        menuItemStyles,
+        menuDestructiveItemStyles,
         className,
       )}
       {...props}
@@ -112,10 +124,7 @@ function DropdownMenuSubTrigger({
     <MenuPrimitive.SubmenuTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
-      className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, menuSubTriggerStyles, className)}
       {...props}
     >
       {children}
@@ -135,10 +144,7 @@ function DropdownMenuSubContent({
   return (
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className,
-      )}
+      className={cn("shadow-lg", className)}
       align={align}
       alignOffset={alignOffset}
       side={side}
@@ -161,10 +167,7 @@ function DropdownMenuCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       checked={checked}
       {...props}
     >
@@ -197,10 +200,7 @@ function DropdownMenuRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-8", className)}
       {...props}
     >
       <span
@@ -220,7 +220,7 @@ function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      className={cn(menuSeparatorStyles, className)}
       {...props}
     />
   );
@@ -231,7 +231,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-subtle-hover-foreground",
         className,
       )}
       {...props}
diff --git a/apps/web/src/components/ui/menubar.tsx b/apps/web/src/components/ui/menubar.tsx
index a63ce43f..c8bea87d 100644
--- a/apps/web/src/components/ui/menubar.tsx
+++ b/apps/web/src/components/ui/menubar.tsx
@@ -22,6 +22,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 
+const menuItemStyles =
+  "relative flex cursor-default items-center gap-1.5 rounded-xs min-h-6.75 px-2 py-0.5 text-sm text-muted-foreground outline-hidden select-none focus:bg-subtle-hover focus:text-subtle-hover-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3.5";
+
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
     <MenubarPrimitive
@@ -58,7 +61,6 @@ function MenubarTrigger({ className, ...props }: React.ComponentProps<typeof Dro
 }
 
 function MenubarContent({
-  className,
   align = "start",
   alignOffset = -4,
   sideOffset = 8,
@@ -70,10 +72,6 @@ function MenubarContent({
       align={align}
       alignOffset={alignOffset}
       sideOffset={sideOffset}
-      className={cn(
-        "min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
-        className,
-      )}
       {...props}
     />
   );
@@ -90,10 +88,7 @@ function MenubarItem({
       data-slot="menubar-item"
       data-inset={inset}
       data-variant={variant}
-      className={cn(
-        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
-        className,
-      )}
+      className={cn("group/menubar-item", className)}
       {...props}
     />
   );
@@ -112,10 +107,7 @@ function MenubarCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-2 pl-7", className)}
       checked={checked}
       {...props}
     >
@@ -145,10 +137,7 @@ function MenubarRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="menubar-radio-item"
       data-inset={inset}
-      className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn(menuItemStyles, "pr-2 pl-7", className)}
       {...props}
     >
       <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
@@ -162,33 +151,16 @@ function MenubarRadioItem({
 }
 
 function MenubarLabel({
-  className,
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuLabel> & {
   inset?: boolean;
 }) {
-  return (
-    <DropdownMenuLabel
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn("px-1.5 py-1 text-sm font-medium data-inset:pl-7", className)}
-      {...props}
-    />
-  );
+  return <DropdownMenuLabel data-slot="menubar-label" data-inset={inset} {...props} />;
 }
 
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuSeparator>) {
-  return (
-    <DropdownMenuSeparator
-      data-slot="menubar-separator"
-      className={cn("-mx-1 my-1 h-px bg-border", className)}
-      {...props}
-    />
-  );
+function MenubarSeparator({ ...props }: React.ComponentProps<typeof DropdownMenuSeparator>) {
+  return <DropdownMenuSeparator data-slot="menubar-separator" {...props} />;
 }
 
 function MenubarShortcut({
@@ -199,7 +171,7 @@ function MenubarShortcut({
     <DropdownMenuShortcut
       data-slot="menubar-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-subtle-hover-foreground",
         className,
       )}
       {...props}
@@ -212,39 +184,16 @@ function MenubarSub({ ...props }: React.ComponentProps<typeof DropdownMenuSub>)
 }
 
 function MenubarSubTrigger({
-  className,
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
   inset?: boolean;
 }) {
-  return (
-    <DropdownMenuSubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <DropdownMenuSubTrigger data-slot="menubar-sub-trigger" data-inset={inset} {...props} />;
 }
 
-function MenubarSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuSubContent>) {
-  return (
-    <DropdownMenuSubContent
-      data-slot="menubar-sub-content"
-      className={cn(
-        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-        className,
-      )}
-      {...props}
-    />
-  );
+function MenubarSubContent({ ...props }: React.ComponentProps<typeof DropdownMenuSubContent>) {
+  return <DropdownMenuSubContent data-slot="menubar-sub-content" {...props} />;
 }
 
 export {
diff --git a/apps/web/src/components/web/brand-menu.tsx b/apps/web/src/components/web/brand-menu.tsx
index 5cd93965..653e0f18 100644
--- a/apps/web/src/components/web/brand-menu.tsx
+++ b/apps/web/src/components/web/brand-menu.tsx
@@ -67,7 +67,10 @@ export function BrandMenu({
               ref={logoRef}
               href="/"
               aria-label="PayKit home"
-              className={cn("flex items-center py-1.5", linkClassName)}
+              className={cn(
+                "flex items-center rounded-sm py-1.5 hover:bg-subtle-hover hover:text-foreground transition-colors",
+                linkClassName,
+              )}
             >
               <Wordmark
                 title={null}
@@ -85,11 +88,11 @@ export function BrandMenu({
           sideOffset={4}
           positionerClassName="z-100"
         >
-          <ContextMenuItem className="px-3" onClick={() => copyAsSvg("Logo")}>
-            <Logo className="text-muted-foreground" /> Copy logo as SVG
+          <ContextMenuItem onClick={() => copyAsSvg("Logo")}>
+            <Logo className="scale-90" /> Copy logo as SVG
           </ContextMenuItem>
-          <ContextMenuItem className="px-3" onClick={() => copyAsSvg("Wordmark")}>
-            <RiCodeSSlashLine className="text-muted-foreground" /> Copy wordmark as SVG
+          <ContextMenuItem onClick={() => copyAsSvg("Wordmark")}>
+            <RiCodeSSlashLine /> Copy wordmark as SVG
           </ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css
index 21d72d62..dbaca625 100644
--- a/apps/web/src/styles/globals.css
+++ b/apps/web/src/styles/globals.css
@@ -97,6 +97,9 @@
   --secondary-foreground: oklch(0.205 0 0);
   --muted: oklch(0.97 0 0);
   --muted-foreground: oklch(0.556 0 0);
+  --subtle-hover: var(--muted);
+  --subtle-hover-border: color-mix(in oklab, var(--primary) 14%, transparent);
+  --subtle-hover-foreground: color-mix(in oklab, var(--primary) 80%, transparent);
   --accent: oklch(0.97 0 0);
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.577 0.245 27.325);
@@ -156,6 +159,7 @@
   --secondary-foreground: oklch(0.97 0 0);
   --muted: oklch(0.269 0 0);
   --muted-foreground: oklch(0.708 0 0);
+  --subtle-hover: color-mix(in oklab, var(--muted) 50%, transparent);
   --accent: oklch(0.27 0 0);
   --accent-foreground: oklch(0.97 0 0);
   --destructive: oklch(0.704 0.191 22.216);
@@ -214,6 +218,9 @@
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
   --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-hover: var(--subtle-hover);
+  --color-subtle-hover-border: var(--subtle-hover-border);
+  --color-subtle-hover-foreground: var(--subtle-hover-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);