diff --git a/src/bundle/Resources/public/scss/_animations.scss b/src/bundle/Resources/public/scss/_animations.scss
index 5871657844..e721ec54be 100644
--- a/src/bundle/Resources/public/scss/_animations.scss
+++ b/src/bundle/Resources/public/scss/_animations.scss
@@ -2,7 +2,7 @@
     0% {
         transform: scale(1);
         box-shadow: none;
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
     }
     25% {
         box-shadow: inset 10px 10px 10px 4px rgba(237, 237, 237, 0.1), inset -10px -10px 10px 4px rgba(237, 237, 237, 0.1),
@@ -32,6 +32,6 @@
     }
     100% {
         transform: scale(1);
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
     }
 }
diff --git a/src/bundle/Resources/public/scss/_badges.scss b/src/bundle/Resources/public/scss/_badges.scss
index 47a5895f04..5eb1383d5d 100644
--- a/src/bundle/Resources/public/scss/_badges.scss
+++ b/src/bundle/Resources/public/scss/_badges.scss
@@ -18,12 +18,12 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        background-color: $ibexa-white;
-        border: calculateRem(1px) solid $ibexa-color-base;
-        color: $ibexa-color-font;
+        background-color: $ibexa-color-white;
+        border: calculateRem(1px) solid $ibexa-color-light;
+        color: $ibexa-color-dark;
 
         &:hover {
-            background-color: $ibexa-color-base-medium;
+            background-color: $ibexa-color-light-500;
         }
 
         .ibexa-icon {
@@ -35,9 +35,9 @@
         &.badge {
             &:hover,
             &:focus {
-                background-color: $ibexa-color-base-medium;
+                background-color: $ibexa-color-light-500;
                 box-shadow: none;
-                color: $ibexa-color-font;
+                color: $ibexa-color-dark;
             }
         }
 
@@ -49,7 +49,7 @@
 
         &.badge-success {
             .ibexa-icon {
-                background-color: $ibexa-color-positive;
+                background-color: $ibexa-color-success;
             }
         }
 
diff --git a/src/bundle/Resources/public/scss/_breadcrumb.scss b/src/bundle/Resources/public/scss/_breadcrumb.scss
index d220a6702e..355403c78c 100644
--- a/src/bundle/Resources/public/scss/_breadcrumb.scss
+++ b/src/bundle/Resources/public/scss/_breadcrumb.scss
@@ -8,14 +8,14 @@
 
     .breadcrumb-item {
         cursor: not-allowed;
-        color: $ibexa-color-font-pale;
+        color: $ibexa-color-dark-300;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         max-width: calculateRem(300px);
 
         &::before {
-            color: $ibexa-color-font;
+            color: $ibexa-color-dark;
         }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_buttons.scss b/src/bundle/Resources/public/scss/_buttons.scss
index f1ff966746..62c15537d2 100644
--- a/src/bundle/Resources/public/scss/_buttons.scss
+++ b/src/bundle/Resources/public/scss/_buttons.scss
@@ -282,9 +282,9 @@
 }
 
 .ibexa-btn--content-tree-expanded {
-    background: $ibexa-white;
-    border-color: $ibexa-white;
-    color: $ibexa-black;
+    background: $ibexa-color-white;
+    border-color: $ibexa-color-white;
+    color: $ibexa-color-black;
 }
 
 button:focus {
diff --git a/src/bundle/Resources/public/scss/_card.scss b/src/bundle/Resources/public/scss/_card.scss
index eea967bc49..5d03febc0b 100644
--- a/src/bundle/Resources/public/scss/_card.scss
+++ b/src/bundle/Resources/public/scss/_card.scss
@@ -16,7 +16,7 @@
 
     &__header {
         display: flex;
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         border-radius: $ibexa-border-radius $ibexa-border-radius 0 0;
         padding: calculateRem(8px);
 
@@ -38,8 +38,8 @@
         &--section-title {
             display: flex;
             align-items: center;
-            color: $ibexa-color-font;
-            border-bottom: calculateRem(1px) solid $ibexa-color-base;
+            color: $ibexa-color-dark;
+            border-bottom: calculateRem(1px) solid $ibexa-color-light;
             padding: calculateRem(24px);
             font-weight: bold;
         }
@@ -67,7 +67,7 @@
     }
 
     &__field-control {
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
         border-radius: $ibexa-border-radius;
         padding: calculateRem(4px);
 
@@ -83,7 +83,7 @@
     }
 
     &--light {
-        background: $ibexa-white;
+        background: $ibexa-color-white;
     }
 
     &--more-space {
@@ -106,13 +106,13 @@
 }
 
 .ibexa-card--toggle-group {
-    background: $ibexa-white;
+    background: $ibexa-color-white;
 
     &.ibexa-card--collapsed {
         .ibexa-card {
             &__header {
                 &:hover {
-                    background: $ibexa-color-base-light;
+                    background: $ibexa-color-light-200;
                 }
             }
 
@@ -134,12 +134,12 @@
     &:not(.ibexa-card--collapsed) {
         .ibexa-card {
             &__header {
-                background-color: $ibexa-color-base-medium;
+                background-color: $ibexa-color-light-500;
                 font-weight: bold;
             }
 
             &__body {
-                background: $ibexa-color-base-light;
+                background: $ibexa-color-light-200;
             }
 
             &__body-display-toggler {
@@ -168,7 +168,7 @@
             .form-check-label {
                 margin-left: calculateRem(8px);
                 margin-bottom: 0;
-                color: $ibexa-black;
+                color: $ibexa-color-black;
                 font-size: calculateRem(16px);
             }
 
@@ -189,7 +189,7 @@
                 }
 
                 .ibexa-icon {
-                    fill: $ibexa-black;
+                    fill: $ibexa-color-black;
                 }
             }
         }
@@ -201,7 +201,7 @@
 
     & + & {
         .ibexa-card__header {
-            border-top: calculateRem(1px) solid $ibexa-color-base;
+            border-top: calculateRem(1px) solid $ibexa-color-light;
         }
     }
 }
diff --git a/src/bundle/Resources/public/scss/_custom-tag.scss b/src/bundle/Resources/public/scss/_custom-tag.scss
index f20d15f7c2..38934a2449 100644
--- a/src/bundle/Resources/public/scss/_custom-tag.scss
+++ b/src/bundle/Resources/public/scss/_custom-tag.scss
@@ -12,7 +12,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
         padding: calculateRem(2px) calculateRem(2px) calculateRem(2px) calculateRem(8px);
         border-top-left-radius: calculateRem(5px);
         border-top-right-radius: calculateRem(5px);
@@ -22,7 +22,7 @@
         }
 
         &-btns {
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             border: calculateRem(2px) solid $ibexa-color-primary;
             border-radius: calculateRem(5px);
             display: flex;
@@ -62,7 +62,7 @@
                 background-color: $ibexa-color-primary;
 
                 .ibexa-icon {
-                    fill: $ibexa-white;
+                    fill: $ibexa-color-white;
                 }
             }
         }
@@ -76,7 +76,7 @@
         &[data-ezelement='eztemplateinline'] {
             padding: 0 calculateRem(8px);
             margin: 0 calculateRem(4px);
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             border: none;
             display: inline-flex;
             max-width: none;
@@ -91,7 +91,7 @@
                 background-color: $ibexa-color-primary;
 
                 .ibexa-icon {
-                    fill: $ibexa-white;
+                    fill: $ibexa-color-white;
                 }
             }
         }
diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss
index 3160fe7fcc..fad38f7411 100644
--- a/src/bundle/Resources/public/scss/_custom.scss
+++ b/src/bundle/Resources/public/scss/_custom.scss
@@ -152,118 +152,37 @@ $ibexa-color-complementary-strong-300: #99b7be;
 $ibexa-color-complementary-strong-200: #ccdbde;
 $ibexa-color-complementary-strong-100: #e5edee;
 
-/* TODO: below $ibexa-color* variables should be removed in 4.0 */
-$ibexa-white: $ibexa-color-white;
-$ibexa-black: $ibexa-color-dark;
-
-$ibexa-color-primary-pale: $ibexa-color-primary-100;
-$ibexa-color-primary-light: $ibexa-color-primary-500;
-$ibexa-color-deep-black: $ibexa-color-black-500;
-
-$ibexa-color-base: $ibexa-color-light;
-$ibexa-color-base-pale: $ibexa-color-light-300;
-$ibexa-color-base-light: $ibexa-color-light-200;
-$ibexa-color-base-medium: $ibexa-color-light-500;
-$ibexa-color-base-dark: $ibexa-color-dark-300;
-$ibexa-color-base-deep: $ibexa-color-dark-400;
-$ibexa-color-base-black: $ibexa-color-dark;
-
-$ibexa-color-ground-dark: $ibexa-color-complementary-strong;
-
-$ibexa-color-font: $ibexa-color-dark;
-$ibexa-color-font-light: $ibexa-color-white;
-$ibexa-color-font-pale: $ibexa-color-dark-300;
-$ibexa-color-font-black: $ibexa-color-black-500;
-$ibexa-color-font-danger: $ibexa-color-danger;
-$ibexa-color-border-light: $ibexa-color-accent-200;
-
-$ibexa-color-positive: $ibexa-color-success;
-$ibexa-color-warning-dark: darken($ibexa-color-warning, 20%);
-$ibexa-color-warning-pale: $ibexa-color-warning-100;
-
-$ibexa-color-primary-hover: $ibexa-color-primary-500;
-
-/* eZ variables: These variables are deprecated, please use variables with the "ibexa" prefix */
-$ez-admin-transition: $ibexa-admin-transition;
-$ez-admin-widget-open-transition: $ibexa-admin-widget-open-transition;
-$ez-admin-widget-close-transition: $ibexa-admin-widget-close-transition;
-
-$ez-color-primary: $ibexa-color-primary;
-$ez-color-primary-hover: darken($ibexa-color-primary, 15%);
-$ez-color-secondary: $ibexa-color-primary;
-$ez-color-secondary-hover: darken($ez-color-secondary, 15%);
-$ez-color-hyperlink: $ibexa-color-primary;
-$ez-color-hyperlink-hover: darken($ez-color-hyperlink, 15%);
-$ez-color-positive: $ibexa-color-positive;
-$ez-color-warning: $ibexa-color-warning;
-$ez-color-danger: $ibexa-color-danger;
-$ez-color-danger-hover: darken($ibexa-color-danger, 15%);
-
-$ez-white: $ibexa-white;
-$ez-ground-base-pale: $ibexa-color-base-light;
-$ez-ground-base-light: $ibexa-color-base-pale;
-$ez-ground-base: $ibexa-color-base-pale;
-$ez-ground-base-medium: $ibexa-white;
-$ez-ground-base-dark: $ibexa-color-base-light;
-$ez-ground-base-dark-hover: darken($ibexa-color-base-light, 15%);
-$ez-color-base-pale: $ibexa-white;
-$ez-color-base-light: $ibexa-color-base-dark;
-$ez-color-base-light-hover: darken($ibexa-color-base-dark, 15%);
-$ez-color-base-medium: $ibexa-color-base-dark;
-$ez-color-base-medium-hover: darken($ibexa-color-base-dark, 15%);
-$ez-color-base-dark: $ibexa-black;
-$ez-black: $ibexa-black;
-
-$ez-secondary-ground-pale: $ibexa-color-base;
-$ez-ground-primary: $ibexa-white;
-$ez-secondary-ground: $ibexa-color-primary;
-$ez-secondary-ground-medium: $ibexa-color-primary;
-$ez-secondary-ground-dark: $ibexa-color-primary;
-
-$ez-ground-primary-inverted-light: $ibexa-color-complementary-strong;
-$ez-ground-primary-inverted: $ibexa-color-base;
-
-$ez-color-warning-pale: $ibexa-color-warning-pale;
-$ez-color-warning-dark: $ibexa-color-warning-dark;
-
-$ez-alloyeditor-color-hover: $ibexa-color-info-400;
-
-$ez-pagination-bg: transparent;
-$ez-pagination-margin: 0.25rem;
-$ez-pagination-page-link-radius: 50%;
-$ez-pagination-border-radius: 0.3rem;
-
 /* boostrap variables*/
-$white: $ibexa-white;
-$gray-100: $ibexa-color-base-pale;
-$gray-200: $ibexa-color-base-pale;
-$gray-300: $ibexa-color-base-light;
-$gray-400: $ibexa-color-base-light;
-$gray-500: $ibexa-color-base-medium;
-$gray-600: $ibexa-color-base-medium;
-$gray-700: $ibexa-color-base;
-$gray-800: $ibexa-color-base;
-$gray-900: $ibexa-color-base-dark;
-$black: $ibexa-black;
+$white: $ibexa-color-white;
+$gray-100: $ibexa-color-light-300;
+$gray-200: $ibexa-color-light-300;
+$gray-300: $ibexa-color-light-200;
+$gray-400: $ibexa-color-light-200;
+$gray-500: $ibexa-color-light-500;
+$gray-600: $ibexa-color-light-500;
+$gray-700: $ibexa-color-light;
+$gray-800: $ibexa-color-light;
+$gray-900: $ibexa-color-dark-300;
+$black: $ibexa-color-black;
 
 $grays: (
-    100: $ibexa-color-base-pale,
-    200: $ibexa-color-base-pale,
-    300: $ibexa-color-base-light,
-    400: $ibexa-color-base-light,
-    500: $ibexa-color-base-medium,
-    600: $ibexa-color-base-medium,
-    700: $ibexa-color-base,
-    800: $ibexa-color-base,
-    900: $ibexa-color-base-dark
+    100: $ibexa-color-light-300,
+    200: $ibexa-color-light-300,
+    300: $ibexa-color-light-200,
+    400: $ibexa-color-light-200,
+    500: $ibexa-color-light-500,
+    600: $ibexa-color-light-500,
+    700: $ibexa-color-light,
+    800: $ibexa-color-light,
+    900: $ibexa-color-dark-300
 );
 
 $blue: $ibexa-color-primary;
 $red: $ibexa-color-primary;
 $orange: $ibexa-color-primary;
 $yellow: $ibexa-color-warning;
-$green: $ibexa-color-positive;
-$teal: $ibexa-white;
+$green: $ibexa-color-success;
+$teal: $ibexa-color-white;
 $pink: #e83e8c !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
@@ -274,10 +193,10 @@ $colors: (
     red: $ibexa-color-primary,
     orange: $ibexa-color-primary,
     yellow: $ibexa-color-warning,
-    green: $ibexa-color-positive,
-    teal: $ibexa-white,
-    white: $ibexa-white,
-    gray: $ibexa-color-base-dark,
+    green: $ibexa-color-success,
+    teal: $ibexa-color-white,
+    white: $ibexa-color-white,
+    gray: $ibexa-color-dark-300,
     gray-dark: $pink,
     indigo: $indigo,
     purple: $purple,
@@ -287,12 +206,12 @@ $colors: (
 
 $theme-colors: (
     primary: $ibexa-color-primary,
-    secondary: $ibexa-color-base-deep,
-    success: $ibexa-color-positive,
+    secondary: $ibexa-color-dark-400,
+    success: $ibexa-color-success,
     warning: $ibexa-color-warning,
     danger: $ibexa-color-danger,
-    light: $ibexa-color-base-light,
-    dark: $ibexa-color-base-black,
+    light: $ibexa-color-light-200,
+    dark: $ibexa-color-dark,
     info: $cyan
 );
 
@@ -322,7 +241,7 @@ $ibexa-border-radius-small: 5px;
 $table-cell-padding: 12px 16px;
 $table-bg: $white;
 $table-border-width: 0;
-$table-hover-bg: $ibexa-color-base-pale;
+$table-hover-bg: $ibexa-color-light-300;
 
 // Breadcrumbs
 $breadcrumb-font-size: 12px;
@@ -334,17 +253,17 @@ $breadcrumb-divider: quote('>');
 
 // Links
 $link-decoration: underline;
-$link-color: $ibexa-color-font;
+$link-color: $ibexa-color-dark;
 $link-hover-decoration: underline;
 $link-hover-color: $ibexa-color-primary;
 
 // Body
 $body-bg: $ibexa-color-white;
-$body-color: $ibexa-black;
+$body-color: $ibexa-color-black;
 
 // Pagination
 $pagination-color: $ibexa-color-dark;
-$pagination-bg: $ibexa-white;
+$pagination-bg: $ibexa-color-white;
 $pagination-border-width: 1px;
 $pagination-border-color: transparent;
 $pagination-padding-y: 0;
@@ -369,7 +288,7 @@ $pagination-disabled-border-color: transparent;
 $modal-header-padding-y: 16px;
 $modal-header-padding-x: 0;
 $modal-header-border-width: 1px;
-$modal-header-border-color: $ibexa-color-base-medium;
+$modal-header-border-color: $ibexa-color-light-500;
 $modal-title-font-size: 28px;
 $modal-content-border-width: 0;
 $modal-content-border-radius: $ibexa-border-radius;
@@ -396,13 +315,13 @@ $container-max-widths: (
 
 //Inputs
 $input-bg: transparent;
-$input-color: $ibexa-color-font;
-$input-border-color: $ibexa-color-base-dark;
+$input-color: $ibexa-color-dark;
+$input-border-color: $ibexa-color-dark-300;
 $input-box-shadow: none;
 
 $input-focus-bg: transparent;
 $input-focus-border-color: $ibexa-color-primary;
-$input-focus-color: $ibexa-color-font-pale;
+$input-focus-color: $ibexa-color-dark-300;
 $input-focus-box-shadow: 0 0 2px 0 rgba($ibexa-color-primary, 0.75);
 
 //Buttons
diff --git a/src/bundle/Resources/public/scss/_custom.tooltip.scss b/src/bundle/Resources/public/scss/_custom.tooltip.scss
index b602641d3e..8ef45e5e34 100644
--- a/src/bundle/Resources/public/scss/_custom.tooltip.scss
+++ b/src/bundle/Resources/public/scss/_custom.tooltip.scss
@@ -9,7 +9,7 @@
         height: calculateRem(8px);
 
         &::before {
-            border-top-color: $ibexa-white;
+            border-top-color: $ibexa-color-white;
         }
     }
 
@@ -17,7 +17,7 @@
         width: calculateRem(8px);
 
         &::before {
-            border-right-color: $ibexa-white;
+            border-right-color: $ibexa-color-white;
         }
     }
 
@@ -25,7 +25,7 @@
         height: calculateRem(8px);
 
         &::before {
-            border-bottom-color: $ibexa-white;
+            border-bottom-color: $ibexa-color-white;
         }
     }
 
@@ -33,14 +33,14 @@
         width: calculateRem(8px);
 
         &::before {
-            border-left-color: $ibexa-white;
+            border-left-color: $ibexa-color-white;
         }
     }
 
     &__inner {
         padding: calculateRem(11px);
         max-width: calculateRem(300px);
-        border: calculateRem(1px) solid $ibexa-color-base-light;
+        border: calculateRem(1px) solid $ibexa-color-light-200;
         border-radius: $ibexa-border-radius;
         background-color: $ibexa-color-white;
         color: $ibexa-color-dark;
@@ -53,33 +53,33 @@
     &--ground-dark {
         .ibexa-tooltip {
             &__inner {
-                color: $ibexa-white;
-                background-color: $ibexa-color-ground-dark;
+                color: $ibexa-color-white;
+                background-color: $ibexa-color-complementary-strong;
             }
         }
 
         &.ibexa-tooltip {
             &.bs-tooltip-top .ibexa-tooltip__arrow {
                 &::before {
-                    border-top-color: $ibexa-color-ground-dark;
+                    border-top-color: $ibexa-color-complementary-strong;
                 }
             }
 
             &.bs-tooltip-right .ibexa-tooltip__arrow {
                 &::before {
-                    border-right-color: $ibexa-color-ground-dark;
+                    border-right-color: $ibexa-color-complementary-strong;
                 }
             }
 
             &.bs-tooltip-bottom .ibexa-tooltip__arrow {
                 &::before {
-                    border-bottom-color: $ibexa-color-ground-dark;
+                    border-bottom-color: $ibexa-color-complementary-strong;
                 }
             }
 
             &.bs-tooltip-left .ibexa-tooltip__arrow {
                 &::before {
-                    border-left-color: $ibexa-color-ground-dark;
+                    border-left-color: $ibexa-color-complementary-strong;
                 }
             }
         }
diff --git a/src/bundle/Resources/public/scss/_dropdown.scss b/src/bundle/Resources/public/scss/_dropdown.scss
index 61f8101d46..43af98324d 100644
--- a/src/bundle/Resources/public/scss/_dropdown.scss
+++ b/src/bundle/Resources/public/scss/_dropdown.scss
@@ -138,7 +138,7 @@
 
     &__items {
         width: 100%;
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         border: calculateRem(1px) solid $ibexa-color-light;
         color: $ibexa-color-dark;
         border-radius: $ibexa-border-radius;
diff --git a/src/bundle/Resources/public/scss/_extra-actions.scss b/src/bundle/Resources/public/scss/_extra-actions.scss
index 14672ef8f3..30f6d61d42 100644
--- a/src/bundle/Resources/public/scss/_extra-actions.scss
+++ b/src/bundle/Resources/public/scss/_extra-actions.scss
@@ -1,7 +1,7 @@
 .ibexa-extra-actions {
     @include container-box-shadow-left;
 
-    background-color: $ibexa-white;
+    background-color: $ibexa-color-white;
     padding: calculateRem(16px) 0;
     width: calculateRem(700px);
 
@@ -14,7 +14,7 @@
         border-radius: calculateRem(4px);
         padding: 0 calculateRem(16px);
         line-height: calculateRem(45px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         color: $ibexa-color-primary;
         text-decoration: none;
         cursor: pointer;
@@ -28,12 +28,12 @@
 
         &:hover,
         &:focus {
-            background: $ibexa-color-base;
+            background: $ibexa-color-light;
         }
 
         &:active {
             background: $ibexa-color-primary;
-            color: $ibexa-white;
+            color: $ibexa-color-white;
         }
     }
 
@@ -44,7 +44,7 @@
     &__header {
         padding: calculateRem(8px) calculateRem(32px) calculateRem(24px);
         font-weight: bold;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
@@ -86,24 +86,24 @@
             border-radius: calculateRem(4px);
             padding: 0 calculateRem(16px);
             line-height: calculateRem(45px);
-            background: $ibexa-white;
+            background: $ibexa-color-white;
             text-decoration: none;
             cursor: pointer;
             transition: all 0.2s $ibexa-admin-transition;
             margin-bottom: calculateRem(16px);
             font-size: calculateRem(15px);
-            box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-black, 0.1);
+            box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-color-black, 0.1);
 
             &:hover,
             &:focus {
-                background: $ibexa-color-base;
+                background: $ibexa-color-light;
                 font-weight: 700;
                 text-decoration: none;
             }
 
             &:active {
                 background: $ibexa-color-primary;
-                color: $ibexa-white;
+                color: $ibexa-color-white;
             }
 
             &-label {
@@ -121,16 +121,16 @@
 
     &__section-header {
         margin-bottom: calculateRem(12px);
-        color: $ibexa-color-base-dark;
+        color: $ibexa-color-dark-300;
         font-size: calculateRem(16px);
         padding-top: calculateRem(32px);
     }
 
     &__section-content {
         padding-bottom: calculateRem(32px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         font-size: calculateRem(16px);
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
 
         select {
             display: inline-block;
diff --git a/src/bundle/Resources/public/scss/_field-group.scss b/src/bundle/Resources/public/scss/_field-group.scss
index 8dca4c7555..063f40d953 100644
--- a/src/bundle/Resources/public/scss/_field-group.scss
+++ b/src/bundle/Resources/public/scss/_field-group.scss
@@ -1,12 +1,12 @@
 .ibexa-view-rawcontentview {
     margin-bottom: calculateRem(25px);
-    background-color: $ibexa-white;
+    background-color: $ibexa-color-white;
 
     .ibexa-raw-content-title {
         padding: calculateRem(24px);
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         align-items: center;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
 
         h2 {
             margin: 0 calculateRem(10px) 0 0;
@@ -26,8 +26,8 @@
 
 .ibexa-fieldgroup {
     &__name {
-        color: $ibexa-color-font;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        color: $ibexa-color-dark;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
         padding: calculateRem(24px) calculateRem(8px);
         font-weight: normal;
         font-size: calculateRem(16px);
@@ -38,7 +38,7 @@
         display: block;
         padding: calculateRem(24px) calculateRem(16px);
         font-size: calculateRem(16px);
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         text-decoration: none;
         font-weight: bold;
 
@@ -55,8 +55,8 @@
             display: inline-block;
             width: calculateRem(7px);
             height: calculateRem(7px);
-            border-right: calculateRem(2px) solid $ibexa-black;
-            border-bottom: calculateRem(2px) solid $ibexa-black;
+            border-right: calculateRem(2px) solid $ibexa-color-black;
+            border-bottom: calculateRem(2px) solid $ibexa-color-black;
             transition: all 0.3s $ibexa-admin-transition;
             transform: rotate(-135deg);
         }
@@ -80,7 +80,7 @@
 
         &__name {
             margin-bottom: calculateRem(8px);
-            color: $ibexa-color-base-dark;
+            color: $ibexa-color-dark-300;
             font-size: $ibexa-text-font-size-small;
         }
 
diff --git a/src/bundle/Resources/public/scss/_filters.scss b/src/bundle/Resources/public/scss/_filters.scss
index 62daaca069..11685d5f4c 100644
--- a/src/bundle/Resources/public/scss/_filters.scss
+++ b/src/bundle/Resources/public/scss/_filters.scss
@@ -23,8 +23,8 @@
 
                     &:disabled {
                         cursor: auto;
-                        background-color: $ibexa-white;
-                        color: $ibexa-black;
+                        background-color: $ibexa-color-white;
+                        color: $ibexa-color-black;
                         padding-right: calculateRem(32px);
                         text-overflow: ellipsis;
 
@@ -99,7 +99,7 @@
         min-width: 100%;
         border-radius: $ibexa-border-radius-small;
         margin-bottom: 0;
-        background-color: $ibexa-color-base-light;
+        background-color: $ibexa-color-light-200;
         max-height: calculateRem(300px);
         overflow: auto;
         transform: scaleY(1);
diff --git a/src/bundle/Resources/public/scss/_footer.scss b/src/bundle/Resources/public/scss/_footer.scss
index 327ebde492..c37a6d4b45 100644
--- a/src/bundle/Resources/public/scss/_footer.scss
+++ b/src/bundle/Resources/public/scss/_footer.scss
@@ -8,9 +8,9 @@
     height: calculateRem(50px);
     margin-top: calculateRem(24px);
     padding: 0 calculateRem(24px);
-    background-color: $ibexa-white;
+    background-color: $ibexa-color-white;
     font-size: calculateRem(14px);
-    color: $ibexa-color-font-pale;
+    color: $ibexa-color-dark-300;
 
     &__brand-img {
         margin-right: calculateRem(16px);
@@ -21,7 +21,7 @@
         display: inline-block;
         margin-left: calculateRem(24px);
         font-size: calculateRem(14px);
-        color: $ibexa-color-font-pale;
+        color: $ibexa-color-dark-300;
     }
 }
 
diff --git a/src/bundle/Resources/public/scss/_forms.scss b/src/bundle/Resources/public/scss/_forms.scss
index 9c2f06acff..11420dc538 100644
--- a/src/bundle/Resources/public/scss/_forms.scss
+++ b/src/bundle/Resources/public/scss/_forms.scss
@@ -4,17 +4,17 @@ form:not(.form-inline) {
 
         font-weight: 700;
         font-size: calculateRem(16px);
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         margin-bottom: 0;
         margin-top: calculateRem(20px);
     }
 
     .form-control {
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
     }
 
     .form-control[readonly] {
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
     }
 
     .form-control:focus {
diff --git a/src/bundle/Resources/public/scss/_general.scss b/src/bundle/Resources/public/scss/_general.scss
index bc97c0866d..06eda44d1c 100644
--- a/src/bundle/Resources/public/scss/_general.scss
+++ b/src/bundle/Resources/public/scss/_general.scss
@@ -49,7 +49,7 @@ img {
     min-height: calc(100vh - #{calculateRem(58px)});
 
     &--edit {
-        background: $ibexa-white;
+        background: $ibexa-color-white;
     }
 }
 
diff --git a/src/bundle/Resources/public/scss/_grid-view-item.scss b/src/bundle/Resources/public/scss/_grid-view-item.scss
index eaff886c67..ac48ead48a 100644
--- a/src/bundle/Resources/public/scss/_grid-view-item.scss
+++ b/src/bundle/Resources/public/scss/_grid-view-item.scss
@@ -29,7 +29,7 @@
         left: 0;
         width: calculateRem(30px);
         height: calculateRem(30px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
     }
 
     &__content-type .ibexa-icon {
@@ -51,7 +51,7 @@
         flex-grow: 1;
         border-radius: calculateRem(5px);
         margin-bottom: calculateRem(16px);
-        background: $ibexa-color-base-light;
+        background: $ibexa-color-light-200;
 
         display: flex;
         align-items: center;
diff --git a/src/bundle/Resources/public/scss/_header.scss b/src/bundle/Resources/public/scss/_header.scss
index 37824c856b..79767df97d 100644
--- a/src/bundle/Resources/public/scss/_header.scss
+++ b/src/bundle/Resources/public/scss/_header.scss
@@ -20,8 +20,8 @@
     &--content-edit {
         padding-top: calculateRem(24px);
         padding-bottom: calculateRem(24px);
-        background: $ibexa-white;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        background: $ibexa-color-white;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
     }
 }
 
diff --git a/src/bundle/Resources/public/scss/_icon-tag.scss b/src/bundle/Resources/public/scss/_icon-tag.scss
index 9342573b98..37677d8b3d 100644
--- a/src/bundle/Resources/public/scss/_icon-tag.scss
+++ b/src/bundle/Resources/public/scss/_icon-tag.scss
@@ -1,7 +1,7 @@
 .ibexa-icon-tag {
     display: flex;
     align-items: center;
-    color: $ibexa-color-font-pale;
+    color: $ibexa-color-dark-300;
     letter-spacing: calculateRem(0.12px);
     margin-bottom: calculateRem(24px);
 
diff --git a/src/bundle/Resources/public/scss/_icons.scss b/src/bundle/Resources/public/scss/_icons.scss
index 46c37f3045..943aff288d 100644
--- a/src/bundle/Resources/public/scss/_icons.scss
+++ b/src/bundle/Resources/public/scss/_icons.scss
@@ -44,15 +44,15 @@
     }
 
     &--dark {
-        fill: $ibexa-black;
+        fill: $ibexa-color-black;
     }
 
     &--light {
-        fill: $ibexa-white;
+        fill: $ibexa-color-white;
     }
 
     &--base-dark {
-        fill: $ibexa-color-base-dark;
+        fill: $ibexa-color-dark-300;
     }
 
     &--primary {
@@ -60,7 +60,7 @@
     }
 
     &--secondary {
-        fill: $ibexa-black;
+        fill: $ibexa-color-black;
     }
 }
 
@@ -81,26 +81,26 @@
     .ibexa-icon {
         width: calculateRem(24px);
         height: calculateRem(24px);
-        fill: $ibexa-color-base-dark;
+        fill: $ibexa-color-dark-300;
     }
 
     &:hover,
     &:focus {
         .ibexa-icon {
-            fill: $ibexa-white;
+            fill: $ibexa-color-white;
         }
     }
 
     &.ibexa-preview__action--selected {
         .ibexa-icon {
-            fill: $ibexa-white;
+            fill: $ibexa-color-white;
         }
     }
 }
 
 .ibexa-btn--content-tree-expanded {
     .ibexa-icon {
-        fill: $ibexa-black;
+        fill: $ibexa-color-black;
     }
 }
 
diff --git a/src/bundle/Resources/public/scss/_inputs.scss b/src/bundle/Resources/public/scss/_inputs.scss
index 2543c11c07..50aa7c5c42 100644
--- a/src/bundle/Resources/public/scss/_inputs.scss
+++ b/src/bundle/Resources/public/scss/_inputs.scss
@@ -153,7 +153,7 @@
             }
 
             &::after {
-                border-color: $ibexa-white;
+                border-color: $ibexa-color-white;
             }
         }
 
@@ -167,8 +167,8 @@
             }
 
             &::after {
-                border-color: $ibexa-white;
-                background-color: $ibexa-white;
+                border-color: $ibexa-color-white;
+                background-color: $ibexa-color-white;
                 height: calculateRem(1px);
                 top: 50%;
                 transform: translateY(-50%);
diff --git a/src/bundle/Resources/public/scss/_instant-filter.scss b/src/bundle/Resources/public/scss/_instant-filter.scss
index 95da736bb3..6688a5e1e3 100644
--- a/src/bundle/Resources/public/scss/_instant-filter.scss
+++ b/src/bundle/Resources/public/scss/_instant-filter.scss
@@ -19,7 +19,7 @@
             padding-bottom: calculateRem(16px);
 
             &:not(:first-of-type) {
-                border-bottom: calculateRem(1px) solid $ibexa-color-base;
+                border-bottom: calculateRem(1px) solid $ibexa-color-light;
             }
         }
 
@@ -46,7 +46,7 @@
             }
 
             .ibexa-icon {
-                fill: $ibexa-black;
+                fill: $ibexa-color-black;
                 position: absolute;
                 left: calculateRem(20px);
                 width: calculateRem(16px);
diff --git a/src/bundle/Resources/public/scss/_links.scss b/src/bundle/Resources/public/scss/_links.scss
index e97a35048f..112777ec8d 100644
--- a/src/bundle/Resources/public/scss/_links.scss
+++ b/src/bundle/Resources/public/scss/_links.scss
@@ -14,10 +14,10 @@
     }
 
     &--light {
-        color: $ibexa-white;
+        color: $ibexa-color-white;
     }
 
     &--dark {
-        color: $ibexa-black;
+        color: $ibexa-color-black;
     }
 }
diff --git a/src/bundle/Resources/public/scss/_login.scss b/src/bundle/Resources/public/scss/_login.scss
index b954876c85..eeb77584bf 100644
--- a/src/bundle/Resources/public/scss/_login.scss
+++ b/src/bundle/Resources/public/scss/_login.scss
@@ -11,7 +11,7 @@
     }
 
     &__info-col {
-        color: $ibexa-color-font-light;
+        color: $ibexa-color-white;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -26,8 +26,8 @@
         position: relative;
         display: flex;
         flex-direction: column;
-        color: $ibexa-color-font;
-        background: $ibexa-white;
+        color: $ibexa-color-dark;
+        background: $ibexa-color-white;
         min-height: calculateRem(600px);
         border-radius: $ibexa-border-radius;
         padding: calculateRem(90px) calculateRem(120px);
diff --git a/src/bundle/Resources/public/scss/_main-nav.scss b/src/bundle/Resources/public/scss/_main-nav.scss
index 2f55463a57..661b4c3047 100644
--- a/src/bundle/Resources/public/scss/_main-nav.scss
+++ b/src/bundle/Resources/public/scss/_main-nav.scss
@@ -1,8 +1,8 @@
 .ibexa-main-nav {
     flex-wrap: wrap;
     padding: 0;
-    background-color: $ibexa-white;
-    border-bottom: calculateRem(1px) solid $ibexa-color-border-light;
+    background-color: $ibexa-color-white;
+    border-bottom: calculateRem(1px) solid $ibexa-color-accent-200;
 
     > .container-fluid {
         padding-right: 0;
@@ -16,13 +16,13 @@
     }
 
     .nav-tabs {
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
         border: none;
 
         .nav-link {
             margin: 0;
             padding: calculateRem(17px) calculateRem(24px);
-            color: $ibexa-black;
+            color: $ibexa-color-black;
             font-size: calculateRem(14px);
             transition: all 0.3s $ibexa-admin-transition;
 
@@ -41,13 +41,13 @@
 
 .ibexa-main-sub-nav {
     padding: 0 calculateRem(16px) 0 calculateRem(103px);
-    background-color: $ibexa-white;
+    background-color: $ibexa-color-white;
 
     .navbar-nav {
         .nav-link {
             padding: calculateRem(9px) calculateRem(24px);
             font-size: calculateRem(14px);
-            color: $ibexa-black;
+            color: $ibexa-color-black;
             text-decoration: none;
 
             &:hover,
diff --git a/src/bundle/Resources/public/scss/_mixins.scss b/src/bundle/Resources/public/scss/_mixins.scss
index 02da7e6d4a..dd1a10d9bb 100644
--- a/src/bundle/Resources/public/scss/_mixins.scss
+++ b/src/bundle/Resources/public/scss/_mixins.scss
@@ -43,7 +43,7 @@
         &:hover,
         &:focus {
             .ibexa-icon {
-                fill: $ibexa-color-base-deep;
+                fill: $ibexa-color-dark-400;
             }
         }
     }
diff --git a/src/bundle/Resources/public/scss/_notifications-menu.scss b/src/bundle/Resources/public/scss/_notifications-menu.scss
index b5a80a2274..7ada96c63c 100644
--- a/src/bundle/Resources/public/scss/_notifications-menu.scss
+++ b/src/bundle/Resources/public/scss/_notifications-menu.scss
@@ -32,7 +32,7 @@
                     height: calculateRem(20px);
                     background: $ibexa-color-primary;
                     border-radius: 50%;
-                    color: $ibexa-white;
+                    color: $ibexa-color-white;
                     text-align: center;
                     line-height: calculateRem(20px);
                 }
diff --git a/src/bundle/Resources/public/scss/_notifications-modal.scss b/src/bundle/Resources/public/scss/_notifications-modal.scss
index 954c98854a..ae3ed6e3ad 100644
--- a/src/bundle/Resources/public/scss/_notifications-modal.scss
+++ b/src/bundle/Resources/public/scss/_notifications-modal.scss
@@ -24,13 +24,13 @@
 
         th {
             border: none;
-            color: $ibexa-color-base-dark;
-            border-top: calculateRem(1px) solid $ibexa-color-base;
-            border-bottom: calculateRem(1px) solid $ibexa-color-base;
+            color: $ibexa-color-dark-300;
+            border-top: calculateRem(1px) solid $ibexa-color-light;
+            border-bottom: calculateRem(1px) solid $ibexa-color-light;
         }
 
         tr {
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             cursor: pointer;
 
             td {
@@ -53,7 +53,7 @@
     }
 
     &__item--read {
-        color: $ibexa-color-base-dark;
+        color: $ibexa-color-dark-300;
 
         .type__icon {
             @include type-icon-read;
diff --git a/src/bundle/Resources/public/scss/_picker.scss b/src/bundle/Resources/public/scss/_picker.scss
index 15dc506747..436f54034b 100644
--- a/src/bundle/Resources/public/scss/_picker.scss
+++ b/src/bundle/Resources/public/scss/_picker.scss
@@ -29,7 +29,7 @@
         &:hover,
         &:focus {
             .ibexa-icon {
-                fill: $ibexa-color-base-dark;
+                fill: $ibexa-color-dark-300;
             }
         }
     }
diff --git a/src/bundle/Resources/public/scss/_side-menu.scss b/src/bundle/Resources/public/scss/_side-menu.scss
index 08e7ad7dce..1821046d3e 100644
--- a/src/bundle/Resources/public/scss/_side-menu.scss
+++ b/src/bundle/Resources/public/scss/_side-menu.scss
@@ -6,7 +6,7 @@
     }
 
     .ibexa-icon {
-        fill: $ibexa-white;
+        fill: $ibexa-color-white;
     }
 
     .ibexa-sticky-container > .btn {
diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
index dfdb92c6ec..6d072b837f 100644
--- a/src/bundle/Resources/public/scss/_tables.scss
+++ b/src/bundle/Resources/public/scss/_tables.scss
@@ -139,9 +139,9 @@
         &--no-content {
             margin-bottom: calculateRem(48px);
             padding: calculateRem(12px) calculateRem(16px);
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             font-style: italic;
-            color: $ibexa-black;
+            color: $ibexa-color-black;
         }
 
         &--limitation {
@@ -162,7 +162,7 @@
 
     &__cell-link,
     &__cell-link:hover {
-        color: $ibexa-color-font;
+        color: $ibexa-color-dark;
         text-decoration: none;
     }
 
@@ -186,7 +186,7 @@
 
         font-size: $ibexa-text-font-size-large;
         line-height: calculateRem(33px);
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         font-weight: 600;
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/bundle/Resources/public/scss/_tabs.scss b/src/bundle/Resources/public/scss/_tabs.scss
index 3728b2d5f5..d724616752 100644
--- a/src/bundle/Resources/public/scss/_tabs.scss
+++ b/src/bundle/Resources/public/scss/_tabs.scss
@@ -12,7 +12,7 @@
     .nav-link {
         margin-left: calculateRem(16px);
         padding: calculateRem(14px) calculateRem(8px);
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         border-radius: 0;
         text-decoration: none;
     }
@@ -96,7 +96,7 @@
         height: calculateRem(48px);
         display: flex;
         align-items: center;
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         background-color: transparent;
         border-bottom: calculateRem(1px) solid $ibexa-color-light;
         outline: none;
@@ -196,7 +196,7 @@
                 }
 
                 .ibexa-svg-tab-corner-inside {
-                    fill: $ibexa-white;
+                    fill: $ibexa-color-white;
                 }
             }
         }
diff --git a/src/bundle/Resources/public/scss/_tag-view-select.scss b/src/bundle/Resources/public/scss/_tag-view-select.scss
index 04cca44628..fa31a6a8fe 100644
--- a/src/bundle/Resources/public/scss/_tag-view-select.scss
+++ b/src/bundle/Resources/public/scss/_tag-view-select.scss
@@ -8,7 +8,7 @@
         @include ibexa-font-sans-serif();
 
         font-size: $ibexa-text-font-size-medium;
-        color: $ibexa-black;
+        color: $ibexa-color-black;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/src/bundle/Resources/public/scss/_translation-selector.scss b/src/bundle/Resources/public/scss/_translation-selector.scss
index 86b09447ce..a68f24516a 100644
--- a/src/bundle/Resources/public/scss/_translation-selector.scss
+++ b/src/bundle/Resources/public/scss/_translation-selector.scss
@@ -4,11 +4,11 @@
         position: fixed;
         opacity: 1;
         text-align: left;
-        background-color: $ibexa-white;
-        border: calculateRem(16px) solid $ibexa-white;
+        background-color: $ibexa-color-white;
+        border: calculateRem(16px) solid $ibexa-color-white;
         width: calculateRem(360px);
         padding: calculateRem(9px);
-        box-shadow: calculateRem(-4px) calculateRem(4px) calculateRem(6px) 0 rgba($ibexa-color-base-dark, 0.35);
+        box-shadow: calculateRem(-4px) calculateRem(4px) calculateRem(6px) 0 rgba($ibexa-color-dark-300, 0.35);
         border-radius: calculateRem(4px);
         top: calculateRem(100px);
         right: 0;
@@ -41,15 +41,15 @@
         overflow: auto;
 
         .ibexa-btn--content-edit {
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             padding: calculateRem(9px) calculateRem(24px);
             text-align: left;
-            box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-black, 0.1);
+            box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-color-black, 0.1);
             margin-bottom: calculateRem(8px);
 
             &:hover,
             &:focus {
-                background: $ibexa-color-base;
+                background: $ibexa-color-light;
                 font-weight: 700;
                 text-decoration: none;
             }
diff --git a/src/bundle/Resources/public/scss/_trash-search-form.scss b/src/bundle/Resources/public/scss/_trash-search-form.scss
index 3c0f2f7187..ae1b2d5f3e 100644
--- a/src/bundle/Resources/public/scss/_trash-search-form.scss
+++ b/src/bundle/Resources/public/scss/_trash-search-form.scss
@@ -30,8 +30,8 @@
 
                     &:disabled {
                         cursor: auto;
-                        background-color: $ibexa-white;
-                        color: $ibexa-black;
+                        background-color: $ibexa-color-white;
+                        color: $ibexa-color-black;
                         padding-right: calculateRem(32px);
                         text-overflow: ellipsis;
 
@@ -56,7 +56,7 @@
         min-width: 100%;
         border-radius: calculateRem(5px);
         margin-bottom: 0;
-        background-color: $ibexa-color-base-light;
+        background-color: $ibexa-color-light-200;
         max-height: calculateRem(300px);
         overflow: auto;
         transform: scaleY(1);
@@ -90,8 +90,8 @@
         height: 0;
         opacity: 0;
         margin-top: calculateRem(8px);
-        background: $ibexa-white;
-        border: calculateRem(1px) solid $ibexa-white;
+        background: $ibexa-color-white;
+        border: calculateRem(1px) solid $ibexa-color-white;
         border-radius: calculateRem(4px);
         transition: all 0.2s ease-in;
         pointer-events: none;
diff --git a/src/bundle/Resources/public/scss/_typography.scss b/src/bundle/Resources/public/scss/_typography.scss
index 15c1fcb6e2..988a1f7a7d 100644
--- a/src/bundle/Resources/public/scss/_typography.scss
+++ b/src/bundle/Resources/public/scss/_typography.scss
@@ -2,7 +2,7 @@
     h2 {
         &.text-muted {
             font-size: 1.125rem;
-            color: $ibexa-color-base-dark;
+            color: $ibexa-color-dark-300;
         }
     }
 }
@@ -12,7 +12,7 @@
 
     .card-header {
         border: none;
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
 
         h2 {
             font-size: calculateRem(16px);
diff --git a/src/bundle/Resources/public/scss/_user-menu.scss b/src/bundle/Resources/public/scss/_user-menu.scss
index 57003e8a7a..3bef826f1d 100644
--- a/src/bundle/Resources/public/scss/_user-menu.scss
+++ b/src/bundle/Resources/public/scss/_user-menu.scss
@@ -21,11 +21,11 @@
                 height: 0;
                 border-left: calculateRem(5px) solid transparent;
                 border-right: calculateRem(5px) solid transparent;
-                border-top: calculateRem(5px) solid $ibexa-color-base-dark;
+                border-top: calculateRem(5px) solid $ibexa-color-dark-300;
             }
 
             &--active {
-                background-color: $ibexa-white;
+                background-color: $ibexa-color-white;
                 box-shadow: 0 calculateRem(2px) calculateRem(6px) rgba(0, 0, 0, 0.15);
 
                 &:before {
@@ -49,7 +49,7 @@
             position: absolute;
             padding-top: calculateRem(6px);
             right: 0;
-            background-color: $ibexa-white;
+            background-color: $ibexa-color-white;
             box-shadow: 0 calculateRem(5px) calculateRem(6px) rgba(0, 0, 0, 0.15);
             transform-origin: top center;
             white-space: nowrap;
@@ -67,11 +67,11 @@
             padding-right: calculateRem(28px);
             cursor: pointer;
             font-size: calculateRem(14px);
-            color: $ibexa-color-font;
+            color: $ibexa-color-dark;
 
             &--dark {
                 .nav-link {
-                    color: $ibexa-color-font;
+                    color: $ibexa-color-dark;
                     text-decoration: none;
                 }
             }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss
index 5000156636..f4a1ebd217 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_base-field.scss
@@ -47,7 +47,7 @@
 .ibexa-content-edit {
     .ibexa-field-edit {
         padding: calculateRem(24px) 0;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light;
 
         &__label-wrapper {
             flex: 0 0 calculateRem(200px);
@@ -56,13 +56,13 @@
                 margin: 0;
                 font-size: calculateRem(16px);
                 font-weight: normal;
-                color: $ibexa-color-font-pale;
+                color: $ibexa-color-dark-300;
             }
         }
 
         .ibexa-data-source__label {
             margin-bottom: calculateRem(10px);
-            color: $ibexa-color-font-pale;
+            color: $ibexa-color-dark-300;
         }
 
         &__data {
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss b/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss
index eca556a1ec..e3bd8819c4 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_base-preview.scss
@@ -44,18 +44,18 @@
 
             &__message {
                 &--main {
-                    color: $ibexa-color-base-dark;
+                    color: $ibexa-color-dark-300;
                     box-sizing: border-box;
                     cursor: auto;
                     font-weight: bold;
                 }
 
                 &--separator {
-                    color: $ibexa-color-base-dark;
+                    color: $ibexa-color-dark-300;
                 }
 
                 &--filesize {
-                    color: $ibexa-color-base-dark;
+                    color: $ibexa-color-dark-300;
                     font-size: $ibexa-text-font-size-small;
                 }
             }
@@ -109,7 +109,7 @@
                     right: calculateRem(8px);
                     border-radius: $ibexa-border-radius;
                     padding: calculateRem(4px);
-                    background-color: rgba($ibexa-white, 0.75);
+                    background-color: rgba($ibexa-color-white, 0.75);
                     z-index: 1;
                 }
             }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezimageasset.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezimageasset.scss
index 3e6ad98eaa..2211e3f6c9 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezimageasset.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezimageasset.scss
@@ -40,7 +40,7 @@
         .ibexa-icon {
             width: calculateRem(32px);
             height: calculateRem(32px);
-            fill: $ibexa-black;
+            fill: $ibexa-color-black;
         }
     }
 }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezkeyword.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezkeyword.scss
index d15995d4f7..1ce26d0b36 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezkeyword.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezkeyword.scss
@@ -43,7 +43,7 @@
     .taggify__btn--remove {
         position: absolute;
         right: 0;
-        color: $ibexa-color-font;
+        color: $ibexa-color-dark;
         background: none;
         border: 0 none;
     }
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_eznoneditable.scss b/src/bundle/Resources/public/scss/fieldType/edit/_eznoneditable.scss
index 3397b74d40..08ecea1df6 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_eznoneditable.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_eznoneditable.scss
@@ -1,6 +1,6 @@
 .ibexa-field-edit--eznoneditable {
     padding: calculateRem(24px) 0;
-    border-bottom: calculateRem(1px) solid $ibexa-color-base;
+    border-bottom: calculateRem(1px) solid $ibexa-color-light;
 
     .col-form-label {
         margin: 0;
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezurl.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezurl.scss
index a5d07afef4..34b77ded9d 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezurl.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezurl.scss
@@ -1,6 +1,6 @@
 .ibexa-field-edit--ezurl {
     .ibexa-field-edit__data {
-        background-color: $ibexa-white;
+        background-color: $ibexa-color-white;
     }
 
     .ibexa-data-source {
diff --git a/src/bundle/Resources/public/scss/fieldType/edit/_ezuser.scss b/src/bundle/Resources/public/scss/fieldType/edit/_ezuser.scss
index ded9ff8cd2..3646e578cc 100644
--- a/src/bundle/Resources/public/scss/fieldType/edit/_ezuser.scss
+++ b/src/bundle/Resources/public/scss/fieldType/edit/_ezuser.scss
@@ -1,6 +1,6 @@
 .ibexa-field-edit--ezuser {
     .ibexa-field-edit__data {
-        background: $ibexa-white;
+        background: $ibexa-color-white;
 
         .ibexa-data-source {
             max-width: 80%;
diff --git a/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss b/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss
index cea8ceecde..892ca0cfb3 100644
--- a/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss
+++ b/src/bundle/Resources/public/scss/fieldType/preview/_ezselection.scss
@@ -9,7 +9,7 @@
     .ibexa-selection__item {
         display: inline-block;
         padding: calculateRem(8px) calculateRem(16px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         border-radius: calculateRem(4px);
         margin: calculateRem(4px);
         min-height: calculateRem(40px);
@@ -19,7 +19,7 @@
 .ibexa-field-preview--ezselection-single {
     display: inline-block;
     padding: calculateRem(8px) calculateRem(16px);
-    background: $ibexa-white;
+    background: $ibexa-color-white;
     border-radius: calculateRem(4px);
     margin: calculateRem(4px);
 }
diff --git a/src/bundle/Resources/public/scss/mixins/_image-preview.scss b/src/bundle/Resources/public/scss/mixins/_image-preview.scss
index 8e7a2e89ce..6d4dff7003 100644
--- a/src/bundle/Resources/public/scss/mixins/_image-preview.scss
+++ b/src/bundle/Resources/public/scss/mixins/_image-preview.scss
@@ -33,11 +33,11 @@
                 align-items: center;
                 display: block;
                 margin-top: 0;
-                background: $ibexa-color-base-dark;
+                background: $ibexa-color-dark-300;
 
                 &:hover,
                 &:focus {
-                    background: darken($ibexa-color-base-dark, 15%);
+                    background: darken($ibexa-color-dark-300, 15%);
                 }
             }
         }
diff --git a/src/bundle/Resources/public/scss/mixins/_inputs.scss b/src/bundle/Resources/public/scss/mixins/_inputs.scss
index bbd7fb77f1..9b7c63b783 100644
--- a/src/bundle/Resources/public/scss/mixins/_inputs.scss
+++ b/src/bundle/Resources/public/scss/mixins/_inputs.scss
@@ -34,7 +34,7 @@
         display: flex;
         width: calculateRem(14px);
         height: calculateRem(14px);
-        color: $ibexa-white;
+        color: $ibexa-color-white;
         background: $ibexa-color-danger;
         border-radius: 50%;
         justify-content: center;
diff --git a/src/bundle/Resources/public/scss/mixins/_modals.scss b/src/bundle/Resources/public/scss/mixins/_modals.scss
index 56a4b58808..de05736c18 100644
--- a/src/bundle/Resources/public/scss/mixins/_modals.scss
+++ b/src/bundle/Resources/public/scss/mixins/_modals.scss
@@ -23,7 +23,7 @@
 
 @mixin modal-subtitle {
     display: inline-block;
-    color: $ibexa-color-font-pale;
+    color: $ibexa-color-dark-300;
     font-size: calculateRem(14px);
     font-weight: 400;
     position: relative;
@@ -48,7 +48,7 @@
 }
 
 @mixin modal-body() {
-    background: $ibexa-white;
+    background: $ibexa-color-white;
     white-space: normal;
 }
 
diff --git a/src/bundle/Resources/public/scss/mixins/_togglers.scss b/src/bundle/Resources/public/scss/mixins/_togglers.scss
index df70d3ab9c..d307baf95d 100644
--- a/src/bundle/Resources/public/scss/mixins/_togglers.scss
+++ b/src/bundle/Resources/public/scss/mixins/_togglers.scss
@@ -1,7 +1,7 @@
 @mixin toggler-wrapper {
     position: relative;
     display: flex;
-    border: calculateRem(1px) solid $ibexa-color-font-pale;
+    border: calculateRem(1px) solid $ibexa-color-dark-300;
     border-radius: $ibexa-border-radius;
     margin-right: calculateRem(10px);
     font-size: calculateRem(14px);
@@ -30,16 +30,16 @@
     border-radius: 0;
 
     .ibexa-icon {
-        fill: $ibexa-color-base-dark;
+        fill: $ibexa-color-dark-300;
     }
 }
 
 @mixin toggler-selected-btn {
-    color: $ibexa-color-font-light;
-    background: $ibexa-color-base-dark;
+    color: $ibexa-color-white;
+    background: $ibexa-color-dark-300;
     transition: transform 0.3s $ibexa-admin-transition;
 
     .ibexa-icon {
-        fill: $ibexa-white;
+        fill: $ibexa-color-white;
     }
 }
diff --git a/src/bundle/Resources/public/scss/mixins/_type-icon.scss b/src/bundle/Resources/public/scss/mixins/_type-icon.scss
index a4f3aaedd3..75e380aed2 100644
--- a/src/bundle/Resources/public/scss/mixins/_type-icon.scss
+++ b/src/bundle/Resources/public/scss/mixins/_type-icon.scss
@@ -9,13 +9,13 @@
     background: $ibexa-color-primary;
 
     .ibexa-icon {
-        fill: $ibexa-white;
+        fill: $ibexa-color-white;
         width: calculateRem(16px);
         height: calculateRem(16px);
     }
-} 
+}
 
 @mixin type-icon-read {
-    fill: $ibexa-color-base-light;
-    background: $ibexa-color-base-dark;
+    fill: $ibexa-color-light-200;
+    background: $ibexa-color-light-200;
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/common/thumbnail.scss b/src/bundle/Resources/public/scss/ui/modules/common/thumbnail.scss
index 7837dbbfdc..86a6c01143 100644
--- a/src/bundle/Resources/public/scss/ui/modules/common/thumbnail.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/common/thumbnail.scss
@@ -7,7 +7,7 @@
         left: 0;
         width: calculateRem(30px);
         height: calculateRem(30px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         display: flex;
         align-items: center;
         justify-content: center;
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss
index 425bcce4a8..c4a006bef8 100644
--- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_drop.area.scss
@@ -17,7 +17,7 @@
         }
 
         &--filesize {
-            color: $ibexa-color-font-pale;
+            color: $ibexa-color-dark-300;
             font-size: $ibexa-text-font-size-medium;
             margin: calculateRem(12px) 0 calculateRem(44px);
         }
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
index 8d894da36f..bddf4aeed7 100644
--- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.item.scss
@@ -1,6 +1,6 @@
 .c-upload-list-item {
     display: flex;
-    background: $ibexa-white;
+    background: $ibexa-color-white;
     padding: calculateRem(8px) 0;
     min-height: calculateRem(60px);
 
@@ -44,7 +44,7 @@
     }
 
     &__size {
-        color: $ibexa-color-base-dark;
+        color: $ibexa-color-dark-300;
         font-size: $ibexa-text-font-size-medium;
     }
 
@@ -64,10 +64,10 @@
         }
 
         &--success {
-            color: $ibexa-color-positive;
+            color: $ibexa-color-success;
 
             .ibexa-icon {
-                fill: $ibexa-color-positive;
+                fill: $ibexa-color-success;
             }
         }
     }
diff --git a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss
index 11ebd3ad66..d1ee3b0105 100644
--- a/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/muti-file-upload/_upload.popup.scss
@@ -6,7 +6,7 @@
     left: 0;
     height: 100vh;
     width: 100vw;
-    color: $ibexa-color-font;
+    color: $ibexa-color-dark;
 
     .c-tooltip-popup {
         width: 100%;
diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss
index 1bb704c221..41fb6909b2 100644
--- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss
@@ -2,7 +2,7 @@
     margin-top: calculateRem(24px);
     margin-bottom: calculateRem(24px);
     padding: calculateRem(16px);
-    background: $ibexa-white;
+    background: $ibexa-color-white;
     border-radius: $ibexa-border-radius;
 
     .table .ibexa-table__header-cell {
@@ -27,7 +27,7 @@
         content: '';
         position: absolute;
         z-index: 999;
-        background: rgba($ibexa-black, 0.35);
+        background: rgba($ibexa-color-black, 0.35);
         top: 0;
         left: 0;
         right: 0;
diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_no.items.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_no.items.scss
index bcfccbec0c..7eea19469f 100644
--- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_no.items.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_no.items.scss
@@ -2,5 +2,5 @@
     padding: 0 calculateRem(32px);
     font-style: italic;
     font-size: $ibexa-text-font-size-medium;
-    color: $ibexa-black;
+    color: $ibexa-color-black;
 }
diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.item.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.item.scss
index 947174b7a0..b855f96a82 100644
--- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.item.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.item.scss
@@ -32,7 +32,7 @@
             left: 0;
             width: calculateRem(30px);
             line-height: 0;
-            background: $ibexa-white;
+            background: $ibexa-color-white;
         }
 
         &--name {
@@ -41,7 +41,7 @@
             left: calculateRem(48px);
             padding-left: 0;
             padding-right: calculateRem(5px);
-            background: $ibexa-white;
+            background: $ibexa-color-white;
         }
 
         &--priority {
@@ -54,7 +54,7 @@
             right: 0;
             width: calculateRem(70px);
             padding: 0;
-            background: $ibexa-white;
+            background: $ibexa-color-white;
         }
 
         &--toggler {
@@ -125,7 +125,7 @@
         &--edit {
             text-align: center;
             cursor: pointer;
-            color: $ibexa-white;
+            color: $ibexa-color-white;
             display: inline-block;
 
             .c-table-view-item__btn-inner {
@@ -156,7 +156,7 @@
         .c-table-view-item {
             &__cell,
             &__priority-actions {
-                background: $ibexa-color-base-light;
+                background: $ibexa-color-light-200;
             }
         }
     }
diff --git a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.scss b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.scss
index d5ed743070..e118fd45dd 100644
--- a/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/sub-items-list/_table.view.scss
@@ -27,14 +27,14 @@
 
     &__columns-toggler-panel {
         border-radius: calculateRem(4px);
-        background: $ibexa-white;
+        background: $ibexa-color-white;
         position: absolute;
         z-index: 10;
         padding: calculateRem(4px) calculateRem(14px);
         top: calculateRem(36px);
         right: calculateRem(17px);
         font-weight: normal;
-        box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-black, 0.45);
+        box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-color-black, 0.45);
     }
 
     &__columns-toggler-list {
@@ -84,7 +84,7 @@
             height: calculateRem(43px);
             width: calculateRem(30px);
             padding-left: calculateRem(16px);
-            background: $ibexa-white;
+            background: $ibexa-color-white;
         }
 
         &--name {
@@ -92,7 +92,7 @@
             z-index: 1;
             left: calculateRem(48px);
             padding-left: 0;
-            background: $ibexa-white;
+            background: $ibexa-color-white;
         }
 
         &--actions {
@@ -100,7 +100,7 @@
             right: 0;
             width: calculateRem(70px);
             padding: 0;
-            background: $ibexa-white;
+            background: $ibexa-color-white;
             z-index: 1;
         }
 
@@ -113,8 +113,8 @@
     }
 
     &__head {
-        border-top: calculateRem(1px) solid $ibexa-color-base-light;
-        border-bottom: calculateRem(1px) solid $ibexa-color-base-light;
+        border-top: calculateRem(1px) solid $ibexa-color-light-200;
+        border-bottom: calculateRem(1px) solid $ibexa-color-light-200;
     }
 
     &__body {