diff --git a/src/material/badge/_m2-badge.scss b/src/material/badge/_m2-badge.scss
index 41c075e8f7ca..d18de9cdbabc 100644
--- a/src/material/badge/_m2-badge.scss
+++ b/src/material/badge/_m2-badge.scss
@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 
@@ -64,10 +63,12 @@ $_large-size: $_default-size + 6px;
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $base-size: 12px;
 
   @return (
-    badge-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    badge-text-font: map.get($system, body-medium-font),
     badge-line-height: $_default-size,
     badge-text-size: $base-size,
     badge-text-weight: 600,
diff --git a/src/material/bottom-sheet/_m2-bottom-sheet.scss b/src/material/bottom-sheet/_m2-bottom-sheet.scss
index 0cba0cdc3b6f..034194186ef1 100644
--- a/src/material/bottom-sheet/_m2-bottom-sheet.scss
+++ b/src/material/bottom-sheet/_m2-bottom-sheet.scss
@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
@@ -23,15 +22,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    bottom-sheet-container-text-line-height:
-        inspection.get-theme-typography($theme, body-2, line-height),
-    bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    bottom-sheet-container-text-tracking:
-        inspection.get-theme-typography($theme, body-2, letter-spacing),
-    bottom-sheet-container-text-weight:
-        inspection.get-theme-typography($theme, body-2, font-weight),
+    bottom-sheet-container-text-font: map.get($system, body-medium-font),
+    bottom-sheet-container-text-line-height: map.get($system, body-medium-line-height),
+    bottom-sheet-container-text-size: map.get($system, body-medium-size),
+    bottom-sheet-container-text-tracking: map.get($system, body-medium-tracking),
+    bottom-sheet-container-text-weight: map.get($system, body-medium-weight),
   );
 }
 
diff --git a/src/material/button-toggle/_m2-button-toggle.scss b/src/material/button-toggle/_m2-button-toggle.scss
index 74dde4c93f8e..79e062581b5b 100644
--- a/src/material/button-toggle/_m2-button-toggle.scss
+++ b/src/material/button-toggle/_m2-button-toggle.scss
@@ -53,24 +53,18 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    button-toggle-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    button-toggle-label-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    button-toggle-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    button-toggle-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    button-toggle-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-    button-toggle-legacy-label-text-font:
-        inspection.get-theme-typography($theme, body-1, font-family),
-    button-toggle-legacy-label-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    button-toggle-legacy-label-text-size:
-        inspection.get-theme-typography($theme, body-1, font-size),
-    button-toggle-legacy-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    button-toggle-legacy-label-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
+    button-toggle-label-text-font: map.get($system, body-large-font),
+    button-toggle-label-text-line-height: map.get($system, body-large-line-height),
+    button-toggle-label-text-size: map.get($system, body-large-size),
+    button-toggle-label-text-tracking: map.get($system, body-large-tracking),
+    button-toggle-label-text-weight: map.get($system, body-large-weight),
+    button-toggle-legacy-label-text-font: map.get($system, body-large-font),
+    button-toggle-legacy-label-text-line-height: map.get($system, body-large-line-height),
+    button-toggle-legacy-label-text-size: map.get($system, body-large-size),
+    button-toggle-legacy-label-text-tracking: map.get($system, body-large-tracking),
+    button-toggle-legacy-label-text-weight: map.get($system, body-large-weight),
   );
 }
 
diff --git a/src/material/button/_m2-button.scss b/src/material/button/_m2-button.scss
index bd276054d643..881f94898587 100644
--- a/src/material/button/_m2-button.scss
+++ b/src/material/button/_m2-button.scss
@@ -143,38 +143,34 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $font-family: inspection.get-theme-typography($theme, button, font-family);
-  $font-size: inspection.get-theme-typography($theme, button, font-size);
-  $font-weight: inspection.get-theme-typography($theme, button, font-weight);
-  $letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
-  $text-transform: none;
+  $system: m2-utils.get-system($theme);
 
   @return (
-    button-filled-label-text-font: $font-family,
-    button-filled-label-text-size: $font-size,
-    button-filled-label-text-tracking: $letter-spacing,
+    button-filled-label-text-font: map.get($system, label-small-font),
+    button-filled-label-text-size: map.get($system, label-small-size),
+    button-filled-label-text-tracking: map.get($system, label-small-tracking),
     button-filled-label-text-transform: none,
-    button-filled-label-text-weight: $font-weight,
-    button-outlined-label-text-font: $font-family,
-    button-outlined-label-text-size: $font-size,
-    button-outlined-label-text-tracking: $letter-spacing,
+    button-filled-label-text-weight: map.get($system, label-small-weight),
+    button-outlined-label-text-font: map.get($system, label-small-font),
+    button-outlined-label-text-size: map.get($system, label-small-size),
+    button-outlined-label-text-tracking: map.get($system, label-small-tracking),
     button-outlined-label-text-transform: none,
-    button-outlined-label-text-weight: $font-weight,
-    button-protected-label-text-font: $font-family,
-    button-protected-label-text-size: $font-size,
-    button-protected-label-text-tracking: $letter-spacing,
+    button-outlined-label-text-weight: map.get($system, label-small-weight),
+    button-protected-label-text-font: map.get($system, label-small-font),
+    button-protected-label-text-size: map.get($system, label-small-size),
+    button-protected-label-text-tracking: map.get($system, label-small-tracking),
     button-protected-label-text-transform: none,
-    button-protected-label-text-weight: $font-weight,
-    button-text-label-text-font: $font-family,
-    button-text-label-text-size: $font-size,
-    button-text-label-text-tracking: $letter-spacing,
+    button-protected-label-text-weight: map.get($system, label-small-weight),
+    button-text-label-text-font: map.get($system, label-small-font),
+    button-text-label-text-size: map.get($system, label-small-size),
+    button-text-label-text-tracking: map.get($system, label-small-tracking),
     button-text-label-text-transform: none,
-    button-text-label-text-weight: $font-weight,
-    button-tonal-label-text-font: $font-family,
-    button-tonal-label-text-size: $font-size,
-    button-tonal-label-text-tracking: $letter-spacing,
+    button-text-label-text-weight: map.get($system, label-small-weight),
+    button-tonal-label-text-font: map.get($system, label-small-font),
+    button-tonal-label-text-size: map.get($system, label-small-size),
+    button-tonal-label-text-tracking: map.get($system, label-small-tracking),
     button-tonal-label-text-transform: none,
-    button-tonal-label-text-weight: $font-weight,
+    button-tonal-label-text-weight: map.get($system, label-small-weight),
   );
 }
 
