← back to Dw Fleet Registry
DW brand-starter HTML, captured into Figma (wordmark + type scale + palette + material strip)
efc57ba5ffe45559133f435f00efca49f74c457d · 2026-06-01 12:33:44 -0700 · Steve Abrams
Files touched
Diff
commit efc57ba5ffe45559133f435f00efca49f74c457d
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Jun 1 12:33:44 2026 -0700
DW brand-starter HTML, captured into Figma (wordmark + type scale + palette + material strip)
---
brand/index.html | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 106 insertions(+)
diff --git a/brand/index.html b/brand/index.html
new file mode 100644
index 0000000..ff859d7
--- /dev/null
+++ b/brand/index.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Designer Wallcoverings — Brand Starter</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">
+<style>
+ :root{
+ --ink:#1a1714; --bg:#f6f3ee; --paper:#fffefb; --accent:#9c7a4d; --accent-deep:#6f5634;
+ --sage:#5a6f3e; --rule:#d8d2c6; --muted:#8a8175;
+ --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
+ }
+ *{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);padding:0}
+ /* HERO WORDMARK */
+ .hero{background:var(--paper);padding:96px 110px 80px;border-bottom:1px solid var(--rule);position:relative}
+ .monogram{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:.18em;color:var(--accent);margin-bottom:54px}
+ .wordmark{font-family:var(--serif);font-weight:500;font-size:104px;line-height:.98;letter-spacing:.04em;text-transform:uppercase}
+ .wordmark .thin{font-weight:400;color:var(--accent-deep)}
+ .tagline{font-family:var(--serif);font-style:italic;font-weight:400;font-size:30px;color:var(--muted);margin-top:26px;letter-spacing:.01em}
+ .hairline{width:120px;height:1px;background:var(--accent);margin-top:40px}
+ .estd{position:absolute;top:96px;right:110px;font-size:11px;letter-spacing:.32em;color:var(--muted);text-transform:uppercase}
+ /* SECTIONS */
+ .row{display:grid;grid-template-columns:1fr 1fr;gap:0}
+ .panel{padding:64px 110px}
+ .panel + .panel{border-left:1px solid var(--rule)}
+ .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:34px;font-weight:600}
+ /* TYPE SCALE */
+ .type-row{display:flex;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule)}
+ .type-row:last-child{border-bottom:0}
+ .type-tag{font-size:10px;letter-spacing:.1em;color:var(--muted);width:96px;flex-shrink:0;text-transform:uppercase}
+ .t-display{font-family:var(--serif);font-weight:500;font-size:52px;line-height:1}
+ .t-h1{font-family:var(--serif);font-weight:500;font-size:34px}
+ .t-h2{font-family:var(--serif);font-weight:600;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
+ .t-body{font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.5;color:#3b352e}
+ .t-cap{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
+ /* PALETTE */
+ .swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
+ .sw{border-radius:8px;overflow:hidden;border:1px solid var(--rule);background:var(--paper)}
+ .sw .chip{height:96px}
+ .sw .meta{padding:12px 14px}
+ .sw .nm{font-size:13px;font-weight:600}
+ .sw .hex{font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:3px;font-variant-numeric:tabular-nums}
+ /* APPLICATION STRIP */
+ .strip{display:flex;gap:0;border-top:1px solid var(--rule)}
+ .tile{flex:1;height:150px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.16em;text-transform:uppercase}
+ .tile + .tile{border-left:1px solid rgba(255,255,255,.16)}
+ .footer{padding:30px 110px;display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-top:1px solid var(--rule)}
+ .footer .f-l{font-family:var(--serif);font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
+ .footer .f-r{font-size:11px;color:var(--muted);letter-spacing:.06em}
+</style>
+<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>
+</head>
+<body>
+<div class="board">
+ <!-- HERO -->
+ <section class="hero">
+ <div class="estd">Est. trade · 119 properties</div>
+ <div class="monogram">DW</div>
+ <h1 class="wordmark">Designer<br><span class="thin">Wallcoverings</span></h1>
+ <p class="tagline">The trade's source for extraordinary walls.</p>
+ <div class="hairline"></div>
+ </section>
+
+ <!-- TYPE SCALE + PALETTE -->
+ <div class="row">
+ <div class="panel">
+ <div class="eyebrow">Type Scale</div>
+ <div class="type-row"><span class="type-tag">Display 52</span><span class="t-display">Aa</span><span class="t-cap">Cormorant Garamond</span></div>
+ <div class="type-row"><span class="type-tag">H1 · 34</span><span class="t-h1">Hand-crafted, to order</span></div>
+ <div class="type-row"><span class="type-tag">H2 · 24</span><span class="t-h2">The Collection</span></div>
+ <div class="type-row"><span class="type-tag">Body · 17</span><span class="t-body">Free memo samples, expert trade service, and hand-holding on every order.</span></div>
+ <div class="type-row"><span class="type-tag">Caption</span><span class="t-cap">Free memo samples · Trade pricing</span></div>
+ </div>
+ <div class="panel">
+ <div class="eyebrow">Palette</div>
+ <div class="swatches">
+ <div class="sw"><div class="chip" style="background:#1a1714"></div><div class="meta"><div class="nm">Ink</div><div class="hex">#1A1714</div></div></div>
+ <div class="sw"><div class="chip" style="background:#9c7a4d"></div><div class="meta"><div class="nm">Brass</div><div class="hex">#9C7A4D</div></div></div>
+ <div class="sw"><div class="chip" style="background:#6f5634"></div><div class="meta"><div class="nm">Bronze</div><div class="hex">#6F5634</div></div></div>
+ <div class="sw"><div class="chip" style="background:#5a6f3e"></div><div class="meta"><div class="nm">Sage</div><div class="hex">#5A6F3E</div></div></div>
+ <div class="sw"><div class="chip" style="background:#f6f3ee;border-bottom:1px solid #d8d2c6"></div><div class="meta"><div class="nm">Linen</div><div class="hex">#F6F3EE</div></div></div>
+ <div class="sw"><div class="chip" style="background:#fffefb;border-bottom:1px solid #d8d2c6"></div><div class="meta"><div class="nm">Paper</div><div class="hex">#FFFEFB</div></div></div>
+ </div>
+ </div>
+ </div>
+
+ <!-- APPLICATION STRIP -->
+ <div class="strip">
+ <div class="tile" style="background:#1a1714;color:#f6f3ee">DW</div>
+ <div class="tile" style="background:#9c7a4d;color:#fffefb">Silk</div>
+ <div class="tile" style="background:#6f5634;color:#fffefb">Grasscloth</div>
+ <div class="tile" style="background:#5a6f3e;color:#fffefb">Cork</div>
+ <div class="tile" style="background:#f6f3ee;color:#1a1714">Linen</div>
+ </div>
+
+ <div class="footer">
+ <div class="f-l">Designer Wallcoverings</div>
+ <div class="f-r">Brand starter · serif Cormorant Garamond · sans Inter · generated via Figma</div>
+ </div>
+</div>
+</body>
+</html>
← 5dc9bf6 record DTD-C canonical owners for 6 near-dup clusters (canon
·
back to Dw Fleet Registry
·
hybrid brand demo: 3 per-site boards themed from real style- e71047d →