From d44af58e38664677dc3ab9ec054b7ee5f768920b Mon Sep 17 00:00:00 2001
From: felixkrrr <felix@langfuse.com>
Date: Thu, 30 Apr 2026 19:44:36 +0200
Subject: [PATCH 1/4] unify card styles

---
 components/home/DeveloperTools.tsx    | 6 +++---
 components/home/FeaturedCustomers.tsx | 1 +
 components/home/Integrations.tsx      | 5 +++--
 components/ui/chip-card.tsx           | 2 +-
 style.css                             | 1 +
 5 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/home/DeveloperTools.tsx b/components/home/DeveloperTools.tsx
index 58f668e09e..37aadab541 100644
--- a/components/home/DeveloperTools.tsx
+++ b/components/home/DeveloperTools.tsx
@@ -34,7 +34,7 @@ export const DeveloperTools = () => {
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2">
-          <CornerBox className="flex relative z-0 flex-col p-0 min-h-0 md:row-span-2">
+          <CornerBox hoverStripes className="flex relative z-0 flex-col p-0 min-h-0 md:row-span-2">
             <div className="flex flex-col gap-1 p-4">
               <Link
                 href={SKILL_HREF}
@@ -68,7 +68,7 @@ export const DeveloperTools = () => {
             </div>
           </CornerBox>
 
-          <CornerBox className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:mt-0 md:-ml-px">
+          <CornerBox hoverStripes className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:mt-0 md:-ml-px">
             <Link
               href={CLI_HREF}
               className="text-left text-[15px] font-medium text-text-secondary"
@@ -89,7 +89,7 @@ export const DeveloperTools = () => {
             </div>
           </CornerBox>
 
-          <CornerBox className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:-ml-px">
+          <CornerBox hoverStripes className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:-ml-px">
             <Link
               href={MCP_HREF}
               className="text-left text-[15px] font-medium text-text-secondary"
diff --git a/components/home/FeaturedCustomers.tsx b/components/home/FeaturedCustomers.tsx
index 9e63096023..bd7fc41505 100644
--- a/components/home/FeaturedCustomers.tsx
+++ b/components/home/FeaturedCustomers.tsx
@@ -73,6 +73,7 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
   return (
     <CornerBox
       ref={containerRef}
+      hoverStripes
       className="flex flex-col gap-3 p-4 -mt-px lg:flex-row lg:items-center lg:gap-6"
       corners={corners}
       onMouseEnter={() => setIsHovered(true)}
diff --git a/components/home/Integrations.tsx b/components/home/Integrations.tsx
index c4eae69e7b..3cca2a79a6 100644
--- a/components/home/Integrations.tsx
+++ b/components/home/Integrations.tsx
@@ -228,6 +228,7 @@ function IntegrationGroupCard({
     <div
       className={cn(
         "relative border border-line-structure bg-surface-bg rounded-[2px]",
+        "corner-box-hover-stripes transition-[background] duration-180 ease-out",
         "integration-group flex flex-col gap-3.5 items-start p-3 sm:p-4.5",
         className
       )}
@@ -328,7 +329,7 @@ export function Integrations() {
           showMoreLabel
         />
 
-        <div className="integration-group sm:col-span-2 flex flex-col gap-4 items-start p-3 sm:p-4.5 border border-line-structure bg-surface-bg rounded-[2px]">
+        <div className="integration-group sm:col-span-2 flex flex-col gap-4 items-start p-3 sm:p-4.5 border border-line-structure bg-surface-bg rounded-[2px] corner-box-hover-stripes transition-[background] duration-180 ease-out">
           <div className="flex flex-row flex-wrap gap-y-1 gap-x-3 justify-between items-baseline w-full">
             <Text size="m" className="font-medium text-left text-text-secondary">
               80+ more integrations
@@ -340,7 +341,7 @@ export function Integrations() {
           </div>
         </div>
 
-        <div className="sm:col-span-2 flex flex-row flex-wrap gap-y-2 gap-x-3 justify-between items-center p-3 sm:px-4.5 sm:py-3 border border-line-structure bg-surface-bg rounded-[2px]">
+        <div className="sm:col-span-2 flex flex-row flex-wrap gap-y-2 gap-x-3 justify-between items-center p-3 sm:px-4.5 sm:py-3 border border-line-structure bg-surface-bg rounded-[2px] corner-box-hover-stripes transition-[background] duration-180 ease-out">
           <Button variant="secondary" size="small" href="/integrations">
             See all integrations
           </Button>
diff --git a/components/ui/chip-card.tsx b/components/ui/chip-card.tsx
index eb4781e30a..2a8eff07df 100644
--- a/components/ui/chip-card.tsx
+++ b/components/ui/chip-card.tsx
@@ -64,7 +64,7 @@ const ChipCard = React.forwardRef<HTMLAnchorElement | HTMLDivElement, ChipCardPr
     );
 
     const baseClassName = cn(
-      "box-custom-hover",
+      "corner-box-hover-stripes transition-[background] duration-180 ease-out",
       "relative group inline-flex items-center",
       "border border-line-structure bg-surface-bg rounded-[2px]",
       "transition-colors duration-120 cursor-pointer",
diff --git a/style.css b/style.css
index b4c982b2d4..37796e0b3b 100644
--- a/style.css
+++ b/style.css
@@ -838,6 +838,7 @@
 
 .corner-box-corners--hover::before {
   opacity: 0;
+  z-index: 20;
   transition: opacity 0.2s ease;
 }
 

From 2fbea2627fff9f5ecaec710357ecc36e5643a24b Mon Sep 17 00:00:00 2001
From: felixkrrr <felix@langfuse.com>
Date: Thu, 30 Apr 2026 21:17:45 +0200
Subject: [PATCH 2/4] Fix ChipCard transition merge and FeaturedCustomers
 group-hover collision

- ChipCard baseClassName: drop legacy transition-colors duration-120 so
  tailwind-merge stops eating the new transition-[background] duration-180
  (both shared the transition + transition-duration conflict groups, and the
  later utilities were winning silently).
- FeaturedCustomers: scope the customer-name link group as group/story-link
  so adding hoverStripes (which adds an unnamed .group to the outer CornerBox)
  no longer triggers the underline when hovering anywhere else in the card.

Made-with: Cursor
---
 components/home/FeaturedCustomers.tsx | 4 ++--
 components/ui/chip-card.tsx           | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/home/FeaturedCustomers.tsx b/components/home/FeaturedCustomers.tsx
index bd7fc41505..20d2122983 100644
--- a/components/home/FeaturedCustomers.tsx
+++ b/components/home/FeaturedCustomers.tsx
@@ -166,9 +166,9 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
           >
             <a
               href={story.href}
-              className="inline-flex items-baseline gap-1.5 group"
+              className="inline-flex items-baseline gap-1.5 group/story-link"
             >
-              <span className="text-[15px] font-medium text-text-primary leading-snug group-hover:underline">
+              <span className="text-[15px] font-medium text-text-primary leading-snug group-hover/story-link:underline">
                 {story.name}
               </span>
               <svg
diff --git a/components/ui/chip-card.tsx b/components/ui/chip-card.tsx
index 2a8eff07df..cf968b96f2 100644
--- a/components/ui/chip-card.tsx
+++ b/components/ui/chip-card.tsx
@@ -67,7 +67,7 @@ const ChipCard = React.forwardRef<HTMLAnchorElement | HTMLDivElement, ChipCardPr
       "corner-box-hover-stripes transition-[background] duration-180 ease-out",
       "relative group inline-flex items-center",
       "border border-line-structure bg-surface-bg rounded-[2px]",
-      "transition-colors duration-120 cursor-pointer",
+      "cursor-pointer",
       isMd ? "gap-3 px-4 py-3 min-w-[140px]" : "gap-2.5 px-3.5 py-2.5",
       className
     );

From f5cb1a85b29a134b10c7e14682575a178711e0e2 Mon Sep 17 00:00:00 2001
From: felixkrrr <felix@langfuse.com>
Date: Thu, 30 Apr 2026 21:49:23 +0200
Subject: [PATCH 3/4] fix button sizes

---
 app/not-found.tsx                         | 8 ++++----
 components/BrokenLinkIssue.tsx            | 1 +
 components/ContactSalesForm.tsx           | 2 +-
 components/Header.tsx                     | 2 +-
 components/OSSFriendsPage.tsx             | 2 +-
 components/customers/CustomerStoryCTA.tsx | 4 ++--
 components/home/DeveloperTools.tsx        | 3 +++
 components/home/FeaturedCustomers.tsx     | 1 +
 components/home/GetStartedSection.tsx     | 2 ++
 components/home/Hero.tsx                  | 3 ++-
 components/home/pricing/PricingTable.tsx  | 3 +++
 components/ui/button.tsx                  | 4 ++--
 12 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/not-found.tsx b/app/not-found.tsx
index 0890d324eb..a9198ed994 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -16,10 +16,10 @@ export default function NotFound() {
               The page you were looking for does not exist.
             </p>
           </div>
-          <Button href="/">
-            Go back home
-          </Button>
-          <div className="mt-4">
+          <div className="flex flex-row flex-wrap gap-3 justify-center items-center">
+            <Button size="default" href="/">
+              Go back home
+            </Button>
             <BrokenLinkIssue />
           </div>
         </div>
diff --git a/components/BrokenLinkIssue.tsx b/components/BrokenLinkIssue.tsx
index 64392d537c..d580fe7edd 100644
--- a/components/BrokenLinkIssue.tsx
+++ b/components/BrokenLinkIssue.tsx
@@ -24,6 +24,7 @@ export function BrokenLinkIssue() {
   return (
     <Button
       variant="secondary"
+      size="default"
       href={href}
       target="_blank"
       rel="noopener noreferrer"
diff --git a/components/ContactSalesForm.tsx b/components/ContactSalesForm.tsx
index 435778ff01..b5e84e3e82 100644
--- a/components/ContactSalesForm.tsx
+++ b/components/ContactSalesForm.tsx
@@ -315,7 +315,7 @@ export function ContactSalesForm() {
           </div>
         )}
 
-        <Button type="submit" className="w-full" disabled={isSubmitting}>
+        <Button type="submit" size="default" className="w-full" disabled={isSubmitting}>
           {isSubmitting ? "Submitting..." : "Submit"}
         </Button>
       </form>
diff --git a/components/Header.tsx b/components/Header.tsx
index e045463a9b..f6a5f05a1e 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -38,7 +38,7 @@ export const Header = ({
       {buttons && (
         <div className="mt-6 flex flex-row gap-2 justify-center flex-wrap">
           {buttons.map((button) => (
-            <Button key={button.href} variant="ghost" asChild>
+            <Button key={button.href} variant="ghost" size="default" asChild>
               {button.target ? (
                 <a href={button.href} target={button.target} rel="noopener noreferrer">
                   {button.text} <ArrowRight size={14} className="ml-2" />
diff --git a/components/OSSFriendsPage.tsx b/components/OSSFriendsPage.tsx
index f9cbc0ab0e..59dce13d28 100644
--- a/components/OSSFriendsPage.tsx
+++ b/components/OSSFriendsPage.tsx
@@ -36,7 +36,7 @@ export async function OSSFriendsPage() {
           </Link>
           <p className="my-2">{friend.description}</p>
           <div className="mt-auto">
-            <Button target="_blank" variant="secondary" asChild>
+            <Button target="_blank" variant="secondary" size="default" asChild>
               <Link href={friend.href} rel="noopener">
                 Learn more
               </Link>
diff --git a/components/customers/CustomerStoryCTA.tsx b/components/customers/CustomerStoryCTA.tsx
index 5ebe0f77d2..18217ec8a0 100644
--- a/components/customers/CustomerStoryCTA.tsx
+++ b/components/customers/CustomerStoryCTA.tsx
@@ -16,10 +16,10 @@ export const CustomerStoryCTA = () => {
           Langfuse&apos;s open-source observability platform.
         </Text>
         <div className="flex flex-wrap gap-3 justify-center items-center">
-          <Button variant="primary" href="/cloud">
+          <Button variant="primary" size="default" href="/cloud">
             Start free
           </Button>
-          <Button variant="secondary" href="/docs">
+          <Button variant="secondary" size="default" href="/docs">
             Documentation
           </Button>
         </div>
diff --git a/components/home/DeveloperTools.tsx b/components/home/DeveloperTools.tsx
index 37aadab541..e130faa98d 100644
--- a/components/home/DeveloperTools.tsx
+++ b/components/home/DeveloperTools.tsx
@@ -61,6 +61,7 @@ export const DeveloperTools = () => {
             <div className="flex flex-col items-start px-4 pb-4 -ml-1.25">
               <Button
                 variant="secondary"
+                size="small"
                 href={SKILL_HREF}
               >
                 Install Skill
@@ -82,6 +83,7 @@ export const DeveloperTools = () => {
             <div className="flex flex-col items-start mt-4 -ml-1.25">
               <Button
                 variant="secondary"
+                size="small"
                 href={CLI_HREF}
               >
                 Configure CLI
@@ -103,6 +105,7 @@ export const DeveloperTools = () => {
             <div className="flex flex-col items-start mt-4 -ml-1.25">
               <Button
                 variant="secondary"
+                size="small"
                 href={MCP_HREF}
               >
                 Configure MCP
diff --git a/components/home/FeaturedCustomers.tsx b/components/home/FeaturedCustomers.tsx
index 20d2122983..40d491c0c6 100644
--- a/components/home/FeaturedCustomers.tsx
+++ b/components/home/FeaturedCustomers.tsx
@@ -147,6 +147,7 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
         <div className="ml-auto shrink-0 lg:ml-0 lg:order-last">
           <Button
             href="/cloud"
+            size="default"
             shortcutKey="s"
           >
             Start free
diff --git a/components/home/GetStartedSection.tsx b/components/home/GetStartedSection.tsx
index 5ccbd087a1..0a17c81504 100644
--- a/components/home/GetStartedSection.tsx
+++ b/components/home/GetStartedSection.tsx
@@ -267,6 +267,7 @@ export function GetStartedSection() {
           <div className="flex sm:flex-col gap-0 items-start shrink-0 w-full sm:w-[150px]">
             <Button
               variant="primary"
+              size="default"
               shortcutKey="s"
               href="/cloud"
               wrapperClassName="sm:flex-none sm:w-full"
@@ -275,6 +276,7 @@ export function GetStartedSection() {
             </Button>
             <Button
               variant="secondary"
+              size="default"
               shortcutKey="d"
               href="/docs"
               wrapperClassName="sm:flex-none sm:w-full"
diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx
index 526f834f35..ed6fcea696 100644
--- a/components/home/Hero.tsx
+++ b/components/home/Hero.tsx
@@ -47,12 +47,13 @@ export function Hero() {
           <div className="flex flex-wrap gap-3 justify-center items-center">
             <Button
               variant="primary"
+              size="default"
               shortcutKey="s"
               href="/cloud"
             >
               Start free
             </Button>
-            <Button variant="secondary" shortcutKey="d" href="/docs">
+            <Button variant="secondary" size="default" shortcutKey="d" href="/docs">
               Documentation
             </Button>
           </div>
diff --git a/components/home/pricing/PricingTable.tsx b/components/home/pricing/PricingTable.tsx
index 5516f7dc7b..1458d38405 100644
--- a/components/home/pricing/PricingTable.tsx
+++ b/components/home/pricing/PricingTable.tsx
@@ -1461,6 +1461,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
                   <div className="flex gap-2">
                     <Button
                       variant={tier.featured ? "primary" : "secondary"}
+                      size="default"
                       href={tier.href}
                       wrapperClassName="flex-1"
                       className={cn(
@@ -1473,6 +1474,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
                     </Button>
                     <Button
                       variant="secondary"
+                      size="default"
                       href={tier.ctaCallout.href}
                       wrapperClassName="flex-1"
                       className="justify-center! group-hover:border-line-structure hover:border-line-cta"
@@ -1483,6 +1485,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
                 ) : (
                   <Button
                     variant={tier.featured ? "primary" : "secondary"}
+                    size="default"
                     href={tier.href}
                     className={cn(
                       "justify-center!",
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index bce8a1051d..62fe8b3770 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -77,7 +77,7 @@ function hasRenderableChildren(children: React.ReactNode): boolean {
   );
 }
 
-function buttonVariants({ variant = "primary", size = "default", className }: ButtonVariantOptions) {
+function buttonVariants({ variant = "primary", size = "small", className }: ButtonVariantOptions) {
   if (variant === "text") {
     return cn(
       textButtonBaseClasses,
@@ -133,7 +133,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         : variant === "text"
           ? "text"
           : "primary";
-    const resolvedSize: ButtonSize = size === "small" ? "small" : "default";
+    const resolvedSize: ButtonSize = size === "default" ? "default" : "small";
 
     const innerRef = React.useRef<HTMLElement | null>(null);
     const isLink = !asChild && Boolean(href);

From eee22191481848be2967a10d5cc0399db5284738 Mon Sep 17 00:00:00 2001
From: felixkrrr <felix@langfuse.com>
Date: Thu, 30 Apr 2026 21:51:59 +0200
Subject: [PATCH 4/4] fix(ui): scope CornerBox hoverStripes group for Tailwind
 v4

Use `group/box` instead of unnamed `group` on hoverStripes CornerBoxes so
nested `group-hover:` (e.g. secondary Button border) only reacts to its own
`button-wrapper` group, not card-wide hover.

Update BulletList and Link `text` variant with `group-hover/box:` where needed
so OpenSource/Enterprise list hovers keep working.

Made-with: Cursor
---
 components/home/BulletList.tsx | 4 ++--
 components/ui/corner-box.tsx   | 2 +-
 components/ui/link.tsx         | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/home/BulletList.tsx b/components/home/BulletList.tsx
index 5490504eb6..587ca01957 100644
--- a/components/home/BulletList.tsx
+++ b/components/home/BulletList.tsx
@@ -12,7 +12,7 @@ export function BulletList({ items }: { items: BulletItem[] }) {
       {items.map((item) => (
         <li key={item.label} className="flex gap-2 items-center">
           <span
-            className="w-0.75 h-0.75 rounded-full shrink-0 bg-text-tertiary transition-colors group-hover:bg-text-secondary"
+            className="w-0.75 h-0.75 rounded-full shrink-0 bg-text-tertiary transition-colors group-hover/box:bg-text-secondary"
             aria-hidden
           />
           {item.href ? (
@@ -26,7 +26,7 @@ export function BulletList({ items }: { items: BulletItem[] }) {
           ) : (
             <Text
               size="s"
-              className="text-left transition-colors text-text-tertiary group-hover:text-text-secondary"
+              className="text-left transition-colors text-text-tertiary group-hover/box:text-text-secondary"
             >
               {item.label}
             </Text>
diff --git a/components/ui/corner-box.tsx b/components/ui/corner-box.tsx
index b4600c42c9..e8ec6d215e 100644
--- a/components/ui/corner-box.tsx
+++ b/components/ui/corner-box.tsx
@@ -99,7 +99,7 @@ const CornerBox = React.forwardRef<HTMLDivElement, CornerBoxProps>(
           noBorder ? "corner-box-corners-flush" : "border border-line-structure corner-box-corners",
           withStripes && "with-stripes",
           hoverStripes &&
-            "group corner-box-hover-stripes transition-[background] duration-180 ease-out",
+            "group/box corner-box-hover-stripes transition-[background] duration-180 ease-out",
           className
         )}
         style={hasCustomCorners ? { ...cornerStyle, ...style } : style}
diff --git a/components/ui/link.tsx b/components/ui/link.tsx
index cfd93ebcc4..2f9837b233 100644
--- a/components/ui/link.tsx
+++ b/components/ui/link.tsx
@@ -25,7 +25,7 @@ const linkVariants = cva(
       variant: {
         default: "text-foreground hover:text-muted-foreground",
         nav: "text-text-tertiary hover:text-text-secondary no-underline font-sans text-[13px] font-[430] leading-[1.2] tracking-[-0.26px] [text-shadow:0_0_0_#B5AFEA]",
-        text: "leading-snug font-[430] tracking-[-0.26px] text-text-tertiary underline decoration-line-structure underline-offset-2 transition-colors group-hover:text-text-secondary hover:text-text-primary",
+        text: "leading-snug font-[430] tracking-[-0.26px] text-text-tertiary underline decoration-line-structure underline-offset-2 transition-colors group-hover:text-text-secondary group-hover/box:text-text-secondary hover:text-text-primary",
         underline:
           "text-text-links underline decoration-1 underline-offset-2 decoration-text-links hover:text-primary hover:decoration-primary font-normal",
         button: