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>

app/layout.tsx

@@ -1,4 +1,4 @@
-import { Inter, Bricolage_Grotesque, Space_Grotesk } from "next/font/google";
+import { Inter, Bricolage_Grotesque } from "next/font/google";
 import type { Metadata, Viewport } from "next";
 import type { ReactNode } from "react";
 import messages from "../messages/en/index";
@@ -21,6 +21,7 @@ import "./globals.css";
 const inter = Inter({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700"],
+  style: ["normal", "italic"],
   variable: "--font-inter",
   display: "swap",
   preload: true,
@@ -37,17 +38,6 @@ const bricolageGrotesque = Bricolage_Grotesque({
   fallback: ["system-ui", "arial"],
 });
 
-const spaceGrotesk = Space_Grotesk({
-  subsets: ["latin"],
-  weight: ["400", "500", "700"],
-  variable: "--font-space-grotesk",
-  display: "swap",
-  // Below-the-fold (subtitle in `ContentLockup` only). Skipping preload keeps
-  // the marketing critical-path bytes for Inter + Bricolage.
-  preload: false,
-  fallback: ["system-ui", "arial"],
-});
-
 const homeMeta = messages.metadata.home;
 
 /** Viewport and favicon use the Metadata / Viewport APIs; avoid a manual `<head>` with a second viewport `meta` (duplicates Next's head injection). */
@@ -149,7 +139,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         />
       </head>
       <body
-        className={`${inter.variable} ${bricolageGrotesque.variable} ${spaceGrotesk.variable}`}
+        className={`${inter.variable} ${bricolageGrotesque.variable}`}
       >
         <div className="mx-auto flex min-h-screen w-full max-w-[1920px] flex-col">
           {children}