diff --git a/CHANGELOG.md b/CHANGELOG.md
index 719b4b366..1551b85fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# HEAD
+
+* Dropped support for font-sizes in pixels, all font-sizes are in rem now.
+* Removed `text-display-*` mixins. See migration notes for version 11.0.2.
+
 # 22.0.0
 
 ## Features
@@ -199,8 +204,8 @@ 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);
+    color: var(--token-body-text-color-inverse);
+    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..79f0ae0d7 100644
--- a/assets/sass/protocol/base/elements/_document.scss
+++ b/assets/sass/protocol/base/elements/_document.scss
@@ -13,16 +13,12 @@ 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;
 
     @supports (--css: variable) {
         background: var(--background-color);
-        color: var(--body-text-color);
-        font-family: var(--body-font-family);
-        line-height: var(--body-line-height);
+        color: var(--token-body-text-color);
     }
 }
 
diff --git a/assets/sass/protocol/base/elements/_forms.scss b/assets/sass/protocol/base/elements/_forms.scss
index 6e916f666..65c52a01d 100644
--- a/assets/sass/protocol/base/elements/_forms.scss
+++ b/assets/sass/protocol/base/elements/_forms.scss
@@ -32,13 +32,9 @@ legend {
         @include forms.field-label;
     }
     @include text-body-lg;
-    font-family: $body-font-family;
+    font-family: var(--token-body-font-family);
     font-weight: bold;
     margin-bottom: forms.$field-v-spacing;
-
-    @supports (--css: variables) {
-        font-family: var(--body-font-family);
-    }
 }
 
 button,
diff --git a/assets/sass/protocol/base/elements/_links.scss b/assets/sass/protocol/base/elements/_links.scss
index 954d28e10..38c7584f7 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(--button-font-family);
     font-weight: bold;
 
-    @supports (--css: variables) {
-        font-family: var(--button-font-family);
-    }
-
     &.mzp-t-xs {
         @include text-body-sm;
     }
@@ -69,29 +65,14 @@ a {
 
     &.mzp-t-lg {
         @include text-title-xs;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     &.mzp-t-xl {
         @include text-title-sm;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     &.mzp-t-2xl {
         @include text-title-lg;
-        font-family: $title-font-family;
-
-        @supports (--css: variables) {
-            font-family: var(--title-font-family);
-        }
     }
 
     // Icon support
diff --git a/assets/sass/protocol/base/elements/_quotes.scss b/assets/sass/protocol/base/elements/_quotes.scss
index 2ed5fc861..4933e685a 100644
--- a/assets/sass/protocol/base/elements/_quotes.scss
+++ b/assets/sass/protocol/base/elements/_quotes.scss
@@ -10,7 +10,6 @@ blockquote {
     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;
@@ -29,11 +28,10 @@ blockquote {
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--token-title-text-color);
 
         cite {
-            color: var(--body-text-color-secondary);
+            color: var(--token-body-text-color-secondary);
         }
     }
 }
diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_titles.scss
index 3dced1a84..567fc793b 100644
--- a/assets/sass/protocol/base/elements/_titles.scss
+++ b/assets/sass/protocol/base/elements/_titles.scss
@@ -12,10 +12,9 @@ h3,
 h4,
 h5,
 h6 {
-    $default-font-weight: bold;
-    font-family: $title-font-family;
+    font-family: var(--token-title-font-family);
+    font-variant-ligatures: var(--token-title-font-ligatures);
     color: $title-text-color;
-    font-weight: $default-font-weight;
     text-wrap: balance;
     margin: 0 0 0.5em;
 
@@ -24,14 +23,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(--token-title-text-color);
 
         .mzp-t-dark & {
-            color: var(--title-text-color-inverse);
+            color: var(--token-title-text-color-inverse);
         }
     }
 }
diff --git a/assets/sass/protocol/base/utilities/_backgrounds.scss b/assets/sass/protocol/base/utilities/_backgrounds.scss
index 8440df3cc..0bee18ed6 100644
--- a/assets/sass/protocol/base/utilities/_backgrounds.scss
+++ b/assets/sass/protocol/base/utilities/_backgrounds.scss
@@ -28,7 +28,7 @@
 
     @supports (--css: variables) {
         background-color: var(--background-color-inverse);
-        color: var(--body-text-color-inverse);
+        color: var(--token-body-text-color-inverse);
     }
 }
 
