football2801
3bd0b9a5a1
CI / test (push) Has been cancelled
Iteration after the atmospheric-redesign checkpoint. The earlier A/B/C/D favicon set was scrapped — generic invented icons (roof, frame+horizon, skyline, wax seal) that didn't tie to the brand's own glyph. New direction: the yellow V from the wordmark, presented four ways. V-viewfinder (a V cut out of navy showing the harbor photo inside) is the chosen path; refinement 3b crops to Camogli's coloured row-houses for a more brand-specific small size reading. Also adds three logo-placement mockups (PWA cold-launch splash, library hero with the full wordmark logo, settings → about page) to give the wordmark room to live beyond emails and login badges. Self-contained: assets/ and spa/ copied into the design folder so the mockups render without depending on neighbouring directories. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
302 lines
18 KiB
HTML
302 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WeVisto — favicons v2 + logo moments</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&family=Marcellus&family=Cormorant+Garamond:ital,wght@1,400&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--cream: #fdf6ee; --cream-deep: #f5ead4;
|
|
--ink: #2a1f15; --ink-soft: #6e6450;
|
|
--navy: #0e2740; --yellow: #f0d000;
|
|
--rule: rgba(42,31,21,0.15);
|
|
}
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html, body { background: var(--cream); color: var(--ink); }
|
|
body { font-family: 'Nunito', sans-serif; font-size: 16px; line-height: 1.55; padding: 48px 40px 96px; max-width: 1280px; margin: 0 auto; }
|
|
|
|
.top { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
|
|
.top .l, .top .r { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft); }
|
|
.top .r { text-align: right; }
|
|
.top .name { font-family: 'Marcellus', serif; font-size: 44px; color: var(--navy); text-align: center; letter-spacing: 0.01em; }
|
|
.top .name .v { color: var(--yellow); }
|
|
.subhead { margin-top: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 21px; color: var(--ink); }
|
|
|
|
h2.section { margin: 56px 0 8px; font-family: 'Marcellus', serif; font-weight: 400; font-size: 30px; color: var(--navy); }
|
|
h2.section .num { color: var(--yellow); margin-right: 8px; }
|
|
.lede { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 19px; color: var(--ink); margin-bottom: 28px; max-width: 76ch; line-height: 1.5; }
|
|
.lede em { color: var(--navy); }
|
|
.lede strong { font-weight: 600; font-style: normal; color: var(--navy); }
|
|
|
|
/* favicon grid — 2x2, each shown at all four sizes + browser-tab + ios-tile */
|
|
.fav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 32px; }
|
|
.fav { background: #fff9ee; border: 1px solid var(--rule); padding: 24px; }
|
|
.fav__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
|
|
.fav__num { font-family: 'Marcellus', serif; font-size: 28px; color: var(--yellow); line-height: 1; }
|
|
.fav__tag { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); }
|
|
.fav h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 24px; color: var(--navy); margin-bottom: 6px; }
|
|
.fav .desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; color: var(--ink); margin-bottom: 18px; line-height: 1.45; }
|
|
.fav .desc em { color: var(--navy); font-style: italic; }
|
|
.fav .row {
|
|
display: flex; align-items: flex-end; gap: 18px;
|
|
padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
|
|
margin-bottom: 14px;
|
|
}
|
|
.fav .pip { text-align: center; }
|
|
.fav .pip img { display: block; image-rendering: pixelated; margin: 0 auto 6px; border-radius: 3px; }
|
|
.fav .pip .cap { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--ink-soft); }
|
|
.fav .ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
.fav .ctx .box { padding: 12px; background: var(--cream); border: 1px solid var(--rule); }
|
|
.fav .ctx .box-label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
|
|
.tab-strip { background: #2a2a2a; border-radius: 4px 4px 0 0; padding: 4px 4px 0; display: inline-block; }
|
|
.tab-strip .tab { display: inline-flex; align-items: center; gap: 6px; background: #3a3a3a; padding: 5px 10px 5px 8px; border-radius: 4px 4px 0 0; font-family: -apple-system, sans-serif; font-size: 11px; color: #ddd; }
|
|
.tab-strip .tab img { width: 14px; height: 14px; }
|
|
.ios-tile { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.25); }
|
|
.ios-tile img { width: 100%; height: 100%; display: block; }
|
|
|
|
/* logo-moment cards */
|
|
.stack { display: grid; gap: 32px; margin-top: 24px; grid-template-columns: repeat(3, 1fr); }
|
|
.moment { background: #fff9ee; border: 1px solid var(--rule); overflow: hidden; }
|
|
.moment .preview { position: relative; aspect-ratio: 9/16; background: #06121f; }
|
|
.moment .preview iframe { border: 0; width: 250%; height: 250%; transform: scale(0.4); transform-origin: top left; display: block; }
|
|
.moment .open { position: absolute; bottom: 12px; right: 12px; z-index: 5; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #fff; background: rgba(7,23,42,0.75); padding: 8px 14px; text-decoration: none; backdrop-filter: blur(6px); }
|
|
.moment .open:hover { background: var(--yellow); color: var(--navy); }
|
|
.moment .body { padding: 22px 24px 24px; }
|
|
.moment .body .roman { font-family: 'Marcellus', serif; font-size: 22px; color: var(--yellow); margin-bottom: 4px; }
|
|
.moment .body h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 22px; color: var(--navy); margin-bottom: 6px; }
|
|
.moment .body p { font-size: 15px; line-height: 1.5; color: var(--ink); }
|
|
.moment .body p em { color: var(--navy); font-style: italic; }
|
|
|
|
.also { margin-top: 56px; padding: 16px 20px; background: rgba(240,208,0,0.18); border-left: 4px solid var(--yellow); font-style: italic; color: var(--ink); font-size: 15px; }
|
|
.also a { color: var(--navy); border-bottom: 1px solid var(--navy); text-decoration: none; }
|
|
|
|
footer { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule); text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-soft); }
|
|
|
|
@media (max-width: 900px) {
|
|
body { padding: 32px 20px; }
|
|
.fav-grid, .stack { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="top">
|
|
<div class="l">v2 · 2026-05-15</div>
|
|
<div class="name">We<span class="v">V</span>isto</div>
|
|
<div class="r">Favicons rethought<br>+ logo placed</div>
|
|
</div>
|
|
<div class="subhead">— scrapping the previous favicon set; the brand's own V is the answer, not invented icons.</div>
|
|
|
|
<!-- FAVICONS — V2 -->
|
|
<h2 class="section"><span class="num">I.</span>Favicons, rebuilt around the V — <span style="color: var(--navy); font-style: italic; font-family: 'Cormorant Garamond', serif;">V-viewfinder picked, refining</span></h2>
|
|
<p class="lede">Direction 3 (V-viewfinder) is the chosen path — the V as a window onto the harbor. Four refinements of it below: <strong>3b is the strongest</strong> (tighter crop on Camogli's coloured row-houses + thin yellow frame). 3a, 3c, 3d shown for comparison.</p>
|
|
|
|
<style>
|
|
.v3-variants { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 24px; margin-bottom: 48px; }
|
|
.v3-card { background: #fff9ee; border: 1px solid var(--rule); padding: 18px; }
|
|
.v3-card.pick { background: #fffbe0; border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
|
|
.v3-card .pick-tag { display: inline-block; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--yellow); background: var(--navy); padding: 3px 8px; margin-bottom: 8px; }
|
|
.v3-card h4 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 18px; color: var(--navy); margin-bottom: 4px; }
|
|
.v3-card .desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; line-height: 1.4; color: var(--ink); margin-bottom: 12px; min-height: 56px; }
|
|
.v3-card .row { display: flex; align-items: flex-end; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); }
|
|
.v3-card .row img { display: block; image-rendering: pixelated; border-radius: 2px; }
|
|
.v3-card .row .cap { font-family: 'DM Mono', monospace; font-size: 8px; letter-spacing: 0.18em; color: var(--ink-soft); text-align: center; margin-top: 4px; }
|
|
</style>
|
|
|
|
<div class="v3-variants">
|
|
<div class="v3-card">
|
|
<h4>3a · full harbor</h4>
|
|
<div class="desc">Full harbor view inside the V. Detailed but busy at small sizes.</div>
|
|
<div class="row">
|
|
<div><img src="favicons/3a-viewfinder-full-thin-16.png" width="28" height="28"><div class="cap">16</div></div>
|
|
<div><img src="favicons/3a-viewfinder-full-thin-32.png" width="44" height="44"><div class="cap">32</div></div>
|
|
<div><img src="favicons/3a-viewfinder-full-thin-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div><img src="favicons/3a-viewfinder-full-thin-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="v3-card pick">
|
|
<span class="pick-tag">Recommended</span>
|
|
<h4>3b · Camogli row-houses</h4>
|
|
<div class="desc">Tighter crop on the colored row-houses. Most brand-specific — <em>Camogli is the brand origin.</em></div>
|
|
<div class="row">
|
|
<div><img src="favicons/3b-viewfinder-buildings-16.png" width="28" height="28"><div class="cap">16</div></div>
|
|
<div><img src="favicons/3b-viewfinder-buildings-32.png" width="44" height="44"><div class="cap">32</div></div>
|
|
<div><img src="favicons/3b-viewfinder-buildings-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div><img src="favicons/3b-viewfinder-buildings-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="v3-card">
|
|
<h4>3c · no frame</h4>
|
|
<div class="desc">No yellow outline. Cleanest silhouette but <em>loses the brand yellow at small sizes.</em></div>
|
|
<div class="row">
|
|
<div><img src="favicons/3c-viewfinder-noframe-16.png" width="28" height="28"><div class="cap">16</div></div>
|
|
<div><img src="favicons/3c-viewfinder-noframe-32.png" width="44" height="44"><div class="cap">32</div></div>
|
|
<div><img src="favicons/3c-viewfinder-noframe-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div><img src="favicons/3c-viewfinder-noframe-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="v3-card">
|
|
<h4>3d · thick frame</h4>
|
|
<div class="desc">Heavier yellow border, more "picture frame" reading. Veers toward decorative.</div>
|
|
<div class="row">
|
|
<div><img src="favicons/3d-viewfinder-thick-16.png" width="28" height="28"><div class="cap">16</div></div>
|
|
<div><img src="favicons/3d-viewfinder-thick-32.png" width="44" height="44"><div class="cap">32</div></div>
|
|
<div><img src="favicons/3d-viewfinder-thick-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div><img src="favicons/3d-viewfinder-thick-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="lede">Original first-round directions below for reference (1 V-pure, 2 V-horizon, 4 V-cropped).</p>
|
|
|
|
<div class="fav-grid">
|
|
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__num">1.</span><span class="fav__tag">Brand · isolated</span></div>
|
|
<h3>V-pure</h3>
|
|
<div class="desc">The yellow V on solid navy, drawn confidently. <em>The brand's own glyph, alone in a room.</em> Reads at every size, no decoration.</div>
|
|
<div class="row">
|
|
<div class="pip"><img src="favicons/1-V-pure-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/1-V-pure-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/1-V-pure-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/1-V-pure-180.png" width="96" height="96"><div class="cap">180</div></div>
|
|
</div>
|
|
<div class="ctx">
|
|
<div class="box">
|
|
<div class="box-label">browser tab</div>
|
|
<div class="tab-strip"><span class="tab"><img src="favicons/1-V-pure-32.png">WeVisto</span></div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-label">iOS home screen</div>
|
|
<div class="ios-tile"><img src="favicons/1-V-pure-180.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__num">2.</span><span class="fav__tag">Brand · with horizon</span></div>
|
|
<h3>V-horizon</h3>
|
|
<div class="desc">The V plus a hairline horizon and a single sun dot below — <em>the harbor is implied,</em> not depicted. Editorial echo of the rest of the brand.</div>
|
|
<div class="row">
|
|
<div class="pip"><img src="favicons/2-V-horizon-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/2-V-horizon-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/2-V-horizon-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/2-V-horizon-180.png" width="96" height="96"><div class="cap">180</div></div>
|
|
</div>
|
|
<div class="ctx">
|
|
<div class="box">
|
|
<div class="box-label">browser tab</div>
|
|
<div class="tab-strip"><span class="tab"><img src="favicons/2-V-horizon-32.png">WeVisto</span></div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-label">iOS home screen</div>
|
|
<div class="ios-tile"><img src="favicons/2-V-horizon-180.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__num">3.</span><span class="fav__tag">Brand · viewfinder</span></div>
|
|
<h3>V-viewfinder</h3>
|
|
<div class="desc">The V cut out of navy, with the harbor photo visible inside — <em>you are looking at a photograph framed by the V.</em> Strong at 64+, silhouette holds at 16.</div>
|
|
<div class="row">
|
|
<div class="pip"><img src="favicons/3-V-viewfinder-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/3-V-viewfinder-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/3-V-viewfinder-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/3-V-viewfinder-180.png" width="96" height="96"><div class="cap">180</div></div>
|
|
</div>
|
|
<div class="ctx">
|
|
<div class="box">
|
|
<div class="box-label">browser tab</div>
|
|
<div class="tab-strip"><span class="tab"><img src="favicons/3-V-viewfinder-32.png">WeVisto</span></div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-label">iOS home screen</div>
|
|
<div class="ios-tile"><img src="favicons/3-V-viewfinder-180.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__num">4.</span><span class="fav__tag">Brand · cropped</span></div>
|
|
<h3>V-cropped (the wordmark itself)</h3>
|
|
<div class="desc">A tight crop of the actual published wordmark. The favicon <em>is</em> a slice of the logo — V centered, "e" and "i" partially visible at large sizes. The most "WeVisto in the image."</div>
|
|
<div class="row">
|
|
<div class="pip"><img src="favicons/4-V-cropped-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/4-V-cropped-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/4-V-cropped-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/4-V-cropped-180.png" width="96" height="96"><div class="cap">180</div></div>
|
|
</div>
|
|
<div class="ctx">
|
|
<div class="box">
|
|
<div class="box-label">browser tab</div>
|
|
<div class="tab-strip"><span class="tab"><img src="favicons/4-V-cropped-32.png">WeVisto</span></div>
|
|
</div>
|
|
<div class="box">
|
|
<div class="box-label">iOS home screen</div>
|
|
<div class="ios-tile"><img src="favicons/4-V-cropped-180.png"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- LOGO MOMENTS -->
|
|
<h2 class="section"><span class="num">II.</span>The wordmark logo, given room to live</h2>
|
|
<p class="lede">Currently the full <em>wordmark + harbor</em> 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 <strong>hero scale</strong> — each one a moment where the brand earns the room.</p>
|
|
|
|
<div class="stack">
|
|
|
|
<div class="moment">
|
|
<div class="preview">
|
|
<iframe src="logo-moments/splash.html" loading="lazy"></iframe>
|
|
<a class="open" href="logo-moments/splash.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">II·a</div>
|
|
<h3>PWA cold-launch splash</h3>
|
|
<p>Shown for ~1.5s on app cold-launch. Wordmark logo at ~520px, Ken-Burns harbor backdrop, three-dot loader. Then it fades to <em>HomeView.</em></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="moment">
|
|
<div class="preview">
|
|
<iframe src="logo-moments/library-with-logo.html" loading="lazy"></iframe>
|
|
<a class="open" href="logo-moments/library-with-logo.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">II·b</div>
|
|
<h3>Library hero (revised)</h3>
|
|
<p>The empty state's 112px mark replaced by the <em>full wordmark logo</em> at 320px. Same headline / sub / CTA below. The library page becomes a brand moment.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="moment">
|
|
<div class="preview">
|
|
<iframe src="logo-moments/about.html" loading="lazy"></iframe>
|
|
<a class="open" href="logo-moments/about.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">II·c</div>
|
|
<h3>About · the brand story</h3>
|
|
<p>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. <em>The place where the brand explains itself.</em></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="also">Saved iteration: this is in <code>/tmp/wevisto-mockups/v2/</code> for now. Approve a direction (or set of directions) and I'll save it into the repo alongside <a href="../">the previous checkpoint</a>.</div>
|
|
|
|
<footer>
|
|
Open each tile to interact at full scale.
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|