[object Object]

← back to Quadrille Showroom

Age View band-differentiation: split young/adult/established into 3 hue families

c3784733b3ad9c00267b34033a5fd6f2626087bf · 2026-06-29 16:03:05 -0700 · Steve

Contrarian residual #4: adult(28)/established(40) were ~90% identical (both blue-grey,
violet CTA, gap 12). Now three distinct identities on palette + CTA hue + density:
 - young(21) Emerging Adult: electric VIOLET #7c3aed, purple-dark, gap 10 (energetic)
 - adult(28) Young Pro: dashboard BLUE #1d4ed8 (Lc 87), cool blue-grey, gap 12 (modern)
 - established(40) Established: deep TEAL #155e75 (Lc 90), teal-slate, gap 9 (dense/assured)
All CTAs white-text + contrast-verified. Also drop #guided-bar from clickthrough PANELS
(Steve made it a permanent fixture, not a dock panel).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

Diff

commit c3784733b3ad9c00267b34033a5fd6f2626087bf
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon Jun 29 16:03:05 2026 -0700

    Age View band-differentiation: split young/adult/established into 3 hue families
    
    Contrarian residual #4: adult(28)/established(40) were ~90% identical (both blue-grey,
    violet CTA, gap 12). Now three distinct identities on palette + CTA hue + density:
     - young(21) Emerging Adult: electric VIOLET #7c3aed, purple-dark, gap 10 (energetic)
     - adult(28) Young Pro: dashboard BLUE #1d4ed8 (Lc 87), cool blue-grey, gap 12 (modern)
     - established(40) Established: deep TEAL #155e75 (Lc 90), teal-slate, gap 9 (dense/assured)
    All CTAs white-text + contrast-verified. Also drop #guided-bar from clickthrough PANELS
    (Steve made it a permanent fixture, not a dock panel).
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 public/js/ageview.js              | 16 ++++++++++------
 public/js/dock.js                 |  5 +++--
 public/showroom.html              |  2 +-
 scripts/clickthrough-showroom.mjs |  3 ++-
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/public/js/ageview.js b/public/js/ageview.js
index 769a802..708ed0f 100644
--- a/public/js/ageview.js
+++ b/public/js/ageview.js
@@ -54,16 +54,20 @@ const BANDS = [
     // neon magenta + white text reads the same "neon" but clears a proper CTA bar (Lc 81). /contrarian 2026-06-29.
     bg:'#0a0014', panel:'#1a0030', fg:'#f0f0ff', cta:'#c01a9e', ctaFg:'#ffffff', border:'#2a0050', muted:'#b9a8d6' },
   { max:21, id:'young',  name:'Emerging Adult',  tag:'First apartment — energetic & budget-aware.',
-    font:"system-ui, -apple-system, sans-serif", body:15, head:19, btn:44, gap:12, opaque:false, energetic:true,
-    // CTA was light purple #a855f7 + near-black text (APCA 38 — a real legibility miss for the
-    // mobile-native 21-yo this band serves). Violet-700 + white text → Lc 83, same energy. /contrarian.
+    // BAND IDENTITY — energetic VIOLET, purple-dark, denser (gap 10). Distinct hue family from
+    // adult(blue)/established(teal) — they were ~90% identical until /5x band-differentiation 2026-06-29.
+    font:"system-ui, -apple-system, sans-serif", body:15, head:19, btn:44, gap:10, opaque:false, energetic:true,
     bg:'#120a1f', panel:'#1d1330', fg:'#ece4f8', cta:'#7c3aed', ctaFg:'#ffffff', border:'#36244e', muted:'#b4a3c9' },
   { max:34, id:'adult',  name:'Young Pro',       tag:'First real budget — refined, spec-forward.',
+    // BAND IDENTITY — refined-modern DASHBOARD: cool blue-grey + dashboard-blue CTA #1d4ed8 (Lc 87),
+    // balanced density (gap 12). The calm professional baseline between energetic-young and dense-established.
     font:"-apple-system, BlinkMacSystemFont, sans-serif", body:15, head:18, btn:44, gap:12, opaque:false,
-    bg:'#0a0c12', panel:'#161a26', fg:'#e6eef8', cta:'#7c3aed', ctaFg:'#ffffff', border:'#252b3d', muted:'#9aa6bd' },
+    bg:'#0a0c12', panel:'#161a26', fg:'#e6eef8', cta:'#1d4ed8', ctaFg:'#ffffff', border:'#252b3d', muted:'#9aa6bd' },
   { max:40, id:'established', name:'Established', tag:'Family home — dense info, assured.',
-    font:"-apple-system, BlinkMacSystemFont, sans-serif", body:15, head:18, btn:44, gap:12, opaque:false,
-    bg:'#0a0c12', panel:'#171b28', fg:'#e9f0fa', cta:'#7c3aed', ctaFg:'#ffffff', border:'#28304a', muted:'#9aa6bd' },
+    // BAND IDENTITY — assured/dense: deeper warm-slate + TEAL CTA #155e75 (Lc 90), densest layout
+    // (gap 9) + a touch more heading hierarchy (head 19) for the "all-info, settled eye" reading.
+    font:"-apple-system, BlinkMacSystemFont, sans-serif", body:15, head:19, btn:44, gap:9, opaque:false,
+    bg:'#0b0e12', panel:'#16212a', fg:'#e9f0fa', cta:'#155e75', ctaFg:'#ffffff', border:'#244049', muted:'#9aa6bd' },
   { max:50, id:'connoisseur', name:'Connoisseur', tag:'Peak buying power — calm, refined, editorial.',
     font:"'Source Serif Pro', Georgia, serif", body:15, head:22, btn:44, gap:16, opaque:false,
     bg:'#f8f6f1', panel:'#ffffff', fg:'#1c1917', cta:'#6b1d07', ctaFg:'#ffffff', border:'#d6d3d1', muted:'#6b6358' },
