← back to Wallco Ai
public/style-guide.html
199 lines
<!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>