← back to Fashion Style Guides
public/index.html
95 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fashion Style Guides — 20 Houses · Pantone</title>
<link rel="stylesheet" href="/styles.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<header class="topbar">
<a href="/" class="brand-logo">FSG · <span>Fashion Style Guides</span></a>
<button id="menuBtn" class="menu-btn" aria-label="Open menu">
<span class="bars"><i></i><i></i><i></i></span><span class="label">MENU</span>
</button>
</header>
<nav id="drawer" class="drawer" hidden>
<div class="drawer-inner">
<button class="drawer-close" aria-label="Close menu">×</button>
<a href="#brands">All Brands</a>
<a href="#common">Common Colors</a>
<a href="#pantone-coty">Pantone — Color of the Year</a>
<a href="#pantone-fashion">Pantone — Fashion Trend</a>
<a href="#pantone-home">Pantone — Home + Interiors</a>
<a href="#agent">Style Guide Agent</a>
</div>
</nav>
<section class="hero">
<h1>20 Top Fashion Houses</h1>
<p>Colors · Palettes · Typography · Visual Signatures. Plus Pantone Color of the Year (1992-now), the latest Fashion Color Trend Report, and the PANTONEVIEW Home + Interiors palette. Auto-refreshed by the Style Guide Agent.</p>
<p class="meta"><span id="lastUpdated"></span></p>
</section>
<section id="brands" class="container">
<div class="controls">
<label>Sort
<select id="sortBy">
<option value="name">Name A→Z</option>
<option value="founded-asc">Founded (oldest first)</option>
<option value="founded-desc">Founded (newest first)</option>
<option value="primary-hue">By primary hue</option>
<option value="house">By parent house</option>
</select>
</label>
<label>Density
<input id="density" type="range" min="220" max="520" step="20" value="320">
</label>
<span class="count"><span id="count"></span> brands</span>
</div>
<div id="grid" class="grid"></div>
</section>
<section id="common" class="container">
<h2>Common Colors Across the 20 Houses</h2>
<p class="lede">Every palette swatch from the 20 brands bucketed by color family. Click a swatch to see which house it belongs to. Use this palette as the source for the Drunk Animals series.</p>
<div id="commonColors" class="common-colors"></div>
</section>
<section id="pantone-coty" class="container">
<h2>Pantone Color of the Year</h2>
<p class="lede">Announced each December for the following year. 2026 is pending the official December 2025 announcement — the Style Guide Agent will auto-populate it.</p>
<div id="cotyGrid" class="coty-grid"></div>
</section>
<section id="pantone-fashion" class="container">
<h2>Pantone — Latest Fashion Color Trend Report</h2>
<div id="fashionPalette" class="palette-block"></div>
</section>
<section id="pantone-home" class="container">
<h2>Pantone — Home + Interiors</h2>
<div id="homePalette" class="palette-block"></div>
</section>
<section id="agent" class="container">
<h2>Style Guide Agent</h2>
<p class="lede">A background refresh agent re-checks each house's public brand guidelines and the official Pantone announcements, then updates <code>data/brands.json</code> and <code>data/pantone.json</code>. Manual trigger:</p>
<pre><code>cd ~/Projects/fashion-style-guides
npm run refresh # full refresh
npm run refresh:dry # dry-run, prints what would change</code></pre>
<p>Scheduled by launchd at <code>~/Library/LaunchAgents/com.steve.fashion-style-guides-refresh.plist</code> — runs weekly on Sunday at 03:14 PT. Last run:</p>
<pre id="agentStatus" class="status-box">checking…</pre>
</section>
<footer class="footer">
<p>Fashion Style Guides v0.1 · public brand-mark colors and typography as published by each house · sources cached in <code>data/</code> · not affiliated with any of the brands listed.</p>
</footer>
<script src="/app.js"></script>
</body>
</html>