diff --git a/awx/ui/static/js/dashboard/graphs/dashboard-graphs.block.less b/awx/ui/static/js/dashboard/graphs/dashboard-graphs.block.less
index e4167e5ed1..1ecbf92f9d 100644
--- a/awx/ui/static/js/dashboard/graphs/dashboard-graphs.block.less
+++ b/awx/ui/static/js/dashboard/graphs/dashboard-graphs.block.less
@@ -1,5 +1,7 @@
 /** @define DashboardGraphs */
 
+@import "shared/branding/colors.less";
+
 .DashboardGraphs {
     display: flex;
     flex-direction: column;
@@ -16,13 +18,12 @@
 .DashboardGraphs-tab {
     flex: 1;
     padding: 10px;
-    border-right: solid 1px #a9a9a9;
-    border-bottom: solid 1px #a9a9a9;
+    border-right: solid 1px @disabled-item-border;
+    border-bottom: solid 1px @disabled-item-border;
     text-align: center;
     font-size: 20px;
-    background-color: #ccc;
-    color: #545454;
-    background-color: #EAEAEA;
+    color: @disabled-item-text;
+    background-color: @disabled-item-background;
 }
 
 .DashboardGraphs-tab--firstTab {
@@ -40,8 +41,8 @@
 }
 
 .DashboardGraphs-tab.is-selected {
-    background-color: #fff;
-    color: #000;
+    background-color: @enabled-item-background;
+    color: @enabled-item-text;
     border-bottom: 0;
 }
 
diff --git a/awx/ui/static/js/shared/branding/colors.less b/awx/ui/static/js/shared/branding/colors.less
index 39c25cdd58..9d67873631 100644
--- a/awx/ui/static/js/shared/branding/colors.less
+++ b/awx/ui/static/js/shared/branding/colors.less
@@ -16,6 +16,14 @@
 @well-border:  #e3e3e3;
 @white:        #FFF;
 
+@disabled-item-background: #eaeaea;
+@disabled-item-text: #545454;
+@disabled-item-border: #a9a9a9;
+
+@enabled-item-background: #fff;
+@enabled-item-text: #000;
+@enabled-item-border: #a9a9a9;
+
 @tip-background: #0088CC;
 @tip-color: #fff;
 @green: #60D66F;
diff --git a/awx/ui/static/js/system-tracking/fact-module-filter.block.less b/awx/ui/static/js/system-tracking/fact-module-filter.block.less
index 6545cf4245..a89cf51e71 100644
--- a/awx/ui/static/js/system-tracking/fact-module-filter.block.less
+++ b/awx/ui/static/js/system-tracking/fact-module-filter.block.less
@@ -1,19 +1,28 @@
 /** @define FactModuleFilter */
 
+@import "shared/branding/colors.less";
+
 .FactModuleFilter {
     width: 100%;
     display: flex;
     flex-flow: row wrap;
     margin-bottom: 2.8rem;
+
     &-module {
+
+        background-color: @disabled-item-background;
+        color: @disabled-item-text;
+        border-color: @disabled-item-border;
+
         flex: 1 1 20%;
         @media screen and (max-width: 750px) {
             flex-basis: 50%;
         }
         &--isActive {
             // copied from bootstrap's .btn:focus
-            background-color: #ebebeb;
-            border-color: #adadad;
+            background-color: @enabled-item-background;
+            border-color: @enabled-item-border;
+            color: @enabled-item-text;
             z-index: 2;
         }
     }