`brand/asseeninhotels.html`

62 lines
<!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:rgba(255,255,255,.12);
--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:#f7f3e8"></div><div class="m"><div class="n">Ground</div><div class="x">#F7F3E8</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:#0a1113">hospitality</div><div class="tile" style="background:#b08923;color:#0a1113">hotel</div><div class="tile" style="background:#7f6319;color:#f0f4f5">contract</div><div class="tile" style="background:#584512;color:#f0f4f5">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>