diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
index fa94ab86b6..49625a0ec8 100644
--- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
@@ -81,6 +81,10 @@ export class DarkModeTheme implements ColorModeTheme {
       bgElevation2: this.bgElevation2.to("sRGB").toString(),
       bgElevation3: this.bgElevation3.to("sRGB").toString(),
 
+      shadowElevation1: this.shadowElevation1.to("sRGB").toString(),
+      shadowElevation2: this.shadowElevation2.to("sRGB").toString(),
+      shadowElevation3: this.shadowElevation3.to("sRGB").toString(),
+
       fg: this.fg.to("sRGB").toString(),
       fgAccent: this.fgAccent.to("sRGB").toString(),
       fgNeutral: this.fgNeutral.to("sRGB").toString(),
@@ -613,6 +617,34 @@ export class DarkModeTheme implements ColorModeTheme {
     return color;
   }
 
+  /*
+   * Shadow colors
+   */
+
+  private get shadowElevation1() {
+    const color = this.seedColor.clone();
+
+    color.oklch.l = 0.2;
+
+    return color;
+  }
+
+  private get shadowElevation2() {
+    const color = this.shadowElevation1.clone();
+
+    color.oklch.l -= 0.05;
+
+    return color;
+  }
+
+  private get shadowElevation3() {
+    const color = this.shadowElevation2.clone();
+
+    color.oklch.l -= 0.05;
+
+    return color;
+  }
+
   /*
    * Foreground colors
    */
diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
index 5dd645f49c..f54391fe17 100644
--- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
@@ -81,6 +81,10 @@ export class LightModeTheme implements ColorModeTheme {
       bgElevation2: this.bgElevation2.to("sRGB").toString(),
       bgElevation3: this.bgElevation3.to("sRGB").toString(),
 
+      shadowElevation1: this.shadowElevation1.to("sRGB").toString(),
+      shadowElevation2: this.shadowElevation2.to("sRGB").toString(),
+      shadowElevation3: this.shadowElevation3.to("sRGB").toString(),
+
       fg: this.fg.to("sRGB").toString(),
       fgAccent: this.fgAccent.to("sRGB").toString(),
       fgNeutral: this.fgNeutral.to("sRGB").toString(),
@@ -651,6 +655,34 @@ export class LightModeTheme implements ColorModeTheme {
     return color;
   }
 
+  /*
+   * Shadow colors
+   */
+
+  private get shadowElevation1() {
+    const color = this.seedColor.clone();
+
+    color.oklch.l = 0.2;
+
+    return color;
+  }
+
+  private get shadowElevation2() {
+    const color = this.shadowElevation1.clone();
+
+    color.oklch.l += 0.05;
+
+    return color;
+  }
+
+  private get shadowElevation3() {
+    const color = this.shadowElevation2.clone();
+
+    color.oklch.l += 0.05;
+
+    return color;
+  }
+
   /*
    * Foreground colors
    */
diff --git a/app/client/packages/design-system/theming/src/color/src/types.ts b/app/client/packages/design-system/theming/src/color/src/types.ts
index dfa2e471fa..d59c5cec18 100644
--- a/app/client/packages/design-system/theming/src/color/src/types.ts
+++ b/app/client/packages/design-system/theming/src/color/src/types.ts
@@ -32,6 +32,14 @@ export interface ColorModeTheme {
     bgWarningActive: string;
     bgWarningSubtleHover: string;
     bgWarningSubtleActive: string;
+    // Elevation
+    bgElevation1: string;
+    bgElevation2: string;
+    bgElevation3: string;
+    // Shadow
+    shadowElevation1: string;
+    shadowElevation2: string;
+    shadowElevation3: string;
     // fg
     fg: string;
     fgAccent: string;
diff --git a/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx b/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx
index 8fa3913970..59418cf8f5 100644
--- a/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx
+++ b/app/client/packages/design-system/theming/src/theme/stories/Color.stories.mdx
@@ -36,7 +36,7 @@ Tokens are named using four-part schema. Every part of the name except `type` is
     <tr>
       <td>fg</td>
       <td>neutral</td>
-      <td></td>
+      <td>elevation</td>
       <td>active</td>
     </tr>
     <tr>
@@ -46,7 +46,7 @@ Tokens are named using four-part schema. Every part of the name except `type` is
       <td>focus</td>
     </tr>
     <tr>
-      <td></td>
+      <td>shadow</td>
       <td>negative</td>
       <td></td>
       <td></td>
@@ -183,3 +183,7 @@ Slightly darker than the resting state to produce the effect of moving further f
 ### Border Tokens
 
 <ColorTable isExactMatch={false} filter={["bd"]} />
+
+### Shadow Tokens
+
+<ColorTable isExactMatch={false} filter={["shadow"]} />
diff --git a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
index 316662bcee..331666bf89 100644
--- a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
+++ b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
@@ -57,9 +57,9 @@
     "1": "0px"
   },
   "boxShadow": {
-    "1": "0 8px 8px 0 rgba(0, 0, 0, 0.05)",
-    "2": "0 4px 4px 0 rgba(0, 0, 0, 0.1)",
-    "3": "0 2px 2px 0 rgba(0, 0, 0, 0.15)"
+    "1": "0 4px 6px 0 var(--color-shadow-elevation-1)",
+    "2": "0 2px 4px 0 var(--color-shadow-elevation-2)",
+    "3": "0 1px 2px 0 var(--color-shadow-elevation-3)"
   },
   "borderWidth": {
     "1": "1px",
diff --git a/app/client/packages/design-system/theming/src/token/src/styles.module.css b/app/client/packages/design-system/theming/src/token/src/styles.module.css
index 1549eeffe7..019d9d48d3 100644
--- a/app/client/packages/design-system/theming/src/token/src/styles.module.css
+++ b/app/client/packages/design-system/theming/src/token/src/styles.module.css
@@ -683,7 +683,7 @@
   --sizing-200: calc(
     200 * clamp(3.2px, calc(0.1 * var(--provider-width) / 100 + 2.83px), 4.8px)
   );
-  --color-bg: rgb(97.488% 97.871% 100%);
+  --color-bg: rgb(94.217% 94.598% 97.227%);
   --color-bg-accent: rgb(33.333% 23.922% 91.373%);
   --color-bg-accent-hover: rgb(38.033% 31.188% 98.353%);
   --color-bg-accent-active: rgb(31.537% 20.805% 88.597%);
@@ -716,10 +716,16 @@
   --color-bg-warning-subtle: rgb(100% 94.114% 80.142%);
   --color-bg-warning-subtle-hover: rgb(100% 97.012% 87.859%);
   --color-bg-warning-subtle-active: rgb(99.63% 92.81% 78.869%);
+  --color-bg-elevation-1: rgb(96.832% 97.215% 99.857%);
+  --color-bg-elevation-2: rgb(98.836% 99.192% 100%);
+  --color-bg-elevation-3: rgb(100% 100% 100%);
+  --color-shadow-elevation-1: rgb(0% 0% 0%);
+  --color-shadow-elevation-2: rgb(13.355% 0% 21.478%);
+  --color-shadow-elevation-3: rgb(19.719% 0% 40.53%);
   --color-fg: rgb(1.6475% 1.7126% 6.8084%);
   --color-fg-accent: rgb(33.333% 23.922% 91.373%);
-  --color-fg-neutral: rgb(37.193% 38.537% 50.855%);
-  --color-fg-neutral-subtle: rgb(48.439% 49.938% 62.827%);
+  --color-fg-neutral: rgb(26.531% 27.672% 39.337%);
+  --color-fg-neutral-subtle: rgb(37.193% 38.537% 50.855%);
   --color-fg-positive: rgb(6.7435% 63.436% 18.481%);
   --color-fg-negative: rgb(100% 0% 28.453%);
   --color-fg-warning: rgb(71.79% 51.231% 0%);
@@ -747,7 +753,9 @@
   --color-bd-on-negative: rgb(21.923% 0% 2.8118%);
   --color-bd-on-warning: rgb(39.972% 27.552% 0%);
   --border-radius-1: 0px;
-  --box-shadow-1: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
+  --box-shadow-1: 0 4px 6px 0 var(--color-shadow-elevation-1);
+  --box-shadow-2: 0 2px 4px 0 var(--color-shadow-elevation-2);
+  --box-shadow-3: 0 1px 2px 0 var(--color-shadow-elevation-3);
   --border-width-1: 1px;
   --border-width-2: 2px;
   --opacity-disabled: 0.3;
diff --git a/app/client/packages/design-system/theming/src/token/src/themeTokens.json b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
index 6b6d01dcf6..4593d86c80 100644
--- a/app/client/packages/design-system/theming/src/token/src/themeTokens.json
+++ b/app/client/packages/design-system/theming/src/token/src/themeTokens.json
@@ -1,7 +1,7 @@
 {
   "color": {
     "bg": {
-      "value": "rgb(97.488% 97.871% 100%)",
+      "value": "rgb(94.217% 94.598% 97.227%)",
       "type": "color"
     },
     "bg-accent": {
@@ -132,6 +132,30 @@
       "value": "rgb(99.63% 92.81% 78.869%)",
       "type": "color"
     },
+    "bg-elevation-1": {
+      "value": "rgb(96.832% 97.215% 99.857%)",
+      "type": "color"
+    },
+    "bg-elevation-2": {
+      "value": "rgb(98.836% 99.192% 100%)",
+      "type": "color"
+    },
+    "bg-elevation-3": {
+      "value": "rgb(100% 100% 100%)",
+      "type": "color"
+    },
+    "shadow-elevation-1": {
+      "value": "rgb(0% 0% 0%)",
+      "type": "color"
+    },
+    "shadow-elevation-2": {
+      "value": "rgb(13.355% 0% 21.478%)",
+      "type": "color"
+    },
+    "shadow-elevation-3": {
+      "value": "rgb(19.719% 0% 40.53%)",
+      "type": "color"
+    },
     "fg": {
       "value": "rgb(1.6475% 1.7126% 6.8084%)",
       "type": "color"
@@ -141,11 +165,11 @@
       "type": "color"
     },
     "fg-neutral": {
-      "value": "rgb(37.193% 38.537% 50.855%)",
+      "value": "rgb(26.531% 27.672% 39.337%)",
       "type": "color"
     },
     "fg-neutral-subtle": {
-      "value": "rgb(48.439% 49.938% 62.827%)",
+      "value": "rgb(37.193% 38.537% 50.855%)",
       "type": "color"
     },
     "fg-positive": {
@@ -261,7 +285,15 @@
   },
   "boxShadow": {
     "1": {
-      "value": "0 2px 2px 0 rgba(0, 0, 0, 0.2)",
+      "value": "0 4px 6px 0 var(--color-shadow-elevation-1)",
+      "type": "boxShadow"
+    },
+    "2": {
+      "value": "0 2px 4px 0 var(--color-shadow-elevation-2)",
+      "type": "boxShadow"
+    },
+    "3": {
+      "value": "0 1px 2px 0 var(--color-shadow-elevation-3)",
       "type": "boxShadow"
     }
   },
diff --git a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
index d09a2b4a76..9aaa4e8934 100644
--- a/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
+++ b/app/client/packages/design-system/widgets/src/components/Menu/src/styles.module.css
@@ -1,7 +1,7 @@
 @import "../../../shared/colors/colors.module.css";
 
 .menu {
-  background-color: var(--color-bg);
+  background-color: var(--color-bg-elevation-3);
   border-radius: var(--border-radius-1);
   z-index: var(--z-index-99);
   box-shadow: var(--box-shadow-1);
diff --git a/app/client/packages/storybook/.storybook/preview-head.html b/app/client/packages/storybook/.storybook/preview-head.html
index daa0ba4887..a94c41fb8d 100644
--- a/app/client/packages/storybook/.storybook/preview-head.html
+++ b/app/client/packages/storybook/.storybook/preview-head.html
@@ -1,20 +1,24 @@
 <script defer src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"></script>
 
 <style>
+  .docs-story [data-theme-provider] {
+    background-color: transparent;
+  }
+
   h1, h2, h3, h4, h5, h6, p, th, td {
     color: var(--color-fg) !important;
     border-color: var(--color-bd) !important;
     font-family: var(--font-family) !important;
   }
 
-  tr {
-    background-color: var(--color-bg) !important;
-  }
-
   th, td,
   .css-s230ta {
     border-color: var(--color-bd) !important;
-    background-color: var(--color-bg) !important;
+  }
+
+  td,
+  .css-s230ta {
+    background-color: var(--color-bg-elevation-1) !important;
   }
 
   code,
diff --git a/app/client/packages/storybook/src/components/StoryThemeProvider.tsx b/app/client/packages/storybook/src/components/StoryThemeProvider.tsx
index 73ca12d632..03576263c6 100644
--- a/app/client/packages/storybook/src/components/StoryThemeProvider.tsx
+++ b/app/client/packages/storybook/src/components/StoryThemeProvider.tsx
@@ -8,8 +8,6 @@ const StyledThemeProvider = styled(ThemeProvider)`
   min-width: 100%;
   min-height: 100%;
   padding: 36px;
-  background: var(--color-bg);
-  color: var(--color-fg);
   flex-direction: column;
   align-items: center;
 `;
diff --git a/app/client/packages/storybook/src/components/TokenTable.tsx b/app/client/packages/storybook/src/components/TokenTable.tsx
index c41a550a04..341a8d11ca 100644
--- a/app/client/packages/storybook/src/components/TokenTable.tsx
+++ b/app/client/packages/storybook/src/components/TokenTable.tsx
@@ -26,6 +26,7 @@ export const StyledTable = styled.table`
   td {
     text-align: left;
     padding: var(--spacing-2);
+    background-color: var(--color-bg-elevation-1);
   }
 
   td {