Adopt remaining typography token classes (CR-24)

Map exact size/weight/line-height combos onto existing text-* utilities across cards, sections, navigation, modals, controls, and create-flow. Leave unmappable combos hardcoded for design review.

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

app/components/cards/CardStack/CardStack.view.tsx

@@ -48,7 +48,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)] font-inter text-base font-medium 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(--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)]"
     >
       <span className="flex items-center gap-2">
         <svg
@@ -154,7 +154,7 @@ export function CardStackView({
           <button
             type="button"
             onClick={onToggleExpand}
-            className={`font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
+            className={`text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none cursor-pointer ${
               toggleAlignment === "end" ? "self-end" : "self-center"
             }`}
           >
@@ -474,7 +474,7 @@ export function CardStackView({
         <button
           type="button"
           onClick={onToggleExpand}
-          className="font-inter text-base font-normal leading-6 text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
+          className="text-medium-paragraph text-[var(--color-gray-000)] underline hover:opacity-90 focus:outline-none self-center cursor-pointer"
         >
           {expanded ? showLessLabel : toggleLabel}
         </button>

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

@@ -35,13 +35,13 @@ export function IconView({
       {/* Title — Figma XX Large / Label (32 / 36) */}
       <h3
         id={interactive ? undefined : layoutTitleId}
-        className="w-full text-left font-inter text-[32px] font-normal leading-[36px] text-[var(--color-content-default-primary)]"
+        className="w-full text-left text-xx-large-label text-[var(--color-content-default-primary)]"
       >
         {title}
       </h3>
 
       {/* Body: X Small / Paragraph (12/16) per Figma; 14/20 on md–<lg only (Section 22084-859062) */}
-      <p className="w-full text-left font-inter font-normal text-[length:var(--text-x-small-paragraph)] leading-[length:var(--text-x-small-paragraph--line-height)] text-[var(--color-content-default-primary)] md:text-[length:var(--text-small-paragraph)] md:leading-[length:var(--text-small-paragraph--line-height)] lg:text-[length:var(--text-x-small-paragraph)] lg:leading-[length:var(--text-x-small-paragraph--line-height)]">
+      <p className="w-full text-left text-x-small-paragraph text-[var(--color-content-default-primary)] md:text-small-paragraph lg:text-x-small-paragraph">
         {description}
       </p>
     </div>

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

@@ -64,7 +64,7 @@ function MiniView({
         {children}
       </div>
 
-      <div className="text-center font-inter text-[12px] font-medium leading-[14px] text-[var(--color-content-default-primary)]">
+      <div className="text-center text-x-small-label text-[var(--color-content-default-primary)]">
         {labelLine1 && labelLine2 ? (
           <>
             <div>{labelLine1}</div>

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

@@ -108,27 +108,27 @@ export function RuleView({
   const showRecommendedTag = recommended && !expanded;
   const titleClass = templateGridFigmaShell
     ? `
-    max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px]
-    min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px]
-    min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:font-extrabold min-[1024px]:max-[1439px]:text-[36px] min-[1024px]:max-[1439px]:leading-[44px]
-    min-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px]
+    max-[639px]:text-x-small-heading
+    min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:text-medium-heading
+    min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:text-x-large-heading
+    min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
   `
     : `
-    max-[639px]:font-inter max-[639px]:font-bold max-[639px]:text-[20px] max-[639px]:leading-[28px]
-    min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:font-bold min-[640px]:max-[1023px]:text-[28px] min-[640px]:max-[1023px]:leading-[36px]
-    min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:font-bold min-[1024px]:max-[1439px]:text-[24px] min-[1024px]:max-[1439px]:leading-[32px]
-    min-[1440px]:font-bricolage-grotesque min-[1440px]:font-extrabold min-[1440px]:text-[36px] min-[1440px]:leading-[44px]
+    max-[639px]:text-x-small-heading
+    min-[640px]:max-[1023px]:font-bricolage-grotesque min-[640px]:max-[1023px]:text-medium-heading
+    min-[1024px]:max-[1439px]:font-bricolage-grotesque min-[1024px]:max-[1439px]:text-small-heading
+    min-[1440px]:font-bricolage-grotesque min-[1440px]:text-x-large-heading
   `;
 
   const descriptionClass = isLarge
-    ? "font-inter font-medium text-[18px] leading-[24px]"
+    ? "text-large-label"
     : isMedium
       ? templateGridFigmaShell
-        ? "font-inter font-medium text-[14px] leading-[16px] min-[1024px]:max-[1439px]:text-[18px] min-[1024px]:max-[1439px]:leading-[24px]"
-        : "font-inter font-medium text-[14px] leading-[16px]"
+        ? "text-small-label min-[1024px]:max-[1439px]:text-large-label"
+        : "text-small-label"
       : isSmall
-        ? "font-inter font-medium text-[14px] leading-[16px]" // S: 14px, medium, Inter
-        : "font-inter font-medium text-[12px] leading-[14px]"; // XS: 12px, medium, Inter
+        ? "text-small-label" // S: 14px, medium, Inter
+        : "text-x-small-label"; // XS: 12px, medium, Inter
 
   const headerIconCellClass = templateGridFigmaShell
     ? `
