From f14642643fbd5ba7d167d0d08a98b5bdc2ba8891 Mon Sep 17 00:00:00 2001
From: celineung <celine.ung@zenika.com>
Date: Tue, 13 Oct 2020 16:12:20 +0200
Subject: [PATCH 1/2] Align colors.sccs to design system colors

---
 assets/scss/components/_main-nav.scss |   2 +-
 assets/scss/globals/_colors.scss      | 108 ++++++++++++++++++--------
 assets/scss/shared/_buttons.scss      |  20 ++---
 assets/scss/shared/_normalize.scss    |   6 +-
 assets/scss/shared/_pages.scss        |   4 +-
 assets/scss/shared/_text.scss         |  10 +--
 assets/scss/shared/_titles.scss       |   4 +-
 components/AppFooter.vue              |   6 +-
 components/BurgerMenuNav.vue          |   6 +-
 components/CtaButton.vue              |   4 +-
 components/FormablePage.vue           |  12 +--
 components/HotNewsBanner.vue          |   2 +-
 components/NavigationDropdown.vue     |  12 +--
 components/NewsItemCard.vue           |   6 +-
 components/NewsItemPost.vue           |  12 +--
 components/OrganizationNav.vue        |   6 +-
 components/slices/ActionsZone.vue     |   4 +-
 components/slices/Article.vue         |  10 +--
 components/slices/Features.vue        |   4 +-
 components/slices/NavigationZone.vue  |   6 +-
 components/slices/PageSection.vue     |   4 +-
 components/slices/PartnersLogos.vue   |   2 +-
 components/slices/PopInCampaigns.vue  |   8 +-
 components/slices/Process.vue         |   8 +-
 pages/pix-pro/digital-mediation.vue   |   2 +-
 pages/pix-pro/employers.vue           |   6 +-
 pages/pix-site/about.vue              |   4 +-
 pages/pix-site/index.vue              |   8 +-
 pages/pix-site/legal-notices.vue      |   2 +-
 pages/pix-site/school-education.vue   |  16 ++--
 pages/pix-site/skills.vue             |   2 +-
 pages/pix-site/stats.vue              |   2 +-
 32 files changed, 176 insertions(+), 132 deletions(-)

diff --git a/assets/scss/components/_main-nav.scss b/assets/scss/components/_main-nav.scss
index c1f163128..74befde43 100755
--- a/assets/scss/components/_main-nav.scss
+++ b/assets/scss/components/_main-nav.scss
@@ -3,6 +3,6 @@
 }
 
 .link-separator-left {
-  border-left: 1px solid $grey-8;
+  border-left: 1px solid $grey-30;
   padding-left: 24px;
 }
