← back to Wallco Ai
wallco: add /style-guide.html — brand-picker dropdown showing palette swatches, fonts + unique UX per fashion house
b80dd4df9d544d373c4c03f0c1ac0203454dff33 · 2026-05-19 10:17:15 -0700 · SteveStudio2
Files touched
A public/style-guide.html
Diff
commit b80dd4df9d544d373c4c03f0c1ac0203454dff33
Author: SteveStudio2 <steve@designerwallcoverings.com>
Date: Tue May 19 10:17:15 2026 -0700
wallco: add /style-guide.html — brand-picker dropdown showing palette swatches, fonts + unique UX per fashion house
---
public/style-guide.html | 198 ++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 198 insertions(+)
diff --git a/public/style-guide.html b/public/style-guide.html
new file mode 100644
index 0000000..33b386d
--- /dev/null
+++ b/public/style-guide.html
@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Style Guide — wallco.ai</title>
+<style>
+ :root{
+ --paper:#f4f1ea; --ink:#1a1712; --line:#d8d1c2; --muted:#7a7264;
+ --card:#fffefb;
+ }
+ *{box-sizing:border-box;margin:0;padding:0}
+ body{
+ font:16px/1.6 ui-sans-serif,-apple-system,system-ui,sans-serif;
+ background:var(--paper); color:var(--ink);
+ padding:48px 24px 80px; -webkit-font-smoothing:antialiased;
+ }
+ .wrap{max-width:920px;margin:0 auto}
+ .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
+ h1{font:400 40px/1.1 ui-serif,'Times New Roman',serif;letter-spacing:-.01em;margin-bottom:6px}
+ .sub{color:var(--muted);font-size:14px;margin-bottom:32px}
+ .picker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:36px}
+ label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
+ select{
+ font:15px/1 ui-sans-serif,system-ui,sans-serif;
+ padding:11px 38px 11px 14px; border:1px solid var(--line); border-radius:7px;
+ background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7264' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 13px center;
+ color:var(--ink); appearance:none; cursor:pointer; min-width:230px;
+ }
+ .card{
+ background:var(--card); border:1px solid var(--line); border-radius:12px;
+ padding:34px; box-shadow:0 1px 3px #0000000a;
+ }
+ .brand{font:400 30px/1.1 ui-serif,'Times New Roman',serif;margin-bottom:2px}
+ .brand-sig{color:var(--muted);font-size:14px;font-style:italic;margin-bottom:26px}
+ .section{margin-top:26px}
+ .section-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
+ border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:14px}
+ .swatches{display:flex;flex-wrap:wrap;gap:10px}
+ .sw{
+ width:128px;height:96px;border-radius:8px;border:1px solid #0000001a;
+ display:flex;align-items:flex-end;padding:9px;font-size:11px;font-weight:600;
+ letter-spacing:.04em;
+ }
+ .fonts{display:flex;flex-direction:column;gap:16px}
+ .font-row{border:1px solid var(--line);border-radius:9px;padding:16px 18px;background:var(--paper)}
+ .font-tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
+ .font-name{font-size:12px;color:var(--muted);margin-bottom:8px;font-family:ui-monospace,monospace}
+ .font-sample{font-size:26px;line-height:1.15}
+ .ux{list-style:none;display:flex;flex-direction:column;gap:9px}
+ .ux li{padding-left:20px;position:relative;font-size:15px}
+ .ux li:before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
+ border-radius:50%;background:var(--accent,#1a1712)}
+ .foot{margin-top:34px;font-size:12px;color:var(--muted);text-align:center}
+ .foot a{color:var(--muted)}
+</style>
+</head>
+<body>
+<div class="wrap">
+ <div class="eyebrow">wallco.ai · design reference</div>
+ <h1>Fashion Style Guide</h1>
+ <p class="sub">Curated colour, type, and UX systems from 19 luxury & DTC fashion houses — the palette library the wallco generator draws from.</p>
+
+ <div class="picker">
+ <label for="brand">Style guide</label>
+ <select id="brand" aria-label="Select a fashion brand"></select>
+ </div>
+
+ <div class="card" id="panel"></div>
+
+ <p class="foot">Reference tokens from the <code>dw-fashion-templates</code> skill · the generator seeds each pattern's colour from one of these palettes.</p>
+</div>
+
+<script>
+const BRANDS = [
+ {name:"Hermès", hex:["#FF4F00","#1a1410","#FFFEFA","#E5DDD0"],
+ headline:["Serif","ui-serif,'Times New Roman',serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"burnt-orange accent, saddle-stitch warmth, generous ground",
+ ux:["Equestrian motif & saddle-stitch detailing as brand signature","Generous whitespace — product given room to breathe","Warm burnt-orange as the single decisive accent"]},
+ {name:"Bottega Veneta", hex:["#107A3B","#0e1311","#F4F0E6","#1d2a23"],
+ headline:["Recoleta / Playfair","'Recoleta','Playfair Display',serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"BV green, woven intrecciato, craft-forward",
+ ux:["Signature BV green owns the brand instantly","Italic serif headlines + woven intrecciato motif","Cinematic transitions between sections"]},
+ {name:"Prada", hex:["#000000","#FF0000","#F5F2EB"],
+ headline:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"cream ground, scarlet accent, scientific austerity",
+ ux:["The smartest luxury UX system overall — intellectual, minimal","All-caps geometric type, dense thumb-friendly product grid","Cinematic film integration, cream/red restraint"]},
+ {name:"Saint Laurent", hex:["#000000","#FFFFFF"],
+ headline:["Helvetica Neue Bold","'Helvetica Neue',Helvetica,sans-serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"pure monochrome, sharp ultra-minimal",
+ ux:["Pure monochrome UI — zero ornament","Ultra-minimal nav, sharp uppercase Helvetica","Full-bleed dark editorial photography"]},
+ {name:"Dior", hex:["#1A1A1A","#FAF9F6","#A98B5B","#D8D2C5"],
+ headline:["Tiempos Headline","'Tiempos Headline',ui-serif,serif"], body:["Serif","ui-serif,Georgia,serif"],
+ sig:"refined gray, soft gold accent, couture restraint",
+ ux:["High-end couture storytelling","Refined gray + ivory with soft gold accents","Luxury animation systems on scroll"]},
+ {name:"Chanel", hex:["#000000","#FFFFFF"],
+ headline:["Didot / Bodoni","'Didot','Bodoni Moda',serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"timeless black & white, high-contrast hierarchy",
+ ux:["Pure black & white — timeless, never trend-chasing","Oversized type with strict hierarchy","Campaign-immersion homepage"]},
+ {name:"Gucci", hex:["#006837","#A41E1A","#FFFEF7","#1a1a1a"],
+ headline:["Garamond","'EB Garamond',Garamond,serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"green & red maximalism, ornate, warm ivory ground",
+ ux:["Maximalist editorial — campaign storytelling first","Ornate Garamond, green & red heritage stripe","Immersive nav with pattern overlays"]},
+ {name:"Celine", hex:["#000000","#FFFFFF","#E0E0E0"],
+ headline:["Helvetica lowercase","'Helvetica Neue',Helvetica,sans-serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"minimalist gallery monochrome, sharp",
+ ux:["Brutalist minimalism — image-first","Lowercase logo, sharp monochrome typography","Gallery-like restraint, near-zero chrome"]},
+ {name:"Loewe", hex:["#9B7B4F","#F2EDE2","#2C1F0F","#C9BFA7"],
+ headline:["Saol Display","'Saol Display',ui-serif,serif"], body:["Serif","ui-serif,Georgia,serif"],
+ sig:"soft cream, hand-craft warmth, airy",
+ ux:["Modern editorial luxury — airy, generous whitespace","Soft cream ground, hand-drawn anagram","Craft-forward art direction"]},
+ {name:"Valentino", hex:["#D70000","#FFFFFF","#000000"],
+ headline:["Garamond","'EB Garamond',Garamond,serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"saturated romantic red, classical drama",
+ ux:["Saturated Valentino red as the hero","Classical serif, romantic full-width photography","Dramatic, emotional campaign pacing"]},
+ {name:"Toteme", hex:["#1A1A1A","#F5F2ED","#D5CFC4"],
+ headline:["Sans","ui-sans-serif,system-ui,sans-serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"quiet restrained neutral, understated",
+ ux:["Quiet luxury — restraint as the whole point","Neutral palette, no decorative noise","Premium UI that gets out of the way"]},
+ {name:"Khaite", hex:["#3A3530","#F2EFE9","#C9BFB4"],
+ headline:["GT Sectra","'GT Sectra',ui-serif,serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"refined warm neutral, soft luxury",
+ ux:["Refined minimalism, warm neutral palette","Understated soft-luxury tone","Editorial calm, generous spacing"]},
+ {name:"Balenciaga", hex:["#000000","#F5F5F5","#FF4F00"],
+ headline:["Helvetica Neue Black","'Helvetica Neue',Helvetica,sans-serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"brutalist, anti-luxury, oversized orange jolt",
+ ux:["Experimental, anti-luxury, deliberately abrasive","Oversized brutalist typography","One jarring orange accent against grey/black"]},
+ {name:"Burberry", hex:["#A47C5A","#FFFFFF","#000000"],
+ headline:["Transitional serif","Georgia,'Times New Roman',serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"heritage tan, check-pattern motif, clean",
+ ux:["Refined omnichannel — clean product discovery","Heritage check-pattern motif","Modern luxury ecommerce polish"]},
+ {name:"Miu Miu", hex:["#FFB6C1","#FFF8F2","#000000","#FFCFD8"],
+ headline:["Playfair italic","'Playfair Display',serif"], body:["Helvetica Neue","'Helvetica Neue',Helvetica,sans-serif"],
+ sig:"playful editorial pink, magazine warmth",
+ ux:["Editorial homepage storytelling","Magazine + commerce hybrid layout","Playful pink, italic display type"]},
+ {name:"Jacquemus", hex:["#F4D24F","#FFFCF5","#1a1a1a","#F2E5A8"],
+ headline:["Tiempos Headline","'Tiempos Headline',ui-serif,serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"sun-yellow accent, French Riviera, cinematic",
+ ux:["Fashion-forward, personality-rich interactions","Sun-yellow accent, French Riviera mood","Cinematic, playful campaign scrolling"]},
+ {name:"Skims", hex:["#C9B8A4","#F5EFE6","#3D352B","#E8DDC9"],
+ headline:["Sans","ui-sans-serif,system-ui,sans-serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"nude flesh tones, soft conversion-led calm",
+ ux:["Conversion architecture built around mobile","Nude tonal palette across the whole UI","Sticky add-to-cart, swipe galleries"]},
+ {name:"Gymshark", hex:["#000000","#1B5E20","#FFFFFF"],
+ headline:["Sans","ui-sans-serif,system-ui,sans-serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"bold black, deep-green energy, high contrast",
+ ux:["Best-in-class mobile ecommerce performance","Sticky ATC, swipe galleries, oversized imagery","Bold, conversion-led DTC energy"]},
+ {name:"Phoebe Philo", hex:["#000000","#F5F5F0","#D8D2C5"],
+ headline:["Inter Tight Light","'Inter Tight',ui-sans-serif,sans-serif"], body:["Sans","ui-sans-serif,system-ui,sans-serif"],
+ sig:"typography-led minimal, refined off-white",
+ ux:["Typography-led — type IS the design","Oversized letter-spacing, subtle tracking","Refined off-white, near-zero decoration"]}
+].sort((a,b)=>a.name.localeCompare(b.name));
+
+function textOn(hex){
+ const c=hex.replace('#',''); const r=parseInt(c.substr(0,2),16),g=parseInt(c.substr(2,2),16),b=parseInt(c.substr(4,2),16);
+ return (0.299*r+0.587*g+0.114*b)>150 ? '#1a1712' : '#fff';
+}
+function render(b){
+ const accent=b.hex[0];
+ const sw=b.hex.map(h=>`<div class="sw" style="background:${h};color:${textOn(h)}">${h.toUpperCase()}</div>`).join('');
+ const fontRow=(tag,f)=>`<div class="font-row">
+ <div class="font-tag">${tag}</div>
+ <div class="font-name">${f[0]} — <span>${f[1]}</span></div>
+ <div class="font-sample" style="font-family:${f[1]}">${b.name} · Wallcoverings</div>
+ </div>`;
+ const ux=b.ux.map(u=>`<li>${u}</li>`).join('');
+ document.getElementById('panel').style.setProperty('--accent',accent);
+ document.getElementById('panel').innerHTML=`
+ <div class="brand">${b.name}</div>
+ <div class="brand-sig">${b.sig}</div>
+ <div class="section">
+ <div class="section-h">Colour palette</div>
+ <div class="swatches">${sw}</div>
+ </div>
+ <div class="section">
+ <div class="section-h">Typography</div>
+ <div class="fonts">${fontRow('Headline',b.headline)}${fontRow('Body',b.body)}</div>
+ </div>
+ <div class="section">
+ <div class="section-h">Unique UX / UI</div>
+ <ul class="ux">${ux}</ul>
+ </div>`;
+}
+
+const sel=document.getElementById('brand');
+BRANDS.forEach((b,i)=>{const o=document.createElement('option');o.value=i;o.textContent=b.name;sel.appendChild(o);});
+const saved=localStorage.getItem('wallco.styleGuide.brand');
+const startIdx=Math.max(0,BRANDS.findIndex(b=>b.name===saved));
+sel.value=startIdx;
+render(BRANDS[startIdx]);
+sel.addEventListener('change',()=>{
+ const b=BRANDS[sel.value];
+ localStorage.setItem('wallco.styleGuide.brand',b.name);
+ render(b);
+});
+</script>
+</body>
+</html>
← 174a5bd wallco generator: seed colour from dw-fashion-templates styl
·
back to Wallco Ai
·
generator: steer SDXL to screen-print look — solid opaque fl a787241 →