← back to Wallco Ai
data/mockups/design-page/01-editorial-magazine.html
110 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Marine Heirloom № 41542 — wallco</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;1,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--bg:#f5f2ec; --ink:#1a1d1c; --rule:#1a1d1c14; --teal:#2b3838; --muted:#6c6862;
--serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* Header — magazine masthead */
.masthead{padding:34px 60px 0;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--serif);font-style:italic;font-size:32px;letter-spacing:-.01em}
.brand b{font-style:normal;font-weight:500;letter-spacing:.02em;text-transform:uppercase;font-size:11px;font-family:var(--sans);margin-left:18px;color:var(--muted)}
.issue{font-family:var(--sans);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
/* Cover spread */
.spread{display:grid;grid-template-columns:1.4fr 1fr;gap:0;padding:64px 60px 0;align-items:start;min-height:80vh}
.img-col{position:relative}
.img-col figure{margin:0;border:1px solid var(--rule)}
.img-col img{display:block;width:100%;height:auto}
.img-col figcaption{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--muted);padding:14px 4px 0;letter-spacing:.01em}
.copy-col{padding:0 0 0 56px}
.eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin:0 0 28px}
.title{font-family:var(--serif);font-weight:400;font-size:68px;line-height:1.02;letter-spacing:-.015em;margin:0 0 4px}
.title em{font-style:italic;color:var(--teal)}
.subtitle{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;color:var(--muted);margin:0 0 32px;line-height:1.4}
.lede{font-size:15px;line-height:1.7;color:var(--ink);margin:0 0 28px;max-width:38ch;font-weight:400}
.lede::first-letter{font-family:var(--serif);font-size:54px;float:left;line-height:.85;margin:6px 8px 0 0;color:var(--teal)}
/* Palette as printer registration marks */
.palette{display:flex;gap:0;margin:32px 0 32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:18px 0}
.swatch{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-right:18px}
.swatch .chip{width:22px;height:22px;border-radius:50%;border:1px solid #00000018}
.swatch .hex{font-size:10px;letter-spacing:.16em;font-family:var(--sans);color:var(--muted)}
/* Spec table — magazine credits style */
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;font-size:13px;margin:0 0 36px}
.specs dt{color:var(--muted);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding-top:4px}
.specs dd{margin:0;font-family:var(--serif);font-size:18px;font-weight:400}
.cta-row{display:flex;gap:14px;align-items:center;margin-top:36px}
.cta{background:var(--ink);color:var(--bg);font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:16px 28px;text-decoration:none;border:0;cursor:pointer}
.cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
/* Bottom strip — credits */
.credits{margin-top:72px;padding:28px 60px 60px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:880px){
.spread{grid-template-columns:1fr;padding:32px 22px 0}
.copy-col{padding:42px 0 0}
.title{font-size:46px}
.masthead,.credits{padding-left:22px;padding-right:22px}
}
</style></head>
<body>
<header class="masthead">
<div class="brand">wallco<b>The Folio</b></div>
<div class="issue">Volume 41 · Issue 542 · Spring 2026</div>
</header>
<section class="spread">
<div class="img-col">
<figure>
<img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="Marine Heirloom No.41542 — damask pattern in dark teal">
<figcaption>Marine Heirloom No.41542 — photographed in raking light, drape weight III.</figcaption>
</figure>
</div>
<div class="copy-col">
<p class="eyebrow">The Damask Issue · Wallcovering № 41542</p>
<h1 class="title">Marine <em>Heirloom</em></h1>
<p class="subtitle">A deep-water damask, hand-blocked in slate-teal on bone.</p>
<p class="lede">There is a kind of stillness only a damask achieves — the way its rosettes resolve into a rhythm so even the eye stops looking for the seam. This one runs cool. Saturated where it sits low, soft where the light catches the leaf.</p>
<div class="palette" aria-label="Pattern palette">
<div class="swatch"><span class="chip" style="background:#2b3838"></span><span class="hex">#2B3838</span></div>
<div class="swatch"><span class="chip" style="background:#cfc6b3"></span><span class="hex">#CFC6B3</span></div>
<div class="swatch"><span class="chip" style="background:#1a2424"></span><span class="hex">#1A2424</span></div>
<div class="swatch"><span class="chip" style="background:#9aa19e"></span><span class="hex">#9AA19E</span></div>
</div>
<dl class="specs">
<dt>Width</dt> <dd>24″ residential · 36″ commercial</dd>
<dt>Repeat</dt> <dd>27″ vertical · half-drop</dd>
<dt>Material</dt> <dd>Paper · Vinyl · Peel & Stick</dd>
<dt>Sold</dt> <dd>per roll, 27 lin. ft.</dd>
<dt>Origin</dt> <dd>wallco original — curated</dd>
</dl>
<div class="cta-row">
<button class="cta">Add to Memo</button>
<button class="cta cta--ghost">See in a Room</button>
</div>
</div>
</section>
<footer class="credits">
<span>Curated Original · DIG_AI_041542</span>
<span>Photography · Wallcovering Studio</span>
<span>wallco.ai</span>
</footer>
</body></html>