diff --git a/src/_colors.scss b/src/_colors.scss
index 12db9d0be..63b41a69d 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -5,6 +5,7 @@ $ui-blue-10percent: hsla(215, 100, 65, .1);
 $ui-blue-25percent:  hsla(215, 100, 65, .25);
 
 $ui-orange: hsla(38, 100, 55, 1); // #FFAB19 Control Primary
+$ui-orange-10percent: hsla(35, 90, 55, .1);
 $ui-orange-25percent: hsla(35, 90, 55, .25);
 
 $ui-light-gray: hsla(0, 0, 98, 1); //#FAFAFA
@@ -39,6 +40,7 @@ $overlay-gray: hsla(0, 0, 0, .75);
 /* Typography Colors */
 $header-gray: hsla(225, 15, 40, 1); //#575E75
 $type-gray: hsla(225, 15, 40, 1); //#575E75
+$type-gray-75percent: hsla(225, 15, 40, .75);
 $type-white: hsla(0, 100, 100, 1); //#FFF
 
 $link-blue: $ui-blue;
diff --git a/src/components/forms/charcount.scss b/src/components/forms/charcount.scss
index ff5d85e94..05d1a4bee 100644
--- a/src/components/forms/charcount.scss
+++ b/src/components/forms/charcount.scss
@@ -2,7 +2,7 @@
 
 .char-count {
     letter-spacing: 1px;
-    color: lighten($type-gray, 30%);
+    color: $type-gray-75percent;
     font-weight: 500;
 
     &.overmax {
diff --git a/src/components/forms/input.scss b/src/components/forms/input.scss
index 214365f28..3fd202c3e 100644
--- a/src/components/forms/input.scss
+++ b/src/components/forms/input.scss
@@ -2,7 +2,6 @@
 @import "../../frameless";
 
 $base-bg: $ui-light-gray;
-$pass-bg: lighten($ui-aqua, 35%);
 
 .row {
     label {
@@ -32,8 +31,7 @@ $pass-bg: lighten($ui-aqua, 35%);
     }
 
     &.pass {
-        border: 1px solid $active-dark-gray;
-        background-color: $pass-bg;
+        border: 1px solid $ui-aqua;
     }
 
     /* IE10/11-specific style resets */
diff --git a/src/components/social-message/social-message.scss b/src/components/social-message/social-message.scss
index b6cdcc871..258fa713e 100644
--- a/src/components/social-message/social-message.scss
+++ b/src/components/social-message/social-message.scss
@@ -41,7 +41,7 @@ a.social-messages-profile-link {
     color: $type-gray;
 
     &:hover {
-        color: darken($type-gray, 10);
+        color: $link-blue;
     }
 }
 
diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss
index b335718ee..671b3738b 100644
--- a/src/components/spinner/spinner.scss
+++ b/src/components/spinner/spinner.scss
@@ -18,13 +18,13 @@
             animation: circleFadeDelay 1.2s infinite ease-in-out both;
             margin: 0 auto;
             border-radius: 100%;
-            background-color: darken($ui-white, 8%);
+            background-color: $ui-gray;
             width: 15%;
             height: 15%;
             content: "";
 
             .white & {
-                background-color: $ui-blue-dark    
+                background-color: $ui-blue-dark
             }
         }
     }
@@ -37,7 +37,7 @@
             transform: rotate($rotation);
 
             &:before {
-                animation-delay: $delay; 
+                animation-delay: $delay;
             }
         }
 
@@ -54,5 +54,5 @@
 
     40% {
         opacity: 1;
-    } 
+    }
 }
diff --git a/src/components/ttt-tile/ttt-tile.scss b/src/components/ttt-tile/ttt-tile.scss
index 71bb685aa..148168675 100644
--- a/src/components/ttt-tile/ttt-tile.scss
+++ b/src/components/ttt-tile/ttt-tile.scss
@@ -106,7 +106,7 @@
     font-weight: 500;
 
     &:hover {
-        background-color: lighten($link-blue, 40%);
+        background-color: $ui-blue-10percent;
     }
 }
 
