diff --git a/webui/index.html b/webui/index.html
index c01545e8..4388ffda 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -311,7 +311,7 @@
 
             <!-- Dashboard Page -->
             <div class="page" id="dashboard-page">
-                <div class="dashboard-container">
+                <div class="page-shell dashboard-container">
                     <div class="dashboard-header">
                         <div class="header-text">
                             <h2 class="header-title"><img src="/static/dashboard.png" class="page-header-icon" alt=""><span>System Dashboard</span></h2>
@@ -976,6 +976,7 @@
 
             <!-- Main container for the Sync page -->
             <div class="page" id="sync-page">
+                <div class="page-shell">
                 <!-- Header -->
                 <div class="sync-header">
                     <div class="sync-header-row">
@@ -2059,6 +2060,7 @@
                         </div>
                     </div>
                 </div>
+                </div>
             </div>
 
             <!-- Search Page -->
@@ -2280,7 +2282,7 @@
             <div class="page" id="automations-page">
                 <!-- List View -->
                 <div class="automations-list-view" id="automations-list-view">
-                    <div class="automations-container">
+                    <div class="page-shell automations-container">
                         <div class="dashboard-header">
                             <div class="header-text">
                                 <h2 class="header-title"><img src="/static/automation.png" class="page-header-icon" alt=""><span>Automations</span></h2>
@@ -3632,7 +3634,7 @@
 
             <!-- Playlist Explorer Page -->
             <div class="page" id="playlist-explorer-page">
-                <div class="explorer-container">
+                <div class="page-shell explorer-container">
                     <!-- Header (compact) -->
                     <div class="dashboard-header" style="margin-bottom: 12px;">
                         <div class="header-text">
@@ -3735,6 +3737,7 @@
 
             <!-- Settings Page -->
             <div class="page" id="settings-page">
+                <div class="page-shell">
                 <div class="dashboard-header">
                     <div class="header-text">
                         <h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
@@ -6200,6 +6203,7 @@
                         <button class="save-button" id="save-settings">Save Settings</button>
                     </div>
                 </div>
+                </div>
             </div>
 
             <!-- Hydrabase Page (Dev Mode Only) -->
@@ -6322,7 +6326,7 @@
                  TOOLS PAGE
                  ═══════════════════════════════════════════════════════════════════ -->
             <div class="page" id="tools-page">
-                <div class="tools-page-container">
+                <div class="page-shell tools-page-container">
                     <div class="tools-page-header">
                         <div class="tools-page-header-left">
                             <h2 class="tools-page-title">
@@ -6779,7 +6783,7 @@
                  WATCHLIST PAGE
                  ═══════════════════════════════════════════════════════════════════ -->
             <div class="page" id="watchlist-page">
-                <div class="watchlist-page-container">
+                <div class="page-shell watchlist-page-container">
                     <!-- Header -->
                     <div class="watchlist-page-header">
                         <div class="watchlist-page-header-left">
@@ -6895,7 +6899,7 @@
                  WISHLIST PAGE
                  ═══════════════════════════════════════════════════════════════════ -->
             <div class="page" id="wishlist-page">
-                <div class="wishlist-page-container">
+                <div class="page-shell wishlist-page-container">
                     <!-- Header -->
                     <div class="wishlist-page-header">
                         <div class="wishlist-page-header-left">
@@ -7288,15 +7292,15 @@
 
                 <div class="add-to-wishlist-modal-footer">
                     <div class="wishlist-modal-actions">
-                        <button class="wishlist-modal-btn wishlist-modal-btn-secondary"
+                        <button class="btn btn--secondary"
                             onclick="closeAddToWishlistModal()">
                             Close
                         </button>
-                        <button class="wishlist-modal-btn wishlist-modal-btn-download" id="wishlist-download-now-btn"
+                        <button class="btn btn--download" id="wishlist-download-now-btn"
                             onclick="handleWishlistDownloadNow()">
                             Download Now
                         </button>
-                        <button class="wishlist-modal-btn wishlist-modal-btn-primary" id="confirm-add-to-wishlist-btn">
+                        <button class="btn btn--primary" id="confirm-add-to-wishlist-btn">
                             Add to Wishlist
                         </button>
                     </div>
