diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index dcfa648b45..97b93ee81b 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -242,6 +242,29 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     .material-symbols { color: #ffffff; }
   }
 
+  // ══════════════════════════════════════════════════════════════════════════
+  // NOTIFICATIONS — Lumière palette
+  // Override the Bootstrap-orange warning and generic-blue info with teal tones
+  // so notification banners feel native to the Lumière theme.
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .notification {
+    border-radius: 10px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
+
+    &.notification-type-warning {
+      --notification-bg-warning:     #{rgba($lum-teal, 0.08)};
+      --notification-border-warning: #{rgba($lum-teal, 0.28)};
+      --notification-icon-warning:   #{$lum-teal};
+    }
+
+    &.notification-type-info {
+      --notification-bg-info:     #{rgba($lum-blue, 0.07)};
+      --notification-border-info: #{rgba($lum-blue, 0.25)};
+      --notification-icon-info:   #{$lum-blue};
+    }
+  }
+
   // ══════════════════════════════════════════════════════════════════════════
   // MAIN CONTENT AREA — grainy gradient background
   //