diff --git a/.stylelintrc.json b/.stylelintrc.json
index 9436ef95485a..ea005cf21f1e 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -81,7 +81,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin"],
+    "unit-allowed-list": ["px", "%", "deg", "s", "ms", "em", "rem", "vh", "vw", "vmin", "fr"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
index f656274f1052..c2948f0cdb0d 100644
--- a/src/dev-app/BUILD.bazel
+++ b/src/dev-app/BUILD.bazel
@@ -71,6 +71,7 @@ ng_module(
         "//src/dev-app/table",
         "//src/dev-app/table-scroll-container",
         "//src/dev-app/tabs",
+        "//src/dev-app/theme",
         "//src/dev-app/toolbar",
         "//src/dev-app/tooltip",
         "//src/dev-app/tree",
diff --git a/src/dev-app/dev-app/dev-app-layout.html b/src/dev-app/dev-app/dev-app-layout.html
index 41f7d99cf947..1fb910623869 100644
--- a/src/dev-app/dev-app/dev-app-layout.html
+++ b/src/dev-app/dev-app/dev-app-layout.html
@@ -97,6 +97,17 @@ <h1>Angular Material Demos</h1>
               <mat-icon>dark_mode</mat-icon>
             }
           </button>
+          <button
+              mat-icon-button
+              (click)="toggleSystemTheme()"
+              [matTooltip]="state.systemTheme ? 'Switch to standard theme' : 'Switch to system theme'"
+          >
+            @if (state.systemTheme) {
+              <mat-icon>public_off</mat-icon>
+            } @else {
+              <mat-icon>public</mat-icon>
+            }
+          </button>
           <button
             mat-icon-button
             (click)="toggleRippleDisabled()"
diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
index 3c2168690c86..533dd6309c03 100644
--- a/src/dev-app/dev-app/dev-app-layout.ts
+++ b/src/dev-app/dev-app/dev-app-layout.ts
@@ -110,6 +110,7 @@ export class DevAppLayout {
     {name: 'Table Scroll Container', route: '/table-scroll-container'},
     {name: 'Table', route: '/table'},
     {name: 'Tabs', route: '/tabs'},
+    {name: 'Theme', route: '/theme'},
     {name: 'Toolbar', route: '/toolbar'},
     {name: 'Tooltip', route: '/tooltip'},
     {name: 'Tree', route: '/tree'},
@@ -127,6 +128,7 @@ export class DevAppLayout {
 
   constructor() {
     this.toggleTheme(this.state.darkTheme);
+    this.toggleSystemTheme(this.state.systemTheme);
     this.toggleStrongFocus(this.state.strongFocusEnabled);
     this.toggleDensity(Math.max(this._densityScales.indexOf(this.state.density), 0));
     this.toggleRippleDisabled(this.state.rippleDisabled);
@@ -141,6 +143,12 @@ export class DevAppLayout {
     setAppState(this.state);
   }
 
+  toggleSystemTheme(value = !this.state.systemTheme) {
+    this.state.systemTheme = value;
+    this._document.body.classList.toggle('demo-experimental-theme', value);
+    setAppState(this.state);
+  }
+
   toggleFullscreen() {
     this._element.nativeElement.querySelector('.demo-content')?.requestFullscreen();
   }
diff --git a/src/dev-app/dev-app/dev-app-state.ts b/src/dev-app/dev-app/dev-app-state.ts
index 58eaf0278847..abf43635c502 100644
--- a/src/dev-app/dev-app/dev-app-state.ts
+++ b/src/dev-app/dev-app/dev-app-state.ts
@@ -16,6 +16,7 @@ export interface DevAppState {
   animations: boolean;
   zoneless: boolean;
   darkTheme: boolean;
+  systemTheme: boolean;
   rippleDisabled: boolean;
   strongFocusEnabled: boolean;
   m3Enabled: boolean;
@@ -42,6 +43,7 @@ export function getAppState(): DevAppState {
       animations: true,
       zoneless: false,
       darkTheme: false,
+      systemTheme: false,
       rippleDisabled: false,
       strongFocusEnabled: false,
       m3Enabled: false,
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
index 71d5acdd3301..a2ad19f29613 100644
--- a/src/dev-app/routes.ts
+++ b/src/dev-app/routes.ts
@@ -221,6 +221,10 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'tabs',
     loadComponent: () => import('./tabs/tabs-demo').then(m => m.TabsDemo),
   },
+  {
+    path: 'theme',
+    loadComponent: () => import('./theme/theme-demo').then(m => m.ThemeDemo),
+  },
   {
     path: 'toolbar',
     loadComponent: () => import('./toolbar/toolbar-demo').then(m => m.ToolbarDemo),
diff --git a/src/dev-app/theme-m3.scss b/src/dev-app/theme-m3.scss
index 97132d6dc9c4..666639fe21f6 100644
--- a/src/dev-app/theme-m3.scss
+++ b/src/dev-app/theme-m3.scss
@@ -5,13 +5,16 @@
 // Disable legacy API compatibility, since dev-app is fully migrated to theme inspection API.
 mat.$theme-legacy-inspection-api-compatibility: false;
 
+$primary: mat.$azure-palette;
+$tertiary: mat.$blue-palette;
+
 // Create a theme with the specified color type and density.
 @function create-theme($type: light, $density: 0) {
   @return mat.define-theme((
     color: (
       theme-type: $type,
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
+      primary: $primary,
+      tertiary: $tertiary,
       use-system-variables: true,
     ),
     typography: (use-system-variables: true),
@@ -34,12 +37,26 @@ $dark-theme: create-theme($type: dark);
 
 // Include the default theme styles.
 html {
-  @include mat.all-component-themes($light-theme);
-  @include mat.system-level-colors($light-theme);
-  @include mat.system-level-typography($light-theme);
-  // TODO(mmalerba): Support M3 for experimental components.
-  // @include matx.column-resize-theme($light-theme);
-  // @include matx.popover-edit-theme($light-theme);
+  body:not(.demo-experimental-theme) {
+    @include mat.all-component-themes($light-theme);
+    @include mat.system-level-colors($light-theme);
+    @include mat.system-level-typography($light-theme);
+    // TODO(mmalerba): Support M3 for experimental components.
+    // @include matx.column-resize-theme($light-theme);
+    // @include matx.popover-edit-theme($light-theme);
+  }
+
+  body.demo-experimental-theme {
+    @include mat.private-experimental-theme((
+      color: (
+        theme-type: light,
+        primary: $primary,
+        tertiary: $tertiary,
+      ),
+      typography: Roboto,
+      density: 0,
+    ));
+  }
 }
 
 @include mat.typography-hierarchy($light-theme);
@@ -55,13 +72,25 @@ html {
 // CSS class whatever you want. In this example, any component inside of an element with
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
-.demo-unicorn-dark-theme {
-  // Include the dark theme color styles.
-  @include mat.all-component-colors($dark-theme);
-  @include mat.system-level-colors($dark-theme);
-  // TODO(mmalerba): Support M3 for experimental components.
-  // @include matx.column-resize-color($dark-theme);
-  // @include matx.popover-edit-color($dark-theme);
+body.demo-unicorn-dark-theme {
+  &:not(.demo-experimental-theme) {
+    // Include the dark theme color styles.
+    @include mat.all-component-colors($dark-theme);
+    @include mat.system-level-colors($dark-theme);
+    // TODO(mmalerba): Support M3 for experimental components.
+    // @include matx.column-resize-color($dark-theme);
+    // @include matx.popover-edit-color($dark-theme);
+  }
+
+  &.demo-experimental-theme {
+    @include mat.private-experimental-theme((
+      color: (
+        theme-type: dark,
+        primary: $primary,
+        tertiary: $tertiary,
+      ),
+    ));
+  }
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
@@ -75,8 +104,14 @@ html {
 $density-scales: (-1, -2, -3, -4, minimum, maximum);
 @each $scale in $density-scales {
   .demo-density-#{$scale} {
-    $density-theme: create-theme($density: $scale);
-    @include mat.all-component-densities($density-theme);
+    body:not(.demo-experimental-theme) & {
+      $density-theme: create-theme($density: $scale);
+      @include mat.all-component-densities($density-theme);
+    }
+
+    body.demo-experimental-theme & {
+      @include mat.private-experimental-theme((density: $scale));
+    }
   }
 }
 
diff --git a/src/dev-app/theme/BUILD.bazel b/src/dev-app/theme/BUILD.bazel
new file mode 100644
index 000000000000..77966b6cc8c9
--- /dev/null
+++ b/src/dev-app/theme/BUILD.bazel
@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "theme",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "theme-demo.html",
+        ":theme_demo_scss",
+    ],
+    deps = [
+        "//src/dev-app/dev-app",
+        "//src/material/card",
+        "//src/material/expansion",
+        "//src/material/icon",
+        "@npm//@angular/forms",
+    ],
+)
+
+sass_binary(
+    name = "theme_demo_scss",
+    src = "theme-demo.scss",
+    deps = [
+        "//src/material:sass_lib",
+    ],
+)
diff --git a/src/dev-app/theme/theme-demo.html b/src/dev-app/theme/theme-demo.html
new file mode 100644
index 000000000000..008ca1f8b68a
--- /dev/null
+++ b/src/dev-app/theme/theme-demo.html
@@ -0,0 +1,231 @@
+<p class="demo-warn">
+  This page uses an experimental prototype version of a
+  <span class="demo-surface-variable">material.theme</span> API.
+  To enable it, click the <mat-icon>public</mat-icon> icon in the header.
+</p>
+
+<p>
+  Angular Material components depend on CSS variables defined by the
+  <span class="demo-surface-variable">material.theme</span>
+  Sass mixin. This page provides guidance and documentation for using these variables to
+  customize components.
+</p>
+
+<h1>Colors</h1>
+
+<p>
+  Material Design uses color to create accessible, personal color schemes
+  that communicate your product's hierarchy, state, and brand. See Material
+  Design's <a href="https://m3.material.io/styles/color/system/overview">Color System</a>
+  page to learn more about its use and purpose.
+</p>
+<p>
+  The following colors are the most often used in Angular Material components. Use these
+  colors and follow their uses to add theme colors to your application's custom components.
+</p>
+<p>
+  Note that variables starting with "mat-app-on-*" are designed to be used for text or icons
+  placed on top of its paired parent color. For example, <span class="demo-surface-variable">--mat-app-on-primary</span>
+  is used for text and icons in elements filled with the <span class="demo-surface-variable">--mat-app-primary</span> color.
+</p>
+
+<div class="demo-group">
+  <div class="demo-color-container">
+    <div class="demo-heading"
+         [style.background-color]="'var(--mat-app-primary)'"
+         [style.color]="'var(--mat-app-on-primary)'">
+      <div class="demo-name"> Primary</div>
+      <div class="demo-variable demo-code"> --mat-app-primary</div>
+    </div>
+    <div class="demo-description">
+      <p>
+        The most common color used by Angular Material components to
+        participate in the application theme.
+      </p>
+      <p>
+        Examples include the background color
+        of filled buttons, the icon color of selected radio buttons, and the
+        outline color of form fields.
+      </p>
+      <p>
+        Use the color <span class="demo-surface-variable">--mat-app-on-primary</span> for
+        icons, text, and other visual elements placed on a primary background. This
+        color is calculated to be optimal for accessibility and legibility.
+      </p>
+    </div>
+  </div>
+
+  <div class="demo-color-container">
+    <div class="demo-heading"
+         [style.background-color]="'var(--mat-app-surface)'"
+         [style.color]="'var(--mat-app-on-surface)'">
+      <div class="demo-name"> Surface</div>
+      <div class="demo-variable code"> --mat-app-surface</div>
+    </div>
+    <div class="demo-description">
+      <p>
+        A low-emphasis background color that provides a clear contrast for
+        both light and dark themes and their varied theme colors.
+      </p>
+      <p>
+        Examples include the background color of the application and most
+        components such as the dialog, card, table, and more.
+      </p>
+      <p>
+        Use the color <span class="demo-surface-variable">--mat-app-on-surface</span> for
+        icons, text, and other visual elements placed on a surface background. This
+        color is calculated to be optimal for accessibility and legibility.
+      </p>
+    </div>
+  </div>
+
+  <div class="demo-color-container">
+    <div class="demo-heading"
+         [style.background-color]="'var(--mat-app-error)'"
+         [style.color]="'var(--mat-app-on-error)'">
+      <div class="demo-name"> Error</div>
+      <div class="demo-variable demo-code"> --mat-app-error</div>
+    </div>
+    <div class="demo-description">
+      <p>
+        High-contrast color meant to alert the user to attract immediate attention.
+      </p>
+      <p>
+        Examples include the background color of the badge and the text color of invalid
+        form fields inputs.
+      </p>
+      <p>
+        Use the color <span class="demo-surface-variable">--mat-app-on-error</span> for
+        icons, text, and other visual elements placed on an error background. This
+        color is calculated to be optimal for accessibility and legibility.
+      </p>
+    </div>
+  </div>
+
+  <div class="demo-color-container">
+    <div class="demo-heading"
+         [style.background-color]="'var(--mat-app-outline)'"
+         [style.color]="'var(--mat-app-surface)'">
+      <div class="demo-name"> Outline</div>
+      <div class="demo-variable demo-code"> --mat-app-outline </div>
+    </div>
+    <div class="demo-description">
+      <p>
+        Used for borders and dividers to help provide visual separation between
+        and around elements.
+      </p>
+      <p>
+        Examples include the color of the divider and border color of an outlined
+        form field.
+      </p>
+      <p>
+        Use the color <span class="demo-surface-variable">--mat-app-outline-variant</span> for a less
+        prominent outline.
+      </p>
+    </div>
+  </div>
+</div>
+
+<mat-expansion-panel>
+  <mat-expansion-panel-header>Other available colors</mat-expansion-panel-header>
+
+  <p>
+    These colors are less commonly used in Angular Material components but
+    are available for adding color variety and creating additional emphasis
+    to components.
+  </p>
+  <p>
+    Colors may be paired with a <span class="demo-surface-variable">--mat-app-on-</span> variable
+    that should be used for text and icons placed within a filled container.
+  </p>
+
+  <h2>Alternative Theme Colors</h2>
+
+  <theme-demo-colors [colors]="alternativeThemeColors"></theme-demo-colors>
+
+  <h2>Surface Colors</h2>
+
+  <p>
+    The following colors should be used for backgrounds and large,
+    low-emphasis areas of the screen.
+  </p>
+
+  <p>
+    Containers filled with a surface color should apply the
+    <span class="demo-surface-variable">--mat-app-on-surface</span> color to text
+    and icons placed within.
+  </p>
+
+  <theme-demo-colors [colors]="surfaceColors"></theme-demo-colors>
+
+  <h2>Fixed Colors</h2>
+
+  <p>
+    These colors are the same for both light and dark themes. They are unused
+    by any Angular Material components.
+  </p>
+
+  <theme-demo-colors [colors]="fixedColors"></theme-demo-colors>
+
+</mat-expansion-panel>
+
+<h1>Typography</h1>
+
+<p>
+  There are five categories of font types defined by Material Design: body, display, headline,
+  label, and title. Each category has three sizes: small, medium, and large.
+</p>
+<p>
+  Learn more about how these categories and their sizes should be used in your application by
+  visiting Material Design's
+  <a href="https://m3.material.io/styles/typography/overview">Typography</a> documentation.
+</p>
+
+
+@for (category of ['body', 'display', 'headline', 'label', 'title']; track $index) {
+  <div class="demo-typography-group">
+    <div class="demo-typography-title">{{category}}</div>
+    @for (size of ['small', 'medium', 'large']; track $index) {
+      <div class="demo-typography-example">
+        <div class="demo-typography-variable">
+          <div class="demo-surface-variable">--mat-app-{{category}}-{{size}}</div>
+        </div>
+        <div class="demo-typography-text" [style.font]="'var(--mat-app-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
+      </div>
+    }
+  </div>
+}
+
+<p>
+  Each variable can be applied to the `font` CSS style. Additionally, the parts of the variable definition
+  can be accessed individually by appending the keywords "font", "line-height", "size", "tracking", and "weight".
+</p>
+<p>
+  For example, the values for medium body text may be defined as follows:
+</p>
+<pre class="demo-code-block">
+--mat-app-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
+--mat-app-body-medium-font: Roboto, sans-serif;
+--mat-app-body-medium-line-height: 1.25rem;
+--mat-app-body-medium-size: 0.875rem;
+--mat-app-body-medium-tracking: 0.016rem;
+--mat-app-body-medium-weight: 400;
+</pre>
+
+<h1>Elevation</h1>
+
+<p>
+  Material Design provides six levels of elevation that can be used to provide
+  a sense of depth and organization to an application's UI. Learn more at Material Design's
+  <a href="https://m3.material.io/styles/elevation/overview">Elevation</a> guide.
+</p>
+
+<p>
+  These levels are defined as CSS box-shadow values that can be styled to an element.
+</p>
+
+@for (level of [0, 1, 2, 3, 4, 5]; track $index) {
+<div class="demo-elevation code" [style.box-shadow]="'var(--mat-app-level' + level + ')'">
+box-shadow: var(--mat-app-level{{level}})
+</div>
+}
diff --git a/src/dev-app/theme/theme-demo.scss b/src/dev-app/theme/theme-demo.scss
new file mode 100644
index 000000000000..7d94e2bde30e
--- /dev/null
+++ b/src/dev-app/theme/theme-demo.scss
@@ -0,0 +1,175 @@
+@use '@angular/material';
+
+:host {
+  display: block;
+  max-width: 1000px;
+}
+
+h1 {
+  font: var(--mat-app-title-large);
+  font-size: 28px;
+  padding-top: 32px;
+}
+
+h2 {
+  font: var(--mat-app-title-large);
+}
+
+a {
+  color: var(--mat-app-primary);
+}
+
+.demo-warn {
+  background: var(--mat-app-error-container);
+  color: var(--mat-app-on-error-container);
+  border: 1px solid var(--mat-app-outline-variant);
+  border-radius: var(--mat-app-corner-extra-small);
+  padding: 8px;
+}
+
+.demo-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 24px;
+  margin-top: 24px;
+}
+
+@media (max-width: 1000px) {
+  .demo-group {  grid-template-columns: auto;}
+}
+
+.demo-color-container {
+  border-radius: var(--mat-app-corner-small);
+  display: inline-block;
+  font: var(--mat-app-body-medium);
+  vertical-align: top;
+}
+
+.demo-heading {
+  color: var(--mat-app-on-primary);
+  background: var(--mat-app-primary);
+  border: 1px solid var(--mat-app-outline);
+  border-top-right-radius: var(--mat-app-corner-small);
+  border-top-left-radius: var(--mat-app-corner-small);
+  border-bottom: none;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-name {
+  font: var(--mat-app-title-medium);
+}
+
+.demo-variable {
+  font: var(--mat-app-title-small);
+  font-family: monospace;
+  text-align: right;
+}
+
+.demo-description {
+  border: 1px solid var(--mat-app-outline);
+  border-bottom-right-radius: var(--mat-app-corner-small);
+  border-bottom-left-radius: var(--mat-app-corner-small);
+  padding: 0 16px;
+}
+
+.demo-code {
+  font-family: monospace;
+}
+
+.demo-surface-variable {
+  display: inline-block;
+  font-family: monospace;
+  background: var(--mat-app-surface-dim);
+  padding: 2px 6px;
+  margin: 0 2px;
+  border-radius: 4px;
+}
+
+mat-expansion-panel {
+  margin-top: 24px;
+  overflow: visible;
+  @include material.expansion-overrides((
+    'container-text-font': var(--mat-app-body-medium-font),
+    'container-text-size': var(--mat-app-body-medium-size),
+    'container-text-weight': var(--mat-app-body-medium-weight),
+    'container-text-line-height': var(--mat-app-body-medium-line-height),
+    'container-text-tracking': var(--mat-app-body-medium-tracking),
+  ));
+}
+
+.demo-compact-color-container {
+  border-radius: var(--mat-app-corner-small);
+  border: 1px solid var(--mat-app-outline);
+  overflow: hidden; // Hide child heading background color
+  margin-top: 24px;
+
+  .demo-heading {
+    border: none;
+    border-radius: 0;
+
+    &:not(:nth-child(1)) {
+      border-top: 1px solid var(--mat-app-outline);
+    }
+  }
+
+  .demo-variables {
+    text-align: end;
+  }
+}
+
+.demo-typography-group {
+  border: 1px solid var(--mat-app-outline);
+  border-radius: var(--mat-app-corner-small);
+  margin-top: 40px;
+  overflow: hidden;
+}
+
+.demo-typography-title {
+  text-transform: capitalize;
+  font: var(--mat-app-title-medium);
+  padding: 16px;
+  border-bottom: 1px solid var(--mat-app-outline);
+  background: var(--mat-app-primary-container);
+  color: var(--mat-app-on-primary-container);
+}
+
+.demo-typography-variable {
+  min-width: 240px;
+}
+
+.demo-typography-example {
+  padding: 16px;
+  display: flex;
+  align-items: baseline;
+  border-top: 1px solid var(--mat-app-outline-variant);
+
+  &:nth-child(1) {
+    border: none;
+  }
+  .demo-surface-variable {
+    margin-right: 16px;
+  }
+}
+
+.demo-typography-text {
+  display: inline-block;
+}
+
+.demo-elevation {
+  height: 40px;
+  width: 300px;
+  margin: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.demo-code-block {
+  background: var(--mat-app-surface-container-low);
+  padding: 16px;
+  border-radius: var(--mat-app-corner-small);
+  border: 1px solid var(--mat-app-outline);
+}
diff --git a/src/dev-app/theme/theme-demo.ts b/src/dev-app/theme/theme-demo.ts
new file mode 100644
index 000000000000..5c5139023397
--- /dev/null
+++ b/src/dev-app/theme/theme-demo.ts
@@ -0,0 +1,170 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {ChangeDetectionStrategy, Component, input} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatIconModule} from '@angular/material/icon';
+import {getAppState} from '../dev-app/dev-app-state';
+
+interface Color {
+  name: string;
+  background: string;
+  text: string;
+  hideText?: boolean;
+}
+
+@Component({
+  selector: 'theme-demo-colors',
+  template: `
+    <div class="demo-compact-color-container">
+      @for (color of colors(); track $index) {
+      <div class="demo-heading"
+           [style.background-color]="'var(' + color.background + ')'"
+           [style.color]="'var(' + color.text + ')'">
+        <div class="demo-name"> {{color.name}} </div>
+        <div class="demo-variables">
+          <div class="demo-variable demo-code">{{color.background}}</div>
+          @if (!color.hideText) {
+      <div class="demo-variable demo-code">{{color.text}}</div>
+      }
+      </div>
+    </div>
+      }
+    </div>
+  `,
+  styleUrl: 'theme-demo.css',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThemeDemoColors {
+  colors = input<Color[]>();
+}
+
+@Component({
+  selector: 'theme-demo',
+  templateUrl: 'theme-demo.html',
+  styleUrl: 'theme-demo.css',
+  standalone: true,
+  imports: [MatCardModule, MatExpansionModule, MatIconModule, ThemeDemoColors],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ThemeDemo {
+  state = getAppState();
+
+  alternativeThemeColors: Color[] = [
+    {
+      name: 'Primary Container',
+      background: '--mat-app-primary-container',
+      text: '--mat-app-on-primary-container',
+    },
+    {
+      name: 'Secondary',
+      background: '--mat-app-secondary',
+      text: '--mat-app-on-secondary',
+    },
+    {
+      name: 'Secondary Container',
+      background: '--mat-app-secondary-container',
+      text: '--mat-app-on-secondary-container',
+    },
+    {
+      name: 'Tertiary',
+      background: '--mat-app-tertiary',
+      text: '--mat-app-on-tertiary',
+    },
+    {
+      name: 'Tertiary Container',
+      background: '--mat-app-tertiary-container',
+      text: '--mat-app-on-tertiary-container',
+    },
+    {
+      name: 'Error Container',
+      background: '--mat-app-error-container',
+      text: '--mat-app-on-error-container',
+    },
+  ];
+
+  surfaceColors: Color[] = [
+    {
+      name: 'Surface Dim',
+      background: '--mat-app-surface-dim',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Bright',
+      background: '--mat-app-surface-bright',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Lowest',
+      background: '--mat-app-surface-container-lowest',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Low',
+      background: '--mat-app-surface-container-low',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container',
+      background: '--mat-app-surface-container',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container High',
+      background: '--mat-app-surface-container-high',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Highest',
+      background: '--mat-app-surface-container-highest',
+      text: '--mat-app-on-surface',
+      hideText: true,
+    },
+  ];
+
+  fixedColors: Color[] = [
+    {
+      name: 'Primary Fixed',
+      background: '--mat-app-primary-fixed',
+      text: '--mat-app-on-primary-fixed',
+    },
+    {
+      name: 'Primary Fixed Dim',
+      background: '--mat-app-primary-fixed-dim',
+      text: '--mat-app-on-primary-fixed',
+    },
+    {
+      name: 'Secondary Fixed',
+      background: '--mat-app-secondary-fixed',
+      text: '--mat-app-on-secondary-fixed',
+    },
+    {
+      name: 'Secondary Fixed Dim',
+      background: '--mat-app-secondary-fixed-dim',
+      text: '--mat-app-on-secondary-fixed',
+    },
+    {
+      name: 'Tertiary Fixed',
+      background: '--mat-app-tertiary-fixed',
+      text: '--mat-app-on-tertiary-fixed',
+    },
+    {
+      name: 'Tertiary Fixed Dim',
+      background: '--mat-app-tertiary-fixed-dim',
+      text: '--mat-app-on-tertiary-fixed',
+    },
+  ];
+}
diff --git a/src/material/_index.scss b/src/material/_index.scss
index a9c8a9ea0d48..176ab0052d47 100644
--- a/src/material/_index.scss
+++ b/src/material/_index.scss
@@ -21,6 +21,7 @@
 @forward './core/tokens/m3-system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state;
+@forward './core/tokens/m3-system' as private-experimental-* show private-experimental-theme;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;