diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
index 02b0cae..2f961e0 100644
--- a/src/assets/styles/_buttons.scss
+++ b/src/assets/styles/_buttons.scss
@@ -7,12 +7,11 @@
 }
 
 .btn-primary {
-  fill: $white;
+  fill: currentColor;
 }
 
 .btn-secondary {
-  fill: $white;
-  @extend .btn-secondary-dark;
+  fill: currentColor;
 }
 
 .btn-link {
diff --git a/src/assets/styles/_colors.scss b/src/assets/styles/_colors.scss
index e27984b..28bfe89 100644
--- a/src/assets/styles/_colors.scss
+++ b/src/assets/styles/_colors.scss
@@ -1,115 +1,74 @@
-// Custom Color system
+// SASS Color Variables
 $black: #000;
 $white: #fff;
 
+$blue-100: #eff2fb;
+$blue-500: #2d60e5;
+
+$green-100: #ecfdf1;
+$green-500: #0a7d06;
+
+$red-100: #feeeed;
+$red-500: #da1416;
+
+$yellow-100: #fff8e4;
+$yellow-500: #efc100;
+
 $gray-100: #fafafa;
 $gray-200: #f4f4f4;
 $gray-300: #dcdee0;
-$gray-400: #cccccc;
-$gray-500: #B3B3B3;
+$gray-400: #ccc;
+$gray-500: #b3b3b3;
 $gray-600: #999999;
 $gray-700: #666666;
 $gray-800: #333333;
 $gray-900: #161616;
 
-$blue-10: #eff2fb;
-$blue-20: #ccd7f4;
-$blue-30: #7295f1;
-$blue-40: #2d60e5;
-$blue-50: #1d3458;
-$blue-100: #1b2834;
-$blues: (
-  "100": $blue-10,
-  "200": $blue-20,
-  "300": $blue-30,
-  "400": $blue-40,
-  "500": $blue-50,
-  "900": $blue-100
-);
-
-// Accent colors
-$teal-20: #ccf0f5;
-$teal-50: #00b6cb;
-$teal-70: #098292;
-$teals: (
-  "200": $teal-20,
-  "500": $teal-50,
-  "700": $teal-70
-);
-
-$green-50: #0a7d06;
-$green-20: #c6e8c5;
-$green-10: #ecfdf1;
-$greens: (
-  "100": $green-10,
-  "200": $green-20,
-  "500": $green-50
-);
-
-$yellow-70: #db7c00;
-$yellow-50: #fedf39;
-$yellow-20: #fff8e4;
-$yellow-10: #fff8e4;
-$yellows: (
-  "100": $yellow-10,
-  "200": $yellow-20,
-  "500": $yellow-50,
-  "700": $yellow-70
-);
-
-$red-10: #fce9e9;
-$red-20: #fad3d3;
-$red-50: #da1416;
-$reds: (
-  "100": $red-10,
-  "200": $red-20,
-  "500": $red-50
-);
-
-$blue: $blue-40;
-$red: $red-50;
-$yellow: $yellow-50;
-$green: $green-50;
-$teal: $teal-50;
-$gray: $gray-400;
+// SASS Base Color Variables
+$blue: $blue-500;
+$green: $green-500;
+$red: $red-500;
+$yellow: $yellow-500;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $colors: (
   "blue": $blue,
+  "green": $green,
   "red": $red,
   "yellow": $yellow,
-  "green": $green,
-  "teal": $teal,
-  "white": $white,
-  "gray": $gray
 );
 
-$primary: $blue;
-$secondary: $gray-600;
-$secondary-dark: $gray-800;
-$secondary-light: $gray-200;
-$success: $green;
-$info: $teal;
-$warning: $yellow;
+// SASS Theme Color Variables
+// Can be used as variants
 $danger: $red;
-$light: $gray-100;
 $dark: $gray-900;
+$info: $blue;
+$light: $gray-100;
+$primary: $blue;
+$secondary: $gray-800;
+$success: $green;
+$warning: $yellow;
+
+// Sass Color Variable Accents
+// Used for component styles and are
+// not available as variants
+$danger-light: $red-100;
+$info-light: $blue-100;
+$warning-light: $yellow-100;
+$success-light: $green-100;
 
 // Bootstrap will generate CSS variables for
 // all of the colors in this map.
 // https://getbootstrap.com/docs/4.0/getting-started/theming/#css-variables
 $theme-colors: (
   "primary": $primary,
-  "primary-dark": $blue-100,
-  "primary-light": $blue-10,
   "secondary": $secondary,
-  "secondary-dark": $secondary-dark,
-  "secondary-light": $secondary-light,
-  "danger": $danger,
-  "warning": $warning,
-  "info": $info,
   "dark": $dark,
-  "light": $light
+  "light": $light,
+  "danger": $danger,
+  "info": $info,
+  "success": $success,
+  "warning": $warning
 );
diff --git a/src/assets/styles/_form-components.scss b/src/assets/styles/_form-components.scss
index 35274e7..d9ae9d4 100644
--- a/src/assets/styles/_form-components.scss
+++ b/src/assets/styles/_form-components.scss
@@ -17,7 +17,7 @@
 .custom-control-label,
 .form-control {
   //important needed to override validation colors on radio labels
-  color: $gray-900 !important;
+  color: $dark !important;
   font-size: 16px;
   border-color: $gray-400 !important;
   &.is-invalid,
diff --git a/src/assets/styles/_functions.scss b/src/assets/styles/_functions.scss
deleted file mode 100644
index 8652a8b..0000000
--- a/src/assets/styles/_functions.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-// Functions for getting colors from custom maps
-// Bootstrap has a gray function and colors, but we have
-// added new theme colors and helper functions. Using
-// get-{color}($key: "100") because using the color name only
-// {color}(key: "100"} convention that bootstrap does caused
-// the compilation to fail for blue, red, and green.
-//
-// https://getbootstrap.com/docs/4.0/getting-started/theming/#functions
-
-// Blues
-@function get-blue($key: "100") {
-  @return map-get($blues, $key);
-}
-
-// Reds
-@function get-red($key: "100") {
-  @return map-get($reds, $key);
-}
-
-// Greens
-@function get-green($key: "100") {
-  @return map-get($greens, $key);
-}
-
-// Yellows
-@function get-yellow($key: "100") {
-  @return map-get($yellows, $key);
-}
-
-// Teals
-@function get-teal($key: "200") {
-  @return map-get($teals, $key);
-}
diff --git a/src/assets/styles/_modal.scss b/src/assets/styles/_modal.scss
index b20327e..5d3b601 100644
--- a/src/assets/styles/_modal.scss
+++ b/src/assets/styles/_modal.scss
@@ -1,7 +1,7 @@
 .modal-header {
   .close {
     font-weight: normal;
-    color: $gray-900;
+    color: $dark;
     opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 0924070..66cebda 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -1,6 +1,5 @@
 @import "./variables";
 @import "~bootstrap/scss/functions";
-@import "./functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 @import "./motion";
diff --git a/src/assets/styles/_table.scss b/src/assets/styles/_table.scss
index 069a37c..528cb80 100644
--- a/src/assets/styles/_table.scss
+++ b/src/assets/styles/_table.scss
@@ -13,6 +13,6 @@
 .thead-light.thead-light {
   th {
     border: none;
-    color: $gray-900;
+    color: $dark;
   }
 }
\ No newline at end of file
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index aa8d9f8..08c8256 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -157,7 +157,7 @@
 }
 
 .nav-trigger {
-  fill: $white;
+  fill: $light;
   width: $header-height;
   height: $header-height;
   transition: none;
@@ -167,8 +167,8 @@
   }
 
   &:hover {
-    fill: $white;
-    background-color: $gray-900;
+    fill: $light;
+    background-color: $dark;
   }
 
   @include media-breakpoint-up($responsive-layout-bp) {
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 173a625..48b94c3 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -195,16 +195,16 @@
   font-weight: $headings-font-weight;
   padding-left: $spacer; // defining consistent padding for links and buttons
   padding-right: $spacer;
-  color: $secondary-dark;
+  color: $secondary;
 
   &:hover {
     background-color: $primary-nav-hover;
-    color: $secondary-dark;
+    color: $dark;
   }
 
   &:focus {
     box-shadow: $btn-focus-box-shadow;
-    color: $secondary-dark;
+    color: $dark;
   }
 }
 
@@ -212,8 +212,8 @@
 .nav-link--current:hover,
 .nav-link--current:focus {
   font-weight: $headings-font-weight;
-  background-color: $secondary-dark;
-  color: $secondary-light;
+  background-color: $secondary;
+  color: $light;
   cursor: default;
 
   &::before {
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index d59eaec..96074ee 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -39,7 +39,11 @@
     fill: $danger;
   }
   &.secondary {
-    fill: $secondary;
+    fill: $gray-600;
+
+    svg {
+      transform: rotate(-45deg);
+    }
   }
   &.warning {
     fill: $warning;
diff --git a/src/main.js b/src/main.js
index 84adb40..ab1f296 100644
--- a/src/main.js
+++ b/src/main.js
@@ -55,7 +55,7 @@
 Vue.use(BadgePlugin);
 Vue.use(ButtonPlugin);
 Vue.use(BVConfigPlugin, {
-  BFormText: { textVariant: 'black' },
+  BFormText: { textVariant: 'secondary' },
   BTable: {
     headVariant: 'light',
     footVariant: 'light'
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index bed58dc..2018720 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -142,11 +142,7 @@
 <style lang="scss" scoped>
 .login-container {
   @include media-breakpoint-up(md) {
-    background: linear-gradient(
-      to right,
-      var(--light) 50%,
-      var(--secondary-light) 50%
-    );
+    background: linear-gradient(to right, $light 50%, $container-bgd 50%);
   }
 }
 
diff --git a/src/views/Overview/OverviewQuickLinks.vue b/src/views/Overview/OverviewQuickLinks.vue
index 32d5af4..9f3ba52 100644
--- a/src/views/Overview/OverviewQuickLinks.vue
+++ b/src/views/Overview/OverviewQuickLinks.vue
@@ -83,7 +83,7 @@
 }
 
 .quicklinks {
-  background: $gray-200;
+  background: $container-bgd;
   display: grid;
   grid-gap: 1rem;
   padding: 1rem;