diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css
index e8c1b908..d1fff96b 100644
--- a/frontend/packages/shared/src/badge/Badge.css
+++ b/frontend/packages/shared/src/badge/Badge.css
@@ -13,11 +13,54 @@
   font: inherit;
   font-size: 0.85em;
   line-height: 1.4;
-  background: var(--purple-dim);
+  background: color-mix(in srgb, var(--purple-dim) 65%, transparent);
+  -webkit-backdrop-filter: blur(6px) saturate(140%);
+  backdrop-filter: blur(6px) saturate(140%);
   color: var(--fg);
   border: none;
   white-space: nowrap;
 }
+/* Frosted-glass fill (mara: "make badges look glassy... in dark mode
+   the added transparency improves readability, bg behind is dark") —
+   same recipe as the header chrome/terminal glass (`chrome.css`,
+   `terminal.css`): translucent `color-mix` + `backdrop-filter`. Only
+   for the default filled badges — `variant="quiet"` (below) already
+   has no fill at all, nothing to frost.
+   Dark (mocha) only, deliberately: her own reasoning was conditioned
+   on a dark surface behind the badge. A light (latte) page has bright,
+   often busy content behind a badge — the same transparency would
+   wash out the value text instead of improving it, the opposite of
+   what this is for — so light mode keeps the plain solid fill. Same
+   three-way structure `colors.css` uses for every light/dark switch:
+   this default rule *is* the dark look (mocha is the default palette),
+   the `@media`/`:root[data-theme]` blocks below revert it for light,
+   restore it for an explicit dark override. */
+@media (prefers-color-scheme: light) {
+  .ui-badge {
+    background: var(--purple-dim);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+/* `:not(.ui-badge-quiet)` here, unlike the base rule/`@media` block
+   above — argus's review: both of these add `:root`+`[data-theme]` to
+   the selector, so specificity is 0-3-0 vs plain `.ui-badge-quiet`'s
+   0-1-0. Without the exclusion these would beat quiet's `background:
+   none` (below) whenever a user has an *explicit* theme override set
+   (SettingsMenu's dropdown, not just the OS default), reintroducing
+   the settings/links "should not have the badge bg" bug on those
+   triggers. Verified against a real repro before landing, not just
+   the specificity arithmetic. */
+:root[data-theme='light'] .ui-badge:not(.ui-badge-quiet) {
+  background: var(--purple-dim);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:root[data-theme='dark'] .ui-badge:not(.ui-badge-quiet) {
+  background: color-mix(in srgb, var(--purple-dim) 65%, transparent);
+  -webkit-backdrop-filter: blur(6px) saturate(140%);
+  backdrop-filter: blur(6px) saturate(140%);
+}
 .ui-badge-interactive {
   cursor: pointer;
   min-height: 2.75em;