diff --git a/src/material/button/_m2-fab.scss b/src/material/button/_m2-fab.scss
index 49790186cca3..2e429c0717bc 100644
--- a/src/material/button/_m2-fab.scss
+++ b/src/material/button/_m2-fab.scss
@@ -82,12 +82,12 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    fab-extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    fab-extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    fab-extended-label-text-tracking:
-        inspection.get-theme-typography($theme, button, letter-spacing),
-    fab-extended-label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
+    fab-extended-label-text-font: map.get($system, label-small-font),
+    fab-extended-label-text-size: map.get($system, label-small-size),
+    fab-extended-label-text-tracking: map.get($system, label-small-tracking),
+    fab-extended-label-text-weight: map.get($system, label-small-weight)
   );
 }
 
diff --git a/src/material/card/_m2-card.scss b/src/material/card/_m2-card.scss
index 2cbb60feb3f8..028826975e88 100644
--- a/src/material/card/_m2-card.scss
+++ b/src/material/card/_m2-card.scss
@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
@@ -32,19 +31,18 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    card-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    card-title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
-    card-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    card-title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    card-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
-    card-subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    card-subtitle-text-line-height:
-        inspection.get-theme-typography($theme, subtitle-2, line-height),
-    card-subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    card-subtitle-text-tracking:
-        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
-    card-subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    card-title-text-font: map.get($system, title-small-font),
+    card-title-text-line-height: map.get($system, title-small-line-height),
+    card-title-text-size: map.get($system, title-small-size),
+    card-title-text-tracking: map.get($system, title-small-tracking),
+    card-title-text-weight: map.get($system, title-small-weight),
+    card-subtitle-text-font: map.get($system, label-medium-font),
+    card-subtitle-text-line-height: map.get($system, label-medium-line-height),
+    card-subtitle-text-size: map.get($system, label-medium-size),
+    card-subtitle-text-tracking: map.get($system, label-medium-tracking),
+    card-subtitle-text-weight: map.get($system, label-medium-weight),
   );
 }
 
diff --git a/src/material/checkbox/_m2-checkbox.scss b/src/material/checkbox/_m2-checkbox.scss
index 2490badce9e9..20b39a2e2a60 100644
--- a/src/material/checkbox/_m2-checkbox.scss
+++ b/src/material/checkbox/_m2-checkbox.scss
@@ -57,12 +57,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    checkbox-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    checkbox-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    checkbox-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    checkbox-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    checkbox-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    checkbox-label-text-font: map.get($system, body-medium-font),
+    checkbox-label-text-line-height: map.get($system, body-medium-line-height),
+    checkbox-label-text-size: map.get($system, body-medium-size),
+    checkbox-label-text-tracking: map.get($system, body-medium-tracking),
+    checkbox-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 
diff --git a/src/material/chips/_m2-chip.scss b/src/material/chips/_m2-chip.scss
index 3339040198c5..2cb64f86de30 100644
--- a/src/material/chips/_m2-chip.scss
+++ b/src/material/chips/_m2-chip.scss
@@ -72,12 +72,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    chip-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    chip-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    chip-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    chip-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    chip-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    chip-label-text-font: map.get($system, body-medium-font),
+    chip-label-text-line-height: map.get($system, body-medium-line-height),
+    chip-label-text-size: map.get($system, body-medium-size),
+    chip-label-text-tracking: map.get($system, body-medium-tracking),
+    chip-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 
diff --git a/src/material/core/m2/_theming.scss b/src/material/core/m2/_theming.scss
index 9e44b8dac970..541d01636267 100644
--- a/src/material/core/m2/_theming.scss
+++ b/src/material/core/m2/_theming.scss
@@ -114,20 +114,26 @@
   @return $theme;
 }
 
-@function _define-system($primary, $accent, $warn, $is-dark) {
+@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
   $palettes: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
   );
 
-  $color: if(
+  $sys-color: if(
       $is-dark,
       m2.md-sys-color-values-dark($palettes),
       m2.md-sys-color-values-light($palettes));
-  $state: m2.md-sys-state-values();
+  $sys-state: m2.md-sys-state-values();
+  $sys-typography: m2.md-sys-typescale-values($typography);
 
-  @return map.merge($color, $state);
+  $system: ();
+  @each $map in ($sys-color, $sys-state, $sys-typography) {
+    $system: map.merge($system, $map);
+  }
+
+  @return $system;
 }
 
 // Creates a color configuration from the specified
@@ -177,7 +183,13 @@
     );
 
     $theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
-    $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+    $system: _define-system(
+        $primary: $primary,
+        $accent: $accent,
+        $warn: $warn,
+        $is-dark: $is-dark,
+        $typography: ());
+    $theme: map.set($theme, _mat-system, $system);
     @return $theme;
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
@@ -199,10 +211,13 @@
   $theme: _internalize-theme(
       theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
   );
