diff --git a/src/bundle/Resources/public/scss/_custom.scss b/src/bundle/Resources/public/scss/_custom.scss
index 7ffedacb42..344a38a7d5 100644
--- a/src/bundle/Resources/public/scss/_custom.scss
+++ b/src/bundle/Resources/public/scss/_custom.scss
@@ -152,16 +152,16 @@ $ibexa-color-complementary-strong-300: #99b7be;
 $ibexa-color-complementary-strong-200: #ccdbde;
 $ibexa-color-complementary-strong-100: #e5edee;
 
-$ibexa-color-navigation: #306cbe;
-$ibexa-color-navigation-900: #10243f;
-$ibexa-color-navigation-800: #18365f;
-$ibexa-color-navigation-700: #20487f;
-$ibexa-color-navigation-600: #285a9e;
-$ibexa-color-navigation-500: #4a83d1;
-$ibexa-color-navigation-400: #6e9cda;
-$ibexa-color-navigation-300: #92b5e4;
-$ibexa-color-navigation-200: #b7cded;
-$ibexa-color-navigation-100: #dbe6f6;
+$ibexa-color-complementary-primary: #306cbe;
+$ibexa-color-complementary-primary-900: #10243f;
+$ibexa-color-complementary-primary-800: #18365f;
+$ibexa-color-complementary-primary-700: #20487f;
+$ibexa-color-complementary-primary-600: #285a9e;
+$ibexa-color-complementary-primary-500: #4a83d1;
+$ibexa-color-complementary-primary-400: #6e9cda;
+$ibexa-color-complementary-primary-300: #92b5e4;
+$ibexa-color-complementary-primary-200: #b7cded;
+$ibexa-color-complementary-primary-100: #dbe6f6;
 
 // Ibexa fonts - part 1
 $ibexa-font-family:
diff --git a/src/bundle/Resources/public/scss/_custom.tooltip.scss b/src/bundle/Resources/public/scss/_custom.tooltip.scss
index dd42cbe480..2eae1a9017 100644
--- a/src/bundle/Resources/public/scss/_custom.tooltip.scss
+++ b/src/bundle/Resources/public/scss/_custom.tooltip.scss
@@ -113,7 +113,7 @@
         .ibexa-tooltip {
             &__inner {
                 color: $ibexa-color-dark;
-                background-color: $ibexa-color-navigation-400;
+                background-color: $ibexa-color-complementary-primary-400;
                 border-color: transparent;
                 box-shadow: 0 calculateRem(2px) calculateRem(8px) rgba($ibexa-color-dark, 0.15);
             }
@@ -124,7 +124,7 @@
             &[data-popper-placement='top'] {
                 .ibexa-tooltip__arrow {
                     &::before {
-                        border-top-color: $ibexa-color-navigation-400;
+                        border-top-color: $ibexa-color-complementary-primary-400;
                     }
                 }
             }
@@ -133,7 +133,7 @@
             &[data-popper-placement='right'] {
                 .ibexa-tooltip__arrow {
                     &::before {
-                        border-right-color: $ibexa-color-navigation-400;
+                        border-right-color: $ibexa-color-complementary-primary-400;
                     }
                 }
             }
@@ -142,7 +142,7 @@
             &[data-popper-placement='bottom'] {
                 .ibexa-tooltip__arrow {
                     &::before {
-                        border-bottom-color: $ibexa-color-navigation-400;
+                        border-bottom-color: $ibexa-color-complementary-primary-400;
                     }
                 }
             }
@@ -151,7 +151,7 @@
             &[data-popper-placement='left'] {
                 .ibexa-tooltip__arrow {
                     &::before {
-                        border-left-color: $ibexa-color-navigation-400;
+                        border-left-color: $ibexa-color-complementary-primary-400;
                     }
                 }
             }
diff --git a/src/bundle/Resources/public/scss/_main-menu.scss b/src/bundle/Resources/public/scss/_main-menu.scss
index 08c449efab..57b17304e9 100644
--- a/src/bundle/Resources/public/scss/_main-menu.scss
+++ b/src/bundle/Resources/public/scss/_main-menu.scss
@@ -66,7 +66,7 @@
             .ibexa-main-menu__tooltip-trigger,
             .ibexa-main-menu__toggler {
                 .ibexa-icon {
-                    fill: $ibexa-color-navigation-400;
+                    fill: $ibexa-color-complementary-primary-400;
                 }
 
                 &:focus {
@@ -75,7 +75,7 @@
 
                 &:hover {
                     .ibexa-icon {
-                        fill: $ibexa-color-navigation-200;
+                        fill: $ibexa-color-complementary-primary-200;
                     }
                 }
             }
@@ -248,11 +248,11 @@
 
             .ibexa-main-menu {
                 &__item-icon {
-                    fill: $ibexa-color-navigation-400;
+                    fill: $ibexa-color-complementary-primary-400;
                 }
 
                 &__item-text-column {
-                    color: $ibexa-color-navigation-400;
+                    color: $ibexa-color-complementary-primary-400;
 
                     &--group {
                         color: $ibexa-color-light-700;
@@ -262,16 +262,16 @@
         }
 
         &.active {
-            color: $ibexa-color-navigation-200;
-            background-color: $ibexa-color-navigation-700;
+            color: $ibexa-color-complementary-primary-200;
+            background-color: $ibexa-color-complementary-primary-700;
 
             .ibexa-main-menu {
                 &__item-icon {
-                    fill: $ibexa-color-navigation-200;
+                    fill: $ibexa-color-complementary-primary-200;
                 }
 
                 &__item-text-column {
-                    color: $ibexa-color-navigation-200;
+                    color: $ibexa-color-complementary-primary-200;
                 }
             }
         }
diff --git a/src/bundle/Resources/public/scss/_popup-menu.scss b/src/bundle/Resources/public/scss/_popup-menu.scss
index 30637c14a1..5ecf0ecce4 100644
--- a/src/bundle/Resources/public/scss/_popup-menu.scss
+++ b/src/bundle/Resources/public/scss/_popup-menu.scss
@@ -114,15 +114,15 @@
             color: $ibexa-color-white;
 
             &:hover {
-                color: $ibexa-color-navigation-400;
+                color: $ibexa-color-complementary-primary-400;
                 background-color: transparent;
             }
 
             &--current {
                 &,
                 &:hover {
-                    color: $ibexa-color-navigation-200;
-                    background-color: $ibexa-color-navigation-700;
+                    color: $ibexa-color-complementary-primary-200;
+                    background-color: $ibexa-color-complementary-primary-700;
                 }
             }
         }