diff --git a/components/card/metadata/card-asset.yml b/components/card/metadata/card-asset.yml
index b5522623b86..0119b0aa773 100644
--- a/components/card/metadata/card-asset.yml
+++ b/components/card/metadata/card-asset.yml
@@ -5,8 +5,8 @@ sections:
     description: |
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card-asset
     name: Standard
@@ -20,10 +20,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
diff --git a/components/card/metadata/card-gallery.yml b/components/card/metadata/card-gallery.yml
index 42856c90e49..bfba406a043 100644
--- a/components/card/metadata/card-gallery.yml
+++ b/components/card/metadata/card-gallery.yml
@@ -8,8 +8,8 @@ sections:
       Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card-gallery
     name: Standard
@@ -23,8 +23,8 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               <div class="spectrum-Card-description">10/15/18</div>
               <div class="spectrum-Card-actionButton">
                 <div style="display: inline-block;">
diff --git a/components/card/metadata/card.yml b/components/card/metadata/card.yml
index 5f40e55971b..ea1ab864875 100644
--- a/components/card/metadata/card.yml
+++ b/components/card/metadata/card.yml
@@ -6,8 +6,8 @@ sections:
       Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card
     name: Standard
@@ -18,7 +18,7 @@ examples:
           <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
               <div class="spectrum-Card-actionButton">
                 <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
                   <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -28,7 +28,7 @@ examples:
               </div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-Card-footer">
@@ -59,7 +59,7 @@ examples:
             <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
             <div class="spectrum-Card-body">
               <div class="spectrum-Card-header">
-                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
                 <div class="spectrum-Card-actionButton">
                   <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
                     <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -69,7 +69,7 @@ examples:
                 </div>
               </div>
               <div class="spectrum-Card-content">
-                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               </div>
             </div>
             <div class="spectrum-Card-footer">
@@ -104,7 +104,7 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
               <div class="spectrum-Card-actionButton">
                 <div style="display: inline-block;">
                   <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--quiet">
@@ -116,7 +116,7 @@ examples:
               </div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               <div class="spectrum-Card-description">10/15/18</div>
             </div>
           </div>
@@ -151,10 +151,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">FileName</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">FileName</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">pdf</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">pdf</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -191,7 +191,7 @@ examples:
               <div class="spectrum-Card-title">FolderName</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">folder</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">folder</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -218,10 +218,10 @@ examples:
           <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-Card-footer">
@@ -255,10 +255,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
         </div>
@@ -276,10 +276,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-actions">
@@ -319,10 +319,10 @@ examples:
             </div>
             <div class="spectrum-Card-body">
               <div class="spectrum-Card-header">
-                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
               </div>
               <div class="spectrum-Card-content">
-                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               </div>
             </div>
             <div class="spectrum-QuickActions spectrum-Card-actions">
diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml
index 9f9f8203541..c0846cb9ffe 100644
--- a/components/checkbox/metadata/checkbox.yml
+++ b/components/checkbox/metadata/checkbox.yml
@@ -11,7 +11,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <label class="spectrum-Checkbox">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -58,7 +58,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
           <label class="spectrum-Checkbox is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
@@ -104,7 +104,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <label class="spectrum-Checkbox is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
@@ -156,7 +156,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <label class="spectrum-Checkbox spectrum-Checkbox--quiet">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -203,7 +203,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
           <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
@@ -249,7 +249,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
index 41c5caccddb..ada65df965e 100644
--- a/components/divider/metadata/divider.yml
+++ b/components/divider/metadata/divider.yml
@@ -13,19 +13,19 @@ examples:
   - id: divider-large
     name: 'Large'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--M">Large</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
       <hr class="spectrum-Divider spectrum-Divider--large">
       <p class="spectrum-Body">Page or Section Titles.</p>
   - id: divider-medium
     name: 'Medium'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--S">Medium</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
       <hr class="spectrum-Divider spectrum-Divider--medium">
       <p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
   - id: divider-small
     name: 'Small'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--XS">Small</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
       <hr class="spectrum-Divider spectrum-Divider--small">
       <p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
   - id: divider-vertical-small
diff --git a/components/dropzone/metadata/dropzone.yml b/components/dropzone/metadata/dropzone.yml
index 8a153f360db..9e528c28912 100644
--- a/components/dropzone/metadata/dropzone.yml
+++ b/components/dropzone/metadata/dropzone.yml
@@ -7,8 +7,8 @@ examples:
       <div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
         <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
           <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-          <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
-          <p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
+          <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
         </div>
       </div>
   - id: dropzone
@@ -17,7 +17,7 @@ examples:
       <div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
         <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
           <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-          <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
-          <p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
+          <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
         </div>
       </div>
diff --git a/components/illustratedmessage/metadata/illustratedmessage.yml b/components/illustratedmessage/metadata/illustratedmessage.yml
index 0040bb17d7a..c15955a022d 100644
--- a/components/illustratedmessage/metadata/illustratedmessage.yml
+++ b/components/illustratedmessage/metadata/illustratedmessage.yml
@@ -7,8 +7,8 @@ examples:
     markup: |
       <div class="spectrum-IllustratedMessage">
         <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="200" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="illustrations"><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></g></g></svg>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
-        <p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
+        <p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
       </div>
   - id: illustratedmessage-default
     name: CTA
@@ -16,6 +16,6 @@ examples:
     markup: |
       <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
         <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
-        <p class="spectrum-Body spectrum-Body--S spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+        <p class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
       </div>
diff --git a/components/radio/metadata/radio.yml b/components/radio/metadata/radio.yml
index fd2dbe11592..635df2f4cfc 100644
--- a/components/radio/metadata/radio.yml
+++ b/components/radio/metadata/radio.yml
@@ -11,7 +11,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <form>
             <div class="spectrum-Radio">
@@ -30,7 +30,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
 
           <form>
             <div class="spectrum-Radio is-invalid">
@@ -49,7 +49,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <form>
             <div class="spectrum-Radio">
@@ -73,7 +73,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <form>
             <div class="spectrum-Radio spectrum-Radio--quiet">
@@ -92,7 +92,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
 
           <form>
             <div class="spectrum-Radio spectrum-Radio--quiet is-invalid">
@@ -111,7 +111,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <form>
             <div class="spectrum-Radio spectrum-Radio--quiet">
diff --git a/components/steplist/metadata/steplist.yml b/components/steplist/metadata/steplist.yml
index b7ad9d37cbc..30c45638424 100644
--- a/components/steplist/metadata/steplist.yml
+++ b/components/steplist/metadata/steplist.yml
@@ -150,7 +150,7 @@ examples:
     name: With tooltip (static)
     description: A static steplist with tooltips.
     markup: |
-      <h3 class="spectrum-Heading spectrum-Heading--XXS">Static variant</h3>
+      <h3 class="spectrum-Heading spectrum-Heading--sizeXXS">Static variant</h3>
 
       <div class="spectrum-Steplist" role="list">
         <div class="spectrum-Steplist-item u-tooltip-showOnHover is-complete" role="listitem" aria-posinset="1" aria-setsize="4">
diff --git a/components/typography/index.css b/components/typography/index.css
index de188e34c08..e2f088393ce 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -32,21 +32,21 @@ governing permissions and limitations under the License.
 /* Headings t-shirt sizes */
 
 /* Discrete rules for Heading: regular, heavy, light */
