PDP hybrid color disclosure (DTD verdict C): true-color chip + representative flag

d08cf8515624f95a363fdab8336a5ef1765959fd · 2026-07-07 07:03:46 -0700 · Steve Abrams

For the 551 colorways with no colorway-specific photo, the hero shows the shared
series texture BUT now carries: (1) a true-color dot rendered from the AI-vision
hex overlaid on the hero, (2) a true-color chip + hex next to the colorway name
(shown on ALL PDPs), (3) a visible 'representative — no colorway-specific photo on
file' note. Resolves the honesty/utility tension: designers keep the texture cue
and see the real color, never deceived. DTD panel unanimous C (Codex+Qwen).

Files touched

M public/product.html

Diff

commit d08cf8515624f95a363fdab8336a5ef1765959fd
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Jul 7 07:03:46 2026 -0700

    PDP hybrid color disclosure (DTD verdict C): true-color chip + representative flag
    
    For the 551 colorways with no colorway-specific photo, the hero shows the shared
    series texture BUT now carries: (1) a true-color dot rendered from the AI-vision
    hex overlaid on the hero, (2) a true-color chip + hex next to the colorway name
    (shown on ALL PDPs), (3) a visible 'representative — no colorway-specific photo on
    file' note. Resolves the honesty/utility tension: designers keep the texture cue
    and see the real color, never deceived. DTD panel unanimous C (Codex+Qwen).
---
 public/product.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/public/product.html b/public/product.html
index 164ce94..9bcc7ea 100644
--- a/public/product.html
+++ b/public/product.html
@@ -92,17 +92,20 @@ function priceBox(p){
   const imgs=(p.images&&p.images.length)?p.images:[p.swatch].filter(Boolean);
   const main=imgs[0]||'';
   const label=`${p.display_eyebrow||''} ${p.display_name||p.color||''}`.trim();
+  const HEXOK=/^#[0-9a-fA-F]{6}$/.test(p.hex||''); // true-color chip only for valid hex
 
   document.getElementById('pdp').innerHTML=`
     <div class="crumbs"><a href="https://www.designerwallcoverings.com">Designer Wallcoverings</a> &nbsp;/&nbsp; <a href="/">${esc(LINE)}</a> &nbsp;/&nbsp; <a href="/#catalog">${esc(p.display_eyebrow||p.series||'')}</a> &nbsp;/&nbsp; ${esc(p.display_name||p.color||p.title)}</div>
     <div class="pdp-top">
-      <div class="gallery">
-        <div class="main" id="main" style="background-image:url('${main}')"></div>
+      <div class="gallery" style="position:relative">
+        <div class="main" id="main" style="background-image:url('${main}');position:relative">${p.image_note?`<div class="repflag" title="${esc(p.image_note)}" style="position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:5px 10px;background:rgba(20,20,20,.82);color:#fff;font-size:11px;letter-spacing:.04em;border-radius:2px;backdrop-filter:blur(2px)"><span style="width:13px;height:13px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:${HEXOK?p.hex:'#888'}"></span>Representative — actual color shown in chip</div>`:''}</div>
         ${imgs.length>1?`<div class="thumbs">${imgs.map((s,i)=>`<div class="t ${i===0?'on':''}" data-s="${s}" style="background-image:url('${s}')"></div>`).join('')}</div>`:''}
       </div>
       <div class="rail">
         <div class="ser">${esc(p.display_eyebrow||p.book||LINE)}</div>
         <h1>${esc(p.display_name||p.color||p.title)}</h1>
+        ${HEXOK?`<div class="truecol" style="display:flex;align-items:center;gap:9px;margin:8px 0 4px;font-size:13px;color:#555"><span title="${esc(p.hex)}" style="width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.18);background:${p.hex};flex-shrink:0"></span>${esc(p.color||'')} <span style="opacity:.5;font-variant-numeric:tabular-nums">${esc(p.hex)}</span></div>`:''}
+        ${p.image_note?`<div class="repnote" style="font-size:11.5px;color:#8a7f6f;margin:2px 0 8px">ℹ︎ ${esc(p.image_note)}. The dot above is the true colorway color.</div>`:''}
         <div class="colr">${esc(VM.name||LINE)} · ${esc(p.sku||'')}${p.material?' · '+esc(p.material):''}</div>
         ${priceBox(p)}
         <div class="act3">

← 918c1df Catalog data-quality sweep: chroma-neutral detection, slash- · back to Reidwitlin Landing · Contrarian-gate fixes: apostrophe slug bug, solo-series dedu c7c7db0 →