diff --git a/CHANGELOG.md b/CHANGELOG.md
index 719b4b366..6b24e5f54 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,71 @@
+# HEAD
+
+This version introduces some major modernization changes around CSS and drops browser support for XXXX ( to be defined before V23 is published).
+
+The good news is we don't expect any visible changes in modern browsers and you should be able to do some automated visual regression testing to help with the migration.
+
+Introducing theme variables! CSS variables beginning with `--theme-` will adjust based on media queries.
+
+
+## Typography
+
+* Modernization:
+  *  Default to CSS vars for font family, size, and line-height (#982)
+    * Removed `@supports` declarations if they only had font declarations
+    * `@include text-body-*` and `@include text-heading-*` mixins use CSS vars now
+  * Edited `@mixin font-size()` to stop outputting a pixel fallback
+* Reorganization:
+  * Renamed `-title-` to `-heading-` in mixins and CSS vars
+    * and `mzp-u-heading-*` utility classes
+    * component HTML/CSS classes will follow in a separate PR
+  * Added font-family declaration to `@include text-body-*` mixins
+  * Added `--theme-` prefix to variables expected to morph
+  * Added `--token-` prefix to unchanging variables
+    * Re-name font-size tokens to use a scale instead of tshirt sizes for names
+  * Added `--theme-button-line-height` var
+* Bug fixes:
+  * Moved `@include text-*` to end of declarations
+
+## Color
+
+* To come in follow up PR.
+
+## Migration Tips
+
+See the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for automated scripts (VS Code find/replace and terminal commands) to help with these changes.
+
+* Browser support
+  * If you require support for older browsers we recommend adding some post-processing to your workflow for CSS variables and font sizes in pixels.
+* Rename typography mixins `text-title-(2xs|3xs|xs|sm|md|lg|xl|2xl)` → `text-heading-$1`
+* Rename utility classes `mzp-u-title-(2xs|3xs|xs|sm|md|lg|xl|2xl)` → `mzp-u-heading-$1`
+* Replace any remaining `text-display-*` usage with the equivalent `text-heading-*` mixin:
+  * `text-display-xx([sl])` → `text-heading-2x$1`
+  * `text-display-(xs|sm|md|lg|xl)` → `text-heading-$1`
+* Rename CSS variables to use pattern `--theme-<component>-<property>-<scale>`:
+  * `--body-font-family` → `--theme-body-font-family`
+  * `--title-font-family` → `--theme-heading-font-family`
+  * `--body-line-height` → `--theme-body-line-height`
+  * `--title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size` → `--theme-heading-font-size-$1`
+  * `--body-(xs|sm|md|lg|xl)-size` → `--theme-body-font-size-$1`
+  * `--title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height` → `--theme-heading-line-height-$1`
+* Removed Sass variables (use CSS variables instead):
+  * `$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size` → `var(--theme-heading-font-size-$1)`
+  * `$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height` → `var(--theme-heading-line-height-$1)`
+  * `$body-line-height` → `var(--theme-body-line-height)`
+  * `$body-(xs|sm|md|lg|xl)-size` → `var(--theme-body-font-size-$1)`
+  * `$body-font-family` → `var(--theme-body-font-family)`
+  * `$title-font-family` → `var(--theme-heading-font-family)`
+  * `$button-font-family` → `var(--theme-button-font-family)`
+  * `$text-body-line-height` → `var(--theme-body-line-height)`
+  * `$text-title-line-height` → `var(--theme-heading-line-height)`
+  * `$text-display-line-height`→ `var(--theme-body-line-height)`
+* `text-body-*` mixins now declare `font-family`.
+  * You can remove any `font-family` declarations from places which use these mixins (unless you don't want the default font).
+* Removed mixins and functions:
+  * `type-scale()` function and associated lookup tables
+  * `text-body-cta` mixin (use `text-body-md` instead)
+* You can remove `@supports (--css: variables)` blocks that only contain font declarations, as CSS custom properties are now required.
+
 # 22.0.0
 
 ## Features
@@ -200,7 +268,7 @@ stating variables explicitly, like this:
   @supports (--css: variables) {
     background-color: var(--background-color-inverse);
     color: var(--body-text-color-inverse);
-    line-height: var(--body-line-height);
+    line-height: var(--token-body-line-height);
   }
 }
 ```
diff --git a/assets/sass/protocol/base/elements/_document.scss b/assets/sass/protocol/base/elements/_document.scss
index a17bebdca..c866bcf0d 100644
--- a/assets/sass/protocol/base/elements/_document.scss
+++ b/assets/sass/protocol/base/elements/_document.scss
@@ -10,19 +10,15 @@ html {
 }
 
 body {
-    @include text-body-md;
     background: $background-color;
     color: $body-text-color;
-    font-family: $body-font-family;
-    line-height: $body-line-height;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
+    @include text-body-md;
 
     @supports (--css: variable) {
         background: var(--background-color);
         color: var(--body-text-color);
-        font-family: var(--body-font-family);
-        line-height: var(--body-line-height);
     }
 }
 
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index 6e916f666..5d74dd477 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -28,16 +28,12 @@ legend {
     max-width: 100%; // 1
     padding: 0; // 3
     white-space: normal; // 1
-    .mzp-u-inline & {
-        @include forms.field-label;
-    }
-    @include text-body-lg;
-    font-family: $body-font-family;
-    font-weight: bold;
     margin-bottom: forms.$field-v-spacing;
+    font-weight: bold;
+    @include text-body-lg;
 
-    @supports (--css: variables) {
-        font-family: var(--body-font-family);
+    .mzp-u-inline & {
+        @include forms.field-label;
     }
 }
 
@@ -46,9 +42,14 @@ input,
 select,
 optgroup,
 textarea {
-    @include font-base;
     @include text-body-md;
-    line-height: 1.25;
+    @include font-base;
+
+    /* stylelint-disable-next-line no-duplicate-selectors */
+    & {
+        // needs to come after @includes to over-ride value
+        line-height: var(--theme-button-line-height);
+    }
 }
 
 button,
@@ -249,7 +250,7 @@ input[type='file'] {
     background: $color-white;
     border-radius: forms.$field-border-radius;
     border: forms.$field-border;
-    line-height: 1.25;
+    line-height: var(--theme-button-line-height);
     margin: 0 0 forms.$field-v-spacing;
 
     &:hover {
diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index 954d28e10..7b0e96941 100644
--- a/assets/sass/protocol/base/elements/_links.scss
+++ b/assets/sass/protocol/base/elements/_links.scss
@@ -48,13 +48,9 @@ a {
 }
 
 .mzp-c-cta-link {
-    font-family: $button-font-family;
+    font-family: var(--theme-button-font-family);
     font-weight: bold;
 
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-    }
-
     &.mzp-t-xs {
         @include text-body-sm;
     }
@@ -68,30 +64,15 @@ a {
     }
 
     &.mzp-t-lg {
-        @include text-title-xs;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
+        @include text-heading-xs;
     }
 
     &.mzp-t-xl {
-        @include text-title-sm;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
+        @include text-heading-sm;
     }
 
     &.mzp-t-2xl {
-        @include text-title-lg;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
+        @include text-heading-lg;
     }
 
     // Icon support
diff --git a/assets/sass/protocol/base/elements/_quotes.scss b/assets/sass/protocol/base/elements/_quotes.scss
index 2ed5fc861..8e9c72869 100644
--- a/assets/sass/protocol/base/elements/_quotes.scss
+++ b/assets/sass/protocol/base/elements/_quotes.scss
@@ -6,17 +6,16 @@
 
 blockquote {
     @include bidi(((border-width, 0 0 0 5px, 0 5px 0 0),));
-    @include text-title-sm;
+    @include text-heading-sm;
     border-color: $color-marketing-gray-20;
     border-style: solid;
     color: $title-text-color;
-    font-family: $title-font-family;
     font-weight: bold;
     margin: $spacing-lg auto;
     padding: $spacing-sm $spacing-lg;
 
     cite {
-        @include text-title-xs;
+        @include text-heading-xs;
         color: $body-text-color-secondary;
 
         &::before {
@@ -29,8 +28,7 @@ blockquote {
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--heading-text-color);
 
         cite {
             color: var(--body-text-color-secondary);
diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_titles.scss
index 3dced1a84..0764ac7f2 100644
--- a/assets/sass/protocol/base/elements/_titles.scss
+++ b/assets/sass/protocol/base/elements/_titles.scss
@@ -12,10 +12,10 @@ h3,
 h4,
 h5,
 h6 {
-    $default-font-weight: bold;
-    font-family: $title-font-family;
     color: $title-text-color;
-    font-weight: $default-font-weight;
+    font-family: var(--theme-heading-font-family);
+    font-variant-ligatures: var(--theme-heading-font-ligatures);
+    letter-spacing: var(--theme-heading-letter-spacing);
     text-wrap: balance;
     margin: 0 0 0.5em;
 
@@ -24,14 +24,10 @@ h6 {
     }
 
     @supports (--css: variables) {
-        font-family: var(--title-font-family);
-        font-variant-ligatures: var(--title-font-ligatures);
-        font-weight: var(--title-font-weight, #{$default-font-weight});
-        letter-spacing: var(--title-letter-spacing);
-        color: var(--title-text-color);
+        color: var(--heading-text-color);
 
         .mzp-t-dark & {
-            color: var(--title-text-color-inverse);
+            color: var(--heading-text-color-inverse);
         }
     }
 }
@@ -39,25 +35,25 @@ h6 {
 // Type scale mixins can be found in includes/mixins/_typography.scss
 // Sizes are defined in includes/_themes.scss
 h1 {
-    @include text-title-lg;
+    @include text-heading-lg;
 }
 
 h2 {
-    @include text-title-md;
+    @include text-heading-md;
 }
 
 h3 {
-    @include text-title-sm;
+    @include text-heading-sm;
 }
 
 h4 {
-    @include text-title-xs;
+    @include text-heading-xs;
 }
 
 h5 {
-    @include text-title-2xs;
+    @include text-heading-2xs;
 }
 
 h6 {
-    @include text-title-3xs;
+    @include text-heading-3xs;
 }
diff --git a/assets/sass/protocol/base/utilities/_rich-text.scss b/assets/sass/protocol/base/utilities/_rich-text.scss
index 2558fb63f..94ffc58b9 100644
--- a/assets/sass/protocol/base/utilities/_rich-text.scss
+++ b/assets/sass/protocol/base/utilities/_rich-text.scss
@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 @use '../../includes/lib' as *;
-@import '../../base/elements/tables';
+@use '../../base/elements/tables' as *;
 
 .mzp-u-rich-text {
     h2 {
@@ -17,10 +17,9 @@
     }
 
     h4 {
-        @include text-body-lg;
-        font-family: var(--body-font-family);
         margin-bottom: $layout-xs;
         margin-top: $layout-xs;
+        @include text-body-lg;
     }
 
     @media #{$mq-md} {
diff --git a/assets/sass/protocol/base/utilities/_titles.scss b/assets/sass/protocol/base/utilities/_titles.scss
index 041f26ac7..0a185f0d8 100644
--- a/assets/sass/protocol/base/utilities/_titles.scss
+++ b/assets/sass/protocol/base/utilities/_titles.scss
@@ -7,76 +7,36 @@
 // Utility classes for title styles.
 // These classes are purely presentational. Don't use them if you don't have to.
 
-.mzp-u-title-2xl {
-    @include text-title-2xl;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-2xl {
+    @include text-heading-2xl;
 }
 
-.mzp-u-title-xl {
-    @include text-title-xl;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-xl {
+    @include text-heading-xl;
 }
 
-.mzp-u-title-lg {
-    @include text-title-lg;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-lg {
+    @include text-heading-lg;
 }
 
-.mzp-u-title-md {
-    @include text-title-md;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-md {
+    @include text-heading-md;
 }
 
-.mzp-u-title-sm {
-    @include text-title-sm;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-sm {
+    @include text-heading-sm;
 }
 
-.mzp-u-title-xs {
-    @include text-title-xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-xs {
+    @include text-heading-xs;
 }
 
-.mzp-u-title-2xs {
-    @include text-title-2xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-2xs {
+    @include text-heading-2xs;
 }
 
-.mzp-u-title-3xs {
-    @include text-title-3xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
+.mzp-u-heading-3xs {
+    @include text-heading-3xs;
 }
 
 // Utility class for centered text.
diff --git a/assets/sass/protocol/components/_article.scss b/assets/sass/protocol/components/_article.scss
index c062def3e..881261ce5 100644
--- a/assets/sass/protocol/components/_article.scss
+++ b/assets/sass/protocol/components/_article.scss
@@ -22,7 +22,7 @@
 }
 
 .mzp-c-article-title {
-    @include text-title-lg;
+    @include text-heading-lg;
 }
 
 .mzp-c-article-intro {
diff --git a/assets/sass/protocol/components/_billboard.scss b/assets/sass/protocol/components/_billboard.scss
index c33f0cdfa..a4acb43ec 100644
--- a/assets/sass/protocol/components/_billboard.scss
+++ b/assets/sass/protocol/components/_billboard.scss
@@ -29,7 +29,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
     }
 
     .mzp-c-billboard-title {
-        @include text-title-md;
+        @include text-heading-md;
     }
 
     .mzp-c-billboard-image-container {
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index df12a2ade..b30ece294 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -16,9 +16,9 @@
     border: 2px solid transparent;
     cursor: pointer;
     display: inline-block;
-    font-family: $button-font-family;
+    font-family: var(--theme-button-font-family);
     font-weight: bold;
-    line-height: $body-line-height;
+    line-height: var(--theme-button-line-height);
     padding: $spacing-sm $spacing-md;
     text-align: center;
     text-decoration: none !important;  /* stylelint-disable-line declaration-no-important */
@@ -41,11 +41,6 @@
         opacity: 0.6;
         pointer-events: none;
     }
-
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-        line-height: var(--body-line-height);
-    }
 }
 
 // Sizes
@@ -208,9 +203,9 @@
 }
 
 .mzp-c-button-download-privacy-link {
-    @include text-body-xs;
     display: block;
     margin-top: forms.$info-v-spacing;
+    @include text-body-xs;
 
     a {
         color: inherit;
diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss
index 2d099dcc1..f8fb94ffd 100644
--- a/assets/sass/protocol/components/_callout.scss
+++ b/assets/sass/protocol/components/_callout.scss
@@ -11,8 +11,8 @@
     text-align: center;
 
     .mzp-c-callout-desc {
-        @include text-body-lg;
         margin-bottom: $spacing-lg;
+        @include text-body-lg;
     }
 
     .mzp-c-callout-cta,
@@ -32,7 +32,7 @@
     text-align: start;
 
     .mzp-c-callout-title {
-        @include text-title-sm;
+        @include text-heading-sm;
     }
 
     .mzp-c-callout-desc {
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index 9a4193a96..307fcb3df 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -45,11 +45,11 @@
     }
 
     .mzp-c-card-tag {
-        @include font-base;
-        @include text-body-sm;
         color: $color-marketing-gray-80;
         font-weight: normal;
         margin-bottom: $spacing-xs;
+        @include text-body-sm;
+        @include font-base;
     }
 
     &.mzp-has-video .mzp-c-card-tag,
@@ -72,7 +72,7 @@
     }
 
     .mzp-c-card-title {
-        @include text-title-xs;
+        @include text-heading-xs;
         display: inline;
     }
 
@@ -115,9 +115,9 @@
     }
 
     .mzp-c-card-meta {
-        @include text-body-xs;
         color: $color-marketing-gray-80;
         margin: $spacing-lg 0 0;
+        @include text-body-xs;
     }
 
     @media #{$mq-sm} {
@@ -189,7 +189,7 @@
 
 .mzp-c-card.mzp-c-card-large {
     .mzp-c-card-title {
-        @include text-title-md;
+        @include text-heading-md;
     }
 
     .mzp-c-card-desc {
@@ -211,7 +211,7 @@
     }
 
     .mzp-c-card-title {
-        @include text-title-2xs;
+        @include text-heading-2xs;
     }
 
     .mzp-c-card-desc {
diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss
index 30a7b5ace..60577f300 100644
--- a/assets/sass/protocol/components/_feature-card.scss
+++ b/assets/sass/protocol/components/_feature-card.scss
@@ -44,13 +44,13 @@
     }
 
     .mzp-c-card-feature-title {
-        @include text-title-sm;
+        @include text-heading-sm;
     }
 
     .mzp-c-card-feature-desc {
-        @include text-body-md;
         color: $color-marketing-gray-90;
         margin: $spacing-xs 0;
+        @include text-body-md;
     }
 
     .mzp-c-card-feature-list li {
diff --git a/assets/sass/protocol/components/_footer.scss b/assets/sass/protocol/components/_footer.scss
index c4e1ff5a9..4d99126ea 100644
--- a/assets/sass/protocol/components/_footer.scss
+++ b/assets/sass/protocol/components/_footer.scss
@@ -13,13 +13,13 @@
 // Footer section styles
 
 .mzp-c-footer {
-    @include font-mozilla-text;
-    @include white-links;
     background: $color-black;
     clear: both;
     color: $color-white;
     margin: 0;
     width: 100%;
+    @include font-mozilla-text;
+    @include white-links;
 
     a {
         font-weight: normal;
@@ -37,10 +37,10 @@
 // Footer primary section, contains logo and sections with links
 
 .mzp-c-footer-primary {
-    @include text-body-md;
+    margin: 0 auto $layout-sm;
     @include border-box;
     @include clearfix;
-    margin: 0 auto $layout-sm;
+    @include text-body-md;
 
     @media #{$mq-lg} {
         margin-bottom: $layout-xs;
@@ -143,18 +143,23 @@
 .mzp-c-footer-heading {
     &,
     & button {
-        @include font-mozilla-text;
-        @include text-body-md;
-        @include bidi(((text-align, left, right),));
-        @include footer-line;
         background-color: transparent;
-        border: 0;
         color: $color-light-gray-50;
         font-weight: bold;
         margin-bottom: 0;
         padding: $spacing-md 0;
         position: relative;
         width: 100%;
+        @include bidi(((text-align, left, right),));
+        @include footer-line;
+        @include text-body-md;
+        @include font-mozilla-text;
+
+        /* stylelint-disable-next-line no-duplicate-selectors */
+        & {
+            // needs to come after @includes to over-ride value
+            border: 0;
+        }
     }
 
     & button {
diff --git a/assets/sass/protocol/components/_language-switcher.scss b/assets/sass/protocol/components/_language-switcher.scss
index 2f74757b6..2a67994af 100644
--- a/assets/sass/protocol/components/_language-switcher.scss
+++ b/assets/sass/protocol/components/_language-switcher.scss
@@ -10,9 +10,9 @@
 
     label,
     .mzp-c-language-switcher-link {
-        @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),));
-        @include text-body-sm;
         display: inline-block;
+        @include bidi(((margin, 0 $spacing-lg $spacing-sm 0, 0 0 $spacing-sm $spacing-lg),));
+        font-size: var(--theme-body-font-size-sm); // just want smaller text size, so don't use full mixin
     }
 
     // hide the <label> visually should a language link be shown instead.
@@ -21,13 +21,13 @@
     }
 
     select {
-        @include text-body-xs;
         min-width: 0;
+        font-size: var(--theme-body-font-size-xs); // just want smaller text size, so don't use full mixin
     }
 
     button {
-        @include text-body-sm;
         margin-top: $spacing-sm;
+        font-size: var(--theme-body-font-size-sm); // just want smaller text size, so don't use full mixin
     }
 
     // form submit button is shown when JS is not enabled.
diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss
index 5324bc211..fc3cd3cac 100644
--- a/assets/sass/protocol/components/_menu-item.scss
+++ b/assets/sass/protocol/components/_menu-item.scss
@@ -56,20 +56,20 @@ $icon-size: 24px;
     }
 
     .mzp-c-menu-item-title {
-        @include text-title-2xs;
+        @include text-heading-2xs;
         display: inline;
     }
 
     .mzp-c-menu-item-desc {
-        @include text-body-sm;
         margin: $spacing-sm 0 0;
+        @include text-body-sm;
     }
 
     .mzp-c-menu-item-list {
         @include clearfix;
-        @include text-body-sm;
         margin: $spacing-md 0 0;
         position: relative;
+        @include text-body-sm;
 
         li {
             margin-bottom: $spacing-md;
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index 7ccbb3e3d..47110a7c5 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -9,13 +9,9 @@
 }
 
 .mzp-c-menu-list-title {
-    font-family: $button-font-family;
+    font-family: var(--theme-button-font-family);
     font-size: inherit;
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-    }
 }
 
 .mzp-c-menu-list-list {
diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss
index 2dfb10069..1e5ab5493 100644
--- a/assets/sass/protocol/components/_menu.scss
+++ b/assets/sass/protocol/components/_menu.scss
@@ -46,8 +46,6 @@
 
 .mzp-c-menu-category {
     .mzp-c-menu-title {
-        @include font-base;
-        @include text-body-md;
         border-bottom: 1px solid $color-marketing-gray-30;
         color: $color-black;
         display: block;
@@ -57,6 +55,8 @@
         padding: $spacing-sm 0;
         position: relative;
         text-decoration: none;
+        @include text-body-md;
+        @include font-base;
 
         &:hover,
         &:active,
diff --git a/assets/sass/protocol/components/_modal.scss b/assets/sass/protocol/components/_modal.scss
index 0af1be7dd..077e2ced0 100644
--- a/assets/sass/protocol/components/_modal.scss
+++ b/assets/sass/protocol/components/_modal.scss
@@ -60,7 +60,7 @@ html.mzp-is-noscroll {
         @include bidi(((padding-right, $spacing-xl * 2, padding-left, 0),));
 
         h2 {
-            @include text-title-xs;
+            @include text-heading-xs;
             @include font-base;
             color: #fff;
         }
@@ -102,12 +102,12 @@ html.mzp-is-noscroll {
 }
 
 .mzp-c-modal-overlay-contents {
-    @include text-body-lg;
-    @include light-links;
     background: transparent;
     margin: 0 auto;
     padding-top: $spacing-lg;
     color: $color-white;
+    @include text-body-lg;
+    @include light-links;
 }
 
 // Modifier for showing full content width media, such as images or video.
diff --git a/assets/sass/protocol/components/_newsletter-form.scss b/assets/sass/protocol/components/_newsletter-form.scss
index 4ffca6f8f..61579ee78 100644
--- a/assets/sass/protocol/components/_newsletter-form.scss
+++ b/assets/sass/protocol/components/_newsletter-form.scss
@@ -36,7 +36,7 @@
 }
 
 .mzp-c-newsletter-title {
-    @include text-title-md;
+    @include text-heading-md;
     margin-bottom: 0.25em;
 }
 
diff --git a/assets/sass/protocol/components/_notification-bar.scss b/assets/sass/protocol/components/_notification-bar.scss
index 0bfe6c736..4666f5dbe 100644
--- a/assets/sass/protocol/components/_notification-bar.scss
+++ b/assets/sass/protocol/components/_notification-bar.scss
@@ -5,9 +5,6 @@
 @use '../includes/lib' as *;
 
 .mzp-c-notification-bar {
-    @include border-box;
-    @include clearfix;
-    @include text-body-sm;
     background-color: $color-marketing-gray-20;
     border-radius: $border-radius-sm;
     border: 1px;
@@ -18,6 +15,9 @@
     padding: $spacing-md $spacing-2xl;
     position: relative;
     text-align: center;
+    @include border-box;
+    @include clearfix;
+    @include text-body-sm;
 
     @media #{$mq-sm} {
         margin: $layout-xs auto 0;
diff --git a/assets/sass/protocol/components/_picto.scss b/assets/sass/protocol/components/_picto.scss
index 6e117c5c6..a12f5c34d 100644
--- a/assets/sass/protocol/components/_picto.scss
+++ b/assets/sass/protocol/components/_picto.scss
@@ -14,7 +14,7 @@
 }
 
 .mzp-c-picto-heading {
-    @include text-title-xs;
+    @include text-heading-xs;
 }
 
 .mzp-c-picto-image {
diff --git a/assets/sass/protocol/components/_section-heading.scss b/assets/sass/protocol/components/_section-heading.scss
index f53d618c2..96fec0ce7 100644
--- a/assets/sass/protocol/components/_section-heading.scss
+++ b/assets/sass/protocol/components/_section-heading.scss
@@ -8,7 +8,7 @@
 // section heading
 
 .mzp-c-section-heading {
-    @include text-title-md;
+    @include text-heading-md;
     margin: 0 auto;
     padding: $h-grid-xs $layout-xs;
     max-width: $content-lg;
diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss
index ca22be8ea..71484e839 100644
--- a/assets/sass/protocol/components/_sidebar-menu.scss
+++ b/assets/sass/protocol/components/_sidebar-menu.scss
@@ -7,10 +7,10 @@
 // Sidebar menu
 
 .mzp-c-sidemenu {
-    @include text-body-md;
     background-color: $color-marketing-gray-20;
     padding: $spacing-sm $spacing-lg;
     margin: 0 -#{$spacing-lg} $layout-sm;
+    @include text-body-md;
 }
 
 .mzp-c-sidemenu-summary {
@@ -78,12 +78,12 @@
 }
 
 .mzp-c-sidemenu-label {
-    @include font-base;
-    @include text-body-sm;
+    position: relative;
     @include bidi((
         (padding-right, $spacing-lg, padding-left, 0),
     ));
-    position: relative;
+    @include text-body-sm;
+    @include font-base;
 
     &::after {
         @include bidi((
@@ -99,10 +99,10 @@
 }
 
 .mzp-c-sidemenu-title {
-    @include font-base;
-    @include text-body-lg;
     line-height: 1.5;
     margin-bottom: 0.25em;
+    @include text-body-lg;
+    @include font-base;
 
     a {
         padding: 0.35em $spacing-md;
@@ -130,9 +130,9 @@
         }
 
         .mzp-c-sidemenu-main {
-            @include text-body-md;
             display: block;
             margin: $spacing-md -#{$spacing-md} 0;
+            @include text-body-md;
         }
     }
 }
@@ -152,10 +152,10 @@
         }
 
         .mzp-c-sidemenu {
-            @include text-body-md;
             background-color: transparent;
             padding: 0;
             margin: 0;
+            @include text-body-md;
         }
     }
 }
diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss
index 7ed7b6740..154894553 100644
--- a/assets/sass/protocol/components/_sticky-promo.scss
+++ b/assets/sass/protocol/components/_sticky-promo.scss
@@ -92,7 +92,7 @@ $logos: (
 }
 
 .mzp-c-sticky-promo-title {
-    @include text-display-xs;
+    @include text-heading-xs;
     margin-bottom: $spacing-xl;
 }
 
diff --git a/assets/sass/protocol/components/forms/_button-container.scss b/assets/sass/protocol/components/forms/_button-container.scss
index cec468dc4..3c0aa1180 100644
--- a/assets/sass/protocol/components/forms/_button-container.scss
+++ b/assets/sass/protocol/components/forms/_button-container.scss
@@ -68,8 +68,8 @@
 }
 
 .mzp-c-button-info {
-    @include forms.form-info;
-    @include text-body-xs;
     padding-top: forms.$info-v-spacing;
     width: 100%;
+    @include forms.form-info;
+    @include text-body-xs;
 }
diff --git a/assets/sass/protocol/components/forms/_form.scss b/assets/sass/protocol/components/forms/_form.scss
index a42c1bb10..d066332aa 100644
--- a/assets/sass/protocol/components/forms/_form.scss
+++ b/assets/sass/protocol/components/forms/_form.scss
@@ -66,10 +66,8 @@
 // Title
 .mzp-c-form-title,
 legend.mzp-c-form-title {
-    @include text-title-xs;
+    @include text-heading-xs;
     color: $title-text-color;
-    font-family: $title-font-family;
-    font-weight: bold;
     margin: 0 0 $spacing-lg;
 
     .mzp-c-form-header > & {
@@ -81,11 +79,10 @@ legend.mzp-c-form-title {
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--heading-text-color);
 
         .mzp-t-dark & {
-            color: var(--title-text-color-inverse);
+            color: var(--heading-text-color-inverse);
         }
     }
 }
@@ -93,9 +90,9 @@ legend.mzp-c-form-title {
 // Subtitle
 .mzp-c-form-subtitle,
 legend.mzp-c-form-subtitle {
-    @include text-body-lg;
     font-weight: bold;
     margin-bottom: forms.$field-v-spacing;
+    @include text-body-lg;
 }
 
 legend.mzp-c-form-title,
diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss
index 1ca11c474..dabe3ea02 100644
--- a/assets/sass/protocol/includes/_themes-sass.scss
+++ b/assets/sass/protocol/includes/_themes-sass.scss
@@ -2,17 +2,12 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-// This file contains all the theme variables for both the Firefox and Mozilla
-//  Mixins and functions can draw from these variable maps, swapping to
-// a different map based on the value of the global $brand-theme variable.
+// Default theme variables for legacy browsers (IE 11 etc)
+// These are used directly by components as Sass variables.
 
-@use 'sass:map';
 @use 'tokens';
-@use 'config';
-@use 'functions';
 
-
-// Default "theme" that will be served to legacy browsers -  IE 11 etc
+// Spacing
 $v-grid-xs: tokens.$layout-md;
 $h-grid-xs: tokens.$layout-xs;
 $v-grid-sm: tokens.$layout-md;
@@ -24,12 +19,7 @@ $h-grid-lg: tokens.$layout-lg;
 $v-grid-xl: tokens.$layout-xl;
 $h-grid-xl: 80px;
 
-// fonts
-$body-font-family: tokens.$font-stack-mozilla-text;
-$button-font-family: tokens.$font-stack-mozilla-text;
-$title-font-family: tokens.$font-stack-mozilla-headline;
-
-// colors
+// Colors
 $background-color-tertiary-inverse: tokens.$color-dark-gray-40;
 $background-color-tertiary: tokens.$color-light-gray-30;
 $background-color-secondary-inverse: tokens.$color-dark-gray-60;
@@ -48,273 +38,3 @@ $link-color-visited: tokens.$color-link-visited;
 $link-color: tokens.$color-link;
 $title-text-color-inverse: tokens.$color-white;
 $title-text-color: tokens.$color-black;
-
-// type-scale
-$title-2xl-size: 64px;
-$title-2xl-line-height: 1.125;
-$title-xl-size: 56px;
-$title-xl-line-height: 1.143;
-$title-lg-size: 48px;
-$title-lg-line-height: 1.166;
-$title-md-size: 40px;
-$title-md-line-height: 1.1;
-$title-sm-size: 32px;
-$title-sm-line-height: 1.125;
-$title-xs-size: 24px;
-$title-xs-line-height: 1.166;
-$title-2xs-size: 20px;
-$title-2xs-line-height: 1.2;
-$title-3xs-size: 16px;
-$title-3xs-line-height: 1.25;
-$body-xl-size: 21px;
-$body-lg-size: 18px;
-$body-md-size: 16px;
-$body-sm-size: 14px;
-$body-xs-size: 12px;
-$body-line-height: 1.5;
-
-// * -------------------------------------------------------------------------- */
-// Vertical and Horizontal Spacing
-
-$theme-spacing: (
-    // xs
-    v-grid-xs: tokens.$layout-md,
-    h-grid-xs: tokens.$layout-xs,
-    // sm is the same as xs
-    v-grid-sm: tokens.$layout-md,
-    h-grid-sm: tokens.$layout-xs,
-    // md
-    v-grid-md: tokens.$layout-md,
-    h-grid-md: tokens.$layout-lg,
-    // lg is the same as md
-    v-grid-lg: tokens.$layout-md,
-    h-grid-lg: tokens.$layout-lg,
-    // xl
-    v-grid-xl: tokens.$layout-xl,
-    h-grid-xl: 80px,
-);
-
-// * -------------------------------------------------------------------------- */
-// Fonts
-
-$theme-fonts-firefox: (
-    body-font-family: tokens.$font-stack-base,
-    button-font-family: tokens.$font-stack-firefox,
-    title-font-family: tokens.$font-stack-firefox,
-);
-$theme-fonts-mozilla: (
-    body-font-family: tokens.$font-stack-mozilla-text,
-    button-font-family: tokens.$font-stack-mozilla-text,
-    title-font-family: tokens.$font-stack-mozilla-headline,
-);
-
-// * -------------------------------------------------------------------------- */
-// Colors
-
-$theme-colors-firefox: (
-    background-color-tertiary-inverse: tokens.$color-ink-20,
-    background-color-tertiary: tokens.$color-marketing-gray-20,
-    background-color-secondary-inverse: tokens.$color-ink-50,
-    background-color-secondary: tokens.$color-light-gray-10,
-    background-color-inverse: tokens.$color-ink-80,
-    background-color: tokens.$color-white,
-    body-text-color-secondary-inverse: tokens.$color-marketing-gray-30,
-    body-text-color-secondary: tokens.$color-marketing-gray-70,
-    body-text-color-inverse: tokens.$color-white,
-    body-text-color: tokens.$color-marketing-gray-80,
-    link-color-hover-inverse: tokens.$color-blue-05,
-    link-color-hover: tokens.$color-link-hover,
-    link-color-inverse: tokens.$color-blue-10,
-    link-color-visited-inverse: tokens.$color-violet-10,
-    link-color-visited: tokens.$color-link-visited,
-    link-color: tokens.$color-link,
-    title-text-color-inverse: tokens.$color-white,
-    title-text-color: tokens.$color-marketing-gray-99,
-);
-$theme-colors-mozilla: (
-    background-color-tertiary-inverse: tokens.$color-dark-gray-40,
-    background-color-tertiary: tokens.$color-light-gray-30,
-    background-color-secondary-inverse: tokens.$color-dark-gray-60,
-    background-color-secondary: tokens.$color-light-gray-10,
-    background-color-inverse: tokens.$color-black,
-    background-color: tokens.$color-white,
-    body-text-color-secondary-inverse: tokens.$color-light-gray-30,
-    body-text-color-secondary: tokens.$color-dark-gray-90,
-    body-text-color-inverse: tokens.$color-white,
-    body-text-color: tokens.$color-black,
-    link-color-hover-inverse: tokens.$color-blue-05,
-    link-color-hover: tokens.$color-link-hover,
-    link-color-inverse: tokens.$color-blue-10,
-    link-color-visited-inverse: tokens.$color-violet-10,
-    link-color-visited: tokens.$color-link-visited,
-    link-color: tokens.$color-link,
-    title-text-color-inverse: tokens.$color-white,
-    title-text-color: tokens.$color-black,
-);
-
-// * -------------------------------------------------------------------------- */
-// Type scale
-
-// These values are used by the type-scale() function
-// defined in includes/functions/_typography.scss
-
-// Avoid referencing these values directly; Use the function.
-
-$theme-type-scale-firefox: (
-    title-2xl-size: 64px,
-    title-2xl-line-height: 1.125,
-    title-xl-size: 56px,
-    title-xl-line-height: 1.143,
-    title-lg-size: 48px,
-    title-lg-line-height: 1.166,
-    title-md-size: 40px,
-    title-md-line-height: 1.1,
-    title-sm-size: 32px,
-    title-sm-line-height: 1.125,
-    title-xs-size: 24px,
-    title-xs-line-height: 1.166,
-    title-2xs-size: 20px,
-    title-2xs-line-height: 1.2,
-    title-3xs-size: 16px,
-    title-3xs-line-height: 1.25,
-    body-xl-size: 21px,
-    body-lg-size: 18px,
-    body-md-size: 16px,
-    body-sm-size: 14px,
-    body-xs-size: 12px,
-    body-line-height: 1.5,
-);
-$theme-type-scale-mozilla: (
-    title-2xl-size: 76px,
-    title-2xl-line-height: 1,
-    title-xl-size: 66px,
-    title-xl-line-height: 1,
-    title-lg-size: 56px,
-    title-lg-line-height: 1,
-    title-md-size: 48px,
-    title-md-line-height: 1,
-    title-sm-size: 38px,
-    title-sm-line-height: 1.05,
-    title-xs-size: 28px,
-    title-xs-line-height: 1.07,
-    title-2xs-size: 24px,
-    title-2xs-line-height: 1.08,
-    title-3xs-size: 18px,
-    title-3xs-line-height: 1.11,
-    body-xl-size: 21px,
-    body-lg-size: 18px,
-    body-md-size: 16px,
-    body-sm-size: 14px,
-    body-xs-size: 12px,
-    body-line-height: 1.5,
-);
-
-// * -------------------------------------------------------------------------- */
-// Condensed Type scale
-
-// This smaller scale is primarily intended for web apps.
-// Use the standard type scale for marketing sites.
-
-// The type-scale() function draws from this map to output
-// different sizing based on the $type-scale variable.
-
-// Avoid referencing these values directly.
-
-$theme-type-scale-condensed-firefox: (
-    title-2xl-size: 32px,
-    title-2xl-line-height: 1.125,
-    title-xl-size: 24px,
-    title-xl-line-height: 1.166,
-    title-lg-size: 21px,
-    title-lg-line-height: 1.2,
-    title-md-size: 18px,
-    title-md-line-height: 1.2,
-    title-sm-size: 16px,
-    title-sm-line-height: 1.25,
-    title-xs-size: 14px,
-    title-xs-line-height: 1.25,
-    title-2xs-size: 14px,
-    title-2xs-line-height: 1.25,
-    title-3xs-size: 14px,
-    title-3xs-line-height: 1.25,
-    body-xl-size: 18px,
-    body-lg-size: 16px,
-    body-md-size: 14px,
-    body-sm-size: 12px,
-    body-xs-size: 11px,
-    body-line-height: 1.5,
-);
-$theme-type-scale-condensed-mozilla: (
-    title-2xl-size: 34px,
-    title-2xl-line-height: 1,
-    title-xl-size: 26px,
-    title-xl-line-height: 1,
-    title-lg-size: 22px,
-    title-lg-line-height: 1,
-    title-md-size: 20px,
-    title-md-line-height: 1,
-    title-sm-size: 18px,
-    title-sm-line-height: 1,
-    title-xs-size: 16px,
-    title-xs-line-height: 1,
-    title-2xs-size: 14px,
-    title-2xs-line-height: 1,
-    title-3xs-size: 14px,
-    title-3xs-line-height: 1,
-    body-xl-size: 18px,
-    body-lg-size: 16px,
-    body-md-size: 14px,
-    body-sm-size: 12px,
-    body-xs-size: 11px,
-    body-line-height: 1.5,
-);
-
-@function type-scale($scale) {
-    // Default to Firefox brand scale
-    $scale-map: $theme-type-scale-firefox;
-
-    // Firefox condensed
-    @if config.$type-scale == 'condensed' {
-        $scale-map: $theme-type-scale-condensed-firefox;
-    }
-
-    // Switch to Mozilla brand scale
-    @if config.$brand-theme == 'mozilla' {
-        $scale-map: $theme-type-scale-mozilla;
-    }
-
-    // Mozilla condensed
-    @if config.$brand-theme == 'mozilla' and config.$type-scale == 'condensed' {
-        $scale-map: $theme-type-scale-condensed-mozilla;
-    }
-
-    @if not map.has-key($scale-map, $scale) {
-        @error '`#{$scale}` is not a valid type scale variable name. ' + 'Valid variable names: #{map.keys($scale-map)}';
-    }
-
-    @return map.get($scale-map, $scale);
-}
-
-// Collect the maps for easier reference, so you don't have to refer to a specific submap.
-// Usage:
-//    map-get($theme-firefox, 'background-color-secondary');
-
-$theme-firefox: functions.map-collect($theme-spacing, $theme-fonts-firefox, $theme-colors-firefox, $theme-type-scale-firefox);
-$theme-mozilla: functions.map-collect($theme-spacing, $theme-fonts-mozilla, $theme-colors-mozilla, $theme-type-scale-mozilla);
-
-// this can just be "get" and will import with theme- so we have theme-get and theme-type-scale
-@function get-theme($var) {
-    // Default to Firefox theme
-    $theme-map: $theme-firefox;
-
-    // Switch to Mozilla theme
-    @if config.$brand-theme == 'mozilla' {
-        $theme-map: $theme-mozilla;
-    }
-
-    @if not map.has-key($theme-map, $var) {
-        @error '`#{$var}` is not a valid theme variable. ' + 'Valid theme variable names: #{map.keys($theme-map)}';
-    }
-
-    @return map.get($theme-map, $var);
-}
diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss
index 5b955cc6d..d81aad2c5 100644
--- a/assets/sass/protocol/includes/forms/_index.scss
+++ b/assets/sass/protocol/includes/forms/_index.scss
@@ -64,39 +64,36 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
 // use padding as much as possible, margins don't collapse on form elements
 
 @mixin field-label() {
-    @include text-body-sm;
     display: block;
     font-weight: bold;
-    line-height: $text-body-line-height;
     margin: 0;
     padding-bottom: $label-v-spacing;
-
-    @supports (--css: variables) {
-        line-height: var(--body-line-height);
-    }
+    @include text-body-sm;
 }
 
 @mixin form-info() {
-    @include text-body-sm;
     display: block;
     font-weight: normal;
     margin-bottom: 0;
+    @include text-body-sm;
 }
 
 @mixin form-input() {
-    @include border-box;
-    @include text-body-md;
     background-color: $color-white;
     border-radius: $field-border-radius;
     border: $field-border;
-    line-height: 1.25;
     margin: 0 0 $field-v-spacing;
     padding: $field-padding;
+    @include border-box;
+    @include text-body-md;
+    @include font-base;
+
+    & { // needs to come after @includes to over-ride value
+        line-height: var(--theme-button-line-height);
+    }
 }
 
 @mixin form-msg() {
-    @include text-body-xs;
-    @include border-box;
     background-color: $field-border-color-error-hover;
     border-radius: $border-radius-sm;
     box-shadow: $box-shadow-sm;
@@ -106,6 +103,8 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
     max-width: 100%;
     padding: $spacing-xs #{$spacing-sm + 2px};
     position: relative;
+    @include text-body-xs;
+    @include border-box;
 }
 
 @mixin form-msg-pointer() {
diff --git a/assets/sass/protocol/includes/mixins/_typography.scss b/assets/sass/protocol/includes/mixins/_typography.scss
index 662fd1598..e70cf7fe4 100644
--- a/assets/sass/protocol/includes/mixins/_typography.scss
+++ b/assets/sass/protocol/includes/mixins/_typography.scss
@@ -4,9 +4,8 @@
 
 @use 'sass:math';
 @use 'sass:meta';
-@use '../tokens';
-@use '../themes-sass' as themes;
-@use '../functions';
+@use '../functions' as functions;
+@use '../tokens' as tokens;
 
 // * -------------------------------------------------------------------------- */
 // Font families
@@ -27,9 +26,9 @@
 }
 
 // * -------------------------------------------------------------------------- */
