← back to Wallco Ai
data/mockups/design-page/03-brutalist-catalog.html
132 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>41542 // MARINE HEIRLOOM // WALLCO</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#fff; --ink:#000; --rule:#000; --accent:#ff3a00; --cyan:#00bcd6; --grid:#f0f0f0;
--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
--grotesk:'Space Grotesk',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--mono);font-size:13px;line-height:1.4}
/* Top bar — terminal-style */
.topbar{border-bottom:2px solid var(--ink);display:grid;grid-template-columns:auto 1fr auto auto auto;font-family:var(--mono);font-size:12px;font-weight:500}
.topbar > div{padding:14px 18px;border-right:1px solid var(--ink)}
.topbar > div:last-child{border-right:0}
.topbar .id{background:var(--ink);color:var(--bg);font-weight:700}
/* Body — strict grid */
main{display:grid;grid-template-columns:repeat(12,1fr);gap:0;border-bottom:2px solid var(--ink)}
.img-block{grid-column:1/8;border-right:2px solid var(--ink);background:var(--grid);position:relative;min-height:520px;display:flex;align-items:stretch}
.img-block img{width:100%;height:auto;display:block;align-self:stretch;object-fit:cover}
.img-overlay{position:absolute;top:0;left:0;background:var(--ink);color:var(--bg);padding:8px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.05em}
.img-meta{position:absolute;bottom:0;right:0;background:var(--ink);color:var(--bg);padding:8px 14px;font-family:var(--mono);font-size:11px;display:flex;gap:18px}
.data-block{grid-column:8/13;display:grid;grid-template-rows:auto auto auto 1fr auto}
.data-block > section{padding:24px 26px;border-bottom:2px solid var(--ink)}
.data-block > section:last-child{border-bottom:0}
.h-num{font-family:var(--grotesk);font-weight:700;font-size:96px;line-height:.9;letter-spacing:-.04em}
.h-num .accent{color:var(--accent)}
.h-name{font-family:var(--grotesk);font-size:30px;font-weight:500;letter-spacing:-.02em;margin-top:8px}
.h-sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink);margin-top:18px;text-transform:uppercase}
.spec-table{width:100%;border-collapse:collapse}
.spec-table th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;width:38%;color:#666;font-weight:500;vertical-align:top}
.spec-table td{font-family:var(--grotesk);font-weight:500;font-size:16px;padding:6px 0;border-bottom:1px dotted var(--ink)}
.palette-block{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--ink)}
.palette-block > div{padding:18px 14px;border-right:1px solid var(--ink);display:flex;flex-direction:column;gap:8px;background:#fff}
.palette-block > div:last-child{border-right:0}
.sw-large{height:48px;border:1px solid var(--ink)}
.sw-hex{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.04em}
.sw-label{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#666}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:0}
.actions button{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;padding:22px 18px;border:0;cursor:pointer;background:transparent;color:var(--ink);border-right:2px solid var(--ink)}
.actions button:last-child{border-right:0;background:var(--ink);color:var(--bg)}
.actions button:hover{background:var(--accent);color:var(--bg)}
/* Bottom strip */
footer{display:grid;grid-template-columns:repeat(4,1fr);font-family:var(--mono);font-size:10px;letter-spacing:.18em}
footer > div{padding:14px 18px;border-right:1px solid var(--ink);text-transform:uppercase}
footer > div:last-child{border-right:0}
footer .tag{color:var(--accent);font-weight:700}
</style></head>
<body>
<div class="topbar">
<div class="id">41542</div>
<div>MARINE_HEIRLOOM.PNG // DAMASK // WALLCO.AI</div>
<div>STATUS: PUBLISHED</div>
<div>BUILD: 2026-05-25</div>
<div>v.41 // r.542</div>
</div>
<main>
<div class="img-block">
<img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="41542">
<div class="img-overlay">/FILE/var_41538_hue-60_1779692961993.png</div>
<div class="img-meta">
<span>1024×1024</span>
<span>RGB</span>
<span>DOMINANT #2B3838</span>
</div>
</div>
<div class="data-block">
<section>
<div class="h-num">41<span class="accent">542</span></div>
<div class="h-name">MARINE_HEIRLOOM</div>
<div class="h-sub">// damask · parent 41538 · hue-shift +60°</div>
</section>
<section>
<table class="spec-table">
<tr><th>WIDTH</th> <td>24″ residential · 36″ commercial</td></tr>
<tr><th>REPEAT</th> <td>27″ vert · half-drop</td></tr>
<tr><th>MATERIAL</th><td>PAPER · VINYL · PEEL+STICK</td></tr>
<tr><th>UNIT</th> <td>1 ROLL = 27 LIN.FT</td></tr>
<tr><th>SOURCE</th> <td>WALLCO.AI · CURATED</td></tr>
<tr><th>SKU</th> <td style="font-family:var(--mono);font-size:13px">DIG_AI_041542</td></tr>
</table>
</section>
<section style="padding:0">
<div class="palette-block">
<div><div class="sw-large" style="background:#2b3838"></div><div class="sw-hex">#2B3838</div><div class="sw-label">PRIMARY</div></div>
<div><div class="sw-large" style="background:#cfc6b3"></div><div class="sw-hex">#CFC6B3</div><div class="sw-label">GROUND</div></div>
<div><div class="sw-large" style="background:#1a2424"></div><div class="sw-hex">#1A2424</div><div class="sw-label">SHADOW</div></div>
<div><div class="sw-large" style="background:#9aa19e"></div><div class="sw-hex">#9AA19E</div><div class="sw-label">MID</div></div>
<div><div class="sw-large" style="background:#ff3a00"></div><div class="sw-hex">#FF3A00</div><div class="sw-label">ACCENT</div></div>
</div>
</section>
<section>
<div style="font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#666;margin-bottom:10px">// LINEAGE</div>
<div style="font-family:var(--grotesk);font-size:14px;line-height:1.5">
41538 → <span style="color:var(--accent)">41542</span> (hue +60°)<br>
Generated 2026-05-22 21:14 UTC · 1024×1024 · SDXL+Gemini
</div>
</section>
<section style="padding:0">
<div class="actions">
<button>SEE IN ROOM →</button>
<button>ADD TO MEMO →</button>
</div>
</section>
</div>
</main>
<footer>
<div><span class="tag">▸</span> DIG_AI_041542</div>
<div>NO COPYRIGHT</div>
<div>WALLCO.AI</div>
<div>RENDER OK · 2026-05-25</div>
</footer>
</body></html>