diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss
index 2c70ea33b353..f1e1bc522e34 100644
--- a/src/material/core/theming/_definition.scss
+++ b/src/material/core/theming/_definition.scss
@@ -55,6 +55,7 @@ $theme-version: 1;
         neutral-variant: map.get($primary, neutral-variant),
         error: map.get($primary, error),
       ),
+      color-system-variables-prefix: $system-variables-prefix,
       color-tokens: m3-tokens.generate-color-tokens(
           $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
     )
@@ -88,6 +89,7 @@ $theme-version: 1;
         medium: $medium,
         regular: $regular,
       ),
+      typography-system-variables-prefix: $system-variables-prefix,
       typography-tokens: m3-tokens.generate-typography-tokens(
           $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
     )
diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts
index 6eb2f5b96af5..3a14d5805d20 100644
--- a/src/material/core/theming/tests/theming-definition-api.spec.ts
+++ b/src/material/core/theming/tests/theming-definition-api.spec.ts
@@ -63,6 +63,8 @@ describe('theming definition api', () => {
           --color-tokens: #{list.length(map.get($data, color-tokens)) > 0};
           --typography-tokens: #{list.length(map.get($data, typography-tokens)) > 0};
           --density-tokens: #{list.length(map.get($data, density-tokens)) > 0};
+          --color-system-variables-prefix: #{map.get($data, color-system-variables-prefix)};
+          --typography-system-variables-prefix: #{map.get($data, typography-system-variables-prefix)};
         }
       `);
       const vars = getRootVars(css);
@@ -70,8 +72,10 @@ describe('theming definition api', () => {
         'theme-version',
         'theme-type',
         'palettes',
+        'color-system-variables-prefix',
         'color-tokens',
         'font-definition',
+        'typography-system-variables-prefix',
         'typography-tokens',
         'density-scale',
         'density-tokens',
@@ -92,6 +96,8 @@ describe('theming definition api', () => {
       expect(vars['color-tokens']).toBe('true');
       expect(vars['typography-tokens']).toBe('true');
       expect(vars['density-tokens']).toBe('true');
+      expect(vars['typography-system-variables-prefix']).toBe('sys');
+      expect(vars['color-system-variables-prefix']).toBe('sys');
     });
 
     it('should customize colors', () => {
diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss
index a4b682307619..605d6322cae0 100644
--- a/src/material/core/tokens/_m3-tokens.scss
+++ b/src/material/core/tokens/_m3-tokens.scss
@@ -135,7 +135,8 @@ $_cached-token-slots: null;
   );
 
   $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $system-variables-prefix: map.get($theme, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    color-system-variables-prefix) or sys;
   $primary: map.merge(map.get($palettes, primary), $base-palettes);
   $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
   $error: map.get($palettes, error);
@@ -160,7 +161,8 @@ $_cached-token-slots: null;
   $bold: map.get($font-definition, bold);
   $medium: map.get($font-definition, medium);
   $regular: map.get($font-definition, regular);
-  $system-variables-prefix: map.get($theme, system-variables-prefix) or sys;
+  $system-variables-prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    typography-system-variables-prefix) or sys;
   $ref: (
     md-ref-typeface: _generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
   );