diff --git a/examples/vite/src/AppSettings/AppSettings.scss b/examples/vite/src/AppSettings/AppSettings.scss
index c12ec05062..b99807f195 100644
--- a/examples/vite/src/AppSettings/AppSettings.scss
+++ b/examples/vite/src/AppSettings/AppSettings.scss
@@ -7,7 +7,7 @@
     gap: 16px;
 
     .app__settings-group_button {
-      color: var(--text-secondary);
+      color: var(--str-chat__text-secondary);
     }
   }
 
@@ -77,13 +77,13 @@
   }
 
   .app__attachment-dialog__field-label {
-    color: var(--text-primary);
+    color: var(--str-chat__text-primary);
     font-size: 14px;
     font-weight: 600;
   }
 
   .app__attachment-dialog__subsection {
-    border-top: 1px solid var(--border-core-default);
+    border-top: 1px solid var(--str-chat__border-core-default);
     display: flex;
     flex-direction: column;
     gap: 10px;
@@ -92,7 +92,7 @@
   }
 
   .app__attachment-dialog__subsection-title {
-    color: var(--text-primary);
+    color: var(--str-chat__text-primary);
     font-size: 14px;
     font-weight: 700;
     margin: 0;
@@ -104,10 +104,10 @@
   }
 
   .app__attachment-dialog__tab {
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 999px;
-    background: var(--background-core-elevation-2);
-    color: var(--text-secondary);
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-secondary);
     cursor: pointer;
     font: inherit;
     font-size: 13px;
@@ -117,20 +117,20 @@
   }
 
   .app__attachment-dialog__tab[aria-selected='true'] {
-    background: var(--background-utility-selected);
-    border-color: var(--border-utility-selected);
-    color: var(--text-primary);
+    background: var(--str-chat__background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+    color: var(--str-chat__text-primary);
   }
 
   .app__attachment-dialog__textarea {
     width: 100%;
     min-height: 200px;
     resize: vertical;
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 10px;
     padding: 10px 12px;
-    background: var(--background-core-elevation-2);
-    color: var(--text-primary);
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
     font-family:
       ui-monospace,
       SFMono-Regular,
@@ -142,7 +142,7 @@
   }
 
   .app__attachment-dialog__textarea:focus-visible {
-    outline: 2px solid var(--border-utility-selected);
+    outline: 2px solid var(--str-chat__border-utility-selected);
     outline-offset: 1px;
   }
 
@@ -199,7 +199,7 @@
   }
 
   .app__notification-dialog__field-label {
-    color: var(--text-primary);
+    color: var(--str-chat__text-primary);
     font-size: 14px;
     font-weight: 600;
   }
@@ -207,10 +207,10 @@
   .app__notification-dialog__select {
     min-height: 40px;
     padding: 0 12px;
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 10px;
-    background: var(--background-core-elevation-2);
-    color: var(--text-primary);
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
     font: inherit;
   }
 
@@ -260,7 +260,7 @@
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 999px;
     background: transparent;
   }
@@ -279,7 +279,7 @@
   }
 
   .app__notification-dialog__queue-hint {
-    color: var(--text-secondary);
+    color: var(--str-chat__text-secondary);
     font-size: 13px;
   }
 
@@ -303,7 +303,7 @@
     gap: 8px;
     max-width: 100%;
     padding: 6px 8px 6px 10px;
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 999px;
     background: var(--background-core-surface);
   }
@@ -324,7 +324,7 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    color: var(--text-secondary);
+    color: var(--str-chat__text-secondary);
     font-size: 12px;
     white-space: nowrap;
   }
@@ -346,7 +346,7 @@
   }
 
   .app__notification-dialog__chip-remove {
-    color: var(--text-secondary);
+    color: var(--str-chat__text-secondary);
   }
 
   .app__notification-dialog__footer {
@@ -378,9 +378,9 @@
     flex-direction: column;
     width: min(920px, 90vw);
     height: min(80vh, 760px);
-    background: var(--background-core-elevation-2);
-    color: var(--text-primary);
-    border: 1px solid var(--border-core-default);
+    background: var(--str-chat__background-core-elevation-2);
+    color: var(--str-chat__text-primary);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 14px;
   }
 
@@ -391,7 +391,7 @@
     padding: 16px 20px;
     font-size: 1.5rem;
     font-weight: 700;
-    border-bottom: 1px solid var(--border-core-default);
+    border-bottom: 1px solid var(--str-chat__border-core-default);
 
     svg.str-chat__icon--cog {
       height: 1.75rem;
@@ -409,7 +409,7 @@
   .app__settings-modal__tabs {
     overflow-y: auto;
     overscroll-behavior: contain;
-    border-inline-end: 1px solid var(--border-core-default);
+    border-inline-end: 1px solid var(--str-chat__border-core-default);
     padding: 10px;
   }
 
@@ -419,14 +419,14 @@
     justify-content: flex-start;
     font-weight: 500;
     margin-bottom: 6px;
-    color: var(--text-secondary);
+    color: var(--str-chat__text-secondary);
   }
 
   .app__settings-modal__tab[aria-selected='true'],
   .app__settings-modal__tab.app__settings-modal__tab--active {
-    background: var(--background-utility-selected);
-    border-color: var(--border-utility-selected);
-    color: var(--text-primary);
+    background: var(--str-chat__background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+    color: var(--str-chat__text-primary);
     font-weight: 600;
   }
 
@@ -450,17 +450,17 @@
 
   .app__settings-modal__field-label {
     font-weight: 600;
-    color: var(--text-primary);
+    color: var(--str-chat__text-primary);
   }
 
   .app__settings-modal__field .str-chat__form__switch-field {
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 10px;
     padding: 10px 12px;
   }
 
   .app__settings-modal__field-comment {
-    color: var(--text-secondary);
+    color: var(--str-chat__text-secondary);
     font-size: 13px;
     line-height: 1.4;
   }
@@ -472,8 +472,8 @@
   }
 
   .app__settings-modal__option-button[aria-pressed='true'] {
-    border-color: var(--border-utility-selected);
-    background: var(--background-utility-selected);
+    border-color: var(--str-chat__border-utility-selected);
+    background: var(--str-chat__background-utility-selected);
     font-weight: 600;
   }
 
