diff --git a/app/assets/images/alert/forgot.svg b/app/assets/images/status/info-question.svg
similarity index 100%
rename from app/assets/images/alert/forgot.svg
rename to app/assets/images/status/info-question.svg
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 9a014f10449..eb8c42e8c6e 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/app';
 @import 'required';
 @import 'design-system-waiting-room';
diff --git a/app/assets/stylesheets/components/_card.scss b/app/assets/stylesheets/components/_card.scss
index f37a211e433..116d9f274dc 100644
--- a/app/assets/stylesheets/components/_card.scss
+++ b/app/assets/stylesheets/components/_card.scss
@@ -1,5 +1,5 @@
 .card {
-  background-color: $white;
+  background-color: color('white');
   max-width: $container-skinny-width;
 
   &-wide {
diff --git a/app/assets/stylesheets/components/_file-input.scss b/app/assets/stylesheets/components/_file-input.scss
index d5b154655b3..a313b69dc97 100644
--- a/app/assets/stylesheets/components/_file-input.scss
+++ b/app/assets/stylesheets/components/_file-input.scss
@@ -74,7 +74,7 @@
 }
 
 .usa-file-input__input:not([disabled]):focus {
-  outline: 3px solid $blue;
+  outline: 3px solid color('primary');
   outline-offset: 6px;
 }
 
diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
index 6d3abac8ede..6e036476fd2 100644
--- a/app/assets/stylesheets/components/_form.scss
+++ b/app/assets/stylesheets/components/_form.scss
@@ -27,7 +27,7 @@ textarea {
   border-width: $border-width;
   border-color: $border-color;
   border-radius: $border-radius;
-  color: $gray;
+  color: color('ink');
   font-weight: $bold-font-weight;
 
   &[type='number'],
@@ -36,8 +36,8 @@ textarea {
   }
 
   &:focus {
-    border-color: $field-focus-color;
-    box-shadow: 0 0 0 2px rgba($field-focus-color, 0.5);
+    border-color: color('primary');
+    box-shadow: 0 0 0 2px rgba(color('primary'), 0.5);
     outline: none;
   }
 
diff --git a/app/assets/stylesheets/components/_i18n-dropdown.scss b/app/assets/stylesheets/components/_i18n-dropdown.scss
index 2bd4b895ea6..649079631e8 100644
--- a/app/assets/stylesheets/components/_i18n-dropdown.scss
+++ b/app/assets/stylesheets/components/_i18n-dropdown.scss
@@ -16,7 +16,7 @@
 }
 
 .i18n-mobile-dropdown {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   bottom: 100%;
   left: 0;
   position: absolute;
@@ -27,7 +27,7 @@
   position: relative;
 
   &.focused {
-    background-color: $blue;
+    background-color: color('primary');
     border-radius: 0;
     margin-bottom: 0;
     margin-top: 0;
@@ -46,6 +46,6 @@
 }
 
 .language-mobile-button {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   border: 0;
 }
diff --git a/app/assets/stylesheets/components/_list.scss b/app/assets/stylesheets/components/_list.scss
index 6edcfef972c..5be58d778d2 100644
--- a/app/assets/stylesheets/components/_list.scss
+++ b/app/assets/stylesheets/components/_list.scss
@@ -1,22 +1,3 @@
-@mixin color-list($color: $yellow) {
-  list-style: none;
-  padding: 0;
-
-  li {
-    padding-left: 1rem;
-    text-indent: -1rem;
-
-    &::before {
-      color: $color;
-      content: '•';
-      font-size: 2rem;
-      line-height: 1.5rem;
-      padding-right: 0.5rem;
-      vertical-align: -3px;
-    }
-  }
-}
-
 .success-bullets {
   .success-bullet {
     padding: 1rem 1rem 1rem 0;
@@ -35,15 +16,3 @@
     }
   }
 }
-
-.red-dots {
-  @include color-list($red);
-}
-
-.teal-dots {
-  @include color-list($teal);
-}
-
-.yellow-dots {
-  @include color-list($yellow);
-}
diff --git a/app/assets/stylesheets/components/_modal.scss b/app/assets/stylesheets/components/_modal.scss
index 9eb3deb9d00..98cefce9c5c 100644
--- a/app/assets/stylesheets/components/_modal.scss
+++ b/app/assets/stylesheets/components/_modal.scss
@@ -74,7 +74,7 @@
   }
 
   hr {
-    border-color: $teal;
+    border-color: color('info');
   }
 }
 
