diff --git a/README.md b/README.md
index bb92c623078..9ab52f15b96 100644
--- a/README.md
+++ b/README.md
@@ -136,6 +136,7 @@ When this file is imported, if in updated version of `@spectrum-css/vars` change
 
 In most cases, this file will not be required, so you can safely ignore it. If you see unexpected visual changes creeping into components that you have not updated, `dist/vars.css` may correct them.
 
+
 ## Contributing
 
 Check out the [contributing guidelines](.github/CONTRIBUTING.md) for quick start information, and head over to the [component documentation](components/README.md) and [bundle documentation](bundles/README.md) for more information.
@@ -222,6 +223,8 @@ The following tasks are available:
 - `gulp packageLint` - Lint the `package.json` file for each component in the monorepo
 - `gulp readmeLint` - Generate a generic `README.md` file for each component in the monorepo
 
+
+
 ## Testing
 
 Visual regression testing is implemented by [BackstopJS](https://github.com/garris/BackstopJS). In order to avoid browser rendering inconsistent issue on different environments, the test needs to run inside of docker container.
@@ -256,6 +259,9 @@ Both `backstop:test` and `backstop:docker:test` accept arguments to customize yo
 - `npm run backstop:docker:test themes=lightest,light scales=medium,large radio` - Run test for `radio` and its dependents components with color stop as `lightest` and `light` and scale as `medium` and `large`. It means that a single scenario will run 4 times.
 - `npm run backstop:docker:test themes=lightest,light,dark,darkest scales=medium,large` - Run test for all the components with all the color and scale combinations. It means that a single scenario will be run 8 times.
 
+___
+
+
 ## Releasing
 
 ### Releasing individual components
diff --git a/components/button/metadata/actionbutton.yml b/components/button/metadata/actionbutton.yml
index c34221ec932..7b6b4fee37d 100644
--- a/components/button/metadata/actionbutton.yml
+++ b/components/button/metadata/actionbutton.yml
@@ -191,6 +191,7 @@ examples:
       </button>
   - id: actionbutton-quiet
     name: Quiet
+    description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html).
     markup: |
       <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
         <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
diff --git a/components/button/metadata/tool.yml b/components/button/metadata/tool.yml
index 724a2bb0ea3..b5c174a7669 100644
--- a/components/button/metadata/tool.yml
+++ b/components/button/metadata/tool.yml
@@ -1,7 +1,8 @@
 name: Tool
-status: Verified
+dnaStatus: Deprecated
 description: The tool button.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/tool/
+hide: true
 examples:
   - name: Standard
     markup: |
diff --git a/components/buttongroup/metadata/buttongroup.yml b/components/buttongroup/metadata/buttongroup.yml
index 72dbaf450a9..2167dafbd38 100644
--- a/components/buttongroup/metadata/buttongroup.yml
+++ b/components/buttongroup/metadata/buttongroup.yml
@@ -1,5 +1,5 @@
 name: Button Group
-SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/button/
+SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
 examples:
   - id: buttongroup
     name: Horizontal
diff --git a/components/commons/fonts.css b/components/commons/fonts.css
index 61c2507ad13..7290de994c0 100644
--- a/components/commons/fonts.css
+++ b/components/commons/fonts.css
@@ -27,15 +27,15 @@ governing permissions and limitations under the License.
   --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
   */
 
-  --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
-  --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4  Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-base: var(--spectrum-alias-body-text-font-family);
+  --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
+  --spectrum-font-family-he:  var(--spectrum-alias-font-family-he);
+  --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhans: var(--spectrum-alias-font-family-zhhans);
+  --spectrum-font-family-ko: var(--spectrum-alias-font-family-ko);
+  --spectrum-font-family-ja: var(--spectrum-alias-font-family-ja);
+  --spectrum-font-family-han: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhant: var(--spectrum-alias-font-family-zh);
   --spectrum-text-size: var(--spectrum-alias-font-size-default);
   --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
   --spectrum-text-size-text-label: var(--spectrum-label-text-size);
diff --git a/components/dropzone/metadata/dropzone.yml b/components/dropzone/metadata/dropzone.yml
index e0d460cec4a..adcd6530c04 100644
--- a/components/dropzone/metadata/dropzone.yml
+++ b/components/dropzone/metadata/dropzone.yml
@@ -7,7 +7,7 @@ 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--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
           <p class="spectrum-Body--secondary 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>
@@ -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--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
           <p class="spectrum-Body--secondary 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 d56811ab5cf..6392203b607 100644
--- a/components/illustratedmessage/metadata/illustratedmessage.yml
+++ b/components/illustratedmessage/metadata/illustratedmessage.yml
@@ -7,7 +7,7 @@ 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--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
+        <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
         <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
       </div>
   - id: illustratedmessage-default
@@ -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--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+        <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
         <p class="spectrum-Body--secondary 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/site/index.css b/components/site/index.css
index 77844071706..bec0a0dc9a3 100644
--- a/components/site/index.css
+++ b/components/site/index.css
@@ -364,7 +364,7 @@ governing permissions and limitations under the License.
 
 .spectrum-CSSComponent-resource--adobe {
   color: rgb(255, 2, 1) !important;
-  background-color: rgba(255, 2, 1, 0.1) !important;
+  background-color: var(--spectrum-global-color-gray-100) !important;
 }
 
 .spectrum-CSSComponent-resource--github {
diff --git a/components/typography/index.css b/components/typography/index.css
index bc33ab6efb7..a427d3d1758 100644
--- a/components/typography/index.css
+++ b/components/typography/index.css
@@ -13,6 +13,71 @@ governing permissions and limitations under the License.
 @import '../commons/index.css';
 @import 'font.css';
 
+/**
+ Support for Typography
+
+ Ordered by numeric, legacy (v3) and t-shirt sized (v4) versions.
+ V4 is added last to prevent fallbacks to v3.
+**/
+
+
+
+/**
+  Legacy Spectrum V3, fallbacks:
+
+  The &.spectrum makes it so users can do <div class="spectrum spectrum--large"> and still get the right font sizes
+  Without this, they would have to do <div class="spectrum--large"><div class="spectrum">, which makes no sense
+*/
+&.spectrum,
+&.spectrum-Body,
+.spectrum,
+.spectrum-Body {
+  font-size: var(--spectrum-body-4-text-size);
+  font-weight: var(--spectrum-body-4-text-font-weight);
+  line-height: var(--spectrum-body-4-text-line-height);
+  font-style: var(--spectrum-body-4-text-font-style);
+}
+
+.spectrum-Body--italic {
+  font-style: var(--spectrum-body-4-emphasis-text-font-style);
+}
+
+.spectrum-Body--large {
+  @extend .spectrum-Body2;
+}
+
+.spectrum-Body--small {
+  @extend .spectrum-Body5;
+}
+
+.spectrum-Body--secondary {
+  @extend .spectrum-Body4;
+}
+
+.spectrum-Heading--display {
+  @extend .spectrum-Heading2--display.spectrum-Heading2--quiet;
+}
+
+.spectrum-Heading--pageTitle {
+  @extend .spectrum-Heading2--quiet;
+}
+
+.spectrum-Heading--subtitle1 {
+  @extend .spectrum-Heading4;
+}
+
+.spectrum-Heading--subtitle2 {
+  @extend .spectrum-Heading6;
+}
+
+.spectrum-Heading--subtitle3 {
+  @extend .spectrum-Subheading;
+}
+
+
+/**
+* Legacy numeric-based typography (depreciated)
+*/
 @mixin typography .spectrum-Body1 {}
 @mixin typography .spectrum-Body2 {}
 @mixin typography .spectrum-Body3 {}
@@ -130,52 +195,295 @@ governing permissions and limitations under the License.
   font-family: var(--spectrum-body-code-5-text-font-family);
 }
 