-  $primary: map.get($result, primary) or map.get($result, color, primary) or ();
-  $accent: map.get($result, accent) or map.get($result, color, accent) or ();
-  $warn: map.get($result, warn) or map.get($result, color, warn) or ();
-  $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+  $system: _define-system(
+      $primary: map.get($result, primary) or map.get($result, color, primary) or (),
+      $accent: map.get($result, accent) or map.get($result, color, accent) or (),
+      $warn: map.get($result, warn) or map.get($result, color, warn) or (),
+      $is-dark: $is-dark,
+      $typography: map.get($result, typography) or ());
+  $theme: map.set($theme, _mat-system, $system);
   @return $theme;
 }
 
diff --git a/src/material/core/option/_m2-optgroup.scss b/src/material/core/option/_m2-optgroup.scss
index 37499286aaec..8aa17918cfd7 100644
--- a/src/material/core/option/_m2-optgroup.scss
+++ b/src/material/core/option/_m2-optgroup.scss
@@ -1,4 +1,3 @@
-@use '../theming/inspection';
 @use '../tokens/m2-utils';
 @use 'sass:map';
 
@@ -18,12 +17,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    optgroup-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    optgroup-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    optgroup-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    optgroup-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    optgroup-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    optgroup-label-text-font: map.get($system, body-large-font),
+    optgroup-label-text-line-height: map.get($system, body-large-line-height),
+    optgroup-label-text-size: map.get($system, body-large-size),
+    optgroup-label-text-tracking: map.get($system, body-large-tracking),
+    optgroup-label-text-weight: map.get($system, body-large-weight)
   );
 }
 
diff --git a/src/material/core/option/_m2-option.scss b/src/material/core/option/_m2-option.scss
index 6f8eecd5abfc..c790f0d849e7 100644
--- a/src/material/core/option/_m2-option.scss
+++ b/src/material/core/option/_m2-option.scss
@@ -29,12 +29,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    option-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    option-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    option-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    option-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    option-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    option-label-text-font: map.get($system, body-large-font),
+    option-label-text-line-height: map.get($system, body-large-line-height),
+    option-label-text-size: map.get($system, body-large-size),
+    option-label-text-tracking: map.get($system, body-large-tracking),
+    option-label-text-weight: map.get($system, body-large-weight)
   );
 }
 
diff --git a/src/material/core/tokens/_m2-utils.scss b/src/material/core/tokens/_m2-utils.scss
index 1ff3b4777695..c5a84f585c40 100644
--- a/src/material/core/tokens/_m2-utils.scss
+++ b/src/material/core/tokens/_m2-utils.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './m2';
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
@@ -7,5 +8,10 @@
     @return $system;
   }
 
+  // If the $theme is a typography-config, convert it to a system map.
+  @if map.has-key($theme, body-1) {
+    @return m2.md-sys-typescale-values($theme);
+  }
+
   @return ();
 }
diff --git a/src/material/core/tokens/m2/_md-sys-typescale.scss b/src/material/core/tokens/m2/_md-sys-typescale.scss
index e77093270447..94ad447fd387 100644
--- a/src/material/core/tokens/m2/_md-sys-typescale.scss
+++ b/src/material/core/tokens/m2/_md-sys-typescale.scss
@@ -1,101 +1,67 @@
-//
-// Design system display name: Material 3
-// Design system version: v0.161
-//
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
 
