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>
263 lines
16 KiB
HTML
263 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>WeVisto · atmospheric redesign</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: 22px; color: var(--ink); }
|
|
|
|
h2.section { margin: 56px 0 6px; 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); }
|
|
|
|
.principles { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 32px 0; padding: 28px 32px; background: var(--cream-deep); border: 1px dashed rgba(42,31,21,0.25); border-radius: 8px; }
|
|
.principle h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 18px; color: var(--navy); margin-bottom: 6px; }
|
|
.principle h3 .yellow { color: var(--yellow); }
|
|
.principle p { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
|
|
.principle p strong { color: var(--navy); font-weight: 700; }
|
|
|
|
.stack { display: grid; gap: 32px; margin-top: 24px; }
|
|
.row-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
|
|
.row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
|
.card { background: #fff9ee; border: 1px solid var(--rule); display: flex; flex-direction: column; overflow: hidden; }
|
|
.card .preview { position: relative; background: #06121f; }
|
|
.card .preview iframe { border: 0; display: block; }
|
|
.card.phone .preview { aspect-ratio: 9/16; }
|
|
.card.phone .preview iframe { width: 250%; height: 250%; transform: scale(0.4); transform-origin: top left; }
|
|
.card.wide .preview { aspect-ratio: 16/10; }
|
|
.card.wide .preview iframe { width: 200%; height: 200%; transform: scale(0.5); transform-origin: top left; }
|
|
.card .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); transition: background 150ms; }
|
|
.card .open:hover { background: var(--yellow); color: var(--navy); }
|
|
.card .body { padding: 22px 24px 24px; }
|
|
.card .body .roman { font-family: 'Marcellus', serif; font-size: 22px; color: var(--yellow); line-height: 1; margin-bottom: 4px; }
|
|
.card .body h3 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 24px; color: var(--navy); margin-bottom: 6px; }
|
|
.card .body .surface { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
|
|
.card .body p { font-size: 15px; color: var(--ink); line-height: 1.5; }
|
|
.card .body p em { color: var(--navy); font-style: italic; }
|
|
|
|
/* dusks reference strip */
|
|
.dusks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 24px; }
|
|
.dusk { padding: 10px; border: 1px solid var(--rule); background: #fff9ee; text-align: center; }
|
|
.dusk .swatch { aspect-ratio: 3/2; border-radius: 4px; background-image: url('assets/harbor.jpg'); background-size: cover; position: relative; margin-bottom: 8px; overflow: hidden; }
|
|
.dusk .swatch::after { content:''; position: absolute; inset: 0; mix-blend-mode: multiply; }
|
|
.dusk[data-d="ocean"] .swatch::after { background: rgba(8, 22, 38, 0.55); }
|
|
.dusk[data-d="amber"] .swatch::after { background: rgba(60, 25, 8, 0.55); }
|
|
.dusk[data-d="sage"] .swatch::after { background: rgba(20, 40, 22, 0.55); }
|
|
.dusk[data-d="rose"] .swatch::after { background: rgba(56, 16, 38, 0.55); }
|
|
.dusk[data-d="mauve"] .swatch::after { background: rgba(40, 18, 56, 0.55); }
|
|
.dusk[data-d="honey"] .swatch::after { background: rgba(48, 36, 14, 0.55); }
|
|
.dusk .name { font-family: 'Marcellus', serif; font-size: 14px; color: var(--navy); }
|
|
.dusk .italic { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; color: var(--ink-soft); }
|
|
|
|
/* favicon section (in-progress note) */
|
|
.fav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 24px; }
|
|
.fav { background: #fff9ee; border: 1px solid var(--rule); padding: 18px; }
|
|
.fav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
|
.fav__letter { font-family: 'Marcellus', serif; font-size: 22px; color: var(--yellow); line-height: 1; }
|
|
.fav__label { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }
|
|
.fav h4 { font-family: 'Marcellus', serif; font-weight: 400; font-size: 18px; color: var(--navy); margin-bottom: 4px; }
|
|
.fav .desc { font-size: 13px; color: var(--ink); line-height: 1.45; margin-bottom: 12px; min-height: 50px; }
|
|
.fav .desc em { color: var(--navy); font-style: italic; }
|
|
.fav .pips { display: flex; gap: 10px; align-items: flex-end; padding: 10px 0; border-top: 1px solid var(--rule); }
|
|
.fav .pip { text-align: center; }
|
|
.fav .pip img { display: block; image-rendering: pixelated; margin: 0 auto 4px; border-radius: 2px; }
|
|
.fav .pip .cap { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--ink-soft); }
|
|
|
|
.wip { padding: 16px 20px; background: rgba(240,208,0,0.18); border-left: 4px solid var(--yellow); margin-top: 16px; font-style: italic; color: var(--ink); font-size: 15px; }
|
|
|
|
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; }
|
|
.row-2, .row-3, .fav-row, .principles, .dusks { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="top">
|
|
<div class="l">Design proposal · 2026-05-15 · settled</div>
|
|
<div class="name">We<span class="v">V</span>isto</div>
|
|
<div class="r">Atmospheric system<br>login → app, one room</div>
|
|
</div>
|
|
<div class="subhead">— the brand is the surface, the theme is the tint, the photograph runs through.</div>
|
|
|
|
<h2 class="section"><span class="num">○</span>The principle, after several mis-tries</h2>
|
|
<p class="lede">The earlier proposals kept the app on cream while only the login was atmospheric. That made login feel like a different product. <strong>The right answer was to rebuild the theme system itself.</strong></p>
|
|
|
|
<div class="principles">
|
|
<div class="principle">
|
|
<h3><span class="yellow">●</span> Brand <em>is</em> the surface</h3>
|
|
<p>The Camogli harbor photograph is the permanent fixed backdrop on every authenticated view — same as the login. Cards become <strong>frosted glass</strong> 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.</p>
|
|
</div>
|
|
<div class="principle">
|
|
<h3><span class="yellow">●</span> Theme <em>is</em> the dusk</h3>
|
|
<p>The six user themes get reborn as <strong>atmospheric dusks</strong>: 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.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section"><span class="num">I.</span>The dusks (replaces the six cream themes)</h2>
|
|
<p class="lede">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.</p>
|
|
<div class="dusks">
|
|
<div class="dusk" data-d="ocean"><div class="swatch"></div><div class="name">Ocean</div><div class="italic">— the harbor</div></div>
|
|
<div class="dusk" data-d="amber"><div class="swatch"></div><div class="name">Amber</div><div class="italic">— the workshop</div></div>
|
|
<div class="dusk" data-d="sage"><div class="swatch"></div><div class="name">Sage</div><div class="italic">— the garden</div></div>
|
|
<div class="dusk" data-d="rose"><div class="swatch"></div><div class="name">Rose</div><div class="italic">— the parlor</div></div>
|
|
<div class="dusk" data-d="mauve"><div class="swatch"></div><div class="name">Mauve</div><div class="italic">— the study</div></div>
|
|
<div class="dusk" data-d="honey"><div class="swatch"></div><div class="name">Honey</div><div class="italic">— the alcove</div></div>
|
|
</div>
|
|
|
|
<h2 class="section"><span class="num">II.</span>The front door — login</h2>
|
|
<p class="lede">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.</p>
|
|
<div class="stack">
|
|
<div class="card wide">
|
|
<div class="preview">
|
|
<iframe src="login-cinematic.html" loading="lazy"></iframe>
|
|
<a class="open" href="login-cinematic.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">II.</div>
|
|
<h3>Login · cinematic arrival</h3>
|
|
<div class="surface">templates/security/login.html.twig · register.html.twig</div>
|
|
<p>Animated wordmark reveal, frosted-glass card, yellow CTA. Respects <em>prefers-reduced-motion</em>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section"><span class="num">III.</span>The room — in-app views</h2>
|
|
<p class="lede">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.</p>
|
|
|
|
<div class="stack">
|
|
<div class="row-3">
|
|
|
|
<div class="card phone">
|
|
<div class="preview">
|
|
<iframe src="spa/home.html" loading="lazy"></iframe>
|
|
<a class="open" href="spa/home.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">III·a</div>
|
|
<h3>Home</h3>
|
|
<div class="surface">/ · HomeView.vue</div>
|
|
<p>Top app bar; editorial hero ("Good morning, <em>Alice.</em>"); frame card as glass with the user's frame photo inside; up-next strip of queued thumbnails.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card phone">
|
|
<div class="preview">
|
|
<iframe src="spa/library.html" loading="lazy"></iframe>
|
|
<a class="open" href="spa/library.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">III·b</div>
|
|
<h3>Library · empty state</h3>
|
|
<div class="surface">/library · LibraryView.vue</div>
|
|
<p>A 112px mark in a yellow halo, "A library, <em>waiting.</em>" in display serif, three-step glass card explaining how it works, signature.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card phone">
|
|
<div class="preview">
|
|
<iframe src="spa/settings.html" loading="lazy"></iframe>
|
|
<a class="open" href="spa/settings.html" target="_blank">Open ⟶</a>
|
|
</div>
|
|
<div class="body">
|
|
<div class="roman">III·c</div>
|
|
<h3>Settings</h3>
|
|
<div class="surface">/settings · SettingsView.vue</div>
|
|
<p>Glass list rows. <em>Dusk picker</em> grid showing each dusk as a tinted harbor preview — click to switch the page live.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section"><span class="num">IV.</span>The small mark — favicon directions (work in progress)</h2>
|
|
<p class="lede">Four icon directions explored so far. Matt's still iterating here — wants WeVisto to be more present <em>inside the image itself</em>, not just initials beside the brand.</p>
|
|
|
|
<div class="wip">In progress — next iteration to integrate the wordmark into the mark and propagate the wordmark logo throughout more app surfaces.</div>
|
|
|
|
<div class="fav-row">
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__letter">A.</span><span class="fav__label">Warmth / home</span></div>
|
|
<h4>Roof V</h4>
|
|
<div class="desc">House silhouette where the rooftop is the V. Yellow door at centre.</div>
|
|
<div class="pips">
|
|
<div class="pip"><img src="favicons/A-roof-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/A-roof-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/A-roof-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/A-roof-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__letter">B.</span><span class="fav__label">Literal / poetic</span></div>
|
|
<h4>Frame + horizon</h4>
|
|
<div class="desc">A tiny photo frame with a sun over the sea. Most legible at 16.</div>
|
|
<div class="pips">
|
|
<div class="pip"><img src="favicons/B-frame-horizon-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/B-frame-horizon-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/B-frame-horizon-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/B-frame-horizon-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__letter">C.</span><span class="fav__label">Origin-specific</span></div>
|
|
<h4>Camogli skyline</h4>
|
|
<div class="desc">Camogli's coloured row-houses as silhouette. Risk: generic city at 16.</div>
|
|
<div class="pips">
|
|
<div class="pip"><img src="favicons/C-skyline-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/C-skyline-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/C-skyline-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/C-skyline-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="fav">
|
|
<div class="fav__head"><span class="fav__letter">D.</span><span class="fav__label">Gift / stationery</span></div>
|
|
<h4>Wax seal V</h4>
|
|
<div class="desc">Pressed-wax seal with V. Strong at 64+, softens at 16.</div>
|
|
<div class="pips">
|
|
<div class="pip"><img src="favicons/D-seal-16.png" width="32" height="32"><div class="cap">16</div></div>
|
|
<div class="pip"><img src="favicons/D-seal-32.png" width="48" height="48"><div class="cap">32</div></div>
|
|
<div class="pip"><img src="favicons/D-seal-64.png" width="64" height="64"><div class="cap">64</div></div>
|
|
<div class="pip"><img src="favicons/D-seal-180.png" width="90" height="90"><div class="cap">180</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
Saved at <code>webApp/_design/atmospheric-redesign/</code>. Reload any mockup to replay animations.
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|