`data/mockups/design-page/07-japanese-minimal.html`

105 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>41542 — wallco</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
  :root{ --bg:#fafaf8; --ink:#222426; --rule:#22242611; --muted:#7d7e80; --accent:#222426;
    --serif:'Noto Serif JP',serif; --sans:'Inter',-apple-system,sans-serif; }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:.005em}

  header{padding:36px 60px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:400}
  header .brand{color:var(--ink);font-weight:500}

  /* Generous breathing room — single column, centered */
  main{max-width:920px;margin:0 auto;padding:120px 60px 0}

  .meta-eyebrow{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 0 56px}

  h1{font-family:var(--serif);font-weight:300;font-size:42px;line-height:1.35;letter-spacing:.04em;text-align:center;margin:0 0 12px;color:var(--ink)}
  .subtitle{font-family:var(--serif);font-weight:300;font-size:16px;color:var(--muted);text-align:center;margin:0 0 80px;letter-spacing:.04em;line-height:1.6}

  .image-wrap{margin:0 0 96px}
  .image-wrap img{display:block;width:100%;height:auto}

  /* Body copy — single column, serif, very generous line height */
  .copy{max-width:480px;margin:0 auto 64px;font-family:var(--serif);font-weight:300;font-size:15px;line-height:2;color:var(--ink);text-align:center;letter-spacing:.03em}

  /* Specs — left-aligned within centered column, lots of air */
  .specs{max-width:480px;margin:80px auto;display:grid;grid-template-columns:auto 1fr;gap:30px 64px;border-top:1px solid var(--rule);padding-top:64px}
  .specs dt{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:400;align-self:start;padding-top:6px}
  .specs dd{font-family:var(--serif);font-weight:300;font-size:18px;margin:0;letter-spacing:.02em;line-height:1.5}

  /* Color story — small, restrained */
  .colors{max-width:480px;margin:0 auto 96px;border-top:1px solid var(--rule);padding-top:48px;display:flex;flex-direction:column;align-items:center;gap:20px}
  .colors-label{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
  .colors-row{display:flex;gap:16px}
  .sw{width:32px;height:32px;border-radius:50%;border:1px solid #22242614}

  /* CTA — text-only links, no buttons */
  .actions{max-width:480px;margin:0 auto 120px;text-align:center;border-top:1px solid var(--rule);padding-top:64px}
  .actions a{display:block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:10px 0;font-weight:400}
  .actions a:hover{color:var(--muted)}
  .actions a + a{border-top:1px solid var(--rule)}

  footer{padding:48px 60px;text-align:center;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--rule)}

  @media (max-width:880px){
    main{padding:64px 22px 0}
    h1{font-size:30px}
    .specs{grid-template-columns:1fr;gap:18px}
    header{padding:24px 22px}
  }
</style></head>
<body>
<header>
  <span class="brand">wallco</span>
  <span>Sherman Oaks · Los Angeles · 22.5.26</span>
</header>

<main>
  <p class="meta-eyebrow">Damask · No. 41542 · 海の継承</p>

  <h1>Marine Heirloom</h1>
  <p class="subtitle">深い海の色 — A damask resolved in slate-teal on bone.</p>

  <figure class="image-wrap">
    <img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="Marine Heirloom No.41542">
  </figure>

  <p class="copy">
    The rosette repeats. The leaf folds toward itself. The seam between tiles does not exist.<br><br>
    A damask is, in the end, an argument for patience — and for the rooms quiet enough to hold one.
  </p>

  <dl class="specs">
    <dt>Width</dt>   <dd>24″ · 36″</dd>
    <dt>Repeat</dt>  <dd>27″ half-drop</dd>
    <dt>Material</dt><dd>Paper · Vinyl · Peel &amp; Stick</dd>
    <dt>Sold</dt>    <dd>Per roll · 27 ft.</dd>
    <dt>Origin</dt>  <dd>wallco · curated original</dd>
  </dl>

  <div class="colors">
    <span class="colors-label">Five colors</span>
    <div class="colors-row">
      <span class="sw" style="background:#2b3838"></span>
      <span class="sw" style="background:#cfc6b3"></span>
      <span class="sw" style="background:#1a2424"></span>
      <span class="sw" style="background:#9aa19e"></span>
      <span class="sw" style="background:#5e7b78"></span>
    </div>
  </div>

  <nav class="actions">
    <a>Order a memo sample →</a>
    <a>See it rendered in a room →</a>
    <a>License the pattern →</a>
  </nav>
</main>

<footer>wallco · curated originals · No.41542</footer>
</body></html>