@@ -7465,11 +7469,11 @@
 
                 <div class="watchlist-artist-config-footer">
                     <div class="config-modal-actions">
-                        <button class="config-modal-btn config-modal-btn-secondary"
+                        <button class="btn btn--secondary"
                             onclick="closeWatchlistArtistConfigModal()">
                             Cancel
                         </button>
-                        <button class="config-modal-btn config-modal-btn-primary" id="save-artist-config-btn">
+                        <button class="btn btn--primary" id="save-artist-config-btn">
                             Save Preferences
                         </button>
                     </div>
@@ -7649,11 +7653,11 @@
 
             <div class="watchlist-artist-config-footer">
                 <div class="config-modal-actions">
-                    <button class="config-modal-btn config-modal-btn-secondary"
+                    <button class="btn btn--secondary"
                         onclick="closeWatchlistGlobalSettingsModal()">
                         Cancel
                     </button>
-                    <button class="config-modal-btn config-modal-btn-primary" id="save-global-config-btn"
+                    <button class="btn btn--primary" id="save-global-config-btn"
                         onclick="saveWatchlistGlobalConfig()">
                         Save Global Settings
                     </button>
diff --git a/webui/static/style.css b/webui/static/style.css
index 7c2aa9d2..2603908f 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -7990,13 +7990,136 @@ body.helper-mode-active #dashboard-activity-feed:hover {
 /* ======================================================= */
 
 /* Main Dashboard Layout */
-.dashboard-container {
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-    /* Spacing between sections */
-    padding: 28px 24px 30px 24px;
+/* ── Shared button primitive ────────────────────────────────────────
+   The canonical button design system. New markup (and the React pages)
+   should use `.btn` + a modifier; existing per-page button classes are being
+   migrated onto it family by family. Values reflect the dominant existing
+   look (accent-gradient primary, translucent ghost, semantic danger/warning).
+   Filter "pills" / tab buttons are a separate primitive (see .tab below). */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 24px;
+    border-radius: 12px;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: inherit;
+    line-height: 1;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    transition: all 0.2s ease;
+}
+.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
 
