diff --git a/frontend/packages/shared/src/badge/Badge.css b/frontend/packages/shared/src/badge/Badge.css
index e8c1b908..e4962545 100644
--- a/frontend/packages/shared/src/badge/Badge.css
+++ b/frontend/packages/shared/src/badge/Badge.css
@@ -13,11 +13,45 @@
   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;
+  }
+}
+:root[data-theme='light'] .ui-badge {
+  background: var(--purple-dim);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+:root[data-theme='dark'] .ui-badge {
+  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;