diff --git a/components/SegmentedControl/index.scss b/components/SegmentedControl/index.scss
index 2d822b27..80633e28 100644
--- a/components/SegmentedControl/index.scss
+++ b/components/SegmentedControl/index.scss
@@ -4,7 +4,7 @@
 }
 
 .SegmentedControl {
-  background: white;
+  background: var(--card-bg);
   border-radius: $unit * 3;
   display: inline-flex;
   padding: 3px;
@@ -12,77 +12,76 @@
   user-select: none;
   overflow: hidden;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  z-index: 1;
 
   &.fire {
     .Segment input:checked + label {
-      background: $fire-bg-dark;
-      color: $fire-text-dark;
+      background: $fire-bg-10;
+      color: $fire-text-10;
     }
 
     .Segment:hover label {
-      background: $fire-bg-light;
-      color: $fire-text-light;
+      background: var(--fire-hover-bg);
+      color: var(--fire-hover-text);
     }
   }
 
   &.water {
     .Segment input:checked + label {
-      background: $water-bg-dark;
-      color: $water-text-dark;
+      background: $water-bg-10;
+      color: $water-text-10;
     }
 
     .Segment:hover label {
-      background: $water-bg-light;
-      color: $water-text-light;
+      background: var(--water-hover-bg);
+      color: var(--water-hover-text);
     }
   }
 
   &.earth {
     .Segment input:checked + label {
-      background: $earth-bg-dark;
-      color: $earth-text-dark;
+      background: $earth-bg-10;
+      color: $earth-text-10;
     }
 
     .Segment:hover label {
-      background: $earth-bg-light;
-      color: $earth-text-light;
+      background: var(--earth-hover-bg);
+      color: var(--earth-hover-text);
     }
   }
 
   &.wind {
     .Segment input:checked + label {
-      background: $wind-bg-dark;
-      color: $wind-text-dark;
+      background: $wind-bg-10;
+      color: $wind-text-10;
     }
 
     .Segment:hover label {
-      background: $wind-bg-light;
-      color: $wind-text-light;
+      background: var(--wind-hover-bg);
+      color: var(--wind-hover-text);
     }
   }
 
   &.light {
     .Segment input:checked + label {
-      background: $light-bg-dark;
-      color: $light-text-dark;
+      background: $light-bg-10;
+      color: $light-text-10;
     }
 
     .Segment:hover label {
-      background: $light-bg-light;
-      color: $light-text-light;
+      background: var(--light-hover-bg);
+      color: var(--light-hover-text);
     }
   }
 
   &.dark {
     .Segment input:checked + label {
-      background: $dark-bg-dark;
-      color: $dark-text-dark;
+      background: $dark-bg-10;
+      color: $dark-text-10;
     }
 
     .Segment:hover label {
-      background: $dark-bg-light;
-      color: $dark-text-light;
+      background: var(--dark-hover-bg);
+      color: var(--dark-hover-text);
     }
   }
 }
diff --git a/styles/variables.scss b/styles/variables.scss
index c871bc48..c1699570 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -33,35 +33,48 @@ $red: #ff6161;
 $error: #d13a3a;
 
 // Colors: Elements
-$wind-text-dark: #006a43;
-$wind-text-light: #1dc688;
-$wind-bg-dark: #4cffbf;
-$wind-bg-light: #cdffed;
 
-$fire-text-dark: #6e0000;
-$fire-text-light: #ec5c5c;
-$fire-bg-dark: #ff4d4d;
-$fire-bg-light: #ffcdcd;
+$wind-text-00: #023e28;
+$wind-text-10: #006a43;
+$wind-text-20: #1dc688;
+$wind-bg-00: #4cffbf55;
+$wind-bg-10: #4cffbf;
+$wind-bg-20: #cdffed;
 
-$water-text-dark: #004b77;
-$water-text-light: #5cb7ec;
-$water-bg-dark: #6cc9ff;
-$water-bg-light: #cdedff;
+$fire-text-00: #3f0202;
+$fire-text-10: #6e0000;
+$fire-text-20: #ec5c5c;
+$fire-bg-00: #ff4d4d55;
+$fire-bg-10: #ff4d4d;
+$fire-bg-20: #ffcdcd;
 
-$earth-text-dark: #662a00;
-$earth-text-light: #ec985c;
-$earth-bg-dark: #fd9f5b;
-$earth-bg-light: #ffe2cd;
+$water-text-00: #03263b;
+$water-text-10: #004b77;
+$water-text-20: #5cb7ec;
+$water-bg-00: #6cc9ff55;
+$water-bg-10: #6cc9ff;
+$water-bg-20: #cdedff;
 
-$light-text-dark: #716500;
-$light-text-light: #c5b20c;
-$light-bg-dark: #ffed4c;
-$light-bg-light: #fffacd;
+$earth-text-00: #321602;
+$earth-text-10: #662a00;
+$earth-text-20: #ec985c;
+$earth-bg-00: #fd9f5b55;
+$earth-bg-10: #fd9f5b;
+$earth-bg-20: #ffe2cd;
 
-$dark-text-dark: #560075;
-$dark-text-light: #c65cec;
-$dark-bg-dark: #d565fb;
-$dark-bg-light: #f2cdff;
+$light-text-00: #433d02;
+$light-text-10: #716500;
+$light-text-20: #c5b20c;
+$light-bg-00: #ffed4c55;
+$light-bg-10: #ffed4c;
+$light-bg-20: #fffacd;
+
+$dark-text-00: #260134;
+$dark-text-10: #560075;
+$dark-text-20: #c65cec;
+$dark-bg-00: #d565fb55;
+$dark-bg-10: #d565fb;
+$dark-bg-20: #f2cdff;
 
 $normal: 400;
 $medium: 500;