-// A mixin to output font-size in rems with a px fallback for old browsers.
+// A mixin to output font-size in rems.
 // Declare sizes in pixels for ease and clarity, the mixin does the math.
-// Requires: remify(), pixify() - defined in includes/themes.scss.
+// Requires: remify() - defined in includes/functions.scss.
 // Usage:
 //  .foo { @include font-size(24px); }
 
@@ -37,7 +36,6 @@
     // When unit is pixels, pass it through and convert to rem
 
     @if math.unit($size) == 'px' {
-        font-size: $size;
         font-size: functions.remify($size);
     }
 
@@ -54,228 +52,98 @@
 // getting too tiny.
 
 // Example usage:
-//  .title { @include text-title-xl; }
-//  .subtitle { @include text-title-lg; }
+//  .title { @include text-heading-xl; }
+//  .subtitle { @include text-heading-lg; }
 //  .intro { @include text-body-lg; }
 
-@mixin text-title-2xl {
-    @include font-size(themes.$title-xl-size);
-    line-height: themes.$title-xl-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-2xl-size);
-        line-height: themes.$title-2xl-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-xl-size);
-        line-height: var(--title-xl-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-2xl-size);
-            line-height: var(--title-2xl-line-height);
-        }
-    }
+@mixin text-heading-2xl {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-2xl);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-2xl);
+    letter-spacing: var(--theme-heading-letter-spacing);
 }
 
