diff --git a/frontend/editor/src/core/components/filesPage/FileCategoryBadge.tsx b/frontend/editor/src/core/components/filesPage/FileCategoryBadge.tsx
index 08d3f15e2d..37cabad232 100644
--- a/frontend/editor/src/core/components/filesPage/FileCategoryBadge.tsx
+++ b/frontend/editor/src/core/components/filesPage/FileCategoryBadge.tsx
@@ -45,8 +45,10 @@ export function FileCategoryBadge({ labels }: { labels?: string[] | null }) {
           padding: "0.1rem 0.4rem",
           borderRadius: "999px",
           lineHeight: 1.2,
+          // Mixed into the surface, not transparency — the badge sits on top
+          // of thumbnails, where a see-through backer is illegible.
           background:
-            "color-mix(in srgb, var(--c-text-subtle) 16%, transparent)",
+            "color-mix(in srgb, var(--c-text-subtle) 16%, var(--c-surface))",
         }}
       >
         {badges.slice(0, MAX_ICONS).map((badge) => (
diff --git a/frontend/editor/src/core/components/filesPage/FileOriginBadge.tsx b/frontend/editor/src/core/components/filesPage/FileOriginBadge.tsx
index 35ddb80ddf..5797a108cc 100644
--- a/frontend/editor/src/core/components/filesPage/FileOriginBadge.tsx
+++ b/frontend/editor/src/core/components/filesPage/FileOriginBadge.tsx
@@ -31,17 +31,20 @@ const styles = {
     letterSpacing: "0.04em",
     lineHeight: 1.2,
   },
+  // Tints are mixed into the surface colour, never transparency: these badges
+  // sit on top of thumbnails, where a see-through backer makes them illegible.
   local: {
-    background: "color-mix(in srgb, var(--c-text-subtle) 16%, transparent)",
+    background:
+      "color-mix(in srgb, var(--c-text-subtle) 16%, var(--c-surface))",
     color: "var(--c-text-muted)",
   },
   cloud: {
-    background: "color-mix(in srgb, var(--c-primary) 16%, transparent)",
+    background: "color-mix(in srgb, var(--c-primary) 16%, var(--c-surface))",
     color: "var(--c-accent-text)",
   },
   shared: {
     background:
-      "color-mix(in srgb, var(--mantine-color-orange-6) 16%, transparent)",
+      "color-mix(in srgb, var(--mantine-color-orange-6) 16%, var(--c-surface))",
     color: "var(--color-amber-dark)",
   },
 };