`brand/index.html`

107 lines
<!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>