diff --git a/registry/blocks/hw-pipeline/demo.html b/registry/blocks/hw-pipeline/demo.html
index cac624563..41555efcc 100644
--- a/registry/blocks/hw-pipeline/demo.html
+++ b/registry/blocks/hw-pipeline/demo.html
@@ -28,7 +28,9 @@
         --hw-font-print: "Caveat", cursive;
         --hw-font-script: "Caveat", cursive;
         --hw-ink: #f4f2ec;
-        --hw-accent: #6d6dff;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
 
         position: relative;
         width: 1920px;
@@ -223,29 +225,51 @@
             var c = document.createElementNS(NS, "path");
             c.setAttribute("class", "hw-pl-conn");
             c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
             c.setAttribute(
               "d",
               "M " +
-                (cx + 10) +
+                sx +
                 " " +
                 cy +
                 " Q " +
-                (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
+                qx +
                 " " +
-                (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                qy +
                 " " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
                 " M " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
-                " l -30 -14 M " +
-                (ex - 10) +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
                 " " +
                 ey +
-                " l -26 18",
+                " L " +
+                b2x +
+                " " +
+                b2y,
             );
             svg.appendChild(c);
             conns.push(c);
diff --git a/registry/blocks/hw-pipeline/hw-pipeline.html b/registry/blocks/hw-pipeline/hw-pipeline.html
index bfa5c7a0b..376e44394 100644
--- a/registry/blocks/hw-pipeline/hw-pipeline.html
+++ b/registry/blocks/hw-pipeline/hw-pipeline.html
@@ -25,7 +25,9 @@
         --hw-font-print: "Caveat", cursive;
         --hw-font-script: "Caveat", cursive;
         --hw-ink: #f4f2ec;
-        --hw-accent: #6d6dff;
+        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The
+           previous #6d6dff read as a default UI blue against the family's ink. */
+        --hw-accent: #ffb020;
 
         position: relative;
         width: 1920px;
@@ -220,29 +222,51 @@
             var c = document.createElementNS(NS, "path");
             c.setAttribute("class", "hw-pl-conn");
             c.setAttribute("id", "hw-pl-conn-" + i);
+            var sx = cx + 10,
+              tx = ex - 10;
+            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,
+              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;
+            /* Barbs follow the curve's incoming tangent. A quadratic's tangent
+               at its end is (end - control); barbs fixed to horizontal left the
+               head detached from a curve that arrives descending. Symmetric
+               length and angle, so it reads as one arrowhead. */
+            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;
+            var BARB = 26,
+              SPREAD = 0.42;
+            var b1x = tx + BARB * Math.cos(ang - SPREAD),
+              b1y = ey + BARB * Math.sin(ang - SPREAD);
+            var b2x = tx + BARB * Math.cos(ang + SPREAD),
+              b2y = ey + BARB * Math.sin(ang + SPREAD);
             c.setAttribute(
               "d",
               "M " +
-                (cx + 10) +
+                sx +
                 " " +
                 cy +
                 " Q " +
-                (cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16) +
+                qx +
                 " " +
-                (cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12) +
+                qy +
                 " " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
                 " M " +
-                (ex - 10) +
+                tx +
                 " " +
                 ey +
-                " l -30 -14 M " +
-                (ex - 10) +
+                " L " +
+                b1x +
+                " " +
+                b1y +
+                " M " +
+                tx +
                 " " +
                 ey +
-                " l -26 18",
+                " L " +
+                b2x +
+                " " +
+                b2y,
             );
             svg.appendChild(c);
             conns.push(c);
diff --git a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
index 16be9309c..6cf993833 100644
--- a/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
+++ b/registry/blocks/hw-scribble-transition/hw-scribble-transition.html
@@ -16,7 +16,9 @@
         overflow: hidden;
       }
       #hw-st-root {
-        --hw-accent: #6d6dff;
+        /* Warm marker accent, consistent with the rest of the hw family.
+           Override per use via CONFIG.color. */
+        --hw-accent: #ffb020;
 
         position: relative;
         width: 1920px;
@@ -75,7 +77,7 @@
            coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s
            local), then everything clears. Place spanning the host's cut. */
         var CONFIG = {
-          color: null, // css color; null = --hw-accent purple
+          color: null, // css color; null = --hw-accent (warm marker)
           bands: 7, // horizontal scribble bands
           strokeScale: 1.0,
           seed: 17,
diff --git a/registry/components/hw-callout-circle/demo.html b/registry/components/hw-callout-circle/demo.html
index 7cdaa1ac1..efcd893b0 100644
--- a/registry/components/hw-callout-circle/demo.html
+++ b/registry/components/hw-callout-circle/demo.html
@@ -47,9 +47,12 @@
         stroke-width: var(--hw-co-w, 6);
       }
       .hw-callout .hw-co-scribble {
-        stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff));
-        stroke-width: 4;
-        opacity: 0.7;
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
       }
       .hw-callout .hw-co-connector {
         stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
@@ -223,8 +226,10 @@
           if (opts.scribble === false) {
             scr.style.display = "none";
           } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
             var d = "",
-              rows = 6;
+              rows = 11;
             for (var i = 0; i < rows; i++) {
               var t = (i + 0.5) / rows;
               var yy = cy - ry + t * ry * 2;
diff --git a/registry/components/hw-callout-circle/hw-callout-circle.html b/registry/components/hw-callout-circle/hw-callout-circle.html
index d18266d07..6ae45540e 100644
--- a/registry/components/hw-callout-circle/hw-callout-circle.html
+++ b/registry/components/hw-callout-circle/hw-callout-circle.html
@@ -44,9 +44,12 @@
         stroke-width: var(--hw-co-w, 6);
       }
       .hw-callout .hw-co-scribble {
-        stroke: var(--hw-co-accent, var(--hw-accent, #6d6dff));
-        stroke-width: 4;
-        opacity: 0.7;
+        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the
+           previous blue read as a default UI colour. Lighter weight and alpha
+           so the hatch sits behind the labelled subject instead of over it. */
+        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));
+        stroke-width: 3;
+        opacity: 0.42;
       }
       .hw-callout .hw-co-connector {
         stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));
