diff --git a/webapp/assets/_new/styles/export.scss b/webapp/assets/_new/styles/export.scss
index e29c014e2..c8f16b750 100644
--- a/webapp/assets/_new/styles/export.scss
+++ b/webapp/assets/_new/styles/export.scss
@@ -20,6 +20,10 @@
     backgroundColorPrimary: $background-color-primary;
   
     colorNeutral30: $color-neutral-30;
+
+    chatSidemenuBg: $chat-sidemenu-bg;
+    chatSidemenuBackgroundOver: $chat-sidemenu-background-over;
+    chatSidemenuBackgroundActive: $chat-sidemenu-background-active;
     
     chatMessageColor: $chat-message-color;
     
@@ -34,4 +38,8 @@
 
     chatRoomBackgroundCounterBadge: $chat-room-background-counter-badge;
     chatRoomColorCounterBadge: $chat-room-color-counter-badge;
+
+    chatIconAdd: $chat-icon-add;
+    chatIconSend: $chat-icon-send;
+    chatIconEmoji: $chat-icon-emoji;
   }
\ No newline at end of file
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index dd3a042d1..578484355 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -403,10 +403,12 @@ $color-toast-green: $color-success;
  * @tokens Ribbon Color
  */
 
-$color-ribbon-event: $background-color-third;
-$color-ribbon-event-active: $background-color-third-active;
-$color-ribbon-article: $background-color-secondary;
-$color-ribbon-article-active: $background-color-secondary-active;
+$color-ribbon-announcement: $background-color-warning;
+$color-ribbon-announcement-shadow: color.adjust($color-ribbon-announcement, $lightness: -20%,);
+$color-ribbon-article: $background-color-secondary-active;
+$color-ribbon-article-shadow: color.adjust($color-ribbon-article, $lightness: -20%);
+$color-ribbon-event: $background-color-third-active;
+$color-ribbon-event-shadow: color.adjust($color-ribbon-event, $lightness: -20%);
 
 /**
  * @tokens Chat Color
@@ -415,10 +417,15 @@ $color-ribbon-article-active: $background-color-secondary-active;
 $chat-message-bg-me: $color-primary-light;
 $chat-message-color: $text-color-base;
 $chat-message-bg-others: $color-neutral-80;
-$chat-sidemenu-bg: $color-secondary-active;
+$chat-sidemenu-bg: white;
+$chat-sidemenu-background-over: '#f6f6f6';
+$chat-sidemenu-background-active: $color-primary-light;
 $chat-new-message-color: $color-secondary-active;
 $chat-message-timestamp: $text-color-soft;
 $chat-message-checkmark-seen: $text-color-secondary;
 $chat-message-checkmark: $text-color-soft;
 $chat-room-color-counter-badge: $text-color-inverse;
 $chat-room-background-counter-badge: $color-secondary;
+$chat-icon-add: $color-primary;
+$chat-icon-send: $color-primary;
+$chat-icon-emoji: $color-primary;
diff --git a/webapp/assets/_new/styles/uses.scss b/webapp/assets/_new/styles/uses.scss
new file mode 100644
index 000000000..37ad2e69c
--- /dev/null
+++ b/webapp/assets/_new/styles/uses.scss
@@ -0,0 +1,4 @@
+// we can not use the command '@use' in 'tokens.scss' because of the compiler error 'SassError: @use rules must be written before any other rules.'
+// therefore we integrate this file at first in 'nuxt.config.js'
+
+@use 'sass:color';
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index ac583ed4b..d19f0bf95 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -168,10 +168,10 @@ export default {
     background-color: $color-neutral-90;
   }
   .logout-link {
-    color: $text-color-base;
+    color: $text-color-danger;
     padding-top: $space-xx-small;
     &:hover {
-      color: $text-color-link-active;
+      color: color.adjust($text-color-danger, $lightness: -10%);
     }
   }
 }
diff --git a/webapp/components/LoginButton/LoginButton.vue b/webapp/components/LoginButton/LoginButton.vue
index 39f0fa4ae..c2c154f34 100644
--- a/webapp/components/LoginButton/LoginButton.vue
+++ b/webapp/components/LoginButton/LoginButton.vue
@@ -40,7 +40,7 @@ export default {
     background-color: $color-neutral-90;
   }
   .login-link {
-    color: $text-color-base;
+    color: $text-color-link;
     padding-top: $space-xx-small;
     &:hover {
       color: $text-color-link-active;
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
index 8595c0f5d..8011238fb 100644
--- a/webapp/components/Ribbon/index.vue
+++ b/webapp/components/Ribbon/index.vue
@@ -25,7 +25,7 @@ export default {
   padding: $size-ribbon $size-ribbon;
   border-radius: $border-radius-small 0 0 $border-radius-small;
   color: $color-neutral-100;
-  background-color: $color-ribbon-article-active;
+  background-color: $color-ribbon-article;
   font-size: $font-size-x-small;
   font-weight: $font-weight-bold;
 
@@ -36,22 +36,23 @@ export default {
     bottom: -$size-ribbon;
     border-width: $border-size-large 4px $border-size-large $border-size-large;
     border-style: solid;
-    border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
+    border-color: $color-ribbon-article-shadow transparent transparent $color-ribbon-article-shadow;
   }
 
   &.--pinned {
-    background-color: $color-warning;
+    background-color: $color-ribbon-announcement;
 
     &::before {
-      border-color: $color-warning transparent transparent $color-warning;
+      border-color: $color-ribbon-announcement-shadow transparent transparent
+        $color-ribbon-announcement-shadow;
     }
   }
 }
 .eventBg {
-  background-color: $color-ribbon-event-active;
+  background-color: $color-ribbon-event;
 
   &::before {
-    border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
+    border-color: $color-ribbon-event-shadow transparent transparent $color-ribbon-event-shadow;
   }
 }
 </style>
diff --git a/webapp/components/_new/generic/BaseCard/BaseCard.vue b/webapp/components/_new/generic/BaseCard/BaseCard.vue
index 86b1a6652..e6fcd5e49 100644
--- a/webapp/components/_new/generic/BaseCard/BaseCard.vue
+++ b/webapp/components/_new/generic/BaseCard/BaseCard.vue
@@ -64,7 +64,7 @@ export default {
   }
 
   &.--highlight {
-    border: $border-size-base solid $color-warning;
+    border: $border-size-base solid $color-ribbon-announcement;
   }
 
   &.--wide-content {
diff --git a/webapp/constants/chat.js b/webapp/constants/chat.js
index c278dfd62..d471b85b8 100644
--- a/webapp/constants/chat.js
+++ b/webapp/constants/chat.js
@@ -44,9 +44,9 @@ const STYLE = {
     },
 
     sidemenu: {
-      background: '#fff',
-      backgroundHover: '#f6f6f6',
-      backgroundActive: styleData.colorPrimaryLight,
+      background: styleData.chatSidemenuBg,
+      backgroundHover: styleData.chatSidemenuBackgroundOver,
+      backgroundActive: styleData.chatSidemenuBackgroundActive,
       colorActive: '#1976d2',
       borderColorSearch: '#e1e5e8',
     },
@@ -114,12 +114,12 @@ const STYLE = {
     },
 
     emoji: {
-      background: '#fff',
+      background: 'white',
     },
 
     icons: {
       search: '#9ca6af',
-      add: styleData.colorPrimary,
+      add: styleData.chatIconAdd,
       toggle: styleData.colorNeutral30,
       menu: styleData.colorNeutral30,
       close: '#9ca6af',
@@ -128,9 +128,9 @@ const STYLE = {
       paperclip: styleData.colorPrimary,
       closeOutline: '#000',
       closePreview: '#fff',
-      send: styleData.colorPrimary,
+      send: styleData.chatIconSend,
       sendDisabled: '#9ca6af',
-      emoji: styleData.colorPrimary,
+      emoji: styleData.chatIconEmoji,
       emojiReaction: 'rgba(0, 0, 0, 0.3)',
       document: styleData.colorPrimary,
       pencil: '#9e9e9e',
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 9adacd4cc..b3bbdfc2d 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -102,6 +102,7 @@ export default {
    */
   styleResources: {
     scss: [
+      '~assets/_new/styles/uses.scss',
       styleguideStyles,
       '~assets/_new/styles/tokens.scss',
       '~assets/styles/imports/_branding.scss',