-@function md-sys-typescale-values($typography) {
-  @return (
-    body-large: null,
-    body-large-font: null,
-    body-large-line-height: null,
-    body-large-size: null,
-    body-large-tracking: null,
-    body-large-weight: null,
-    body-medium: null,
-    body-medium-font: null,
-    body-medium-line-height: null,
-    body-medium-size: null,
-    body-medium-tracking: null,
-    body-medium-weight: null,
-    body-small: null,
-    body-small-font: null,
-    body-small-line-height: null,
-    body-small-size: null,
-    body-small-tracking: null,
-    body-small-weight: null,
-    display-large: null,
-    display-large-font: null,
-    display-large-line-height: null,
-    display-large-size: null,
-    display-large-tracking: null,
-    display-large-weight: null,
-    display-medium: null,
-    display-medium-font: null,
-    display-medium-line-height: null,
-    display-medium-size: null,
-    display-medium-tracking: null,
-    display-medium-weight: null,
-    display-small: null,
-    display-small-font: null,
-    display-small-line-height: null,
-    display-small-size: null,
-    display-small-tracking: null,
-    display-small-weight: null,
-    headline-large: null,
-    headline-large-font: null,
-    headline-large-line-height: null,
-    headline-large-size: null,
-    headline-large-tracking: null,
-    headline-large-weight: null,
-    headline-medium: null,
-    headline-medium-font: null,
-    headline-medium-line-height: null,
-    headline-medium-size: null,
-    headline-medium-tracking: null,
-    headline-medium-weight: null,
-    headline-small: null,
-    headline-small-font: null,
-    headline-small-line-height: null,
-    headline-small-size: null,
-    headline-small-tracking: null,
-    headline-small-weight: null,
-    label-large: null,
-    label-large-font: null,
-    label-large-line-height: null,
-    label-large-size: null,
-    label-large-tracking: null,
-    label-large-weight: null,
-    label-large-weight-prominent: null,
-    label-medium: null,
-    label-medium-font: null,
-    label-medium-line-height: null,
-    label-medium-size: null,
-    label-medium-tracking: null,
-    label-medium-weight: null,
-    label-medium-weight-prominent: null,
-    label-small: null,
-    label-small-font: null,
-    label-small-line-height: null,
-    label-small-size: null,
-    label-small-tracking: null,
-    label-small-weight: null,
-    title-large: null,
-    title-large-font: null,
-    title-large-line-height: null,
-    title-large-size: null,
-    title-large-tracking: null,
-    title-large-weight: null,
-    title-medium: null,
-    title-medium-font: null,
-    title-medium-line-height: null,
-    title-medium-size: null,
-    title-medium-tracking: null,
-    title-medium-weight: null,
-    title-small: null,
-    title-small-font: null,
-    title-small-line-height: null,
-    title-small-size: null,
-    title-small-tracking: null,
-    title-small-weight: null,
+@function md-sys-typescale-values($config) {
+  $sys-to-config: (
+    body-large: body-1,
+    body-medium: body-2,
+    body-small: caption,
+    label-large: subtitle-1,
+    label-medium: subtitle-2,
+    label-small: button,
+    display-large: headline-1,
+    display-medium: headline-1,
+    display-small: headline-1,
+    headline-large: headline-2,
+    headline-medium: headline-3,
+    headline-small: headline-4,
+    title-large: headline-5,
+    title-medium: headline-5,
+    title-small: headline-6,
   );
+
+  // If the config is based on an old 2014 version of the typography spec, then
+  // use the old config keys to map to the new system tokens.
+  @if (map.get($config, headline) != null) {
+    $sys-to-config: (
+      body-large: subheading-1,
+      body-medium: body-1,
+      body-small: caption,
+      display-large: display-4,
+      display-medium: display-4,
+      display-small: display-4,
+      headline-large: display-3,
+      headline-medium: display-2,
+      headline-small: display-1,
+      label-large: subheading-2,
+      label-medium: body-2,
+      label-small: button,
+      title-large: headline,
+      title-medium: headline,
+      title-small: title,
+    );
+  }
+
+  $typography: ();
+  @each $sys-key, $config-key in $sys-to-config {
+    $font: map.get($config, $config-key, font-family);
+    @if (meta.type-of($font) == 'string') {
+      $font: string.unquote($font);
+    }
+    $line-height: map.get($config, $config-key, line-height);
+    $size: map.get($config, $config-key, font-size);
+    $tracking: map.get($config, $config-key, letter-spacing);
+    $weight: map.get($config, $config-key, font-weight);
+    $typography: map.merge($typography, (
+      #{$sys-key}: $weight $size #{'/'} $line-height $font,
+      #{$sys-key}-font: $font,
+      #{$sys-key}-line-height: $line-height,
+      #{$sys-key}-size: $size,
+      #{$sys-key}-tracking: $tracking,
+      #{$sys-key}-weight: $weight,
+    ));
+  }
+
+  @return $typography;
 }
diff --git a/src/material/datepicker/_m2-datepicker.scss b/src/material/datepicker/_m2-datepicker.scss
index f6df2314d5a3..cb078b110e86 100644
--- a/src/material/datepicker/_m2-datepicker.scss
+++ b/src/material/datepicker/_m2-datepicker.scss
@@ -1,5 +1,4 @@
 @use 'sass:color';
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/tokens/m3-utils';
 @use '../core/tokens/m2-utils';
@@ -65,27 +64,21 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
     // TODO(crisbeto): the typography tokens for other components set every typography dimension of
     // an element (e.g. size, weight, line height, letter spacing). These tokens only set the values
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
-    datepicker-calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
+    datepicker-calendar-text-font: map.get($system, body-large-font),
     datepicker-calendar-text-size: 13px,
-
-    datepicker-calendar-body-label-text-size:
-        inspection.get-theme-typography($theme, button, font-size),
-    datepicker-calendar-body-label-text-weight:
-        inspection.get-theme-typography($theme, button, font-weight),
-
-    datepicker-calendar-period-button-text-size:
-        inspection.get-theme-typography($theme, button, font-size),
-    datepicker-calendar-period-button-text-weight:
-        inspection.get-theme-typography($theme, button, font-weight),
-
+    datepicker-calendar-body-label-text-size: map.get($system, label-small-size),
+    datepicker-calendar-body-label-text-weight: map.get($system, label-small-weight),
+    datepicker-calendar-period-button-text-size: map.get($system, label-small-size),
+    datepicker-calendar-period-button-text-weight: map.get($system, label-small-weight),
     datepicker-calendar-header-text-size: 11px,
     datepicker-calendar-header-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
+        map.get($system, body-large-weight),
   );
 }
 
diff --git a/src/material/dialog/_m2-dialog.scss b/src/material/dialog/_m2-dialog.scss
index 0068f1c2381f..e5a8a8aacc5f 100644
--- a/src/material/dialog/_m2-dialog.scss
+++ b/src/material/dialog/_m2-dialog.scss
@@ -1,5 +1,4 @@
 @use '../core/style/elevation';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
@@ -35,19 +34,18 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    dialog-subhead-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    dialog-subhead-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
-    dialog-subhead-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    dialog-subhead-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
-    dialog-subhead-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    dialog-supporting-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    dialog-supporting-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    dialog-supporting-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    dialog-supporting-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-    dialog-supporting-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
+    dialog-subhead-font: map.get($system, title-small-font),
+    dialog-subhead-line-height: map.get($system, title-small-line-height),
+    dialog-subhead-size: map.get($system, title-small-size),
+    dialog-subhead-weight: map.get($system, title-small-weight),
+    dialog-subhead-tracking: map.get($system, title-small-tracking),
+    dialog-supporting-text-font: map.get($system, body-large-font),
+    dialog-supporting-text-line-height: map.get($system, body-large-line-height),
+    dialog-supporting-text-size: map.get($system, body-large-size),
+    dialog-supporting-text-weight: map.get($system, body-large-weight),
+    dialog-supporting-text-tracking: map.get($system, body-large-tracking),
   );
 }
 
diff --git a/src/material/expansion/_m2-expansion.scss b/src/material/expansion/_m2-expansion.scss
index b438c0bd18aa..5de67cc4b76f 100644
--- a/src/material/expansion/_m2-expansion.scss
+++ b/src/material/expansion/_m2-expansion.scss
@@ -35,10 +35,11 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    expansion-header-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    expansion-header-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    expansion-header-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    expansion-header-text-font: map.get($system, label-medium-font),
+    expansion-header-text-size: map.get($system, label-medium-size),
+    expansion-header-text-weight: map.get($system, label-medium-weight),
 
     // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
     // but it's inconsistent not to provide them since the container sets all of them. Eventually