diff --git a/assets/sass/protocol/base/utilities/_rich-text.scss b/assets/sass/protocol/base/utilities/_rich-text.scss
index 2558fb63f..99b54f013 100644
--- a/assets/sass/protocol/base/utilities/_rich-text.scss
+++ b/assets/sass/protocol/base/utilities/_rich-text.scss
@@ -18,7 +18,7 @@
 
     h4 {
         @include text-body-lg;
-        font-family: var(--body-font-family);
+        font-family: var(--token-body-font-family);
         margin-bottom: $layout-xs;
         margin-top: $layout-xs;
     }
diff --git a/assets/sass/protocol/base/utilities/_titles.scss b/assets/sass/protocol/base/utilities/_titles.scss
index 041f26ac7..3dbfe74ea 100644
--- a/assets/sass/protocol/base/utilities/_titles.scss
+++ b/assets/sass/protocol/base/utilities/_titles.scss
@@ -9,74 +9,34 @@
 
 .mzp-u-title-2xl {
     @include text-title-2xl;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-xl {
     @include text-title-xl;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-lg {
     @include text-title-lg;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-md {
     @include text-title-md;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-sm {
     @include text-title-sm;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-xs {
     @include text-title-xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-2xs {
     @include text-title-2xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .mzp-u-title-3xs {
     @include text-title-3xs;
-    font-family: $title-font-family;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 // Utility class for centered text.
diff --git a/assets/sass/protocol/components/_button.scss b/assets/sass/protocol/components/_button.scss
index df12a2ade..d9624eff7 100644
--- a/assets/sass/protocol/components/_button.scss
+++ b/assets/sass/protocol/components/_button.scss
@@ -16,7 +16,7 @@
     border: 2px solid transparent;
     cursor: pointer;
     display: inline-block;
-    font-family: $button-font-family;
+    font-family: var(--button-font-family);
     font-weight: bold;
     line-height: $body-line-height;
     padding: $spacing-sm $spacing-md;
@@ -44,7 +44,7 @@
 
     @supports (--css: variables) {
         font-family: var(--button-font-family);
-        line-height: var(--body-line-height);
+        line-height: var(--token-body-line-height);
     }
 }
 
diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss
index 9a4193a96..4d3d2abdf 100644
--- a/assets/sass/protocol/components/_card.scss
+++ b/assets/sass/protocol/components/_card.scss
@@ -158,18 +158,18 @@
 
     @supports (--css: variables) {
         background-color: var(--background-color-inverse);
-        color: var(--body-text-color-inverse);
+        color: var(--token-body-text-color-inverse);
 
         .mzp-c-card-tag,
         .mzp-c-card-meta {
-            color: var(--body-text-color-inverse);
+            color: var(--token-body-text-color-inverse);
         }
 
         .mzp-c-card-block-link {
-            color: var(--body-text-color-inverse);
+            color: var(--token-body-text-color-inverse);
 
             .mzp-c-card-cta-text {
-                color: var(--body-text-color-inverse);
+                color: var(--token-body-text-color-inverse);
             }
         }
     }
diff --git a/assets/sass/protocol/components/_emphasis-box.scss b/assets/sass/protocol/components/_emphasis-box.scss
index 424ad2f46..744687634 100644
--- a/assets/sass/protocol/components/_emphasis-box.scss
+++ b/assets/sass/protocol/components/_emphasis-box.scss
@@ -23,7 +23,7 @@
 
         &.mzp-t-dark {
             background-color: var(--background-color-inverse);
-            color: var(--body-text-color-inverse);
+            color: var(--token-body-text-color-inverse);
         }
     }
 }
diff --git a/assets/sass/protocol/components/_feature-card.scss b/assets/sass/protocol/components/_feature-card.scss
index 30a7b5ace..49ec661a8 100644
--- a/assets/sass/protocol/components/_feature-card.scss
+++ b/assets/sass/protocol/components/_feature-card.scss
@@ -70,10 +70,10 @@
         }
 
         @supports (--css: variables) {
-            color: var(--body-text-color-inverse);
+            color: var(--token-body-text-color-inverse);
 
             .mzp-c-card-feature-desc {
-                color: var(--body-text-color-secondary-inverse);
+                color: var(--token-body-text-color-secondary-inverse);
             }
         }
     }
diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss
index 7ccbb3e3d..062f6040b 100644
--- a/assets/sass/protocol/components/_menu-list.scss
+++ b/assets/sass/protocol/components/_menu-list.scss
@@ -9,7 +9,7 @@
 }
 
 .mzp-c-menu-list-title {
-    font-family: $button-font-family;
+    font-family: var(--button-font-family);
     font-size: inherit;
     font-weight: bold;
 
diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss
index 7ed7b6740..99af7e88c 100644
--- a/assets/sass/protocol/components/_sticky-promo.scss
+++ b/assets/sass/protocol/components/_sticky-promo.scss
@@ -72,7 +72,7 @@ $logos: (
 
         @supports (--css: variables) {
             background-color: var(--background-color-inverse);
-            color: var(--body-text-color-inverse);
+            color: var(--token-body-text-color-inverse);
         }
     }
 
@@ -92,7 +92,7 @@ $logos: (
 }
 
 .mzp-c-sticky-promo-title {
-    @include text-display-xs;
+    @include text-title-xs;
     margin-bottom: $spacing-xl;
 }
 
diff --git a/assets/sass/protocol/components/forms/_form.scss b/assets/sass/protocol/components/forms/_form.scss
index a42c1bb10..db175d2a6 100644
--- a/assets/sass/protocol/components/forms/_form.scss
+++ b/assets/sass/protocol/components/forms/_form.scss
@@ -23,11 +23,11 @@
     }
 
     @supports (--css: variables) {
-        color: var(--body-text-color-secondary);
+        color: var(--token-body-text-color-secondary);
 
         &.mzp-t-dark,
         .mzp-t-dark & {
-            color: var(--body-text-color-secondary-inverse);
+            color: var(--token-body-text-color-secondary-inverse);
         }
     }
 
@@ -68,8 +68,6 @@
 legend.mzp-c-form-title {
     @include text-title-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(--token-title-text-color);
 
         .mzp-t-dark & {
-            color: var(--title-text-color-inverse);
+            color: var(--token-title-text-color-inverse);
         }
     }
 }
diff --git a/assets/sass/protocol/includes/_themes-sass.scss b/assets/sass/protocol/includes/_themes-sass.scss
index 1ca11c474..b2266c2ce 100644
--- a/assets/sass/protocol/includes/_themes-sass.scss
+++ b/assets/sass/protocol/includes/_themes-sass.scss
@@ -24,11 +24,6 @@ $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
 $background-color-tertiary-inverse: tokens.$color-dark-gray-40;
 $background-color-tertiary: tokens.$color-light-gray-30;
@@ -49,30 +44,6 @@ $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
 
@@ -98,14 +69,14 @@ $theme-spacing: (
 // 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,
+    --token-body-font-family: tokens.$font-stack-base,
+    --button-font-family: tokens.$font-stack-firefox,
+    --token-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,
+    --token-body-font-family: tokens.$font-stack-mozilla-text,
+    --button-font-family: tokens.$font-stack-mozilla-text,
+    --token-title-font-family: tokens.$font-stack-mozilla-headline,
 );
 
 // * -------------------------------------------------------------------------- */
diff --git a/assets/sass/protocol/includes/forms/_index.scss b/assets/sass/protocol/includes/forms/_index.scss
index 5b955cc6d..d2ff4f6d8 100644
--- a/assets/sass/protocol/includes/forms/_index.scss
+++ b/assets/sass/protocol/includes/forms/_index.scss
@@ -67,12 +67,11 @@ $line-height-shim: 0.15em; // two elements with text appear to have more space b
     @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);
