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

User description

Requested by Josh · project thread

Summary

Before: the smallest labels, tags and calendar months were 9 to 11 px. Figures were in the same face as the words. Work tags were coloured pills, Admin marked "date passed" with a diamond and "start renewing" with a triangle, and some rows were faded with transparency. There was no setting for screens in glare.

After: nothing on screen is smaller than 12 px. Counts, day numbers and ring figures are in Geist Mono. Work tags are grey pills whose shape carries the status colour (triangle overdue, filled dot due soon, tick done, dashed ring not recorded), and Admin uses the same shapes. Faded rows take a paler colour instead of transparency. A new Bright light switch in Settings, App preferences, gives solid screens with darker lines and heavier text, in light mode.

These are the shared parts of the Ward Flow design review that Josh approved ("all", 12 Oct). The My Day data-age line and the answer-first heroes follow in a second change once #3479 lands. The Clinical "highlight, don't hide" filter belongs to the Clinical polish thread.

How: the legacy --text-3xs and --text-2xs steps (about 2,000 call sites) now resolve to 12 px, and the work kit's sub-12 px sizes use --text-xs. A new data-dim hook in globals.css replaces three opacity fades. brightLight is an account preference that is normalised like the others, reflected onto <html data-bright> before paint and when it changes, and indexed in Settings search.

Areas touched: App experience, Personal practice, Design system

Verification

• Checks run: npm run test:focused on every changed file found 2 expected failures, and both are fixed: the Admin shape assertion and the preferences round-trip fixture. Rerun: Tests 63 passed (63). tsc --noEmit exit 0. ESLint and Prettier are clean on the changed files. check-type-scale --strict: "no arbitrary text-[px|rem|em] font sizes in src".
• Screenshots: 320 px checks of My Day, Roster, DSM and CPD, taken in container Chromium. Before and after images from the mockup are in the project files under ward-flow-ideas-2026-10-12/.
• Browser suite left to CI.

Risk and rollout

• Risk: low to medium. This is visual only, but the 12 px floor touches every screen, including Clinical, so some long labels may now truncate or wrap at 320 px or with large text. CI browser tests will show any of that.
• Rollback: revert the PR.
• Provider or production effects: none. There is no migration. brightLight lives in the existing preferences JSON.

Notes

• Draft until CI browser tests are green.

🤖 Generated with Claude Code

https://claude.ai/code/session_0113Rr2NnmLuLKLWdKTwHHqd

Generated by Claude Code

Summary by cubic

Applies the Ward Flow design review (approved 12 Oct 2026): nothing on screen sits below 12 px, figures render in Geist Mono, and status is one shape on a grey pill instead of a coloured badge.

• --text-3xs (10 px) and --text-2xs (11 px) now resolve to 12 px; the work kit's sub-12 px sizes use --text-xs.
• Shapes are triangle overdue, filled dot due soon, tick done, dashed ring not recorded; Admin's status marks, the renewals timeline, and My Day's late lines use the same set, and the glyphs stay visible under forced colours. Neutral and mode tags stay plain labels with no shape.
• Faded rows (stale on-call rows, out-of-month calendar days, locked assessments) dim through a new data-dim hook instead of opacity, taking a paler colour and muted status tones rather than transparency.
• New Bright light toggle in Settings, App preferences: a persisted account preference that gives solid surfaces (including the More sheet), darker lines, heavier text, light mode only. It pins light mode and resets with the reset-all action. The dim and Bright light rules live in reading-aids.css so the cascade order is explicit.
• Admin Today's renewal hero answers with the date-passed and due counts in the same words as the Coming up list, with the item as the line underneath (compliance renewals only; new-job items keep the item as the title, as does My Day).
• My Day's late lines trade coloured text for dark words with a red triangle once a date passes and an amber dot while overdue but in hand.
• The floor's tightest 320 px spots — three-option setting segments, the also-matches header, and the privacy line — were adjusted to stay on one line.

This is visual-only apart from the hero title, but the floor touches every screen; some long labels may still truncate or wrap at 320 px or with large text. Draft until CI browser tests are green.

Summary by Gitar

• Admin Today hero:
  • Renewals hero now names the date-passed and due-in-90-days counts, with the next item beneath it
• My Day late lines:
  • Late lines use dark words with a red triangle once a date passes and an amber dot while overdue
• Narrow screen fixes:
  • Three-option settings segments, the also-matches header and the privacy line were adjusted to stay on one line at 320px

_{This will update automatically on new commits.}

CodeAnt-AI Description

Raise small-text readability and add a Bright light display option

What Changed

• Small labels and work-screen text now have a 12px minimum, and figures such as counts and dates use a consistent fixed-width style.
• Statuses are easier to distinguish: overdue items use a triangle, upcoming items a dot, completed items a tick, and unrecorded items a dashed ring.
• Stale, locked, and out-of-month content uses paler colours instead of transparency.
• Settings now includes Bright light, which uses solid surfaces, darker lines, and heavier text for glare; enabling it switches to light mode.
• Admin Today’s renewals card summarizes dates passed and items due within 90 days, then names the next item.

Impact

✅ More readable small labels on phones
✅ Clearer status distinctions at a glance
✅ Higher-contrast screens in bright environments

@codeant-ai ask: Your question here

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

@codeant-ai: Your feedback here

@codeant-ai: Do not flag unused imports.

@codeant-ai: review