app/components/type/AboutHeader/AboutHeader.container.tsx

@@ -5,7 +5,7 @@ import AboutHeaderView from "./AboutHeader.view";
 import type { AboutHeaderProps } from "./AboutHeader.types";
 
 /**
- * Figma: "Type / AboutHeader" (22135-889654).
+ * Figma: "Section / About Header" (22135-889654) — 320-639 / 640-1440 / 1440+.
  */
 const AboutHeaderContainer = memo<AboutHeaderProps>((props) => {
   const titleId = useId();

app/components/type/AboutHeader/AboutHeader.view.tsx

@@ -10,7 +10,7 @@ function assetRelativeForInlineIcon(icon: "arrow" | "about"): string {
 }
 
 /**
- * Figma: "Type / AboutHeader" (22135-889654).
+ * Figma: "Section / About Header" (22135-889654) — inline marks 32/29, 64/58, 80/80.
  */
 function AboutHeaderView({
   segments,
@@ -39,19 +39,15 @@ function AboutHeaderView({
               key={`${segment.icon}-${index}`}
               className={
                 segment.icon === "arrow"
-                  ? "inline-flex h-[0.92em] min-h-[24px] max-h-[52px] shrink-0 items-center self-center md:max-h-[64px]"
+                  ? "inline-flex size-[32px] shrink-0 items-center self-center md:size-[64px] xl:size-[80px]"
-                  : "inline-flex size-[29px] shrink-0 items-center justify-center md:size-[80px]"
+                  : "inline-flex size-[29px] shrink-0 items-center justify-center md:size-[58px] xl:size-[80px]"
               }
             >
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative inline vector */}
               <img
                 src={getAssetPath(assetRelativeForInlineIcon(segment.icon))}
                 alt=""
-                className={
+                className="size-full object-contain"
-                  segment.icon === "arrow"
-                    ? "h-full w-auto max-w-[4.75rem] object-contain md:max-w-[6rem]"
-                    : "size-full object-contain"
-                }
                 role="presentation"
               />
             </span>

app/components/type/ContentLockup/ContentLockup.container.tsx

@@ -66,7 +66,7 @@ const ContentLockupContainer = memo<ContentLockupProps>(
         titleGroup:
           "flex flex-col gap-[var(--spacing-scale-008)] lg:gap-[var(--spacing-scale-004)]",
         titleContainer:
-          "flex flex-wrap items-center gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-010)]",
+          "flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]",
         title:
           "font-bricolage-grotesque font-medium text-[32px] leading-[1.1] md:text-large-display xl:text-x-large-display text-[var(--color-content-default-primary,white)]",
         subtitle:

app/components/type/ContentLockup/ContentLockup.view.tsx

@@ -62,7 +62,7 @@ function ContentLockupView({
               {titleContent ? (
                 <h1
                   id={titleId}
-                  className={`${styles.title} flex flex-wrap items-center gap-[var(--spacing-scale-008)] md:gap-[var(--spacing-scale-010)]`}
+                  className={`${styles.title} flex flex-wrap items-center gap-[var(--spacing-scale-010)] xl:gap-[var(--spacing-scale-012)]`}
                 >
                   {titleContent}
                 </h1>

tests/components/type/AboutHeader.test.tsx

@@ -17,4 +17,30 @@ describe("AboutHeader", () => {
       screen.getByRole("heading", { name: /CommunityRule helps/i }),
     ).toBeInTheDocument();
   });
+
+  it("sizes inline marks to the 320 / 640 / 1440 About Header variants", () => {
+    const { container } = render(
+      <AboutHeader
+        segments={[
+          { type: "word", text: "CommunityRule" },
+          { type: "icon", icon: "arrow" },
+          { type: "word", text: "groups" },
+          { type: "icon", icon: "about" },
+        ]}
+      />,
+    );
+
+    const heading = screen.getByRole("heading");
+    expect(heading.className).toContain("gap-[var(--spacing-scale-010)]");
+    expect(heading.className).toContain("xl:gap-[var(--spacing-scale-012)]");
+
+    const marks = container.querySelectorAll("h1 span.inline-flex");
+    expect(marks).toHaveLength(2);
+    expect(marks[0]?.className).toContain("size-[32px]");
+    expect(marks[0]?.className).toContain("md:size-[64px]");
+    expect(marks[0]?.className).toContain("xl:size-[80px]");
+    expect(marks[1]?.className).toContain("size-[29px]");
+    expect(marks[1]?.className).toContain("md:size-[58px]");
+    expect(marks[1]?.className).toContain("xl:size-[80px]");
+  });
 });