+        line-height: var(--token-body-line-height);
     }
 }
 
diff --git a/assets/sass/protocol/includes/mixins/_typography.scss b/assets/sass/protocol/includes/mixins/_typography.scss
index 662fd1598..89d6d9e09 100644
--- a/assets/sass/protocol/includes/mixins/_typography.scss
+++ b/assets/sass/protocol/includes/mixins/_typography.scss
@@ -4,9 +4,9 @@
 
 @use 'sass:math';
 @use 'sass:meta';
-@use '../tokens';
-@use '../themes-sass' as themes;
-@use '../functions';
+@use '../themes-sass' as *;
+@use '../functions' as functions;
+@use '../tokens' as tokens;
 
 // * -------------------------------------------------------------------------- */
 // Font families
@@ -27,9 +27,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 +37,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);
     }
 
@@ -59,223 +58,89 @@
 //  .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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-2xl);
+    font-weight: bold;
+    line-height: var(--theme-title-line-height-2xl);
 }
 
 @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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-xl);
+    font-weight: bold;
+    line-height: var(--theme-title-line-height-xl);
 }
 
 @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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-lg);
+    font-weight: bold;
+    line-height: var(--theme-title-line-height-lg);
 }
 
 @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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-md);
+    font-weight: bold;
+    line-height: var(--theme-title-line-height-md);
 }
 
 @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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-sm);
