diff --git a/.changeset/great-singers-stare.md b/.changeset/great-singers-stare.md
new file mode 100644
index 0000000000..ee566b0fe6
--- /dev/null
+++ b/.changeset/great-singers-stare.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/design-tokens": minor
+"@twilio-paste/core": minor
+---
+
+[Design Tokens] Add new box shadow and background color tokens for elevation
diff --git a/.changeset/red-mirrors-play.md b/.changeset/red-mirrors-play.md
new file mode 100644
index 0000000000..d514eca3fc
--- /dev/null
+++ b/.changeset/red-mirrors-play.md
@@ -0,0 +1,22 @@
+---
+"@twilio-paste/callout": patch
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/chat-log": patch
+"@twilio-paste/combobox": patch
+"@twilio-paste/input": patch
+"@twilio-paste/input-box": patch
+"@twilio-paste/menu": patch
+"@twilio-paste/minimizable-dialog": patch
+"@twilio-paste/modal": patch
+"@twilio-paste/popover": patch
+"@twilio-paste/side-modal": patch
+"@twilio-paste/side-panel": patch
+"@twilio-paste/sidebar": patch
+"@twilio-paste/toast": patch
+"@twilio-paste/tooltip": patch
+"@twilio-paste/topbar": patch
+"@twilio-paste/user-dialog": patch
+"@twilio-paste/core": patch
+---
+
+[Callout, ChatComposer, ChatLog, Combobox, Input, InputBox, Menu, MinimizableDialog, Modal, Popover, SideModal, SidePanel, Sidebar, Toast, Tooltip, Topbar, UserDialog]: Update styles to implement new elevation tokens
diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx
index 91381dea94..4906be8b4f 100644
--- a/packages/paste-core/components/callout/src/Callout.tsx
+++ b/packages/paste-core/components/callout/src/Callout.tsx
@@ -64,7 +64,7 @@ export interface CalloutProps extends HTMLPasteProps<"div"> {
 
 const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
   success: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextSuccess",
     borderColor: "colorBorderSuccessWeak",
   },
@@ -74,17 +74,17 @@ const variantStyles: Record<CalloutVariants, BoxStyleProps> = {
     borderColor: "colorBorderErrorWeak",
   },
   warning: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextWarningStrong",
     borderColor: "colorBorderWarningWeak",
   },
   new: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextNew",
     borderColor: "colorBorderNewWeak",
   },
   neutral: {
-    backgroundColor: "colorBackgroundWeak",
+    backgroundColor: "colorBackgroundBodyElevation",
     color: "colorTextNeutral",
     borderColor: "colorBorderNeutralWeak",
   },
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
index 5a78a98152..595cb75d65 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx
@@ -83,11 +83,8 @@ const ChatComposerAttachmentCard = React.forwardRef<HTMLDivElement, ChatComposer
         ref={ref}
         paddingY="space30"
         paddingX="space40"
-        borderStyle="solid"
-        borderColor="colorBorderWeaker"
         borderRadius="borderRadius30"
-        borderWidth="borderWidth10"
-        boxShadow="shadowLow"
+        backgroundColor="colorBackgroundBodyElevation"
         position="relative"
         display="inline-block"
         width="100%"
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
index 7d17dfb950..0e6b1b5da9 100644
--- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
+++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx
@@ -5,14 +5,13 @@ import * as React from "react";
 import { ChatComposerContext } from "./ChatComposerContext";
 
 const Styles: Record<string, BoxStyleProps> = {
-  default: {},
+  default: {
+    backgroundColor: "colorBackgroundWeaker",
+  },
   contained: {
-    borderWidth: "borderWidth10",
-    borderStyle: "solid",
     borderRadius: "borderRadius30",
-    borderColor: "colorBorderWeaker",
-    boxShadow: "shadowLow",
-    backgroundColor: "colorBackgroundBody",
+    boxShadow: "shadowElevation10",
+    backgroundColor: "colorBackgroundWeaker",
   },
 };
 
diff --git a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
index 0988473a26..b9ed14285b 100644
--- a/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
+++ b/packages/paste-core/components/chat-composer/src/PlaceholderWrapper.tsx
@@ -3,28 +3,33 @@ import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
 import type { ChatComposerProps } from ".";
+import { ChatComposerContext } from "./ChatComposerContext";
 
 export const PlaceholderWrapper: React.FC<
   React.PropsWithChildren<{
     placeholder: ChatComposerProps["placeholder"];
     element?: BoxProps["element"];
   }>
-> = ({ placeholder, element }) => (
-  <Box
-    position="absolute"
-    top="space30"
-    left="space40"
-    right="space40"
-    display="flex"
-    alignItems="center"
-    color="colorTextWeak"
-    pointerEvents="none"
-    userSelect="none"
-    fontStyle="italic"
-    element={element}
-  >
-    {placeholder}
-  </Box>
-);
+> = ({ placeholder, element }) => {
+  const { isDisabled } = React.useContext(ChatComposerContext);
+
+  return (
+    <Box
+      position="absolute"
+      top="space30"
+      left="space40"
+      right="space40"
+      display="flex"
+      alignItems="center"
+      color={isDisabled ? "colorTextWeaker" : "colorTextWeak"}
+      pointerEvents="none"
+      userSelect="none"
+      fontStyle="italic"
+      element={element}
+    >
+      {placeholder}
+    </Box>
+  );
+};
 
 PlaceholderWrapper.displayName = "PlaceholderWrapper";
diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
index 5a98fee150..aebef6db1c 100644
--- a/packages/paste-core/components/chat-log/src/ChatBubble.tsx
+++ b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
@@ -22,11 +22,11 @@ const bubbleVariantStyles: {
   [key in MessageVariants]: BoxStyleProps;
 } = {
   inbound: {
-    backgroundColor: "colorBackground",
+    backgroundColor: "colorBackgroundElevation",
     alignSelf: "flex-start",
   },
   outbound: {
-    backgroundColor: "colorBackgroundInverseStronger",
+    backgroundColor: "colorBackgroundInverseStrongerElevation",
     alignSelf: "flex-end",
     color: "colorTextInverse",
   },
diff --git a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
index 9dee8852b1..1b2ebd0378 100644
--- a/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
+++ b/packages/paste-core/components/chat-log/src/ComposerAttachmentCard.tsx
@@ -62,11 +62,8 @@ const ComposerAttachmentCard = React.forwardRef<HTMLDivElement, ComposerAttachme
         ref={ref}
         paddingY="space30"
         paddingX="space40"
-        borderStyle="solid"
-        borderColor="colorBorderWeaker"
         borderRadius="borderRadius30"
-        borderWidth="borderWidth10"
-        boxShadow="shadowLow"
+        backgroundColor="colorBackgroundBodyElevation"
         position="relative"
         display="inline-block"
         width="100%"
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
index 72fa3fb553..d24ba2e724 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListbox.tsx
@@ -38,12 +38,9 @@ const ComboboxListbox = React.forwardRef<HTMLUListElement, ComboboxListboxProps>
       <Box
         {...safelySpreadBoxProps(props)}
         as="div"
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackgroundWeaker"
         borderRadius="borderRadius20"
-        borderColor="colorBorderWeak"
-        borderWidth="borderWidth10"
-        borderStyle="solid"
-        boxShadow="shadow"
+        boxShadow="shadowElevation10"
         element={element}
         listStyleType="none"
         margin="space0"
diff --git a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
index 202bff5d7d..4995a412a7 100644
--- a/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
+++ b/packages/paste-core/components/combobox/src/styles/ComboboxListboxOption.tsx
@@ -99,7 +99,7 @@ const ComboboxListboxOption = React.forwardRef<HTMLLIElement, ComboboxListboxOpt
         as="li"
         position="relative"
         element={`${element}_LIST_ITEM`}
-        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundBody"}
+        backgroundColor={highlighted ? "colorBackgroundPrimaryWeakest" : "colorBackgroundWeaker"}
         color={
           highlighted
             ? "colorTextPrimary"
diff --git a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
index 19b82e423e..04e195c595 100644
--- a/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
+++ b/packages/paste-core/components/input-box/src/InputChevronWrapper.tsx
@@ -43,14 +43,14 @@ const getInputChevronIconColor = (
 
 const BackgroundColorStyles: { [variant: string]: { [key: string]: BackgroundColor } } = {
   default: {
-    default: "colorBackground",
+    default: "colorBackgroundBodyElevation",
     disabled: "colorBackground",
-    readOnly: "colorBackground",
+    readOnly: "colorBackgroundBodyElevation",
   },
   inverse: {
-    default: "colorBackgroundInverseStrong",
+    default: "colorBackgroundInverseElevation",
     disabled: "colorBackgroundInverse",
-    readOnly: "colorBackgroundInverseStrong",
+    readOnly: "colorBackgroundInverseElevation",
   },
 };
 
diff --git a/packages/paste-core/components/input-box/src/Prefix.tsx b/packages/paste-core/components/input-box/src/Prefix.tsx
index e794431f33..dc6cea6e9e 100644
--- a/packages/paste-core/components/input-box/src/Prefix.tsx
+++ b/packages/paste-core/components/input-box/src/Prefix.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
-import type { BackgroundColor, BorderColor } from "@twilio-paste/style-props";
+import type { BackgroundColor } from "@twilio-paste/style-props";
 import * as React from "react";
 
 import type { Variants } from "./types";
@@ -18,18 +18,14 @@ export interface PrefixProps {
 
 const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
   ({ children, disabled, element = "PREFIX", variant }, ref) => {
-    let backgroundColor = "colorBackgroundWeak" as BackgroundColor;
-    let borderColor = "colorBorderWeaker" as BorderColor;
+    let backgroundColor = "colorBackgroundBodyElevation" as BackgroundColor;
 
     if (disabled && variant === "inverse") {
       backgroundColor = "none";
-      borderColor = "colorBorderInverseWeaker";
     } else if (variant === "inverse") {
-      backgroundColor = "colorBackgroundInverse";
-      borderColor = "colorBorderInverse";
+      backgroundColor = "colorBackgroundInverseElevation";
     } else if (disabled) {
       backgroundColor = "none";
-      borderColor = "colorBorderWeaker";
     }
 
     if (children == null) return null;
@@ -38,9 +34,6 @@ const Prefix = React.forwardRef<HTMLDivElement, PrefixProps>(
         alignItems="flex-start"
         backgroundColor={backgroundColor}
         borderBottomLeftRadius="borderRadius20"
-        borderRightColor={borderColor}
-        borderRightStyle="solid"
-        borderRightWidth="borderWidth10"
         borderTopLeftRadius="borderRadius20"
         display="flex"
         element={`${element}_PREFIX`}
diff --git a/packages/paste-core/components/input-box/src/Suffix.tsx b/packages/paste-core/components/input-box/src/Suffix.tsx
index 6639efeb47..277bd4e661 100644
--- a/packages/paste-core/components/input-box/src/Suffix.tsx
+++ b/packages/paste-core/components/input-box/src/Suffix.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
-import type { BackgroundColor, BorderColor } from "@twilio-paste/style-props";
+import type { BackgroundColor } from "@twilio-paste/style-props";
 import * as React from "react";
 
 import type { Variants } from "./types";
@@ -18,18 +18,14 @@ export interface SuffixProps {
 
 const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
   ({ children, disabled, element = "SUFFIX", variant }, ref) => {
-    let backgroundColor = "colorBackgroundWeak" as BackgroundColor;
-    let borderColor = "colorBorderWeaker" as BorderColor;
+    let backgroundColor = "colorBackgroundBodyElevation" as BackgroundColor;
 
     if (disabled && variant === "inverse") {
       backgroundColor = "none";
-      borderColor = "colorBorderInverseWeaker";
     } else if (variant === "inverse") {
-      backgroundColor = "colorBackgroundInverse";
-      borderColor = "colorBorderInverse";
+      backgroundColor = "colorBackgroundInverseElevation";
     } else if (disabled) {
       backgroundColor = "none";
-      borderColor = "colorBorderWeaker";
     }
 
     if (children == null) return null;
@@ -38,9 +34,6 @@ const Suffix = React.forwardRef<HTMLDivElement, SuffixProps>(
         alignItems="flex-start"
         backgroundColor={backgroundColor}
         borderBottomRightRadius="borderRadius20"
-        borderLeftColor={borderColor}
-        borderLeftStyle="solid"
-        borderLeftWidth="borderWidth10"
         borderTopRightRadius="borderRadius20"
         display="flex"
         element={`${element}_SUFFIX`}
diff --git a/packages/paste-core/components/input/src/DecrementButton.tsx b/packages/paste-core/components/input/src/DecrementButton.tsx
index 2391091844..7a34c3cd93 100644
--- a/packages/paste-core/components/input/src/DecrementButton.tsx
+++ b/packages/paste-core/components/input/src/DecrementButton.tsx
@@ -25,7 +25,7 @@ export const DecrementButton = React.forwardRef<HTMLButtonElement, DecrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundBodyElevation"}
         marginRight="space30"
         _focus={{
           boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
diff --git a/packages/paste-core/components/input/src/IncrementButton.tsx b/packages/paste-core/components/input/src/IncrementButton.tsx
index 5acbc2dec3..3b4c6e73b7 100644
--- a/packages/paste-core/components/input/src/IncrementButton.tsx
+++ b/packages/paste-core/components/input/src/IncrementButton.tsx
@@ -25,7 +25,7 @@ export const IncrementButton = React.forwardRef<HTMLButtonElement, IncrementButt
         size="reset"
         type="button"
         borderRadius="borderRadius20"
-        backgroundColor={variant === "inverse" ? "colorBackgroundInverseStrong" : "colorBackground"}
+        backgroundColor={variant === "inverse" ? "colorBackgroundInverseElevation" : "colorBackgroundBodyElevation"}
         marginRight="space30"
         _focus={{
           boxShadow: variant === "inverse" ? "shadowBorderInverseStrong" : "shadowBorderPrimary",
diff --git a/packages/paste-core/components/menu/src/Menu.tsx b/packages/paste-core/components/menu/src/Menu.tsx
index 16e4a30b78..b930bf91cc 100644
--- a/packages/paste-core/components/menu/src/Menu.tsx
+++ b/packages/paste-core/components/menu/src/Menu.tsx
@@ -9,12 +9,9 @@ const StyledMenu = React.forwardRef<HTMLDivElement, BoxElementProps>(({ style, .
   return (
     <Box
       {...safelySpreadBoxProps(props)}
-      backgroundColor="colorBackgroundBody"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      backgroundColor="colorBackgroundWeaker"
       borderRadius="borderRadius30"
-      boxShadow="shadow"
+      boxShadow="shadowElevation10"
       maxWidth="size30"
       minWidth="size20"
       zIndex="zIndex20"
diff --git a/packages/paste-core/components/menu/src/MenuItem.styles.tsx b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
index c2557c0098..9785dfe745 100644
--- a/packages/paste-core/components/menu/src/MenuItem.styles.tsx
+++ b/packages/paste-core/components/menu/src/MenuItem.styles.tsx
@@ -103,7 +103,7 @@ export const StyledMenuItem = React.forwardRef<HTMLDivElement | HTMLAnchorElemen
         _disabled={{
           color: "colorTextWeaker",
           cursor: "not-allowed",
-          backgroundColor: "colorBackgroundBody",
+          backgroundColor: "colorBackgroundWeaker",
           borderColor: "transparent",
         }}
         ref={ref}
diff --git a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
index ea74c62f8b..1efbadd6c3 100644
--- a/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/MinimizableDialogHeader.tsx
@@ -60,16 +60,12 @@ const MinimizableDialogHeader = React.forwardRef<HTMLDivElement, MinimizableDial
         display="grid"
         gridTemplateColumns="1fr auto auto"
         columnGap="space30"
-        backgroundColor="colorBackground"
+        backgroundColor={minimized ? "colorBackgroundBodyElevation" : "colorBackgroundWeaker"}
         paddingX="space70"
         paddingY="space40"
         color="colorTextWeak"
         overflow="hidden"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderWeaker"
-        borderTopRightRadius="borderRadius20"
-        borderTopLeftRadius="borderRadius20"
+        boxShadow={minimized ? "shadowElevation10" : "none"}
         element={element}
       >
         <Box
diff --git a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
index f1a86624c8..03077741e2 100644
--- a/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
+++ b/packages/paste-core/components/minimizable-dialog/src/StyledMinimizableDialog.tsx
@@ -1,22 +1,24 @@
-import { Box } from "@twilio-paste/box";
 import type { BoxProps } from "@twilio-paste/box";
+import { Box } from "@twilio-paste/box";
 import * as React from "react";
 
 export const StyledMinimizableDialog: React.FC<React.PropsWithChildren<Pick<BoxProps, "element">>> = ({
   element,
   children,
-}) => (
-  <Box
-    element={element}
-    borderRadius="borderRadius20"
-    display="flex"
-    flexDirection="column"
-    backgroundColor="colorBackgroundBody"
-    width="size40"
-    boxShadow="shadow"
-  >
-    {children}
-  </Box>
-);
+}) => {
+  return (
+    <Box
+      element={element}
+      borderRadius="borderRadius20"
+      display="flex"
+      flexDirection="column"
+      backgroundColor="colorBackgroundWeaker"
+      width="size40"
+      boxShadow="shadowElevationTop20"
+    >
+      {children}
+    </Box>
+  );
+};
 
 StyledMinimizableDialog.displayName = "StyledMinimizableDialog";
diff --git a/packages/paste-core/components/modal/src/Modal.tsx b/packages/paste-core/components/modal/src/Modal.tsx
index 0b525f5acc..2a5fe9174f 100644
--- a/packages/paste-core/components/modal/src/Modal.tsx
+++ b/packages/paste-core/components/modal/src/Modal.tsx
@@ -54,11 +54,8 @@ export const ModalDialogContent = animated(
       maxHeight: "90%",
       minHeight: "170px",
       backgroundColor: "colorBackgroundBody",
-      borderColor: "colorBorderWeaker",
       borderRadius: "borderRadius30",
-      borderStyle: "solid",
-      borderWidth: "borderWidth10",
-      boxShadow: "shadow",
+      boxShadow: "shadowElevationTop20",
       display: "flex",
       flexDirection: "column",
     }),
diff --git a/packages/paste-core/components/popover/src/Popover.tsx b/packages/paste-core/components/popover/src/Popover.tsx
index 06d19e024a..55f159d742 100644
--- a/packages/paste-core/components/popover/src/Popover.tsx
+++ b/packages/paste-core/components/popover/src/Popover.tsx
@@ -17,12 +17,9 @@ const StyledPopover = React.forwardRef<HTMLDivElement, BoxProps>(({ style, width
     <Box
       {...safelySpreadBoxProps(props)}
       width={width}
-      backgroundColor="colorBackgroundBody"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      backgroundColor="colorBackgroundWeaker"
       borderRadius="borderRadius30"
-      boxShadow="shadowLow"
+      boxShadow="shadowElevation10"
       maxWidth="size50"
       zIndex="zIndex80"
       _focus={{ outline: "none" }}
diff --git a/packages/paste-core/components/side-modal/src/SideModal.tsx b/packages/paste-core/components/side-modal/src/SideModal.tsx
index 0b95fec235..85d4280d31 100644
--- a/packages/paste-core/components/side-modal/src/SideModal.tsx
+++ b/packages/paste-core/components/side-modal/src/SideModal.tsx
@@ -96,8 +96,8 @@ export const SideModal = React.forwardRef<HTMLDivElement, SideModalProps>(
                   display="grid"
                   gridTemplateRows="auto 1fr auto"
                   height="100vh"
-                  backgroundColor="colorBackgroundBody"
-                  boxShadow="shadow"
+                  backgroundColor="colorBackgroundWeaker"
+                  boxShadow="shadowElevationLeft20"
                   width="size80"
                 >
                   {children}
diff --git a/packages/paste-core/components/side-panel/src/SidePanel.tsx b/packages/paste-core/components/side-panel/src/SidePanel.tsx
index 93b8949f89..86c52725d7 100644
--- a/packages/paste-core/components/side-panel/src/SidePanel.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanel.tsx
@@ -49,6 +49,7 @@ const StyledSidePanelWrapper = React.forwardRef<HTMLDivElement, BoxProps>((props
     width={["100%", "size40", "size40"]}
     height={props.height}
     boxSizing="content-box"
+    backgroundColor="colorBackgroundWeaker"
   />
 ));
 
@@ -110,13 +111,11 @@ const SidePanelContents = React.forwardRef<HTMLDivElement, SidePanelContentsProp
             top={0}
             left={[0, 12, 12]}
             bottom={0}
-            borderStyle="solid"
             borderBottomLeftRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
             borderBottomRightRadius={["borderRadius0", "borderRadius70", "borderRadius70"]}
             borderTopRightRadius={["borderRadius60", "borderRadius70", "borderRadius70"]}
             borderTopLeftRadius={["borderRadius60", "borderRadius70", "borderRadius70"]}
-            borderWidth="borderWidth10"
-            borderColor="colorBorderWeaker"
+            boxShadow="shadowElevation05"
             backgroundColor="colorBackgroundBody"
             marginTop={["space100", "space40", "space40"]}
             marginBottom={["space0", "space40", "space40"]}
diff --git a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
index da5b7a1763..f0247dfda4 100644
--- a/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
+++ b/packages/paste-core/components/side-panel/src/SidePanelBody.tsx
@@ -7,7 +7,7 @@ import type { SidePanelBodyProps } from "./types";
 
 // This wrapper applies styles that customize the scrollbar and its track
 const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundBody, colorBackgroundStrong, colorBackgroundStronger } = theme.backgroundColors;
+  const { colorBackgroundBody, colorBackgroundElevation, colorBackgroundStrongElevation } = theme.backgroundColors;
 
   return css({
     // Scrollbar
@@ -23,12 +23,12 @@ const SidePanelBodyWrapper = styled.div(({ theme }: { theme: ThemeShape }) => {
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundStrong,
+      background: colorBackgroundElevation,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundStronger,
+      background: colorBackgroundStrongElevation,
     },
   });
 });
diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
index 8c792ac365..6fc5267a6d 100644
--- a/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/SidePanelWithAIContent.tsx
@@ -10,7 +10,6 @@ import { ArtificialIntelligenceIcon } from "@twilio-paste/icons/esm/ArtificialIn
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
 import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
 import { SendIcon } from "@twilio-paste/icons/esm/SendIcon";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader, SidePanelHeaderActions } from "../../src";
@@ -29,7 +28,6 @@ export const SidePanelWithAIContent: React.FC<React.PropsWithChildren> = () => {
           </Button>
         </SidePanelHeaderActions>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%">
           <AIChatLog>
diff --git a/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
index cd4f60cd80..f4f25ca83b 100644
--- a/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
+++ b/packages/paste-core/components/side-panel/stories/components/SidePanelWithFilterContent.tsx
@@ -6,7 +6,6 @@ import { Button } from "@twilio-paste/button";
 import { Disclosure, DisclosureContent, DisclosureHeading } from "@twilio-paste/disclosure";
 import { Heading } from "@twilio-paste/heading";
 import { Radio, RadioGroup } from "@twilio-paste/radio-group";
-import { Separator } from "@twilio-paste/separator";
 import * as React from "react";
 
 import { SidePanel, SidePanelBody, SidePanelFooter, SidePanelHeader } from "../../src";
@@ -19,7 +18,6 @@ export const SidePanelWithFilterContent: React.FC<React.PropsWithChildren> = ()
           More filters
         </Heading>
       </SidePanelHeader>
-      <Separator orientation="horizontal" verticalSpacing="space0" />
       <SidePanelBody>
         <Box width="100%" display="flex" paddingTop="space70" flexDirection="column" rowGap="space40">
           <Disclosure variant="contained" visible>
diff --git a/packages/paste-core/components/sidebar/src/Sidebar.tsx b/packages/paste-core/components/sidebar/src/Sidebar.tsx
index 309f5c53bc..144fe3be56 100644
--- a/packages/paste-core/components/sidebar/src/Sidebar.tsx
+++ b/packages/paste-core/components/sidebar/src/Sidebar.tsx
@@ -18,9 +18,7 @@ const StyledSidebar = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) =>
     display="flex"
     flexDirection="column"
     ref={ref}
-    borderRightStyle="solid"
-    borderRightWidth="borderWidth10"
-    borderRightColor="colorBorderInverseWeaker"
+    boxShadow="shadowElevationRightInverse05"
     backgroundColor="colorBackgroundInverse"
     zIndex="zIndex50"
     position="fixed"
diff --git a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
index e37d033bd1..20704ebb47 100644
--- a/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
+++ b/packages/paste-core/components/sidebar/src/SidebarSkipLinks.tsx
@@ -11,7 +11,7 @@ export const SidebarSkipLinkContainer: React.FC<React.PropsWithChildren<{ elemen
       element={element}
       backgroundColor="colorBackgroundBody"
       borderRadius="borderRadius20"
-      boxShadow="shadowLow"
+      boxShadow="shadowElevation10"
       left={10}
       paddingX="space60"
       paddingY="space30"
diff --git a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
index 693e8ec89c..9acba2304b 100644
--- a/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
+++ b/packages/paste-core/components/sidebar/src/header/SidebarHeader.tsx
@@ -24,9 +24,8 @@ export const SidebarHeader = React.forwardRef<HTMLButtonElement, SidebarHeaderPr
         ref={ref}
         paddingX="space60"
         minHeight="sizeTopbar"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderInverseWeaker"
+        boxShadow="shadowElevationBottomInverse05"
+        zIndex="zIndex40"
         display="flex"
         alignItems="center"
         justifyContent="flex-start"
diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
index 24a295cff4..3e05898e9d 100644
--- a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
+++ b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
@@ -14,7 +14,8 @@ import { SidebarNavigationContext } from "./SidebarNavigationContext";
  * only when they are scrolled out of view
  */
 const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) => {
-  const { colorBackgroundInverse, colorBackgroundInverseStronger } = theme.backgroundColors;
+  const { colorBackgroundInverse, colorBackgroundInverseStrongerElevation, colorBackgroundInverseStrongElevation } =
+    theme.backgroundColors;
 
   return css({
     overflowScrolling: "touch",
@@ -36,12 +37,12 @@ const SidebarNavigationWrapper = styled.nav(({ theme }: { theme: ThemeShape }) =
     },
     // Handle
     "::-webkit-scrollbar-thumb": {
-      background: colorBackgroundInverseStronger,
+      background: colorBackgroundInverseStrongElevation,
       borderRadius: "10px",
     },
     // Handle on hover
     "::-webkit-scrollbar-thumb:hover": {
-      background: colorBackgroundInverseStronger,
+      background: colorBackgroundInverseStrongerElevation,
     },
   });
 });
diff --git a/packages/paste-core/components/toast/src/ErrorToast.tsx b/packages/paste-core/components/toast/src/ErrorToast.tsx
index 70a5076d44..3b107f9f20 100644
--- a/packages/paste-core/components/toast/src/ErrorToast.tsx
+++ b/packages/paste-core/components/toast/src/ErrorToast.tsx
@@ -15,7 +15,7 @@ const ErrorToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "TO
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/NeutralToast.tsx b/packages/paste-core/components/toast/src/NeutralToast.tsx
index 4d84309ac9..38982ea92c 100644
--- a/packages/paste-core/components/toast/src/NeutralToast.tsx
+++ b/packages/paste-core/components/toast/src/NeutralToast.tsx
@@ -15,7 +15,7 @@ const NeutralToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/SuccessToast.tsx b/packages/paste-core/components/toast/src/SuccessToast.tsx
index d0be2fc2ae..51326a21cf 100644
--- a/packages/paste-core/components/toast/src/SuccessToast.tsx
+++ b/packages/paste-core/components/toast/src/SuccessToast.tsx
@@ -15,7 +15,7 @@ const SuccessToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/toast/src/WarningToast.tsx b/packages/paste-core/components/toast/src/WarningToast.tsx
index d148f83ca4..1d6a698f8c 100644
--- a/packages/paste-core/components/toast/src/WarningToast.tsx
+++ b/packages/paste-core/components/toast/src/WarningToast.tsx
@@ -15,7 +15,7 @@ const WarningToast = React.forwardRef<HTMLDivElement, ToastProps>(({ element = "
       borderRadius="borderRadius30"
       borderStyle="solid"
       borderWidth="borderWidth10"
-      boxShadow="shadowHigh"
+      boxShadow="shadowElevation20"
       element={element}
       padding="space60"
       variant={variant}
diff --git a/packages/paste-core/components/tooltip/src/Tooltip.tsx b/packages/paste-core/components/tooltip/src/Tooltip.tsx
index 06f6a55d2d..d6cc8c384d 100644
--- a/packages/paste-core/components/tooltip/src/Tooltip.tsx
+++ b/packages/paste-core/components/tooltip/src/Tooltip.tsx
@@ -15,11 +15,9 @@ const StyledTooltip = React.forwardRef<HTMLDivElement, BoxProps>(({ style, eleme
   return (
     <Box
       {...safelySpreadBoxProps(props)}
-      backgroundColor="colorBackgroundBodyInverse"
+      backgroundColor="colorBackgroundInverseElevation"
+      boxShadow="shadowElevationInverse10"
       borderRadius="borderRadius30"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderInverse"
       element={element}
       maxWidth="size30"
       paddingX="space50"
diff --git a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
index 104b8b101d..ff23b04416 100644
--- a/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
+++ b/packages/paste-core/components/tooltip/src/TooltipArrow.tsx
@@ -12,8 +12,7 @@ const TooltipArrow: React.FC<React.PropsWithChildren<TooltipArrowProps>> = (prop
     <TooltipPrimitiveArrow
       {...props}
       size={theme.fontSizes.fontSize50}
-      stroke={theme.borderColors.colorBorderInverse}
-      fill={theme.backgroundColors.colorBackgroundBodyInverse}
+      fill={theme.backgroundColors.colorBackgroundInverseElevation}
     />
   );
 };
diff --git a/packages/paste-core/components/topbar/src/Topbar.tsx b/packages/paste-core/components/topbar/src/Topbar.tsx
index 08ec28b985..d3294280a6 100644
--- a/packages/paste-core/components/topbar/src/Topbar.tsx
+++ b/packages/paste-core/components/topbar/src/Topbar.tsx
@@ -29,10 +29,8 @@ export const Topbar = React.forwardRef<HTMLDivElement, TopbarProps>(
         element={element}
         width="100%"
         minHeight="sizeTopbar"
-        backgroundColor="colorBackgroundWeak"
-        borderBottomWidth="borderWidth10"
-        borderBottomStyle="solid"
-        borderBottomColor="colorBorderWeaker"
+        backgroundColor="colorBackgroundWeakElevation"
+        boxShadow="shadowElevationBottom05"
         paddingX="space70"
         position="sticky"
         top="0"
diff --git a/packages/paste-core/components/user-dialog/src/UserDialog.tsx b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
index 539eebd49f..114e4792c4 100644
--- a/packages/paste-core/components/user-dialog/src/UserDialog.tsx
+++ b/packages/paste-core/components/user-dialog/src/UserDialog.tsx
@@ -23,9 +23,7 @@ const UserDialogPopover = React.forwardRef<HTMLDivElement, UserDialogPopoverProp
       {...safelySpreadBoxProps(props)}
       ref={ref}
       style={style}
-      boxShadow="shadow"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeaker"
+      boxShadow="shadowElevation10"
       borderRadius="borderRadius30"
       padding="space0"
       marginTop="space30"
diff --git a/packages/paste-core/components/user-dialog/src/UserDialogList.tsx b/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
index 73bd6b934a..fae349399e 100644
--- a/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
+++ b/packages/paste-core/components/user-dialog/src/UserDialogList.tsx
@@ -24,7 +24,7 @@ const UserDialogListbox = React.forwardRef<HTMLDivElement, UserDialogListboxProp
       <Box
         {...safelySpreadBoxProps(props)}
         element={`${element}_LIST`}
-        backgroundColor="colorBackgroundBody"
+        backgroundColor="colorBackgroundWeaker"
         borderRadius="borderRadius30"
         paddingY="space30"
         ref={ref}
diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json
index c987a126e0..318ce1cd51 100644
--- a/packages/paste-core/primitives/box/type-docs.json
+++ b/packages/paste-core/primitives/box/type-docs.json
@@ -727,7 +727,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -958,7 +958,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json
index 24b82c3189..dbd03e55c8 100644
--- a/packages/paste-core/primitives/sibling-box/type-docs.json
+++ b/packages/paste-core/primitives/sibling-box/type-docs.json
@@ -829,7 +829,7 @@
       "description": "Responsive prop for the CSS `background-attachment` property"
     },
     "backgroundColor": {
-      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 64 more ... | { ...; }",
+      "type": "\"inherit\" | \"none\" | \"colorBackground\" | \"colorBackgroundAvailable\" | \"colorBackgroundBody\" | \"colorBackgroundBodyElevation\" | \"colorBackgroundBodyInverse\" | \"colorBackgroundBrand\" | ... 65 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
@@ -1060,7 +1060,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-core/primitives/text/type-docs.json b/packages/paste-core/primitives/text/type-docs.json
index ec4863fead..571d97d72a 100644
--- a/packages/paste-core/primitives/text/type-docs.json
+++ b/packages/paste-core/primitives/text/type-docs.json
@@ -531,7 +531,7 @@
       "description": "Responsive prop for the CSS `bottom` property"
     },
     "boxShadow": {
-      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 85 more ... | { ...; }",
+      "type": "\"none\" | \"shadow\" | \"shadowBorder\" | \"shadowBorderBottomBrand10Strong\" | \"shadowBorderBottomBrand20Strong\" | \"shadowBorderBottomBrand30Strong\" | \"shadowBorderBottomDecorative10Weaker\" | ... 86 more ... | { ...; }",
       "defaultValue": null,
       "required": false,
       "externalProp": false,
diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
index ab2623772d..6b217a690f 100644
--- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(64, 19, 15)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(56, 14, 120)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-new-weakest\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -54,7 +54,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(96, 107, 133)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
@@ -66,6 +66,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -175,6 +176,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -201,7 +203,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #750c0c\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #001489\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -210,7 +212,7 @@ exports[`Design Tokens matches the Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px #606b85\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -499,7 +501,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -536,7 +538,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
@@ -548,6 +550,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -657,6 +660,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -683,7 +687,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -692,7 +696,7 @@ exports[`Design Tokens matches the Global theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -981,7 +985,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-warning-weakest\\": \\"rgb(254, 245, 238)\\",
   \\"color-background-inverse-strong\\": \\"rgb(57, 71, 98)\\",
   \\"color-background-new\\": \\"rgb(245, 240, 252)\\",
-  \\"color-background-inverse-elevation\\": \\"rgb(25, 39, 62)\\",
+  \\"color-background-inverse-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-strong\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-new-weakest\\": \\"rgb(250, 247, 253)\\",
   \\"color-background-destructive\\": \\"rgb(214, 31, 31)\\",
@@ -1018,7 +1022,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-primary-weak\\": \\"rgb(153, 205, 255)\\",
   \\"color-background-brand-30\\": \\"rgb(106, 221, 178)\\",
   \\"color-background-stronger\\": \\"rgb(136, 145, 170)\\",
-  \\"color-background-inverse-strong-elevation\\": \\"rgb(64, 79, 110)\\",
+  \\"color-background-inverse-strong-elevation\\": \\"rgb(37, 57, 91)\\",
   \\"color-background-brand-20\\": \\"rgb(81, 169, 227)\\",
   \\"color-background-brand-highlight\\": \\"rgb(242, 47, 70)\\",
   \\"color-background-brand-highlight-weakest\\": \\"rgba(242, 47, 70, 0.1)\\",
@@ -1030,6 +1034,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-overlay\\": \\"rgba(6, 3, 58, 0.4)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -1139,6 +1144,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -1165,7 +1171,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #fccfcf\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #cce4ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1174,7 +1180,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 2px rgba(2, 99, 224, 0.7)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
@@ -1512,6 +1518,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(18, 28, 45, 0.9)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(31, 48, 76)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-error-stronger\\": \\"rgb(252, 207, 207)\\",
@@ -1621,6 +1628,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #d61f1f\\",
@@ -1647,7 +1655,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #ad1111\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #1f304c\\",
   \\"shadow-border\\": \\"0 0 0 1px #606b85\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -1656,7 +1664,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #043cb5\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #c28e00\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #ffffff, inset 0 0 0 3px rgba(255, 255, 255, 0.2)\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #19273E, 0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(0, 0, 0, 0.3), 16px 16px 32px 0 rgba(0, 0, 0, 0.2)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #0e7c3a\\",
@@ -1994,6 +2002,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"color-background-inverse\\": \\"rgb(18, 28, 45)\\",
   \\"color-background-overlay\\": \\"rgba(96, 107, 133, 0.5)\\",
   \\"color-background-unavailable\\": \\"rgb(214, 31, 31)\\",
+  \\"color-background-strong-elevation\\": \\"rgb(225, 227, 234)\\",
   \\"color-background-inverse-strongest\\": \\"rgb(255, 255, 255)\\",
   \\"color-background-weak-elevation\\": \\"rgb(249, 249, 250)\\",
   \\"color-background-error-stronger\\": \\"rgb(74, 11, 11)\\",
@@ -2103,6 +2112,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-brand-10-strong\\": \\"0 1px 0 #855c15\\",
   \\"shadow-border-bottom-brand-20-strong\\": \\"0 1px 0 #043cb5\\",
   \\"shadow-right-inverse\\": \\"-4px 0 8px -4px rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-top-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-bottom-brand-30-strong\\": \\"0 1px 0 #0e7c3a\\",
   \\"shadow-left\\": \\"4px 0 8px -4px rgba(18, 28, 45, 0.2)\\",
   \\"shadow-border-error\\": \\"0 0 0 1px #c72323\\",
@@ -2129,7 +2139,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-bottom-error-weaker\\": \\"0 1px 0 #f58a8a\\",
   \\"shadow-border-weaker\\": \\"0 0 0 1px #e1e3ea\\",
   \\"shadow-border\\": \\"0 0 0 1px #8891aa\\",
-  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4)\\",
+  \\"shadow-elevation-inverse-10\\": \\"0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.1)\\",
   \\"shadow-border-right-inverse-strong\\": \\"1px 0 #e1e3ea\\",
   \\"shadow-border-bottom-neutral-weaker\\": \\"0 1px 0 #66b3ff\\",
   \\"shadow-border-brand-10\\": \\"saffron\\",
@@ -2138,7 +2148,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = `
   \\"shadow-border-decorative-20-weaker\\": \\"0 0 0 1px #cce4ff\\",
   \\"shadow-border-bottom-subaccount\\": \\"0 1px 0 #ffdd35\\",
   \\"shadow-focus-inset\\": \\"inset 0 0 0 1px #006dfa, inset 0 0 0 3px #cce4ff\\",
-  \\"shadow-elevation-20\\": \\"0 0 0 1px #f9f9fa, 0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
+  \\"shadow-elevation-20\\": \\"0 6px 8px 0 rgba(15, 22, 33, 0.1), 16px 16px 32px 0 rgba(15, 22, 33, 0.05)\\",
   \\"shadow-border-inverse\\": \\"0 0 0 1px #8891aa\\",
   \\"shadow-elevation-10\\": \\"0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1)\\",
   \\"shadow-border-decorative-30-weaker\\": \\"0 0 0 1px #d1fae0\\",
diff --git a/packages/paste-design-tokens/tokens/aliases/color-palette.yml b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
index f524ee34f6..38937153f1 100644
--- a/packages/paste-design-tokens/tokens/aliases/color-palette.yml
+++ b/packages/paste-design-tokens/tokens/aliases/color-palette.yml
@@ -74,6 +74,7 @@ aliases:
   palette-gray-110-transparent-10: "rgba(15, 22, 33, 0.1)"
 
   ## Blacks transparent
+  palette-black-transparent-10: "rgba(0, 0, 0, 0.1)"
   palette-black-transparent-40: "rgba(0, 0, 0, 0.4)"
 
   ## Blues transparent based on darkest blue
diff --git a/packages/paste-design-tokens/tokens/global/background-color.yml b/packages/paste-design-tokens/tokens/global/background-color.yml
index 6dc9a25a20..58fd8c8776 100644
--- a/packages/paste-design-tokens/tokens/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/global/background-color.yml
@@ -224,14 +224,17 @@ props:
   color-background-elevation:
     value: "{!palette-gray-15}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-20}"
+    comment: Elevation token for color-background-strong elements.
   color-background-inverse-elevation:
-    value: "{!palette-gray-95}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse-weak elements.
   color-background-inverse-strong-elevation:
-    value: "{!palette-gray-75}"
+    value: "{!palette-gray-85}"
     comment: Elevation token for color-background-inverse-strong elements.
   color-background-inverse-stronger-elevation:
     value: "{!palette-gray-75}"
diff --git a/packages/paste-design-tokens/tokens/global/box-shadow.yml b/packages/paste-design-tokens/tokens/global/box-shadow.yml
index 45eaa882fc..45a424d480 100644
--- a/packages/paste-design-tokens/tokens/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/global/box-shadow.yml
@@ -281,11 +281,14 @@ props:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-10}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-gray-110-transparent-10}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-inverse-10:
-    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
+    value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-10}"
     comment: Use on inverse elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
-    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
+    value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
+  shadow-elevation-top-20:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-05}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-gray-110-transparent-10}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-gray-110-transparent-05}"
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
index a08aa9b979..68f7a0beb2 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/background-color.yml
@@ -204,3 +204,6 @@ props:
   color-background-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-90}"
+    comment: Elevation token for color-background-strong elements.
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
index f802ce9356..a922734f5e 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/box-shadow.yml
@@ -199,8 +199,11 @@ props:
     value: "{!offset-0} {!offset-negative-05} {!offset-0} {!offset-0} {!palette-gray-90}, {!offset-0} {!offset-15} {!offset-20} {!offset-0} {!palette-black-transparent-40}"
     comment: Use on elements that overlay other UI components but remain visually connected to the elements behind them.
   shadow-elevation-20:
-    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
-    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
+    value: "{!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
+    comment: Use on elements with decorative or semantic use of color that sit above the UI to indicate a greater distance distance from the surface behind them.
   shadow-elevation-left-20:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-negative-20} {!offset-0} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-negative-60} {!offset-0} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
     comment: Use for elements that dynamically open from the right side of the screen, appearing above the UI to indicate a greater separation from the underlying surface.
+  shadow-elevation-top-20:
+    value: "{!offset-0} {!offset-0} {!offset-0} {!offset-05} {!palette-gray-95}, {!offset-0} {!offset-30} {!offset-40} {!offset-0} {!palette-black-transparent-30}, {!offset-60} {!offset-60} {!offset-90} {!offset-0} {!palette-black-transparent-20}"
+    comment: Use on elements that sit above the UI to indicate a greater distance distance from the surface behind them.
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
index 593e6c60ed..04bc60a26f 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
@@ -189,3 +189,6 @@ props:
   color-background-inverse-stronger-elevation:
     value: "{!palette-gray-55}"
     comment: Elevation token for color-background-inverse-stronger elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
index 7613686f9b..0cc18d0203 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/background-color.yml
@@ -74,9 +74,12 @@ props:
   color-background-elevation:
     value: "{!palette-gray-95}"
     comment: Elevation token for color-background elements.
+  color-background-strong-elevation:
+    value: "{!palette-gray-90}"
+    comment: Elevation token for color-background-strong elements.
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.
-  color-background-inverse-strong-elevation:
-    value: "{!palette-gray-85}"
-    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
index 8ad8c41a85..c75cacea4f 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/background-color.yml
@@ -91,6 +91,6 @@ props:
   color-background-inverse-weak-elevation:
     value: "{!palette-gray-100}"
     comment: Elevation token for color-background-inverse-weak elements.
-  color-background-inverse-strong-elevation:
-    value: "{!palette-gray-85}"
-    comment: Elevation token for color-background-inverse-strong elements.
+  color-background-inverse-elevation:
+    value: "{!palette-gray-95}"
+    comment: Elevation token for color-background-inverse elements.
diff --git a/packages/paste-website/src/pages/components/side-panel/index.mdx b/packages/paste-website/src/pages/components/side-panel/index.mdx
index 0934464950..3d0afbf9b6 100644
--- a/packages/paste-website/src/pages/components/side-panel/index.mdx
+++ b/packages/paste-website/src/pages/components/side-panel/index.mdx
@@ -67,7 +67,6 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
           Side Panel content goes here.
         </SidePanelBody>
@@ -144,7 +143,6 @@ export const SidePanelExample = (): React.ReactNode => {
             </Button>
           </SidePanelHeaderActions>
         </SidePanelHeader>
-        <Separator orientation="horizontal" verticalSpacing="space0" />
         <SidePanelBody>
           Side Panel content goes here.
         </SidePanelBody>