diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 3c2f3c54..8315f7ed 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -410,7 +410,7 @@ pre .language-tsx:not(.MuiTypography-root) {
 
 .ds-intent-grid {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
 }
 
@@ -575,6 +575,28 @@ section.ds-mode-panel section {
   background: var(--ds-on-tertiary-solid);
 }
 
+.ds-bg-highlight-main {
+  background: var(--ds-highlight);
+}
+.ds-bg-highlight-dark {
+  background: var(--ds-highlight-emphasis);
+}
+.ds-bg-highlight-light {
+  background: var(--ds-highlight-accent);
+}
+.ds-bg-highlight-container {
+  background: var(--ds-highlight-container);
+}
+.ds-bg-highlight-on-container {
+  background: var(--ds-on-highlight-container);
+}
+.ds-bg-highlight-solid {
+  background: var(--ds-highlight-solid);
+}
+.ds-bg-highlight-on-solid {
+  background: var(--ds-on-highlight-solid);
+}
+
 .ds-bg-brand-main {
   background: var(--ds-brand);
 }
@@ -694,6 +716,36 @@ section.ds-mode-panel section {
   background: var(--ds-on-info-solid);
 }
 
+/* Contrast text (onPrimary, onDanger, etc.) shown as its own swatch */
+
+.ds-bg-on-primary {
+  background: var(--ds-on-primary);
+}
+.ds-bg-on-secondary {
+  background: var(--ds-on-secondary);
+}
+.ds-bg-on-tertiary {
+  background: var(--ds-on-tertiary);
+}
+.ds-bg-on-brand {
+  background: var(--ds-on-brand);
+}
+.ds-bg-on-danger {
+  background: var(--ds-on-danger);
+}
+.ds-bg-on-warning {
+  background: var(--ds-on-warning);
+}
+.ds-bg-on-success {
+  background: var(--ds-on-success);
+}
+.ds-bg-on-info {
+  background: var(--ds-on-info);
+}
+.ds-bg-on-highlight {
+  background: var(--ds-on-highlight);
+}
+
 /* Foregrounds */
 
 .ds-fg-primary-contrast,
@@ -703,7 +755,8 @@ section.ds-mode-panel section {
 .ds-fg-danger-contrast,
 .ds-fg-warning-contrast,
 .ds-fg-success-contrast,
-.ds-fg-info-contrast {
+.ds-fg-info-contrast,
+.ds-fg-highlight-contrast {
   color: var(--ds-on-solid);
 }
 
@@ -739,6 +792,40 @@ section.ds-mode-panel section {
   color: var(--ds-on-info);
 }
 
+.ds-fg-highlight-contrast {
+  color: var(--ds-on-highlight);
+}
+
+/* Paired with the on-X backgrounds above so contrastText swatches stay legible */
+
+.ds-fg-primary-main {
+  color: var(--ds-primary);
+}
+.ds-fg-secondary-main {
+  color: var(--ds-secondary);
+}
+.ds-fg-tertiary-main {
+  color: var(--ds-tertiary);
+}
+.ds-fg-brand-main {
+  color: var(--ds-brand);
+}
+.ds-fg-danger-main {
+  color: var(--ds-danger);
+}
+.ds-fg-warning-main {
+  color: var(--ds-warning);
+}
+.ds-fg-success-main {
+  color: var(--ds-success);
+}
+.ds-fg-info-main {
+  color: var(--ds-info);
+}
+.ds-fg-highlight-main {
+  color: var(--ds-highlight);
+}
+
 .ds-fg-primary-container {
   color: var(--ds-primary-container);
 }
@@ -796,6 +883,19 @@ section.ds-mode-panel section {
   color: var(--ds-on-tertiary-fixed);
 }
 
+.ds-fg-highlight-container {
+  color: var(--ds-highlight-container);
+}
+.ds-fg-highlight-on-container {
+  color: var(--ds-on-highlight-container);
+}
+.ds-fg-highlight-solid {
+  color: var(--ds-highlight-solid);
+}
+.ds-fg-highlight-on-solid {
+  color: var(--ds-on-highlight-solid);
+}
+
 .ds-fg-brand-container {
   color: var(--ds-brand-container);
 }
@@ -930,8 +1030,12 @@ section.ds-mode-panel section {
   background: var(--ds-on-surface-muted);
 }
 
-.ds-bg-action-disabled {
-  background: var(--ds-action-disabled);
+.ds-bg-on-surface-disabled {
+  background: var(--ds-on-surface-disabled);
+}
+
+.ds-bg-control-disabled {
+  background: var(--ds-control-disabled);
 }
 
 .ds-bg-placeholder {
diff --git a/src/storybook/PracticalGuidance.mdx b/src/storybook/PracticalGuidance.mdx
index ff1230b1..285cf968 100644
--- a/src/storybook/PracticalGuidance.mdx
+++ b/src/storybook/PracticalGuidance.mdx
@@ -399,7 +399,7 @@ They should be the default choice for layout, surfaces, borders, text, and dense
         <code>--ds-surface-disabled</code>
       </td>
       <td>
-        <code>surface.disabled</code>
+        <code>action.disabledBackground</code>
       </td>
       <td>Disabled surface treatment</td>
       <td>Disabled filled controls and inactive regions</td>
@@ -429,20 +429,20 @@ They should be the default choice for layout, surfaces, borders, text, and dense
         <code>--ds-on-surface-disabled</code>
       </td>
       <td>
-        <code>text.disabled</code>
+        <code>text.disabled / action.disabled</code>
       </td>
       <td>Disabled foreground colour</td>
-      <td>Disabled text and icons</td>
+      <td>Disabled text, icons, and interactive controls (buttons, tabs, inputs)</td>
     </tr>
     <tr>
       <td>
-        <code>--ds-action-disabled</code>
+        <code>--ds-control-disabled</code>
       </td>
       <td>
-        <code>action.disabled</code>
+        <code>Checkbox / Radio (Mui-disabled)</code>
       </td>
-      <td>Disabled interactive colour</td>
-      <td>Disabled buttons, controls, and actions</td>
+      <td>Disabled control icon colour</td>
+      <td>Disabled checkbox and radio icons</td>
     </tr>
     <tr>
       <td>
@@ -539,7 +539,7 @@ Prefer layered surfaces and borders over heavy shadows.
         <code>--ds-surface-disabled</code>
       </td>
       <td>
-        <code>surface.disabled</code>
+        <code>action.disabledBackground</code>
       </td>
       <td>Disabled surface treatment</td>
       <td>
diff --git a/src/storybook/foundation/1. colour.mdx b/src/storybook/foundation/1. colour.mdx
index f2644e68..0969dd4e 100644
--- a/src/storybook/foundation/1. colour.mdx	
+++ b/src/storybook/foundation/1. colour.mdx	
@@ -928,7 +928,7 @@ Neutral tokens create the structure of the interface. They should be the default
         <code>--ds-surface-disabled</code>
       </td>
       <td>
-        <code>surface.disabled</code>
+        <code>action.disabledBackground</code>
       </td>
       <td>Disabled surface treatment</td>
       <td>Disabled filled controls and inactive regions</td>
@@ -958,20 +958,20 @@ Neutral tokens create the structure of the interface. They should be the default
         <code>--ds-on-surface-disabled</code>
       </td>
       <td>
-        <code>text.disabled</code>
+        <code>text.disabled / action.disabled</code>
       </td>
       <td>Disabled foreground colour</td>
-      <td>Disabled text and icons</td>
+      <td>Disabled text, icons, and interactive controls (buttons, tabs, inputs)</td>
     </tr>
     <tr>
       <td>
-        <code>--ds-action-disabled</code>
+        <code>--ds-control-disabled</code>
       </td>
       <td>
-        <code>action.disabled</code>
+        <code>Checkbox / Radio (Mui-disabled)</code>
       </td>
-      <td>Disabled interactive colour</td>
-      <td>Disabled buttons, controls, and actions</td>
+      <td>Disabled control icon colour</td>
+      <td>Disabled checkbox and radio icons</td>
     </tr>
     <tr>
       <td>
diff --git a/src/storybook/foundation/1.1. theme-colours.mdx b/src/storybook/foundation/1.1. theme-colours.mdx
index ee482831..58facf6f 100644
--- a/src/storybook/foundation/1.1. theme-colours.mdx	
+++ b/src/storybook/foundation/1.1. theme-colours.mdx	
@@ -21,61 +21,136 @@ This page is a token reference. If you're deciding which colour role to use, rea
  <section className="ds-mode-panel" data-mode="light">
   <section>
    <h3>Intent colours</h3>
+   <p>
+    Exposed as MUI palette roles (e.g. <code>theme.palette.primary.main</code>
+    ).
+   </p>
    <div className="ds-intent-grid">
     {[
-     ["primary", "Primary", false],
-     ["secondary", "Secondary", false],
-     ["tertiary", "Tertiary", false],
-     ["brand", "Brand", true],
-     ["danger", "Danger", false],
-     ["warning", "Warning", false],
-     ["success", "Success", false],
-     ["info", "Info", false],
-    ].map(([key, label, hasFixed]) => (
+     ["primary", "Primary", false, "primary"],
+     ["secondary", "Secondary", false, "secondary"],
+     ["info", "Info", false, "info"],
+     ["danger", "Danger", false, "error"],
+     ["warning", "Warning", false, "warning"],
+     ["success", "Success", false, "success"],
+    ].map(([key, label, hasFixed, muiRole]) => (
      <div className="ds-colour-family" key={key}>
       <div className="ds-colour-stack">
        <div className={`ds-colour-row ds-bg-${key}-main ds-fg-${key}-contrast`}>
         <span>{label}</span>
-        <code>main</code>
+        <code>{muiRole ? `${muiRole}.main` : "main"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-on-${key} ds-fg-${key}-main`}>
+        <span>On {label}</span>
+        <code>{muiRole ? `${muiRole}.contrastText` : "contrastText"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-dark ds-fg-${key}-contrast`}>
+        <span>{label} Emphasis</span>
+        <code>{muiRole ? `${muiRole}.dark` : "dark"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-light ds-fg-${key}-contrast`}>
+        <span>{label} Accent</span>
+        <code>{muiRole ? `${muiRole}.light` : "light"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-container ds-fg-${key}-on-container`}>
+        <span>{label} Container</span>
+        <code>{muiRole ? `${muiRole}.container` : "container"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-on-container ds-fg-${key}-container`}>
+        <span>{label} On Container</span>
+        <code>{muiRole ? `${muiRole}.onContainer` : "onContainer"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-solid ds-fg-${key}-on-solid`}>
+        <span>{label} Solid</span>
+        <code>{muiRole ? `${muiRole}.solid` : "solid"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-on-solid ds-fg-${key}-solid`}>
+        <span>{label} On Solid</span>
+        <code>{muiRole ? `${muiRole}.onSolid` : "onSolid"}</code>
+       </div>
+      </div>
+      {hasFixed && (
+       <div className="ds-colour-stack ds-colour-stack-fixed">
+        <div className={`ds-colour-row ds-bg-${key}-fixed ds-fg-${key}-on-fixed`}>
+         <span>{label} Fixed</span>
+         <code>{muiRole ? `${muiRole}.fixed` : "fixed"}</code>
+        </div>
+        <div className={`ds-colour-row ds-bg-${key}-fixed-dim ds-fg-${key}-on-fixed`}>
+         <span>{label} Fixed Dim</span>
+         <code>{muiRole ? `${muiRole}.fixedDim` : "fixedDim"}</code>
+        </div>
+        <div className={`ds-colour-row ds-bg-${key}-on-fixed ds-fg-${key}-fixed`}>
+         <span>{label} On Fixed</span>
+         <code>{muiRole ? `${muiRole}.onFixed` : "onFixed"}</code>
+        </div>
+       </div>
+      )}
+     </div>
+    ))}
+
+   </div>
+  </section>
+  <section>
+   <h3>Core brand colours</h3>
+   <p>
+    <code>Brand</code> is exposed as a MUI palette role. <code>Tertiary</code>{" "}
+    and <code>Highlight</code> are available as token families via CSS
+    variables, but are not currently exposed as MUI palette roles.
+   </p>
+   <div className="ds-intent-grid">
+    {[
+     ["brand", "Brand", true, "brand"],
+     ["tertiary", "Tertiary", false, null],
+     ["highlight", "Highlight", false, null],
+    ].map(([key, label, hasFixed, muiRole]) => (
+     <div className="ds-colour-family" key={key}>
+      <div className="ds-colour-stack">
+       <div className={`ds-colour-row ds-bg-${key}-main ds-fg-${key}-contrast`}>
+        <span>{label}</span>
+        <code>{muiRole ? `${muiRole}.main` : "main"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-on-${key} ds-fg-${key}-main`}>
+        <span>On {label}</span>
+        <code>{muiRole ? `${muiRole}.contrastText` : "contrastText"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-dark ds-fg-${key}-contrast`}>
         <span>{label} Emphasis</span>
-        <code>dark</code>
+        <code>{muiRole ? `${muiRole}.dark` : "dark"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-light ds-fg-${key}-contrast`}>
         <span>{label} Accent</span>
-        <code>light</code>
+        <code>{muiRole ? `${muiRole}.light` : "light"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-container ds-fg-${key}-on-container`}>
         <span>{label} Container</span>
-        <code>container</code>
+        <code>{muiRole ? `${muiRole}.container` : "container"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-on-container ds-fg-${key}-container`}>
         <span>{label} On Container</span>
-        <code>onContainer</code>
+        <code>{muiRole ? `${muiRole}.onContainer` : "onContainer"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-solid ds-fg-${key}-on-solid`}>
         <span>{label} Solid</span>
-        <code>solid</code>
+        <code>{muiRole ? `${muiRole}.solid` : "solid"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-on-solid ds-fg-${key}-solid`}>
         <span>{label} On Solid</span>
-        <code>onSolid</code>
+        <code>{muiRole ? `${muiRole}.onSolid` : "onSolid"}</code>
        </div>
       </div>
       {hasFixed && (
        <div className="ds-colour-stack ds-colour-stack-fixed">
         <div className={`ds-colour-row ds-bg-${key}-fixed ds-fg-${key}-on-fixed`}>
          <span>{label} Fixed</span>
-         <code>fixed</code>
+         <code>{muiRole ? `${muiRole}.fixed` : "fixed"}</code>
         </div>
         <div className={`ds-colour-row ds-bg-${key}-fixed-dim ds-fg-${key}-on-fixed`}>
          <span>{label} Fixed Dim</span>
-         <code>fixedDim</code>
+         <code>{muiRole ? `${muiRole}.fixedDim` : "fixedDim"}</code>
         </div>
         <div className={`ds-colour-row ds-bg-${key}-on-fixed ds-fg-${key}-fixed`}>
          <span>{label} On Fixed</span>
-         <code>onFixed</code>
+         <code>{muiRole ? `${muiRole}.onFixed` : "onFixed"}</code>
         </div>
        </div>
       )}
@@ -90,60 +165,60 @@ This page is a token reference. If you're deciding which colour role to use, rea
     <div className="ds-colour-stack">
      <div className="ds-colour-row ds-bg-background ds-fg-primary">
       <span>Background</span>
-      <code>background</code>
+      <code>background.default</code>
      </div>
      <div className="ds-colour-row ds-bg-surface ds-fg-primary">
       <span>Surface</span>
-      <code>surface</code>
+      <code>background.paper</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-container ds-fg-primary">
       <span>Surface Container</span>
-      <code>surface.container</code>
+      <code>surface.subtle</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-container-high ds-fg-primary">
       <span>Surface Container High</span>
-      <code>surface.containerHigh</code>
+      <code>surface.strong</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-disabled ds-fg-on-surface-disabled">
       <span>Surface Disabled</span>
-      <code>surface.disabled</code>
+      <code>action.disabledBackground</code>
      </div>
     </div>
     <div className="ds-colour-stack">
      <div className="ds-colour-row ds-bg-on-surface ds-fg-surface">
       <span>On Surface</span>
-      <code>onSurface</code>
+      <code>text.primary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-variant ds-fg-surface">
       <span>On Surface Variant</span>
-      <code>onSurfaceVariant</code>
+      <code>text.secondary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-subtle ds-fg-surface">
       <span>On Surface Subtle</span>
-      <code>onSurfaceSubtle</code>
+      <code>text.tertiary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-muted ds-fg-surface">
       <span>On Surface Muted</span>
-      <code>onSurfaceMuted</code>
+      <code>text.muted</code>
      </div>
-     <div className="ds-colour-row ds-bg-action-disabled ds-fg-surface">
-      <span>Action Disabled</span>
-      <code>action.disabled</code>
+     <div className="ds-colour-row ds-bg-on-surface-disabled ds-fg-surface">
+      <span>On Surface Disabled</span>
+      <code>text.disabled / action.disabled</code>
      </div>
     </div>
     <div className="ds-colour-family">
      <div className="ds-colour-stack">
       <div className="ds-colour-row ds-bg-placeholder ds-fg-surface">
        <span>Placeholder</span>
-       <code>placeholder</code>
+       <code>text.placeholder</code>
       </div>
      <div className="ds-colour-row ds-bg-placeholder-focus ds-fg-surface">
        <span>Placeholder Focus</span>
-       <code>placeholder.focus</code>
+       <code>text.placeholderFocus</code>
       </div>
      <div className="ds-colour-row ds-bg-on-solid ds-fg-primary">
        <span>On Solid</span>
-       <code>onSolid</code>
+       <code>text.onSolid</code>
       </div>
      </div>
      <div className="ds-colour-stack ds-colour-stack-fixed">
@@ -170,63 +245,140 @@ This page is a token reference. If you're deciding which colour role to use, rea
  <section className="ds-mode-panel" data-mode="dark">
   <section>
    <h3>Intent colours</h3>
+   <p>
+    Exposed as MUI palette roles (e.g. <code>theme.palette.primary.main</code>
+    ).
+   </p>
+   <div className="ds-intent-grid">
+    {[
+     ["primary", "Primary", false, "primary"],
+     ["secondary", "Secondary", false, "secondary"],
+     ["info", "Info", false, "info"],
+     ["danger", "Danger", false, "error"],
+     ["warning", "Warning", false, "warning"],
+     ["success", "Success", false, "success"],
+    ].map(([key, label, hasFixed, muiRole]) => (
+     <div className="ds-colour-family" key={key}>
+      <div className="ds-colour-stack">
+       <div className={`ds-colour-row ds-bg-${key}-main ds-fg-${key}-contrast`}>
+        <span>{label}</span>
+        <code>{muiRole ? `${muiRole}.main` : "main"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-on-${key} ds-fg-${key}-main`}>
+        <span>On {label}</span>
+        <code>{muiRole ? `${muiRole}.contrastText` : "contrastText"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-dark ds-fg-${key}-contrast`}>
+        <span>{label} Emphasis</span>
+        <code>{muiRole ? `${muiRole}.dark` : "dark"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-light ds-fg-${key}-contrast`}>
+        <span>{label} Accent</span>
+        <code>{muiRole ? `${muiRole}.light` : "light"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-container ds-fg-${key}-on-container`}>
+        <span>{label} Container</span>
+        <code>{muiRole ? `${muiRole}.container` : "container"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-on-container ds-fg-${key}-container`}>
+        <span>{label} On Container</span>
+        <code>{muiRole ? `${muiRole}.onContainer` : "onContainer"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-solid ds-fg-${key}-on-solid`}>
+        <span>{label} Solid</span>
+        <code>{muiRole ? `${muiRole}.solid` : "solid"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-${key}-on-solid ds-fg-${key}-solid`}>
+        <span>{label} On Solid</span>
+        <code>{muiRole ? `${muiRole}.onSolid` : "onSolid"}</code>
+       </div>
+      </div>
+      {hasFixed && (
+       <div className="ds-colour-stack ds-colour-stack-fixed">
+        <div className={`ds-colour-row ds-bg-${key}-fixed ds-fg-${key}-on-fixed`}>
+         <span>{label} Fixed</span>
+         <code>{muiRole ? `${muiRole}.fixed` : "fixed"}</code>
+        </div>
+
+        <div className={`ds-colour-row ds-bg-${key}-fixed-dim ds-fg-${key}-on-fixed`}>
+         <span>{label} Fixed Dim</span>
+         <code>{muiRole ? `${muiRole}.fixedDim` : "fixedDim"}</code>
+        </div>
+
+        <div className={`ds-colour-row ds-bg-${key}-on-fixed ds-fg-${key}-fixed`}>
+         <span>{label} On Fixed</span>
+         <code>{muiRole ? `${muiRole}.onFixed` : "onFixed"}</code>
+        </div>
+       </div>
+      )}
+     </div>
+    ))}
+
+   </div>
+  </section>
+  <section>
+   <h3>Core brand colours</h3>
+   <p>
+    <code>Brand</code> is exposed as a MUI palette role. <code>Tertiary</code>{" "}
+    and <code>Highlight</code> are available as token families via CSS
+    variables, but are not currently exposed as MUI palette roles.
+   </p>
    <div className="ds-intent-grid">
     {[
-     ["primary", "Primary", false],
-     ["secondary", "Secondary", false],
-     ["tertiary", "Tertiary", false],
-     ["brand", "Brand", true],
-     ["danger", "Danger", false],
-     ["warning", "Warning", false],
-     ["success", "Success", false],
-     ["info", "Info", false],
-    ].map(([key, label, hasFixed]) => (
+     ["brand", "Brand", true, "brand"],
+     ["tertiary", "Tertiary", false, null],
+     ["highlight", "Highlight", false, null],
+    ].map(([key, label, hasFixed, muiRole]) => (
      <div className="ds-colour-family" key={key}>
       <div className="ds-colour-stack">
        <div className={`ds-colour-row ds-bg-${key}-main ds-fg-${key}-contrast`}>
         <span>{label}</span>
-        <code>main</code>
+        <code>{muiRole ? `${muiRole}.main` : "main"}</code>
+       </div>
+       <div className={`ds-colour-row ds-bg-on-${key} ds-fg-${key}-main`}>
+        <span>On {label}</span>
+        <code>{muiRole ? `${muiRole}.contrastText` : "contrastText"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-dark ds-fg-${key}-contrast`}>
         <span>{label} Emphasis</span>
-        <code>dark</code>
+        <code>{muiRole ? `${muiRole}.dark` : "dark"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-light ds-fg-${key}-contrast`}>
         <span>{label} Accent</span>
-        <code>light</code>
+        <code>{muiRole ? `${muiRole}.light` : "light"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-container ds-fg-${key}-on-container`}>
         <span>{label} Container</span>
-        <code>container</code>
+        <code>{muiRole ? `${muiRole}.container` : "container"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-on-container ds-fg-${key}-container`}>
         <span>{label} On Container</span>
-        <code>onContainer</code>
+        <code>{muiRole ? `${muiRole}.onContainer` : "onContainer"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-solid ds-fg-${key}-on-solid`}>
         <span>{label} Solid</span>
-        <code>solid</code>
+        <code>{muiRole ? `${muiRole}.solid` : "solid"}</code>
        </div>
        <div className={`ds-colour-row ds-bg-${key}-on-solid ds-fg-${key}-solid`}>
         <span>{label} On Solid</span>
-        <code>onSolid</code>
+        <code>{muiRole ? `${muiRole}.onSolid` : "onSolid"}</code>
        </div>
       </div>
       {hasFixed && (
        <div className="ds-colour-stack ds-colour-stack-fixed">
         <div className={`ds-colour-row ds-bg-${key}-fixed ds-fg-${key}-on-fixed`}>
          <span>{label} Fixed</span>
-         <code>fixed</code>
+         <code>{muiRole ? `${muiRole}.fixed` : "fixed"}</code>
         </div>
 
         <div className={`ds-colour-row ds-bg-${key}-fixed-dim ds-fg-${key}-on-fixed`}>
          <span>{label} Fixed Dim</span>
-         <code>fixedDim</code>
+         <code>{muiRole ? `${muiRole}.fixedDim` : "fixedDim"}</code>
         </div>
 
         <div className={`ds-colour-row ds-bg-${key}-on-fixed ds-fg-${key}-fixed`}>
          <span>{label} On Fixed</span>
-         <code>onFixed</code>
+         <code>{muiRole ? `${muiRole}.onFixed` : "onFixed"}</code>
         </div>
        </div>
       )}
@@ -241,60 +393,60 @@ This page is a token reference. If you're deciding which colour role to use, rea
     <div className="ds-colour-stack">
      <div className="ds-colour-row ds-bg-background ds-fg-primary">
       <span>Background</span>
-      <code>background</code>
+      <code>background.default</code>
      </div>
      <div className="ds-colour-row ds-bg-surface ds-fg-primary">
       <span>Surface</span>
-      <code>surface</code>
+      <code>background.paper</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-container ds-fg-primary">
       <span>Surface Container</span>
-      <code>surface.container</code>
+      <code>surface.subtle</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-container-high ds-fg-primary">
       <span>Surface Container High</span>
-      <code>surface.containerHigh</code>
+      <code>surface.strong</code>
      </div>
      <div className="ds-colour-row ds-bg-surface-disabled ds-fg-on-surface-disabled">
       <span>Surface Disabled</span>
-      <code>surface.disabled</code>
+      <code>action.disabledBackground</code>
      </div>
     </div>
     <div className="ds-colour-stack">
      <div className="ds-colour-row ds-bg-on-surface ds-fg-surface">
       <span>On Surface</span>
-      <code>onSurface</code>
+      <code>text.primary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-variant ds-fg-surface">
       <span>On Surface Variant</span>
-      <code>onSurfaceVariant</code>
+      <code>text.secondary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-subtle ds-fg-surface">
       <span>On Surface Subtle</span>
-      <code>onSurfaceSubtle</code>
+      <code>text.tertiary</code>
      </div>
      <div className="ds-colour-row ds-bg-on-surface-muted ds-fg-surface">
       <span>On Surface Muted</span>
-      <code>onSurfaceMuted</code>
+      <code>text.muted</code>
      </div>
-     <div className="ds-colour-row ds-bg-action-disabled ds-fg-surface">
-      <span>Action Disabled</span>
-      <code>action.disabled</code>
+     <div className="ds-colour-row ds-bg-on-surface-disabled ds-fg-surface">
+      <span>On Surface Disabled</span>
+      <code>text.disabled / action.disabled</code>
      </div>
     </div>
     <div className="ds-colour-family">
      <div className="ds-colour-stack">
       <div className="ds-colour-row ds-bg-placeholder ds-fg-surface">
        <span>Placeholder</span>
-       <code>placeholder</code>
+       <code>text.placeholder</code>
       </div>
       <div className="ds-colour-row ds-bg-placeholder-focus ds-fg-surface">
        <span>Placeholder Focus</span>
-       <code>placeholder.focus</code>
+       <code>text.placeholderFocus</code>
       </div>
       <div className="ds-colour-row ds-bg-on-solid ds-fg-surface">
        <span>On Solid</span>
-       <code>onSolid</code>
+       <code>text.onSolid</code>
       </div>
      </div>
      <div className="ds-colour-stack ds-colour-stack-fixed">
diff --git a/src/styles/diamondDS/DiamondDSTokens.css b/src/styles/diamondDS/DiamondDSTokens.css
index cd16fd10..d4b5983b 100644
--- a/src/styles/diamondDS/DiamondDSTokens.css
+++ b/src/styles/diamondDS/DiamondDSTokens.css
@@ -49,7 +49,7 @@
   --ds-on-surface-subtle: #6c7484;
   --ds-on-surface-muted: #8a90a0;
   --ds-on-surface-disabled: rgba(26, 28, 35, 0.36);
-  --ds-action-disabled: rgba(26, 28, 35, 0.3);
+  --ds-control-disabled: rgba(26, 28, 35, 0.3);
   --ds-on-solid: #ffffff;
 
   --ds-on-surface-channel: 26 28 35;
@@ -291,7 +291,7 @@
   --ds-on-surface-subtle: #979eae;
   --ds-on-surface-muted: #7c8394;
   --ds-on-surface-disabled: rgba(232, 234, 240, 0.36);
-  --ds-action-disabled: rgba(232, 234, 240, 0.3);
+  --ds-control-disabled: rgba(232, 234, 240, 0.3);
   --ds-on-solid: #ffffff;
 
   --ds-on-surface-channel: 232 234 240;
diff --git a/src/themes/DiamondDSTheme.test.ts b/src/themes/DiamondDSTheme.test.ts
index 3f61072c..99754eb5 100644
--- a/src/themes/DiamondDSTheme.test.ts
+++ b/src/themes/DiamondDSTheme.test.ts
@@ -980,7 +980,7 @@ describe("DiamondDS component overrides", () => {
 
     expect(styles["&.Mui-disabled"]).toEqual(
       expect.objectContaining({
-        color: "var(--ds-action-disabled)",
+        color: "var(--ds-control-disabled)",
       }),
     );
   });
@@ -1035,7 +1035,7 @@ describe("DiamondDS component overrides", () => {
 
     expect(styles["&.Mui-disabled"]).toEqual(
       expect.objectContaining({
-        color: "var(--ds-action-disabled)",
+        color: "var(--ds-control-disabled)",
       }),
     );
   });
@@ -1141,7 +1141,7 @@ describe("DiamondDS tokens", () => {
     expect(tokensCss).toContain("--ds-on-surface-subtle:");
     expect(tokensCss).toContain("--ds-on-surface-muted:");
     expect(tokensCss).toContain("--ds-on-surface-disabled:");
-    expect(tokensCss).toContain("--ds-action-disabled:");
+    expect(tokensCss).toContain("--ds-control-disabled:");
     expect(tokensCss).toContain("--ds-on-solid:");
   });
 
diff --git a/src/themes/DiamondDSTheme.ts b/src/themes/DiamondDSTheme.ts
index 38daf1a6..76efc7af 100644
--- a/src/themes/DiamondDSTheme.ts
+++ b/src/themes/DiamondDSTheme.ts
@@ -1587,7 +1587,7 @@ const DiamondDSTheme = extendTheme({
             },
 
             "&.Mui-disabled": {
-              color: "var(--ds-action-disabled)",
+              color: "var(--ds-control-disabled)",
             },
           };
         },
@@ -1623,7 +1623,7 @@ const DiamondDSTheme = extendTheme({
             },
 
             "&.Mui-disabled": {
-              color: "var(--ds-action-disabled)",
+              color: "var(--ds-control-disabled)",
             },
           };
         },