Wireframe — E-commerce Product Page

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 880 540" width="880" height="540">
  <style>
    text { font:12px Inter, sans-serif; fill:#0f172a; }
    .hd { font-weight:600; font-size:14px; }
    rect.box { fill:#f1f5f9; stroke:#94a3b8; }
    rect.btn { fill:#0f172a; stroke:#0f172a; }
  </style>
  <rect class="box" x="0" y="0" width="880" height="60"/>
  <text class="hd" x="20" y="36">Brand</text>
  <text x="700" y="36">Search    Cart (3)</text>

  <!-- gallery -->
  <rect class="box" x="20" y="80" width="380" height="320" rx="6"/>
  <text class="hd" x="180" y="240" text-anchor="middle">[ Hero image ]</text>
  <rect class="box" x="20"  y="410" width="80" height="60" rx="4"/>
  <rect class="box" x="110" y="410" width="80" height="60" rx="4"/>
  <rect class="box" x="200" y="410" width="80" height="60" rx="4"/>
  <rect class="box" x="290" y="410" width="80" height="60" rx="4"/>

  <!-- details -->
  <text x="420" y="100" font-size="11" fill="#64748b">Home / Catalogue / Product</text>
  <text class="hd" x="420" y="130" font-size="22">Product name</text>
  <text x="420" y="156" fill="#475569">$129.00 · ★★★★☆ (218)</text>

  <text class="hd" x="420" y="200">Colour</text>
  <rect x="420" y="208" width="22" height="22" fill="#3666ff"/>
  <rect x="448" y="208" width="22" height="22" fill="#dc2626"/>
  <rect x="476" y="208" width="22" height="22" fill="#16a34a"/>

  <text class="hd" x="420" y="260">Size</text>
  <rect class="box" x="420" y="270" width="40" height="32" rx="6"/><text x="440" y="290" text-anchor="middle">S</text>
  <rect class="box" x="466" y="270" width="40" height="32" rx="6"/><text x="486" y="290" text-anchor="middle">M</text>
  <rect class="box" x="512" y="270" width="40" height="32" rx="6"/><text x="532" y="290" text-anchor="middle">L</text>
  <rect class="box" x="558" y="270" width="40" height="32" rx="6"/><text x="578" y="290" text-anchor="middle">XL</text>

  <rect class="btn" x="420" y="330" width="200" height="44" rx="8"/>
  <text fill="white" font-weight="600" x="520" y="358" text-anchor="middle">Add to cart</text>
  <text x="640" y="358">♡ Save</text>

  <text class="hd" x="420" y="420">Description</text>
  <text x="420" y="440">Lorem ipsum dolor sit amet — short copy that</text>
  <text x="420" y="458">describes the product in two or three lines.</text>
</svg>