diff --git a/resources/sass/app-ltr.scss b/resources/sass/app-ltr.scss
index 683a00c79d1..0e70b0b63f5 100644
--- a/resources/sass/app-ltr.scss
+++ b/resources/sass/app-ltr.scss
@@ -61,13 +61,13 @@ $bg-hover-monica: #d7e3ec;
 }
 
 .bg-pale-red {
-  background-color: #f4c8b9;
+  background-color: #f4cecd;
 }
 
 .box-shadow {
-  background: #fff;
+  background: #ffffff;
   border: 1px solid #d0d0d0;
-  box-shadow: 1px -1px 4px rgba(122, 122, 122, 0.25);
+  box-shadow: 1px -1px 4px #d0d0d0;
   border-radius: 11px;
 }
 
@@ -85,19 +85,18 @@ $bg-hover-monica: #d7e3ec;
 
 .form-error-message {
   border-top: 1px solid #d9534f;
-  background-color: #f4c8b9;
-  box-shadow: inset 0 3px 0 0 #d9534f, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
+  background-color: #f4cecd;
+  box-shadow: inset 0 3px 0 0 #d9534f, inset 0 0 0 0 transparent, 0 0 0 1px #eeeeee, 0 1px 3px 0 #d0d0d0;
 }
 
 .form-information-message {
-  border-top: 1px solid #47c1bf;
+  border-top: 1px solid #0366d5;
   background-color: #d1ecfa;
-  box-shadow: inset 0 3px 0 0 #47c1bf, inset 0 0 0 0 transparent, 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
+  box-shadow: inset 0 3px 0 0 #228b22, inset 0 0 0 0 transparent, 0 0 0 1px #eeeeee, 0 1px 3px 0 #d0d0d0;
 
   svg {
     width: 20px;
-    fill: #00848e;
-    color: #fff;
+    color: #ffffff;
   }
 }
 
@@ -123,10 +122,10 @@ $bg-hover-monica: #d7e3ec;
 }
 
 .boxed {
-  background: #fff;
+  background: #ffffff;
   border: 1px solid $border-color;
   border-radius: 3px;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05);
