hybrid brand demo: 3 per-site boards themed from real style-guide tokens (gilt/bodoni, coastal/cormorant, plum/playfair), captured to Figma

e71047daab26a783404abdbd339399b0db19490b · 2026-06-01 12:43:09 -0700 · Steve Abrams
Files touched

A brand/asseeninhotels.html
A brand/bleachfriendly.html
A brand/build-themes.mjs
A brand/etciemurals.html
Diff

commit e71047daab26a783404abdbd339399b0db19490b
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 1 12:43:09 2026 -0700

    hybrid brand demo: 3 per-site boards themed from real style-guide tokens (gilt/bodoni, coastal/cormorant, plum/playfair), captured to Figma
---
 brand/asseeninhotels.html |  61 ++++++++++++++++++++++
 brand/bleachfriendly.html |  61 ++++++++++++++++++++++
 brand/build-themes.mjs    | 125 ++++++++++++++++++++++++++++++++++++++++++++++
 brand/etciemurals.html    |  61 ++++++++++++++++++++++
 4 files changed, 308 insertions(+)

diff --git a/brand/asseeninhotels.html b/brand/asseeninhotels.html
new file mode 100644
index 0000000..c7df84e
--- /dev/null
+++ b/brand/asseeninhotels.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
+<title>As Seen In Hotels — brand board</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
+<style>
+:root{--ink:#f2ecd8;--bg:#0d0b06;--paper:#0d0b06;--accent:#b08923;--accent-deep:#7f6319;--rule:#d8caa0;
+--serif:'Bodoni Moda',Didot,'Times New Roman',serif;--sans:'Inter',system-ui,sans-serif;--muted:rgba(255,255,255,.45)}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
+.board{width:1456px;margin:0 auto;background:var(--bg)}
+.hero{padding:92px 110px 78px;border-bottom:1px solid var(--rule);position:relative}
+.mono{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.2em;color:var(--accent);margin-bottom:48px;text-transform:uppercase}
+.wordmark{font-family:var(--serif);font-weight:500;font-size:88px;line-height:1.0;letter-spacing:.03em;text-transform:uppercase}
+.wordmark .thin{font-weight:400;color:var(--accent)}
+.tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--muted);margin-top:24px}
+.hairline{width:120px;height:1px;background:var(--accent);margin-top:36px}
+.badge{position:absolute;top:92px;right:110px;font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
+.row{display:grid;grid-template-columns:1fr 1fr}
+.panel{padding:58px 110px}.panel+.panel{border-left:1px solid var(--rule)}
+.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:30px;font-weight:600}
+.tr{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule)}.tr:last-child{border-bottom:0}
+.tt{font-size:10px;letter-spacing:.1em;color:var(--muted);width:90px;flex-shrink:0;text-transform:uppercase}
+.d{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1}
+.h1{font-family:var(--serif);font-weight:500;font-size:32px}
+.h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
+.bd{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);opacity:.82}
+.cap{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.s{border-radius:8px;overflow:hidden;border:1px solid var(--rule)}.s .c{height:88px}.s .m{padding:10px 12px}
+.s .n{font-size:12px;font-weight:600}.s .x{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:2px}
+.strip{display:flex;border-top:1px solid var(--rule)}
+.tile{flex:1;height:132px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
+.tile+.tile{border-left:1px solid var(--rule)}
+.ft{padding:26px 110px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule)}
+.ft .l{font-family:var(--serif);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
+.ft .r{font-size:11px;color:var(--muted)}
+</style></head><body><div class="board">
+<section class="hero"><div class="badge">DW fleet · asseeninhotels.com</div>
+<div class="mono">DW</div>
+<h1 class="wordmark">As Seen In<br><span class="thin">Hotels</span></h1>
+<p class="tagline">Wallcoverings seen in the world's finest hotels.</p><div class="hairline"></div></section>
+<div class="row">
+<div class="panel"><div class="eyebrow">Type Scale · Bodoni Moda</div>
+<div class="tr"><span class="tt">Display</span><span class="d">Aa</span><span class="cap">Bodoni Moda</span></div>
+<div class="tr"><span class="tt">H1 · 32</span><span class="h1">Hand-crafted, to order</span></div>
+<div class="tr"><span class="tt">H2 · 22</span><span class="h2">The Collection</span></div>
+<div class="tr"><span class="tt">Body · 16</span><span class="bd">Free memo samples, expert trade service, hand-holding on every order.</span></div>
+<div class="tr"><span class="tt">Caption</span><span class="cap">Free memo samples · Trade pricing</span></div></div>
+<div class="panel"><div class="eyebrow">Palette · gilt</div>
+<div class="sw">
+<div class="s"><div class="c" style="background:#f2ecd8"></div><div class="m"><div class="n">Ink</div><div class="x">#F2ECD8</div></div></div>
+<div class="s"><div class="c" style="background:#b08923"></div><div class="m"><div class="n">Accent</div><div class="x">#B08923</div></div></div>
+<div class="s"><div class="c" style="background:#7f6319"></div><div class="m"><div class="n">Accent deep</div><div class="x">#7F6319</div></div></div>
+<div class="s"><div class="c" style="background:#0d0b06"></div><div class="m"><div class="n">Ground</div><div class="x">#0D0B06</div></div></div>
+<div class="s"><div class="c" style="background:#f7f3e8"></div><div class="m"><div class="n">Light</div><div class="x">#F7F3E8</div></div></div>
+<div class="s"><div class="c" style="background:#f6c031"></div><div class="m"><div class="n">Accent tint</div><div class="x">#F6C031</div></div></div>
+</div></div></div>
+<div class="strip"><div class="tile" style="background:#f2ecd8;color:#0d0b06">hospitality</div><div class="tile" style="background:#b08923;color:#0d0b06">hotel</div><div class="tile" style="background:#7f6319;color:#0d0b06">contract</div><div class="tile" style="background:#584512;color:#0d0b06">commercial</div></div>
+<div class="ft"><div class="l">As Seen In Hotels</div><div class="r">DW hybrid brand · shared skeleton · per-site theme from style guide · gilt/bodoni</div></div>
+</div></body></html>
\ No newline at end of file
diff --git a/brand/bleachfriendly.html b/brand/bleachfriendly.html
new file mode 100644
index 0000000..747f01a
--- /dev/null
+++ b/brand/bleachfriendly.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
+<title>Bleach Friendly — brand board</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
+<style>
+:root{--ink:#e6eef0;--bg:#0a1113;--paper:#0a1113;--accent:#2a7d8a;--accent-deep:#1e5a63;--rule:#bdcdd0;
+--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--muted:rgba(255,255,255,.45)}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
+.board{width:1456px;margin:0 auto;background:var(--bg)}
+.hero{padding:92px 110px 78px;border-bottom:1px solid var(--rule);position:relative}
+.mono{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.2em;color:var(--accent);margin-bottom:48px;text-transform:uppercase}
+.wordmark{font-family:var(--serif);font-weight:500;font-size:88px;line-height:1.0;letter-spacing:.03em;text-transform:uppercase}
+.wordmark .thin{font-weight:400;color:var(--accent)}
+.tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--muted);margin-top:24px}
+.hairline{width:120px;height:1px;background:var(--accent);margin-top:36px}
+.badge{position:absolute;top:92px;right:110px;font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
+.row{display:grid;grid-template-columns:1fr 1fr}
+.panel{padding:58px 110px}.panel+.panel{border-left:1px solid var(--rule)}
+.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:30px;font-weight:600}
+.tr{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule)}.tr:last-child{border-bottom:0}
+.tt{font-size:10px;letter-spacing:.1em;color:var(--muted);width:90px;flex-shrink:0;text-transform:uppercase}
+.d{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1}
+.h1{font-family:var(--serif);font-weight:500;font-size:32px}
+.h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
+.bd{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);opacity:.82}
+.cap{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.s{border-radius:8px;overflow:hidden;border:1px solid var(--rule)}.s .c{height:88px}.s .m{padding:10px 12px}
+.s .n{font-size:12px;font-weight:600}.s .x{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:2px}
+.strip{display:flex;border-top:1px solid var(--rule)}
+.tile{flex:1;height:132px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
+.tile+.tile{border-left:1px solid var(--rule)}
+.ft{padding:26px 110px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule)}
+.ft .l{font-family:var(--serif);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
+.ft .r{font-size:11px;color:var(--muted)}
+</style></head><body><div class="board">
+<section class="hero"><div class="badge">DW fleet · bleachfriendly.com</div>
+<div class="mono">DW</div>
+<h1 class="wordmark">Bleach<br><span class="thin">Friendly</span></h1>
+<p class="tagline">Bleach-cleanable performance wallcoverings.</p><div class="hairline"></div></section>
+<div class="row">
+<div class="panel"><div class="eyebrow">Type Scale · Cormorant Garamond</div>
+<div class="tr"><span class="tt">Display</span><span class="d">Aa</span><span class="cap">Cormorant Garamond</span></div>
+<div class="tr"><span class="tt">H1 · 32</span><span class="h1">Hand-crafted, to order</span></div>
+<div class="tr"><span class="tt">H2 · 22</span><span class="h2">The Collection</span></div>
+<div class="tr"><span class="tt">Body · 16</span><span class="bd">Free memo samples, expert trade service, hand-holding on every order.</span></div>
+<div class="tr"><span class="tt">Caption</span><span class="cap">Free memo samples · Trade pricing</span></div></div>
+<div class="panel"><div class="eyebrow">Palette · coastal</div>
+<div class="sw">
+<div class="s"><div class="c" style="background:#e6eef0"></div><div class="m"><div class="n">Ink</div><div class="x">#E6EEF0</div></div></div>
+<div class="s"><div class="c" style="background:#2a7d8a"></div><div class="m"><div class="n">Accent</div><div class="x">#2A7D8A</div></div></div>
+<div class="s"><div class="c" style="background:#1e5a63"></div><div class="m"><div class="n">Accent deep</div><div class="x">#1E5A63</div></div></div>
+<div class="s"><div class="c" style="background:#0a1113"></div><div class="m"><div class="n">Ground</div><div class="x">#0A1113</div></div></div>
+<div class="s"><div class="c" style="background:#f0f4f5"></div><div class="m"><div class="n">Light</div><div class="x">#F0F4F5</div></div></div>
+<div class="s"><div class="c" style="background:#3bafc1"></div><div class="m"><div class="n">Accent tint</div><div class="x">#3BAFC1</div></div></div>
+</div></div></div>
+<div class="strip"><div class="tile" style="background:#e6eef0;color:#0a1113">vinyl</div><div class="tile" style="background:#2a7d8a;color:#0a1113">upholstery</div><div class="tile" style="background:#1e5a63;color:#0a1113">contract</div><div class="tile" style="background:#153f45;color:#0a1113">commercial</div><div class="tile" style="background:#f0f4f5;color:#e6eef0">performance</div></div>
+<div class="ft"><div class="l">Bleach Friendly</div><div class="r">DW hybrid brand · shared skeleton · per-site theme from style guide · coastal/cormorant</div></div>
+</div></body></html>
\ No newline at end of file
diff --git a/brand/build-themes.mjs b/brand/build-themes.mjs
new file mode 100644
index 0000000..9b556e4
--- /dev/null
+++ b/brand/build-themes.mjs
@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+// Hybrid-brand demonstrator (DTD verdict C, 2026-06-01).
+// Same structural skeleton as the DW master brand board, themed PER SITE from the
+// REAL style-guide tokens in dw-domain-fleet/sites/*.json (accent/bg/ink/palette/font).
+// Proves: shared DNA, per-site skin. Emits one themed HTML board per chosen site.
+
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+const SITES_DIR = path.join(os.homedir(), 'Projects', 'dw-domain-fleet', 'sites');
+const OUT = path.dirname(new URL(import.meta.url).pathname);
+
+// 3 deliberately distinct style guides (palette + font spread).
+const CHOSEN = ['asseeninhotels', 'bleachfriendly', 'etciemurals'];
+
+const FONT_FAMILY = {
+  cormorant: { name: 'Cormorant Garamond', css: "'Cormorant Garamond',Georgia,serif", g: 'Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400' },
+  bodoni:    { name: 'Bodoni Moda',        css: "'Bodoni Moda',Didot,'Times New Roman',serif", g: 'Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400' },
+  playfair:  { name: 'Playfair Display',   css: "'Playfair Display',Georgia,serif", g: 'Playfair+Display:ital,wght@0,400;0,500;0,600;1,400' },
+  georgia:   { name: 'Georgia',            css: "Georgia,'Times New Roman',serif", g: null },
+};
+
+// darken a hex by mixing toward black
+function darken(hex, amt = 0.32) {
+  const n = parseInt(hex.replace('#', ''), 16);
+  const r = Math.round(((n >> 16) & 255) * (1 - amt));
+  const g = Math.round(((n >> 8) & 255) * (1 - amt));
+  const b = Math.round((n & 255) * (1 - amt));
+  return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');
+}
+const esc = s => String(s || '').replace(/&/g, '&amp;').replace(/</g, '&lt;');
+
+function board(site) {
+  const t = site.theme || {};
+  const font = FONT_FAMILY[t.font] || FONT_FAMILY.cormorant;
+  const ink = t.ink || '#f0ede6', bg = t.bg || '#0e0e0c', accent = t.accent || '#a8884a';
+  const paper = darken(bg, -0.06) === bg ? bg : bg; // keep bg
+  const accentDeep = darken(accent, 0.28);
+  const rule = t.rule || 'rgba(255,255,255,.12)';
+  const name = (site.siteName || site.slug);
+  const words = name.split(' ');
+  const wTop = words.length > 1 ? words.slice(0, -1).join(' ') : name;
+  const wBot = words.length > 1 ? words[words.length - 1] : '';
+  const tagline = site.tagline || 'Designer wallcoverings for discerning walls.';
+  const pos = (site.niche && site.niche.pos) || [];
+  const tiles = (pos.length ? pos : ['Silk', 'Grasscloth', 'Cork', 'Linen']).slice(0, 5);
+  const gfont = font.g ? `<link href="https://fonts.googleapis.com/css2?family=${font.g}&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">` : `<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">`;
+
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
+<title>${esc(name)} — brand board</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+${gfont}
+<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
+<style>
+:root{--ink:${ink};--bg:${bg};--paper:${paper};--accent:${accent};--accent-deep:${accentDeep};--rule:${rule};
+--serif:${font.css};--sans:'Inter',system-ui,sans-serif;--muted:rgba(255,255,255,.45)}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
+.board{width:1456px;margin:0 auto;background:var(--bg)}
+.hero{padding:92px 110px 78px;border-bottom:1px solid var(--rule);position:relative}
+.mono{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.2em;color:var(--accent);margin-bottom:48px;text-transform:uppercase}
+.wordmark{font-family:var(--serif);font-weight:500;font-size:88px;line-height:1.0;letter-spacing:.03em;text-transform:uppercase}
+.wordmark .thin{font-weight:400;color:var(--accent)}
+.tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--muted);margin-top:24px}
+.hairline{width:120px;height:1px;background:var(--accent);margin-top:36px}
+.badge{position:absolute;top:92px;right:110px;font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
+.row{display:grid;grid-template-columns:1fr 1fr}
+.panel{padding:58px 110px}.panel+.panel{border-left:1px solid var(--rule)}
+.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:30px;font-weight:600}
+.tr{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule)}.tr:last-child{border-bottom:0}
+.tt{font-size:10px;letter-spacing:.1em;color:var(--muted);width:90px;flex-shrink:0;text-transform:uppercase}
+.d{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1}
+.h1{font-family:var(--serif);font-weight:500;font-size:32px}
+.h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
+.bd{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);opacity:.82}
+.cap{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.s{border-radius:8px;overflow:hidden;border:1px solid var(--rule)}.s .c{height:88px}.s .m{padding:10px 12px}
+.s .n{font-size:12px;font-weight:600}.s .x{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:2px}
+.strip{display:flex;border-top:1px solid var(--rule)}
+.tile{flex:1;height:132px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
+.tile+.tile{border-left:1px solid var(--rule)}
+.ft{padding:26px 110px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule)}
+.ft .l{font-family:var(--serif);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
+.ft .r{font-size:11px;color:var(--muted)}
+</style></head><body><div class="board">
+<section class="hero"><div class="badge">DW fleet · ${esc(site.domain || site.slug)}</div>
+<div class="mono">DW</div>
+<h1 class="wordmark">${esc(wTop)}${wBot ? `<br><span class="thin">${esc(wBot)}</span>` : ''}</h1>
+<p class="tagline">${esc(tagline)}</p><div class="hairline"></div></section>
+<div class="row">
+<div class="panel"><div class="eyebrow">Type Scale · ${esc(font.name)}</div>
+<div class="tr"><span class="tt">Display</span><span class="d">Aa</span><span class="cap">${esc(font.name)}</span></div>
+<div class="tr"><span class="tt">H1 · 32</span><span class="h1">Hand-crafted, to order</span></div>
+<div class="tr"><span class="tt">H2 · 22</span><span class="h2">The Collection</span></div>
+<div class="tr"><span class="tt">Body · 16</span><span class="bd">Free memo samples, expert trade service, hand-holding on every order.</span></div>
+<div class="tr"><span class="tt">Caption</span><span class="cap">Free memo samples · Trade pricing</span></div></div>
+<div class="panel"><div class="eyebrow">Palette · ${esc(t.palette || '')}</div>
+<div class="sw">
+<div class="s"><div class="c" style="background:${ink}"></div><div class="m"><div class="n">Ink</div><div class="x">${ink.toUpperCase()}</div></div></div>
+<div class="s"><div class="c" style="background:${accent}"></div><div class="m"><div class="n">Accent</div><div class="x">${accent.toUpperCase()}</div></div></div>
+<div class="s"><div class="c" style="background:${accentDeep}"></div><div class="m"><div class="n">Accent deep</div><div class="x">${accentDeep.toUpperCase()}</div></div></div>
+<div class="s"><div class="c" style="background:${bg}"></div><div class="m"><div class="n">Ground</div><div class="x">${bg.toUpperCase()}</div></div></div>
+<div class="s"><div class="c" style="background:${t.bgLight || '#f3f1ea'}"></div><div class="m"><div class="n">Light</div><div class="x">${(t.bgLight || '#F3F1EA').toUpperCase()}</div></div></div>
+<div class="s"><div class="c" style="background:${darken(accent, -0.4)}"></div><div class="m"><div class="n">Accent tint</div><div class="x">${darken(accent, -0.4).toUpperCase()}</div></div></div>
+</div></div></div>
+<div class="strip">${tiles.map((x, i) => {
+    const cols = [ink, accent, accentDeep, darken(accent, 0.5), t.bgLight || '#f3f1ea'];
+    const c = cols[i % cols.length];
+    const fg = i === 4 ? ink : bg;
+    return `<div class="tile" style="background:${c};color:${fg}">${esc(x)}</div>`;
+  }).join('')}</div>
+<div class="ft"><div class="l">${esc(name)}</div><div class="r">DW hybrid brand · shared skeleton · per-site theme from style guide · ${esc(t.palette || '')}/${esc(t.font || '')}</div></div>
+</div></body></html>`;
+}
+
+for (const slug of CHOSEN) {
+  const file = path.join(SITES_DIR, slug + '.json');
+  if (!fs.existsSync(file)) { console.error('skip (no manifest):', slug); continue; }
+  const site = JSON.parse(fs.readFileSync(file, 'utf8'));
+  const html = board(site);
+  fs.writeFileSync(path.join(OUT, slug + '.html'), html);
+  console.log(`wrote ${slug}.html  (accent ${site.theme?.accent}, font ${site.theme?.font})`);
+}
diff --git a/brand/etciemurals.html b/brand/etciemurals.html
new file mode 100644
index 0000000..f9604d9
--- /dev/null
+++ b/brand/etciemurals.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
+<title>Et Cie Murals — brand board</title>
+<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
+<style>
+:root{--ink:#ece4ee;--bg:#0e0a10;--paper:#0e0a10;--accent:#6a3a7a;--accent-deep:#4c2a58;--rule:#cdc1d0;
+--serif:'Playfair Display',Georgia,serif;--sans:'Inter',system-ui,sans-serif;--muted:rgba(255,255,255,.45)}
+*{box-sizing:border-box;margin:0;padding:0}
+body{background:var(--bg);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
+.board{width:1456px;margin:0 auto;background:var(--bg)}
+.hero{padding:92px 110px 78px;border-bottom:1px solid var(--rule);position:relative}
+.mono{font-family:var(--serif);font-weight:500;font-size:28px;letter-spacing:.2em;color:var(--accent);margin-bottom:48px;text-transform:uppercase}
+.wordmark{font-family:var(--serif);font-weight:500;font-size:88px;line-height:1.0;letter-spacing:.03em;text-transform:uppercase}
+.wordmark .thin{font-weight:400;color:var(--accent)}
+.tagline{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--muted);margin-top:24px}
+.hairline{width:120px;height:1px;background:var(--accent);margin-top:36px}
+.badge{position:absolute;top:92px;right:110px;font-size:11px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}
+.row{display:grid;grid-template-columns:1fr 1fr}
+.panel{padding:58px 110px}.panel+.panel{border-left:1px solid var(--rule)}
+.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:30px;font-weight:600}
+.tr{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule)}.tr:last-child{border-bottom:0}
+.tt{font-size:10px;letter-spacing:.1em;color:var(--muted);width:90px;flex-shrink:0;text-transform:uppercase}
+.d{font-family:var(--serif);font-weight:500;font-size:48px;line-height:1}
+.h1{font-family:var(--serif);font-weight:500;font-size:32px}
+.h2{font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:.03em;text-transform:uppercase}
+.bd{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink);opacity:.82}
+.cap{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+.sw{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
+.s{border-radius:8px;overflow:hidden;border:1px solid var(--rule)}.s .c{height:88px}.s .m{padding:10px 12px}
+.s .n{font-size:12px;font-weight:600}.s .x{font-size:10px;color:var(--muted);letter-spacing:.06em;margin-top:2px}
+.strip{display:flex;border-top:1px solid var(--rule)}
+.tile{flex:1;height:132px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.14em;text-transform:uppercase}
+.tile+.tile{border-left:1px solid var(--rule)}
+.ft{padding:26px 110px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--rule)}
+.ft .l{font-family:var(--serif);font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
+.ft .r{font-size:11px;color:var(--muted)}
+</style></head><body><div class="board">
+<section class="hero"><div class="badge">DW fleet · etciemurals.com</div>
+<div class="mono">DW</div>
+<h1 class="wordmark">Et Cie<br><span class="thin">Murals</span></h1>
+<p class="tagline">Statement murals for interiors.</p><div class="hairline"></div></section>
+<div class="row">
+<div class="panel"><div class="eyebrow">Type Scale · Playfair Display</div>
+<div class="tr"><span class="tt">Display</span><span class="d">Aa</span><span class="cap">Playfair Display</span></div>
+<div class="tr"><span class="tt">H1 · 32</span><span class="h1">Hand-crafted, to order</span></div>
+<div class="tr"><span class="tt">H2 · 22</span><span class="h2">The Collection</span></div>
+<div class="tr"><span class="tt">Body · 16</span><span class="bd">Free memo samples, expert trade service, hand-holding on every order.</span></div>
+<div class="tr"><span class="tt">Caption</span><span class="cap">Free memo samples · Trade pricing</span></div></div>
+<div class="panel"><div class="eyebrow">Palette · plum</div>
+<div class="sw">
+<div class="s"><div class="c" style="background:#ece4ee"></div><div class="m"><div class="n">Ink</div><div class="x">#ECE4EE</div></div></div>
+<div class="s"><div class="c" style="background:#6a3a7a"></div><div class="m"><div class="n">Accent</div><div class="x">#6A3A7A</div></div></div>
+<div class="s"><div class="c" style="background:#4c2a58"></div><div class="m"><div class="n">Accent deep</div><div class="x">#4C2A58</div></div></div>
+<div class="s"><div class="c" style="background:#0e0a10"></div><div class="m"><div class="n">Ground</div><div class="x">#0E0A10</div></div></div>
+<div class="s"><div class="c" style="background:#f3eff3"></div><div class="m"><div class="n">Light</div><div class="x">#F3EFF3</div></div></div>
+<div class="s"><div class="c" style="background:#9451ab"></div><div class="m"><div class="n">Accent tint</div><div class="x">#9451AB</div></div></div>
+</div></div></div>
+<div class="strip"><div class="tile" style="background:#ece4ee;color:#0e0a10">mural</div><div class="tile" style="background:#6a3a7a;color:#0e0a10">scenic</div><div class="tile" style="background:#4c2a58;color:#0e0a10">panoramic</div></div>
+<div class="ft"><div class="l">Et Cie Murals</div><div class="r">DW hybrid brand · shared skeleton · per-site theme from style guide · plum/playfair</div></div>
+</div></body></html>
\ No newline at end of file
← efc57ba DW brand-starter HTML, captured into Figma (wordmark + type · back to Dw Fleet Registry · live fleet viewer (:9774) — 119 cards, live og:image thumbs bf16606 →