Roots & Echoes
A daily-use life-story companion for older adults — Story Time (timeline), Photos & Family (with a family tree), Music, Books, Art, and Games — built with large text, high contrast, and voice input throughout. See the full plan for the "why" behind these choices.
Visual design: "Warm Keepsake"
The app uses a bespoke, jewel-tone keepsake-book visual style called Warm Keepsake: serif display type (Playfair Display for headings, Fraunces for the wordmark's ampersand and italics) paired with the existing accessible sans-serif body text; a single universal rust accent (--color-primary) on every primary button and highlight; a hand-drawn line-icon system (src/components/Icon.tsx) replacing all emoji; a circular double-ring "medallion" icon badge (src/components/Medallion.tsx) marking which mode a piece of content belongs to; and a signature pure-CSS "corner-tick" ornament — four small bracket marks at the corners of every card, built entirely from layered CSS gradients (see .tile in src/app/globals.css) with no extra markup — applied consistently to every tile, list row, photo, and form throughout the app, including the family tree diagram and all four games. All of the app's original accessibility rules (20px+ base type with the A / A+ / A++ control, 56px+ touch targets, a warm high-contrast fixed-light theme, visible focus rings, read-aloud everywhere) are unchanged — this was a visual restyle only, layered on top of the same accessible foundation.
What's in this MVP
- Story Time — a rotating gentle prompt (drawn from a curated ~100-prompt library across 8 life-area topics, browsable by topic or "Surprise me" — see "Story prompt library" below), type-or-speak capture (Web Speech API dictation), a visual timeline of saved memories, a detail view with read-aloud.
- Photos & Family — real photo uploads (falling back to a labeled color tile until an image is added — see "Photos & audio" below), tagging who's in a photo, adding people, and an auto-built family tree diagram grouped by relationship. A person's name/relationship/living-status can be edited or the person removed from the "Family & friends" list on the Photos page, and a photo tag or a whole photo can be removed too — every delete uses an inline "Are you sure?" confirm rather than a popup.
- Music — add songs with lyrics, a personal note (voice-capturable), and an optional upload of the actual recording; an "Ask for a song" box lets the user type or say an artist/song name and the closest match plays right there; a per-song page has real playback plus a "sing a part of this song" recorder.
- Books — add books that were influential or worth recommending, with a voice-capturable note on why it matters. Deliberately minimal (title, author, note) — no ratings or extra fields.
- Art — a rotating gentle prompt about influential or memorable art, plus free-form "add a piece" anytime: title, artist, a medium (painting/sculpture/photography/other, each with its own icon), and a voice-capturable note on why it made an impression. Art pieces can optionally be linked back to a Story Time memory.
- Games — four pressure-free memory games built entirely from the senior's own saved content, all multiple-choice/tap-based (no drag, no typing required), and never marked "wrong": a tap-to-swap jigsaw puzzle of one of their photos, a "Who's in the Photo?" guessing game, a "Name That Song" lyric-snippet guessing game, and a "Guess the Artwork" title-guessing game. Answers are always revealed warmly ("This one is Grace Whitfield") rather than scored.
- Activity tracker — an Activity page (linked from Home, next to Settings) for the senior or any caregiver helping them: stat tiles for how much is saved in each category, a simple "added in the last 2 weeks" bar chart, and a chronological feed of every addition across the app, each labeled with who added it and when.
- Read-aloud voice — from Settings, the account owner picks which voice reads every prompt/memory/lyric aloud throughout the app: Default, two "AI" presets (Warm & Calm, Clear & Bright), or a Custom voice modeled after an uploaded recording (with a required "I have permission to use this voice recording" checkbox). Every preset can be previewed with a "Hear a sample" button before choosing it. See "Read-aloud voice" below for how it's actually implemented.
- Multi-user — real accounts via Supabase Auth (magic-link email); each senior's data is private by default, enforced by row-level security in Postgres, not just app logic.
- Family caregiver access — a senior invites a family member by email from Settings; that person signs in (or signs up, if they're new) and — once they've picked whose story they're helping with — can, if granted "contribute" access, add memories/photos/people/songs/books, always attributed to them, never presented as if the senior wrote it. A senior manages who has access from Settings; anyone with access (including view-only) can see the Activity page.
- Accessible by default — 20px+ base type with an in-app A / A+ / A++ size control, 56px+ touch targets, a warm high-contrast fixed-light theme (no surprise dark mode), a visible focus ring everywhere, and read-aloud on every prompt/transcript/lyrics block.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
