`brand/linenwallpaper.html`

62 lines
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>linenwallpaper — 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:#f0ede6;--bg:#2C1F0F;--paper:#2C1F0F;--accent:#9B7B4F;--accent-deep:#705939;--rule:rgba(255,255,255,.12);
--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 · linenwallpaper.com</div>
<div class="mono">DW</div>
<h1 class="wordmark">linenwallpaper</h1>
<p class="tagline">Pure linen, woven texture, quiet rooms.</p><div class="hairline"></div></section>
<div style="position:relative;border-bottom:1px solid var(--rule);background:#0a0a0a"><img src="heroes/linenwallpaper.jpg" alt="" style="display:block;width:100%;height:320px;object-fit:cover"><div style="position:absolute;left:110px;bottom:18px;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);padding:5px 12px;border-radius:3px;font-family:var(--sans)">Live hero · linenwallpaper.com</div></div>
<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 · </div>
<div class="sw">
<div class="s"><div class="c" style="background:#f0ede6"></div><div class="m"><div class="n">Ink</div><div class="x">#F0EDE6</div></div></div>
<div class="s"><div class="c" style="background:#9B7B4F"></div><div class="m"><div class="n">Accent</div><div class="x">#9B7B4F</div></div></div>
<div class="s"><div class="c" style="background:#705939"></div><div class="m"><div class="n">Accent deep</div><div class="x">#705939</div></div></div>
<div class="s"><div class="c" style="background:#2C1F0F"></div><div class="m"><div class="n">Ground</div><div class="x">#2C1F0F</div></div></div>
<div class="s"><div class="c" style="background:#f3f1ea"></div><div class="m"><div class="n">Light</div><div class="x">#F3F1EA</div></div></div>
<div class="s"><div class="c" style="background:#d9ac6f"></div><div class="m"><div class="n">Accent tint</div><div class="x">#D9AC6F</div></div></div>
</div></div></div>
<div class="strip"><div class="tile" style="background:#f0ede6;color:#0a1113">Silk</div><div class="tile" style="background:#9B7B4F;color:#0a1113">Grasscloth</div><div class="tile" style="background:#705939;color:#f0f4f5">Cork</div><div class="tile" style="background:#4e3e28;color:#f0f4f5">Linen</div></div>
<div class="ft"><div class="l">linenwallpaper</div><div class="r">DW hybrid brand · shared skeleton · per-site theme from style guide · /</div></div>
</div></body></html>