diff --git a/site/src/content/docs/components/carousel.mdx b/site/src/content/docs/components/carousel.mdx
index 74682b602e89..83216a72a953 100644
--- a/site/src/content/docs/components/carousel.mdx
+++ b/site/src/content/docs/components/carousel.mdx
@@ -125,21 +125,21 @@ You can put any markup you like inside each `.carousel-item`. Add content, then
 <Example code={`<div id="carouselExampleContent" class="carousel slide">
     <div class="carousel-inner rounded-5">
       <div class="carousel-item active">
-        <div class="d-flex flex-column justify-content-center bg-primary-subtle p-9 bg-1 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center bg-subtle-primary p-9 bg-1 rounded-5" style="min-height: 320px;">
           <h3>Build anything</h3>
           <p class="text-secondary-emphasis mb-3">Compose slides from your own markup—text, buttons, cards, or media.</p>
           <div><a class="btn-solid theme-primary" href="#">Get started</a></div>
         </div>
       </div>
       <div class="carousel-item">
-        <div class="d-flex flex-column justify-content-center text-center bg-success-subtle p-9 bg-2 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center text-center bg-subtle-success p-9 bg-2 rounded-5" style="min-height: 320px;">
           <h3>Style it your way</h3>
           <p class="text-secondary-emphasis mb-3">Use utilities or custom CSS to size and theme each slide however you need.</p>
           <div><a class="btn-solid theme-success" href="#">Learn more</a></div>
         </div>
       </div>
       <div class="carousel-item">
-        <div class="d-flex flex-column justify-content-center text-end bg-warning-subtle p-9 bg-3 rounded-5" style="min-height: 320px;">
+        <div class="d-flex flex-column justify-content-center text-end bg-subtle-warning p-9 bg-3 rounded-5" style="min-height: 320px;">
           <h3>Mix and match</h3>
           <p class="text-secondary-emphasis mb-3">Combine custom content with controls, indicators, and the overlay layout.</p>
           <div><a class="btn-solid theme-inverse" href="#">Browse examples</a></div>