From c0342a3b2d7017c2e0f307091b60ebf40f03a708 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Tue, 18 Aug 2026 18:59:15 -0600
Subject: [PATCH] Align hero lockup type with Display and Paragraph styles.

Use 110% heading line-height, 14px subhead under 430, and pin Bricolage optical size so Medium stays Medium.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../ContentLockup/ContentLockup.container.tsx |  6 +++---
 app/layout.tsx                                |  3 ++-
 tests/components/type/ContentLockup.test.tsx  | 21 +++++++++++++++++++
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/components/type/ContentLockup/ContentLockup.container.tsx b/app/components/type/ContentLockup/ContentLockup.container.tsx
index db0bfbc..f74fed9 100644
--- a/app/components/type/ContentLockup/ContentLockup.container.tsx
+++ b/app/components/type/ContentLockup/ContentLockup.container.tsx
@@ -36,11 +36,11 @@ const ContentLockupContainer = memo<ContentLockupProps>(
         titleContainer:
           "flex gap-[var(--spacing-scale-008)] xl:gap-[var(--spacing-scale-010)] items-center",
         title:
-          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]",
+          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
         subtitle:
-          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[32px] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)]",
+          "font-bricolage-grotesque font-medium max-sm:text-[32px] max-sm:leading-[110%] sm:text-large-display md:text-medium-display lg:text-x-large-display xl:text-xx-large-display text-[var(--color-content-inverse-primary)] [font-variation-settings:'opsz'_14,'wdth'_100]",
         description:
-          "text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
+          "text-small-paragraph sm:text-large-paragraph lg:text-x-large-paragraph xl:text-xx-large-paragraph text-[var(--color-content-inverse-primary)]",
         shape:
           "w-[27.2px] h-[27.2px] md:w-[34px] md:h-[34px] lg:w-[50px] lg:h-[50px]",
       },
diff --git a/app/layout.tsx b/app/layout.tsx
index a1eac4e..b2a3746 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -26,7 +26,8 @@ const inter = Inter({
 
 const bricolageGrotesque = Bricolage_Grotesque({
   subsets: ["latin"],
-  weight: ["400", "500", "700", "800"],
+  weight: "variable",
+  axes: ["opsz"],
   variable: "--font-bricolage-grotesque",
   display: "swap",
   preload: true,
diff --git a/tests/components/type/ContentLockup.test.tsx b/tests/components/type/ContentLockup.test.tsx
index 2724e7a..e31f532 100644
--- a/tests/components/type/ContentLockup.test.tsx
+++ b/tests/components/type/ContentLockup.test.tsx
@@ -24,4 +24,25 @@ describe("ContentLockup", () => {
       screen.getByText("Help your community make important decisions."),
     ).toBeInTheDocument();
   });
+
+  it("uses Display line-height and Small/Paragraph on the hero lockup", () => {
+    renderWithProviders(
+      <ContentLockup
+        variant="hero"
+        title="Collaborate"
+        subtitle="with clarity"
+        description="Help your community make important decisions."
+      />,
+    );
+
+    const title = screen.getByRole("heading", { name: "Collaborate" });
+    expect(title.className).toContain("max-sm:leading-[110%]");
+    expect(title.className).toContain("font-medium");
+
+    const description = screen.getByText(
+      "Help your community make important decisions.",
+    );
+    expect(description.className).toContain("text-small-paragraph");
+    expect(description.className).toContain("sm:text-large-paragraph");
+  });
 });