diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
index 5014eb92ba3..1747b522993 100644
--- a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
+++ b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -47,7 +47,7 @@ export default defineComponent({
   align-items: center;
   background-color: var(--oc-color-swatch-passive-default);
   border-radius: 50%;
-  color: var(--oc-color-text-inverse);
+  color: var(--oc-color-inverseOnSurface);
   display: flex;
   justify-content: center;
 }
diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
index fa9282c9de0..a619b7e84ca 100644
--- a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
+++ b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     iconColor: {
       type: String,
       required: false,
-      default: 'var(--oc-color-text-inverse)'
+      default: 'var(--oc-color-inverseOnSurface)'
     },
     /**
      * Fill-type that should be used for the icon
diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
index a7a899ddc9e..3dd54b9d1cd 100644
--- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue
+++ b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -181,7 +181,7 @@ export default defineComponent({
     .oc-avatar-count,
     .oc-avatar + .oc-avatar-item,
     .oc-avatar-item + .oc-avatar-item {
-      border: 1px solid var(--oc-color-text-inverse);
+      border: 1px solid var(--oc-color-inverseOnSurface);
       margin-left: -25px;
     }
   }
diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
index d469701d817..51241144e74 100644
--- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
+++ b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -61,7 +61,7 @@
         />
         <oc-icon
           v-if="index !== displayItems.length - 1"
-          color="var(--oc-color-text-default)"
+          color="var(--oc-color-onSurface)"
           name="arrow-right-s"
           class="oc-mx-xs"
           fill-type="line"
@@ -73,7 +73,7 @@
             :aria-label="contextMenuLabel"
             appearance="raw"
           >
-            <oc-icon name="more-2" color="var(--oc-color-text-default)" />
+            <oc-icon name="more-2" color="var(--oc-color-onSurface)" />
           </oc-button>
           <oc-drop
             drop-id="oc-breadcrumb-contextmenu"
@@ -342,13 +342,9 @@ export default defineComponent({
 .oc-breadcrumb {
   overflow: visible;
   &-item-dragover {
-    transition:
-      background 0.06s,
-      border 0s 0.08s,
-      border-color 0s,
-      border-width 0.06s;
-    background-color: var(--oc-color-background-highlight);
-    box-shadow: 0 0 0 5px var(--oc-color-background-highlight);
+    transition: background 0.06s, border 0s 0.08s, border-color 0s, border-width 0.06s;
+    background-color: var(--oc-color-surfaceBright);
+    box-shadow: 0 0 0 5px var(--oc-color-surfaceBright);
     border-radius: 5px;
   }
   &-item-text {
@@ -396,12 +392,12 @@ export default defineComponent({
     }
 
     > :nth-child(n + 2)::before {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
     }
 
     > :last-child > span {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 
@@ -411,7 +407,7 @@ export default defineComponent({
     button:first-of-type,
     span:first-of-type {
       font-size: var(--oc-font-size-medium);
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
       display: inline-block;
       vertical-align: sub;
       line-height: normal;
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 7acbc4f5a63..6a4e1bf1c3c 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -413,16 +413,16 @@ export default defineComponent({
 
   &-brand {
     @include oc-button-variation(
-      var(--oc-color-swatch-brand-default),
-      var(--oc-color-swatch-brand-hover),
-      var(--oc-color-swatch-brand-muted),
-      var(--oc-color-swatch-brand-contrast)
+      var(--oc-color-primary),
+      var(--oc-color-primaryContainer),
+      var(--oc-color-primaryFixedDim),
+      var(--oc-color-background)
     );
   }
 
   &-primary {
     @include oc-button-variation(
-      var(--oc-color-swatch-primary-default),
+      var(--oc-color-primary),
       var(--oc-color-swatch-primary-hover),
       var(--oc-color-swatch-primary-muted),
       var(--oc-color-swatch-primary-contrast)
@@ -449,25 +449,25 @@ export default defineComponent({
 
   &-warning {
     @include oc-button-variation(
-      var(--oc-color-swatch-warning-default),
-      var(--oc-color-swatch-warning-hover),
-      var(--oc-color-swatch-warning-muted),
-      var(--oc-color-swatch-warning-contrast)
+      var(--oc-color-error),
+      var(--oc-color-errorContainer),
+      var(--oc-color-onErrorContainer),
+      var(--oc-color-onError)
     );
   }
 
   &-danger {
     @include oc-button-variation(
-      var(--oc-color-swatch-danger-default),
+      var(--oc-color-error),
       var(--oc-color-swatch-danger-hover),
       var(--oc-color-swatch-danger-muted),
-      var(--oc-color-swatch-danger-contrast)
+      var(--oc-color-onError)
     );
 
     &-filled:hover {
-      color: var(--oc-color-swatch-danger-default) !important;
+      color: var(--oc-color-error) !important;
       span > svg {
-        fill: var(--oc-color-swatch-danger-default) !important;
+        fill: var(--oc-color-error) !important;
       }
     }
   }
@@ -502,12 +502,12 @@ export default defineComponent({
 
         &:first-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-left: 1px solid var(--oc-color-swatch-primary-default);
+          border-left: 1px solid var(--oc-color-primary);
         }
 
         &:last-of-type {
           // TODO: Implement color variations if button group should be used again
-          border-right: 1px solid var(--oc-color-swatch-primary-default);
+          border-right: 1px solid var(--oc-color-primary);
         }
       }
     }
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index 8540a7bc4f4..4910e9a348b 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -178,7 +178,7 @@ export default defineComponent({
   }
 
   &:focus-visible {
-    outline: var(--oc-color-swatch-primary-default) auto 1px;
+    outline: var(--oc-color-primary) auto 1px;
   }
 
   &-checked,
diff --git a/packages/design-system/src/components/OcDrop/OcDrop.vue b/packages/design-system/src/components/OcDrop/OcDrop.vue
index a45fbbada92..4bd4ded1bd1 100644
--- a/packages/design-system/src/components/OcDrop/OcDrop.vue
+++ b/packages/design-system/src/components/OcDrop/OcDrop.vue
@@ -183,8 +183,8 @@ export default defineComponent({
     const to = this.target
       ? document.querySelector(this.target)
       : this.toggle
-        ? document.querySelector(this.toggle)
-        : this.$el.previousElementSibling
+      ? document.querySelector(this.toggle)
+      : this.$el.previousElementSibling
     const content = this.$refs.drop
 
     if (!to || !content) {
@@ -285,7 +285,7 @@ export default defineComponent({
       }
 
       &:hover span {
-        color: var(--oc-color-swatch-brand-hover) !important;
+        color: var(--oc-color-primaryContainer) !important;
       }
 
       span {
diff --git a/packages/design-system/src/components/OcDropzone/OcDropzone.vue b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
index 6af66f169a4..46d98c0a953 100644
--- a/packages/design-system/src/components/OcDropzone/OcDropzone.vue
+++ b/packages/design-system/src/components/OcDropzone/OcDropzone.vue
@@ -18,9 +18,9 @@ export default defineComponent({
 <style lang="scss">
 .oc-dropzone {
   align-items: center;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px dashed var(--oc-color-swatch-primary-muted);
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   display: flex;
   font-size: 1.5rem;
   justify-content: center;
diff --git a/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue b/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
index 4d64d2281ee..3f639c84b0d 100644
--- a/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
+++ b/packages/design-system/src/components/OcErrorLog/OcErrorLog.vue
@@ -76,7 +76,7 @@ export default defineComponent({
     resize: none;
 
     label {
-      color: var(--oc-color-text-muted);
+      color: var(--oc-color-onSurfaceVariant);
     }
   }
 
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index c8801a9150e..71ce288e4dd 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -14,7 +14,7 @@
         :class="filterActive ? 'oc-filter-check-icon-active' : 'oc-filter-check-icon-inactive'"
         name="check"
         size="small"
-        color="var(--oc-color-text-inverse)"
+        color="var(--oc-color-inverseOnSurface)"
       />
       <span
         class="oc-text-truncate oc-filter-chip-label"
@@ -44,7 +44,7 @@
       :aria-label="$gettext('Clear filter')"
       @click="$emit('clearFilter')"
     >
-      <oc-icon name="close" size="small" color="var(--oc-color-text-inverse)" />
+      <oc-icon name="close" size="small" color="var(--oc-color-inverseOnSurface)" />
     </oc-button>
   </div>
 </template>
@@ -134,9 +134,9 @@ export default defineComponent({
 .oc-filter-chip {
   &-button.oc-pill {
     align-items: center;
-    background-color: var(--oc-color-background-default) !important;
-    color: var(--oc-color-text-muted) !important;
-    border: 1px solid var(--oc-color-text-muted);
+    background-color: var(--oc-color-background) !important;
+    color: var(--oc-color-onSurfaceVariant) !important;
+    border: 1px solid var(--oc-color-onSurfaceVariant);
     box-sizing: border-box;
     display: inline-flex;
     gap: var(--oc-space-xsmall);
@@ -149,8 +149,8 @@ export default defineComponent({
   }
   &-button-selected.oc-pill,
   &-button-selected.oc-pill:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 99px !important;
     border-bottom-left-radius: 99px !important;
     border-top-right-radius: 0px !important;
@@ -159,8 +159,8 @@ export default defineComponent({
   }
   &-clear,
   &-clear:hover {
-    background-color: var(--oc-color-swatch-primary-default) !important;
-    color: var(--oc-color-text-inverse) !important;
+    background-color: var(--oc-color-primary) !important;
+    color: var(--oc-color-inverseOnSurface) !important;
     border-top-left-radius: 0px !important;
     border-bottom-left-radius: 0px !important;
     border-top-right-radius: 99px !important;
diff --git a/packages/design-system/src/components/OcGrid/OcGrid.vue b/packages/design-system/src/components/OcGrid/OcGrid.vue
index 157c9ad9f2f..ccbc5144b4d 100644
--- a/packages/design-system/src/components/OcGrid/OcGrid.vue
+++ b/packages/design-system/src/components/OcGrid/OcGrid.vue
@@ -546,7 +546,7 @@ $grid-divider-border: #e5e5e5 !default;
   <oc-grid>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-passive-default)" class="oc-height-small"></div>
     <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-success-default)" class="oc-height-small"></div>
-    <div style="width: 80px; height: 80px; background-color: var(--oc-color-swatch-warning-default)" class="oc-height-small"></div>
+    <div style="width: 80px; height: 80px; background-color: var(--oc-color-error)" class="oc-height-small"></div>
   </oc-grid>
 
   <h3 class="oc-heading-divider">
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 267f9a4a86f..3236821603b 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -267,7 +267,7 @@ export default defineComponent({
   }
 
   &-primary > svg {
-    fill: var(--oc-color-swatch-primary-default);
+    fill: var(--oc-color-primary);
   }
 
   &-passive > svg {
@@ -275,7 +275,7 @@ export default defineComponent({
   }
 
   &-warning > svg {
-    fill: var(--oc-color-swatch-warning-default);
+    fill: var(--oc-color-error);
   }
 
   &-success > svg {
@@ -283,11 +283,11 @@ export default defineComponent({
   }
 
   &-danger > svg {
-    fill: var(--oc-color-swatch-danger-default);
+    fill: var(--oc-color-error);
   }
 
   &-brand > svg {
-    fill: var(--oc-color-swatch-brand-default);
+    fill: var(--oc-color-primary);
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
index 76950de3be6..05e750cc570 100644
--- a/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
+++ b/packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue
@@ -162,7 +162,7 @@ export default defineComponent({
   }
   .info-drop-content {
     font-size: var(--oc-font-size-medium);
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
   .info-more-link {
     font-size: var(--oc-font-size-medium) !important;
diff --git a/packages/design-system/src/components/OcLoader/OcLoader.vue b/packages/design-system/src/components/OcLoader/OcLoader.vue
index ca6f42709bf..e5a34c65605 100644
--- a/packages/design-system/src/components/OcLoader/OcLoader.vue
+++ b/packages/design-system/src/components/OcLoader/OcLoader.vue
@@ -53,7 +53,7 @@ export default defineComponent({
   }
 
   &::after {
-    background: var(--oc-color-text-muted);
+    background: var(--oc-color-onSurfaceVariant);
     content: '';
     height: 100%;
     width: 0;
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 62267800872..88f3b79fdb0 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -432,7 +432,7 @@ export default defineComponent({
 }
 
 .oc-modal {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px solid var(--oc-color-input-border);
   border-radius: 15px;
   box-shadow: 5px 0 25px rgba(0, 0, 0, 0.3);
@@ -460,7 +460,7 @@ export default defineComponent({
   }
 
   &-primary {
-    @include oc-modal-variation(var(--oc-color-swatch-primary-default));
+    @include oc-modal-variation(var(--oc-color-primary));
   }
 
   &-success {
@@ -468,11 +468,11 @@ export default defineComponent({
   }
 
   &-warning {
-    @include oc-modal-variation(var(--oc-color-swatch-warning-default));
+    @include oc-modal-variation(var(--oc-color-error));
   }
 
   &-danger {
-    @include oc-modal-variation(var(--oc-color-swatch-danger-default));
+    @include oc-modal-variation(var(--oc-color-error));
   }
 
   &-title {
@@ -497,7 +497,7 @@ export default defineComponent({
   }
 
   &-body {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     line-height: 1.625;
     padding: var(--oc-space-medium) var(--oc-space-medium) 0;
 
@@ -526,7 +526,7 @@ export default defineComponent({
 
     &-actions {
       text-align: right;
-      background: var(--oc-color-background-default);
+      background: var(--oc-color-background);
       border-bottom-right-radius: 15px;
       border-bottom-left-radius: 15px;
       padding: var(--oc-space-medium);
@@ -545,7 +545,7 @@ export default defineComponent({
 
   .oc-text-input-password-wrapper {
     button {
-      background-color: var(--oc-color-background-highlight) !important;
+      background-color: var(--oc-color-surfaceBright) !important;
     }
   }
 }
diff --git a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
index 62732db9fa0..7c3cb6d2785 100644
--- a/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
+++ b/packages/design-system/src/components/OcNotificationMessage/OcNotificationMessage.vue
@@ -152,7 +152,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-notification-message {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
   margin-top: var(--oc-space-small);
   position: relative;
   word-break: break-word;
diff --git a/packages/design-system/src/components/OcPagination/OcPagination.vue b/packages/design-system/src/components/OcPagination/OcPagination.vue
index 6dafc80b2dc..f978e804452 100644
--- a/packages/design-system/src/components/OcPagination/OcPagination.vue
+++ b/packages/design-system/src/components/OcPagination/OcPagination.vue
@@ -212,20 +212,20 @@ export default defineComponent({
     &-item {
       &-page {
         border-radius: 4px;
-        color: var(--oc-color-text-default);
+        color: var(--oc-color-onSurface);
         padding: var(--oc-space-xsmall) var(--oc-space-small);
         transition: background-color $transition-duration-short ease-in-out;
 
         &:not(span):hover {
           background-color: var(--oc-color-swatch-passive-default);
-          color: var(--oc-color-text-inverse);
+          color: var(--oc-color-inverseOnSurface);
           text-decoration: none;
         }
       }
 
       &-current {
         background-color: var(--oc-color-swatch-passive-default);
-        color: var(--oc-color-text-inverse);
+        color: var(--oc-color-inverseOnSurface);
         font-weight: bold;
       }
 
@@ -234,7 +234,7 @@ export default defineComponent({
         display: flex;
 
         > .oc-icon > svg {
-          fill: var(--oc-color-text-default);
+          fill: var(--oc-color-onSurface);
         }
       }
 
diff --git a/packages/design-system/src/components/OcProgress/OcProgress.vue b/packages/design-system/src/components/OcProgress/OcProgress.vue
index a0849501dd2..82869ec8154 100644
--- a/packages/design-system/src/components/OcProgress/OcProgress.vue
+++ b/packages/design-system/src/components/OcProgress/OcProgress.vue
@@ -153,7 +153,7 @@ $progress-height-small: 5px !default;
 
   &-primary &-current,
   &-primary &-indeterminate div {
-    background-color: var(--oc-color-swatch-primary-default);
+    background-color: var(--oc-color-primary);
   }
   &-success &-current,
   &-success &-indeterminate div {
@@ -161,11 +161,11 @@ $progress-height-small: 5px !default;
   }
   &-warning &-current,
   &-warning &-indeterminate div {
-    background-color: var(--oc-color-swatch-warning-default);
+    background-color: var(--oc-color-error);
   }
   &-danger &-current,
   &-danger &-indeterminate div {
-    background-color: var(--oc-color-swatch-danger-default);
+    background-color: var(--oc-color-error);
   }
 }
 </style>
diff --git a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
index 2d4e2ad4ab1..c3f68867635 100644
--- a/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
+++ b/packages/design-system/src/components/OcProgressPie/OcProgressPie.vue
@@ -92,8 +92,8 @@ $default-size: 64px;
 
     &::before,
     &::after {
-      border: calc($default-size / 10) solid var(--oc-color-swatch-brand-default);
-      border-color: var(--oc-color-swatch-brand-default);
+      border: calc($default-size / 10) solid var(--oc-color-primary);
+      border-color: var(--oc-color-primary);
       border-radius: 50%;
       clip: rect(0, calc($default-size / 2), $default-size, 0);
       content: '';
@@ -107,7 +107,7 @@ $default-size: 64px;
   }
 
   &-label {
-    color: var(--oc-color-text-muted) !important;
+    color: var(--oc-color-onSurfaceVariant) !important;
     left: 50%;
     position: absolute;
     top: 50%;
diff --git a/packages/design-system/src/components/OcRadio/OcRadio.vue b/packages/design-system/src/components/OcRadio/OcRadio.vue
index cf8f840f1fc..6e3e35baeb4 100644
--- a/packages/design-system/src/components/OcRadio/OcRadio.vue
+++ b/packages/design-system/src/components/OcRadio/OcRadio.vue
@@ -128,7 +128,7 @@ export default defineComponent({
   -webkit-appearance: none;
   -moz-appearance: none;
 
-  border: 1px solid var(--oc-color-swatch-brand-default);
+  border: 1px solid var(--oc-color-primary);
   border-radius: 50%;
   box-sizing: border-box;
   background-color: var(--oc-color-input-bg);
@@ -149,7 +149,7 @@ export default defineComponent({
   }
 
   &:checked {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
 
   &.oc-radio-s {
diff --git a/packages/design-system/src/components/OcRecipient/OcRecipient.vue b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
index 570021cc843..e4222ba7f73 100644
--- a/packages/design-system/src/components/OcRecipient/OcRecipient.vue
+++ b/packages/design-system/src/components/OcRecipient/OcRecipient.vue
@@ -103,7 +103,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-recipient {
   align-items: center;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border: 1px solid var(--oc-color-input-border);
   border-radius: 6px;
   display: flex;
@@ -113,11 +113,11 @@ export default defineComponent({
   width: auto;
 
   &-icon > svg {
-    fill: var(--oc-color-text-default);
+    fill: var(--oc-color-onSurface);
   }
 
   &-name {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     margin: 0;
     padding: 0;
   }
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 0e00abac091..26ff5f75ba8 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -317,7 +317,7 @@ export default defineComponent({
   &-icon {
     align-items: center;
     bottom: 0;
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
     display: inline-flex;
     justify-content: center;
     left: 0;
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index 5ee2ceebed8..e639a31dc99 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -542,7 +542,7 @@ export default defineComponent({
     &__dropdown-toggle,
     &__dropdown-menu {
       -webkit-appearance: none;
-      background-color: var(--oc-color-background-highlight);
+      background-color: var(--oc-color-surfaceBright);
       border-radius: 0;
       border-radius: 5px;
       border: 1px solid var(--oc-color-input-border);
@@ -570,7 +570,7 @@ export default defineComponent({
 
     &__dropdown-menu {
       padding: 0;
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       margin-top: -1px;
     }
 
@@ -595,7 +595,7 @@ export default defineComponent({
       &--highlight,
       &--selected {
         background-color: var(--oc-color-background-hover);
-        color: var(--oc-color-swatch-brand-hover);
+        color: var(--oc-color-primaryContainer);
       }
     }
 
@@ -625,8 +625,8 @@ export default defineComponent({
 
       > *:not(input) {
         padding-left: 3px;
-        background-color: var(--oc-color-background-default);
-        fill: var(--oc-color-text-default);
+        background-color: var(--oc-color-background);
+        fill: var(--oc-color-onSurface);
       }
     }
   }
@@ -635,7 +635,7 @@ export default defineComponent({
     .vs {
       &__selected-options > *:not(input) {
         color: var(--oc-color-input-text-default);
-        background-color: var(--oc-color-background-default);
+        background-color: var(--oc-color-background);
       }
     }
   }
@@ -670,14 +670,14 @@ export default defineComponent({
     &.vs--multiple {
       .vs__selected-options > *:not(input) {
         color: var(--oc-color-input-text-default);
-        background-color: var(--oc-color-background-highlight);
+        background-color: var(--oc-color-surfaceBright);
       }
     }
 
     &:focus-within {
       .vs__dropdown-menu,
       .vs__dropdown-toggle {
-        background-color: var(--oc-color-background-default);
+        background-color: var(--oc-color-background);
       }
     }
   }
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index 7945f27eec3..12ce5d4dade 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
@@ -63,7 +63,7 @@ export default defineComponent({
 .oc-spinner {
   @include oc-spinner-size(1);
 
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   display: inline-block;
 
   &::after {
diff --git a/packages/design-system/src/components/OcSwitch/OcSwitch.vue b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
index 22a709e4594..599293522fb 100644
--- a/packages/design-system/src/components/OcSwitch/OcSwitch.vue
+++ b/packages/design-system/src/components/OcSwitch/OcSwitch.vue
@@ -108,7 +108,7 @@ export default defineComponent({
     }
 
     &[aria-checked='true'] {
-      background-color: var(--oc-color-swatch-primary-default);
+      background-color: var(--oc-color-primary);
 
       &::before {
         transform: translateX(calc(100% + 2px));
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index dcfaad245b8..0e39109991a 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/packages/design-system/src/components/OcTable/OcTable.vue
@@ -511,7 +511,7 @@ export default defineComponent({
 .oc-table {
   border-collapse: collapse;
   border-spacing: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   width: 100%;
 
   &-hover tr {
@@ -532,7 +532,7 @@ export default defineComponent({
   }
 
   &-highlighted {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
 
   &-accentuated {
@@ -550,7 +550,7 @@ export default defineComponent({
     position: relative;
 
     .oc-table-header-cell {
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
@@ -573,7 +573,7 @@ export default defineComponent({
     border-top: 1px solid var(--oc-color-border);
 
     &-cell {
-      color: var(--oc-color-text-muted);
+      color: var(--oc-color-onSurfaceVariant);
       font-size: 0.875rem;
       line-height: 1.4;
       padding: var(--oc-space-xsmall);
diff --git a/packages/design-system/src/components/OcTag/OcTag.vue b/packages/design-system/src/components/OcTag/OcTag.vue
index 1c809fbb177..d88eb85c8e1 100644
--- a/packages/design-system/src/components/OcTag/OcTag.vue
+++ b/packages/design-system/src/components/OcTag/OcTag.vue
@@ -90,11 +90,11 @@ export default defineComponent({
 <style lang="scss">
 .oc-tag {
   align-items: center;
-  background-color: var(--oc-color-background-default);
-  border: 1px solid var(--oc-color-text-muted);
+  background-color: var(--oc-color-background);
+  border: 1px solid var(--oc-color-onSurfaceVariant);
   border-radius: 7px;
   box-sizing: border-box;
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   display: inline-flex;
   gap: var(--oc-space-xsmall);
   text-decoration: none;
@@ -123,7 +123,7 @@ export default defineComponent({
   }
 
   .oc-icon > svg {
-    fill: var(--oc-color-text-muted);
+    fill: var(--oc-color-onSurfaceVariant);
   }
 
   &-link,
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 82772913d2f..24b5b8e71ff 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -381,7 +381,7 @@ export default defineComponent({
 
 .oc-text-input {
   &-description {
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
   }
 
   &-success,
@@ -392,14 +392,14 @@ export default defineComponent({
 
   &-warning,
   &-warning:focus {
-    border-color: var(--oc-color-swatch-warning-default) !important;
-    color: var(--oc-color-swatch-warning-default) !important;
+    border-color: var(--oc-color-error) !important;
+    color: var(--oc-color-error) !important;
   }
 
   &-danger,
   &-danger:focus {
-    border-color: var(--oc-color-swatch-danger-default) !important;
-    color: var(--oc-color-swatch-danger-default) !important;
+    border-color: var(--oc-color-error) !important;
+    color: var(--oc-color-error) !important;
   }
 
   &-message {
diff --git a/packages/design-system/src/components/OcTextarea/OcTextarea.vue b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
index b797cc8849c..2c3c5151b63 100644
--- a/packages/design-system/src/components/OcTextarea/OcTextarea.vue
+++ b/packages/design-system/src/components/OcTextarea/OcTextarea.vue
@@ -198,7 +198,7 @@ export default defineComponent({
   background: var(--oc-color-background-muted);
   border: 0 none;
   margin: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   max-width: 100%;
   width: 100%;
   overflow: auto;
@@ -210,23 +210,23 @@ export default defineComponent({
   &:focus {
     border-color: var(--oc-color-input-text-default);
     background-color: var(--oc-color-background-muted);
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 
   &-warning,
   &-warning:focus {
-    border-color: var(--oc-color-swatch-warning-default);
-    color: var(--oc-color-swatch-warning-default);
+    border-color: var(--oc-color-error);
+    color: var(--oc-color-error);
   }
 
   &-danger,
   &-danger:focus {
-    border-color: var(--oc-color-swatch-danger-default);
-    color: var(--oc-color-swatch-danger-default);
+    border-color: var(--oc-color-error);
+    color: var(--oc-color-error);
   }
 
   &-description {
-    color: var(--oc-color-text-muted);
+    color: var(--oc-color-onSurfaceVariant);
   }
 
   &-message {
diff --git a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
index bb1e2dd08d4..0fb3b55bccf 100644
--- a/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
+++ b/packages/design-system/src/components/_OcTableCellHead/_OcTableCellHead.vue
@@ -47,7 +47,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .oc-th {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   font-weight: inherit;
 
   &[aria-sort] {
diff --git a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
index 97d238572ac..580b85df46f 100644
--- a/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
+++ b/packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue
@@ -201,7 +201,7 @@ export default defineComponent({
     padding: 0;
     border-radius: 5px;
     border: 1px solid var(--oc-color-input-border);
-    background-color: var(--oc-color-background-highlight);
+    background-color: var(--oc-color-surfaceBright);
 
     input {
       flex-grow: 2;
@@ -214,14 +214,14 @@ export default defineComponent({
 
     &-warning,
     &-warning:focus {
-      border-color: var(--oc-color-swatch-warning-default) !important;
-      color: var(--oc-color-swatch-warning-default) !important;
+      border-color: var(--oc-color-error) !important;
+      color: var(--oc-color-error) !important;
     }
 
     &-danger,
     &-danger:focus {
-      border-color: var(--oc-color-swatch-danger-default) !important;
-      color: var(--oc-color-swatch-danger-default) !important;
+      border-color: var(--oc-color-error) !important;
+      color: var(--oc-color-error) !important;
     }
 
     &:focus-within {
diff --git a/packages/design-system/src/styles/theme/background.scss b/packages/design-system/src/styles/theme/background.scss
index 3015138bdcc..83a6c77ff82 100644
--- a/packages/design-system/src/styles/theme/background.scss
+++ b/packages/design-system/src/styles/theme/background.scss
@@ -2,8 +2,8 @@
   background:
     linear-gradient(
       90deg,
-      var(--oc-color-swatch-primary-muted) 0%,
-      var(--oc-color-swatch-primary-gradient) 100%
+      var(--oc-color-primary) 0%,
+      var(--oc-color-onPrimaryFixed) 100%
     );
 
   &:focus:not([disabled]),
@@ -11,22 +11,22 @@
   {
     background: linear-gradient(
       90deg,
-      var(--oc-color-swatch-primary-muted-hover) 0%,
-      var(--oc-color-swatch-primary-gradient-hover) 100%
+      var(--oc-color-onPrimaryContainer) 0%,
+      var(--oc-color-onPrimaryFixedVariant) 100%
     );
   }
 }
 
 .oc-background-selected {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
 }
 
 .oc-background-brand {
-  background-color: var(--oc-color-swatch-brand-default) !important;
+  background-color: var(--oc-color-primary) !important;
 }
 
 .oc-background-default {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
 }
 
 /* stylelint-disable */
@@ -37,7 +37,7 @@
 /* stylelint-enable */
 
 .oc-background-secondary {
-  background-color: var(--oc-color-background-secondary) !important;
+  background-color: var(--oc-color-background) !important;
 }
 
 .oc-background-muted {
@@ -45,7 +45,7 @@
 }
 
 .oc-background-highlight {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
 }
 
 .oc-background-contain {
diff --git a/packages/design-system/src/styles/theme/helper.scss b/packages/design-system/src/styles/theme/helper.scss
index dec68546488..edd0ba672d3 100644
--- a/packages/design-system/src/styles/theme/helper.scss
+++ b/packages/design-system/src/styles/theme/helper.scss
@@ -66,8 +66,8 @@
 }
 
 .oc-light {
-  color: var(--oc-color-text-inverse) !important;
-  fill: var(--oc-color-text-inverse) !important;
+  color: var(--oc-color-inverseOnSurface) !important;
+  fill: var(--oc-color-inverseOnSurface) !important;
 }
 
 .oc-disabled {
diff --git a/packages/design-system/src/styles/theme/oc-card.scss b/packages/design-system/src/styles/theme/oc-card.scss
index 437be7a675a..d400ed9d1f5 100644
--- a/packages/design-system/src/styles/theme/oc-card.scss
+++ b/packages/design-system/src/styles/theme/oc-card.scss
@@ -6,9 +6,9 @@
 .oc-card {
   @extend .oc-rounded;
 
-  background-color: var(--oc-color-background-highlight);
+  background-color: var(--oc-color-surfaceBright);
   box-sizing: border-box;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   position: relative;
   transition: box-shadow 0.1s ease-in-out;
 }
diff --git a/packages/design-system/src/styles/theme/oc-form.scss b/packages/design-system/src/styles/theme/oc-form.scss
index 40d32fb70e6..7bb6337d5ad 100644
--- a/packages/design-system/src/styles/theme/oc-form.scss
+++ b/packages/design-system/src/styles/theme/oc-form.scss
@@ -42,15 +42,15 @@ $form-padding-horizontal: var(--oc-space-small) !default;
 $form-padding-vertical: var(--oc-space-xsmall) !default;
 
 $form-background: var(--oc-color-background-muted) !default;
-$form-color: var(--oc-color-text-default) !default;
+$form-color: var(--oc-color-onSurface) !default;
 
-$form-focus-background: var(--oc-color-background-highlight) !default;
-$form-focus-color: var(--oc-color-text-default) !default;
+$form-focus-background: var(--oc-color-surfaceBright) !default;
+$form-focus-color: var(--oc-color-onSurface) !default;
 
 $form-disabled-background: var(--oc-color-background-muted) !default;
-$form-disabled-color: var(--oc-color-text-muted) !default;
+$form-disabled-color: var(--oc-color-onSurfaceVariant) !default;
 
-$form-placeholder-color: var(--oc-color-text-muted) !default;
+$form-placeholder-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-small-height: var(--oc-font-size-small) !default;
 $form-small-padding-horizontal: var(--oc-space-small) !default;
@@ -62,7 +62,7 @@ $form-large-padding-horizontal: var(--oc-space-medium) !default;
 $form-large-line-height: $form-large-height !default;
 $form-large-font-size: var(--oc-font-size-large) !default;
 
-$form-danger-color: var(--oc-color-swatch-danger-default) !default;
+$form-danger-color: var(--oc-color-error) !default;
 $form-success-color: var(--oc-color-swatch-success-default) !default;
 
 $form-width-xsmall: 50px !default;
@@ -71,12 +71,12 @@ $form-width-medium: 200px !default;
 $form-width-large: 500px !default;
 
 $form-select-padding-right: 20px !default;
-$form-select-icon-color: var(--oc-color-text-default) !default;
+$form-select-icon-color: var(--oc-color-onSurface) !default;
 $form-select-option-color: #444 !default;
-$form-select-disabled-icon-color: var(--oc-color-text-muted) !default;
+$form-select-disabled-icon-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-datalist-padding-right: 20px !default;
-$form-datalist-icon-color: var(--oc-color-text-default) !default;
+$form-datalist-icon-color: var(--oc-color-onSurface) !default;
 
 $form-radio-background: var(--oc-color-background-muted) !default;
 
@@ -86,7 +86,7 @@ $form-radio-checked-icon-color: var(--oc-color-input-text-default) !default;
 $form-radio-checked-focus-background: $oc-color-swatch-primary-default !default;
 
 $form-radio-disabled-background: $oc-color-background-muted !default;
-$form-radio-disabled-icon-color: var(--oc-color-text-muted) !default;
+$form-radio-disabled-icon-color: var(--oc-color-onSurfaceVariant) !default;
 
 $form-legend-font-size: var(--oc-font-size-large) !default;
 $form-legend-line-height: 1.4 !default;
@@ -99,8 +99,8 @@ $form-horizontal-controls-margin-left: 215px !default;
 $form-horizontal-controls-text-padding-top: 7px !default;
 
 $form-icon-width: var(--oc-size-icon-default) !default;
-$form-icon-color: var(--oc-color-text-muted) !default;
-$form-icon-hover-color: var(--oc-color-text-default) !default;
+$form-icon-color: var(--oc-color-onSurfaceVariant) !default;
+$form-icon-hover-color: var(--oc-color-onSurface) !default;
 
 $internal-form-select-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%201%209%206%2015%206%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2013%209%208%2015%208%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
 $internal-form-datalist-image: "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22#000%22%20points%3D%2212%2012%208%206%2016%206%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" !default;
@@ -302,7 +302,7 @@ $internal-form-checkbox-indeterminate-image: "data:image/svg+xml;charset=UTF-8,%
   .oc-input:focus,
   .oc-select:focus,
   .oc-textarea:focus {
-    background-color: var(--oc-color-background-default);
+    background-color: var(--oc-color-background);
   }
 }
 
diff --git a/packages/design-system/src/styles/theme/oc-text.scss b/packages/design-system/src/styles/theme/oc-text.scss
index ba9f881e846..a2a7df71130 100644
--- a/packages/design-system/src/styles/theme/oc-text.scss
+++ b/packages/design-system/src/styles/theme/oc-text.scss
@@ -6,7 +6,7 @@ h4,
 h5,
 h6,
 p {
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
 }
 
 html * {
@@ -19,7 +19,7 @@ html, button {
 }
 
 a {
-  color: var(--oc-color-swatch-primary-default);
+  color: var(--oc-color-primary);
   text-decoration: none;
 
   &:hover {
@@ -182,7 +182,7 @@ td.oc-text-break {
  * Give text a muted color and small size.
  */
 .oc-text-meta {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
   font-size: var(--oc-font-size-small);
 }
 
@@ -190,7 +190,7 @@ td.oc-text-break {
  * Give text a muted color.
  */
 .oc-text-muted {
-  color: var(--oc-color-text-muted);
+  color: var(--oc-color-onSurfaceVariant);
 }
 
 /*
diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index c2469d8c731..246ebd17790 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -220,7 +220,7 @@ export default defineComponent({
 }
 
 #admin-settings-app-bar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
diff --git a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
index d7549862415..bf1f2a8243e 100644
--- a/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
+++ b/packages/web-app-admin-settings/src/components/General/AppearanceSection.vue
@@ -158,6 +158,11 @@ export default defineComponent({
 
     const schemeCollectionSchema = z.record(colorSchemeSchema)
 
+    // https://chatgpt.com/c/673e2206-7dfc-8002-a700-81b531e63a33
+    // https://github.com/owncloud/web/issues/11695
+    // https://owncloud.dev/clients/web/theming/
+    // https://m3.material.io/styles/color/roles
+
     const rootSchema = z.object({
       schemes: schemeCollectionSchema
     })
@@ -236,7 +241,7 @@ export default defineComponent({
     width: 100%;
     max-height: 100%;
     object-fit: cover;
-    background: var(--oc-color-swatch-brand-default);
+    background: var(--oc-color-primary);
   }
 }
 </style>
diff --git a/packages/web-app-app-store/src/components/AppImageGallery.vue b/packages/web-app-app-store/src/components/AppImageGallery.vue
index cea696fcbfa..0bd572727c6 100644
--- a/packages/web-app-app-store/src/components/AppImageGallery.vue
+++ b/packages/web-app-app-store/src/components/AppImageGallery.vue
@@ -117,7 +117,7 @@ export default defineComponent({
     &-primary {
       span {
         color: var(--oc-color-swatch-primary-contrast);
-        background-color: var(--oc-color-swatch-primary-default);
+        background-color: var(--oc-color-primary);
       }
     }
     &-success {
@@ -128,8 +128,8 @@ export default defineComponent({
     }
     &-danger {
       span {
-        color: var(--oc-color-swatch-danger-contrast);
-        background-color: var(--oc-color-swatch-danger-default);
+        color: var(--oc-color-onError);
+        background-color: var(--oc-color-error);
       }
     }
 
diff --git a/packages/web-app-app-store/src/components/AppTile.vue b/packages/web-app-app-store/src/components/AppTile.vue
index 7a218007006..14be5eef5b4 100644
--- a/packages/web-app-app-store/src/components/AppTile.vue
+++ b/packages/web-app-app-store/src/components/AppTile.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 <style lang="scss">
 .app-tile {
   overflow: hidden;
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
   box-shadow: none;
   height: 100%;
   display: flex;
@@ -77,7 +77,7 @@ export default defineComponent({
   .app-tile-title {
     .mark-highlight {
       font-weight: unset !important;
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 }
diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index 4bb24f2f535..9bfcd025bca 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 
 <style lang="scss">
 .app-details {
-  background-color: var(--oc-color-background-highlight);
+  background-color: var(--oc-color-surfaceBright);
   box-shadow: none;
   max-width: 600px;
   margin: 0 auto;
diff --git a/packages/web-app-epub-reader/src/App.vue b/packages/web-app-epub-reader/src/App.vue
index b6af209555e..a41c094f43b 100644
--- a/packages/web-app-epub-reader/src/App.vue
+++ b/packages/web-app-epub-reader/src/App.vue
@@ -291,7 +291,7 @@ export default defineComponent({
 
     &-item.active {
       .oc-button {
-        color: var(--oc-color-swatch-primary-default);
+        color: var(--oc-color-primary);
       }
     }
   }
diff --git a/packages/web-app-external/src/Redirect.vue b/packages/web-app-external/src/Redirect.vue
index caa9400da67..e75ce8ad392 100644
--- a/packages/web-app-external/src/Redirect.vue
+++ b/packages/web-app-external/src/Redirect.vue
@@ -78,7 +78,7 @@ export default defineComponent({
 <style lang="scss">
 .external-redirect {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
 
     &-body {
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index d99a4aa7f5e..e0fada4f810 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -135,7 +135,7 @@ export default defineComponent({
   }
 
   .shares-nav-desktop.router-link-active {
-    border-bottom: 2px solid var(--oc-color-swatch-primary-default) !important;
+    border-bottom: 2px solid var(--oc-color-primary) !important;
     border-radius: 0;
   }
 }
diff --git a/packages/web-app-files/src/components/FilesList/QuickActions.vue b/packages/web-app-files/src/components/FilesList/QuickActions.vue
index 32999323a06..944a85f6236 100644
--- a/packages/web-app-files/src/components/FilesList/QuickActions.vue
+++ b/packages/web-app-files/src/components/FilesList/QuickActions.vue
@@ -56,7 +56,7 @@ export default defineComponent({
 <style lang="scss">
 .quick-action-button {
   &:hover {
-    background-color: var(--oc-color-background-secondary) !important;
+    background-color: var(--oc-color-background) !important;
   }
 }
 </style>
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index dc7b5873a86..fb958066a62 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -262,6 +262,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .oc-files-actions-hide-share-trigger:hover {
-  background-color: var(--oc-color-background-secondary) !important;
+  background-color: var(--oc-color-background) !important;
 }
 </style>
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 769de299c91..d3a16222392 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -306,7 +306,7 @@ export default defineComponent({
     max-height: 158px;
 
     &-default {
-      background-color: var(--oc-color-background-highlight);
+      background-color: var(--oc-color-surfaceBright);
       height: 100%;
       border-radius: 10px;
     }
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index c14a79a941d..47e06a146eb 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -280,7 +280,7 @@ export default defineComponent({
 
 .trash-bin {
   &-route {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 }
 </style>
diff --git a/packages/web-app-ocm/src/views/App.vue b/packages/web-app-ocm/src/views/App.vue
index d18101e4373..cc3fdfdd696 100644
--- a/packages/web-app-ocm/src/views/App.vue
+++ b/packages/web-app-ocm/src/views/App.vue
@@ -143,7 +143,7 @@ export default defineComponent({
 #sciencemesh-accept-invites,
 #sciencemesh-connections {
   margin: var(--oc-space-small);
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-radius: 15px;
   padding: var(--oc-space-small);
   @media (max-width: $oc-breakpoint-large-default) {
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 5de7dfbae44..178d026a890 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -230,7 +230,7 @@ export default defineComponent({
 }
 
 .preview-controls-action-count {
-  color: var(--oc-color-swatch-brand-contrast);
+  color: var(--oc-color-background);
 }
 
 .preview-controls-image-original-size {
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index e72f3cd7169..0d55e879377 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -551,7 +551,7 @@ export default defineComponent({
 
     @media (max-width: 639px) {
       visibility: hidden;
-      background-color: var(--oc-color-swatch-brand-default);
+      background-color: var(--oc-color-primary);
       position: absolute;
       height: 48px;
       left: 0;
@@ -615,7 +615,7 @@ export default defineComponent({
 
           &:hover,
           &.active {
-            background-color: var(--oc-color-background-highlight);
+            background-color: var(--oc-color-surfaceBright);
           }
 
           &.disabled {
diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue
index 8a69501e4ee..f183ebedf2e 100644
--- a/packages/web-app-text-editor/src/App.vue
+++ b/packages/web-app-text-editor/src/App.vue
@@ -60,6 +60,6 @@ export default defineComponent({
 
 .toastui-editor-defaultUI-toolbar,
 .toastui-editor-md-tab-container {
-  background-color: var(--oc-color-background-default) !important;
+  background-color: var(--oc-color-background) !important;
 }
 </style>
diff --git a/packages/web-app-webfinger/src/views/Resolve.vue b/packages/web-app-webfinger/src/views/Resolve.vue
index 18c1ef6cf28..0a6e5bc9753 100644
--- a/packages/web-app-webfinger/src/views/Resolve.vue
+++ b/packages/web-app-webfinger/src/views/Resolve.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 <style lang="scss">
 .webfinger-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
 
     &-body {
diff --git a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
index ac1d2cd7180..d10f5e8317a 100644
--- a/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
+++ b/packages/web-pkg/src/cern/components/CollapsibleOcTable.vue
@@ -687,26 +687,26 @@ export default defineComponent({
 .oc-table {
   border-collapse: collapse;
   border-spacing: 0;
-  color: var(--oc-color-text-default);
+  color: var(--oc-color-onSurface);
   width: 100%;
   &-hover tr {
     transition: background-color $transition-duration-short ease-in-out;
   }
   &-hover tr:hover td:not(:last-child) span:not(.avatarInitials):not(button span) {
-    color: var(--oc-color-swatch-brand-hover) !important;
+    color: var(--oc-color-primaryContainer) !important;
   }
   tr {
     outline: none;
     height: var(--oc-size-height-table-row);
   }
   tr + tr {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outline);
   }
   &-hover tr:not(&-footer-row):hover {
     background-color: var(--oc-color-background-hover);
   }
   &-highlighted {
-    background-color: var(--oc-color-background-highlight) !important;
+    background-color: var(--oc-color-surfaceBright) !important;
   }
   &-accentuated {
     background-color: var(--oc-color-background-accentuate);
@@ -719,7 +719,7 @@ export default defineComponent({
   &-sticky {
     position: relative;
     .oc-table-header-cell {
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       position: sticky;
       z-index: 1;
     }
@@ -736,7 +736,7 @@ export default defineComponent({
     }
   }
   &-footer {
-    border-top: 1px solid var(--oc-color-border);
+    border-top: 1px solid var(--oc-color-outline);
     &-cell {
       color: var(--oc-color-text-muted);
       font-size: 0.875rem;
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index e345deed870..a2c192ba395 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -347,7 +347,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 #files-app-bar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-top-right-radius: 15px;
   box-sizing: border-box;
   z-index: 2;
diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
index f3bf783ff5e..9b89f52db7a 100644
--- a/packages/web-pkg/src/components/AppTopBar.vue
+++ b/packages/web-pkg/src/components/AppTopBar.vue
@@ -207,7 +207,7 @@ export default defineComponent({
 
   .oc-resource-indicators {
     .text {
-      color: var(--oc-color-swatch-brand-contrast);
+      color: var(--oc-color-background);
     }
   }
 }
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 861f0fc2e18..647ddc4a5b0 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -279,8 +279,8 @@ export default defineComponent({
         unref(activeDropItemIndex) !== null
           ? unref(activeDropItemIndex)
           : previous
-            ? elements.length
-            : -1
+          ? elements.length
+          : -1
       const increment = previous ? -1 : 1
 
       do {
@@ -486,7 +486,7 @@ export default defineComponent({
 
   li:hover,
   li.active {
-    background-color: var(--oc-color-background-highlight);
+    background-color: var(--oc-color-surfaceBright);
   }
 }
 </style>
diff --git a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
index fbcb8879517..0fd2e902ad2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceIcon.vue
@@ -30,7 +30,7 @@ const defaultSpaceIcon: IconType = {
 }
 const defaultFallbackIcon: IconType = {
   name: 'resource-type-file',
-  color: 'var(--oc-color-text-default)'
+  color: 'var(--oc-color-onSurface)'
 }
 
 const defaultFileIconMapping = createDefaultFileIconMapping()
diff --git a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
index 1132ce8314d..963f0f7fae2 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceListItem.vue
@@ -264,7 +264,7 @@ export default defineComponent({
 
       .text {
         &:hover {
-          color: var(--oc-color-text-default);
+          color: var(--oc-color-onSurface);
           text-decoration: underline;
         }
       }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceName.vue b/packages/web-pkg/src/components/FilesList/ResourceName.vue
index f4903ad51f8..eb94b0af83b 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceName.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceName.vue
@@ -159,13 +159,13 @@ export default defineComponent({
 
     &:hover {
       text-decoration: underline;
-      text-decoration-color: var(--oc-color-text-default);
+      text-decoration-color: var(--oc-color-onSurface);
     }
   }
 
   &-basename,
   &-extension {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     white-space: pre;
   }
 
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index 078ad38560a..49481216964 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -1237,7 +1237,7 @@ export default defineComponent({
 
     &:hover > .resource-table-edit-name {
       svg {
-        fill: var(--oc-color-text-default);
+        fill: var(--oc-color-onSurface);
       }
     }
   }
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTile.vue b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
index 98c15c9cbf0..338cc520830 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTile.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTile.vue
@@ -229,7 +229,7 @@ export default defineComponent({
 
 <style lang="scss">
 .oc-tile-card {
-  background-color: var(--oc-color-background-highlight) !important;
+  background-color: var(--oc-color-surfaceBright) !important;
   box-shadow: none;
   height: 100%;
   display: flex;
@@ -267,7 +267,7 @@ export default defineComponent({
     width: 100%;
 
     .oc-tag {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
 
       &.resource-disabled-indicator {
         z-index: 1;
@@ -341,7 +341,7 @@ export default defineComponent({
   }
 
   .resource-name-wrapper {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
     max-width: 70%;
     overflow: hidden;
   }
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index 89e79755ddd..a06367fd848 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -104,7 +104,7 @@ export default defineComponent({
   }
 
   &-option-selected {
-    background-color: var(--oc-color-swatch-primary-default) !important;
+    background-color: var(--oc-color-primary) !important;
     color: var(--oc-color-text-inverse) !important;
   }
 }
diff --git a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
index cf211fd85b3..322251dd0d3 100644
--- a/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
+++ b/packages/web-pkg/src/components/SideBar/CompareSaveDialog.vue
@@ -88,7 +88,7 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 .compare-save-dialog {
-  background: var(--oc-color-background-highlight);
+  background: var(--oc-color-surfaceBright);
   flex-flow: row wrap;
 }
 .state-indicator {
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index ee1264d78eb..04fea6e9a97 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -306,13 +306,11 @@ export default defineComponent({
   max-height: 100%;
   display: grid;
   grid-template-rows: auto auto 1fr;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   top: 0;
   position: absolute;
   transform: translateX(100%);
-  transition:
-    transform 0.4s ease,
-    visibility 0.4s 0s;
+  transition: transform 0.4s ease, visibility 0.4s 0s;
   // visibility is here to prevent focusing panel child elements,
   // the transition delay keeps care that it will only apply if the element is visible or not.
   // hidden: if element is off screen
@@ -363,7 +361,7 @@ export default defineComponent({
 
       &__title {
         text-align: center;
-        color: var(--oc-color-text-default);
+        color: var(--oc-color-onSurface);
         font-size: var(--oc-font-size-large);
         grid-column-start: 2;
       }
@@ -393,7 +391,7 @@ export default defineComponent({
       border-bottom: 1px solid var(--oc-color-border);
       width: 100%;
       border-radius: 0;
-      color: var(--oc-color-text-default) !important;
+      color: var(--oc-color-onSurface) !important;
       display: grid;
       grid-template-columns: auto 1fr auto;
       text-align: left;
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
index d189a5b04ee..57c1f4a6505 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/SpaceInfo.vue
@@ -36,7 +36,7 @@ export default defineComponent({
   grid-template-columns: auto 1fr auto;
   align-items: center;
   grid-gap: 5px;
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   padding: var(--oc-space-small) var(--oc-space-small) 0 var(--oc-space-small);
 
   &.sidebar-panel__space_info {
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 51b97dbc243..0d275696655 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -291,7 +291,7 @@ export default defineComponent({
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    background: var(--oc-color-swatch-primary-default);
+    background: var(--oc-color-primary);
     border-radius: 50%;
     cursor: pointer;
     height: 1rem;
@@ -299,7 +299,7 @@ export default defineComponent({
   }
 
   &::-moz-range-thumb {
-    background: var(--oc-color-swatch-primary-default);
+    background: var(--oc-color-primary);
     border-radius: 50%;
     cursor: pointer;
     height: 1rem;
diff --git a/packages/web-pkg/src/helpers/resource/icon.ts b/packages/web-pkg/src/helpers/resource/icon.ts
index fb1cf936fc9..2999b205956 100644
--- a/packages/web-pkg/src/helpers/resource/icon.ts
+++ b/packages/web-pkg/src/helpers/resource/icon.ts
@@ -77,7 +77,7 @@ const fileIcon = {
     ]
   },
   code: {
-    icon: { name: 'resource-type-code', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-code', color: 'var(--oc-color-onSurface)' },
     extensions: [
       'bash',
       'c++',
@@ -109,7 +109,7 @@ const fileIcon = {
     ]
   },
   default: {
-    icon: { name: 'resource-type-file', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-file', color: 'var(--oc-color-onSurface)' },
     extensions: ['accdb', 'rss', 'swf']
   },
   drawio: {
@@ -191,11 +191,11 @@ const fileIcon = {
     extensions: ['csv', 'ods', 'xla', 'xlam', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx']
   },
   text: {
-    icon: { name: 'resource-type-text', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-text', color: 'var(--oc-color-onSurface)' },
     extensions: ['cb7', 'cba', 'cbr', 'cbt', 'cbtc', 'cbz', 'cvbdl', 'eml', 'mdb', 'tex', 'txt']
   },
   url: {
-    icon: { name: 'resource-type-url', color: 'var(--oc-color-text-default)' },
+    icon: { name: 'resource-type-url', color: 'var(--oc-color-onSurface)' },
     extensions: ['url']
   },
   video: {
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index d6be50d9934..76141c52fe0 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -141,7 +141,7 @@ body {
 }
 
 #web {
-  background-color: var(--oc-color-swatch-brand-default);
+  background-color: var(--oc-color-primary);
   height: 100vh;
   max-height: 100vh;
   overflow-y: hidden;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index abe1f499a8b..cccd6b4f7fa 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -173,7 +173,7 @@ export default defineComponent({
 }
 
 #web-nav-sidebar {
-  background-color: var(--oc-color-background-default);
+  background-color: var(--oc-color-background);
   border-radius: 15px 0 0 15px;
   box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
   display: flex;
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index a72a83f1d34..39a2d947aad 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -106,8 +106,8 @@ export default defineComponent({
   user-select: none;
 
   .oc-tag {
-    color: var(--oc-color-text-default);
-    background-color: var(--oc-color-background-highlight);
+    color: var(--oc-color-onSurface);
+    background-color: var(--oc-color-surfaceBright);
   }
   .text {
     opacity: 1;
@@ -119,7 +119,7 @@ export default defineComponent({
   }
 
   &:hover:not(.active) {
-    color: var(--oc-color-swatch-brand-hover) !important;
+    color: var(--oc-color-primaryContainer) !important;
   }
 
   &:hover,
diff --git a/packages/web-runtime/src/components/SkipTo.vue b/packages/web-runtime/src/components/SkipTo.vue
index d6c83af8bbb..b0e2f913ab9 100644
--- a/packages/web-runtime/src/components/SkipTo.vue
+++ b/packages/web-runtime/src/components/SkipTo.vue
@@ -37,7 +37,7 @@ export default defineComponent({
   z-index: 6;
   -webkit-appearance: none;
   border: none;
-  background-color: var(--oc-color-swatch-brand-default);
+  background-color: var(--oc-color-primary);
   color: var(--oc-color-swatch-primary-contrast);
   font: inherit;
   padding: 0.25em 0.5em;
diff --git a/packages/web-runtime/src/components/Topbar/Notifications.vue b/packages/web-runtime/src/components/Topbar/Notifications.vue
index 6532096796f..9c48b9e2238 100644
--- a/packages/web-runtime/src/components/Topbar/Notifications.vue
+++ b/packages/web-runtime/src/components/Topbar/Notifications.vue
@@ -277,7 +277,7 @@ export default {
 .oc-notifications {
   &-item {
     > a {
-      color: var(--oc-color-text-default);
+      color: var(--oc-color-onSurface);
     }
   }
 
@@ -287,7 +287,7 @@ export default {
     }
 
     &-background {
-      background-color: var(--oc-color-background-secondary);
+      background-color: var(--oc-color-background);
       opacity: 0.6;
     }
 
diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
index 62b1df49ee3..4c286f4c6f8 100644
--- a/packages/web-runtime/src/components/Topbar/UserMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -22,8 +22,8 @@
         :width="32"
         icon="user"
         icon-fill-type="line"
-        icon-color="var(--oc-color-swatch-brand-default)"
-        background="var(--oc-color-swatch-brand-contrast)"
+        icon-color="var(--oc-color-primary)"
+        background="var(--oc-color-background)"
       />
     </oc-button>
     <oc-drop
@@ -228,7 +228,7 @@ export default defineComponent({
 
   a {
     font-size: var(--oc-font-size-medium) !important;
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 }
 </style>
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 4d6e2c89d55..b141f0e9d38 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -706,7 +706,7 @@ export default defineComponent({
 
 <style lang="scss">
 #upload-info {
-  background-color: var(--oc-color-background-secondary);
+  background-color: var(--oc-color-background);
   width: 400px;
 
   @media (max-width: 640px) {
@@ -720,15 +720,15 @@ export default defineComponent({
   }
 
   .upload-info-title {
-    background-color: var(--oc-color-swatch-brand-default);
+    background-color: var(--oc-color-primary);
   }
 
   .upload-info-title p {
-    color: var(--oc-color-swatch-brand-contrast);
+    color: var(--oc-color-background);
   }
 
   .oc-resource-indicators .parent-folder .text {
-    color: var(--oc-color-text-default);
+    color: var(--oc-color-onSurface);
   }
 
   .upload-info-items {
@@ -741,7 +741,7 @@ export default defineComponent({
   }
 
   .upload-info-danger {
-    color: var(--oc-color-swatch-danger-default);
+    color: var(--oc-color-error);
   }
 
   .upload-info-success {
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index 66baa08fa00..bd86944ef06 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -281,7 +281,7 @@ export default defineComponent({
 
     .app-container {
       height: 100%;
-      background-color: var(--oc-color-background-default);
+      background-color: var(--oc-color-background);
       border-radius: 15px;
       overflow: hidden;
       width: 100%;
diff --git a/packages/web-runtime/src/pages/resolvePrivateLink.vue b/packages/web-runtime/src/pages/resolvePrivateLink.vue
index 73e88e9d7e0..5d0ffc95930 100644
--- a/packages/web-runtime/src/pages/resolvePrivateLink.vue
+++ b/packages/web-runtime/src/pages/resolvePrivateLink.vue
@@ -208,7 +208,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-link-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
   }
 
diff --git a/packages/web-runtime/src/pages/resolvePublicLink.vue b/packages/web-runtime/src/pages/resolvePublicLink.vue
index 068167a2172..b42a6685072 100644
--- a/packages/web-runtime/src/pages/resolvePublicLink.vue
+++ b/packages/web-runtime/src/pages/resolvePublicLink.vue
@@ -320,7 +320,7 @@ export default defineComponent({
 <style lang="scss">
 .oc-link-resolve {
   .oc-card {
-    background: var(--oc-color-background-highlight);
+    background: var(--oc-color-surfaceBright);
     border-radius: 15px;
   }