Adopt remaining typography token classes (CR-24)

Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/ContentBanner.test.tsx

@@ -157,7 +157,7 @@ describe("ContentBanner", () => {
 
     const title = screen.getByRole("heading", { name: "Test Article" });
     expect(title).toBeInTheDocument();
-    expect(title).toHaveClass("sm:text-[24px]", "md:text-[32px]");
+    expect(title).toHaveClass("sm:text-x-small-display", "md:text-[32px]");
     expect(screen.getByText("Sample Operating Manual")).toBeInTheDocument();
     const copyColumn = container.querySelector('[data-node-id="19189:9171"]');
     expect(copyColumn).toHaveClass("lg:max-w-[365px]");

tests/pages/blog.test.jsx

@@ -253,8 +253,7 @@ describe("BlogPostPage", () => {
     expect(contentDiv).toHaveClass(
       "text-[var(--color-content-inverse-primary)]",
     );
-    expect(contentDiv).toHaveClass("text-[16px]");
-    expect(contentDiv).toHaveClass("leading-[24px]");
+    expect(contentDiv).toHaveClass("text-medium-paragraph");
 
     const article = contentDiv?.closest("article");
     expect(article).toHaveClass("p-[var(--spacing-scale-024)]");
@@ -271,12 +270,9 @@ describe("BlogPostPage", () => {
     const contentDiv = screen
       .getByText(/This is the article content/)
       .closest("div.post-body");
-    expect(contentDiv).toHaveClass("sm:text-[18px]");
-    expect(contentDiv).toHaveClass("sm:leading-[130%]");
-    expect(contentDiv).toHaveClass("lg:text-[24px]");
-    expect(contentDiv).toHaveClass("lg:leading-[32px]");
-    expect(contentDiv).toHaveClass("xl:text-[32px]");
-    expect(contentDiv).toHaveClass("xl:leading-[40px]");
+    expect(contentDiv).toHaveClass("sm:text-large-paragraph");
+    expect(contentDiv).toHaveClass("lg:text-x-large-paragraph");
+    expect(contentDiv).toHaveClass("xl:text-xx-large-paragraph");
   });
 
   it("applies responsive max-width constraints", async () => {

tests/unit/ContentContainer.test.jsx

@@ -74,8 +74,7 @@ describe("ContentContainer", () => {
     expect(title).toHaveClass(
       "font-bricolage",
       "font-medium",
-      "text-[18px]",
-      "leading-[120%]",
+      "text-xx-small-display",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -86,10 +85,7 @@ describe("ContentContainer", () => {
     const description = screen.getByText(/This is a test article description/);
     expect(description).toBeInTheDocument();
     expect(description).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[12px]",
-      "leading-[16px]",
+      "text-x-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -148,19 +144,13 @@ describe("ContentContainer", () => {
 
     const author = screen.getByText("Test Author");
     expect(author).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[10px]",
-      "leading-[14px]",
+      "text-xx-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
     expect(date).toHaveClass(
-      "font-inter",
-      "font-normal",
-      "text-[10px]",
-      "leading-[14px]",
+      "text-xx-small-paragraph",
       "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
@@ -217,7 +207,7 @@ describe("ContentContainer", () => {
     expect(title).toHaveClass("text-[18px]", "leading-[22px]");
 
     const description = screen.getByText(/This is a test article description/);
-    expect(description).toHaveClass("text-[12px]", "leading-[16px]");
+    expect(description).toHaveClass("text-x-small-paragraph");
   });
 
   it("applies correct responsive sizing for responsive breakpoint", () => {
@@ -227,10 +217,10 @@ describe("ContentContainer", () => {
     expect(icon).toHaveClass("w-[60px]", "h-[30px]");
 
     const title = screen.getByText("Test Article Title");
-    expect(title).toHaveClass("text-[18px]", "leading-[120%]");
+    expect(title).toHaveClass("text-xx-small-display");
 
     const description = screen.getByText(/This is a test article description/);
-    expect(description).toHaveClass("text-[12px]", "leading-[16px]");
+    expect(description).toHaveClass("text-x-small-paragraph");
   });
 
   it("has proper accessibility attributes", () => {

tests/unit/QuoteBlock.test.jsx

@@ -197,7 +197,7 @@ describe("QuoteBlock Component", () => {
     render(<QuoteBlock quote="Test quote" author="Test Author" />);
 
     const authorElement = screen.getByText("Test Author");
-    expect(authorElement).toHaveClass("font-inter", "font-normal", "uppercase");
+    expect(authorElement).toHaveClass("font-normal", "uppercase");
   });
 
   test("applies responsive text sizing", () => {
@@ -207,9 +207,9 @@ describe("QuoteBlock Component", () => {
 
     const quoteElement = screen.getByText("Test quote");
     expect(quoteElement).toHaveClass(
-      "text-[18px]",
-      "md:text-[36px]",
-      "lg:text-[52px]",
+      "text-xx-small-display",
+      "md:text-small-display",
+      "lg:text-large-display",
     );
   });
 

tests/unit/Rule.test.jsx

@@ -188,11 +188,11 @@ describe("Rule Component", () => {
     render(<Rule {...defaultProps} size="L" />);
 
     const heading = screen.getByRole("heading", { level: 3 });
-    // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and font-extrabold
+    // Check for responsive font classes - at 1440px+ it should have font-bricolage-grotesque and X Large Heading
     expect(heading?.className).toMatch(
       /min-\[1440px\]:font-bricolage-grotesque/,
     );
-    expect(heading?.className).toMatch(/min-\[1440px\]:font-extrabold/);
+    expect(heading?.className).toMatch(/min-\[1440px\]:text-x-large-heading/);
   });
 
   it("renders expanded state with categories", () => {