pictureFrame-webApp/_design/atmospheric-redesign

WeVisto · atmospheric redesign

Iterative design proposal landed on 2026-05-15. Captures the brand-as-surface direction: the Camogli harbor photograph is the actual background of every authenticated view, frosted-glass cards float on it, and the six user themes get rebuilt as atmospheric dusks (tinted filters over the same photo) instead of cream variants.

What's here

atmospheric-redesign/
├── index.html                 — entry point, links to every mockup
├── login-cinematic.html       — pre-auth canonical example
├── spa/
│   ├── home.html              — HomeView with new chrome + frame card + up-next strip
│   ├── library.html           — LibraryView empty state (mark in halo)
│   ├── settings.html          — SettingsView with the dusk picker
│   ├── _tokens.css            — type + dusks (replaces cream theme system)
│   └── _chrome.css            — frosted-glass app bar / bottom nav / signature
├── favicons/                  — A/B/C/D icon directions (still iterating)
└── assets/
    ├── harbor.jpg             — the brand photograph (extracted from logo.svg)
    ├── wordmark.svg           — full WeVisto wordmark + harbor
    ├── mark-photo.png         — split-W on harbor (512px)
    ├── mark-photo-64.png      — same, 64px for small uses
    └── mark-navy.svg          — split-W on solid navy (lightweight vector mark)

To view

cd webApp/_design/atmospheric-redesign
python3 -m http.server 8766 --bind 0.0.0.0
# → open http://<host>:8766/

Every SPA mockup defaults to Ocean Dusk and has a floating dusk-switcher in the bottom-right — click any chip to flip the room to that dusk.

The principle

Brand layer (fixed): the harbor photograph, the wordmark, the yellow V, the split-W mark. Permanent fixed backdrop. Never changes with theme.

Theme layer (yours): six dusks — Ocean, Amber, Sage, Rose, Mauve, Honey. Each is an rgba multiplied over the photo plus a theme-coloured accent for primary CTAs. Same room, different time of day.

Open work

• Favicon mark — A/B/C/D directions saved; Matt's feedback was that the small mark needs more WeVisto presence "in the image itself", not just initials. Next iteration to integrate the wordmark into the mark.
• Logo usage across app — currently the full wordmark logo only appears in emails. To propagate to login splash / library hero / welcome moments / upload success states.
• Implementation — these are HTML/CSS mockups, not Vue components. The real port needs:
  • Migrate frontend/src/styles/global.scss from six cream themes to six dusks (replace --color-* cream tokens with the --bg-tint / --glass / --accent tokens shown in spa/_tokens.css).
  • Apply the harbor backdrop via body::before in global.scss.
  • Add the top app bar component (mark + wordmark + sub + actions).
  • Rebuild HomeView / LibraryView / SettingsView to use .glass surfaces.
  • Update the Twig login / register / setup templates to share the same backdrop + frosted-glass card pattern.