From 6d684d2d6a8786b90910aac3c7d1f832e9f216a3 Mon Sep 17 00:00:00 2001
From: Abdul Wahab <abdulwahabone@gmail.com>
Date: Mon, 10 Aug 2026 18:49:55 +0500
Subject: [PATCH] Mute design-context tile accents at rest like Color.

Product, Brand, Typography, and Material vignettes now use anim-join so their gold accent reads at 25% opacity before hover and brightens on hover, matching the Color tile.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 picker/pages/index.astro | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/picker/pages/index.astro b/picker/pages/index.astro
index bf60c0595..b73f74713 100644
--- a/picker/pages/index.astro
+++ b/picker/pages/index.astro
@@ -1292,8 +1292,8 @@ const questions = [
           <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
             <line x1="8" y1="13" x2="26" y2="13" stroke="var(--viz-ink)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
             <line x1="8" y1="19" x2="30" y2="19" stroke="var(--viz-mist)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
-            <line x1="8" y1="25" x2="22" y2="25" stroke="var(--viz-accent)" stroke-linecap="round" class="vz-stroke" vector-effect="non-scaling-stroke"></line>
-            <line x1="26" y1="23" x2="26" y2="27" stroke="var(--viz-accent)" class="anim-blink vz-stroke" vector-effect="non-scaling-stroke"></line>
+            <line x1="8" y1="25" x2="22" y2="25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-join vz-stroke" vector-effect="non-scaling-stroke"></line>
+            <line x1="26" y1="23" x2="26" y2="27" stroke="var(--viz-accent)" class="anim-blink anim-join vz-stroke" vector-effect="non-scaling-stroke"></line>
           </svg>
         </span>
         <h2 class="dcx-tile-title">Product</h2>
@@ -1304,8 +1304,8 @@ const questions = [
           <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
             <path d="M6 17 L34 17" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
             <path d="M12 10 L16 17 L20 33 M28 10 L24 17 L20 33" stroke="var(--viz-mist)" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
-            <path d="M12 10 L28 10 L34 17 L20 33 L6 17 Z" stroke="var(--viz-accent)" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
-            <circle cx="20" cy="13.5" r="1.4" fill="var(--viz-accent)" class="anim-fade-in"></circle>
+            <path d="M12 10 L28 10 L34 17 L20 33 L6 17 Z" stroke="var(--viz-accent)" stroke-linejoin="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
+            <circle cx="20" cy="13.5" r="1.4" fill="var(--viz-accent)" class="anim-join"></circle>
           </svg>
         </span>
         <h2 class="dcx-tile-title">Brand</h2>
@@ -1326,8 +1326,8 @@ const questions = [
         <span class="dcx-tile-viz" aria-hidden="true">
           <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="dcx-viz-svg">
             <path d="M10 30L20 10L30 30" stroke="var(--viz-mist)" stroke-linecap="round" stroke-linejoin="round" class="vz-ghost" vector-effect="non-scaling-stroke"></path>
-            <path d="M10 30L20 10L30 30" stroke="var(--viz-accent)" stroke-linecap="round" stroke-linejoin="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
-            <path d="M15 22H25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw-delay vz-stroke" vector-effect="non-scaling-stroke"></path>
+            <path d="M10 30L20 10L30 30" stroke="var(--viz-accent)" stroke-linecap="round" stroke-linejoin="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
+            <path d="M15 22H25" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw-delay anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
           </svg>
         </span>
         <h2 class="dcx-tile-title">Typography</h2>
@@ -1351,7 +1351,7 @@ const questions = [
             <rect x="5" y="10" width="30" height="18.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></rect>
             <line x1="23.5" y1="10" x2="23.5" y2="28.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></line>
             <line x1="23.5" y1="21.5" x2="35" y2="21.5" stroke="var(--viz-mist)" class="vz-ghost" vector-effect="non-scaling-stroke"></line>
-            <path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw vz-stroke" vector-effect="non-scaling-stroke"></path>
+            <path d="M5 28.5C5 18.28 13.28 10 23.5 10C29.85 10 35 15.15 35 21.5C35 25.42 31.82 28.5 27.9 28.5" fill="none" stroke="var(--viz-accent)" stroke-linecap="round" class="anim-draw anim-join vz-stroke" vector-effect="non-scaling-stroke"></path>
           </svg>
         </span>
         <h2 class="dcx-tile-title">Material</h2>