Files
pictureFrame-webApp/_design/favicons-and-logo-v2
football2801 645291c724
CI / test (push) Has been cancelled
fix(design-v2): match approved mockups — solid navy, side rail, editorial type
v2 was 'harbor backdrop everywhere + glass cards', but the approved
mockups at _design/atmospheric-redesign/ use solid navy with subtle
gradient, harbor selectively (theme swatches, frame heroes), left
side rail at desktop, and editorial Marcellus/Cormorant typography.

This rewrite:
- Drops the full-page harbor backdrop; body is now solid navy with
  a single radial gradient highlight
- Loads Marcellus, Cormorant Garamond, DM Mono via Google Fonts
- Editorial type recipes: h1/h2/h3 + frame card name + settings title
  use Marcellus. settings__hint becomes italic Cormorant. Section
  labels become DM Mono caps with 0.28em letterspacing
- TopNav restyled at desktop (≥960px) into a left-fixed side rail:
  240px wide, vertical stack of nav items, active item shows inset
  yellow rule + surface bg. Body gets 240px padding-left to shift
  content right.
- Theme swatches reuse the harbor.jpg inside their preview area,
  tinted to each dusk's color — matches the mockup exactly
- Per-dusk surface colors made opaque (was rgba 0.55) so cards are
  fully readable

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-15 14:55:19 -04:00
..

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

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.