diff --git a/src/app/pages/component-viewer/component-api.html b/src/app/pages/component-viewer/component-api.html
index dc6c1ba4..32263d1e 100644
--- a/src/app/pages/component-viewer/component-api.html
+++ b/src/app/pages/component-viewer/component-api.html
@@ -9,14 +9,14 @@
   same container so that they display one after another.
   -->
   <div class="docs-component-api">
-    <doc-viewer [documentUrl]="getApiDocumentUrl(docItem)"
+    <doc-viewer [document]="getApiDocumentUrl(docItem)"
       class="docs-component-view-text-content"
       (contentRendered)="updateTableOfContents(docItem.name, $event)">
     </doc-viewer>
 
     @for (additionalApiDoc of docItem.additionalApiDocs; track additionalApiDoc) {
       <doc-viewer
-        documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
+        document="/docs-content/api-docs/{{additionalApiDoc.path}}"
         class="docs-component-view-text-content"
         (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event, $index + 1)"/>
     }
diff --git a/src/app/pages/component-viewer/component-overview.html b/src/app/pages/component-viewer/component-overview.html
index a962a3a6..aa152f39 100644
--- a/src/app/pages/component-viewer/component-overview.html
+++ b/src/app/pages/component-viewer/component-overview.html
@@ -2,7 +2,7 @@
   <h2 class="cdk-visually-hidden" tabindex="-1">
     Overview for {{docItem.id}}
   </h2>
-  <doc-viewer [documentUrl]="getOverviewDocumentUrl(docItem)"
+  <doc-viewer [document]="getOverviewDocumentUrl(docItem)"
       class="docs-component-view-text-content docs-component-overview"
       (contentRendered)="updateTableOfContents('Overview Content', $event)">
   </doc-viewer>
diff --git a/src/app/pages/guide-viewer/guide-viewer.html b/src/app/pages/guide-viewer/guide-viewer.html
index 2e504ead..cb827c69 100644
--- a/src/app/pages/guide-viewer/guide-viewer.html
+++ b/src/app/pages/guide-viewer/guide-viewer.html
@@ -2,7 +2,7 @@
   <div class="docs-guide-toc-and-content">
     <doc-viewer class="docs-guide-content"
                 (contentRendered)="toc.addHeaders('Guide Content', $event); toc.updateScrollPosition()"
-                [documentUrl]="guide?.document"
+                [document]="guide?.document"
                 focusOnNavigation
                 id="guide-content"
                 aria-label="Guide content"></doc-viewer>
