diff --git a/.changeset/five-ends-design.md b/.changeset/five-ends-design.md
new file mode 100644
index 0000000000..47363ed07d
--- /dev/null
+++ b/.changeset/five-ends-design.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-mui-to-bui': patch
+---
+
+Updated CSS token references to use renamed `--bui-bg-app` and `--bui-border-2` tokens.
diff --git a/.changeset/icy-houses-cough.md b/.changeset/icy-houses-cough.md
new file mode 100644
index 0000000000..bd686403bf
--- /dev/null
+++ b/.changeset/icy-houses-cough.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-app-visualizer': patch
+---
+
+Updated CSS token references to use renamed `--bui-border-2` token.
diff --git a/.changeset/plain-deer-sneeze.md b/.changeset/plain-deer-sneeze.md
new file mode 100644
index 0000000000..bb544740ee
--- /dev/null
+++ b/.changeset/plain-deer-sneeze.md
@@ -0,0 +1,21 @@
+---
+'@backstage/ui': minor
+---
+
+**BREAKING:** Renamed and removed CSS tokens.
+
+- Renamed `--bui-bg-neutral-0` to `--bui-bg-app`.
+- Renamed `--bui-border` to `--bui-border-2`.
+- Removed `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled`.
+
+**Migration:**
+
+```diff
+- var(--bui-bg-neutral-0)
++ var(--bui-bg-app)
+
+- var(--bui-border)
++ var(--bui-border-2)
+```
+
+Remove any references to `--bui-border-hover`, `--bui-border-pressed`, and `--bui-border-disabled` as these tokens no longer exist.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index dff52c85d6..7be5089893 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -132,11 +132,11 @@ export default definePreview({
         };
       }, [selectedTheme, selectedThemeName]);
 
-      document.body.style.backgroundColor = 'var(--bui-bg-neutral-0)';
+      document.body.style.backgroundColor = 'var(--bui-bg-app)';
       const docsStoryElements = document.getElementsByClassName('docs-story');
       Array.from(docsStoryElements).forEach(element => {
         (element as HTMLElement).style.backgroundColor =
-          'var(--bui-bg-neutral-0)';
+          'var(--bui-bg-app)';
       });
 
       return (
diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index 617af88ba2..e0f0b68678 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -5,10 +5,10 @@
   --sb-panel-left: 0;
   --sb-panel-right: 0;
   --sb-sidebar-border: none;
-  --sb-sidebar-border-right: 1px solid var(--bui-border);
+  --sb-sidebar-border-right: 1px solid var(--bui-border-2);
   --sb-sidebar-bg: #000;
   --sb-options-border: none;
-  --sb-options-border-left: 1px solid var(--bui-border);
+  --sb-options-border-left: 1px solid var(--bui-border-2);
   --sb-content-padding-inline: 250px;
 }
 
@@ -31,8 +31,8 @@
 }
 
 [data-theme-name='spotify'][data-theme-mode='light'] {
-  --sb-sidebar-border: 1px solid var(--bui-border);
-  --sb-sidebar-border-right: 1px solid var(--bui-border);
-  --sb-options-border: 1px solid var(--bui-border);
-  --sb-options-border-left: 1px solid var(--bui-border);
+  --sb-sidebar-border: 1px solid var(--bui-border-2);
+  --sb-sidebar-border-right: 1px solid var(--bui-border-2);
+  --sb-options-border: 1px solid var(--bui-border-2);
+  --sb-options-border-left: 1px solid var(--bui-border-2);
 }