@@ -485,7 +485,7 @@
   }
 
   .app__settings-modal__preview {
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 12px;
     padding: 12px;
     background: var(--background-core-surface);
@@ -524,7 +524,7 @@
     }
 
     .app__settings-modal__tabs {
-      border-inline-end: 1px solid var(--border-core-default);
+      border-inline-end: 1px solid var(--str-chat__border-core-default);
       border-bottom: 0;
       display: block;
       gap: 0;
diff --git a/examples/vite/src/CustomMessageActions/CustomMessageActions.scss b/examples/vite/src/CustomMessageActions/CustomMessageActions.scss
index 75c04173e2..d6004376aa 100644
--- a/examples/vite/src/CustomMessageActions/CustomMessageActions.scss
+++ b/examples/vite/src/CustomMessageActions/CustomMessageActions.scss
@@ -10,7 +10,7 @@
   .app__custom-delete-message-alert__options .str-chat__form__switch-field {
     display: flex;
     justify-content: space-between;
-    border: 1px solid var(--border-core-default);
+    border: 1px solid var(--str-chat__border-core-default);
     border-radius: 10px;
     padding: 6px 8px;
     font: var(--str-chat__metadata-emphasis-text);
diff --git a/examples/vite/src/SystemNotification/SystemNotification.scss b/examples/vite/src/SystemNotification/SystemNotification.scss
index 07fc12aac7..d33f0da5f1 100644
--- a/examples/vite/src/SystemNotification/SystemNotification.scss
+++ b/examples/vite/src/SystemNotification/SystemNotification.scss
@@ -3,18 +3,18 @@
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-xs, 8px);
-  padding-block: var(--spacing-xs, 8px);
-  padding-inline: var(--spacing-sm, 12px);
-  background: var(--background-core-surface-default, #ebeef1);
-  color: var(--chat-text-system, #414552);
+  gap: var(--str-chat__spacing-xs, 8px);
+  padding-block: var(--str-chat__spacing-xs, 8px);
+  padding-inline: var(--str-chat__spacing-sm, 12px);
+  background: var(--str-chat__background-core-surface-default, #ebeef1);
+  color: var(--str-chat__chat-text-system, #414552);
   font-feature-settings:
     'liga' off,
     'clig' off;
-  font-size: var(--typography-font-size-xs, 12px);
+  font-size: var(--str-chat__typography-font-size-xs, 12px);
   font-style: normal;
-  font-weight: var(--typography-font-weight-semi-bold, 600);
-  line-height: var(--typography-line-height-tight, 16px);
+  font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
+  line-height: var(--str-chat__typography-line-height-tight, 16px);
   animation: str-chat__system-notification-slide-in 300ms ease-out both;
   overflow: hidden;
   width: 100%;
diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss
index 1c6f188d64..170423b930 100644
--- a/examples/vite/src/index.scss
+++ b/examples/vite/src/index.scss
@@ -1,5 +1,7 @@
 @layer stream-new, stream-new-plugins, stream-overrides, stream-app-overrides;
 
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
+
 // v3 CSS import
 @import url('stream-chat-react/dist/css/index.css') layer(stream-new);
 @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
@@ -143,7 +145,7 @@ body {
     min-width: 1px;
     height: 100%;
     z-index: 1;
-    background: var(--border-core-default);
+    background: var(--str-chat__border-core-default);
   }
 
   .app-chat-resize-handle__hitbox {
diff --git a/src/components/Attachment/styling/Attachment.scss b/src/components/Attachment/styling/Attachment.scss
index 7634f1dea4..7a58886f09 100644
--- a/src/components/Attachment/styling/Attachment.scss
+++ b/src/components/Attachment/styling/Attachment.scss
@@ -173,8 +173,7 @@
         align-items: center;
         justify-content: space-between;
         column-gap: var(--str-chat__space-8);
-        font-weight: var(--str-chat__typography-font-weight-semi-bold);
-        font-size: var(--str-chat__typography-font-size-sm);
+        font: var(--str-chat__font-caption-emphasis);
 
         .str-chat__message-attachment-file--item__name,
         .str-chat__message-attachment-audio-widget--title {
@@ -184,7 +183,7 @@
       }
 
       .str-chat__message-attachment-file--item__data {
-        font-size: var(--str-chat__typography-font-size-xs);
+        font: var(--str-chat__font-metadata-default);
       }
     }
   }
diff --git a/src/components/Attachment/styling/AttachmentActions.scss b/src/components/Attachment/styling/AttachmentActions.scss
index 638ff4e4a3..0f7b4693d9 100644
--- a/src/components/Attachment/styling/AttachmentActions.scss
+++ b/src/components/Attachment/styling/AttachmentActions.scss
@@ -16,9 +16,7 @@
       white-space: nowrap;
       border-collapse: collapse;
 
-      font-size: var(--str-chat__typography-font-size-md);
-      font-weight: var(--str-chat__typography-font-weight-semi-bold);
-      line-height: var(--str-chat__typography-line-height-normal);
+      font: var(--str-chat__font-body-emphasis);
 
       &.str-chat__button {
         &:active {
diff --git a/src/components/Attachment/styling/Giphy.scss b/src/components/Attachment/styling/Giphy.scss
index 15bbc3a193..738915b48d 100644
--- a/src/components/Attachment/styling/Giphy.scss
+++ b/src/components/Attachment/styling/Giphy.scss
@@ -31,21 +31,19 @@ $gif-height: 200px;
 .str-chat__giphy-badge {
   display: inline-flex;
   height: 24px;
-  padding: var(--str-chat__spacing-xxxs, 2px) var(--str-chat__spacing-xs, 8px);
+  padding: var(--str-chat__spacing-xxxs) var(--str-chat__spacing-xs);
   justify-content: center;
   align-items: center;
-  gap: var(--str-chat__spacing-xxs, 4px);
+  gap: var(--str-chat__spacing-xxs);
   position: absolute;
   inset-inline-start: 8px;
   bottom: 8px;
 
-  border-radius: var(--str-chat__radius-lg, 12px);
-  background-color: var(--str-chat__badge-bg-overlay, rgba(0, 0, 0, 0.75));
-  color: var(--str-chat__badge-text-on-accent, #fff);
+  border-radius: var(--str-chat__radius-lg);
+  background-color: var(--str-chat__badge-bg-overlay);
+  color: var(--str-chat__badge-text-on-accent);
 
-  font-size: var(--str-chat__typography-font-size-xs, 12px);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-  line-height: var(--str-chat__typography-line-height-tight, 16px);
+  font: var(--str-chat__font-metadata-emphasis);
   text-transform: uppercase;
 }
 
@@ -66,8 +64,6 @@ $gif-height: 200px;
     align-self: stretch;
 
     color: var(--chat-text);
-    font-size: var(--str-chat__typography-font-size-sm);
-    font-weight: var(--str-chat__typography-font-weight-semi-bold);
-    line-height: var(--str-chat__typography-line-height-tight);
+    font: var(--str-chat__font-caption-emphasis);
   }
 }
diff --git a/src/components/Attachment/styling/LinkPreview.scss b/src/components/Attachment/styling/LinkPreview.scss
index c05214058b..e455e8405f 100644
--- a/src/components/Attachment/styling/LinkPreview.scss
+++ b/src/components/Attachment/styling/LinkPreview.scss
@@ -52,14 +52,12 @@
   }
 
   .str-chat__message-attachment-card--title {
-    @include utils.ellipsis-text;
-    font-size: var(--str-chat__typography-font-size-sm);
-    font-weight: var(--str-chat__typography-font-weight-semi-bold);
+    font: var(--str-chat__font-caption-emphasis);
   }
 
   .str-chat__message-attachment-card--source-link,
   .str-chat__message-attachment-card--text {
-    font-size: var(--str-chat__typography-font-size-xs);
+    font: var(--str-chat__font-metadata-default);
   }
 
   .str-chat__message-attachment-card--title,
@@ -69,6 +67,7 @@
 
   .str-chat__message-attachment-card--text {
     @include utils.ellipsis-text-clamp-lines();
+    font: var(--str-chat__font-metadata-default);
   }
 
   .str-chat__message-attachment-card--source-link {
diff --git a/src/components/Attachment/styling/UnsupportedAttachment.scss b/src/components/Attachment/styling/UnsupportedAttachment.scss
index a862dc37a4..cdfcc8a38b 100644
--- a/src/components/Attachment/styling/UnsupportedAttachment.scss
+++ b/src/components/Attachment/styling/UnsupportedAttachment.scss
@@ -1,5 +1,5 @@
 @use '../../../styling/utils';
-@use '../../../styling/variables/font' as font;
+@use '../../../styling/variables/fonts' as fonts;
 
 .str-chat__message-attachment-unsupported {
   background: transparent;
@@ -30,7 +30,7 @@
 
   .str-chat__message-attachment-unsupported__title {
     @include utils.ellipsis-text;
-    @include font.text-caption-emphasis;
+    @include fonts.text-caption-emphasis;
     max-width: 100%;
   }
 }
diff --git a/src/components/Avatar/styling/Avatar.scss b/src/components/Avatar/styling/Avatar.scss
index 83db515e43..d6c5dc5a80 100644
--- a/src/components/Avatar/styling/Avatar.scss
+++ b/src/components/Avatar/styling/Avatar.scss
@@ -7,11 +7,7 @@
   border-radius: var(--str-chat__radius-max);
   background: var(--str-chat__avatar-bg-default);
   color: var(--str-chat__avatar-text-default);
-  text-align: center;
 
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  font-style: normal;
-  line-height: 1;
   text-transform: uppercase;
   width: var(--avatar-size);
   height: var(--avatar-size);
@@ -89,7 +85,7 @@
     --avatar-icon-size: var(--str-chat__icon-size-lg);
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--str-chat__typography-font-size-xl);
+    font: var(--str-chat__font-heading-lg);
   }
 
   &.str-chat__avatar--size-xl {
@@ -98,7 +94,7 @@
     --avatar-icon-size: var(--str-chat__size-24); // TODO: missing icon size
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--str-chat__typography-font-size-xl);
+    font: var(--str-chat__font-heading-md);
   }
 
   &.str-chat__avatar--size-lg {
@@ -107,7 +103,7 @@
     --avatar-icon-size: var(--str-chat__icon-size-md);
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--str-chat__typography-font-size-md);
+    font: var(--str-chat__font-body-emphasis);
   }
 
   &.str-chat__avatar--size-md {
@@ -116,7 +112,7 @@
     --avatar-icon-size: var(--str-chat__icon-size-md);
     --avatar-icon-stroke-width: 1.5px;
 
-    font-size: var(--str-chat__typography-font-size-sm);
+    font: var(--str-chat__font-caption-emphasis);
   }
 
   &.str-chat__avatar--size-sm {
@@ -125,7 +121,7 @@
     --avatar-icon-size: var(--str-chat__icon-size-sm);
     --avatar-icon-stroke-width: 1.2px;
 
-    font-size: var(--str-chat__typography-font-size-sm);
+    font: var(--str-chat__font-caption-emphasis);
 
     .str-chat__avatar-status-badge {
       border-width: 1px;
@@ -138,7 +134,7 @@
     --avatar-icon-size: 10px;
     --avatar-icon-stroke-width: 1.2px;
 
-    font-size: var(--str-chat__typography-font-size-xs);
+    font: var(--str-chat__font-metadata-emphasis);
 
     .str-chat__avatar-status-badge {
       border-width: 1px;
diff --git a/src/components/Avatar/styling/GroupAvatar.scss b/src/components/Avatar/styling/GroupAvatar.scss
index 08d8de455a..881b0e5bb8 100644
--- a/src/components/Avatar/styling/GroupAvatar.scss
+++ b/src/components/Avatar/styling/GroupAvatar.scss
@@ -16,7 +16,7 @@
     --avatar-group-count-badge-size: 32px;
 
     & > .str-chat__avatar-group__count-badge {
-      font-size: var(--str-chat__typography-font-size-sm);
+      font: var(--str-chat__font-numeric-xl);
       padding-inline: var(--str-chat__spacing-xs);
     }
   }
@@ -27,7 +27,7 @@
     --avatar-group-count-badge-size: 24px;
 
     & > .str-chat__avatar-group__count-badge {
-      font-size: var(--str-chat__typography-font-size-sm);
+      font: var(--str-chat__font-numeric-xl);
       padding-inline: var(--str-chat__spacing-xs);
     }
   }
@@ -38,7 +38,7 @@
     --avatar-group-count-badge-size: 20px;
 
     & > .str-chat__avatar-group__count-badge {
-      font-size: var(--str-chat__typography-font-size-xxs);
+      font: var(--str-chat__font-numeric-md);
       padding-inline: var(--str-chat__spacing-xxs);
     }
   }
@@ -90,13 +90,11 @@
     height: var(--avatar-group-count-badge-size);
     min-width: var(--avatar-group-count-badge-size);
     min-height: var(--avatar-group-count-badge-size);
-    font-weight: var(--str-chat__typography-font-weight-bold);
-    font-family: var(--str-chat__typography-font-family-sans);
     justify-content: center;
     align-items: center;
     border-radius: var(--str-chat__radius-max);
     background: var(--str-chat__badge-bg-default);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
+    box-shadow: var(--str-chat__box-shadow-2);
   }
 
   &:has(> :last-child:nth-child(4)) {
diff --git a/src/components/Badge/styling/Badge.scss b/src/components/Badge/styling/Badge.scss
index a2eb9dc45e..c2de97dea5 100644
--- a/src/components/Badge/styling/Badge.scss
+++ b/src/components/Badge/styling/Badge.scss
@@ -49,7 +49,6 @@
   min-height: 16px;
   padding-inline: var(--str-chat__spacing-xxxs);
   border-width: 1px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--size-md {
@@ -58,7 +57,6 @@
   min-height: 20px;
   padding-inline: var(--str-chat__spacing-xxs);
   border-width: 2px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--size-lg {
@@ -67,22 +65,20 @@
   min-height: 24px;
   padding-inline: var(--str-chat__spacing-xs);
   border-width: 2px;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
 }
 
 .str-chat__badge--variant-counter {
   border-radius: var(--str-chat__radius-max);
   border: 1px solid var(--str-chat__border-core-subtle);
   background: var(--str-chat__badge-bg-default);
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
   font: var(--str-chat__font-numeric-xl);
   color: var(--str-chat__badge-text);
+  box-shadow: var(--str-chat__box-shadow-2);
 
   &.str-chat__badge--size-xs {
     min-width: 20px;
     min-height: 20px;
     padding-inline: var(--str-chat__spacing-xxs);
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14);
     font: var(--str-chat__font-numeric-md);
   }
 
diff --git a/src/components/ChannelListItem/styling/ChannelListItem.scss b/src/components/ChannelListItem/styling/ChannelListItem.scss
index 89df6cd9c8..10d61e8c9f 100644
--- a/src/components/ChannelListItem/styling/ChannelListItem.scss
+++ b/src/components/ChannelListItem/styling/ChannelListItem.scss
@@ -1,5 +1,4 @@
 .str-chat__channel-list-item-container {
-  // display: flex;
   padding: var(--str-chat__spacing-xxs);
   position: relative;
 
@@ -15,13 +14,10 @@
     position: absolute;
     gap: var(--str-chat__spacing-xs);
 
-    border-radius: var(--str-chat__radius-md, 8px);
-    background: var(--str-chat__background-core-elevation-3, #fff);
+    border-radius: var(--str-chat__radius-md);
+    background: var(--str-chat__background-core-elevation-3);
 
-    box-shadow:
-      0 0 0 1px rgba(0, 0, 0, 0.05),
-      0 2px 4px 0 rgba(0, 0, 0, 0.12),
-      0 6px 16px 0 rgba(0, 0, 0, 0.06);
+    box-shadow: var(--str-chat__box-shadow-2);
 
     inset-inline-end: 10px;
     top: 10px;
@@ -49,7 +45,6 @@
   background: none;
   cursor: pointer;
   text-align: start;
-  font-family: var(--str-chat__typography-font-family-sans);
   border-radius: var(--str-chat__radius-lg);
   width: 100%;
 
@@ -90,9 +85,7 @@
         display: flex;
         align-items: inherit;
         gap: var(--str-chat__spacing-xxs);
-        font-size: var(--str-chat__typography-font-size-sm);
-        font-weight: var(--str-chat__typography-font-weight-semi-bold);
-        line-height: var(--str-chat__typography-line-height-normal);
+        font: var(--str-chat__font-caption-emphasis);
         color: var(--str-chat__text-primary);
 
         & > span {
@@ -115,10 +108,8 @@
         gap: var(--str-chat__spacing-xs);
 
         .str-chat__channel-list-item-timestamp {
-          font-weight: var(--str-chat__typography-font-weight-regular);
-          font-size: var(--str-chat__typography-font-size-sm);
+          font: var(--str-chat__font-caption-default);
           color: var(--str-chat__text-tertiary);
-          line-height: var(--str-chat__typography-line-height-normal);
         }
       }
     }
diff --git a/src/components/Dialog/styling/ContextMenu.scss b/src/components/Dialog/styling/ContextMenu.scss
index 6306bf1c31..9be7229b75 100644
--- a/src/components/Dialog/styling/ContextMenu.scss
+++ b/src/components/Dialog/styling/ContextMenu.scss
@@ -91,9 +91,7 @@
     .str-chat__context-menu__header {
       width: 100%;
       color: var(--str-chat__text-tertiary);
-      font-size: var(--str-chat__typography-font-size-sm);
-      font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-caption-emphasis);
     }
 
     .str-chat__context-menu__back-button {
@@ -109,10 +107,7 @@
       border-radius: var(--str-chat__radius-md);
 
       color: var(--str-chat__text-tertiary);
-
-      font-size: var(--str-chat__typography-font-size-sm);
-      font-weight: var(--str-chat__typography-font-weight-semi-bold, 600);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-caption-emphasis);
 
       &:hover:not(:disabled) {
         background-color: var(--str-chat__background-utility-hover);
@@ -180,10 +175,7 @@
       width: 100%;
       padding: var(--str-chat__spacing-xs);
       cursor: pointer;
-
-      font-size: var(--str-chat__typography-font-size-sm);
-      font-weight: var(--str-chat__typography-font-weight-semi-bold);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-caption-emphasis);
 
       &.str-chat__context-menu__button--destructive {
         .str-chat__context-menu__button__label,
@@ -226,14 +218,23 @@
       .str-chat__context-menu__button__details {
         flex: 1;
         color: var(--str-chat__text-tertiary);
-        font-weight: var(--str-chat__typography-font-weight-regular);
+        font: var(--str-chat__font-caption-default);
         white-space: nowrap;
       }
     }
 
     .str-chat__emoji-context-menu__button,
     .str-chat__user-context-menu__button {
-      font-weight: var(--str-chat__typography-font-weight-regular, 400);
+      font: var(--str-chat__font-caption-default);
+      .str-chat__context-menu__button__emoji {
+        font-size: var(--str-chat__typography-font-size-md);
+        width: var(--str-chat__typography-font-size-md);
+        height: var(--str-chat__typography-font-size-md);
+        line-height: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 
diff --git a/src/components/Form/styling/TextInput.scss b/src/components/Form/styling/TextInput.scss
index e418a7be55..61783c7de8 100644
--- a/src/components/Form/styling/TextInput.scss
+++ b/src/components/Form/styling/TextInput.scss
@@ -5,9 +5,7 @@
 }
 
 .str-chat__form-text-input__label {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-medium);
-  line-height: var(--str-chat__typography-line-height-tight);
+  font: var(--str-chat__font-heading-xs);
   color: var(--str-chat__text-primary);
 }
 
@@ -43,8 +41,8 @@
 }
 
 .str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--outline {
-  border: 1px solid var(--input-border-focus);
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  // border: 1px solid var(--input-border-focus);
+  box-shadow: 0 0 0 2px var(--str-chat__border-utility-focused);
 }
 
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--outline {
@@ -65,8 +63,8 @@
 
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside
   .str-chat__form-text-input__wrapper--outline {
-  border: 1px solid var(--input-border-focus);
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  // border: 1px solid var(--input-border-focus);
+  box-shadow: 0 0 0 2px var(--str-chat__border-utility-focused);
 }
 
 .str-chat__form-text-input--disabled .str-chat__form-text-input__wrapper--outline {
@@ -83,7 +81,7 @@
 
 .str-chat__form-text-input:focus-within .str-chat__form-text-input__wrapper--ghost {
   border: none;
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__border-utility-focused);
 }
 
 .str-chat__form-text-input--error .str-chat__form-text-input__wrapper--ghost {
@@ -106,7 +104,7 @@
 .str-chat__form-text-input:focus-within.str-chat__form-text-input--error.str-chat__form-text-input--field-message-inside
   .str-chat__form-text-input__wrapper--ghost {
   border: none;
-  box-shadow: 0 0 0 2px var(--border-utility-focus, #c3d9ff);
+  box-shadow: 0 0 0 2px var(--str-chat__border-utility-focused);
 }
 
 // ---------------------------------------------------------------------------
diff --git a/src/components/Form/styling/TextInputFieldset.scss b/src/components/Form/styling/TextInputFieldset.scss
index df60618ea2..e396ed1f02 100644
--- a/src/components/Form/styling/TextInputFieldset.scss
+++ b/src/components/Form/styling/TextInputFieldset.scss
@@ -4,9 +4,7 @@
   border: none;
 
   .str-chat__form__input-fieldset__label {
-    font-size: var(--str-chat__typography-font-size-sm);
-    font-weight: var(--str-chat__typography-font-weight-medium);
-    line-height: var(--str-chat__typography-line-height-tight);
+    font: var(--str-chat__font-heading-xs);
     color: var(--str-chat__text-primary);
   }
 
diff --git a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss
index e07caf49a2..f1f485ec6f 100644
--- a/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss
+++ b/src/components/MediaRecorder/AudioRecorder/styling/AudioRecorder.scss
@@ -25,9 +25,7 @@
       display: flex;
       align-items: center;
       width: 2.75rem;
-      font-size: var(--str-chat__typography-font-size-sm);
-      font-weight: var(--str-chat__typography-font-weight-semi-bold);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-caption-emphasis);
     }
 
     .str-chat__recording-timer--hours {
diff --git a/src/components/Message/styling/Message.scss b/src/components/Message/styling/Message.scss
index 4eadb9a1ea..8124a2e42c 100644
--- a/src/components/Message/styling/Message.scss
+++ b/src/components/Message/styling/Message.scss
@@ -2,6 +2,7 @@
 
 $message-active-background-color: transparent;
 $message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1);
+$message-bubble-padding: var(--str-chat__spacing-xs);
 
 .str-chat {
   /* The width/height of the message options button(s) */
@@ -70,7 +71,7 @@ $message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1);
     display: flex;
     flex-direction: column;
     gap: var(--str-chat__spacing-xs);
-    padding: var(--str-chat__spacing-xs);
+    padding: $message-bubble-padding;
   }
 
   .str-chat__message-options {
@@ -395,6 +396,9 @@ $message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1);
 
       .str-chat__message-text {
         @include chat-bubble-spacing;
+        border-radius: calc(
+          var(--str-chat__message-bubble-radius-group-bottom) - #{$message-bubble-padding}
+        );
 
         .str-chat__message-text-inner {
           @include utils.prevent-glitch-text-overflow;
@@ -611,12 +615,18 @@ $message-reactions-host-offset-x: calc(var(--str-chat__spacing-xs) * -1);
   .str-chat__message--other {
     .str-chat__message-bubble {
       border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
+      .str-chat__message-text {
+        border-end-start-radius: var(--str-chat__message-bubble-radius-tail);
+      }
     }
   }
 
   .str-chat__message--me {
     .str-chat__message-bubble {
       border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
+      .str-chat__message-text {
+        border-end-end-radius: var(--str-chat__message-bubble-radius-tail);
+      }
     }
   }
 }
diff --git a/src/components/MessageComposer/styling/AttachmentPreview.scss b/src/components/MessageComposer/styling/AttachmentPreview.scss
index 35b983461d..ceefe5afb2 100644
--- a/src/components/MessageComposer/styling/AttachmentPreview.scss
+++ b/src/components/MessageComposer/styling/AttachmentPreview.scss
@@ -224,9 +224,7 @@ $attachment-preview-row-height: 72px;
     .str-chat__attachment-preview-file-name {
       @include utils.ellipsis-text;
       max-width: 100%;
-      font-weight: var(--str-chat__typography-font-weight-semi-bold);
-      font-size: var(--str-chat__typography-font-size-sm);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-caption-emphasis);
     }
 
     .str-chat__attachment-preview-file__data {
@@ -236,9 +234,7 @@ $attachment-preview-row-height: 72px;
       max-width: 100%;
       gap: var(--str-chat__spacing-xxs);
       color: var(--str-chat__text-secondary);
-      font-weight: var(--str-chat__typography-font-weight-regular);
-      font-size: var(--str-chat__typography-font-size-xs);
-      line-height: var(--str-chat__typography-line-height-tight);
+      font: var(--str-chat__font-metadata-default);
 
       .str-chat__loading-indicator,
       .str-chat__progress-indicator {
diff --git a/src/components/MessageComposer/styling/QuotedMessagePreview.scss b/src/components/MessageComposer/styling/QuotedMessagePreview.scss
index 243a5d012c..f1c2a76f9a 100644
--- a/src/components/MessageComposer/styling/QuotedMessagePreview.scss
+++ b/src/components/MessageComposer/styling/QuotedMessagePreview.scss
@@ -24,14 +24,13 @@
       justify-content: center;
       flex: 1;
       min-width: 0;
-      font-size: var(--str-chat__typography-font-size-xs);
-      line-height: var(--str-chat__typography-line-height-tight);
       height: 40px; // to keep the same height even though the image preview is missing (it has 40px height)
+      font: var(--str-chat__font-caption-default);
 
       .str-chat__quoted-message-preview__author {
         @include utils.ellipsis-text();
         overflow-x: hidden; // force ellipsis to show
-        font-weight: var(--str-chat__typography-font-weight-semi-bold);
+        font: var(--str-chat__font-caption-emphasis);
       }
 
       .str-chat__quoted-message-preview__message {
diff --git a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss
index 36dc58d43e..ca8aa193f6 100644
--- a/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss
+++ b/src/components/MessageComposer/styling/UnsupportedAttachmentPreview.scss
@@ -1,5 +1,5 @@
 @use '../../../styling/utils';
-@use '../../../styling/variables/font' as font;
+@use '../../../styling/variables/fonts' as fonts;
 
 .str-chat__attachment-preview-unsupported {
   background: transparent;
@@ -30,7 +30,7 @@
 
   .str-chat__attachment-preview-unsupported__title {
     @include utils.ellipsis-text;
-    @include font.text-caption-emphasis;
+    @include fonts.text-caption-emphasis;
     max-width: 100%;
     height: fit-content;
   }
diff --git a/src/components/Reactions/styling/MessageReactions.scss b/src/components/Reactions/styling/MessageReactions.scss
index b4ff58f0d9..b278708b40 100644
--- a/src/components/Reactions/styling/MessageReactions.scss
+++ b/src/components/Reactions/styling/MessageReactions.scss
@@ -27,7 +27,6 @@
     .str-chat__message-reactions__list-item-icon {
       font-family: system-ui;
       font-size: var(--str-chat__font-size-size-17);
-      font-style: normal;
       line-height: var(--str-chat__typography-line-height-normal);
     }
 
diff --git a/src/components/Reactions/styling/MessageReactionsDetail.scss b/src/components/Reactions/styling/MessageReactionsDetail.scss
index d426b08235..b8f28634a2 100644
--- a/src/components/Reactions/styling/MessageReactionsDetail.scss
+++ b/src/components/Reactions/styling/MessageReactionsDetail.scss
@@ -26,12 +26,8 @@
     min-width: unset;
   }
 
-  font-family: var(--str-chat__typography-font-family-sans);
-
   box-shadow: var(--str-chat__box-shadow-3);
-
   padding-block-start: var(--str-chat__spacing-xxs);
-
   display: flex;
   flex-direction: column;
   gap: var(--str-chat__spacing-xxxs);
@@ -45,9 +41,7 @@
     max-height: var(--str-chat__size-32);
 
     color: var(--str-chat__text-tertiary);
-    font-size: var(--str-chat__typography-font-size-sm);
-    font-weight: var(--str-chat__typography-font-weight-medium);
-    line-height: var(--str-chat__typography-line-height-normal);
+    font: var(--str-chat__font-heading-xs);
   }
 
   .str-chat__message-reactions-detail__reaction-type-list {
@@ -72,7 +66,6 @@
         .str-chat__message-reactions-detail__reaction-type-list-item-icon {
           font-family: system-ui;
           font-size: var(--str-chat__font-size-size-17);
-          font-style: normal;
           line-height: var(--str-chat__typography-line-height-normal);
 
           .str-chat__icon {
@@ -145,7 +138,6 @@
       .str-chat__message-reactions-detail__user-list-item-icon {
         font-family: system-ui;
         font-size: var(--str-chat__font-size-size-17);
-        font-style: normal;
         line-height: var(--str-chat__typography-line-height-normal);
       }
 
@@ -157,9 +149,7 @@
 
         .str-chat__message-reactions-detail__user-list-item-username {
           color: var(--str-chat__text-primary);
-          font-size: var(--str-chat__typography-font-size-sm);
-          font-weight: var(--str-chat__typography-font-weight-regular);
-          line-height: var(--str-chat__typography-line-height-normal);
+          font: var(--str-chat__font-caption-default);
         }
 
         .str-chat__message-reactions-detail__user-list-item-button {
diff --git a/src/components/Reactions/styling/ReactionSelector.scss b/src/components/Reactions/styling/ReactionSelector.scss
index 32bd011e8c..d6857cbbe4 100644
--- a/src/components/Reactions/styling/ReactionSelector.scss
+++ b/src/components/Reactions/styling/ReactionSelector.scss
@@ -76,11 +76,13 @@
 
       .str-chat__reaction-icon {
         font-size: var(--str-chat__typography-font-size-2xl);
-        line-height: 1;
+        height: var(--str-chat__typography-font-size-2xl);
+        width: var(--str-chat__typography-font-size-2xl);
+        font-family: system-ui;
+        line-height: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        font-family: system-ui, sans-serif;
       }
     }
   }
diff --git a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss
index 30d5b9c834..a12201e6fb 100644
--- a/src/components/Reactions/styling/ReactionSelectorExtendedList.scss
+++ b/src/components/Reactions/styling/ReactionSelectorExtendedList.scss
@@ -10,8 +10,6 @@
       height: var(--str-chat__emoji-md);
       width: var(--str-chat__emoji-md);
       font-size: var(--str-chat__emoji-md);
-      letter-spacing: var(--typography-letter-spacing-default);
-      font-style: normal;
       line-height: 0;
       font-family: system-ui;
       display: flex;
diff --git a/src/components/Reactions/styling/common.scss b/src/components/Reactions/styling/common.scss
index 7b73b9f8f9..274f0087ac 100644
--- a/src/components/Reactions/styling/common.scss
+++ b/src/components/Reactions/styling/common.scss
@@ -15,7 +15,7 @@
   border: 1px solid var(--str-chat__reaction-border);
   background: var(--str-chat__reaction-bg);
   color: var(--str-chat__reaction-text);
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: var(--str-chat__box-shadow-3);
   font-weight: inherit;
   font-size: inherit;
   line-height: 1;
diff --git a/src/components/Search/styling/Search.scss b/src/components/Search/styling/Search.scss
index 09653432f9..112c9bf242 100644
--- a/src/components/Search/styling/Search.scss
+++ b/src/components/Search/styling/Search.scss
@@ -19,9 +19,7 @@
     border-radius: var(--str-chat__radius-max);
     border: 1px solid var(--str-chat__border-core-default);
     color: var(--str-chat__input-text-placeholder);
-    font: var(--str_chat__heading-xs-text);
-    // FIXME: there's no proper variation so we need to adjust font-weight separately
-    font-weight: var(--str-chat__typography-font-weight-regular);
+    font: var(--str-chat__font-caption-default);
     flex-shrink: 1;
     flex-grow: 1;
 
@@ -102,7 +100,7 @@
           text-align: start;
 
           .str-chat__search-result__display-name {
-            font: var(--str-chat__font-heading-xs);
+            font: var(--str-chat__font-caption-emphasis);
             color: var(--str-chat__text-primary);
             flex: 1;
             min-width: 0;
@@ -117,10 +115,8 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
-            font-weight: var(--str-chat__typography-font-weight-regular);
-            font-size: var(--str-chat__typography-font-size-sm);
             color: var(--str-chat__text-tertiary);
-            line-height: var(--str-chat__typography-line-height-normal);
+            font: var(--str-chat__font-caption-default);
           }
         }
 
@@ -142,7 +138,7 @@
 .str-chat__search-source-result-list__footer,
 .str-chat__search-results-presearch,
 .str-chat__search-source-results-empty {
-  font-size: var(--str-chat__typography-font-size-sm);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-tertiary);
   padding-block: var(--str-chat__spacing-xs);
   display: flex;
diff --git a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss
index 6449fb48c2..6bf425fde1 100644
--- a/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss
+++ b/src/components/SummarizedMessagePreview/styling/SummarizedMessagePreview.scss
@@ -8,10 +8,7 @@
   min-width: 0;
 
   color: var(--str-chat__text-secondary);
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-style: normal;
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
 
   .str-chat__icon {
     flex-shrink: 0;
@@ -48,7 +45,7 @@
 
   .str-chat__summarized-message-preview__sender {
     color: var(--str-chat__text-tertiary);
-    font-weight: var(--str-chat__typography-font-weight-semi-bold);
+    font: var(--str-chat__font-caption-emphasis);
 
     white-space: nowrap;
     overflow: hidden;
diff --git a/src/components/TextareaComposer/styling/SuggestionList.scss b/src/components/TextareaComposer/styling/SuggestionList.scss
index df6da07ea2..026bb0ebf7 100644
--- a/src/components/TextareaComposer/styling/SuggestionList.scss
+++ b/src/components/TextareaComposer/styling/SuggestionList.scss
@@ -4,7 +4,8 @@
   .str-chat__suggestion-list {
     max-height: 320px;
     min-width: 200px;
-    @include utils.scrollable-y;
+    overflow-y: auto;
+    scrollbar-width: none;
 
     .str-chat__suggestion-list-item--selected {
       background-color: var(--str-chat__dialog-menu-button-hover-background-color);
diff --git a/src/components/Threads/ThreadList/styling/ThreadList.scss b/src/components/Threads/ThreadList/styling/ThreadList.scss
index dfa4b75bb3..d5cda46bcb 100644
--- a/src/components/Threads/ThreadList/styling/ThreadList.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadList.scss
@@ -120,8 +120,6 @@
   p {
     margin: 0;
     color: var(--str-chat__text-secondary);
-    font-size: var(--str-chat__typography-font-size-sm);
-    font-weight: var(--str-chat__typography-font-weight-regular);
-    line-height: var(--str-chat__typography-line-height-normal);
+    font: var(--str-chat__font-caption-default);
   }
 }
diff --git a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
index d81448042a..2bf96fff5f 100644
--- a/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
+++ b/src/components/Threads/ThreadList/styling/ThreadListItemUI.scss
@@ -62,12 +62,17 @@
   flex-direction: column;
   gap: var(--str-chat__spacing-xxs);
   padding-block: var(--str-chat__spacing-xxxs);
+
+  .str-chat__summarized-message-preview {
+    font: var(--str-chat__font-body-default);
+    .str-chat__summarized-message-preview__sender {
+      font: var(--str-chat__font-body-emphasis);
+    }
+  }
 }
 
 .str-chat__thread-list-item__title {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-tertiary);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -87,9 +92,7 @@
 }
 
 .str-chat__thread-list-item__reply-count {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-semi-bold);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-emphasis);
   color: var(--str-chat__text-link);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -97,9 +100,7 @@
 }
 
 .str-chat__thread-list-item__timestamp {
-  font-size: var(--str-chat__typography-font-size-sm);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-caption-default);
   color: var(--str-chat__text-tertiary);
   white-space: nowrap;
   min-width: 0;
diff --git a/src/styling/base.scss b/src/styling/base.scss
index 1fc01b23d7..c08e56e85e 100644
--- a/src/styling/base.scss
+++ b/src/styling/base.scss
@@ -1,8 +1,5 @@
 .str-chat {
-  font-family: var(--str-chat__font-family);
-  font-size: var(--str-chat__typography-font-size-md);
-  font-weight: var(--str-chat__typography-font-weight-regular);
-  line-height: var(--str-chat__typography-line-height-normal);
+  font: var(--str-chat__font-body-default);
   letter-spacing: var(--typography-letter-spacing-default);
   color: var(--str-chat__text-primary);
 
diff --git a/src/styling/fonts.scss b/src/styling/fonts.scss
deleted file mode 100644
index 1cc38c241e..0000000000
--- a/src/styling/fonts.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
diff --git a/src/styling/index.scss b/src/styling/index.scss
index a61fc55d8f..ecadbc7541 100644
--- a/src/styling/index.scss
+++ b/src/styling/index.scss
@@ -1,10 +1,9 @@
 // Base styles
 @use 'accessibility';
 @use 'animations';
-@use 'variables-tokens';
+@use 'variable-tokens';
 @use 'variables';
 @use 'base';
-@use 'fonts';
 
 // alias is necessary to allow sass create namespaces with different names (and not same name styling)
 @use '../components/Icons/styling' as Icons;
diff --git a/src/styling/variables-tokens.scss b/src/styling/variable-tokens.scss
similarity index 100%
rename from src/styling/variables-tokens.scss
rename to src/styling/variable-tokens.scss
diff --git a/src/styling/variables-import.css b/src/styling/variables-import.css
deleted file mode 100644
index caf8687d71..0000000000
--- a/src/styling/variables-import.css
+++ /dev/null
@@ -1,525 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.str-chat {
-    --base-transparent-0: rgba(255, 255, 255, 0);
-    --base-transparent-white-10: rgba(255, 255, 255, 0.1);
-    --base-transparent-white-20: rgba(255, 255, 255, 0.2);
-    --base-transparent-white-30: rgba(255, 255, 255, 0.3);
-    --base-transparent-white-70: rgba(255, 255, 255, 0.7);
-    --base-transparent-black-5: rgba(0, 0, 0, 0.05); /** Used for bg in closeButton */
-    --base-transparent-black-10: rgba(0, 0, 0, 0.1); /** Used for bg in closeButton */
-    --base-transparent-black-70: rgba(0, 0, 0, 0.7); /** Used for bg in closeButton */
-    --base-black: #000000;
-    --base-white: #ffffff;
-    --slate-50: #f6f8fa;
-    --slate-100: #ebeef1;
-    --slate-150: #d5dbe1;
-    --slate-200: #c0c8d2;
-    --slate-300: #a3acba;
-    --slate-400: #87909f;
-    --slate-500: #687385;
-    --slate-600: #545969;
-    --slate-700: #414552;
-    --slate-800: #30313d;
-    --slate-900: #1a1b25;
-    --neutral-50: #f8f8f8;
-    --neutral-100: #efefef;
-    --neutral-150: #d8d8d8;
-    --neutral-200: #c4c4c4;
-    --neutral-300: #ababab;
-    --neutral-400: #8f8f8f;
-    --neutral-500: #6a6a6a;
-    --neutral-600: #565656;
-    --neutral-700: #464646;
-    --neutral-800: #323232;
-    --neutral-900: #1c1c1c;
-    --blue-50: #f3f7ff;
-    --blue-100: #e3edff;
-    --blue-150: #c3d9ff;
-    --blue-200: #a5c5ff;
-    --blue-300: #78a8ff;
-    --blue-400: #4586ff;
-    --blue-500: #005fff;
-    --blue-600: #1b53bd;
-    --blue-700: #19418d;
-    --blue-800: #142f63;
-    --blue-900: #091a3b;
-    --cyan-50: #f1fbfc;
-    --cyan-100: #d1f3f6;
-    --cyan-150: #a9e4ea;
-    --cyan-200: #72d7e0;
-    --cyan-300: #45bcc7;
-    --cyan-400: #1e9ea9;
-    --cyan-500: #248088;
-    --cyan-600: #006970;
-    --cyan-700: #065056;
-    --cyan-800: #003a3f;
-    --cyan-900: #002124;
-    --green-50: #e1ffee;
-    --green-100: #bdfcdb;
-    --green-150: #8febbd;
-    --green-200: #59dea3;
-    --green-300: #00c384;
-    --green-400: #00a46e;
-    --green-500: #277e59;
-    --green-600: #006643;
-    --green-700: #004f33;
-    --green-800: #003a25;
-    --green-900: #002213;
-    --purple-50: #f7f8ff;
-    --purple-100: #ecedff;
-    --purple-150: #d4d7ff;
-    --purple-200: #c1c5ff;
-    --purple-300: #a1a3ff;
-    --purple-400: #8482fc;
-    --purple-500: #644af9;
-    --purple-600: #553bd8;
-    --purple-700: #4032a1;
-    --purple-800: #2e2576;
-    --purple-900: #1a114d;
-    --yellow-50: #fef9da;
-    --yellow-100: #fcedb9;
-    --yellow-150: #fcd579;
-    --yellow-200: #f6bf57;
-    --yellow-300: #fa922b;
-    --yellow-400: #f26d10;
-    --yellow-500: #c84801;
-    --yellow-600: #a82c00;
-    --yellow-700: #842106;
-    --yellow-800: #5f1a05;
-    --yellow-900: #331302;
-    --red-50: #fff5fa;
-    --red-100: #ffe7f2;
-    --red-150: #ffccdf;
-    --red-200: #ffb1cd;
-    --red-300: #fe87a1;
-    --red-400: #fc526a;
-    --red-500: #d90d10;
-    --red-600: #b3093c;
-    --red-700: #890d37;
-    --red-800: #68052b;
-    --red-900: #3e021a;
-    --violet-50: #fef4ff;
-    --violet-100: #fbe8fe;
-    --violet-150: #f7cffc;
-    --violet-200: #eeb5f4;
-    --violet-300: #e68bec;
-    --violet-400: #d75fe7;
-    --violet-500: #b716ca;
-    --violet-600: #9d00ae;
-    --violet-700: #7c0089;
-    --violet-800: #5c0066;
-    --violet-900: #36003d;
-    --lime-50: #f1fde8;
-    --lime-100: #d4ffb0;
-    --lime-150: #b1ee79;
-    --lime-200: #9cda5d;
-    --lime-300: #78c100;
-    --lime-400: #639e11;
-    --lime-500: #4b7a0a;
-    --lime-600: #3e6213;
-    --lime-700: #355315;
-    --lime-800: #203a00;
-    --lime-900: #112100;
-    --size-2: 2px;
-    --size-4: 4px;
-    --size-6: 6px;
-    --size-8: 8px;
-    --size-12: 12px;
-    --size-16: 16px;
-    --size-20: 20px;
-    --size-24: 24px;
-    --size-32: 32px;
-    --size-40: 40px;
-    --size-48: 48px;
-    --size-64: 64px;
-    --size-28: 28px;
-    --size-80: 80px;
-    --size-128: 128px;
-    --size-240: 240px;
-    --size-320: 320px;
-    --size-480: 480px;
-    --size-560: 560px;
-    --size-640: 640px;
-    --size-760: 760px;
-    --size-144: 144px;
-    --size-208: 208px;
-    --size-56: 56px;
-    --radius-0: 0;
-    --radius-2: 2px;
-    --radius-4: 4px;
-    --radius-6: 6px;
-    --radius-8: 8px;
-    --radius-12: 12px;
-    --radius-16: 16px;
-    --radius-20: 20px;
-    --radius-24: 24px;
-    --radius-32: 32px;
-    --radius-full: 9999px;
-    --space-0: 0;
-    --space-2: 2px;
-    --space-4: 4px;
-    --space-8: 8px;
-    --space-12: 12px;
-    --space-16: 16px;
-    --space-20: 20px;
-    --space-24: 24px;
-    --space-32: 32px;
-    --space-40: 40px;
-    --space-48: 48px;
-    --space-64: 64px;
-    --space-80: 80px;
-    --w100: 1;
-    --w150: 1.5;
-    --w200: 2;
-    --w300: 3;
-    --w400: 4;
-    --w120: 1.2;
-    --font-family-geist: "Geist"; /** Primary sans-serif font for web typography. Use Geist as the main typeface. Recommended fallbacks: system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
-    --font-family-geist-mono: "Geist Mono"; /** Primary monospace font for web typography. Use Geist Mono for code, timestamps, and technical text. Recommended fallbacks: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
-    --font-family-sf-pro: "SF Pro"; /** Primary sans-serif font for iOS typography. Use SF Pro as the main typeface. Recommended fallbacks: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif. */
-    --font-family-sf-mono: "SF Mono"; /** Primary monospace font for iOS typography. Use SF Mono for code, timestamps, and technical text. Recommended fallbacks: SFMono-Regular, Menlo, Monaco, Consolas, monospace. */
-    --font-family-roboto: "Roboto"; /** Primary sans-serif font for Android typography. Use Roboto as the main typeface, aligned with Material and system defaults. Recommended fallbacks: Roboto, “Noto Sans”, system-ui, sans-serif. */
-    --font-family-roboto-mono: "Roboto Mono"; /** Primary monospace font for Android typography. Use Roboto Mono for code, timestamps, and technical text. Recommended fallbacks: Roboto Mono, “Noto Sans Mono”, monospace. */
-    --font-weight-w400: 400;
-    --font-weight-w500: 500;
-    --font-weight-w600: 600;
-    --font-weight-w700: 700;
-    --font-size-size-8: 8px;
-    --font-size-size-10: 10px;
-    --font-size-size-11: 11px;
-    --font-size-size-12: 12px;
-    --font-size-size-13: 13px;
-    --font-size-size-14: 14px;
-    --font-size-size-16: 16px;
-    --font-size-size-15: 15px;
-    --font-size-size-17: 17px;
-    --font-size-size-18: 18px;
-    --font-size-size-20: 20px;
-    --font-size-size-22: 22px;
-    --font-size-size-24: 24px;
-    --font-size-size-28: 28px;
-    --font-size-size-32: 32px;
-    --font-size-size-40: 40px;
-    --font-size-size-48: 48px;
-    --font-size-size-64: 64px;
-    --line-height-line-height-8: 8px;
-    --line-height-line-height-10: 10px;
-    --line-height-line-height-12: 12px;
-    --line-height-line-height-13: 13px;
-    --line-height-line-height-14: 14px;
-    --line-height-line-height-15: 15px;
-    --line-height-line-height-16: 16px;
-    --line-height-line-height-17: 17px;
-    --line-height-line-height-18: 18px;
-    --line-height-line-height-20: 20px;
-    --line-height-line-height-24: 24px;
-    --line-height-line-height-28: 28px;
-    --line-height-line-height-32: 32px;
-    --line-height-line-height-40: 40px;
-    --line-height-line-height-48: 48px;
-    --typography-font-family-sans: "Geist";
-    --typography-font-family-mono: "Geist Mono";
-    --typography-font-weight-regular: 400;
-    --typography-font-weight-medium: 500;
-    --typography-font-weight-semi-bold: 600;
-    --typography-font-weight-bold: 700;
-    --typography-font-size-xxs: 10px; /** Micro text such as timestamps or subtle metadata. */
-    --typography-font-size-xs: 12px; /** Compact secondary text, small UI labels. */
-    --typography-font-size-sm: 14px; /** Default mobile body size, small controls. */
-    --typography-font-size-md: 16px; /** Default desktop body size, main text. */
-    --typography-font-size-lg: 18px; /** Medium emphasis, section labels. */
-    --typography-font-size-xl: 20px; /** Small headings. */
-    --typography-font-size-2xl: 24px; /** Section titles, important headings. */
-    --typography-font-size-micro: 8px; /** Micro text such as timestamps or subtle metadata. */
-    --typography-line-height-tight: 16px; /** Compact text, headers, UI labels. */
-    --typography-line-height-normal: 20px; /** Default reading line-height for sizes 14–16px. */
-    --typography-line-height-relaxed: 24px; /** For larger text sizes or multiline descriptions. */
-    --light-elevation-1: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.06); /** Low elevation level for subtle separation. */
-    --light-elevation-2: 0 0 0 1px rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.12), 0 6px 16px 0 rgba(0,0,0,0.06);
-    --light-elevation-3: 0 0 0 1px rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.14), 0 12px 24px 0 rgba(0,0,0,0.1);
-    --light-elevation-4: 0 0 0 1px rgba(0,0,0,0.05), 0 6px 12px 0 rgba(0,0,0,0.16), 0 20px 32px 0 rgba(0,0,0,0.12);
-    --dark-elevation-1: 0 0 0 1px rgba(255,255,255,0.15), 0 1px 2px 0 rgba(0,0,0,0.2), 0 4px 8px 0 rgba(0,0,0,0.1);
-    --dark-elevation-2: 0 0 0 1px rgba(255,255,255,0.15), 0 2px 4px 0 rgba(0,0,0,0.22), 0 6px 16px 0 rgba(0,0,0,0.12);
-    --dark-elevation-3: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 8px 0 rgba(0,0,0,0.24), 0 12px 24px 0 rgba(0,0,0,0.14);
-    --dark-elevation-4: 0 0 0 1px rgba(255,255,255,0.15), 0 6px 12px 0 rgba(0,0,0,0.28), 0 20px 32px 0 rgba(0,0,0,0.16);
-    --radius-none: 0;
-    --radius-xxs: 2px;
-    --radius-xs: 4px;
-    --radius-sm: 6px;
-    --radius-md: 8px;
-    --radius-lg: 12px;
-    --radius-xl: 16px;
-    --radius-2xl: 20px;
-    --radius-max: 9999px;
-    --radius-3xl: 24px;
-    --radius-4xl: 32px;
-    --spacing-none: 0; /** No spacing. Used for tight component joins. */
-    --spacing-xxs: 4px; /** Base unit. Minimal padding, tight gaps. */
-    --spacing-xs: 8px; /** Small padding and default vertical gaps. */
-    --spacing-sm: 12px; /** Common internal spacing in inputs and buttons. */
-    --spacing-md: 16px; /** Default large padding for sections and cards. */
-    --spacing-xl: 24px; /** Comfortable spacing for chat bubbles and list items. */
-    --spacing-2xl: 32px; /** Larger spacing for panels, modals, and gutters. */
-    --spacing-3xl: 40px; /** Used for wide layout spacing and breathing room. */
-    --spacing-lg: 20px; /** Medium spacing for grouping elements and section breaks. */
-    --spacing-xxxs: 2px;
-    --device-radius: 8px;
-    --device-safe-area-bottom: 0;
-    --device-safe-area-top: 0;
-    --message-bubble-radius-group-top: 20px;
-    --message-bubble-radius-group-middle: 20px;
-    --message-bubble-radius-group-bottom: 20px;
-    --message-bubble-radius-tail: 0;
-    --message-bubble-radius-attachment: 12px;
-    --message-bubble-radius-attachment-inline: 8px;
-    --composer-radius-fixed: 24px;
-    --composer-radius-floating: 24px;
-    --button-radius-lg: 9999px;
-    --button-radius-md: 9999px;
-    --button-radius-sm: 9999px;
-    --button-radius-full: 9999px;
-    --button-visual-height-sm: 32px;
-    --button-visual-height-md: 40px;
-    --button-visual-height-lg: 48px;
-    --button-visual-height-xs: 24px;
-    /**
-     * Minimum interactive hit target size.
-     *
-     * iOS / Android: enforce minimum touch target.
-     * Web: do not apply a min-width or min-height; size to content.
-     *
-     * Note: Web uses a placeholder value in Figma due to variable mode constraints.
-     */
-    --button-hit-target-min-height: 48px;
-    /**
-     * Minimum interactive hit target size.
-     *
-     * iOS / Android: enforce minimum touch target.
-     * Web: do not apply a min-width or min-height; size to content.
-     *
-     * Note: Web uses a placeholder value in Figma due to variable mode constraints.
-     */
-    --button-hit-target-min-width: 48px;
-    --button-padding-y-lg: 14px;
-    --button-padding-y-md: 10px;
-    --button-padding-y-sm: 6px;
-    --button-padding-y-xs: 4px;
-    --button-padding-x-icon-only-lg: 14px;
-    --button-padding-x-icon-only-md: 10px;
-    --button-padding-x-icon-only-sm: 6px;
-    --button-padding-x-icon-only-xs: 4px;
-    --button-padding-x-with-label-lg: 16px;
-    --button-padding-x-with-label-md: 16px;
-    --button-padding-x-with-label-sm: 16px;
-    --button-padding-x-with-label-xs: 12px;
-    --button-primary-bg: #005fff;
-    --button-primary-bg-liquid-glass: rgba(255, 255, 255, 0);
-    --button-primary-text: #005fff;
-    --button-primary-text-on-accent: #ffffff;
-    --button-primary-text-inverted: #ffffff;
-    --button-primary-border: #a5c5ff;
-    --button-primary-border-inverted: #ffffff;
-    --button-secondary-bg: #ebeef1;
-    --button-secondary-bg-liquid-glass: #ffffff;
-    --button-secondary-text: #1a1b25;
-    --button-secondary-text-on-accent: #1a1b25;
-    --button-secondary-text-inverted: #ffffff;
-    --button-secondary-border: #d5dbe1;
-    --button-secondary-border-inverted: #ffffff;
-    --button-destructive-bg: #d90d10;
-    --button-destructive-bg-liquid-glass: #ffffff;
-    --button-destructive-text: #d90d10;
-    --button-destructive-text-on-accent: #ffffff;
-    --button-destructive-text-inverted: #ffffff;
-    --button-destructive-border: #d90d10;
-    --button-destructive-border-inverted: #ffffff;
-    --icon-size-xs: 12px;
-    --icon-size-sm: 16px;
-    --icon-size-md: 20px;
-    --icon-size-lg: 32px;
-    --icon-stroke-subtle: 1.2;
-    --icon-stroke-default: 1.5;
-    --icon-stroke-emphasis: 2;
-    --emoji-sm: 16px;
-    --emoji-md: 24px;
-    --emoji-lg: 32px;
-    --emoji-xl: 48px;
-    --emoji-2xl: 64px;
-    --background-core-elevation-0: #ffffff; /** Flat surfaces. */
-    --background-core-elevation-1: #ffffff; /** Slightly elevated surfaces. */
-    --background-core-elevation-2: #ffffff; /** Card-like elements. */
-    --background-core-elevation-3: #ffffff; /** Popovers. */
-    --background-core-elevation-4: #ffffff; /** Dialogs, modals. */
-    --background-core-surface: #ebeef1; /** Standard section background. */
-    --background-core-surface-subtle: #f6f8fa; /** Very light section background. */
-    --background-core-surface-strong: #d5dbe1; /** Stronger section background. */
-    --background-core-surface-card: #f6f8fa;
-    --background-core-inverse: #1a1b25; /** Inverse background used for elevated, transient, or high-attention UI surfaces that sit on top of the default app background. */
-    --background-core-on-accent: #ffffff; /** Use for surfaces that must remain white across themes (e.g., media controls over video). Don’t use for general UI surfaces. */
-    --background-core-highlight: #fef9da;
-    --background-core-overlay-light: rgba(255, 255, 255, 0.75); /** Selected overlay. */
-    --background-core-overlay-dark: rgba(26, 27, 37, 0.25); /** Selected overlay. */
-    --background-core-scrim: rgba(26, 27, 37, 0.5); /** Dimmed overlay for modals. */
-    --background-core-app: #ffffff; /** Global application background. */
-    --background-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */
-    --background-utility-pressed: rgba(26, 27, 37, 0.15); /** Pressed feedback overlay. */
-    --background-utility-selected: rgba(26, 27, 37, 0.2); /** Selected overlay. */
-    --background-utility-disabled: #ebeef1; /** Disabled backgrounds. */
-    --border-utility-hover: rgba(26, 27, 37, 0.1); /** Hover feedback overlay. */
-    --border-utility-pressed: rgba(26, 27, 37, 0.2); /** Pressed feedback overlay. */
-    --border-utility-selected: rgba(26, 27, 37, 0.15); /** Selected overlay. */
-    --border-utility-focused: #c3d9ff; /** Focus ring or focus border. */
-    --border-utility-active: #005fff; /** Focus ring or focus border. */
-    --border-utility-success: #00a46e; /** Success borders. */
-    --border-utility-warning: #f26d10; /** Warning borders. */
-    --border-utility-error: #d90d10; /** Error state. */
-    --border-utility-disabled: #ebeef1; /** Optional disabled background for inputs, buttons, or chips. */
-    --border-core-default: #d5dbe1; /** Standard surface border. */
-    --border-core-subtle: #ebeef1; /** Very light separators. */
-    --border-core-strong: #a3acba; /** Stronger surface border. */
-    --border-core-inverse: #ffffff; /** Used on dark backgrounds. */
-    --border-core-on-accent: #ffffff; /** Borders on accent backgrounds. */
-    --border-core-on-surface: #c0c8d2;
-    --border-core-opacity-subtle: rgba(26, 27, 37, 0.1); /** Image frame border treatment. */
-    --border-core-opacity-strong: rgba(26, 27, 37, 0.25); /** Image frame border treatment. */
-    --chat-bg-incoming: #ebeef1; /** Incoming bubble background. */
-    --chat-bg-outgoing: #e3edff; /** Outgoing bubble background. */
-    --chat-bg-attachment-incoming: #d5dbe1; /** Attachment card in incoming bubble. */
-    --chat-bg-attachment-outgoing: #c3d9ff; /** Attachment card in outgoing bubble. */
-    --chat-text-incoming: #1a1b25; /** Message body text. */
-    --chat-text-outgoing: #091a3b; /** Message body text. */
-    --chat-text-username: #414552; /** Username label. */
-    --chat-text-timestamp: #687385; /** Time labels. */
-    --chat-text-typing-indicator: #1a1b25; /** Typing indicator chip. */
-    --chat-text-read: #005fff;
-    --chat-text-mention: #005fff; /** Mention styling. */
-    --chat-text-link: #005fff; /** Links inside message bubbles. */
-    --chat-text-reaction: #414552; /** Reaction count text. */
-    --chat-text-system: #414552; /** System messages like date separators. */
-    --chat-border-incoming: #ebeef1;
-    --chat-border-outgoing: #e3edff;
-    --chat-border-on-chat-incoming: #a3acba;
-    --chat-border-on-chat-outgoing: #78a8ff;
-    --chat-reply-indicator-incoming: #87909f; /** Reply indicator shading for incoming. */
-    --chat-reply-indicator-outgoing: #4586ff; /** Reply indicator shading for outgoing. */
-    --chat-waveform-bar: rgba(26, 27, 37, 0.25);
-    --chat-waveform-bar-playing: #005fff;
-    --chat-poll-progress-track-incoming: #d5dbe1;
-    --chat-poll-progress-track-outgoing: #a5c5ff;
-    --chat-poll-progress-fill-incoming: #687385;
-    --chat-poll-progress-fill-outgoing: #005fff;
-    --chat-thread-connector-incoming: #d5dbe1;
-    --chat-thread-connector-outgoing: #c3d9ff;
-    --input-text-default: #1a1b25; /** Main text inside the chat input. */
-    --input-text-placeholder: #687385; /** Placeholder text for the input. Lower emphasis than main text. */
-    --input-text-disabled: #a3acba; /** Placeholder text for the input. Lower emphasis than main text. */
-    --input-text-icon: #687385; /** Icons inside the input area (attach, emoji, camera, send when idle). Matches secondary text strength. */
-    --input-send-icon: #005fff; /** Default send icon color in the input. Uses the brand accent. */
-    --input-send-icon-disabled: #a3acba; /** Send icon when disabled (e.g. empty input). */
-    --reaction-bg: #ffffff; /** Reaction bar background. */
-    --reaction-border: #d5dbe1; /** Border around unselected reaction chips. Subtle in normal modes, strong in high-contrast for visibility. */
-    --reaction-text: #1a1b25; /** Count label next to the emoji inside the reaction chip. Uses secondary text so it does not compete with message text. */
-    --reaction-emoji: #1a1b25; /** Emoji color inside reaction chips. Uses primary text color so the emoji stays clearly legible. */
-    --presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-    --presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
-    --presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-    --system-text: #000000;
-    --system-bg-blur: rgba(255, 255, 255, 0.01);
-    --system-caret: #005fff;
-    --system-scrollbar: rgba(0, 0, 0, 0.5);
-    --badge-bg-default: #ffffff;
-    --badge-bg-primary: #005fff;
-    --badge-bg-neutral: #687385;
-    --badge-bg-error: #d90d10;
-    --badge-bg-overlay: rgba(0, 0, 0, 0.75);
-    --badge-text: #1a1b25;
-    --badge-text-on-accent: #ffffff;
-    --badge-border: #ffffff;
-    --control-remove-control-bg: #1a1b25;
-    --control-remove-control-icon: #ffffff;
-    --control-remove-control-border: #ffffff;
-    --control-progress-bar-fill: #687385;
-    --control-progress-bar-track: #d5dbe1;
-    --control-toggle-switch-bg: #687385;
-    --control-toggle-switch-bg-selected: #005fff;
-    --control-toggle-switch-bg-disabled: #ebeef1;
-    --control-toggle-switch-knob: #ffffff;
-    --control-playback-toggle-text: #1a1b25;
-    --control-playback-toggle-border: #d5dbe1;
-    --control-checkbox-bg: rgba(255, 255, 255, 0);
-    --control-checkbox-border: #d5dbe1;
-    --control-checkbox-bg-selected: #005fff;
-    --control-checkbox-icon: #ffffff;
-    --control-play-button-bg: #000000;
-    --control-play-button-icon: #ffffff;
-    --control-playback-thumb-bg-default: #ffffff;
-    --control-playback-thumb-border-default: rgba(26, 27, 37, 0.25);
-    --control-playback-thumb-bg-active: #005fff;
-    --control-playback-thumb-border-active: #ffffff;
-    --control-radio-button-bg: rgba(255, 255, 255, 0);
-    --control-radio-button-border: #d5dbe1;
-    --control-radio-button-bg-selected: #005fff;
-    --control-radio-button-indicator: #ffffff;
-    --control-radio-check-bg: rgba(255, 255, 255, 0);
-    --control-radio-check-border: #d5dbe1;
-    --control-radio-check-bg-selected: #005fff;
-    --control-radio-check-icon: #ffffff;
-    --text-primary: #1a1b25; /** Main text color. */
-    --text-secondary: #414552; /** Secondary metadata text. */
-    --text-tertiary: #687385; /** Lowest priority text. */
-    --text-inverse: #ffffff; /** Text on dark or accent backgrounds. */
-    --text-on-accent: #ffffff; /** Text on dark or accent backgrounds. */
-    --text-disabled: #a3acba; /** Disabled text. */
-    --text-link: #005fff; /** Hyperlinks and inline actions. */
-    --avatar-palette-bg-1: #c3d9ff;
-    --avatar-palette-bg-2: #a9e4ea;
-    --avatar-palette-bg-3: #8febbd;
-    --avatar-palette-bg-4: #d4d7ff;
-    --avatar-palette-bg-5: #fcd579;
-    --avatar-palette-text-1: #091a3b;
-    --avatar-palette-text-2: #002124;
-    --avatar-palette-text-3: #002213;
-    --avatar-palette-text-4: #1a114d;
-    --avatar-palette-text-5: #331302;
-    --avatar-bg-default: #c3d9ff;
-    --avatar-bg-placeholder: #d5dbe1;
-    --avatar-text-default: #091a3b;
-    --avatar-text-placeholder: #687385;
-    --avatar-presence-bg-online: #00a46e; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-    --avatar-presence-bg-offline: #687385; /** The green online indicator. Uses success accent in normal themes. In high-contrast, color is dropped and replaced with strong black for maximum clarity. */
-    --avatar-presence-border: #ffffff; /** The thin outline around the presence dot. Matches the local surface behind the avatar. In high-contrast it uses the base surface. */
-    --accent-primary: #005fff; /** Main brand accent for interactive elements. */
-    --accent-success: #00a46e; /** For success states and positive actions. */
-    --accent-warning: #f26d10; /** Warning or caution messages. */
-    --accent-error: #d90d10; /** Destructive actions and error states. */
-    --accent-neutral: #687385; /** Neutral accent for low-priority badges. */
-    --brand-50: #f3f7ff;
-    --brand-100: #e3edff;
-    --brand-150: #c3d9ff;
-    --brand-200: #a5c5ff;
-    --brand-300: #78a8ff;
-    --brand-400: #4586ff;
-    --brand-500: #005fff;
-    --brand-600: #1b53bd;
-    --brand-700: #19418d;
-    --brand-800: #142f63;
-    --brand-900: #091a3b;
-    --skeleton-loading-base: rgba(255, 255, 255, 0); /** Base color for the default skeleton loading gradient. Used as the background tone for placeholder surfaces. */
-    --skeleton-loading-highlight: #ffffff; /** Highlight color for the default skeleton loading gradient. Used for the moving shimmer to indicate loading activity. */
-    --chrome-0: #ffffff; /** Neutral accent for low-priority badges. */
-    --chrome-50: #f6f8fa;
-    --chrome-100: #ebeef1;
-    --chrome-150: #d5dbe1;
-    --chrome-200: #c0c8d2;
-    --chrome-300: #a3acba;
-    --chrome-400: #87909f;
-    --chrome-500: #687385;
-    --chrome-600: #545969;
-    --chrome-700: #414552;
-    --chrome-800: #30313d;
-    --chrome-900: #1a1b25;
-    --chrome-1000: #000000; /** Neutral accent for low-priority badges. */
-}
diff --git a/src/styling/variables/font.scss b/src/styling/variables/fonts.scss
similarity index 97%
rename from src/styling/variables/font.scss
rename to src/styling/variables/fonts.scss
index 4b3436dd75..6d3bd24c98 100644
--- a/src/styling/variables/font.scss
+++ b/src/styling/variables/fonts.scss
@@ -117,9 +117,9 @@
 .str-chat {
   /* The font used in the chat, by default, we use [preinstalled OS fonts](https://systemfontstack.com/) */
   --str-chat__font-family:
-    var(--str-chat__typography-font-family-sans), system-ui, -apple-system,
-    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue,
-    sans-serif;
+    var(--str-chat__typography-font-family-sans), -apple-system, BlinkMacSystemFont,
+    avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu,
+    roboto, noto, helvetica, arial, sans-serif;
 
   // HEADING
   // ================================================================================= //
diff --git a/src/styling/variables/index.scss b/src/styling/variables/index.scss
index a557be7083..af801bec6e 100644
--- a/src/styling/variables/index.scss
+++ b/src/styling/variables/index.scss
@@ -1,2 +1,2 @@
-@use 'font';
+@use 'fonts';
 @use 'shadows';