diff --git a/docs/content/1.getting-started/3.theme.md b/docs/content/1.getting-started/3.theme.md
index 59441b88..1dda723a 100644
--- a/docs/content/1.getting-started/3.theme.md
+++ b/docs/content/1.getting-started/3.theme.md
@@ -254,6 +254,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
 
   /* Main background color */
   --ui-bg: var(--color-white);
+  /* Subtle background */
+  --ui-bg-muted: var(--ui-color-neutral-50);
   /* Slightly elevated background */
   --ui-bg-elevated: var(--ui-color-neutral-100);
   /* More prominent background */
@@ -263,6 +265,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
 
   /* Default border color */
   --ui-border: var(--ui-color-neutral-200);
+  /* Subtle border */
+  --ui-border-muted: var(--ui-color-neutral-200);
   /* More prominent border */
   --ui-border-accented: var(--ui-color-neutral-300);
   /* Inverted border color */
@@ -285,6 +289,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
 
   /* Main background color */
   --ui-bg: var(--ui-color-neutral-900);
+  /* Subtle background */
+  --ui-bg-muted: var(--ui-color-neutral-800);
   /* Slightly elevated background */
   --ui-bg-elevated: var(--ui-color-neutral-800);
   /* More prominent background */
@@ -294,6 +300,8 @@ Nuxt UI provides a comprehensive set of design tokens for the `neutral` color pa
 
   /* Default border color */
   --ui-border: var(--ui-color-neutral-800);
+  /* Subtle border */
+  --ui-border-muted: var(--ui-color-neutral-700);
   /* More prominent border */
   --ui-border-accented: var(--ui-color-neutral-700);
   /* Inverted border color */
diff --git a/src/runtime/index.css b/src/runtime/index.css
index c4c5516b..de38b4d2 100644
--- a/src/runtime/index.css
+++ b/src/runtime/index.css
@@ -21,11 +21,13 @@
     --ui-text-highlighted: var(--ui-color-neutral-900);
 
     --ui-bg: var(--color-white);
+    --ui-bg-muted: var(--ui-color-neutral-50);
     --ui-bg-elevated: var(--ui-color-neutral-100);
     --ui-bg-accented: var(--ui-color-neutral-200);
     --ui-bg-inverted: var(--ui-color-neutral-900);
 
     --ui-border: var(--ui-color-neutral-200);
+    --ui-border-muted: var(--ui-color-neutral-200);
     --ui-border-accented: var(--ui-color-neutral-300);
     --ui-border-inverted: var(--ui-color-neutral-900);
 
@@ -42,11 +44,13 @@
     --ui-text-highlighted: var(--color-white);
 
     --ui-bg: var(--ui-color-neutral-900);
+    --ui-bg-muted: var(--ui-color-neutral-800);
     --ui-bg-elevated: var(--ui-color-neutral-800);
     --ui-bg-accented: var(--ui-color-neutral-700);
     --ui-bg-inverted: var(--color-white);
 
     --ui-border: var(--ui-color-neutral-800);
+    --ui-border-muted: var(--ui-color-neutral-700);
     --ui-border-accented: var(--ui-color-neutral-700);
     --ui-border-inverted: var(--color-white);
   }