@@ -84,7 +84,7 @@
   }
 
   hr {
-    border-color: $yellow;
+    border-color: color('warning');
   }
 }
 
diff --git a/app/assets/stylesheets/email.css.scss b/app/assets/stylesheets/email.css.scss
index 2921d196acd..f1ae38d61e7 100644
--- a/app/assets/stylesheets/email.css.scss
+++ b/app/assets/stylesheets/email.css.scss
@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/email';
 @import 'foundation-emails/scss/foundation-emails';
 
diff --git a/app/assets/stylesheets/variables/_app.scss b/app/assets/stylesheets/variables/_app.scss
index f029af97194..29152ee8a55 100644
--- a/app/assets/stylesheets/variables/_app.scss
+++ b/app/assets/stylesheets/variables/_app.scss
@@ -25,8 +25,6 @@ $border-radius-xl: 16px !default;
 $border-radius-xxl: 24px !default;
 $border-color: #cedced !default;
 
-$field-focus-color: $blue !default;
-
 $container-skinny-width: 620px !default;
 $container-xskinny-width: 416px !default;
 $container-xxskinny-width: 296px !default;
diff --git a/app/assets/stylesheets/variables/_colors.scss b/app/assets/stylesheets/variables/_colors.scss
deleted file mode 100644
index 421f741d0b0..00000000000
--- a/app/assets/stylesheets/variables/_colors.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$blue: #0071bb !default;
-$blue-light: #ebf3fa !default;
-$navy: #112e51 !default;
-$teal: #00bfe7 !default;
-$yellow: #e1ce28 !default;
-$red: #e21c3d !default;
-$white: #ffffff !default;
-$gray: #5b616a !default;
-$black: #111111 !default;
-$red: #ff0000 !default;
-$red-lightest: #fff7f8 !default;
diff --git a/app/assets/stylesheets/variables/_email.scss b/app/assets/stylesheets/variables/_email.scss
index 619fd4c0d5f..e0a1aa7b02f 100644
--- a/app/assets/stylesheets/variables/_email.scss
+++ b/app/assets/stylesheets/variables/_email.scss
@@ -15,14 +15,20 @@
 // 1. Global
 // ---------
 
-$primary-color: $blue;
-$secondary-color: $navy;
+$primary-color: #0071bb;
+$secondary-color: #112e51;
 $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
 $light-gray: #f3f3f3;
+$black: #111111;
+$white: #ffffff;
+$gray: #5b616a;
 $medium-gray: #cacaca;
 $dark-gray: #212121;
+$blue-light: #ebf3fa;
+$red: #e21c3d;
+$red-lightest: #fff7f8;
 $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;
diff --git a/app/components/status_page_component.rb b/app/components/status_page_component.rb
index 21e88577beb..f546952bac5 100644
--- a/app/components/status_page_component.rb
+++ b/app/components/status_page_component.rb
@@ -1,7 +1,8 @@
 class StatusPageComponent < BaseComponent
   ICONS = {
-    warning: [],
-    error: [:lock],
+    info: [:question],
+    warning: [nil],
+    error: [nil, :lock],
   }.freeze
 
   renders_one :header, ::PageHeadingComponent
@@ -17,7 +18,7 @@ def initialize(status: :error, icon: nil)
       raise ArgumentError, "`status` #{status} is invalid, expected one of #{ICONS.keys}"
     end
 
-    if icon && !ICONS[status].include?(icon)
+    if !ICONS[status].include?(icon)
       raise ArgumentError, "`icon` #{icon} is invalid, expected one of #{ICONS[status]}"
     end
 
@@ -31,6 +32,7 @@ def icon_src
 
   def icon_alt
     # i18n-tasks-use t('components.status_page.icons.error')
+    # i18n-tasks-use t('components.status_page.icons.question')
     # i18n-tasks-use t('components.status_page.icons.warning')
     # i18n-tasks-use t('components.status_page.icons.lock')
     t(icon || status, scope: [:components, :status_page, :icons])
diff --git a/app/views/idv/cancellations/destroy.html.erb b/app/views/idv/cancellations/destroy.html.erb
index 7fb76ce6add..43c968caaba 100644
--- a/app/views/idv/cancellations/destroy.html.erb
+++ b/app/views/idv/cancellations/destroy.html.erb
@@ -9,7 +9,7 @@
         <p><%= t('doc_auth.instructions.switch_back') %></p>
         <%= image_tag(asset_url('idv/switch.png'), width: 193) %>
       <% else %>