diff --git a/src/app/pages/system-variables/index.ts b/src/app/pages/system-variables/index.ts
new file mode 100644
index 00000000..3a226db5
--- /dev/null
+++ b/src/app/pages/system-variables/index.ts
@@ -0,0 +1 @@
+export * from './system-variables';
diff --git a/src/app/pages/system-variables/system-variables.html b/src/app/pages/system-variables/system-variables.html
new file mode 100644
index 00000000..a3174523
--- /dev/null
+++ b/src/app/pages/system-variables/system-variables.html
@@ -0,0 +1,242 @@
+<p>
+  Angular Material components depend on system variables defined as CSS variables through 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>
+
+<h2 id="colors">Colors</h2>
+
+<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>
+
+<div class="demo-group">
+  <div class="demo-color-container">
+    <div class="demo-heading"
+         style="background-color: var(--mat-sys-primary);
+                color: var(--mat-sys-on-primary)">
+      <div class="demo-name">Primary</div>
+      <div class="demo-variable demo-code">--mat-sys-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-sys-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-sys-surface);
+                color: var(--mat-sys-on-surface)">
+      <div class="demo-name">Surface</div>
+      <div class="demo-variable code">--mat-sys-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-sys-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-sys-error);
+                color: var(--mat-sys-on-error)">
+      <div class="demo-name">Error</div>
+      <div class="demo-variable demo-code">--mat-sys-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-sys-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-sys-outline);
+                color: var(--mat-sys-surface)">
+      <div class="demo-name">Outline</div>
+      <div class="demo-variable demo-code">--mat-sys-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-sys-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-sys-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-sys-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>
+
+<h2 id="typography">Typography</h2>
+
+<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-sys-{{category}}-{{size}}</div>
+        </div>
+        <div class="demo-typography-text" [style.font]="'var(--mat-sys-' + category + '-' + size + ')'">Lorem ipsum dolor</div>
+      </div>
+    }
+  </div>
+}
+
+<p>
+  Each system 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-sys-body-medium: 400 0.875rem / 1.25rem Roboto, sans-serif;
+--mat-sys-body-medium-font: Roboto, sans-serif;
+--mat-sys-body-medium-line-height: 1.25rem;
+--mat-sys-body-medium-size: 0.875rem;
+--mat-sys-body-medium-tracking: 0.016rem;
+--mat-sys-body-medium-weight: 400;
+</pre>
+
+<h2 id="elevation">Elevation</h2>
+
+<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-sys-level' + level + ')'">
+    box-shadow: var(--mat-sys-level{{level}})
+  </div>
+}
+
+<h2 id="overrides">Overrides</h2>
+
+<p>
+  The <span class="demo-surface-variable">mat.theme-overrides</span> mixin
+  can be included to emit different definitions for the system variables and
+  override the definitions emitted from <span class="demo-surface-variable">mat.theme</span>.
+</p>
+
+<div class="demo-overrides">
+  This example container has several system variables overridden by including the
+  following Sass code:
+
+  <pre>
+  &#64;include mat.theme-overrides((
+    primary: #ebdcff,
+    on-primary: #230f46,
+    body-medium: 500 1.15rem/1.3rem Arial,
+    corner-large: 32px,
+    level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
+  ));</pre>
+</div>
diff --git a/src/app/pages/system-variables/system-variables.scss b/src/app/pages/system-variables/system-variables.scss
new file mode 100644
index 00000000..77a04674
--- /dev/null
+++ b/src/app/pages/system-variables/system-variables.scss
@@ -0,0 +1,196 @@
+@use '@angular/material' as mat;
+
+:host {
+  display: block;
+  max-width: 1000px;
+}
+
+h1 {
+  font: var(--mat-sys-title-large);
+  font-size: 28px;
+  padding-top: 32px;
+}
+
+h2 {
+  font: var(--mat-sys-title-large);
+}
+
+a {
+  color: var(--mat-sys-primary);
+}
+
+.demo-warn {
+  background: var(--mat-sys-error-container);
+  color: var(--mat-sys-on-error-container);
+  border: 1px solid var(--mat-sys-outline-variant);
+  border-radius: var(--mat-sys-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-sys-corner-small);
+  display: inline-block;
+  font: var(--mat-sys-body-medium);
+  vertical-align: top;
+}
+
+.demo-heading {
+  color: var(--mat-sys-on-primary);
+  background: var(--mat-sys-primary);
+  border: 1px solid var(--mat-sys-outline);
+  border-top-right-radius: var(--mat-sys-corner-small);
+  border-top-left-radius: var(--mat-sys-corner-small);
+  border-bottom: none;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.demo-name {
+  font: var(--mat-sys-title-medium);
+}
+
+.demo-variable {
+  font: var(--mat-sys-title-small);
+  font-family: monospace;
+  text-align: right;
+}
+
+.demo-description {
+  border: 1px solid var(--mat-sys-outline);
+  border-bottom-right-radius: var(--mat-sys-corner-small);
+  border-bottom-left-radius: var(--mat-sys-corner-small);
+  padding: 0 16px;
+}
+
+.demo-code {
+  font-family: monospace;
+}
+
+.demo-surface-variable {
+  display: inline-block;
+  font-family: monospace;
+  background: var(--mat-sys-primary-container);
+  color: var(--mat-sys-on-primary-container);
+  padding: 2px 6px;
+  margin: 0 2px;
+  border-radius: 4px;
+}
+
+mat-expansion-panel {
+  margin-top: 24px;
+  overflow: visible;
+  @include mat.expansion-overrides((
+    'container-text-font': var(--mat-sys-body-medium-font),
+    'container-text-size': var(--mat-sys-body-medium-size),
+    'container-text-weight': var(--mat-sys-body-medium-weight),
+    'container-text-line-height': var(--mat-sys-body-medium-line-height),
+    'container-text-tracking': var(--mat-sys-body-medium-tracking),
+  ));
+}
+
+.demo-compact-color-container {
+  border-radius: var(--mat-sys-corner-small);
+  border: 1px solid var(--mat-sys-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-sys-outline);
+    }
+  }
+
+  .demo-variables {
+    text-align: end;
+  }
+}
+
+.demo-typography-group {
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-small);
+  margin-top: 40px;
+  overflow: hidden;
+}
+
+.demo-typography-title {
+  text-transform: capitalize;
+  font: var(--mat-sys-title-medium);
+  padding: 16px;
+  border-bottom: 1px solid var(--mat-sys-outline);
+  background: var(--mat-sys-primary-container);
+  color: var(--mat-sys-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-sys-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;
+  background: var(--mat-sys-surface-container);
+  color: var(--mat-sys-on-surface);
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+.demo-code-block {
+  background: var(--mat-sys-surface-container-low);
+  padding: 16px;
+  border-radius: var(--mat-sys-corner-small);
+  border: 1px solid var(--mat-sys-outline);
+}
+
+.demo-overrides {
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+  font: var(--mat-sys-body-medium);
+  border-radius: var(--mat-sys-corner-large);
+  box-shadow: var(--mat-sys-level3);
+  padding: 16px;
+
+  @include mat.theme-overrides((
+    primary: #ebdcff,
+    on-primary: #230f46,
+    body-medium: 500 1.15rem/1.3rem Arial,
+    corner-large: 32px,
+    level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
+  ));
+}
diff --git a/src/app/pages/system-variables/system-variables.ts b/src/app/pages/system-variables/system-variables.ts
new file mode 100644
index 00000000..5f2f66fa
--- /dev/null
+++ b/src/app/pages/system-variables/system-variables.ts
@@ -0,0 +1,158 @@
+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';
+
+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: 'system-variables.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class ThemeDemoColors {
+  colors = input<Color[]>();
+}
+
+@Component({
+  selector: 'app-system-variables',
+  templateUrl: './system-variables.html',
+  styleUrls: ['./system-variables.scss'],
+  imports: [MatCardModule, MatExpansionModule, MatIconModule, ThemeDemoColors],
+  standalone: true,
+})
+export class SystemVariables {
+  alternativeThemeColors: Color[] = [
+    {
+      name: 'Primary Container',
+      background: '--mat-sys-primary-container',
+      text: '--mat-sys-on-primary-container',
+    },
+    {
+      name: 'Secondary',
+      background: '--mat-sys-secondary',
+      text: '--mat-sys-on-secondary',
+    },
+    {
+      name: 'Secondary Container',
+      background: '--mat-sys-secondary-container',
+      text: '--mat-sys-on-secondary-container',
+    },
+    {
+      name: 'Tertiary',
+      background: '--mat-sys-tertiary',
+      text: '--mat-sys-on-tertiary',
+    },
+    {
+      name: 'Tertiary Container',
+      background: '--mat-sys-tertiary-container',
+      text: '--mat-sys-on-tertiary-container',
+    },
+    {
+      name: 'Error Container',
+      background: '--mat-sys-error-container',
+      text: '--mat-sys-on-error-container',
+    },
+  ];
+
+  surfaceColors: Color[] = [
+    {
+      name: 'Surface Dim',
+      background: '--mat-sys-surface-dim',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Bright',
+      background: '--mat-sys-surface-bright',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Lowest',
+      background: '--mat-sys-surface-container-lowest',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Low',
+      background: '--mat-sys-surface-container-low',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container',
+      background: '--mat-sys-surface-container',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container High',
+      background: '--mat-sys-surface-container-high',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+    {
+      name: 'Surface Container Highest',
+      background: '--mat-sys-surface-container-highest',
+      text: '--mat-sys-on-surface',
+      hideText: true,
+    },
+  ];
+
+  fixedColors: Color[] = [
+    {
+      name: 'Primary Fixed',
+      background: '--mat-sys-primary-fixed',
+      text: '--mat-sys-on-primary-fixed',
+    },
+    {
+      name: 'Primary Fixed Dim',
+      background: '--mat-sys-primary-fixed-dim',
+      text: '--mat-sys-on-primary-fixed',
+    },
+    {
+      name: 'Secondary Fixed',
+      background: '--mat-sys-secondary-fixed',
+      text: '--mat-sys-on-secondary-fixed',
+    },
+    {
+      name: 'Secondary Fixed Dim',
+      background: '--mat-sys-secondary-fixed-dim',
+      text: '--mat-sys-on-secondary-fixed',
+    },
+    {
+      name: 'Tertiary Fixed',
+      background: '--mat-sys-tertiary-fixed',
+      text: '--mat-sys-on-tertiary-fixed',
+    },
+    {
+      name: 'Tertiary Fixed Dim',
+      background: '--mat-sys-tertiary-fixed-dim',
+      text: '--mat-sys-on-tertiary-fixed',
+    },
+  ];
+}
diff --git a/src/app/shared/doc-viewer/doc-viewer.spec.ts b/src/app/shared/doc-viewer/doc-viewer.spec.ts
index 7ddf865e..c8b0c290 100644
--- a/src/app/shared/doc-viewer/doc-viewer.spec.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.spec.ts
@@ -33,6 +33,15 @@ describe('DocViewer', () => {
     expect(docViewer.nativeElement.innerHTML).toBe('<div>my docs page</div>');
   });
 
+  it('should load component', () => {
+    const fixture = TestBed.createComponent(DocViewerWithCompTestComponent);
+    fixture.detectChanges();
+
+    const docViewer = fixture.debugElement.query(By.directive(DocViewer));
+    expect(docViewer).not.toBeNull();
+    expect(docViewer.nativeElement.innerHTML).toContain(`TEST_COMPONENT_GUIDE`);
+  });
+
   it('should save textContent of the doc', () => {
     const fixture = TestBed.createComponent(DocViewerTestComponent);
     fixture.detectChanges();
@@ -145,7 +154,7 @@ describe('DocViewer', () => {
 
 @Component({
   selector: 'test',
-  template: `<doc-viewer [documentUrl]="documentUrl"></doc-viewer>`,
+  template: `<doc-viewer [document]="documentUrl"></doc-viewer>`,
   standalone: true,
   imports: [DocViewerModule, DocsAppTestingModule],
 })
@@ -170,3 +179,19 @@ const FAKE_DOCS: {[key: string]: string} = {
     '<div material-docs-example="whole-snippet-example" file="whole-snippet-example.ts"></div>',
   /* eslint-enable @typescript-eslint/naming-convention */
 };
+
+@Component({
+  template: `TEST_COMPONENT_GUIDE`,
+  standalone: true,
+})
+class TestComponent {}
+
+@Component({
+  selector: 'test',
+  template: `<doc-viewer [document]="component"></doc-viewer>`,
+  standalone: true,
+  imports: [DocViewerModule, DocsAppTestingModule, TestComponent],
+})
+class DocViewerWithCompTestComponent {
+  component = TestComponent;
+}
diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts
index 8690fad8..a4e23d64 100644
--- a/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/src/app/shared/doc-viewer/doc-viewer.ts
@@ -1,4 +1,10 @@
-import {ComponentPortal, DomPortalOutlet} from '@angular/cdk/portal';
+import {
+  ComponentType,
+  ComponentPortal,
+  DomPortalOutlet,
+  Portal,
+  PortalModule
+} from '@angular/cdk/portal';
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {DomSanitizer} from '@angular/platform-browser';
 import {
@@ -40,20 +46,37 @@ class DocFetcher {
 
 @Component({
   selector: 'doc-viewer',
-  template: 'Loading document...',
+  template: `
+    @if (portal) {
+      <ng-template [cdkPortalOutlet]="portal"></ng-template>
+    } @else {
+      Loading document...
+    }
+  `,
   standalone: true,
+  imports: [PortalModule]
 })
 export class DocViewer implements OnDestroy {
   private _portalHosts: DomPortalOutlet[] = [];
   private _documentFetchSubscription: Subscription | undefined;
+  protected portal: Portal<any> | undefined;
 
   readonly name = input<string>();
 
-  /** The URL of the document to display. */
+  /** The document to display, either as a URL to a markdown file or a component to create. */
   @Input()
-  set documentUrl(url: string | undefined) {
-    if (url !== undefined) {
-      this._fetchDocument(url);
+  set document(document: string | ComponentType<any> | undefined) {
+    if (typeof document === 'string') {
+      this._fetchDocument(document);
+    } else if (document) {
+      this.portal = new ComponentPortal(document);
+
+      // Resolving and creating components dynamically in Angular happens synchronously, but since
+      // we want to emit the output if the components are actually rendered completely, we wait
+      // until the Angular zone becomes stable.
+      this._ngZone.onStable
+        .pipe(take(1))
+        .subscribe(() => this.contentRendered.next(this._elementRef.nativeElement));
     }
   }
 
diff --git a/src/app/shared/example-viewer/code-snippet.html b/src/app/shared/example-viewer/code-snippet.html
index 09b54722..61de6b25 100644
--- a/src/app/shared/example-viewer/code-snippet.html
+++ b/src/app/shared/example-viewer/code-snippet.html
@@ -1,3 +1,3 @@
 <div class="docs-example-source-wrapper">
-  <pre class="docs-example-source"><doc-viewer #viewer [documentUrl]="source()"></doc-viewer></pre>
+  <pre class="docs-example-source"><doc-viewer #viewer [document]="source()"></doc-viewer></pre>
 </div>
diff --git a/src/app/shared/guide-items/guide-items.ts b/src/app/shared/guide-items/guide-items.ts
index 43563532..4790b901 100644
--- a/src/app/shared/guide-items/guide-items.ts
+++ b/src/app/shared/guide-items/guide-items.ts
@@ -1,13 +1,15 @@
 import {Injectable} from '@angular/core';
+import {SystemVariables} from '../../pages/system-variables';
+import {ComponentType} from '@angular/cdk/portal';
 
 export interface GuideItem {
   id: string;
   name: string;
-  document: string;
   overview: string;
+  document: string | ComponentType<any>;
 }
 
-const GUIDES = [
+const GUIDES: GuideItem[] = [
   {
     id: 'getting-started',
     name: 'Getting started',
@@ -26,6 +28,12 @@ const GUIDES = [
     document: '/docs-content/guides/theming.html',
     overview: 'Customize your application with Angular Material\'s theming system.'
   },
+  {
+    id: 'system-variables',
+    name: 'System Variables',
+    document: SystemVariables,
+    overview: 'Understand the system variables available to use in your application.'
+  },
   {
     id: 'theming-your-components',
     name: 'Theming your own components',
diff --git a/src/app/shared/table-of-contents/table-of-contents.ts b/src/app/shared/table-of-contents/table-of-contents.ts
index 9bdc7814..5a9c4d60 100644
--- a/src/app/shared/table-of-contents/table-of-contents.ts
+++ b/src/app/shared/table-of-contents/table-of-contents.ts
@@ -130,7 +130,7 @@ export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
         id: header.id,
         active: false
       };
-    });
+    }).filter(link => link.id);
 
     this._linkSections[sectionIndex] = {name: sectionName, links};
     this._links.push(...links);
diff --git a/src/styles.scss b/src/styles.scss
index e4c7791e..6febe002 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -6,6 +6,9 @@
 @use './styles/general';
 
 html {
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+
   @include mat.theme((
     color: (
       theme-type: light,