+    font-weight: bold;
+    line-height: var(--theme-title-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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-xs);
+    font-weight: bold;
+    line-height: var(--theme-title-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);
-        }
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-2xs);
+    font-weight: bold;
+    line-height: var(--theme-title-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);
-    }
+    font-family: var(--theme-title-font-family);
+    font-size: var(--theme-title-font-size-3xs);
+    font-weight: bold;
+    line-height: var(--theme-title-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..ea6b49c49 100644
--- a/assets/sass/protocol/includes/themes/_firefox.scss
+++ b/assets/sass/protocol/includes/themes/_firefox.scss
@@ -6,9 +6,9 @@
 
 %firefox-theme {
     // fonts
-    --body-font-family: #{tokens.$font-stack-base};
+    --token-body-font-family: #{tokens.$font-stack-base};
     --button-font-family: #{tokens.$font-stack-firefox};
-    --title-font-family: #{tokens.$font-stack-firefox};
+    --token-title-font-family: #{tokens.$font-stack-firefox};
 
     // colors
     --background-color-tertiary-inverse: #{tokens.$color-ink-20};
@@ -17,67 +17,67 @@
     --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};
+    --token-body-text-color-secondary-inverse: #{tokens.$color-marketing-gray-30};
+    --token-body-text-color-secondary: #{tokens.$color-marketing-gray-70};
+    --token-body-text-color-inverse: #{tokens.$color-white};
+    --token-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};
+    --token-title-text-color-inverse: #{tokens.$color-white};
+    --token-title-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-title-2xl-size: 4rem;
+    --token-title-2xl-line-height: 1.125;
+    --token-title-xl-size: 3.5rem;
+    --token-title-xl-line-height: 1.143;
+    --token-title-lg-size: 3rem;
+    --token-title-lg-line-height: 1.166;
+    --token-title-md-size: 2.5rem;
+    --token-title-md-line-height: 1.1;
+    --token-title-sm-size: 2rem;
+    --token-title-sm-line-height: 1.125;
+    --token-title-xs-size: 1.5rem;
+    --token-title-xs-line-height: 1.166;
+    --token-title-2xs-size: 1.25rem;
+    --token-title-2xs-line-height: 1.2;
+    --token-title-3xs-size: 1rem;
+    --token-title-3xs-line-height: 1.25;
+    --token-body-xl-size: 1.313rem;
+    --token-body-lg-size: 1.125rem;
+    --token-body-md-size: 1rem;
+    --token-body-sm-size: 0.875rem;
+    --token-body-xs-size: 0.75rem;
+    --token-body-line-height: 1.5;
 }
 
 %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-title-2xl-size: 2rem;
