From 33c2ca637025a58a8a5bbdf510185a1e9615cbd4 Mon Sep 17 00:00:00 2001
From: Mike Decker <pookmish@gmail.com>
Date: Mon, 15 Jul 2024 14:15:44 -0700
Subject: [PATCH] Replace text-m# with type-#

---
 .eslintrc.json                                     |  6 +++++-
 src/components/algolia/algolia-search.tsx          |  2 +-
 src/components/algolia/hits/default.tsx            |  2 +-
 src/components/config-pages/local-footer.tsx       |  8 +++-----
 src/components/config-pages/super-footer.tsx       |  2 +-
 src/components/elements/headers.tsx                |  8 ++++----
 src/components/elements/lockup/lockup-a.tsx        |  2 +-
 src/components/elements/lockup/lockup-b.tsx        |  4 ++--
 src/components/elements/lockup/lockup-d.tsx        |  4 ++--
 src/components/elements/lockup/lockup-e.tsx        |  6 +++---
 src/components/elements/lockup/lockup-h.tsx        |  4 ++--
 src/components/elements/lockup/lockup-i.tsx        |  6 +++---
 src/components/elements/lockup/lockup-m.tsx        |  2 +-
 src/components/elements/lockup/lockup-o.tsx        |  2 +-
 src/components/elements/lockup/lockup-p.tsx        |  4 ++--
 src/components/elements/lockup/lockup-s.tsx        |  6 +++---
 src/components/elements/lockup/lockup-t.tsx        |  8 ++++----
 src/components/elements/lockup/lockup.tsx          |  2 +-
 src/components/elements/paged-list.tsx             |  2 +-
 src/components/elements/select-list.tsx            |  2 +-
 src/components/elements/wysiwyg.tsx                |  8 ++++----
 .../cards/stanford-course/stanford-course-card.tsx |  2 +-
 .../stanford-event-series-card.tsx                 |  2 +-
 .../cards/stanford-event/stanford-event-card.tsx   |  8 ++++----
 .../cards/stanford-news/stanford-news-card.tsx     |  2 +-
 .../cards/stanford-page/stanford-page-card.tsx     |  2 +-
 .../cards/stanford-person/stanford-person-card.tsx |  2 +-
 .../cards/stanford-policy/stanford-policy-card.tsx |  2 +-
 .../stanford-publication-card.tsx                  |  2 +-
 .../stanford-course/stanford-course-list-item.tsx  |  2 +-
 .../stanford-event-series-list-item.tsx            |  2 +-
 .../stanford-event/stanford-event-list-item.tsx    |  8 ++++----
 .../stanford-news/stanford-news-list-item.tsx      |  2 +-
 .../stanford-page/stanford-page-list-item.tsx      |  2 +-
 .../stanford-person/stanford-person-list-item.tsx  |  2 +-
 .../stanford-policy/stanford-policy-list-item.tsx  |  2 +-
 .../stanford-publication-list-item.tsx             |  2 +-
 .../stanford-event-series-page.tsx                 |  2 +-
 .../pages/stanford-event/stanford-event-page.tsx   | 10 +++++-----
 .../pages/stanford-person/stanford-person-page.tsx | 14 +++++++-------
 .../pages/stanford-policy/stanford-policy-page.tsx |  4 ++--
 .../stanford-banner/banner-paragraph.tsx           |  4 ++--
 .../paragraphs/stanford-card/card-paragraph.tsx    |  2 +-
 .../media-caption-paragraph.tsx                    |  2 +-
 .../page-title-banner-paragraph.tsx                |  2 +-
 45 files changed, 88 insertions(+), 86 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 9a846f8..2b1d85e 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -18,7 +18,11 @@
       "error",
       { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
     ],
-    "no-console": ["error", { "allow": ["warn", "error"] }]
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-restricted-syntax": [
+      "error",
+      "Literal[value=/text-m[\\d]/i]"
+    ]
   },
   "plugins": ["prettier", "unused-imports"],
   "ignorePatterns": ["**/__generated__/**/*"]