+.btn--primary {
+    background: linear-gradient(135deg, rgb(var(--accent-rgb)), rgb(var(--accent-light-rgb)));
+    color: #000;
+    font-weight: 700;
+    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
+}
+.btn--primary:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
+}
+.btn--primary:active:not(:disabled) { transform: translateY(0); }
+
+.btn--secondary {
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+}
+.btn--secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.btn--danger {
+    background: linear-gradient(135deg, #dc2626, #ef4444);
+    color: #fff;
+    font-weight: 700;
+    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
+}
+.btn--danger:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
+}
+
+/* Spotify-green download CTA (intentional brand color). */
+.btn--download {
+    background: linear-gradient(135deg, #1db954, #1ed760);
+    color: #fff;
+    border: 1px solid rgba(29, 185, 84, 0.3);
+}
+.btn--download:hover:not(:disabled) {
+    background: linear-gradient(135deg, #1ed760, #1db954);
+    transform: translateY(-1px);
+    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
+}
+
+/* Shared loading state (JS toggles `.loading`). */
+.btn.loading {
+    background: rgba(255, 193, 7, 0.9);
+    color: #000;
+    animation: pulse-loading 1.5s infinite;
+    cursor: not-allowed;
+}
+
+
+/* ── Shared tab / filter-pill primitive ─────────────────────────────
+   Canonical pill tab (the bordered rounded-pill filter look). New markup and
+   the React pages should use `.tab` + `.tab.active`. Existing per-page pill
+   classes (watchlist-filter-btn, discog-filter, adl-pill, …) are deliberately
+   left in place — they're JS-coupled and visually divergent, so they should be
+   migrated only when visually verifiable / in React, not blind. */
+.tab {
+    padding: 6px 16px;
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.tab:hover:not(.active) { color: rgba(255, 255, 255, 0.8); }
+.tab.active {
+    color: #fff;
+    border-color: rgba(var(--accent-rgb), 0.5);
+    background: rgba(var(--accent-rgb), 0.15);
+}
+
+/* ── Shared card primitive ──────────────────────────────────────────
+   Canonical "glass" content card (the dashboard service/stat card look). New
+   markup and the React pages should use `.card`. Existing per-feature card
+   classes are left in place; migrate when visually verifiable / in React. */
+.card {
+    padding: 20px 22px;
+    border-radius: 16px;
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    background: rgba(18, 18, 22, 0.9);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+    transition: all 0.2s ease;
+}
+.card:hover {
+    transform: translateY(-2px);
+    border-color: rgba(var(--accent-rgb), 0.3);
+    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+}
+
+
+/* ── Shared page shell ──────────────────────────────────────────────
+   The canonical page card (the dashboard / stats look). Adopted by the
+   dashboard, tools, watchlist and wishlist pages — and intended for reuse
+   by the React pages too (same class name). Page-specific extras (flex
+   layout, position) stay on the per-page class. */
+.page-shell {
+    padding: 28px 24px 30px;
     /* Semi-transparent to let page particles show through */
     background: linear-gradient(135deg,
             rgba(20, 20, 20, 0.55) 0%,
@@ -8005,7 +8128,6 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-top: 1px solid rgba(255, 255, 255, 0.12);
     margin: 20px;
-
     /* Soft floating shadow */
     box-shadow:
         0 8px 32px rgba(0, 0, 0, 0.3),
@@ -8013,6 +8135,13 @@ body.helper-mode-active #dashboard-activity-feed:hover {
         inset 0 1px 0 rgba(255, 255, 255, 0.08);
 }
 
+.dashboard-container {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    /* Spacing between sections; card styling comes from .page-shell */
+}
+
 .dashboard-section {
     display: flex;
     flex-direction: column;
@@ -20874,48 +21003,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
     justify-content: flex-end;
 }
 
-.config-modal-btn {
-    padding: 12px 28px;
-    border-radius: 12px;
-    font-size: 15px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-    outline: none;
-}
-
-.config-modal-btn-primary {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)), rgb(var(--accent-rgb)));
-    color: #000;
-    box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.3);
-}
-
-.config-modal-btn-primary:hover {
-    background: linear-gradient(135deg, #1fdf64, rgb(var(--accent-light-rgb)));
-    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
-    transform: translateY(-1px);
-}
-
-.config-modal-btn-primary:active {
-    transform: translateY(0);
-}
-
-.config-modal-btn-primary:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.config-modal-btn-secondary {
-    background: rgba(255, 255, 255, 0.08);
-    color: #ffffff;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.config-modal-btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.25);
-}
+/* .config-modal-btn* migrated to the shared .btn / .btn--primary / .btn--secondary primitive. */
 
 /* Linked Provider Artist */
 /* Per-source linked rows */
@@ -21153,7 +21241,7 @@ body.helper-mode-active #dashboard-activity-feed:hover {
         flex-direction: column-reverse;
     }
 
-    .config-modal-btn {
+    .config-modal-actions .btn {
         width: 100%;
     }
 }
@@ -25677,10 +25765,11 @@ body.helper-mode-active #dashboard-activity-feed:hover {
    =============================== */
 
 .library-container {
+    /* outer gutter comes from .page (40px) — shared across the full-width
+       exception pages so spacing is intentional, not accidental */
     height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 20px;
     gap: 20px;
 }
 
@@ -28129,78 +28218,8 @@ div.artist-hero-badge {
     gap: 12px;
 }
 