diff --git a/assets/scss/globals/_colors.scss b/assets/scss/globals/_colors.scss
index 8cebbdd68..255ade2f8 100755
--- a/assets/scss/globals/_colors.scss
+++ b/assets/scss/globals/_colors.scss
@@ -1,32 +1,76 @@
-$grey-1: #222222;
-$grey-2: #555555;
-$grey-3: #f5f5f5;
-$grey-4: #cccccc;
-$grey-5: #666666;
-$grey-6: #444444;
-$grey-7: #dddddd;
-$grey-8: #96a0af;
-$grey-9: #5e6c84;
-$grey-10: #6b778c;
-$grey-11: #253858;
-$grey-20: #dfe1e6;
-
-$blue-1: #3d68ff;
-$blue-2: #12a3ff;
-$blue-3: #3257d9;
-$blue-4: #388aff;
-$blue-5: #172b4d;
-
-$error: #990000;
-$error-2: #ffdbcc;
-
-$purple-1: #985fff;
-
-$pix-yellow: #ffcb00;
-$pix-yellow-2: #EBAF00;
-$pix-yellow-3: #D6A000;
-
-$black: #000000;
-$white: #ffffff;
-
-$gradient-purple: linear-gradient(135.25deg, $blue-4 0%, $purple-1 100%);
+// primary
+$blue: #3D68FF;
+$blue-zodiac: #505F79;
+$white: #FFFFFF;
+
+// secondary
+$blue-hover: darken($blue, 4%);
+$dark-blue-pro: #1A38A0;
+$green-certif: #1A8C89;
+$dark-orga: #0095C0;
+$orga: #00DDFF;
+$green: #038A25;
+$green-hover: darken($green, 4%);
+$red: #D63F00;
+$red-hover: darken($red, 4%);
+$yellow: #FFBE00;
+$yellow-hover: darken($yellow, 8%);
+$light-blue: #388AFF;
+$pure-orange: #F45C00;
+
+// gradients
+$blue-gradient: linear-gradient(135deg, #12A3FF 0%, #3D68FF 100%);
+$default-gradient: linear-gradient(135deg, #388AFF 0%, #985FFF 100%);
+$green-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
+$pix-orange-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
+$pix-orga-gradient: linear-gradient(134deg, #00DDFF 0%, #0095C0 100%);
+$pix-orga-old-gradient: linear-gradient(0deg, #0D7DC4 0%, #213371 100%);
+$pix-pink-gradient: linear-gradient(135deg, #FF3F93 0%, #AC008D 100%);
+$pix-purple-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
+$yellow-gradient: linear-gradient(180deg, #FEDC41 0%, #F45C00 100%);
+
+// light
+$grey-5: #FAFBFC;
+$grey-10: #F4F5F7;
+$grey-15: #EAECF0;
+$grey-20: #DFE1E6;
+$grey-22: #C1C7D0;
+$grey-25: #A5ADBA;
+
+// medium
+$grey-30: #97A0AF;
+$grey-35: #8993A4;
+$grey-40: #7A869A;
+$grey-45: #6B778C;
+$grey-50: #5E6C84;
+$grey-60: #505F79;
+
+// dark
+$grey-70: #344563;
+$grey-80: #253858;
+$grey-90: #172B4D;
+$grey-100: #091E42;
+$grey-200: #07142E;
+
+// solids
+$environment-dark: #5E2563;
+$environment-light: #564DA6;
+$communication-dark: #3D68FF;
+$communication-light: #12A3FF;
+$content-dark: #1A8C89;
+$content-light: #52D987;
+$information-dark: #F24645;
+$information-light: #F1A141;
+$security-dark: #AC008D;
+$security-light: #FF3F94;
+
+// status
+$error: #FF4B00;
+$light-red: lighten($error, 8%);
+$dark-error: darken($error, 8%);
+$success: #57C884;
+$warning: #FFBE00;
+
+// box shadows
+$box-shadow-competence-cards: 0 3px 4px 0 rgba(12, 22, 58, 0.1), 0 1px 3px 0 rgba($grey-200, 0.1);
+$box-shadow-competence-cards-hover: 0 7px 14px 0 rgba(12, 22, 58, 0.2), 0 3px 6px 0 rgba($grey-200, 0.2);
diff --git a/assets/scss/shared/_buttons.scss b/assets/scss/shared/_buttons.scss
index 80dcecb6f..e59e1bc98 100755
--- a/assets/scss/shared/_buttons.scss
+++ b/assets/scss/shared/_buttons.scss
@@ -26,10 +26,10 @@
 
   transition: background-color 0.3s ease;
 
-  @include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
+  @include colorizeButton($white, transparent, $blue, $blue-hover, $white);
 
   &.button-video {
-    @include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
+    @include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
     svg { margin-right: 10px; }
   }
 
@@ -42,19 +42,19 @@
     font-size: 0.8125rem;
     letter-spacing: 0.0625rem;
 
-    @include colorizeButton($blue-1, $blue-1, $white, $blue-1, $white);
+    @include colorizeButton($blue, $blue, $white, $blue, $white);
   }
 
   &--light {
-    @include colorizeButton($grey-11, transparent, $pix-yellow, $white, $grey-11);
+    @include colorizeButton($grey-80, transparent, $yellow, $white, $grey-80);
 
     &:hover {
-      @include colorizeButton($grey-11, transparent, $pix-yellow-2, $pix-yellow-2, $grey-11);
+      @include colorizeButton($grey-80, transparent, $yellow, $yellow, $grey-80);
     }
 
     &:active,
     &:focus {
-      @include colorizeButton($grey-11, transparent, $pix-yellow-3, $pix-yellow-3, $grey-11);
+      @include colorizeButton($grey-80, transparent, $yellow, $yellow, $grey-80);
     }
 
     &.button-video {
@@ -62,22 +62,22 @@
       @include colorizeButton($white, $white, transparent, transparent, $white);
 
       &:hover {
-        @include colorizeButton($white, $white, transparent, $blue-1, $white);
+        @include colorizeButton($white, $white, transparent, $blue, $white);
       }
 
       &:active,
       &:focus {
-        @include colorizeButton($white, $white, transparent, $blue-3, $white);
+        @include colorizeButton($white, $white, transparent, $blue-hover, $white);
       }
     }
   }
 
   &--dark {
-    @include colorizeButton($white, transparent, $blue-1, $blue-3, $white);
+    @include colorizeButton($white, transparent, $blue, $blue-hover, $white);
 
     &.button-video {
       svg { margin-right: 10px; }
-      @include colorizeButton($grey-11, $grey-11, $white, $grey-20, $grey-11);
+      @include colorizeButton($grey-80, $grey-80, $white, $grey-20, $grey-80);
     }
   }
 }
diff --git a/assets/scss/shared/_normalize.scss b/assets/scss/shared/_normalize.scss
index 542ff1755..48b27feb7 100755
--- a/assets/scss/shared/_normalize.scss
+++ b/assets/scss/shared/_normalize.scss
@@ -9,7 +9,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
-  color: $grey-1;
+  color: $grey-45;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -72,7 +72,7 @@ ul {
 
     &::before {
       content: "● ";
-      color: $blue-1;
+      color: $blue;
       margin-right: 5px;
     }
   }
@@ -100,7 +100,7 @@ ol {
     &::before {
       content: counter(item) ".";
       margin-right: 8px;
-      color: $blue-1;
+      color: $blue;
       font-weight: 600;
     }
   }
diff --git a/assets/scss/shared/_pages.scss b/assets/scss/shared/_pages.scss
index 6f9c88517..81e66f477 100644
--- a/assets/scss/shared/_pages.scss
+++ b/assets/scss/shared/_pages.scss
@@ -1,7 +1,7 @@
 .page-banner-layout {
   .page-banner {
     box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-    background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
+    background: $default-gradient;
     height: 240px;
   }
 
@@ -13,7 +13,7 @@
 .page-header {
   min-height: 240px;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
-  background: linear-gradient(135deg, $blue-4 0%, $purple-1 100%);
+  background: $default-gradient;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/assets/scss/shared/_text.scss b/assets/scss/shared/_text.scss
index 750161ecf..1c7f8b79b 100755
--- a/assets/scss/shared/_text.scss
+++ b/assets/scss/shared/_text.scss
@@ -95,15 +95,15 @@
 }
 
 .text.text-black {
-  color: $grey-1;
+  color: $grey-45;
 }
 
 .text.text-black-l {
-  color: $grey-2;
+  color: $grey-90;
 }
 
 .text.text-blue {
-  color: $blue-1;
+  color: $blue;
 }
 
 .text.light {
@@ -130,7 +130,7 @@
   &--normal p {
     font-size: 1rem;
     line-height: 1.625rem;
-    color: $grey-10;
+    color: $grey-45;
   }
 
   &--light p {
@@ -138,6 +138,6 @@
   }
 
   &--dark p {
-    color: $grey-10;
+    color: $grey-45;
   }
 }
diff --git a/assets/scss/shared/_titles.scss b/assets/scss/shared/_titles.scss
index d0f9a76c0..deb4bfc6b 100644
--- a/assets/scss/shared/_titles.scss
+++ b/assets/scss/shared/_titles.scss
@@ -1,6 +1,6 @@
 .title {
   &--big h1 {
-    color: $grey-11;
+    color: $grey-80;
     font-size: 2.125rem;
     line-height: 2.75rem;
     font-weight: 400;
@@ -11,7 +11,7 @@
   }
 
   &--dark h1 {
-    color: $blue-5;
+    color: $grey-90;
   }
 }
 
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 762cf4e75..c5544fba0 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -129,7 +129,7 @@ footer {
   }
 
   .icon-parent {
-    background-color: $blue-1;
+    background-color: $blue;
     width: 36px;
     height: 36px;
     display: flex;
@@ -139,7 +139,7 @@ footer {
     transition: all ease-in 0.2s;
 
     &:hover {
-      background-color: $blue-3;
+      background-color: $blue-hover;
       transition: all ease-out 0.25s;
     }
   }
@@ -234,7 +234,7 @@ footer {
     line-height: 28px !important;
 
     &:hover {
-      color: $blue-1 !important;
+      color: $blue !important;
     }
   }
 
diff --git a/components/BurgerMenuNav.vue b/components/BurgerMenuNav.vue
index d7c24d7d5..c968bc7a1 100644
--- a/components/BurgerMenuNav.vue
+++ b/components/BurgerMenuNav.vue
@@ -51,7 +51,7 @@ export default {
 <style lang="scss">
 .navigation-slice-zone {
   .bm-menu {
-    background: linear-gradient(134.72deg, $blue-2 0%, $blue-1 100%);
+    background: $blue-gradient;
 
     @include device-is('large-screen') {
       display: none;
@@ -105,7 +105,7 @@ export default {
   }
 
   .bm-burger-bars {
-    background-color: $grey-1;
+    background-color: $grey-45;
   }
 
   .bm-burger-button {
@@ -117,7 +117,7 @@ export default {
   }
 
   .bm-cross {
-    background: $grey-1;
+    background: $grey-45;
     height: 24px !important;
   }
 }
diff --git a/components/CtaButton.vue b/components/CtaButton.vue
index 969883661..b830a0944 100644
--- a/components/CtaButton.vue
+++ b/components/CtaButton.vue
@@ -25,14 +25,14 @@ export default {
 <style lang="scss">
 .cta-button {
   width: fit-content;
-  background: $blue-1;
+  background: $blue;
   border-radius: 5px;
   padding: 0 20px;
   cursor: pointer;
 
   &:hover {
     transition: opacity 0.5s ease-out;
-    background: $blue-3;
+    background: $blue-hover;
   }
 
   &:hover:after {
diff --git a/components/FormablePage.vue b/components/FormablePage.vue
index 65f3edf63..5f20b74a5 100644
--- a/components/FormablePage.vue
+++ b/components/FormablePage.vue
@@ -71,7 +71,7 @@ export default {
   .Formable__Label {
     font-weight: 500;
     font-size: 15px;
-    color: $grey-6;
+    color: $grey-45;
   }
 
   .Formable__Input,
@@ -79,8 +79,8 @@ export default {
   .Formable__TextArea {
     font-weight: 400;
     font-size: 16px;
-    color: $grey-1;
-    border: 2px solid $grey-7;
+    color: $grey-45;
+    border: 2px solid $grey-20;
     border-radius: 4px;
     background-color: $white;
     padding: 15px;
@@ -89,7 +89,7 @@ export default {
 
     &:active,
     &:focus {
-      border-color: $blue-1;
+      border-color: $blue;
     }
   }
 
@@ -102,7 +102,7 @@ export default {
   }
 
   .Formable__SubmitButton {
-    background-color: $blue-1;
+    background-color: $blue;
     border-radius: 4px;
     font-family: Roboto, Arial, sans-serif;
     padding: 12px 30px;
@@ -110,7 +110,7 @@ export default {
     &:active,
     &:hover,
     &:focus {
-      background-color: $blue-3;
+      background-color: $blue-hover;
     }
   }
 
diff --git a/components/HotNewsBanner.vue b/components/HotNewsBanner.vue
index 097a93984..223754d4a 100644
--- a/components/HotNewsBanner.vue
+++ b/components/HotNewsBanner.vue
@@ -32,7 +32,7 @@ export default {
   width: 100%;
 
   color: $white;
-  background-color: $blue-1;
+  background-color: $blue;
   padding: 2px;
 
   display: flex;
diff --git a/components/NavigationDropdown.vue b/components/NavigationDropdown.vue
index 3f4834854..9c0d289bd 100644
--- a/components/NavigationDropdown.vue
+++ b/components/NavigationDropdown.vue
@@ -59,7 +59,7 @@ export default {
 .navigation-dropdown {
   box-shadow: 0 24px 32px 0 rgba(0, 0, 0, 0.03),
     0 8px 32px 0 rgba(0, 0, 0, 0.06);
-  color: $grey-9;
+  color: $grey-50;
   font-size: 0.875rem;
   font-weight: $font-normal;
   position: absolute;
@@ -93,18 +93,18 @@ export default {
   }
 
   a {
-    color: $grey-9;
+    color: $grey-50;
     &:hover {
-      color: $blue-1;
+      color: $blue;
     }
     &:visited {
-      color: $grey-9;
+      color: $grey-50;
       &:hover {
-        color: $blue-1;
+        color: $blue;
       }
     }
     &.nuxt-link-active {
-      color: $blue-1;
+      color: $blue;
     }
   }
 }
diff --git a/components/NewsItemCard.vue b/components/NewsItemCard.vue
index 14c95608d..04676fcc4 100644
--- a/components/NewsItemCard.vue
+++ b/components/NewsItemCard.vue
@@ -74,7 +74,7 @@ export default {
   background: #fff;
   box-shadow: 0 5px 15px 0 rgba(112, 128, 175, 0.2);
   transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
-  color: $grey-1;
+  color: $grey-45;
 
   h1,
   h2,
@@ -129,7 +129,7 @@ export default {
     border-radius: 50%;
     width: 36px;
     height: 36px;
-    background-color: $blue-1;
+    background-color: $blue;
     padding: 5px;
     margin-right: 10px;
   }
@@ -179,7 +179,7 @@ export default {
   }
 
   &__link {
-    color: $grey-1;
+    color: $grey-45;
 
     &:active,
     &:focus,
diff --git a/components/NewsItemPost.vue b/components/NewsItemPost.vue
index 1a5001412..a283740c4 100644
--- a/components/NewsItemPost.vue
+++ b/components/NewsItemPost.vue
@@ -68,7 +68,7 @@ export default {
   position: relative;
   border-radius: 10px;
   background: #fff;
-  color: $grey-1;
+  color: $grey-90;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.04);
   margin-bottom: 60px;
 
@@ -132,7 +132,7 @@ export default {
     border-radius: 50%;
     width: 36px;
     height: 36px;
-    background-color: $blue-1;
+    background-color: $blue;
     padding: 5px;
     margin-right: 10px;
   }
@@ -182,7 +182,7 @@ export default {
   }
 
   &__link {
-    color: $grey-1;
+    color: $grey-45;
 
     &:active,
     &:focus,
@@ -224,18 +224,18 @@ export default {
 
   .number-large-blue {
     font-weight: 600;
-    color: $blue-1;
+    color: $blue;
     text-align: center;
     font-size: 2.25rem;
     line-height: 4.063rem;
   }
 
   .blue {
-    color: $blue-1;
+    color: $blue;
   }
 
   .yellow {
-    color: $pix-yellow;
+    color: $yellow;
   }
 
   .large {
diff --git a/components/OrganizationNav.vue b/components/OrganizationNav.vue
index 55d6e693a..35a9b805d 100644
--- a/components/OrganizationNav.vue
+++ b/components/OrganizationNav.vue
@@ -25,7 +25,7 @@ export default {
   display: grid;
   grid-template-columns: 1.2fr repeat(12, 1fr) 1.2fr;
   grid-template-rows: auto;
-  background-color: $grey-3;
+  background-color: $grey-10;
 }
 .nav-switch {
   display: none;
@@ -46,10 +46,10 @@ export default {
     }
     a {
       margin-left: 3px;
-      color: $grey-1;
+      color: $grey-45;
       margin-right: 18px;
       &:hover {
-        color: $blue-1;
+        color: $blue;
       }
     }
     div {
diff --git a/components/slices/ActionsZone.vue b/components/slices/ActionsZone.vue
index f05497f71..726b508e8 100644
--- a/components/slices/ActionsZone.vue
+++ b/components/slices/ActionsZone.vue
@@ -47,14 +47,14 @@ export default {
 
     &__item {
       font-size: 0.875rem;
-      color: $grey-9;
+      color: $grey-50;
       font-family: $font-roboto;
       font-weight: $font-medium;
       letter-spacing: 0.13px;
       line-height: 22px;
 
       &.link:hover {
-        color: $blue-1;
+        color: $blue;
       }
 
       &.button {
diff --git a/components/slices/Article.vue b/components/slices/Article.vue
index c1779905f..d9923d817 100644
--- a/components/slices/Article.vue
+++ b/components/slices/Article.vue
@@ -302,14 +302,14 @@ export default {
 .article-content {
   &__description {
     margin: 16px 0 24px 0;
-    color: $grey-6;
+    color: $grey-45;
 
     ul {
       list-style: none;
       padding: 0;
 
       li:before {
-        color: $grey-6;
+        color: $grey-45;
       }
     }
 
@@ -328,7 +328,7 @@ export default {
 
   &__link-to {
     height: 26px;
-    color: $blue-1;
+    color: $blue;
     font-family: $font-roboto;
     font-size: 1.25rem;
     font-weight: $font-medium;
@@ -339,12 +339,12 @@ export default {
     &:focus,
     &:hover {
       text-decoration: none;
-      color: $blue-1;
+      color: $blue;
     }
   }
 
   &__title h2 {
-    color: $blue-5;
+    color: $grey-90;
     font-size: 2rem;
     font-weight: $font-normal;
     letter-spacing: 0.00875rem;
diff --git a/components/slices/Features.vue b/components/slices/Features.vue
index 944781b7a..ad070d7a7 100644
--- a/components/slices/Features.vue
+++ b/components/slices/Features.vue
@@ -161,7 +161,7 @@ export default {
   &-wrapper-item {
     &__title h1 {
       width: 217px;
-      color: $grey-1;
+      color: $grey-90;
       font-size: 1rem;
       letter-spacing: 0px;
       line-height: 30px;
@@ -170,7 +170,7 @@ export default {
 
     &__description {
       width: 217px;
-      color: $grey-10;
+      color: $grey-45;
       font-size: 0.875rem;
       letter-spacing: 0.15px;
       line-height: 24px;
diff --git a/components/slices/NavigationZone.vue b/components/slices/NavigationZone.vue
index c267ca0bd..af00c1627 100644
--- a/components/slices/NavigationZone.vue
+++ b/components/slices/NavigationZone.vue
@@ -126,7 +126,7 @@ class Navigation {
     height: 100%;
 
     &__item {
-      color: $grey-9;
+      color: $grey-50;
       font-family: $font-roboto;
       font-size: 14px;
       font-weight: $font-medium;
@@ -138,12 +138,12 @@ class Navigation {
       white-space: nowrap;
 
       &.current-active-link {
-        border-bottom: 2px solid $blue-1;
+        border-bottom: 2px solid $blue;
       }
       &.current-active-link,
       &:active,
       &:hover {
-        color: $blue-1;
+        color: $blue;
       }
 
       &.links-group {
diff --git a/components/slices/PageSection.vue b/components/slices/PageSection.vue
index 878b09700..f91ba391b 100644
--- a/components/slices/PageSection.vue
+++ b/components/slices/PageSection.vue
@@ -122,7 +122,7 @@ export default {
     }
 
     h2 {
-      color: $blue-5;
+      color: $grey-90;
       font-size: 2rem;
       font-family: $font-open-sans;
       font-weight: normal;
@@ -132,7 +132,7 @@ export default {
     }
 
     p {
-      color: $grey-10;
+      color: $grey-45;
       font-size: 1.25rem;
       line-height: 2rem;
       text-align: justify;
diff --git a/components/slices/PartnersLogos.vue b/components/slices/PartnersLogos.vue
index b52940e5b..dceec68f9 100644
--- a/components/slices/PartnersLogos.vue
+++ b/components/slices/PartnersLogos.vue
@@ -54,7 +54,7 @@ export default {
   &__title h2 {
     font-family: $font-open-sans;
     font-weight: $font-normal;
-    color: $blue-5;
+    color: $grey-90;
     letter-spacing: 0.00938rem;
     text-align: center;
     font-size: 1.75rem;
diff --git a/components/slices/PopInCampaigns.vue b/components/slices/PopInCampaigns.vue
index f97b2decc..7de9c5c2d 100644
--- a/components/slices/PopInCampaigns.vue
+++ b/components/slices/PopInCampaigns.vue
@@ -114,14 +114,14 @@ export default {
     text-decoration: none;
 
     position: relative;
-    background: $blue-1;
+    background: $blue;
     color: $white;
     border-radius: 5px;
     -webkit-backface-visibility: hidden;
     z-index: 1;
 
     &:hover {
-      background-color: $blue-3;
+      background-color: $blue-hover;
       transition: all ease-out 0.25s;
     }
 
@@ -146,7 +146,7 @@ export default {
   width: 213px;
   height: 76px;
   display: flex;
-  background: $gradient-purple;
+  background: $default-gradient;
   border-radius: 6px 0 0 6px;
 
   @include device-is('large-mobile') {
@@ -223,7 +223,7 @@ export default {
   width: 34px;
   margin: 3px;
   border-radius: 5px;
-  background: $gradient-purple;
+  background: $default-gradient;
   transition: height 0.6s ease-in, width 0.6s;
 
   &:hover {
diff --git a/components/slices/Process.vue b/components/slices/Process.vue
index 6d2d3c505..b6081bb58 100644
--- a/components/slices/Process.vue
+++ b/components/slices/Process.vue
@@ -185,8 +185,8 @@ export default {
     margin-bottom: 24px;
     width: 293px;
     padding: 24px;
-    box-shadow: 0 24px 32px 0 rgba($black, 0.03),
-      0 8px 32px 0 rgba($black, 0.06);
+    box-shadow: 0 24px 32px 0 rgba(#000000, 0.03),
+      0 8px 32px 0 rgba(#000000, 0.06);
     border-radius: 20px;
 
     &:last-child {
@@ -207,7 +207,7 @@ export default {
 .process-wrapper-item {
   &__title h1 {
     width: 175px;
-    color: $grey-1;
+    color: $grey-90;
     font-size: 1.25rem;
     letter-spacing: 0;
     line-height: 30px;
@@ -217,7 +217,7 @@ export default {
 
   &__description {
     width: 175px;
-    color: $grey-6;
+    color: $grey-45;
     font-size: 0.875rem;
     letter-spacing: 0.009rem;
     line-height: 22px;
diff --git a/pages/pix-pro/digital-mediation.vue b/pages/pix-pro/digital-mediation.vue
index 54aab04b3..a6996a4ae 100644
--- a/pages/pix-pro/digital-mediation.vue
+++ b/pages/pix-pro/digital-mediation.vue
@@ -548,7 +548,7 @@ export default {
         left: 0;
         width: 100%;
         height: 100%;
-        background: $grey-3;
+        background: $grey-10;
         transform: skewY(-3deg);
         transform-origin: bottom right;
       }
diff --git a/pages/pix-pro/employers.vue b/pages/pix-pro/employers.vue
index 0529e5478..41818ba5f 100644
--- a/pages/pix-pro/employers.vue
+++ b/pages/pix-pro/employers.vue
@@ -886,7 +886,7 @@ export default {
     font-size: 36px;
     line-height: 49px;
     font-weight: 400;
-    color: $grey-1;
+    color: $grey-90;
   }
 
   &__list {
@@ -918,7 +918,7 @@ export default {
 
   &__value {
     font-weight: 600;
-    color: $blue-1;
+    color: $blue;
     text-align: center;
     font-size: 36px;
     line-height: 65px;
@@ -929,7 +929,7 @@ export default {
   }
 
   &__description {
-    color: $grey-1;
+    color: $grey-45;
     text-align: center;
 
     @include device-is('large-mobile') {
diff --git a/pages/pix-site/about.vue b/pages/pix-site/about.vue
index dc04973cd..26bf90cb7 100644
--- a/pages/pix-site/about.vue
+++ b/pages/pix-site/about.vue
@@ -445,7 +445,7 @@ export default {
       left: 0;
       width: 100%;
       height: 100%;
-      background: $grey-3;
+      background: $grey-10;
       transform: skewY(3deg);
       transform-origin: bottom right;
     }
@@ -630,7 +630,7 @@ export default {
               font-size: 5rem;
               line-height: 10rem;
               display: block;
-              color: $blue-1;
+              color: $blue;
               margin: 0;
             }
           }
diff --git a/pages/pix-site/index.vue b/pages/pix-site/index.vue
index e27e3eca6..1523bb641 100755
--- a/pages/pix-site/index.vue
+++ b/pages/pix-site/index.vue
@@ -80,7 +80,7 @@ export default {
 
   .hero-banner {
     &__content {
-      color: $grey-1;
+      color: $grey-45;
 
       h1 {
         font-size: 30px;
@@ -129,7 +129,7 @@ export default {
         line-height: 60px;
         padding: 0 20px;
         position: relative;
-        background: $blue-1;
+        background: $blue;
         color: $white;
         border-radius: 5px;
         -webkit-backface-visibility: hidden;
@@ -137,7 +137,7 @@ export default {
 
         &:hover {
           transition: opacity 0.5s ease-out;
-          background: $blue-3;
+          background: $blue-hover;
         }
 
         &:hover:after {
@@ -276,7 +276,7 @@ export default {
 
       &:hover {
         transition: opacity 0.5s ease-out;
-        background: $blue-3;
+        background: $blue-hover;
       }
 
       &:hover:after {
diff --git a/pages/pix-site/legal-notices.vue b/pages/pix-site/legal-notices.vue
index 6452a4a27..7d19ba74b 100644
--- a/pages/pix-site/legal-notices.vue
+++ b/pages/pix-site/legal-notices.vue
@@ -79,7 +79,7 @@ export default {
     margin-bottom: 18px;
     margin-top: 60px;
     font-weight: 400;
-    color: $grey-1;
+    color: $grey-90;
   }
 }
 .legal-notices-members {
diff --git a/pages/pix-site/school-education.vue b/pages/pix-site/school-education.vue
index 6018ce0b7..b35c2370d 100644
--- a/pages/pix-site/school-education.vue
+++ b/pages/pix-site/school-education.vue
@@ -101,7 +101,7 @@ export default {
   }
 
   h2 {
-    color: $blue-5;
+    color: $grey-90;
     font-size: 2rem;
     font-weight: normal;
     letter-spacing: 0.00875rem;
@@ -110,7 +110,7 @@ export default {
   }
 
   h3 {
-    color: $blue-5;
+    color: $grey-90;
     font-size: 1.25rem;
     font-family: $font-open-sans;
     font-weight: 600;
@@ -120,9 +120,9 @@ export default {
   }
 
   a {
-    color: $blue-1;
+    color: $blue;
     &:visited {
-      color: $blue-1;
+      color: $blue;
     }
   }
 
@@ -191,7 +191,7 @@ export default {
     }
 
     p {
-      color: $grey-10;
+      color: $grey-45;
       text-align: center;
       font-size: 0.875rem;
       font-family: $font-roboto;
@@ -235,7 +235,7 @@ export default {
     margin-top: 24px;
 
     p {
-      color: $grey-10;
+      color: $grey-45;
       text-align: center;
       font-size: 0.875rem;
       font-family: $font-roboto;
@@ -273,7 +273,7 @@ export default {
     }
 
     p {
-      color: $grey-10;
+      color: $grey-45;
       text-align: center;
       font-size: 0.875rem;
       font-family: $font-roboto;
@@ -310,7 +310,7 @@ export default {
     }
 
     p {
-      color: $grey-10;
+      color: $grey-45;
       text-align: center;
       font-size: 0.875rem;
       font-family: $font-roboto;
diff --git a/pages/pix-site/skills.vue b/pages/pix-site/skills.vue
index 0423b49f0..b5e08d2de 100644
--- a/pages/pix-site/skills.vue
+++ b/pages/pix-site/skills.vue
@@ -85,7 +85,7 @@ export default {
     }
 
     &:nth-child(even) {
-      background-color: $grey-3;
+      background-color: $grey-10;
     }
 
     h2,
diff --git a/pages/pix-site/stats.vue b/pages/pix-site/stats.vue
index d4ae4efa3..e102193fc 100644
--- a/pages/pix-site/stats.vue
+++ b/pages/pix-site/stats.vue
@@ -125,7 +125,7 @@ export default {
 
   .blue {
     font-weight: bold;
-    color: $blue-1;
+    color: $blue;
   }
 
   canvas {

From c4fbc4d720d06cbd96645ec1e080602eb0c66c64 Mon Sep 17 00:00:00 2001
From: celineung <celine.ung@zenika.com>
Date: Tue, 13 Oct 2020 17:11:34 +0200
Subject: [PATCH 2/2] Fix design

---
 assets/scss/shared/_pages.scss |  1 +
 components/NewsItemPost.vue    |  2 +-
 components/slices/Article.vue  | 14 ++++++++++----
 components/slices/Features.vue |  8 +++-----
 components/slices/Process.vue  |  4 ++--
 pages/pix-site/about.vue       | 13 +++++++++++++
 pages/pix-site/skills.vue      |  1 +
 pages/pix-site/stats.vue       |  1 +
 8 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/assets/scss/shared/_pages.scss b/assets/scss/shared/_pages.scss
index 81e66f477..cf8ea1d1f 100644
--- a/assets/scss/shared/_pages.scss
+++ b/assets/scss/shared/_pages.scss
@@ -42,6 +42,7 @@
     &__description {
       h2 {
         font-weight: 400;
+        color: $grey-90;
       }
 
       ul {
diff --git a/components/NewsItemPost.vue b/components/NewsItemPost.vue
index a283740c4..bdfd20064 100644
--- a/components/NewsItemPost.vue
+++ b/components/NewsItemPost.vue
@@ -68,7 +68,7 @@ export default {
   position: relative;
   border-radius: 10px;
   background: #fff;
-  color: $grey-90;
+  color: $grey-45;
   box-shadow: 0 20px 20px rgba(0, 0, 0, 0.04);
   margin-bottom: 60px;
 
diff --git a/components/slices/Article.vue b/components/slices/Article.vue
index d9923d817..b5d58f3ae 100644
--- a/components/slices/Article.vue
+++ b/components/slices/Article.vue
@@ -303,6 +303,12 @@ export default {
   &__description {
     margin: 16px 0 24px 0;
     color: $grey-45;
+    font-size: 1.125rem;
+    line-height: 30px;
+
+    h3 {
+      margin-top: 8px;
+    }
 
     ul {
       list-style: none;
@@ -314,11 +320,11 @@ export default {
     }
 
     & p {
-      font-size: 1.25rem;
+      font-size: 1.125rem;
       font-weight: $font-normal;
       letter-spacing: 0;
-      line-height: 2rem;
-      margin: 15px 0px;
+      line-height: 1.875rem;
+      margin: 8px 0px;
     }
 
     &--only-text {
@@ -330,7 +336,7 @@ export default {
     height: 26px;
     color: $blue;
     font-family: $font-roboto;
-    font-size: 1.25rem;
+    font-size: 1.125rem;
     font-weight: $font-medium;
     letter-spacing: 0;
     line-height: 0.009rem;
diff --git a/components/slices/Features.vue b/components/slices/Features.vue
index ad070d7a7..5c529848d 100644
--- a/components/slices/Features.vue
+++ b/components/slices/Features.vue
@@ -150,7 +150,6 @@ export default {
     img {
       margin-right: 25px;
       height: 62px;
-      width: 55px;
     }
 
     p {
@@ -159,8 +158,9 @@ export default {
   }
 
   &-wrapper-item {
-    &__title h1 {
-      width: 217px;
+    &__title h3 {
+      margin-top: 16px;
+      width: 100%;
       color: $grey-90;
       font-size: 1rem;
       letter-spacing: 0px;
@@ -193,7 +193,6 @@ export default {
     img {
       margin-right: 32px;
       height: 73px;
-      width: 65px;
     }
   }
 
@@ -262,7 +261,6 @@ export default {
 
     img {
       height: 73px;
-      width: 65px;
     }
   }
 
diff --git a/components/slices/Process.vue b/components/slices/Process.vue
index b6081bb58..05653e1cf 100644
--- a/components/slices/Process.vue
+++ b/components/slices/Process.vue
@@ -185,8 +185,8 @@ export default {
     margin-bottom: 24px;
     width: 293px;
     padding: 24px;
-    box-shadow: 0 24px 32px 0 rgba(#000000, 0.03),
-      0 8px 32px 0 rgba(#000000, 0.06);
+    box-shadow: 0 24px 32px 0 rgba($grey-200, 0.03),
+      0 8px 32px 0 rgba($grey-200, 0.06);
     border-radius: 20px;
 
     &:last-child {
diff --git a/pages/pix-site/about.vue b/pages/pix-site/about.vue
index 26bf90cb7..e77b0e813 100644
--- a/pages/pix-site/about.vue
+++ b/pages/pix-site/about.vue
@@ -269,6 +269,11 @@ export default {
     &__container {
       max-width: 1140px;
       margin: 0 auto;
+
+      h2,
+      h3 {
+        color: $grey-90;
+      }
     }
 
     &-container {
@@ -427,6 +432,10 @@ export default {
       }
     }
 
+    h2 {
+      color: $grey-90;
+    }
+
     h3 {
       text-align: center;
       font-size: 1rem;
@@ -528,6 +537,10 @@ export default {
     .background {
       background: $white;
     }
+
+    h2 {
+      color: $grey-90;
+    }
   }
 
   .co-built-service {
diff --git a/pages/pix-site/skills.vue b/pages/pix-site/skills.vue
index b5e08d2de..f69cc0080 100644
--- a/pages/pix-site/skills.vue
+++ b/pages/pix-site/skills.vue
@@ -92,6 +92,7 @@ export default {
     h3,
     h4 {
       font-weight: 400;
+      color: $grey-90;
     }
 
     .competence {
diff --git a/pages/pix-site/stats.vue b/pages/pix-site/stats.vue
index e102193fc..595952e6d 100644
--- a/pages/pix-site/stats.vue
+++ b/pages/pix-site/stats.vue
@@ -113,6 +113,7 @@ export default {
   h2 {
     font-family: $font-open-sans;
     font-weight: 400;
+    color: $grey-90;
   }
   h1 {
     font-size: 44px;