diff --git a/public/js/dock.js b/public/js/dock.js
index 7aae615..6c48511 100644
--- a/public/js/dock.js
+++ b/public/js/dock.js
@@ -24,7 +24,8 @@
   // --- LAUNCHABLE PANELS: each becomes a movable modal -----------------------
   // sel = the existing element; label = menu/header text; w/h = first-open size.
   var PANELS = [
-    { sel: '#guided-bar',     label: 'Navigate',        w: 660, h: 150 },
+    // #guided-bar (◀ Previous / Next ▶ pager) is intentionally NOT docked — Steve wants it
+    // ALWAYS visible while walking in book mode, so it stays a permanent bottom-centre fixture.
     { sel: '#window-bar',     label: 'Controls',        w: 760, h: 240 },
     { sel: '#vm-panel',       label: 'View & Theme',    w: 300, h: 380 },
     { sel: '#ver-rail',       label: 'Versions',        w: 250, h: 440 },
@@ -50,7 +51,7 @@
   var STOW_ONLY = [
     '#top-bar',                                   // whole top toolbar (tools folded into menu)
     '#guided-instruction', '#guided-title',       // guided-mode overlays
-    '#bottom-bar', '#wing-caption', '#now-viewing',// bottom caption / navigator chatter
+    '#bottom-bar', '#now-viewing',                 // bottom navigator chatter (caption stays — book HUD)
     '#minimap',                                   // spatial minimap (explore aid)
     '#welcome-tip',                               // "how to browse" tip card
     '#chosen-tray', '#sample-tray'                // side trays (re-appear via their own features)
diff --git a/public/showroom.html b/public/showroom.html
index 4cfc8ea..689bbc7 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -129,7 +129,7 @@
     /* BOOK MODE keeps the ◀ Previous / Next ▶ pager visible even while walking (explore-mode),
        so paging one design at a time through all 883 is always available. Placed AFTER the
        explore-mode hide so equal-specificity !important resolves in book mode's favour. */
-    body.book-mode #guided-bar:not(.qh-stowed) { display:flex !important; }
+    body.book-mode #guided-bar { display:flex !important; }
     /* On small screens the big guided bar wraps; let it */
     @media (max-width:720px){
       #guided-bar { flex-wrap:wrap; width:92vw; justify-content:center; }
diff --git a/scripts/clickthrough-showroom.mjs b/scripts/clickthrough-showroom.mjs
index fdf24dc..b3e9aa0 100644
--- a/scripts/clickthrough-showroom.mjs
+++ b/scripts/clickthrough-showroom.mjs
@@ -29,8 +29,9 @@ const OUT  = path.join(__dirname, '..', 'recordings', 'phase5', 'clickthrough');
 fs.mkdirSync(OUT, { recursive: true });
 const sleep = (ms) => new Promise(r => setTimeout(r, ms));
 
+// #guided-bar is NOT docked — Steve made it a permanent bottom-centre fixture (always visible
+// while walking in book mode). So it's not a dock PANEL; its buttons are tested directly below.
 const PANELS = [
-  { sel: '#guided-bar',     label: 'Navigate' },
   { sel: '#window-bar',     label: 'Controls' },
   { sel: '#vm-panel',       label: 'View & Theme' },
   { sel: '#ver-rail',       label: 'Versions' },

← c4fd7f2 dock polish: stow pager on boot (P1), cascade first-open (P2  ·  back to Quadrille Showroom  ·  Feature: Next/Prev book-page renders the new design on all 4 e40c08a →