diff --git a/src/components/MediaMuteAndSwitchButton.mdx b/src/components/MediaMuteAndSwitchButton.mdx
index c749dddf9..499a606ed 100644
--- a/src/components/MediaMuteAndSwitchButton.mdx
+++ b/src/components/MediaMuteAndSwitchButton.mdx
@@ -45,6 +45,12 @@ It is said rather than enforced. The cost is smoothness; the reason to pay it
 is privacy; and only the person in the room knows which they would rather
 have. Everything stays choosable.
 
+Drawn quietly on purpose, to the design: the subtle ground, an outline mark and
+the text at its ordinary weight, held the same sixteen pixels from the menu's
+sides as the grid above it. Not an alert — an alert is for something that just
+happened, and this was true before the menu opened and will be true after it
+closes.
+
 <Canvas of={MenuStories.BackgroundEffectsSlowInThisBrowser} />
 
 **Being set up.** Only on the first effect of a session. The tile that was
diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 477027a9e..111788d9c 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -397,3 +397,29 @@ Please see LICENSE in the repository root for full details.
   inline-size: 20px;
   block-size: 20px;
 }
+
+/*
+ * What the browser costs, said quietly.
+ *
+ * Measured off the design: the subtle secondary ground, held the same sixteen
+ * pixels from the menu's sides as the grid above it, with the mark and the
+ * text on one line's baseline and the text at its ordinary weight. Not an
+ * alert — an alert is for something that just happened, and this was true
+ * before the menu opened and will be true after it closes.
+ */
+.effectNotice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cpd-space-3x);
+  margin: var(--cpd-space-2x) var(--cpd-space-4x) var(--cpd-space-4x);
+  padding: var(--cpd-space-3x);
+  border-radius: var(--cpd-space-2x);
+  background: var(--cpd-color-bg-subtle-secondary);
+  color: var(--cpd-color-text-primary);
+  font: var(--cpd-font-body-md-regular);
+}
+
+.effectNotice > svg {
+  flex-shrink: 0;
+  color: var(--cpd-color-icon-secondary);
+}
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index cbc97bdc4..ee12ae4c6 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -33,6 +33,7 @@ import {
   PlusIcon,
   CheckCircleSolidIcon,
   CloseIcon,
+  InfoIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
@@ -815,9 +816,12 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
             // Never both at once: a refusal is about what the user just did and
             // wins the space, where this is about the browser and will still be
             // true next time. Not dismissible for the same reason — there is
-            // nothing to dismiss, only something to know.
-            <div role="none" className={styles.effectError}>
-              <Alert type="info" title={backgroundEffectNotice} />
+            // nothing to dismiss, only something to know, and it is drawn to be
+            // read once rather than to interrupt: a subtle ground, an outline
+            // mark and text at its ordinary weight, as the design has it.
+            <div role="none" className={styles.effectNotice}>
+              <InfoIcon width={20} height={20} />
+              <span>{backgroundEffectNotice}</span>
             </div>
           )}
         {toggles.length > 0 && <hr />}