diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index 995b54b6d..30a36470f 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -18,7 +18,7 @@ const hasDialog = computed(() => navigation.value?.length > 1)
       </div>
 
       <div class="section right">
-        <AppSearch v-if="hasDocSearch"/>
+        <AppSearch v-if="hasDocSearch" />
         <ThemeSelect />
         <div class="social-icons">
           <AppSocialIcons />
@@ -53,13 +53,13 @@ css({
   },
 
   header: {
-    backdropFilter: '{backdrop.filter}',
+    backdropFilter: '{elements.backdrop.filter}',
     position: 'sticky',
     top: 0,
     zIndex: 10,
     width: '100%',
     borderBottom: '1px solid {color.gray.100}',
-    backgroundColor: '{backdrop.background}',
+    backgroundColor: '{elements.backdrop.background}',
     height: '{docus.header.height}',
 
     '@dark': {
diff --git a/components/app/AppHeaderDialog.vue b/components/app/AppHeaderDialog.vue
index 6ca555e59..3ff378250 100644
--- a/components/app/AppHeaderDialog.vue
+++ b/components/app/AppHeaderDialog.vue
@@ -72,7 +72,7 @@ css({
     alignItems: 'flex-start',
     overflowY: 'auto',
     backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    backdropFilter: '{backdrop.filter}',
+    backdropFilter: '{elements.backdrop.filter}',
     '@dark': {
       backgroundColor: 'rgba(0, 0, 0, 0.5)'
     },
diff --git a/components/docs/DocsAsideTree.vue b/components/docs/DocsAsideTree.vue
index 7f1715f54..11b2dc1fc 100644
--- a/components/docs/DocsAsideTree.vue
+++ b/components/docs/DocsAsideTree.vue
@@ -118,9 +118,9 @@ css({
   '.docs-aside-tree': {
     li: {
       '&.bordered': {
-        borderLeft: '1px solid {borders.primary.default}',
+        borderLeft: '1px solid {elements.border.primary.default}',
         '&:hover': {
-          borderColor: '{borders.primary.hover}'
+          borderColor: '{elements.border.primary.hover}'
         },
         '&.active': {
           borderColor: '{color.primary.400}',
diff --git a/components/docs/DocsPageContent.vue b/components/docs/DocsPageContent.vue
index bb12a630a..8b62b706f 100644
--- a/components/docs/DocsPageContent.vue
+++ b/components/docs/DocsPageContent.vue
@@ -175,7 +175,7 @@ css({
       marginTop: 0,
       marginBottom: '{space.8}',
       paddingBottom: '{space.8}',
-      borderBottom: '1px solid {borders.primary.default}',
+      borderBottom: '1px solid {elements.border.primary.default}',
       color: '{color.gray.500}',
       '@sm': {
         fontSize: '{text.lg.fontSize}',
@@ -216,8 +216,8 @@ css({
     },
     '.toc-wrapper': {
       width: '100%',
-      backdropFilter: '{backdrop.filter}',
-      backgroundColor: '{backdrop.background}',
+      backdropFilter: '{elements.backdrop.filter}',
+      backgroundColor: '{elements.backdrop.background}',
       px: '{space.4}',
       '@sm': {
         px: '{space.6}',
diff --git a/components/docs/DocsPrevNext.vue b/components/docs/DocsPrevNext.vue
index 615989643..d59e89193 100644
--- a/components/docs/DocsPrevNext.vue
+++ b/components/docs/DocsPrevNext.vue
@@ -68,7 +68,7 @@ css({
       position: 'relative',
       minWidth: '0px',
       padding: '{space.3}',
-      border: '1px solid {borders.primary.default}',
+      border: '1px solid {elements.border.primary.default}',
       borderRadius: '{radii.lg}',
       '&:hover': {
         borderColor: '{color.primary.100}',