diff --git a/doc/TODO.md b/doc/TODO.md
new file mode 100644
index 00000000..20d5e221
--- /dev/null
+++ b/doc/TODO.md
@@ -0,0 +1,5 @@
+# Todo - liste des choses à faire
+
+
+# Choses faites
+voir le [changelog.md]
diff --git a/doc/changelog.md b/doc/changelog.md
new file mode 100644
index 00000000..b63c508b
--- /dev/null
+++ b/doc/changelog.md
@@ -0,0 +1 @@
+# Change log
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 36ac3885..0f7b4c7e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,45 +1,88 @@
 @charset "UTF-8";
+// config
+$theme-vars: 'blue'; // violet , blue
 
 // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
-$green: #64d16e;
 $black: #000000;
-$ugly-purple: #b24eb7;
-$lavender-pink: #e9bdeb;
 $white: #ffffff;
-$dark-lavender: #7d6c99;
-$dusty-orange: #f18647;
-$violet: #bd10e0;
-$red: #cd0000;
 $cool-grey: #aeafb1;
 $warm-grey: #807e7e;
-$wisteria: #bf83c2;
-$pale-purple: #d198d4;
+
+$green: #64d16e;
+$dusty-orange: #f18647;
+$red: #cd0000;
+$pink: #fa7c91;
 
 $purple: #8a4d76;
-$pink: #fa7c91;
+$ugly-purple: #b24eb7;
+$violet: #bd10e0;
+$wisteria: #bf83c2;
+$pale-purple: #d198d4;
+$lavender-pink: #e9bdeb;
+$dark-lavender: #7d6c99;
+
+// blue variation around styleguide
+$blueish-green: #64d1a9;
+$blueish-dusty-orange: #74a389;
+$blueish-red: #9d00cd;
+$blueish-pink: #d47cfa;
+$blueish-purple: #4d4d8a;
+$blueish-ugly-purple: #4d5b8a;
+$blueish-violet: #5810bd;
+$blueish-wisteria: #8b83bf;
+$blueish-pale-purple: #8a9bd1;
+$blueish-lavender-pink: #8a97e9;
+$blueish-dark-lavender: #7d6c8a;
+$blueish-brown: #636c77;
+
 $brown: #757763;
 $beige-light: #d0d1cd;
 $beige-lighter: #eff0eb;
 
 // interpretations in app
-$primary_color: $ugly-purple;
-$primary: $ugly-purple;
-$secondary_color: $lavender-pink;
-$font_color: $black;
-$logo_color: $dark-lavender;
-$logo_color_2: $green;
-$legend_color: $dark-lavender;
-$legend_color_2: $dusty-orange;
-$choice_select_border_color: $cool-grey;
-$hover-color: $warm-grey;
-$grey-dark: $warm-grey;
-$grey-light: $beige-light;
-$clicked-color: $wisteria;
-$mini-button-color: $pale-purple;
-$warning: $dusty-orange;
-$danger: $red;
-$success: $green;
 
-// FONT
-$default_font: 'pt_sans';
-$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
+@if $theme-vars == 'violet' {
+	$primary_color: $ugly-purple;
+	$primary: $ugly-purple;
+	$secondary_color: $lavender-pink;
+	$font_color: $black;
+	$logo_color: $dark-lavender;
+	$logo_color_2: $green;
+	$legend_color: $dark-lavender;
+	$legend_color_2: $dusty-orange;
+	$choice_select_border_color: $cool-grey;
+	$hover-color: $warm-grey;
+	$grey-dark: $warm-grey;
+	$grey-light: $beige-light;
+	$clicked-color: $wisteria;
+	$mini-button-color: $pale-purple;
+	$warning: $dusty-orange;
+	$danger: $red;
+	$success: $green;
+
+	// FONT
+	$default_font: 'pt_sans';
+	$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
+} @else if $theme-vars == 'blue' {
+	$primary_color: $blueish-ugly-purple;
+	$primary: $blueish-ugly-purple;
+	$secondary_color: $blueish-lavender-pink;
+	$font_color: $black;
+	$logo_color: $blueish-dark-lavender;
+	$logo_color_2: $blueish-green;
+	$legend_color: $blueish-dark-lavender;
+	$legend_color_2: $blueish-dusty-orange;
+	$choice_select_border_color: $cool-grey;
+	$hover-color: $warm-grey;
+	$grey-dark: $warm-grey;
+	$grey-light: $beige-light;
+	$clicked-color: $blueish-wisteria;
+	$mini-button-color: $blueish-pale-purple;
+	$warning: $blueish-dusty-orange;
+	$danger: $blueish-red;
+	$success: $blueish-green;
+
+	// FONT
+	$default_font: 'pt_sans';
+	$title_font: 'proza_libre', 'Brie Light', 'Arial', 'DejaVu Sans Mono';
+}