diff --git a/js/src/variables.scss b/js/src/variables.scss
index 59f8c0d68..931681485 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -1,7 +1,14 @@
 @import "~bulma/sass/utilities/functions.sass";
 @import "~bulma/sass/utilities/initial-variables.sass";
 @import "~bulma/sass/utilities/derived-variables.sass";
-
+// chapril colors
+$chapril_blue: #2e5281;
+$chapril_blue_light: #bcd0e5;
+$white: mix(#fff, #bcd0e5);
+$whitest: #fff;
+$chapril_orange: #ff5e00;
+$chapril_grey: #5f5f5f;
+// other
 $bleuvert: #1e7d97;
 $jaune: #ffd599;
 $violet: #424056;
@@ -20,44 +27,45 @@ $violet-3: #3c376e;
 /**
  * Borders
  */
-$borders: #d7d6de;
-$backgrounds: #ecebf2;
+$borders: mix($chapril_blue, #d7d6de);
+$backgrounds: mix($chapril_blue, #ecebf2);
 
 /**
  * Text
  */
-$purple-1: #757199;
+$purple-1: mix($chapril_blue, #757199);
 
 /**
  * Background
  */
-$purple-2: #cdcaea;
-$purple-3: #e6e4f4;
+$purple-2: mix($chapril_blue, #cdcaea);
+$purple-3: mix($chapril_blue, #e6e4f4);
 
-$orange-2: #ed8d07;
-$orange-3: #d35204;
+$orange-2: mix($chapril_blue, #ed8d07);
+$orange-3: mix($chapril_blue, #d35204);
 
-$yellow-1: #ffd599;
-$yellow-2: #fff1de;
-$yellow-3: #fbd5cb;
-$yellow-4: #f7ba30;
+$yellow-1: mix($chapril_blue, #fff1e8);
+$yellow-2: mix($chapril_blue, #fff1de);
+$yellow-3: mix($chapril_blue, #fff8f6);
+$yellow-4: mix($chapril_blue, #b4f0ff);
 
-$primary: $bleuvert;
+$primary: $chapril_blue;
 $primary-invert: findColorInvert($primary);
-$secondary: $jaune;
+$secondary: lighten($chapril_blue, 20%);
 $secondary-invert: findColorInvert($secondary);
 
-$background-color: $violet-2;
+$background-color: mix($chapril_blue, $violet-2);
+$background-color-darker: darken($background-color, 10%);
 
-$success: #0d8758;
+$success: mix($chapril_blue, #0d8758);
 $success-invert: findColorInvert($success);
-$info: #36bcd4;
+$info: mix($chapril_blue, #36bcd4);
 $info-invert: findColorInvert($info);
-$danger: #ff2e54;
+$danger: mix($chapril_blue, #ff2e54);
 $danger-invert: findColorInvert($danger);
 $link: $primary;
 $link-invert: $primary-invert;
-$text: $violet-1;
+$text: mix($chapril_blue, $violet-1);
 
 $colors: map-merge(
   $colors,
@@ -100,18 +108,14 @@ $navbar-height: 4rem;
 
 // Footer
 $footer-padding: 3rem 1.5rem 1rem;
-$footer-background-color: $background-color;
+$footer-background-color: $violet-2;
+$footer-text-color: mix(#000, $violet-2);
 
-$body-background-color: #efeef4;
+$body-background-color: mix($chapril_blue, #efeef4);
 $fullhd-enabled: false;
 $hero-body-padding-medium: 6rem 1.5rem;
 
-main > .container {
-  background: $body-background-color;
-  min-height: 70vh;
-}
-
-$title-color: #3c376e;
+$title-color: $chapril_blue;
 $title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
   serif;
 $title-weight: 700;
@@ -119,7 +123,7 @@ $title-size: 40px;
 $title-sub-size: 45px;
 $title-sup-size: 30px;
 
-$subtitle-color: #3a384c;
+$subtitle-color: $chapril_grey;
 $subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
   serif;
 $subtitle-weight: 400;
@@ -141,4 +145,4 @@ $subtitle-sup-size: 15px;
 //$input-border-color: #dbdbdb;
 $breadcrumb-item-color: $primary;
 $checkbox-background-color: #fff;
-$title-color: $violet-3;
+$title-color: $chapril_blue;