diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 08defd4..9712c25 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,7 +1,7 @@
 .app {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  color: #2c3e50;
+  color: var(--main-color);
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   text-align: center;
   min-height: calc(100vh - 40px);
diff --git a/src/app/components/base/app-language/app-language.component.scss b/src/app/components/base/app-language/app-language.component.scss
index bd40506..215dcf5 100644
--- a/src/app/components/base/app-language/app-language.component.scss
+++ b/src/app/components/base/app-language/app-language.component.scss
@@ -20,7 +20,7 @@
     &:hover {
       color: #fff;
       background: #fff;
-      border: 2px solid #2c3e50;
+      border: 2px solid var(--main-color);
       box-shadow: 0 1px 0 rgba(255, 255, 255, 1), 0 2px 5px rgba(0, 0, 0, 0.2);
       transform: scale(1.2);
     }
diff --git a/src/app/components/base/app-navigation/app-navigation.component.scss b/src/app/components/base/app-navigation/app-navigation.component.scss
index 23080c2..56f073d 100644
--- a/src/app/components/base/app-navigation/app-navigation.component.scss
+++ b/src/app/components/base/app-navigation/app-navigation.component.scss
@@ -15,7 +15,7 @@
     padding: 1rem 1.5rem 1rem 1rem;
     margin: 0.5rem;
     border: 2px solid #eee;
-    color: #2c3e50;
+    color: var(--main-color);
     border-radius: 10px;
     text-decoration: none;
     width: 100%;
@@ -32,11 +32,11 @@
 
     &.active {
       background: #fff;
-      border: 2px solid #dd0031;
-      color: #dd0031;
+      border: 2px solid var(--primary);
+      color: var(--primary);
 
       svg {
-        fill: #dd0031;
+        fill: var(--primary);
       }
     }
 
@@ -44,7 +44,7 @@
       width: 25px;
       margin-right: 0.5rem;
       outline: none;
-      fill: #2c3e50;
+      fill: var(--main-color);
     }
   }
 }
diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss
index 81a7acd..e1da472 100644
--- a/src/app/views/home/home.component.scss
+++ b/src/app/views/home/home.component.scss
@@ -26,7 +26,7 @@ h3 {
 
 .slide-title {
   padding: 2rem 0;
-  color: #dd0031;
+  color: var(--primary);
   font-size: 2em;
 
   @include mobile {
@@ -34,7 +34,7 @@ h3 {
   }
 
   svg {
-    fill: #dd0031;
+    fill: var(--primary);
   }
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index b4b2d3b..b08a1a7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -11,8 +11,14 @@
   src: url("assets/webfonts/fa-solid-900.woff2") format("woff2"), url("assets/webfonts/fa-solid-900.ttf") format("truetype");
 }
 
+:root {
+  --primary: #dd0031;
+  --secondary: #8750c3;
+  --main-color: #2c3e50;
+}
+
 html {
-  background: var(--primary);
+  background: var(--main-color);
 }
 
 body {
@@ -24,8 +30,8 @@ body {
     content: "";
     display: flex;
     height: 20px;
-    background: #dd0031;
-    background: linear-gradient(90deg, rgba(221,0,49,1) 0%, rgba(135,80,195,1) 100%);
+    background: var(--primary);
+    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
     box-shadow: 0 0 0 1px #fff, 0 0 20px rgba(0,0,0,.4);
   }
 }