diff --git a/app/src/scss/_variables.scss b/app/src/scss/_variables.scss
index d0703f59..8d193cd9 100644
--- a/app/src/scss/_variables.scss
+++ b/app/src/scss/_variables.scss
@@ -30,12 +30,42 @@
 $font-size-base: .9rem;
 $font-weight-bold: 500;
 
-$purple: #9932cc;
+$white:    var(--white);
+$gray-100: var(--gray-100);
+$gray-200: var(--gray-200);
+$gray-300: var(--gray-300);
+$gray-400: var(--gray-400);
+$gray-500: var(--gray-500);
+$gray-600: var(--gray-600);
+$gray-700: var(--gray-700);
+$gray-800: var(--gray-800);
+$gray-900: var(--gray-900);
+$black:    var(--black);
+
+$blue:    var(--blue);
+$indigo:  var(--indigo);
+$purple:  var(--purple);
+$pink:    var(--pink);
+$red:     var(--red);
+$orange:  var(--orange);
+$yellow:  var(--yellow);
+$green:   var(--green);
+$teal:    var(--teal);
+$cyan:    var(--cyan);
 
 $theme-colors: (
   'best': $purple,
 );
 
+$yiq-contrasted-threshold: var(--yiq-contrasted-threshold);
+
+$alert-bg-level:     -10;
+$alert-border-level: -9;
+$alert-color-level:  5;
+
+$list-group-item-bg-level:     -11;
+$list-group-item-color-level:  6;
+
 // Replace font-weight 300 with 200
 $font-weight-light: 200;
 $display1-weight: 200;
@@ -60,6 +90,9 @@ $card-spacer-x: 1rem;
 
 $list-group-item-padding-x: 1rem;
 
+// Hard coded for scss compilation to pass
+$b-toast-background-opacity: 100%;
+
 // Import default variables after the above setup to compute all other variables.
 @import '~bootstrap/scss/functions.scss';
 @import '_functions-override.scss';
diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index 67febc3f..fe051ba7 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -49,60 +49,81 @@
 @import 'font';
 @import '~fork-awesome/scss/fork-awesome.scss';
 