-@mixin text-title-xl {
-    @include font-size(themes.$title-lg-size);
-    line-height: themes.$title-lg-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-xl-size);
-        line-height: themes.$title-xl-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-lg-size);
-        line-height: var(--title-lg-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-xl-size);
-            line-height: var(--title-xl-line-height);
-        }
-    }
+@mixin text-heading-xl {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-xl);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-xl);
+    letter-spacing: var(--theme-heading-letter-spacing);
 }
 
-@mixin text-title-lg {
-    @include font-size(themes.$title-md-size);
-    line-height: themes.$title-md-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-lg-size);
-        line-height: themes.$title-lg-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-md-size);
-        line-height: var(--title-md-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-lg-size);
-            line-height: var(--title-lg-line-height);
-        }
-    }
+@mixin text-heading-lg {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-lg);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-lg);
+    letter-spacing: var(--theme-heading-letter-spacing);
 }
 
-@mixin text-title-md {
-    @include font-size(themes.$title-sm-size);
-    line-height: themes.$title-sm-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-md-size);
-        line-height: themes.$title-md-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-sm-size);
-        line-height: var(--title-sm-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-md-size);
-            line-height: var(--title-md-line-height);
-        }
-    }
+@mixin text-heading-md {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-md);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-md);
+    letter-spacing: var(--theme-heading-letter-spacing);
 }
 
