diff --git a/_design/favicons-and-logo-v2/README.md b/_design/favicons-and-logo-v2/README.md new file mode 100644 index 0000000..700ab83 --- /dev/null +++ b/_design/favicons-and-logo-v2/README.md @@ -0,0 +1,65 @@ +# WeVisto · favicons v2 + logo placements + +2026-05-15 iteration following the atmospheric-redesign checkpoint. +Two threads: + +1. **Favicons rebuilt** — scrapped the previous A/B/C/D (roof, frame+horizon, + skyline, wax seal) as generic invented icons. The new set reduces to the + brand's own glyph: the yellow V from the wordmark, presented four ways. +2. **The wordmark logo placed at hero scale** — three mockups giving the + full `wordmark.svg` (harbor photo + "WeVisto") room to live in the PWA + beyond the existing email + small-badge usage. + +## Picked direction (favicons) + +**3 · V-viewfinder.** The V cut out of navy with the harbor photo visible +inside — *you are looking at a photograph framed by the V.* Strongest +refinement is **3b** (`favicons/3b-viewfinder-buildings-*.png`) which tightens +the inner photo crop onto Camogli's coloured row-houses for a more +brand-specific small-size reading. + +Runner-up: **4 · V-cropped** (`favicons/4-V-cropped-*.png`) — an actual +tight crop of the published wordmark. Most "WeVisto in the image itself" +of any direction. + +## What's here + +``` +favicons-and-logo-v2/ +├── index.html — entry point, shows everything +├── favicons/ +│ ├── 1-V-pure-{16,32,64,180}.png — yellow V on navy, isolated +│ ├── 2-V-horizon-{...}.png — V plus horizon + sun +│ ├── 3-V-viewfinder-{...}.png — original V cut over full harbor +│ ├── 3a-viewfinder-full-thin-{...}.png — refinement A (full harbor, thin frame) +│ ├── 3b-viewfinder-buildings-{...}.png — recommended: Camogli row-houses +│ ├── 3c-viewfinder-noframe-{...}.png — no yellow outline +│ ├── 3d-viewfinder-thick-{...}.png — thick yellow frame +│ ├── 4-V-cropped-{...}.png — cropped from actual wordmark +│ └── 2-V-horizon.svg — SVG source for direction 2 +├── logo-moments/ +│ ├── splash.html — PWA cold-launch full-screen +│ ├── library-with-logo.html — library hero w/ full wordmark +│ └── about.html — settings → about page +├── assets/ — harbor.jpg, wordmark.svg, mark images +└── spa/ — shared atmospheric tokens + chrome + (so logo-moments can render) +``` + +## To view + +```bash +cd webApp/_design/favicons-and-logo-v2 +python3 -m http.server 8766 --bind 0.0.0.0 +# → open http://:8766/ +``` + +## Open work + +- Decide between **3b** (recommended) and **4** (also "promising"). +- Logo-moments not yet picked — Matt's review pending on which of the + three placements (splash / library hero / about page) to wire up first. +- Once selected, rasterize 3b at the standard PWA sizes (16/32/64 favicons, + 180 apple-touch-icon, 192/512 PWA manifest icons, 512 maskable variant + with safe-zone padding) and ship into `webApp/frontend/public/icons/` + replacing the current split-W-on-photo set. diff --git a/_design/favicons-and-logo-v2/assets/harbor.jpg b/_design/favicons-and-logo-v2/assets/harbor.jpg new file mode 100644 index 0000000..a31a418 Binary files /dev/null and b/_design/favicons-and-logo-v2/assets/harbor.jpg differ diff --git a/_design/favicons-and-logo-v2/assets/mark-navy.svg b/_design/favicons-and-logo-v2/assets/mark-navy.svg new file mode 100644 index 0000000..6627ecc --- /dev/null +++ b/_design/favicons-and-logo-v2/assets/mark-navy.svg @@ -0,0 +1,12 @@ + + + + + + + + W + W + + diff --git a/_design/favicons-and-logo-v2/assets/mark-photo-64.png b/_design/favicons-and-logo-v2/assets/mark-photo-64.png new file mode 100644 index 0000000..486c0d9 Binary files /dev/null and b/_design/favicons-and-logo-v2/assets/mark-photo-64.png differ diff --git a/_design/favicons-and-logo-v2/assets/mark-photo.png b/_design/favicons-and-logo-v2/assets/mark-photo.png new file mode 100644 index 0000000..103b9c4 Binary files /dev/null and b/_design/favicons-and-logo-v2/assets/mark-photo.png differ diff --git a/_design/favicons-and-logo-v2/assets/wordmark.svg b/_design/favicons-and-logo-v2/assets/wordmark.svg new file mode 100644 index 0000000..a666134 --- /dev/null +++ b/_design/favicons-and-logo-v2/assets/wordmark.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + WeVisto + + + diff --git a/_design/favicons-and-logo-v2/favicons/1-V-pure-16.png b/_design/favicons-and-logo-v2/favicons/1-V-pure-16.png new file mode 100644 index 0000000..ae0a639 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/1-V-pure-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/1-V-pure-180.png b/_design/favicons-and-logo-v2/favicons/1-V-pure-180.png new file mode 100644 index 0000000..868427c Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/1-V-pure-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/1-V-pure-32.png b/_design/favicons-and-logo-v2/favicons/1-V-pure-32.png new file mode 100644 index 0000000..6e137f6 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/1-V-pure-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/1-V-pure-64.png b/_design/favicons-and-logo-v2/favicons/1-V-pure-64.png new file mode 100644 index 0000000..6628d99 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/1-V-pure-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/2-V-horizon-16.png b/_design/favicons-and-logo-v2/favicons/2-V-horizon-16.png new file mode 100644 index 0000000..4dca779 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/2-V-horizon-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/2-V-horizon-180.png b/_design/favicons-and-logo-v2/favicons/2-V-horizon-180.png new file mode 100644 index 0000000..baa0400 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/2-V-horizon-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/2-V-horizon-32.png b/_design/favicons-and-logo-v2/favicons/2-V-horizon-32.png new file mode 100644 index 0000000..aaf1b03 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/2-V-horizon-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/2-V-horizon-64.png b/_design/favicons-and-logo-v2/favicons/2-V-horizon-64.png new file mode 100644 index 0000000..1916689 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/2-V-horizon-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/2-V-horizon.svg b/_design/favicons-and-logo-v2/favicons/2-V-horizon.svg new file mode 100644 index 0000000..f3647e6 --- /dev/null +++ b/_design/favicons-and-logo-v2/favicons/2-V-horizon.svg @@ -0,0 +1,13 @@ + + + + + + + + + + diff --git a/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-16.png b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-16.png new file mode 100644 index 0000000..459e18c Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-180.png b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-180.png new file mode 100644 index 0000000..80426e2 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-32.png b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-32.png new file mode 100644 index 0000000..938b150 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-64.png b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-64.png new file mode 100644 index 0000000..3fc050f Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3-V-viewfinder-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-16.png b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-16.png new file mode 100644 index 0000000..459e18c Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-180.png b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-180.png new file mode 100644 index 0000000..80426e2 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-32.png b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-32.png new file mode 100644 index 0000000..938b150 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-64.png b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-64.png new file mode 100644 index 0000000..3fc050f Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3a-viewfinder-full-thin-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-16.png b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-16.png new file mode 100644 index 0000000..a81befe Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-180.png b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-180.png new file mode 100644 index 0000000..f471bb2 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-32.png b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-32.png new file mode 100644 index 0000000..c236020 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-64.png b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-64.png new file mode 100644 index 0000000..378c92d Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3b-viewfinder-buildings-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-16.png b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-16.png new file mode 100644 index 0000000..524de2c Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-180.png b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-180.png new file mode 100644 index 0000000..539ff3f Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-32.png b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-32.png new file mode 100644 index 0000000..d28092c Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-64.png b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-64.png new file mode 100644 index 0000000..f5261e4 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3c-viewfinder-noframe-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-16.png b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-16.png new file mode 100644 index 0000000..c7a4028 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-180.png b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-180.png new file mode 100644 index 0000000..123ad82 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-32.png b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-32.png new file mode 100644 index 0000000..0947493 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-64.png b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-64.png new file mode 100644 index 0000000..02c3fdd Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/3d-viewfinder-thick-64.png differ diff --git a/_design/favicons-and-logo-v2/favicons/4-V-cropped-16.png b/_design/favicons-and-logo-v2/favicons/4-V-cropped-16.png new file mode 100644 index 0000000..481642f Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/4-V-cropped-16.png differ diff --git a/_design/favicons-and-logo-v2/favicons/4-V-cropped-180.png b/_design/favicons-and-logo-v2/favicons/4-V-cropped-180.png new file mode 100644 index 0000000..d7016b7 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/4-V-cropped-180.png differ diff --git a/_design/favicons-and-logo-v2/favicons/4-V-cropped-32.png b/_design/favicons-and-logo-v2/favicons/4-V-cropped-32.png new file mode 100644 index 0000000..4688f97 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/4-V-cropped-32.png differ diff --git a/_design/favicons-and-logo-v2/favicons/4-V-cropped-64.png b/_design/favicons-and-logo-v2/favicons/4-V-cropped-64.png new file mode 100644 index 0000000..c90c8d2 Binary files /dev/null and b/_design/favicons-and-logo-v2/favicons/4-V-cropped-64.png differ diff --git a/_design/favicons-and-logo-v2/index.html b/_design/favicons-and-logo-v2/index.html new file mode 100644 index 0000000..24cc3aa --- /dev/null +++ b/_design/favicons-and-logo-v2/index.html @@ -0,0 +1,301 @@ + + + + + +WeVisto — favicons v2 + logo moments + + + + + + + +
+
v2 · 2026-05-15
+
WeVisto
+
Favicons rethought
+ logo placed
+
+
— scrapping the previous favicon set; the brand's own V is the answer, not invented icons.
+ + +

