diff --git a/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt b/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
index d18d9bc386..73018dc502 100644
--- a/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
+++ b/app/src/main/java/org/mozilla/fenix/theme/FirefoxTheme.kt
@@ -100,10 +100,18 @@ private val darkColorPalette = FirefoxColors(
     scrim = PhotonColors.DarkGrey90A95,
     gradientStart = PhotonColors.Violet70,
     gradientEnd = PhotonColors.Violet40,
+    layerWarning = PhotonColors.Yellow70A77,
+    layerConfirmation = PhotonColors.Green80,
+    layerError = PhotonColors.Pink80,
+    layerInfo = PhotonColors.Blue50A80,
     actionPrimary = PhotonColors.Violet60,
     actionSecondary = PhotonColors.LightGrey30,
     actionTertiary = PhotonColors.DarkGrey10,
     actionQuarternary = PhotonColors.DarkGrey80,
+    actionWarning = PhotonColors.Yellow40A41,
+    actionConfirmation = PhotonColors.Green70,
+    actionError = PhotonColors.Pink70A69,
+    actionInfo = PhotonColors.Blue30,
     formDefault = PhotonColors.LightGrey05,
     formSelected = PhotonColors.Violet40,
     formSurface = PhotonColors.DarkGrey05,
@@ -166,10 +174,18 @@ private val lightColorPalette = FirefoxColors(
     scrim = PhotonColors.DarkGrey30A95,
     gradientStart = PhotonColors.Violet70,
     gradientEnd = PhotonColors.Violet40,
+    layerWarning = PhotonColors.Yellow20,
+    layerConfirmation = PhotonColors.Green20,
+    layerError = PhotonColors.Red10,
+    layerInfo = PhotonColors.Blue50A44,
     actionPrimary = PhotonColors.Ink20,
     actionSecondary = PhotonColors.LightGrey30,
     actionTertiary = PhotonColors.LightGrey40,
     actionQuarternary = PhotonColors.LightGrey10,
+    actionWarning = PhotonColors.Yellow60A40,
+    actionConfirmation = PhotonColors.Green60,
+    actionError = PhotonColors.Red30,
+    actionInfo = PhotonColors.Blue50,
     formDefault = PhotonColors.DarkGrey90,
     formSelected = PhotonColors.Ink20,
     formSurface = PhotonColors.LightGrey50,
@@ -243,10 +259,18 @@ class FirefoxColors(
     scrim: Color,
     gradientStart: Color,
     gradientEnd: Color,
+    layerWarning: Color,
+    layerConfirmation: Color,
+    layerError: Color,
+    layerInfo: Color,
     actionPrimary: Color,
     actionSecondary: Color,
     actionTertiary: Color,
     actionQuarternary: Color,
+    actionWarning: Color,
+    actionConfirmation: Color,
+    actionError: Color,
+    actionInfo: Color,
     formDefault: Color,
     formSelected: Color,
     formSurface: Color,
@@ -332,6 +356,7 @@ class FirefoxColors(
     // Selected tab
     var layerAccentOpaque by mutableStateOf(layerAccentOpaque)
         private set
+
     var scrim by mutableStateOf(scrim)
         private set
 
@@ -343,6 +368,22 @@ class FirefoxColors(
     var gradientEnd by mutableStateOf(gradientEnd)
         private set
 
+    // Warning background
+    var layerWarning by mutableStateOf(layerWarning)
+        private set
+
+    // Confirmation background
+    var layerConfirmation by mutableStateOf(layerConfirmation)
+        private set
+
+    // Error Background
+    var layerError by mutableStateOf(layerError)
+        private set
+
+    // Info background
+    var layerInfo by mutableStateOf(layerInfo)
+        private set
+
     // Actions
 
     // Primary button, Snackbar, Floating action button, Chip selected
@@ -361,6 +402,22 @@ class FirefoxColors(
     var actionQuarternary by mutableStateOf(actionQuarternary)
         private set
 
+    // Warning button
+    var actionWarning by mutableStateOf(actionWarning)
+        private set
+
+    // Confirmation button
+    var actionConfirmation by mutableStateOf(actionConfirmation)
+        private set
+
+    // Error button
+    var actionError by mutableStateOf(actionError)
+        private set
+
+    // Info button
+    var actionInfo by mutableStateOf(actionInfo)
+        private set
+
     // Checkbox default, Radio button default
     var formDefault by mutableStateOf(formDefault)
         private set
@@ -556,10 +613,18 @@ class FirefoxColors(
         scrim = other.scrim
         gradientStart = other.gradientStart
         gradientEnd = other.gradientEnd
+        layerWarning = other.layerWarning
+        layerConfirmation = other.layerConfirmation
+        layerError = other.layerError
+        layerInfo = other.layerInfo
         actionPrimary = other.actionPrimary
         actionSecondary = other.actionSecondary
         actionTertiary = other.actionTertiary
         actionQuarternary = other.actionQuarternary
+        actionWarning = other.actionWarning
+        actionConfirmation = other.actionConfirmation
+        actionError = other.actionError
+        actionInfo = other.actionInfo
         formDefault = other.formDefault
         formSelected = other.formSelected
         formSurface = other.formSurface
@@ -625,10 +690,18 @@ class FirefoxColors(
         scrim: Color = this.scrim,
         gradientStart: Color = this.gradientStart,
         gradientEnd: Color = this.gradientEnd,
+        layerWarning: Color = this.layerWarning,
+        layerConfirmation: Color = this.layerConfirmation,
+        layerError: Color = this.layerError,
+        layerInfo: Color = this.layerInfo,
         actionPrimary: Color = this.actionPrimary,
         actionSecondary: Color = this.actionSecondary,
         actionTertiary: Color = this.actionTertiary,
         actionQuarternary: Color = this.actionQuarternary,
+        actionWarning: Color = this.actionWarning,
+        actionConfirmation: Color = this.actionConfirmation,
+        actionError: Color = this.actionError,
+        actionInfo: Color = this.actionInfo,
         formDefault: Color = this.formDefault,
         formSelected: Color = this.formSelected,
         formSurface: Color = this.formSurface,
@@ -689,10 +762,18 @@ class FirefoxColors(
         scrim = scrim,
         gradientStart = gradientStart,
         gradientEnd = gradientEnd,
+        layerWarning = layerWarning,
+        layerConfirmation = layerConfirmation,
+        layerError = layerError,
+        layerInfo = layerInfo,
         actionPrimary = actionPrimary,
         actionSecondary = actionSecondary,
         actionTertiary = actionTertiary,
         actionQuarternary = actionQuarternary,
+        actionWarning = actionWarning,
+        actionConfirmation = actionConfirmation,
+        actionError = actionError,
+        actionInfo = actionInfo,
         formDefault = formDefault,
         formSelected = formSelected,
         formSurface = formSurface,
diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
index 14518f3972..5f0b1734c8 100644
--- a/app/src/main/res/values-night/colors.xml
+++ b/app/src/main/res/values-night/colors.xml
@@ -23,6 +23,14 @@
     <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color>
     <!-- Tooltip -->
     <color name="fx_mobile_layer_color_gradient_end">@color/photonViolet40</color>
+    <!-- Warning background -->
+    <color name="fx_mobile_layer_color_warning" tools:ignore="UnusedResources">@color/photonYellow70A77</color>
+    <!-- Confirmation background -->
+    <color name="fx_mobile_layer_color_confirmation" tools:ignore="UnusedResources">@color/photonGreen80</color>
+    <!-- Error background -->
+    <color name="fx_mobile_layer_color_error" tools:ignore="UnusedResources">@color/photonPink80</color>
+    <!-- Info background -->
+    <color name="fx_mobile_layer_color_info" tools:ignore="UnusedResources">@color/photonBlue50A80</color>
 
     <!-- Action -->
     <!-- Primary button, Snackbar, Floating action button, Chip selected -->
@@ -32,7 +40,15 @@
     <!-- Filter -->
     <color name="fx_mobile_action_color_tertiary" tools:ignore="UnusedResources">@color/photonDarkGrey10</color>
     <!-- Chip -->
-    <color name="fx_mobile_action_quarternary" tools:ignore="UnusedResources">@color/photonDarkGrey80</color>
+    <color name="fx_mobile_action_color_quarternary" tools:ignore="UnusedResources">@color/photonDarkGrey80</color>
+    <!-- Warning button -->
+    <color name="fx_mobile_action_color_warning" tools:ignore="UnusedResources">@color/photonYellow40A41</color>
+    <!-- Confirmation button -->
+    <color name="fx_mobile_action_color_confirmation" tools:ignore="UnusedResources">@color/photonGreen70</color>
+    <!-- Error button -->
+    <color name="fx_mobile_action_color_error" tools:ignore="UnusedResources">@color/photonPink70A69</color>
+    <!-- Info button -->
+    <color name="fx_mobile_action_color_info" tools:ignore="UnusedResources">@color/photonBlue30</color>
     <!-- Checkbox default, Radio button default -->
     <color name="fx_mobile_action_color_form_default" tools:ignore="UnusedResources">@color/photonLightGrey05</color>
     <!-- Checkbox selected, Radio button selected -->
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 36c89975d6..7ec727cd88 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -23,6 +23,14 @@
     <color name="fx_mobile_layer_color_gradient_start">@color/photonViolet70</color>
     <!-- Tooltip -->
     <color name="fx_mobile_layer_color_gradient_end">@color/photonViolet40</color>
+    <!-- Warning background -->
+    <color name="fx_mobile_layer_color_warning" tools:ignore="UnusedResources">@color/photonYellow20</color>
+    <!-- Confirmation background -->
+    <color name="fx_mobile_layer_color_confirmation" tools:ignore="UnusedResources">@color/photonGreen20</color>
+    <!-- Error background -->
+    <color name="fx_mobile_layer_color_error" tools:ignore="UnusedResources">@color/photonRed10</color>
+    <!-- Info background -->
+    <color name="fx_mobile_layer_color_info" tools:ignore="UnusedResources">@color/photonBlue50A44</color>
 
     <!-- Action -->
     <!-- Primary button, Snackbar, Floating action button, Chip selected -->
@@ -32,7 +40,15 @@
     <!-- Filter -->
     <color name="fx_mobile_action_color_tertiary" tools:ignore="UnusedResources">@color/photonLightGrey40</color>
     <!-- Chip -->
-    <color name="fx_mobile_action_quarternary" tools:ignore="UnusedResources">@color/photonLightGrey10</color>
+    <color name="fx_mobile_action_color_quarternary" tools:ignore="UnusedResources">@color/photonLightGrey10</color>
+    <!-- Warning button -->
+    <color name="fx_mobile_action_color_warning" tools:ignore="UnusedResources">@color/photonYellow60A40</color>
+    <!-- Confirmation button -->
+    <color name="fx_mobile_action_color_confirmation" tools:ignore="UnusedResources">@color/photonGreen60</color>
+    <!-- Error button -->
+    <color name="fx_mobile_action_color_error" tools:ignore="UnusedResources">@color/photonRed30</color>
+    <!-- Info button -->
+    <color name="fx_mobile_action_color_info" tools:ignore="UnusedResources">@color/photonBlue50</color>
     <!-- Checkbox default, Radio button default -->
     <color name="fx_mobile_action_color_form_default" tools:ignore="UnusedResources">@color/photonDarkGrey90</color>
     <!-- Checkbox selected, Radio button selected -->