@@ -46,13 +47,11 @@
     expansion-header-text-line-height: inherit,
     expansion-header-text-tracking: inherit,
 
-    expansion-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    expansion-container-text-line-height:
-        inspection.get-theme-typography($theme, body-2, line-height),
-    expansion-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    expansion-container-text-tracking:
-        inspection.get-theme-typography($theme, body-2, letter-spacing),
-    expansion-container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    expansion-container-text-font: map.get($system, body-medium-font),
+    expansion-container-text-line-height: map.get($system, body-medium-line-height),
+    expansion-container-text-size: map.get($system, body-medium-size),
+    expansion-container-text-tracking: map.get($system, body-medium-tracking),
+    expansion-container-text-weight: map.get($system, body-medium-weight),
   );
 }
 
diff --git a/src/material/form-field/_m2-form-field.scss b/src/material/form-field/_m2-form-field.scss
index 229779534fea..affdb7b9c222 100644
--- a/src/material/form-field/_m2-form-field.scss
+++ b/src/material/form-field/_m2-form-field.scss
@@ -132,17 +132,16 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
     // MDC uses `subtitle1` for the input value, placeholder and floating label. The spec
     // shows `body1` for text fields though, so we manually override the typography.
     // Note: Form controls inherit the typography from the parent form field.
-    form-field-container-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    form-field-container-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    form-field-container-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    form-field-container-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    form-field-container-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    form-field-container-text-font: map.get($system, body-large-font),
+    form-field-container-text-line-height: map.get($system, body-large-line-height),
+    form-field-container-text-size: map.get($system, body-large-size),
+    form-field-container-text-tracking: map.get($system, body-large-tracking),
+    form-field-container-text-weight: map.get($system, body-large-weight),
 
     // In the container styles, we updated the floating label to use the `body-1` typography level.
     // The MDC notched outline overrides this accidentally (only when the label floats) to a
@@ -153,28 +152,21 @@
     // This is why we can't use their `label-text-populated-size` token and we have to declare
     // our own version of it.
     form-field-outlined-label-text-populated-size:
-        inspection.get-theme-typography($theme, body-1, font-size),
-
-    form-field-subscript-text-font: inspection.get-theme-typography($theme, caption, font-family),
-    form-field-subscript-text-line-height:
-        inspection.get-theme-typography($theme, caption, line-height),
-    form-field-subscript-text-size: inspection.get-theme-typography($theme, caption, font-size),
-    form-field-subscript-text-tracking:
-        inspection.get-theme-typography($theme, caption, letter-spacing),
-    form-field-subscript-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
-    form-field-filled-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    form-field-filled-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    form-field-filled-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    form-field-filled-label-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
-    form-field-outlined-label-text-font:
-        inspection.get-theme-typography($theme, body-1, font-family),
-    form-field-outlined-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    form-field-outlined-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    form-field-outlined-label-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
+        map.get($system, body-large-size),
+
+    form-field-subscript-text-font: map.get($system, body-small-font),
+    form-field-subscript-text-line-height: map.get($system, body-small-line-height),
+    form-field-subscript-text-size: map.get($system, body-small-size),
+    form-field-subscript-text-tracking: map.get($system, body-small-tracking),
+    form-field-subscript-text-weight: map.get($system, body-small-weight),
+    form-field-filled-label-text-font: map.get($system, body-large-font),
+    form-field-filled-label-text-size: map.get($system, body-large-size),
+    form-field-filled-label-text-tracking: map.get($system, body-large-tracking),
+    form-field-filled-label-text-weight: map.get($system, body-large-weight),
+    form-field-outlined-label-text-font: map.get($system, body-large-font),
+    form-field-outlined-label-text-size: map.get($system, body-large-size),
+    form-field-outlined-label-text-tracking: map.get($system, body-large-tracking),
+    form-field-outlined-label-text-weight: map.get($system, body-large-weight),
   );
 }
 
diff --git a/src/material/grid-list/_m2-grid-list.scss b/src/material/grid-list/_m2-grid-list.scss
index d7d770c03519..ca0a737c1e4c 100644
--- a/src/material/grid-list/_m2-grid-list.scss
+++ b/src/material/grid-list/_m2-grid-list.scss
@@ -1,4 +1,5 @@
-@use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -13,18 +14,15 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
     // TODO(crisbeto): other components have tokens for all typography dimensions.
     // Here we only set the font size to maintain the same appearance as the pre-tokens
     // theming API. Consider adding more tokens for letter spacing, font weight etc.
-    grid-list-tile-header-primary-text-size:
-        inspection.get-theme-typography($theme, body-2, font-size),
-    grid-list-tile-header-secondary-text-size:
-        inspection.get-theme-typography($theme, caption, font-size),
-    grid-list-tile-footer-primary-text-size:
-        inspection.get-theme-typography($theme, body-2, font-size),
-    grid-list-tile-footer-secondary-text-size:
-        inspection.get-theme-typography($theme, caption, font-size),
+    grid-list-tile-header-primary-text-size: map.get($system, body-medium-size),
+    grid-list-tile-header-secondary-text-size: map.get($system, body-small-size),
+    grid-list-tile-footer-primary-text-size: map.get($system, body-medium-size),
+    grid-list-tile-footer-secondary-text-size: map.get($system, body-small-size),
   );
 }
 
diff --git a/src/material/list/_list-theme.scss b/src/material/list/_list-theme.scss
index ea1e24ca58e6..65faec2f757a 100644
--- a/src/material/list/_list-theme.scss
+++ b/src/material/list/_list-theme.scss
@@ -9,6 +9,7 @@
 @use '../radio/m2-radio';
 @use './m2-list';
 @use './m3-list';