-/*
-  The &.spectrum makes it so users can do <div class="spectrum spectrum--large"> and still get the right font sizes
-  Without this, they would have to do <div class="spectrum--large"><div class="spectrum">, which makes no sense
-*/
-&.spectrum,
-&.spectrum-Body,
-.spectrum,
+
+
+
+/**
+ * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt)
+ *
+ * Adds typography sizing and margins to be processed by
+ * mixins that are auto-generated in tools/component-builder/css/processor.js
+ *
+ */
+
+
+
+/* t-shirt size-based typography */
+
+/* Headings t-shirt sizes */
+
+/* Discrete rules for Heading: regular, heavy, light */
+@mixin typographyTShirtSizes .spectrum-Heading--XXXL {}
+@mixin typographyTShirtSizes .spectrum-Heading--XXL {}
+@mixin typographyTShirtSizes .spectrum-Heading--XL {}
+@mixin typographyTShirtSizes .spectrum-Heading--L {}
+@mixin typographyTShirtSizes .spectrum-Heading--M {}
+@mixin typographyTShirtSizes .spectrum-Heading--S {}
+@mixin typographyTShirtSizes .spectrum-Heading--XS {}
+@mixin typographyTShirtSizes .spectrum-Heading--XXS {}
+
+/* Standard SUIT rules for Heading: regular, serif, heavy, light */
+.spectrum-Heading {
+  font-family: var(--spectrum-heading-xl-text-font-family);
+  font-weight: var(--spectrum-heading-xl-text-font-weight);
+
+  em, .spectrum-Heading-emphasis {
+    font-style: var(--spectrum-heading-xl-emphasis-text-font-style);
+  }
+
+  strong, .spectrum-Heading-strong {
+    font-weight: var(--spectrum-heading-xl-strong-text-font-weight);
+  }
+}
+
+
+.spectrum-Heading--serif {
+  font-family: var(--spectrum-body-serif-xl-text-font-family);
+}
+
+
+.spectrum-Heading--heavy {
+  font-weight: var(--spectrum-heading-heavy-xl-text-font-weight);
+
+  em, .spectrum-Heading-emphasis {
+    font-style: var(--spectrum-heading-heavy-xl-emphasis-text-font-style);
+  }
+
+  strong, .spectrum-Heading-strong {
+    font-weight: var(--spectrum-heading-heavy-xl-strong-text-font-weight);
+  }
+}
+
+
+
+.spectrum-Heading--light {
+  font-weight: var(--spectrum-heading-light-xl-emphasis-text-font-weight);
+
+  em, .spectrum-Heading-emphasis {
+    font-style: var(--spectrum-heading-light-xl-emphasis-text-font-style);
+  }
+
+  strong, .spectrum-Heading-strong {
+    font-weight: var(--spectrum-heading-light-xl-strong-text-font-weight);
+  }
+}
+
+
+/* Body t-shirt sizes */
+@mixin typographyTShirtSizes .spectrum-Body--XXXL { }
+@mixin typographyTShirtSizes .spectrum-Body--XXL {}
+@mixin typographyTShirtSizes .spectrum-Body--XL {}
+@mixin typographyTShirtSizes .spectrum-Body--L {}
+@mixin typographyTShirtSizes .spectrum-Body--M {}
+@mixin typographyTShirtSizes .spectrum-Body--S {}
+@mixin typographyTShirtSizes .spectrum-Body--XS {}
+
 .spectrum-Body {
-  font-size: var(--spectrum-body-4-text-size);
-  font-weight: var(--spectrum-body-4-text-font-weight);
-  line-height: var(--spectrum-body-4-text-line-height);
-  font-style: var(--spectrum-body-4-text-font-style);
+  font-family: var(--spectrum-body-xl-text-font-family);
+
+  strong, .spectrum-Body-strong {
+    font-weight: var(--spectrum-body-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Body-emphasis {
+    font-style: var(--spectrum-body-xl-emphasis-text-font-style);
+  }
 }
 
-.spectrum-Body--italic {
-  font-style: var(--spectrum-body-4-emphasis-text-font-style);
+.spectrum-Body--serif {
+  font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
-.spectrum-Body--large {
-  @extend .spectrum-Body2;
+
+/* Detail / former subheadings t-shirt sizes */
+/* Standard SUIT rules for Detail: regular, serif, light */
+.spectrum-Detail {
+  font-family: var(--spectrum-heading-xl-text-font-family);
+
+  strong, .spectrum-Detail-strong {
+    font-weight: var(--spectrum-detail-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Detail-emphasis {
+    font-style: var(--spectrum-detail-xl-emphasis-text-font-style);
+  }
 }
 
-.spectrum-Body--small {
-  @extend .spectrum-Body5;
+.spectrum-Detail--light {
+  font-style: var(--spectrum-detail-light-xl-text-font-style);
+  font-weight: var(--spectrum-detail-light-xl-text-font-weight);
 }
 
-.spectrum-Body--secondary {
-  @extend .spectrum-Body4;
+
+.spectrum-Detail--serif {
+  font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
-.spectrum-Heading--display {
-  @extend .spectrum-Heading2--display.spectrum-Heading2--quiet;
+
+/* Discrete rules for Detail: regular, light */
+@mixin typographyTShirtSizes .spectrum-Detail--XL { }
+@mixin typographyTShirtSizes .spectrum-Detail--L {}
+@mixin typographyTShirtSizes .spectrum-Detail--M {}
+@mixin typographyTShirtSizes .spectrum-Detail--S {}
+
+/* @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 {} */
+
+
+
+/* Code t-shirt sizes */
+.spectrum-Code {
+  font-family: var(--spectrum-heading-xl-text-font-family);
+
+  strong, .spectrum-Code-strong {
+    font-weight: var(--spectrum-code-xl-strong-text-font-weight);
+  }
+
+  em, .spectrum-Code-emphasis {
+    font-style: var(--spectrum-code-xl-emphasis-text-font-style);
+  }
 }
 
-.spectrum-Heading--pageTitle {
-  @extend .spectrum-Heading2--quiet;
+
+.spectrum-Code--serif {
+  font-family: var(--spectrum-body-serif-xl-text-font-family);
 }
 
-.spectrum-Heading--subtitle1 {
-  @extend .spectrum-Heading4;
+
+@mixin typographyTShirtSizes .spectrum-Code--XL, code-XL, true {
+  font-family: var(--spectrum-code-xl-text-font-family);
+}
+@mixin typographyTShirtSizes .spectrum-Code--L, code-L, true {
+  font-family: var(--spectrum-code-l-text-font-family);
+}
+@mixin typographyTShirtSizes .spectrum-Code--M, code-M, true {
+  font-family: var(--spectrum-code-m-text-font-family);
+}
+@mixin typographyTShirtSizes .spectrum-Code--S, code-S, true {
+  font-family: var(--spectrum-code-s-text-font-family);
+}
+@mixin typographyTShirtSizes .spectrum-Code--XS, code-XS, true {
+  font-family: var(--spectrum-code-xs-text-font-family);
 }
 
-.spectrum-Heading--subtitle2 {
-  @extend .spectrum-Heading6;
+/* Margins for headings and body */
+.spectrum-Typography {
+  @mixin typographyTShirtMargins .spectrum-Heading--XXXL {}
+  @mixin typographyTShirtMargins .spectrum-Heading--XXL {}
+  @mixin typographyTShirtMargins .spectrum-Heading--XL {}
+  @mixin typographyTShirtMargins .spectrum-Heading--L {}
+  @mixin typographyTShirtMargins .spectrum-Heading--M {}
+  @mixin typographyTShirtMargins .spectrum-Heading--S {}
+  @mixin typographyTShirtMargins .spectrum-Heading--XS {}
+  @mixin typographyTShirtMargins .spectrum-Heading--XXS {}
+
+  @mixin typographyTShirtMargins .spectrum-Body--XXXL {}
+  @mixin typographyTShirtMargins .spectrum-Body--XXL {}
+  @mixin typographyTShirtMargins .spectrum-Body--XL {}
+  @mixin typographyTShirtMargins .spectrum-Body--L {}
+  @mixin typographyTShirtMargins .spectrum-Body--M {}
+  @mixin typographyTShirtMargins .spectrum-Body--S {}
+  @mixin typographyTShirtMargins .spectrum-Body--XS {}
 }
 
-.spectrum-Heading--subtitle3 {
-  @extend .spectrum-Subheading;
+
+/* International support */
+.spectrum {
+  &:lang(ja),
+  &:lang(ko),
+  &:lang(zh) {
+    @mixin typographyTShirtSizes .spectrum-Heading--XXXL, heading-han-XXXL {}
+    @mixin typographyTShirtSizes .spectrum-Heading--XXL, heading-han-XXL {}
+    @mixin typographyTShirtSizes .spectrum-Heading--XL, heading-han-XL {}
+    @mixin typographyTShirtSizes .spectrum-Heading--L, heading-han-L {}
+    @mixin typographyTShirtSizes .spectrum-Heading--M, heading-han-M {}
+    @mixin typographyTShirtSizes .spectrum-Heading--S, heading-han-S {}
+    @mixin typographyTShirtSizes .spectrum-Heading--XS, heading-han-XS {}
+    @mixin typographyTShirtSizes .spectrum-Heading--XXS, heading-han-XXS {}
+
+
+    .spectrum-Heading--heavy {
+      font-weight: var(--spectrum-heading-han-xl-text-font-weight);
+
+      em, .spectrum-Heading--emphasis {
+        font-style: var(--spectrum-heading-han-heavy-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-heading-han-heavy-xl-emphasis-text-font-weight);
+      }
+
+      strong, .spectrum-Heading--strong {
+        font-style: var(--spectrum-heading-heavy-xl-strong-text-font-style);
+        font-weight: var(--spectrum-heading-heavy-xl-strong-text-font-weight);
+      }
+    }
+
+
+    .spectrum-Heading--light {
+      font-weight: var(--spectrum-heading-han-xl-text-font-weight);
+
+      em, .spectrum-Heading--emphasis {
+        font-style: var(--spectrum-heading-han-light-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-heading-han-light-xl-emphasis-text-font-weight);
+      }
+
+      strong, .spectrum-Heading--strong {
+        font-style: var(--spectrum-heading-han-light-xl-strong-text-font-style);
+        font-weight: var(--spectrum-heading-han-light-xl-strong-text-font-weight);
+      }
+    }
+
+
+    @mixin typographyTShirtSizes .spectrum-Body--XXXL, body-han-XXXL {}
+    @mixin typographyTShirtSizes .spectrum-Body--XXL, body-han-XXL {}
+    @mixin typographyTShirtSizes .spectrum-Body--XL, body-han-XL {}
+    @mixin typographyTShirtSizes .spectrum-Body--L, body-han-L {}
+    @mixin typographyTShirtSizes .spectrum-Body--M, body-han-M {}
+    @mixin typographyTShirtSizes .spectrum-Body--S, body-han-S {}
+    @mixin typographyTShirtSizes .spectrum-Body--XS, body-han-XS {}
+
+    @mixin typographyTShirtSizes .spectrum-Detail--XL, detail-han-xl {}
+    @mixin typographyTShirtSizes .spectrum-Detail--L, detail-han-l {}
+    @mixin typographyTShirtSizes .spectrum-Detail--M, detail-han-m {}
+    @mixin typographyTShirtSizes .spectrum-Detail--S, detail-han-s {}
+
+
+    .spectrum-Detail--light {
+      font-weight: var(--spectrum-detail-han-xl-text-font-weight);
+
+
+      em, .spectrum-Detail--emphasis {
+        font-style: var(--spectrum-detail-han-light-xl-emphasis-text-font-style);
+        font-weight: var(--spectrum-detail-han-light-xl-emphasis-text-font-weight);
+      }
+
+      strong, .spectrum-Detail--strong {
+        font-style: var(--spectrum-detail-han-light-xl-strong-text-font-style);
+        font-weight: var(--spectrum-detail-han-light-xl-strong-text-font-weight);
+      }
+    }
+
+
+
+    @mixin typographyTShirtSizes .spectrum-Code--XL, code-han-XL, true {
+      font-family: var(--spectrum-code-han-xl-text-font-family);
+    }
+
+    @mixin typographyTShirtSizes .spectrum-Code--L, code-han-L, true {
+      font-family: var(--spectrum-code-han-l-text-font-family);
+    }
+
+    @mixin typographyTShirtSizes .spectrum-Code--M, code-han-M, true {
+      font-family: var(--spectrum-code-han-m-text-font-family);
+    }
+
+    @mixin typographyTShirtSizes .spectrum-Code--S, code-han-S, true {
+      font-family: var(--spectrum-code-han-s-text-font-family);
+    }
+    @mixin typographyTShirtSizes .spectrum-Code--XS, 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
new file mode 100644
index 00000000000..6ba538def54
--- /dev/null
+++ b/components/typography/metadata/typography-body.yml
@@ -0,0 +1,67 @@
+name: Typography Body
+id: body-m
+description: Body is a typography component primarily used within Spectrum components and for blocks of text.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/body/
+examples:
+  - id: body-m
+    name: Body
+    status: Verified
+    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>
+      </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>
+      </div>
+
+  - id: heading-m
+    name: Standard
+    status: Verified
+    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--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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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
diff --git a/components/typography/metadata/typography-code.yml b/components/typography/metadata/typography-code.yml
new file mode 100644
index 00000000000..1b59bc74b09
--- /dev/null
+++ b/components/typography/metadata/typography-code.yml
@@ -0,0 +1,20 @@
+name: Typography Code
+id: code-m
+description: Code is a typography component used for text that represents code.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/code/
+examples:
+  - id: code-m
+    name: Typography - Code
+    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
+      wrapped in
+      pre tags for
+      multiline
+      goodness</code></pre>
\ No newline at end of file
diff --git a/components/typography/metadata/typography-deprecated.yml b/components/typography/metadata/typography-deprecated.yml
index 84f9e7cf4a4..93d4ca7f908 100644
--- a/components/typography/metadata/typography-deprecated.yml
+++ b/components/typography/metadata/typography-deprecated.yml
@@ -1,19 +1,181 @@
-id: heading-display
 name: Typography (Deprecated)
+description: Deprecated typography components. The [new Typography components](typography.html) should be used instead.
 status: Deprecated
-details: These styles can be replicated using new Typography classes
-description: Legacy typography elements.
+hide: true
 examples:
-  - id: heading-display
+  - id: heading-1
     name: Standard
+    description: Typography elements paired to display clear content hierarchies.
     markup: |
-      <h1 class="spectrum-Heading--display">Display (h1)</h1>
-      <h2 class="spectrum-Heading--pageTitle">Page Title (h2)</h2>
-      <h2 class="spectrum-Heading--subtitle1">Subtitle 1 (h2)</h2>
-      <h3 class="spectrum-Heading--subtitle2">Subtitle 2 (h3)</h3>
-      <h4 class="spectrum-Heading--subtitle3">Subtitle 3 (h4)</h4>
-      <p class="spectrum-Body--small">Small Body Text</p>
-      <p class="spectrum-Body">Default Body Text</p>
-      <p class="spectrum-Body--secondary">Secondary Body Text</p>
-      <p class="spectrum-Body--italic"> Body Text Italic</p>
-      <p class="spectrum-Body--large">Large Body Text</p>
+      <div class="spectrum-Typography">
+        <h1 class="spectrum-Heading1">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body1">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-Body1">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-Heading2">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body2">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-Body2">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-Heading2">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body2">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-Body2">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-Heading3">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body3">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-Body3">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-Heading4">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body4">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-Body4">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-Heading5">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body5">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-Body5">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-Heading6">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body5">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-Body5">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-Subheading">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body4">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-Body4">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>
+      </div>
+  - id: heading-1
+    name: Heading
+    description: Headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+        <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
+        <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
+        <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
+        <p class="spectrum-Subheading">Subheading <em>Subheading Emphasis</em> <strong>Subheading Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Heading (Strong)
+    description: Strong headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Heading (Quiet)
+    description: Quiet headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display
+    description: Display headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display (Strong)
+    description: Strong display headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display (Quiet)
+    description: Quiet display headings for typography.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Body
+    description: Default body text sizes.
+    markup: |
+      <div class="spectrum">
+        <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
+        <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
+        <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
+        <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
+        <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
+        <p class="spectrum-Detail">Detail Text <em>Detail Emphasis</em> <strong>Detail Strong</strong>.</p>
+      </div>
+      <br/>
+      <div class="spectrum-Article">
+        <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
+        <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
+        <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
+        <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
+        <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
+        <p class="spectrum-Detail">Detail Text <em>Detail Emphasis</em> <strong>Detail Strong</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Article
+    description: Typography elements paired to display clear content hierarchies in long form articles.
+    markup: |
+      <div class="spectrum-Article">
+        <h1 class="spectrum-Heading1">Heading 1</h1>
+        <p class="spectrum-Body1">Body copy that pairs with heading 1</p>
+
+        <h2 class="spectrum-Heading2">Heading 2</h1>
+        <p class="spectrum-Body2">Body copy that pairs with heading 2</p>
+
+        <h3 class="spectrum-Heading3">Heading 3</h1>
+        <p class="spectrum-Body3">Body copy that pairs with heading 3</p>
+
+        <h4 class="spectrum-Heading4">Heading 4</h4>
+        <p class="spectrum-Body4">Body copy that pairs with heading 4</p>
+
+        <h5 class="spectrum-Heading5">Heading 5</h5>
+        <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
+      </div>
+  - id: heading-1
+    name: Typography - Code
+    description: Typographic styles for computer code.
+    markup: |
+      <code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
+      <pre><code class="spectrum-Code3">Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness</code></pre>
diff --git a/components/typography/metadata/typography-detail.yml b/components/typography/metadata/typography-detail.yml
new file mode 100644
index 00000000000..3ac1ba0b125
--- /dev/null
+++ b/components/typography/metadata/typography-detail.yml
@@ -0,0 +1,20 @@
+name: Typography Detail
+dnaStatus: Verified
+description: Detail is a typography component used for disclosing extra information or smaller items in hierarchical relationships of text.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/detail/
+examples:
+  - id: detail-m
+    status: Verified
+    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>
+        </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
diff --git a/components/typography/metadata/typography-heading.yml b/components/typography/metadata/typography-heading.yml
new file mode 100644
index 00000000000..1d1ae50153e
--- /dev/null
+++ b/components/typography/metadata/typography-heading.yml
@@ -0,0 +1,101 @@
+name: Typography Heading
+id: heading-m
+description: Heading is a typography component used to create various levels of hierarchies between text.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/heading/
+examples:
+  - id: heading-m
+    name: Heading
+    status: Verified
+    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>
+        <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>
+      </div>
+
+  - id: heading-heavy-m
+    name: Heading (Heavy)
+    status: Verified
+    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>
+        <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>
+      </div>
+
+  - id: heading-light-m
+    name: Heading (Light)
+    status: Verified
+    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>
+        <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>
+      </div>
+
+  - id: heading-m
+    name: Standard
+    status: Verified
+    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--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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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
diff --git a/components/typography/metadata/typography-international-deprecated.yml b/components/typography/metadata/typography-international-deprecated.yml
new file mode 100644
index 00000000000..5808ce938c7
--- /dev/null
+++ b/components/typography/metadata/typography-international-deprecated.yml
@@ -0,0 +1,319 @@
+name: Typography (Internationalized, Deprecated)
+status: Deprecated
+hide: true
+examples:
+  - id: heading-1
+    name: Typography
+    description: Typography elements paired to display clear content hierarchies.
+    markup: |
+      <div class="spectrum-Typography">
+        <h1 class="spectrum-Heading1">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body1">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-Body1">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-Heading2">Aliquet Mauris Eu</h1>
+        <p class="spectrum-Body2">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-Body2">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-Heading2">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body2">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-Body2">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-Heading3">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body3">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-Body3">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-Heading4">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body4">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-Body4">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-Heading5">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body5">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-Body5">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-Heading6">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body5">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-Body5">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-Subheading">Lorem Ipsum Dolor</h1>
+        <p class="spectrum-Body4">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-Body4">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-1
+    name: Heading
+    description: Headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+        <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
+        <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
+        <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
+        <p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
+        <p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading3">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading4">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading5">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Heading (Strong)
+    description: Strong headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Heading (Quiet)
+    description: Quiet headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
+        <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display
+    description: Display headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1--display">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2--display">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1--display">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2--display">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display (Strong)
+    description: Strong display headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Display (Quiet)
+    description: Quiet display headings for typography.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Body
+    description: Default body text sizes.
+    markup: |
+      <div class="spectrum" lang="en">
+        <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
+        <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
+        <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
+        <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
+        <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum-Article">
+        <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
+        <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
+        <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
+        <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
+        <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ja">
+        <p class="spectrum-Body1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
+        <p class="spectrum-Body2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <p class="spectrum-Body3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
+        <p class="spectrum-Body4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
+        <p class="spectrum-Body5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="ar">
+        <p class="spectrum-Body1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
+        <p class="spectrum-Body2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+        <p class="spectrum-Body3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
+        <p class="spectrum-Body4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
+        <p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
+      </div>
+
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Body1">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body2">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body3">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body4">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body5">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+      </div>
+  - id: heading-1
+    name: Han
+    description: Typographic pairings for Adobe Clean Han.
+    markup: |
+      <div lang="ja">
+        <h1 class="spectrum-Heading1">見出し1</h1>
+        <p class="spectrum-Body1">見出しとよく対になる本文。</p>
+
+        <h2 class="spectrum-Heading2">見出し2</h1>
+        <p class="spectrum-Body2">見出しとよく対になる本文。</p>
+
+        <h3 class="spectrum-Heading3">見出し13</h1>
+        <p class="spectrum-Body3">見出しとよく対になる本文。</p>
+
+        <h4 class="spectrum-Heading4">見出し14</h4>
+        <p class="spectrum-Body4">見出しとよく対になる本文。</p>
+
+        <h5 class="spectrum-Heading5">見出し15</h5>
+        <p class="spectrum-Body5">見出しとよく対になる本文。</p>
+      </div>
+  - id: heading-1
+    name: Article
+    description: Typography elements paired to display clear content hierarchies in long form articles.
+    markup: |
+      <div class="spectrum-Article">
+        <h1 class="spectrum-Heading1">Heading 1</h1>
+        <p class="spectrum-Body1">Body copy that pairs with heading 1</p>
+
+        <h2 class="spectrum-Heading2">Heading 2</h1>
+        <p class="spectrum-Body2">Body copy that pairs with heading 2</p>
+
+        <h3 class="spectrum-Heading3">Heading 3</h1>
+        <p class="spectrum-Body3">Body copy that pairs with heading 3</p>
+
+        <h4 class="spectrum-Heading4">Heading 4</h4>
+        <p class="spectrum-Body4">Body copy that pairs with heading 4</p>
+
+        <h5 class="spectrum-Heading5">Heading 5</h5>
+        <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
+      </div>
+  - id: heading-1
+    name: Typography - Code
+    description: Typographic styles for computer code.
+    markup: |
+      <code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
+      <code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
+      <pre><code class="spectrum-Code3">Code3 Text Wrapped in:
+      pre tags for
+      multiline
+      goodness</code></pre>
diff --git a/components/typography/metadata/typography-international.yml b/components/typography/metadata/typography-international.yml
index 861b694f329..0ccaa9be47f 100644
--- a/components/typography/metadata/typography-international.yml
+++ b/components/typography/metadata/typography-international.yml
@@ -1,330 +1,309 @@
 name: Typography (Internationalized)
+fastLoad: false
+description: Internationalized typography examples. Note that, for these examples to work correctly, your Typekit needs to include the appropriate Han fonts.
+SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
+status: Verified
+id: heading-han-m
 examples:
-  - id: heading-1
+  - id: heading-m
     name: Typography
     status: Verified
     description: Typography elements paired to display clear content hierarchies.
     markup: |
       <div class="spectrum-Typography">
-        <div style="max-width: 600px;">
-        <h1 class="spectrum-Heading1">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body1">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-Body1">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--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>
 
-        <h2 class="spectrum-Heading2">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body2">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-Body2">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-Heading2">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body2">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-Body2">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>
 
+        <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>
 
-        <h1 class="spectrum-Heading3">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body3">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-Body3">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>
 
+        <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>
 
-        <h1 class="spectrum-Heading4">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body4">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-Body4">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-Heading5">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body5">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-Body5">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-Heading6">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body5">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-Body5">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-Subheading">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body4">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-Body4">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>
+        <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>
-  - id: heading-1
+
+  - id: heading-m
     name: Heading
     status: Verified
     description: Headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-        <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
-        <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
-        <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <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>
+        <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>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
-        <p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
-        <p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
-        <p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading3">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading4">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading5">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Heading (Strong)
+        <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>
+      </div>
+
+  - id: heading-heavy-m
+    name: Heading (Heavy)
     status: Verified
     description: Strong headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <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>
+        <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>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Heading (Quiet)
-    status: Verified
-    description: Quiet headings for typography.
-    markup: |
-      <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <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>
       </div>
 
-      <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
-      </div>
-
-      <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display
+  - id: heading-light-m
+    name: Heading (Light)
     status: Verified
-    description: Display headings for typography.
+    description: Light headings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <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>
+        <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>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1--display">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2--display">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1--display">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2--display">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display (Strong)
-    status: Verified
-    description: Strong display headings for typography.
-    markup: |
-      <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <p class="spectrum-Heading spectrum-HeadingXXXL--light">XXXLדגש כותרת <em>XXXLמאמר</em> <strong>XXXLחזק</strong>.</p>
+        <p class="spectrum-Heading spectrum-HeadingXXL--light">XXLדגש כותרת <em>XXLמאמר</em> <strong>XXLחזק</strong>.</p>
+        <p class="spectrum-Heading spectrum-HeadingXL--light">XLדגש כותרת <em>XLמאמר</em> <strong>XLחזק</strong>.</p>
+        <p class="spectrum-Heading spectrum-HeadingL--light">Lדגש כותרת <em>Lמאמר</em> <strong>Lחזק</strong>.</p>
       </div>
 
-      <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1--display spectrum-Heading1--strong">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--strong">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
-      </div>
-
-      <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1--display spectrum-Heading1--strong">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
-      </div>
-
-      <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1--display spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display (Quiet)
+  - id: body-m
+    name: Body
     status: Verified
-    description: Quiet display headings for typography.
+    description: Default body text sizes.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
+        <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>
+        <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>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <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>
       </div>
-  - id: heading-1
-    name: Body
+
+  - id: detail-m
     status: Verified
-    description: Default body text sizes.
+    name: Detail
+    description: Subheadings for typography.
     markup: |
       <div class="spectrum" lang="en">
-        <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
-        <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
-        <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
-        <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
-        <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
-      </div>
-
-      <div class="spectrum-Article">
-        <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
-        <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
-        <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
-        <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
-        <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
+        <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>
+        <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>
       </div>
 
       <div class="spectrum" lang="ja">
-        <p class="spectrum-Body1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Body2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
-        <p class="spectrum-Body3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
-        <p class="spectrum-Body4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
-        <p class="spectrum-Body5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="ar">
-        <p class="spectrum-Body1">القسم <em>القسم  تشديد</em> <strong>القسم  تأكيد قو</strong>.</p>
-        <p class="spectrum-Body2">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
-        <p class="spectrum-Body3">القسم 3 <em>القسم 3 تشديد</em> <strong>القسم 3 تأكيد قو</strong>.</p>
-        <p class="spectrum-Body4">القسم 4 <em>القسم 4 تشديد</em> <strong>القسم 4 تأكيد قو</strong>.</p>
-        <p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
+        <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>
       </div>
 
       <div class="spectrum" lang="he">
-        <p class="spectrum-Body1">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
-        <p class="spectrum-Body2">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
-        <p class="spectrum-Body3">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
-        <p class="spectrum-Body4">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
-        <p class="spectrum-Body5">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <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>
       </div>
-  - id: heading-1
+
+  - id: heading-han-m
     name: Han
     status: Verified
     description: Typographic pairings for Adobe Clean Han.
     markup: |
-      <div lang="ja">
-        <h1 class="spectrum-Heading1">見出し1</h1>
-        <p class="spectrum-Body1">見出しとよく対になる本文。</p>
-
-        <h2 class="spectrum-Heading2">見出し2</h1>
-        <p class="spectrum-Body2">見出しとよく対になる本文。</p>
-
-        <h3 class="spectrum-Heading3">見出し13</h1>
-        <p class="spectrum-Body3">見出しとよく対になる本文。</p>
-
-        <h4 class="spectrum-Heading4">見出し14</h4>
-        <p class="spectrum-Body4">見出しとよく対になる本文。</p>
-
-        <h5 class="spectrum-Heading5">見出し15</h5>
-        <p class="spectrum-Body5">見出しとよく対になる本文。</p>
-      </div>
-  - id: heading-1
-    name: Article
-    status: Verified
-    description: Typography elements paired to display clear content hierarchies in long form articles.
-    markup: |
-      <div class="spectrum-Article">
-        <h1 class="spectrum-Heading1">Heading 1</h1>
-        <p class="spectrum-Body1">Body copy that pairs with heading 1</p>
-
-        <h2 class="spectrum-Heading2">Heading 2</h1>
-        <p class="spectrum-Body2">Body copy that pairs with heading 2</p>
-
-        <h3 class="spectrum-Heading3">Heading 3</h1>
-        <p class="spectrum-Body3">Body copy that pairs with heading 3</p>
-
-        <h4 class="spectrum-Heading4">Heading 4</h4>
-        <p class="spectrum-Body4">Body copy that pairs with heading 4</p>
-
-        <h5 class="spectrum-Heading5">Heading 5</h5>
-        <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
-      </div>
-  - id: heading-1
+      <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-HeadingXL spectrum-Heading--serif">見出しXL</h4>
+        <p class="spectrum-Body spectrum-Body--XL 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>
+        <h3 class="spectrum-Heading spectrum-HeadingM spectrum-Heading--serif">見出しM</h4>
+        <p class="spectrum-Body spectrum-Body--M 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>
+        <h5 class="spectrum-Heading spectrum-HeadingXS spectrum-Heading--serif">見出しXS</h4>
+        <p class="spectrum-Body spectrum-Body--XS 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>
+      </div>
+
+  - id: code-m
     name: Typography - Code
     status: Verified
     description: Typographic styles for computer code.
     markup: |
-      <code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
-      <pre><code class="spectrum-Code3">Code3 Text Wrapped in:
-      pre tags for
-      multiline
-      goodness</code></pre>
+      <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:
+        pre tags for
+        goodness</code></pre>
+      </div>
\ No newline at end of file
diff --git a/components/typography/metadata/typography-legacy.yml b/components/typography/metadata/typography-legacy.yml
new file mode 100644
index 00000000000..69bfc634dc4
--- /dev/null
+++ b/components/typography/metadata/typography-legacy.yml
@@ -0,0 +1,19 @@
+name: Typography (Legacy)
+description: Legacy typography components. The [new Typography components](typography.html) should be used instead.
+id: heading-display
+status: Deprecated
+hide: true
+examples:
+  - id: heading-display
+    name: Standard
+    markup: |
+      <h1 class="spectrum-Heading--display">Display (h1)</h1>
+      <h2 class="spectrum-Heading--pageTitle">Page Title (h2)</h2>
+      <h2 class="spectrum-Heading--subtitle1">Subtitle 1 (h2)</h2>
+      <h3 class="spectrum-Heading--subtitle2">Subtitle 2 (h3)</h3>
+      <h4 class="spectrum-Heading--subtitle3">Subtitle 3 (h4)</h4>
+      <p class="spectrum-Body--small">Small Body Text</p>
+      <p class="spectrum-Body">Default Body Text</p>
+      <p class="spectrum-Body--secondary">Secondary Body Text</p>
+      <p class="spectrum-Body--italic"> Body Text Italic</p>
+      <p class="spectrum-Body--large">Large Body Text</p>
diff --git a/components/typography/metadata/typography.yml b/components/typography/metadata/typography.yml
index 64ceb3d5cde..db00bb1d1b2 100644
--- a/components/typography/metadata/typography.yml
+++ b/components/typography/metadata/typography.yml
@@ -1,191 +1,45 @@
 name: Typography
-description: 'English typography examples. See the [typography example page](typography.html) for Japanese, Han, and Arabic examples.'
+dnaStatus: Verified
+description: |
+  Spectrum Typography is broken out into several separate components.
+
+  In addition, the previous deprecated Typogaphy implementations ([legacy](typography-legacy.html), [depreacted](typography-deprecated.html)) are still shipped, but their usage is discouraged.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/typography/
+examplesHeading: Components
 examples:
-  - id: heading-1
-    name: Standard
-    status: Verified
-    description: Typography elements paired to display clear content hierarchies.
-    markup: |
-      <div class="spectrum-Typography">
-        <div style="max-width: 600px;">
-        <h1 class="spectrum-Heading1">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body1">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-Body1">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-Heading2">Aliquet Mauris Eu</h1>
-        <p class="spectrum-Body2">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-Body2">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-Heading2">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body2">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-Body2">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-Heading3">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body3">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-Body3">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-Heading4">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body4">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-Body4">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-Heading5">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body5">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-Body5">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-Heading6">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body5">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-Body5">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-Subheading">Lorem Ipsum Dolor</h1>
-        <p class="spectrum-Body4">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-Body4">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>
-      </div>
-  - id: heading-1
+  - id: heading-m
     name: Heading
     status: Verified
-    description: Headings for typography.
-    markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-        <p class="spectrum-Heading3">Heading3 <em>Heading3 Emphasis</em> <strong>Heading3 Strong</strong>.</p>
-        <p class="spectrum-Heading4">Heading4 <em>Heading4 Emphasis</em> <strong>Heading4 Strong</strong>.</p>
-        <p class="spectrum-Heading5">Heading5 <em>Heading5 Emphasis</em> <strong>Heading5 Strong</strong>.</p>
-        <p class="spectrum-Subheading">Subheading <em>Subheading Emphasis</em> <strong>Subheading Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading3">Article Heading3 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading4">Article Heading4 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading5">Article Heading5 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Heading (Strong)
-    status: Verified
-    description: Strong headings for typography.
-    markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1--strong">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2--strong">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--strong">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--strong">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Heading (Quiet)
-    status: Verified
-    description: Quiet headings for typography.
-    markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1--quiet">Heading1 <em>Heading1 Emphasis</em> <strong>Heading1 Strong</strong>.</p>
-        <p class="spectrum-Heading2--quiet">Heading2 <em>Heading2 Emphasis</em> <strong>Heading2 Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display
-    status: Verified
-    description: Display headings for typography.
-    markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1--display">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--display">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display (Strong)
-    status: Verified
-    description: Strong display headings for typography.
-    markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1--display spectrum-Heading1--strong">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--strong">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Display (Quiet)
-    status: Verified
-    description: Quiet display headings for typography.
+    description: |
+      Heading is used to create various levels of typographic hierarchies.
+
+      [View the Heading typography component](typography-heading.html)
     markup: |
-      <div class="spectrum">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">Article Heading1 <em>Emphasis</em> <strong>Strong</strong>.</p>
-        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">Article Heading2 <em>Emphasis</em> <strong>Strong</strong>.</p>
-      </div>
-  - id: heading-1
+      <h1 class="spectrum-Heading spectrum-Heading--XXL">Hello world.</h1>
+  - id: body-m
     name: Body
     status: Verified
-    description: Default body text sizes.
+    description: |
+      Body is primarily used for Spectrum components and for blocks of text.
+
+      [View the Body typography component](typography-body.html)
     markup: |
-      <div class="spectrum">
-        <p class="spectrum-Body1">Body1 Text <em>Body1 Emphasis</em> <strong>Body1 Strong</strong>.</p>
-        <p class="spectrum-Body2">Body2 text <em>Body2 Emphasis</em> <strong>Body2 Strong</strong>.</p>
-        <p class="spectrum-Body3">Body3 Text <em>Body3 Emphasis</em> <strong>Body3 Strong</strong>.</p>
-        <p class="spectrum-Body4">Body4 Text <em>Body4 Emphasis</em> <strong>Body4 Strong</strong>.</p>
-        <p class="spectrum-Body5">Body5 Text <em>Body5 Emphasis</em> <strong>Body5 Strong</strong>.</p>
-        <p class="spectrum-Detail">Detail Text <em>Detail Emphasis</em> <strong>Detail Strong</strong>.</p>
-      </div>
-      <br/>
-      <div class="spectrum-Article">
-        <p class="spectrum-Body1">Article Body1 Text <em>Article Body1 Emphasis</em> <strong>Article Body1 Strong</strong>.</p>
-        <p class="spectrum-Body2">Article Body2 text <em>Article Body2 Emphasis</em> <strong>Article Body2 Strong</strong>.</p>
-        <p class="spectrum-Body3">Article Body3 Text <em>Article Body3 Emphasis</em> <strong>Article Body3 Strong</strong>.</p>
-        <p class="spectrum-Body4">Article Body4 Text <em>Article Body4 Emphasis</em> <strong>Article Body4 Strong</strong>.</p>
-        <p class="spectrum-Body5">Article Body5 Text <em>Article Body5 Emphasis</em> <strong>Article Body5 Strong</strong>.</p>
-        <p class="spectrum-Detail">Detail Text <em>Detail Emphasis</em> <strong>Detail Strong</strong>.</p>
-      </div>
-  - id: heading-1
-    name: Article
+      <p class="spectrum-Body spectrum-Body--M">Spectrum is based on real-world situations.</p>
+  - id: detail-m
     status: Verified
-    description: Typography elements paired to display clear content hierarchies in long form articles.
-    markup: |
-      <div class="spectrum-Article">
-        <h1 class="spectrum-Heading1">Heading 1</h1>
-        <p class="spectrum-Body1">Body copy that pairs with heading 1</p>
-
-        <h2 class="spectrum-Heading2">Heading 2</h1>
-        <p class="spectrum-Body2">Body copy that pairs with heading 2</p>
+    name: Detail
+    description: |
+      Detail is used for disclosing extra information or smaller items in hierarchical relationships of text.
 
-        <h3 class="spectrum-Heading3">Heading 3</h1>
-        <p class="spectrum-Body3">Body copy that pairs with heading 3</p>
-
-        <h4 class="spectrum-Heading4">Heading 4</h4>
-        <p class="spectrum-Body4">Body copy that pairs with heading 4</p>
-
-        <h5 class="spectrum-Heading5">Heading 5</h5>
-        <p class="spectrum-Body5">Body copy that pairs with heading 5</p>
-      </div>
-  - id: heading-1
+      [View the Detail typography component](typography-detail.html)
+    markup: |
+      <p class="spectrum-Detail spectrum-Detail--XL">Our recommendations</p>
+  - id: code-m
     name: Typography - Code
     status: Verified
-    description: Typographic styles for computer code.
+    description: |
+      Code is used for text that represents code.
+
+      [View the Code typography component](typography-code.html)
     markup: |
-      <code class="spectrum-Code1">Code1 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code2">Code2 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code3">Code3 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code4">Code4 Text <strong>Strong</strong></code>
-      <code class="spectrum-Code5">Code5 Text <strong>Strong</strong></code>
-      <pre><code class="spectrum-Code3">Code3 Text Wrapped in:
-      pre tags for
-      multiline
-      goodness</code></pre>
+      <code class="spectrum-Code spectrum-Code--S">alert("Hello world");</code>
diff --git a/components/typography/skin.css b/components/typography/skin.css
index fefb1293872..287622be789 100644
--- a/components/typography/skin.css
+++ b/components/typography/skin.css
@@ -10,6 +10,114 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+/**
+ * Spectrum CSS Typography V3 (numeric) & V4 (t-shirt)
+ *
+ * Adds typography colors to be processed by
+ * mixins that are auto-generated in tools/component-builder/css/processor.js
+ *
+ */
+
+
+/* t-shirt size-based typography */
+
+@mixin typographyTShirtColor .spectrum-Heading--XXXL {}
+@mixin typographyTShirtColor .spectrum-Heading--XXL {}
+@mixin typographyTShirtColor .spectrum-Heading--XL {}
+@mixin typographyTShirtColor .spectrum-Heading--L {}
+@mixin typographyTShirtColor .spectrum-Heading--M {}
+@mixin typographyTShirtColor .spectrum-Heading--S {}
+@mixin typographyTShirtColor .spectrum-Heading--XS {}
+@mixin typographyTShirtColor .spectrum-Heading--XXS {}
+
+@mixin typographyTShirtColor .spectrum-Heading-XXXL--light, heading-light-XXXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {}
+@mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {}
+
+@mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {}
+@mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {}
+
+@mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {}
+@mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {}
+@mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {}
+
+@mixin typographyTShirtColor .spectrum-Body--XXXL {}
+@mixin typographyTShirtColor .spectrum-Body--XXL {}
+@mixin typographyTShirtColor .spectrum-Body--XL {}
+@mixin typographyTShirtColor .spectrum-Body--L {}
+@mixin typographyTShirtColor .spectrum-Body--M {}
+@mixin typographyTShirtColor .spectrum-Body--S {}
+@mixin typographyTShirtColor .spectrum-Body--XS {}
+
+
+@mixin typographyTShirtColor .spectrum-Detail--XL {}
+@mixin typographyTShirtColor .spectrum-Detail--L {}
+@mixin typographyTShirtColor .spectrum-Detail--M {}
+@mixin typographyTShirtColor .spectrum-Detail--S {}
+
+@mixin typographyTShirtColor .spectrum-Code--XL, code-XL {}
+@mixin typographyTShirtColor .spectrum-Code--L, code-L {}
+@mixin typographyTShirtColor .spectrum-Code--M, code-M {}
+@mixin typographyTShirtColor .spectrum-Code--S, code-S {}
+@mixin typographyTShirtColor .spectrum-Code--XS, code-XS {}
+
+.spectrum {
+  &:lang(ja),
+  &:lang(ko),
+  &:lang(zh) {
+    @mixin typographyTShirtColor .spectrum-Body--XXXL, body-han-XXXL {}
+    @mixin typographyTShirtColor .spectrum-Body--XXL, body-han-XXL {}
+    @mixin typographyTShirtColor .spectrum-Body--XL, body-han-XL {}
+    @mixin typographyTShirtColor .spectrum-Body--L, body-han-L {}
+    @mixin typographyTShirtColor .spectrum-Body--M, body-han-M {}
+    @mixin typographyTShirtColor .spectrum-Body--S, body-han-S {}
+    @mixin typographyTShirtColor .spectrum-Body--XS, body-han-XS {}
+
+    @mixin typographyTShirtColor .spectrum-Heading--XXXL {}
+    @mixin typographyTShirtColor .spectrum-Heading--XXL {}
+    @mixin typographyTShirtColor .spectrum-Heading--XL {}
+    @mixin typographyTShirtColor .spectrum-Heading--L {}
+    @mixin typographyTShirtColor .spectrum-Heading--M {}
+    @mixin typographyTShirtColor .spectrum-Heading--S {}
+    @mixin typographyTShirtColor .spectrum-Heading--XS {}
+    @mixin typographyTShirtColor .spectrum-Heading--XXS {}
+
+    @mixin typographyTShirtColor .spectrum-Heading-XXXL--light, heading-light-XXXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XXL--light, heading-light-XXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XL--light, heading-light-XL {}
+    @mixin typographyTShirtColor .spectrum-Heading-L--light, heading-light-L {}
+
+    @mixin typographyTShirtColor .spectrum-Heading-XXXL--heavy, heading-heavy-XXXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XXL--heavy, heading-heavy-XXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XL--heavy, heading-heavy-XL {}
+    @mixin typographyTShirtColor .spectrum-Heading-L--heavy, heading-heavy-L {}
+
+    @mixin typographyTShirtColor .spectrum-Heading-XXXL--heading, heading-XXXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XXL--heading, heading-XXL {}
+    @mixin typographyTShirtColor .spectrum-Heading-XL--heading, heading-XL {}
+    @mixin typographyTShirtColor .spectrum-Heading-L--heading, heading-L {}
+
+    @mixin typographyTShirtColor .spectrum-Detail--XL {}
+    @mixin typographyTShirtColor .spectrum-Detail--L {}
+    @mixin typographyTShirtColor .spectrum-Detail--M {}
+    @mixin typographyTShirtColor .spectrum-Detail--S {}
+
+    @mixin typographyTShirtColor .spectrum-Code--XL, code-XL {}
+    @mixin typographyTShirtColor .spectrum-Code--L, code-L {}
+    @mixin typographyTShirtColor .spectrum-Code--M, code-M {}
+    @mixin typographyTShirtColor .spectrum-Code--S, code-S {}
+    @mixin typographyTShirtColor .spectrum-Code--XS, code-XS {}
+  }
+}
+
+
+/**
+* Legacy numeric-based typography (depreciated)
+*/
 @mixin typographyColor .spectrum-Body1 {}
 @mixin typographyColor .spectrum-Body2 {}
 @mixin typographyColor .spectrum-Body3 {}
diff --git a/site/includes/nav.pug b/site/includes/nav.pug
index df4bc28f977..02c23415443 100644
--- a/site/includes/nav.pug
+++ b/site/includes/nav.pug
@@ -9,8 +9,12 @@
         a.spectrum-SideNav-itemLink(href='#') Components
         ul.spectrum-SideNav.spectrum-SideNav--multiLevel
           each component in nav
-            li.spectrum-SideNav-item(class=pageURL === component.href ? 'is-selected' : '')
-              a.spectrum-SideNav-itemLink.js-fastLoad(href=component.href)= component.name
+            unless component.hide
+              li.spectrum-SideNav-item(class=pageURL === component.href ? 'is-selected' : '')
+                a(class={
+                  'spectrum-SideNav-itemLink': true,
+                  'js-fastLoad': component.fastLoad != false
+                }, href=component.href)= component.name
 
   //- nav.spectrum-Site-bottomNav
   //-   ul.spectrum-SideNav
diff --git a/site/resources/js/typekit.js b/site/resources/js/typekit.js
index 2b573618b63..7e471d95087 100644
--- a/site/resources/js/typekit.js
+++ b/site/resources/js/typekit.js
@@ -15,11 +15,15 @@ window.addEventListener('DOMContentLoaded', function() {
 
   var config = {
     /* REPEAT AFTER ME:
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
-     I WILL NOT REUSE THE TYPEKIT ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
+     I WILL NOT REUSE THE ADOBE FONTS ID FOR SPECTRUM-CSS DOCS IN MY PRODUCT / PRODUCTION
      See https://wiki.corp.adobe.com/display/devrel/Using+Typekit+at+Adobe to get set up right. */
-    kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
+     // On pageload, determine to current pages language setting.
+     // If it is US-language or unset use the 1st Adobe font web project id (smaller size),
+     // otherwise use the 2nd kit with all the language settings (larger size)
+    // kitId: document.querySelector('[lang]:not([lang="en-US"])') !== null ? 'pbi5ojv' : 'ruf7eed',
+    kitId: document.querySelector('[lang]:not([lang="en-US"])') === null ? 'mge7bvf' : 'rok6rmo',
     scriptTimeout: 3000,
     active: function() {
       var loader = document.getElementById('loader');
diff --git a/site/templates/siteComponent.pug b/site/templates/siteComponent.pug
index 4fb9f42426d..7abbd3bba96 100644
--- a/site/templates/siteComponent.pug
+++ b/site/templates/siteComponent.pug
@@ -131,8 +131,8 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
                 tr!= util.markdown.toHTML(component.details)
 
             div.spectrum-CSSComponent-resources
-              //-
-                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${spectrumURL || 'https://spectrum.corp.adobe.com/'+pkg.name.split('/').pop()}` target="_blank")
+              if component.SpectrumSiteSlug
+                a.spectrum-Card.spectrum-Card--small.spectrum-Card--horizontal(href=`${component.SpectrumSiteSlug}` target="_blank")
                   .spectrum-Card-preview.spectrum-CSSComponent-resource--adobe
                     svg(class="spectrum-Icon spectrum-Icon--sizeL" viewBox="0 0 36 36" focusable="false" aria-hidden="true" aria-label="AdobeLogo")
                       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")
@@ -180,7 +180,7 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
             if examples.length
               header.spectrum-CSSComponent-sectionHeading(id="variants")
                 h4.spectrum-Heading3
-                  a(href="#variants").spectrum-BigSubtleLink Variants
+                  a(href="#variants").spectrum-BigSubtleLink=`${component.examplesHeading ? component.examplesHeading : 'Variants'}`
                 hr.spectrum-Rule.spectrum-Rule--large
               each example in examples
                 include ../includes/example.pug
diff --git a/tools/bundle-builder/docs/index.js b/tools/bundle-builder/docs/index.js
index bcc915b1cce..8163cb505b8 100644
--- a/tools/bundle-builder/docs/index.js
+++ b/tools/bundle-builder/docs/index.js
@@ -249,6 +249,8 @@ function buildSite_getData() {
     nav.push({
       name: componentData.name,
       component: componentName,
+      hide: componentData.hide,
+      fastLoad: componentData.fastLoad,
       href: fileName,
       description: componentData.description
     });
diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js
index 2920a3add26..82173c5fee3 100644
--- a/tools/component-builder/css/processors.js
+++ b/tools/component-builder/css/processors.js
@@ -10,75 +10,286 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+/**
+ * Spectrum CSS PostCSS Processor
+ *
+ * Generates Sass Mixins by automatic classnames with DNA tokens.
+ * Provides support for v4 (t-shirt based) typography
+ * and the legacy v3 (numeric based) typography.
+ *
+ * processes output also with task like:
+ * SVG scaling, stripping of comments, post-css-focus-ring
+ * and auto-prefixing for specific browsers.
+ *
+ * Structured in:
+ *  - typographyTShirtSizes (v4)
+ *  - typography (v3)
+ *
+ *  - typographyTShirtMargins (v4)
+ *  - typographyMargins (v3)
+ *
+ *  - typographyTShirtColor(v4)
+ *  - typographyColor(v3)
+ *
+ *   Shared functions for v4 are:
+ *    - getTShirtTokenName
+ *    - getTypographySizes
+ *
+ *   Shared functions for v3 & v4:
+ *    - buildProperties
+ *    - getTypographyMargins
+ *
+ * Lastly all the post-processing.
+ *
+ */
 const postcssReal = require('postcss');
 
+/**
+ *  Helper: get a Spectrum CSS T-shirt class name
+ *
+ * @param {string} name DNA token name
+ * @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 = tokenName.toLowerCase();
+  return tokenName;
+}
+
+/**
+ * Helper: get typography sizes
+ * Shared with t-shirt and numeric sizes
+ *
+ * @param {string} name class name
+ * @param {string} tokenName token name
+ * @param {string} textTransformIgnore ignore text transforms
+ * @param {string} [addStrongAndEmphasisChildren=false] add legacy support for strong, em children
+ * @param {boolean} [showIndicatorBorder=false] shows a blue border around the items. Useful for debugging.
+ * @returns {string} CSS output
+ */
+function getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren = false, showIndicatorBorder = false) {
+  var output = '';
+  var propMap = {
+    'font-size': 'text-size',
+    'font-weight': 'text-font-weight',
+    'line-height': 'text-line-height',
+    'font-style': 'text-font-style',
+    'letter-spacing': 'text-letter-spacing',
+    'text-transform': 'text-transform',
+  };
+
+  /**
+   *  Build typography properties for a DNA token
+   *
+   * @param {string} tokenString name of the token
+   * @returns {string} CSS rule for provided selector selector
+   */
+  function buildProperties(tokenString) {
+    var ruleString = '';
+    Object.keys(propMap).forEach((key) => {
+      if (!textTransformIgnore || key != 'text-transform') {
+        ruleString += `  ${key}: var(--spectrum-${tokenString}-${propMap[key]});\n`;
+      }
+    });
+    ruleString += '  margin-top: 0;\n  margin-bottom: 0;\n';
+    return ruleString.toLowerCase();
+  }
+
+  var indicatorBorder = (showIndicatorBorder === true) ? 'border: solid 1px blue;' : '';
+
+  // Add classnames as an alternative for <strong> and <em> for typography items with a classname.
+  // -emphasis & -strong will be added to the last provided classname or to provided ID.
+  // Example classname:  "em, .spectrum-Heading2--quiet-emphasis"
+  emStrongClassName = (name.indexOf('.') !== -1) ? '.' + name.split('.').pop() : name;
+
+  // Fallback to add <em> and <strong> overwrites if addStrongAndEmphasisChildren is set to true.
+  // This is only used for the pre-t-shirt sized typography.
+  var strongAndEmphasisChildren = (addStrongAndEmphasisChildren === true) ? `
+    em {
+      ${buildProperties(`${tokenName}-emphasis`)}
+    }
+    strong {
+      ${buildProperties(`${tokenName}-strong`)}
+    }
+  `: '';
+
+  output = `${name} {
+  ${indicatorBorder}
+
+  ${buildProperties(tokenName)}
+    ${strongAndEmphasisChildren}
+  }`;
+  return output;
+}
+
+/**
+ * Helper: get typography margins
+ * Shared with t-shirt and numeric sizes
+ *
+ * @param {*} name class name
+ * @param {*} tokenName token name
+ * @returns {string} CSS output
+ */
+function getTypographyMargins(name, tokenName) {
+  var output = `${name} {
+    margin-top: var(--spectrum-${tokenName}-margin-top);
+    margin-bottom: var(--spectrum-${tokenName}-margin-bottom);
+  }`;
+  return output
+}
+
+/**
+ * Helper: get typography colors
+ *
+ * @param {*} name class name
+ * @param {*} tokenName token name
+ * @param {boolean} [showIndicatorBackground=false]
+ * @returns {string} CSS output
+ */
+function getTypographyColor(name, tokenName, showIndicatorBackground = false) {
+  var indicatorBackground = (showIndicatorBackground === true) ? 'background-color: orange;' : '';
+  var output = `${name} {
+    ${indicatorBackground}
+    color: var(--spectrum-${tokenName.toLowerCase()}-text-color);
+  }`;
+  return output;
+}
+
+/**
+ * Add CSS nodes that are going to be processed with postcss
+ *
+ * @param {string} mixin name of the mixin
+ * @param {string} css css injected in the mixin
+ */
+function addNodesToCSS(mixin, css) {
+  var nodes = postcssReal.parse(css);
+  nodes.nodes[0].append(mixin.nodes);
+  mixin.replaceWith(nodes);
+}
+
+/**
+ * Add postcss mixins
+ *
+ * @param {boolean} [keepVars=false] keeps DNA variables
+ * @param {boolean} [notNested=true] nest or don't nest
+ * @param {boolean} [secondNotNested=true]  catch stray
+ * @param {boolean} [diff=false]  perform a diff
+ */
 function getProcessors(keepVars = false, notNested = true, secondNotNested = true, diff = false) {
   return [
     require('postcss-import'),
     require('postcss-mixins')({
       mixins: {
-        typography: function(mixin, name, tokenName, textTransformIgnore) {
-          if(!tokenName) {
-            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+
+        /**
+         * Generate typography t-shirt sizes
+         *
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         * @param {*} textTransformIgnore  ignore text transform
+         */
+        typographyTShirtSizes: function (mixin, name, tokenName, textTransformIgnore) {
+          if (!tokenName) {
+            var tokenName = getTShirtTokenName(name);
+          }
+
+          // overwrite-support for the Typography-V3 <em> & <strong> selectors
+          // sharing the same classname ".spectrum-Detail". This will be added like
+          // ".spectrum-Detail--XL em {}"
+          addStrongAndEmphasisChildren = (name.includes('.spectrum-Detail')) ? true : false;
+
+          var output = getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren, showIndicatorBorder = false);
+          addNodesToCSS(mixin, output);
+        },
+
+        /**
+        * generate typography numeric sizes
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         * @param {*} textTransformIgnore  ignore text transform
+         */
+        typography: function (mixin, name, tokenName, textTransformIgnore) {
+          if (!tokenName) {
+            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
             tokenName = tokenName.replace('.spectrum--', '');
           }
-          var output = '';
-          var propMap = {
-            'font-size': 'text-size',
-            'font-weight': 'text-font-weight',
-            'line-height': 'text-line-height',
-            'font-style': 'text-font-style',
-            'letter-spacing': 'text-letter-spacing',
-            'text-transform': 'text-transform',
-          };
-          function buildProperties (tokeString) {
-            var ruleString = '';
-            Object.keys(propMap).forEach((key) => {
-              if(!textTransformIgnore || key != 'text-transform') {
-                ruleString += `  ${key}: var(--spectrum-${tokeString}-${propMap[key]});\n`;
-              }
-            });
-            ruleString += '  margin-top: 0;\n  margin-bottom: 0;\n';
-            return ruleString;
+
+          var output = getTypographySizes(name, tokenName, textTransformIgnore, addStrongAndEmphasisChildren = false, showIndicatorBorder = false);
+          addNodesToCSS(mixin, output);
+        },
+
+        /**
+         * Generate typography margins for t-shirt sizes
+         *
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         */
+        typographyTShirtMargins: function (mixin, name, tokenName) {
+          if (!tokenName) {
+            var tokenName = getTShirtTokenName(name);
           }
-          output = `${name} {
-          ${buildProperties(tokenName)}
-            em {
-              ${buildProperties(`${tokenName}-emphasis`)}
-            }
-            strong {
-              ${buildProperties(`${tokenName}-strong`)}
-            }
-          }`;
-          var nodes = postcssReal.parse(output);
-          nodes.nodes[0].append(mixin.nodes);
-          mixin.replaceWith(nodes);
+          var output = getTypographyMargins(name, tokenName);
+          addNodesToCSS(mixin, output);
         },
-        typographyColor: function(mixin, name, tokenName) {
-          if(!tokenName) {
-            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+
+        /**
+         * Generate typography margins for numeric sizes
+         *
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         */
+        typographyMargins: function (mixin, name, tokenName) {
+          if (!tokenName) {
+            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
             tokenName = tokenName.replace('.spectrum--', '');
           }
-          var output = `${name} {
-            color: var(--spectrum-${tokenName}-text-color);
-          }`;
-          var nodes = postcssReal.parse(output);
-          nodes.nodes[0].append(mixin.nodes);
-          mixin.replaceWith(nodes);
+          var output = getTypographyMargins(name, tokenName);
+          addNodesToCSS(mixin, output);
         },
-        typographyMargins: function(mixin, name, tokenName) {
-          if(!tokenName) {
-            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x,y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
-            tokenName = tokenName.replace('.spectrum--', '');
+
+        /**
+         * generate typography colors for t-shirt sizes
+         *
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         */
+        typographyTShirtColor: function (mixin, name, tokenName) {
+          if (!tokenName) {
+            var tokenName = getTShirtTokenName(name);
           }
-          var output = `${name} {
-            margin-top: var(--spectrum-${tokenName}-margin-top);
-            margin-bottom: var(--spectrum-${tokenName}-margin-bottom);
-          }`;
-          var nodes = postcssReal.parse(output);
-          nodes.nodes[0].append(mixin.nodes);
-          mixin.replaceWith(nodes);
+          var output = getTypographyColor(name, tokenName, showIndicatorBackground = false);
+          addNodesToCSS(mixin, output);
         },
+
+        /**
+         * generate typography colors for numeric sizes
+         *
+         * @param {*} mixin mixin name
+         * @param {*} name class name
+         * @param {*} tokenName name of token
+         */
+        typographyColor: function (mixin, name, tokenName) {
+          if (!tokenName) {
+            tokenName = name.replace(/\.?([A-Z]|[0-9])/g, function (x, y) { return '-' + y.toLowerCase(); }).replace(/^-/, '');
+            tokenName = tokenName.replace('.spectrum--', '');
+          }
+          var output = getTypographyColor(name, tokenName, false);
+          addNodesToCSS(mixin, output);
+        }
       }
     }),
     require('postcss-nested'),
@@ -95,10 +306,10 @@ function getProcessors(keepVars = false, notNested = true, secondNotNested = tru
     require('postcss-svg'),
     require('postcss-functions')({
       functions: {
-        noscale: function(value) {
+        noscale: function (value) {
           return value.toString().toUpperCase();
         },
-        percent: function(value) {
+        percent: function (value) {
           return parseInt(value, 10) / 100;
         }
       }
diff --git a/yarn.lock b/yarn.lock
index ef30ae9dc27..b0bcc8deab5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1042,7 +1042,7 @@
     chalk "^1.x"
     chalk-cli "^4.x"
 
-"@spectrum/spectrum-dna@5.23.0":
+"@spectrum/spectrum-dna@^5.23.0":
   version "5.23.0"
   resolved "https://artifactory.corp.adobe.com:443/artifactory/api/npm/npm-spectrum-release/@spectrum/spectrum-dna/-/@spectrum/spectrum-dna-5.23.0.tgz#c93a8e202e22ba66da27a791f80ffead765f8529"
   integrity sha1-yTqOIC4iumbaJ6eR+A/+rXZfhSk=