diff --git a/src/main.scss b/src/main.scss
index b7c074ec2..5a0f9cb64 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -74,7 +74,7 @@ p {
         padding: 1.25em;
 
         &.orange {
-            background-color: lighten($ui-orange, 30);
+            background-color: $ui-orange-10percent;
         }
     }
 
@@ -138,7 +138,7 @@ p {
 }
 
 ::selection {
-    background-color: lighten($ui-blue, 30);
+    background-color: $ui-blue-25percent;
 }
 
 ol,
diff --git a/src/views/conference/2016/schedule/schedule.scss b/src/views/conference/2016/schedule/schedule.scss
index aa4dc891d..d65a921d0 100644
--- a/src/views/conference/2016/schedule/schedule.scss
+++ b/src/views/conference/2016/schedule/schedule.scss
@@ -67,7 +67,7 @@
                 display: block;
 
                 &:hover {
-                    background-color: lighten($ui-blue, 40);
+                    background-color: $ui-blue-25percent;
                 }
             }
         }
diff --git a/src/views/conference/2017/index/index.scss b/src/views/conference/2017/index/index.scss
index 70695cb25..2d6abd032 100644
--- a/src/views/conference/2017/index/index.scss
+++ b/src/views/conference/2017/index/index.scss
@@ -27,7 +27,7 @@
 }
 
 .conf2017-title-band {
-    background-color: lighten($ui-blue, 10%);
+    background-color: $ui-blue-10percent;
     padding: 1.5rem;
     text-align: center;
     color: $type-white;
diff --git a/src/views/messages/messages.scss b/src/views/messages/messages.scss
index a782957e0..f91c679ed 100644
--- a/src/views/messages/messages.scss
+++ b/src/views/messages/messages.scss
@@ -54,9 +54,9 @@
 }
 
 .admin-message {
-    border: 1px solid darken($ui-gray, 10);
+    border: 1px solid $active-dark-gray;
     border-radius: 5px;
-    background-color: lighten($ui-blue, 40);
+    background-color: $ui-blue-25percent;
     padding: 1rem;
 }
 
diff --git a/src/views/tips/tips.scss b/src/views/tips/tips.scss
index 4dcbe1419..880c3652c 100644
--- a/src/views/tips/tips.scss
+++ b/src/views/tips/tips.scss
@@ -31,25 +31,23 @@ $base-bg: $ui-white;
     max-width: calc(100% - 2rem);
 }
 
-$darken-button: rgba(0, 0, 0, .1);
-
 .tips-button {
     margin-right: .75rem;
     background-color: $ui-blue;
     color: $ui-white;
     font-size: 1rem;
-    
+
     &.getting-started-button {
         margin-right: 0;
-        background-color: $darken-button;
+        background-color: $ui-aqua;
     }
-    
+
     img {
         margin-right: 1rem;
         height: 1.25rem;
         vertical-align: middle;
     }
-    
+
     a {
         color: $ui-white;
     }
@@ -95,26 +93,26 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
-        
+
         p {
             max-width: $cols4;
         }
     }
-    
+
     //put the image first if in 4-column
     .tips-info-body {
         max-width: $cols4;
         text-align: center;
-        
+
         &.tips-illustration {
             order: -1;
             img {
                 width: $cols4;
             }
         }
-        
+
         .button {
             width: 100%;
         }
@@ -131,13 +129,13 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols6;
         }
     }
-    
+
     .tips-info-body.tips-illustration {
         order: -1;
         img {
@@ -163,27 +161,27 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols6;
         }
     }
-    
+
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;
         }
     }
-    
+
     .tips-info-body {
         max-width: $cols4;
     }
-    
+
     .tips-button {
         width: 100%;
     }
-    
+
     img.mod-flow-left {
         transform: translate(-1*$cols2);
     }
@@ -200,19 +198,19 @@ img.tips-icon {
             }
         }
     }
-    
+
     .ttt-head {
         p {
             max-width: $cols8;
         }
     }
-    
+
     .tips-info-section {
         &.mod-align-top {
             align-items: flex-start;
         }
     }
-    
+
     .tips-info-body {
         max-width: $cols6;
         &.mod-narrow {