Design: 12 px text floor, mono figures, status shapes, paler fades, Bright light

docs/design-system/GATES.md

@@ -132,23 +132,23 @@ rendered size. The `*-minus` steps sit one notch under the Tailwind default they
 named for. This table is documentation, not a gate: do not delete type steps, and do
 not add a blocking ESLint rule for which existing step a surface chooses.
 
-| Size  | Utility           | When to use                                                         |
-| ----- | ----------------- | ------------------------------------------------------------------- |
-| 10px  | `text-3xs`        | Micro floor: dense metadata, legends, count bubbles                 |
-| 11px  | `text-2xs`        | Chip compact / secondary labels                                     |
-| 12px  | `text-xs`         | Tailwind default; Chip `standard`                                   |
-| 13px  | `text-sm-minus`   | One notch under `text-sm` (14px) — dense body/labels                |
-| 14px  | `text-sm`         | Tailwind default body/label                                         |
-| 15px  | `text-base-minus` | One notch under `text-base` (16px) — comfortable body just under 16 |
-| 16px  | `text-base`       | Tailwind default                                                    |
-| 17px  | `text-lg-minus`   | One notch under `text-lg` (18px)                                    |
-| 18px  | `text-lg`         | Tailwind default                                                    |
-| 20px  | `text-xl`         | Tailwind default                                                    |
-| 22px  | `text-2xl-minus`  | One notch under `text-2xl` (24px)                                   |
-| 24px  | `text-2xl`        | Tailwind default                                                    |
-| 26px  | `text-3xl-minus`  | One notch under `text-3xl` (30px)                                   |
-| 30px  | `text-3xl`        | Tailwind default                                                    |
-| fluid | `text-hero`       | Mode-home display heading (`clamp`)                                 |
+| Size  | Utility           | When to use                                                          |
+| ----- | ----------------- | -------------------------------------------------------------------- |
+| 12px  | `text-3xs`        | Legacy alias, now at the 12 px floor (Ward Flow review, 12 Oct 2026) |
+| 12px  | `text-2xs`        | Legacy alias, now at the 12 px floor (Ward Flow review, 12 Oct 2026) |
+| 12px  | `text-xs`         | Tailwind default; Chip `standard`                                    |
+| 13px  | `text-sm-minus`   | One notch under `text-sm` (14px) — dense body/labels                 |
+| 14px  | `text-sm`         | Tailwind default body/label                                          |
+| 15px  | `text-base-minus` | One notch under `text-base` (16px) — comfortable body just under 16  |
+| 16px  | `text-base`       | Tailwind default                                                     |
+| 17px  | `text-lg-minus`   | One notch under `text-lg` (18px)                                     |
+| 18px  | `text-lg`         | Tailwind default                                                     |
+| 20px  | `text-xl`         | Tailwind default                                                     |
+| 22px  | `text-2xl-minus`  | One notch under `text-2xl` (24px)                                    |
+| 24px  | `text-2xl`        | Tailwind default                                                     |
+| 26px  | `text-3xl-minus`  | One notch under `text-3xl` (30px)                                    |
+| 30px  | `text-3xl`        | Tailwind default                                                     |
+| fluid | `text-hero`       | Mode-home display heading (`clamp`)                                  |
 
 ⚠️ **The "1 318 call sites" figure this section used to quote was a repo-wide grep including
 `src/app/mockups/**`, which every one of these gates excludes** — 1 360 at `7aaf9349c`.

scripts/check-type-scale.mjs

@@ -4,7 +4,8 @@
 //
 // The scale lives in the @theme block of src/app/globals.css: named steps
 // text-3xs … text-3xl-minus, on top of Tailwind's default xs/sm/base/lg/xl/2xl/3xl.
-// text-3xs (10px) is the floor; the old 8px text-4xs step is retired.
+// 12px is the floor: text-3xs and text-2xs are legacy names that now alias xs
+// (owner decision 12 Oct 2026); the old 8px text-4xs step is retired.
 // Arbitrary text-[<n><unit>] values re-introduce off-scale sizes; this check
 // tracks that drift. Colour utilities (text-[color:var(--…)]) are the sanctioned
 // token-access form and are intentionally NOT flagged.

src/app/api/account/preferences/route.ts

@@ -95,6 +95,7 @@ const preferencesPatchSchema = z
     showRecentOnHome: z.boolean(),
     showProtocolsOnHome: z.boolean(),
     compactCitations: z.boolean(),
+    brightLight: z.boolean(),
     // Omitted keys are preserved from the stored account row on PUT — never
     // defaulted here, or a pre-change tab can overwrite a stored opt-out.
     saveRecentSearches: z.boolean(),

src/app/globals.css

@@ -236,20 +236,20 @@
      `eyebrowText` in ui-primitives.tsx for the uppercase eyebrow treatment
      (`--text-2xs` used to bake that tracking in; it is now the neutral 11px
      step and the tracking lives at the recipe/call site instead).
