Design system: remove colour-only status semantics, add non-colour markers and shared-home title handling

docs/branch-review-records/1233fbf36b5160345976009075cd18f47201a1635e459105ba8fb0cda19d332a.record.md

@@ -0,0 +1 @@
+| 2026-08-22 | work | a26747b1e8c7ac5a705b1beee94b61aaeddef74e | PR 1 clinical status semantics and baseline provenance | status semantics implemented with zero contract debt; no high-confidence diff findings; human screenshot provenance disposition remains approval-gated | focused status contract; design-system contract; desktop and forced-colour phone browser proof; production readiness; lint; typecheck; build; full unit suite has unrelated jq-less hook timeouts |

docs/branch-review-records/66988d5ef89875ea4478e969fa246f6e84d36fdfaaf2afa95923f8ee8857522b.record.md

@@ -0,0 +1 @@
+| 2026-08-22 | work | 4c06617a4bac40dbafb9c07dc7468ea62adb559c | design-system live convergence programme plan and local handoff | No P0-P2 defect in the plan. Six independently revertible tranches, adversarial gates, Cloud/local boundaries, clinical stop conditions, and an operator handoff packet are specified. | flightplan docsOnly; clinical-proof docsOnly; docs links passed; docs script refs passed; focused Prettier passed; diff check passed |

docs/branch-review-records/76e5eff45d022253b5017e75703fa591adbb9c5f76c5632f1bd44c923f39569b.record.md

@@ -0,0 +1 @@
+| 2026-08-22 | codex/review-design-system-and-live-design | c22b3ec5cd78e119bdd7764abdde4ce8123e3000 | pr-ci-fix | green | merge-conflict-resolved(GATES.md), focused-tests(status-semantics-contract+shared-home-metadata: 13/13), phone-chrome-dry-run(focused-ownership-sufficient), doc-fix(design-system-live-convergence-plan.md:270) |

docs/branch-review-records/99b9ea02fd5f93288c57c502619ad01fda97f2253fd6da239fd6bde1ca6c0a28.record.md

@@ -0,0 +1 @@
+| 2026-08-22 | work | b158b93532511db8077e226f00bdabeaa0c3ea85 | cloud design-status semantics implementation prompt | no high-confidence findings; bounded offline-first PR1 prompt with truthful provenance and local handoff gates | workflow:flightplan; docs:check-links; docs:check-scripts; format; git diff --check |

scripts/design-system-contract-baseline.json

@@ -4,8 +4,8 @@
     "literalShadowClasses": 0,
     "legacyTapClasses": 0,
     "interactiveTapFloorDeclarations": 33,
-    "colourOnlyStatusIndicators": 3,
-    "statusColouredNumerals": 1,
+    "colourOnlyStatusIndicators": 0,
+    "statusColouredNumerals": 0,
     "edgeOwnershipConflicts": 18,
     "onePixelShadowSpreads": 2,
     "hardcodedCssMotionDurations": 41,
@@ -47,13 +47,8 @@
       "src/components/forms/forms-search-results-page.tsx": 2,
       "src/components/ui/chip.tsx": 1
     },