+    --token-title-2xl-line-height: 1.125;
+    --token-title-xl-size: 1.5rem;
+    --token-title-xl-line-height: 1.166;
+    --token-title-lg-size: 1.313rem;
+    --token-title-lg-line-height: 1.2;
+    --token-title-md-size: 1.125rem;
+    --token-title-md-line-height: 1.2;
+    --token-title-sm-size: 1rem;
+    --token-title-sm-line-height: 1.25;
+    --token-title-xs-size: 0.875rem;
+    --token-title-xs-line-height: 1.25;
+    --token-title-2xs-size: 0.875rem;
+    --token-title-2xs-line-height: 1.25;
+    --token-title-3xs-size: 0.875rem;
+    --token-title-3xs-line-height: 1.25;
+    --token-body-xl-size: 1.125rem;
+    --token-body-lg-size: 1rem;
+    --token-body-md-size: 0.875rem;
+    --token-body-sm-size: 0.8rem;
+    --token-body-xs-size: 0.688rem;
+    --token-body-line-height: 1.5;
 }
diff --git a/assets/sass/protocol/includes/themes/_index.scss b/assets/sass/protocol/includes/themes/_index.scss
index 92012982c..f18558d64 100644
--- a/assets/sass/protocol/includes/themes/_index.scss
+++ b/assets/sass/protocol/includes/themes/_index.scss
@@ -47,4 +47,38 @@
             @extend %firefox-type-scale-condensed;
         }
     }
+
+    --theme-title-font-family: var(--token-title-font-family);
+    --theme-title-line-height-2xl: var(--token-title-2xl-line-height);
+    --theme-title-line-height-xl: var(--token-title-xl-line-height);
+    --theme-title-line-height-lg: var(--token-title-lg-line-height);
+    --theme-title-line-height-md: var(--token-title-md-line-height);
+    --theme-title-line-height-sm: var(--token-title-sm-line-height);
+    --theme-title-line-height-xs: var(--token-title-xs-line-height);
+    --theme-title-line-height-2xs: var(--token-title-2xs-line-height);
+    --theme-title-line-height-3xs: var(--token-title-3xs-line-height);
+    --theme-title-font-size-2xl: var(--token-title-2xl-size);
+    --theme-title-font-size-xl: var(--token-title-xl-size);
+    --theme-title-font-size-lg: var(--token-title-lg-size);
+    --theme-title-font-size-md: var(--token-title-md-size);
+    --theme-title-font-size-sm: var(--token-title-sm-size);
+    --theme-title-font-size-xs: var(--token-title-xs-size);
+    --theme-title-font-size-2xs: var(--token-title-2xs-size);
+    --theme-title-font-size-3xs: var(--token-title-3xs-size);
+
+    --theme-body-font-family: var(--token-body-font-family);
+    --theme-body-line-height-2xl: var(--token-body-2xl-line-height);
+    --theme-body-line-height-xl: var(--token-body-xl-line-height);
+    --theme-body-line-height-lg: var(--token-body-lg-line-height);
+    --theme-body-line-height-md: var(--token-body-md-line-height);
+    --theme-body-line-height-sm: var(--token-body-sm-line-height);
+    --theme-body-line-height-xs: var(--token-body-xs-line-height);
+    --theme-body-line-height-2xs: var(--token-body-2xs-line-height);
+    --theme-body-font-size-2xl: var(--token-body-2xl-size);
+    --theme-body-font-size-xl: var(--token-body-xl-size);
+    --theme-body-font-size-lg: var(--token-body-lg-size);
+    --theme-body-font-size-md: var(--token-body-md-size);
+    --theme-body-font-size-sm: var(--token-body-sm-size);
+    --theme-body-font-size-xs: var(--token-body-xs-size);
+    --theme-body-font-size-2xs: var(--token-body-2xs-size);
 }
