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/components/cards/CardStack/CardStack.view.tsx

@@ -52,7 +52,7 @@ function CardStackAddCardButton({
       type="button"
       onClick={onClick}
       aria-label={ariaLabel}
-      className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--measures-radius-medium,8px)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
+      className="flex min-h-[88px] w-full shrink-0 items-center justify-center rounded-[var(--radius-400)] bg-[var(--color-surface-default-secondary)] text-medium-label text-[var(--color-content-default-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
     >
       <span className="flex items-center gap-2">
         <svg

app/components/cards/Icon/Icon.view.tsx

@@ -19,7 +19,7 @@ export function IconView({
   return (
     <div
       data-figma-node="22084-859659"
-      className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--measures-spacing-020)] ${interactionClass} ${className}`}
+      className={`relative flex h-[350px] w-full min-w-[240px] max-w-[480px] flex-col items-start justify-between border border-solid border-[var(--color-border-default-secondary)] bg-transparent p-[var(--space-500)] ${interactionClass} ${className}`}
       tabIndex={interactive ? 0 : undefined}
       role={interactive ? "button" : "article"}
       aria-label={interactive ? `${title}: ${description}` : undefined}

app/components/cards/Mini/Mini.container.tsx

@@ -13,7 +13,7 @@ const MiniContainer = memo<MiniProps>(
   ({
     children,
     className = "",
-    backgroundColor = "bg-[var(--color-surface-default-brand-royal)]",
+    backgroundColor = "bg-[var(--color-surface-invert-brand-royal)]",
     panelContent,
     label,
     labelLine1,
@@ -51,7 +51,7 @@ const MiniContainer = memo<MiniProps>(
             ...baseProps,
             href,
             className:
-              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
+              "block focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
             tabIndex: 0,
           },
         };
@@ -64,7 +64,7 @@ const MiniContainer = memo<MiniProps>(
             ...baseProps,
             onClick,
             className:
-              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-measures-radius-xlarge)]",
+              "block w-full text-left focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-invert-brand-royal)] focus:ring-offset-2 rounded-[var(--radius-500)]",
             tabIndex: 0,
             onKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => {
               if (e.key === "Enter" || e.key === " ") {

app/components/cards/Mini/Mini.view.tsx

@@ -30,8 +30,8 @@ function MiniView({
     : `h-[186px] flex flex-col gap-[7px] ${className}`;
 
   const panelClass = featureGridShell
-    ? `h-[138px] shrink-0 rounded-[var(--measures-radius-400,16px)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
-    : `flex-1 rounded-[var(--radius-measures-radius-xlarge)] border border-[1px] py-[var(--spacing-scale-032)] px-[var(--spacing-scale-024)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
+    ? `h-[138px] shrink-0 rounded-[var(--radius-400)] px-[24px] py-[32px] ${backgroundColor} flex items-center justify-center`
+    : `flex-1 rounded-[var(--radius-500)] border border-[1px] py-[var(--space-800)] px-[var(--space-600)] ${backgroundColor} flex items-center justify-center transition-shadow duration-200 hover:shadow-lg`;
 
   const imageClass = featureGridShell
     ? `max-h-[48px] max-w-[56px] w-auto h-auto object-contain${panelImageClassName ? ` ${panelImageClassName}` : ""}`

app/components/cards/Rule/Rule.view.tsx

@@ -233,10 +233,10 @@ export function RuleView({
   const borderRadiusClass = className?.includes("rounded-")
     ? "" // If className already has border radius, don't add size-based one
     : isExtraSmall
-      ? "rounded-[var(--measures-radius-200,8px)]"
+      ? "rounded-[var(--radius-200)]"
       : isSmall
-        ? "rounded-[var(--measures-radius-300,12px)]"
-        : "rounded-[var(--radius-measures-radius-small)]";
+        ? "rounded-[var(--radius-300)]"
+        : "rounded-[var(--radius-300)]";
 
   function renderBottomLink(link: RuleBottomLink) {
     const shared = {

app/components/cards/Selection/Selection.view.tsx

@@ -7,7 +7,7 @@ import type { SelectionViewProps } from "./Selection.types";
 function InfoIcon() {
   return (
     <span
-      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      className="flex h-[var(--space-400)] w-[var(--space-400)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
       aria-hidden
     >
       ?
@@ -65,7 +65,7 @@ export function SelectionView({
   const cardIdProp = selectionId ? { "data-card-id": selectionId } : {};
 
   if (size === "m") {
-    const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+    const baseClasses = `select-none rounded-[var(--radius-200)] bg-[var(--color-gray-000)] px-4 py-3 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
 
     return (
       <div
@@ -92,7 +92,7 @@ export function SelectionView({
     );
   }
 
-  const baseClasses = `select-none rounded-[var(--measures-radius-200,8px)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+  const baseClasses = `select-none rounded-[var(--radius-200)] bg-[var(--color-gray-000)] p-4 transition-[border-color,box-shadow,outline] duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
 
   return (
     <div

app/components/cards/Stat/Stat.view.tsx

@@ -21,7 +21,7 @@ function StatView({
 
   return (
     <article
-      className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-measures-radius-xlarge,20px)] bg-[var(--color-surface-invert-primary,white)] px-[var(--spacing-scale-024)] py-[var(--spacing-scale-032)] sm:h-[170px] sm:min-h-0 sm:p-[var(--spacing-scale-024)] ${className}`.trim()}
+      className={`relative flex h-auto min-h-[182px] w-full flex-col items-start justify-between rounded-[var(--radius-500)] bg-[var(--color-surface-invert-primary,white)] px-[var(--space-600)] py-[var(--space-800)] sm:h-[170px] sm:min-h-0 sm:p-[var(--space-600)] ${className}`.trim()}
     >
       <div className="relative flex w-full flex-col items-start">
         <div className="relative flex items-center">

app/components/cards/Step/Step.tsx

@@ -14,7 +14,7 @@ interface StepProps {
 
 const Step = memo<StepProps>(({ number, text, size: sizeProp }) => {
   const baseClasses =
-    "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
+    "bg-[var(--color-surface-invert-primary)] rounded-[12px] shadow-lg";
 
   if (sizeProp) {
     const size = sizeProp;

app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx

@@ -54,7 +54,7 @@ export function TemplateChipDetailModal({
       nextButtonText={t("closeButton")}
       ariaLabel={resolved?.title || "Template entry details"}
     >
-      <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
+      <div className="flex flex-col gap-[var(--space-600)] pb-2">
         {resolved?.body ?? (
           <p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]">
             {t("fallback.bodyLabel")}