-@mixin text-title-sm {
-    @include font-size(themes.$title-xs-size);
-    line-height: themes.$title-xs-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-sm-size);
-        line-height: themes.$title-sm-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-xs-size);
-        line-height: var(--title-xs-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-sm-size);
-            line-height: var(--title-sm-line-height);
-        }
-    }
+@mixin text-heading-sm {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-sm);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-sm);
 }
 
-@mixin text-title-xs {
-    @include font-size(themes.$title-2xs-size);
-    line-height: themes.$title-2xs-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-xs-size);
-        line-height: themes.$title-xs-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-2xs-size);
-        line-height: var(--title-2xs-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-xs-size);
-            line-height: var(--title-xs-line-height);
-        }
-    }
+@mixin text-heading-xs {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-xs);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-xs);
 }
 
-@mixin text-title-2xs {
-    @include font-size(themes.$title-3xs-size);
-    line-height: themes.$title-3xs-line-height;
-
-    @media #{tokens.$mq-md} {
-        @include font-size(themes.$title-2xs-size);
-        line-height: themes.$title-2xs-line-height;
-    }
-
-    @supports (--css: variables) {
-        font-size: var(--title-3xs-size);
-        line-height: var(--title-3xs-line-height);
-
-        @media #{tokens.$mq-md} {
-            font-size: var(--title-2xs-size);
-            line-height: var(--title-2xs-line-height);
-        }
-    }
+@mixin text-heading-2xs {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-2xs);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-2xs);
 }
 
-@mixin text-title-3xs {
-    @include font-size(themes.$title-3xs-size);
-    line-height: themes.$title-3xs-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--title-3xs-size);
-        line-height: var(--title-3xs-line-height);
-    }
+@mixin text-heading-3xs {
+    font-family: var(--theme-heading-font-family);
+    font-size: var(--theme-heading-font-size-3xs);
+    font-weight: var(--theme-heading-font-weight);
+    line-height: var(--theme-heading-line-height-3xs);
 }
 
 // body copy
 @mixin text-body-xl {
-    @include font-size(themes.$body-xl-size);
-    line-height: themes.$body-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--body-xl-size);
-        line-height: var(--body-line-height);
-    }
+    font-family: var(--theme-body-font-family);
+    font-size: var(--theme-body-font-size-xl);
+    line-height: var(--theme-body-line-height);
 }
 
 @mixin text-body-lg {
-    @include font-size(themes.$body-lg-size);
-    line-height: themes.$body-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--body-lg-size);
-        line-height: var(--body-line-height);
-    }
+    font-family: var(--theme-body-font-family);
+    font-size: var(--theme-body-font-size-lg);
+    line-height: var(--theme-body-line-height);
 }
 
 @mixin text-body-md {
-    @include font-size(themes.$body-md-size);
-    line-height: themes.$body-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--body-md-size);
-        line-height: var(--body-line-height);
-    }
+    font-family: var(--theme-body-font-family);
+    font-size: var(--theme-body-font-size-md);
+    line-height: var(--theme-body-line-height);
 }
 
 @mixin text-body-sm {
-    @include font-size(themes.$body-sm-size);
-    line-height: themes.$body-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--body-sm-size);
-        line-height: var(--body-line-height);
-    }
+    font-family: var(--theme-body-font-family);
+    font-size: var(--theme-body-font-size-sm);
+    line-height: var(--theme-body-line-height);
 }
 
 @mixin text-body-xs {
-    @include font-size(themes.$body-xs-size);
-    line-height: themes.$body-line-height;
-
-    @supports (--css: variables) {
-        font-size: var(--body-xs-size);
-        line-height: var(--body-line-height);
-    }
+    font-family: var(--theme-body-font-family);
+    font-size: var(--theme-body-font-size-xs);
+    line-height: var(--theme-body-line-height);
 }
 