diff --git a/src/components/algolia/algolia-search.tsx b/src/components/algolia/algolia-search.tsx
index 30c55c2..4939332 100644
--- a/src/components/algolia/algolia-search.tsx
+++ b/src/components/algolia/algolia-search.tsx
@@ -93,7 +93,7 @@ const SearchBox = (props?: UseSearchBoxProps) => {
         </label>
         <input
           id="search-input"
-          className="h-20 max-w-xl rounded-full text-m1 hocus:shadow-2xl"
+          className="type-2 h-20 max-w-xl rounded-full hocus:shadow-2xl"
           ref={inputRef}
           autoComplete="on"
           autoCorrect="on"
diff --git a/src/components/algolia/hits/default.tsx b/src/components/algolia/hits/default.tsx
index af38079..49e5495 100644
--- a/src/components/algolia/hits/default.tsx
+++ b/src/components/algolia/hits/default.tsx
@@ -17,7 +17,7 @@ const DefaultHit = ({hit}: {hit: HitType<DefaultAlgoliaHit>}) => {
   return (
     <article className="flex justify-between gap-20 py-12 @container">
       <div>
-        <H2 className="text-m2">
+        <H2 className="type-3">
           <Link href={hit.url.replace(hitUrl.origin, "")}>{hit.title}</Link>
         </H2>
         <p>{hit.summary}</p>
diff --git a/src/components/config-pages/local-footer.tsx b/src/components/config-pages/local-footer.tsx
index cc82673..4075824 100644
--- a/src/components/config-pages/local-footer.tsx
+++ b/src/components/config-pages/local-footer.tsx
@@ -88,7 +88,7 @@ const LocalFooter = async ({...props}: Props) => {
           </div>
 
           <div>
-            {localFooterConfig.suLocalFootPrimeH && <H2 className="text-m1">{localFooterConfig.suLocalFootPrimeH}</H2>}
+            {localFooterConfig.suLocalFootPrimeH && <H2 className="type-2">{localFooterConfig.suLocalFootPrimeH}</H2>}
             {localFooterConfig.suLocalFootPrimary && (
               <ul className="list-unstyled">
                 {localFooterConfig.suLocalFootPrimary.map((link, index) => {
@@ -105,9 +105,7 @@ const LocalFooter = async ({...props}: Props) => {
           </div>
 
           <div>
-            {localFooterConfig.suLocalFootSecondH && (
-              <H2 className="text-m1">{localFooterConfig.suLocalFootSecondH}</H2>
-            )}
+            {localFooterConfig.suLocalFootSecondH && <H2 className="type-2">{localFooterConfig.suLocalFootSecondH}</H2>}
 
             {localFooterConfig.suLocalFootSecond && (
               <ul className="list-unstyled">
@@ -211,7 +209,7 @@ const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: Foo
         <LockupLogo {...lockupProps} />
 
         <div className="w-[1px] shrink-0 bg-black" />
-        <div className="text-m2 font-normal leading-none text-black">{siteName || "University"}</div>
+        <div className="type-3 font-normal leading-none text-black">{siteName || "University"}</div>
       </Link>
     </div>
   )
diff --git a/src/components/config-pages/super-footer.tsx b/src/components/config-pages/super-footer.tsx
index c5bc1a4..3c65ec1 100644
--- a/src/components/config-pages/super-footer.tsx
+++ b/src/components/config-pages/super-footer.tsx
@@ -17,7 +17,7 @@ const SuperFooter = async ({...props}: Props) => {
     <div {...props} className={twMerge("border-b border-black-20 bg-foggy-light py-20", props.className)}>
       <div className="centered flex justify-between">
         <div className="flex-1">
-          {superFooterConfig.suSuperFootTitle && <H2 className="text-m2">{superFooterConfig.suSuperFootTitle}</H2>}
+          {superFooterConfig.suSuperFootTitle && <H2 className="type-3">{superFooterConfig.suSuperFootTitle}</H2>}
 
           <Wysiwyg html={superFooterConfig.suSuperFootText?.processed} />
         </div>
diff --git a/src/components/elements/headers.tsx b/src/components/elements/headers.tsx
index 832d893..47d5fbb 100644
--- a/src/components/elements/headers.tsx
+++ b/src/components/elements/headers.tsx
@@ -7,7 +7,7 @@ const headingLinkClasses = "[&_a]:text-digital-red [&_a]:hocus:text-black [&_a]:
 
 export const H1 = ({children, className, ...props}: Props) => {
   return (
-    <h1 className={twMerge(className, "text-m4")} {...props}>
+    <h1 className={twMerge(className, "type-5")} {...props}>
       {children}
     </h1>
   )
@@ -15,7 +15,7 @@ export const H1 = ({children, className, ...props}: Props) => {
 
 export const H2 = ({children, className, ...props}: Props) => {
   return (
-    <h2 className={twMerge(headingLinkClasses, "text-m3", className)} {...props}>
+    <h2 className={twMerge(headingLinkClasses, "type-4", className)} {...props}>
       {children}
     </h2>
   )
@@ -23,7 +23,7 @@ export const H2 = ({children, className, ...props}: Props) => {
 
 export const H3 = ({children, className, ...props}: Props) => {
   return (
-    <h3 className={twMerge(headingLinkClasses, "text-m2", className)} {...props}>
+    <h3 className={twMerge(headingLinkClasses, "type-3", className)} {...props}>
       {children}
     </h3>
   )
@@ -31,7 +31,7 @@ export const H3 = ({children, className, ...props}: Props) => {
 
 export const H4 = ({children, className, ...props}: Props) => {
   return (
-    <h4 className={twMerge(headingLinkClasses, "text-m1", className)} {...props}>
+    <h4 className={twMerge(headingLinkClasses, "type-2", className)} {...props}>
       {children}
     </h4>
   )
diff --git a/src/components/elements/lockup/lockup-a.tsx b/src/components/elements/lockup/lockup-a.tsx
index d4deb60..6e8796b 100644
--- a/src/components/elements/lockup/lockup-a.tsx
+++ b/src/components/elements/lockup/lockup-a.tsx
@@ -12,7 +12,7 @@ const LockupA = ({line1, line5, siteName, logoUrl}: FooterLockupProps) => {
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m2 font-normal leading-none text-black">{line1 || siteName}</div>
+          <div className="type-3 font-normal leading-none text-black">{line1 || siteName}</div>
         </div>
 
         {line5 && <div className="border-t border-black font-semibold uppercase lg:border-t-0">{line5}</div>}
diff --git a/src/components/elements/lockup/lockup-b.tsx b/src/components/elements/lockup/lockup-b.tsx
index 45c7de2..c3763e7 100644
--- a/src/components/elements/lockup/lockup-b.tsx
+++ b/src/components/elements/lockup/lockup-b.tsx
@@ -13,8 +13,8 @@ const LockupB = ({line1, line2, siteName, logoUrl}: FooterLockupProps) => {
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m0">{line1 || siteName}</div>
-            <div className="text-m1">{line2}</div>
+            <div className="type-0">{line1 || siteName}</div>
+            <div className="type-2">{line2}</div>
           </div>
         </div>
       </Link>
diff --git a/src/components/elements/lockup/lockup-d.tsx b/src/components/elements/lockup/lockup-d.tsx
index 243acde..2ffcefe 100644
--- a/src/components/elements/lockup/lockup-d.tsx
+++ b/src/components/elements/lockup/lockup-d.tsx
@@ -13,8 +13,8 @@ const LockupD = ({line1, line3, siteName, logoUrl}: FooterLockupProps) => {
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>
diff --git a/src/components/elements/lockup/lockup-e.tsx b/src/components/elements/lockup/lockup-e.tsx
index 1a12099..d44a9c6 100644
--- a/src/components/elements/lockup/lockup-e.tsx
+++ b/src/components/elements/lockup/lockup-e.tsx
@@ -13,9 +13,9 @@ const LockupE = ({line1, line2, line3, siteName, logoUrl}: FooterLockupProps) =>
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m1">{line2 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-2">{line2 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>
diff --git a/src/components/elements/lockup/lockup-h.tsx b/src/components/elements/lockup/lockup-h.tsx
index 4e4b0b1..3548494 100644
--- a/src/components/elements/lockup/lockup-h.tsx
+++ b/src/components/elements/lockup/lockup-h.tsx
@@ -9,11 +9,11 @@ const LockupH = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m1 font-normal">
+          <div className="type-2 font-normal">
             <div>{line1 || siteName}</div>
             <div>{line3}</div>
           </div>
diff --git a/src/components/elements/lockup/lockup-i.tsx b/src/components/elements/lockup/lockup-i.tsx
index 695e173..3bbf534 100644
--- a/src/components/elements/lockup/lockup-i.tsx
+++ b/src/components/elements/lockup/lockup-i.tsx
@@ -9,13 +9,13 @@ const LockupI = ({line1, line3, line4, siteName, logoUrl}: FooterLockupProps) =>
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
           <div className="mt-auto font-normal">
-            <div className="text-m1">{line1 || siteName}</div>
-            <div className="text-m0 italic">{line3}</div>
+            <div className="type-2">{line1 || siteName}</div>
+            <div className="type-0 italic">{line3}</div>
           </div>
         </div>
       </Link>
diff --git a/src/components/elements/lockup/lockup-m.tsx b/src/components/elements/lockup/lockup-m.tsx
index 905b6c1..1425387 100644
--- a/src/components/elements/lockup/lockup-m.tsx
+++ b/src/components/elements/lockup/lockup-m.tsx
@@ -12,7 +12,7 @@ const LockupM = ({line1, line2, siteName, logoUrl}: FooterLockupProps) => {
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="text-m1 font-normal">
+          <div className="type-2 font-normal">
             <div>{line1 || siteName}</div>
             <div>{line2}</div>
           </div>
diff --git a/src/components/elements/lockup/lockup-o.tsx b/src/components/elements/lockup/lockup-o.tsx
index 5225612..7297fe3 100644
--- a/src/components/elements/lockup/lockup-o.tsx
+++ b/src/components/elements/lockup/lockup-o.tsx
@@ -7,7 +7,7 @@ const LockupO = ({line4, siteName, logoUrl}: FooterLockupProps) => {
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
       </Link>
     </div>
   )
diff --git a/src/components/elements/lockup/lockup-p.tsx b/src/components/elements/lockup/lockup-p.tsx
index a831c30..823d9b2 100644
--- a/src/components/elements/lockup/lockup-p.tsx
+++ b/src/components/elements/lockup/lockup-p.tsx
@@ -9,11 +9,11 @@ const LockupP = ({line1, line4, siteName, logoUrl}: FooterLockupProps) => {
         <div className="flex flex-col gap-4 lg:flex-row">
           <div>
             <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-            <div className="mt-1 text-m1 font-semibold uppercase">{line4}</div>
+            <div className="type-2 mt-1 font-semibold uppercase">{line4}</div>
           </div>
 
           <div className="w-[1px] shrink-0 bg-black" />
-          <div className="mt-auto text-m1 font-normal">{line1 || siteName}</div>
+          <div className="type-2 mt-auto font-normal">{line1 || siteName}</div>
         </div>
       </Link>
     </div>
diff --git a/src/components/elements/lockup/lockup-s.tsx b/src/components/elements/lockup/lockup-s.tsx
index 938aa97..71dfb90 100644
--- a/src/components/elements/lockup/lockup-s.tsx
+++ b/src/components/elements/lockup/lockup-s.tsx
@@ -7,10 +7,10 @@ const LockupS = ({line1, line2, line4, siteName, logoUrl}: FooterLockupProps) =>
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 border-b border-black text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 border-b border-black font-semibold uppercase">{line4}</div>
         <div className="font-normal">
-          <div className="text-m1">{line1 || siteName}</div>
-          <div className="text-m1">{line2}</div>
+          <div className="type-2">{line1 || siteName}</div>
+          <div className="type-2">{line2}</div>
         </div>
       </Link>
     </div>
diff --git a/src/components/elements/lockup/lockup-t.tsx b/src/components/elements/lockup/lockup-t.tsx
index a77e892..0b27355 100644
--- a/src/components/elements/lockup/lockup-t.tsx
+++ b/src/components/elements/lockup/lockup-t.tsx
@@ -7,11 +7,11 @@ const LockupT = ({line1, line2, line3, line4, siteName, logoUrl}: FooterLockupPr
     <div className="py-10">
       <Link href="/" className="text-black no-underline">
         <LockupLogo logoUrl={logoUrl} siteName={siteName} />
-        <div className="mt-1 border-b border-black text-m1 font-semibold uppercase">{line4}</div>
+        <div className="type-2 mt-1 border-b border-black font-semibold uppercase">{line4}</div>
         <div className="font-normal">
-          <div className="text-m1">{line1 || siteName}</div>
-          <div className="text-m1">{line2}</div>
-          <div className="text-m0 italic">{line3}</div>
+          <div className="type-2">{line1 || siteName}</div>
+          <div className="type-2">{line2}</div>
+          <div className="type-0 italic">{line3}</div>
         </div>
       </Link>
     </div>
diff --git a/src/components/elements/lockup/lockup.tsx b/src/components/elements/lockup/lockup.tsx
index 5d04c9b..a3db952 100644
--- a/src/components/elements/lockup/lockup.tsx
+++ b/src/components/elements/lockup/lockup.tsx
@@ -48,7 +48,7 @@ export const Lockup = ({
             <div className="mr-2 border-black pr-2 lg:inline-block lg:border-r">
               <LockupLogo {...lockupProps} />
             </div>
-            <div className="text-m2 font-normal text-black lg:inline-block">{suSiteName || "University"}</div>
+            <div className="type-3 font-normal text-black lg:inline-block">{suSiteName || "University"}</div>
           </div>
         </Link>
       </div>
diff --git a/src/components/elements/paged-list.tsx b/src/components/elements/paged-list.tsx
index 97ebacf..37a715b 100644
--- a/src/components/elements/paged-list.tsx
+++ b/src/components/elements/paged-list.tsx
@@ -197,7 +197,7 @@ const PaginationButton = ({
   return (
     <li className="m-0 flex items-center">
       <button
-        className="group text-m2 font-medium hocus:underline"
+        className="group type-3 font-medium hocus:underline"
         onClick={handleClick}
         aria-current={isCurrent ? "page" : undefined}
         disabled={disabled}
diff --git a/src/components/elements/select-list.tsx b/src/components/elements/select-list.tsx
index fa4f0c5..17317d2 100644
--- a/src/components/elements/select-list.tsx
+++ b/src/components/elements/select-list.tsx
@@ -153,7 +153,7 @@ const SelectList = ({
       >
         <div className="flex flex-wrap justify-between">
           {label && (
-            <div className={"relative " + (optionChosen ? "top-[-15px] w-full text-m0" : "text-m1")}>
+            <div className={"relative " + (optionChosen ? "type-0 top-[-15px] w-full" : "type-2")}>
               <div id={labelId} className="w-fit bg-white px-5">
                 {label}
               </div>
diff --git a/src/components/elements/wysiwyg.tsx b/src/components/elements/wysiwyg.tsx
index 911063f..397b164 100644
--- a/src/components/elements/wysiwyg.tsx
+++ b/src/components/elements/wysiwyg.tsx
@@ -128,14 +128,14 @@ const fixClasses = (classes?: string | boolean): string => {
     .replaceAll(" align-left ", " float-left mr-10 mb-10 ")
     .replaceAll(" align-right ", " float-right ml-10 mb-10 ")
     .replaceAll(" visually-hidden ", " sr-only ")
-    .replaceAll(" font-splash ", " splash-text text-m4 ")
-    .replaceAll(" callout-text ", " font-bold text-m2 ")
+    .replaceAll(" font-splash ", " splash-text type-5 ")
+    .replaceAll(" callout-text ", " font-bold type-3 ")
     .replaceAll(" related-text ", " shadow-lg border border-black-20 p-16 ")
     .replaceAll(
       " drop-cap ",
-      " text-m1 first-letter:font-bold first-letter:text-m6 first-letter:float-left first-letter:my-2 first-letter:mr-4 "
+      " type-2 first-letter:font-bold first-letter:type-7 first-letter:float-left first-letter:my-2 first-letter:mr-4 "
     )
-    .replaceAll(" intro-text ", " text-m2 ")
+    .replaceAll(" intro-text ", " type-3 ")
     .replace(/ tablesaw.*? /g, " ")
     .replace(/ +/g, " ")
     .trim()
diff --git a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
index 46c7577..8deffa8 100644
--- a/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
+++ b/src/components/nodes/cards/stanford-course/stanford-course-card.tsx
@@ -13,7 +13,7 @@ const StanfordCourseCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="order-last text-m2" id={node.id}>
+      <Heading className="type-3 order-last" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
       <div className="order-first flex gap-5">
diff --git a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
index f6fcb7d..e7bcf00 100644
--- a/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
+++ b/src/components/nodes/cards/stanford-event-series/stanford-event-series-card.tsx
@@ -13,7 +13,7 @@ const StanfordEventSeriesCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+      <Heading className="type-3 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
       {node.suEventSeriesDek && <p>{node.suEventSeriesDek}</p>}
diff --git a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
index 1bdfc05..93197aa 100644
--- a/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
+++ b/src/components/nodes/cards/stanford-event/stanford-event-card.tsx
@@ -26,19 +26,19 @@ const StanfordEventCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
       <div aria-hidden className="flex w-fit flex-col items-start">
-        <div className="mb-4 w-full text-center text-m0 font-semibold">{startMonth.toUpperCase()}</div>
-        <div className="w-full text-center text-m4 font-bold">{startDay}</div>
+        <div className="type-0 mb-4 w-full text-center font-semibold">{startMonth.toUpperCase()}</div>
+        <div className="type-5 w-full text-center font-bold">{startDay}</div>
       </div>
 
       <div className="flex flex-col">
-        <Heading className="text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+        <Heading className="type-3 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
           <Link href={node.suEventSource?.url || node.path}>{node.title}</Link>
         </Heading>
 
         {node.suEventType && <div className="su-digital-red order-first">{node.suEventType[0].name}</div>}
       </div>
 
-      {node.suEventSubheadline && <div className="mb-5 text-m1 font-bold">{node.suEventSubheadline}</div>}
+      {node.suEventSubheadline && <div className="type-2 mb-5 font-bold">{node.suEventSubheadline}</div>}
 
       <time className="flex items-center gap-5" dateTime={start.toISOString()}>
         <CalendarDaysIcon width={30} className="shrink-0" />
diff --git a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
index 6d2cec5..7ede10f 100644
--- a/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
+++ b/src/components/nodes/cards/stanford-news/stanford-news-card.tsx
@@ -27,7 +27,7 @@ const StanfordNewsCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} isArticle>
       <div className="flex flex-col">
-        <Heading className="text-m2 [&_a]:text-black" id={node.id}>
+        <Heading className="type-3 [&_a]:text-black" id={node.id}>
           <Link href={node.suNewsSource?.url || node.path}>{node.title}</Link>
         </Heading>
 
diff --git a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
index 0a6649d..096a6d3 100644
--- a/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
+++ b/src/components/nodes/cards/stanford-page/stanford-page-card.tsx
@@ -20,7 +20,7 @@ const StanfordPageCard = ({node, headingLevel, ...props}: Props) => {
   const Heading = headingLevel === "h3" ? H3 : H2
   return (
     <ImageCard {...props} aria-labelledby={node.id} imageUrl={image?.url} imageAlt={image?.alt} isArticle>
-      <Heading className="text-m2 [&_a]:text-black" id={node.id}>
+      <Heading className="type-3 [&_a]:text-black" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 
diff --git a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
index 79d3f47..ce35084 100644
--- a/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
+++ b/src/components/nodes/cards/stanford-person/stanford-person-card.tsx
@@ -32,7 +32,7 @@ const StanfordPersonCard = ({node, headingLevel, ...props}: Props) => {
         </div>
       )}
 
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 
diff --git a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
index 169418f..80e4ca5 100644
--- a/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
+++ b/src/components/nodes/cards/stanford-policy/stanford-policy-card.tsx
@@ -22,7 +22,7 @@ const StanfordPolicyCard = ({node, headingLevel, ...props}: Props) => {
   const teaserSummary = node.body?.summary || trimmedBodyText + "..."
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 
diff --git a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
index 888c99d..4d111e3 100644
--- a/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
+++ b/src/components/nodes/cards/stanford-publication/stanford-publication-card.tsx
@@ -15,7 +15,7 @@ const StanfordPublicationCard = ({node, headingLevel, ...props}: Props) => {
   return (
     <ImageCard {...props} aria-labelledby={node.id} isArticle>
       <div className="flex flex-col">
-        <Heading className="order-last text-m2 [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
+        <Heading className="type-3 order-last [&_a]:text-black [&_a]:hocus:text-digital-red" id={node.id}>
           <Link href={citationUrl || node.path}>{node.title}</Link>
         </Heading>
         <div className="order-first font-bold">Publication</div>
diff --git a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
index c656065..d64a7d2 100644
--- a/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-course/stanford-course-list-item.tsx
@@ -19,7 +19,7 @@ const StanfordCourseListItem = ({node, headingLevel, ...props}: Props) => {
   return (
     <article {...props} aria-labelledby={node.id}>
       <div className="flex flex-col">
-        <Heading className="order-last text-m2" id={node.id}>
+        <Heading className="type-3 order-last" id={node.id}>
           <Link href={node.path}>{node.title}</Link>
         </Heading>
 
diff --git a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
index 5075631..3c52f3c 100644
--- a/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-event-series/stanford-event-series-list-item.tsx
@@ -17,7 +17,7 @@ const StanfordEventSeriesListItem = ({node, headingLevel, ...props}: Props) => {
       aria-labelledby={node.id}
       className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
     >
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
     </article>
diff --git a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
index d2df296..823bcf8 100644
--- a/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-event/stanford-event-list-item.tsx
@@ -31,12 +31,12 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
       className={twMerge("mx-auto flex w-full gap-10 py-10", props.className)}
     >
       <div aria-hidden className="flex w-fit flex-col items-start">
-        <div className="mb-4 w-full text-center text-m0 font-semibold">{startMonth.toUpperCase()}</div>
-        <div className="w-full text-center text-m4 font-bold">{startDay}</div>
+        <div className="type-0 mb-4 w-full text-center font-semibold">{startMonth.toUpperCase()}</div>
+        <div className="type-5 w-full text-center font-bold">{startDay}</div>
       </div>
       <div>
         <div className="flex flex-col">
-          <Heading className="text-m2" id={node.id}>
+          <Heading className="type-3" id={node.id}>
             <Link
               href={node.suEventSource?.url || node.path}
               className="text-digital-red no-underline hocus:text-black hocus:underline"
@@ -48,7 +48,7 @@ const StanfordEventListItem = ({node, headingLevel, ...props}: Props) => {
           {node.suEventType && <div className="su-digital-red order-first">{node.suEventType[0].name}</div>}
         </div>
 
-        {node.suEventSubheadline && <div className="mb-5 text-m1 font-bold">{node.suEventSubheadline}</div>}
+        {node.suEventSubheadline && <div className="type-2 mb-5 font-bold">{node.suEventSubheadline}</div>}
         {node.suEventDek && <p>{node.suEventDek}</p>}
 
         <time className="mb-5 flex items-center gap-5" dateTime={start.toISOString()}>
diff --git a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
index 6e09f83..72b3a62 100644
--- a/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-news/stanford-news-list-item.tsx
@@ -30,7 +30,7 @@ const StanfordNewsListItem = ({node, headingLevel, ...props}: Props) => {
       <div className="flex w-full flex-col justify-between py-10 @3xl:flex-row">
         <div className="@3xl::order-1 order-2">
           <div className="flex flex-col gap-10">
-            <Heading className="order-last text-m2 font-bold" id={node.id}>
+            <Heading className="type-3 order-last font-bold" id={node.id}>
               <Link
                 href={node.suNewsSource?.url || node.path}
                 className="order-2 text-digital-red no-underline hocus:text-black hocus:underline"
diff --git a/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx b/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
index d07db49..2b70c8e 100644
--- a/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-page/stanford-page-list-item.tsx
@@ -23,7 +23,7 @@ const StanfordPageListItem = ({node, headingLevel, ...props}: Props) => {
     <article {...props} aria-labelledby={node.id} className={twMerge("py-10 @container", props.className)}>
       <div className="flex flex-col justify-between gap-20 @4xl:flex-row" {...props}>
         <div className="order-2 @4xl:order-1">
-          <Heading className="text-m2" id={node.id}>
+          <Heading className="type-3" id={node.id}>
             <Link href={node.path}>{node.title}</Link>
           </Heading>
 
diff --git a/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx b/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
index 8b1f531..ee898cc 100644
--- a/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-person/stanford-person-list-item.tsx
@@ -32,7 +32,7 @@ const StanfordPersonListItem = ({node, headingLevel, ...props}: Props) => {
         </div>
       )}
 
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
 
diff --git a/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx b/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx
index 90e2a81..ad07c2c 100644
--- a/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-policy/stanford-policy-list-item.tsx
@@ -17,7 +17,7 @@ const StanfordPolicyListItem = ({node, headingLevel, ...props}: Props) => {
       aria-labelledby={node.id}
       className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
     >
-      <Heading className="text-m2" id={node.id}>
+      <Heading className="type-3" id={node.id}>
         <Link href={node.path}>{node.title}</Link>
       </Heading>
     </article>
diff --git a/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx b/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx
index 11cc350..d99cc3d 100644
--- a/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx
+++ b/src/components/nodes/list-item/stanford-publication/stanford-publication-list-item.tsx
@@ -19,7 +19,7 @@ const StanfordPublicationListItem = ({node, headingLevel, ...props}: Props) => {
       className={twMerge("mx-auto w-full max-w-[500px] border border-black-20 p-10 shadow-xl", props.className)}
     >
       <div className="flex flex-col">
-        <Heading className="order-first text-m2" id={node.id}>
+        <Heading className="type-3 order-first" id={node.id}>
           <Link href={citationUrl || node.path}>{node.title}</Link>
         </Heading>
         <div className="font-bold">Publication</div>
diff --git a/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx b/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx
index 2287298..9faf66b 100644
--- a/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx
+++ b/src/components/nodes/pages/stanford-event-series/stanford-event-series-page.tsx
@@ -13,7 +13,7 @@ const StanfordEventSeriesPage = ({node, ...props}: Props) => {
     <article className="centered" {...props}>
       <H1 className="mt-32">{node.title}</H1>
 
-      {node.suEventSeriesDek && <div className="mb-20 text-m3 font-bold">{node.suEventSeriesDek}</div>}
+      {node.suEventSeriesDek && <div className="type-4 mb-20 font-bold">{node.suEventSeriesDek}</div>}
       {node.suEventSeriesSubheadline && <div>{node.suEventSeriesSubheadline}</div>}
       {node.suEventSeriesEvent && (
         <div className="mb-20">
diff --git a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
index b416d17..91838c0 100644
--- a/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
+++ b/src/components/nodes/pages/stanford-event/stanford-event-page.tsx
@@ -33,7 +33,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
 
         {node.suEventType && <div className="order-1">{node.suEventType[0].name}</div>}
       </div>
-      {node.suEventSubheadline && <div className="text-m2 font-bold">{node.suEventSubheadline}</div>}
+      {node.suEventSubheadline && <div className="type-3 font-bold">{node.suEventSubheadline}</div>}
       {node.suEventDek && <div>{node.suEventDek}</div>}
 
       {node.suEventSponsor && (
@@ -45,7 +45,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
       )}
 
       <div className="mx-auto border border-black-40 px-10 py-20 lg:w-3/4 lg:px-48">
-        <H2 className="text-m2">Event Details:</H2>
+        <H2 className="type-3">Event Details:</H2>
         <div className="grid items-start gap-20 lg:grid-cols-2">
           <time className="flex items-center gap-5" dateTime={startTime.toISOString()}>
             <CalendarDaysIcon width={30} className="shrink-0" />
@@ -56,7 +56,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
             <div className="flex-col-2 flex items-start gap-lg">
               <PhoneIcon width={30} className="shrink-0" />
               <div>
-                <H3 className="text-m1">Contact</H3>
+                <H3 className="type-2">Contact</H3>
 
                 {node.suEventEmail && (
                   <Email email={node.suEventEmail} className="block">
@@ -76,7 +76,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
             <div className="flex-col-2 flex items-start gap-5">
               <MapPinIcon width={30} className="shrink-0" />
               <div>
-                <H3 className="text-m1">Location</H3>
+                <H3 className="type-2">Location</H3>
 
                 <div>
                   {node.suEventLocation && <Address {...node.suEventLocation} />}
@@ -91,7 +91,7 @@ const StanfordEventPage = ({node, ...props}: Props) => {
             <div className="flex-col-2 flex items-start gap-5">
               <UserGroupIcon width={30} className="shrink-0" />
               <div>
-                <H3 className="text-m1">This event is open to:</H3>
+                <H3 className="type-2">This event is open to:</H3>
                 {node.suEventAudience.map(audience => (
                   <div key={audience.id}>{audience.name}</div>
                 ))}
diff --git a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx b/src/components/nodes/pages/stanford-person/stanford-person-page.tsx
index 5b902d4..c1a8d76 100644
--- a/src/components/nodes/pages/stanford-person/stanford-person-page.tsx
+++ b/src/components/nodes/pages/stanford-person/stanford-person-page.tsx
@@ -38,7 +38,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
           <H1 className="order-2">{node.title}</H1>
 
           {node.suPersonShortTitle && <div className="order-1 mb-10">{node.suPersonShortTitle}</div>}
-          {node.suPersonFullTitle && <div className="order-3 text-m1">{node.suPersonFullTitle}</div>}
+          {node.suPersonFullTitle && <div className="type-2 order-3">{node.suPersonFullTitle}</div>}
         </div>
       </div>
 
@@ -50,7 +50,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
 
           {node.suPersonEducation && (
             <div className="mb-10">
-              <H2 className="text-m1">Education</H2>
+              <H2 className="type-2">Education</H2>
               {node.suPersonEducation.map((education, i) => (
                 <div key={`${node.id}-education-${i}`}>{education}</div>
               ))}
@@ -59,7 +59,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
 
           {node.suPersonResearch && (
             <div className="mb-10">
-              <H2 className="text-m1">Research</H2>
+              <H2 className="type-2">Research</H2>
               <div className="grid grid-cols-2 gap-10">
                 {node.suPersonResearch.map((research, i) => (
                   <Wysiwyg key={`${node.id}-research-${i}`} html={research.processed} />
@@ -70,7 +70,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
 
           {node.suPersonAffiliations && (
             <div className="mb-10">
-              <H2 className="text-m1">Stanford Affiliations</H2>
+              <H2 className="type-2">Stanford Affiliations</H2>
               <div className="grid grid-cols-2 gap-10">
                 {node.suPersonAffiliations.map((affiliation, i) => (
                   <div key={`${node.id}-affiliation-${i}`}>
@@ -90,7 +90,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
             <div className="mb-20 flex items-start gap-10">
               <PhoneIcon width={30} className="shrink-0" />
               <div>
-                <H2 className="text-m1">Contact</H2>
+                <H2 className="type-2">Contact</H2>
 
                 {node.suPersonTelephone && (
                   <div className="mb-10">
@@ -124,7 +124,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
             <div className="mb-20 flex items-start gap-10">
               <MapPinIcon width={30} className="shrink-0" />
               <div>
-                <H2 className="text-m1">Location</H2>
+                <H2 className="type-2">Location</H2>
 
                 <Wysiwyg html={node.suPersonLocationAddress?.processed} />
 
@@ -142,7 +142,7 @@ const StanfordPersonPage = ({node, ...props}: Props) => {
             <div className="mb-20 flex items-start gap-10">
               <LinkIcon width={30} className="shrink-0" />
               <div>
-                <H2 className="text-m1">Links</H2>
+                <H2 className="type-2">Links</H2>
                 {node.suPersonLinks.map((link, i) => {
                   if (!link.url) return
                   return (
diff --git a/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx b/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx
index c00596a..d6dc4a2 100644
--- a/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx
+++ b/src/components/nodes/pages/stanford-policy/stanford-policy-page.tsx
@@ -53,11 +53,11 @@ const StanfordPolicyPage = async ({node, ...props}: Props) => {
 
         {changeLog.length > 0 && (
           <div className="mb-10 border border-black-40 bg-black-10 p-20">
-            <H2 className="text-m1">Change log:</H2>
+            <H2 className="type-2">Change log:</H2>
 
             {changeLog.map(change => (
               <div key={change.id}>
-                <H3 className="flex gap-2 text-m0">
+                <H3 className="type-0 flex gap-2">
                   <div>
                     {new Date(change.suPolicyDate.time).toLocaleDateString("en-us", {
                       month: "long",
diff --git a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
index af829ab..1d96181 100644
--- a/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
+++ b/src/components/paragraphs/stanford-banner/banner-paragraph.tsx
@@ -21,7 +21,7 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
   const headerTagChoice = (behaviors.hero_pattern?.heading || "h2").split(".", 2)
   const headerTag = headerTagChoice[0]
 
-  let headerClasses = headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "text-m2 font-bold") || ""
+  let headerClasses = headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "type-3 font-bold") || ""
   if (behaviors.hero_pattern?.hide_heading) headerClasses += " sr-only"
 
   return (
@@ -61,7 +61,7 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
             <div className="order-first text-09em font-semibold">{paragraph.suBannerSupHeader}</div>
           )}
 
-          <Wysiwyg html={paragraph.suBannerBody?.processed} className="text-m0" />
+          <Wysiwyg html={paragraph.suBannerBody?.processed} className="type-0" />
 
           {paragraph.suBannerButton?.url && (
             <Button href={paragraph.suBannerButton.url}>{paragraph.suBannerButton.title}</Button>
diff --git a/src/components/paragraphs/stanford-card/card-paragraph.tsx b/src/components/paragraphs/stanford-card/card-paragraph.tsx
index f31e999..31ce96d 100644
--- a/src/components/paragraphs/stanford-card/card-paragraph.tsx
+++ b/src/components/paragraphs/stanford-card/card-paragraph.tsx
@@ -21,7 +21,7 @@ const CardParagraph = ({paragraph, ...props}: Props) => {
 
   const headerTagChoice = (behaviors.su_card_styles?.heading || "h2").split(".", 2)
   const headerTag = headerTagChoice[0]
-  let headerClasses = headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "text-m2 font-bold") || ""
+  let headerClasses = headerTagChoice[1]?.replace(".", " ").replace("su-font-splash", "type-3 font-bold") || ""
   if (behaviors.su_card_styles?.hide_heading) headerClasses += " sr-only"
 
   return (
diff --git a/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx b/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
index 79e81ab..233e2e3 100644
--- a/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
+++ b/src/components/paragraphs/stanford-media-caption/media-caption-paragraph.tsx
@@ -31,7 +31,7 @@ const MediaCaptionParagraph = ({paragraph, ...props}: Props) => {
       )}
       {videoUrl && <Oembed url={videoUrl} />}
 
-      <figcaption className="color text-right text-m0 text-cool-grey">
+      <figcaption className="color type-0 text-right text-cool-grey">
         {paragraph.suMediaCaptionLink?.url && (
           <Link href={paragraph.suMediaCaptionLink.url}>{paragraph.suMediaCaptionLink.title}</Link>
         )}
diff --git a/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx b/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx
index 753b42f..a71415c 100644
--- a/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx
+++ b/src/components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph.tsx
@@ -16,7 +16,7 @@ const PageTitleBannerParagraph = ({paragraph, pageTitle, ...props}: Props) => {
       imageAlt={paragraph.suTitleBannerImage?.mediaImage.alt}
       eagerLoadImage
     >
-      <H1 className="order-2 m-0 mb-[-10px] p-0 text-m2">{pageTitle}</H1>
+      <H1 className="type-3 order-2 m-0 mb-[-10px] p-0">{pageTitle}</H1>
     </HeroBanner>
   )
 }