diff --git a/js/src/common.scss b/js/src/common.scss
index 650effcdf..b2aac58d6 100644
--- a/js/src/common.scss
+++ b/js/src/common.scss
@@ -1,6 +1,6 @@
 a {
   text-decoration: underline;
-  text-decoration-color: #fea72b;
+  text-decoration-color: #ED8D07;
   text-decoration-thickness: 2px;
 
   &.navbar-item,
diff --git a/js/src/components/Event/DateCalendarIcon.vue b/js/src/components/Event/DateCalendarIcon.vue
index 6712d32af..21d72c23c 100644
--- a/js/src/components/Event/DateCalendarIcon.vue
+++ b/js/src/components/Event/DateCalendarIcon.vue
@@ -42,9 +42,11 @@ export default class DateCalendarIcon extends Vue {
 </script>
 
 <style lang="scss" scoped>
+@import "../../variables.scss";
+
 time.datetime-container {
-  background: #f6f7f8;
-  border: 1px solid rgba(46, 62, 72, 0.12);
+  background: $backgrounds;
+  border: 1px solid $borders;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
@@ -59,7 +61,7 @@ time.datetime-container {
     font-weight: 600;
 
     &.month {
-      color: #fa3e3e;
+      color: $danger;
       padding: 2px 0;
       font-size: 12px;
       line-height: 12px;
@@ -67,6 +69,7 @@ time.datetime-container {
     }
 
     &.day {
+      color: $violet-3;
       font-size: 20px;
       line-height: 20px;
     }
diff --git a/js/src/components/Event/EventMetadataBlock.vue b/js/src/components/Event/EventMetadataBlock.vue
index 4aab57660..79d9af5b3 100644
--- a/js/src/components/Event/EventMetadataBlock.vue
+++ b/js/src/components/Event/EventMetadataBlock.vue
@@ -20,6 +20,8 @@ export default class EventMetadataBlock extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@import "../../variables.scss";
+
 h2 {
   font-size: 1.8rem;
   font-weight: 500;
diff --git a/js/src/components/Tag.vue b/js/src/components/Tag.vue
index 7444eda0f..efc45ecc9 100644
--- a/js/src/components/Tag.vue
+++ b/js/src/components/Tag.vue
@@ -13,9 +13,11 @@ export default class Tag extends Vue {}
 </script>
 
 <style lang="scss" scoped>
+@import "../variables.scss";
+
 span.tag {
-  background: #ecebf7;
-  color: #8e8bae;
+  background: $purple-3;
+  color: $violet-2;
   text-transform: uppercase;
   &::before {
     content: "#";
diff --git a/js/src/variables.scss b/js/src/variables.scss
index 16549bf26..37a3001db 100644
--- a/js/src/variables.scss
+++ b/js/src/variables.scss
@@ -4,52 +4,79 @@ $bleuvert: #1e7d97;
 $jaune: #ffd599;
 $violet: #424056;
 
+/**
+ * Text body, paragraphs
+ */
+$violet-1: #3A384C;
+$violet-2: #474467;
+
+/**
+ * Titles, dark borders, buttons
+ */
+$violet-3: #3C376E;
+
+/**
+ * Borders
+ */
+$borders: #D7D6DE;
+$backgrounds: #ECEBF2;
+
+/**
+ * Text
+ */
+$purple-1: #757199;
+
+/**
+ * Background
+ */
+$purple-2: #CDCAEA;
+$purple-3: #E6E4F4;
+
+$orange-2: #ED8D07;
+$orange-3: #D35204;
+
+$yellow-1: #FFD599;
+$yellow-2: #FFF1DE;
+$yellow-3: #FBD5CB;
+$yellow-4: #f7ba30;
+
 $primary: $bleuvert;
 $primary-invert: findColorInvert($primary);
-//$secondary: #ffcc85;
 $secondary: $jaune;
 $secondary-invert: findColorInvert($secondary);
 
-$background-color: $violet;
+$background-color: $violet-2;
 
-$success: #0eccaf;
+$success: #0D8758;
 $success-invert: findColorInvert($success);
 $info: #36bcd4;
 $info-invert: findColorInvert($info);
-$danger: #ff7061;
+$danger: #FF2E54;
 $danger-invert: findColorInvert($danger);
 $link: $primary;
 $link-invert: $primary-invert;
+$text: $violet-1;
 
-$colors: map-merge(
-  $colors,
-  (
-    "primary": (
-      $primary,
+$colors: map-merge($colors,
+  ("primary": ($primary,
       $primary-invert,
     ),
-    "secondary": (
-      $secondary,
+    "secondary": ($secondary,
       $secondary-invert,
     ),
-    "success": (
-      $success,
+    "success": ($success,
       $success-invert,
     ),
-    "info": (
-      $info,
+    "info": ($info,
       $info-invert,
     ),
-    "danger": (
-      $danger,
+    "danger": ($danger,
       $danger-invert,
     ),
-    "link": (
-      $link,
+    "link": ($link,
       $link-invert,
     ),
-  )
-);
+  ));
 
 // Navbar
 $navbar-background-color: $secondary;
@@ -64,25 +91,34 @@ $body-background-color: #efeef4;
 $fullhd-enabled: false;
 $hero-body-padding-medium: 6rem 1.5rem;
 
-main > .container {
+main>.container {
   background: $body-background-color;
 }
 
 $title-color: #3c376e;
-$title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+$title-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
 $title-weight: 700;
 $title-size: 40px;
 $title-sub-size: 45px;
 $title-sup-size: 30px;
 
 $subtitle-color: #3a384c;
-$subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
-  serif;
+$subtitle-family: "Liberation Sans",
+"Helvetica Neue",
+Roboto,
+Helvetica,
+Arial,
+serif;
 $subtitle-weight: 400;
 $subtitle-size: 32px;
 $subtitle-sub-size: 30px;
 $subtitle-sup-size: 15px;
+
 .title {
   margin: 30px auto 45px;
 }
@@ -97,3 +133,4 @@ $subtitle-sup-size: 15px;
 $input-border-color: #dbdbdb;
 $breadcrumb-item-color: $primary;
 $checkbox-background-color: #fff;
+$title-color: $violet-3;
\ No newline at end of file
diff --git a/js/src/views/About.vue b/js/src/views/About.vue
index e39ccbd0d..c7bd7afce 100644
--- a/js/src/views/About.vue
+++ b/js/src/views/About.vue
@@ -134,7 +134,10 @@ export default class About extends Vue {
 }
 
 .hero.register {
-  background: lighten($background-color, 20%);
+  .title {
+    color: $violet-1;
+  }
+  background: $purple-2;
 }
 
 aside.menu {
diff --git a/js/src/views/About/AboutMobilizon.vue b/js/src/views/About/AboutMobilizon.vue
index 33bfbb182..3518c6f25 100644
--- a/js/src/views/About/AboutMobilizon.vue
+++ b/js/src/views/About/AboutMobilizon.vue
@@ -184,10 +184,6 @@ export default class AboutMobilizon extends Vue {}
   }
 }
 
-.hero.register {
-  background: lighten($background-color, 20%);
-}
-
 section {
   padding: 3rem 0;