From 6444deb361217f5abeedc43984276a016c26c2a7 Mon Sep 17 00:00:00 2001
From: Abdul Wahab <abdulwahabone@gmail.com>
Date: Fri, 24 Jul 2026 20:10:39 +0500
Subject: [PATCH] update

---
 picker/pages/index.astro       |  59 +++++------
 picker/styles/picker.css       | 173 +++++++++++++++++++++++++--------
 skill/reference/visual-cues.md |  24 +++--
 3 files changed, 175 insertions(+), 81 deletions(-)

diff --git a/picker/pages/index.astro b/picker/pages/index.astro
index 190f47442..b3cd17a31 100644
--- a/picker/pages/index.astro
+++ b/picker/pages/index.astro
@@ -196,7 +196,6 @@ const roles = [
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="restrained" checked />
-                  <span class="picker-strategy-indicator" aria-hidden="true"></span>
                   <span class="picker-strategy-copy">
                     <strong>Restrained</strong>
                     <span>Mostly neutral. The primary appears in a few deliberate places.</span>
@@ -205,7 +204,6 @@ const roles = [
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="committed" />
-                  <span class="picker-strategy-indicator" aria-hidden="true"></span>
                   <span class="picker-strategy-copy">
                     <strong>Committed</strong>
                     <span>One strong color does real work across the page.</span>
@@ -214,7 +212,6 @@ const roles = [
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="full-palette" />
-                  <span class="picker-strategy-indicator" aria-hidden="true"></span>
                   <span class="picker-strategy-copy">
                     <strong>Full palette</strong>
                     <span>All four colors on duty, each with a clear job.</span>
@@ -223,7 +220,6 @@ const roles = [
 
                 <label class="picker-strategy-option">
                   <input type="radio" name="color-strategy" value="drenched" />
-                  <span class="picker-strategy-indicator" aria-hidden="true"></span>
                   <span class="picker-strategy-copy">
                     <strong>Drenched</strong>
                     <span>The page itself is the color. Everything else sits on top.</span>
@@ -322,66 +318,66 @@ const roles = [
               <div class="picker-strategy-preview picker-preview-type" data-type-preview aria-hidden="true">
                 <div class="ps-desktop">
                   <div class="ps-nav">
-                    <div class="ps-brand-block"></div>
-                    <div class="ps-nav-bars"><i></i><i></i><i></i><i></i></div>
-                    <div class="ps-nav-action"></div>
+                    <div class="ps-brand-block">AC</div>
+                    <div class="ps-nav-bars"><i>Product</i><i>Stories</i><i>Pricing</i><i>About</i></div>
+                    <div class="ps-nav-action">Sign in</div>
                   </div>
                   <div class="ps-hero">
                     <div class="ps-hero-copy">
                       <h2 class="pt-headline" data-type-headline></h2>
                       <p class="pt-body" data-type-body></p>
-                      <div class="ps-actions"><i></i><i></i></div>
+                      <div class="ps-actions"><i>Get started</i><i>Learn more</i></div>
                     </div>
                     <div class="ps-image"></div>
                   </div>
                   <div class="ps-proof">
-                    <div class="ps-proof-item"><i></i><span></span></div>
-                    <div class="ps-proof-item"><i></i><span></span></div>
-                    <div class="ps-proof-item"><i></i><span></span></div>
-                    <div class="ps-proof-item"><i></i><span></span></div>
+                    <div class="ps-proof-item"><i></i><span>4.9 rating</span></div>
+                    <div class="ps-proof-item"><i></i><span>12k members</span></div>
+                    <div class="ps-proof-item"><i></i><span>Est. 2019</span></div>
+                    <div class="ps-proof-item"><i></i><span>Free shipping</span></div>
                   </div>
                   <div class="ps-editorial">
                     <div class="ps-editorial-copy">
-                      <strong></strong>
-                      <span><i></i><i></i></span>
-                      <em></em>
+                      <strong>Made to last</strong>
+                      <span><i>Every piece starts as a sketch and</i><i>earns its place in the collection.</i></span>
+                      <em>Read the story</em>
                     </div>
                     <div class="ps-gallery">
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Morning set</b><b>From $48</b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Studio series</b><b>From $64</b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Archive No. 3</b><b>From $32</b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Limited run</b><b>From $96</b></span></div>
                     </div>
                   </div>
                   <div class="ps-footer">
-                    <div class="ps-footer-links"><i></i><i></i><i></i><i></i></div>
-                    <div class="ps-footer-mark"></div>
+                    <div class="ps-footer-links"><i>Privacy</i><i>Terms</i><i>Contact</i><i>Careers</i></div>
+                    <div class="ps-footer-mark">© 2026 AC</div>
                   </div>
                 </div>
                 <div class="ps-phone">
                   <div class="ps-phone-top">
-                    <div class="ps-brand-block"></div>
-                    <div class="ps-nav-action"></div>
+                    <div class="ps-brand-block">AC</div>
+                    <div class="ps-nav-action">Menu</div>
                   </div>
                   <div class="ps-phone-body">
                     <div class="ps-image"></div>
                     <h2 class="pt-headline" data-type-headline></h2>
                     <p class="pt-body" data-type-body></p>
-                    <div class="ps-actions"><i></i><i></i></div>
+                    <div class="ps-actions"><i>Get started</i><i>Learn more</i></div>
                     <div class="ps-proof">
-                      <div class="ps-proof-item"><i></i><span></span></div>
-                      <div class="ps-proof-item"><i></i><span></span></div>
+                      <div class="ps-proof-item"><i></i><span>4.9 rating</span></div>
+                      <div class="ps-proof-item"><i></i><span>12k members</span></div>
                     </div>
                     <div class="ps-editorial-copy">
-                      <strong></strong>
-                      <span><i></i><i></i></span>
+                      <strong>Made to last</strong>
+                      <span><i>Every piece starts as a sketch and</i><i>earns its place in the collection.</i></span>
                     </div>
                     <div class="ps-gallery">
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
-                      <div class="ps-gallery-item"><i></i><span><b></b><b></b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Morning set</b><b>From $48</b></span></div>
+                      <div class="ps-gallery-item"><i></i><span><b>Studio series</b><b>From $64</b></span></div>
                     </div>
                   </div>
-                  <div class="ps-phone-footer"><i></i><i></i><i></i></div>
+                  <div class="ps-phone-footer"><i>Privacy</i><i>Terms</i><i>Contact</i></div>
                 </div>
               </div>
             </div>
@@ -389,7 +385,6 @@ const roles = [
             <template data-pair-card>
               <label class="picker-strategy-option picker-type-option">
                 <input type="radio" name="font-pair" />
-                <span class="picker-strategy-indicator" aria-hidden="true"></span>
                 <span class="picker-type-copy">
                   <strong class="picker-type-sample-heading" data-pair-heading></strong>
                   <span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index cab7adcf5..674506641 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -1086,10 +1086,11 @@ html.light .ks-button.ks-button-ghost:hover {
   white-space: nowrap;
 }
 
+/* Selection reads from the card itself: a champagne-tinted ground plus a
+   doubled hairline (border + inset ring), no radio dot spending a column. */
 .picker-strategy-option {
   position: relative;
   display: grid;
-  grid-template-columns: 18px minmax(0, 1fr);
   gap: 14px;
   align-items: start;
   padding: 16px 18px;
@@ -1099,36 +1100,14 @@ html.light .ks-button.ks-button-ghost:hover {
   cursor: pointer;
   transition:
     background-color 180ms var(--ks-ease),
-    border-color 180ms var(--ks-ease);
+    border-color 180ms var(--ks-ease),
+    box-shadow 180ms var(--ks-ease);
 }
 
 .picker-strategy-option:hover {
   border-color: var(--ks-patina-deep);
 }
 
-.picker-strategy-indicator {
-  position: relative;
-  width: 17px;
-  height: 17px;
-  margin-top: 2px;
-  color: var(--ks-patina-deep);
-  border: 1px solid currentColor;
-  border-radius: 50%;
-}
-
-.picker-strategy-indicator::after {
-  content: "";
-  position: absolute;
-  inset: 4px;
-  background: currentColor;
-  border-radius: 50%;
-  opacity: 0;
-  transform: scale(0.5);
-  transition:
-    opacity 160ms var(--ks-ease),
-    transform 160ms var(--ks-ease);
-}
-
 .picker-strategy-copy {
   display: grid;
   gap: 5px;
@@ -1150,15 +1129,11 @@ html.light .ks-button.ks-button-ghost:hover {
 .picker-strategy-option:has(input:checked) {
   background: color-mix(in oklab, var(--ks-patina-deep) 7%, var(--ks-lacquer-raised));
   border-color: var(--ks-patina-deep);
+  box-shadow: inset 0 0 0 1px var(--ks-patina-deep);
 }
 
-.picker-strategy-option:has(input:checked) .picker-strategy-indicator {
-  color: var(--ks-patina-deep);
-}
-
-.picker-strategy-option:has(input:checked) .picker-strategy-indicator::after {
-  opacity: 1;
-  transform: scale(1);
+.picker-strategy-option:has(input:checked) .picker-strategy-copy strong {
+  color: var(--ks-link-on-paper);
 }
 
 .picker-strategy-option:has(input:focus-visible) {
@@ -1802,7 +1777,6 @@ html.light .ks-button.ks-button-ghost:hover {
 }
 
 .picker-type-option {
-  grid-template-columns: 17px minmax(0, 1fr);
   gap: 14px;
   padding: 18px 20px;
 }
@@ -1837,10 +1811,27 @@ html.light .ks-button.ks-button-ghost:hover {
   font-weight: 700;
 }
 
+/* One golden-ratio ladder rules every piece of text on the artboards:
+   micro-copy sits one step below the body size, the headline two steps
+   above it. The phone artboard re-bases the same ladder smaller, so both
+   artboards stay on scale. A future type-scale step replaces the ratio;
+   until then the preview follows this one everywhere. */
 .picker-preview-type {
   --pt-heading: var(--ks-font-display);
   --pt-body: var(--ks-font);
   --pt-heading-weight: 600;
+  --pt-ratio: 1.618;
+  --pt-base: clamp(0.58rem, 0.75vw, 0.72rem);
+}
+
+/* The derived steps are declared on both artboard roots because custom
+   properties resolve their var() references where they are declared: the
+   phone re-bases --pt-base, so it needs its own ladder computation. */
+.picker-preview-type,
+.picker-preview-type .ps-phone {
+  --pt-micro: calc(var(--pt-base) / var(--pt-ratio));
+  --pt-title: calc(var(--pt-base) * var(--pt-ratio));
+  --pt-display: calc(var(--pt-base) * var(--pt-ratio) * var(--pt-ratio));
 }
 
 .picker-preview-type .ps-hero-copy {
@@ -1860,9 +1851,9 @@ html.light .ks-button.ks-button-ghost:hover {
   margin: 0 0 12px;
   color: var(--pvs-headline);
   font-family: var(--pt-heading);
-  font-size: clamp(1.2rem, 1.7vw, 1.8rem);
+  font-size: var(--pt-display);
   font-weight: var(--pt-heading-weight);
-  line-height: 1.04;
+  line-height: 1.15;
   letter-spacing: -0.02em;
   overflow-wrap: break-word;
   text-wrap: balance;
@@ -1873,21 +1864,122 @@ html.light .ks-button.ks-button-ghost:hover {
   margin: 0 0 16px;
   color: var(--pvs-copy);
   font-family: var(--pt-body);
-  font-size: clamp(0.64rem, 0.82vw, 0.82rem);
-  line-height: 1.45;
+  font-size: var(--pt-base);
+  line-height: 1.55;
+}
+
+/* Phone artboard type: the same ladder re-based to handset scale. */
+.picker-preview-type .ps-phone {
+  --pt-base: clamp(0.42rem, 0.55vw, 0.52rem);
 }
 
-/* Phone artboard type: same specimen at handset scale. */
 .ps-phone .pt-headline {
   max-width: none;
   margin: 8px 0 0;
-  font-size: clamp(0.82rem, 1.05vw, 1.05rem);
 }
 
 .ps-phone .pt-body {
   max-width: none;
   margin: 4px 0 0;
-  font-size: clamp(0.5rem, 0.62vw, 0.64rem);
+}
+
+/* On the type screen the wireframe's bar glyphs become micro-copy, so the
+   pair is judged on real glyphs in every slot: nav, buttons, proof row,
+   cards, footer. Each element keeps the color slot its bar used, moved
+   from background to ink; sizes come from the ladder above. */
+.picker-preview-type :is(
+  .ps-nav-bars i,
+  .ps-proof-item span,
+  .ps-editorial-copy span i,
+  .ps-editorial-copy > em,
+  .ps-gallery-item b,
+  .ps-footer-links i,
+  .ps-footer-mark,
+  .ps-phone-footer i
+) {
+  width: auto;
+  height: auto;
+  overflow: hidden;
+  background: none;
+  border-radius: 0;
+  font-family: var(--pt-body);
+  font-size: var(--pt-micro);
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+
+.picker-preview-type .ps-nav-bars i,
+.picker-preview-type .ps-footer-links i,
+.picker-preview-type .ps-footer-mark,
+.picker-preview-type .ps-phone-footer i {
+  color: var(--pvs-bars);
+}
+
+/* The lettermark takes the heading face: a logo is display type. */
+.picker-preview-type .ps-brand-block {
+  width: auto;
+  height: auto;
+  background: none;
+  color: var(--pvs-cta);
+  font-family: var(--pt-heading);
+  font-size: var(--pt-title);
+  font-weight: var(--pt-heading-weight);
+  letter-spacing: 0.04em;
+  line-height: 1;
+}
+
+/* Buttons keep their fills; the label borrows the page ground as ink. */
+.picker-preview-type .ps-nav-action,
+.picker-preview-type .ps-actions i {
+  width: auto;
+  height: auto;
+  display: grid;
+  place-items: center;
+  padding: 0.55em 1.3em;
+  color: var(--pvs-ground);
+  font-family: var(--pt-body);
+  font-size: var(--pt-micro);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.picker-preview-type .ps-proof-item span {
+  color: var(--pvs-bars);
+}
+
+.picker-preview-type .ps-editorial-copy strong {
+  width: auto;
+  height: auto;
+  background: none;
+  color: var(--pvs-title);
+  font-family: var(--pt-heading);
+  font-size: var(--pt-title);
+  font-weight: var(--pt-heading-weight);
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+.picker-preview-type .ps-editorial-copy span i {
+  color: var(--pvs-copy);
+}
+
+.picker-preview-type .ps-editorial-copy > em {
+  width: auto;
+  height: auto;
+  margin-top: 3px;
+  background: none;
+  color: var(--pvs-signal);
+}
+
+.picker-preview-type .ps-gallery-item b {
+  color: var(--pvs-bars);
+}
+
+.picker-preview-type .ps-gallery-item b:first-child {
+  color: var(--pvs-title);
 }
 
 .picker-palette-hint {
@@ -1928,7 +2020,6 @@ html.light .ks-button.ks-button-ghost:hover {
   .picker-tip::after,
   .picker-palette-hint,
   .picker-strategy-option,
-  .picker-strategy-indicator::after,
   .picker-strategy-preview :is(
     .ps-desktop,
     .ps-phone,
diff --git a/skill/reference/visual-cues.md b/skill/reference/visual-cues.md
index 7da4dbebe..d4adbe045 100644
--- a/skill/reference/visual-cues.md
+++ b/skill/reference/visual-cues.md
@@ -69,8 +69,11 @@ Compose exactly four hex values with a 60-30-10 balance. These are
 website/app colors, headed for design tokens, not scene colors:
 
 - neutral (~60%, the dominant): the surface, what most of a screen will
-  be. An off-white or near-white with a temperature tint, or a near-black
-  when the mood calls for dark. Never pure #FFFFFF or #000000.
+  be. An off-white or near-white with a temperature tint, at least as
+  pale as #ECEAE6: a mid-tone neutral that reads fine as a scene material
+  turns into a gray slab once it is a screen background. Near-black is
+  the one alternative, when the mood calls for dark; there is no
+  in-between. Never pure #FFFFFF or #000000.
 - primary (~30%): the brand color, the mood's main carrier. Must read
   clearly against the neutral.
 - secondary: structure and support: an adjacent hue, or the primary
@@ -121,7 +124,9 @@ Written like screenplay direction, not a keyword list: subject doing something,
 
 Name every color in plain language only, as a rich material description ("deep wine-plum, the color of reduced port"), tied to its carrier. **Never put a hex code, or any number, in an image prompt**: image models that render text well will paint it onto the image as a label or a swatch strip, and even one stray numeral fails the wordless check below. The hexes already travel in the PALETTE report line, and the compile step snaps them to rendered pixels; the prompt's job is the color's look, not its code. For the same reason, say what fills the frame instead of listing what to omit; a bare "no text" line is the weakest form of the instruction and the wordless sentence below is the strong form. Keep both.
 
-Light the scene to reveal color, not to set a mood. In a dim, dusky, or nocturnal rendering every color sinks into one warm-brown murk the user cannot sample from, so bright, generous light is a hard rule even when the concept's moment is dark: an "after hours" or "dawn" concept keeps its props and story but is lit like a studio still, not like the hour. Dark palettes are welcome; dark renderings are not; a near-black primary should read as a rich, clearly-lit surface, not as underexposure. Fill every `[bracketed]` slot; never leave template language in the prompt.
+Light the scene to reveal color, not to set a mood. In a dim, dusky, or nocturnal rendering every color sinks into one warm-brown murk the user cannot sample from, so bright, generous light is a hard rule even when the concept's moment is dark: an "after hours" or "dawn" concept keeps its props and story but is lit like a studio still, not like the hour. Dark palettes are welcome; dark renderings are not; a near-black primary should read as a rich, clearly-lit surface, not as underexposure.
+
+The neutral's ground pays the highest price for shading. The compile step snaps each role to the pixels the hero actually rendered, and the picker shows the snapped value, so a nominally off-white linen that renders in mid-gray shadow ships a mid-gray surface color to the user. Describe the neutral's material as pale in the prompt ("pale unbleached linen, near-white in even light") and keep its field lit edge to edge, so the rendered ground stays as pale as the composed hex. Fill every `[bracketed]` slot; never leave template language in the prompt.
 
 ```text
 One full-bleed photograph, square format, framed close: [one scene from
@@ -133,7 +138,8 @@ four-color story: every surface in frame carries one of the four colors,
 each color one large unbroken field, none reduced to a sliver, no
 stretch of frame left to a color outside the four: [the neutral's
 carrier], [plain-language color with a material-world comparison], as
-the ground and backdrop, about half the frame; [the primary's carrier],
+the ground and backdrop, about half the frame, evenly lit edge to edge
+with no shadow gradient across it; [the primary's carrier],
 [color description], one continuous mass over roughly a third of the
 frame, carried by the main subject; [the secondary's carrier], [color
 description], a clear supporting field beside it; [the tertiary's
@@ -266,10 +272,12 @@ generation tooling.
      every surface in frame carries one of the four colors, and
      everything is in crisp sharp focus, no blur anywhere."
    - Light: if the image is dim, dusky, or nocturnal, with palette
-     colors sinking into shadow instead of reading bright and true,
-     regenerate once, same prompt, plus "Render the scene in bright,
-     generous daylight-quality studio light; every color fully lit and
-     clearly readable, no darkness anywhere in the frame."
+     colors sinking into shadow, or the neutral's ground renders
+     visibly darker than its composed color (off-white linen reading
+     as mid-gray), regenerate once, same prompt, plus "Render the
+     scene in bright, generous daylight-quality studio light; every
+     color fully lit and clearly readable, the ground pale and evenly
+     lit edge to edge, no darkness anywhere in the frame."
 
 5. Reply with exactly these three lines and nothing else, the path
    being the file you verified in step 4: