Match Rule card type and section gaps to the template grid.

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

tests/unit/Rule.test.jsx

@@ -195,6 +195,41 @@ describe("Rule Component", () => {
     expect(heading?.className).toMatch(/min-\[1440px\]:text-x-large-heading/);
   });
 
+  it("applies template-grid title and description type scales", () => {
+    render(
+      <Rule
+        {...defaultProps}
+        templateGridFigmaShell
+        description="Important decisions require unanimous agreement."
+      />,
+    );
+
+    const heading = screen.getByRole("heading", { level: 3 });
+    expect(heading).toHaveClass("font-bricolage-grotesque");
+    expect(heading.className).toMatch(/max-\[639px\]:text-small-heading/);
+    expect(heading.className).toMatch(
+      /min-\[640px\]:max-\[767px\]:text-x-large-heading/,
+    );
+    expect(heading.className).toMatch(
+      /min-\[768px\]:max-\[1023px\]:text-small-heading/,
+    );
+    expect(heading.className).toMatch(/min-\[1024px\]:text-x-large-heading/);
+    expect(heading.className).not.toMatch(/text-x-small-heading/);
+
+    const description = screen.getByText(
+      "Important decisions require unanimous agreement.",
+    );
+    expect(description.className).toMatch(/max-\[639px\]:text-small-label/);
+    expect(description.className).toMatch(
+      /min-\[640px\]:max-\[767px\]:text-large-label/,
+    );
+    expect(description.className).toMatch(
+      /min-\[768px\]:max-\[1023px\]:text-small-label/,
+    );
+    expect(description.className).toMatch(/min-\[1024px\]:text-large-label/);
+    expect(description.className).not.toMatch(/text-x-small-label/);
+  });
+
   it("renders expanded state with categories", () => {
     const categories = [
       {

tests/unit/RuleStack.test.jsx

@@ -188,6 +188,10 @@ describe("RuleStack Component", () => {
     expect(section).toHaveClass("px-[20px]", "py-[32px]");
     expect(section?.className).toMatch(/min-\[640px\]:px-\[32px\]/);
     expect(section?.className).toMatch(/min-\[640px\]:py-\[48px\]/);
+    expect(section?.className).toMatch(/gap-\[24px\]/);
+    expect(section?.className).toMatch(/min-\[768px\]:gap-\[32px\]/);
+    expect(section?.className).toMatch(/min-\[1024px\]:gap-\[40px\]/);
+    expect(section?.className).not.toMatch(/min-\[640px\]:gap-\[32px\]/);
   });
 
   test("applies responsive grid layout", async () => {
@@ -338,6 +342,7 @@ describe("RuleStack Component", () => {
       .getByRole("link", { name: "See all templates" })
       .closest("div");
     expect(linkContainer).toHaveClass("flex", "justify-center");
+    expect(linkContainer?.className).not.toMatch(/mt-\[/);
   });
 
   test("falls back to static catalog when templates API errors", async () => {