diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss
index 51c0cb02..f8dad9c6 100644
--- a/components/ExtraSummons/index.scss
+++ b/components/ExtraSummons/index.scss
@@ -1,5 +1,5 @@
 #ExtraSummons {
-  background: #ffebd9;
+  background: var(--subaura-orange-bg);
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -17,7 +17,7 @@
   }
 
   & > span {
-    color: #825b39;
+    color: var(--subaura-orange-text);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,10 +46,10 @@
   }
 
   .SummonUnit .SummonImage {
-    background: #facea7;
+    background: var(--subaura-orange-card-bg);
   }
 
   .SummonUnit .SummonImage .icon svg {
-    fill: #a8703f;
+    fill: var(--subaura-orange-secondary);
   }
 }
diff --git a/styles/themes.scss b/styles/themes.scss
index 6ec69ee8..bcef7ba3 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -32,6 +32,12 @@
   --extra-purple-secondary: #{$extra--purple--secondary--light};
   --extra-purple-text: #{$extra--purple--text--light};
 
+  --subaura-orange-bg: #{$subaura--orange--bg--light};
+  --subaura-orange-card-bg: #{$subaura--orange--card--bg--light};
+  --subaura-orange-primary: #{$subaura--orange--primary--light};
+  --subaura-orange-secondary: #{$subaura--orange--secondary--light};
+  --subaura-orange-text: #{$subaura--orange--text--light};
+
   --grid-border-color: #{$grid--border--color--light};
 
   --wind-hover-bg: #{$wind-bg-20};
@@ -82,6 +88,12 @@
   --extra-purple-secondary: #{$extra--purple--secondary--dark};
   --extra-purple-text: #{$extra--purple--text--dark};
 
+  --subaura-orange-bg: #{$subaura--orange--bg--dark};
+  --subaura-orange-card-bg: #{$subaura--orange--card--bg--dark};
+  --subaura-orange-primary: #{$subaura--orange--primary--dark};
+  --subaura-orange-secondary: #{$subaura--orange--secondary--dark};
+  --subaura-orange-text: #{$subaura--orange--text--dark};
+
   --grid-border-color: #{$grid--border--color--dark};
 
   --wind-hover-bg: #{$wind-bg-00};
diff --git a/styles/variables.scss b/styles/variables.scss
index ccc9ebbb..32a3c22e 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -37,7 +37,7 @@ $grey-95: #fafafa;
 $grey-100: white;
 
 // Purple -- Additional Weapons
-$purple-00: #332f7c;
+$purple-00: #25224e;
 $purple-10: #4f3c79;
 $purple-20: #635fb7;
 $purple-30: #8c86ff;
@@ -45,6 +45,15 @@ $purple-40: #7471c7;
 $purple-80: #d5d3f6;
 $purple-90: #ecebff;
 
+// Orange -- Subaura Summons
+$orange-00: #201710;
+$orange-10: #6b401b;
+$orange-30: #825b39;
+$orange-40: #925a2a;
+$orange-50: #a8703f;
+$orange-80: #facea7;
+$orange-90: #ffebd9;
+
 // Colors -- Interface
 $blue: #275dc5;
 $red: #ff6161;
@@ -135,6 +144,17 @@ $extra--purple--primary--dark: $purple-00;
 $extra--purple--secondary--dark: $purple-10;
 $extra--purple--text--dark: $purple-00;
 
+$subaura--orange--bg--light: $orange-90;
+$subaura--orange--card--bg--light: $orange-80;
+$subaura--orange--primary--light: $orange-30;
+$subaura--orange--secondary--light: $orange-50;
+$subaura--orange--text--light: $orange-30;
+$subaura--orange--bg--dark: $orange-10;
+$subaura--orange--card--bg--dark: $orange-30;
+$subaura--orange--primary--dark: $orange-00;
+$subaura--orange--secondary--dark: $orange-10;
+$subaura--orange--text--dark: $orange-00;
+
 $text--primary--color--light: $grey-30;
 $text--primary--color--dark: $grey-90;