diff --git a/src/registrar/assets/sass/_theme/_alerts.scss b/src/registrar/assets/sass/_theme/_alerts.scss
index 08404232e..3cfa768fe 100644
--- a/src/registrar/assets/sass/_theme/_alerts.scss
+++ b/src/registrar/assets/sass/_theme/_alerts.scss
@@ -1,3 +1,4 @@
+@use "uswds-core" as *;
 @use "base" as *;
 
 // Fixes some font size disparities with the Figma
@@ -29,3 +30,24 @@
 .usa-alert__body--widescreen {
   max-width: $widescreen-max-width !important;
 }
+
+.usa-site-alert--hot-pink {
+  .usa-alert {
+    background-color: $hot-pink;
+    border-left-color: $hot-pink;
+    .usa-alert__body {
+      color: color('base-darkest');
+      background-color: $hot-pink;
+    }
+  }
+}
+
+@supports ((-webkit-mask:url()) or (mask:url())) {
+  .usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+    background-color: color('base-darkest');
+  }
+}
+
+.usa-site-alert--hot-pink .usa-alert .usa-alert__body::before {
+  background-image: url('../img/usa-icons-bg/error.svg');
+}
diff --git a/src/registrar/assets/sass/_theme/_base.scss b/src/registrar/assets/sass/_theme/_base.scss
index 85f453dac..db1599621 100644
--- a/src/registrar/assets/sass/_theme/_base.scss
+++ b/src/registrar/assets/sass/_theme/_base.scss
@@ -2,6 +2,7 @@
 @use "cisa_colors" as *;
 
 $widescreen-max-width: 1920px;
+$hot-pink: #FFC3F9;
 
 /* Styles for making visible to screen reader / AT users only. */
 .sr-only {
diff --git a/src/registrar/assets/sass/_theme/_uswds-theme.scss b/src/registrar/assets/sass/_theme/_uswds-theme.scss
index 6ef679734..1661a6388 100644
--- a/src/registrar/assets/sass/_theme/_uswds-theme.scss
+++ b/src/registrar/assets/sass/_theme/_uswds-theme.scss
@@ -119,7 +119,7 @@ in the form $setting: value,
   /*---------------------------
   ## Emergency state
   ----------------------------*/ 
-  $theme-color-emergency: #FFC3F9,
+  $theme-color-emergency: "red-warm-60v",
 
   /*---------------------------
   # Input settings 
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index d2e3c4e14..b123a0eac 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -76,17 +76,24 @@
   {% endif %}
 
   {% comment %}
-    Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner. 
+    <!-- Site banner / red alert banner / emergency banner / incident banner - Remove one of those includes and place outside the comment block to activate the banner.
+    DO NOT FORGET TO EDIT THE BANNER CONTENT -->
+    
+    <!-- Red banner with exclamation mark in a circle: -->
     {% include "includes/banner-error.html" %}
+
+    <!-- Blue banner with 'i'' mark in a circle: -->
     {% include "includes/banner-info.html" %}
+
+    <!-- Marron banner with exclamation mark in a circle: -->
     {% include "includes/banner-service-disruption.html" %}
     {% include "includes/banner-site-alert.html" %}
     {% include "includes/banner-system-outage.html" %}
+
+    <!-- Yellow banner with exclamation mark in a triangle: -->
     {% include "includes/banner-warning.html" %}
   {% endcomment %}
   
-  {% include "includes/banner-info.html" %}
-  
   <section class="usa-banner" aria-label="Official website of the United States government">
     <div class="usa-accordion">
       <header class="usa-banner__header">
diff --git a/src/registrar/templates/includes/banner-error.html b/src/registrar/templates/includes/banner-error.html
index 690510c39..7b5c32ed1 100644
--- a/src/registrar/templates/includes/banner-error.html
+++ b/src/registrar/templates/includes/banner-error.html
@@ -1,7 +1,9 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--error">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Header</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
             Text here
         </p>
diff --git a/src/registrar/templates/includes/banner-info.html b/src/registrar/templates/includes/banner-info.html
index a8cd13050..e5d54e483 100644
--- a/src/registrar/templates/includes/banner-info.html
+++ b/src/registrar/templates/includes/banner-info.html
@@ -1,9 +1,11 @@
 <section class="usa-site-alert usa-site-alert--info margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Announcement:</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
-            Katherine & Rachid are now ruling the world!
+            Text here
         </p>
       </div>
     </div>
diff --git a/src/registrar/templates/includes/banner-non-production-alert.html b/src/registrar/templates/includes/banner-non-production-alert.html
index 93651ae1a..61d4eed51 100644
--- a/src/registrar/templates/includes/banner-non-production-alert.html
+++ b/src/registrar/templates/includes/banner-non-production-alert.html
@@ -1,4 +1,4 @@
-<section class="usa-site-alert usa-site-alert--emergency margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
+<section class="usa-site-alert usa-site-alert--emergency usa-site-alert--hot-pink margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert">
         <div class="usa-alert__body {% if add_body_class %}{{ add_body_class }}{% endif %} {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
             <p class="usa-alert__text maxw-none">
diff --git a/src/registrar/templates/includes/banner-warning.html b/src/registrar/templates/includes/banner-warning.html
index ad38078c8..6838aef7b 100644
--- a/src/registrar/templates/includes/banner-warning.html
+++ b/src/registrar/templates/includes/banner-warning.html
@@ -1,7 +1,9 @@
 <div class="margin-y-0 {% if add_class %}{{ add_class }}{% endif %}" aria-label="Site alert">
     <div class="usa-alert usa-alert--warning">
       <div class="usa-alert__body {% if is_widescreen_mode %}usa-alert__body--widescreen{% endif %}">
-        <h4 class="usa-alert__heading">Header</h4>
+        <h4 class="usa-alert__heading">
+          Header
+        </h4>
         <p class="usa-alert__text maxw-none">
             Text here
         </p>