diff --git a/__snapshots__/alert--with-body-chromium.png b/__snapshots__/alert--with-body-chromium.png
index bd2a02b6..ba4b85cd 100644
Binary files a/__snapshots__/alert--with-body-chromium.png and b/__snapshots__/alert--with-body-chromium.png differ
diff --git a/__snapshots__/alert--with-body-firefox.png b/__snapshots__/alert--with-body-firefox.png
index 5ba659be..f1398012 100644
Binary files a/__snapshots__/alert--with-body-firefox.png and b/__snapshots__/alert--with-body-firefox.png differ
diff --git a/__snapshots__/alert--with-body-webkit.png b/__snapshots__/alert--with-body-webkit.png
index 62c91d41..25d446a9 100644
Binary files a/__snapshots__/alert--with-body-webkit.png and b/__snapshots__/alert--with-body-webkit.png differ
diff --git a/__snapshots__/alert--without-body-chromium.png b/__snapshots__/alert--without-body-chromium.png
index 947f3087..b316034b 100644
Binary files a/__snapshots__/alert--without-body-chromium.png and b/__snapshots__/alert--without-body-chromium.png differ
diff --git a/__snapshots__/alert--without-body-firefox.png b/__snapshots__/alert--without-body-firefox.png
index 50afa9ff..6f14e62b 100644
Binary files a/__snapshots__/alert--without-body-firefox.png and b/__snapshots__/alert--without-body-firefox.png differ
diff --git a/__snapshots__/alert--without-body-webkit.png b/__snapshots__/alert--without-body-webkit.png
index 8b6c1f0d..bba919a3 100644
Binary files a/__snapshots__/alert--without-body-webkit.png and b/__snapshots__/alert--without-body-webkit.png differ
diff --git a/__snapshots__/button--button-groups-chromium.png b/__snapshots__/button--button-groups-chromium.png
index fbe2b4b8..1234ffde 100644
Binary files a/__snapshots__/button--button-groups-chromium.png and b/__snapshots__/button--button-groups-chromium.png differ
diff --git a/__snapshots__/button--button-groups-firefox.png b/__snapshots__/button--button-groups-firefox.png
index 9898b64c..367a78bb 100644
Binary files a/__snapshots__/button--button-groups-firefox.png and b/__snapshots__/button--button-groups-firefox.png differ
diff --git a/__snapshots__/button--button-groups-webkit.png b/__snapshots__/button--button-groups-webkit.png
index c8fa1ebd..1ed3a205 100644
Binary files a/__snapshots__/button--button-groups-webkit.png and b/__snapshots__/button--button-groups-webkit.png differ
diff --git a/__snapshots__/button--buttons-chromium.png b/__snapshots__/button--buttons-chromium.png
index 62f2fc29..b6108787 100644
Binary files a/__snapshots__/button--buttons-chromium.png and b/__snapshots__/button--buttons-chromium.png differ
diff --git a/__snapshots__/button--buttons-firefox.png b/__snapshots__/button--buttons-firefox.png
index a43491e2..19f76e93 100644
Binary files a/__snapshots__/button--buttons-firefox.png and b/__snapshots__/button--buttons-firefox.png differ
diff --git a/__snapshots__/button--buttons-webkit.png b/__snapshots__/button--buttons-webkit.png
index 2e763189..8322258b 100644
Binary files a/__snapshots__/button--buttons-webkit.png and b/__snapshots__/button--buttons-webkit.png differ
diff --git a/__snapshots__/card--test-chromium.png b/__snapshots__/card--test-chromium.png
index 99388211..8d0d4b96 100644
Binary files a/__snapshots__/card--test-chromium.png and b/__snapshots__/card--test-chromium.png differ
diff --git a/__snapshots__/card--test-firefox.png b/__snapshots__/card--test-firefox.png
index a0956d7d..f3f64386 100644
Binary files a/__snapshots__/card--test-firefox.png and b/__snapshots__/card--test-firefox.png differ
diff --git a/__snapshots__/card--test-webkit.png b/__snapshots__/card--test-webkit.png
index dd3a783e..f278e3c5 100644
Binary files a/__snapshots__/card--test-webkit.png and b/__snapshots__/card--test-webkit.png differ
diff --git a/__snapshots__/dropdown--dropdowns-chromium.png b/__snapshots__/dropdown--dropdowns-chromium.png
index 54d0f4cf..021db5e8 100644
Binary files a/__snapshots__/dropdown--dropdowns-chromium.png and b/__snapshots__/dropdown--dropdowns-chromium.png differ
diff --git a/__snapshots__/dropdown--dropdowns-firefox.png b/__snapshots__/dropdown--dropdowns-firefox.png
index e44843f5..b4f0d69c 100644
Binary files a/__snapshots__/dropdown--dropdowns-firefox.png and b/__snapshots__/dropdown--dropdowns-firefox.png differ
diff --git a/__snapshots__/dropdown--dropdowns-webkit.png b/__snapshots__/dropdown--dropdowns-webkit.png
index 89ec8b3e..df3f2fee 100644
Binary files a/__snapshots__/dropdown--dropdowns-webkit.png and b/__snapshots__/dropdown--dropdowns-webkit.png differ
diff --git a/__snapshots__/input--disabled-chromium.png b/__snapshots__/input--disabled-chromium.png
index ac7bf64a..ea4cf7c3 100644
Binary files a/__snapshots__/input--disabled-chromium.png and b/__snapshots__/input--disabled-chromium.png differ
diff --git a/__snapshots__/input--disabled-firefox.png b/__snapshots__/input--disabled-firefox.png
index 5627049d..5db2069f 100644
Binary files a/__snapshots__/input--disabled-firefox.png and b/__snapshots__/input--disabled-firefox.png differ
diff --git a/__snapshots__/input--disabled-webkit.png b/__snapshots__/input--disabled-webkit.png
index 4a009808..5e438258 100644
Binary files a/__snapshots__/input--disabled-webkit.png and b/__snapshots__/input--disabled-webkit.png differ
diff --git a/__snapshots__/input--mail-chromium.png b/__snapshots__/input--mail-chromium.png
index 2fadc9b5..6cc18ae2 100644
Binary files a/__snapshots__/input--mail-chromium.png and b/__snapshots__/input--mail-chromium.png differ
diff --git a/__snapshots__/input--mail-firefox.png b/__snapshots__/input--mail-firefox.png
index 73577b4b..08c96f6b 100644
Binary files a/__snapshots__/input--mail-firefox.png and b/__snapshots__/input--mail-firefox.png differ
diff --git a/__snapshots__/input--mail-webkit.png b/__snapshots__/input--mail-webkit.png
index 717d33fc..d7427a76 100644
Binary files a/__snapshots__/input--mail-webkit.png and b/__snapshots__/input--mail-webkit.png differ
diff --git a/__snapshots__/input--not-valid-chromium.png b/__snapshots__/input--not-valid-chromium.png
index 5f6693ea..2ce3e007 100644
Binary files a/__snapshots__/input--not-valid-chromium.png and b/__snapshots__/input--not-valid-chromium.png differ
diff --git a/__snapshots__/input--not-valid-firefox.png b/__snapshots__/input--not-valid-firefox.png
index a6dc1acd..ae28e134 100644
Binary files a/__snapshots__/input--not-valid-firefox.png and b/__snapshots__/input--not-valid-firefox.png differ
diff --git a/__snapshots__/input--not-valid-webkit.png b/__snapshots__/input--not-valid-webkit.png
index 3f2c5718..62f98174 100644
Binary files a/__snapshots__/input--not-valid-webkit.png and b/__snapshots__/input--not-valid-webkit.png differ
diff --git a/src/components/alert/Alert.style.scss b/src/components/alert/Alert.style.scss
index 230df3fb..7ec2dff6 100644
--- a/src/components/alert/Alert.style.scss
+++ b/src/components/alert/Alert.style.scss
@@ -5,15 +5,12 @@
 
   padding: .5rem;
   margin-bottom: 1rem;
