diff --git a/.changeset/clever-ducks-camp.md b/.changeset/clever-ducks-camp.md
new file mode 100644
index 00000000000..95a24c08090
--- /dev/null
+++ b/.changeset/clever-ducks-camp.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+introduce a subdued prop to the popover pane component
diff --git a/polaris-react/src/components/Popover/Popover.scss b/polaris-react/src/components/Popover/Popover.scss
index d50e897e224..7202f68c781 100644
--- a/polaris-react/src/components/Popover/Popover.scss
+++ b/polaris-react/src/components/Popover/Popover.scss
@@ -120,6 +120,10 @@ $vertical-motion-offset: -5px;
   flex: 0 0 auto;
 }
 
+.Pane-subdued {
+  background-color: var(--p-color-bg-subdued);
+}
+
 .Pane-captureOverscroll {
   overscroll-behavior: contain;
 }
diff --git a/polaris-react/src/components/Popover/Popover.stories.tsx b/polaris-react/src/components/Popover/Popover.stories.tsx
index 929668952c4..8c51e39ab47 100644
--- a/polaris-react/src/components/Popover/Popover.stories.tsx
+++ b/polaris-react/src/components/Popover/Popover.stories.tsx
@@ -3,6 +3,7 @@ import type {ComponentMeta} from '@storybook/react';
 import {
   ActionList,
   Avatar,
+  Box,
   Button,
   LegacyCard,
   FormLayout,
@@ -816,6 +817,47 @@ export function WithLoadingSmallerContent() {
   );
 }
 
+export function WithSubduedPane() {
+  const [popoverActive, setPopoverActive] = useState(true);
+
+  const togglePopoverActive = useCallback(
+    () => setPopoverActive((popoverActive) => !popoverActive),
+    [],
+  );
+
+  const activator = (
+    <Button
+      onClick={() => {
+        togglePopoverActive();
+      }}
+      disclosure
+    >
+      Show popover
+    </Button>
+  );
+
+  return (
+    <div style={{height: '280px'}}>
+      <Popover
+        active={popoverActive}
+        activator={activator}
+        onClose={togglePopoverActive}
+      >
+        <Popover.Pane>
+          <Box padding="4">
+            <Text as="p">Popover content</Text>
+          </Box>
+        </Popover.Pane>
+        <Popover.Pane subdued>
+          <Box padding="4">
+            <Text as="p">Subdued popover pane</Text>
+          </Box>
+        </Popover.Pane>
+      </Popover>
+    </div>
+  );
+}
+
 const StopPropagation = ({children}: React.PropsWithChildren<any>) => {
   const stopEventPropagation = (event: React.MouseEvent | React.TouchEvent) => {
     event.stopPropagation();
diff --git a/polaris-react/src/components/Popover/components/Pane/Pane.tsx b/polaris-react/src/components/Popover/components/Pane/Pane.tsx
index 2ee7d084097..4025835e6ae 100644
--- a/polaris-react/src/components/Popover/components/Pane/Pane.tsx
+++ b/polaris-react/src/components/Popover/components/Pane/Pane.tsx
@@ -22,6 +22,11 @@ export interface PaneProps {
    * @default false
    */
   captureOverscroll?: boolean;
+  /**
+   * Sets a subdued background to the pane
+   * @default false
+   */
+  subdued?: boolean;
 }
 
 export function Pane({
@@ -30,11 +35,13 @@ export function Pane({
   sectioned,
   children,
   height,
+  subdued,
   onScrolledToBottom,
 }: PaneProps) {
   const className = classNames(
     styles.Pane,
     fixed && styles['Pane-fixed'],
+    subdued && styles['Pane-subdued'],
     captureOverscroll && styles['Pane-captureOverscroll'],
   );
   const content = sectioned
diff --git a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx
index d7425392284..b05c0f4d4e6 100644
--- a/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx
+++ b/polaris-react/src/components/Popover/components/Pane/tests/Pane.test.tsx
@@ -58,6 +58,44 @@ describe('<Pane />', () => {
     });
   });
 
+  describe('subdued', () => {
+    it(`does not append the subdued class if the prop isn't provided`, () => {
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane.find(Scrollable)?.props.className).not.toContain(
+        'Pane-subdued',
+      );
+    });
+
+    it('appends the subdued class if the prop isn provided', () => {
+      const Children = () => (
+        <TextContainer>
+          <p>Text</p>
+        </TextContainer>
+      );
+
+      const popoverPane = mountWithApp(
+        <Pane subdued>
+          <Children />
+        </Pane>,
+      );
+
+      expect(popoverPane.find(Scrollable)?.props.className).toContain(
+        'Pane-subdued',
+      );
+    });
+  });
+
   describe('sectioned', () => {
     it('renders children in a Section when set to true', () => {
       const Children = () => (