+// helper to set the required 4 CSS variables per color to allow `calc` computation of variants and states
+@mixin hsl-color($name, $h, $s, $l) {
+  --#{$name}: hsl(#{$h}, #{$s}, #{$l});
+  --#{$name}-h: #{$h};
+  --#{$name}-s: #{$s};
+  --#{$name}-l: #{$l};
+}
 
 :root {
-  --background-color: #ffffff;
-  --background-color-secondary: #fafbfc;
-  --border-color: #c5d9e8;
-  --font-color: #333;
-  --font-color-secondary: #3f536e;
+  color-scheme: light;
 
-  --black: #2c405a;
-  --blue: #0079c4;
-  --green: #81c926;
-  --grey: #8eacc5;
-  --orange: #fd7b1f;
-  --purple: #ab7ef6;
-  --red: #e0102b;
-  --turquoise: #26c1c9;
-  --white: #ffffff;
-  --yellow: #faca00;
+  --yiq-contrasted-threshold: 150;
 
-  --active: #0079c4;
-  --description: #8eacc5;
-  --error: #e0102b;
-  --normal: #c5d9e8;
-  --info: #0079c4;
-  --success: #81c926;
-  --warning: #ffc107;
+  @include hsl-color('white', 0, 0%, 100%);
+  @include hsl-color('black', 0, 0%, 0%);
+  @include hsl-color('blue', 211, 64%, 50%);
+  @include hsl-color('indigo', 263, 90%, 51%);
+  @include hsl-color('purple', 280, 61%, 50%);
+  @include hsl-color('pink', 332, 79%, 58%);
+  @include hsl-color('red', 354, 70%, 54%);
+  @include hsl-color('orange', 27, 98%, 54%);
+  @include hsl-color('yellow', 45, 100%, 66%);
+  @include hsl-color('green', 134, 61%, 41%);
+  @include hsl-color('teal', 162, 73%, 46%);
+  @include hsl-color('cyan', 188, 78%, 41%);
+
+  @include hsl-color('gray-100', 210, 17%, 98%);
+  @include hsl-color('gray-200', 210, 16%, 93%);
+  @include hsl-color('gray-300', 210, 14%, 89%);
+  @include hsl-color('gray-400', 210, 14%, 83%);
+  @include hsl-color('gray-500', 210, 11%, 71%);
+  @include hsl-color('gray-600', 208, 7%, 46%);
+  @include hsl-color('gray-700', 210, 9%, 31%);
+  @include hsl-color('gray-800', 210, 10%, 23%);
+  @include hsl-color('gray-900', 210, 11%, 15%);
+
+  // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
+  @each $color, $value in $theme-colors {
+    @include list-group-item-variant($color, theme-color-level($color, $list-group-item-bg-level), theme-color-level($color, $list-group-item-color-level));
+  }
 }
 
 [dark-theme="true"] {
-  /* Variables for dark mode */
-  --background-color: #202025;
-  --background-color-secondary: #273142;
-  --border-color: #313d4f;
-  --font-color: #ffffff;
-  --font-color-secondary: #a9c7df;
+  color-scheme: dark; // Ask browser to use dark mode native styling
 
-  --black: #25374f;
-  --blue: #0093ee;
-  --green: #96bf47;
-  --grey: #a9c7df;
-  --orange: #ffb610;
-  --purple: #ab7ef6;
-  --red: #e0102b;
-  --turquoise: #26c1c9;
-  --white: #ffffff;
-  --yellow: #ffc02a;
+  --yiq-contrasted-threshold: 120;
 
-  --active: #0093ee;
-  --description: #8eacc5;
-  --error: #e0102b;
-  --normal: #313d4f;
-  --info: #0093ee;
-  --success: #96bf47;
-  --warning: #ffc02a;
+  @include hsl-color('white', 256, 0%, 12.5%);
+  @include hsl-color('black', 256, 0%, 100%);
+  @include hsl-color('blue', 210.7, 95.5%, 65.5%);
+  @include hsl-color('purple', 280, 77.8%, 62.9%);
+  @include hsl-color('red', 0, 100%, 67.6%);
+  @include hsl-color('green', 134.3, 74.4%, 67.8%);
+  @include hsl-color('cyan', 188.4, 91.4%, 72.5%);
+
+  @include hsl-color('gray-900', 210, 17%, 98%);
+  @include hsl-color('gray-800', 210, 16%, 93%);
+  @include hsl-color('gray-700', 210, 14%, 89%);
+  @include hsl-color('gray-600', 210, 14%, 83%);
+  @include hsl-color('gray-500', 210, 11%, 71%);
+  @include hsl-color('gray-400', 208, 7%, 46%);
+  @include hsl-color('gray-300', 210, 9%, 31%);
+  @include hsl-color('gray-200', 210, 10%, 23%);
+  @include hsl-color('gray-100', 210, 11%, 15%);
+
+  // Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
+  @each $color, $value in $theme-colors {
+    @include list-group-item-variant($color, theme-color-level($color, -6), theme-color-level($color, 2));
+  }
+
+  @each $color, $value in $theme-colors {
+    .alert-#{$color} {
+      @include alert-variant(theme-color-level($color, -6), theme-color-level($color, -5), theme-color-level($color, 2));
+    }
+  }
 }
 
 // Style overrides happens after dependencies imports
@@ -129,13 +150,6 @@ body {
 }
 
 
-// Bootstrap overrides
-
-// Overwrite list-group-item variants to lighter ones (used in diagnosis for example)
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, theme-color-level($color, -11), theme-color-level($color, 6));
-}
-
 // Add breakpoints for w-*
 @each $breakpoint in map-keys($grid-breakpoints) {
   @each $size, $length in $sizes {