-// Aliases for backwards compatibility
-$text-body-line-height: themes.$body-line-height;
-$text-title-line-height: themes.$title-md-line-height;
-$text-display-line-height: $text-title-line-height;
-
-@mixin text-display-xxl { @include text-title-2xl; }
-
-@mixin text-display-xl { @include text-title-xl; }
-
-@mixin text-display-lg { @include text-title-lg; }
-
-@mixin text-display-md { @include text-title-md; }
-
-@mixin text-display-sm { @include text-title-sm; }
-
-@mixin text-display-xs { @include text-title-xs; }
-
-@mixin text-display-xxs { @include text-title-2xs; }
-
-@mixin text-body-cta { @include text-body-md; }
diff --git a/assets/sass/protocol/includes/themes/_firefox.scss b/assets/sass/protocol/includes/themes/_firefox.scss
index 8518440f0..7facfe403 100644
--- a/assets/sass/protocol/includes/themes/_firefox.scss
+++ b/assets/sass/protocol/includes/themes/_firefox.scss
@@ -6,9 +6,13 @@
 
 %firefox-theme {
     // fonts
-    --body-font-family: #{tokens.$font-stack-base};
-    --button-font-family: #{tokens.$font-stack-firefox};
-    --title-font-family: #{tokens.$font-stack-firefox};
+    --token-body-font-family: #{tokens.$font-stack-base};
+    --token-body-font-ligatures: none;
+    --token-button-font-family: #{tokens.$font-stack-firefox};
+    --token-heading-font-family: #{tokens.$font-stack-firefox};
+    --token-heading-font-ligatures: none;
+    --token-heading-font-weight: 600;
+    --token-heading-letter-spacing: 0;
 
     // colors
     --background-color-tertiary-inverse: #{tokens.$color-ink-20};
@@ -27,57 +31,59 @@
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};
-    --title-text-color-inverse: #{tokens.$color-white};
-    --title-text-color: #{tokens.$color-marketing-gray-99};
+    --heading-text-color-inverse: #{tokens.$color-white};
+    --heading-text-color: #{tokens.$color-marketing-gray-99};
 }
 
 %firefox-type-scale {
     // typescale
-    --title-2xl-size: 4rem;
-    --title-2xl-line-height: 1.125;
-    --title-xl-size: 3.5rem;
-    --title-xl-line-height: 1.143;
-    --title-lg-size: 3rem;
-    --title-lg-line-height: 1.166;
-    --title-md-size: 2.5rem;
-    --title-md-line-height: 1.1;
-    --title-sm-size: 2rem;
-    --title-sm-line-height: 1.125;
-    --title-xs-size: 1.5rem;
-    --title-xs-line-height: 1.166;
-    --title-2xs-size: 1.25rem;
-    --title-2xs-line-height: 1.2;
-    --title-3xs-size: 1rem;
-    --title-3xs-line-height: 1.25;
-    --body-xl-size: 1.313rem;
-    --body-lg-size: 1.125rem;
-    --body-md-size: 1rem;
-    --body-sm-size: 0.875rem;
-    --body-xs-size: 0.75rem;
-    --body-line-height: 1.5;
+    --token-heading-font-size-plus-3: 4rem;
+    --token-heading-line-height-plus-3: 1.125;
+    --token-heading-font-size-plus-2: 3.5rem;
+    --token-heading-line-height-plus-2: 1.143;
+    --token-heading-font-size-plus-1: 3rem;
+    --token-heading-line-height-plus-1: 1.166;
+    --token-heading-font-size: 2.5rem;
+    --token-heading-line-height: 1.1;
+    --token-heading-font-size-minus-1: 2rem;
+    --token-heading-line-height-minus-1: 1.125;
+    --token-heading-font-size-minus-2: 1.5rem;
+    --token-heading-line-height-minus-2: 1.166;
+    --token-heading-font-size-minus-3: 1.25rem;
+    --token-heading-line-height-minus-3: 1.2;
+    --token-heading-font-size-minus-4: 1rem;
+    --token-heading-line-height-minus-4: 1.25;
+    --token-body-font-size-plus-2: 1.313rem;
+    --token-body-font-size-plus-1: 1.125rem;
+    --token-body-font-size: 1rem;
+    --token-body-font-size-minus-1: 0.875rem;
+    --token-body-font-size-minus-2: 0.75rem;
+    --token-body-line-height: 1.5;
+    --token-button-line-height: 1.25;
 }
 
 %firefox-type-scale-condensed {
-    --title-2xl-size: 2rem;
-    --title-2xl-line-height: 1.125;
-    --title-xl-size: 1.5rem;
-    --title-xl-line-height: 1.166;
-    --title-lg-size: 1.313rem;
-    --title-lg-line-height: 1.2;
-    --title-md-size: 1.125rem;
-    --title-md-line-height: 1.2;
-    --title-sm-size: 1rem;
-    --title-sm-line-height: 1.25;
-    --title-xs-size: 0.875rem;
-    --title-xs-line-height: 1.25;
-    --title-2xs-size: 0.875rem;
-    --title-2xs-line-height: 1.25;
-    --title-3xs-size: 0.875rem;
-    --title-3xs-line-height: 1.25;
-    --body-xl-size: 1.125rem;
-    --body-lg-size: 1rem;
-    --body-md-size: 0.875rem;
-    --body-sm-size: 0.8rem;
-    --body-xs-size: 0.688rem;
-    --body-line-height: 1.5;
+    --token-heading-font-size-plus-3: 2rem;
+    --token-heading-line-height-plus-3: 1.125;
+    --token-heading-font-size-plus-2: 1.5rem;
+    --token-heading-line-height-plus-2: 1.166;
+    --token-heading-font-size-plus-1: 1.313rem;
+    --token-heading-line-height-plus-1: 1.2;
+    --token-heading-font-size: 1.125rem;
+    --token-heading-line-height: 1.2;
+    --token-heading-font-size-minus-1: 1rem;
+    --token-heading-line-height-minus-1: 1.25;
+    --token-heading-font-size-minus-2: 0.875rem;
+    --token-heading-line-height-minus-2: 1.25;
+    --token-heading-font-size-minus-3: 0.875rem;
+    --token-heading-line-height-minus-3: 1.25;
+    --token-heading-font-size-minus-4: 0.875rem;
+    --token-heading-line-height-minus-4: 1.25;
+    --token-body-font-size-plus-2: 1.125rem;
+    --token-body-font-size-plus-1: 1rem;
+    --token-body-font-size: 0.875rem;
+    --token-body-font-size-minus-1: 0.8rem;
+    --token-body-font-size-minus-2: 0.688rem;
+    --token-body-line-height: 1.5;
+    --token-button-line-height: 1.25;
 }
diff --git a/assets/sass/protocol/includes/themes/_index.scss b/assets/sass/protocol/includes/themes/_index.scss
index 92012982c..4742ec7ce 100644
--- a/assets/sass/protocol/includes/themes/_index.scss
+++ b/assets/sass/protocol/includes/themes/_index.scss
@@ -10,8 +10,12 @@
 @use 'firefox';
 @use '../tokens';
 @use '../config';
+@use '../lib';
 @forward '../themes-sass';
 
+
+// naming pattern for theme variables --theme-<component/role>-<property>-<scale>
+
 :root {
     --v-grid-xs: #{tokens.$layout-md};
     --h-grid-xs: #{tokens.$layout-xs};
@@ -47,4 +51,62 @@
             @extend %firefox-type-scale-condensed;
         }
     }