diff --git a/.storybook/themes/spotify.css b/.storybook/themes/spotify.css
index c52062fe96..b72683f53e 100644
--- a/.storybook/themes/spotify.css
+++ b/.storybook/themes/spotify.css
@@ -174,7 +174,7 @@
   }
 
   .bui-TableHeader .bui-TableRow {
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
   }
 
   .bui-TableHead {
@@ -226,10 +226,7 @@
   --bui-fg-solid: var(--bui-black);
   --bui-fg-solid-disabled: #62ab7c;
 
-  --bui-border: #d9d9d9;
-  --bui-border-hover: rgba(0, 0, 0, 0.3);
-  --bui-border-pressed: rgba(0, 0, 0, 0.5);
-  --bui-border-disabled: rgba(0, 0, 0, 0.1);
+  --bui-border-2: #d9d9d9;
   --bui-border-danger: #f87a7a;
   --bui-border-warning: #e36d05;
   --bui-border-success: #53db83;
@@ -237,16 +234,16 @@
   --bui-ring: rgba(0, 0, 0, 0.2);
 
   .bui-HeaderToolbarWrapper {
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
   }
 
   .bui-HeaderTabsWrapper {
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
   }
 }
 
 [data-theme-mode='dark'][data-theme-name='spotify'] {
-  --bui-bg-neutral-0: var(--bui-black);
+  --bui-bg-app: var(--bui-black);
 
   --bui-bg-solid: #1ed760;
   --bui-bg-solid-hover: #3be477;
@@ -266,10 +263,7 @@
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
 
-  --bui-border: #373737;
-  --bui-border-hover: rgba(255, 255, 255, 0.4);
-  --bui-border-pressed: rgba(255, 255, 255, 0.5);
-  --bui-border-disabled: rgba(255, 255, 255, 0.2);
+  --bui-border-2: #373737;
   --bui-border-danger: #f87a7a;
   --bui-border-warning: #e36d05;
   --bui-border-success: #53db83;
diff --git a/docs-ui/src/app/tokens/page.mdx b/docs-ui/src/app/tokens/page.mdx
index 46d67ded95..6d9b5e65ca 100644
--- a/docs-ui/src/app/tokens/page.mdx
+++ b/docs-ui/src/app/tokens/page.mdx
@@ -137,7 +137,7 @@ the value, you add an object with the value and the breakpoint prefix.
 ## Neutral background colors
 
 These colors form a layered neutral scale for your application backgrounds.
-`--bui-bg-neutral-0` is the base background color of your app. Each subsequent level
+`--bui-bg-app` is the base background color of your app. Each subsequent level
 (1 through 4) represents an elevated layer on top of the previous one, with hover,
 pressed, and disabled variants for interactive states.
 
@@ -151,7 +151,7 @@ pressed, and disabled variants for interactive states.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-bg-neutral-0</Chip>
+        <Chip head>--bui-bg-app</Chip>
       </Table.Cell>
       <Table.Cell>
         The base background color of your Backstage instance.
@@ -462,13 +462,19 @@ low contrast to help as a separator with the different background colors.
   <Table.Body>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border</Chip>
+        <Chip head>--bui-border-1</Chip>
+      </Table.Cell>
+      <Table.Cell>Subtle border for low-contrast separators.</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell>
+        <Chip head>--bui-border-2</Chip>
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-neutral-1`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-hover</Chip>
+        <Chip head>--bui-border-2-hover</Chip>
       </Table.Cell>
       <Table.Cell>
         Used when the component is interactive and hovered.
@@ -476,7 +482,7 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-pressed</Chip>
+        <Chip head>--bui-border-2-pressed</Chip>
       </Table.Cell>
       <Table.Cell>
         Used when the component is interactive and focused.
@@ -484,31 +490,31 @@ low contrast to help as a separator with the different background colors.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-disabled</Chip>
+        <Chip head>--bui-border-2-disabled</Chip>
       </Table.Cell>
       <Table.Cell>Used when the component is disabled.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-danger</Chip>
+        <Chip head>--bui-border-2-danger</Chip>
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-danger`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-warning</Chip>
+        <Chip head>--bui-border-2-warning</Chip>
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-warning`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-success</Chip>
+        <Chip head>--bui-border-2-success</Chip>
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-success`.</Table.Cell>
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--bui-border-info</Chip>
+        <Chip head>--bui-border-2-info</Chip>
       </Table.Cell>
       <Table.Cell>It should be used on top of `--bui-bg-info`.</Table.Cell>
     </Table.Row>
diff --git a/docs-ui/src/components/ColorFamily/ColorFamily.tsx b/docs-ui/src/components/ColorFamily/ColorFamily.tsx
index 0e168f0bbe..07b8779503 100644
--- a/docs-ui/src/components/ColorFamily/ColorFamily.tsx
+++ b/docs-ui/src/components/ColorFamily/ColorFamily.tsx
@@ -55,7 +55,7 @@ export const ColorFamily = () => {
       <div className={styles.visual}>
         <div
           className={styles.base}
-          style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}
+          style={{ backgroundColor: 'var(--bui-bg-app)' }}
         >
           <span className={styles.baseLabel}>Neutral 0</span>
           <NeutralLevel level={1}>
diff --git a/docs-ui/src/components/Snippet/styles.module.css b/docs-ui/src/components/Snippet/styles.module.css
index 01ed111b91..c6270670a7 100644
--- a/docs-ui/src/components/Snippet/styles.module.css
+++ b/docs-ui/src/components/Snippet/styles.module.css
@@ -7,7 +7,7 @@
 .preview {
   border-radius: 8px;
   box-shadow: inset 0 0 0 1px var(--border);
-  background-color: var(--bui-bg-neutral-0);
+  background-color: var(--bui-bg-app);
   padding: 1px;
   position: relative;
 }
@@ -90,7 +90,7 @@
 .sideBySidePreview {
   border-radius: 8px;
   box-shadow: inset 0 0 0 1px var(--border);
-  background-color: var(--bui-bg-neutral-0);
+  background-color: var(--bui-bg-app);
   padding: 1px;
   min-width: 0;
   display: flex;
diff --git a/docs-ui/src/css/theme-backstage.css b/docs-ui/src/css/theme-backstage.css
index 96861993ee..7316fe0549 100644
--- a/docs-ui/src/css/theme-backstage.css
+++ b/docs-ui/src/css/theme-backstage.css
@@ -45,7 +45,7 @@
     --bui-bg-solid-hover: #163a66;
     --bui-bg-solid-pressed: #0f2b4e;
     --bui-bg-solid-disabled: #163a66;
-    --bui-bg-neutral-0: #f8f8f8;
+    --bui-bg-app: #f8f8f8;
     --bui-bg-neutral-1: #fff;
     --bui-bg-neutral-1-hover: oklch(0% 0 0/0.12);
     --bui-bg-neutral-1-pressed: oklch(0% 0 0/0.16);
@@ -79,10 +79,7 @@
     --bui-fg-warning: #ef7a32;
     --bui-fg-success: #1ed760;
     --bui-fg-info: #0d74ce;
-    --bui-border: #0000001a;
-    --bui-border-hover: #0003;
-    --bui-border-pressed: #0006;
-    --bui-border-disabled: #0000001a;
+    --bui-border-2: #0000001a;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
@@ -98,7 +95,7 @@
     --bui-bg-solid-hover: #83b9fd;
     --bui-bg-solid-pressed: #83b9fd;
     --bui-bg-solid-disabled: #1b3d68;
-    --bui-bg-neutral-0: #333;
+    --bui-bg-app: #333;
     --bui-bg-neutral-1: oklch(100% 0 0/0.1);
     --bui-bg-neutral-1-hover: oklch(100% 0 0/0.14);
     --bui-bg-neutral-1-pressed: oklch(100% 0 0/0.2);
@@ -132,10 +129,7 @@
     --bui-fg-warning: #ffa057;
     --bui-fg-success: #1ed760;
     --bui-fg-info: #70b8ff;
-    --bui-border: #ffffff1f;
-    --bui-border-hover: #fff6;
-    --bui-border-pressed: #ffffff80;
-    --bui-border-disabled: #fff3;
+    --bui-border-2: #ffffff1f;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
@@ -243,7 +237,7 @@
     }
   }
   body {
-    background-color: var(--bui-bg-neutral-0);
+    background-color: var(--bui-bg-app);
     color: var(--bui-fg-primary);
     font-family: var(--bui-font-regular);
     font-weight: var(--bui-font-weight-regular);
diff --git a/docs-ui/src/css/theme-spotify.css b/docs-ui/src/css/theme-spotify.css
index 73a067d5b0..64afbb6d75 100644
--- a/docs-ui/src/css/theme-spotify.css
+++ b/docs-ui/src/css/theme-spotify.css
@@ -156,7 +156,7 @@
     display: block;
   }
   & .bui-TableHeader .bui-TableRow {
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
   }
   & .bui-TableHead {
     font-size: var(--bui-font-size-2);
@@ -198,21 +198,18 @@
   --bui-fg-secondary: #757575;
   --bui-fg-solid: var(--bui-black);
   --bui-fg-solid-disabled: #62ab7c;
-  --bui-border: #d9d9d9;
-  --bui-border-hover: #0000004d;
-  --bui-border-pressed: #00000080;
-  --bui-border-disabled: #0000001a;
+  --bui-border-2: #d9d9d9;
   --bui-border-danger: #f87a7a;
   --bui-border-warning: #e36d05;
   --bui-border-success: #53db83;
   --bui-ring: #0003;
   & .bui-HeaderToolbarWrapper,
   & .bui-HeaderTabsWrapper {
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
   }
 }
 [data-theme-mode='dark'][data-theme-name='spotify'] {
-  --bui-bg-neutral-0: var(--bui-black);
+  --bui-bg-app: var(--bui-black);
   --bui-bg-solid: #1ed760;
   --bui-bg-solid-hover: #3be477;
   --bui-bg-solid-pressed: #1abc54;
@@ -228,10 +225,7 @@
   --bui-fg-danger: #e22b2b;
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
-  --bui-border: #373737;
-  --bui-border-hover: #fff6;
-  --bui-border-pressed: #ffffff80;
-  --bui-border-disabled: #fff3;
+  --bui-border-2: #373737;
   --bui-border-danger: #f87a7a;
   --bui-border-warning: #e36d05;
   --bui-border-success: #53db83;
diff --git a/docs-ui/src/snippets/code-snippets.ts b/docs-ui/src/snippets/code-snippets.ts
index 92a9cfe2db..30d036461f 100644
--- a/docs-ui/src/snippets/code-snippets.ts
+++ b/docs-ui/src/snippets/code-snippets.ts
@@ -4,7 +4,7 @@ export const customTheme = `:root {
   --bui-font-regular: system-ui;
   --bui-font-weight-regular: 400;
   --bui-font-weight-bold: 600;
-  --bui-bg-neutral-0: #f8f8f8;
+  --bui-bg-app: #f8f8f8;
   --bui-bg-neutral-1: #fff;
   /* ... other CSS variables */
 
@@ -19,7 +19,7 @@ export const customTheme = `:root {
   --bui-font-regular: system-ui;
   --bui-font-weight-regular: 400;
   --bui-font-weight-bold: 600;
-  --bui-bg-neutral-0: #f8f8f8;
+  --bui-bg-app: #f8f8f8;
   --bui-bg-neutral-1: #fff;
   /* ... other CSS variables */
 
diff --git a/docs/conf/user-interface/index.md b/docs/conf/user-interface/index.md
index abe74dddef..a70026a759 100644
--- a/docs/conf/user-interface/index.md
+++ b/docs/conf/user-interface/index.md
@@ -103,13 +103,13 @@ Backstage UI is using light by default under `:root` but you can target it more
 
 [data-theme-mode='light'] {
   /* Light theme specific styles */
-  --bui-bg-neutral-0: #f8f8f8;
+  --bui-bg-app: #f8f8f8;
   --bui-fg-primary: #000;
 }
 
 [data-theme-mode='dark'] {
   /* Dark theme specific styles */
-  --bui-bg-neutral-0: #333333;
+  --bui-bg-app: #333333;
   --bui-fg-primary: #fff;
 }
 ```
@@ -124,8 +124,8 @@ And if you’d like to go even further, you can target specific component class
 
 | Token Name           | Description                                                                                   |
 | -------------------- | --------------------------------------------------------------------------------------------- |
-| `--bui-bg-neutral-0` | This is used to define the background color of your app. It will only be used once.           |
-| `--bui-bg-neutral-1` | We ar using this color to sit on top of `--bui-bg-neutral-0` mostly for `Card`, `Dialog`, ... |
+| `--bui-bg-app` | This is used to define the background color of your app. It will only be used once.           |
+| `--bui-bg-neutral-1` | We ar using this color to sit on top of `--bui-bg-app` mostly for `Card`, `Dialog`, ... |
 | `--bui-bg-neutral-2` | This is for content inside elevated components. This colour is less common.                   |
 | `--bui-bg-solid`     | This is used for main actions like primary buttons.                                           |
 | `--bui-fg-solid`     | This is for texts or icons on top of a solid backgrounds.                                     |
@@ -135,7 +135,8 @@ And if you’d like to go even further, you can target specific component class
 | `--bui-fg-warning`   | Used for warning states and cautionary information.                                           |
 | `--bui-fg-success`   | Used for success states and positive feedback.                                                |
 | `--bui-fg-info`      | Used for informational content and neutral status.                                            |
-| `--bui-border`       | Main borders around surfaces like `Card`, `Dialog`, ...                                       |
+| `--bui-border-1`       | Subtle borders for low-contrast separators.                                                   |
+| `--bui-border-2`       | Main borders around surfaces like `Card`, `Dialog`, ...                                       |
 | `--bui-font-regular` | The main font of your app.                                                                    |
 
 <details>
@@ -150,11 +151,11 @@ And if you’d like to go even further, you can target specific component class
 
 #### Neutral background colors
 
-These colors form a layered neutral scale for your application backgrounds. `--bui-bg-neutral-0` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states.
+These colors form a layered neutral scale for your application backgrounds. `--bui-bg-app` is the base background color. Each subsequent level (1 through 4) represents an elevated layer, with hover, pressed, and disabled variants for interactive states.
 
 | Token Name                    | Description                                                  |
 | ----------------------------- | ------------------------------------------------------------ |
-| `--bui-bg-neutral-0`          | The base background color of your Backstage instance.        |
+| `--bui-bg-app`          | The base background color of your Backstage instance.        |
 | `--bui-bg-neutral-1`          | First elevated layer. Use for cards, dialogs, and panels.    |
 | `--bui-bg-neutral-1-hover`    | Hover state for elements on neutral-1.                       |
 | `--bui-bg-neutral-1-pressed`  | Pressed state for elements on neutral-1.                     |
@@ -215,10 +216,8 @@ These border colors are mostly meant to be used as borders on top of any compone
 
 | Token Name              | Description                                         |
 | ----------------------- | --------------------------------------------------- |
-| `--bui-border`          | It should be used on top of `--bui-bg-neutral-1`.   |
-| `--bui-border-hover`    | Used when the component is interactive and hovered. |
-| `--bui-border-pressed`  | Used when the component is interactive and hovered. |
-| `--bui-border-disabled` | Used when the component is disabled.                |
+| `--bui-border-1`          | Subtle border for low-contrast separators.           |
+| `--bui-border-2`          | It should be used on top of `--bui-bg-neutral-1`.   |
 | `--bui-border-danger`   | It should be used on top of `--bui-bg-danger`.      |
 | `--bui-border-warning`  | It should be used on top of `--bui-bg-warning`.     |
 | `--bui-border-success`  | It should be used on top of `--bui-bg-success`.     |
diff --git a/docs/releases/v1.48.0-next.2-changelog.md b/docs/releases/v1.48.0-next.2-changelog.md
index a9f60b13d0..5d041b559c 100644
--- a/docs/releases/v1.48.0-next.2-changelog.md
+++ b/docs/releases/v1.48.0-next.2-changelog.md
@@ -90,7 +90,7 @@ Upgrade Helper: [https://backstage.github.io/upgrade-helper/?to=1.48.0-next.2](h
 
   ```diff
   - background: var(--bui-bg-surface-0);
-  + background: var(--bui-bg-neutral-0);
+  + background: var(--bui-bg-app);
   ```
 
   Replace on-surface tokens shifted by +1:
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index a22c5ccc3a..7b42996707 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -14,7 +14,7 @@
 
   ```diff
   - background: var(--bui-bg-surface-0);
-  + background: var(--bui-bg-neutral-0);
+  + background: var(--bui-bg-app);
   ```
 
   Replace on-surface tokens shifted by +1:
diff --git a/packages/ui/src/components/Avatar/Avatar.module.css b/packages/ui/src/components/Avatar/Avatar.module.css
index ffaad2d18f..56c68c7100 100644
--- a/packages/ui/src/components/Avatar/Avatar.module.css
+++ b/packages/ui/src/components/Avatar/Avatar.module.css
@@ -74,7 +74,7 @@
     width: 100%;
     font-size: var(--bui-font-size-3);
     font-weight: var(--bui-font-weight-regular);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
+    box-shadow: inset 0 0 0 1px var(--bui-border-2);
     border-radius: var(--bui-radius-full);
   }
 }
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index 0b6613f927..deadc96358 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -42,7 +42,7 @@
     justify-content: center;
     width: 1rem;
     height: 1rem;
-    box-shadow: inset 0 0 0 1px var(--bui-border);
+    box-shadow: inset 0 0 0 1px var(--bui-border-2);
     border-radius: 2px;
     transition: background-color 0.2s ease-in-out;
     background-color: var(--bui-bg-neutral-1);
@@ -64,15 +64,10 @@
 
     .bui-Checkbox[data-indeterminate] & {
       background-color: var(--bui-bg-neutral-1);
-      box-shadow: inset 0 0 0 1px var(--bui-border);
+      box-shadow: inset 0 0 0 1px var(--bui-border-2);
       color: var(--bui-fg-primary);
     }
 
-    .bui-Checkbox[data-hovered]:not([data-selected]):not([data-indeterminate])
-      & {
-      box-shadow: inset 0 0 0 1px var(--bui-border-hover);
-    }
-
     @media (prefers-reduced-motion: reduce) {
       & {
         transition: none;
diff --git a/packages/ui/src/components/Dialog/Dialog.module.css b/packages/ui/src/components/Dialog/Dialog.module.css
index 201f25ed3a..cd0351cc4a 100644
--- a/packages/ui/src/components/Dialog/Dialog.module.css
+++ b/packages/ui/src/components/Dialog/Dialog.module.css
@@ -45,7 +45,7 @@
   .bui-Dialog {
     background: var(--bui-bg-neutral-1);
     border-radius: 0.5rem;
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     color: var(--bui-fg-primary);
     position: relative;
     width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
@@ -73,7 +73,7 @@
     align-items: center;
     padding-inline: var(--bui-space-3);
     padding-block: var(--bui-space-2);
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
   }
 
   .bui-DialogHeaderTitle {
@@ -89,7 +89,7 @@
     gap: var(--bui-space-2);
     padding-inline: var(--bui-space-3);
     padding-block: var(--bui-space-3);
-    border-top: 1px solid var(--bui-border);
+    border-top: 1px solid var(--bui-border-2);
   }
 
   .bui-DialogBody {
diff --git a/packages/ui/src/components/Header/Header.module.css b/packages/ui/src/components/Header/Header.module.css
index 4cd94d30ea..ec00d85f86 100644
--- a/packages/ui/src/components/Header/Header.module.css
+++ b/packages/ui/src/components/Header/Header.module.css
@@ -29,7 +29,7 @@
       left: 0px;
       right: 0px;
       height: 16px;
-      background-color: var(--bui-bg-neutral-0);
+      background-color: var(--bui-bg-app);
       z-index: 0;
     }
   }
@@ -43,7 +43,7 @@
     justify-content: space-between;
     background-color: var(--bui-bg-neutral-1);
     padding-inline: var(--bui-space-5);
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
     color: var(--bui-fg-primary);
     height: 52px;
   }
@@ -89,7 +89,7 @@
 
   .bui-HeaderTabsWrapper {
     padding-inline: var(--bui-space-3);
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
   }
 }
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 759bfb9043..d21806b506 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     box-shadow: var(--bui-shadow);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     border-radius: var(--bui-radius-2);
     background: var(--bui-bg-neutral-1);
     color: var(--bui-fg-primary);
@@ -183,7 +183,7 @@
 
   .bui-MenuSeparator {
     height: 1px;
-    background: var(--bui-border);
+    background: var(--bui-border-2);
     margin-inline: var(--bui-space-1_5);
     margin-block: var(--bui-space-1);
   }
@@ -194,7 +194,7 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
     height: 2rem;
 
diff --git a/packages/ui/src/components/PasswordField/PasswordField.module.css b/packages/ui/src/components/PasswordField/PasswordField.module.css
index d89060f248..8ede1212a0 100644
--- a/packages/ui/src/components/PasswordField/PasswordField.module.css
+++ b/packages/ui/src/components/PasswordField/PasswordField.module.css
@@ -37,7 +37,7 @@
     display: flex;
     align-items: center;
     border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
     transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
 
@@ -49,15 +49,6 @@
       height: 2.5rem;
     }
 
-    &:focus-within {
-      border-color: var(--bui-border-pressed);
-      outline-width: 0px;
-    }
-
-    &:hover {
-      border-color: var(--bui-border-hover);
-    }
-
     &:has([data-invalid]) {
       border-color: var(--bui-fg-danger);
     }
@@ -65,7 +56,6 @@
     &:has([data-disabled]) {
       opacity: 0.5;
       cursor: not-allowed;
-      border: 1px solid var(--bui-border-disabled);
     }
   }
 
diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css
index 8fb53b9ab0..5413532bc7 100644
--- a/packages/ui/src/components/Popover/Popover.module.css
+++ b/packages/ui/src/components/Popover/Popover.module.css
@@ -20,8 +20,8 @@
   .bui-Popover {
     box-shadow: var(--bui-shadow);
     border-radius: var(--bui-radius-3);
-    background: var(--bui-bg-neutral-1);
-    border: 1px solid var(--bui-border);
+    background: var(--bui-bg-popover);
+    border: 1px solid var(--bui-border-1);
     forced-color-adjust: none;
     outline: none;
     max-height: inherit;
@@ -90,11 +90,11 @@
       elements in order to guarantee that the stroke is
       always overlaying a consistent color. */
       path:nth-child(1) {
-        fill: var(--bui-bg-neutral-1);
+        fill: var(--bui-bg-popover);
       }
 
       path:nth-child(2) {
-        fill: var(--bui-fg-secondary);
+        fill: var(--bui-border-1);
       }
 
       /* The arrow svg overlaps the popover by 2px, so we
@@ -122,16 +122,16 @@
     }
   }
 
-  [data-theme='dark'] .bui-Popover {
-    background: var(--bui-bg-neutral-2);
-    border: 1px solid var(--bui-border);
+  /* [data-theme='dark'] .bui-Popover {
+    background: var(--bui-bg-popover);
+    border: 1px solid var(--bui-border-1);
   }
 
   [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) {
-    fill: var(--bui-bg-neutral-2);
+    fill: var(--bui-bg-popover);
   }
 
   [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) {
     fill: var(--bui-fg-secondary);
-  }
+  } */
 }
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.module.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
index 3b816709ef..1a2cd221ca 100644
--- a/packages/ui/src/components/RadioGroup/RadioGroup.module.css
+++ b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
@@ -50,7 +50,7 @@
       width: 1rem;
       height: 1rem;
       box-sizing: border-box;
-      border: 0.125rem solid var(--bui-border);
+      border: 0.125rem solid var(--bui-border-2);
       background: var(--bui-bg-neutral-1);
       border-radius: var(--bui-radius-full);
       transition: all 200ms;
@@ -59,7 +59,7 @@
     }
 
     &[data-pressed]:before {
-      border-color: var(--bui-border);
+      border-color: var(--bui-border-2);
     }
 
     &[data-selected] {
@@ -83,13 +83,8 @@
       color: var(--bui-fg-disabled);
 
       &:before {
-        border-color: var(--bui-border-disabled);
         background: var(--bui-bg-disabled);
       }
-
-      &[data-selected]:before {
-        border-color: var(--bui-border-disabled);
-      }
     }
 
     &[data-invalid]:before {
@@ -105,13 +100,8 @@
       color: var(--bui-fg-disabled);
 
       &:before {
-        border-color: var(--bui-border-disabled);
         background: var(--bui-bg-disabled);
       }
-
-      &[data-selected]:before {
-        border-color: var(--bui-border-disabled);
-      }
     }
   }
 }
diff --git a/packages/ui/src/components/SearchField/SearchField.module.css b/packages/ui/src/components/SearchField/SearchField.module.css
index 44c1691ab9..da854ee7b1 100644
--- a/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/packages/ui/src/components/SearchField/SearchField.module.css
@@ -93,7 +93,7 @@
     display: flex;
     align-items: center;
     border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
     transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;
 
@@ -105,15 +105,6 @@
       height: 2.5rem;
     }
 
-    &:focus-within {
-      border-color: var(--bui-border-pressed);
-      outline-width: 0px;
-    }
-
-    &:hover {
-      border-color: var(--bui-border-hover);
-    }
-
     &[data-invalid] {
       border-color: var(--bui-fg-danger);
     }
@@ -121,7 +112,6 @@
     &[data-disabled] {
       opacity: 0.5;
       cursor: not-allowed;
-      border: 1px solid var(--bui-border-disabled);
     }
   }
 
diff --git a/packages/ui/src/components/Select/Select.module.css b/packages/ui/src/components/Select/Select.module.css
index 2c3945b4c2..19118acf3c 100644
--- a/packages/ui/src/components/Select/Select.module.css
+++ b/packages/ui/src/components/Select/Select.module.css
@@ -35,7 +35,7 @@
   .bui-SelectTrigger {
     box-sizing: border-box;
     border-radius: var(--bui-radius-3);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
     display: flex;
     justify-content: space-between;
@@ -72,16 +72,6 @@
       color: var(--bui-fg-secondary);
     }
 
-    &:hover {
-      transition: border-color 0.2s ease-in-out;
-      border-color: var(--bui-border-hover);
-    }
-
-    &:focus-visible {
-      border-color: var(--bui-border-pressed);
-      outline: 0;
-    }
-
     .bui-Select[data-invalid] & {
       border-color: var(--bui-fg-danger);
 
@@ -93,7 +83,6 @@
 
     &[disabled] {
       cursor: not-allowed;
-      border-color: var(--bui-border-disabled);
       color: var(--bui-fg-disabled);
     }
   }
@@ -194,7 +183,7 @@
     display: flex;
     align-items: center;
     padding-inline: var(--bui-space-3) 0;
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
   }
 
   .bui-SelectSearch {
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index be35898fb0..0faa256e06 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -30,7 +30,7 @@
   }
 
   .bui-TableHeader {
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
     transition: color 0.2s ease-in-out;
   }
 
@@ -81,7 +81,7 @@
   }
 
   .bui-TableRow {
-    border-bottom: 1px solid var(--bui-border);
+    border-bottom: 1px solid var(--bui-border-2);
     transition: color 0.2s ease-in-out;
 
     &:hover {
diff --git a/packages/ui/src/components/TextField/TextField.module.css b/packages/ui/src/components/TextField/TextField.module.css
index 5d582d775c..a40c1dc4a7 100644
--- a/packages/ui/src/components/TextField/TextField.module.css
+++ b/packages/ui/src/components/TextField/TextField.module.css
@@ -75,7 +75,7 @@
     align-items: center;
     padding: 0 var(--bui-space-3);
     border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     background-color: var(--bui-bg-neutral-1);
     font-size: var(--bui-font-size-3);
     font-family: var(--bui-font-regular);
@@ -95,20 +95,6 @@
       color: var(--bui-fg-secondary);
     }
 
-    &[data-focused] {
-      outline-color: var(--bui-border-pressed);
-      outline-width: 0px;
-    }
-
-    &[data-hovered] {
-      border-color: var(--bui-border-hover);
-    }
-
-    &[data-focused] {
-      border-color: var(--bui-border-pressed);
-      outline-width: 0px;
-    }
-
     &[data-invalid] {
       border-color: var(--bui-fg-danger);
     }
@@ -116,7 +102,6 @@
     &[data-disabled] {
       opacity: 0.5;
       cursor: not-allowed;
-      border: 1px solid var(--bui-border-disabled);
     }
   }
 }
diff --git a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
index 90bedd1756..fef9b33a9a 100644
--- a/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
+++ b/packages/ui/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css
@@ -23,7 +23,7 @@
     flex-wrap: nowrap;
     border-radius: var(--bui-radius-2);
     overflow: hidden;
-    box-shadow: inset 0 0 0 1px var(--bui-border);
+    box-shadow: inset 0 0 0 1px var(--bui-border-2);
     width: fit-content;
   }
 
@@ -65,7 +65,7 @@
   .bui-ToggleButtonGroup:not([data-orientation='vertical'])
     :global(.bui-ToggleButton)
     + :global(.bui-ToggleButton) {
-    border-left: 1px solid var(--bui-border);
+    border-left: 1px solid var(--bui-border-2);
   }
 
   /* Vertical dividers */
@@ -77,7 +77,7 @@
   .bui-ToggleButtonGroup[data-orientation='vertical']
     :global(.bui-ToggleButton)
     + :global(.bui-ToggleButton) {
-    border-top: 1px solid var(--bui-border);
+    border-top: 1px solid var(--bui-border-2);
   }
 
   /* Vertical radius rules */
diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css
index 3841fbbcec..9c9bc503b5 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.module.css
+++ b/packages/ui/src/components/Tooltip/Tooltip.module.css
@@ -21,7 +21,7 @@
     box-shadow: var(--bui-shadow);
     border-radius: 4px;
     background: var(--bui-bg-neutral-1);
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
     forced-color-adjust: none;
     outline: none;
     padding: var(--bui-space-2) var(--bui-space-3);
@@ -109,7 +109,7 @@
   [data-theme='dark'] .bui-Tooltip {
     background: var(--bui-bg-neutral-2);
     box-shadow: none;
-    border: 1px solid var(--bui-border);
+    border: 1px solid var(--bui-border-2);
   }
 
   [data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) {
diff --git a/packages/ui/src/css/colors.stories.tsx b/packages/ui/src/css/colors.stories.tsx
index c4768da3ae..faa85aceda 100644
--- a/packages/ui/src/css/colors.stories.tsx
+++ b/packages/ui/src/css/colors.stories.tsx
@@ -24,7 +24,7 @@ const meta = preview.meta({
 
 export const Default = meta.story({
   render: () => (
-    <div style={{ backgroundColor: 'var(--bui-bg-neutral-0)' }}>
+    <div style={{ backgroundColor: 'var(--bui-bg-app)' }}>
       <Box p="4" style={{ backgroundColor: 'var(--bui-bg-neutral-1)' }}>
         <Flex direction="row" gap="4" align="center">
           <Text>Neutral 1</Text>
diff --git a/packages/ui/src/css/core.css b/packages/ui/src/css/core.css
index f744f253bf..1047215ee8 100644
--- a/packages/ui/src/css/core.css
+++ b/packages/ui/src/css/core.css
@@ -27,7 +27,7 @@
   }
 
   body {
-    background-color: var(--bui-bg-neutral-0);
+    background-color: var(--bui-bg-app);
 
     /* Text defaults */
     color: var(--bui-fg-primary);
diff --git a/packages/ui/src/css/tokens.css b/packages/ui/src/css/tokens.css
index 4f5cb08bfb..7028260eb0 100644
--- a/packages/ui/src/css/tokens.css
+++ b/packages/ui/src/css/tokens.css
@@ -77,7 +77,8 @@
     --bui-bg-solid-disabled: #163a66;
 
     /* Neutral background colors */
-    --bui-bg-neutral-0: #f8f8f8;
+    --bui-bg-app: #f8f8f8;
+    --bui-bg-popover: #ffffff;
 
     --bui-bg-neutral-1: #fff;
     --bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
@@ -123,10 +124,8 @@
     --bui-fg-info: #0d74ce;
 
     /* Border colors */
-    --bui-border: rgba(0, 0, 0, 0.1);
-    --bui-border-hover: rgba(0, 0, 0, 0.2);
-    --bui-border-pressed: rgba(0, 0, 0, 0.4);
-    --bui-border-disabled: rgba(0, 0, 0, 0.1);
+    --bui-border-1: #d5d5d5;
+    --bui-border-2: #bababa;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
@@ -153,7 +152,8 @@
     --bui-bg-solid-disabled: #1b3d68;
 
     /* Neutral background colors */
-    --bui-bg-neutral-0: #333333;
+    --bui-bg-app: #333333;
+    --bui-bg-popover: #1a1a1a;
 
     --bui-bg-neutral-1: oklch(100% 0 0 / 10%);
     --bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
@@ -199,10 +199,8 @@
     --bui-fg-info: #70b8ff;
 
     /* Border colors */
-    --bui-border: rgba(255, 255, 255, 0.12);
-    --bui-border-hover: rgba(255, 255, 255, 0.4);
-    --bui-border-pressed: rgba(255, 255, 255, 0.5);
-    --bui-border-disabled: rgba(255, 255, 255, 0.2);
+    --bui-border-1: #434343;
+    --bui-border-2: #585858;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
diff --git a/packages/ui/src/css/utilities/sm.css b/packages/ui/src/css/utilities/sm.css
index a9c8ea8ab5..a3b330026e 100644
--- a/packages/ui/src/css/utilities/sm.css
+++ b/packages/ui/src/css/utilities/sm.css
@@ -21,7 +21,7 @@
     }
 
     .bui-sm-border-base {
-      border-color: var(--bui-border);
+      border-color: var(--bui-border-2);
       border-width: 1px;
       border-style: solid;
     }
@@ -38,7 +38,6 @@
     }
 
     .bui-sm-border-selected {
-      border-color: var(--bui-border-pressed);
       border-width: 1px;
       border-style: solid;
     }
diff --git a/packages/ui/src/css/utilities/xs.css b/packages/ui/src/css/utilities/xs.css
index 2907c7d468..dc9d00574d 100644
--- a/packages/ui/src/css/utilities/xs.css
+++ b/packages/ui/src/css/utilities/xs.css
@@ -20,7 +20,7 @@
   }
 
   .bui-border-base {
-    border-color: var(--bui-border);
+    border-color: var(--bui-border-2);
     border-width: 1px;
     border-style: solid;
   }
@@ -37,7 +37,6 @@
   }
 
   .bui-border-selected {
-    border-color: var(--bui-border-pressed);
     border-width: 1px;
     border-style: solid;
   }
diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
index 37cf9787ae..90ab44b626 100644
--- a/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
+++ b/plugins/app-visualizer/src/components/AppVisualizerPage/DetailedVisualizer.tsx
@@ -363,7 +363,7 @@ export function DetailedVisualizer({ tree }: { tree: AppTree }) {
         style={{
           flex: '0 0 auto',
           background: 'var(--bui-bg-neutral-1)',
-          border: '1px solid var(--bui-border)',
+          border: '1px solid var(--bui-border-2)',
           borderRadius: 'var(--bui-radius-2)',
         }}
       >
diff --git a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
index b8bcd859ac..99fb20ac28 100644
--- a/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
+++ b/plugins/app-visualizer/src/components/AppVisualizerPage/TextVisualizer.tsx
@@ -93,7 +93,7 @@ export function TextVisualizer({ tree }: { tree: AppTree }) {
         px="4"
         style={{
           background: 'var(--bui-bg-neutral-1)',
-          borderTop: '1px solid var(--bui-border)',
+          borderTop: '1px solid var(--bui-border-2)',
         }}
       >
         <Checkbox isSelected={showOutputs} onChange={setShowOutputs}>
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
index 355100be86..4b6024885b 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.test.tsx
@@ -26,7 +26,7 @@ describe('BuiThemePreview', () => {
         mode="light"
         styleObject={{
           '--bui-bg-neutral-2': '#ffffff',
-          '--bui-border': '#cccccc',
+          '--bui-border-2': '#cccccc',
           '--bui-radius-2': '4px',
           '--bui-space-3': '12px',
           '--bui-fg-secondary': '#777777',
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
index 0a745e1aeb..2f1edbff9f 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/BuiThemePreview.tsx
@@ -49,7 +49,7 @@ export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
         backgroundColor: 'var(--bui-bg-neutral-2)',
         padding: 'var(--bui-space-3)',
         borderRadius: 'var(--bui-radius-2)',
-        border: '1px solid var(--bui-border)',
+        border: '1px solid var(--bui-border-2)',
       }}
     >
       <Flex direction="column" gap="4">
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx b/plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
index 19749165d7..6341348862 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/ThemeContent.tsx
@@ -99,7 +99,7 @@ export function ThemeContent({
                 p="3"
                 style={{
                   backgroundColor: 'var(--bui-bg-neutral-2)',
-                  border: '1px solid var(--bui-border)',
+                  border: '1px solid var(--bui-border-2)',
                   borderRadius: 'var(--bui-radius-2)',
                   fontFamily: 'monospace',
                   fontSize: '14px',
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
index 31c2fa695c..95dac618cf 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.test.ts
@@ -59,7 +59,7 @@ describe('convertMuiToBuiTheme', () => {
     // Border radius tokens are only generated when radius is 0
     expect(result.css).not.toContain('--bui-radius-3:');
     // Background default maps to surface-2
-    expect(result.css).toContain('--bui-bg-neutral-0: #f5f5f5;');
+    expect(result.css).toContain('--bui-bg-app: #f5f5f5;');
     expect(result.css).toContain('--bui-bg-neutral-2: #f5f5f5;');
     expect(result.css).toContain('--bui-bg-neutral-1: #ffffff;');
     expect(result.css).toContain('--bui-fg-primary: #000000;');
@@ -98,7 +98,7 @@ describe('convertMuiToBuiTheme', () => {
 
     expect(result.css).toContain("[data-theme-mode='dark'] {");
     // Background default maps to surface-2 in dark mode as well
-    expect(result.css).toContain('--bui-bg-neutral-0: #121212;');
+    expect(result.css).toContain('--bui-bg-app: #121212;');
     expect(result.css).toContain('--bui-bg-neutral-2: #121212;');
     expect(result.css).toContain('--bui-bg-neutral-1: #1e1e1e;');
     expect(result.css).toContain('--bui-fg-primary: #ffffff;');
diff --git a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
index 326fd08ef2..7f32621dd2 100644
--- a/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
+++ b/plugins/mui-to-bui/src/components/BuiThemerPage/convertMuiToBuiTheme.ts
@@ -110,8 +110,8 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
   });
 
   // Generate neutral background colors
+  styleObject['--bui-bg-app'] = palette.background.default;
   Object.entries({
-    'neutral-0': palette.background.default,
     'neutral-1': palette.background.paper,
     'neutral-2': palette.background.default,
     'neutral-3': palette.background.default,
@@ -138,7 +138,7 @@ function generateBuiVariables(theme: Mui5Theme): Record<string, string> {
   });
 
   // Base border color if available
-  styleObject['--bui-border'] = palette.border || palette.divider;
+  styleObject['--bui-border-2'] = palette.border || palette.divider;
   styleObject['--bui-border-danger'] = palette.error.main;
   styleObject['--bui-border-warning'] = palette.warning.main;
   styleObject['--bui-border-success'] = palette.success.main;