@@ -355,7 +355,7 @@ export function RuleView({
               data-figma-node="21867:47400"
             >
               {bottomStatusLabel ? (
-                <span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 font-inter text-[10px] font-medium uppercase leading-3 text-[var(--color-surface-invert-brand-teal)]">
+                <span className="shrink-0 rounded-[2px] bg-[var(--color-surface-default-tertiary)] px-1 py-0.5 text-xx-small-label uppercase text-[var(--color-surface-invert-brand-teal)]">
                   {bottomStatusLabel}
                 </span>
               ) : null}

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

@@ -6,7 +6,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 font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      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)]"
       aria-hidden
     >
       ?
@@ -59,11 +59,11 @@ export function SelectionView({
         onKeyDown={onKeyDown}
       >
         <SelectionTag recommended={recommended} selected={selected} />
-        <span className="w-full font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+        <span className="w-full text-medium-label text-[var(--color-content-invert-secondary)]">
           {label}
         </span>
         {supportText ? (
-          <p className="w-full font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+          <p className="w-full text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
             {supportText}
           </p>
         ) : null}
@@ -85,13 +85,13 @@ export function SelectionView({
     >
       <div className="flex min-w-0 flex-1 flex-col gap-1">
         <div className="flex items-center gap-1">
-          <span className="font-inter text-base font-medium leading-5 text-[var(--color-content-invert-secondary)]">
+          <span className="text-medium-label text-[var(--color-content-invert-secondary)]">
             {label}
           </span>
           {showInfoIcon ? <InfoIcon /> : null}
         </div>
         {supportText ? (
-          <p className="font-inter text-xs font-normal leading-4 text-[var(--color-content-invert-tertiary)]">
+          <p className="text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
             {supportText}
           </p>
         ) : null}

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

@@ -24,16 +24,16 @@ function StatView({
             variant={shapeVariant}
             className="absolute -left-[11px] -top-[21px] size-[80px] rotate-[15deg] opacity-90"
           />
-          <p className="relative font-bricolage-grotesque text-[40px] font-bold leading-[52px] text-[var(--color-content-invert-primary,black)]">
+          <p className="relative font-bricolage-grotesque text-xx-large-heading text-[var(--color-content-invert-primary,black)]">
             {value}
           </p>
         </div>
-        <p className="font-inter text-[14px] font-normal leading-5 text-[var(--color-content-invert-primary,black)]">
+        <p className="text-small-paragraph text-[var(--color-content-invert-primary,black)]">
           {label}
         </p>
       </div>
       {asOf ? (
-        <p className="w-full font-inter text-[10px] font-normal leading-[14px] text-[var(--color-content-invert-tertiary,#2d2d2d)]">
+        <p className="w-full text-xx-small-paragraph text-[var(--color-content-invert-tertiary,#2d2d2d)]">
           {asOf}
         </p>
       ) : null}

app/components/cards/TemplateReviewCard/TemplateChipDetailModal.tsx

@@ -56,7 +56,7 @@ export function TemplateChipDetailModal({
     >
       <div className="flex flex-col gap-[var(--measures-spacing-600,24px)] pb-2">
         {resolved?.body ?? (
-          <p className="font-inter text-[14px] leading-[20px] text-[color:var(--color-content-default-secondary,#a3a3a3)]">
+          <p className="text-small-paragraph text-[color:var(--color-content-default-secondary,#a3a3a3)]">
             {t("fallback.bodyLabel")}
           </p>
         )}
@@ -318,7 +318,7 @@ function ReadOnlyValueField({
   return (
     <div className="flex flex-col gap-2">
       <InputLabel label={label} helpIcon size="s" palette="default" />
-      <span className="font-inter text-[16px] font-medium leading-[20px] text-[color:var(--color-content-default-primary)]">
+      <span className="text-medium-label text-[color:var(--color-content-default-primary)]">
         {value}
       </span>
     </div>