@@ -220,8 +223,10 @@
           if (opts.scribble === false) {
             scr.style.display = "none";
           } else {
+            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows
+               the near-horizontal runs dominate and it renders as stacked bars. */
             var d = "",
-              rows = 6;
+              rows = 11;
             for (var i = 0; i < rows; i++) {
               var t = (i + 0.5) / rows;
               var yy = cy - ry + t * ry * 2;
diff --git a/registry/components/yt-camera-move/demo.html b/registry/components/yt-camera-move/demo.html
index 1f97e1a08..d63a51e5a 100644
--- a/registry/components/yt-camera-move/demo.html
+++ b/registry/components/yt-camera-move/demo.html
@@ -53,12 +53,14 @@
         overflow: hidden;
         background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
       }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
       #yt-cm-stage .yt-cm-grid {
         position: absolute;
         inset: -60px;
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px);
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
       }
       #yt-cm-stage .yt-cm-label {
         position: absolute;
diff --git a/registry/components/yt-camera-move/yt-camera-move.html b/registry/components/yt-camera-move/yt-camera-move.html
index 945c03368..6034ea643 100644
--- a/registry/components/yt-camera-move/yt-camera-move.html
+++ b/registry/components/yt-camera-move/yt-camera-move.html
@@ -50,12 +50,14 @@
         overflow: hidden;
         background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);
       }
+      /* Grid is the only cue that reveals the camera move on a flat gradient
+         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */
       #yt-cm-stage .yt-cm-grid {
         position: absolute;
         inset: -60px;
         background:
-          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px),
-          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 120px);
+          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),
+          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);
       }
       #yt-cm-stage .yt-cm-label {
         position: absolute;