fix(design): the lab draws with the primitives' own classes, not a height-ladder copy; DESIGN no longer claims accent-color tints the colour well (E28)

frontend/src/design-lab/batchC.tsx

@@ -23,8 +23,13 @@ import {
 import { Btn } from "./batchA";
 import { C1 } from "./batchCActions";
 import { Reference, Sample } from "./labKit";
-import { FADE_ABOVE_PANEL, FADE_BELOW_PANEL, H, LAYER, STRONG } from "./labTokens";
+import { FADE_ABOVE_PANEL, FADE_BELOW_PANEL, LAYER } from "./labTokens";
 import { SURFACE } from "../components/ui/surfaces";
+import { iconButtonClass } from "../components/ui/buttonStyles";
+import { fieldClass } from "../components/ui/fieldStyles";
+
+// The ui/ primitives' own classes on static spans: the lab draws what the app ships, not a copy.
+const ICON = iconButtonClass({ variant: "ghost", size: "sm" });
 
 // E28 S2 · Batch C — behaviour on touch and on a narrow window, DECIDED (owner, 2026-09-24): C1–C4 as
 // proposed; C5 is the owner's reworked Plex control set (found by the live player pass, E28 S2d: the
@@ -61,10 +66,10 @@ function FilterPanel() {
       <div className="flex items-center justify-between">
         <span className="font-semibold">Filters</span>
         <span className="flex gap-0.5">
-          <span className={clsx("grid place-items-center rounded-lg text-muted", H.iconSm, LAYER)}>
+          <span className={ICON}>
             <Pin className="h-3.5 w-3.5" />
           </span>
-          <span className={clsx("grid place-items-center rounded-lg text-muted", H.iconSm, LAYER)}>
+          <span className={ICON}>
             <X className="h-3.5 w-3.5" />
           </span>
         </span>
@@ -144,12 +149,11 @@ function Field({ label, value, focused }: { label: string; value: string; focuse
       <span className="font-medium">{label}</span>
       <span
         className={clsx(
-          // eslint-disable-next-line no-restricted-syntax -- a drawing of a field, not a label
-          "flex items-center rounded-lg border px-3 text-sm",
-          H.field,
-          focused && "ring-2 ring-accent",
+          fieldClass({ size: "md" }),
+          "flex items-center",
+          // The primitive's focus-within look, drawn: a mock span can hold no focus.
+          focused && "border-accent ring-1 ring-accent",
         )}
-        style={{ borderColor: STRONG }}
       >
         {value}
       </span>
@@ -173,7 +177,7 @@ function C4() {
           )}
         >
           Edit details
-          <span className={clsx("grid place-items-center rounded-lg text-muted", H.iconSm)}>
+          <span className={ICON}>
             <X className={ico} />
           </span>
         </div>