diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 13a5526a..768fb089 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -58,7 +58,7 @@
   }
 
   .preview-viewer {
-    border: 1px solid var(--bx-ui-03);
+    border: 1px solid var(--bx-border-subtle-01);
     border-bottom: 0;
     position: relative;
     z-index: 9999;
diff --git a/docs/src/components/TileCard.svelte b/docs/src/components/TileCard.svelte
index 93a4a6da..715a8485 100644
--- a/docs/src/components/TileCard.svelte
+++ b/docs/src/components/TileCard.svelte
@@ -51,11 +51,11 @@
   }
 
   .borderRight {
-    border-right: 1px solid var(--bx-ui-03);
+    border-right: 1px solid var(--bx-border-subtle-01);
   }
 
   .borderBottom {
-    border-bottom: 1px solid var(--bx-ui-03);
+    border-bottom: 1px solid var(--bx-border-subtle-01);
   }
 
   .card {
@@ -84,7 +84,7 @@
     .card-wrapper,
     .borderRight {
       border-right: 0;
-      border-bottom: 1px solid var(--bx-ui-03);
+      border-bottom: 1px solid var(--bx-border-subtle-01);
     }
   }
 </style>
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index fafdc502..86c53743 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -177,7 +177,7 @@
     display: flex;
     justify-content: space-between;
     margin-bottom: var(--bx-spacing-06);
-    border-bottom: 1px solid var(--bx-ui-03);
+    border-bottom: 1px solid var(--bx-border-subtle-01);
   }
 
   :global(.toc h5) {