← back to Wallco Ai
wallco: gucci brand-reference viewer + fliepaper-bugs spec.json (6 patterns × 6 colorways = 36 SKUs)
e916bd4e8a4c366826afc5f06188cb7f18d5e90b · 2026-05-13 16:47:20 -0700 · SteveStudio2
Files touched
A public/brand/gucci.htmlA public/data/fliepaper-bugs/spec.json
Diff
commit e916bd4e8a4c366826afc5f06188cb7f18d5e90b
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Wed May 13 16:47:20 2026 -0700
wallco: gucci brand-reference viewer + fliepaper-bugs spec.json (6 patterns × 6 colorways = 36 SKUs)
---
public/brand/gucci.html | 308 +++++++++++++++++++++++++++++++++++
public/data/fliepaper-bugs/spec.json | 24 +++
2 files changed, 332 insertions(+)
diff --git a/public/brand/gucci.html b/public/brand/gucci.html
new file mode 100644
index 0000000..afd9cea
--- /dev/null
+++ b/public/brand/gucci.html
@@ -0,0 +1,308 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Gucci — Brand Reference for Fliepaper Bugs</title>
+<style>
+ :root {
+ --emerald-marmont: #0F4F38;
+ --papyrus-archive: #EDE0C4;
+ --midnight-flora: #1A1F3C;
+ --antique-horsebit:#B8914A;
+ --plum-dionysus: #3D1F52;
+ --oxblood-flora: #6B1F1F;
+ --ink: #0c0c0c;
+ --paper: #faf7f1;
+ --hair: rgba(0,0,0,.12);
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ html,body{background:var(--paper);color:var(--ink);font-family:"Inter",-apple-system,sans-serif}
+ body{min-height:100vh;padding:24px 32px 80px}
+
+ /* Hero anatomy per DW standing rule — logo UL, ≡ MENU UR, wordmark below */
+ .topbar{display:flex;justify-content:space-between;align-items:center;padding:8px 0 28px}
+ .logo{font-family:"Times New Roman",serif;font-weight:700;font-size:22px;letter-spacing:.04em}
+ .menu{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;user-select:none}
+ .menu .bars{display:inline-block;width:24px;height:10px;position:relative}
+ .menu .bars::before,.menu .bars::after,.menu .bars span{content:"";display:block;height:1px;background:currentColor;position:absolute;left:0;right:0}
+ .menu .bars::before{top:0}.menu .bars span{top:4px}.menu .bars::after{top:9px}
+
+ /* Wordmark stack */
+ .wordmark{text-align:center;padding:24px 0 56px;border-bottom:1px solid var(--hair)}
+ .wordmark h1{font-family:"Times New Roman",serif;font-weight:400;font-size:clamp(40px,7vw,84px);letter-spacing:.02em;line-height:1}
+ .wordmark .tag{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:#555;margin-top:14px}
+
+ /* Section grid */
+ section{padding:56px 0;border-bottom:1px solid var(--hair)}
+ section:last-of-type{border-bottom:none}
+ .sec-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:28px}
+ .sec-title{font-family:"Times New Roman",serif;font-size:24px;font-weight:400}
+ .sec-sub{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#777}
+
+ /* The brand reference panel */
+ .ref-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
+ @media (max-width:880px){.ref-wrap{grid-template-columns:1fr}}
+
+ .ref-canvas{position:relative;background:var(--paper);border:1px solid var(--hair);aspect-ratio:4/5;overflow:hidden}
+ .ref-canvas .upload-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:11px;letter-spacing:.25em;color:#999;text-transform:uppercase;pointer-events:none}
+ .ref-canvas img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
+ .ref-canvas svg{position:absolute;inset:0;width:100%;height:100%}
+ .ref-canvas[data-has-image="true"] .gucci-svg,
+ .ref-canvas[data-has-image="true"] .upload-hint{display:none}
+
+ /* Drop-in admin button */
+ .admin-bar{position:absolute;left:12px;top:12px;display:flex;gap:8px;z-index:3}
+ .admin-bar button{appearance:none;border:1px solid var(--ink);background:rgba(255,255,255,.92);color:var(--ink);padding:6px 12px;font-size:10px;letter-spacing:.25em;text-transform:uppercase;cursor:pointer}
+ .admin-bar button:hover{background:var(--ink);color:#fff}
+
+ /* The 6 colorway swatches */
+ .palette-panel{display:flex;flex-direction:column;gap:14px}
+ .swatch{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--hair);background:#fff}
+ .chip{aspect-ratio:1/1;width:64px;border:1px solid rgba(0,0,0,.08)}
+ .swatch .name{font-family:"Times New Roman",serif;font-size:18px;line-height:1.2;margin-bottom:4px}
+ .swatch .ref{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#666}
+ .swatch .role{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:#999;font-weight:600}
+ .swatch .hex{font-family:"SF Mono",ui-monospace,monospace;font-size:11px;color:#555;text-align:right}
+
+ /* Pattern strip — our 6 bug patterns to coordinate */
+ .pattern-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
+ @media (max-width:760px){.pattern-strip{grid-template-columns:repeat(3,1fr)}}
+ @media (max-width:480px){.pattern-strip{grid-template-columns:repeat(2,1fr)}}
+ .pat-card{aspect-ratio:1/1.15;background:linear-gradient(135deg,var(--c1) 0%,var(--c2) 100%);position:relative;overflow:hidden;border:1px solid var(--hair)}
+ .pat-card .pat-name{position:absolute;left:10px;right:10px;bottom:10px;color:#fff;font-family:"Times New Roman",serif;font-size:14px;line-height:1.1;letter-spacing:.02em;text-shadow:0 1px 3px rgba(0,0,0,.6)}
+ .pat-card .pat-bug{position:absolute;left:10px;top:10px;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85)}
+ .pat-card .pat-pending{position:absolute;right:10px;top:10px;font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.35);padding:2px 8px;border-radius:999px}
+
+ /* Color coordination grid — shows every pattern × every colorway */
+ .coord-grid{display:grid;grid-template-columns:120px repeat(6,1fr);gap:6px}
+ .coord-grid .ch{height:48px;display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
+ .coord-grid .rh{font-family:"Times New Roman",serif;font-size:13px;line-height:1.1;color:#222;display:flex;align-items:center;padding-right:8px}
+ .coord-grid .col-head{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#666;display:flex;align-items:center;justify-content:center;height:32px;text-align:center}
+ .coord-grid .corner{height:32px}
+
+ /* Theme toggle (per DW standing rule) */
+ .theme-toggle{position:fixed;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;border:1px solid var(--hair);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:50}
+ body[data-theme="dark"]{--paper:#0c0c0c;--ink:#faf7f1;--hair:rgba(255,255,255,.12)}
+ body[data-theme="dark"] .swatch{background:#181818}
+ body[data-theme="dark"] .admin-bar button{background:rgba(0,0,0,.6);color:#fff;border-color:#fff}
+
+ /* Source / footer */
+ footer{padding:40px 0 0;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#888;text-align:center}
+ footer a{color:#888;text-decoration:underline}
+</style>
+</head>
+<body>
+
+<div class="topbar">
+ <div class="logo">fliepaper</div>
+ <div class="menu" onclick="toggleMenu()"><span class="bars"><span></span></span> MENU</div>
+</div>
+
+<div class="wordmark">
+ <h1>Brand Reference · Gucci</h1>
+ <div class="tag">A house style guide for the fliepaper bugs collection</div>
+</div>
+
+<section>
+ <div class="sec-head">
+ <div class="sec-title">House anchor</div>
+ <div class="sec-sub">Coordinated palette</div>
+ </div>
+
+ <div class="ref-wrap">
+ <div class="ref-canvas" id="refCanvas" data-has-image="false">
+ <div class="admin-bar">
+ <button onclick="document.getElementById('upload').click()">Replace reference</button>
+ </div>
+ <input type="file" id="upload" accept="image/*" style="display:none" onchange="onUpload(event)">
+ <img id="refImg" alt="Gucci brand reference">
+
+ <!-- Default SVG: Gucci-house signature — web stripe + interlocked GG monogram + horsebit accent -->
+ <svg class="gucci-svg" viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice">
+ <defs>
+ <pattern id="gg" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse" patternTransform="rotate(0)">
+ <rect width="60" height="60" fill="#EDE0C4"/>
+ <g fill="#0F4F38" font-family="Times New Roman, serif" font-weight="700">
+ <text x="6" y="34" font-size="32" letter-spacing="-3">GG</text>
+ <text x="38" y="34" font-size="32" letter-spacing="-3" transform="rotate(180 50 28)">GG</text>
+ </g>
+ </pattern>
+ </defs>
+ <!-- Cream ground -->
+ <rect x="0" y="0" width="400" height="500" fill="#EDE0C4"/>
+ <!-- GG monogram field -->
+ <rect x="0" y="0" width="400" height="500" fill="url(#gg)" opacity=".55"/>
+ <!-- Web stripe (signature Gucci green-red-green) -->
+ <g>
+ <rect x="60" y="0" width="36" height="500" fill="#0F4F38"/>
+ <rect x="96" y="0" width="36" height="500" fill="#6B1F1F"/>
+ <rect x="132" y="0" width="36" height="500" fill="#0F4F38"/>
+ </g>
+ <!-- Horsebit hardware bar -->
+ <g transform="translate(220,240)">
+ <rect x="0" y="0" width="140" height="22" fill="#B8914A" rx="2"/>
+ <rect x="6" y="4" width="128" height="14" fill="none" stroke="#7a5a26" stroke-width="1"/>
+ <circle cx="20" cy="11" r="6" fill="none" stroke="#7a5a26" stroke-width="1.5"/>
+ <circle cx="120" cy="11" r="6" fill="none" stroke="#7a5a26" stroke-width="1.5"/>
+ <rect x="26" y="9" width="88" height="4" fill="#7a5a26"/>
+ </g>
+ <!-- Decorative deep plum corner block (Dionysus) -->
+ <rect x="280" y="380" width="100" height="100" fill="#3D1F52" opacity=".85"/>
+ <!-- Midnight navy script tag -->
+ <rect x="220" y="320" width="160" height="46" fill="#1A1F3C"/>
+ <text x="300" y="350" font-family="Times New Roman, serif" font-size="22" fill="#EDE0C4" text-anchor="middle" letter-spacing="2">GUCCI</text>
+ </svg>
+
+ <div class="upload-hint">↑ House signature · Replace with any Gucci reference</div>
+ </div>
+
+ <div class="palette-panel" id="palettePanel"></div>
+ </div>
+</section>
+
+<section>
+ <div class="sec-head">
+ <div class="sec-title">The collection</div>
+ <div class="sec-sub">Six patterns · twenty-four colorways</div>
+ </div>
+ <div class="pattern-strip" id="patternStrip"></div>
+</section>
+
+<section>
+ <div class="sec-head">
+ <div class="sec-title">Coordination matrix</div>
+ <div class="sec-sub">Every pattern × every house anchor</div>
+ </div>
+ <div class="coord-grid" id="coordGrid"></div>
+</section>
+
+<footer>
+ Internal brand reference · house anchor: gucci · fliepaper-bugs collection · 36 SKUs · Settlement-gated generation · wallco.ai
+</footer>
+
+<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle">☾</button>
+
+<script>
+ const SPEC_URL = '/data/fliepaper-bugs/spec.json';
+
+ // Bundled fallback spec — survives if API not wired yet
+ const FALLBACK_SPEC = {
+ patterns: [
+ {slug:"scarab-reverie",bug:"scarab",name:"Scarab Reverie"},
+ {slug:"luna-moth-nocturne",bug:"luna moth",name:"Luna Moth Nocturne"},
+ {slug:"dragonfly-lacquer",bug:"dragonfly",name:"Dragonfly Lacquer"},
+ {slug:"stag-beetle-cabinet",bug:"stag beetle",name:"Stag Beetle Cabinet"},
+ {slug:"bee-damask",bug:"honeybee",name:"Bee Damask"},
+ {slug:"firefly-nocturne",bug:"firefly",name:"Firefly Nocturne"}
+ ],
+ palette: [
+ {slug:"emerald-marmont", name:"Emerald Marmont", hex:"#0F4F38",role:"ground", gucci_ref:"GG Marmont velvet emerald"},
+ {slug:"papyrus-archive", name:"Papyrus Archive", hex:"#EDE0C4",role:"ground/figure",gucci_ref:"GG Supreme canvas natural"},
+ {slug:"midnight-flora", name:"Midnight Flora", hex:"#1A1F3C",role:"ground", gucci_ref:"Velvet midnight navy FW20"},
+ {slug:"antique-horsebit", name:"Antique Horsebit", hex:"#B8914A",role:"accent/figure",gucci_ref:"Horsebit hardware antique gold"},
+ {slug:"deep-plum-dionysus",name:"Deep Plum Dionysus", hex:"#3D1F52",role:"ground/figure",gucci_ref:"Dionysus suede deep violet"},
+ {slug:"oxblood-flora", name:"Oxblood Flora", hex:"#6B1F1F",role:"figure/accent",gucci_ref:"Signature red leather SS18"}
+ ]
+ };
+
+ let SPEC = FALLBACK_SPEC;
+
+ async function loadSpec(){
+ try {
+ const r = await fetch(SPEC_URL,{cache:'no-store'});
+ if (r.ok) SPEC = await r.json();
+ } catch(e){ /* fallback in place */ }
+ renderPalette(); renderPatterns(); renderCoord();
+ }
+
+ function renderPalette(){
+ const host = document.getElementById('palettePanel');
+ host.innerHTML = SPEC.palette.map(p=>`
+ <div class="swatch">
+ <div class="chip" style="background:${p.hex}"></div>
+ <div>
+ <div class="name">${p.name}</div>
+ <div class="ref">${p.gucci_ref || ''}</div>
+ </div>
+ <div>
+ <div class="role">${p.role || ''}</div>
+ <div class="hex">${p.hex.toUpperCase()}</div>
+ </div>
+ </div>
+ `).join('');
+ }
+
+ function renderPatterns(){
+ const host = document.getElementById('patternStrip');
+ // Lead each pattern card with the strongest two-color gradient pulled from the palette
+ const c1 = SPEC.palette[0].hex; // emerald
+ const c2list = ['#1A1F3C','#3D1F52','#6B1F1F','#B8914A','#EDE0C4','#0F4F38'];
+ host.innerHTML = SPEC.patterns.map((pat,i)=>`
+ <a class="pat-card" href="/collections/fliepaper-bugs.html#${pat.slug}" style="--c1:${c1};--c2:${c2list[i%6]}">
+ <span class="pat-bug">${pat.bug}</span>
+ <span class="pat-pending">Pending</span>
+ <span class="pat-name">${pat.name}</span>
+ </a>
+ `).join('');
+ }
+
+ function renderCoord(){
+ const grid = document.getElementById('coordGrid');
+ let html = '<div class="corner"></div>';
+ SPEC.palette.forEach(p=>{ html += `<div class="col-head">${p.name.split(' ')[0]}</div>`; });
+ SPEC.patterns.forEach(pat=>{
+ html += `<div class="rh">${pat.name}</div>`;
+ SPEC.palette.forEach(p=>{
+ html += `<div class="ch" style="background:${p.hex}">${pat.slug.slice(0,3).toUpperCase()}·${p.slug.slice(0,3).toUpperCase()}</div>`;
+ });
+ });
+ grid.innerHTML = html;
+ }
+
+ function onUpload(ev){
+ const f = ev.target.files[0]; if (!f) return;
+ const fr = new FileReader();
+ fr.onload = e => {
+ const img = document.getElementById('refImg');
+ img.src = e.target.result;
+ document.getElementById('refCanvas').setAttribute('data-has-image','true');
+ try { localStorage.setItem('fliepaper.brand-ref.gucci', e.target.result); } catch(_){}
+ };
+ fr.readAsDataURL(f);
+ }
+
+ function restoreRef(){
+ try{
+ const saved = localStorage.getItem('fliepaper.brand-ref.gucci');
+ if (saved){
+ document.getElementById('refImg').src = saved;
+ document.getElementById('refCanvas').setAttribute('data-has-image','true');
+ }
+ }catch(_){}
+ }
+
+ function toggleTheme(){
+ const cur = document.body.getAttribute('data-theme')||'light';
+ const next = cur==='light' ? 'dark':'light';
+ document.body.setAttribute('data-theme',next);
+ document.getElementById('themeToggle').textContent = next==='light' ? '☾' : '☀';
+ try{ localStorage.setItem('fliepaper.theme',next); }catch(_){}
+ }
+
+ function restoreTheme(){
+ try{
+ const t = localStorage.getItem('fliepaper.theme');
+ if (t){ document.body.setAttribute('data-theme',t); document.getElementById('themeToggle').textContent = t==='light'?'☾':'☀'; }
+ }catch(_){}
+ }
+
+ function toggleMenu(){
+ // Stub — wallco-ai handles real menu drawer when embedded
+ alert('Menu — wire to wallco-ai global drawer on embed');
+ }
+
+ loadSpec(); restoreRef(); restoreTheme();
+</script>
+</body>
+</html>
diff --git a/public/data/fliepaper-bugs/spec.json b/public/data/fliepaper-bugs/spec.json
new file mode 100644
index 0000000..3b9285d
--- /dev/null
+++ b/public/data/fliepaper-bugs/spec.json
@@ -0,0 +1,24 @@
+{
+ "collection": "fliepaper-bugs",
+ "vendor": "Designer Wallcoverings",
+ "series": "fliepaper-bugs",
+ "brand_reference": "Gucci",
+ "owned_by_steve": true,
+ "patterns": [
+ {"slug":"scarab-reverie","bug":"scarab beetle","name":"Scarab Reverie","scale":"medium-trellis","composition":"Diamond trellis with iridescent gilt scarab beetles at every ogival intersection; jade ground, metallic gilt finish, GG Supreme Egyptian register"},
+ {"slug":"luna-moth-nocturne","bug":"luna moth","name":"Luna Moth Nocturne","scale":"large-statement","composition":"Oversized luna moths in full wingspan, wings watercolor-layered celadon-to-cream-to-blush, midnight ground, botanical frond negative-space fill, Cole & Son Fornasetti register"},
+ {"slug":"dragonfly-lacquer","bug":"dragonfly","name":"Dragonfly Lacquer","scale":"small-allover","composition":"Densely tossed dragonflies at 45° angles, lacquer-glossed bodies, stained-glass cell wings, Meiji japonisme meets Gucci Resort SS2019"},
+ {"slug":"stag-beetle-cabinet","bug":"stag beetle","name":"Stag Beetle Cabinet","scale":"large-statement","composition":"Wunderkammer natural-history-plate composition, monumental stag beetle centered on papyrus cream, symmetrical botanical specimens flanking, engraved-illustration linework, Schumacher Audubon register"},
+ {"slug":"bee-damask","bug":"honeybee","name":"Bee Damask","scale":"medium-trellis","composition":"Napoleonic bee as ogival damask medallion fill, honeycomb geometry as lattice spine, reads formal damask at distance, reveals entomology on close inspection"},
+ {"slug":"firefly-nocturne","bug":"firefly","name":"Firefly Nocturne","scale":"medium-trellis","composition":"Fireflies as luminous hand-painted gold-leaf dots in loose trellis rhythm on deep navy, bioluminescent trail accents, Schumacher Nuit de Feu register"}
+ ],
+ "palette": [
+ {"slug":"emerald-marmont","name":"Emerald Marmont","hex":"#0F4F38","role":"ground","gucci_ref":"GG Marmont velvet emerald"},
+ {"slug":"papyrus-archive","name":"Papyrus Archive","hex":"#EDE0C4","role":"ground/figure","gucci_ref":"GG Supreme canvas natural"},
+ {"slug":"midnight-flora","name":"Midnight Flora","hex":"#1A1F3C","role":"ground","gucci_ref":"Gucci FW2020 velvet midnight navy"},
+ {"slug":"antique-horsebit","name":"Antique Horsebit","hex":"#B8914A","role":"accent/figure","gucci_ref":"Horsebit hardware antique gold"},
+ {"slug":"deep-plum-dionysus","name":"Deep Plum Dionysus","hex":"#3D1F52","role":"ground/figure","gucci_ref":"Dionysus suede deep violet"},
+ {"slug":"oxblood-flora","name":"Oxblood Flora","hex":"#6B1F1F","role":"figure/accent","gucci_ref":"Gucci signature red leather SS2018"}
+ ],
+ "sku_count_expected": 36
+}
← 53a5430 marketplace ai tests: 5×8s retry budget to ride out parallel
·
back to Wallco Ai
·
fliepaper-bugs: DB seed — mp_collections row + fliepaper_bug 4bc1561 →