-       3xs         10px  micro floor: dense metadata, legend labels, count
-                         bubbles. An 8px `4xs` step existed here and is retired
-                         — unreadable at any density in a clinical product, so
-                         nothing below 10px is a legal step. ≤9px snaps here.
-       2xs         11px  Chip `compact` / secondary labels (most common small size)
+       3xs         12px  legacy name, now an alias of xs. 12px is the floor for
+                         every word on screen (owner decision, 12 Oct 2026, from
+                         the Ward Flow review): the old 10px and 8px steps were
+                         too small to read on a phone in a clinical product.
+       2xs         12px  legacy name, now an alias of xs (was 11px)
        (xs 12 · sm 14 · base 16 come from Tailwind's default scale —
         Chip `standard` uses xs / 12px; see docs/design-system/TOKENS.md)
        sm-minus    13px  one notch under sm — dense body/labels bigger than xs
        base-minus  15px  one notch under base — comfortable body just under 16
        (lg 18 · xl 20 · 2xl 24 come from Tailwind's default scale)
        lg-minus    17px  one notch under lg — display titles a shade under 18
        2xl-minus   22px  one notch under 2xl — wide-screen nowrap headings */
-  --text-3xs: 0.625rem;
-  --text-2xs: 0.6875rem;
+  --text-3xs: 0.75rem; /* alias of xs, see above */
+  --text-2xs: 0.75rem; /* alias of xs, see above */
   --text-sm-minus: 0.8125rem;
   --text-base-minus: 0.9375rem;
   --text-lg-minus: 1.0625rem;

src/app/layout.tsx

@@ -17,6 +17,7 @@ import { ToastProvider } from "@/components/ui/toast";
 import { PUBLIC_APP_ROBOTS_METADATA } from "@/lib/crawler-policy";
 import { BRAND_DESCRIPTION, BRAND_NAME } from "@/lib/brand";
 import "./globals.css";
+import "./reading-aids.css";
 
 /**
  * Origin of the Supabase project, or null when the public env is absent (demo mode).
@@ -158,7 +159,7 @@ export default async function RootLayout({
           // read it), which reads as a hydration mismatch on this attribute.
           suppressHydrationWarning
           dangerouslySetInnerHTML={{
-            __html: `${THEME_BOOTSTRAP_SCRIPT}${GLASS_FALLBACK_SCRIPT}(function(){try{var p=JSON.parse(localStorage.getItem("clinical-kb-preferences")||"{}");if(p&&typeof p==="object"){if(p.density==="compact"||p.density==="spacious"){document.documentElement.setAttribute("data-density",p.density);}if(p.motion==="reduced"||p.motion==="full"){document.documentElement.setAttribute("data-motion",p.motion);}}}catch(e){/* storage blocked or stored preferences JSON corrupt - the default density/motion apply */}})();`,
+            __html: `${THEME_BOOTSTRAP_SCRIPT}${GLASS_FALLBACK_SCRIPT}(function(){try{var p=JSON.parse(localStorage.getItem("clinical-kb-preferences")||"{}");if(p&&typeof p==="object"){if(p.density==="compact"||p.density==="spacious"){document.documentElement.setAttribute("data-density",p.density);}if(p.motion==="reduced"||p.motion==="full"){document.documentElement.setAttribute("data-motion",p.motion);}if(p.brightLight===true){document.documentElement.setAttribute("data-bright","");}}}catch(e){/* storage blocked or stored preferences JSON corrupt - the default density/motion apply */}})();`,
           }}
         />
         <a

src/app/reading-aids.css

@@ -0,0 +1,68 @@
+/* Reading aids from the Ward Flow review (owner decision 12 Oct 2026): paler
+   fades and the Bright light setting. Imported after globals.css in the root
+   layout so these rules keep the last word in the cascade. */
+
+/* Dimmed content takes a paler colour, never opacity, so the text keeps its
+   contrast (opacity multiplies against whatever sits behind it). Put
+   `data-dim` on the row or cell; status colours inside it go quiet too. */
+[data-dim] {
+  --dim-ink: var(--text-muted);
+  --text-heading: var(--dim-ink);
+  --text: var(--dim-ink);
+  --work-ink: var(--dim-ink);
+  --clinical-accent: var(--dim-ink);
+  --mode-identity: var(--dim-ink);
+  --mode-identity-soft: var(--surface-subtle);
+  --mode-identity-border: var(--border);
+  --mode-identity-contrast: var(--surface);
+  --success: var(--dim-ink);
+  --success-text: var(--dim-ink);
+  --warning: var(--dim-ink);
+  --info: var(--dim-ink);
+  --danger-text: var(--dim-ink);
+  --danger-bg: var(--surface-subtle);
+  --danger-border: var(--border);
+  --info-text: var(--dim-ink);
+  --info-bg: var(--surface-subtle);
+  --info-border: var(--border);
+  --warning-text: var(--dim-ink);
+  --warning-bg: var(--surface-subtle);
+  color: var(--dim-ink);
+}
+
+/* Bright light (Settings, App preferences): for glare on a ward or in sun.
+   Owner decision 12 Oct 2026, from the Ward Flow review. Solid surfaces with
+   no glass or blur, darker lines and secondary text, body text one step
+   heavier. It is a light-only look: turning it on pins light mode, and it
+   stands down if the reader later picks dark. The selector out-ranks the
+   `.ckb-v2.ckb-v2` token layer so the overrides win. */
+html.ckb-v2.ckb-v2[data-bright]:not(.dark) {
+  --border: var(--neutral-400);
+  --border-strong: var(--neutral-500);
+  --neutral-300: var(--neutral-400);
+  --text-muted: var(--text);
+  --decoration-soft: var(--neutral-500);
+  --surface-glass: var(--surface-raised);
+}
+html.ckb-v2.ckb-v2[data-bright]:not(.dark) [data-dim] {
+  /* Bright light makes secondary text full strength, so a fade needs its
+     own paler ink to stay distinct. */
+  --dim-ink: var(--neutral-500);
+}
+html[data-bright]:not(.dark) body {
+  font-weight: 500;
+}
+html[data-bright]:not(.dark) *,
+html[data-bright]:not(.dark) *::before,
+html[data-bright]:not(.dark) *::after {
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+}
+html[data-bright]:not(.dark) .work-band,
+html[data-bright]:not(.dark) .universal-header {
+  background: var(--surface-raised) !important;
+  background-image: none !important;
+}
+html[data-bright]:not(.dark) .work-card {
+  box-shadow: none;
+}