diff --git a/ui/index.html b/ui/index.html
index 24763c2d5a..7e255e74f6 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -98,7 +98,7 @@
     <div class="row">
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
-          <img src="static/loading-cylon-purple.svg" width="384" height="48">
+          <img src="static/loading-cylon-pink.svg" width="384" height="48">
           <p><small>Loading...</small></p>
         </div>
       </div>
@@ -340,7 +340,7 @@
     <div class="row">
       <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
         <div class="text-center vertical-center">
-          <img src="static/loading-cylon-purple.svg" width="384" height="48">
+          <img src="static/loading-cylon-pink.svg" width="384" height="48">
           <p><small>Loading...</small></p>
         </div>
       </div>
diff --git a/ui/static/loading-cylon-purple.svg b/ui/static/loading-cylon-pink.svg
similarity index 93%
rename from ui/static/loading-cylon-purple.svg
rename to ui/static/loading-cylon-pink.svg
index 7107d1e757..1f2d83ae3f 100644
--- a/ui/static/loading-cylon-purple.svg
+++ b/ui/static/loading-cylon-pink.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#9e84c5" preserveAspectRatio="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 14 32 18" width="32" height="4" fill="#d68ab2" preserveAspectRatio="none">
   <path opacity="0.8" transform="translate(0 0)" d="M2 14 V18 H6 V14z">
     <animateTransform attributeName="transform" type="translate" values="0 0; 24 0; 0 0" dur="2s" begin="0" repeatCount="indefinite" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" calcMode="spline" />
   </path>
diff --git a/ui/style-guide.html b/ui/style-guide.html
index f4b66da952..3efea3b863 100644
--- a/ui/style-guide.html
+++ b/ui/style-guide.html
@@ -80,8 +80,8 @@
           <hr>
           <ul class="list-unstyled">
             <li>
-              <div style="width: 75px; height: 75px; display:inline-block;" class="bg-purple"></div>
-              <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-purple"></div>
+              <div style="width: 75px; height: 75px; display:inline-block;" class="bg-pink"></div>
+              <div style="width: 75px; height: 75px; display:inline-block" class="bg-light-pink"></div>
             </li>
             <li>
               <div style="width: 75px; height: 75px; display:inline-block" class="bg-red"></div>
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index 3e84096d95..b2946170c0 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -32,13 +32,13 @@
     }
 
     &.btn-primary {
-        color: $purple-dark;
+        color: $pink-dark;
         background-color: transparent;
-        border: 2px solid $purple;
+        border: 2px solid $pink;
 
         &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
+            background-color: $light-pink;
+            color: darken($pink, 10%);
         }
     }
 
@@ -78,13 +78,13 @@
 
 
     &.active {
-        color: $purple-dark;
+        color: $pink-dark;
         background-color: transparent;
-        border: 2px solid $purple;
+        border: 2px solid $pink;
 
         &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
+            background-color: $light-pink;
+            color: darken($pink, 10%);
         }
 
         &.btn-noactive {
diff --git a/ui/styles/_lists.scss b/ui/styles/_lists.scss
index 2f62c61b43..d0b01917ac 100644
--- a/ui/styles/_lists.scss
+++ b/ui/styles/_lists.scss
@@ -115,11 +115,11 @@
 
     &.active {
         @include transition(border-color .1s linear);
-        border-color: $purple;
+        border-color: $pink;
 
         .list-bar, .list-bar-horizontal {
             @include transition(background-color .1s linear);
-            background-color: $purple;
+            background-color: $pink;
         }
     }
 
diff --git a/ui/styles/_panels.scss b/ui/styles/_panels.scss
index e319eaf41e..8a942df431 100644
--- a/ui/styles/_panels.scss
+++ b/ui/styles/_panels.scss
@@ -117,15 +117,15 @@
 
     &.active {
         >.panel-heading {
-            border-color: $purple;
+            border-color: $pink;
         }
 
         @include transition(border-color .1s linear);
-        border-color: $purple;
+        border-color: $pink;
 
         .panel-bar {
         @include transition(background-color .1s linear);
-            background-color: $purple;
+            background-color: $pink;
         }
     }
 }
diff --git a/ui/styles/_type.scss b/ui/styles/_type.scss
index bffda1c36e..957a08bc7a 100644
--- a/ui/styles/_type.scss
+++ b/ui/styles/_type.scss
@@ -5,26 +5,26 @@ body {
 }
 
 a {
-    color: $purple;
+    color: $pink;
     font-weight: 600;
     @include transition(color .2s ease-in-out);
 
     &:hover {
         text-decoration: none;
-        color: darken($purple, 10%);
+        color: darken($pink, 10%);
     }
 
     &.subtle {
         color: inherit;
 
         &:hover {
-            color: $purple;
+            color: $pink;
         }
     }
 }
 
 code {
-    color: $purple-dark;
+    color: $pink-dark;
     background-color: $gray-background;
 }
 
diff --git a/ui/styles/_variables.scss b/ui/styles/_variables.scss
index 0f9eb84065..c0c558e48b 100644
--- a/ui/styles/_variables.scss
+++ b/ui/styles/_variables.scss
@@ -12,10 +12,12 @@ $red-darker:                #b03c44;
 $tan:                       #f0f0e5;
 $consul-gray:               #909090;
 $consul-footer-gray:        #d7d4d7;
+$pink-dark:                 #d62783;
+$pink:                      lighten($pink-dark, 20%);
+$light-pink:                #f9f3f7;
 $purple-dark:               #69499a;
 $purple:                    lighten($purple-dark, 20%);
 $light-purple:              #f7f3f9;
-
 $green-faded:               #BBF085;
 $green-dark:                #86B457;
 $red-faded:                 $red;
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 4334ae468b..c9efcadf55 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -73,7 +73,7 @@ a {
 
 .row {
     &.colored {
-        background-color: $light-purple;
+        background-color: $light-pink;
     }
 }
 
@@ -82,12 +82,12 @@ a {
 }
 
 
-.bg-purple {
-    background-color: $purple;
+.bg-pink {
+    background-color: $pink;
 }
 
-.bg-light-purple {
-    background-color: $light-purple;
+.bg-light-pink {
+    background-color: $light-pink;
 }
 
 .bg-orange {