-        <ul class="red-dots margin-bottom-2">
+        <ul class="usa-list">
           <li><%= t('idv.cancel.warnings.warning_2') %></li>
           <li><%= t('idv.cancel.warnings.warning_3', app_name: APP_NAME) %></li>
           <li><%= t('idv.cancel.warnings.warning_4', app_name: APP_NAME) %></li>
diff --git a/app/views/idv/cancellations/new.html.erb b/app/views/idv/cancellations/new.html.erb
index 13ae10bdb3f..c324529ec5c 100644
--- a/app/views/idv/cancellations/new.html.erb
+++ b/app/views/idv/cancellations/new.html.erb
@@ -22,7 +22,7 @@
         <p><%= t('idv.cancel.warnings.hybrid') %></p>
       <% else %>
         <p class="margin-bottom-1 text-bold"><%= t('sign_up.cancel.warning_header') %></p>
-        <ul class="yellow-dots">
+        <ul class="usa-list">
           <li><%= t('idv.cancel.warnings.warning_1') %></li>
           <li><%= t('idv.cancel.warnings.warning_2') %></li>
           <li><%= t('idv.cancel.warnings.warning_3', app_name: APP_NAME) %></li>
diff --git a/app/views/idv/forgot_password/new.html.erb b/app/views/idv/forgot_password/new.html.erb
index edcbfd81e75..056ce94d1de 100644
--- a/app/views/idv/forgot_password/new.html.erb
+++ b/app/views/idv/forgot_password/new.html.erb
@@ -1,21 +1,24 @@
 <% title t('titles.idv.reset_password') %>
 
-<%= image_tag(asset_url('alert/forgot.svg'), width: 54, class: 'margin-bottom-2') %>
+<%= render StatusPageComponent.new(status: :info, icon: :question) do |c| %>
+  <% c.header { t('idv.forgot_password.modal_header') } %>
 
-<%= render PageHeadingComponent.new.with_content(t('idv.forgot_password.modal_header')) %>
+  <ul class="usa-list">
+    <% t('idv.forgot_password.warnings').each do |warning| %>
+      <li><%= warning %></li>
+    <% end %>
+  </ul>
 
-<hr>
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         link_to(idv_review_path, **tag_options, &block)
+       end,
+     ) { t('idv.forgot_password.try_again') } %>
 
-<ul class="usa-list--unstyled teal-dots">
-  <li><%= t('idv.forgot_password.warnings.warning_1') %></li>
-  <li><%= t('idv.forgot_password.warnings.warning_2') %></li>
-</ul>
-
-<div class='margin-top-4'>
-  <%= link_to t('idv.forgot_password.try_again'), idv_review_path,
-              class: 'usa-button usa-button--big usa-button--wide' %>
-</div>
-<div class='margin-top-2'>
-  <%= button_to t('idv.forgot_password.reset_password'), idv_forgot_password_path,
-                method: :post, class: 'usa-button usa-button--big usa-button--wide usa-button--outline' %>
-</div>
+  <% c.action_button(
+       action: ->(**tag_options, &block) do
+         button_to(idv_forgot_password_path, method: :post, **tag_options, &block)
+       end,
+       outline: true,
+     ) { t('idv.forgot_password.reset_password') } %>
+<% end %>
diff --git a/config/locales/components/en.yml b/config/locales/components/en.yml
index be115e26063..d78f6ab3b0c 100644
--- a/config/locales/components/en.yml
+++ b/config/locales/components/en.yml
@@ -7,6 +7,7 @@ en:
       icons:
         error: Error
         lock: Lock
+        question: Question
         warning: Warning
     troubleshooting_options:
       default_heading: 'Having trouble? Here’s what you can do:'
diff --git a/config/locales/components/es.yml b/config/locales/components/es.yml
index c1007e6480c..fb3761c91db 100644
--- a/config/locales/components/es.yml
+++ b/config/locales/components/es.yml
@@ -7,6 +7,7 @@ es:
       icons:
         error: Error
         lock: Candado
+        question: Pregunta
         warning: Advertencia
     troubleshooting_options:
       default_heading: '¿Tiene alguna dificultad? Esto es lo que puede hacer:'
diff --git a/config/locales/components/fr.yml b/config/locales/components/fr.yml
index 04fc04e85d8..29e1071c6bc 100644
--- a/config/locales/components/fr.yml
+++ b/config/locales/components/fr.yml
@@ -7,6 +7,7 @@ fr:
       icons:
         error: Erreur
         lock: Serrure
