diff --git a/src/static_src/scss/_note.scss b/src/static_src/scss/_note.scss
index e2c0b45..2111e0d 100644
--- a/src/static_src/scss/_note.scss
+++ b/src/static_src/scss/_note.scss
@@ -233,25 +233,14 @@
     }
 }
 
-// Confirmed palette swatch — right-side thumbnail, same gradient as .note-swatch-body.
-// palette-* class is on the element so CSS vars cascade from that palette automatically.
+// Confirmed palette swatch — right-side thumbnail, shares the canonical
+// gradient w. .swatch via palette-swatch-bg mixin (single source of truth).
 .note-item__palette {
     width: 3rem;
     height: 3rem;
     flex-shrink: 0;
     border-radius: 0.25rem;
-    border: 0.15rem solid rgba(var(--secUser), 0.5);
-    background: linear-gradient(
-        to bottom,
-        rgba(var(--secUser), 1) 0%,
-        rgba(var(--secUser), 1) 30%,
-        rgba(var(--priUser), 1) 30%,
-        rgba(var(--priUser), 1) 70%,
-        rgba(var(--terUser), 1) 70%,
-        rgba(var(--terUser), 1) 85%,
-        rgba(var(--quaUser), 1) 85%,
-        rgba(var(--quaUser), 1) 100%
-    );
+    @include palette-swatch-bg;
 }
 
 // ── Palette modal ──────────────────────────────────────────────────────────
@@ -282,20 +271,7 @@
             height: 3.25rem;
             border-radius: 0.25rem;
             cursor: pointer;
-            // Gradient uses vars scoped to the parent palette-* class,
-            // so each swatch shows its own palette's colours (same as .swatch).
-            background: linear-gradient(
-                to bottom,
-                rgba(var(--secUser), 1) 0%,
-                rgba(var(--secUser), 1) 30%,
-                rgba(var(--priUser), 1) 30%,
-                rgba(var(--priUser), 1) 70%,
-                rgba(var(--terUser), 1) 70%,
-                rgba(var(--terUser), 1) 85%,
-                rgba(var(--quaUser), 1) 85%,
-                rgba(var(--quaUser), 1) 100%
-            );
-            border: 0.15rem solid rgba(var(--secUser), 0.5);
+            @include palette-swatch-bg;
             flex-shrink: 0;
             transition: border-color 0.12s, box-shadow 0.12s;
 
diff --git a/src/static_src/scss/_palette-picker.scss b/src/static_src/scss/_palette-picker.scss
index 3d8031e..69814b1 100644
--- a/src/static_src/scss/_palette-picker.scss
+++ b/src/static_src/scss/_palette-picker.scss
@@ -18,13 +18,11 @@
     scroll-snap-align: start;
 }
 
-.swatch {
-    position: relative;
-    width: 7rem;
-    height: 7rem;
-    aspect-ratio: 1;
-    border-radius: 0.5rem;
-    cursor: pointer;
+// Canonical palette swatch gradient. Single source of truth for every place
+// a palette is rendered as a 4-band swatch (applet thumb, billnote thumb,
+// billnote modal options). The palette-* class on the element supplies the
+// --priUser/--secUser/--terUser/--quiUser vars; this mixin paints them.
+@mixin palette-swatch-bg {
     background: linear-gradient(
         to bottom,
         rgba(var(--secUser), 1) 0%,
@@ -37,6 +35,16 @@
         rgba(var(--quiUser), 1) 100%
     );
     border: 0.15rem solid rgba(var(--secUser), 0.5);
+}
+
+.swatch {
+    position: relative;
+    width: 7rem;
+    height: 7rem;
+    aspect-ratio: 1;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    @include palette-swatch-bg;
 
     &.active {
         border: 0.2rem solid rgba(var(--ninUser), 1);