Design proposal · 2026-05-15 · settled
WeVisto
Atmospheric system
login → app, one room
— the brand is the surface, the theme is the tint, the photograph runs through.

## ○The principle, after several mis-tries

The earlier proposals kept the app on cream while only the login was atmospheric. That made login feel like a different product. The right answer was to rebuild the theme system itself.

### ● Brand is the surface

The Camogli harbor photograph is the permanent fixed backdrop on every authenticated view — same as the login. Cards become frosted glass floating on it. Light text on dark, Marcellus / Cormorant italic / Nunito body, the same recipe as the login. The wordmark and split-W mark live in the persistent top app bar.

### ● Theme is the dusk

The six user themes get reborn as atmospheric dusks: a tinted overlay multiplied over the same harbor photo, plus a theme-coloured accent for primary CTAs. Same room, different time of day. The yellow V is the one brand colour that survives across every dusk — wordmark, hairlines, plate numbers.

## I.The dusks (replaces the six cream themes)

Each chip below is the harbor photo with the dusk's tint multiplied over it — the actual recipe used in the body backdrop. Same photo, six moods.

Ocean
— the harbor
Amber
— the workshop
Sage
— the garden
Rose
— the parlor
Mauve
— the study
Honey
— the alcove

## II.The front door — login

The canonical example of the visual language. Same harbor backdrop, deep navy filter, frosted-glass card, staggered wordmark reveal. Now also: the home page lives in the same room.

Open ⟶
II.

### Login · cinematic arrival

templates/security/login.html.twig · register.html.twig

Animated wordmark reveal, frosted-glass card, yellow CTA. Respects prefers-reduced-motion.

## III.The room — in-app views

All three default to Ocean Dusk. Use the floating chip cluster in the bottom-right of any mockup to switch dusks live — the photo re-tints, glass cards re-tint, accent button changes, the wordmark and yellow V stay constant.

Open ⟶
III·a

### Home

/ · HomeView.vue

Top app bar; editorial hero ("Good morning, Alice."); frame card as glass with the user's frame photo inside; up-next strip of queued thumbnails.

Open ⟶
III·b

### Library · empty state

/library · LibraryView.vue

A 112px mark in a yellow halo, "A library, waiting." in display serif, three-step glass card explaining how it works, signature.

Open ⟶
III·c

### Settings

/settings · SettingsView.vue

Glass list rows. Dusk picker grid showing each dusk as a tinted harbor preview — click to switch the page live.

## IV.The small mark — favicon directions (work in progress)

Four icon directions explored so far. Matt's still iterating here — wants WeVisto to be more present inside the image itself, not just initials beside the brand.

In progress — next iteration to integrate the wordmark into the mark and propagate the wordmark logo throughout more app surfaces.
A.Warmth / home

#### Roof V

House silhouette where the rooftop is the V. Yellow door at centre.
16
32
64
180
B.Literal / poetic

#### Frame + horizon

A tiny photo frame with a sun over the sea. Most legible at 16.
16
32
64
180
C.Origin-specific

#### Camogli skyline

Camogli's coloured row-houses as silhouette. Risk: generic city at 16.
16
32
64
180
D.Gift / stationery

#### Wax seal V

Pressed-wax seal with V. Strong at 64+, softens at 16.
16
32
64
180