diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 863e0e0b7..22e0214ff 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -90,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);
@@ -395,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 ea7fd273a..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-success-active;
+  background-color: $color-ribbon-event-active;
 
   &::before {
-    border-color: $color-success-active transparent transparent $color-success-active;
+    border-color: $color-ribbon-event transparent transparent $color-ribbon-event;
   }
 }
 </style>
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 45a241957..70969ac8c 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -716,7 +716,7 @@
       "unpin": "Unpin post",
       "unpinnedSuccessfully": "Post unpinned successfully!"
     },
-    "name": "Post",
+    "name": "Article",
     "pinned": "Announcement",
     "takeAction": {
       "name": "Take action"