football2801
01b6007b1c
CI / test (push) Has been cancelled
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>
68 lines
3.1 KiB
Markdown
68 lines
3.1 KiB
Markdown
# 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.
|