+@use '../core/tokens/m2-utils';
 
 @mixin base($theme) {
   // Add default values for tokens not related to color, typography, or density.
@@ -154,8 +155,9 @@
     // MDC does not have tokens for the subheader.
     // TODO(mmalerba): Discuss with MDC about adding them, or create custom tokens.
     .mdc-list-group__subheader {
-      font: inspection.get-theme-typography($theme, subtitle-1, font);
-      letter-spacing: inspection.get-theme-typography($theme, subtitle-1, letter-spacing);
+      $system: m2-utils.get-system($theme);
+      font: map.get($system, label-large);
+      letter-spacing: map.get($system, label-large-tracking);
     }
   }
 }
diff --git a/src/material/list/_m2-list.scss b/src/material/list/_m2-list.scss
index 0d989e63a755..062600bac2c8 100644
--- a/src/material/list/_m2-list.scss
+++ b/src/material/list/_m2-list.scss
@@ -51,33 +51,23 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    list-list-item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    list-list-item-label-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    list-list-item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    list-list-item-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    list-list-item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-    list-list-item-supporting-text-font:
-        inspection.get-theme-typography($theme, body-2, font-family),
-    list-list-item-supporting-text-line-height:inspection.get-theme-typography(
-        $theme, body-2, line-height),
-    list-list-item-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    list-list-item-supporting-text-tracking: inspection.get-theme-typography(
-        $theme, body-2, letter-spacing),
-    list-list-item-supporting-text-weight:
-        inspection.get-theme-typography($theme, body-2, font-weight),
-    list-list-item-trailing-supporting-text-font: inspection.get-theme-typography(
-        $theme, caption, font-family),
-    list-list-item-trailing-supporting-text-line-height: inspection.get-theme-typography(
-        $theme, caption, line-height),
-    list-list-item-trailing-supporting-text-size: inspection.get-theme-typography(
-        $theme, caption, font-size),
-    list-list-item-trailing-supporting-text-tracking: inspection.get-theme-typography(
-        $theme, caption, letter-spacing),
-    list-list-item-trailing-supporting-text-weight: inspection.get-theme-typography(
-        $theme, caption, font-weight),
+    list-list-item-label-text-font: map.get($system, body-large-font),
+    list-list-item-label-text-line-height: map.get($system, body-large-line-height),
+    list-list-item-label-text-size: map.get($system, body-large-size),
+    list-list-item-label-text-tracking: map.get($system, body-large-tracking),
+    list-list-item-label-text-weight: map.get($system, body-large-weight),
+    list-list-item-supporting-text-font: map.get($system, body-medium-font),
+    list-list-item-supporting-text-line-height: map.get($system, body-medium-line-height),
+    list-list-item-supporting-text-size: map.get($system, body-medium-size),
+    list-list-item-supporting-text-tracking: map.get($system, body-medium-tracking),
+    list-list-item-supporting-text-weight: map.get($system, body-medium-weight),
+    list-list-item-trailing-supporting-text-font: map.get($system, body-small-font),
+    list-list-item-trailing-supporting-text-line-height: map.get($system, body-small-line-height),
+    list-list-item-trailing-supporting-text-size: map.get($system, body-small-size),
+    list-list-item-trailing-supporting-text-tracking: map.get($system, body-small-tracking),
+    list-list-item-trailing-supporting-text-weight: map.get($system, body-small-weight),
   );
 }
 
diff --git a/src/material/menu/_m2-menu.scss b/src/material/menu/_m2-menu.scss
index 5d5d74ed970b..8f74535940ff 100644
--- a/src/material/menu/_m2-menu.scss
+++ b/src/material/menu/_m2-menu.scss
@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use 'sass:map';
 @use '../core/tokens/m2-utils';
@@ -42,12 +41,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    menu-item-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    menu-item-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    menu-item-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    menu-item-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    menu-item-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
+    menu-item-label-text-font: map.get($system, body-large-font),
+    menu-item-label-text-size: map.get($system, body-large-size),
+    menu-item-label-text-tracking: map.get($system, body-large-tracking),
+    menu-item-label-text-line-height: map.get($system, body-large-line-height),
+    menu-item-label-text-weight: map.get($system, body-large-weight),
   );
 }
 
diff --git a/src/material/paginator/_m2-paginator.scss b/src/material/paginator/_m2-paginator.scss
index 4bc0a6ff21d8..88054819f388 100644
--- a/src/material/paginator/_m2-paginator.scss
+++ b/src/material/paginator/_m2-paginator.scss
@@ -25,15 +25,14 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    paginator-container-text-font: inspection.get-theme-typography($theme, caption, font-family),
-    paginator-container-text-line-height:
-        inspection.get-theme-typography($theme, caption, line-height),
-    paginator-container-text-size: inspection.get-theme-typography($theme, caption, font-size),
-    paginator-container-text-tracking:
-        inspection.get-theme-typography($theme, caption, letter-spacing),
-    paginator-container-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
-    paginator-select-trigger-text-size: inspection.get-theme-typography($theme, caption, font-size),
+    paginator-container-text-font: map.get($system, body-small-font),
+    paginator-container-text-line-height: map.get($system, body-small-line-height),
+    paginator-container-text-size: map.get($system, body-small-size),
+    paginator-container-text-tracking: map.get($system, body-small-tracking),
+    paginator-container-text-weight: map.get($system, body-small-weight),
+    paginator-select-trigger-text-size: map.get($system, body-small-size),
   );
 }
 
