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/_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/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 {