+        question: Question
         warning: Avertissement
     troubleshooting_options:
       default_heading: 'Des difficultés? Voici ce que vous pouvez faire:'
diff --git a/config/locales/idv/en.yml b/config/locales/idv/en.yml
index 15eb6a5b3c3..e3d652b5a9d 100644
--- a/config/locales/idv/en.yml
+++ b/config/locales/idv/en.yml
@@ -69,9 +69,9 @@ en:
       reset_password: Reset password
       try_again: Try again
       warnings:
-        warning_1: If you forgot your password, you’ll need to reset it and fill out the
+        - If you forgot your password, you’ll need to reset it and fill out the
           form again.
-        warning_2: You’ll have to re-enter your personal information, like your name,
+        - You’ll have to re-enter your personal information, like your name,
           state-issued ID, etc.
     form:
       address1: Address
diff --git a/config/locales/idv/es.yml b/config/locales/idv/es.yml
index 308d4ae7ff1..478e11ee897 100644
--- a/config/locales/idv/es.yml
+++ b/config/locales/idv/es.yml
@@ -76,8 +76,8 @@ es:
       reset_password: Restablecer la contraseña
       try_again: Inténtalo de nuevo
       warnings:
-        warning_1: Si olvidó su contraseña, deberá restablecerla y completarla nuevamente.
-        warning_2: Tendrá que volver a ingresar su información personal, como su nombre,
+        - Si olvidó su contraseña, deberá restablecerla y completarla nuevamente.
+        - Tendrá que volver a ingresar su información personal, como su nombre,
           documento de identidad emitido por el estado, etc.
     form:
       address1: Dirección
diff --git a/config/locales/idv/fr.yml b/config/locales/idv/fr.yml
index 551dba68c97..c9855f7bfb8 100644
--- a/config/locales/idv/fr.yml
+++ b/config/locales/idv/fr.yml
@@ -79,9 +79,9 @@ fr:
       reset_password: Réinitialiser le mot de passe
       try_again: Réessayer
       warnings:
-        warning_1: Si vous avez oublié votre mot de passe, vous devrez le réinitialiser
+        - Si vous avez oublié votre mot de passe, vous devrez le réinitialiser
           et remplir à nouveau le formulaire.
-        warning_2: Vous devrez ressaisir vos informations personnelles, comme votre nom,
+        - Vous devrez ressaisir vos informations personnelles, comme votre nom,
           pièce d’identité officielle, etc.
     form:
       address1: Adresse
diff --git a/spec/components/status_page_component_spec.rb b/spec/components/status_page_component_spec.rb
index c6fdf34956d..5f4cc5e89fb 100644
--- a/spec/components/status_page_component_spec.rb
+++ b/spec/components/status_page_component_spec.rb
@@ -66,4 +66,10 @@
       render_inline StatusPageComponent.new(status: :warning, icon: :foo)
     end.to raise_error(ArgumentError)
   end
+
+  it 'raises error if no default icon associated with status' do
+    expect do
+      render_inline StatusPageComponent.new(status: :info)
+    end.to raise_error(ArgumentError)
+  end
 end
diff --git a/spec/i18n_spec.rb b/spec/i18n_spec.rb
index 0de8b7024e4..a19f6c95957 100644
--- a/spec/i18n_spec.rb
+++ b/spec/i18n_spec.rb
@@ -16,8 +16,9 @@ class BaseTask
       ALLOWED_UNTRANSLATED_KEYS = [
         { key: 'account.navigation.menu', locales: %i[fr] }, # "Menu" is "Menu" in French
         { key: 'doc_auth.headings.photo', locales: %i[fr] }, # "Photo" is "Photo" in French
-        { key: 'errors.alt.error', locales: %i[es] }, # "Error" is "Error" in Spanish
         { key: 'components.status_page.icons.error', locales: %i[es] }, # "Error" is "Error" in Spanish
+        { key: 'components.status_page.icons.question', locales: %i[fr] }, # "Question" is "Question" in French
+        { key: 'errors.alt.error', locales: %i[es] }, # "Error" is "Error" in Spanish
         { key: /^i18n\.locale\./ }, # Show locale options translated as that language
         { key: /^countries/ }, # Some countries have the same name across languages
         { key: 'links.contact', locales: %i[fr] }, # "Contact" is "Contact" in French