# 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

```bash
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.