diff --git a/assets/sass/protocol/includes/themes/_mozilla.scss b/assets/sass/protocol/includes/themes/_mozilla.scss
index e8efdb0c2..a52686f34 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};
+    --token-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-title-font-family: #{tokens.$font-stack-mozilla-headline};
+    --token-title-font-ligatures: none;
+    --token-body-font-ligatures: none;
+    --token-title-font-weight: 600;
+    --token-title-letter-spacing: -0.01em;
 
     // colors
     --background-color-tertiary-inverse: #{tokens.$color-dark-gray-40};
@@ -22,67 +22,67 @@
     --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};
+    --token-body-text-color-secondary-inverse: #{tokens.$color-light-gray-30};
+    --token-body-text-color-secondary: #{tokens.$color-dark-gray-90};
+    --token-body-text-color-inverse: #{tokens.$color-white};
+    --token-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};
+    --token-title-text-color-inverse: #{tokens.$color-white};
+    --token-title-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-title-2xl-size: 4.75rem;
+    --token-title-2xl-line-height: 0.9;
+    --token-title-xl-size: 4.125rem;
+    --token-title-xl-line-height: 0.9;
+    --token-title-lg-size: 3.5rem;
+    --token-title-lg-line-height: 1.1;
+    --token-title-md-size: 3rem;
+    --token-title-md-line-height: 1.1;
+    --token-title-sm-size: 2.375rem;
+    --token-title-sm-line-height: 1.1;
+    --token-title-xs-size: 1.75rem;
+    --token-title-xs-line-height: 1.1;
+    --token-title-2xs-size: 1.5rem;
+    --token-title-2xs-line-height: 1.25;
+    --token-title-3xs-size: 1.125rem;
+    --token-title-3xs-line-height: 1.25;
+    --token-body-xl-size: 1.313rem;
+    --token-body-lg-size: 1.125rem;
+    --token-body-md-size: 1rem;
+    --token-body-sm-size: 0.875rem;
+    --token-body-xs-size: 0.75rem;
+    --token-body-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-title-2xl-size: 2.125rem;
+    --token-title-2xl-line-height: 1.1;
+    --token-title-xl-size: 1.625rem;
+    --token-title-xl-line-height: 1.1;
+    --token-title-lg-size: 1.375rem;
+    --token-title-lg-line-height: 1.1;
+    --token-title-md-size: 1.25rem;
+    --token-title-md-line-height: 1.1;
+    --token-title-sm-size: 1.125rem;
+    --token-title-sm-line-height: 1.25;
+    --token-title-xs-size: 1rem;
+    --token-title-xs-line-height: 1.25;
+    --token-title-2xs-size: 0.875rem;
+    --token-title-2xs-line-height: 1.25;
+    --token-title-3xs-size: 0.875rem;
+    --token-title-3xs-line-height: 1.25;
+    --token-body-xl-size: 1.125rem;
+    --token-body-lg-size: 1rem;
+    --token-body-md-size: 0.875rem;
+    --token-body-sm-size: 0.75rem;
+    --token-body-xs-size: 0.688rem;
+    --token-body-line-height: 1.25;
 }
diff --git a/docs/02-usage/02-framework.md b/docs/02-usage/02-framework.md
index 65843a9cd..0c37a65ee 100644
--- a/docs/02-usage/02-framework.md
+++ b/docs/02-usage/02-framework.md
@@ -92,16 +92,16 @@ while using the Sass variable as a fall back.
 
     .mzp-c-my-component-title {
         color: $title-text-color;
-        font-family: $title-font-family;
+        font-family: var(--token-title-font-family);
     }
 
     @supports (--css: variables) {
         background-color: var(--background-color);
-        color: var(--body-text-color);
+        color: var(--token-body-text-color);
 
         .mzp-c-my-component-title {
-            color: var(--title-text-color);
-            font-family: var(--title-font-family);
+            color: var(--token-title-text-color);
+            font-family: var(--token-title-font-family);
         }
     }
 }
