diff --git a/client/src/components/NewsTeaser.vue b/client/src/components/NewsTeaser.vue
index aac08c28..c2235dcd 100644
--- a/client/src/components/NewsTeaser.vue
+++ b/client/src/components/NewsTeaser.vue
@@ -21,7 +21,7 @@
 
   .news-teaser {
     display: flex;
-    border-left: 1px solid $color-lightgrey-2;
+    border-left: 1px solid $color-lightgrey;
     padding-left: $medium-spacing;
     flex-direction: column;
   }
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index 31a5d4d5..02d935d4 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -43,7 +43,7 @@
 
     &__date {
       font-family: $sans-serif-font-family;
-      color: $color-text-gray;
+      color: $color-grey;
       font-size: toRem(17px);
     }
   }
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index 61db04d5..f6718d4a 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -106,7 +106,7 @@
     &__title {
       color: $color-brand;
       text-align: center;
-      border-bottom: 1px solid $color-lightgrey-2;
+      border-bottom: 1px solid $color-lightgrey;
       padding-bottom: 30px;
       margin-left: 30px;
       margin-right: 30px;
@@ -171,7 +171,7 @@
     &__more {
       color: $color-white;
       font-family: $sans-serif-font-family;
-      border-left: 1px solid $color-lightgrey-2;
+      border-left: 1px solid $color-lightgrey;
       line-height: $default-line-height;
       padding-left: $medium-spacing;
       font-weight: $font-weight-bold;
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 872e34ed..6faafa9d 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -20,7 +20,7 @@
     background-color: $color-white;
   }
   &--disabled {
-    border: 2px solid $color-lightgrey-2;
+    border: 2px solid $color-lightgrey;
     background-color: $color-lightgrey;
   }
 }
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 1f27086e..d470c477 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -8,7 +8,7 @@
 
 @mixin widget-shadow {
   @include widget-shadow-base;
-  border: 1px solid $color-lightgrey-2;
+  border: 1px solid $color-lightgrey;
 }
 
 @mixin widget-shadow-reverse {
@@ -30,15 +30,29 @@
 @mixin skillbox-colors {
   &--yellow {
     background-color: $color-accent-1;
+
+    & .widget-footer {
+      background-color: $color-accent-1-dark;
+    }
   }
   &--blue {
     background-color: $color-accent-2;
+    & .widget-footer {
+      background-color: $color-accent-2-dark;
+    }
+
   }
   &--red {
     background-color: $color-accent-3;
+    & .widget-footer {
+      background-color: $color-accent-3-dark;
+    }
   }
   &--green {
     background-color: $color-accent-4;
+    & .widget-footer {
+      background-color: $color-accent-4-dark;
+    }
   }
 
 }
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index 05d400be..a186ef59 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -3,33 +3,36 @@
 */
 
 /* accent */
-$color-accent-1: #ffb800;
-$color-accent-1-dark: #d69d0a;
-$color-accent-1-light: #fff5d9;
-$color-accent-2-dark: #118dc2;
-$color-accent-2: #09a4e7;
-$color-accent-2-light: #daf2fc;
-$color-accent-3-dark: #bd4163;
-$color-accent-3: #e04570;
-$color-accent-3-light: #fbe3ea;
-$color-accent-4-dark: #96b23d;
-$color-accent-4: #afd240;
-$color-accent-4-light: #f3f9e3;
+$color-accent-1-dark: #DAA009;
+$color-accent-1: #FFB800;
+$color-accent-1-light: #FFF5D9;
+$color-accent-2-dark: #0F7CAC;
+$color-accent-2: #078CC6;
+$color-accent-2-light: #DBEEF6;
+$color-accent-3-dark: #D66655;
+$color-accent-3: #FA715C;
+$color-accent-3-light: #FFEAE7;
+$color-accent-4-dark: #99B53E;
+$color-accent-4: #AFD240;
+$color-accent-4-light: #F3F9E3;
+$color-accent-5-dark: #09496F;
+$color-accent-5: #004E7C;
+$color-accent-5: #DBE6EC;
 
 /* brand */
-$color-brand-dark: #1c9076;
-$color-brand: #17a887;
-$color-brand-light: #ddf3ee;
+$color-brand-dark: #138E72;
+$color-brand: #17A887;
+$color-brand-light: #DCF2ED;
+
+$color-error: #C02108;
 
 /* greyscale */
 $color-darkgrey-1: #333333;
-$color-darkgrey-2: #515151;
-$color-grey: rgba(51, 51, 51, 0.5);
-$color-grey--lighter: rgba(51, 51, 51, 0.18);
-$color-lightgrey-2: #dbdbdb;
-$color-lightgrey: #f3f3f3;
+$color-grey: #999999;
+//$color-grey--lighter: rgba(51, 51, 51, 0.18);
+$color-grey--lighter: transparent;
+$color-lightgrey: #f0f0f0;
 $color-white: #ffffff;
-$color-text-gray: rgb(161, 161, 161);