+
+    // headings
+    --theme-heading-font-family: var(--token-heading-font-family);
+    --theme-heading-font-ligatures: var(--token-heading-font-ligatures);
+    --theme-heading-font-size-2xl: var(--token-heading-font-size-plus-2);
+    --theme-heading-font-size-xl: var(--token-heading-font-size-plus-1);
+    --theme-heading-font-size-lg: var(--token-heading-font-size);
+    --theme-heading-font-size-md: var(--token-heading-font-size-minus-1);
+    --theme-heading-font-size-sm: var(--token-heading-font-size-minus-2);
+    --theme-heading-font-size-xs: var(--token-heading-font-size-minus-3);
+    --theme-heading-font-size-2xs: var(--token-heading-font-size-minus-4);
+    --theme-heading-font-size-3xs: var(--token-heading-font-size-minus-4);
+    --theme-heading-font-weight: var(--token-heading-font-weight);
+    --theme-heading-letter-spacing: var(--token-heading-letter-spacing);
+    --theme-heading-line-height-2xl: var(--token-heading-line-height-plus-2);
+    --theme-heading-line-height-xl: var(--token-heading-line-height-plus-1);
+    --theme-heading-line-height-lg: var(--token-heading-line-height);
+    --theme-heading-line-height-md: var(--token-heading-line-height-minus-1);
+    --theme-heading-line-height-sm: var(--token-heading-line-height-minus-2);
+    --theme-heading-line-height-xs: var(--token-heading-line-height-minus-3);
+    --theme-heading-line-height-2xs: var(--token-heading-line-height-minus-4);
+    --theme-heading-line-height-3xs: var(--token-heading-line-height-minus-4);
+
+    // body
+    --theme-body-font-family: var(--token-body-font-family);
+    --theme-body-font-ligatures: var(--token-body-font-ligatures);
+    --theme-body-font-size-xl: var(--token-body-font-size-plus-2);
+    --theme-body-font-size-lg: var(--token-body-font-size-plus-1);
+    --theme-body-font-size-md: var(--token-body-font-size);
+    --theme-body-font-size-sm: var(--token-body-font-size-minus-1);
+    --theme-body-font-size-xs: var(--token-body-font-size-minus-2);
+    --theme-body-line-height: var(--token-body-line-height);
+
+    // buttons
+    --theme-button-font-family: var(--token-button-font-family);
+    --theme-button-line-height: var(--token-button-line-height);
+}
+
+@media #{lib.$mq-md} {
+    :root {
+        // headings
+        --theme-heading-font-size-2xl: var(--token-heading-font-size-plus-3);
+        --theme-heading-font-size-xl: var(--token-heading-font-size-plus-2);
+        --theme-heading-font-size-lg: var(--token-heading-font-size-plus-1);
+        --theme-heading-font-size-md: var(--token-heading-font-size);
+        --theme-heading-font-size-sm: var(--token-heading-font-size-minus-1);
+        --theme-heading-font-size-xs: var(--token-heading-font-size-minus-2);
+        --theme-heading-font-size-2xs: var(--token-heading-font-size-minus-3);
+        --theme-heading-font-size-3xs: var(--token-heading-font-size-minus-4);
+        --theme-heading-line-height-2xl: var(--token-heading-line-height-plus-3);
+        --theme-heading-line-height-xl: var(--token-heading-line-height-plus-2);
+        --theme-heading-line-height-lg: var(--token-heading-line-height-plus-1);
+        --theme-heading-line-height-md: var(--token-heading-line-height);
+        --theme-heading-line-height-sm: var(--token-heading-line-height-minus-1);
+        --theme-heading-line-height-xs: var(--token-heading-line-height-minus-2);
+        --theme-heading-line-height-2xs: var(--token-heading-line-height-minus-3);
+        --theme-heading-line-height-3xs: var(--token-heading-line-height-minus-4);
+    }
 }
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
index e8efdb0c2..83bc2765e 100644
--- a/assets/sass/protocol/includes/themes/_mozilla.scss
+++ b/assets/sass/protocol/includes/themes/_mozilla.scss
@@ -7,13 +7,13 @@
 
 %mozilla-theme {
     // fonts
-    --body-font-family: #{tokens.$font-stack-mozilla-text};
-    --button-font-family: #{tokens.$font-stack-mozilla-text};
-    --title-font-family: #{tokens.$font-stack-mozilla-headline};
-    --title-font-ligatures: none;
-    --body-font-ligatures: none;
-    --title-font-weight: 600;
-    --title-letter-spacing: -0.01em;
+    --token-body-font-family: #{tokens.$font-stack-mozilla-text};
+    --token-body-font-ligatures: none;
+    --token-button-font-family: #{tokens.$font-stack-mozilla-text};
+    --token-heading-font-family: #{tokens.$font-stack-mozilla-headline};
+    --token-heading-font-ligatures: none;
+    --token-heading-font-weight: 600;
+    --token-heading-letter-spacing: -0.01em;
 
     // colors
     --background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
@@ -32,57 +32,59 @@
     --link-color-visited-inverse: #{tokens.$color-violet-10};
     --link-color-visited: #{tokens.$color-link-visited};
     --link-color: #{tokens.$color-link};
-    --title-text-color-inverse: #{tokens.$color-white};
-    --title-text-color: #{tokens.$color-black};
+    --heading-text-color-inverse: #{tokens.$color-white};
+    --heading-text-color: #{tokens.$color-black};
 }
 
 %mozilla-type-scale {
     // type scale
-    --title-2xl-size: 4.75rem;
-    --title-2xl-line-height: 0.9;
-    --title-xl-size: 4.125rem;
-    --title-xl-line-height: 0.9;
-    --title-lg-size: 3.5rem;
-    --title-lg-line-height: 1.1;
-    --title-md-size: 3rem;
-    --title-md-line-height: 1.1;
-    --title-sm-size: 2.375rem;
-    --title-sm-line-height: 1.1;
-    --title-xs-size: 1.75rem;
-    --title-xs-line-height: 1.1;
-    --title-2xs-size: 1.5rem;
-    --title-2xs-line-height: 1.25;
-    --title-3xs-size: 1.125rem;
-    --title-3xs-line-height: 1.25;
-    --body-xl-size: 1.313rem;
-    --body-lg-size: 1.125rem;
-    --body-md-size: 1rem;
-    --body-sm-size: 0.875rem;
-    --body-xs-size: 0.75rem;
-    --body-line-height: 1.25;
+    --token-heading-font-size-plus-3: 4.75rem;
+    --token-heading-line-height-plus-3: 0.9;
+    --token-heading-font-size-plus-2: 4.125rem;
+    --token-heading-line-height-plus-2: 0.9;
+    --token-heading-font-size-plus-1: 3.5rem;
+    --token-heading-line-height-plus-1: 1.1;
+    --token-heading-font-size: 3rem;
+    --token-heading-line-height: 1.1;
+    --token-heading-font-size-minus-1: 2.375rem;
+    --token-heading-line-height-minus-1: 1.1;
+    --token-heading-font-size-minus-2: 1.75rem;
+    --token-heading-line-height-minus-2: 1.1;
+    --token-heading-font-size-minus-3: 1.5rem;
+    --token-heading-line-height-minus-3: 1.25;
+    --token-heading-font-size-minus-4: 1.125rem;
+    --token-heading-line-height-minus-4: 1.25;
+    --token-body-font-size-plus-2: 1.313rem;
+    --token-body-font-size-plus-1: 1.125rem;
+    --token-body-font-size: 1rem;
+    --token-body-font-size-minus-1: 0.875rem;
+    --token-body-font-size-minus-2: 0.75rem;
+    --token-body-line-height: 1.25;
+    --token-button-line-height: 1.25;
 }
 
 %mozilla-type-scale-condensed {
-    --title-2xl-size: 2.125rem;
-    --title-2xl-line-height: 1.1;
-    --title-xl-size: 1.625rem;
-    --title-xl-line-height: 1.1;
-    --title-lg-size: 1.375rem;
-    --title-lg-line-height: 1.1;
-    --title-md-size: 1.25rem;
-    --title-md-line-height: 1.1;
-    --title-sm-size: 1.125rem;
-    --title-sm-line-height: 1.25;
-    --title-xs-size: 1rem;
-    --title-xs-line-height: 1.25;
-    --title-2xs-size: 0.875rem;
-    --title-2xs-line-height: 1.25;
-    --title-3xs-size: 0.875rem;
-    --title-3xs-line-height: 1.25;
-    --body-xl-size: 1.125rem;
-    --body-lg-size: 1rem;
-    --body-md-size: 0.875rem;
-    --body-sm-size: 0.75rem;
-    --body-xs-size: 0.688rem;
-    --body-line-height: 1.25;
+    --token-heading-font-size-plus-3: 2.125rem;
+    --token-heading-line-height-plus-3: 1.1;
+    --token-heading-font-size-plus-2: 1.625rem;
+    --token-heading-line-height-plus-2: 1.1;
+    --token-heading-font-size-plus-1: 1.375rem;
+    --token-heading-line-height-plus-1: 1.1;
+    --token-heading-font-size: 1.25rem;
+    --token-heading-line-height: 1.1;
+    --token-heading-font-size-minus-1: 1.125rem;
+    --token-heading-line-height-minus-1: 1.25;
+    --token-heading-font-size-minus-2: 1rem;
+    --token-heading-line-height-minus-2: 1.25;
+    --token-heading-font-size-minus-3: 0.875rem;
+    --token-heading-line-height-minus-3: 1.25;
+    --token-heading-font-size-minus-4: 0.875rem;
+    --token-heading-line-height-minus-4: 1.25;
+    --token-body-font-size-plus-2: 1.125rem;
+    --token-body-font-size-plus-1: 1rem;
+    --token-body-font-size: 0.875rem;
+    --token-body-font-size-minus-1: 0.75rem;
+    --token-body-font-size-minus-2: 0.688rem;
+    --token-body-line-height: 1.25;
+    --token-button-line-height: 1.25;
 }
diff --git a/components/01-utilities/heading-sizes/heading-sizes.html b/components/01-utilities/heading-sizes/heading-sizes.html
index ccee572d4..61b15b28d 100644
--- a/components/01-utilities/heading-sizes/heading-sizes.html
+++ b/components/01-utilities/heading-sizes/heading-sizes.html
@@ -1,4 +1,4 @@
 <h1>h1: Jived fox nymph grabs quick waltz.</h1>
-<h1 class="mzp-u-title-md">h1: Jived fox nymph grabs quick waltz.</h1>
-<h1 class="mzp-u-title-sm">h1: Jived fox nymph grabs quick waltz.</h1>
-<h1 class="mzp-u-title-xs">h1: Jived fox nymph grabs quick waltz.</h1>
+<h1 class="mzp-u-heading-md">h1: Jived fox nymph grabs quick waltz.</h1>
+<h1 class="mzp-u-heading-sm">h1: Jived fox nymph grabs quick waltz.</h1>
+<h1 class="mzp-u-heading-xs">h1: Jived fox nymph grabs quick waltz.</h1>
diff --git a/components/01-utilities/heading-sizes/readme.md b/components/01-utilities/heading-sizes/readme.md
index a38308f47..b63c3fd85 100644
--- a/components/01-utilities/heading-sizes/readme.md
+++ b/components/01-utilities/heading-sizes/readme.md
@@ -3,11 +3,11 @@ declared default sizes for headings in keeping with their standard ranking but
 this base size can be overridden with more context-specific styling.
 
 There are presentational utility classes available that you can apply to any heading:
-- `mzp-u-title-2xl`
-- `mzp-u-title-xl`
-- `mzp-u-title-lg`
-- `mzp-u-title-md`
-- `mzp-u-title-sm`
-- `mzp-u-title-xs`
-- `mzp-u-title-2xs`
-- `mzp-u-title-3xs`
+- `mzp-u-heading-2xl`
+- `mzp-u-heading-xl`
+- `mzp-u-heading-lg`
+- `mzp-u-heading-md`
+- `mzp-u-heading-sm`
+- `mzp-u-heading-xs`
+- `mzp-u-heading-2xs`
+- `mzp-u-heading-3xs`
diff --git a/components/callout/callout--example.html b/components/callout/callout--example.html
index f313da638..f75a51246 100644
--- a/components/callout/callout--example.html
+++ b/components/callout/callout--example.html
@@ -2,7 +2,7 @@
   <div class="mzp-l-content mzp-t-content-md">
     <div class="mzp-c-callout-content">
       {% render '@logo', { product: 'firefox', size: 'lg', label: 'Firefox', layout: 'mzp-l-logo-center' }  %}
-      <h1 class="mzp-c-callout-title mzp-u-title-2xl">A Prime Example</h1>
+      <h1 class="mzp-c-callout-title mzp-u-heading-2xl">A Prime Example</h1>
       <div class="mzp-c-callout-desc">
         <p>This is an example of a more elaborate Callout component like you might see as a page header or other prominent callout. It features a logo and two short paragraphs as a description, one of which is perhaps a little too long. Centered text is hard to read in large blocks so it‘s best to keep it short.</p>
         <p>It also has a video.</p>
diff --git a/components/notification-bar/notification-bar--sticky.html b/components/notification-bar/notification-bar--sticky.html
index 6ae282bc3..af5d82ee0 100644
--- a/components/notification-bar/notification-bar--sticky.html
+++ b/components/notification-bar/notification-bar--sticky.html
@@ -1,7 +1,7 @@
 {% render '@notification-bar', { class: 'mzp-is-sticky', close_button: 'True', content: 'This floating bar will stick to the top of the window as you scroll.' } %}
 
 <div class="mzp-l-content mzp-t-content-sm">
-  <h1 class="mzp-u-title-sm">This is just some filler content so you have
+  <h1 class="mzp-u-heading-sm">This is just some filler content so you have
     something to scroll</h1>
 
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio temporibus
diff --git a/components/split/split.config.yml b/components/split/split.config.yml
index 00bfb05c6..f0780c07b 100644
--- a/components/split/split.config.yml
+++ b/components/split/split.config.yml
@@ -50,7 +50,7 @@ variants:
     context:
       background_class: mzp-t-dark mzp-t-background-secondary
       content: |
-        <h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
+        <h1 class="mzp-u-heading-md">Lorem ipsum dolor sit amet</h1>
         <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid
           epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
         <p><a class="mzp-c-button mzp-t-dark">Call to Action</a></p>
diff --git a/components/split/split.html b/components/split/split.html
index f15e15fb9..9c4460b3d 100644
--- a/components/split/split.html
+++ b/components/split/split.html
@@ -14,7 +14,7 @@
     {% if content %}
       {{ content | safe }}
     {% else %}
-      <h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
+      <h1 class="mzp-u-heading-md">Lorem ipsum dolor sit amet</h1>
       <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
       <p>{% render '@button', { link: '#', label: 'Call to action' } %}</p>
     {% endif %}
diff --git a/docs/01-fundamentals/03-typography.md b/docs/01-fundamentals/03-typography.md
index 2b35be5ec..5a09f9bdf 100644
--- a/docs/01-fundamentals/03-typography.md
+++ b/docs/01-fundamentals/03-typography.md
@@ -95,14 +95,14 @@ We limit the number of text sizes to a predetermined set, to maintain consistenc
 and avoid sizing text willy nilly in designs.
 
 <div id="specimen-type-scale" class="docs-specimen">
-  <span class="docs-scale-sample docs-scale-sample-title-2xl">Title 2XL</span>
-  <span class="docs-scale-sample docs-scale-sample-title-xl">Title XL</span>
-  <span class="docs-scale-sample docs-scale-sample-title-lg">Title LG</span>
-  <span class="docs-scale-sample docs-scale-sample-title-md">Title MD</span>
-  <span class="docs-scale-sample docs-scale-sample-title-sm">Title SM</span>
-  <span class="docs-scale-sample docs-scale-sample-title-xs">Title XS</span>
-  <span class="docs-scale-sample docs-scale-sample-title-2xs">Title 2XS</span>
-  <span class="docs-scale-sample docs-scale-sample-title-3xs">Title 3XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-2xl">Heading 2XL</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-xl">Heading XL</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-lg">Heading LG</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-md">Heading MD</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-sm">Heading SM</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-xs">Heading XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-2xs">Heading 2XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-3xs">Heading 3XS</span>
   <span class="docs-scale-sample docs-scale-sample-body-xl">Body XL</span>
   <span class="docs-scale-sample docs-scale-sample-body-lg">Body LG</span>
   <span class="docs-scale-sample docs-scale-sample-body-md">Body MD</span>
@@ -136,14 +136,14 @@ blogs, etc). Protocol also includes an alternative, condensed scale with smaller
 sizes more suitable for web applications.
 
 <div id="specimen-type-scale-condensed" class="docs-specimen">
