diff --git a/demo/partials/breadcrumbs.html b/demo/partials/breadcrumbs.html
index b0febe4..f33524e 100644
--- a/demo/partials/breadcrumbs.html
+++ b/demo/partials/breadcrumbs.html
@@ -4,14 +4,14 @@
   <div class="breadcrumbs-demo">
     <div class="breadcrumbs-demo-row">
       <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><a href="#">Label</a></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item is-active"><span>Label</span></li>
         </ol>
       </nav>
       <nav aria-label="Collapsed breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item is-active"><span>Label</span></li>
@@ -21,7 +21,7 @@
 
     <div class="breadcrumbs-demo-row">
       <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><a href="#">Label</a></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item"><a href="#">Label</a></li>
@@ -30,7 +30,7 @@
         </ol>
       </nav>
       <nav aria-label="Collapsed breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item is-active"><span>Label</span></li>
@@ -40,7 +40,7 @@
 
     <div class="breadcrumbs-demo-row">
       <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><a href="#">Label</a></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item"><a href="#">Label</a></li>
@@ -51,7 +51,7 @@
         </ol>
       </nav>
       <nav aria-label="Collapsed breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item is-active"><span>Label</span></li>
@@ -61,7 +61,7 @@
 
     <div class="breadcrumbs-demo-row">
       <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><a href="#">Label</a></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item"><a href="#">Label</a></li>
@@ -74,7 +74,7 @@
         </ol>
       </nav>
       <nav aria-label="Collapsed breadcrumb">
-        <ol class="breadcrumb breadcrumb-inverted">
+        <ol class="breadcrumb">
           <li class="breadcrumb-item"><button type="button" class="breadcrumb-collapse">...</button></li>
           <li class="breadcrumb-separator" aria-hidden="true">/</li>
           <li class="breadcrumb-item is-active"><span>Label</span></li>
diff --git a/src/scss/components/_breadcrumbs.scss b/src/scss/components/_breadcrumbs.scss
index 97188bb..02ac8e6 100644
--- a/src/scss/components/_breadcrumbs.scss
+++ b/src/scss/components/_breadcrumbs.scss
@@ -75,52 +75,6 @@
     }
   }
 
-  // Inverted / dark-surface variant matching the Breadcrumbs.png frame
-  &.breadcrumb-inverted {
-    color: $neutral-400;
-
-    .breadcrumb-item a {
-      color: $neutral-400;
-
-      &:hover,
-      &.is-hover {
-        color: $neutral-0;
-      }
-
-      &:active,
-      &.is-active {
-        color: $neutral-0;
-      }
-    }
-
-    .breadcrumb-separator {
-      color: $neutral-500;
-    }
-
-    .breadcrumb-item.is-active span {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 44px;
-      padding: $space-2 $space-5;
-      border-radius: $radius-full;
-      background-color: $neutral-0;
-      color: $info-text;
-    }
-
-    .breadcrumb-collapse {
-      min-height: 44px;
-      padding: $space-2 $space-3;
-      border-radius: $radius-full;
-      font-size: 18px;
-
-      &:hover,
-      &.is-hover {
-        color: $neutral-0;
-        background-color: rgba($neutral-0, 0.12);
-      }
-    }
-  }
 
   // Sizes
   &.breadcrumb-sm { font-size: 12px; }
diff --git a/src/scss/demo.scss b/src/scss/demo.scss
index 6dc8400..543d242 100644
--- a/src/scss/demo.scss
+++ b/src/scss/demo.scss
@@ -186,7 +186,8 @@
 .breadcrumbs-demo {
   padding: $space-5;
   border-radius: $radius-xl;
-  background: $neutral-900;
+  background: $neutral-0;
+  border: $border-width-base solid $border-color-muted;
 }
 
 .breadcrumbs-demo-row {