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/progress/ProportionBar/ProportionBar.view.tsx

@@ -65,7 +65,7 @@ export function ProportionBarView({
       aria-label={ariaLabelText}
     >
       {/* Background layer - 3 segments */}
-      <div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px]">
+      <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px]">
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-l-[var(--radius-full)]" />
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)]" />
         <div className="flex-1 h-full bg-[var(--color-surface-default-secondary)] rounded-r-[var(--radius-full)]" />
@@ -77,7 +77,7 @@ export function ProportionBarView({
         only the outermost left/right edges of the whole bar can round to match the
         background capsule.
       */}
-      <div className="absolute inset-0 flex gap-[var(--spacing-scale-008)] px-[4px] overflow-hidden">
+      <div className="absolute inset-0 flex gap-[var(--space-200)] px-[4px] overflow-hidden">
         {/* First section - for 1-X: (X+1)/6 filled, for 2-X and 3-X: fully filled */}
         <div className="flex-1 h-full relative">
           {fullSegments === 1 ? (

app/components/progress/Stepper/Stepper.container.tsx

@@ -10,7 +10,7 @@ import type { StepperProps } from "./Stepper.types";
 
 const StepperContainer = memo<StepperProps>(
   ({ active = 1, totalSteps = 5, className = "" }) => {
-    const stepperClasses = `flex gap-[var(--spacing-scale-012)] items-center relative`;
+    const stepperClasses = `flex gap-[var(--space-300)] items-center relative`;
 
     return (
       <StepperView

app/components/progress/Stepper/Stepper.view.tsx

@@ -37,8 +37,8 @@ export function StepperView({
                 cx="6"
                 cy="6"
                 r="5.5"
-                fill="var(--color-surface-inverse-secondary)"
-                stroke="var(--color-surface-inverse-secondary)"
+                fill="var(--color-surface-invert-secondary)"
+                stroke="var(--color-surface-invert-secondary)"
                 strokeWidth="1"
               />
             </svg>