Build Log

Known Accessibility & Mobile Remediation

July 6, 2026

Audited Known's typography and contrast against dementia-caregiver accessibility research, then shipped three phases fixing legibility, touch targets, and theme consistency — while keeping the product's warmth intact.

KnownAccessibilityMobileUX

phases shipped

55+

files touched

production deploys

typecheck errors across the whole session

Timeline

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

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

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

Phase 0

One-line fixes

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

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

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

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

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

“that why we used the handwriting font... bad choice I guess”
— Zeb, reconsidering the font choice mid-session — resolved as a scoping problem, not a bad instinct