+  box-shadow: 0 1px 3px 0 #eeeeee;
 }
 
 .box-padding {
@@ -139,7 +138,7 @@ $bg-hover-monica: #d7e3ec;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
-  color: #fff;
+  color: #ffffff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
@@ -156,16 +155,16 @@ $bg-hover-monica: #d7e3ec;
 
 kbd {
   padding:0.1em 0.6em;
-  border:1px solid #ccc;
+  border:1px solid #d0d0d0;
   font-size:11px;
   font-family:Arial,Helvetica,sans-serif;
   background-color:#fafafa;
-  color:#333;
-  box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
+  color:#313436;
+  box-shadow:0 1px 0px #999999,0 0 0 2px #ffffff inset;
   border-radius:3px;
   display:inline-block;
   margin:0 0.1em;
-  text-shadow:0 1px 0 #fff;
+  text-shadow:0 1px 0 #ffffff;
   line-height:1.4;
   white-space:nowrap;
 }
@@ -200,7 +199,7 @@ kbd {
   width: 100%;
   max-width: 700px;
   height: 200px;
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 2%, transparent 2%);
+  background-image: linear-gradient(to bottom, #d0d0d0 2%, transparent 2%);
   background-size: 100% 50px;
   background-position: left top;
 
@@ -214,7 +213,7 @@ kbd {
   span {
     margin: 0 1em;
     display: block;
-    background: rgba(#d1ecfa, .75);
+    background: #d1ecfa;
     animation: draw 1s ease-in-out;
 
     &:before{
@@ -250,12 +249,12 @@ a {
 
   &:hover {
     background-color: #0366d5;
-    color: #fff;
+    color: #ffffff;
     text-decoration: none;
   }
 
   &.action-link {
-    color: #999;
+    color: #999999;
     font-size: 11px;
     text-decoration: underline;
     margin-right: 5px;
@@ -266,7 +265,7 @@ a {
 
     &:hover {
       background-color: #313436;
-      color: #eee;
+      color: #eeeeee;
     }
   }
 }
@@ -325,7 +324,7 @@ ul {
 }
 
 input:disabled {
-  background-color: #999;
+  background-color: #999999;
 }
 
 .pagination-box {
@@ -379,7 +378,7 @@ input:disabled {
   }
 
   .form-group:not(:last-child) {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eeeeee;
     padding-bottom: 20px;
   }
 
@@ -392,9 +391,9 @@ input:disabled {
   }
 
   .tab-content {
-    border-right: 1px solid #ddd;
-    border-left: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
+    border-right: 1px solid #d0d0d0;
+    border-left: 1px solid #d0d0d0;
+    border-bottom: 1px solid #d0d0d0;
     padding: 15px;
   }
 }
@@ -444,9 +443,9 @@ input:disabled {
   width: 100%;
 
   .table-row {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-    border-top: 1px solid #ddd;
+    border-left: 1px solid #d0d0d0;
+    border-right: 1px solid #d0d0d0;
+    border-top: 1px solid #d0d0d0;
     display: table-row;
 
     &:first-child {
@@ -460,7 +459,7 @@ input:disabled {
     }
 
     &:last-child {
-      border-bottom: 1px solid #ddd;
+      border-bottom: 1px solid #d0d0d0;
     }
 
     &:hover {
@@ -504,9 +503,9 @@ input:disabled {
 }
 
 .full-page-modal {
-  background: #fff;
-  border: 1px solid #eee;
-  box-shadow: 2px 0px 6px rgba(0, 0, 0, 0.25);
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  box-shadow: 2px 0px 6px #999999;
   border-radius: 12px;
 
   .full-page-modal-year-selector {
@@ -517,7 +516,7 @@ input:disabled {
 }
 
 .full-page-modal-header {
-  background: #fff;
+  background: #ffffff;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
 }
@@ -558,7 +557,7 @@ table.vgt-table {
     padding: 0px 8px 4px;
 
     &:hover {
-      box-shadow: 1px 0px 1px rgba(43, 45, 80, 0.16), -1px 1px 1px rgba(43, 45, 80, 0.16), 0px 1px 4px rgba(43, 45, 80, 0.18);
+      box-shadow: 1px 0px 1px #d0d0d0, -1px 1px 1px #d0d0d0, 0px 1px 4px #d0d0d0;
       border-radius: 3px;
     }
   }
@@ -620,7 +619,7 @@ footer {
     }
 
     .sidebar-blank {
-      background-color: #fff;
+      background-color: #ffffff;
       border: 0;
     }
 
@@ -657,7 +656,7 @@ svg {
 
 .form-group-error .error {
   border-color: #d9534f !important;
-  color:#f4c8b9;
+  color:#f4cecd;
 }
 
 // Shake animation
diff --git a/resources/sass/buttons.scss b/resources/sass/buttons.scss
index 555b6e72fe5..8abcb6d3306 100644
--- a/resources/sass/buttons.scss
+++ b/resources/sass/buttons.scss
@@ -19,7 +19,7 @@
   background-repeat: repeat-x;
   background-position: -1px -1px;
   background-size: 110% 110%;
-  border: 1px solid rgba(27,31,35,0.2);
+  border: 1px solid #d0d0d0;
   border-radius: 0.25em;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -28,20 +28,20 @@
 
   &:hover, &:focus {
     text-decoration: none;
-    background-color: #e5e5e5;
-    background-image: -webkit-linear-gradient(270deg, #d7e3ec 0%, #e5e5e5 90%);
-    background-image: linear-gradient(-180deg, #d7e3ec 0%, #e5e5e5 90%);
+    background-color: #d0d0d0;
+    background-image: -webkit-linear-gradient(270deg, #d7e3ec 0%, #d0d0d0 90%);
+    background-image: linear-gradient(-180deg, #d7e3ec 0%, #d0d0d0 90%);
     background-position: 0 -0.5em;
     background-repeat: repeat-x;
-    border-color: rgba(27,31,35,0.35);
+    border-color: #999999;
     color: #0366d5;
   }
 
   &:active {
     background-color: #d0d0d0;
     background-image: none;
-    border-color: rgba(27,31,35,0.35);
-    box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15)
+    border-color: #999999;
+    box-shadow: inset 0 0.15em 0.3em #eeeeee;
   }
 
   &:disabled {
@@ -55,7 +55,7 @@
 }
 
 .btn-primary {
-  color: #fff;
+  color: #ffffff;
   background-color: #228b22;
   background-image: -webkit-linear-gradient(270deg, #32cd32 0%, #228b22 90%);
   background-image: linear-gradient(-180deg, #32cd32 0%, #228b22 90%);
@@ -66,18 +66,18 @@
     background-image: linear-gradient(-180deg, #32cd32 0%, #228b22 90%);
     background-position: 0 -0.5em;
     border-color: #228b22;
-    color: #edd077;
+    color: #ffd700;
   }
 }
 
 .btn-danger {
-  color: #900;
+  color: #b22222;
 
   &:hover, &:focus {
     background-color: #b22222;
     background-image: linear-gradient(#d9534f, #b22222);
-    border-color: #d9534f;
-    color: #fff;
+    border-color: #b22222;
+    color: #ffffff;
   }
 }
 
@@ -87,8 +87,8 @@
   &:hover, &:focus {
     background-color: #daa520;
     background-image: linear-gradient(#fffacd, #daa520);
-    border-color: #fffacd;
-    color: #fff;
+    border-color: #daa520;
+    color: #ffffff;
   }
 }
 
@@ -102,10 +102,10 @@
 }
 
 .small-btn {
-  background: #fff;
+  background: #ffffff;
   color: #4a4a4a;
   opacity: 0.8;
-  box-shadow: 1px 0px 1px rgba(43, 45, 80, 0.16), -1px 1px 1px rgba(43, 45, 80, 0.16), 0px 1px 4px rgba(43, 45, 80, 0.18);
+  box-shadow: 1px 0px 1px #d0d0d0, -1px 1px 1px #d0d0d0, 0px 1px 4px #d0d0d0;
   border-radius: 11px;
   font-weight: 500;
   text-decoration: none;
diff --git a/resources/sass/header.scss b/resources/sass/header.scss
index 061acd95741..bf950dc7311 100644
--- a/resources/sass/header.scss
+++ b/resources/sass/header.scss
@@ -26,7 +26,7 @@
 
   input {
     border: 0;
-    color: #fff;
+    color: #ffffff;
     padding-left: 29px;
   }
 }
@@ -58,7 +58,7 @@
 }
 
 .header-nav-item-link {
-  color: #fff;
+  color: #ffffff;
   font-weight: 300;
   padding: 3px 11px;
   text-decoration: none;
@@ -66,7 +66,7 @@
   &:hover {
     background-color: #497193;
     border-radius: 3px;
-    color: #fff;
+    color: #ffffff;
     padding: 3px 11px;
     text-decoration: none;
   }
@@ -80,18 +80,20 @@
 .header-search-input {
   background: #497193;
   border-color: #497193;
-  color: white;
+  color: #ffffff;
 
   &::placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    opacity: 0.5;
+    color: #f2f4f8;
   }
   &:-ms-input-placeholder {
-    color: rgba(255, 255, 255, 0.4);
+    opacity: 0.5;
+    color: #f2f4f8;
   }
 
   &:focus {
-    background: white;
-    color: rgb(50, 50, 50);
+    background: #f2f4f8;
+    color: #313436;
   }
 }
 
@@ -103,9 +105,9 @@
 
 .header-search-result {
   position: relative;
-  background: white;
-  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid #eee;
+  background: #ffffff;
+  box-shadow: 0 3px 3px 0 #999999;
+  border-bottom: 1px solid #eeeeee;
 
   a {
     color: inherit;
@@ -141,7 +143,7 @@
     text-align: center;
     padding-top: 6px;
     font-size: 15px;
-    color: #fff;
+    color: #ffffff;
   }
 
   &:last-child {
@@ -200,7 +202,6 @@
 @media (max-width: 767px) {
   header {
     .mobile-menu {
-      background-color: #58748c;
       border: 1px solid #325776;
       margin-bottom: 20px;
 
diff --git a/resources/sass/marketing.scss b/resources/sass/marketing.scss
index b8d7483cbd5..40a50323ffe 100644
--- a/resources/sass/marketing.scss
+++ b/resources/sass/marketing.scss
@@ -5,7 +5,7 @@
     .top-page {
       background-color: #4a4a4a;
       border-bottom: 1px solid #d0d0d0;
-      color: #fff;
+      color: #ffffff;
       padding-top: 40px;
       text-align: center;
 
@@ -15,9 +15,9 @@
         top: 20px;
 
         a {
-          border: 1px solid #fff;
+          border: 1px solid #ffffff;
           border-radius: 6px;
-          color: #fff;
+          color: #ffffff;
           padding: 10px;
           text-decoration: none;
         }
@@ -64,7 +64,7 @@
     }
 
     .section-homepage {
-      border-bottom: 1px solid #dcdcdc;
+      border-bottom: 1px solid #d0d0d0;
       padding: 60px 0;
 
       .visual {
@@ -128,7 +128,7 @@
 
     .why {
       background-color: #4a4a4a;
-      color: #fff;
+      color: #ffffff;
       padding-bottom: 50px;
 
       h3 {
@@ -169,7 +169,7 @@
 
     .signup-box {
       background-color: #ffffff;
-      border: 1px solid #e5e5e5;
+      border: 1px solid #d0d0d0;
       border-radius: 5px;
       padding: 50px 20px 20px;
 
@@ -245,7 +245,7 @@
   margin-right: auto;
   padding: 20px 30px 100px 30px;
   margin-top: 50px;
-  background-color: #fff;
+  background-color: #ffffff;
   box-shadow: 0px 8px 20px #d0d0d0;
 
   h2 {
diff --git a/resources/sass/modal.scss b/resources/sass/modal.scss
index d15a74b449c..d8639902ea4 100644
--- a/resources/sass/modal.scss
+++ b/resources/sass/modal.scss
@@ -42,7 +42,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .5);
+  background-color: #4a4a4a;
   display: table;
   transition: opacity .3s ease;
 }
@@ -57,9 +57,9 @@
   max-height: 80%;
   margin: 0px auto;
   padding: 20px 30px;
-  background-color: #fff;
+  background-color: #ffffff;
   border-radius: 2px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+  box-shadow: 0 2px 8px #999999;
   transition: all .3s ease;
   font-family: Helvetica, Arial, sans-serif;
   text-align: center;
diff --git a/resources/sass/people.scss b/resources/sass/people.scss
index 82ef01c4735..1321115c45a 100644
--- a/resources/sass/people.scss
+++ b/resources/sass/people.scss
@@ -10,7 +10,7 @@
 
 .people-list {
   .breadcrumb {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eeeeee;
   }
 
   .main-content {
@@ -35,7 +35,7 @@
       position: relative;
 
       &.selected::before {
-        color: #999;
+        color: #999999;
         content: '>';
         left: 0;
         position: absolute;
@@ -52,12 +52,12 @@
   }
 
   .list {
-    border: 1px solid #eee;
+    border: 1px solid #eeeeee;
     border-radius: 3px;
   }
 
   .clear-filter {
-    border: 1px solid #eee;
+    border: 1px solid #eeeeee;
     position: relative;
     padding: 6px;
     border-radius: 3px;
@@ -73,7 +73,7 @@
   }
 
   .people-list-item {
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #eeeeee;
     padding: 10px;
 
     &:hover {
@@ -109,17 +109,17 @@
             content: '\f00c';
             font-family: FontAwesome;
             margin-right: 5px;
-            color: #fff;
+            color: #ffffff;
           }
 
           &:hover {
             background-color: #0366d5;
-            color: #fff;
+            color: #ffffff;
           }
 
           &.selected {
             &:before {
-              color: #999;
+              color: #999999;
             }
           }
         }
@@ -127,18 +127,18 @@
     }
 
     a {
-      color: #333;
+      color: #313436;
       text-decoration: none;
       display: block;
 
       &:hover {
         background-color: transparent;
-        color: #333;
+        color: #313436;
       }
     }
 
     .people-list-item-information {
-      color: #999;
+      color: #999999;
       font-size: 12px;
       font-style: italic;
       position: relative;
@@ -183,7 +183,7 @@
   margin-top: -30px;
 
   .image-header::after {
-    box-shadow: inset 1px 1px 3px 0 rgba(173,173,173,0.50);
+    box-shadow: inset 1px 1px 3px 0 #d0d0d0;
     border-radius: 7px;
     content: '';
     display: block;
@@ -195,7 +195,7 @@
 
   .hide-child:hover {
     .child {
-      background: rgba(90, 90, 90, 0.96);
+      background: #4a4a4a;
     }
 
     a:hover {
@@ -207,7 +207,7 @@
 
 .people-show {
   .main-content {
-    background-color: #fff;
+    background-color: #ffffff;
     padding-bottom: 20px;
     padding-top: 40px;
 
@@ -249,9 +249,9 @@
   .profile {
     .sidebar-box {
       background-color: #f2f4f8;
-      border: 1px solid #eee;
+      border: 1px solid #eeeeee;
       border-radius: 3px;
-      color: #333;
+      color: #313436;
       margin-bottom: 25px;
       padding: 10px;
       position: relative;
@@ -259,7 +259,7 @@
 
       &.edit {
         background-color: #fffceb;
-        border-color: gold;
+        border-color: #ffd700;
       }
     }
 
@@ -303,7 +303,7 @@
     .work,
     .introductions {
       li {
-        color: #999;
+        color: #999999;
         font-size: 12px;
         margin-bottom: 10px;
 
@@ -339,7 +339,7 @@
       }
 
       .section-heading {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid #eeeeee;
         padding-bottom: 4px;
         margin-bottom: 10px;
 
@@ -355,7 +355,7 @@
 
       .section-blank {
         background-color: #fafafa;
-        border: 1px solid #eee;
+        border: 1px solid #eeeeee;
         border-radius: 3px;
         padding: 15px;
         text-align: center;
@@ -384,7 +384,7 @@
       font-size: 75%;
       font-weight: 400;
       line-height: 1;
-      color: #fff;
+      color: #ffffff;
       text-align: center;
       white-space: nowrap;
       vertical-align: baseline;
@@ -394,7 +394,7 @@
     }
 
     .gift-list-item {
-      border-top: 1px solid #eee;
+      border-top: 1px solid #eeeeee;
       padding: 5px 0;
 
       &:last-child {
@@ -416,12 +416,12 @@
 
     .gift-list-item-date,
     .gift-list-item-actions {
-      color: #999;
+      color: #999999;
       display: inline;
       font-size: 12px;
 
       a {
-        color: #999;
+        color: #999999;
         font-size: 11px;
         margin-right: 5px;
         text-decoration: underline;
@@ -448,7 +448,7 @@
   .debts,
   .gifts {
     .date {
-      color: #777;
+      color: #999999;
       font-size: 12px;
       margin-right: 10px;
       width: 100px;
@@ -457,7 +457,7 @@
     .frequency-type,
     .value {
       background-color: #d7e3ec;
-      border: 1px solid #eee;
+      border: 1px solid #eeeeee;
       border-radius: 3px;
       display: inline;
       font-size: 12px;
diff --git a/resources/sass/settings.scss b/resources/sass/settings.scss
index dc2a8b3de4f..09f743ef8ee 100644
--- a/resources/sass/settings.scss
+++ b/resources/sass/settings.scss
@@ -34,7 +34,7 @@
         } @else {
           margin-left: 5px;
         }
-        color: #999;
+        color: #999999;
       }
     }
   }
@@ -68,7 +68,7 @@
   }
 
   .settings-group {
-    border-color: #999;
+    border-color: #999999;
     border-radius: 3px;
   }
 
@@ -130,7 +130,7 @@
     .requires-subscription {
       margin-top: 20px;
       font-size: 13px;
-      color: #999;
+      color: #999999;
     }
   }
 
@@ -176,7 +176,6 @@
           .icon:after {
             font-family: FontAwesome;
             font-size: 17px;
-            color: #47c1bf;
             content: "\f058";
             top: 10px;
             position: relative;;
diff --git a/resources/sass/stripe.scss b/resources/sass/stripe.scss
index 1783f5c621b..73c2a547e4c 100644
--- a/resources/sass/stripe.scss
+++ b/resources/sass/stripe.scss
@@ -1,16 +1,16 @@
 .StripeElement {
-  background-color: white;
+  background-color: #ffffff;
   height: 45px;
   width: 100%;
   padding: 13px 12px;
   border-radius: 4px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
+  border: 1px solid #999999;
   -webkit-transition: box-shadow 150ms ease;
   transition: box-shadow 150ms ease;
 }
 
 .StripeElement--focus {
-  box-shadow: 0 1px 3px 0 #dcdcdc;
+  box-shadow: 0 1px 3px 0 #d0d0d0;
 }
 
 .StripeElement--invalid {