diff --git a/theme/assets/sass/base/_typography.scss b/theme/assets/sass/base/_typography.scss
index 3ce70a793..1e4b78a75 100755
--- a/theme/assets/sass/base/_typography.scss
+++ b/theme/assets/sass/base/_typography.scss
@@ -5,7 +5,7 @@ body {
     color: $body-text-color;
 
     @supports (--css:variables) {
-        color: var(--body-text-color);
+        color: var(--token-body-text-color);
     }
 }
 
diff --git a/theme/assets/sass/components/_document.scss b/theme/assets/sass/components/_document.scss
index 9978dc01c..61261e5db 100644
--- a/theme/assets/sass/components/_document.scss
+++ b/theme/assets/sass/components/_document.scss
@@ -4,11 +4,11 @@
 
 .Document-title {
     @include text-title-lg;
-    font-family: $title-font-family;
+    font-family: var(--token-title-font-family);
     color: $title-text-color;
 
     @supports (--css: variables) {
-        font-family: var(--title-font-family);
-        color: var(--title-text-color);
+        font-family: var(--token-title-font-family);
+        color: var(--token-title-text-color);
     }
 }
diff --git a/theme/assets/sass/components/_pen.scss b/theme/assets/sass/components/_pen.scss
index fdc614842..c48b9220c 100755
--- a/theme/assets/sass/components/_pen.scss
+++ b/theme/assets/sass/components/_pen.scss
@@ -18,7 +18,7 @@
 .Pen-title {
     @include text-title-xs;
     color: $title-text-color;
-    font-family: $title-font-family;
+    font-family: var(--token-title-font-family);
     margin-bottom: 0.5em;
 
     @media #{$mq-md} {
@@ -26,8 +26,8 @@
     }
 
     @supports (--css: variables) {
-        color: var(--title-text-color);
-        font-family: var(--title-font-family);
+        color: var(--token-title-text-color);
+        font-family: var(--token-title-font-family);
     }
 }
 
@@ -39,7 +39,7 @@
         color: $title-text-color;
 
         @supports (--css: variables) {
-            color: var(--title-text-color);
+            color: var(--token-title-text-color);
         }
     }
 
@@ -53,7 +53,7 @@
     @include bidi(((margin-left, $spacing-lg, margin-right, $spacing-lg),));
     @include text-body-sm;
     color: $link-color;
-    font-family: $body-font-family;
+    font-family: var(--token-body-font-family);
     font-weight: bold;
 
     &:hover,
@@ -63,7 +63,7 @@
 
     @supports (--css: variables) {
         color: var(--link-color);
-        font-family: var(--body-font-family);
+        font-family: var(--token-body-font-family);
 
         &:hover,
         &:active {
diff --git a/theme/assets/sass/components/_prose.scss b/theme/assets/sass/components/_prose.scss
index e6caa0d92..116bbcd87 100755
--- a/theme/assets/sass/components/_prose.scss
+++ b/theme/assets/sass/components/_prose.scss
@@ -45,15 +45,15 @@
     h4,
     h5,
     h6 {
-        font-family: $title-font-family;
+        font-family: var(--token-title-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(--token-title-text-color);
+            font-family: var(--token-title-font-family);
         }
     }
 
diff --git a/theme/assets/sass/components/_type-specimen.scss b/theme/assets/sass/components/_type-specimen.scss
index dedecd2da..493ad830e 100644
--- a/theme/assets/sass/components/_type-specimen.scss
+++ b/theme/assets/sass/components/_type-specimen.scss
@@ -36,82 +36,50 @@
 
 .docs-scale-sample-title-2xl {
     @include text-title-2xl;
-    font-family: $title-font-family;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-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;
+    font-family: var(--token-title-font-family);
     font-weight: bold;
-
-    @supports (--css: variables) {
-        font-family: var(--title-font-family);
-    }
 }
 
 .docs-scale-sample-body-xl {