---
# vibed-orml
title: 'bit-by-bit: rename app to ''Paint by Habits'' + design cleanup pass'
status: completed
type: task
priority: normal
created_at: 2026-07-14T18:53:51Z
updated_at: 2026-07-14T19:06:14Z
---

User requests:
1. Rename the app from "Bit by Bit" to "Paint by Habits" (in-app strings, docs). Keep the localStorage key (bitbybit.v1) for backward compatibility with existing user data.
2. Capture populated screenshots of every view at desktop and mobile sizes (seeding state artificially where needed), then run a design-focused agent pass to clean up the visual design.

- [x] Rename app in index.html (title, header, about, export filename, aria text; storage key kept for compat)
- [x] Rename in README/docs
- [x] Screenshot harness: seeded states, 9 views x mobile/desktop incl. celebration modal (sync-timer trick)
- [x] Design agent pass applied (Fable fork; 18 before/after screenshots)
- [x] Re-screenshot + re-validate (node --check clean, zero external refs, after-shots verified)

## Summary of Changes

1. **Rename:** app is now "Paint by Habits" — page title, header, About, storage-warning/import/upload error copy, export filename (`paint-by-habits-backup-*.json`), and all project docs. localStorage keys (`bitbybit.v1`) intentionally unchanged for backward compatibility with existing user data.
2. **Screenshot harness** (scratchpad `design-shots/`): awk-injected config/seed/driver scripts produce 9 seeded views (main light+dark, onboarding 1+2, four settings tabs, celebration modal via synchronous-timer shim) at 390×844 and 1440×900 in headless Firefox.
3. **Design pass (Fable fork):** two-column desktop layout ≥880px with sticky artwork card; fixed onboarding overflow at 390px; nowrap buttons + visible disabled states; settings tabs no longer clip on mobile; styled `::file-selector-button`; dark-mode progress track visible; clamp()-sized tinted header title; preset label/spacing polish. Verified across all 18 after-shots; `node --check` clean; still zero external references (73.5KB).

Related: `vibed-p2es` (arbitrary emoji input) created as todo, not implemented per user instruction.