feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/design-lab/DesignLab.tsx

@@ -5,6 +5,7 @@ import { BatchB } from "./batchB";
 import { BatchC } from "./batchC";
 import { Chip } from "../components/ui/Chip";
 import { Slider } from "../components/ui/NativeControls";
+import { SURFACE } from "../components/ui/surfaces";
 
 // The design lab (E28): the living style guide. Dev-only — see main.tsx and devOnlyGuard.ts. It sits
 // OUTSIDE <App>, so it owns the theme attributes on <html> itself, through the same data-theme /
@@ -38,7 +39,9 @@ export default function DesignLab() {
 
   return (
     <div className="min-h-dvh text-fg" data-testid="design-lab">
-      <div className="glass sticky top-0 z-chrome flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5">
+      <div
+        className={`${SURFACE.band} sticky top-0 z-chrome flex flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5`}
+      >
         <strong className="text-sm">Design lab</strong>
         <span className="flex gap-1">
           {(["dark", "light"] as const).map((m) => (