-  <span class="docs-scale-sample docs-scale-sample-title-2xl">Title 2XL</span>
-  <span class="docs-scale-sample docs-scale-sample-title-xl">Title XL</span>
-  <span class="docs-scale-sample docs-scale-sample-title-lg">Title LG</span>
-  <span class="docs-scale-sample docs-scale-sample-title-md">Title MD</span>
-  <span class="docs-scale-sample docs-scale-sample-title-sm">Title SM</span>
-  <span class="docs-scale-sample docs-scale-sample-title-xs">Title XS</span>
-  <span class="docs-scale-sample docs-scale-sample-title-2xs">Title 2XS</span>
-  <span class="docs-scale-sample docs-scale-sample-title-3xs">Title 3XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-2xl">Title 2XL</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-xl">Title XL</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-lg">Title LG</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-md">Title MD</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-sm">Title SM</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-xs">Title XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-2xs">Title 2XS</span>
+  <span class="docs-scale-sample docs-scale-sample-heading-3xs">Title 3XS</span>
   <span class="docs-scale-sample docs-scale-sample-body-xl">Body XL</span>
   <span class="docs-scale-sample docs-scale-sample-body-lg">Body LG</span>
   <span class="docs-scale-sample docs-scale-sample-body-md">Body MD</span>
@@ -156,14 +156,14 @@ sizes more suitable for web applications.
 We use Sass mixins to declare these font sizes:
 
 ```scss
-@include text-title-2xl;
-@include text-title-xl;
-@include text-title-lg;
-@include text-title-md;
-@include text-title-sm;
-@include text-title-xs;
-@include text-title-2xs;
-@include text-title-3xs;
+@include text-heading-2xl;
+@include text-heading-xl;
+@include text-heading-lg;
+@include text-heading-md;
+@include text-heading-sm;
+@include text-heading-xs;
+@include text-heading-2xs;
+@include text-heading-3xs;
 @include text-body-xl;
 @include text-body-lg;
 @include text-body-md;
@@ -187,12 +187,12 @@ There are also a set of CSS utility class names available to use directly on HTM
 heading elements for convenience.
 
 ```html
-<h1 class="mzp-u-title-2xl">Title 2XL</h1>
-<h2 class="mzp-u-title-xl">Title XL</h2>
-<h3 class="mzp-u-title-lg">Title LG</h3>
-<h4 class="mzp-u-title-md">Title MD</h4>
-<h5 class="mzp-u-title-sm">Title SM</h5>
-<h6 class="mzp-u-title-xs">Title XS</h6>
-<h6 class="mzp-u-title-2xs">Title 2XS</h6>
-<h6 class="mzp-u-title-3xs">Title 3XS</h6>
+<h1 class="mzp-u-heading-2xl">Title 2XL</h1>
+<h2 class="mzp-u-heading-xl">Title XL</h2>
+<h3 class="mzp-u-heading-lg">Title LG</h3>
+<h4 class="mzp-u-heading-md">Title MD</h4>
+<h5 class="mzp-u-heading-sm">Title SM</h5>
+<h6 class="mzp-u-heading-xs">Title XS</h6>
+<h6 class="mzp-u-heading-2xs">Title 2XS</h6>
+<h6 class="mzp-u-heading-3xs">Title 3XS</h6>
 ```
diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md
index 65843a9cd..bbf723433 100644
--- a/docs/02-usage/02-framework.md
+++ b/docs/02-usage/02-framework.md
@@ -24,7 +24,7 @@ sizing. See [our page on typography](/docs/fundamentals/typography) for more inf
 and examples.
 
 ```scss
-@include text-title-lg;
+@include text-heading-lg;
 ```
 
 Different themes have slightly different type scales so this mixin draws its
@@ -82,27 +82,15 @@ the Mozilla and Firefox brands. Themes work by declaring a set of CSS Custom Pro
 on the document's root element (`:root`) in `/includes/_themes.scss` and are retrieved
 using the `var()` function. The custom properties will be updated depending on what theme is declared.
 
-If you need to support legacy browsers, it is recommended to use the `@supports` feature query
-while using the Sass variable as a fall back.
 
 ```scss
 .mzp-c-my-component {
-    background-color: $background-color;
-    color: $body-text-color;
+    background-color: var(--background-color);
+    color: var(--theme-body-text-color);
 
-    .mzp-c-my-component-title {
-        color: $title-text-color;
-        font-family: $title-font-family;
-    }
-
-    @supports (--css: variables) {
-        background-color: var(--background-color);
-        color: var(--body-text-color);
-
-        .mzp-c-my-component-title {
-            color: var(--title-text-color);
-            font-family: var(--title-font-family);
-        }
+    .mzp-c-my-component-heading {
+        color: var(--theme-heading-text-color);
+        font-family: var(--theme-heading-font-family);
     }
 }
 ```
@@ -130,9 +118,9 @@ link-color-hover-inverse
 link-color-inverse
 link-color-visited
 link-color-visited-inverse
-title-font-family
-title-text-color
-title-text-color-inverse
+heading-font-family
+heading-text-color
+heading-text-color-inverse
 ```
 
 Text sizes are also defined as theme variables, allowing different brands to have
@@ -162,18 +150,18 @@ text content.
 </div>
 ```
 
-#### Title sizes
+#### Heading sizes
 
-A range of utility classes are available for title sizes. See the
+A range of utility classes are available for heading sizes. See the
 [typography page](/docs/fundamentals/typography) for more details.
 
 ```html
-<h1 class="mzp-u-title-2xl">Title 2XL</h1>
-<h2 class="mzp-u-title-xl">Title XL</h2>
-<h3 class="mzp-u-title-lg">Title LG</h3>
-<h4 class="mzp-u-title-md">Title MD</h4>
-<h5 class="mzp-u-title-sm">Title SM</h5>
-<h6 class="mzp-u-title-xs">Title XS</h6>
-<h6 class="mzp-u-title-2xs">Title 2XS</h6>
-<h6 class="mzp-u-title-3xs">Title 3XS</h6>
+<h1 class="mzp-u-heading-2xl">Heading 2XL</h1>
+<h2 class="mzp-u-heading-xl">Heading XL</h2>
+<h3 class="mzp-u-heading-lg">Heading LG</h3>
+<h4 class="mzp-u-heading-md">Heading MD</h4>
+<h5 class="mzp-u-heading-sm">Heading SM</h5>
+<h6 class="mzp-u-heading-xs">Heading XS</h6>
+<h6 class="mzp-u-heading-2xs">Heading 2XS</h6>
+<h6 class="mzp-u-heading-3xs">Heading 3XS</h6>
 ```
diff --git a/docs/02-usage/migration.md b/docs/02-usage/migration.md
new file mode 100644
index 000000000..aa35800a6
--- /dev/null
+++ b/docs/02-usage/migration.md
@@ -0,0 +1,232 @@
+---
+title: Migration Guide for v23
+label: Migration v23
+hidden: true
+---
+
+This guide provides automated scripts to help migrate your codebase to Protocol v23. See [CHANGELOG](https://github.com/mozilla/protocol/blob/main/CHANGELOG.md) for full details on what changed.
+
+## Prerequisites
+
+- Back up your code or ensure you can revert changes via git
+- Review the changes before committing them
+- Run the replacements in [VS Code Find & Replace](#vs-code-find--replace) or [Terminal Commands](#terminal-commands-macoslinux)
+
+## VS Code Find & Replace
+
+Enable regex mode (click the `.*` icon in the search box or press `Alt+R` / `Opt+R`).
+
+### Mixin Renames (SCSS files)
+
+Rename `text-title-*` to `text-heading-*`:
+
+```text
+Find:    text-title-(2xs|3xs|xs|sm|md|lg|xl|2xl)
+Replace: text-heading-$1
+```
+
+Rename `text-display-*` to `text-heading-*` (handle `xxl`/`xxs` → `2xl`/`2xs`):
+
+```text
+Find:    text-display-xx([sl])
+Replace: text-heading-2x$1
+```
+
+```text
+Find:    text-display-(xs|sm|md|lg|xl)
+Replace: text-heading-$1
+```
+
+### Utility Class Renames (HTML/template files)
+
+Rename `mzp-u-title-*` to `mzp-u-heading-*`:
+
+```text
+Find:    mzp-u-title-(2xs|3xs|xs|sm|md|lg|xl|2xl)
+Replace: mzp-u-heading-$1
+```
+
+### CSS Variable Renames (SCSS files)
+
+Font family and line-height variables:
+
+```text
+Find:    --title-font-family
+Replace: --theme-heading-font-family
+```
+
+```text
+Find:    --body-font-family
+Replace: --theme-body-font-family
+```
+
+```text
+Find:    --body-line-height
+Replace: --theme-body-line-height
+```
+
+Size variables (note: property name moves in the new pattern):
+
+```text
+Find:    --title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size
+Replace: --theme-heading-font-size-$1
+```
+
+```text
+Find:    --body-(xs|sm|md|lg|xl)-size
+Replace: --theme-body-font-size-$1
+```
+
+Line-height variables:
+
+```text
+Find:    --title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height
+Replace: --theme-heading-line-height-$1
+```
+
+### Sass Variable Replacements (SCSS files)
+
+```text
+Find:    \$title-font-family
+Replace: var(--theme-heading-font-family)
+```
+
+```text
+Find:    \$body-font-family
+Replace: var(--theme-body-font-family)
+```
+
+```text
+Find:    \$button-font-family
+Replace: var(--theme-button-font-family)
+```
+
+```text
+Find:    \$body-line-height
+Replace: var(--theme-body-line-height)
+```
+
+Size and line-height variables (use regex mode):
+
+```text
+Find:    \$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size
+Replace: var(--theme-heading-font-size-$1)
+```
+
+```text
+Find:    \$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height
+Replace: var(--theme-heading-line-height-$1)
+```
+
+```text
+Find:    \$body-(xs|sm|md|lg|xl)-size
+Replace: var(--theme-body-font-size-$1)
+```
+
+Legacy aliases:
+
+```text
+Find:    \$text-body-line-height
+Replace: var(--theme-body-line-height)
+```
+
+```text
+Find:    \$text-title-line-height
+Replace: var(--theme-heading-line-height)
+```
+
+```text
+Find:    \$text-display-line-height
+Replace: var(--theme-heading-line-height)
+```
+
+### Remove @supports Blocks (SCSS files)
+
+If you have `@supports` blocks that only contain font declarations, you can remove them. Search for these manually:
+
+```text
+Find:    @supports \(--css: variables\)
+```
+
+Review each match and remove the block if it only contains font-family, font-size, or line-height declarations.
+
+## Terminal Commands (macOS/Linux)
+
+Run these from your project root. **Preview changes first** by removing the `-i ''` flag (macOS) or `-i` flag (Linux) to see what would change.
+
+### Mixin Renames
+
+```bash
+# Rename text-title-* to text-heading-* in SCSS files
+find . -name "*.scss" -exec sed -i '' 's/text-title-/text-heading-/g' {} +
+
+# Rename text-display-* to text-heading-* (handle xxl/xxs first)
+find . -name "*.scss" -exec sed -i '' 's/text-display-xxl/text-heading-2xl/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/text-display-xxs/text-heading-2xs/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/text-display-/text-heading-/g' {} +
+```
+
+### Utility Class Renames
+
+```bash
+# Rename mzp-u-title-* to mzp-u-heading-* in HTML files
+find . -name "*.html" -exec sed -i '' 's/mzp-u-title-/mzp-u-heading-/g' {} +
+
+# Also check Nunjucks templates
+find . -name "*.njk" -exec sed -i '' 's/mzp-u-title-/mzp-u-heading-/g' {} +
+```
+
+### CSS Variable Renames
+
+```bash
+# Font family and line-height
+find . -name "*.scss" -exec sed -i '' 's/--title-font-family/--theme-heading-font-family/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/--body-font-family/--theme-body-font-family/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/--body-line-height/--theme-body-line-height/g' {} +
+
+# Size variables (these use extended regex for the capture group)
+find . -name "*.scss" -exec sed -i '' -E 's/--title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size/--theme-heading-font-size-\1/g' {} +
+find . -name "*.scss" -exec sed -i '' -E 's/--body-(xs|sm|md|lg|xl)-size/--theme-body-font-size-\1/g' {} +
+
+# Line-height variables
+find . -name "*.scss" -exec sed -i '' -E 's/--title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height/--theme-heading-line-height-\1/g' {} +
+```
+
+### Sass Variable Replacements
+
+```bash
+# Replace Sass variables with CSS custom properties
+find . -name "*.scss" -exec sed -i '' 's/\$title-font-family/var(--theme-heading-font-family)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/\$body-font-family/var(--theme-body-font-family)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/\$button-font-family/var(--theme-button-font-family)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/\$body-line-height/var(--theme-body-line-height)/g' {} +
+
+# Size and line-height variables (extended regex)
+find . -name "*.scss" -exec sed -i '' -E 's/\$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-size/var(--theme-heading-font-size-\1)/g' {} +
+find . -name "*.scss" -exec sed -i '' -E 's/\$title-(2xs|3xs|xs|sm|md|lg|xl|2xl)-line-height/var(--theme-heading-line-height-\1)/g' {} +
+find . -name "*.scss" -exec sed -i '' -E 's/\$body-(xs|sm|md|lg|xl)-size/var(--theme-body-font-size-\1)/g' {} +
+
+# Legacy aliases
+find . -name "*.scss" -exec sed -i '' 's/\$text-body-line-height/var(--theme-body-line-height)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/\$text-title-line-height/var(--theme-heading-line-height)/g' {} +
+find . -name "*.scss" -exec sed -i '' 's/\$text-display-line-height/var(--theme-heading-line-height)/g' {} +
+```
+
+## Linux Users
+
+Replace `-i ''` with `-i` in the sed commands above:
+
+```bash
+# macOS:
+sed -i '' 's/old/new/g' file
+
+# Linux:
+sed -i 's/old/new/g' file
+```
+
+## After Migration
+
+1. Run your build to check for any Sass compilation errors
+2. Run visual regression tests if available
+3. Manually review any remaining uses of removed variables or mixins
+4. Test in a browser to verify typography appears correct
diff --git a/docs/03-contributing/01-overview.md b/docs/03-contributing/01-overview.md
index 815ea0ad2..2b11c90ea 100644
--- a/docs/03-contributing/01-overview.md
+++ b/docs/03-contributing/01-overview.md
@@ -255,7 +255,7 @@ named `_item.scss` (this is not an actual Protocol component):
 @use '../includes/lib' as *;
 
 .mzp-c-item {
-    @include text-title-md;
+    @include text-heading-md;
     color: $color-ink-80;
     margin: $spacing-lg 0;
 }
@@ -267,7 +267,7 @@ If you don't change the namespace of the file being imported your `.scss` file w
 @use '../includes/lib';
 
 .mzp-c-item {
-    @include lib.text-title-md;
+    @include lib.text-heading-md;
     color: lib.$color-ink-80;
     margin: lib.$spacing-lg 0;
 }
@@ -301,7 +301,7 @@ with which they may need to coexist, followed by a `c` prefix indicating that
 this is a component.
 
 ```scss
-    @include text-title-md;
+    @include text-heading-md;
 ```
 
 The first style declaration is a Sass mixin that sets the font-size for the
diff --git a/docs/03-contributing/02-naming.md b/docs/03-contributing/02-naming.md
index 292145b16..c0a2758c6 100644
--- a/docs/03-contributing/02-naming.md
+++ b/docs/03-contributing/02-naming.md
@@ -18,7 +18,7 @@ categories:
 * `l-` for layout-related styles, e.g. `.mzp-l-content`, `.mzp-l-grid-third`.
   These are essentially presentational names, mostly used for container elements.
 * `u-` for utility styles, which have a broad scope and can be powerful overrides,
-  e.g. `.mzp-u-inline`, `.mzp-u-title-md`. These are presentational so should be
+  e.g. `.mzp-u-inline`, `.mzp-u-heading-md`. These are presentational so should be
   rare. Prefer mixins in a style sheet over classes in HTML.
 * `qa-` used as selector hooks for tests (unit tests, integration tests, etc.).
   These classes are not meant as styling hooks; no CSS should be applied to any
@@ -33,7 +33,7 @@ categories:
 * `a-` for CSS animation names, e.g. `mzp-a-fade-in`, `mzp-a-slide-from-right`.
 
 Our names are all lowercase and hyphen-separated or “kebab-case,” e.g.
-`.mzp-c-card`, `.mzp-c-card-title`. This brings with it the potential for
+`.mzp-c-card`, `.mzp-c-card-heading`. This brings with it the potential for
 long kebabs of multipart, hyphenated names. Names should be as short as
 possible and as long as necessary. Clarity is key. If we find our names
 getting obscenely long and confusing we may need to revise our convention
@@ -44,7 +44,7 @@ Example:
 ```html
 <div class="mzp-c-card mzp-has-image">
   <img class="mzp-c-card-image" src="/static/img/card-image.jpg" alt="">
-  <h3 class="mzp-c-card-title">Card Title</h3>
+  <h3 class="mzp-c-card-heading">Card Heading</h3>
 
   <div class="mzp-c-card-desc">
     <p>Lorem ipsum dolor sit amet, pri illum munere mollis at, amet senserit te vix, sint porro mei eu.</p>
diff --git a/theme/assets/sass/components/_color.scss b/theme/assets/sass/components/_color.scss
index eda0f64e2..4d0217b57 100755
--- a/theme/assets/sass/components/_color.scss
+++ b/theme/assets/sass/components/_color.scss
@@ -21,7 +21,7 @@
     }
 
     .docs-palette-title {
-        @include text-title-md;
+        @include text-heading-md;
         clear: both;
         margin: 0 0 1em;
     }