I.Favicons, rebuilt around the V — V-viewfinder picked, refining

+

Direction 3 (V-viewfinder) is the chosen path — the V as a window onto the harbor. Four refinements of it below: 3b is the strongest (tighter crop on Camogli's coloured row-houses + thin yellow frame). 3a, 3c, 3d shown for comparison.

+ + + +
+
+

3a · full harbor

+
Full harbor view inside the V. Detailed but busy at small sizes.
+
+
16
+
32
+
64
+
180
+
+
+ +
+ Recommended +

3b · Camogli row-houses

+
Tighter crop on the colored row-houses. Most brand-specific — Camogli is the brand origin.
+
+
16
+
32
+
64
+
180
+
+
+ +
+

3c · no frame

+
No yellow outline. Cleanest silhouette but loses the brand yellow at small sizes.
+
+
16
+
32
+
64
+
180
+
+
+ +
+

3d · thick frame

+
Heavier yellow border, more "picture frame" reading. Veers toward decorative.
+
+
16
+
32
+
64
+
180
+
+
+
+ +

Original first-round directions below for reference (1 V-pure, 2 V-horizon, 4 V-cropped).

+ +
+ +
+
1.Brand · isolated
+

V-pure

+
The yellow V on solid navy, drawn confidently. The brand's own glyph, alone in a room. Reads at every size, no decoration.
+
+
16
+
32
+
64
+
180
+
+
+
+
browser tab
+
WeVisto
+
+
+
iOS home screen
+
+
+
+
+ +
+
2.Brand · with horizon
+

V-horizon

+
The V plus a hairline horizon and a single sun dot below — the harbor is implied, not depicted. Editorial echo of the rest of the brand.
+
+
16
+
32
+
64
+
180
+
+
+
+
browser tab
+
WeVisto
+
+
+
iOS home screen
+
+
+
+
+ +
+
3.Brand · viewfinder
+

V-viewfinder

+
The V cut out of navy, with the harbor photo visible inside — you are looking at a photograph framed by the V. Strong at 64+, silhouette holds at 16.
+
+
16
+
32
+
64
+
180
+
+
+
+
browser tab
+
WeVisto
+
+
+
iOS home screen
+
+
+
+
+ +
+
4.Brand · cropped
+

V-cropped (the wordmark itself)

+
A tight crop of the actual published wordmark. The favicon is a slice of the logo — V centered, "e" and "i" partially visible at large sizes. The most "WeVisto in the image."
+
+
16
+
32
+
64
+
180
+
+
+
+
browser tab
+
WeVisto
+
+
+
iOS home screen
+
+
+
+
+ +
+ + +

II.The wordmark logo, given room to live

+

Currently the full wordmark + harbor logo only appears in email templates and as a small badge on Twig pages. These three mockups give it three new homes in the PWA at hero scale — each one a moment where the brand earns the room.

+ +
+ +
+
+ + Open ⟶ +
+
+
II·a
+

PWA cold-launch splash

+

Shown for ~1.5s on app cold-launch. Wordmark logo at ~520px, Ken-Burns harbor backdrop, three-dot loader. Then it fades to HomeView.

+
+
+ +
+
+ + Open ⟶ +
+
+
II·b
+

Library hero (revised)

+

The empty state's 112px mark replaced by the full wordmark logo at 320px. Same headline / sub / CTA below. The library page becomes a brand moment.

+
+
+ +
+
+ + Open ⟶ +
+
+
II·c
+

About · the brand story

+

A settings → about page with the wordmark logo as page hero, a two-section editorial about the frame and the V, then a credits card. The place where the brand explains itself.

+
+
+ +
+ +
Saved iteration: this is in /tmp/wevisto-mockups/v2/ for now. Approve a direction (or set of directions) and I'll save it into the repo alongside the previous checkpoint.
+ + + + + diff --git a/_design/favicons-and-logo-v2/logo-moments/about.html b/_design/favicons-and-logo-v2/logo-moments/about.html new file mode 100644 index 0000000..e9420aa --- /dev/null +++ b/_design/favicons-and-logo-v2/logo-moments/about.html @@ -0,0 +1,173 @@ + + + + + +About — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— about
+
+
+ +
+ +
+ +
+
○Edizione I
+ +

A frame, gifted.

+

Handmade e-ink picture frames, given to the people who keep our photographs.

+
+
+ +
+

I.The thing itself

+

A WeVisto frame is built by hand in Camogli, on the Ligurian coast. The display uses paper-like ink — the same family of screens as a Kindle — so it has the quiet of a photograph rather than the glow of a phone.

+

It connects to your wifi once. After that, nothing. It collects new photographs on its own and changes them as quietly as a clock.

+ +

II.The thing about the V

+

The yellow V is the only thing in the wordmark that isn't white. It's how we remember the people we make these for — the recipient is the V, we are the letters around them.

+
+ +
+

Edition I · MMXXVI

+
+
Made by
Matt Edholm
+
From
Camogli, Liguria
+
For
Margaret, Alice, and the rest
+
Version
0.4 · pre-release
+
+
+ +
+
+
WeVisto · a frame, gifted
+
Plate i · v 0.4
+
+ +
+ + + + + diff --git a/_design/favicons-and-logo-v2/logo-moments/library-with-logo.html b/_design/favicons-and-logo-v2/logo-moments/library-with-logo.html new file mode 100644 index 0000000..1b9923f --- /dev/null +++ b/_design/favicons-and-logo-v2/logo-moments/library-with-logo.html @@ -0,0 +1,161 @@ + + + + + +Library — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— the library
+
+
+ +
+ +
+ +
+
○Accession no. 001
+ +

A library, waiting.

+

Photographs you upload will rotate through Margaret's frame, one at a time.

+
+ + + Upload the first photograph + +
— or invite someone else to send one
+
+ +
+
+
WeVisto · a frame, gifted
+
Edizione I · MMXXVI
+
+ +
+ + + + + diff --git a/_design/favicons-and-logo-v2/logo-moments/splash.html b/_design/favicons-and-logo-v2/logo-moments/splash.html new file mode 100644 index 0000000..292face --- /dev/null +++ b/_design/favicons-and-logo-v2/logo-moments/splash.html @@ -0,0 +1,102 @@ + + + + + +WeVisto — loading + + + + +
+
+
+ +
Edizione I · Plate i
+ + + +
+ + + diff --git a/_design/favicons-and-logo-v2/spa/_chrome.css b/_design/favicons-and-logo-v2/spa/_chrome.css new file mode 100644 index 0000000..d434878 --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/_chrome.css @@ -0,0 +1,183 @@ +/* Frosted-glass chrome — same vocabulary as the login. + Every surface that holds content is a glass card over the harbor backdrop. */ + +/* ─── Top app bar — translucent dark band ────────────────────────────── */ +.app-bar { + position: sticky; + top: 0; + z-index: 40; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(18px); + -webkit-backdrop-filter: saturate(180%) blur(18px); + border-bottom: 1px solid var(--glass-bord); + padding: 12px 18px; + padding-top: calc(12px + env(safe-area-inset-top)); + display: flex; + align-items: center; + gap: 12px; +} +.app-bar__mark { + width: 34px; + height: 34px; + border-radius: 9px; + overflow: hidden; + box-shadow: 0 2px 6px rgba(0,0,0,0.4); + flex-shrink: 0; +} +.app-bar__mark img { width: 100%; height: 100%; display: block; } +.app-bar__title-group { display: flex; flex-direction: column; } +.app-bar__wordmark { + font: 400 var(--text-lg)/1 var(--font-display); + letter-spacing: 0.005em; + color: var(--text); +} +.app-bar__wordmark .v { color: var(--brand-yellow); } +.app-bar__sub { + font: italic 400 13px/1 var(--font-accent); + color: var(--text-muted); + letter-spacing: 0.02em; + margin-top: 4px; +} +.app-bar__spacer { flex: 1; } +.app-bar__icon { + width: 36px; + height: 36px; + display: flex; + align-items: center; + justify-content: center; + color: var(--text-muted); + background: transparent; + border: 0; + border-radius: var(--radius-full); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); +} +.app-bar__icon:hover { background: var(--glass); color: var(--text); } +.app-bar__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } + +/* ─── Glass surface mixin ──────────────────────────────────────────────── */ +.glass { + background: var(--glass); + backdrop-filter: saturate(160%) blur(20px); + -webkit-backdrop-filter: saturate(160%) blur(20px); + border: 1px solid var(--glass-bord); + box-shadow: + 0 1px 0 rgba(255,255,255,0.06) inset, + 0 20px 40px -16px rgba(0,0,0,0.5); +} + +/* ─── Bottom nav — translucent dark band ─────────────────────────────── */ +.bottom-nav { + position: fixed; + bottom: 0; left: 0; right: 0; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(20px); + -webkit-backdrop-filter: saturate(180%) blur(20px); + border-top: 1px solid var(--glass-bord); + display: flex; + z-index: 50; + padding-bottom: env(safe-area-inset-bottom); +} +.bottom-nav__tab { + flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; + gap: 2px; height: 64px; color: var(--text-muted); + text-decoration: none; min-height: 44px; + transition: color var(--duration-fast); +} +.bottom-nav__tab.active { + color: var(--brand-yellow); +} +.bottom-nav__tab.active .label { color: var(--text); } +.bottom-nav__tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; } +.bottom-nav__tab .label { + font-family: var(--font-display); + font-size: var(--text-xs); + letter-spacing: 0.16em; + text-transform: uppercase; +} + +.main-scroll { + padding-bottom: calc(64px + env(safe-area-inset-bottom) + 32px); + min-height: 100dvh; +} + +/* ─── Brand signature ─────────────────────────────────────────────────── */ +.signature { + margin-top: 32px; + padding: 32px 0 16px; + border-top: 1px solid var(--glass-bord); + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; +} +.signature__mark { + width: 44px; + height: 44px; + border-radius: 10px; + overflow: hidden; + opacity: 0.9; +} +.signature__mark img { width: 100%; height: 100%; display: block; } +.signature__text { + font: 400 14px/1.2 var(--font-display); + letter-spacing: 0.32em; + text-transform: uppercase; + color: var(--text-muted); + display: flex; + align-items: center; + gap: 10px; +} +.signature__text .v-mark { color: var(--brand-yellow); } +.signature__version { + font: 400 italic 14px/1.3 var(--font-accent); + letter-spacing: 0.02em; + color: var(--text-muted); + opacity: 0.7; +} + +/* ─── Theme switcher (mockup only) ─────────────────────────────────────── */ +.theme-switcher { + position: fixed; + bottom: 84px; + right: 16px; + z-index: 60; + background: var(--glass-2); + backdrop-filter: saturate(180%) blur(20px); + border: 1px solid var(--glass-bord); + border-radius: var(--radius-md); + box-shadow: 0 12px 24px -8px rgba(0,0,0,0.5); + padding: 10px; + display: flex; + flex-direction: column; + gap: 8px; + max-width: 220px; +} +.theme-switcher__label { + font: var(--type-label); + letter-spacing: 0.24em; + text-transform: uppercase; + color: var(--text-muted); +} +.theme-switcher__chips { + display: flex; + flex-wrap: wrap; + gap: 4px; +} +.theme-switcher__chip { + width: 26px; height: 26px; + border: 2px solid var(--glass-bord); + border-radius: var(--radius-full); + cursor: pointer; + position: relative; + transition: transform var(--duration-fast); +} +.theme-switcher__chip:hover { transform: scale(1.1); } +.theme-switcher__chip.active { box-shadow: 0 0 0 2px var(--brand-yellow); } +/* each chip shows that theme's accent over its bg-base */ +.theme-switcher__chip[data-theme="ocean-dusk"] { background: linear-gradient(135deg, #06121f 50%, #4e9fc8 50%); } +.theme-switcher__chip[data-theme="amber-dusk"] { background: linear-gradient(135deg, #1a0d05 50%, #e89048 50%); } +.theme-switcher__chip[data-theme="sage-dusk"] { background: linear-gradient(135deg, #081208 50%, #88c068 50%); } +.theme-switcher__chip[data-theme="rose-dusk"] { background: linear-gradient(135deg, #1a060f 50%, #d878a0 50%); } +.theme-switcher__chip[data-theme="mauve-dusk"] { background: linear-gradient(135deg, #100618 50%, #b890d8 50%); } +.theme-switcher__chip[data-theme="honey-dusk"] { background: linear-gradient(135deg, #18120a 50%, #e8c050 50%); } diff --git a/_design/favicons-and-logo-v2/spa/_switcher.html b/_design/favicons-and-logo-v2/spa/_switcher.html new file mode 100644 index 0000000..d5f9e18 --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/_switcher.html @@ -0,0 +1,19 @@ +
+ User-pref theme +
+ + + + + + +
+
+ diff --git a/_design/favicons-and-logo-v2/spa/_tokens.css b/_design/favicons-and-logo-v2/spa/_tokens.css new file mode 100644 index 0000000..49fe521 --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/_tokens.css @@ -0,0 +1,164 @@ +/* Atmospheric design tokens — themes as dusks layered over the harbor photo. + The whole app shares the login's surface vocabulary. */ + +:root { + /* Type — same recipe as login */ + --font-family: 'Nunito', system-ui, sans-serif; + --font-display: 'Marcellus', Georgia, serif; + --font-accent: 'Cormorant Garamond', Georgia, serif; + --font-mono: 'DM Mono', ui-monospace, monospace; + + --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; + --text-lg: 20px; --text-xl: 24px; --text-2xl: 28px; --text-3xl: 36px; + --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; + --space-5: 20px; --space-6: 24px; --space-8: 32px; + --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; + --duration-fast: 150ms; --duration-base: 250ms; + --ease-out: cubic-bezier(0, 0, 0.2, 1); + + /* Brand layer — fixed regardless of theme. */ + --brand-yellow: #f0d000; + --brand-yellow-soft: #c4a700; + + /* Editorial recipes */ + --type-display-xl: 400 var(--text-3xl)/1.05 var(--font-display); + --type-display-lg: 400 var(--text-2xl)/1.1 var(--font-display); + --type-display-md: 400 var(--text-xl)/1.15 var(--font-display); + --type-accent-md: 400 italic var(--text-md)/1.4 var(--font-accent); + --type-label: 700 var(--text-xs)/1 var(--font-mono); +} + +/* ─── DUSKS ────────────────────────────────────────────────────────────── + Each dusk is: + --bg-base : the deep base color behind everything + --bg-tint : an rgba multiplied over the harbor photo (the "filter") + --glass : rgba background of cards (frosted, sits on photo) + --glass-2 : a more opaque variant for nav strips + --glass-bord : hairline border on glass surfaces + --accent : theme accent (was --color-primary) — CTAs that aren't brand + --accent-fg : text on accent + --text : main text on glass (always light) + --text-muted : muted text on glass + + The yellow V brand constant survives across all dusks. +*/ + +/* OCEAN DUSK — default, closest to login */ +[data-theme="ocean-dusk"], :root { + --bg-base: #06121f; + --bg-tint: rgba(8, 22, 38, 0.45); + --glass: rgba(10, 28, 48, 0.55); + --glass-2: rgba(8, 22, 38, 0.72); + --glass-bord: rgba(180, 210, 235, 0.18); + --accent: #4e9fc8; + --accent-fg: #06121f; + --text: #f4eed8; + --text-muted: #b8c8d8; +} + +/* AMBER DUSK — successor to warm-craft */ +[data-theme="amber-dusk"] { + --bg-base: #1a0d05; + --bg-tint: rgba(60, 25, 8, 0.45); + --glass: rgba(50, 22, 8, 0.55); + --glass-2: rgba(35, 14, 5, 0.72); + --glass-bord: rgba(230, 180, 130, 0.2); + --accent: #e89048; + --accent-fg: #1a0d05; + --text: #faecd0; + --text-muted: #d8b890; +} + +/* SAGE DUSK — successor to sage-cream */ +[data-theme="sage-dusk"] { + --bg-base: #081208; + --bg-tint: rgba(20, 40, 22, 0.45); + --glass: rgba(18, 38, 22, 0.55); + --glass-2: rgba(12, 26, 14, 0.72); + --glass-bord: rgba(180, 220, 180, 0.18); + --accent: #88c068; + --accent-fg: #081208; + --text: #ecf3e0; + --text-muted: #a8c0a0; +} + +/* ROSE DUSK — warmer, classier replacement for playful-pop */ +[data-theme="rose-dusk"] { + --bg-base: #1a060f; + --bg-tint: rgba(56, 16, 38, 0.45); + --glass: rgba(48, 14, 36, 0.55); + --glass-2: rgba(32, 8, 22, 0.72); + --glass-bord: rgba(230, 180, 200, 0.2); + --accent: #d878a0; + --accent-fg: #1a060f; + --text: #f8e8ec; + --text-muted: #c898ac; +} + +/* MAUVE DUSK — replaces dusty-mauve */ +[data-theme="mauve-dusk"] { + --bg-base: #100618; + --bg-tint: rgba(40, 18, 56, 0.45); + --glass: rgba(36, 14, 50, 0.55); + --glass-2: rgba(24, 10, 34, 0.72); + --glass-bord: rgba(210, 190, 230, 0.18); + --accent: #b890d8; + --accent-fg: #100618; + --text: #f0e8f8; + --text-muted: #b8a8c8; +} + +/* HONEY DUSK — replaces honey-slate */ +[data-theme="honey-dusk"] { + --bg-base: #18120a; + --bg-tint: rgba(48, 36, 14, 0.45); + --glass: rgba(42, 32, 12, 0.55); + --glass-2: rgba(28, 22, 8, 0.72); + --glass-bord: rgba(232, 200, 130, 0.22); + --accent: #e8c050; + --accent-fg: #18120a; + --text: #faf0d8; + --text-muted: #c8b888; +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } +html, body { background: var(--bg-base); color: var(--text); } +body { + font-family: var(--font-family); + font-size: var(--text-base); + line-height: 1.5; + min-height: 100dvh; + position: relative; + -webkit-font-smoothing: antialiased; +} + +/* ─── PERMANENT ATMOSPHERIC BACKDROP ──────────────────────────────────── */ +/* harbor photo fixed under everything */ +body::before { + content: ''; + position: fixed; + inset: 0; + background: url('../assets/harbor.jpg') center/cover no-repeat; + filter: brightness(0.6) saturate(0.85); + z-index: -3; +} +/* theme tint multiplied over photo */ +body::after { + content: ''; + position: fixed; + inset: 0; + background: var(--bg-tint); + mix-blend-mode: multiply; + z-index: -2; + pointer-events: none; +} +/* global vignette + film grain via one extra layer */ +.atmosphere { + position: fixed; + inset: 0; + pointer-events: none; + z-index: -1; + background: + radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.65) 100%), + url("data:image/svg+xml;utf8,"); +} diff --git a/_design/favicons-and-logo-v2/spa/home.html b/_design/favicons-and-logo-v2/spa/home.html new file mode 100644 index 0000000..2fd3e68 --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/home.html @@ -0,0 +1,310 @@ + + + + + +Home — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— Margaret's frame
+
+
+ +
+ +
+ +
+
I.Plate · today
+

Good morning, Alice.

+

Margaret's frame is in sync. The next photograph will arrive at 7:00 AM, quietly, on its own.

+
+
+ +
+
+
+ Synced 12 min ago +
+
Plate XII
+
+
+

Margaret's frame

+

7.3″ landscape · Camden, Maine · est. May 2026

+ +
+ +
+ Next photograph at 7:00 AM + then again at 12:00 PM and 6:00 PM +
+
+ +
+ + +
+
+
+ +
+
+

Up next

+ — in the library queue +
+
+
7am
+
noon
+
6pm
+
tmrw
+
+5
+
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + + diff --git a/_design/favicons-and-logo-v2/spa/library.html b/_design/favicons-and-logo-v2/spa/library.html new file mode 100644 index 0000000..3f7072a --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/library.html @@ -0,0 +1,249 @@ + + + + + +Library — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— the library
+
+
+ +
+ +
+ +
+
○Accession no. 001
+
+
+
+

A library, waiting.

+

Photographs you upload will rotate through Margaret's frame, one at a time. We'll hold them here until the frame is ready.

+
+ + + Upload the first photograph + +
— or invite someone else to send one
+
+ +
+
+
How Visto works, briefly
+
— three steps, then forever
+
+
I.
You uploadfamily photos
+
II.
We holdthem in the library
+
III.
Frame picksone each interval
+
+
+ +
+
+
WeVisto · a frame, gifted
+
Edizione I · MMXXVI
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + + diff --git a/_design/favicons-and-logo-v2/spa/settings.html b/_design/favicons-and-logo-v2/spa/settings.html new file mode 100644 index 0000000..78da761 --- /dev/null +++ b/_design/favicons-and-logo-v2/spa/settings.html @@ -0,0 +1,349 @@ + + + + + +Settings — WeVisto + + + + + + + + + +
+ +
+
+
+
WeVisto
+
— settings
+
+
+
+ +
+ +
+
Settings · Plate i
+

A few quiet choices.

+
+
+ +
+
I.Account
+
+ + + Alice Wexler + alice@example.com + › + + + + Notification email + daily digest + › + +
+
+ +
+
II.Appearance
+
+
+
Dusk
+
— pick a tint for the room
+
+
+ + + + + + +
+
+
+ +
+
III.Frames
+
+ + + Margaret's frame + 7.3″ landscape + › + + + + Add another frame + › + +
+
+ +
+
IV.Help
+
+ + + How WeVisto works + › + + + + Contact us + › + +
+
+ +
Sign out
+ +
+
+
WeVisto · a frame, gifted
+
Edizione I · MMXXVI · Camogli
+
+ +
+ + + +
+ Dusk +
+ + + + + + +
+
+ + + +