design: favicon v2 (V-centric) + logo-placement mockups

Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 10:25:09 -04:00
parent 01b6007b1c
commit 3bd0b9a5a1
49 changed files with 2120 additions and 0 deletions
@@ -0,0 +1,65 @@
+# WeVisto · favicons v2 + logo placements
+
+2026-05-15 iteration following the atmospheric-redesign checkpoint.
+Two threads:
+
+1. **Favicons rebuilt** — scrapped the previous A/B/C/D (roof, frame+horizon,
+   skyline, wax seal) as generic invented icons. The new set reduces to the
+   brand's own glyph: the yellow V from the wordmark, presented four ways.
+2. **The wordmark logo placed at hero scale** — three mockups giving the
+   full `wordmark.svg` (harbor photo + "WeVisto") room to live in the PWA
+   beyond the existing email + small-badge usage.
+
+## Picked direction (favicons)
+
+**3 · V-viewfinder.** The V cut out of navy with the harbor photo visible
+inside — *you are looking at a photograph framed by the V.* Strongest
+refinement is **3b** (`favicons/3b-viewfinder-buildings-*.png`) which tightens
+the inner photo crop onto Camogli's coloured row-houses for a more
+brand-specific small-size reading.
+
+Runner-up: **4 · V-cropped** (`favicons/4-V-cropped-*.png`) — an actual
+tight crop of the published wordmark. Most "WeVisto in the image itself"
+of any direction.
+
+## What's here
+
+```
+favicons-and-logo-v2/
+├── index.html                              — entry point, shows everything
+├── favicons/
+│   ├── 1-V-pure-{16,32,64,180}.png         — yellow V on navy, isolated
+│   ├── 2-V-horizon-{...}.png               — V plus horizon + sun
+│   ├── 3-V-viewfinder-{...}.png            — original V cut over full harbor
+│   ├── 3a-viewfinder-full-thin-{...}.png   — refinement A (full harbor, thin frame)
+│   ├── 3b-viewfinder-buildings-{...}.png   — recommended: Camogli row-houses
+│   ├── 3c-viewfinder-noframe-{...}.png     — no yellow outline
+│   ├── 3d-viewfinder-thick-{...}.png       — thick yellow frame
+│   ├── 4-V-cropped-{...}.png               — cropped from actual wordmark
+│   └── 2-V-horizon.svg                     — SVG source for direction 2
+├── logo-moments/
+│   ├── splash.html                         — PWA cold-launch full-screen
+│   ├── library-with-logo.html              — library hero w/ full wordmark
+│   └── about.html                          — settings → about page
+├── assets/                                 — harbor.jpg, wordmark.svg, mark images
+└── spa/                                    — shared atmospheric tokens + chrome
+                                             (so logo-moments can render)
+```
+
+## To view
+
+```bash
+cd webApp/_design/favicons-and-logo-v2
+python3 -m http.server 8766 --bind 0.0.0.0
+# → open http://<host>:8766/
+```
+
+## Open work
+
+- Decide between **3b** (recommended) and **4** (also "promising").
+- Logo-moments not yet picked — Matt's review pending on which of the
+  three placements (splash / library hero / about page) to wire up first.
+- Once selected, rasterize 3b at the standard PWA sizes (16/32/64 favicons,
+  180 apple-touch-icon, 192/512 PWA manifest icons, 512 maskable variant
+  with safe-zone padding) and ship into `webApp/frontend/public/icons/`
+  replacing the current split-W-on-photo set.