@@ -34,9 +34,10 @@
     }
 
     .docs-swatch-name {
+        margin: 0 0 0.25em;
         @include font-base;
         @include text-body-lg;
-        margin: 0 0 0.25em;
+
     }
 
     @media #{$mq-md} {
diff --git a/theme/assets/sass/components/_document.scss b/theme/assets/sass/components/_document.scss
index 9978dc01c..3303919f1 100644
--- a/theme/assets/sass/components/_document.scss
+++ b/theme/assets/sass/components/_document.scss
@@ -3,12 +3,11 @@
 /* stylelint-disable selector-class-pattern */
 
 .Document-title {
-    @include text-title-lg;
-    font-family: $title-font-family;
+    @include text-heading-lg;
+    font-family: var(--theme-heading-font-family);
     color: $title-text-color;
 
     @supports (--css: variables) {
-        font-family: var(--title-font-family);
-        color: var(--title-text-color);
+        color: var(--heading-text-color);
     }
 }
diff --git a/theme/assets/sass/components/_pen.scss b/theme/assets/sass/components/_pen.scss
index fdc614842..50e864b4e 100755
--- a/theme/assets/sass/components/_pen.scss
+++ b/theme/assets/sass/components/_pen.scss
@@ -16,9 +16,8 @@
 }
 
 .Pen-title {
-    @include text-title-xs;
+    @include text-heading-xs;
     color: $title-text-color;
-    font-family: $title-font-family;
     margin-bottom: 0.5em;
 
     @media #{$mq-md} {
@@ -26,8 +25,7 @@
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--heading-text-color);
     }
 }
 
@@ -39,7 +37,7 @@
         color: $title-text-color;
 
         @supports (--css: variables) {
-            color: var(--title-text-color);
+            color: var(--heading-text-color);
         }
     }
 
@@ -50,11 +48,10 @@
 }
 
 .Pen-previewButton {
-    @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
-    @include text-body-sm;
     color: $link-color;
-    font-family: $body-font-family;
     font-weight: bold;
+    @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
+    @include text-body-sm;
 
     &:hover,
     &:active {
@@ -63,7 +60,6 @@
 
     @supports (--css: variables) {
         color: var(--link-color);
-        font-family: var(--body-font-family);
 
         &:hover,
         &:active {
diff --git a/theme/assets/sass/components/_prose.scss b/theme/assets/sass/components/_prose.scss
index e6caa0d92..43fdd1046 100755
--- a/theme/assets/sass/components/_prose.scss
+++ b/theme/assets/sass/components/_prose.scss
@@ -45,34 +45,33 @@
     h4,
     h5,
     h6 {
-        font-family: $title-font-family;
+        font-family: var(--theme-heading-font-family);
         color: $title-text-color;
         font-weight: bold;
         margin: 1em 0 0.5em;
         opacity: 1;
 
         @supports (--css: variables) {
-            color: var(--title-text-color);
-            font-family: var(--title-font-family);
+            color: var(--heading-text-color);
         }
     }
 
     h1 {
-        @include text-title-sm;
+        @include text-heading-sm;
     }
 
     h2 {
-        @include text-title-xs;
+        @include text-heading-xs;
     }
 
     h3 {
-        @include text-title-2xs;
+        @include text-heading-2xs;
     }
 
     h4,
     h5,
     h6 {
-        @include text-title-3xs;
+        @include text-heading-3xs;
     }
 
     & :not(hr) + h2 {
diff --git a/theme/assets/sass/components/_tree.scss b/theme/assets/sass/components/_tree.scss
index 71c38137e..02864df61 100755
--- a/theme/assets/sass/components/_tree.scss
+++ b/theme/assets/sass/components/_tree.scss
@@ -10,9 +10,9 @@
 }
 
 .Tree-title {
-    @include text-body-md;
     color: $color-white;
     letter-spacing: normal;
+    @include text-body-md;
 }
 
 .Tree-collectionLabel {
diff --git a/theme/assets/sass/components/_type-specimen.scss b/theme/assets/sass/components/_type-specimen.scss
index dedecd2da..fdb84ec3f 100644
--- a/theme/assets/sass/components/_type-specimen.scss
+++ b/theme/assets/sass/components/_type-specimen.scss
@@ -10,7 +10,7 @@
 }
 
 .docs-specimen-font {
-    @include text-title-md;
+    @include text-heading-md;
 }
 
 #specimen-mozilla-headline {
@@ -34,84 +34,52 @@
     margin: 0 0 0.25em;
 }
 
-.docs-scale-sample-title-2xl {
-    @include text-title-2xl;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-2xl {
+    @include text-heading-2xl;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-xl {
-    @include text-title-xl;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-xl {
+    @include text-heading-xl;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-lg {
-    @include text-title-lg;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-lg {
+    @include text-heading-lg;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-md {
-    @include text-title-md;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-md {
+    @include text-heading-md;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-sm {
-    @include text-title-sm;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-sm {
+    @include text-heading-sm;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-xs {
-    @include text-title-xs;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-xs {
+    @include text-heading-xs;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-2xs {
-    @include text-title-2xs;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-2xs {
+    @include text-heading-2xs;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
-.docs-scale-sample-title-3xs {
-    @include text-title-3xs;
-    font-family: $title-font-family;
+.docs-scale-sample-heading-3xs {
+    @include text-heading-3xs;
+    font-family: var(--theme-heading-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .docs-scale-sample-body-xl {
@@ -135,7 +103,7 @@
 }
 
 #specimen-type-scale-condensed {
-    .docs-scale-sample-title-2xl {
+    .docs-scale-sample-heading-2xl {
         font-size: 24px;
         line-height: 1.166;
 
@@ -145,7 +113,7 @@
         }
     }
 
-    .docs-scale-sample-title-xl {
+    .docs-scale-sample-heading-xl {
         font-size: 21px;
         line-height: 1.2;
 
@@ -155,7 +123,7 @@
         }
     }
 
-    .docs-scale-sample-title-lg {
+    .docs-scale-sample-heading-lg {
         font-size: 18px;
         line-height: 1.2;
 
@@ -164,7 +132,7 @@
         }
     }
 
-    .docs-scale-sample-title-md {
+    .docs-scale-sample-heading-md {
         font-size: 16px;
         line-height: 1.25;
 
@@ -174,7 +142,7 @@
         }
     }
 
-    .docs-scale-sample-title-sm {
+    .docs-scale-sample-heading-sm {
         font-size: 14px;
         line-height: 1.25;
 
@@ -183,17 +151,17 @@
         }
     }
 
-    .docs-scale-sample-title-xs {
+    .docs-scale-sample-heading-xs {
         font-size: 14px;
         line-height: 1.25;
     }
 
-    .docs-scale-sample-title-2xs {
+    .docs-scale-sample-heading-2xs {
         font-size: 14px;
         line-height: 1.25;
     }
 
-    .docs-scale-sample-title-3xs {
+    .docs-scale-sample-heading-3xs {
         font-size: 14px;
         line-height: 1.25;
     }