Known Accessibility & Mobile Remediation

Timeline

1. 1

   Start

   Zeb's fear: warmth vs. legibility

   Handwriting font + type size may be too hard for older eyes — asked for a critical UX review, not a build

2. 2

   Audit

   Code-level typography/contrast audit

   Found Kalam as the app's BASE body font (not just headings), and text-muted-foreground failing WCAG AA at 2.4-2.8:1

3. 3

   Plan

   Phased remediation plan, warmth preserved

   Reframed: warmth lives in more channels than the font — color, photography, spacing, voice. Script narrows to keepsake surfaces only

4. 4

   Phase 0

   One-line fixes

   Pinch-zoom restored, muted-foreground darkened to 4.5:1+, placeholder opacity removed

5. 5

   Phase 1

   Font boundary decided and shipped

   Headings stay Caveat everywhere (Zeb's call); body/reference text (Guide, Known Card content, textareas) moves to Inter

6. 6

   Mid-session

   Screenshot surfaces a new class of bug

   Known Card preview header same size as its own body text — traced to a systemic low-opacity theme-color convention, not a one-off

7. 7

   Phase 2

   Mobile-first layout + touch + contrast pass

   11 items: responsive padding, banner wrap, keyboard-safe textareas, ~90 active: states, 44px touch targets, per-theme contrast math, theme-consistency fix on Care Card/Takeover

8. 8

   Close

   Deployed to known.forgekits.build

   tsc + build clean, manifest/viewport verified live in production

What shipped

• Typography/accessibility audit of Known against WCAG and dementia-care design research, delivered as a reviewed artifact before any code changed

• Phased remediation plan (4 phases) that explicitly preserves product warmth while fixing legibility — Phase 0-2 shipped this session, Phase 3 (text-size toggle, focus/keyboard) deferred

• Phase 0: restored pinch-to-zoom, fixed WCAG-failing muted-foreground token (2.48:1 -> 4.62-5.24:1), removed opacity-suppressed placeholder text on the Known Card and Guide eyebrow label

• Phase 1: moved the app's base body font and textarea font from Kalam (handwriting) to Inter, keeping Caveat on all headings plus two explicit keepsake exceptions (Known Card subject name, Book Portrait cover)

• Phase 2: mobile-first responsive padding, Known Card banner wrap fix, keyboard-safe capture textareas, ~90 hover:/active: state pairs across ~30 files, 44px touch targets on daily-use controls, fixed the 'Known Card' preview header hierarchy outlier, computed real per-theme WCAG contrast before fixing a systemic low-opacity theme-color convention, wired portrait.colorTheme into Care Card and Takeover (previously hardcoded to the warm theme regardless of the family's actual choice)

• Deployed to known.forgekits.build — verified live via manifest.json and viewport meta checks against production, not just local