diff --git a/src/material/radio/_m2-radio.scss b/src/material/radio/_m2-radio.scss
index 68d6f01c29cd..9778e6c0528c 100644
--- a/src/material/radio/_m2-radio.scss
+++ b/src/material/radio/_m2-radio.scss
@@ -45,12 +45,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    radio-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    radio-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    radio-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    radio-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    radio-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    radio-label-text-font: map.get($system, body-medium-font),
+    radio-label-text-line-height: map.get($system, body-medium-line-height),
+    radio-label-text-size: map.get($system, body-medium-size),
+    radio-label-text-tracking: map.get($system, body-medium-tracking),
+    radio-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 
diff --git a/src/material/select/_m2-select.scss b/src/material/select/_m2-select.scss
index 50228e000f5a..84a2878e1640 100644
--- a/src/material/select/_m2-select.scss
+++ b/src/material/select/_m2-select.scss
@@ -33,12 +33,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    select-trigger-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    select-trigger-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    select-trigger-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    select-trigger-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    select-trigger-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    select-trigger-text-font: map.get($system, body-large-font),
+    select-trigger-text-line-height: map.get($system, body-large-line-height),
+    select-trigger-text-size: map.get($system, body-large-size),
+    select-trigger-text-tracking: map.get($system, body-large-tracking),
+    select-trigger-text-weight: map.get($system, body-large-weight)
   );
 }
 
diff --git a/src/material/slide-toggle/_m2-slide-toggle.scss b/src/material/slide-toggle/_m2-slide-toggle.scss
index e0c2e265cadc..7a11a9a9a249 100644
--- a/src/material/slide-toggle/_m2-slide-toggle.scss
+++ b/src/material/slide-toggle/_m2-slide-toggle.scss
@@ -132,14 +132,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    slide-toggle-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    slide-toggle-label-text-line-height:
-        inspection.get-theme-typography($theme, body-2, line-height),
-    slide-toggle-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    slide-toggle-label-text-tracking:
-        inspection.get-theme-typography($theme, body-2, letter-spacing),
-    slide-toggle-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    slide-toggle-label-text-font: map.get($system, body-medium-font),
+    slide-toggle-label-text-line-height: map.get($system, body-medium-line-height),
+    slide-toggle-label-text-size: map.get($system, body-medium-size),
+    slide-toggle-label-text-tracking: map.get($system, body-medium-tracking),
+    slide-toggle-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 
diff --git a/src/material/slider/_m2-slider.scss b/src/material/slider/_m2-slider.scss
index 808331c49efc..d12b0e41d67c 100644
--- a/src/material/slider/_m2-slider.scss
+++ b/src/material/slider/_m2-slider.scss
@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
@@ -75,15 +74,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    slider-label-label-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    slider-label-label-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    slider-label-label-text-line-height:
-        inspection.get-theme-typography($theme, subtitle-2, line-height),
-    slider-label-label-text-tracking:
-        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
-    slider-label-label-text-weight:
-        inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    slider-label-label-text-font: map.get($system, label-medium-font),
+    slider-label-label-text-size: map.get($system, label-medium-size),
+    slider-label-label-text-line-height: map.get($system, label-medium-line-height),
+    slider-label-label-text-tracking: map.get($system, label-medium-tracking),
+    slider-label-label-text-weight: map.get($system, label-medium-weight),
   );
 }
 
diff --git a/src/material/snack-bar/_m2-snack-bar.scss b/src/material/snack-bar/_m2-snack-bar.scss
index c861d63eea9d..e109df5e4fe1 100644
--- a/src/material/snack-bar/_m2-snack-bar.scss
+++ b/src/material/snack-bar/_m2-snack-bar.scss
@@ -29,12 +29,12 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    snack-bar-supporting-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    snack-bar-supporting-text-line-height:
-        inspection.get-theme-typography($theme, body-2, line-height),
-    snack-bar-supporting-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    snack-bar-supporting-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    snack-bar-supporting-text-font: map.get($system, body-medium-font),
+    snack-bar-supporting-text-line-height: map.get($system, body-medium-line-height),
+    snack-bar-supporting-text-size: map.get($system, body-medium-size),
+    snack-bar-supporting-text-weight: map.get($system, body-medium-weight),
   );
 }
 
diff --git a/src/material/stepper/_m2-stepper.scss b/src/material/stepper/_m2-stepper.scss
index 145c9d63f9e5..9ddbe00ee47f 100644
--- a/src/material/stepper/_m2-stepper.scss
+++ b/src/material/stepper/_m2-stepper.scss
@@ -35,17 +35,15 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    stepper-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    stepper-header-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    stepper-header-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    stepper-header-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
-    stepper-header-error-state-label-text-size:
-        inspection.get-theme-typography($theme, body-1, font-size),
-    stepper-header-selected-state-label-text-size: inspection.get-theme-typography(
-        $theme, body-1, font-size),
-    stepper-header-selected-state-label-text-weight: inspection.get-theme-typography(
-        $theme, body-1, font-weight),
+    stepper-container-text-font: map.get($system, body-medium-font),
+    stepper-header-label-text-font: map.get($system, body-medium-font),
+    stepper-header-label-text-size: map.get($system, body-medium-size),
+    stepper-header-label-text-weight: map.get($system, body-medium-weight),
+    stepper-header-error-state-label-text-size: map.get($system, body-large-size),
+    stepper-header-selected-state-label-text-size: map.get($system, body-large-size),
+    stepper-header-selected-state-label-text-weight: map.get($system, body-large-weight),
   );
 }
 
