diff --git a/docs.json b/docs.json
index 5b6fe43..43bc3ad 100644
--- a/docs.json
+++ b/docs.json
@@ -11,7 +11,7 @@
   "css": "/style.css",
   "js": "/scripts/no-tab-jump.js",
   "banner": {
-    "content": "**NEW LAUNCH** The self-healing layer for APIs. [Read more](https://manifest.build/blog/manifest-is-taking-a-new-direction/)",
+    "content": "**NEW LAUNCH:** Repair your API requests at runtime. [Get started](https://dashboard.manifest.build)",
     "dismissible": false
   },
   "colors": {
diff --git a/style.css b/style.css
index c9834da..5518d58 100644
--- a/style.css
+++ b/style.css
@@ -12,10 +12,15 @@
   scroll-margin-top: 9999px !important;
 }
 
-/* Announcement banner: website green-to-yellow gradient, lightened for
-   readability, dark NEW badge and dark Read more button */
+/* Announcement banner: white-to-blue grained gradient of the Manifest brand,
+   black NEW LAUNCH label and black Get started button. The grain is an inline SVG
+   fractal noise, so the strip stays a few hundred bytes at any width. */
 #banner {
-  background: linear-gradient(90deg, #4fc487 0%, #a9cf6b 55%, #ecd05e 100%) !important;
+  background-color: #f2f1ed !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E"),
+    linear-gradient(95deg, #f2f1ed 0%, #efeeeb 24%, #dcdeee 50%, #a6aae7 78%, #5b61ea 100%) !important;
+  background-size: 160px 160px, 100% 100% !important;
+  background-repeat: repeat, no-repeat !important;
   border-bottom: none !important;
 }
 /* The maple theme offsets the navbar by a hardcoded 40px, so the banner must
@@ -31,28 +36,23 @@
 }
 #banner,
 #banner * {
-  color: #14261b !important;
+  color: #0b0b0c !important;
   font-weight: 500;
 }
+/* The banner content is laid out as flex items, so the space typed after the
+   label in docs.json collapses; the margin restores it */
 #banner strong,
 #banner [data-streamdown="strong"] {
-  display: inline-block;
-  padding: 2px 8px;
-  margin-right: 6px;
-  border-radius: 4px;
-  background: #14261b;
-  color: #f9f8f5 !important;
-  font-size: 12px;
+  margin-right: 4px;
   font-weight: 700;
-  letter-spacing: 0.04em;
-  vertical-align: middle;
+  color: #0b0b0c !important;
 }
 #banner a {
   display: inline-block;
   margin-left: 10px;
   padding: 4px 12px;
   border-radius: 6px;
-  background: #14261b !important;
+  background: #0b0b0c !important;
   color: #f9f8f5 !important;
   font-weight: 600 !important;
   text-decoration: none !important;
@@ -62,17 +62,13 @@
 #banner a:hover {
   opacity: 0.9;
 }
-#banner strong,
-#banner strong *,
-#banner [data-streamdown="strong"],
-#banner [data-streamdown="strong"] *,
 #banner a,
 #banner a * {
   color: #f9f8f5 !important;
 }
 #banner button,
 #banner svg {
-  color: #14261b !important;
+  color: #0b0b0c !important;
 }
 /* Mintlify forces white text via a Tailwind utility marked !important inside
    the "utilities" cascade layer; an un-layered !important loses to it, so the
@@ -80,12 +76,8 @@
 @layer utilities {
   #banner,
   #banner * {
-    color: #14261b !important;
+    color: #0b0b0c !important;
   }
-  #banner strong,
-  #banner strong *,
-  #banner [data-streamdown="strong"],
-  #banner [data-streamdown="strong"] *,
   #banner a,
   #banner a * {
     color: #f9f8f5 !important;