-    "colourOnlyStatusIndicators": {
-      "src/components/calculators/calculator-ui.tsx": 1,
-      "src/components/ui-primitives.tsx": 2
-    },
-    "statusColouredNumerals": {
-      "src/components/clinical-dashboard/visual-evidence.tsx": 1
-    },
+    "colourOnlyStatusIndicators": {},
+    "statusColouredNumerals": {},
     "edgeOwnershipConflicts": {
       "src/components/DocumentTagCloud.tsx": 3,
       "src/components/clinical-dashboard/dashboard-nav.tsx": 1,

src/components/calculators/calculator-ui.tsx

@@ -183,6 +183,13 @@ export const toneBar: Record<CalculatorTone, string> = {
   danger: "bg-[color:var(--danger)]",
 };
 
+const toneBandPattern: Record<CalculatorTone, string> = {
+  success: "border-b-2 border-[color:var(--text-heading)]",
+  info: "border-t-2 border-[color:var(--text-heading)]",
+  warning: "border-y-2 border-[color:var(--text-heading)]",
+  danger: "border-2 border-[color:var(--text-heading)]",
+};
+
 export function SeverityPill({ tone, label, className }: { tone: CalculatorTone; label: string; className?: string }) {
   return (
     <span
@@ -217,11 +224,15 @@ export function ScoreBandBar({
 
   return (
     <div className={cn("grid gap-1", className)}>
-      <div className="relative flex h-2 overflow-hidden rounded-full border border-[color:var(--border)]">
+      <div
+        className="relative flex h-2 overflow-hidden rounded-full border border-[color:var(--border)]"
+        role="img"
+        aria-label={`Score severity scale from ${calc.minScore} to ${calc.maxScore}`}
+      >
         {calc.bands.map((band) => (
           <div
             key={`${band.min}-${band.label}`}
-            className={cn(toneBar[band.tone], started ? "opacity-70" : "opacity-30")}
+            className={cn(toneBar[band.tone], toneBandPattern[band.tone], started ? "opacity-70" : "opacity-30")}
             style={{ width: `${((band.max - band.min + 1) / (span + 1)) * 100}%` }}
           />
         ))}

src/components/clinical-dashboard/visual-evidence.tsx

@@ -450,7 +450,7 @@ function EvidenceGapsPanel({ warnings }: { warnings: string[] }) {
           key={`${warning}:${index}`}
           className="grid grid-cols-[auto_minmax(0,1fr)] items-start gap-2 rounded-md border border-[color:var(--warning-border)] bg-[color:var(--warning-soft)]/45 px-2.5 py-2"
         >
-          <span className="nums grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-[color:var(--surface-raised)] text-2xs font-bold text-[color:var(--warning)] shadow-[var(--shadow-inset)]">
+          <span className="nums grid h-5 min-w-5 shrink-0 place-items-center rounded-full bg-[color:var(--surface-raised)] text-2xs font-bold text-[color:var(--text-heading)] shadow-[var(--shadow-inset)]">
             {index + 1}
           </span>
           <p className="line-clamp-2 text-xs leading-5 text-[color:var(--text)]">{warning}</p>

src/components/ui-primitives.tsx

@@ -171,10 +171,10 @@ export const tableCardHeader =
 export const tableMicroActionRow =
   "flex min-h-tap flex-wrap items-center gap-1 border-t border-[color:var(--border)] px-2 py-1.5 text-xs font-semibold text-[color:var(--text-muted)] sm:min-h-9";
 export const sidebarItem = `flex min-h-tap min-w-0 w-full items-center gap-2 overflow-hidden rounded-lg px-2.5 text-sm font-semibold text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] ${controlDisabled}`;
-const statusDotBase = "inline-block h-2 w-2 shrink-0 rounded-full";
-export const statusDotReady = `${statusDotBase} bg-[color:var(--success)]`;
-export const statusDotReview = `${statusDotBase} bg-[color:var(--warning)]`;
-export const statusDotMuted = `${statusDotBase} bg-[color:var(--decoration-soft)]`;
+const statusMarkerBase = "inline-block h-2 w-2 shrink-0";
+export const statusDotReady = `${statusMarkerBase} rounded-full border-2 border-[color:var(--text-heading)] bg-transparent`;
+export const statusDotReview = `${statusMarkerBase} rotate-45 rounded-sm bg-[color:var(--warning)]`;
+export const statusDotMuted = `${statusMarkerBase} rounded-full bg-[color:var(--decoration-soft)]`;
 
 export const toneSuccess =
   "border-[color:var(--success-border)] bg-[color:var(--success-soft)] text-[color:var(--success)]";

tests/status-semantics-contract.test.ts

@@ -0,0 +1,42 @@
+import { readFileSync } from "node:fs";
+
+import { describe, expect, it } from "vitest";
+
+import {
+  findColourOnlyStatusIndicatorsInSource,
+  findStatusColouredNumeralsInSource,
+} from "../scripts/design-system-contract-utils.mjs";
+
+const owners = [
+  "src/components/calculators/calculator-ui.tsx",
+  "src/components/ui-primitives.tsx",
+  "src/components/clinical-dashboard/visual-evidence.tsx",
+] as const;
+
+function source(path: (typeof owners)[number]) {
+  return readFileSync(new URL(`../${path}`, import.meta.url), "utf8");
+}
+
+describe("clinical status semantics", () => {
+  it.each(owners)("keeps %s free of colour-only status and status-coloured numerals", (path) => {
+    const contents = source(path);
+    expect(findColourOnlyStatusIndicatorsInSource(path, contents)).toEqual([]);
+    expect(findStatusColouredNumeralsInSource(path, contents)).toEqual([]);
+  });
+
+  it("gives every calculator severity tone a distinct non-colour edge pattern", () => {
+    const calculator = source("src/components/calculators/calculator-ui.tsx");
+    expect(calculator).toContain('success: "border-b-2 border-[color:var(--text-heading)]"');
+    expect(calculator).toContain('info: "border-t-2 border-[color:var(--text-heading)]"');
+    expect(calculator).toContain('warning: "border-y-2 border-[color:var(--text-heading)]"');
+    expect(calculator).toContain('danger: "border-2 border-[color:var(--text-heading)]"');
+    expect(calculator).toContain("aria-label={`Score severity scale from ${calc.minScore} to ${calc.maxScore}`}");
+  });
+
+  it("distinguishes ready, review, and muted markers by geometry as well as tone", () => {
+    const primitives = source("src/components/ui-primitives.tsx");
+    expect(primitives).toContain("statusDotReady = `${statusMarkerBase} rounded-full border-2");
+    expect(primitives).toContain("statusDotReview = `${statusMarkerBase} rotate-45 rounded-sm");
+    expect(primitives).toContain("statusDotMuted = `${statusMarkerBase} rounded-full bg");
+  });
+});