diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss
index 7c4731d685..fdf762c308 100644
--- a/src/components/Attachment/styling/Attachment.scss
+++ b/src/components/Attachment/styling/Attachment.scss
@@ -2,10 +2,9 @@
 
 .str-chat {
   /* The margin applied to every attachment in the attachment list */
-  --str-chat__attachment-margin: var(--str-chat__spacing-0_5);
-
-  /* The border radius used for the borders of the component */
-  --str-chat__attachment-list-border-radius: 0;
+  --str-chat__attachment-margin: var(--space-2)
+    /* The border radius used for the borders of the component */
+    --str-chat__attachment-list-border-radius: 0;
 
   /* The text/icon color of the component */
   --str-chat__attachment-list-color: var(--str-chat__text-color);
@@ -328,7 +327,7 @@
 
   .str-chat__gallery .str-chat__message-attachment--svg-image,
   .str-chat__message-attachment--image.str-chat__message-attachment--svg-image {
-    $padding: var(--str-chat__spacing-6);
+    $padding: var(--space-24);
     padding: $padding;
 
     img {
@@ -344,8 +343,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: var(--str-chat__spacing-2);
-    column-gap: var(--str-chat__spacing-4);
+    padding: var(--space-8);
+    column-gap: var(--space-16);
     //margin: var(--str-chat__attachment-margin);
 
     .str-chat__file-icon {
@@ -380,7 +379,7 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-      row-gap: var(--str-chat__spacing-0_5);
+      row-gap: var(--space-2);
       min-width: 0;
       line-height: var(--typography-line-height-tight);
 
@@ -390,7 +389,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        column-gap: var(--str-chat__spacing-2);
+        column-gap: var(--space-8);
         font-weight: var(--typography-font-weight-semi-bold);
         font-size: var(--typography-font-size-sm);
 
@@ -435,29 +434,12 @@
         color: var(--str-chat__voice-recording-attachment-widget-color);
       }
 
-      .str-chat__message-attachment-voice-recording-widget--first-row {
-        @include utils.ellipsis-text-parent;
-
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--str-chat__spacing-1);
-      }
-
       .str-chat__message-attachment-download-icon {
         svg {
           width: calc(var(--str-chat__spacing-px) * 24);
           height: calc(var(--str-chat__spacing-px) * 16);
         }
       }
-
-      .str-chat__message-attachment__voice-recording-widget__error-message {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        gap: var(--str-chat__spacing-1);
-      }
     }
 
     .str-chat__message-attachment__voice-recording-widget__right-section {
@@ -476,10 +458,6 @@
   .str-chat__message-attachment-download-icon {
     --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
   }
-
-  .str-chat__attachment-type-icon {
-    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
-  }
 }
 
 .str-chat__message.str-chat__message--has-single-attachment.str-chat__message--has-no-text {
diff --git a/src/components/Attachment/styling/CardAudio.scss b/src/components/Attachment/styling/CardAudio.scss
index a0d06c1a8a..4ddfd8593e 100644
--- a/src/components/Attachment/styling/CardAudio.scss
+++ b/src/components/Attachment/styling/CardAudio.scss
@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__message-attachment-card--audio {
   .str-chat__message-attachment-card--content {
     padding: 0;
diff --git a/src/components/Attachment/styling/Geolocation.scss b/src/components/Attachment/styling/Geolocation.scss
index bd19975f5d..d94ce34913 100644
--- a/src/components/Attachment/styling/Geolocation.scss
+++ b/src/components/Attachment/styling/Geolocation.scss
@@ -93,7 +93,7 @@
 
       .str-chat__message-attachment-geolocation__status--active-until {
         text-transform: lowercase;
-        font: var(--str-chat__caption-text);
+        font: var(--str-chat__metadata-emphasis-text);
       }
     }
   }
diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss
index cb65b3044e..5e9356a523 100644
--- a/src/components/Attachment/styling/Giphy.scss
+++ b/src/components/Attachment/styling/Giphy.scss
@@ -1,4 +1,4 @@
-@use '../../../styling/utils';
+@use '../../../styling/utils' as utils;
 
 .str-chat {
   /* The height of GIFs */
diff --git a/src/components/Attachment/styling/ModalGallery.scss b/src/components/Attachment/styling/ModalGallery.scss
index ac73e281ed..40fd53b48c 100644
--- a/src/components/Attachment/styling/ModalGallery.scss
+++ b/src/components/Attachment/styling/ModalGallery.scss
@@ -23,7 +23,7 @@
       grid-template-rows: 50% 50%;
       overflow: hidden;
       border-radius: var(--radius-lg);
-      gap: var(--str-chat__spacing-0_5);
+      gap: var(--space-2);
       width: $max-width;
       max-width: $max-width;
       // CDN resize requires height/max-height to be present on the img element, this rule ensures that
diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss
index cf206fcc85..999af4be2c 100644
--- a/src/components/Avatar/styling/Avatar.scss
+++ b/src/components/Avatar/styling/Avatar.scss
@@ -27,7 +27,8 @@
     height: 100%;
   }
 
-  .str-chat__icon--person {
+  // people icon for avatars without images and initials
+  .str-chat__icon {
     width: var(--avatar-icon-size);
     height: var(--avatar-icon-size);
     stroke-width: var(--avatar-icon-stroke-width);
diff --git a/src/components/Channel/styling/Channel.scss b/src/components/Channel/styling/Channel.scss
index 445d48cb13..c8a5f9b4b9 100644
--- a/src/components/Channel/styling/Channel.scss
+++ b/src/components/Channel/styling/Channel.scss
@@ -204,9 +204,6 @@
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-border-inline-end: none;
 
-  /* The icon color used when no channel is selected */
-  --str-chat__channel-empty-indicator-color: var(--str-chat__disabled-color);
-
   /* The base surface color behind the loading shimmer */
   --str-chat__channel-loading-state-color: var(--background-core-surface);
 }
diff --git a/src/components/ChannelList/styling/ChannelList.scss b/src/components/ChannelList/styling/ChannelList.scss
index 0a233d09d9..daa566489a 100644
--- a/src/components/ChannelList/styling/ChannelList.scss
+++ b/src/components/ChannelList/styling/ChannelList.scss
@@ -127,7 +127,7 @@
   .str-chat__channel-list-inner {
     height: 100%;
     overflow: hidden;
-    padding-bottom: var(--str-chat__spacing-2_5);
+    padding-bottom: calc(var(--space-8) + var(--space-2));
 
     .str-chat__channel-list-inner__main {
       height: 100%;
@@ -139,7 +139,7 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: var(--str-chat__spacing-3);
+        padding: calc(var(--space-8) + var(--space-4));
 
         p {
           color: var(--text-secondary);
@@ -152,17 +152,13 @@
   .str-chat__load-more-button {
     display: flex;
     justify-content: center;
-    margin: var(--str-chat__spacing-2) 0;
+    margin: var(--space-8) 0;
 
     .str-chat__load-more-button__button {
       @include utils.flex-row-center;
     }
   }
 
-  .stream-chat__paginated-list {
-    gap: 0;
-  }
-
   .str-chat__load-more-button__button {
     @include utils.component-layer-overrides('channel-list-load-more');
     width: 80%;
diff --git a/src/components/Dialog/styling/Alert.scss b/src/components/Dialog/styling/Alert.scss
index 9d9a474663..95d38dd086 100644
--- a/src/components/Dialog/styling/Alert.scss
+++ b/src/components/Dialog/styling/Alert.scss
@@ -33,7 +33,7 @@
       }
 
       .str-chat__alert-header__description {
-        font: var(--str-chat__caption-default-tex);
+        font: var(--str-chat__caption-default-text);
       }
     }
   }
diff --git a/src/components/Dialog/styling/Prompt.scss b/src/components/Dialog/styling/Prompt.scss
index 36962e8e62..33b0a9c9f8 100644
--- a/src/components/Dialog/styling/Prompt.scss
+++ b/src/components/Dialog/styling/Prompt.scss
@@ -25,7 +25,7 @@
     }
 
     .str-chat__prompt__header__description {
-      font: var(--str-chat__body-text);
+      font: var(--str-chat__caption-default-text);
       color: var(--text-secondary);
     }
 
@@ -39,10 +39,6 @@
     /* Vertical padding so focus rings (e.g. TextInput wrapper box-shadow) are not clipped by scrollable-y */
     padding: var(--spacing-xxs) var(--spacing-xl);
     @include utils.scrollable-y;
-
-    .str-chat__prompt__title {
-      margin-bottom: 1rem;
-    }
   }
 
   .str-chat__prompt__footer {
diff --git a/src/components/Dialog/styling/Viewer.scss b/src/components/Dialog/styling/Viewer.scss
index c9b421664f..d619a47ade 100644
--- a/src/components/Dialog/styling/Viewer.scss
+++ b/src/components/Dialog/styling/Viewer.scss
@@ -30,7 +30,7 @@
     }
 
     .str-chat__viewer__header__description {
-      font: var(--str-chat__body-text);
+      font: var(--str-chat__caption-default-text);
       color: var(--text-secondary);
     }
 
@@ -52,10 +52,6 @@
     padding: 0 var(--spacing-xl);
     flex: 1;
     min-height: 0;
-
-    .str-chat__viewer__title {
-      margin-bottom: 1rem;
-    }
   }
 
   .str-chat__viewer__footer {
diff --git a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss
index 51cd4ee68a..b02a71c3be 100644
--- a/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss
+++ b/src/components/EmptyStateIndicator/styling/EmptyStateIndicator.scss
@@ -1,10 +1,5 @@
 @use '../../../styling/utils';
 
-.str-chat {
-  /* The text color used when no channel is selected */
-  --str-chat__channel-empty-color: var(--text-secondary);
-}
-
 .str-chat__empty-channel {
   --str-chat-icon-color: var(--text-tertiary);
   display: flex;
@@ -26,11 +21,6 @@
     color: var(--str-chat-icon-color);
   }
 
-  .str-chat__empty-channel-notifications {
-    position: absolute;
-    inset-block-end: var(--str-chat__spacing-2);
-  }
-
   .str-chat__empty-channel-text {
     margin: 0;
     max-width: 230px;
diff --git a/src/components/Form/styling/SwitchField.scss b/src/components/Form/styling/SwitchField.scss
index f2617a8171..de4727bf2f 100644
--- a/src/components/Form/styling/SwitchField.scss
+++ b/src/components/Form/styling/SwitchField.scss
@@ -8,16 +8,6 @@
     var(--background-core-surface-subtle)
   );
   --str-chat__switch-field-border-radius: var(--radius-md);
-  --str-chat__switch-field-title-font-size: var(--typography-font-size-sm, 14px);
-  --str-chat__switch-field-title-font-weight: var(--typography-font-weight-medium, 500);
-  --str-chat__switch-field-title-line-height: var(--typography-line-height-tight, 16px);
-  --str-chat__switch-field-title-color: var(--text-primary, #1a1b25);
-  --str-chat__switch-field-description-font-size: var(--typography-font-size-xs, 12px);
-  --str-chat__switch-field-description-font-weight: var(
-    --typography-font-weight-regular,
-    400
-  );
-  --str-chat__switch-field-description-color: var(--text-tertiary, #687385);
   --str-chat__switch-field__track-off-bg: var(
     --control-toggle-switch-bg,
     var(--border-core-on-surface, #a3acba)
@@ -66,33 +56,6 @@
       cursor: pointer;
     }
 
-    &__content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-xxs, 4px);
-      min-width: 0;
-    }
-
-    &__title {
-      font-size: var(--str-chat__switch-field-title-font-size);
-      font-weight: var(--str-chat__switch-field-title-font-weight);
-      line-height: var(--str-chat__switch-field-title-line-height);
-      color: var(--str-chat__switch-field-title-color);
-    }
-
-    &__description {
-      font-size: var(--str-chat__switch-field-description-font-size);
-      font-weight: var(--str-chat__switch-field-description-font-weight);
-      line-height: var(--str-chat__switch-field-title-line-height);
-      color: var(--str-chat__switch-field-description-color);
-    }
-
-    &__expanded-content {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-    }
-
     &__switch {
       display: flex;
       align-items: center;
diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
index 18dfca69c2..d6ce0ce40d 100644
--- a/src/components/Message/styling/Message.scss
+++ b/src/components/Message/styling/Message.scss
@@ -6,11 +6,8 @@
 
   --str-chat__message-border-radius: 0;
   --str-chat__message-color: var(--str-chat__text-color);
-  --str-chat__message-error-message-color: var(--str-chat__danger-color);
-  --str-chat__message-secondary-color: var(--str-chat__text-low-emphasis-color);
   --str-chat__message-link-color: var(--chat-text-link);
   --str-chat__message-mention-color: var(--str-chat__primary-color);
-  --str-chat__message-replies-count-color: var(--str-chat__primary-color);
   --str-chat__message-background-color: transparent;
   --str-chat__message-highlighted-background-color: var(
     --str-chat__message-highlight-color
@@ -40,7 +37,7 @@
   --str-chat__message-bubble-border-inline-end: none;
   --str-chat__message-bubble-box-shadow: none;
 
-  --str-chat__blocked-message-border-radius: var(--str-chat__border-radius-md);
+  --str-chat__blocked-message-border-radius: var(--radius-md);
   --str-chat__blocked-message-color: var(--str-chat__text-low-emphasis-color);
   --str-chat__blocked-message-background-color: var(--str-chat__secondary-surface-color);
   --str-chat__blocked-message-border-block-start: none;
@@ -49,11 +46,6 @@
   --str-chat__blocked-message-border-inline-end: none;
   --str-chat__blocked-message-box-shadow: none;
 
-  --str-chat__translation-notice-color: var(--str-chat__text-low-emphasis-color);
-  --str-chat__translation-notice-active-background-color: var(
-    --str-chat__tertiary-surface-color
-  );
-
   --str-chat__message-reactions-host-offset-x: calc(var(--spacing-xs) * -1);
 
   /* Background color for pinned messages (Figma: background/core/highlight) */
@@ -89,12 +81,6 @@
   --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
   padding-inline: var(--str-chat__message-composer-padding);
 
-  &.str-chat__message-without-touch-support {
-    --str-chat-message-options-size: calc(
-      1 * var(--str-chat__message-options-button-size)
-    );
-  }
-
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
     display: flex;
@@ -180,7 +166,7 @@
 
 .str-chat__message-mention {
   color: var(--str-chat__message-mention-color);
-  font: var(--str-chat__body2-medium-text);
+  font: var(--str-chat__body-emphasis-text);
 }
 
 .str-chat__message {
@@ -268,7 +254,7 @@
   }
 
   &.str-chat__message--other {
-    column-gap: var(--str-chat__spacing-2);
+    column-gap: var(--space-8);
     justify-items: flex-start;
 
     &.str-chat__message--with-avatar {
@@ -315,7 +301,7 @@
   }
 
   &.str-chat__message--me {
-    column-gap: var(--str-chat__spacing-2);
+    column-gap: var(--space-8);
     justify-items: flex-end;
 
     &.str-chat__message--with-avatar {
@@ -379,7 +365,7 @@
       'message-bubble options'
       'replies replies';
     grid-template-columns: auto 1fr;
-    column-gap: var(--str-chat__spacing-2);
+    column-gap: var(--space-8);
     position: relative;
 
     .str-chat__message-reactions-host {
@@ -395,10 +381,6 @@
       }
     }
 
-    &:has(.str-chat__message-reactions--top) {
-      // maybe remove later
-    }
-
     &:has(.str-chat__message-reactions--bottom) {
       grid-template-areas:
         'message-bubble options'
@@ -452,32 +434,6 @@
     }
   }
 
-  .str-chat__translation-notice {
-    grid-area: translation-notice;
-
-    button {
-      cursor: pointer;
-      padding: 0.25rem 0;
-      margin: 0;
-      font: var(--str-chat__body2-text);
-      color: var(--str-chat__translation-notice-color);
-      border: none;
-      background: none;
-
-      &:active,
-      &:hover {
-        background: var(--str-chat__translation-notice-active-background-color);
-      }
-    }
-  }
-
-  .str-chat__custom-message-metadata {
-    grid-area: custom-metadata;
-    height: var(--size-24);
-    margin-block-start: var(--spacing-xxs);
-    color: var(--str-chat__message-secondary-color);
-  }
-
   .str-chat__message-metadata {
     grid-area: metadata;
     display: flex;
@@ -495,10 +451,6 @@
       margin-inline-end: var(--spacing-xxs);
     }
 
-    .str-chat__message-sender-name {
-      font: var(--str-chat__caption-medium-text);
-    }
-
     .str-chat__message-edited-indicator {
       margin-left: var(--spacing-xs);
     }
@@ -509,24 +461,11 @@
     text-align: right;
   }
 
-  .str-chat__message-is-thread-reply-button-wrapper {
-    grid-area: replies;
-
-    // TODO: "Thread reply" button styling
-  }
-
   .str-chat__message--blocked-inner {
     @include chat-bubble-spacing;
     @include utils.component-layer-overrides('blocked-message');
     // todo: once blocked message designs are ready remove this padding?
     padding-block: var(--spacing-xs);
-    font: var(--str-chat__body2-text);
-  }
-
-  // Fixes emoji display in Chrome on non-retina display (only detected in Angular SDK) https://bugs.chromium.org/p/chromium/issues/detail?id=596223
-  .str-chat__emoji-display-fix {
-    display: inline-block;
-    width: 1.25em;
   }
 
   .str-chat__message-error-indicator {
@@ -584,14 +523,8 @@
 }
 
 // Message options display - default mode: they appear when .str-chat__li is hovered
-.str-chat__ul:not(
-    .str-chat__message-options-in-bubble,
-    .str-chat__message-with-touch-support
-  ),
-.str-chat__virtual-list:not(
-    .str-chat__message-options-in-bubble,
-    .str-chat__message-with-touch-support
-  ) {
+.str-chat__ul,
+.str-chat__virtual-list {
   /* This rule won't be applied in browsers that don't support :has() */
   .str-chat__li:hover:not(:has(.str-chat__modal--open)),
   .str-chat__li:focus-within:not(:has(.str-chat__modal--open)),
@@ -608,44 +541,6 @@
       margin-inline-start: 0;
     }
   }
-
-  /* Fallback for when :has() is unsupported */
-  @supports not selector(:has(a, b)) {
-    .str-chat__li:hover,
-    .str-chat__li:focus-within {
-      .str-chat__message-options {
-        display: flex;
-      }
-
-      .str-chat__message--other .str-chat__message-inner {
-        margin-inline-end: 0;
-      }
-
-      .str-chat__message--me .str-chat__message-inner {
-        margin-inline-start: 0;
-      }
-    }
-  }
-}
-
-// Message options display - second mode: they appear when .str-chat__message-inner is hovered
-.str-chat__ul.str-chat__message-options-in-bubble,
-.str-chat__virtual-list.str-chat__message-options-in-bubble {
-  .str-chat__message-inner {
-    &:hover {
-      .str-chat__message-options {
-        display: flex;
-      }
-    }
-  }
-
-  .str-chat__message--other .str-chat__message-inner:hover {
-    margin-inline-end: 0;
-  }
-
-  .str-chat__message--me .str-chat__message-inner:hover {
-    margin-inline-start: 0;
-  }
 }
 
 // Message options display - third mode: they appear, when explicitly marked as active
@@ -659,10 +554,6 @@
   .str-chat__message-options {
     display: none;
   }
-
-  .str-chat__message-actions-open.str-chat__message-options {
-    display: flex;
-  }
 }
 
 .str-chat__message-inner:focus-within {
@@ -719,13 +610,13 @@
 .str-chat__message-with-thread-link {
   &.str-chat__message--other {
     .str-chat__message-bubble {
-      border-end-start-radius: calc(var(--str-chat__border-radius-md) / 6);
+      border-end-start-radius: calc(var(--radius-md) / 6);
     }
   }
 
   &.str-chat__message--me {
     .str-chat__message-bubble {
-      border-end-end-radius: calc(var(--str-chat__border-radius-md) / 6);
+      border-end-end-radius: calc(var(--radius-md) / 6);
     }
   }
 }
@@ -738,27 +629,3 @@
     pointer-events: none;
   }
 }
-
-// todo: not implemented in stream-chat-react
-.str-chat__message-with-touch-support {
-  .str-chat__message-bubble {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  &.str-chat__message-menu-opened {
-    .str-chat__attachments-container,
-    .str-chat__message-text-inner {
-      pointer-events: none;
-    }
-  }
-
-  .str-chat__message-inner {
-    margin-inline: 0;
-  }
-
-  .str-chat__message-options {
-    display: none;
-  }
-}
diff --git a/src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss b/src/components/Message/styling/MessageIsThreadReplyInChannelButtonIndicator.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/src/components/Message/styling/MessageStatus.scss b/src/components/Message/styling/MessageStatus.scss
index c8397a5720..7c232082d4 100644
--- a/src/components/Message/styling/MessageStatus.scss
+++ b/src/components/Message/styling/MessageStatus.scss
@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    column-gap: var(--str-chat__spacing-0_5);
+    column-gap: var(--space-2);
     position: relative;
     color: var(--chat-text-timestamp);
     svg {
diff --git a/src/components/Message/styling/MessageSystem.scss b/src/components/Message/styling/MessageSystem.scss
index df7d6efa9f..767ca82334 100644
--- a/src/components/Message/styling/MessageSystem.scss
+++ b/src/components/Message/styling/MessageSystem.scss
@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__message--system {
   display: flex;
   padding-block: var(--spacing-xs);
diff --git a/src/components/Message/styling/index.scss b/src/components/Message/styling/index.scss
index 9b83d6a795..d49ffe6ad3 100644
--- a/src/components/Message/styling/index.scss
+++ b/src/components/Message/styling/index.scss
@@ -1,6 +1,5 @@
 @use 'Message';
 @use 'MessageAlsoSentInChannelIndicator';
-@use 'MessageIsThreadReplyInChannelButtonIndicator';
 @use 'MessageStatus';
 @use 'MessageSystem';
 @use 'MessageTranslationIndicator';
diff --git a/src/components/MessageActions/styling/MessageActions.scss b/src/components/MessageActions/styling/MessageActions.scss
index e1a6591c8d..77104af4c4 100644
--- a/src/components/MessageActions/styling/MessageActions.scss
+++ b/src/components/MessageActions/styling/MessageActions.scss
@@ -37,8 +37,7 @@
     color: var(--str-chat__message-options-active-color);
   }
 
-  .str-chat__message-actions-box-button,
-  .str-chat__message-actions-container {
+  .str-chat__message-actions-box-button {
     position: relative;
   }
 }
diff --git a/src/components/MessageBounce/styling/MessageBouncePrompt.scss b/src/components/MessageBounce/styling/MessageBouncePrompt.scss
index f6b5a3cf42..d8ce696cc3 100644
--- a/src/components/MessageBounce/styling/MessageBouncePrompt.scss
+++ b/src/components/MessageBounce/styling/MessageBouncePrompt.scss
@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__message-bounce-alert {
   max-width: 300px;
 
diff --git a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
index def24a1a7b..8336ab399b 100644
--- a/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
+++ b/src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx
@@ -14,11 +14,11 @@ import React, {
   useState,
 } from 'react';
 import clsx from 'clsx';
-import { LoadingIndicatorIcon } from '../icons';
 import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
+import { LoadingIndicator as DefaultLoadingIndicator } from '../../Loading';
 
 export type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
@@ -34,7 +34,7 @@ export const MediaAttachmentPreview = ({
   removeAttachments,
 }: MediaAttachmentPreviewProps) => {
   const { t } = useTranslationContext();
-  const { BaseImage = DefaultBaseImage, LoadingIndicator = LoadingIndicatorIcon } =
+  const { BaseImage = DefaultBaseImage, LoadingIndicator = DefaultLoadingIndicator } =
     useComponentContext();
   const [thumbnailPreviewError, setThumbnailPreviewError] = useState(false);
 
@@ -94,7 +94,7 @@ export const MediaAttachmentPreview = ({
         )}
 
         <div className={clsx('str-chat__attachment-preview-media__overlay')}>
-          {isUploading && <LoadingIndicator />}
+          {isUploading && <LoadingIndicator data-testid='loading-indicator' />}
 
           {isVideoAttachment(attachment) &&
             !hasUploadError &&
diff --git a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap
index 35a005ca97..c23c44348f 100644
--- a/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap
+++ b/src/components/MessageComposer/__tests__/__snapshots__/AttachmentPreviewList.test.tsx.snap
@@ -31,41 +31,27 @@ exports[`AttachmentPreviewList > should render custom BaseImage component 1`] =
             <div
               class="str-chat__attachment-preview-media__overlay"
             >
-              <div
-                class="str-chat__loading-indicator"
+              <svg
+                class="str-chat__icon str-chat__icon--loading str-chat__loading-indicator"
+                data-testid="loading-indicator"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  data-testid="loading-indicator"
-                  viewBox="0 0 30 30"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <lineargradient
-                      id="randomNanoId-linear-gradient"
-                      x1="50%"
-                      x2="50%"
-                      y1="0%"
-                      y2="100%"
-                    >
-                      <stop
-                        offset="0%"
-                        stop-color="#FFF"
-                        stop-opacity="0"
-                      />
-                      <stop
-                        data-testid="stop-color"
-                        offset="100%"
-                        stop-opacity="1"
-                      />
-                    </lineargradient>
-                  </defs>
-                  <path
-                    d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-                    fill="url(#randomNanoId-linear-gradient)"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M17.5 10C17.5 14.1422 14.1422 17.5 10 17.5C5.85787 17.5 2.5 14.1422 2.5 10C2.5 5.85787 5.85787 2.5 10 2.5C14.1422 2.5 17.5 5.85787 17.5 10Z"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-opacity="0.3"
+                  stroke-width="2"
+                />
+                <path
+                  d="M17.4544 10.8334C17.0701 14.3097 14.3098 17.07 10.8335 17.4543"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                />
+              </svg>
             </div>
           </div>
           <button
@@ -113,41 +99,27 @@ exports[`AttachmentPreviewList > should render custom BaseImage component 1`] =
             <div
               class="str-chat__attachment-preview-media__overlay"
             >
-              <div
-                class="str-chat__loading-indicator"
+              <svg
+                class="str-chat__icon str-chat__icon--loading str-chat__loading-indicator"
+                data-testid="loading-indicator"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  data-testid="loading-indicator"
-                  viewBox="0 0 30 30"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <defs>
-                    <lineargradient
-                      id="randomNanoId-linear-gradient"
-                      x1="50%"
-                      x2="50%"
-                      y1="0%"
-                      y2="100%"
-                    >
-                      <stop
-                        offset="0%"
-                        stop-color="#FFF"
-                        stop-opacity="0"
-                      />
-                      <stop
-                        data-testid="stop-color"
-                        offset="100%"
-                        stop-opacity="1"
-                      />
-                    </lineargradient>
-                  </defs>
-                  <path
-                    d="M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z"
-                    fill="url(#randomNanoId-linear-gradient)"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </div>
+                <path
+                  d="M17.5 10C17.5 14.1422 14.1422 17.5 10 17.5C5.85787 17.5 2.5 14.1422 2.5 10C2.5 5.85787 5.85787 2.5 10 2.5C14.1422 2.5 17.5 5.85787 17.5 10Z"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-opacity="0.3"
+                  stroke-width="2"
+                />
+                <path
+                  d="M17.4544 10.8334C17.0701 14.3097 14.3098 17.07 10.8335 17.4543"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-width="2"
+                />
+              </svg>
             </div>
           </div>
           <button
diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss
index 40a4e82f4d..4a6243487e 100644
--- a/src/components/MessageComposer/styling/AttachmentPreview.scss
+++ b/src/components/MessageComposer/styling/AttachmentPreview.scss
@@ -166,24 +166,19 @@
       align-items: center;
       gap: var(--spacing-xxs);
       position: absolute;
-      bottom: var(--spacing-xxs);
-      left: var(--spacing-xxs);
-      padding-inline: var(--button-padding-x-icon-only-sm);
-      padding-block: var(--button-padding-y-sm);
-      border-radius: var(
-        --str-chat__attachment-preview-media-video-indicator-border-radius
-      );
-      background-color: var(
-        --str-chat__attachment-preview-media-video-indicator-background-color
-      );
-      color: var(--str-chat__attachment-preview-media-video-indicator-color);
-      font-size: var(--typography-font-size-xxs);
-      font-weight: var(--typography-font-weight-bold);
-      line-height: var(--line-height-line-height-10);
-
-      .str-chat__icon--video-camera {
-        width: 10px;
-        height: 8px;
+      bottom: var(--spacing-xs);
+      left: var(--spacing-xs);
+      padding: var(--spacing-xxs) var(--spacing-xs);
+      border-radius: var(--radius-max);
+      background: var(--badge-bg-inverse);
+      color: var(--badge-text-on-inverse);
+      font: var(--str-chat__numeric-md-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      .str-chat__icon {
+        width: var(--icon-size-xs);
+        height: var(--icon-size-xs);
         fill: currentColor;
       }
     }
@@ -215,15 +210,29 @@
       );
     }
 
-    .str-chat__loading-indicator,
-    .str-chat__icon--exclamation-mark {
-      width: 14px;
-      height: 14px;
+    .str-chat__icon.str-chat__loading-indicator {
+      width: var(--icon-size-sm);
+      height: var(--icon-size-sm);
+      position: absolute;
+      left: var(--spacing-xxs);
+      bottom: var(--spacing-xxs);
+      border-radius: var(--radius-max);
+      border-radius: var(--radius-max);
+      background: var(--background-core-elevation-0);
+      color: var(--accent-primary);
+    }
+
+    .str-chat__icon--exclamation {
+      padding: var(--spacing-xxxs);
+      width: var(--icon-size-sm);
+      height: var(--icon-size-sm);
       position: absolute;
       left: var(--spacing-xxs);
       bottom: var(--spacing-xxs);
-      border: 2px solid var(--control-remove-control-border);
+      border: 2px solid var(--badge-border);
       border-radius: var(--radius-max);
+      background: var(--badge-bg-error);
+      color: var(--badge-text-on-accent);
     }
   }
 
@@ -274,9 +283,9 @@
       font-size: var(--typography-font-size-xs);
       line-height: var(--typography-line-height-tight);
 
-      .str-chat__loading-indicator {
-        width: var(--size-12);
-        height: var(--size-12);
+      .str-chat__icon.str-chat__loading-indicator {
+        width: var(--icon-size-sm);
+        height: var(--icon-size-sm);
       }
 
       .str-chat__attachment-preview-file__fatal-error {
diff --git a/src/components/MessageList/styling/NewMessageNotification.scss b/src/components/MessageList/styling/NewMessageNotification.scss
index 459878fa10..bb2bce08bf 100644
--- a/src/components/MessageList/styling/NewMessageNotification.scss
+++ b/src/components/MessageList/styling/NewMessageNotification.scss
@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__new-message-notification {
   position: absolute;
   inset-block-end: 16px;
diff --git a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss
index 6cc83274cb..8e7e4b6eba 100644
--- a/src/components/MessageList/styling/ScrollToLatestMessageButton.scss
+++ b/src/components/MessageList/styling/ScrollToLatestMessageButton.scss
@@ -25,7 +25,7 @@
   .str-chat__jump-to-latest__unread-count {
     position: absolute;
     inset-block-end: 100%;
-    margin-block-end: var(--str-chat__spacing-1);
+    margin-block-end: var(--space-4);
     right: -15%;
     top: -15%;
   }
diff --git a/src/components/MessageList/styling/VirtualizedMessageList.scss b/src/components/MessageList/styling/VirtualizedMessageList.scss
index b537c3727b..984a35ae0b 100644
--- a/src/components/MessageList/styling/VirtualizedMessageList.scss
+++ b/src/components/MessageList/styling/VirtualizedMessageList.scss
@@ -58,7 +58,7 @@
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
     display: flex;
-    padding-top: var(--str-chat__spacing-2);
+    padding-top: var(--space-8);
     justify-content: center;
     width: 100%;
     position: absolute;
diff --git a/src/components/Poll/styling/PollCreationDialog.scss b/src/components/Poll/styling/PollCreationDialog.scss
index 7f0793004b..6fd9de80c1 100644
--- a/src/components/Poll/styling/PollCreationDialog.scss
+++ b/src/components/Poll/styling/PollCreationDialog.scss
@@ -1,5 +1,3 @@
-@use '../../../styling/utils';
-
 .str-chat__poll-creation-dialog {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss
index 2f3323d74f..021d955bd8 100644
--- a/src/components/Reactions/styling/MessageReactions.scss
+++ b/src/components/Reactions/styling/MessageReactions.scss
@@ -1,4 +1,3 @@
-@use '../../../styling/utils' as utils;
 @use './common' as common;
 
 .str-chat__message-reactions {
diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss
index 5c63bea878..499764caa6 100644
--- a/src/components/Reactions/styling/ReactionSelector.scss
+++ b/src/components/Reactions/styling/ReactionSelector.scss
@@ -27,7 +27,7 @@
     width: 32px;
     aspect-ratio: 1/1;
 
-    .str-chat__icon--plus {
+    .str-chat__icon {
       width: var(--icon-size-sm);
       height: var(--icon-size-sm);
     }
diff --git a/src/components/Thread/styling/ThreadHeader.scss b/src/components/Thread/styling/ThreadHeader.scss
index 6e98093664..45ebe24fd9 100644
--- a/src/components/Thread/styling/ThreadHeader.scss
+++ b/src/components/Thread/styling/ThreadHeader.scss
@@ -30,14 +30,12 @@
   @include utils.header-layout;
   @include utils.component-layer-overrides('thread-header');
 
-  .str-chat__thread-header-name,
   .str-chat__thread-header-title {
-    font: var(--str-chat__subtitle-medium-text);
+    font: var(--str-chat__heading-sm-text);
   }
 
-  .str-chat__thread-header-channel-name,
   .str-chat__thread-header-subtitle {
-    font: var(--str-chat__body-text);
+    font: var(--str-chat__caption-default-text);
     color: var(--str-chat__thread-header-info-color);
   }
 
@@ -45,9 +43,6 @@
     @include utils.header-text-layout;
     align-items: start;
 
-    .str-chat__thread-header-name,
-    .str-chat__thread-header-reply-count,
-    .str-chat__thread-header-channel-name,
     .str-chat__thread-header-subtitle,
     .str-chat__thread-header-title {
       @include utils.ellipsis-text;
diff --git a/src/components/Thread/styling/ThreadHeaderMain.scss b/src/components/Thread/styling/ThreadHeaderMain.scss
deleted file mode 100644
index 1c06d66da4..0000000000
--- a/src/components/Thread/styling/ThreadHeaderMain.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use '../../../styling/utils';
-
-.str-chat__thread-header--main {
-  @include utils.header-layout;
-  border-bottom: 1px solid var(--border-core-default);
-  background: var(--background-core-elevation-1);
-
-  .str-chat__thread-header--main__details {
-    @include utils.header-text-layout;
-
-    .str-chat__thread-header--main__title {
-      font: var(--str-chat__heading-sm-text);
-      color: var(--text-primary);
-    }
-
-    .str-chat__thread-header--main__subtitle {
-      font: var(--str-chat__caption-default-text);
-      color: var(--text-secondary);
-    }
-  }
-}
diff --git a/src/components/Thread/styling/index.scss b/src/components/Thread/styling/index.scss
index af8eabad0e..b8263e4db2 100644
--- a/src/components/Thread/styling/index.scss
+++ b/src/components/Thread/styling/index.scss
@@ -1,4 +1,3 @@
 @use 'Thread';
 @use 'ThreadHead';
 @use 'ThreadHeader';
-@use 'ThreadHeaderMain';
diff --git a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
index b6879f2c49..c5e1a39990 100644
--- a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
@@ -74,16 +74,6 @@
   white-space: nowrap;
 }
 
-.str-chat__thread-list-item__message-preview {
-  font-size: var(--typography-font-size-md);
-  font-weight: var(--typography-font-weight-regular);
-  line-height: var(--typography-line-height-normal);
-  color: var(--text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .str-chat__thread-list-item__content-trailing {
   display: flex;
   gap: var(--spacing-xs);
diff --git a/src/components/Tooltip/styling/Tooltip.scss b/src/components/Tooltip/styling/Tooltip.scss
index 6ac3b1f49b..d4238e4eaa 100644
--- a/src/components/Tooltip/styling/Tooltip.scss
+++ b/src/components/Tooltip/styling/Tooltip.scss
@@ -30,11 +30,11 @@
   @include utils.component-layer-overrides('tooltip');
   @include utils.prevent-glitch-text-overflow;
   display: flex;
-  padding: var(--str-chat__spacing-2);
+  padding: var(--space-8);
   z-index: 1;
   max-width: calc(var(--str-chat__spacing-px) * 150);
   width: max-content;
-  font: var(--str-chat__caption-text);
+  font: var(--str-chat__metadata-emphasis-text);
 
   &::after {
     background-color: var(--str-chat__tooltip-background-color);
diff --git a/src/components/TypingIndicator/styling/TypingIndicator.scss b/src/components/TypingIndicator/styling/TypingIndicator.scss
index 08ff60f59a..ed33daf29f 100644
--- a/src/components/TypingIndicator/styling/TypingIndicator.scss
+++ b/src/components/TypingIndicator/styling/TypingIndicator.scss
@@ -54,26 +54,6 @@
   display: flex;
   align-items: center;
   column-gap: var(--spacing-xxs);
-
-  .str-chat__typing-indicator__dot {
-    width: 5px;
-    height: 5px;
-    border-radius: 50%;
-    background-color: var(--chat-text-typing-indicator);
-    animation: str-chat__typing-indicator-dot 1.2s ease-in-out infinite both;
-
-    &:nth-child(1) {
-      animation-delay: 0s;
-    }
-
-    &:nth-child(2) {
-      animation-delay: 0.15s;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 0.3s;
-    }
-  }
 }
 
 /* SVG dots (TypingIndicatorDots component) */
diff --git a/src/styling/_global-layout-variables.scss b/src/styling/_global-layout-variables.scss
index a2719e3c42..f151ebde95 100644
--- a/src/styling/_global-layout-variables.scss
+++ b/src/styling/_global-layout-variables.scss
@@ -1,58 +1,4 @@
 .str-chat {
   /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
   --str-chat__spacing-px: 1px;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-0_5: var(--space-2);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1: var(--space-4);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1_5: calc(var(--space-4) + var(--space-2));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2: var(--space-8);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2_5: calc(var(--space-8) + var(--space-2));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3: calc(var(--space-8) + var(--space-4));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3_5: calc(var(--space-12) + var(--space-2));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-4: var(--space-16); // 16px by default
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-5: var(--space-20);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-6: var(--space-24);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-7: calc(var(--space-24) + var(--space-4));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-8: var(--space-32);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-9: calc(var(--space-32) + var(--space-4));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-10: var(--space-40);
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-11: calc(var(--space-40) + var(--space-4));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-12: calc(var(--space-48));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-14: calc(var(--space-48) + var(--space-8));
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-16: var(--space-64);
 }
diff --git a/src/styling/_global-theme-variables.scss b/src/styling/_global-theme-variables.scss
index 8af4b973ea..2a98b13287 100644
--- a/src/styling/_global-theme-variables.scss
+++ b/src/styling/_global-theme-variables.scss
@@ -1,34 +1,4 @@
 .str-chat {
-  /* Border radius used for squared elements */
-  --str-chat__border-radius-none: var(--radius-none);
-
-  /* Border radius used for subtle rounding */
-  --str-chat__border-radius-xxs: var(--radius-xxs);
-
-  /* Border radius used for subtle rounding */
-  --str-chat__border-radius-xs: var(--radius-xs);
-
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-sm: var(--radius-sm);
-
-  /* Border radius used for slightly rounded elements */
-  --str-chat__border-radius-md: var(--radius-md);
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-lg: var(--radius-lg);
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-xl: var(--radius-xl);
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-2xl: var(--radius-2xl);
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-3xl: var(--radius-3xl);
-
-  /* Border radius used for rounded elements */
-  --str-chat__border-radius-4xl: var(--radius-4xl);
-
   /* Border radius used for circular elements */
   --str-chat__border-radius-circle: var(--radius-max);
 
@@ -46,11 +16,11 @@
     var(--str-chat__font-family);
 
   --str-chat__caption-emphasis-text: normal var(--typography-font-weight-semi-bold)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
 
   --str-chat__caption-default-text: normal var(--typography-font-weight-regular)
-    var(--typography-font-size-sm) / var(--typography-line-height-tight)
+    var(--typography-font-size-sm) / var(--typography-line-height-normal)
     var(--str-chat__font-family);
 
   --str-chat__body-emphasis-text: normal var(--typography-font-weight-semi-bold)
@@ -84,46 +54,6 @@
     var(--typography-font-size-sm) / 100% var(--str-chat__font-family);
 
   color: var(--text-primary, #1a1b25);
-
-  // todo: adapt the old text variables to so that they use the new semantic text variables
-  /* The font used for caption texts */
-  --str-chat__caption-text: 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-medium-text: 500 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for caption texts with emphasize */
-  --str-chat__caption-strong-text: 700 0.75rem/1.3 var(--str-chat__font-family);
-
-  /* The font used for body texts */
-  --str-chat__body-text: 0.875rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts with emphasize */
-  --str-chat__body-medium-text: 500 0.875rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts */
-  --str-chat__body2-text: 0.9375rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for body texts with emphasize */
-  --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts */
-  --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts */
-  --str-chat__subtitle2-text: 1.25rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for subtitle texts with emphasize */
-  --str-chat__subtitle2-medium-text: 500 1.25rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for headline texts */
-  --str-chat__headline-text: 1.5rem/1.2 var(--str-chat__font-family);
-
-  /* The font used for headline texts */
-  --str-chat__headline2-text: 1.8rem/1.2 var(--str-chat__font-family);
 }
 
 .str-chat,
@@ -131,15 +61,6 @@
   /* Used for emphasis, brands can inject their main color using this variable */
   --str-chat__primary-color: var(--accent-primary);
 
-  /* Used for emphasised overlays - color of --str-chat__primary-color with alpha channel */
-  --str-chat__primary-overlay-color: rgba(0, 95, 255, 0.6);
-
-  /* Used for emphasis, brands can inject their main color using this variable, it has less emphasis than primary color */
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue300);
-
-  /* Used to indicate that a UI element with primary color is in an active state */
-  --str-chat__active-primary-color: var(--str-chat__blue600);
-
   /* If the primary color is used as a background, text/icons are displayed in this color */
   --str-chat__on-primary-color: var(--str-chat__grey50);
 
@@ -149,12 +70,6 @@
   /* Used as a background color for the main chat UI components */
   --str-chat__secondary-background-color: var(--str-chat__grey50);
 
-  /* Used as a background color to give emphasis, but less vibrant than the primary color */
-  --str-chat__primary-surface-color: var(--str-chat__blue100);
-
-  /* Used as a background color to give emphasis, but less vibrant than the primary surface color */
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue50);
-
   /* A neutral color used to give emphasis to different surfaces */
   --str-chat__surface-color: var(--str-chat__grey300);
 
@@ -173,9 +88,6 @@
   /* Used for displaying disabled UI elements (typically buttons) */
   --str-chat__disabled-color: var(--str-chat__grey400);
 
-  /* Used for text/icon colors if disabled color is used as a background color */
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
-
   /* Used for error messages, and destructive actions */
   --str-chat__danger-color: var(--str-chat__red400);
 
@@ -188,21 +100,12 @@
   /* Used for text/icon colors if unread badge color is used as a background color */
   --str-chat__on-unread-badge-color: var(--str-chat__grey50);
 
-  /* The background color used for overlays */
-  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
-
   /* The background color used for subtle overlays */
   --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.2);
 
   /* The text/icon color used on subtle overlays */
   --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
 
-  /* The background color used for opaque surfaces */
-  --str-chat__opaque-surface-background-color: rgba(0, 0, 0, 0.8);
-
-  /* The text color used on opaque surfaces */
-  --str-chat__opaque-surface-text-color: var(--str-chat__grey50);
-
   /* If a component has a box shadow applied to it, this will be the color used for the shadow */
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.18);
 
@@ -216,30 +119,21 @@
 
 .str-chat__theme-dark {
   --str-chat__primary-color: var(--accent-primary);
-  --str-chat__primary-overlay-color: rgba(51, 126, 255, 0.6);
-  --str-chat__primary-color-low-emphasis: var(--str-chat__blue700);
-  --str-chat__active-primary-color: var(--str-chat__blue600);
   --str-chat__on-primary-color: var(--str-chat__grey50);
   --str-chat__background-color: var(--str-chat__grey950);
   --str-chat__secondary-background-color: var(--str-chat__grey900);
-  --str-chat__primary-surface-color: var(--str-chat__blue900);
-  --str-chat__primary-surface-color-low-emphasis: var(--str-chat__blue950);
   --str-chat__surface-color: var(--str-chat__grey700);
   --str-chat__secondary-surface-color: var(--str-chat__grey800);
   --str-chat__tertiary-surface-color: var(--str-chat__grey900);
   --str-chat__text-color: var(--str-chat__grey50);
   --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
   --str-chat__disabled-color: var(--str-chat__grey600);
-  --str-chat__on-disabled-color: var(--str-chat__grey50);
   --str-chat__danger-color: var(--str-chat__red600);
   --str-chat__message-highlight-color: var(--str-chat__yellow900);
   --str-chat__unread-badge-color: var(--str-chat__red400);
   --str-chat__on-unread-badge-color: var(--str-chat__grey50);
-  --str-chat__overlay-color: rgba(0, 0, 0, 0.7);
   --str-chat__secondary-overlay-color: rgba(0, 0, 0, 0.4);
   --str-chat__secondary-overlay-text-color: var(--str-chat__grey50);
-  --str-chat__opaque-surface-background-color: rgba(250, 250, 250, 0.85);
-  --str-chat__opaque-surface-text-color: var(--str-chat__grey900);
   --str-chat__box-shadow-color: rgba(0, 0, 0, 0.8);
   --str-chat__info-color: var(--str-chat__green500);
 }
diff --git a/src/styling/_palette-variables.scss b/src/styling/_palette-variables.scss
index e4ec572cd0..4dc68eda55 100644
--- a/src/styling/_palette-variables.scss
+++ b/src/styling/_palette-variables.scss
@@ -1,16 +1,4 @@
 .str-chat {
-  --str-chat__blue950: #001333;
-  --str-chat__blue900: #00163d;
-  --str-chat__blue800: #002666;
-  --str-chat__blue700: #003999;
-  --str-chat__blue600: #004ccc;
-  --str-chat__blue500: #005fff;
-  --str-chat__blue400: #337eff;
-  --str-chat__blue300: #669fff;
-  --str-chat__blue200: #ccdfff;
-  --str-chat__blue100: #e0f0ff;
-  --str-chat__blue50: #ebf5ff;
-
   --str-chat__grey950: #080707;
   --str-chat__grey900: #17191c;
   --str-chat__grey800: #1c1e22;
@@ -23,33 +11,10 @@
   --str-chat__grey100: #f4f4f5;
   --str-chat__grey50: #ffffff;
 
-  --str-chat__red900: #330003;
-  --str-chat__red800: #660006;
-  --str-chat__red700: #990008;
   --str-chat__red600: #cc000b;
-  --str-chat__red500: #ff000e;
   --str-chat__red400: #ff3742;
-  --str-chat__red300: #ff666e;
-  --str-chat__red200: #ff999f;
-  --str-chat__red100: #ffe5e7;
 
-  --str-chat__green900: #062d16;
-  --str-chat__green800: #0d592c;
-  --str-chat__green700: #138643;
-  --str-chat__green600: #19b359;
   --str-chat__green500: #20e070;
-  --str-chat__green400: #4ce68c;
-  --str-chat__green300: #79eca9;
-  --str-chat__green200: #a6f2c6;
-  --str-chat__green100: #e9f1ff;
 
   --str-chat__yellow900: #332500;
-  --str-chat__yellow800: #664900;
-  --str-chat__yellow700: #996e00;
-  --str-chat__yellow600: #cc9200;
-  --str-chat__yellow500: #ffb700;
-  --str-chat__yellow400: #ffd466;
-  --str-chat__yellow300: #ffe299;
-  --str-chat__yellow200: #fff1cc;
-  --str-chat__yellow100: #fff8e5;
 }
diff --git a/src/styling/_utils.scss b/src/styling/_utils.scss
index 2e0f118105..b5a9737fcd 100644
--- a/src/styling/_utils.scss
+++ b/src/styling/_utils.scss
@@ -59,10 +59,6 @@
   border-radius: $outline-radius;
 }
 
-@mixin loading-item-background($color) {
-  background-image: linear-gradient(-90deg, #{$color} 0%, #{$color} 100%);
-}
-
 @mixin focusable {
   outline: 2px solid var(--border-utility-focused);
   outline-offset: 2px;
@@ -140,36 +136,6 @@
   }
 }
 
-@mixin loading-item-background($component-name) {
-  background-image: linear-gradient(
-    -90deg,
-    var(--str-chat__#{$component-name}-loading-state-color) 0%,
-    var(--str-chat__#{$component-name}-loading-state-color) 100%
-  );
-}
-
-@mixin loading-animation {
-  animation: pulsate 1s linear 0s infinite alternate;
-
-  &:nth-of-type(2) {
-    animation: pulsate 1s linear 0.3334s infinite alternate;
-  }
-
-  &:last-of-type {
-    animation: pulsate 1s linear 0.6667s infinite alternate;
-  }
-
-  @keyframes pulsate {
-    from {
-      opacity: 0.5;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-}
-
 @mixin component-layer-overrides($component-name, $important: '') {
   background: var(--str-chat__#{$component-name}-background-color) #{$important};
   color: var(--str-chat__#{$component-name}-color) #{$important};
@@ -181,14 +147,3 @@
     #{$important};
   border-inline-end: var(--str-chat__#{$component-name}-border-inline-end) #{$important};
 }
-
-// todo: remove?
-@mixin circle-fab-overrides($component-name) {
-  svg path {
-    fill: var(--str-chat__#{$component-name}-color);
-  }
-
-  &:active {
-    background-color: var(--str-chat__#{$component-name}-pressed-background-color);
-  }
-}
diff --git a/src/styling/animations.scss b/src/styling/animations.scss
index 094275d40e..cfb9e733ad 100644
--- a/src/styling/animations.scss
+++ b/src/styling/animations.scss
@@ -7,25 +7,3 @@
 .str-chat__rotate45 {
   transform: rotate(45deg);
 }
-
-@mixin loading-animation {
-  animation: pulsate 1s linear 0s infinite alternate;
-
-  &:nth-of-type(2) {
-    animation: pulsate 1s linear 0.3334s infinite alternate;
-  }
-
-  &:last-of-type {
-    animation: pulsate 1s linear 0.6667s infinite alternate;
-  }
-
-  @keyframes pulsate {
-    from {
-      opacity: 0.5;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-}