diff --git a/src/material/table/_m2-table.scss b/src/material/table/_m2-table.scss
index 708928fc9f04..0d7934fe83c8 100644
--- a/src/material/table/_m2-table.scss
+++ b/src/material/table/_m2-table.scss
@@ -25,33 +25,26 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $cell-font-family: inspection.get-theme-typography($theme, body-2, font-family);
-  $cell-line-height: inspection.get-theme-typography($theme, body-2, line-height);
-  $cell-font-size: inspection.get-theme-typography($theme, body-2, font-size);
-  $cell-font-weight: inspection.get-theme-typography($theme, body-2, font-weight);
-  $cell-letter-spacing: inspection.get-theme-typography($theme, body-2, letter-spacing);
-
+  $system: m2-utils.get-system($theme);
   @return (
-    table-header-headline-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    table-header-headline-line-height:
-        inspection.get-theme-typography($theme, subtitle-2, line-height),
-    table-header-headline-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    table-header-headline-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
-    table-header-headline-tracking:
-        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
+    table-header-headline-font: map.get($system, label-medium-font),
+    table-header-headline-line-height: map.get($system, label-medium-line-height),
+    table-header-headline-size: map.get($system, label-medium-size),
+    table-header-headline-weight: map.get($system, label-medium-weight),
+    table-header-headline-tracking: map.get($system, label-medium-tracking),
 
     // Plain cells and footer cells have the same typography.
-    table-row-item-label-text-font: $cell-font-family,
-    table-row-item-label-text-line-height: $cell-line-height,
-    table-row-item-label-text-size: $cell-font-size,
-    table-row-item-label-text-weight: $cell-font-weight,
-    table-row-item-label-text-tracking: $cell-letter-spacing,
+    table-row-item-label-text-font: map.get($system, body-medium-font),
+    table-row-item-label-text-line-height: map.get($system, body-medium-line-height),
+    table-row-item-label-text-size: map.get($system, body-medium-size),
+    table-row-item-label-text-weight: map.get($system, body-medium-weight),
+    table-row-item-label-text-tracking: map.get($system, body-medium-tracking),
 
-    table-footer-supporting-text-font: $cell-font-family,
-    table-footer-supporting-text-line-height: $cell-line-height,
-    table-footer-supporting-text-size: $cell-font-size,
-    table-footer-supporting-text-weight: $cell-font-weight,
-    table-footer-supporting-text-tracking: $cell-letter-spacing,
+    table-footer-supporting-text-font: map.get($system, body-medium-font),
+    table-footer-supporting-text-line-height: map.get($system, body-medium-line-height),
+    table-footer-supporting-text-size: map.get($system, body-medium-size),
+    table-footer-supporting-text-weight: map.get($system, body-medium-weight),
+    table-footer-supporting-text-tracking: map.get($system, body-medium-tracking),
   );
 }
 
diff --git a/src/material/tabs/_m2-tabs.scss b/src/material/tabs/_m2-tabs.scss
index 85a5138ac194..b067d2b4928a 100644
--- a/src/material/tabs/_m2-tabs.scss
+++ b/src/material/tabs/_m2-tabs.scss
@@ -57,13 +57,14 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
     // Note: MDC has equivalents of these tokens, but they lead to much higher selector specificity.
-    tab-label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    tab-label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    tab-label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
-    tab-label-text-line-height: inspection.get-theme-typography($theme, button, line-height),
-    tab-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
+    tab-label-text-font: map.get($system, label-small-font),
+    tab-label-text-size: map.get($system, label-small-size),
+    tab-label-text-tracking: map.get($system, label-small-tracking),
+    tab-label-text-line-height: map.get($system, label-small-line-height),
+    tab-label-text-weight: map.get($system, label-small-weight),
   );
 }
 
diff --git a/src/material/toolbar/_m2-toolbar.scss b/src/material/toolbar/_m2-toolbar.scss
index fed39baf2441..269ab1c96ee0 100644
--- a/src/material/toolbar/_m2-toolbar.scss
+++ b/src/material/toolbar/_m2-toolbar.scss
@@ -20,14 +20,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    toolbar-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    toolbar-title-text-line-height:
-        inspection.get-theme-typography($theme, headline-6, line-height),
-    toolbar-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    toolbar-title-text-tracking:
-        inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    toolbar-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
+    toolbar-title-text-font: map.get($system, title-small-font),
+    toolbar-title-text-line-height: map.get($system, title-small-line-height),
+    toolbar-title-text-size: map.get($system, title-small-size),
+    toolbar-title-text-tracking: map.get($system, title-small-tracking),
+    toolbar-title-text-weight: map.get($system, title-small-weight),
   );
 }
 
diff --git a/src/material/tooltip/_m2-tooltip.scss b/src/material/tooltip/_m2-tooltip.scss
index 50bb3e37d83b..38ad2632908b 100644
--- a/src/material/tooltip/_m2-tooltip.scss
+++ b/src/material/tooltip/_m2-tooltip.scss
@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
@@ -27,12 +26,12 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    tooltip-supporting-text-font: inspection.get-theme-typography($theme, caption, font-family),
-    tooltip-supporting-text-size: inspection.get-theme-typography($theme, caption, font-size),
-    tooltip-supporting-text-weight: inspection.get-theme-typography($theme, caption, font-weight),
-    tooltip-supporting-text-tracking:
-        inspection.get-theme-typography($theme, caption, letter-spacing),
+    tooltip-supporting-text-font: map.get($system, body-small-font),
+    tooltip-supporting-text-size: map.get($system, body-small-size),
+    tooltip-supporting-text-weight: map.get($system, body-small-weight),
+    tooltip-supporting-text-tracking: map.get($system, body-small-tracking),
   );
 }
 
diff --git a/src/material/tree/_m2-tree.scss b/src/material/tree/_m2-tree.scss
index 1adb9a466e05..ddf81838115d 100644
--- a/src/material/tree/_m2-tree.scss
+++ b/src/material/tree/_m2-tree.scss
@@ -21,10 +21,11 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    tree-node-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    tree-node-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    tree-node-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
+    tree-node-text-font: map.get($system, body-medium-font),
+    tree-node-text-size: map.get($system, body-medium-size),
+    tree-node-text-weight: map.get($system, body-medium-weight),
 
     // TODO(crisbeto): provide tokens for line height and letter spacing to match other components.
   );