diff --git a/src/admin/components/advanced-search/advanced-search.vue b/src/admin/components/advanced-search/advanced-search.vue
index f09f8388c..3e55945fc 100644
--- a/src/admin/components/advanced-search/advanced-search.vue
+++ b/src/admin/components/advanced-search/advanced-search.vue
@@ -633,7 +633,7 @@
         }
 
         .tainacan-input-disabled {
-            background-color: $gray;
+            background-color: $gray3;
         }
     }
 
diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue
index 6c1197d61..e5a95dd77 100644
--- a/src/admin/components/edition/collection-edition-form.vue
+++ b/src/admin/components/edition/collection-edition-form.vue
@@ -818,7 +818,7 @@ export default {
     .section-label {
         font-size: 16px !important;
         font-weight: 500 !important;
-        color: $tertiary !important;
+        color: $blue5 !important;
         line-height: 1.2em;
     }
 
@@ -854,7 +854,7 @@ export default {
             font-weight: bold;
             z-index: 99;
             text-align: center;
-            color: gray;
+            color: $gray4;
             
             @media screen and (max-width: 769px) {
                 font-size: 1.2rem;
@@ -892,7 +892,7 @@ export default {
             font-weight: bold;
             z-index: 99;
             text-align: center;
-            color: gray;
+            color: $gray4;
         }
         .thumbnail-buttons-row {
             position: relative;
@@ -901,7 +901,7 @@ export default {
         }
     }
     .selected-cover-page {
-        border: 1px solid $tainacan-input-background;
+        border: 1px solid $gray2;
         padding: 8px;
         font-size: .75rem;
         .span { vertical-align: middle;}
@@ -915,11 +915,11 @@ export default {
         padding: 4px 6px;
         .icon { font-size: 20px; }
         &.disabled {
-           .icon { color: $tainacan-input-background; }
+           .icon { color: $gray2; }
         }
     }
     .moderators-empty-list { 
-        color: gray;
+        color: $gray4;
         font-size: 0.85rem;
      }
 
diff --git a/src/admin/components/edition/filter-edition-form.vue b/src/admin/components/edition/filter-edition-form.vue
index 3c7dc2e10..8b7da97db 100644
--- a/src/admin/components/edition/filter-edition-form.vue
+++ b/src/admin/components/edition/filter-edition-form.vue
@@ -264,8 +264,8 @@ export default {
  
     form {
         padding: 1.0em 2.0em;
-        border-top: 1px solid $draggable-border-color;
-        border-bottom: 1px solid $draggable-border-color;
+        border-top: 1px solid $gray2;
+        border-bottom: 1px solid $gray2;
         margin-top: 1.0em;
     }
 
diff --git a/src/admin/components/edition/importer-edition-form.vue b/src/admin/components/edition/importer-edition-form.vue
index f50569697..9faf4ed11 100644
--- a/src/admin/components/edition/importer-edition-form.vue
+++ b/src/admin/components/edition/importer-edition-form.vue
@@ -389,13 +389,13 @@ export default {
     .section-label {
         font-size: 16px !important;
         font-weight: 500 !important;
-        color: $tertiary !important;
+        color: $blue5 !important;
         line-height: 1.2em;
     }
 
     .source-metadatum {
         padding: 2px 0;
-        border-bottom: 1px solid $tainacan-input-background;
+        border-bottom: 1px solid $gray2;
         width: 100%;
         margin-bottom: 6px;
         display: flex;
@@ -411,7 +411,7 @@ export default {
     }
 
     .mapping-header-label {
-        color: $gray-light;
+        color: $gray4;
         margin: 12px 0 6px 0;
     }
 
diff --git a/src/admin/components/edition/importer-mapping-form.vue b/src/admin/components/edition/importer-mapping-form.vue
index ecc5ba074..d932ebc05 100644
--- a/src/admin/components/edition/importer-mapping-form.vue
+++ b/src/admin/components/edition/importer-mapping-form.vue
@@ -403,7 +403,7 @@ export default {
         h1, h2 {
             font-size: 20px;
             font-weight: 500;
-            color: $tertiary;
+            color: $blue5;
             display: inline-block;
         }
         a.back-link{
@@ -452,13 +452,13 @@ export default {
     .section-label {
         font-size: 16px !important;
         font-weight: 500 !important;
-        color: $tertiary !important;
+        color: $blue5 !important;
         line-height: 1.2em;
     }
 
     .source-metadatum {
         padding: 2px 0;
-        border-bottom: 1px solid $tainacan-input-background;
+        border-bottom: 1px solid $gray2;
         width: 100%;
         margin-bottom: 6px;
         display: flex;
@@ -474,7 +474,7 @@ export default {
     }
 
     .mapping-header-label {
-        color: $gray-light;
+        color: $gray4;
         margin: 12px 0 6px 0;
     }
 
diff --git a/src/admin/components/edition/item-edition-form.vue b/src/admin/components/edition/item-edition-form.vue
index 9762bb4bd..45b703661 100644
--- a/src/admin/components/edition/item-edition-form.vue
+++ b/src/admin/components/edition/item-edition-form.vue
@@ -896,7 +896,7 @@ export default {
         height: 36px;
         width: 36px;
         border: none;
-        background-color: $tainacan-input-background;
+        background-color: $gray2;
         color: $secondary;
         padding: 0px;
         border-top-left-radius: 2px;
@@ -954,7 +954,7 @@ export default {
         label {
             font-size: 16px !important;
             font-weight: 500 !important;
-            color: $tertiary !important;
+            color: $blue5 !important;
             line-height: 1.2em;
         }
     }
@@ -983,11 +983,11 @@ export default {
                     height: 72px;
                     width: 72px;
                     border: none;
-                    background-color: $tainacan-input-background;
+                    background-color: $gray2;
                     color: $secondary;
                     margin-bottom: 6px;
                     &:hover {
-                        background-color: $primary-light;
+                        background-color: $turquoise2;
                         cursor: pointer;
                     }
                 }
@@ -1001,12 +1001,12 @@ export default {
             margin-right: 24px;
             .icon  {
                 font-size: 18px !important; 
-                color: $gray;
+                color: $gray3;
             }
         }
     }
     .section-attachments {
-        border: 1px solid $draggable-border-color;
+        border: 1px solid $gray2;
         height: 250px;
         max-width: 100%;
         resize: vertical;
@@ -1069,7 +1069,7 @@ export default {
             font-weight: bold;
             z-index: 99;
             text-align: center;
-            color: gray;
+            color: $gray4;
             top: 70px;
             max-width: 90px;
         }
@@ -1086,7 +1086,7 @@ export default {
         position: absolute;
         bottom: 0;
         z-index: 999999;
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
         width: 100%;
         height: 65px;
         display: flex;
@@ -1101,12 +1101,12 @@ export default {
         }
 
         @keyframes blink {
-            from { color: $tertiary; }
-            to { color: $gray-light; }
+            from { color: $blue5; }
+            to { color: $gray4; }
         }
 
         .update-warning {
-            color: $tertiary;
+            color: $blue5;
             animation-name: blink;
             animation-duration: 0.5s;
             animation-delay: 0.5s;
@@ -1115,7 +1115,7 @@ export default {
         }
 
         .update-info-section {
-            color: $gray-light;
+            color: $gray4;
             margin-right: auto;
         }
 
diff --git a/src/admin/components/edition/metadatum-edition-form.vue b/src/admin/components/edition/metadatum-edition-form.vue
index 6a11ab045..78345c9a4 100644
--- a/src/admin/components/edition/metadatum-edition-form.vue
+++ b/src/admin/components/edition/metadatum-edition-form.vue
@@ -338,8 +338,8 @@
 
     form.inCollapse {
         padding: 1.0em 2.0em;
-        border-top: 1px solid $draggable-border-color;
-        border-bottom: 1px solid $draggable-border-color;
+        border-top: 1px solid $gray2;
+        border-bottom: 1px solid $gray2;
         margin-top: 1.0em;
     }
 
diff --git a/src/admin/components/edition/term-edition-form.vue b/src/admin/components/edition/term-edition-form.vue
index 3a52eb1b7..78e97ef21 100644
--- a/src/admin/components/edition/term-edition-form.vue
+++ b/src/admin/components/edition/term-edition-form.vue
@@ -245,7 +245,7 @@
 
     form {
         padding: 2.0rem 0rem 1rem 3rem;
-        border-left: 1px solid $draggable-border-color;
+        border-left: 1px solid $gray2;
         margin-top: 1.0em;
 
         .tainacan-page-title {
@@ -254,7 +254,7 @@
             h2 {
                 font-size: 20px;
                 font-weight: 500;
-                color: $tertiary;
+                color: $blue5;
                 display: inline-block;
             }
             hr{
@@ -283,7 +283,7 @@
                 font-weight: bold;
                 z-index: 99;
                 text-align: center;
-                color: gray;
+                color: $gray4;
             }
             #button-delete-header,
             #button-edit-header {
diff --git a/src/admin/components/lists/collections-list.vue b/src/admin/components/lists/collections-list.vue
index e1501ac22..1575ad21d 100644
--- a/src/admin/components/lists/collections-list.vue
+++ b/src/admin/components/lists/collections-list.vue
@@ -388,10 +388,10 @@ export default {
         height: 40px;
 
         .select-all {
-            color: $gray-light;
+            color: $gray4;
             font-size: 14px;
             &:hover {
-                color: $gray-light;
+                color: $gray4;
             }
         }
     }
diff --git a/src/admin/components/lists/filters-list.vue b/src/admin/components/lists/filters-list.vue
index bd987e655..d11ba4719 100644
--- a/src/admin/components/lists/filters-list.vue
+++ b/src/admin/components/lists/filters-list.vue
@@ -476,7 +476,7 @@ export default {
     .page-title {
         border-bottom: 1px solid $secondary;
         h2 {
-            color: $tertiary;
+            color: $blue5;
             font-weight: 500;
         }
         margin: 1em 0em 2.0em 0em;
@@ -532,7 +532,7 @@ export default {
                 padding-right: 6em;
             }
             .grip-icon { 
-                fill: $gray;
+                fill: $gray3;
                 top: 2px;
                 position: relative;
             }
@@ -550,7 +550,7 @@ export default {
             }
             .label-details {
                 font-weight: normal;
-                color: $gray;
+                color: $gray3;
             }
             .not-saved {
                 font-style: italic;
@@ -574,8 +574,8 @@ export default {
 
             form {
                 padding: 1.0em 2.0em;
-                border-top: 1px solid $draggable-border-color;
-                border-bottom: 1px solid $draggable-border-color;
+                border-top: 1px solid $gray2;
+                border-bottom: 1px solid $gray2;
                 margin-top: 1.0em;
             }
             &.not-sortable-item, &.not-sortable-item:hover {
@@ -583,7 +583,7 @@ export default {
                 background-color: white !important;
 
                 .handle .label-details, .handle .icon {
-                    color: $gray !important;
+                    color: $gray3 !important;
                 }
             } 
             &.not-focusable-item, &.not-focusable-item:hover {
@@ -593,11 +593,11 @@ export default {
                     color: $secondary;
                 }
                 .handle .label-details, .handle .icon {
-                    color: $gray !important;
+                    color: $gray3 !important;
                 }
             }
             &.disabled-metadatum {
-                color: $gray;
+                color: $gray3;
             }    
         }
         .active-filter-item:hover:not(.not-sortable-item) {
@@ -630,7 +630,7 @@ export default {
             }
         }
         .sortable-ghost {
-            border: 1px dashed $draggable-border-color;
+            border: 1px dashed $gray2;
             display: block;
             padding: 0.7em 0.9em;
             margin: 4px;
@@ -638,7 +638,7 @@ export default {
             position: relative;
 
             .grip-icon { 
-                fill: $gray;
+                fill: $gray3;
                 top: 2px;
                 position: relative;
             }
@@ -678,12 +678,12 @@ export default {
             line-height: 1.3em;
             height: 40px;
             position: relative;
-            border: 1px solid $draggable-border-color;
+            border: 1px solid $gray2;
             border-radius: 1px;
             transition: left 0.2s ease;
             
             .grip-icon { 
-                fill: $gray;
+                fill: $gray3;
                 top: -3px;
                 position: relative;
                 display: inline-block;
@@ -721,7 +721,7 @@ export default {
             }
             &:before {
                 top: -1px;
-                border-color: transparent $draggable-border-color transparent transparent;
+                border-color: transparent $gray2 transparent transparent;
                 border-right-width: 16px;
                 border-top-width: 20px;
                 border-bottom-width: 20px;
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 7a3112196..8e689e988 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -607,10 +607,10 @@ export default {
         height: 40px;
 
         .select-all {
-            color: $gray-light;
+            color: $gray4;
             font-size: 14px;
             &:hover {
-                color: $gray-light;
+                color: $gray4;
             }
         }
     }
diff --git a/src/admin/components/lists/metadata-list.vue b/src/admin/components/lists/metadata-list.vue
index f7e4b7158..1ac2711fc 100644
--- a/src/admin/components/lists/metadata-list.vue
+++ b/src/admin/components/lists/metadata-list.vue
@@ -752,7 +752,7 @@ export default {
     .page-title {
         border-bottom: 1px solid $secondary;
         h2 {
-            color: $tertiary;
+            color: $blue5;
             font-weight: 500;
         }
         margin: 1em 0em 2.0em 0em;
@@ -818,7 +818,7 @@ export default {
                 padding-right: 6em;
             }
             .grip-icon { 
-                fill: $gray; 
+                fill: $gray3; 
                 top: 2px;
                 position: relative;
             }
@@ -836,7 +836,7 @@ export default {
             }
             .label-details {
                 font-weight: normal;
-                color: $gray;
+                color: $gray3;
             }
             .not-saved {
                 font-style: italic;
@@ -863,7 +863,7 @@ export default {
                 background-color: white !important;
 
                 .handle .label-details, .handle .icon {
-                    color: $gray !important;
+                    color: $gray3 !important;
                 }
             } 
             &.not-focusable-item, &.not-focusable-item:hover {
@@ -873,11 +873,11 @@ export default {
                     color: $secondary;
                 }
                 .handle .label-details, .handle .icon {
-                    color: $gray !important;
+                    color: $gray3 !important;
                 }
             }
             &.disabled-metadatum {
-                color: $gray;
+                color: $gray3;
             }    
         }
         .active-metadatum-item:hover:not(.not-sortable-item) {
@@ -910,7 +910,7 @@ export default {
             }
         }
         .sortable-ghost {
-            border: 1px dashed $draggable-border-color;
+            border: 1px dashed $gray2;
             display: block;
             padding: 0.7em 0.9em;
             margin: 4px;
@@ -956,12 +956,12 @@ export default {
             line-height: 1.3em;
             height: 40px;
             position: relative;
-            border: 1px solid $draggable-border-color;
+            border: 1px solid $gray2;
             border-radius: 1px;
             transition: left 0.2s ease;
             
             .grip-icon { 
-                fill: $gray;
+                fill: $gray3;
                 top: -3px;
                 position: relative;
                 display: inline-block;
@@ -999,7 +999,7 @@ export default {
             }
             &:before {
                 top: -1px;
-                border-color: transparent $draggable-border-color transparent transparent;
+                border-color: transparent $gray2 transparent transparent;
                 border-right-width: 16px;
                 border-top-width: 20px;
                 border-bottom-width: 20px;
diff --git a/src/admin/components/lists/processes-list.vue b/src/admin/components/lists/processes-list.vue
index 4b0314e01..a1c42a7d3 100644
--- a/src/admin/components/lists/processes-list.vue
+++ b/src/admin/components/lists/processes-list.vue
@@ -318,10 +318,10 @@
         height: 40px;
 
         .select-all {
-            color: $gray-light;
+            color: $gray4;
             font-size: 14px;
             &:hover {
-                color: $gray-light;
+                color: $gray4;
             }
         }
     }
diff --git a/src/admin/components/lists/taxonomies-list.vue b/src/admin/components/lists/taxonomies-list.vue
index 2a819606a..81dc63c96 100644
--- a/src/admin/components/lists/taxonomies-list.vue
+++ b/src/admin/components/lists/taxonomies-list.vue
@@ -275,10 +275,10 @@
         height: 40px;
 
         .select-all {
-            color: $gray-light;
+            color: $gray4;
             font-size: 14px;
             &:hover {
-                color: $gray-light;
+                color: $gray4;
             }
         }
     }
diff --git a/src/admin/components/lists/terms-list.vue b/src/admin/components/lists/terms-list.vue
index be2bb8fa9..538c5f22a 100644
--- a/src/admin/components/lists/terms-list.vue
+++ b/src/admin/components/lists/terms-list.vue
@@ -383,7 +383,7 @@ export default {
         margin-left: 30px;
 
         .gray-icon, .gray-icon .icon {
-            color: $tainacan-placeholder-color !important;
+            color: $gray4 !important;
         }
         .gray-icon .icon i::before, .gray-icon i::before {
             font-size: 21px !important;
@@ -415,7 +415,7 @@ export default {
         }
         .label-details {
             font-weight: normal;
-            color: $gray;
+            color: $gray3;
         }
         .not-saved {
             font-style: italic;
@@ -452,7 +452,7 @@ export default {
             cursor: default;
             
             .term-name {
-                color: $primary;
+                color: $turquoise3;
             }
         }
   
diff --git a/src/admin/components/navigation/primary-menu.vue b/src/admin/components/navigation/primary-menu.vue
index a6668ae9c..f8c98db20 100644
--- a/src/admin/components/navigation/primary-menu.vue
+++ b/src/admin/components/navigation/primary-menu.vue
@@ -97,7 +97,7 @@ export default {
     @import "../../scss/_variables.scss";
 
     #primary-menu {
-        background-color: $primary;
+        background-color: $turquoise4;
         padding: 100px 0px 0px 0px;
         -webkit-transition: max-width 0.2s linear; /* Safari */
         transition: max-width 0.2s linear;
@@ -113,7 +113,7 @@ export default {
         }
         .separator {
             height: 2px;
-            background-color: $separator-color;
+            background-color: $turquoise5;
             width: 100%;
             margin: 24px 0;
         }
@@ -134,11 +134,11 @@ export default {
             }
 
             a:hover, a.is-active {
-                background-color: $primary;
-                color: $tertiary;
+                background-color: $turquoise4;
+                color: $blue5;
 
                 .activities-icon {
-                    fill: $tertiary;
+                    fill: $blue5;
                 }
             }
             a:focus {
diff --git a/src/admin/components/navigation/tainacan-header.vue b/src/admin/components/navigation/tainacan-header.vue
index c6cf47bd3..54aaa8afe 100644
--- a/src/admin/components/navigation/tainacan-header.vue
+++ b/src/admin/components/navigation/tainacan-header.vue
@@ -205,7 +205,7 @@
                         border-width: 0 !important;
                         height: 27px;
                         font-size: 11px;
-                        color: $gray-light;
+                        color: $gray4;
                         transition: width linear 0.15s;
                         -webkit-transition: width linear 0.15s;
                         width: 160px;
@@ -215,7 +215,7 @@
                     }
                     .icon:not(.add-i) {
                         pointer-events: all;
-                        color: $tertiary;
+                        color: $blue5;
                         cursor: pointer;
                         height: 27px;
                         font-size: 18px;
diff --git a/src/admin/components/navigation/tainacan-subheader.vue b/src/admin/components/navigation/tainacan-subheader.vue
index c378f4943..6bba71cc2 100644
--- a/src/admin/components/navigation/tainacan-subheader.vue
+++ b/src/admin/components/navigation/tainacan-subheader.vue
@@ -212,7 +212,7 @@ export default {
     
     // Tainacan Header
     #tainacan-subheader {
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
         height: $subheader-height;
         max-height: $subheader-height;
         width: 100%;
@@ -252,7 +252,7 @@ export default {
         h1 {
             font-size: 18px;
             font-weight: 500;
-            color: $tertiary;
+            color: $blue5;
             line-height: 22px;
             margin-bottom: 12px; 
             max-width: 450px;
@@ -281,7 +281,7 @@ export default {
             -webkit-transition: height 0.5s linear, padding 0.5s linear;
 
             a {
-                color: $tertiary;
+                color: $blue5;
                 text-align: center;
                 white-space: nowrap;
                 overflow: hidden;
diff --git a/src/admin/components/navigation/tainacan-title.vue b/src/admin/components/navigation/tainacan-title.vue
index 1cddcf1b0..80240175d 100644
--- a/src/admin/components/navigation/tainacan-title.vue
+++ b/src/admin/components/navigation/tainacan-title.vue
@@ -149,7 +149,7 @@ export default {
         h1, h2 {
             font-size: 20px;
             font-weight: 500;
-            color: $tertiary;
+            color: $blue5;
             display: inline-block;
         }
         a.back-link{
diff --git a/src/admin/components/other/available-importers-modal.vue b/src/admin/components/other/available-importers-modal.vue
index 22622e6dd..10ccfdd50 100644
--- a/src/admin/components/other/available-importers-modal.vue
+++ b/src/admin/components/other/available-importers-modal.vue
@@ -85,7 +85,7 @@ export default {
     .importer-types-container {
 
         .importer-type {
-            border-bottom: 1px solid $tainacan-input-background;
+            border-bottom: 1px solid $gray2;
             padding: 15px 8.3333333%;
             cursor: pointer;
         
@@ -96,7 +96,7 @@ export default {
                 border-bottom: none;
             }
             &:hover {
-                background-color: $tainacan-input-background;
+                background-color: $gray2;
             }
         }
     }
diff --git a/src/admin/components/other/file-item.vue b/src/admin/components/other/file-item.vue
index c97547a87..b23d5709e 100644
--- a/src/admin/components/other/file-item.vue
+++ b/src/admin/components/other/file-item.vue
@@ -110,7 +110,7 @@ export default {
             overflow: hidden;
             position: relative;
             display: inline-block;
-            background-color: $tainacan-input-background; 
+            background-color: $gray2; 
 
             &.rounded {
                 border-bottom-left-radius: 5px;
@@ -144,7 +144,7 @@ export default {
         }
 
         figcaption {
-            background-color: $tainacan-input-background;
+            background-color: $gray2;
             border-top-left-radius: 5px;
             border-top-right-radius: 5px;
             padding: 8px 15px;
diff --git a/src/admin/components/other/help-button.vue b/src/admin/components/other/help-button.vue
index 7a09c602f..d05e496a8 100644
--- a/src/admin/components/other/help-button.vue
+++ b/src/admin/components/other/help-button.vue
@@ -46,8 +46,8 @@ export default {
     }
     .help-tooltip {
         z-index: 99999999999999999999;
-        color: $tertiary;
-        background-color: $primary-light;
+        color: $blue5;
+        background-color: $turquoise2;
         border: none;
         display: block;
         border-radius: 5px;
@@ -86,7 +86,7 @@ export default {
             border-style: solid;
         }
         &:before {
-            border-color: $primary-light transparent transparent transparent;
+            border-color: $turquoise2 transparent transparent transparent;
             border-right-width: 18px;
             border-top-width: 12px;
             border-left-width: 18px;
diff --git a/src/admin/components/other/processes-popup.vue b/src/admin/components/other/processes-popup.vue
index 208f3cd3e..74f4bc825 100644
--- a/src/admin/components/other/processes-popup.vue
+++ b/src/admin/components/other/processes-popup.vue
@@ -5,7 +5,7 @@
                     @click="showProcessesList = !showProcessesList"
                     class="header-title">{{ getUnfinishedProcesses() + ' ' + $i18n.get('info_unfinished_processes') }}</span>
             <a @click="showProcessesList = !showProcessesList">
-                <span class="icon has-text-tertiary">
+                <span class="icon has-text-blue5">
                     <i 
                             :class="{ 'mdi-menu-up': showProcessesList,  
                                       'mdi-menu-down': !showProcessesList }"
@@ -13,7 +13,7 @@
                 </span>
             </a>    
             <a @click="$emit('closeProcessesPopup')">
-                <span class="icon has-text-tertiary">
+                <span class="icon has-text-blue5">
                     <i class="mdi mdi-close"/>
                 </span>
             </a>       
@@ -86,7 +86,7 @@
         <div class="popup-footer">
             <span 
                     v-if="hasAnyProcessExecuting"
-                    class="icon has-text-tertiary"><i class="mdi mdi-18px mdi-autorenew"/></span>
+                    class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
             <p class="footer-title">    
                 {{ hasAnyProcessExecuting ? 
                     (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): 
@@ -187,8 +187,8 @@ export default {
 
     .control.is-loading::after {
         border: 2px solid $success;
-        border-right-color: $tainacan-input-background;
-        border-top-color: $tainacan-input-background;
+        border-right-color: $gray2;
+        border-top-color: $gray2;
     }
 
     .processes-popup{
@@ -205,7 +205,7 @@ export default {
         .popup-header, .popup-footer {
             display: flex;
             align-items: center;
-            color: $tertiary;
+            color: $blue5;
             .header-title, .footer-title {
                 margin-right: auto;
             }
@@ -238,13 +238,13 @@ export default {
             .popup-list-subheader {
                 background-color: white !important;
                 padding: 6px 12px 12px 12px;
-                color: $gray-light;
+                color: $gray4;
                 font-size: 0.625rem;
                 a { float: right; }
             }
 
             li:hover {
-                background-color: $tainacan-input-background;
+                background-color: $gray2;
 
                 .action-icon{
                     visibility: visible;
@@ -255,7 +255,7 @@ export default {
                     display: none;
                 }
                 .process-item>.process-title .mdi-menu-left, .process-item>.process-title .mdi-menu-right {
-                    color: $gray !important;
+                    color: $gray3 !important;
                 }
             }
 
@@ -280,7 +280,7 @@ export default {
                     }
                     
                     .mdi-menu-left, .mdi-menu-right {
-                        color: $primary-light;
+                        color: $turquoise2;
                     }
                 }
                 .action-icon {
@@ -301,7 +301,7 @@ export default {
                 overflow: hidden;
                 max-width: calc(100% - 40px);
                 font-size: 0.625rem;
-                color: $gray-light;
+                color: $gray4;
                 animation-name: expand;
                 animation-duration: 0.3s;
             }
@@ -318,7 +318,7 @@ export default {
             border-style: solid;
         }
         &:before {
-            border-color: transparent transparent $primary-light transparent;
+            border-color: transparent transparent $turquoise2 transparent;
             border-right-width: 8px;
             border-bottom-width: 8px;
             border-left-width: 8px;
diff --git a/src/admin/pages/lists/available-importers-page.vue b/src/admin/pages/lists/available-importers-page.vue
index a6b3e3c59..6813858be 100644
--- a/src/admin/pages/lists/available-importers-page.vue
+++ b/src/admin/pages/lists/available-importers-page.vue
@@ -66,7 +66,7 @@ export default {
         flex: wrap;
 
         .importer-type {
-            border: 1px solid $tainacan-input-background;
+            border: 1px solid $gray2;
             padding: 15px;
             margin: 20px;
             cursor: pointer;
diff --git a/src/admin/pages/lists/collections-page.vue b/src/admin/pages/lists/collections-page.vue
index 2ff1a2cd8..52dee8dd1 100644
--- a/src/admin/pages/lists/collections-page.vue
+++ b/src/admin/pages/lists/collections-page.vue
@@ -87,7 +87,7 @@
                                     v-if="status == undefined || status == ''"
                                     id="button-create-collection"
                                     tag="button"
-                                    class="button is-primary"
+                                    class="button is-secondary"
                                     :to="{ path: $routerHelper.getNewCollectionPath() }">
                                 {{ $i18n.getFrom('collections', 'new_item') }}
                             </router-link>
diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 855659f98..b8a3bccf3 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -548,7 +548,7 @@
                                 v-if="!hasFiltered && (status == undefined || status == '')"
                                 id="button-create-item"
                                 tag="button"
-                                class="button is-primary"
+                                class="button is-secondary"
                                 :to="{ path: $routerHelper.getNewItemPath(collectionId) }">
                             {{ $i18n.getFrom('items', 'add_new') }}
                         </router-link>
@@ -1033,7 +1033,7 @@
         h1 {
             font-size: 20px;
             font-weight: 500;
-            color: $tertiary;
+            color: $blue5;
             display: inline-block;
         }
 
@@ -1050,7 +1050,7 @@
         h1 {
             font-size: 20px;
             font-weight: 500;
-            color: $tertiary;
+            color: $blue5;
             display: inline-block;
         }
 
@@ -1119,7 +1119,7 @@
                 .icon {
                     pointer-events: all;
                     cursor: pointer;
-                    color: $tertiary;
+                    color: $blue5;
                     height: 27px;
                     font-size: 18px !important;
                     height: 2rem !important;
@@ -1151,8 +1151,8 @@
         height: 21px;
         width: 23px;
         border: none;
-        background-color: $primary-lighter;
-        color: $tertiary;
+        background-color: $turquoise1;
+        color: $blue5;
         padding: 0;
         border-top-right-radius: 2px;
         border-bottom-right-radius: 2px;
@@ -1204,7 +1204,7 @@
         }
 
         .gray-icon, .gray-icon .icon {
-            color: $tainacan-placeholder-color !important;
+            color: $gray4 !important;
             padding-right: 10px;
         }
         .gray-icon .icon i::before, .gray-icon i::before {
@@ -1254,7 +1254,7 @@
                 .icon {
                     pointer-events: all;
                     cursor: pointer;
-                    color: $tertiary;
+                    color: $blue5;
                     height: 27px;
                     font-size: 18px !important;
                     height: 2rem !important;
diff --git a/src/admin/pages/lists/taxonomies-page.vue b/src/admin/pages/lists/taxonomies-page.vue
index b087a7e06..a275f1e33 100644
--- a/src/admin/pages/lists/taxonomies-page.vue
+++ b/src/admin/pages/lists/taxonomies-page.vue
@@ -58,7 +58,7 @@
                                         v-if="status == undefined || status == ''"
                                         id="button-create-taxonomy"
                                         tag="button"
-                                        class="button is-primary"
+                                        class="button is-secondary"
                                         :to="{ path: $routerHelper.getNewTaxonomyPath() }">
                                     {{ $i18n.getFrom('taxonomies', 'new_item') }}
                                 </router-link>
diff --git a/src/admin/pages/singles/item-page.vue b/src/admin/pages/singles/item-page.vue
index 3ac191f23..17087087a 100644
--- a/src/admin/pages/singles/item-page.vue
+++ b/src/admin/pages/singles/item-page.vue
@@ -273,7 +273,7 @@
         height: 36px;
         width: 36px;
         border: none;
-        background-color: $tainacan-input-background;
+        background-color: $gray2;
         color: $secondary;
         padding: 0px;
         border-top-left-radius: 2px;
@@ -333,7 +333,7 @@
     }
 
     .field {
-        border-bottom: 1px solid $draggable-border-color;
+        border-bottom: 1px solid $gray2;
         padding: 10px 25px;
 
         .label {
@@ -352,7 +352,7 @@
         label {
             font-size: 16px !important;
             font-weight: 500 !important;
-            color: $tertiary !important;
+            color: $blue5 !important;
             line-height: 1.2em;
         }
     }
@@ -381,11 +381,11 @@
                     height: 72px;
                     width: 72px;
                     border: none;
-                    background-color: $tainacan-input-background;
+                    background-color: $gray2;
                     color: $secondary;
                     margin-bottom: 6px;
                     &:hover {
-                        background-color: $primary-light;
+                        background-color: $turquoise2;
                         cursor: pointer;
                     }
                 }
@@ -404,12 +404,12 @@
 
             .icon  {
                 font-size: 18px !important; 
-                color: $gray;
+                color: $gray3;
             }
         }
     }
     .section-attachments {
-        border: 1px solid $draggable-border-color;
+        border: 1px solid $gray2;
         height: 250px;
         max-width: 100%;
         resize: vertical;
@@ -443,7 +443,7 @@
             font-weight: bold;
             z-index: 99;
             text-align: center;
-            color: gray;
+            color: $gray4;
             top: 70px;
             max-width: 90px;
         }
@@ -454,7 +454,7 @@
         position: absolute;
         bottom: 0;
         z-index: 999999;
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
         width: 100%;    
         height: 65px;
 
diff --git a/src/admin/scss/_buttons.scss b/src/admin/scss/_buttons.scss
index 066d6485a..ec1ac4e9d 100644
--- a/src/admin/scss/_buttons.scss
+++ b/src/admin/scss/_buttons.scss
@@ -14,7 +14,7 @@
         background: $secondary !important;
     }
     &.is-primary:hover, &.is-primary:focus {
-        background: $primary !important;
+        background: $turquoise3 !important;
     }
     &.is-success:hover, &.is-success:focus {
         background: $success !important;
@@ -29,7 +29,7 @@
     &.is-outlined {
         color: #150e38 !important;
         background-color: white !important;
-        border-color: $gray-light !important;
+        border-color: $gray4 !important;
     }
     &:focus {
         outline: 0px;
@@ -37,8 +37,8 @@
     &[disabled], &:hover[disabled] {
         border: none !important;
         cursor: not-allowed !important;
-        color: $gray-light !important;
-        background-color: $tainacan-input-background !important;
+        color: $gray4 !important;
+        background-color: $gray2 !important;
     }
     &.is-white[disabled] {
         background-color: white !important;
diff --git a/src/admin/scss/_checkboxes.scss b/src/admin/scss/_checkboxes.scss
index d53bbff13..eaa10f554 100644
--- a/src/admin/scss/_checkboxes.scss
+++ b/src/admin/scss/_checkboxes.scss
@@ -10,7 +10,7 @@
         flex-shrink: 0;
         border-radius: 0;
         display: inline-block;
-        border: 1px solid $gray-light;
+        border: 1px solid $gray4;
         transition: background 150ms ease-out;
         box-shadow: none !important;
     }
@@ -19,10 +19,10 @@
     &:active input[type="checkbox"] + .check, 
     &:hover input[type="checkbox"] + .check {
         box-shadow: none !important;
-        border-color: $gray-light !important;
+        border-color: $gray4 !important;
     }
     input[type="checkbox"]:checked + .check {
         background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
-        border-color: $gray-light !important;
+        border-color: $gray4 !important;
     }
 }
\ No newline at end of file
diff --git a/src/admin/scss/_dropdown-and-autocomplete.scss b/src/admin/scss/_dropdown-and-autocomplete.scss
index 1e8989ff4..27ba0ff00 100644
--- a/src/admin/scss/_dropdown-and-autocomplete.scss
+++ b/src/admin/scss/_dropdown-and-autocomplete.scss
@@ -28,9 +28,9 @@
                 label { margin-bottom: 0; }
                 &.control { font-size: 13px !important; }
                 .b-checkbox { width: 100% };
-                &:hover { background-color: $primary-lighter; }
-                .is-small { color: gray; }
-                &.is-active { background-color: $primary-light; }
+                &:hover { background-color: $turquoise1; }
+                .is-small { color: $gray4; }
+                &.is-active { background-color: $turquoise2; }
             }
         } 
     }
@@ -45,7 +45,7 @@
     .input { margin-bottom: 0px !important; }
     .input.has-selected, .input:focus, .input:active {
         background-color: white;
-        border: 1px solid $tainacan-input-background !important;
+        border: 1px solid $gray2 !important;
     }
     .tag {
         background: white;
@@ -53,7 +53,7 @@
         padding-left: 0.5em;
 
         &.is-delete {
-            color: $gray-light;
+            color: $gray4;
             &::after {
                 height: 30% !important;
                 width: 1px !important;
@@ -71,7 +71,7 @@
 }
 .selected-list-box {
     padding: 4px 0px;
-    border: 1px solid $tainacan-input-background;
+    border: 1px solid $gray2;
     background-color: white;
     display: flex;
     font-size: 12px;
@@ -85,7 +85,7 @@
         padding-left: 0.5em;
 
         &.is-delete {
-            color: $gray-light;
+            color: $gray4;
             &::after {
                 height: 30% !important;
                 width: 1px !important;
diff --git a/src/admin/scss/_inputs.scss b/src/admin/scss/_inputs.scss
index 5c6ee6c6b..c2d5d339c 100644
--- a/src/admin/scss/_inputs.scss
+++ b/src/admin/scss/_inputs.scss
@@ -7,10 +7,10 @@
     &:focus, &:active {
         box-shadow: none !important;
         background-color: white;
-        border: 1px solid $tainacan-input-background !important;
+        border: 1px solid $gray2 !important;
     }    
     &[disabled] {
-        color: $tainacan-placeholder-color;
-        background-color: $tainacan-input-background;
+        color: $gray4;
+        background-color: $gray2;
     }
 }
diff --git a/src/admin/scss/_modals.scss b/src/admin/scss/_modals.scss
index 1d21781c3..ab9f9630d 100644
--- a/src/admin/scss/_modals.scss
+++ b/src/admin/scss/_modals.scss
@@ -7,7 +7,7 @@
     h1, h2 {
         font-size: 20px;
         font-weight: 500;
-        color: $tertiary;
+        color: $blue5;
         display: inline-block;
     }
     a.back-link{
@@ -45,7 +45,7 @@
         background-color: rgba(0, 0, 0, 0.70);
     }
     .modal-card {
-        background-color: $modal-backgound-color;
+        background-color: $turquoise2;
         color: $secondary;
         border-radius: 10px;
         flex-wrap: wrap;
@@ -54,7 +54,7 @@
         margin: 0 auto !important;
 
         .modal-card-head, .modal-card-body, .modal-card-foot {
-            background-color: $modal-backgound-color;
+            background-color: $turquoise2;
             color: $secondary;
             border: none;
             padding-bottom: 12px;
@@ -102,8 +102,8 @@
             }
             .button:not(.is-success) {
                 background-color: white;
-                color: $tertiary;
-                border: 1px solid $gray-light;
+                color: $blue5;
+                border: 1px solid $gray4;
             }
         }
     }
@@ -146,7 +146,7 @@
 //         h1, h2 {
 //             font-size: 20px;
 //             font-weight: 500;
-//             color: $tertiary;
+//             color: $blue5;
 //             display: inline-block;
 //             margin-bottom: 3px;
 //         }
@@ -158,7 +158,7 @@
 //             border-top: none;
 //             border-left: none;
 //             border-right: none;
-//             border-bottom: 3px solid $primary;
+//             border-bottom: 3px solid $turquoise3;
 //         }
 //     }
 
@@ -179,11 +179,11 @@
 //                 padding: 12px;
 //             }
 //             .attachment.details {
-//                 box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $primary-light;
+//                 box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 14px $turquoise2;
 //             }
 //             .attachment.details .check, .wp-core-ui .attachment.selected .check:focus, .wp-core-ui .media-frame.mode-grid .attachment.selected .check {
-//                 background-color: $primary-light;
-//                 box-shadow: 0 0 0 1px #fff,0 0 0 2px $primary-light;
+//                 background-color: $turquoise2;
+//                 box-shadow: 0 0 0 1px #fff,0 0 0 2px $turquoise2;
 //             }
 //         }
 //         .media-sidebar {
@@ -222,7 +222,7 @@
 //         cursor: default;
 //     }
 //     .media-button.button-secondary {
-//         color: $tertiary;
+//         color: $blue5;
 //         border-color: #999;
 //         background: white;
 //         box-shadow: none;
diff --git a/src/admin/scss/_notices.scss b/src/admin/scss/_notices.scss
index df2ce6e8b..55594525e 100644
--- a/src/admin/scss/_notices.scss
+++ b/src/admin/scss/_notices.scss
@@ -4,8 +4,8 @@
     box-shadow: none;
 
     &.is-dark {
-        background-color: $tainacan-input-background;
-        color: $gray-light;
+        background-color: $gray2;
+        color: $gray4;
     }
     &.is-warning {
         background-color: #e7dede;
diff --git a/src/admin/scss/_pagination.scss b/src/admin/scss/_pagination.scss
index a4b3c5fc6..21e8ddaa1 100644
--- a/src/admin/scss/_pagination.scss
+++ b/src/admin/scss/_pagination.scss
@@ -4,14 +4,14 @@
     align-items: center;
     font-size: 0.85em !important;
     font-weight: normal !important;
-    border-top: 1px solid $gray;
+    border-top: 1px solid $gray3;
     padding-top: 0;
     padding-bottom: 0;
     margin-left: $page-side-padding;
     margin-right: $page-side-padding;
     padding-left: 0.75rem;
     padding-right: 0.75rem;
-    color: $gray-light;
+    color: $gray4;
 
     @media screen and (max-width: 768px) {
         flex-wrap: wrap;
@@ -41,7 +41,7 @@
             .label {
                 font-size: 1em !important;
                 font-weight: normal !important;
-                color: $gray-light;
+                color: $gray4;
             }
         }
         select {
@@ -62,7 +62,7 @@
         }
 
         a[disabled="disabled"] {
-            color: $gray-light;
+            color: $gray4;
         }
         .pagination-link, .pagination-previous, .pagination-next {
             background-color: transparent;
@@ -70,11 +70,11 @@
             border: none;
         }
         .pagination-link.is-current {
-            color: $gray-light;
+            color: $gray4;
         }
         .pagination-link::after:not(:last-child) {
             content: ',';
-            color: $gray-light;
+            color: $gray4;
         }
         .mdi-chevron-left::before {
             content: "\F40A";
diff --git a/src/admin/scss/_radios.scss b/src/admin/scss/_radios.scss
index 4b324194c..0d39efa6b 100644
--- a/src/admin/scss/_radios.scss
+++ b/src/admin/scss/_radios.scss
@@ -3,7 +3,7 @@
     input[type="radio"] + .check {
         width: 13px !important;
         height: 13px !important;
-        border: 1px solid $gray-light !important;    
+        border: 1px solid $gray4 !important;    
     }
     input[type="radio"] + .check::before {
         background: black !important;
@@ -16,7 +16,7 @@
         box-shadow: none !important;
     }
     input[type="radio"]:checked + .check {
-        border-color: $gray-light !important;
+        border-color: $gray4 !important;
     }
     &:focus input[type="radio"]:checked + .check {
         box-shadow: none !important;
diff --git a/src/admin/scss/_selects.scss b/src/admin/scss/_selects.scss
index 148723253..09d0af163 100644
--- a/src/admin/scss/_selects.scss
+++ b/src/admin/scss/_selects.scss
@@ -11,7 +11,7 @@
         margin-bottom: 0px !important;
         color: $tainacan-input-color;
         option:checked, option:hover {
-            background-color: $primary-lighter !important;
+            background-color: $turquoise1 !important;
         }
         &:focus, &:active {
             box-shadow: none !important;
diff --git a/src/admin/scss/_switches.scss b/src/admin/scss/_switches.scss
index 5e7ddec16..e20a2e276 100644
--- a/src/admin/scss/_switches.scss
+++ b/src/admin/scss/_switches.scss
@@ -1,8 +1,8 @@
 
 .switch {
     input[type="checkbox"] + .check {
-        background-color: $gray-light;
-        border: 2px solid $gray-light;
+        background-color: $gray4;
+        border: 2px solid $gray4;
         width: 2.7em;
         height: 1.7em;
         transition: none;
@@ -13,7 +13,7 @@
         }
     } 
     &:hover input[type="checkbox"]:checked + .check {
-        background-color: $primary-light;
+        background-color: $turquoise2;
     }
 
     input[type="checkbox"]:checked + .check {
@@ -26,7 +26,7 @@
         }
     }
     &:hover input[type="checkbox"] + .check {
-        background-color: $gray-light;
+        background-color: $gray4;
     }
 
     &:focus input[type="checkbox"] + .check,
@@ -38,7 +38,7 @@
         font-size: 9px;
 
         input[type="checkbox"] + .check {
-            border: 1.5px solid $gray-light;
+            border: 1.5px solid $gray4;
             width: 2.55em;
             height: 1.7em;
 
diff --git a/src/admin/scss/_tables.scss b/src/admin/scss/_tables.scss
index 7746802c6..b7615a398 100644
--- a/src/admin/scss/_tables.scss
+++ b/src/admin/scss/_tables.scss
@@ -45,7 +45,7 @@
             }
             // Only to be used in case we can implement Column resizing
             // th:not(:last-child) {
-            //     border-right: 1px solid $tainacan-input-background !important;
+            //     border-right: 1px solid $gray2 !important;
             // }
     
             .thumbnail-cell {
@@ -57,7 +57,7 @@
                 min-width: 80px;
                 max-width: 80px;
                 p {
-                    color: $gray-light;
+                    color: $gray4;
                     font-size: 11px;
                     line-height: 1.5;
                 }
@@ -66,7 +66,7 @@
                 min-width: 80px;
                 max-width: 160px;
                 p {
-                    color: $gray-light;
+                    color: $gray4;
                     font-size: 11px;
                     line-height: 1.5;
                 }
@@ -75,7 +75,7 @@
                 min-width: 120px;
                 max-width: 200px;
                 p {
-                    color: $gray-light;
+                    color: $gray4;
                     font-size: 11px;
                     line-height: 1.5;
                 }
@@ -84,7 +84,7 @@
                 min-width: 120px;
                 max-width: 240px;
                 p {
-                    color: $gray-light;
+                    color: $gray4;
                     font-size: 11px;
                     line-height: 1.5;
                 }
@@ -109,7 +109,7 @@
                 position: sticky;
                 position: -webkit-sticky;
                 background-color: white;
-                border-bottom: 1px solid $tainacan-input-background;
+                border-bottom: 1px solid $gray2;
                 top: 0px;
                 z-index: 9;
                 padding: 10px;
@@ -117,7 +117,7 @@
     
                 .th-wrap {
                     font-size: 12px !important;
-                    color: $gray-light;
+                    color: $gray4;
                     font-weight: normal !important;
                     text-overflow: ellipsis;
                     overflow-x: hidden;
@@ -130,9 +130,9 @@
                     background-color: transparent;
     
                     &.selected-row { 
-                        background-color: $primary-lighter; 
+                        background-color: $turquoise1; 
                         .checkbox-cell .checkbox, .actions-cell .actions-container {
-                            background-color: $primary-lighter-hover;
+                            background-color: $turquoise2;
                         }
                     }
                     td {
@@ -187,21 +187,21 @@
                     }
     
                     &:hover {
-                        background-color: $tainacan-input-background !important;
+                        background-color: $gray1 !important;
                         cursor: pointer;
     
                         .checkbox-cell {
                             position: sticky !important;
                             position: -webkit-sticky !important;
-                            background-color: $gray-hover;
+                            background-color: $gray2;
                             
                             .checkbox { 
-                                background-color: $gray-hover !important; 
+                                background-color: $gray2 !important; 
                             }
                         }
                         .actions-cell {
                             .actions-container {
-                                background: $gray-hover !important;
+                                background: $gray2 !important;
                             }
                         }
     
diff --git a/src/admin/scss/_tabs.scss b/src/admin/scss/_tabs.scss
index c0f498d99..2f2d74cdd 100644
--- a/src/admin/scss/_tabs.scss
+++ b/src/admin/scss/_tabs.scss
@@ -9,7 +9,7 @@
         }
     }
     li.is-active a {
-        border-bottom: 5px solid $primary;
-        color: $primary; 
+        border-bottom: 5px solid $turquoise5;
+        color: $turquoise5; 
     }
 }
\ No newline at end of file
diff --git a/src/admin/scss/_tags.scss b/src/admin/scss/_tags.scss
index 4c2c23164..af331052b 100644
--- a/src/admin/scss/_tags.scss
+++ b/src/admin/scss/_tags.scss
@@ -1,5 +1,5 @@
 .tags {
-    border: solid 1px $tainacan-input-background !important;
+    border: solid 1px $gray2 !important;
     border-radius: 20px;
     flex-wrap: nowrap;
     margin-bottom: 0.375rem !important;
@@ -8,7 +8,7 @@
     overflow: hidden;
 
     &:hover{
-        background-color: $tainacan-input-background;
+        background-color: $gray2;
     }
 
     .tag {
diff --git a/src/admin/scss/_tainacan-form.scss b/src/admin/scss/_tainacan-form.scss
index fab67e0e7..53bc5d4bb 100644
--- a/src/admin/scss/_tainacan-form.scss
+++ b/src/admin/scss/_tainacan-form.scss
@@ -25,14 +25,14 @@
         overflow: hidden;
     }
     .required-metadatum-asterisk {
-        color: $gray;
+        color: $gray3;
         &.is-danger {
             color: $danger;
         }
     }
     .input, .textarea {
         background-color: white;
-        border: 1px solid $tainacan-input-background;
+        border: 1px solid $gray2;
         color: $tainacan-input-color;
         transition: background-color 0.1s;
 
@@ -70,9 +70,9 @@
         select {
             color: $tainacan-input-color;
             background-color: white !important;
-            border: 1px solid $tainacan-input-background !important;
+            border: 1px solid $gray2 !important;
             &:focus>option:checked, &:focus>option:hover {
-                background-color: $primary-lighter !important;
+                background-color: $turquoise1 !important;
             }
         }   
     }
@@ -82,7 +82,7 @@
         .button {
             justify-content: space-between;
             width: 100%;
-            border: 1px solid $tainacan-input-background !important;
+            border: 1px solid $gray2 !important;
             border-radius: 0 !important;
             padding: 2px 14px 2px 18px !important
         }
diff --git a/src/admin/scss/_tooltips.scss b/src/admin/scss/_tooltips.scss
index 48f9361e8..6ad92875b 100644
--- a/src/admin/scss/_tooltips.scss
+++ b/src/admin/scss/_tooltips.scss
@@ -9,8 +9,8 @@
     }
 
     .tooltip-inner {
-        background: $primary-lighter;
-        color: $gray-light;
+        background: $turquoise1;
+        color: $gray4;
         font-size: 11px;
         border-radius: 5px;
         padding: 20px;
@@ -24,7 +24,7 @@
         border-style: solid;
         position: absolute;
         margin: 5px;
-        border-color: $primary-lighter;
+        border-color: $turquoise1;
         z-index: 1;
     }
     &[x-placement^="top"] {
diff --git a/src/admin/scss/_variables.scss b/src/admin/scss/_variables.scss
index c1491ccc7..3fd902e28 100644
--- a/src/admin/scss/_variables.scss
+++ b/src/admin/scss/_variables.scss
@@ -2,38 +2,72 @@
 @import "../../../node_modules/bulma/sass/utilities/initial-variables";
 @import "../../../node_modules/bulma/sass/utilities/functions";
 
-// Tainacan custom colors
-$primary: #2cb4c1;
-$primary-invert: findColorInvert($primary);
-$secondary: #298596;
-$secondary-invert: findColorInvert($secondary);
-$tertiary: #01295c;
-$tertiary-invert: findColorInvert($tertiary);
-
-$primary-light:#c1dae0;
-$primary-lighter: #e6f6f8;
-$primary-lighter-hover: #d1e6e6;
-$primary-dark: #55A0AF;
-$primary-darker: darken($primary-dark, 5%);
-
-$success: #25a189;
-$success-invert: findColorInvert($success);
-
-$modal-backgound-color: #bfd8dd;
-$separator-color: #2b98a4;
+// NEW TAINACAN CUSTOM COLORS ------------------
+// Blue, used mainly for repository
+$blue1: #e6f4ff;
+$blue1-invert: findColorInvert($blue1);
+$blue2: #cce3f2;
+$blue2-invert: findColorInvert($blue2);
+$blue3: #44638e;
+$blue3-invert: findColorInvert($blue3);
+$blue4: #284472;
+$blue4-invert: findColorInvert($blue4);
+$blue5: #01295c;
+$blue5-invert: findColorInvert($blue5);
+// Turquoise, used mainly for collection level
+$turquoise1: #e6f6f8;
+$turquoise1-invert: findColorInvert($turquoise1);
+$turquoise2: #ceedef;
+$turquoise2-invert: findColorInvert($turquoise2);
+$turquoise3: #76c6cc;
+$turquoise3-invert: findColorInvert($turquoise3);
+$turquoise4: #4ea2ad;
+$turquoise4-invert: findColorInvert($turquoise4);
+$turquoise5: #298596;
+$turquoise5-invert: findColorInvert($turquoise5);
+// Gray, used mostyl for information
+$gray1: #f2f2f2;
+$gray1-invert: findColorInvert($gray1);
+$gray2: #dbdbdb;
+$gray2-invert: findColorInvert($gray2);
+$gray3: #cbcbcb;
+$gray3-invert: findColorInvert($gray3);
+$gray4: #898d8f;
+$gray4-invert: findColorInvert($gray4);
+$gray5: #454647;
+$gray5-invert: findColorInvert($gray5);
+// Red, used for error messages
+$red1: #eadadc;
+$red1-invert: findColorInvert($red1);
+$red2: #a23939;
+$red2-invert: findColorInvert($red2);
+// Green, used for success buttons
+$green1: #daece6;
+$green1-invert: findColorInvert($green1);
+$green2: #25a189;
+$green2-invert: findColorInvert($green2);
+// Warning, used for warning messages
+$yellow1: #fcebd9;
+$yellow1-invert: findColorInvert($yellow1);
+$yellow2: #e69810;
+$yellow2-invert: findColorInvert($yellow2);
+// Text, no quite black
 $tainacan-input-color: #1d1d1d;
-$tainacan-input-background: #e5e5e5;
-$tainacan-placeholder-color: #898d8f;
-$draggable-border-color: #d8d8d8;
-$gray-hover: #dcdcdc;
 
-$gray: #b1b1b1; 
-$gray-invert: findColorInvert($gray);
-$gray-light: #898d8f; 
-$gray-light-invert: findColorInvert($gray-light);
 
-$danger: #a23939; 
+// Maps some of bulma's colors to custom variables
+$primary: $turquoise3;
+$primary-invert: findColorInvert($turquoise3);
+$secondary: $turquoise5;
+$secondary-invert: findColorInvert($turquoise5);
+$success: $green2;
+$success-invert: findColorInvert($success);
+$danger: $red2; 
 $danger-invert: findColorInvert($danger);
+$warning: $yellow2;
+$warning-invert: findColorInvert($warning);
+$gray: $gray4;
+$gray-invert: findColorInvert($gray4);
 
 @import "../../../node_modules/bulma/sass/utilities/derived-variables.sass";
 
@@ -43,17 +77,36 @@ $colors: (
     "black": ($black, $white),
     "light": ($light, $light-invert),
     "dark": ($dark, $dark-invert),
-    "primary": ($primary, $primary-invert),
-    "secondary": ($secondary, $secondary-invert),
+    "primary": ($turquoise3, $turquoise3-invert),
+    "secondary": ($turquoise5, $turquoise5-invert),
     "info": ($info, $info-invert),
     "success": ($success, $success-invert),
     "warning": ($warning, $warning-invert),
     "danger": ($danger, $danger-invert)
 );
 $addColors: ( 
-    "gray": ($gray, $gray-invert),
-    "gray-light": ($gray-light, $gray-light-invert),
-    "tertiary": ($tertiary, $tertiary-invert),
+    "gray": ($gray4, $gray-invert),
+    "blue1": ($blue1, $blue1-invert),
+    "blue2": ($blue2, $blue2-invert),
+    "blue3": ($blue3, $blue3-invert),
+    "blue4": ($blue4, $blue4-invert),
+    "blue5": ($blue5, $blue5-invert),
+    "turquoise1": ($turquoise1, $turquoise1-invert),
+    "turquoise2": ($turquoise2, $turquoise2-invert),
+    "turquoise3": ($turquoise3, $turquoise3-invert),
+    "turquoise4": ($turquoise4, $turquoise4-invert),
+    "turquoise5": ($turquoise5, $turquoise5-invert),
+    "gray1": ($gray1, $gray1-invert),
+    "gray2": ($gray2, $gray2-invert),
+    "gray3": ($gray3, $gray3-invert),
+    "gray4": ($gray4, $gray4-invert),
+    "gray5": ($gray5, $gray5-invert),
+    "red1": ($red1, $red1-invert),
+    "red2": ($red2, $red2-invert),
+    "green1": ($green1, $green1-invert),
+    "green2": ($green2, $green2-invert),
+    "yellow1": ($yellow1, $yellow1-invert),
+    "yellow2": ($yellow2, $yellow2-invert)
 );
 $colors: map-merge($colors, $addColors);
 
@@ -84,13 +137,13 @@ $link-invert: $secondary;
 $link-focus-border: $secondary; 
 
 // Placeholder
-$text-light: $tainacan-placeholder-color;
+$text-light: $gray4;
 
 // Table
-$table-head-cell-color: $gray-light;
+$table-head-cell-color: $gray4;
 $table-head-cell-border-width: 0 0 1px !important;
 $table-row-active-color: #e5e5e5;
-$table-foot-cell-color: $gray-light;
+$table-foot-cell-color: $gray4;
 $table-foot-cell-border-width: 1px 0 0 !important;
 $table-cell-padding: 1.0em 0.75em;
 
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 836b8d115..dd7b5522a 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -8,9 +8,9 @@
     justify-content: center;
 
     .selected-card {
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
         .metadata-title {
-            background-color: $primary-lighter-hover;
+            background-color: $turquoise2;
         }
     }
 
@@ -29,7 +29,7 @@
         }
 
         &:hover {
-            background-color: $tainacan-input-background !important;
+            background-color: $gray2 !important;
         }
 
         .card-checkbox {
@@ -56,7 +56,7 @@
 
         .card-line {
             height: 1px;
-            background-color: $tainacan-input-background;
+            background-color: $gray2;
             margin-left: -44px;
             margin-right: -44px;
             opacity: 0;
@@ -87,7 +87,7 @@
             }
         }
         &:hover .metadata-title {
-            background-color: $gray-hover !important;
+            background-color: $gray3 !important;
         }
 
         .media {
@@ -97,7 +97,7 @@
                 padding: 0.75rem 1.375rem;
                 flex: 1;
                 font-size: 0.6875rem;
-                color: gray;
+                color: $gray4;
                 overflow: hidden;
                 width: 100%;
                 height: 172px;
diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss
index 4792be0ef..b10aca595 100644
--- a/src/admin/scss/_view-mode-grid.scss
+++ b/src/admin/scss/_view-mode-grid.scss
@@ -8,7 +8,7 @@
     justify-content: center;
 
     .selected-grid-item {
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
     }
 
     .tainacan-grid-item {
@@ -18,7 +18,7 @@
         text-align: center;
 
         &:hover {
-            background-color: $tainacan-input-background;
+            background-color: $gray2;
         }
 
         .grid-item-checkbox {
@@ -37,7 +37,7 @@
             padding: 8px;
             transition: visibility 0.2s, opacity 0.2s;
             margin-top: -43px;
-            background-color: $tainacan-input-background;
+            background-color: $gray2;
             border-bottom-left-radius: 2px;
             border-bottom-right-radius: 2px;
 
@@ -51,7 +51,7 @@
         }
         &.selected-grid-item {
             .actions-area {
-                background-color: $primary-lighter;
+                background-color: $turquoise1;
             }
         }
 
diff --git a/src/admin/scss/_view-mode-records.scss b/src/admin/scss/_view-mode-records.scss
index 09b160832..21ab10723 100644
--- a/src/admin/scss/_view-mode-records.scss
+++ b/src/admin/scss/_view-mode-records.scss
@@ -8,9 +8,9 @@
     justify-content: center;
 
     .selected-record {
-        background-color: $primary-lighter;
+        background-color: $turquoise1;
         .metadata-title {
-            background-color: $primary-lighter-hover;
+            background-color: $turquoise2;
         }
     }
 
@@ -29,7 +29,7 @@
         }
 
         &:hover {
-            background-color: $tainacan-input-background !important;
+            background-color: $gray2 !important;
         }
 
         .record-checkbox {
@@ -56,7 +56,7 @@
 
         .record-line {
             height: 1px;
-            background-color: $tainacan-input-background;
+            background-color: $gray2;
             margin-left: -44px;
             margin-right: -44px;
             opacity: 0;
@@ -87,7 +87,7 @@
             }
         }
         &:hover .metadata-title {
-            background-color: $gray-hover !important;
+            background-color: $gray3 !important;
         }
 
         .media {
@@ -97,7 +97,7 @@
                 padding: 0.75rem 1.375rem;
                 flex: 1;
                 font-size: 0.6875rem;
-                color: gray;
+                color: $gray4;
                 overflow: hidden;
                 width: 100%;
             
@@ -108,7 +108,7 @@
                     white-space: nowrap;
                     overflow: hidden;
                     font-weight: 500;
-                    color: $gray-light;
+                    color: $gray4;
                 }
 
                 .metadata-value {
diff --git a/src/admin/scss/tainacan-admin.scss b/src/admin/scss/tainacan-admin.scss
index 650f50c53..c19a7f997 100644
--- a/src/admin/scss/tainacan-admin.scss
+++ b/src/admin/scss/tainacan-admin.scss
@@ -56,10 +56,10 @@ a:hover {
     &.disabled {
         pointer-events: none;
         cursor: default;
-        color: $tainacan-input-background !important;
+        color: $gray2 !important;
 
         .icon {
-            color: $tainacan-input-background !important;
+            color: $gray2 !important;
         }
     }
 }
diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue
index f77ba0626..a8d5a59f4 100644
--- a/src/admin/theme-items-list.vue
+++ b/src/admin/theme-items-list.vue
@@ -70,7 +70,7 @@ export default {
                 background: $secondary !important;
             }
             &.is-primary:hover, &.is-primary:focus {
-                background: $primary !important;
+                background: $turquoise3 !important;
             }
             &.is-success:hover, &.is-success:focus {
                 background: $success !important;
@@ -85,7 +85,7 @@ export default {
             &.is-outlined {
                 color: #150e38 !important;
                 background-color: white;
-                border-color: $gray-light !important;
+                border-color: $gray4 !important;
             }
             &:focus {
                 outline: 0px;
@@ -102,7 +102,7 @@ export default {
         }
         .input, .textarea {
             font-size: 14px;
-            border: 1px solid $tainacan-input-background;
+            border: 1px solid $gray2;
             border-radius: 1px !important;
             background-color: white;
             box-shadow: none !important;
@@ -110,7 +110,7 @@ export default {
             &:focus, &:active {
                 box-shadow: none !important;
                 background-color: white;
-                border: 1px solid $tainacan-input-background !important;
+                border: 1px solid $gray2 !important;
             }    
         }
         .dropdown {
@@ -134,7 +134,7 @@ export default {
                 height: 1.0em;
                 flex-shrink: 0;
                 border-radius: 0;
-                border: 1px solid $gray-light;
+                border: 1px solid $gray4;
                 transition: background 150ms ease-out;
                 box-shadow: none !important;
             }
@@ -143,11 +143,11 @@ export default {
             &:active input[type="checkbox"] + .check, 
             &:hover input[type="checkbox"] + .check {
                 box-shadow: none !important;
-                border-color: $gray-light !important;
+                border-color: $gray4 !important;
             }
             input[type="checkbox"]:checked + .check {
                 background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
-                border-color: $gray-light !important;
+                border-color: $gray4 !important;
             }
         }
         .b-radio.radio {
@@ -155,7 +155,7 @@ export default {
             input[type="radio"] + .check {
                 width: 13px !important;
                 height: 13px !important;
-                border: 1px solid $gray-light !important;    
+                border: 1px solid $gray4 !important;    
             }
             input[type="radio"] + .check::before {
                 background: black !important;
@@ -168,7 +168,7 @@ export default {
                 box-shadow: none !important;
             }
             input[type="radio"]:checked + .check {
-                border-color: $gray-light !important;
+                border-color: $gray4 !important;
             }
             &:focus input[type="radio"]:checked + .check {
                 box-shadow: none !important;
@@ -197,8 +197,8 @@ export default {
                 }
             }
             li.is-active a {
-                border-bottom: 5px solid $primary;
-                color: $primary; 
+                border-bottom: 5px solid $turquoise3;
+                color: $turquoise3; 
             }
         }
 
@@ -237,7 +237,7 @@ export default {
         .search-control {
 
             .gray-icon, .gray-icon .icon {
-                color: $tainacan-placeholder-color !important;
+                color: $gray4 !important;
                 i::before {
                     font-size: 21px;
                 }
diff --git a/src/classes/filter-types/tainacan-filter-item.vue b/src/classes/filter-types/tainacan-filter-item.vue
index 8dbdc2904..c4fa86ab2 100644
--- a/src/classes/filter-types/tainacan-filter-item.vue
+++ b/src/classes/filter-types/tainacan-filter-item.vue
@@ -196,7 +196,7 @@
                 transform: none;
                 margin-top: -0.6em;
                 right: 0.95em;
-                color: $primary;
+                color: $turquoise3;
             }
         }
 
@@ -221,7 +221,7 @@
                 border: none !important;
             }    
             input, input:active, input:focus {
-                border: 1px solid $tainacan-input-background !important;
+                border: 1px solid $gray2 !important;
             }
             .control.has-icons-left .icon {
                 top: 0px !important;
diff --git a/src/classes/metadata-types/tainacan-form-item.vue b/src/classes/metadata-types/tainacan-form-item.vue
index be372a8ab..b329cf18a 100644
--- a/src/classes/metadata-types/tainacan-form-item.vue
+++ b/src/classes/metadata-types/tainacan-form-item.vue
@@ -218,7 +218,7 @@
     }
 
     .field {
-        border-bottom: 1px solid $draggable-border-color;
+        border-bottom: 1px solid $gray2;
         padding: 10px 25px;
 
         .label {
@@ -230,7 +230,7 @@
         .metadata-type {
             font-size: 13px;
             font-weight: 400;
-            color: $gray;
+            color: $gray3;
             top: -0.2em;
             position: relative;
         }
diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue
index 5933dc2aa..026afcdab 100644
--- a/src/theme-helper/view-mode-cards.vue
+++ b/src/theme-helper/view-mode-cards.vue
@@ -99,13 +99,13 @@ export default {
 </script>
 
 <style  lang="scss" scoped>
-    $primary-lighter: #e6f6f8;
-    $primary-lighter-hover: #d1e6e6;
+    $turquoise1: #e6f6f8;
+    $turquoise2: #d1e6e6;
     $tainacan-input-color: #1d1d1d;
-    $tainacan-input-background: #e5e5e5;
-    $tainacan-placeholder-color: #898d8f;
-    $gray-hover: #dcdcdc;
-    $gray-light: #898d8f; 
+    $gray2: #e5e5e5;
+    $gray4: #898d8f;
+    $gray3: #dcdcdc;
+    $gray4: #898d8f; 
 
     @import "../../src/admin/scss/_view-mode-cards.scss";
 
diff --git a/src/theme-helper/view-mode-records.vue b/src/theme-helper/view-mode-records.vue
index 6dd2c7149..d08f9b6c9 100644
--- a/src/theme-helper/view-mode-records.vue
+++ b/src/theme-helper/view-mode-records.vue
@@ -96,13 +96,13 @@ export default {
 </script>
 
 <style  lang="scss" scoped>
-    $primary-lighter: #e6f6f8;
-    $primary-lighter-hover: #d1e6e6;
+    $turquoise1: #e6f6f8;
+    $turquoise2: #d1e6e6;
     $tainacan-input-color: #1d1d1d;
-    $tainacan-input-background: #e5e5e5;
-    $tainacan-placeholder-color: #898d8f;
-    $gray-hover: #dcdcdc;
-    $gray-light: #898d8f; 
+    $gray2: #e5e5e5;
+    $gray4: #898d8f;
+    $gray3: #dcdcdc;
+    $gray4: #898d8f; 
 
     @import "../../src/admin/scss/_view-mode-records.scss";