Files

T

CI / test (push) Has been cancelled

Details

design: atmospheric redesign mockups (login + SPA, six dusks)

Self-contained HTML/CSS mockups proposing the brand-as-surface direction:
- Camogli harbor photo as the permanent backdrop on every authenticated view
- Six user themes rebuilt as atmospheric "dusks" (tinted overlays + accents)
  instead of cream variants
- Frosted-glass cards on top of the photo
- Same type system (Marcellus / Cormorant Garamond italic / Nunito body)
  shared between login and in-app

Includes:
- login-cinematic.html: canonical pre-auth example with Ken-Burns + grain
- spa/home.html, library.html, settings.html: in-app views with the new chrome
- spa/_tokens.css + _chrome.css: dusk system and frosted-glass primitives
- favicons/A-D: in-progress icon directions
- README.md with serving instructions and the porting checklist

Saved as a durable design artifact so the iteration survives /tmp wipes
and can be referred back to when porting to Vue.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

2026-05-15 09:44:26 -04:00

3.1 KiB

Raw Permalink Blame History

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.

3.1 KiB Raw Permalink Blame History