football2801/pictureFrame-webApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: favicon v2 (V-centric) + logo-placement mockups
CI / test (push) Has been cancelled
Details

Browse Source 
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>
This commit is contained in:
Matt Edholm
2026-05-15 10:25:09 -04:00
parent 01b6007b1c
commit 3bd0b9a5a1
49 changed files with 2120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_design/favicons-and-logo-v2/spa/_switcher.html
+19
View File
@@ -0,0 +1,19 @@
<div class="theme-switcher" role="region" aria-label="Theme switcher (mockup only)">
<span class="theme-switcher__label">User-pref theme</span>
<div class="theme-switcher__chips">
<button class="theme-switcher__chip active" data-theme="warm-craft" title="warm-craft"></button>
<button class="theme-switcher__chip" data-theme="ocean-dusk" title="ocean-dusk"></button>
<button class="theme-switcher__chip" data-theme="sage-cream" title="sage-cream"></button>
<button class="theme-switcher__chip" data-theme="playful-pop" title="playful-pop"></button>
<button class="theme-switcher__chip" data-theme="dusty-mauve" title="dusty-mauve"></button>
<button class="theme-switcher__chip" data-theme="honey-slate" title="honey-slate"></button>
</div>
</div>
<script>
document.querySelectorAll('.theme-switcher__chip').forEach(chip => {
chip.addEventListener('click', () => {
document.documentElement.setAttribute('data-theme', chip.dataset.theme);
document.querySelectorAll('.theme-switcher__chip').forEach(c => c.classList.toggle('active', c === chip));
});
});
</script>