← back to Wallco Ai
data/mockups/design-page/index.html
146 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>/design/:id mockups · wallco.ai</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{background:#0f1115;color:#e8eaee;font-family:'Inter',sans-serif;line-height:1.5;padding:48px 32px;-webkit-font-smoothing:antialiased}
.hd{max-width:1200px;margin:0 auto 48px}
.hd h1{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:400;letter-spacing:-.01em;margin:0 0 12px}
.hd .sub{font-size:15px;color:#8b92a5;max-width:60ch}
.hd .meta{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#54e0c7;margin-top:18px;letter-spacing:.04em}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:28px;max-width:1200px;margin:0 auto}
.card{background:#161a22;border:1px solid #252b38;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-3px);border-color:#54e0c7}
.card .thumb{aspect-ratio:1.4/1;background:#0f1115;display:flex;align-items:center;justify-content:center;color:#54e0c7;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:32px;font-weight:400;padding:0 24px;text-align:center;border-bottom:1px solid #252b38;position:relative}
.card .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;transform:scale(.25);transform-origin:top left;width:400%;height:400%}
.card .body{padding:20px 22px}
.card .num{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#54e0c7;letter-spacing:.18em;margin-bottom:6px}
.card h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.card p{font-size:13.5px;color:#8b92a5;margin:0;line-height:1.5}
.ftr{max-width:1200px;margin:48px auto 0;padding-top:24px;border-top:1px solid #252b38;font-size:12px;color:#8b92a5;font-family:ui-monospace,Menlo,monospace}
</style></head>
<body>
<header class="hd">
<h1>/design/:id mockups</h1>
<p class="sub">Six visual directions for the wallco.ai design detail page. Each is a fully self-contained HTML — open, compare, mix-and-match. Modeled on real data from <code style="color:#54e0c7">Marine Heirloom No. 41542</code> (damask, slate-teal #2B3838).</p>
<p class="meta">~/Projects/wallco-ai/data/mockups/design-page/ · 6 variants · ready for review</p>
</header>
<div class="grid">
<a class="card" href="01-editorial-magazine.html">
<div class="thumb"><iframe src="01-editorial-magazine.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 01</p>
<h2>Editorial Magazine</h2>
<p>Print interiors-magazine spread — Cormorant + Inter, drop cap, hand-set caption. Image left, copy column right with a real lede paragraph, not a feature list.</p>
</div>
</a>
<a class="card" href="02-couture-house.html">
<div class="thumb"><iframe src="02-couture-house.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 02</p>
<h2>Couture House (Hermès)</h2>
<p>Orange-cream palette, Italiana display, French micro-copy. Crest masthead. Atelier card with "réserver un memo." Houseband stripe top.</p>
</div>
</a>
<a class="card" href="03-brutalist-catalog.html">
<div class="thumb"><iframe src="03-brutalist-catalog.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 03</p>
<h2>Brutalist Architecture Catalog</h2>
<p>JetBrains Mono + Space Grotesk. Hard 12-col grid, every cell ruled in black. Giant "41<span style='color:#ff3a00'>542</span>" hero number. Terminal-bar top chrome.</p>
</div>
</a>
<a class="card" href="04-gallery-wall-label.html">
<div class="thumb"><iframe src="04-gallery-wall-label.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 04</p>
<h2>Gallery Wall Label</h2>
<p>Museum hush. Image dominates, plaque sits beside in small italic Crimson Pro. Sparse meta list, minimal CTAs styled as thin outlined buttons. Crimson + Inter.</p>
</div>
</a>
<a class="card" href="05-tech-pattern-library.html">
<div class="thumb"><iframe src="05-tech-pattern-library.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 05</p>
<h2>Tech Pattern Library (Figma IDE)</h2>
<p>Dark IDE chrome. File-tree sidebar, canvas center, inspector right. Tabs, hex chips, motif tags, lineage tree, "Copy palette as CSS vars" button. ⌘K, ⌘C affordances.</p>
</div>
</a>
<a class="card" href="06-apple-product-page.html">
<div class="thumb"><iframe src="06-apple-product-page.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 06</p>
<h2>Apple Product Page</h2>
<p>Full-page scroll. Sticky top + sticky product-name nav. Huge centered hero ("Marine Heirloom."). Three highlight cards. Five color cards. Mid-page big "Try it free" CTA.</p>
</div>
</a>
<a class="card" href="07-japanese-minimal.html">
<div class="thumb"><iframe src="07-japanese-minimal.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 07</p>
<h2>Japanese Minimal (Muji / Aesop)</h2>
<p>Generous whitespace, single column, Noto Serif JP + Inter Light. Text-link CTAs only (no buttons). 海の継承 micro-copy. Almost zero chrome.</p>
</div>
</a>
<a class="card" href="08-auction-catalog.html">
<div class="thumb"><iframe src="08-auction-catalog.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 08</p>
<h2>Auction Catalog (Sotheby's)</h2>
<p>EB Garamond + navy/cream. "Lot 41542" framing, full provenance section, estimate card with condition report. Drop cap. Hard auctioneer chrome.</p>
</div>
</a>
<a class="card" href="09-moodboard.html">
<div class="thumb"><iframe src="09-moodboard.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 09</p>
<h2>Pinterest Moodboard</h2>
<p>3-column masonry. Image pin, quote pin (rose gradient), color story pin, tags pin, CTA pin. Fraunces + Inter. Save-to-board button top right.</p>
</div>
</a>
<a class="card" href="10-wes-anderson.html">
<div class="thumb"><iframe src="10-wes-anderson.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 10</p>
<h2>Wes Anderson Symmetrical</h2>
<p>Perfectly centered everything. Pastel pink + sepia + gilt. Playfair italic title with swash. Double-bordered frame, ornament rules, hotel-key-card CTA with hard shadow.</p>
</div>
</a>
<a class="card" href="11-restoration-hardware.html">
<div class="thumb"><iframe src="11-restoration-hardware.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 11</p>
<h2>Restoration Hardware Sourcebook</h2>
<p>Sepia full-bleed hero with filter. Cinzel ALLCAPS section heads with ❖ ornament. Lora Italic essay copy. Gilt-framed swatch wheels. Vol. XLI · Spring MMXXVI.</p>
</div>
</a>
<a class="card" href="12-concept-microsite.html">
<div class="thumb"><iframe src="12-concept-microsite.html" scrolling="no"></iframe></div>
<div class="body">
<p class="num">VARIANT 12</p>
<h2>Concept Microsite (Tesla / Porsche)</h2>
<p>Dark theme. Manrope. Cyan accent. Full-viewport hero with floating spec callouts on the image. Horizontal spec grid. Big "see it in your room" CTA. 🟢 indicator pips.</p>
</div>
</a>
</div>
<div class="ftr">
open any variant directly · file://~/Projects/wallco-ai/data/mockups/design-page/0{N}-name.html
</div>
</body></html>