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>

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]",
       },

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,

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");
+  });
 });