1 files changed, 69 insertions, 31 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index 839d479..87d7d89 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -73,7 +73,10 @@ body[data-size="2"] .wrap,body[data-size="3"] .wrap{max-width:none}
 .swatch .sw.txt{display:flex;align-items:center;justify-content:center;color:var(--steel);font-size:.62rem;
   background:var(--well);padding:0 6px;text-align:center;overflow:hidden}
 .swatch .swn{color:var(--cream);font-size:.8rem}
-.swatch .swv{color:var(--dim);font-size:.74rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
+.swatch .swv{color:var(--dim);font-size:.72rem;line-height:1.35}
+.palhead{grid-column:1/-1;color:var(--steel);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
+  margin-top:.8rem;display:flex;align-items:center;gap:12px}
+.palhead::after{content:"";height:1px;background:var(--wash);flex:1}
 h2{color:var(--steel);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
   margin:2.2rem 0 .2rem;display:flex;align-items:center;gap:12px}
 h2::after{content:"";height:1px;background:var(--wash);flex:1}
@@ -599,7 +602,7 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
 </style>
 </head>
-<body data-size="3">
+<body data-size="2">
 <div class="wrap">
 <header class="masthead">
   <div class="eyebrow">archsetup · dupre panel family · live kit</div>
@@ -613,17 +616,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
      a live signal; the pointer types drive from your drag.</p>
   <div class="szbar"><span class="lab">widget size</span>
     <button class="key" data-sz="1">S</button>
-    <button class="key" data-sz="2">M</button>
-    <button class="key on" data-sz="3">L</button>
+    <button class="key on" data-sz="2">M</button>
+    <button class="key" data-sz="3">L</button>
   </div>
 </header>
 
-<h2>Palette — design tokens</h2>
-<p class="secnote">Read live from the generated :root block (tokens.json via gen_tokens.py), so this section always shows
-   exactly what the widgets render with. Hex tokens get a swatch; the glow entries are rgb triples used inside
-   rgba() glows; mono and pulse-rate are the non-color tokens.</p>
-<div class="palgrid" id="palette"></div>
-
 <h2>Controls — take input</h2>
 <div class="grid" id="controls"></div>
 
@@ -633,6 +630,11 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 <h2>Indicators &amp; readouts — state or number</h2>
 <div class="grid" id="indicators"></div>
 
+<h2>Palette — the instrument colors</h2>
+<p class="secnote">Every named color the instruments are built from — markers, hands, faces, lamps, phosphors,
+   materials — with where it appears. Page chrome (background, body text) is deliberately absent.</p>
+<div class="palgrid" id="palette"></div>
+
 </div>
 <script>
 const $ = id => document.getElementById(id);
@@ -644,29 +646,65 @@ document.querySelectorAll('.szbar .key').forEach(b=>b.addEventListener('click',(
 /* boost the intrinsically tiny widgets (audit: content under 10% of the stage) */
 const BOOST=['01','07','08','12','13','N14','18'];
 
-/* ---- palette section: read the generated :root block live ---- */
+/* ---- palette: the named instrument colors, grouped by role. No codes shown — names and uses. ---- */
+const PALETTE=[
+ ['Materials',[
+  ['Brass','#b8944a','comfort-meter bezel and knurl'],
+  ['Copper','#ad7a43','knife-switch blades, jaws and hinge'],
+  ['Chrome silver','var(--silver)','needles, ball lever, fader caps, chrome handles'],
+  ['Machined steel','var(--steel)','engraved captions, scale furniture, printed panel lines'],
+  ['Aluminum','#c9c4b8','timer hub, lever shafts, counter bezels'],
+  ['Rubber & bakelite','#2c2824','knob bodies, rocker pad, stomp switch'],
+ ]],
+ ['Faces & inks',[
+  ['Cream dial','var(--cream)','tick marks, scale numerals, dial faces, flag windows'],
+  ['Chart paper','#efe9da','day-date disc, circular chart, comfort face, telegraph dial'],
+  ['Face ink','#14110e','numerals and printing on the paper faces'],
+  ['CRT face green','#b9d8c0','round-scope face tint'],
+  ['Sky slate','var(--slate-hi)','attitude-indicator sky'],
+  ['Earth brown','#5c4630','attitude-indicator ground'],
+  ['Instrument black','#17140f','bezels, plates and housings'],
+ ]],
+ ['Lamps, LEDs & jewels',[
+  ['Lit amber','var(--gold-hi)','lit keys, sweep line, fixed indexes, blinkenlight lamps'],
+  ['Panel amber','var(--gold)','key gradients, bearing rings, seated pins, heading bug'],
+  ['Warning amber','var(--amber-warn)','warn cells, tripped collars, gear-transit lamps'],
+  ['Run green','var(--pass)','run lamps, gear greens, monitor bars, LIVE lamps'],
+  ['Fail terracotta','var(--fail)','muted keys, fault cells, TRIP button'],
+  ['LED green','var(--sevgrn)','seven-segment digits, battery cells'],
+  ['LED red','var(--sevred)','red seven-segment variant'],
+  ['Matrix red','#ff4a30','dot-matrix LEDs'],
+  ['Jewel red','var(--jewel-r)','pilot-lamp lens'],
+  ['Jewel amber','var(--jewel-a)','pilot-lamp lens, four-way corner lamps'],
+  ['Jewel green','var(--jewel-g)','pilot-lamp lens'],
+  ['Neon orange','#ff9a4c','nixie digits, dekatron glow, red screen family'],
+  ['Flip-disc yellow','#e3d44f','flip-dot faces'],
+  ['PDP magenta','#3a1420','blinkenlights panel skin'],
+ ]],
+ ['Screens & phosphors',[
+  ['Phosphor green','var(--phos)','oscilloscope traces, green screen family'],
+  ['Phosphor dim','var(--phos-dim)','phosphor afterglow and dark screen grounds'],
+  ['VFD cyan','var(--vfd)','marquee, filter-bank arrows, vfd screen family'],
+  ['Graticule green','#3d5c46','CRT graticule rulings'],
+  ['LCD white','#f2f4f2','waveform-editor ink, white screen family'],
+  ['P4 blue-white','#cfe4ff','blue screen family'],
+ ]],
+ ['Needles & controls',[
+  ['Needle red','#c23a28','comfort-meter needles, red hands'],
+  ['Control red','#e0523a','stop knobs, telegraph pointer, palm buttons, OFF marks'],
+  ['Pointer yellow','#e8cf4a','day-date read hand'],
+ ]],
+];
 (function buildPalette(){
   const host=$('palette'); if(!host)return;
-  let rootRule=null;
-  for(const sh of document.styleSheets){
-    for(const r of sh.cssRules){ if(r.selectorText===':root'){rootRule=r;break;} }
-    if(rootRule)break;
-  }
-  if(!rootRule)return;
-  const st=rootRule.style;
-  for(let i=0;i<st.length;i++){
-    const name=st[i]; if(!name.startsWith('--'))continue;
-    const val=st.getPropertyValue(name).trim();
-    const isHex=/^#[0-9a-f]{3,8}$/i.test(val);
-    const isTriple=/^\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}$/.test(val);
-    const esc=val.replace(/&/g,'&amp;').replace(/</g,'&lt;');
-    const sw=isHex?`<div class="sw" style="background:${val}"></div>`
-      :isTriple?`<div class="sw" style="background:rgb(${val})"></div>`
-      :`<div class="sw txt">${esc}</div>`;
-    const tile=document.createElement('div'); tile.className='swatch';
-    tile.innerHTML=`${sw}<div class="swn">${name}</div><div class="swv">${isTriple?esc+' (glow rgb)':esc}</div>`;
-    host.appendChild(tile);
-  }
+  for(const [group,colors] of PALETTE){
+    const h=document.createElement('div'); h.className='palhead'; h.textContent=group;
+    host.appendChild(h);
+    for(const [name,val,used] of colors){
+      const tile=document.createElement('div'); tile.className='swatch';
+      tile.innerHTML=`<div class="sw" style="background:${val}"></div>`+
+        `<div class="swn">${name}</div><div class="swv">${used}</div>`;
+      host.appendChild(tile);}}
 })();
 
 /* ---- screen-color families: period-authentic alternates for the screen widgets ----