diff --git a/canon-docs/src/app/(docs)/theme/theming/page.mdx b/canon-docs/src/app/(docs)/theme/theming/page.mdx
index 6ecc2cba58..cab9480a14 100644
--- a/canon-docs/src/app/(docs)/theme/theming/page.mdx
+++ b/canon-docs/src/app/(docs)/theme/theming/page.mdx
@@ -53,7 +53,7 @@ color of your app.
     </Table.Row>
     <Table.Row>
       <Table.Cell>
-        <Chip head>--canon-bg-elevated</Chip>
+        <Chip head>--canon-bg-surface-1</Chip>
       </Table.Cell>
       <Table.Cell>Use for any panels or elevated surfaces.</Table.Cell>
     </Table.Row>
@@ -189,7 +189,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-primary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
+        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -197,7 +197,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-secondary</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
+        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -205,7 +205,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
+        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -213,7 +213,7 @@ are prefixed with `fg` to make it easier to identify.
         <Chip head>--canon-fg-link-hover</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-app` or `--canon-bg-elevated`.
+        It should be used on top of `--canon-bg-app` or `--canon-bg-surface-1`.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
@@ -267,7 +267,7 @@ low contrast to help as a separator with the different background colors.
         <Chip head>--canon-border</Chip>
       </Table.Cell>
       <Table.Cell>
-        It should be used on top of `--canon-bg-elevated`.
+        It should be used on top of `--canon-bg-surface-1`.
       </Table.Cell>
     </Table.Row>
     <Table.Row>
diff --git a/canon-docs/src/components/CustomTheme/customTheme.tsx b/canon-docs/src/components/CustomTheme/customTheme.tsx
index 174a8d0b24..e8628b83ff 100644
--- a/canon-docs/src/components/CustomTheme/customTheme.tsx
+++ b/canon-docs/src/components/CustomTheme/customTheme.tsx
@@ -17,7 +17,7 @@ const defaultTheme = `:root {
 const myTheme = createTheme({
   theme: 'light',
   settings: {
-    background: 'var(--canon-bg-elevated)',
+    background: 'var(--canon-bg-surface-1)',
     backgroundImage: '',
     foreground: '#6182B8',
     caret: '#5d00ff',
diff --git a/canon-docs/src/snippets/_snippets.ts b/canon-docs/src/snippets/_snippets.ts
index ad777c48cf..75ff5056f4 100644
--- a/canon-docs/src/snippets/_snippets.ts
+++ b/canon-docs/src/snippets/_snippets.ts
@@ -5,7 +5,7 @@ export const customTheme = `:root {
   --canon-font-weight-regular: 400;
   --canon-font-weight-bold: 600;
   --canon-bg: #f8f8f8;
-  --canon-bg-elevated: #fff;
+  --canon-bg-surface-1: #fff;
   /* ... other CSS variables */
 
   /* Add your custom components styles here */
@@ -20,7 +20,7 @@ export const customTheme = `:root {
   --canon-font-weight-regular: 400;
   --canon-font-weight-bold: 600;
   --canon-bg: #f8f8f8;
-  --canon-bg-elevated: #fff;
+  --canon-bg-surface-1: #fff;
   /* ... other CSS variables */
 
   /* Add your custom components styles here */
diff --git a/packages/canon/src/components/Button/styles.css b/packages/canon/src/components/Button/styles.css
index 0572028e96..b5d6e1dca0 100644
--- a/packages/canon/src/components/Button/styles.css
+++ b/packages/canon/src/components/Button/styles.css
@@ -57,7 +57,7 @@
 }
 
 .canon-Button--variant-secondary {
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--canon-bg-surface-1);
   box-shadow: inset 0 0 0 1px var(--canon-border);
   color: var(--canon-fg-primary);
   transition: box-shadow 150ms ease;
diff --git a/packages/canon/src/components/Input/Input.styles.css b/packages/canon/src/components/Input/Input.styles.css
index 4e3e6771ab..0ff108008d 100644
--- a/packages/canon/src/components/Input/Input.styles.css
+++ b/packages/canon/src/components/Input/Input.styles.css
@@ -18,7 +18,7 @@
   border-radius: var(--canon-radius-3);
   border: 1px solid var(--canon-border);
   padding: 0 var(--canon-space-4);
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--canon-bg-surface-1);
   font-size: var(--canon-font-size-3);
   font-family: var(--canon-font-regular);
   font-weight: var(--canon-font-weight-regular);
diff --git a/packages/canon/src/components/Table/styles.css b/packages/canon/src/components/Table/styles.css
index b834485ff5..7d3cb35e3d 100644
--- a/packages/canon/src/components/Table/styles.css
+++ b/packages/canon/src/components/Table/styles.css
@@ -2,7 +2,7 @@
   position: relative;
   overflow: auto;
   width: 100%;
-  background-color: var(--canon-bg-elevated);
+  background-color: var(--canon-bg-surface-1);
   border-radius: var(--canon-radius-2);
   padding-bottom: var(--canon-space-0_5);
   padding-top: var(--canon-space-0_5);
@@ -39,16 +39,16 @@
   & .table-cell:first-child {
     border-top-left-radius: var(--canon-radius-2);
     border-bottom-left-radius: var(--canon-radius-2);
-    box-shadow: inset 4px 2px 0 0 var(--canon-bg-elevated),
-      inset 4px -2px 0 0 var(--canon-bg-elevated);
+    box-shadow: inset 4px 2px 0 0 var(--canon-bg-surface-1),
+      inset 4px -2px 0 0 var(--canon-bg-surface-1);
     padding-left: var(--canon-space-3);
   }
 
   & .table-cell:last-child {
     border-top-right-radius: var(--canon-radius-2);
     border-bottom-right-radius: var(--canon-radius-2);
-    box-shadow: inset -4px 2px 0 0 var(--canon-bg-elevated),
-      inset -4px -2px 0 0 var(--canon-bg-elevated);
+    box-shadow: inset -4px 2px 0 0 var(--canon-bg-surface-1),
+      inset -4px -2px 0 0 var(--canon-bg-surface-1);
     padding-right: var(--canon-space-3);
   }
 }
@@ -56,6 +56,6 @@
 .table-cell {
   padding: var(--canon-space-3);
   background-color: var(--canon-bg);
-  box-shadow: inset 0px 2px 0 0 var(--canon-bg-elevated),
-    inset 0px -2px 0 0 var(--canon-bg-elevated);
+  box-shadow: inset 0px 2px 0 0 var(--canon-bg-surface-1),
+    inset 0px -2px 0 0 var(--canon-bg-surface-1);
 }
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index e1b3baf0ca..8c7863953a 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -72,7 +72,8 @@
 
   /* Background Colors */
   --canon-bg: #f8f8f8;
-  --canon-bg-elevated: #fff;
+  --canon-bg-surface-1: #fff;
+  --canon-bg-surface-2: #ececec;
   --canon-bg-solid: #1f5493;
   --canon-bg-solid-hover: #163a66;
   --canon-bg-solid-pressed: #0f2b4e;
@@ -116,7 +117,8 @@
 [data-theme='dark'] {
   /* Background Colors */
   --canon-bg: #000000;
-  --canon-bg-elevated: #191919;
+  --canon-bg-surface-1: #191919;
+  --canon-bg-surface-2: #242424;
   --canon-bg-solid: #9cc9ff;
   --canon-bg-solid-hover: #83b9fd;
   --canon-bg-solid-pressed: #83b9fd;