-@mixin typographyTShirtSizes .spectrum-Heading--XXXL {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeXXXL {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--XXL {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeXXL {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--XL {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeXL {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--L {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeL {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--M {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeM {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--S {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeS {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--XS {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeXS {
 }
-@mixin typographyTShirtSizes .spectrum-Heading--XXS {
+@mixin typographyTShirtSizes .spectrum-Heading--sizeXXS {
 }
 
 /* Standard SUIT rules for Heading: regular, serif, heavy, light */
@@ -98,19 +98,19 @@ governing permissions and limitations under the License.
 }
 
 /* Body t-shirt sizes */
-@mixin typographyTShirtSizes .spectrum-Body--XXXL {
+@mixin typographyTShirtSizes .spectrum-Body--sizeXXXL {
 }
-@mixin typographyTShirtSizes .spectrum-Body--XXL {
+@mixin typographyTShirtSizes .spectrum-Body--sizeXXL {
 }
-@mixin typographyTShirtSizes .spectrum-Body--XL {
+@mixin typographyTShirtSizes .spectrum-Body--sizeXL {
 }
-@mixin typographyTShirtSizes .spectrum-Body--L {
+@mixin typographyTShirtSizes .spectrum-Body--sizeL {
 }
-@mixin typographyTShirtSizes .spectrum-Body--M {
+@mixin typographyTShirtSizes .spectrum-Body--sizeM {
 }
-@mixin typographyTShirtSizes .spectrum-Body--S {
+@mixin typographyTShirtSizes .spectrum-Body--sizeS {
 }
-@mixin typographyTShirtSizes .spectrum-Body--XS {
+@mixin typographyTShirtSizes .spectrum-Body--sizeXS {
 }
 
 .spectrum-Body {
@@ -157,21 +157,21 @@ governing permissions and limitations under the License.
 }
 
 /* Discrete rules for Detail: regular, light */
-@mixin typographyTShirtSizes .spectrum-Detail--XL {
+@mixin typographyTShirtSizes .spectrum-Detail--sizeXL {
 }
-@mixin typographyTShirtSizes .spectrum-Detail--L {
+@mixin typographyTShirtSizes .spectrum-Detail--sizeL {
 }
-@mixin typographyTShirtSizes .spectrum-Detail--M {
+@mixin typographyTShirtSizes .spectrum-Detail--sizeM {
 }
-@mixin typographyTShirtSizes .spectrum-Detail--S {
+@mixin typographyTShirtSizes .spectrum-Detail--sizeS {
 }
 
 /* @TODO does not exists for strong or heavy for Details. Will be added in the future */
 /*
-@mixin typographyTShirtSizes .spectrum-Detail-XL--strong, detail-strong-XL { background-color: orange;}
-@mixin typographyTShirtSizes .spectrum-Detail-L--strong, detail-strong-L {}
-@mixin typographyTShirtSizes .spectrum-Detail-M--strong, detail-strong-M {}
-@mixin typographyTShirtSizes .spectrum-Detail-S--heavy, detail-heavy-S {} */
+@mixin typographyTShirtSizes .spectrum-Detail-sizeXL--strong, detail-strong-XL { background-color: orange;}
+@mixin typographyTShirtSizes .spectrum-Detail-sizeL--strong, detail-strong-L {}
+@mixin typographyTShirtSizes .spectrum-Detail-sizeM--strong, detail-strong-M {}
+@mixin typographyTShirtSizes .spectrum-Detail-sizeS--heavy, detail-heavy-S {} */
 
 /* Code t-shirt sizes */
 .spectrum-Code {
@@ -192,54 +192,54 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-body-serif-m-text-font-family);
 }
 
-@mixin typographyTShirtSizes .spectrum-Code--XL, code-XL, true {
+@mixin typographyTShirtSizes .spectrum-Code--sizeXL, code-XL, true {
   font-family: var(--spectrum-code-xl-text-font-family);
 }
-@mixin typographyTShirtSizes .spectrum-Code--L, code-L, true {
+@mixin typographyTShirtSizes .spectrum-Code--sizeL, code-L, true {
   font-family: var(--spectrum-code-l-text-font-family);
 }
-@mixin typographyTShirtSizes .spectrum-Code--M, code-M, true {
+@mixin typographyTShirtSizes .spectrum-Code--sizeM, code-M, true {
   font-family: var(--spectrum-code-m-text-font-family);
 }
-@mixin typographyTShirtSizes .spectrum-Code--S, code-S, true {
+@mixin typographyTShirtSizes .spectrum-Code--sizeS, code-S, true {
   font-family: var(--spectrum-code-s-text-font-family);
 }
-@mixin typographyTShirtSizes .spectrum-Code--XS, code-XS, true {
+@mixin typographyTShirtSizes .spectrum-Code--sizeXS, code-XS, true {
   font-family: var(--spectrum-code-xs-text-font-family);
 }
 
 /* Margins for headings and body */
 .spectrum-Typography {
-  @mixin typographyTShirtMargins .spectrum-Heading--XXXL {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeXXXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--XXL {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeXXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--XL {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--L {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeL {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--M {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeM {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--S {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeS {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--XS {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeXS {
   }
-  @mixin typographyTShirtMargins .spectrum-Heading--XXS {
+  @mixin typographyTShirtMargins .spectrum-Heading--sizeXXS {
   }
 
-  @mixin typographyTShirtMargins .spectrum-Body--XXXL {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeXXXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--XXL {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeXXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--XL {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeXL {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--L {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeL {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--M {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeM {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--S {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeS {
   }
-  @mixin typographyTShirtMargins .spectrum-Body--XS {
+  @mixin typographyTShirtMargins .spectrum-Body--sizeXS {
   }
 }
 
@@ -248,21 +248,21 @@ governing permissions and limitations under the License.
   &:lang(ja),
   &:lang(ko),
   &:lang(zh) {
-    @mixin typographyTShirtSizes .spectrum-Heading--XXXL, heading-han-XXXL {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeXXXL, heading-han-XXXL {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--XXL, heading-han-XXL {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeXXL, heading-han-XXL {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--XL, heading-han-XL {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeXL, heading-han-XL {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--L, heading-han-L {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeL, heading-han-L {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--M, heading-han-M {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeM, heading-han-M {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--S, heading-han-S {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeS, heading-han-S {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--XS, heading-han-XS {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeXS, heading-han-XS {
     }
-    @mixin typographyTShirtSizes .spectrum-Heading--XXS, heading-han-XXS {
+    @mixin typographyTShirtSizes .spectrum-Heading--sizeXXS, heading-han-XXS {
     }
 
     .spectrum-Heading--heavy {
@@ -307,28 +307,28 @@ governing permissions and limitations under the License.
       }
     }
 
-    @mixin typographyTShirtSizes .spectrum-Body--XXXL, body-han-XXXL {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeXXXL, body-han-XXXL {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--XXL, body-han-XXL {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeXXL, body-han-XXL {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--XL, body-han-XL {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeXL, body-han-XL {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--L, body-han-L {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeL, body-han-L {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--M, body-han-M {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeM, body-han-M {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--S, body-han-S {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeS, body-han-S {
     }
-    @mixin typographyTShirtSizes .spectrum-Body--XS, body-han-XS {
+    @mixin typographyTShirtSizes .spectrum-Body--sizeXS, body-han-XS {
     }
 
-    @mixin typographyTShirtSizes .spectrum-Detail--XL, detail-han-xl {
+    @mixin typographyTShirtSizes .spectrum-Detail--sizeXL, detail-han-xl {
     }
-    @mixin typographyTShirtSizes .spectrum-Detail--L, detail-han-l {
+    @mixin typographyTShirtSizes .spectrum-Detail--sizeL, detail-han-l {
     }
-    @mixin typographyTShirtSizes .spectrum-Detail--M, detail-han-m {
+    @mixin typographyTShirtSizes .spectrum-Detail--sizeM, detail-han-m {
     }
-    @mixin typographyTShirtSizes .spectrum-Detail--S, detail-han-s {
+    @mixin typographyTShirtSizes .spectrum-Detail--sizeS, detail-han-s {
     }
 
     .spectrum-Detail--light {
@@ -349,22 +349,22 @@ governing permissions and limitations under the License.
       }
     }
 
-    @mixin typographyTShirtSizes .spectrum-Code--XL, code-han-XL, true {
+    @mixin typographyTShirtSizes .spectrum-Code--sizeXL, code-han-XL, true {
       font-family: var(--spectrum-code-han-xl-text-font-family);
     }
 
-    @mixin typographyTShirtSizes .spectrum-Code--L, code-han-L, true {
+    @mixin typographyTShirtSizes .spectrum-Code--sizeL, code-han-L, true {
       font-family: var(--spectrum-code-han-l-text-font-family);
     }
 
-    @mixin typographyTShirtSizes .spectrum-Code--M, code-han-M, true {
+    @mixin typographyTShirtSizes .spectrum-Code--sizeM, code-han-M, true {
       font-family: var(--spectrum-code-han-m-text-font-family);
     }
 
-    @mixin typographyTShirtSizes .spectrum-Code--S, code-han-S, true {
+    @mixin typographyTShirtSizes .spectrum-Code--sizeS, code-han-S, true {
       font-family: var(--spectrum-code-han-s-text-font-family);
     }
-    @mixin typographyTShirtSizes .spectrum-Code--XS, code-han-XS, true {
+    @mixin typographyTShirtSizes .spectrum-Code--sizeXS, code-han-XS, true {
       font-family: var(--spectrum-code-han-xs-text-font-family);
     }
   }
diff --git a/components/typography/metadata/typography-body.yml b/components/typography/metadata/typography-body.yml
index 6ba538def54..52138f2fd24 100644
--- a/components/typography/metadata/typography-body.yml
+++ b/components/typography/metadata/typography-body.yml
@@ -9,23 +9,23 @@ examples:
     description: Default body text sizes.
     markup: |
       <div class="spectrum">
-        <p class="spectrum-Body spectrum-Body--XXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
       </div>
       <br/>
       <div class="spectrum">
-        <p class="spectrum-Body spectrum-Body--XXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis Serif</em> <strong>BodyXXXL Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis Serif</em> <strong>BodyXXL Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis Serif</em> <strong>BodyXL Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis Serif</em> <strong>BodyL Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis Serif</em> <strong>BodyM Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis Serif</em> <strong>BodyS Strong Serif</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis Serif</em> <strong>BodyXS Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis Serif</em> <strong>BodyXXXL Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis Serif</em> <strong>BodyXXL Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis Serif</em> <strong>BodyXL Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis Serif</em> <strong>BodyL Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis Serif</em> <strong>BodyM Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis Serif</em> <strong>BodyS Strong Serif</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis Serif</em> <strong>BodyXS Strong Serif</strong>.</p>
       </div>
 
   - id: heading-m
@@ -34,34 +34,34 @@ examples:
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       <div class="spectrum-Typography">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h1 class="spectrum-Heading spectrum-Heading--XL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h2 class="spectrum-Heading spectrum-Heading--L">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--L">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h3 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h3>
-        <p class="spectrum-Body spectrum-Body--M">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--M">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h3>
+        <p class="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h4 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h4>
-        <p class="spectrum-Body spectrum-Body--S">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--S">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h4>
+        <p class="spectrum-Body spectrum-Body--sizeS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h5 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h5>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h5>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h6>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      </div>
\ No newline at end of file
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h6>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml
index 1b59bc74b09..647df19a354 100644
--- a/components/typography/metadata/typography-code.yml
+++ b/components/typography/metadata/typography-code.yml
@@ -8,13 +8,13 @@ examples:
     status: Verified
     description: Typographic styles for computer code.
     markup: |
-      <code class="spectrum-Code spectrum-Code--XL">CodeXL Text <strong>Strong</strong> <em>Emphasis</em> </code>
-      <code class="spectrum-Code spectrum-Code--L">CodeL Text <strong>Strong</strong> <em>Emphasis</em> </code>
-      <code class="spectrum-Code spectrum-Code--M">CodeM Text <strong>Strong</strong> <em>Emphasis</em> </code>
-      <code class="spectrum-Code spectrum-Code--S">CodeS Text <strong>Strong</strong> <em>Emphasis</em> </code>
-      <code class="spectrum-Code spectrum-Code--XS">CodeXS Text <strong>Strong</strong> <em>Emphasis</em> </code>
-      <pre><code class="spectrum-Code spectrum-Code--M">CodeM text
+      <code class="spectrum-Code spectrum-Code--sizeXL">CodeXL Text <strong>Strong</strong> <em>Emphasis</em> </code>
+      <code class="spectrum-Code spectrum-Code--sizeL">CodeL Text <strong>Strong</strong> <em>Emphasis</em> </code>
+      <code class="spectrum-Code spectrum-Code--sizeM">CodeM Text <strong>Strong</strong> <em>Emphasis</em> </code>
+      <code class="spectrum-Code spectrum-Code--sizeS">CodeS Text <strong>Strong</strong> <em>Emphasis</em> </code>
+      <code class="spectrum-Code spectrum-Code--sizeXS">CodeXS Text <strong>Strong</strong> <em>Emphasis</em> </code>
+      <pre><code class="spectrum-Code spectrum-Code--sizeM">CodeM text
       wrapped in
       pre tags for
       multiline
-      goodness</code></pre>
\ No newline at end of file
+      goodness</code></pre>
diff --git a/components/typography/metadata/typography-detail.yml b/components/typography/metadata/typography-detail.yml
index 3ac1ba0b125..2455d80b669 100644
--- a/components/typography/metadata/typography-detail.yml
+++ b/components/typography/metadata/typography-detail.yml
@@ -8,13 +8,13 @@ examples:
     name: Detail
     markup: |
       <div class="spectrum">
-        <p class="spectrum-Detail spectrum-Detail--XL">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
         </br/>
-        <p class="spectrum-Detail spectrum-Detail--XL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M spectrum-Detail--serif">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S spectrum-Detail--serif">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
-      </div>
\ No newline at end of file
+        <p class="spectrum-Detail spectrum-Detail--sizeXL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <span class="spectrum-Detail--light">DetailXL Light</span> <strong>DetailXL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <span class="spectrum-Detail--light">DetailL Light</span> <strong>DetailL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM spectrum-Detail--serif">DetailM <em>DetailM Emphasis</em> <span class="spectrum-Detail--light">DetailM Light</span> <strong>DetailM Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS spectrum-Detail--serif">DetailS <em>DetailS Emphasis</em> <span class="spectrum-Detail--light">DetailS Light</span> <strong>DetailS Strong</strong>.</p>
+      </div>
diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
index 1d1ae50153e..7d6a0da96f6 100644
--- a/components/typography/metadata/typography-heading.yml
+++ b/components/typography/metadata/typography-heading.yml
@@ -9,23 +9,23 @@ examples:
     description: Headings for typography.
     markup: |
       <div class="spectrum">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--serif">HeadingXXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--serif">HeadingXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
-        <p class="spectrum-Heading spectrum-Heading--L spectrum-Heading--serif">HeadingL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</p>
-        <h3 class="spectrum-Heading spectrum-Heading--M spectrum-Heading--serif">HeadingM Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S spectrum-Heading--serif">HeadingS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS spectrum-Heading--serif">HeadingXS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS spectrum-Heading--serif">HeadingXXS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">HeadingXXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--serif">HeadingXL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h1>
+        <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--serif">HeadingL Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</p>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">HeadingM Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS spectrum-Heading--serif">HeadingS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Heading--serif">HeadingXS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS spectrum-Heading--serif">HeadingXXS Serif <em>Serif Emphasis</em> <strong>Serif Strong</strong>.</h6>
       </div>
 
   - id: heading-heavy-m
@@ -34,15 +34,15 @@ examples:
     description: Strong headings for typography.
     markup: |
       <div class="spectrum">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <p class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy">HeadingL <em>Emphasis</em> <strong>strong</strong>.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy">HeadingL <em>Emphasis</em> <strong>strong</strong>.</p>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <p class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>strong</strong>.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>strong</strong>.</p>
       </div>
 
   - id: heading-light-m
@@ -51,15 +51,15 @@ examples:
     description: Light headings for typography.
     markup: |
       <div class="spectrum">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <p class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light">HeadingL <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light">HeadingL <em>Emphasis</em> <strong>Strong</strong>.</p>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <p class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <p class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-Heading--serif">HeadingL Serif <em>Emphasis</em> <strong>Strong</strong>.</p>
       </div>
 
   - id: heading-m
@@ -68,34 +68,34 @@ examples:
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       <div class="spectrum-Typography">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h1 class="spectrum-Heading spectrum-Heading--XL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h2 class="spectrum-Heading spectrum-Heading--L">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--L">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h3 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--M">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--M">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h4 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--S">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--S">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h5 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      </div>
\ No newline at end of file
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index 0ccaa9be47f..51f711aef44 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -11,36 +11,36 @@ examples:
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       <div class="spectrum-Typography">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h1 class="spectrum-Heading spectrum-Heading--XL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h2 class="spectrum-Heading spectrum-Heading--L">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--L">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--L">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h3 class="spectrum-Heading spectrum-Heading--M">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--M">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--M">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeM">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h4 class="spectrum-Heading spectrum-Heading--S">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--S">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--S">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h5 class="spectrum-Heading spectrum-Heading--XS">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body spectrum-Body--XS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
-        <p class="spectrum-Body spectrum-Body--XS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">Ut et lectus finibus, aliquet mauris eu, tincidunt mi. Donec scelerisque orci sit amet venenatis luctus. Morbi eget lacus est. Duis iaculis magna quis aliquam lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       </div>
 
   - id: heading-m
@@ -49,56 +49,56 @@ examples:
     description: Headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">HeadingXXXL <em>HeadingXXXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">HeadingXXL <em>HeadingXXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">HeadingXL <em>HeadingXL Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">HeadingL <em>HeadingL Emphasis</em> <strong>Strong</strong>.</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">HeadingM <em>HeadingM Emphasis</em> <strong>Strong</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">HeadingS <em>HeadingS Emphasis</em> <strong>Strong</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">HeadingXS <em>HeadingXS Emphasis</em> <strong>Strong</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">HeadingXXS <em>HeadingXXS Emphasis</em> <strong>Strong</strong>.</h6>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--serif"> spectrum-Heading--serif</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M spectrum-Heading--serif">HeadingM Serif <em>Emphasis</em> <strong>Strong</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S spectrum-Heading--serif">HeadingS Serif <em>Emphasis</em> <strong>Strong</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS spectrum-Heading--serif">HeadingXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS spectrum-Heading--serif">HeadingXXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--serif"> spectrum-Heading--serif</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM spectrum-Heading--serif">HeadingM Serif <em>Emphasis</em> <strong>Strong</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS spectrum-Heading--serif">HeadingS Serif <em>Emphasis</em> <strong>Strong</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Heading--serif">HeadingXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS spectrum-Heading--serif">HeadingXXS Serif <em>Emphasis</em> <strong>Strong</strong>.</h6>
       </div>
 
       <div class="spectrum" lang="ja">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">見出しXXS <em>見出しXXS 重点</em> <strong>見出しXXS 強い強調</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">見出しXXS <em>見出しXXS 重点</em> <strong>見出しXXS 強い強調</strong>.</h6>
       </div>
 
       <div class="spectrum" lang="ar">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">XXXLالقسم <em>XXXLالقسم  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">XXLالقسم <em>XXLالقسم  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL">XLالقسم <em>XLالقسم  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L">Lالقسم <em>Lالقسم  تشديد</em> <strong>Lالقسم  تأكيد قو</strong>.</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M">Mالقسم <em>Mالقسم  تشديد</em> <strong>Mالقسم  تأكيد قو</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S">Sالقسم <em>Sالقسم  تشديد</em> <strong>Sالقسم  تأكيد قو</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS">XSالقسم <em>XSالقسم  تشديد</em> <strong>XSالقسم  تأكيد قو</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">XSSالقسم <em>XSSالقسم  تشديد</em> <strong>XXSالقسم  تأكيد قو</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">XXXLالقسم <em>XXXLالقسم  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">XXLالقسم <em>XXLالقسم  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">XLالقسم <em>XLالقسم  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">Lالقسم <em>Lالقسم  تشديد</em> <strong>Lالقسم  تأكيد قو</strong>.</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">Mالقسم <em>Mالقسم  تشديد</em> <strong>Mالقسم  تأكيد قو</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">Sالقسم <em>Sالقسم  تشديد</em> <strong>Sالقسم  تأكيد قو</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">XSالقسم <em>XSالقسم  تشديد</em> <strong>XSالقسم  تأكيد قو</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">XSSالقسم <em>XSSالقسم  تشديد</em> <strong>XXSالقسم  تأكيد قو</strong>.</h6>
       </div>
 
       <div class="spectrum" lang="he">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L">Lדגש כותרת <em>Lמאמר</em> <strong>Lחזק</strong>.</h2>
-        <h3 class="spectrum-Heading spectrum-Heading--M">Mדגש כותרת <em>Mמאמר</em> <strong>Mחזק</strong>.</h3>
-        <h4 class="spectrum-Heading spectrum-Heading--S">Sדגש כותרת <em>Sמאמר</em> <strong>Sחזק</strong>.</h4>
-        <h5 class="spectrum-Heading spectrum-Heading--XS">XSדגש כותרת <em>XSמאמר</em> <strong>XSחזק</strong>.</h5>
-        <h6 class="spectrum-Heading spectrum-Heading--XXS">XXSדגש כותרת <em>XXSמאמר</em> <strong>XXSחזק</strong>.</h6>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL">Lדגש כותרת <em>Lמאמר</em> <strong>Lחזק</strong>.</h2>
+        <h3 class="spectrum-Heading spectrum-Heading--sizeM">Mדגש כותרת <em>Mמאמר</em> <strong>Mחזק</strong>.</h3>
+        <h4 class="spectrum-Heading spectrum-Heading--sizeS">Sדגש כותרת <em>Sמאמר</em> <strong>Sחזק</strong>.</h4>
+        <h5 class="spectrum-Heading spectrum-Heading--sizeXS">XSדגש כותרת <em>XSמאמר</em> <strong>XSחזק</strong>.</h5>
+        <h6 class="spectrum-Heading spectrum-Heading--sizeXXS">XXSדגש כותרת <em>XXSמאמר</em> <strong>XXSחזק</strong>.</h6>
       </div>
 
   - id: heading-heavy-m
@@ -107,36 +107,36 @@ examples:
     description: Strong headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy spectrum-Heading--serif"> spectrum-Heading--heavy spectrum-Heading--serif</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy spectrum-Heading--serif"> spectrum-Heading--heavy spectrum-Heading--serif</h2>
       </div>
 
       <div class="spectrum" lang="ja">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">見出しXXXL <em>見出し XXXL </em> <strong>>見出しXXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">見出しXXL <em>見出し XXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">見出しXL <em>見出しXL  重点</em> <strong>見出しXL強い強調</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">見出しXXXL <em>見出し XXXL </em> <strong>>見出しXXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">見出しXXL <em>見出し XXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">見出しXL <em>見出しXL  重点</em> <strong>見出しXL強い強調</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
       </div>
 
       <div class="spectrum" lang="ar">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">القسمXXXL <em>القسم XXXL  تشديد</em> <strong>القسم 2XXXL تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">القسمXXL <em>القسم 1XXL  تشديد Emphasis</em> <strong>القسم XXL تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">القسمXL<em>القسم 1XL  تشديد</em> <strong>القسم XL تأكيد قو</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">القسمXXXL <em>القسم XXXL  تشديد</em> <strong>القسم 2XXXL تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">القسمXXL <em>القسم 1XXL  تشديد Emphasis</em> <strong>القسم XXL تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">القسمXL<em>القسم 1XL  تشديد</em> <strong>القسم XL تأكيد قو</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
       </div>
 
       <div class="spectrum" lang="he">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--heavy">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--heavy">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--heavy">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--heavy">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--heavy">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--heavy">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--heavy"> spectrum-Heading--heavy</h2>
       </div>
 
   - id: heading-light-m
@@ -145,29 +145,29 @@ examples:
     description: Light headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light"> spectrum-Heading--light</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">HeadingXXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">HeadingXXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">HeadingXL <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
         <br/>
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light spectrum-Heading--serif"> spectrum-Heading--light spectrum-Heading--serif</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light spectrum-Heading--serif">HeadingXXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light spectrum-Heading--serif">HeadingXL Serif <em>Emphasis</em> <strong>Strong</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-Heading--serif"> spectrum-Heading--light spectrum-Heading--serif</h2>
       </div>
 
       <div class="spectrum" lang="ja">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light"> spectrum-Heading--light</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
       </div>
 
       <div class="spectrum" lang="ar">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--light">XXXLالقسم <em>القسم XXXL  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--light">XXLالقسم <em>القسم XXL  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
-        <h1 class="spectrum-Heading spectrum-Heading--XL spectrum-Heading--light">XLالقسم <em>القسم XL  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
-        <h2 class="spectrum-Heading spectrum-Heading--L spectrum-Heading--light"> spectrum-Heading--light</h2>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--light">XXXLالقسم <em>القسم XXXL  تشديد</em> <strong>XXXLالقسم  تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--light">XXLالقسم <em>القسم XXL  تشديد</em> <strong>XXLالقسم  تأكيد قو</strong>.</h1>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL spectrum-Heading--light">XLالقسم <em>القسم XL  تشديد</em> <strong>XLالقسم  تأكيد قو</strong>.</h1>
+        <h2 class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"> spectrum-Heading--light</h2>
       </div>
 
       <div class="spectrum" lang="he">
@@ -183,51 +183,51 @@ examples:
     description: Default body text sizes.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Body spectrum-Body--XXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">BodyXXXL Text <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">BodyXXL Text <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">BodyXL Text <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">BodyL text <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">BodyM Text <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">BodyS Text <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">BodyXS Text <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
         <br/>
-        <p class="spectrum-Body spectrum-Body--XXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">BodyXXXL Text Serif <em>BodyXXXL Emphasis</em> <strong>BodyXXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">BodyXXL Text Serif <em>BodyXXL Emphasis</em> <strong>BodyXXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL spectrum-Body--serif">BodyXL Text Serif <em>BodyXL Emphasis</em> <strong>BodyXL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">BodyL text Serif <em>BodyL Emphasis</em> <strong>BodyL Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">BodyM Text Serif <em>BodyM Emphasis</em> <strong>BodyM Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">BodyS Text Serif <em>BodyS Emphasis</em> <strong>BodyS Strong</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">BodyXS Text Serif <em>BodyXS Emphasis</em> <strong>BodyXS Strong</strong>.</p>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Body spectrum-Body--XXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">見出しXXXL <em>見出しXXXL 重点</em> <strong>見出しXXXL 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">見出しXXL <em>見出しXXL 重点</em> <strong>見出しXXL 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">見出しXL <em>見出しXL 重点</em> <strong>見出しXL 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">見出しL <em>見出しL 重点</em> <strong>見出しL 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">見出しM <em>見出しM 重点</em> <strong>見出しM 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">見出しS <em>見出しS 重点</em> <strong>見出しS 強い強調</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">見出しXS <em>見出しXS 重点</em> <strong>見出しXS 強い強調</strong>.</p>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Body spectrum-Body--XXXL">القسم XXXL <em>القسم XXXL تشديد</em> <strong>القسم XXXL تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">القسم XXL <em>القسم XXL تشديد</em> <strong>القسم XXL تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L">القسم L <em>القسم L تشديد</em> <strong>القسم L تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M">القسم M <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS">القسم XS <em>القسم XS تشديد</em> <strong>القسم XS تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">القسم XXXL <em>القسم XXXL تشديد</em> <strong>القسم XXXL تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">القسم XXL <em>القسم XXL تشديد</em> <strong>القسم XXL تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">القسم L <em>القسم L تشديد</em> <strong>القسم L تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">القسم M <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">القسم XS <em>القسم XS تشديد</em> <strong>القسم XS تأكيد قو</strong>.</p>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Body spectrum-Body--XXXL">XXXLטקסט גוף הדגשות <em>XXXLגוף חזק</em> <strong>XXXLגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XXL">XXLטקסט גוף הדגשות <em>XXLגוף חזק</em> <strong>XXLגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--L">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--M">Mטקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--S">Sטקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
-        <p class="spectrum-Body spectrum-Body--XS">XSטקסט גוף הדגשות <em>XSגוף חזק</em> <strong>XSגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL">XXXLטקסט גוף הדגשות <em>XXXLגוף חזק</em> <strong>XXXLגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXXL">XXLטקסט גוף הדגשות <em>XXLגוף חזק</em> <strong>XXLגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeL">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeM">Mטקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeS">Sטקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS">XSטקסט גוף הדגשות <em>XSגוף חזק</em> <strong>XSגוף חזק</strong>.</p>
       </div>
 
   - id: detail-m
@@ -236,36 +236,36 @@ examples:
     description: Subheadings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Detail spectrum-Detail--XL">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
         <br/>
-        <p class="spectrum-Detail spectrum-Detail--XL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M spectrum-Detail--serif">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S spectrum-Detail--serif">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL spectrum-Detail--serif">DetailXL <em>DetailXL Emphasis</em> <strong>DetailXL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL spectrum-Detail--serif">DetailL <em>DetailL Emphasis</em> <strong>DetailL Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM spectrum-Detail--serif">DetailL <em>DetailM Emphasis</em> <strong>DetailM Strong</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS spectrum-Detail--serif">DetailL <em>DetailS Emphasis</em> <strong>DetailS Strong</strong>.</p>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Detail spectrum-Detail--XL">見出しXL  <em>見出しXL</em> <strong>見出しXL</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L">見出しL  <em>見出しL</em> <strong>見出しL</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M">見出しM  <em>見出しM</em> <strong>見出しM</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S">見出しS  <em>見出しS</em> <strong>見出しS</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL">見出しXL  <em>見出しXL</em> <strong>見出しXL</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL">見出しL  <em>見出しL</em> <strong>見出しL</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM">見出しM  <em>見出しM</em> <strong>見出しM</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS">見出しS  <em>見出しS</em> <strong>見出しS</strong>.</p>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Detail spectrum-Detail--XL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L">L <em>L تشديد</em> <strong>L تأكيد قو</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M">القسم M  <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL">القسم XL <em>القسم XL تشديد</em> <strong>القسم XL تأكيد قو</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL">L <em>L تشديد</em> <strong>L تأكيد قو</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM">القسم M  <em>القسم M تشديد</em> <strong>القسم M تأكيد قو</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS">القسم S <em>القسم S تشديد</em> <strong>القسم S تأكيد قو</strong>.</p>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Detail spectrum-Detail--XL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--L">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--M">Mالقسم טקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
-        <p class="spectrum-Detail spectrum-Detail--S">Sالقسم טקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeXL">XLטקסט גוף הדגשות <em>XLגוף חזק</em> <strong>XLגוף חזק</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeL">Lטקסט גוף הדגשות <em>Lגוף חזק</em> <strong>Lגוף חזק</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeM">Mالقسم טקסט גוף הדגשות <em>Mגוף חזק</em> <strong>Mגוף חזק</strong>.</p>
+        <p class="spectrum-Detail spectrum-Detail--sizeS">Sالقسم טקסט גוף הדגשות <em>Sגוף חזק</em> <strong>Sגוף חזק</strong>.</p>
       </div>
 
   - id: heading-han-m
@@ -274,22 +274,22 @@ examples:
     description: Typographic pairings for Adobe Clean Han.
     markup: |
       <div class="spectrum" lang="ja">
-        <h1 class="spectrum-Heading spectrum-Heading--XXXL spectrum-Heading--serif">見出しXXXL</h4>
-        <p class="spectrum-Body spectrum-Body--XXXL spectrum-Body--serif">見出しとよく対になる本文。</p>
-        <h1 class="spectrum-Heading spectrum-Heading--XXL spectrum-Heading--serif">見出しXXL</h4>
-        <p class="spectrum-Body spectrum-Body--XXL spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXXL spectrum-Heading--serif">見出しXXXL</h4>
+        <p class="spectrum-Body spectrum-Body--sizeXXXL spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXXL spectrum-Heading--serif">見出しXXL</h4>
+        <p class="spectrum-Body spectrum-Body--sizeXXL spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h1 class="spectrum-Heading spectrum-HeadingXL spectrum-Heading--serif">見出しXL</h4>
-        <p class="spectrum-Body spectrum-Body--XL spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeXL spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h2 class="spectrum-Heading spectrum-HeadingL spectrum-Heading--serif">見出しL</h4>
-        <p class="spectrum-Body spectrum-Body--L spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeL spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h3 class="spectrum-Heading spectrum-HeadingM spectrum-Heading--serif">見出しM</h4>
-        <p class="spectrum-Body spectrum-Body--M spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeM spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h4 class="spectrum-Heading spectrum-HeadingS spectrum-Heading--serif">見出しS</h4>
-        <p class="spectrum-Body spectrum-Body--S spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeS spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h5 class="spectrum-Heading spectrum-HeadingXS spectrum-Heading--serif">見出しXS</h4>
-        <p class="spectrum-Body spectrum-Body--XS spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">見出しとよく対になる本文。</p>
         <h5 class="spectrum-Heading spectrum-HeadingXXS spectrum-Heading--serif">見出しXXS</h4>
-        <p class="spectrum-Body spectrum-Body--XS spectrum-Body--serif">見出しとよく対になる本文。</p>
+        <p class="spectrum-Body spectrum-Body--sizeXS spectrum-Body--serif">見出しとよく対になる本文。</p>
       </div>
 
   - id: code-m
@@ -298,12 +298,12 @@ examples:
     description: Typographic styles for computer code.
     markup: |
       <div class="spectrum" lang="ja">
-        <code class="spectrum-Code spectrum-Code--XL">暗号 XL Code <strong>Strong</strong> </code>
-        <code class="spectrum-Code spectrum-Code--L">暗号 L Code <strong>Strong</strong> </code>
-        <code class="spectrum-Code spectrum-Code--M">暗号 M Code <strong>Strong</strong> </code>
-        <code class="spectrum-Code spectrum-Code--S">暗号 S Code <strong>Strong</strong> </code>
-        <code class="spectrum-Code spectrum-Code--XS">暗号 XS Code <strong>Strong</strong> </code>
-        <pre><code class="spectrum-Code spectrum-Code--M">暗号 M Code Wrapped in:
+        <code class="spectrum-Code spectrum-Code--sizeXL">暗号 XL Code <strong>Strong</strong> </code>
+        <code class="spectrum-Code spectrum-Code--sizeL">暗号 L Code <strong>Strong</strong> </code>
+        <code class="spectrum-Code spectrum-Code--sizeM">暗号 M Code <strong>Strong</strong> </code>
+        <code class="spectrum-Code spectrum-Code--sizeS">暗号 S Code <strong>Strong</strong> </code>
+        <code class="spectrum-Code spectrum-Code--sizeXS">暗号 XS Code <strong>Strong</strong> </code>
+        <pre><code class="spectrum-Code spectrum-Code--sizeM">暗号 M Code Wrapped in:
         pre tags for
         goodness</code></pre>
-      </div>
\ No newline at end of file
+      </div>
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml
index 1f638aa2953..ba07bd0bf49 100644
--- a/components/typography/metadata/typography.yml
+++ b/components/typography/metadata/typography.yml
@@ -15,7 +15,7 @@ examples:
 
       [View the Heading typography component](typography-heading.html)
     markup: |
-      <h1 class="spectrum-Heading spectrum-Heading--XXL">Hello world.</h1>
+      <h1 class="spectrum-Heading spectrum-Heading--sizeXXL">Hello world.</h1>
   - id: body-m
     name: Body
     status: Verified
@@ -24,7 +24,7 @@ examples:
 
       [View the Body typography component](typography-body.html)
     markup: |
-      <p class="spectrum-Body spectrum-Body--M">Spectrum is based on real-world situations.</p>
+      <p class="spectrum-Body spectrum-Body--sizeM">Spectrum is based on real-world situations.</p>
   - id: detail-m
     status: Verified
     name: Detail
@@ -33,7 +33,7 @@ examples:
 
       [View the Detail typography component](typography-detail.html)
     markup: |
-      <p class="spectrum-Detail spectrum-Detail--XL">Our recommendations</p>
+      <p class="spectrum-Detail spectrum-Detail--sizeXL">Our recommendations</p>
   - id: code-m
     name: Code
     status: Verified
@@ -42,78 +42,128 @@ examples:
 
       [View the Code typography component](typography-code.html)
     markup: |
-      <code class="spectrum-Code spectrum-Code--S">alert("Hello world");</code>
+      <code class="spectrum-Code spectrum-Code--sizeS">alert("Hello world");</code>
 sections:
   - name: Applying margins
     description: |
       By default, Typography components do not include outer margins. If you would like to add margins, simply add the `.spectrum-Typography` class to your container, and every typography component inside of your container will have the correct margins.
     markup: |
       <div class="spectrum-Typography">
-        <h1 class="spectrum-Heading spectrum-Heading--XL">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body spectrum-Body--XL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
+        <h1 class="spectrum-Heading spectrum-Heading--sizeXL">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body spectrum-Body--sizeXL">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.</p>
       </div>
 
   - name: Migrating from deprecated Typography
     description: |
       See the table below to reference what will need to change when migrating to the new Typography API. Cells with a dash indicate the typography style did not exist in the previous API.
 
-      Note that all instances of typography now require the component class in addition to the modifier class. For example, to get a large Heading, you will need the `.spectrum-Heading--L` modifier class as well as the `.spectrum-Heading` component class.
+      Note that all instances of typography now require the component class in addition to the modifier class. For example, to get a large Heading, you will need the `.spectrum-Heading--sizeL` modifier class as well as the `.spectrum-Heading` component class.
 
       ### Heading
 
-      | Deprecated Classname                                      | New Classname                                                      |
-      | --------------------------------------------------------- | ------------------------------------------------------------------ |
-      | `~.spectrum-Heading1--display~`                           | `.spectrum-Heading.spectrum-Heading--XXXL`                         |
-      | `~.spectrum-Heading1--display.spectrum-Heading1--quiet~`  | `.spectrum-Heading.spectrum-Heading--XXXL.spectrum-Heading--light` |
-      | `~.spectrum-Heading1--display.spectrum-Heading1--strong~` | `.spectrum-Heading.spectrum-Heading--XXXL.spectrum-Heading--heavy` |
-      | `~.spectrum-Heading2--display~`                           | `.spectrum-Heading.spectrum-Heading-XXL`                           |
-      | `~.spectrum-Heading2--display.spectrum-Heading2--quiet~`  | `.spectrum-Heading.spectrum-Heading--XXL.spectrum-Heading--light`  |
-      | `~.spectrum-Heading2--display.spectrum-Heading2--strong~` | `.spectrum-Heading.spectrum-Heading--XXL.spectrum-Heading--heavy`  |
-      | `~.spectrum-Heading1~`                                    | `.spectrum-Heading.spectrum-Heading-XL`                            |
-      | `~.spectrum-Heading1--quiet~`                             | `.spectrum-Heading.spectrum-Heading--XL.spectrum-Heading--light`   |
-      | `~.spectrum-Heading1--strong~`                            | `.spectrum-Heading.spectrum-Heading--XL.spectrum-Heading--heavy`   |
-      | `~.spectrum-Heading2~`                                    | `.spectrum-Heading.spectrum-Heading-L`                             |
-      | `~.spectrum-Heading1--quiet~`                             | `.spectrum-Heading.spectrum-Heading--L.spectrum-Heading--light`    |
-      | `~.spectrum-Heading2--strong~`                            | `.spectrum-Heading.spectrum-Heading--L.spectrum-Heading--heavy`    |
-      | `~.spectrum-Heading3~`                                    | `.spectrum-Heading.spectrum-Heading--M`                            |
-      | `~.spectrum-Heading4~`                                    | `.spectrum-Heading.spectrum-Heading--S`                            |
-      | `~.spectrum-Heading5~`                                    | `.spectrum-Heading.spectrum-Heading--XS`                           |
-      | `~.spectrum-Heading6~`                                    | `.spectrum-Heading.spectrum-Heading--XXS`                          |
+      | Deprecated Classname                                      | New Classname                                                          |
+      | --------------------------------------------------------- | ---------------------------------------------------------------------- |
+      | `~.spectrum-Heading1--display~`                           | `.spectrum-Heading.spectrum-Heading--sizeXXXL`                         |
+      | `~.spectrum-Heading1--display.spectrum-Heading1--quiet~`  | `.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--light` |
+      | `~.spectrum-Heading1--display.spectrum-Heading1--strong~` | `.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--heavy` |
+      | `~.spectrum-Heading2--display~`                           | `.spectrum-Heading.spectrum-Heading--sizeXXL`                          |
+      | `~.spectrum-Heading2--display.spectrum-Heading2--quiet~`  | `.spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--light`  |
+      | `~.spectrum-Heading2--display.spectrum-Heading2--strong~` | `.spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--heavy`  |
+      | `~.spectrum-Heading1~`                                    | `.spectrum-Heading.spectrum-Heading--sizeXL`                           |
+      | `~.spectrum-Heading1--quiet~`                             | `.spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--light`   |
+      | `~.spectrum-Heading1--strong~`                            | `.spectrum-Heading.spectrum-Heading--sizeXL.spectrum-Heading--heavy`   |
+      | `~.spectrum-Heading2~`                                    | `.spectrum-Heading.spectrum-Heading--sizeL`                            |
+      | `~.spectrum-Heading1--quiet~`                             | `.spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--light`    |
+      | `~.spectrum-Heading2--strong~`                            | `.spectrum-Heading.spectrum-Heading--sizeL.spectrum-Heading--heavy`    |
+      | `~.spectrum-Heading3~`                                    | `.spectrum-Heading.spectrum-Heading--sizeM`                            |
+      | `~.spectrum-Heading4~`                                    | `.spectrum-Heading.spectrum-Heading--sizeS`                            |
+      | `~.spectrum-Heading5~`                                    | `.spectrum-Heading.spectrum-Heading--sizeXS`                           |
+      | `~.spectrum-Heading6~`                                    | `.spectrum-Heading.spectrum-Heading--sizeXXS`                          |
 
 
       ### Body
 
-      | Deprecated Classname   | New Classname                        |
-      | ---------------------- | ------------------------------------ |
-      | -                      | `.spectrum-Body.spectrum-Body--XXXL` |
-      | -                      | `.spectrum-Body.spectrum-Body--XXL`  |
-      | `~.spectrum-Body1~`    | `.spectrum-Body.spectrum-Body--XL`   |
-      | `~.spectrum-Body2~`    | `.spectrum-Body.spectrum-Body--L`    |
-      | `~.spectrum-Body3~`    | `.spectrum-Body.spectrum-Body--M`    |
-      | `~.spectrum-Body4~`    | `.spectrum-Body.spectrum-Body--S`    |
-      | `~.spectrum-Body5~`    | `.spectrum-Body.spectrum-Body--XS`   |
+      | Deprecated Classname   | New Classname                            |
+      | ---------------------- | ---------------------------------------- |
+      | -                      | `.spectrum-Body.spectrum-Body--sizeXXXL` |
+      | -                      | `.spectrum-Body.spectrum-Body--sizeXXL`  |
+      | `~.spectrum-Body1~`    | `.spectrum-Body.spectrum-Body--sizeXL`   |
+      | `~.spectrum-Body2~`    | `.spectrum-Body.spectrum-Body--sizeL`    |
+      | `~.spectrum-Body3~`    | `.spectrum-Body.spectrum-Body--sizeM`    |
+      | `~.spectrum-Body4~`    | `.spectrum-Body.spectrum-Body--sizeS`    |
+      | `~.spectrum-Body5~`    | `.spectrum-Body.spectrum-Body--sizeXS`   |
 
 
       ### Detail
 
-      | Deprecated Classname     | New Classname                                 |
-      | ------------------------ | --------------------------------------------- |
-      | -                        | `.spectrum-Detail--XL`                        |
-      | -                        | `.spectrum-Detail--XL.spectrum-Detail--light` |
-      | -                        | `.spectrum-Detail--L`                         |
-      | -                        | `.spectrum-Detail--L.spectrum-Detail--light`  |
-      | -                        | `.spectrum-Detail--M`                         |
-      | -                        | `.spectrum-Detail--M.spectrum-Detail--light`  |
-      | `~.spectrum-Subheading~` | `.spectrum-Detail--S`                         |
-      | `~.spectrum-Detail~`     | `.spectrum-Detail--S.spectrum-Detail--light`  |
+      | Deprecated Classname     | New Classname                                     |
+      | ------------------------ | ------------------------------------------------- |
+      | -                        | `.spectrum-Detail--sizeXL`                        |
+      | -                        | `.spectrum-Detail--sizeXL.spectrum-Detail--light` |
+      | -                        | `.spectrum-Detail--sizeL`                         |
+      | -                        | `.spectrum-Detail--sizeL.spectrum-Detail--light`  |
+      | -                        | `.spectrum-Detail--sizeM`                         |
+      | -                        | `.spectrum-Detail--sizeM.spectrum-Detail--light`  |
+      | `~.spectrum-Subheading~` | `.spectrum-Detail--sizeS`                         |
+      | `~.spectrum-Detail~`     | `.spectrum-Detail--sizeS.spectrum-Detail--light`  |
 
 
       ### Code
 
-      | Deprecated Classname | New Classname       |
-      | -------------------- | ------------------- |
-      | `~.spectrum-Code-1~` | `.spectrum-Code--XL`|
-      | `~.spectrum-Code-2~` | `.spectrum-Code--L` |
-      | `~.spectrum-Code-3~` | `.spectrum-Code--M` |
-      | `~.spectrum-Code-4~` | `.spectrum-Code--S` |
-      | `~.spectrum-Code-5~` | `.spectrum-Code--XS`|
+      | Deprecated Classname | New Classname           |
+      | -------------------- | ----------------------- |
+      | `~.spectrum-Code-1~` | `.spectrum-Code--sizeXL`|
+      | `~.spectrum-Code-2~` | `.spectrum-Code--sizeL` |
+      | `~.spectrum-Code-3~` | `.spectrum-Code--sizeM` |
+      | `~.spectrum-Code-4~` | `.spectrum-Code--sizeS` |
+      | `~.spectrum-Code-5~` | `.spectrum-Code--sizeXS`|
+
+  - name: Updating sizing syntax
+    description: |
+      To be more consistent with other t-shirt sizing syntax, the Typography components now use the word `size` in the class name syntax.
+
+      ### Heading
+
+      | Deprecated Classname                       | New Classname                                  |
+      |--------------------------------------------|------------------------------------------------|
+      | `.spectrum-Heading.spectrum-Heading--XXXL` | `.spectrum-Heading.spectrum-Heading--sizeXXXL` |
+      | `.spectrum-Heading.spectrum-Heading--XXL`  | `.spectrum-Heading.spectrum-Heading--sizeXXL`  |
+      | `.spectrum-Heading.spectrum-Heading--XL`   | `.spectrum-Heading.spectrum-Heading--sizeXL`   |
+      | `.spectrum-Heading.spectrum-Heading--L`    | `.spectrum-Heading.spectrum-Heading--sizeL`    |
+      | `.spectrum-Heading.spectrum-Heading--M`    | `.spectrum-Heading.spectrum-Heading--sizeM`    |
+      | `.spectrum-Heading.spectrum-Heading--S`    | `.spectrum-Heading.spectrum-Heading--sizeS`    |
+      | `.spectrum-Heading.spectrum-Heading--XS`   | `.spectrum-Heading.spectrum-Heading--sizeXS`   |
+      | `.spectrum-Heading.spectrum-Heading--XXS`  | `.spectrum-Heading.spectrum-Heading--sizeXXS`  |
+
+      ### Body
+
+      | Deprecated Classname                 | New Classname                            |
+      |--------------------------------------|------------------------------------------|
+      | `.spectrum-Body.spectrum-Body--XXXL` | `.spectrum-Body.spectrum-Body--sizeXXXL` |
+      | `.spectrum-Body.spectrum-Body--XXL`  | `.spectrum-Body.spectrum-Body--sizeXXL`  |
+      | `.spectrum-Body.spectrum-Body--XL`   | `.spectrum-Body.spectrum-Body--sizeXL`   |
+      | `.spectrum-Body.spectrum-Body--L`    | `.spectrum-Body.spectrum-Body--sizeL`    |
+      | `.spectrum-Body.spectrum-Body--M`    | `.spectrum-Body.spectrum-Body--sizeM`    |
+      | `.spectrum-Body.spectrum-Body--S`    | `.spectrum-Body.spectrum-Body--sizeS`    |
+      | `.spectrum-Body.spectrum-Body--XS`   | `.spectrum-Body.spectrum-Body--sizeXS`   |
+      | `.spectrum-Body.spectrum-Body--XXS`  | `.spectrum-Body.spectrum-Body--sizeXXS`  |
+
+      ### Detail
+
+      | Deprecated Classname                     | New Classname                                |
+      |------------------------------------------|----------------------------------------------|
+      | `.spectrum-Detail.spectrum-Detail--XL`   | `.spectrum-Detail.spectrum-Detail--sizeXL`   |
+      | `.spectrum-Detail.spectrum-Detail--L`    | `.spectrum-Detail.spectrum-Detail--sizeL`    |
+      | `.spectrum-Detail.spectrum-Detail--M`    | `.spectrum-Detail.spectrum-Detail--sizeM`    |
+      | `.spectrum-Detail.spectrum-Detail--S`    | `.spectrum-Detail.spectrum-Detail--sizeS`    |
+
+
+      ### Code
+
+      | Deprecated Classname                   | New Classname                              |
+      |----------------------------------------|--------------------------------------------|
+      | `.spectrum-Detail.spectrum-Detail--XL` | `.spectrum-Detail.spectrum-Detail--sizeXL` |
+      | `.spectrum-Detail.spectrum-Detail--L`  | `.spectrum-Detail.spectrum-Detail--sizeL`  |
+      | `.spectrum-Detail.spectrum-Detail--M`  | `.spectrum-Detail.spectrum-Detail--sizeM`  |
+      | `.spectrum-Detail.spectrum-Detail--S`  | `.spectrum-Detail.spectrum-Detail--sizeS`  |
+      | `.spectrum-Detail.spectrum-Detail--XS` | `.spectrum-Detail.spectrum-Detail--sizeXS` |
diff --git a/components/typography/skin.css b/components/typography/skin.css
index 3bf62b2b1ae..8df185a8b83 100644
--- a/components/typography/skin.css
+++ b/components/typography/skin.css
@@ -20,168 +20,168 @@ governing permissions and limitations under the License.
 
 /* t-shirt size-based typography */
 
-@mixin typographyTShirtColor .spectrum-Heading--XXXL {
+@mixin typographyTShirtColor .spectrum-Heading--sizeXXXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading--XXL {
+@mixin typographyTShirtColor .spectrum-Heading--sizeXXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading--XL {
+@mixin typographyTShirtColor .spectrum-Heading--sizeXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading--L {
+@mixin typographyTShirtColor .spectrum-Heading--sizeL {
 }
-@mixin typographyTShirtColor .spectrum-Heading--M {
+@mixin typographyTShirtColor .spectrum-Heading--sizeM {
 }
-@mixin typographyTShirtColor .spectrum-Heading--S {
+@mixin typographyTShirtColor .spectrum-Heading--sizeS {
 }
-@mixin typographyTShirtColor .spectrum-Heading--XS {
+@mixin typographyTShirtColor .spectrum-Heading--sizeXS {
 }
-@mixin typographyTShirtColor .spectrum-Heading--XXS {
+@mixin typographyTShirtColor .spectrum-Heading--sizeXXS {
 }
 
-@mixin typographyTShirtColor .spectrum-Heading-XXXL--light, heading-light-XXXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--light, heading-light-XXXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXL--light, heading-light-XXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXL--light, heading-light-XL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {
+@mixin typographyTShirtColor .spectrum-Heading-sizeL--light, heading-light-L {
 }
 
-@mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--heavy, heading-heavy-XXXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXL--heavy, heading-heavy-XXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXL--heavy, heading-heavy-XL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {
+@mixin typographyTShirtColor .spectrum-Heading-sizeL--heavy, heading-heavy-L {
 }
 
-@mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--heading, heading-XXXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXXL--heading, heading-XXL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {
+@mixin typographyTShirtColor .spectrum-Heading-sizeXL--heading, heading-XL {
 }
-@mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {
+@mixin typographyTShirtColor .spectrum-Heading-sizeL--heading, heading-L {
 }
 
-@mixin typographyTShirtColor .spectrum-Body--XXXL {
+@mixin typographyTShirtColor .spectrum-Body--sizeXXXL {
 }
-@mixin typographyTShirtColor .spectrum-Body--XXL {
+@mixin typographyTShirtColor .spectrum-Body--sizeXXL {
 }
-@mixin typographyTShirtColor .spectrum-Body--XL {
+@mixin typographyTShirtColor .spectrum-Body--sizeXL {
 }
-@mixin typographyTShirtColor .spectrum-Body--L {
+@mixin typographyTShirtColor .spectrum-Body--sizeL {
 }
-@mixin typographyTShirtColor .spectrum-Body--M {
+@mixin typographyTShirtColor .spectrum-Body--sizeM {
 }
-@mixin typographyTShirtColor .spectrum-Body--S {
+@mixin typographyTShirtColor .spectrum-Body--sizeS {
 }
-@mixin typographyTShirtColor .spectrum-Body--XS {
+@mixin typographyTShirtColor .spectrum-Body--sizeXS {
 }
 
-@mixin typographyTShirtColor .spectrum-Detail--XL {
+@mixin typographyTShirtColor .spectrum-Detail--sizeXL {
 }
-@mixin typographyTShirtColor .spectrum-Detail--L {
+@mixin typographyTShirtColor .spectrum-Detail--sizeL {
 }
-@mixin typographyTShirtColor .spectrum-Detail--M {
+@mixin typographyTShirtColor .spectrum-Detail--sizeM {
 }
-@mixin typographyTShirtColor .spectrum-Detail--S {
+@mixin typographyTShirtColor .spectrum-Detail--sizeS {
 }
 
-@mixin typographyTShirtColor .spectrum-Code--XL, code-XL {
+@mixin typographyTShirtColor .spectrum-Code--sizeXL, code-XL {
 }
-@mixin typographyTShirtColor .spectrum-Code--L, code-L {
+@mixin typographyTShirtColor .spectrum-Code--sizeL, code-L {
 }
-@mixin typographyTShirtColor .spectrum-Code--M, code-M {
+@mixin typographyTShirtColor .spectrum-Code--sizeM, code-M {
 }
-@mixin typographyTShirtColor .spectrum-Code--S, code-S {
+@mixin typographyTShirtColor .spectrum-Code--sizeS, code-S {
 }
-@mixin typographyTShirtColor .spectrum-Code--XS, code-XS {
+@mixin typographyTShirtColor .spectrum-Code--sizeXS, code-XS {
 }
 
 .spectrum {
   &:lang(ja),
   &:lang(ko),
   &:lang(zh) {
-    @mixin typographyTShirtColor .spectrum-Body--XXXL, body-han-XXXL {
+    @mixin typographyTShirtColor .spectrum-Body--sizeXXXL, body-han-XXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Body--XXL, body-han-XXL {
+    @mixin typographyTShirtColor .spectrum-Body--sizeXXL, body-han-XXL {
     }
-    @mixin typographyTShirtColor .spectrum-Body--XL, body-han-XL {
+    @mixin typographyTShirtColor .spectrum-Body--sizeXL, body-han-XL {
     }
-    @mixin typographyTShirtColor .spectrum-Body--L, body-han-L {
+    @mixin typographyTShirtColor .spectrum-Body--sizeL, body-han-L {
     }
-    @mixin typographyTShirtColor .spectrum-Body--M, body-han-M {
+    @mixin typographyTShirtColor .spectrum-Body--sizeM, body-han-M {
     }
-    @mixin typographyTShirtColor .spectrum-Body--S, body-han-S {
+    @mixin typographyTShirtColor .spectrum-Body--sizeS, body-han-S {
     }
-    @mixin typographyTShirtColor .spectrum-Body--XS, body-han-XS {
+    @mixin typographyTShirtColor .spectrum-Body--sizeXS, body-han-XS {
     }
 
-    @mixin typographyTShirtColor .spectrum-Heading--XXXL {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeXXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--XXL {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--XL {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--L {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--M {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeM {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--S {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeS {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--XS {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeXS {
     }
-    @mixin typographyTShirtColor .spectrum-Heading--XXS {
+    @mixin typographyTShirtColor .spectrum-Heading--sizeXXS {
     }
 
-    @mixin typographyTShirtColor .spectrum-Heading-XXXL--light,
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--light,
       heading-light-XXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXL--light, heading-light-XXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXL--light, heading-light-XL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeL--light, heading-light-L {
     }
 
-    @mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy,
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--heavy,
       heading-heavy-XXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXL--heavy, heading-heavy-XXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXL--heavy, heading-heavy-XL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeL--heavy, heading-heavy-L {
     }
 
-    @mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXXL--heading, heading-XXXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXXL--heading, heading-XXL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeXL--heading, heading-XL {
     }
-    @mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {
+    @mixin typographyTShirtColor .spectrum-Heading-sizeL--heading, heading-L {
     }
 
-    @mixin typographyTShirtColor .spectrum-Detail--XL {
+    @mixin typographyTShirtColor .spectrum-Detail--sizeXL {
     }
-    @mixin typographyTShirtColor .spectrum-Detail--L {
+    @mixin typographyTShirtColor .spectrum-Detail--sizeL {
     }
-    @mixin typographyTShirtColor .spectrum-Detail--M {
+    @mixin typographyTShirtColor .spectrum-Detail--sizeM {
     }
-    @mixin typographyTShirtColor .spectrum-Detail--S {
+    @mixin typographyTShirtColor .spectrum-Detail--sizeS {
     }
 
-    @mixin typographyTShirtColor .spectrum-Code--XL, code-XL {
+    @mixin typographyTShirtColor .spectrum-Code--sizeXL, code-XL {
     }
-    @mixin typographyTShirtColor .spectrum-Code--L, code-L {
+    @mixin typographyTShirtColor .spectrum-Code--sizeL, code-L {
     }
-    @mixin typographyTShirtColor .spectrum-Code--M, code-M {
+    @mixin typographyTShirtColor .spectrum-Code--sizeM, code-M {
     }
-    @mixin typographyTShirtColor .spectrum-Code--S, code-S {
+    @mixin typographyTShirtColor .spectrum-Code--sizeS, code-S {
     }
-    @mixin typographyTShirtColor .spectrum-Code--XS, code-XS {
+    @mixin typographyTShirtColor .spectrum-Code--sizeXS, code-XS {
     }
   }
 }
diff --git a/components/well/metadata/well.yml b/components/well/metadata/well.yml
index bf0ac527cb6..1fb886180e9 100644
--- a/components/well/metadata/well.yml
+++ b/components/well/metadata/well.yml
@@ -3,7 +3,7 @@ examples:
   - id: well
     name: Standard
     markup: |
-      <h3 class="spectrum-Heading spectrum-Heading--XXS">Well Label (Optional)</h3>
+      <h3 class="spectrum-Heading spectrum-Heading--sizeXXS">Well Label (Optional)</h3>
       <span class="spectrum-Well">
         <em>Well done is better than well said.</em>
         <br>
diff --git a/site/get-started.pug b/site/get-started.pug
index ffb40767598..dd8de448a58 100644
--- a/site/get-started.pug
+++ b/site/get-started.pug
@@ -19,19 +19,19 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
 
           .spectrum-Site-mainContainer
             .spectrum-Site-page.spectrum-Typography
-              h1.spectrum-Heading.spectrum-Heading--XXL.spectrum-Heading--serif Get Started with Spectrum CSS
+              h1.spectrum-Heading.spectrum-Heading--sizeXXL.spectrum-Heading--serif Get Started with Spectrum CSS
 
-              p.spectrum-Body.spectrum-Body--L We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works.
+              p.spectrum-Body.spectrum-Body--sizeL We have a number of resources that outline how to set up Spectrum CSS for your project, as well as an introductory tutorial that’s a hands-on way to understand how our implementation works.
 
               header(id="resources")
-                h2.spectrum-Heading.spectrum-Heading--M
+                h2.spectrum-Heading.spectrum-Heading--sizeM
                   a(href="#resources").spectrum-BigSubtleLink Resources
                 hr.spectrum-Divider.spectrum-Divider--large
 
               section
-                p.spectrum-Body.spectrum-Body--L If you’re ready to jump in, here’s how to set up Spectrum CSS on our GitHub:
+                p.spectrum-Body.spectrum-Body--sizeL If you’re ready to jump in, here’s how to set up Spectrum CSS on our GitHub:
 
-                ul.spectrum-Body.spectrum-Body--L
+                ul.spectrum-Body.spectrum-Body--sizeL
                   li
                     a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/main/README.md") Full README
                   li
@@ -40,33 +40,33 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     a.spectrum-Link.spectrum-Link--quiet(href="https://github.com/adobe/spectrum-css/blob/main/README-legacy.md") IE 11 / legacy support
 
               header(id="tutorial")
-                h2.spectrum-Heading.spectrum-Heading--M
+                h2.spectrum-Heading.spectrum-Heading--sizeM
                   a(href="#tutorial").spectrum-BigSubtleLink Tutorial: add a Spectrum button
                 hr.spectrum-Divider.spectrum-Divider--large
 
               section
-                p.spectrum-Body.spectrum-Body--L This introductory exercise will show you how to quickly add a Spectrum button to your project.
+                p.spectrum-Body.spectrum-Body--sizeL This introductory exercise will show you how to quickly add a Spectrum button to your project.
 
-                h3.spectrum-Heading.spectrum-Heading--S Installing Spectrum CSS
-                p.spectrum-Body.spectrum-Body--L Spectrum CSS requires a Node.js environment with a minimum version of 10.
+                h3.spectrum-Heading.spectrum-Heading--sizeS Installing Spectrum CSS
+                p.spectrum-Body.spectrum-Body--sizeL Spectrum CSS requires a Node.js environment with a minimum version of 10.
 
-                p.spectrum-Body.spectrum-Body--L First, install the required button dependencies by running:
+                p.spectrum-Body.spectrum-Body--sizeL First, install the required button dependencies by running:
 
                 pre.spectrum-CodeBlock
-                  code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page', util.Prism.languages.markup, 'markup')
+                  code.spectrum-Code.spectrum-Code--sizeS.language-markup!=util.Prism.highlight('$ npm install @spectrum-css/vars @spectrum-css/button @spectrum-css/page', util.Prism.languages.markup, 'markup')
 
-                p.spectrum-Body.spectrum-Body--L Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.
+                p.spectrum-Body.spectrum-Body--sizeL Installed components will be available in the node_modules/@spectrum-css/ folder or on the Spectrum CSS NPM page.
 
-                h3.spectrum-Heading.spectrum-Heading--S Setting up global variables
-                p.spectrum-Body.spectrum-Body--L Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--S button.html]) in your project’s root folder.
+                h3.spectrum-Heading.spectrum-Heading--sizeS Setting up global variables
+                p.spectrum-Body.spectrum-Body--sizeL Create a new HTML file (e.g., #[code.spectrum-Code.spectrum-Code--sizeS button.html]) in your project’s root folder.
 
-                p.spectrum-Body.spectrum-Body--L or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s #[code.spectrum-Code.spectrum-Code--S &lt;html&gt;] tag:
+                p.spectrum-Body.spectrum-Body--sizeL or displaying a button in Spectrum’s light color theme and medium scale, a couple of classes need to be added to the document’s #[code.spectrum-Code.spectrum-Code--sizeS &lt;html&gt;] tag:
 
                 pre.spectrum-CodeBlock
-                  code.spectrum-Code.spectrum-Code--S.language-markup!=util.Prism.highlight('<html class="spectrum spectrum--medium spectrum--light">', util.Prism.languages.markup, 'markup')
+                  code.spectrum-Code.spectrum-Code--sizeS.language-markup!=util.Prism.highlight('<html class="spectrum spectrum--medium spectrum--light">', util.Prism.languages.markup, 'markup')
 
-                h3.spectrum-Heading.spectrum-Heading--S Adding Spectrum CSS
-                p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;head&gt;] tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:
+                h3.spectrum-Heading.spectrum-Heading--sizeS Adding Spectrum CSS
+                p.spectrum-Body.spectrum-Body--sizeL Inside the #[code.spectrum-Code.spectrum-Code--sizeS &lt;head&gt;] tag, include the stylesheets that contain the design system tokens for global variables, scales, and color themes, as well as the stylesheets for the components themselves:
 
                 -
                   htmlMarkup = util.Prism.highlight(`<head>
@@ -77,18 +77,18 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     <link rel="stylesheet" href="node_modules/@spectrum-css/button/dist/index-vars.css">
                   </head>`, util.Prism.languages.markup, 'markup');
                 pre.spectrum-CodeBlock
-                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+                  code.spectrum-Code.spectrum-Code--sizeS.language-markup!=htmlMarkup
 
-                p.spectrum-Body.spectrum-Body--L Inside the #[code.spectrum-Code.spectrum-Code--S &lt;body&gt;] tag, add the markup for a Spectrum button. Note that the example also includes the CSS class name, #[code.spectrum-Code.spectrum-Code--S spectrum-Button--cta], to use the call to action (CTA) option.
+                p.spectrum-Body.spectrum-Body--sizeL Inside the #[code.spectrum-Code.spectrum-Code--sizeS &lt;body&gt;] tag, add the markup for a Spectrum button. Note that the example also includes the CSS class name, #[code.spectrum-Code.spectrum-Code--sizeS spectrum-Button--cta], to use the call to action (CTA) option.
 
                 -
                   htmlMarkup = util.Prism.highlight(`<button class="spectrum-Button spectrum-Button--cta">
                     <span class="spectrum-Button-label">Button</span>
                   </button>`, util.Prism.languages.markup, 'markup');
                 pre.spectrum-CodeBlock
-                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+                  code.spectrum-Code.spectrum-Code--sizeS.language-markup!=htmlMarkup
 
-                p.spectrum-Body.spectrum-Body--L Here’s what your final button.html file should look like:
+                p.spectrum-Body.spectrum-Body--sizeL Here’s what your final button.html file should look like:
 
                 -
                   htmlMarkup = util.Prism.highlight(`<html class="spectrum spectrum--light spectrum--medium">
@@ -106,16 +106,16 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </body>
                   </html>`, util.Prism.languages.markup, 'markup');
                 pre.spectrum-CodeBlock
-                  code.spectrum-Code.spectrum-Code--S.language-markup!=htmlMarkup
+                  code.spectrum-Code.spectrum-Code--sizeS.language-markup!=htmlMarkup
 
                 img(alt="Screenshot of the rendered CTA button in a browser window", src="img/button-screen-shot.png").spectrum-CenteredImage
 
                 header(id="contribute")
-                  h2.spectrum-Heading.spectrum-Heading--M
+                  h2.spectrum-Heading.spectrum-Heading--sizeM
                     a(href="#contribute").spectrum-BigSubtleLink Contribute to Spectrum CSS
                   hr.spectrum-Divider.spectrum-Divider--large
 
-                p.spectrum-Body.spectrum-Body--L We’d love for you to contribute to the Spectrum CSS project. Review the <a href="https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md" class="spectrum-Link spectrum-Link--quiet" target="_blank">contribution guidelines on our GitHub</a> to get started.
+                p.spectrum-Body.spectrum-Body--sizeL We’d love for you to contribute to the Spectrum CSS project. Review the <a href="https://github.com/adobe/spectrum-css/blob/main/.github/CONTRIBUTING.md" class="spectrum-Link spectrum-Link--quiet" target="_blank">contribution guidelines on our GitHub</a> to get started.
 
           include includes/footer.pug
 
diff --git a/site/includes/example.pug b/site/includes/example.pug
index c40a29d085f..64c3e91343f 100644
--- a/site/includes/example.pug
+++ b/site/includes/example.pug
@@ -1,5 +1,5 @@
 article.spectrum-CSSExample
-  h3.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S(id=example.slug)
+  h3.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS(id=example.slug)
     a(href=`#${example.slug}`).spectrum-CSSComponent-link
       =example.name
     div(class=`spectrum-StatusLight spectrum-CSSExample-status spectrum-StatusLight--${util.getStatusLightVariant(example.status)}`)= example.status
diff --git a/site/includes/exampleContent.pug b/site/includes/exampleContent.pug
index 3d193adae58..2a81f68e313 100644
--- a/site/includes/exampleContent.pug
+++ b/site/includes/exampleContent.pug
@@ -1,10 +1,10 @@
 if example.description
   .spectrum-Typography
-    section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--M!= util.markdown.render(example.description)
+    section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--sizeM!= util.markdown.render(example.description)
 
 if example.details
   .spectrum-Typography
-    .section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--M!= util.markdown.render(example.details)
+    .section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--sizeM!= util.markdown.render(example.details)
 
 if example.markup
   section.spectrum-CSSExample-container
@@ -13,5 +13,5 @@ if example.markup
       if example.markup.split('\n').length > 2
         a.js-markup-toggle.spectrum-CSSExample-markupToggle.spectrum-Link(href="#") Show markup
       bdo(dir="ltr")
-        pre.spectrum-Code.spectrum-Code--XS
+        pre.spectrum-Code.spectrum-Code--sizeXS
           code.language-markup!= util.Prism.highlight(example.markup, util.Prism.languages.markup, 'markup')
diff --git a/site/includes/section.pug b/site/includes/section.pug
index 539207fff98..e99a18d1e9d 100644
--- a/site/includes/section.pug
+++ b/site/includes/section.pug
@@ -1,5 +1,5 @@
 header.spectrum-CSSComponent-sectionHeading(id=`${util.getSlug(section.name)}`)
-  h2.spectrum-Heading.spectrum-Heading--M
+  h2.spectrum-Heading.spectrum-Heading--sizeM
     a(href=`#${util.getSlug(section.name)}`).spectrum-BigSubtleLink=`${section.name}`
   hr.spectrum-Divider.spectrum-Divider--large
 
diff --git a/site/includes/sidebar.pug b/site/includes/sidebar.pug
index cf124d5ae55..0212670091f 100644
--- a/site/includes/sidebar.pug
+++ b/site/includes/sidebar.pug
@@ -5,7 +5,7 @@ unless process.env.VRT
         polygon(points="19,0 30,0 30,26")
         polygon(points="11.1,0 0,0 0,26")
         polygon(points="15,9.6 22.1,26 17.5,26 15.4,20.8 10.2,20.8")
-      h2.spectrum-Site-title.spectrum-Heading.spectrum-Heading--M Spectrum CSS
+      h2.spectrum-Site-title.spectrum-Heading.spectrum-Heading--sizeM Spectrum CSS
 
     div#site-search
 
diff --git a/site/index.pug b/site/index.pug
index 3ed509e9b21..02899c2294e 100644
--- a/site/index.pug
+++ b/site/index.pug
@@ -21,38 +21,38 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
             .spectrum-Site-page.spectrum-Typography
               .spectrum-Site-hero
                 .spectrum-Site-heroHeading
-                  h1.spectrum-Heading.spectrum-Heading--XXXL.spectrum-Heading--serif Meet Spectrum CSS
-                p.spectrum-Body.spectrum-Body--XL Spectrum CSS is an open-source implementation of Spectrum, Adobe’s design system. It includes components and resources to make applications more cohesive.
+                  h1.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--serif Meet Spectrum CSS
+                p.spectrum-Body.spectrum-Body--sizeXL Spectrum CSS is an open-source implementation of Spectrum, Adobe’s design system. It includes components and resources to make applications more cohesive.
                 img(alt="Spectrum CSS Hero image" src="img/spectrum-css_illustration_desktop@2x.png?w=976&amp;h=446" srcset="img/spectrum-css_illustration_desktop@2x.png 2x").spectrum-Site-heroImage
 
                 .spectrum-HomeCards
                   .spectrum-HomeCard
                     img.spectrum-HomeCard-image(src="img/illustration_documentation.svg" alt="Documentation illustation")
                     .spectrum-HomeCard-content
-                      h4.spectrum-Heading.spectrum-Heading--S Robust documentation
-                      p.spectrum-Body.spectrum-Body--M Spectrum CSS is designed to be used in partnership with Spectrum’s detailed usage guidelines.
-                      p.spectrum-Body.spectrum-Body--M
+                      h4.spectrum-Heading.spectrum-Heading--sizeS Robust documentation
+                      p.spectrum-Body.spectrum-Body--sizeM Spectrum CSS is designed to be used in partnership with Spectrum’s detailed usage guidelines.
+                      p.spectrum-Body.spectrum-Body--sizeM
                         a.spectrum-Link.spectrum-Link--quiet(href="https://spectrum.adobe.com/" target="_blank") View Spectrum guidelines
 
                   .spectrum-HomeCard
                     img.spectrum-HomeCard-image(src="img/illustration_flexible.svg" alt="Flexible illustation")
                     .spectrum-HomeCard-content
-                      h4.spectrum-Heading.spectrum-Heading--S Flexible
-                      p.spectrum-Body.spectrum-Body--M Our CSS is customizable, powerful, and designed to work with any JavaScript framework.
-                      p.spectrum-Body.spectrum-Body--M
+                      h4.spectrum-Heading.spectrum-Heading--sizeS Flexible
+                      p.spectrum-Body.spectrum-Body--sizeM Our CSS is customizable, powerful, and designed to work with any JavaScript framework.
+                      p.spectrum-Body.spectrum-Body--sizeM
                         a.spectrum-Link.spectrum-Link--quiet(href="get-started.html") Get started
 
                   .spectrum-HomeCard
                     img.spectrum-HomeCard-image(src="img/illustration_tested.svg" alt="Tested illustation")
                     .spectrum-HomeCard-content
-                      h4.spectrum-Heading.spectrum-Heading--S Rigorously tested
-                      p.spectrum-Body.spectrum-Body--M These individually-versioned components have been vetted to be accessible and inclusive of global audiences.
+                      h4.spectrum-Heading.spectrum-Heading--sizeS Rigorously tested
+                      p.spectrum-Body.spectrum-Body--sizeM These individually-versioned components have been vetted to be accessible and inclusive of global audiences.
 
                   .spectrum-HomeCard
                     img.spectrum-HomeCard-image(src="img/illustration_responsive.svg" alt="Responsove illustation")
                     .spectrum-HomeCard-content
-                      h4.spectrum-Heading.spectrum-Heading--S Multi-platform support
-                        p.spectrum-Body.spectrum-Body--M We support evergreen browsers (minus one version) for scalability and flexibility.
+                      h4.spectrum-Heading.spectrum-Heading--sizeS Multi-platform support
+                        p.spectrum-Body.spectrum-Body--sizeM We support evergreen browsers (minus one version) for scalability and flexibility.
 
           include includes/footer.pug
 
diff --git a/site/templates/individualComponent.pug b/site/templates/individualComponent.pug
index 5192206611a..f03cc120038 100644
--- a/site/templates/individualComponent.pug
+++ b/site/templates/individualComponent.pug
@@ -80,21 +80,21 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
     article.spectrum-CSSComponent
 
       header(id=component.slug).spectrum-CSSComponent-heading
-        h1.spectrum-CSSComponent-title.spectrum-Heading.spectrum-Heading--XXXL.spectrum-Heading--serif
+        h1.spectrum-CSSComponent-title.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--serif
           a(href=`#${component.slug}`).spectrum-BigSubtleLink #{component.name}
-        p.spectrum-CSSComponent-version.spectrum-Body.spectrum-Body--S Version #{pkg.version}
+        p.spectrum-CSSComponent-version.spectrum-Body.spectrum-Body--sizeS Version #{pkg.version}
 
       if component.description
-        section.spectrum-CSSComponent-description.spectrum-Body.spectrum-Body--L!= util.markdown.render(component.description)
+        section.spectrum-CSSComponent-description.spectrum-Body.spectrum-Body--sizeL!= util.markdown.render(component.description)
 
       each example in examples
         article.spectrum-CSSExample
           if example != component
             header(id=example.slug)
-              h3.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S #{example.name}
+              h3.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS #{example.name}
 
             if example.description
-              section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--L!= util.markdown.render(example.description)
+              section.spectrum-CSSExample-description.spectrum-Body.spectrum-Body--sizeL!= util.markdown.render(example.description)
 
           if example.markup
 
diff --git a/site/templates/siteComponent.pug b/site/templates/siteComponent.pug
index 3c6a94b2717..483c9926a97 100644
--- a/site/templates/siteComponent.pug
+++ b/site/templates/siteComponent.pug
@@ -131,7 +131,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                             use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
 
               header(id=component.slug).spectrum-CSSComponent-heading
-                h1.spectrum-CSSComponent-title.spectrum-Heading.spectrum-Heading--XXXL.spectrum-Heading--serif
+                h1.spectrum-CSSComponent-title.spectrum-Heading.spectrum-Heading--sizeXXXL.spectrum-Heading--serif
                   a(href=`#${component.slug}`).spectrum-BigSubtleLink #{component.name}
 
               table.spectrum-CSSComponent-detailsTable
@@ -159,10 +159,10 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                         path(d="M22.175 4H34v28L22.175 4zm-8.336 0H2v28L13.839 4zm4.165 10.317l7.538 17.682h-4.939l-2.258-5.632h-5.517l5.176-12.05z")
                     .spectrum-Card-body
                       .spectrum-Card-header
-                        .spectrum-Card-title.spectrum-Heading.spectrum-Heading--XS.
+                        .spectrum-Card-title.spectrum-Heading.spectrum-Heading--sizeXS.
                           View guidelines
                       .spectrum-Card-content
-                        .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--S.
+                        .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--sizeS.
                           Spectrum website
                 a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`https://github.com/adobe/spectrum-css/tree/main/components/${pkg.name.split('/').pop()}` target="_blank")
                   .spectrum-Card-preview.spectrum-CSSComponent-resource--github
@@ -170,10 +170,10 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                       path(d="M17.988 2a16.291 16.291 0 0 0-5.147 31.747c.814.149 1.111-.354 1.111-.786 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184a4.32 4.32 0 0 0-1.809-2.383c-1.479-1.01.112-.99.112-.99a3.42 3.42 0 0 1 2.495 1.679 3.468 3.468 0 0 0 4.741 1.353 3.482 3.482 0 0 1 1.034-2.177C11.4 25.078 7.6 23.68 7.6 17.438a6.3 6.3 0 0 1 1.677-4.371 5.863 5.863 0 0 1 .16-4.311s1.368-.438 4.479 1.67a15.451 15.451 0 0 1 8.157 0c3.109-2.108 4.475-1.67 4.475-1.67a5.857 5.857 0 0 1 .162 4.311 6.286 6.286 0 0 1 1.674 4.371c0 6.258-3.808 7.635-7.437 8.038a3.888 3.888 0 0 1 1.106 3.017c0 2.177-.02 3.934-.02 4.468 0 .436.293.943 1.12.784A16.292 16.292 0 0 0 17.988 2z")
                   .spectrum-Card-body
                     .spectrum-Card-header
-                      .spectrum-Card-title.spectrum-Heading.spectrum-Heading--XS.
+                      .spectrum-Card-title.spectrum-Heading.spectrum-Heading--sizeXS.
                         View repository
                     .spectrum-Card-content
-                      .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--S.
+                      .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--sizeS.
                         GitHub
                 a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`https://www.npmjs.com/package/${pkg.name}` target="_blank")
                   .spectrum-Card-preview.spectrum-CSSComponent-resource--npm
@@ -184,23 +184,23 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                       polygon(fill="#FFFFFF" points="11,1 11,5 13,5 13,2 14,2 14,5 15,5 15,2 16,2 16,5 17,5 17,1 ")
                   .spectrum-Card-body
                     .spectrum-Card-header
-                      .spectrum-Card-title.spectrum-Heading.spectrum-Heading--XS.
+                      .spectrum-Card-title.spectrum-Heading.spectrum-Heading--sizeXS.
                         View package
                     .spectrum-Card-content
-                      .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--S.
+                      .spectrum-Card-subtitle.spectrum-Detail.spectrum-Detail--sizeS.
                         npm
 
               if component.description
                 header.spectrum-CSSComponent-sectionHeading(id="usage")
-                  h2.spectrum-Heading.spectrum-Heading--M
+                  h2.spectrum-Heading.spectrum-Heading--sizeM
                     a(href="#usage").spectrum-BigSubtleLink Usage notes
                   hr.spectrum-Divider.spectrum-Divider--large
                 section.spectrum-CSSComponent-description
-                  div.spectrum-Body.spectrum-Body--M!= util.markdown.render(component.description)
+                  div.spectrum-Body.spectrum-Body--sizeM!= util.markdown.render(component.description)
 
               if examples.length
                 header.spectrum-CSSComponent-sectionHeading(id="variants")
-                  h2.spectrum-Heading.spectrum-Heading--M
+                  h2.spectrum-Heading.spectrum-Heading--sizeM
                     a(href="#variants").spectrum-BigSubtleLink=`${component.examplesHeading ? component.examplesHeading : 'Variants'}`
                   hr.spectrum-Divider.spectrum-Divider--large
                 each example in examples
diff --git a/site/truncation.pug b/site/truncation.pug
index 3c7d2a23ffa..25e6f3eee09 100644
--- a/site/truncation.pug
+++ b/site/truncation.pug
@@ -34,10 +34,10 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
           .spectrum-Site-mainContainer
             .spectrum-Site-page.spectrum-Typography
 
-              h1.spectrum-Heading.spectrum-Heading--XL A study of truncation across a number of components
+              h1.spectrum-Heading.spectrum-Heading--sizeXL A study of truncation across a number of components
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Action Button (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Action Button (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <button class="spectrum-ActionButton" style="width: 128px">
@@ -45,7 +45,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </button>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Action Button with Icon (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Action Button with Icon (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <button class="spectrum-ActionButton" style="width: 128px">
@@ -56,7 +56,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </button>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Action Button (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Action Button (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <button class="spectrum-ActionButton spectrum-ActionButton--quiet" style="width: 128px">
@@ -64,7 +64,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </button>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Action Button with Icon (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Action Button with Icon (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <button class="spectrum-ActionButton spectrum-ActionButton--quiet" style="width: 128px">
@@ -75,7 +75,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </button>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Quick Actions (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Quick Actions (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-QuickActions-overlay" style="padding: 40px;">
@@ -92,7 +92,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Tag (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Tag (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Tags-item" role="listitem" tabindex="0" style="width: 168px;">
@@ -103,7 +103,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Tabs (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Tabs (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Tabs spectrum-Tabs--horizontal" style="width: 212px">
@@ -119,7 +119,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Combobox (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Combobox (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-InputGroup">
@@ -134,7 +134,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Picker (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Picker (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Picker" style="width: 240px;">
@@ -147,7 +147,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Textfield (truncated)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Textfield (truncated)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Textfield">
diff --git a/site/util.js b/site/util.js
index db05bacf281..223667fc79f 100644
--- a/site/util.js
+++ b/site/util.js
@@ -31,8 +31,8 @@ let ruleClassnames = {
   'tbody_open': 'spectrum-Table-body',
   'th_open': 'spectrum-Table-headCell',
   'td_open': 'spectrum-Table-cell',
-  'code_inline': 'spectrum-Code spectrum-Code--S',
-  'code_block': 'spectrum-Code spectrum-Code--S'
+  'code_inline': 'spectrum-Code spectrum-Code--sizeS',
+  'code_block': 'spectrum-Code spectrum-Code--sizeS'
 };
 
 for (let [rule, className] of Object.entries(ruleClassnames)) {
@@ -68,11 +68,11 @@ md.renderer.rules.code_inline = function(tokens, idx, options, env, self) {
 };
 
 const headingMap = {
-  'h1': 'spectrum-Heading spectrum-Heading--L',
-  'h2': 'spectrum-Heading spectrum-Heading--M',
-  'h3': 'spectrum-Heading spectrum-Heading--S',
-  'h4': 'spectrum-Heading spectrum-Heading--XS',
-  'h5': 'spectrum-Heading spectrum-Heading--XXS'
+  'h1': 'spectrum-Heading spectrum-Heading--sizeL',
+  'h2': 'spectrum-Heading spectrum-Heading--sizeM',
+  'h3': 'spectrum-Heading spectrum-Heading--sizeS',
+  'h4': 'spectrum-Heading spectrum-Heading--sizeXS',
+  'h5': 'spectrum-Heading spectrum-Heading--sizeXXS'
 };
 
 md.renderer.rules.heading_open = function(tokens, idx, options, env, self) {
diff --git a/site/wrapping.pug b/site/wrapping.pug
index dc837a9388d..143cccd3b0b 100644
--- a/site/wrapping.pug
+++ b/site/wrapping.pug
@@ -44,16 +44,16 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
           .spectrum-Site-mainContainer
             .spectrum-Site-page.spectrum-Typography
 
-              h1.spectrum-Heading.spectrum-Heading--XL A study of wrapping across a number of components
+              h1.spectrum-Heading.spectrum-Heading--sizeXL A study of wrapping across a number of components
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Link (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Link (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
-                    <div style="width: 146px" class="spectrum-Body spectrum-Body--S">See our <a href="#" class="spectrum-Link">Privacy Policy</a> for more details or <a href="#" class="spectrum-Link">opt-out at any time</a>.</div>
+                    <div style="width: 146px" class="spectrum-Body spectrum-Body--sizeS">See our <a href="#" class="spectrum-Link">Privacy Policy</a> for more details or <a href="#" class="spectrum-Link">opt-out at any time</a>.</div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Toast (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Toast (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Toast" style="width: 280px;">
@@ -69,7 +69,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                       </div>
                     </div>
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Toast with Icon and Button (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Toast with Icon and Button (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Toast spectrum-Toast--info" style="width: 318px;">
@@ -92,7 +92,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Tooltip (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Tooltip (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <span class="spectrum-Tooltip spectrum-Tooltip--top is-open">
@@ -101,7 +101,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </span>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Tooltip with Icon (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Tooltip with Icon (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <span class="spectrum-Tooltip spectrum-Tooltip--top spectrum-Tooltip--info is-open">
@@ -113,7 +113,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </span>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Coach Mark (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Coach Mark (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-CoachMarkPopover" style="width: 226px">
@@ -137,7 +137,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Dialog (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Dialog (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example.spectrum-CSSExample-example--overlay
                     <button class="spectrum-Button spectrum-Button--overBackground spectrum-CSSExample-overlayShowButton" onclick="openDialog(this.nextElementSibling)">Open Dialog</button>
@@ -164,7 +164,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Button (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Button (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="max-width: 168px; margin: 0 0 10px 0">
@@ -184,7 +184,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Menu (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Menu (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Popover is-open" style="position: relative; width: 176px">
@@ -205,7 +205,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Menu with Icons (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Menu with Icons (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Popover is-open" style="position: relative; width: 176px">
@@ -231,7 +231,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Side Navigation (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Side Navigation (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <nav style="width: 170px;">
@@ -249,7 +249,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </nav>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Checkbox (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Checkbox (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <label class="spectrum-Checkbox">
@@ -279,7 +279,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </label>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Radio (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Radio (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Radio">
@@ -295,7 +295,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Switch (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Switch (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Switch">
@@ -311,7 +311,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Barloader (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Barloader (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="margin: 20px 0; width: 168px">
@@ -325,7 +325,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Meter (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Meter (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="margin: 20px 0;">
@@ -339,7 +339,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Combobox (wrapping label)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Combobox (wrapping label)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="width: 160px">
@@ -356,7 +356,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                       </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Picker (wrapping label)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Picker (wrapping label)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="width: 160px">
@@ -372,7 +372,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Textfield (wrapping label)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Textfield (wrapping label)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div style="width: 160px">
@@ -383,7 +383,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Slider (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Slider (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-Slider spectrum-Slider--filled" style="width: 208px">
@@ -401,7 +401,7 @@ html(lang='en-US' dir="ltr").spectrum.spectrum--light.spectrum--medium
                     </div>
 
               article.spectrum-CSSExample
-                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--S Status Light (wrapping)
+                h5.spectrum-CSSExample-heading.spectrum-Heading.spectrum-Heading--sizeS Status Light (wrapping)
                 section.spectrum-CSSExample-container
                   .spectrum-CSSExample-example
                     <div class="spectrum-StatusLight spectrum-StatusLight--positive">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index f8feb9610ee..d71f21a8c67 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -51,16 +51,12 @@ const postcssReal = require('postcss');
  * @returns {string} Spectrum CSS t-shirt sized token name
  */
 function getTShirtTokenName(name) {
-  tokenName = name.replace(/\.?([A-Z]{,1}$ |[0-9])/g,
-    function (x, y) {
-      return '-' + y
-    })
-    .replace(/([A-Z]{1,})/g,
-      function (x, y) {
-        return '-' + y
-      })
-    .replace(/^-/, '');
-  tokenName = tokenName.replace('.spectrum--', '').replace('--', '');
+  tokenName = name
+    .replace(/-{1,2}(size)([A-Z]*)/, (match, p1, p2) => `--${p2}`)
+    .replace(/\.?([A-Z]{,1}$ |[0-9])/g, (match, p1) => `-${p1}`)
+    .replace(/([A-Z]{1,})/g, (match, p1) => `-${p1}`)
+    .replace(/^-/, "");
+  tokenName = tokenName.replace(".spectrum--", "").replace("--", "");
   tokenName = tokenName.toLowerCase();
   return tokenName;
 }
@@ -205,7 +201,7 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
 
           // overwrite-support for the Typography-V3 <em> & <strong> selectors
           // sharing the same classname ".spectrum-Detail". This will be added like
-          // ".spectrum-Detail--XL em {}"
+          // ".spectrum-Detail--sizeXL em {}"
           addStrongAndEmphasisChildren = (name.includes('.spectrum-Detail')) ? true : false;
 
           var output = getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren, showIndicatorBorder = false);