diff --git a/src/presentation/components/App.vue b/src/presentation/components/App.vue
index a0cd601a..387788fb 100644
--- a/src/presentation/components/App.vue
+++ b/src/presentation/components/App.vue
@@ -1,10 +1,10 @@
 <template>
   <div id="app">
-      <div class="wrapper">
-        <TheHeader class="row" />
-        <TheSearchBar class="row" />
-        <TheScriptArea class="row" />
-        <TheCodeButtons class="row code-buttons" />
+      <div class="app__wrapper">
+        <TheHeader class="app__row" />
+        <TheSearchBar class="app__row" />
+        <TheScriptArea class="app__row" />
+        <TheCodeButtons class="app__row app__code-buttons" />
         <TheFooter />
       </div>
    </div>
@@ -41,27 +41,36 @@ export default class App extends Vue {
   box-sizing: border-box;
 }
 
+a {
+    color:inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    &:hover {
+        color: $color-primary;
+    }
+}
+
 body {
-  background: $light-gray;
+  background: $color-background;
   font-family: $main-font;
-  color: $slate;
 }
 
 #app {
   margin-right: auto;
   margin-left: auto;
   max-width: 1600px;
-  .wrapper {
+  .app__wrapper {
     margin: 0% 2% 0% 2%;
-    background-color: white;
+    background-color: $color-surface;
+    color: $color-on-surface;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
     padding: 2%;
     display:flex;
     flex-direction: column;
-    .row {
+    .app__row {
       margin-bottom: 10px;
     }
-    .code-buttons {
+    .app__code-buttons {
       padding-bottom: 10px;
     }
   }
diff --git a/src/presentation/components/Code/CodeButtons/Code.vue b/src/presentation/components/Code/CodeButtons/Code.vue
index 99ea8b7a..af9136ad 100644
--- a/src/presentation/components/Code/CodeButtons/Code.vue
+++ b/src/presentation/components/Code/CodeButtons/Code.vue
@@ -32,8 +32,8 @@ export default class Code extends Vue {
     white-space: nowrap;
     justify-content: space-between;
     font-family: $normal-font;
-    background-color: $slate;
-    color: $light-gray;
+    background-color: $color-primary-darker;
+    color: $color-on-primary;
     padding-left: 0.3rem;
     padding-right: 0.3rem;
     .dollar {
@@ -45,7 +45,7 @@ export default class Code extends Vue {
         margin-left: 1rem;
         cursor: pointer;
         &:hover {
-            opacity: 0.8;
+            color: $color-primary;
         }
     }
     code {
diff --git a/src/presentation/components/Code/CodeButtons/IconButton.vue b/src/presentation/components/Code/CodeButtons/IconButton.vue
index 631aae99..b95228ea 100644
--- a/src/presentation/components/Code/CodeButtons/IconButton.vue
+++ b/src/presentation/components/Code/CodeButtons/IconButton.vue
@@ -32,25 +32,22 @@ export default class IconButton extends Vue {
     flex-direction: column;
     align-items: center;
 
-    background-color: $accent;
+    background-color: $color-secondary;
+    color: $color-on-secondary;
+
     border: none;
-    color: $white;
     padding:20px;
     transition-duration: 0.4s;
     overflow: hidden;
-    box-shadow: 0 3px 9px $dark-slate;
+    box-shadow: 0 3px 9px $color-primary-darkest;
     border-radius: 4px;
 
     cursor: pointer;
-    // border: 0.1em solid $slate;
-	// border-radius: 80px;
-	// padding: 0.5em;
     width: 10%;
     min-width: 90px;
     &:hover {
-        background: $white;
-        box-shadow: 0px 2px 10px 5px $accent;
-        color: $black;
+        background: $color-surface;
+        box-shadow: 0px 2px 10px 5px $color-secondary;
     }
     &:hover>&__text {
         display: block;
@@ -62,7 +59,7 @@ export default class IconButton extends Vue {
         display: none;
         font-family: $artistic-font;
         font-size: 1.5em;
-        color: $gray;
+        color: $color-primary;
         font-weight: 500;
         line-height: 1.1;
     }
diff --git a/src/presentation/components/Code/TheCodeArea.vue b/src/presentation/components/Code/TheCodeArea.vue
index 6e8bc68c..60094da4 100644
--- a/src/presentation/components/Code/TheCodeArea.vue
+++ b/src/presentation/components/Code/TheCodeArea.vue
@@ -157,8 +157,7 @@ function getDefaultCode(language: ScriptingLanguage): string {
   height: 100%;
   overflow: auto;
   &__highlight {
-    background-color: $accent;
-    opacity: 0.2; // having procent fails in production (minified) build
+    background-color: $color-secondary-light;
     position: absolute;
   }
 }
diff --git a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
index a8b98150..82b30183 100644
--- a/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
+++ b/src/presentation/components/Scripts/Menu/MenuOptionListItem.vue
@@ -32,6 +32,6 @@ export default class MenuOptionListItem extends Vue {
     }
 }
 .disabled {
-    color:$gray;
+    color: $color-primary-light;
 }
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/Slider/Handle.vue b/src/presentation/components/Scripts/Slider/Handle.vue
index 3236c53f..7a0a3481 100644
--- a/src/presentation/components/Scripts/Slider/Handle.vue
+++ b/src/presentation/components/Scripts/Slider/Handle.vue
@@ -3,12 +3,12 @@
         class="handle"
         :style="{ cursor: cursorCssValue }"
         @mousedown="startResize">
-        <div class="line"></div>
+        <div class="line" />
         <font-awesome-icon
-            class="image"
+            class="icon"
             :icon="['fas', 'arrows-alt-h']" 
         />
-        <div class="line"></div>
+        <div class="line" />
     </div>
 </template>
 
@@ -45,6 +45,9 @@ export default class Handle extends Vue {
 <style lang="scss" scoped>
 @import "@/presentation/styles/colors.scss";
 
+$color          : $color-primary-dark;
+$color-hover    : $color-primary;
+
 .handle {
     user-select: none;
     display: flex;
@@ -52,19 +55,19 @@ export default class Handle extends Vue {
     align-items: center;
     &:hover {
         .line {
-            background: $gray;
+            background: $color-hover;
         }
         .image {
-            color: $gray;
+            color: $color-hover;
         }
     }
     .line {
         flex: 1;
-        background: $dark-gray;
+        background: $color;
         width: 3px;
     }
-    .image {
-        color: $dark-gray;
+    .icon {
+        color: $color;
     }
     margin-right: 5px;
     margin-left: 5px;
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index b74153ea..4ef49841 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -111,8 +111,8 @@ $card-horizontal-gap    : $card-gap;
     padding: /*top:*/ $card-inner-padding /*right:*/ $card-inner-padding /*bottom:*/ 0 /*left:*/ $card-inner-padding;
     position: relative;
     cursor: pointer;
-    background-color: $gray;
-    color: $light-gray;
+    background-color: $color-primary;
+    color: $color-on-primary;
     font-size: 1.5em;
     height: 100%;
     width: 100%;
@@ -125,7 +125,8 @@ $card-horizontal-gap    : $card-gap;
     justify-content: center;
 
     &:hover {
-      background-color: $accent;
+      background-color: $color-secondary;
+      color: $color-on-secondary;
       transform: scale(1.05);
     }
     &:after {
@@ -149,13 +150,13 @@ $card-horizontal-gap    : $card-gap;
   &__expander {
     transition: all 0.2s ease-in-out;
     position: relative;
-    background-color: $slate;
-    color: $light-gray;
+    background-color: $color-primary-darker;
+    color: $color-on-primary;
     display: flex;
     align-items: center;
 
     &__content {
-      flex: 1;flex: 1;
+      flex: 1;
       display: flex;
       justify-content: center;
       word-break: break-word;
@@ -165,10 +166,11 @@ $card-horizontal-gap    : $card-gap;
       width: auto;
       font-size: 1.5em;
       align-self: flex-start;
-      margin-right:0.25em;
+      margin-right: 0.25em;
       cursor: pointer;
+      color: $color-primary-light;
       &:hover {
-        opacity: 0.9;
+        color: $color-primary;
       }
     }
   }
@@ -192,7 +194,8 @@ $card-horizontal-gap    : $card-gap;
   &.is-expanded {
     .card__inner {
       height: auto;
-      background-color: $accent;
+      background-color: $color-secondary;
+      color: $color-on-secondary;
       &:after { // arrow
         content: "";
         display: block;
@@ -201,7 +204,7 @@ $card-horizontal-gap    : $card-gap;
         left: calc(50% - #{$arrow-size});
         border-left: #{$arrow-size} solid transparent;
         border-right: #{$arrow-size} solid transparent;
-        border-bottom: #{$arrow-size} solid #333a45;
+        border-bottom: #{$arrow-size} solid $color-primary-darker;
       }
     }
 
@@ -224,13 +227,13 @@ $card-horizontal-gap    : $card-gap;
     .card__inner {
       pointer-events: none;
       height: auto;
-      opacity: 0.5;
+      background-color: $color-primary-light;
       transform: scale(0.95);
     }
     
     &:hover {
       .card__inner {
-        background-color: $gray;
+        background-color: $color-primary;
         transform: scale(1);
       }
     }
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
index 446317f1..19ea9a28 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue
@@ -33,11 +33,11 @@
 }
 .documentationUrl {
     display: flex;
-    color: $gray;
+    color: $color-primary;
     cursor: pointer;
     vertical-align: middle;
     &:hover {
-        color: $slate;
+        color: $color-primary-darker;
     }
     &:not(:first-child) {
       margin-left: 0.1em;
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
index add21618..202f7162 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue
@@ -34,15 +34,15 @@
 <style scoped lang="scss">
 @import "@/presentation/styles/colors.scss";
 #node {
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    .text {
-      display: flex;
-      align-items: center;
-    }
-    .item:not(:first-child) {
-      margin-left: 5px;
-    }
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .text {
+    display: flex;
+    align-items: center;
+  }
+  .item:not(:first-child) {
+    margin-left: 5px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
index 6d9b94cf..9d7ac728 100644
--- a/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
+++ b/src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
@@ -51,100 +51,109 @@ export default class RevertToggle extends StatefulVue {
 
 
 <style scoped lang="scss">
-    @import "@/presentation/styles/colors.scss";
-    $width: 85px;
-    $height: 30px;
-    // https://www.designlabthemes.com/css-toggle-switch/
-    .checkbox-switch {
+@import "@/presentation/styles/colors.scss";
+
+$color-unchecked-bullet : $color-primary-darker;
+$color-unchecked-text   : $color-on-primary;
+$color-unchecked-bg     : $color-primary;
+$color-checked-bg       : $color-secondary;
+$color-checked-text     : $color-on-secondary;
+$color-checked-bullet   : $color-on-secondary;
+$size-width             : 85px;
+$size-height            : 30px;
+
+// https://www.designlabthemes.com/css-toggle-switch/
+.checkbox-switch {
+    cursor: pointer;
+    display: inline-block;
+    overflow: hidden;
+    position: relative;
+    width: $size-width;
+    height: $size-height;
+    -webkit-border-radius: $size-height;
+    border-radius: $size-height;
+    line-height: $size-height;
+    font-size: $size-height / 2;
+    display: inline-block;
+
+    input.input-checkbox {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: $size-width;
+        height: $size-height;
+        padding: 0;
+        margin: 0;
+        opacity: 0;
+        z-index: 2;
         cursor: pointer;
-        display: inline-block;
-        overflow: hidden;
+    }
+
+    .checkbox-animate {
         position: relative;
-        width: $width;
-        height: $height;
-        -webkit-border-radius: $height;
-        border-radius: $height;
-        line-height: $height;
-        font-size: $height / 2;
-        display: inline-block;
+        width: $size-width;
+        height: $size-height;
+        background-color: $color-unchecked-bg;
+        -webkit-transition: background-color 0.25s ease-out 0s;
+        transition: background-color 0.25s ease-out 0s;
 
-        input.input-checkbox {
+        // Circle
+        &:before {
+            $circle-size: $size-height * 0.66;
+
+            content: "";
+            display: block;
             position: absolute;
-            left: 0;
-            top: 0;
-            width: $width;
-            height: $height;
-            padding: 0;
-            margin: 0;
-            opacity: 0;
-            z-index: 2;
-            cursor: pointer;
-        }
-
-        .checkbox-animate {
-            position: relative;
-            width: $width;
-            height: $height;
-            background-color: $gray;
-            -webkit-transition: background-color 0.25s ease-out 0s;
-            transition: background-color 0.25s ease-out 0s;
-
-            // Circle
-            &:before {
-                $circle-size: $height * 0.66;
-
-                content: "";
-                display: block;
-                position: absolute;
-                width: $circle-size;
-                height: $circle-size;
-                border-radius: $circle-size * 2;
-                -webkit-border-radius: $circle-size * 2;
-                background-color: $slate;
-                top: $height * 0.16;
-                left: $width * 0.05;
-                -webkit-transition: left 0.3s ease-out 0s;
-                transition: left 0.3s ease-out 0s;
-                z-index: 10;
-            }
-        }
-
-        input.input-checkbox:checked {
-            + .checkbox-animate {
-                background-color: $accent;
-            }
-            + .checkbox-animate:before {
-                left: ($width - $width/3.5);
-                background-color: $light-gray;
-            }
-            + .checkbox-animate .checkbox-off {
-                display: none;
-                opacity: 0;
-            }
-            + .checkbox-animate .checkbox-on {
-                display: block;
-                opacity: 1;
-            }
-        }
-
-        .checkbox-off, .checkbox-on {
-            float: left;
-            color: $white;
-            font-weight: 700;
-                -webkit-transition: all 0.3s ease-out 0s;
-            transition: all 0.3s ease-out 0s;
-        }
-
-        .checkbox-off {
-            margin-left: $width / 3;
-            opacity: 1;
-        }
-
-        .checkbox-on {
-            display: none;
-            float: right;
-            margin-right: $width / 3;
-            opacity: 0;
+            width: $circle-size;
+            height: $circle-size;
+            border-radius: $circle-size * 2;
+            -webkit-border-radius: $circle-size * 2;
+            background-color: $color-unchecked-bullet;
+            top: $size-height * 0.16;
+            left: $size-width * 0.05;
+            -webkit-transition: left 0.3s ease-out 0s;
+            transition: left 0.3s ease-out 0s;
+            z-index: 10;
         }
     }
+
+    input.input-checkbox:checked {
+        + .checkbox-animate {
+            background-color: $color-checked-bg;
+        }
+        + .checkbox-animate:before {
+            left: ($size-width - $size-width/3.5);
+            background-color: $color-checked-bullet;
+        }
+        + .checkbox-animate .checkbox-off {
+            display: none;
+            opacity: 0;
+        }
+        + .checkbox-animate .checkbox-on {
+            display: block;
+            opacity: 1;
+        }
+    }
+
+    .checkbox-off, .checkbox-on {
+        float: left;
+        font-weight: 700;
+            -webkit-transition: all 0.3s ease-out 0s;
+        transition: all 0.3s ease-out 0s;
+    }
+
+    .checkbox-off {
+        margin-left: $size-width / 3;
+        opacity: 1;
+        color: $color-unchecked-text;
+    }
+
+    .checkbox-on {
+        display: none;
+        float: right;
+        margin-right: $size-width / 3;
+        opacity: 0;
+        color: $color-checked-text;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index a87beb93..406a820b 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -120,20 +120,20 @@ $inner-margin: 4px;
 .search {
     display: flex;
     flex-direction: column;
-    background-color: $slate;
+    background-color: $color-primary-darker;
     &__query {
         display: flex;
         justify-content: center;
         flex-direction: row;
         align-items: center;
         margin-top: 1em;
-        color: $gray;
+        color: $color-primary;
         &__close-button {
             cursor: pointer;
             font-size: 1.25em;
             margin-left: 0.25rem;
             &:hover {
-                opacity: 0.9;
+                color: $color-primary-dark;
             }
         }
     }
@@ -142,7 +142,7 @@ $inner-margin: 4px;
         flex-direction: column;
         word-break:break-word;
         text-transform: uppercase;
-        color: $light-gray;
+        color: $color-on-primary;
         font-size: 1.5em;
         padding:10px;
         text-align:center;
@@ -150,7 +150,7 @@ $inner-margin: 4px;
             padding-bottom:13px;
         }
         a {
-            color: $gray;
+            color: $color-primary;
         }
     }
 }
diff --git a/src/presentation/components/Shared/Dialog.vue b/src/presentation/components/Shared/Dialog.vue
index 7f8a0b90..33c2ace3 100644
--- a/src/presentation/components/Shared/Dialog.vue
+++ b/src/presentation/components/Shared/Dialog.vue
@@ -32,26 +32,30 @@ export default class Dialog extends Vue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/fonts.scss";
+@import "@/presentation/styles/colors.scss";
 
 .dialog {
+  color: $color-surface;
   font-family: $normal-font;
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
 
   &__content {
+    color: $color-on-surface;
     width: 100%;
     margin: 5%;
   }
 
   &__close-button {
+    color: $color-primary-dark;
     width: auto;
     font-size: 1.5em;
     margin-right: 0.25em;
     align-self: flex-start;
     cursor: pointer;
     &:hover {
-      opacity: 0.9;
+      color: $color-primary;
     }
   }
 }
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index 230c5a1a..9afdd21f 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -1,7 +1,7 @@
 <template>
   <span 
     class="container"
-    v-bind:class="{ 'container_unsupported': !hasCurrentOsDesktopVersion, 'container_supported': hasCurrentOsDesktopVersion }">
+    v-bind:class="{ 'container-unsupported': !hasCurrentOsDesktopVersion, 'container-supported': hasCurrentOsDesktopVersion }">
     <span class="description">
       <font-awesome-icon class="description__icon" :icon="['fas', 'desktop']"  />
       <span class="description__text">For desktop:</span>
@@ -39,15 +39,16 @@ export default class DownloadUrlList extends Vue {
 
 <style scoped lang="scss">
 @import "@/presentation/styles/media.scss";
+@import "@/presentation/styles/colors.scss";
 
 .container {
   display:flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  &_unsupported {
-    opacity: 0.9;
+  &-unsupported {
+    opacity: $color-primary-light;
   }
-  &_supported {
+  &-supported {
     font-size: 1em;
   }
   .description {
@@ -62,7 +63,6 @@ export default class DownloadUrlList extends Vue {
 .urls {
   &__url {
     &:not(:first-child)::before {
-      opacity: 0.5;
       content: "|";
       font-size: 0.6rem;
       padding: 0 5px;
diff --git a/src/presentation/components/TheFooter/DownloadUrlListItem.vue b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
index fdc59f7f..8ff68bc9 100644
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
@@ -71,11 +71,5 @@ function getOperatingSystemName(os: OperatingSystem): string {
     &__inactive {
         font-size: 0.70em;
     }
-    a {
-        color:inherit;
-        &:hover {
-            opacity: 0.8;
-        }
-    }
 }
 </style>
diff --git a/src/presentation/components/TheFooter/PrivacyPolicy.vue b/src/presentation/components/TheFooter/PrivacyPolicy.vue
index 51c6e0ce..47511863 100644
--- a/src/presentation/components/TheFooter/PrivacyPolicy.vue
+++ b/src/presentation/components/TheFooter/PrivacyPolicy.vue
@@ -71,12 +71,5 @@ export default class PrivacyPolicy extends Vue {
           margin-top:0.2rem;
         }
     }
-
-    a {
-      color:inherit;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
 }
 </style>
diff --git a/src/presentation/components/TheFooter/TheFooter.vue b/src/presentation/components/TheFooter/TheFooter.vue
index f718d6bc..cdfa6799 100644
--- a/src/presentation/components/TheFooter/TheFooter.vue
+++ b/src/presentation/components/TheFooter/TheFooter.vue
@@ -78,7 +78,6 @@ export default class TheFooter extends Vue {
     this.feedbackUrl = info.feedbackUrl;
   }
 }
-
 </script>
 
 <style scoped lang="scss">
@@ -108,17 +107,8 @@ export default class TheFooter extends Vue {
       }
     }
     flex-wrap: wrap;
-    color: $dark-gray;
     font-size: 1rem;
     font-family: $normal-font;
-    a {
-      color:inherit;
-      text-decoration: underline;
-      cursor: pointer;
-      &:hover {
-        opacity: 0.8;
-      }
-    }
     &__item:not(:first-child) {
       &::before {
         content: "|";
@@ -134,24 +124,4 @@ export default class TheFooter extends Vue {
     }
   }
 }
-.modal {
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: row;
-
-    &__content {
-      width: 100%;
-    }
-
-    &__close-button {
-      width: auto;
-      font-size: 1.5em;
-      margin-right:0.25em;
-      align-self: flex-start;
-      cursor: pointer;
-      &:hover {
-        opacity: 0.9;
-      }
-    }
-}
 </style>
diff --git a/src/presentation/components/TheHeader.vue b/src/presentation/components/TheHeader.vue
index d8ad5ffb..0e8a3888 100644
--- a/src/presentation/components/TheHeader.vue
+++ b/src/presentation/components/TheHeader.vue
@@ -36,7 +36,6 @@ export default class TheHeader extends Vue {
 
   .title {
     margin: 0;
-    color: $black;
     text-transform: uppercase;
     font-family: $main-font;
     font-size: 2.5em;
@@ -45,7 +44,7 @@ export default class TheHeader extends Vue {
   .subtitle {
     margin: 0;
     font-size: 1.5em;
-    color: $gray;
+    color: $color-primary;
     font-family: $artistic-font;
     font-weight: 500;
     line-height: 1.2;
diff --git a/src/presentation/components/TheSearchBar.vue b/src/presentation/components/TheSearchBar.vue
index 732ad6a0..56300660 100644
--- a/src/presentation/components/TheSearchBar.vue
+++ b/src/presentation/components/TheSearchBar.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="search" v-non-collapsing>
-      <input type="search" class="searchTerm"
+      <input type="search" class="search-term"
         :placeholder="searchPlaceHolder"
         v-model="searchQuery" >
-      <div class="iconWrapper">
+      <div class="icon-wrapper">
           <font-awesome-icon :icon="['fas', 'search']" />
       </div>
   </div>
@@ -65,34 +65,36 @@ export default class TheSearchBar extends StatefulVue {
   width: 100%;
   position: relative;
   display: flex;
+  input {
+    background: inherit;
+  }
 }
 
-.searchTerm {
+.search-term {
   width: 100%;
   min-width: 60px;
-  border: 1.5px solid $gray;
+  border: 1.5px solid $color-primary;
   border-right: none;
   height: 36px;
   border-radius: 3px 0 0 3px;
   padding-left:10px;
   padding-right:10px;
   outline: none;
-  color: $gray;
-    font-family: $normal-font;
-    font-size:1em;
+  color: $color-primary;
+  font-family: $normal-font;
+  font-size:1em;
+  &:focus {
+    color: $color-primary-darker;
+  }
 }
 
-.searchTerm:focus{
-  color: $slate;
-}
-
-.iconWrapper {
+.icon-wrapper {
   width: 40px;
   height: 36px;
-  border: 1px solid $gray;
-  background: $gray;
+  border: 1px solid $color-primary;
+  background: $color-primary;
   text-align: center;
-  color: $white;
+  color: $color-on-primary;
   border-radius: 0 5px 5px 0;
   font-size: 20px;
   padding:5px;
diff --git a/src/presentation/styles/colors.scss b/src/presentation/styles/colors.scss
index 2018c485..d2499ec3 100644
--- a/src/presentation/styles/colors.scss
+++ b/src/presentation/styles/colors.scss
@@ -1,8 +1,25 @@
-$white: #fff;
-$light-gray: #eceef1;
-$gray: darken($light-gray, 30%);
-$dark-gray: #616f86;
-$slate: darken($light-gray, 70%);
-$dark-slate: #2f3133;
-$accent: #1abc9c;
-$black: #000
\ No newline at end of file
+/*
+    Colors used throughout the application
+    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
+    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
+*/
+
+// --- Primary | The color displayed most frequently across screens and components
+$color-primary              : #949fb0;
+$color-primary-light        : lighten($color-primary, 15%);
+$color-primary-dark         : darken($color-primary, 18%);
+$color-primary-darker       : darken($color-primary, 40%);
+$color-primary-darkest      : darken($color-primary, 44%);
+$color-on-primary           : lighten($color-primary, 30%);     // Text/iconography color that is usable on top of primary color
+
+// --- Secondary | Accent color, should be applied sparingly to accent select parts of UI
+$color-secondary            : #1abc9c;
+$color-secondary-light      : lighten($color-secondary, 48%);
+$color-on-secondary         : #fff;                             // Text/iconography color that is usable on top of secondary color
+
+// --- Surface | Affect surfaces of components, such as cards, sheets, and menus.
+$color-surface              : #fff;
+$color-on-surface           : #000;                             // Text/iconography color that is usable on surface
+
+// Background | Appears behind scrollable content.
+$color-background           : lighten($color-primary, 30);
diff --git a/src/presentation/styles/tooltip.scss b/src/presentation/styles/tooltip.scss
index 3cb7c447..81f15d94 100644
--- a/src/presentation/styles/tooltip.scss
+++ b/src/presentation/styles/tooltip.scss
@@ -1,12 +1,12 @@
-// based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
+// Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
 @import "@/presentation/styles/colors.scss";
 
 .tooltip {
     display: block !important;
     z-index: 10000;
     .tooltip-inner {
-      background: $black;
-      color: $white;
+      background: $color-primary-darkest;
+      color: $color-on-primary;
       border-radius: 16px;
       padding: 5px 10px 4px;
     }
@@ -16,7 +16,7 @@
       border-style: solid;
       position: absolute;
       margin: 5px;
-      border-color: $black;
+      border-color: $color-primary-darkest;
       z-index: 1;
     }
     &[x-placement^="top"] {
diff --git a/src/presentation/styles/tree.scss b/src/presentation/styles/tree.scss
index 317a2c77..d30a45ea 100644
--- a/src/presentation/styles/tree.scss
+++ b/src/presentation/styles/tree.scss
@@ -1,41 +1,57 @@
 // Overrides base styling for LiquorTree
 @import "@/presentation/styles/colors.scss";
 
+$color-tree-bg                              : $color-primary-darker;
+$color-node-arrow                           : $color-on-primary;
+$color-node-fg                              : $color-on-primary;
+$color-node-hover-bg                        : $color-primary-dark;
+$color-node-keyboard-bg                     : $color-surface;
+$color-node-keyboard-fg                     : $color-on-surface;
+$color-node-checkbox-checked-bg             : $color-secondary;
+$color-node-checkbox-checked-border         : $color-secondary;
+$color-node-checkbox-checked-checked-tick   : $color-on-secondary;
+$color-node-checkbox-unchecked-bg           : $color-primary-darkest;
+$color-node-checkbox-unchecked-border       : $color-on-primary;
+
 .tree {
-    background: $slate;
+    background: $color-tree-bg;
     &-node { 
         white-space: normal !important;
         > .tree-content {
             > .tree-anchor > span {
-                color: $white;
+                color: $color-node-fg;
                 text-transform: uppercase;
                 font-size: 1.5em;
             }
             &:hover {
-                background: $dark-gray !important;
+                background: $color-node-hover-bg !important;
             }
         }
-        &.selected { // When using keyboard navigation it higlights current item and its child items
-             background: $gray;
+        &.selected { // When using keyboard navigation it highlights current item and its child items
+            background: $color-node-keyboard-bg;
             .tree-text {
-                color: $black !important;
+                color: $color-node-keyboard-fg !important; //  $block
             }
         }
     }
     &-checkbox {
+        border-color: $color-node-checkbox-unchecked-border !important;
         &.checked {
-            background: $accent !important;
-            border-color: $accent !important;
+            background: $color-node-checkbox-checked-bg !important;
+            border-color: $color-node-checkbox-checked-border !important;
+            &:after {
+                border-color: $color-node-checkbox-checked-checked-tick !important;
+            }
         }
         &.indeterminate {
-            border-color: $gray !important;
+            border-color: $color-node-checkbox-unchecked-border !important;
         }
-        background: $dark-slate !important;
+        background: $color-node-checkbox-unchecked-bg !important;
     }
     &-arrow {
         &.has-child {
             &.rtl:after, &:after {
-                border-color: $white !important;
+                border-color: $color-node-arrow !important;
             }
         }
     }