diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index c01b7d2cc..22e0214ff 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -11,7 +11,6 @@ $color-primary-inverse: rgb(241, 253, 244);
 $color-secondary: rgb(0, 142, 230);
 $color-secondary-active: rgb(10, 161, 255);
 $color-secondary-inverse: rgb(240, 249, 255);
-$color-third: rgb(160,103,255);
 $color-success: rgb(23, 181, 63);
 $color-success-active: rgb(26, 203, 71);
 $color-success-inverse: rgb(241, 253, 244);
@@ -91,6 +90,9 @@ $background-color-primary-inverse: rgb(241, 253, 244);
 $background-color-secondary: rgb(0, 142, 230);
 $background-color-secondary-active: rgb(10, 161, 255);
 $background-color-secondary-inverse: rgb(240, 249, 255);
+$background-color-third: rgb(126, 82, 204);
+$background-color-third-active: rgb(160, 103, 255);
+$background-color-third-inverse: rgb(239, 230, 255);
 $background-color-success: rgb(23, 181, 63);
 $background-color-success-active: rgb(26, 203, 71);
 $background-color-success-inverse: rgb(241, 253, 244);
@@ -396,3 +398,12 @@ $color-toast-orange: $color-warning;
 $color-toast-yellow: $color-yellow;
 $color-toast-blue: $color-secondary;
 $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;
\ No newline at end of file
diff --git a/webapp/components/Ribbon/index.vue b/webapp/components/Ribbon/index.vue
index 89b84e817..8595c0f5d 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: $background-color-secondary-active;
+  background-color: $color-ribbon-article-active;
   font-size: $font-size-x-small;
   font-weight: $font-weight-bold;
 
@@ -36,7 +36,7 @@ export default {
     bottom: -$size-ribbon;
     border-width: $border-size-large 4px $border-size-large $border-size-large;
     border-style: solid;
-    border-color: $background-color-secondary transparent transparent $background-color-secondary;
+    border-color: $color-ribbon-article transparent transparent $color-ribbon-article;
   }
 
   &.--pinned {
@@ -48,10 +48,10 @@ export default {
   }
 }
 .eventBg {
-  background-color: $color-third;
+  background-color: $color-ribbon-event-active;
 
   &::before {
-    border-color: $color-third transparent transparent $color-third;
+    border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
   }
 }
 </style>