diff --git a/scss/utilities/_background.scss b/scss/utilities/_background.scss
index 9b79383..b4ceff1 100644
--- a/scss/utilities/_background.scss
+++ b/scss/utilities/_background.scss
@@ -1,69 +1,17 @@
 // Background Gradient Utilities
 
-.bg-gradient-primary {
-  background-color: $primary;
-  background-image: linear-gradient(180deg, $primary 10%, darken($primary, 15%) 100%);
-  background-size: cover;
-}
-
-.bg-gradient-success {
-  background-color: $success;
-  background-image: linear-gradient(180deg, $success 10%, darken($success, 15%) 100%);
-  background-size: cover;
-}
-
-.bg-gradient-info {
-  background-color: $info;
-  background-image: linear-gradient(180deg, $info 10%, darken($info, 15%) 100%);
-  background-size: cover;
-}
-
-.bg-gradient-warning {
-  background-color: $warning;
-  background-image: linear-gradient(180deg, $warning 10%, darken($warning, 15%) 100%);
-  background-size: cover;
-}
-
-.bg-gradient-danger {
-  background-color: $danger;
-  background-image: linear-gradient(180deg, $danger 10%, darken($danger, 15%) 100%);
-  background-size: cover;
+@each $color, $value in $theme-colors {
+  .bg-gradient-#{$color} {
+    background-color: $value;
+    background-image: linear-gradient(180deg, $value 10%, darken($value, 15%) 100%);
+    background-size: cover;
+  }
 }
 
 // Grayscale Background Utilities
 
-.bg-gray-100 {
-  background-color: $gray-100 !important;
-}
-
-.bg-gray-200 {
-  background-color: $gray-200 !important;
-}
-
-.bg-gray-300 {
-  background-color: $gray-300 !important;
-}
-
-.bg-gray-400 {
-  background-color: $gray-400 !important;
-}
-
-.bg-gray-500 {
-  background-color: $gray-500 !important;
-}
-
-.bg-gray-600 {
-  background-color: $gray-600 !important;
-}
-
-.bg-gray-700 {
-  background-color: $gray-700 !important;
-}
-
-.bg-gray-800 {
-  background-color: $gray-800 !important;
-}
-
-.bg-gray-900 {
-  background-color: $gray-900 !important;
+@each $level, $value in $grays {
+  .bg-gray-#{$level} {
+    background-color: $value !important;
+  }
 }
diff --git a/scss/utilities/_border.scss b/scss/utilities/_border.scss
index f8a7f1b..cede0e4 100644
--- a/scss/utilities/_border.scss
+++ b/scss/utilities/_border.scss
@@ -1,39 +1,7 @@
-.border-left-primary {
-  border-left: .25rem solid $primary !important;
-}
-
-.border-left-success {
-  border-left: .25rem solid $success !important;
-}
-
-.border-left-info {
-  border-left: .25rem solid $info !important;
-}
-
-.border-left-warning {
-  border-left: .25rem solid $warning !important;
-}
-
-.border-left-danger {
-  border-left: .25rem solid $danger !important;
-}
-
-.border-bottom-primary {
-  border-bottom: .25rem solid $primary !important;
-}
-
-.border-bottom-success {
-  border-bottom: .25rem solid $success !important;
-}
-
-.border-bottom-info {
-  border-bottom: .25rem solid $info !important;
-}
-
-.border-bottom-warning {
-  border-bottom: .25rem solid $warning !important;
-}
-
-.border-bottom-danger {
-  border-bottom: .25rem solid $danger !important;
+@each $color, $value in $theme-colors {
+  @each $position in ['left', 'bottom'] {
+    .border-#{$position}-#{$color} {
+      border-#{$position}: .25rem solid $value !important;
+    }
+  }
 }