-  min-height: 1.5rem;
-
 
   &__heading {
     font-weight: 500;
   }
 
   &__header {
-    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -30,24 +27,20 @@
   }
 
   &__icon {
-    @include box(false);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: .25rem;
+    color: color($white);
+    width: 1.25rem;
+    height: 1.25rem;
     margin-right: .5rem;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
   }
 
   &__dismissible {
     @include box();
 
-    display: flex;
     width: 1rem;
     height: 1rem;
     padding: .25rem;
@@ -67,7 +60,7 @@
     @include box(false, $color);
 
     .alert__icon {
-      @include box(false, $color);
+      color: color($color);
     }
 
     .alert__content {
diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss
index 411bd9e3..d3bb8aec 100644
--- a/src/components/button/Button.style.scss
+++ b/src/components/button/Button.style.scss
@@ -10,10 +10,7 @@
   margin-bottom: 1rem;
   width: fit-content;
 
-  &--disabled {
-    opacity: 50%;
-    pointer-events: none;
-  }
+  @include disabled;
 
   &__icon + &__content {
     margin-left: .5rem;
@@ -22,19 +19,17 @@
   }
 
   &__icon {
-    @include box(false);
-
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 1rem;
-    height: 1rem;
-    padding: .25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: color($white);
     cursor: pointer;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
   }
 }
@@ -44,7 +39,7 @@
     @include box(true, $color);
 
     .button__icon {
-      @include box(false, $color);
+      color: color($color);
     }
 
   }
diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx
index 455281fc..d016053a 100644
--- a/src/components/card/Card.stories.tsx
+++ b/src/components/card/Card.stories.tsx
@@ -39,10 +39,10 @@ export const Test = () => {
         </ListGroup>
         <CardFooter>
             <ButtonGroup>
-                <Button>
+                <Button variant={"secondary"}>
                     Button
                 </Button>
-                <Button>
+                <Button variant={"secondary"}>
                     Button
                 </Button>
             </ButtonGroup>
diff --git a/src/components/dropdown/Dropdown.style.scss b/src/components/dropdown/Dropdown.style.scss
index 3ff03d68..8c2ae0f6 100644
--- a/src/components/dropdown/Dropdown.style.scss
+++ b/src/components/dropdown/Dropdown.style.scss
@@ -60,9 +60,7 @@
     border-top: 1px solid borderColor();
     border-bottom: 1px solid borderColor();
 
-    @include hoverAndActiveContent {
-      background: rgba($color, .1);
-    }
+    @include background($color, true);
 
     &:first-of-type {
       border-top: none;
diff --git a/src/components/input/Input.style.scss b/src/components/input/Input.style.scss
index 63c0592f..1ed8d7ff 100644
--- a/src/components/input/Input.style.scss
+++ b/src/components/input/Input.style.scss
@@ -7,10 +7,7 @@
     margin-bottom: 0;
   }
 
-  &--disabled {
-    pointer-events: none;
-    opacity: 50%;
-  }
+  @include disabled;
 
   &__control {
     display: flex;
@@ -48,21 +45,18 @@
   }
 
   &__icon {
-    @include box(false);
-
     display: flex;
-    width: 1rem;
-    height: auto;
+    width: 1.25rem;
+    height: 1.25rem;
     justify-content: center;
     align-items: center;
     aspect-ratio: 50/50;
-    padding: .25rem;
     margin-left: .5rem;
     pointer-events: none;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
 
   }
@@ -110,18 +104,6 @@
 
   &--not-valid {
 
-    .input__control {
-      border-color: borderColor(false);
-
-      @include hoverAndActiveContent {
-        border-color: borderColor(true);
-      }
-
-      @include activeContent {
-        outline-color: $error;
-      }
-    }
-
     .input__message {
       display: block;
       background: rgba($error, .1);
@@ -131,18 +113,6 @@
 
   &--valid {
 
-    .input__control {
-      border-color: borderColor(false);
-
-      @include hoverAndActiveContent {
-        border-color: borderColor(true);
-      }
-
-      @include activeContent {
-        outline-color: $success;
-      }
-    }
-
     .input__message {
       display: block;
       background: rgba($success, .1);
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index 4875aed3..5c51d6ae 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -3,24 +3,17 @@
 
 @mixin box($active: true, $color: $secondary) {
 
-  background: rgba($color, 10%);
+  background: mix($bodyBg, $color, 90%);
+  @include border($active);
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
   font-size: $secondaryFontSize;
-  -webkit-backdrop-filter: blur($borderRadius * 2);
-  backdrop-filter: blur($borderRadius * 2);
-  border: 1px solid borderColor();
   position: relative;
 
   @if ($active == true) {
     @include hoverAndActiveContent {
-      border: 1px solid borderColor(true);
-    }
-
-    @include activeContent {
-      outline: 1px solid $info;
-      outline-offset: 2px;
+      background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%));
     }
   }
 }
@@ -32,11 +25,45 @@
 }
 
 @mixin activeContent() {
-  &--active {
+  &:active, &--active {
     @content
   }
 }
 
-@function borderColor($hover: false) {
-  @return rgba($white, if($hover, 0.2, 0.1))
+@function borderColor($interacted: false) {
+  @return rgba($white, if($interacted, .2, .1))
+}
+
+@mixin border($interact: true) {
+
+  border: 1px solid borderColor();
+
+  @if ($interact) {
+    &:active, &--active {
+      border: 1px solid borderColor(true);
+    }
+  }
+}
+
+@function color($color, $opacity: 0.5) {
+  @return rgba(if($color == $primary, $white, $color), $opacity)
+}
+
+@mixin background($color: $primary, $interact: true) {
+  background: mix($bodyBg, $color, 90%);
+
+  @if ($interact == true) {
+    &:hover, &:active, &--active {
+      background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%));
+    }
+  }
+}
+
+@mixin disabled {
+
+  &--disabled {
+    opacity: 50%;
+    pointer-events: none;
+  }
+
 }