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/(marketing)/use-cases/[slug]/page.tsx

@@ -131,7 +131,7 @@ export default async function UseCaseDetailPage({ params }: PageProps) {
         />
         <article
           data-figma-node="22015:42622"
-          className="flex w-full items-center justify-center self-stretch px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:px-[var(--spacing-scale-032)] md:px-[var(--spacing-scale-048)] lg:px-[var(--spacing-scale-064)] xl:px-[256px]"
+          className="flex w-full items-center justify-center self-stretch px-[var(--space-600)] py-[var(--space-800)] sm:px-[var(--space-800)] md:px-[var(--space-1200)] lg:px-[var(--space-1800)] xl:px-[256px]"
         >
           <div
             className="use-case-body"

app/(marketing)/use-cases/page.tsx

@@ -26,7 +26,7 @@ const RelatedArticles = dynamic(
   () => import("../../components/sections/RelatedArticles"),
   {
     loading: () => (
-      <section className="min-h-[400px] bg-black py-[var(--spacing-scale-032)]" />
+      <section className="min-h-[400px] bg-black py-[var(--space-800)]" />
     ),
     ssr: true,
   },
@@ -176,7 +176,7 @@ export default function UseCasesPage() {
       <div className="bg-[var(--color-surface-default-primary)]">
         <Suspense
           fallback={
-            <section className="min-h-[400px] py-[var(--spacing-scale-032)]" />
+            <section className="min-h-[400px] py-[var(--space-800)]" />
           }
         >
           <MarketingRuleStackSection

app/(marketing)/use-cases/use-cases.css

@@ -9,7 +9,7 @@
   font-size: 18px;
   font-weight: 400;
   line-height: 130%;
-  color: var(--color-content-inverse-primary);
+  color: var(--color-content-invert-primary);
   word-break: break-word;
 }