Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

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

tests/unit/CardSteps.test.jsx

@@ -105,7 +105,7 @@ describe("CardSteps Component", () => {
     const section = document.querySelector("section");
     expect(section).toHaveClass(
       "bg-transparent",
-      "py-[var(--spacing-scale-032)]",
+      "py-[var(--space-800)]",
     );
   });
 
@@ -172,8 +172,8 @@ describe("CardSteps Component", () => {
 
     const section = document.querySelector("section");
     expect(section).toHaveClass(
-      "py-[var(--spacing-scale-032)]",
-      "sm:py-[var(--spacing-scale-048)]",
+      "py-[var(--space-800)]",
+      "sm:py-[var(--space-1200)]",
     );
   });
 

tests/unit/ContentContainer.test.jsx

@@ -75,7 +75,7 @@ describe("ContentContainer", () => {
       "font-bricolage-grotesque",
       "font-medium",
       "text-xx-small-display",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });
 
@@ -86,7 +86,7 @@ describe("ContentContainer", () => {
     expect(description).toBeInTheDocument();
     expect(description).toHaveClass(
       "text-x-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });
 
@@ -132,7 +132,7 @@ describe("ContentContainer", () => {
 
     // Check the content container (parent of icon)
     expect(iconContainer.parentElement).toHaveClass(
-      "gap-[var(--measures-spacing-008)]",
+      "gap-[var(--space-200)]",
     );
     // Check the text container (parent of title) - it has responsive gap classes
     expect(textContainer.parentElement).toHaveClass("flex", "flex-col");
@@ -146,7 +146,7 @@ describe("ContentContainer", () => {
       "flex",
       "min-w-0",
       "items-end",
-      "gap-[var(--measures-spacing-008)]",
+      "gap-[var(--space-200)]",
     );
   });
 
@@ -156,13 +156,13 @@ describe("ContentContainer", () => {
     const author = screen.getByText("Test Author");
     expect(author).toHaveClass(
       "text-xx-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
     expect(date).toHaveClass(
       "text-xx-small-paragraph",
-      "text-[var(--color-content-inverse-brand-royal)]",
+      "text-[var(--color-content-invert-brand-royal)]",
     );
   });
 

tests/unit/Layout.test.jsx

@@ -13,10 +13,6 @@ vi.mock("next/font/google", () => ({
     variable: "--font-bricolage-grotesque",
     style: { fontFamily: "Bricolage Grotesque" },
   })),
-  Space_Grotesk: vi.fn(() => ({
-    variable: "--font-space-grotesk",
-    style: { fontFamily: "Space Grotesk" },
-  })),
 }));
 
 function findChildByType(node, type) {
@@ -60,7 +56,6 @@ describe("RootLayout", () => {
     expect(body).toBeTruthy();
     expect(body.props.className).toContain("--font-inter");
     expect(body.props.className).toContain("--font-bricolage-grotesque");
-    expect(body.props.className).toContain("--font-space-grotesk");
   });
 
   test("renders main layout structure", () => {

tests/unit/LogoWall.test.jsx

@@ -48,7 +48,7 @@ describe("LogoWall Component", () => {
     const section = document.querySelector("section");
     expect(section).toHaveClass(
       "bg-[var(--color-surface-default-primary)]",
-      "p-[var(--spacing-scale-032)]",
+      "p-[var(--space-800)]",
     );
   });
 
@@ -57,8 +57,8 @@ describe("LogoWall Component", () => {
 
     const section = document.querySelector("section");
     expect(section).toHaveClass(
-      "p-[var(--spacing-scale-032)]",
-      "md:px-[var(--spacing-scale-024)]",
+      "p-[var(--space-800)]",
+      "md:px-[var(--space-600)]",
     );
   });
 

tests/unit/QuoteBlock.test.jsx

@@ -59,8 +59,8 @@ describe("QuoteBlock Component", () => {
     // Compact variant should have different styling
     const section = screen.getByRole("region");
     expect(section).toHaveClass(
-      "py-[var(--spacing-scale-032)]",
-      "px-[var(--spacing-scale-016)]",
+      "py-[var(--space-800)]",
+      "px-[var(--space-400)]",
     );
 
     rerender(
@@ -69,8 +69,8 @@ describe("QuoteBlock Component", () => {
 
     // Extended variant should have different styling
     expect(section).toHaveClass(
-      "py-[var(--spacing-scale-048)]",
-      "px-[var(--spacing-scale-024)]",
+      "py-[var(--space-1200)]",
+      "px-[var(--space-600)]",
     );
   });
 
@@ -166,10 +166,10 @@ describe("QuoteBlock Component", () => {
     render(<QuoteBlock quote="Test quote" author="Test Author" />);
 
     const section = document.querySelector("section");
-    expect(section).toHaveClass("md:py-[var(--spacing-scale-032)]");
+    expect(section).toHaveClass("md:py-[var(--space-800)]");
 
     const card = section.querySelector(
-      '[class*="bg-[var(--color-surface-default-brand-darker-accent)]"]',
+      '[class*="bg-[var(--color-surface-invert-brand-secondary)]"]',
     );
     expect(card).toBeInTheDocument();
   });

tests/unit/Rule.test.jsx

@@ -191,7 +191,7 @@ describe("Rule Component", () => {
 
     const card = screen.getByRole("button");
     expect(card).toHaveClass("shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)]");
-    expect(card).toHaveClass("rounded-[var(--radius-measures-radius-small)]");
+    expect(card).toHaveClass("rounded-[var(--radius-300)]");
   });
 
   it("maintains proper heading structure", () => {

tests/unit/Step.test.jsx

@@ -86,7 +86,7 @@ describe("Step Component", () => {
       .getByText("Test Card Text")
       .closest("div").parentElement;
     expect(card).toHaveClass(
-      "bg-[var(--color-surface-inverse-primary)]",
+      "bg-[var(--color-surface-invert-primary)]",
       "shadow-lg",
     );
   });

tests/unit/figmaTokens.test.ts

@@ -0,0 +1,52 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const css = readFileSync("app/tailwind.css", "utf8");
+
+function decl(name: string): string {
+  const match = css.match(new RegExp(`${name}:\\s*([\\s\\S]*?);`));
+  if (!match?.[1]) throw new Error(`missing ${name}`);
+  return match[1].replace(/\s+/g, " ").trim();
+}
+
+describe("Figma tokens", () => {
+  it("points theme colors, radius, and focus at Figma", () => {
+    expect(decl("--radius-500")).toBe("24px");
+    expect(decl("--color-surface-default-brand-royal")).toContain("royal-blue600");
+    expect(decl("--color-surface-default-brand-kiwi")).toContain("kiwi800");
+    expect(decl("--color-content-default-brand-secondary")).toContain("yellow200");
+    expect(decl("--color-content-invert-brand-secondary")).toContain("yellow800");
+    expect(decl("--color-content-invert-brand-royal")).toContain("royal-blue400");
+    expect(decl("--color-content-default-utility-negative")).toContain("red300");
+    expect(decl("--color-content-default-negative-primary")).toContain(
+      "utility-negative",
+    );
+    expect(decl("--color-border-invert-secondary")).toContain("gray-100");
+    expect(decl("--color-border-invert-tertiary")).toContain("gray-300");
+    expect(decl("--color-border-default-control")).toContain("gray-400");
+    expect(decl("--shadow-focus-default")).toContain("gray-900");
+    expect(decl("--shadow-focus-invert")).toContain("gray-000");
+    expect(css).not.toMatch(/--color-[a-z0-9-]+-light:/);
+    expect(css).not.toContain("--font-mono");
+    expect(css).not.toContain("--measures-radius-");
+    expect(css).not.toContain("--color-surface-inverse-");
+  });
+
+  it("matches the type scale and the five sizing steps", () => {
+    expect(decl("--sizing-450")).toBe("18px");
+    expect(decl("--sizing-700")).toBe("28px");
+    expect(decl("--sizing-900")).toBe("36px");
+    expect(decl("--sizing-1100")).toBe("44px");
+    expect(decl("--sizing-1300")).toBe("52px");
+    expect(decl("--text-display-s")).toBe("32px");
+    expect(decl("--text-display-s--font-weight")).toBe("500");
+    expect(decl("--text-display-xxl--line-height")).toContain("line-height-2600");
+    expect(decl("--text-heading-xl--font-weight")).toBe("700");
+    expect(decl("--text-paragraph-l--line-height")).toContain("line-height-600");
+    expect(decl("--text-paragraph-strong-m--font-weight")).toBe("700");
+    expect(decl("--text-paragraph-em-m")).toBe("16px");
+    expect(decl("--text-link-s")).toBe("14px");
+    expect(decl("--text-small-display")).toContain("display-s");
+    expect(decl("--typography-line-height-1800")).toContain("scale-072");
+  });
+});