-.wishlist-modal-btn {
-    padding: 12px 24px;
-    border: none;
-    border-radius: 12px;
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    min-width: 120px;
-}
-
-.wishlist-modal-btn-secondary {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.wishlist-modal-btn-secondary:hover {
-    background: rgba(255, 255, 255, 0.2);
-    color: #ffffff;
-    border-color: rgba(255, 255, 255, 0.3);
-}
-
-.wishlist-modal-btn-download {
-    background: linear-gradient(135deg, #1db954, #1ed760);
-    color: #ffffff;
-    border: 1px solid rgba(29, 185, 84, 0.3);
-}
-
-.wishlist-modal-btn-download:hover {
-    background: linear-gradient(135deg, #1ed760, #1db954);
-    transform: translateY(-1px);
-    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.4);
-}
-
-.wishlist-modal-btn-download:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
-}
-
-.wishlist-modal-btn-primary {
-    background: linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, rgb(var(--accent-light-rgb)) 100%);
-    color: #ffffff;
-    border: 1px solid rgba(var(--accent-rgb), 0.3);
-}
-
-.wishlist-modal-btn-primary:hover {
-    background: linear-gradient(135deg, rgb(var(--accent-light-rgb)) 0%, #22e167 100%);
-    transform: translateY(-1px);
-    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.4);
-}
-
-.wishlist-modal-btn-primary:active {
-    transform: translateY(0);
-    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
-}
-
-/* Loading State */
-.wishlist-modal-btn-primary.loading {
-    background: rgba(255, 193, 7, 0.9);
-    color: #000000;
-    animation: pulse-loading 1.5s infinite;
-    cursor: not-allowed;
-}
-
-.wishlist-modal-btn-primary:disabled {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.4);
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
+/* .wishlist-modal-btn* migrated to the shared .btn primitive
+   (.btn--primary / .btn--secondary / .btn--download / .btn.loading). */
 
 /* Animation for modal appearance */
 @keyframes wishlistModalFadeIn {
@@ -28287,7 +28306,7 @@ div.artist-hero-badge {
         gap: 12px;
     }
 
-    .wishlist-modal-btn {
+    .wishlist-modal-actions .btn {
         width: 100%;
     }
 }
@@ -43832,7 +43851,7 @@ body.downloads-disabled [onclick*="DownloadMissing"]:not([onclick*="close"]) {
    AUTOMATIONS PAGE
    =========================== */
 
-.automations-container { padding: 20px 24px; }
+/* .automations-container: card styling from .page-shell */
 .automations-list { display: flex; flex-direction: column; gap: 0; }
 #automations-list-view { padding-bottom: 10vh; }
 
@@ -54445,7 +54464,7 @@ tr.tag-diff-same {
    ================================================================================== */
 
 .explorer-container {
-    padding: 24px 32px;
+    /* card styling from .page-shell; keep full-height flex layout */
     display: flex;
     flex-direction: column;
     min-height: 100%;
@@ -58135,9 +58154,10 @@ body.reduce-effects *::after {
 }
 
 .adl-layout {
+    /* outer gutter comes from .page (40px) — consistent with the other
+       full-width exception pages (library, etc.) */
     display: flex;
     gap: 0;
-    padding: 28px 32px;
     max-width: 1440px;
 }
 
@@ -59446,20 +59466,7 @@ body.reduce-effects *::after {
    TOOLS PAGE
    ═══════════════════════════════════════════════════════════════════ */
 
-.tools-page-container {
-    padding: 28px 24px 30px;
-    margin: 20px;
-    background: linear-gradient(135deg,
-        rgba(20, 20, 20, 0.55) 0%,
-        rgba(12, 12, 12, 0.62) 100%);
-    border-radius: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.3),
-        0 4px 16px rgba(0, 0, 0, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.08);
-}
+/* .tools-page-container: card styling now from .page-shell (no extras). */
 
 .tools-page-header {
     padding: 20px 24px 18px;
@@ -59632,18 +59639,7 @@ body.reduce-effects *::after {
    ═══════════════════════════════════════════════════════════════════ */
 
 .watchlist-page-container {
-    padding: 28px 24px 30px;
-    margin: 20px;
-    background: linear-gradient(135deg,
-        rgba(20, 20, 20, 0.55) 0%,
-        rgba(12, 12, 12, 0.62) 100%);
-    border-radius: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.3),
-        0 4px 16px rgba(0, 0, 0, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    /* card styling from .page-shell; keep page-specific positioning */
     position: relative;
 }
 
@@ -60044,18 +60040,7 @@ body.reduce-effects *::after {
    ═══════════════════════════════════════════════════════════════════ */
 
 .wishlist-page-container {
-    padding: 28px 24px 30px;
-    margin: 20px;
-    background: linear-gradient(135deg,
-        rgba(20, 20, 20, 0.55) 0%,
-        rgba(12, 12, 12, 0.62) 100%);
-    border-radius: 24px;
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    box-shadow:
-        0 8px 32px rgba(0, 0, 0, 0.3),
-        0 4px 16px rgba(0, 0, 0, 0.2),
-        inset 0 1px 0 rgba(255, 255, 255, 0.08);
+    /* card styling from .page-shell; keep page-specific positioning */
     position: relative;
 }