diff --git a/docs/operations/runbooks/downtime_incident_management.md b/docs/operations/runbooks/downtime_incident_management.md
index 4aa884e9d..8ace9fa11 100644
--- a/docs/operations/runbooks/downtime_incident_management.md
+++ b/docs/operations/runbooks/downtime_incident_management.md
@@ -16,6 +16,8 @@ The following set of rules should be followed while an incident is in progress.
- If downtime occurs outside of working hours, team members who are off for the day may still be pinged and called but are not required to join if unavailable to do so.
- Uncomment the [banner on get.gov](https://github.com/cisagov/get.gov/blob/0365d3d34b041cc9353497b2b5f81b6ab7fe75a9/_includes/header.html#L9), so it is transparent to users that we know about the issue on manage.get.gov.
- Designers or Developers should be able to make this change; if designers are online and can help with this task, that will allow developers to focus on fixing the bug.
+- Uncomment the [banner on manage.get.gov's base template](https://github.com/cisagov/manage.get.gov/blob/main/src/registrar/templates/base.html#L78).
+ - Designers or Developers should be able to make this change; if designers are online and can help with this task, that will allow developers to focus on fixing the bug.
- If the issue persists for three hours or more, follow the [instructions for enabling/disabling a redirect to get.gov](https://docs.google.com/document/d/1PiWXpjBzbiKsSYqEo9Rkl72HMytMp7zTte9CI-vvwYw/edit).
## Post Incident
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/admin/base_site.html b/src/registrar/templates/admin/base_site.html
index db34fd893..5ca5edffc 100644
--- a/src/registrar/templates/admin/base_site.html
+++ b/src/registrar/templates/admin/base_site.html
@@ -45,7 +45,7 @@
{% block header %}
{% if not IS_PRODUCTION %}
{% with add_body_class="margin-left-1" %}
- {% include "includes/non-production-alert.html" %}
+ {% include "includes/banner-non-production-alert.html" %}
{% endwith %}
{% endif %}
diff --git a/src/registrar/templates/base.html b/src/registrar/templates/base.html
index b14dab2fa..b123a0eac 100644
--- a/src/registrar/templates/base.html
+++ b/src/registrar/templates/base.html
@@ -72,9 +72,28 @@
Skip to main content
{% if not IS_PRODUCTION %}
- {% include "includes/non-production-alert.html" %}
+ {% include "includes/banner-non-production-alert.html" %}
{% endif %}
+ {% comment %}
+
+
+
+ {% include "includes/banner-error.html" %}
+
+
+ {% include "includes/banner-info.html" %}
+
+
+ {% include "includes/banner-service-disruption.html" %}
+ {% include "includes/banner-site-alert.html" %}
+ {% include "includes/banner-system-outage.html" %}
+
+
+ {% include "includes/banner-warning.html" %}
+ {% endcomment %}
+