feat(design): batch A recorded, batch B in the design lab (E28 S2b)

DESIGN.md: the Controls chapter decided (A1-A6) with the decision-log rows;
density stays open as B1. The lab keeps only the chosen A renderings as
reference and adds batch B: density, the scheme set (measured accent hue
gaps and light contrast), state layers, the page-chrome model, surface per
role, the public watch page, the nav rail, the loading form and where the
header + fade edge goes.

frontend/src/design-lab/labKit.tsx

@@ -77,6 +77,35 @@ export function Variant({
   );
 }
 
+/** A decision already taken: the chosen rendering only, with the rule it became. The lab's
+ *  reference half — the living style guide the open decisions sit on top of. */
+export function Reference({
+  id,
+  code,
+  title,
+  rule,
+  children,
+}: {
+  id: string;
+  code: string;
+  title: string;
+  rule: string;
+  children: ReactNode;
+}) {
+  return (
+    <section id={id} className="glass-card rounded-xl p-4 flex flex-col gap-3 scroll-mt-20">
+      <header>
+        <div className="flex items-baseline gap-3">
+          <span className="text-xs font-bold tracking-widest text-success">{code} ✓</span>
+          <h3 className="text-sm font-semibold">{title}</h3>
+        </div>
+        <p className="mt-1 text-xs text-muted">{rule}</p>
+      </header>
+      <div className="flex flex-col gap-3">{children}</div>
+    </section>
+  );
+}
+
 /** A small caption above a sample inside a variant. */
 export function Sample({ label, children }: { label: string; children: ReactNode }) {
   return (