diff --git a/docker-compose.yml b/docker-compose.yml
index 5dabc622b7b..e8315db41f5 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -22,6 +22,7 @@ services:
       # WEB
       WEB_UI_CONFIG: ${WEB_UI_CONFIG:-/web/config.json}
       WEB_ASSET_PATH: ${WEB_ASSET_PATH:-/web/dist}
+      WEB_UI_THEME_PATH: ${WEB_UI_THEME_PATH:-/themes/owncloud/theme.json}
 
       #FRONTEND
       FRONTEND_SEARCH_MIN_LENGTH: "2"
diff --git a/packages/design-system/docs/components/tokens/IconList.vue b/packages/design-system/docs/components/tokens/IconList.vue
index dbcc08cc4fe..f72e401dd07 100644
--- a/packages/design-system/docs/components/tokens/IconList.vue
+++ b/packages/design-system/docs/components/tokens/IconList.vue
@@ -46,19 +46,6 @@
       <template #danger="{ item }">
         <oc-icon :name="item.filename" :fill-type="item.fillType" size="large" variation="danger" />
       </template>
-      <template #inverse="{ item }">
-        <span
-          style="background-color: var(--oc-color-swatch-brand-default); display: inline-block"
-          class="oc-icon-l"
-        >
-          <oc-icon
-            :name="item.filename"
-            :fill-type="item.fillType"
-            size="large"
-            variation="inverse"
-          />
-        </span>
-      </template>
       <template #filename="{ item }">
         <highlighted-text :value="item.filename" :highlighted="query" />
       </template>
@@ -126,11 +113,6 @@ export default defineComponent({
           title: 'Danger',
           type: 'slot'
         },
-        {
-          name: 'inverse',
-          title: 'Inverse',
-          type: 'slot'
-        },
         {
           name: 'fillType',
           title: 'Fill type'
diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
index 50f5e76e7f6..85d547a722a 100644
--- a/packages/design-system/src/components/OcButton/OcButton.vue
+++ b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -95,25 +95,29 @@ export default defineComponent({
     /**
      * Style variation to give additional meaning.
      * Defaults to `primary`.
-     * Can be `passive, primary, danger, success, warning`.
+     * Can be `passive, primary, danger, success, warning, brand`.
      */
     variation: {
       type: String,
       default: 'passive',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand'].includes(value)
       }
     },
     /**
      * Style variation to give additional meaning.
      * Defaults to `outline`.
-     * Can be `outline, filled, raw`.
+     * Can be `outline, filled, raw, raw-inverse` with following characteristics:
+     * - outline: transparent button with text- and border-color according to variation default-color
+     * - filled: button filled in variation default-color, text in variation contrast-color
+     * - raw: text-only button with text in variation default-color
+     * - raw-inverse: text-only button with text in variation contrast-color
      */
     appearance: {
       type: String,
       default: 'outline',
       validator: (value: string) => {
-        return ['filled', 'outline', 'raw'].includes(value)
+        return ['filled', 'outline', 'raw', 'raw-inverse'].includes(value)
       }
     },
     /**
@@ -193,9 +197,7 @@ export default defineComponent({
   line-height: $oc-size-icon-default * $factor;
 }
 
-@mixin oc-button-variation($color, $hover-color, $muted-color) {
-  background-color: $color;
-
+@mixin oc-button-variation($color, $hover-color, $muted-color, $contrast-color) {
   &:disabled {
     background-color: $muted-color;
   }
@@ -205,32 +207,51 @@ export default defineComponent({
     background-color: $hover-color;
   }
 
-  &-raw {
+  &-raw,
+  &-raw-inverse {
     background-color: transparent;
     border-style: none;
-    color: $color;
     font-size: var(--oc-font-size-medium);
     font-weight: normal;
     min-height: 0;
     padding: 0;
 
-    .oc-icon > svg {
-      fill: $color;
+    &:focus:not([disabled]),
+    &:hover:not([disabled]) {
+      background-color: transparent;
+    }
+
+    &:focus:not([disabled]):not(button),
+    &:hover:not([disabled]):not(button) {
+      text-decoration: underline;
     }
 
     &:disabled {
       background-color: transparent;
       color: $muted-color;
     }
+  }
+  &-raw {
+    color: $color;
 
-    &:focus:not([disabled]),
-    &:hover:not([disabled]) {
-      background-color: transparent;
+    .oc-icon > svg {
+      fill: $color;
     }
+  }
+  &-raw-inverse {
+    color: $contrast-color;
 
-    &:focus:not([disabled]):not(button),
-    &:hover:not([disabled]):not(button) {
-      text-decoration: underline;
+    .oc-icon > svg {
+      fill: $contrast-color;
+    }
+  }
+
+  &-filled {
+    background-color: $color;
+    color: $contrast-color;
+
+    .oc-icon > svg {
+      fill: $contrast-color;
     }
   }
 
@@ -268,7 +289,6 @@ export default defineComponent({
   align-items: center;
   border: 0;
   box-sizing: border-box;
-  color: var(--oc-color-text-inverse);
   display: inline-flex;
   font-weight: 400;
   padding: 0.5rem 0.8rem;
@@ -348,15 +368,21 @@ export default defineComponent({
     min-height: 2rem;
   }
 
-  .oc-icon > svg {
-    fill: var(--oc-color-text-inverse);
-  }
-
   &-passive {
     @include oc-button-variation(
       var(--oc-color-swatch-passive-default),
       var(--oc-color-swatch-passive-hover),
-      var(--oc-color-swatch-passive-muted)
+      var(--oc-color-swatch-passive-muted),
+      var(--oc-color-swatch-passive-contrast)
+    );
+  }
+
+  &-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)
     );
   }
 
@@ -364,14 +390,15 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-primary-default),
       var(--oc-color-swatch-primary-hover),
-      var(--oc-color-swatch-primary-muted)
+      var(--oc-color-swatch-primary-muted),
+      var(--oc-color-swatch-primary-contrast)
     );
     &-filled {
       @include oc-background-primary-gradient;
-      color: var(--oc-color-swatch-inverse-default) !important;
+      color: var(--oc-color-swatch-primary-contrast) !important;
 
       span > svg {
-        fill: var(--oc-color-swatch-inverse-default) !important;
+        fill: var(--oc-color-swatch-primary-contrast) !important;
       }
     }
   }
@@ -380,7 +407,8 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-success-default),
       var(--oc-color-swatch-success-hover),
-      var(--oc-color-swatch-success-muted)
+      var(--oc-color-swatch-success-muted),
+      var(--oc-color-swatch-success-contrast)
     );
   }
 
@@ -388,7 +416,8 @@ export default defineComponent({
     @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-muted),
+      var(--oc-color-swatch-warning-contrast)
     );
   }
 
@@ -396,39 +425,9 @@ export default defineComponent({
     @include oc-button-variation(
       var(--oc-color-swatch-danger-default),
       var(--oc-color-swatch-danger-hover),
-      var(--oc-color-swatch-danger-muted)
-    );
-  }
-
-  &-inverse {
-    @include oc-button-variation(
-      var(--oc-color-swatch-inverse-default),
-      var(--oc-color-swatch-inverse-hover),
-      var(--oc-color-swatch-inverse-muted)
+      var(--oc-color-swatch-danger-muted),
+      var(--oc-color-swatch-danger-contrast)
     );
-
-    &:not([disabled]) {
-      color: var(--oc-color-swatch-brand-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-brand-default);
-      }
-    }
-
-    &-outline:not([disabled]),
-    &-raw:not([disabled]) {
-      color: var(--oc-color-swatch-inverse-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-inverse-default);
-      }
-    }
-
-    &-outline:hover:not([disabled]),
-    &-outline:focus:not([disabled]) {
-      color: var(--oc-color-swatch-brand-default);
-      .oc-icon-passive > svg {
-        fill: var(--oc-color-swatch-brand-default);
-      }
-    }
   }
 
   &:disabled {
@@ -611,10 +610,6 @@ export default {
         {
           title: "danger",
           description: "Use for triggering possible destructive and non-reversible actions, like permanently deleting a file"
-        },
-        {
-          title: "inverse",
-          description: "Use on a dark background"
         }
       ]
     },
@@ -622,7 +617,8 @@ export default {
       return [
         "outline",
         "filled",
-        "raw"
+        "raw",
+        "raw-inverse"
       ]
     },
   },
diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
index fb3739f6f2a..969c8c7ced7 100644
--- a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
+++ b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -184,7 +184,7 @@ export default defineComponent({
   &-checked,
   :checked,
   &:indeterminate {
-    background-color: var(--oc-color-swatch-inverse-default);
+    background-color: var(--oc-color-swatch-passive-contrast);
   }
 
   &-checked,
diff --git a/packages/design-system/src/components/OcIcon/OcIcon.vue b/packages/design-system/src/components/OcIcon/OcIcon.vue
index 7da50cc563e..790afa4150a 100644
--- a/packages/design-system/src/components/OcIcon/OcIcon.vue
+++ b/packages/design-system/src/components/OcIcon/OcIcon.vue
@@ -133,14 +133,13 @@ export default defineComponent({
     /**
      * Style variation to give additional meaning.
      * Defaults to `passive`.
-     * Can be `passive, primary, danger, success, warning or inverse`.
-     * Inverse is meant to be used for icons on a colorful background.
+     * Can be `passive, primary, danger, success, warning or brand`.
      */
     variation: {
       type: String,
       default: 'passive',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand'].includes(value)
       }
     },
     /**
@@ -205,7 +204,6 @@ export default defineComponent({
 
   svg {
     display: block;
-    fill: var(--oc-color-swatch-passive-default);
   }
 
   &,
@@ -282,8 +280,8 @@ export default defineComponent({
     fill: var(--oc-color-swatch-danger-default);
   }
 
-  &-inverse > svg {
-    fill: var(--oc-color-text-inverse) !important;
+  &-brand > svg {
+    fill: var(--oc-color-swatch-brand-default);
   }
 }
 </style>
@@ -318,7 +316,7 @@ export default defineComponent({
       <oc-tbody>
         <oc-tr v-for="variation in variations" :key="'variation-' + variation.id">
           <oc-td>{{ variation.name }}</oc-td>
-          <oc-td v-bind:class="{'oc-background-brand': variation.name == 'inverse'}">
+          <oc-td>
             <oc-icon :variation="variation.name" name="close"/>
             <oc-icon :variation="variation.name" name="delete-bin-5"/>
             <oc-icon :variation="variation.name" name="information"/>
@@ -379,7 +377,7 @@ export default defineComponent({
           name: "warning",
         }, {
           id: "2324-8956-9042",
-          name: "inverse",
+          name: "brand",
         }]
       },
       sizes() {
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index 9c0816f1d47..38d1bff2522 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -464,7 +464,7 @@ export default defineComponent({
     }
 
     > h2 {
-      color: var(--oc-color-swatch-inverse-default);
+      color: var(--oc-color-swatch-brand-contrast);
       font-size: 1rem;
       font-weight: bold;
       margin: 0;
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index 19c9f39a403..8a7d165af9c 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -50,8 +50,8 @@
     <oc-button
       v-if="showCancelButton"
       :variation="cancelButtonVariation"
+      :appearance="cancelButtonAppearance"
       class="oc-ml-m"
-      appearance="raw"
       @click="onCancel"
     >
       <span v-text="$gettext('Cancel')" />
@@ -203,7 +203,18 @@ export default defineComponent({
       required: false,
       default: 'primary',
       validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning', 'inverse'].includes(value)
+        return ['passive', 'primary', 'danger', 'success', 'warning', 'brand'].includes(value)
+      }
+    },
+    /**
+     * Appearance of the cancel button
+     */
+    cancelButtonAppearance: {
+      type: String,
+      required: false,
+      default: 'raw',
+      validator: (value: string) => {
+        return ['outline', 'filled', 'raw', 'raw-inverse'].includes(value)
       }
     },
     /**
@@ -294,7 +305,7 @@ export default defineComponent({
   &-button {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    // Prevend double borders
+    // Prevent double borders
     // from input and button
     transform: translateX(-1px);
     z-index: 0;
diff --git a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
index ed52e688cf1..8c3812a4204 100644
--- a/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
+++ b/packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue
@@ -9,8 +9,7 @@
         class="oc-status-indicators-indicator oc-background-primary-gradient oc-p-xs oc-ml-xs"
         :aria-label="$gettext(indicator.label)"
         :aria-describedby="getIndicatorDescriptionId(indicator)"
-        appearance="raw"
-        variation="inverse"
+        appearance="raw-inverse"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
         @click="indicator.handler(resource, indicator.target, $router)"
diff --git a/packages/design-system/src/tokens/ods/color.yaml b/packages/design-system/src/tokens/ods/color.yaml
index 4296e9ae467..17733b456a8 100644
--- a/packages/design-system/src/tokens/ods/color.yaml
+++ b/packages/design-system/src/tokens/ods/color.yaml
@@ -21,6 +21,10 @@ color:
         value: rgb(4, 30, 66)
       hover:
         value: rgb(34, 57, 89)
+      muted:
+        value: rgb(0, 20, 40)
+      contrast:
+        value: "{color.text.inverse.value}"
     primary:
       default:
         value: rgb(74, 118, 172)
@@ -33,6 +37,8 @@ color:
         value: rgb(8, 105, 222)
       gradient:
         value: rgb(78, 133, 200)
+      contrast:
+        value: "{color.text.inverse.value}"
     success:
       default:
         value: rgb(79, 130, 47)
@@ -43,6 +49,8 @@ color:
         value: rgb(147, 224, 84)
       muted:
         value: rgb(83, 150, 10)
+      contrast:
+        value: "{color.text.inverse.value}"
     warning:
       default:
         value: rgb(198, 80, 27)
@@ -53,6 +61,8 @@ color:
         value: rgb(253, 169, 75)
       muted:
         value: rgb(179, 81, 0)
+      contrast:
+        value: "{color.text.inverse.value}"
     danger:
       default:
         value: rgb(224, 0, 0)
@@ -60,6 +70,8 @@ color:
         value: rgb(233, 100, 100)
       muted:
         value: rgb(181, 0, 0)
+      contrast:
+        value: "{color.text.inverse.value}"
     passive:
       default:
         value: rgb(76, 95, 121)
@@ -67,6 +79,8 @@ color:
         value: rgb(151, 162, 177)
       muted:
         value: rgb(40, 62, 93)
+      contrast:
+        value: "{color.text.inverse.value}"
     inverse:
       default:
         value: rgb(255, 255, 255)
@@ -74,6 +88,8 @@ color:
         value: rgb(255, 255, 255)
       muted:
         value: rgb(191, 191, 191)
+      contrast:
+        value: "{color.text.default.value}"
   background:
     default:
       value: rgb(255, 255, 255)
diff --git a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
index 8af8035da0d..bfd8bc31dd6 100644
--- a/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
+++ b/packages/web-app-files/src/components/AppBar/SharesNavigation.vue
@@ -24,10 +24,9 @@
             <oc-button
               type="router-link"
               class="oc-my-xs shares-nav-mobile"
-              appearance="raw"
               :to="navItem.to"
               :class="{ 'oc-background-primary-gradient': navItem.active }"
-              :variation="navItem.active ? 'inverse' : 'passive'"
+              :appearance="navItem.active ? 'raw-inverse' : 'raw'"
             >
               <span class="icon-box" :class="{ 'icon-box-active': navItem.active }">
                 <oc-icon :name="navItem.icon" />
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index af40165daf2..c3090e3060f 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -136,7 +136,7 @@
       />
     </template>
     <template #owner="{ item }">
-      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+      <oc-button appearance="raw-inverse" variation="passive" @click="openSharingSidebar(item)">
         <oc-avatars
           class="resource-table-people"
           :items="item.owner"
@@ -146,7 +146,7 @@
       </oc-button>
     </template>
     <template #sharedWith="{ item }">
-      <oc-button appearance="raw" variation="inverse" @click="openSharingSidebar(item)">
+      <oc-button appearance="raw-inverse" variation="passive" @click="openSharingSidebar(item)">
         <oc-avatars
           class="resource-table-people"
           :items="item.sharedWith"
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
index eb36f0a3857..8353a96d8d5 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTiles.vue
@@ -434,7 +434,7 @@ export default defineComponent({
       }
 
       &.selected {
-        color: var(--oc-color-swatch-inverse-default) !important;
+        color: var(--oc-color-swatch-passive-contrast) !important;
       }
     }
   }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
index 2a318402de7..4b4daa9c117 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/RoleDropdown.vue
@@ -393,10 +393,10 @@ export default defineComponent({
       }
 
       &.selected {
-        color: var(--oc-color-swatch-inverse-default) !important;
+        color: var(--oc-color-swatch-passive-contrast) !important;
 
         ::v-deep .oc-icon > svg {
-          fill: var(--oc-color-swatch-inverse-default) !important;
+          fill: var(--oc-color-swatch-passive-contrast) !important;
         }
       }
     }
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index eb1b4cfdbf9..9c31c14caa2 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -508,10 +508,10 @@ export default defineComponent({
     }
 
     &.selected {
-      color: var(--oc-color-swatch-inverse-default) !important;
+      color: var(--oc-color-swatch-passive-contrast) !important;
 
       ::v-deep .oc-icon > svg {
-        fill: var(--oc-color-swatch-inverse-default) !important;
+        fill: var(--oc-color-swatch-passive-contrast) !important;
       }
     }
   }
diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
index cd7ded8c89d..9550d2a2da0 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/SharesNavigation.spec.ts.snap
@@ -30,7 +30,7 @@ exports[`SharesNavigation component renders a shares navigation for both mobile
     <oc-drop-stub closeonclick="true" dropid="oc-drop-1" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#shares_navigation_mobile">
       <oc-list-stub raw="false">
         <li>
-          <oc-button-stub appearance="raw" class="oc-my-xs shares-nav-mobile oc-background-primary-gradient" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="/files/shares/with-me/" type="router-link" variation="inverse">
+          <oc-button-stub appearance="raw-inverse" class="oc-my-xs shares-nav-mobile oc-background-primary-gradient" disabled="false" gapsize="medium" justifycontent="center" size="medium" submit="button" to="/files/shares/with-me/" type="router-link" variation="passive">
             <span class="icon-box icon-box-active">
               <oc-icon-stub accessiblelabel="" color="" filltype="fill" name="share-forward" size="medium" type="span" variation="passive"></oc-icon-stub>
             </span>
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 215c8c82327..13deb7396f0 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -77,8 +77,7 @@
         <oc-button
           v-oc-tooltip="previousDescription"
           class="preview-controls-previous"
-          appearance="raw"
-          variation="inverse"
+          appearance="raw-inverse"
           :aria-label="previousDescription"
           @click="prev"
         >
@@ -91,8 +90,7 @@
         <oc-button
           v-oc-tooltip="nextDescription"
           class="preview-controls-next"
-          appearance="raw"
-          variation="inverse"
+          appearance="raw-inverse"
           :aria-label="nextDescription"
           @click="next"
         >
@@ -104,8 +102,7 @@
               isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
             "
             class="preview-controls-fullscreen"
-            appearance="raw"
-            variation="inverse"
+            appearance="raw-inverse"
             :aria-label="
               isFullScreenModeActivated ? exitFullScreenDescription : enterFullScreenDescription
             "
@@ -122,8 +119,7 @@
             <oc-button
               v-oc-tooltip="imageShrinkDescription"
               class="preview-controls-image-shrink"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageShrinkDescription"
               @click="imageShrink"
             >
@@ -132,8 +128,7 @@
             <oc-button
               v-oc-tooltip="imageOriginalSizeDescription"
               class="preview-controls-image-original-size oc-ml-s oc-mr-s"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageOriginalSizeDescription"
               @click="currentImageZoom = 1"
             >
@@ -142,8 +137,7 @@
             <oc-button
               v-oc-tooltip="imageZoomDescription"
               class="preview-controls-image-zoom"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageZoomDescription"
               @click="imageZoom"
             >
@@ -154,8 +148,7 @@
             <oc-button
               v-oc-tooltip="imageRotateLeftDescription"
               class="preview-controls-rotate-left"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageRotateLeftDescription"
               @click="imageRotateLeft"
             >
@@ -164,8 +157,7 @@
             <oc-button
               v-oc-tooltip="imageRotateRightDescription"
               class="preview-rotate-right"
-              appearance="raw"
-              variation="inverse"
+              appearance="raw-inverse"
               :aria-label="imageRotateRightDescription"
               @click="imageRotateRight"
             >
@@ -649,7 +641,7 @@ export default defineComponent({
 }
 
 .preview-controls-action-count {
-  color: var(--oc-color-swatch-inverse-default);
+  color: var(--oc-color-swatch-passive-contrast);
 }
 
 .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 2e1580ee0b0..84882998b5c 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -14,7 +14,8 @@
       :placeholder="searchLabel"
       :button-hidden="true"
       :show-cancel-button="showCancelButton"
-      cancel-button-variation="inverse"
+      cancel-button-variation="brand"
+      cancel-button-appearance="raw-inverse"
       :cancel-handler="cancelSearch"
       @input="updateTerm"
       @clear="onClear"
@@ -28,8 +29,8 @@
       v-oc-tooltip="$gettext('Display search bar')"
       :aria-label="$gettext('Click to display and focus the search bar')"
       class="mobile-search-btn oc-mr-s"
-      appearance="raw"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       @click="showSearchBar"
     >
       <oc-icon name="search" fill-type="line"></oc-icon>
diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
index 97da084ed83..7db60732a38 100644
--- a/packages/web-pkg/src/components/ItemFilter.vue
+++ b/packages/web-pkg/src/components/ItemFilter.vue
@@ -230,12 +230,6 @@ export default defineComponent({
       background-color: var(--oc-color-background-hover) !important;
     }
   }
-  &-input input {
-    border: 1px solid var(--oc-color-swatch-inverse-muted);
-  }
-  &-checkbox input {
-    border: 2px solid var(--oc-color-swatch-inverse-muted);
-  }
 }
 </style>
 
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
index f878fd44164..d224a8d7848 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue
@@ -161,7 +161,7 @@ export default defineComponent({
   .oc-sidebar-nav li a.active {
     &:focus,
     &:hover {
-      color: var(--oc-color-swatch-inverse-default);
+      color: var(--oc-color-swatch-passive-contrast);
     }
   }
 }
diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
index d376c4224b8..397e2134b42 100644
--- a/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
+++ b/packages/web-runtime/src/components/SidebarNav/SidebarNavItem.vue
@@ -7,8 +7,7 @@
     <oc-button
       v-oc-tooltip="toolTip"
       type="router-link"
-      appearance="raw"
-      :variation="active ? 'inverse' : 'passive'"
+      :appearance="active ? 'raw-inverse' : 'raw'"
       :class="['oc-sidebar-nav-item-link', { active: active }]"
       :to="target"
       :data-nav-id="index"
diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
index 0b9eaf2ffd7..a1c741d8d49 100644
--- a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
+++ b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -8,8 +8,8 @@
       id="_appSwitcherButton"
       ref="menubutton"
       v-oc-tooltip="applicationSwitcherLabel"
-      appearance="raw"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       class="oc-topbar-menu-burger"
       :aria-label="applicationSwitcherLabel"
     >
@@ -31,9 +31,9 @@
             :target="n.target"
             :href="n.url"
             :to="n.path"
-            appearance="raw"
+            :appearance="n.active ? 'raw-inverse' : 'raw'"
+            :variation="n.active ? 'primary' : 'passive'"
             :class="{ 'oc-background-primary-gradient router-link-active': n.active }"
-            :variation="n.active ? 'inverse' : 'passive'"
           >
             <span class="icon-box">
               <oc-icon :name="n.icon" />
@@ -126,7 +126,7 @@ export default defineComponent({
   button.router-link-active {
     &:focus,
     &:hover {
-      color: var(--oc-color-swatch-inverse-default);
+      color: var(--oc-color-swatch-passive-contrast);
     }
   }
 }
diff --git a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
index eac161056d1..e083bd4481d 100644
--- a/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
+++ b/packages/web-runtime/src/components/Topbar/FeedbackLink.vue
@@ -5,8 +5,8 @@
       type="a"
       :href="hrefOrFallback"
       target="_blank"
-      appearance="raw"
-      variation="inverse"
+      appearance="raw-inverse"
+      variation="brand"
       :aria-label="ariaLabelOrFallback"
       aria-describedby="oc-feedback-link-description"
     >
diff --git a/packages/web-runtime/src/components/Topbar/NotificationBell.vue b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
index fb8594dc391..bb5b2b89092 100644
--- a/packages/web-runtime/src/components/Topbar/NotificationBell.vue
+++ b/packages/web-runtime/src/components/Topbar/NotificationBell.vue
@@ -2,8 +2,8 @@
   <oc-button
     id="oc-notifications-bell"
     v-oc-tooltip="notificationsLabel"
-    appearance="raw"
-    variation="inverse"
+    appearance="raw-inverse"
+    variation="brand"
     :aria-label="notificationsLabel"
   >
     <oc-icon
diff --git a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
index b53c5892ec4..356feadac65 100644
--- a/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
+++ b/packages/web-runtime/src/components/Topbar/ThemeSwitcher.vue
@@ -3,8 +3,8 @@
     v-oc-tooltip="buttonLabel"
     class="themeswitcher-btn"
     :aria-label="buttonLabel"
-    appearance="raw"
-    variation="inverse"
+    appearance="raw-inverse"
+    variation="brand"
     @click="toggleTheme"
   >
     <span class="oc-visible@s" :aria-label="switchLabel" />
diff --git a/packages/web-runtime/src/components/UploadInfo.vue b/packages/web-runtime/src/components/UploadInfo.vue
index 45a69ca25a1..5ecb39ed30f 100644
--- a/packages/web-runtime/src/components/UploadInfo.vue
+++ b/packages/web-runtime/src/components/UploadInfo.vue
@@ -8,8 +8,8 @@
         v-if="!filesInProgressCount"
         id="close-upload-info-btn"
         v-oc-tooltip="$gettext('Close')"
-        appearance="raw"
-        variation="inverse"
+        appearance="raw-inverse"
+        variation="brand"
         @click="closeInfo"
       >
         <oc-icon name="close" />
@@ -622,7 +622,7 @@ export default defineComponent({
   }
 
   .upload-info-title p {
-    color: var(--oc-color-swatch-inverse-default);
+    color: var(--oc-color-swatch-brand-contrast);
   }
 
   .oc-resource-indicators .parent-folder .text {
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
index 9b0fecdab78..9c064133561 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ApplicationsMenu.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ApplicationsMenu component should render navigation with button and menu items in dropdown 1`] = `
 <nav aria-label="Main navigation" class="oc-flex oc-flex-middle" id="applications-menu">
-  <oc-button-stub appearance="raw" arialabel="Application Switcher" class="oc-topbar-menu-burger" disabled="false" gapsize="medium" id="_appSwitcherButton" justifycontent="center" size="medium" submit="button" type="button" variation="inverse">
+  <oc-button-stub appearance="raw-inverse" arialabel="Application Switcher" class="oc-topbar-menu-burger" disabled="false" gapsize="medium" id="_appSwitcherButton" justifycontent="center" size="medium" submit="button" type="button" variation="brand">
     <oc-icon-stub accessiblelabel="" class="oc-flex" color="" filltype="fill" name="grid" size="large" type="span" variation="passive"></oc-icon-stub>
   </oc-button-stub>
   <oc-drop-stub closeonclick="true" dropid="app-switcher-dropdown" isnested="false" mode="click" paddingsize="small" position="bottom-start" toggle="#_appSwitcherButton">
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
index 22f03052fdc..c3c7097b34b 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/NotificationBell.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NotificationBell should match snapshot 1`] = `
-<button aria-label="Notifications" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw" id="oc-notifications-bell" type="button">
+<button aria-label="Notifications" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse" id="oc-notifications-bell" type="button">
   <!-- @slot Content of the button -->
   <oc-icon-stub class="oc-cursor-pointer oc-flex oc-flex-middle" fill-type="line" name="notification-3"></oc-icon-stub>
   <!--v-if-->
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
index 8b2d63a078e..19c10629373 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/ThemeSwitcher.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ThemeSwitcher component restores dark theme if dark theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
@@ -9,7 +9,7 @@ exports[`ThemeSwitcher component restores dark theme if dark theme is saved in l
 `;
 
 exports[`ThemeSwitcher component restores light theme if light theme is saved in localstorage 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>
@@ -17,7 +17,7 @@ exports[`ThemeSwitcher component restores light theme if light theme is saved in
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in dark mode if user prefers dark color scheme 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
@@ -25,7 +25,7 @@ exports[`ThemeSwitcher component visually renders a button, initially in dark mo
 `;
 
 exports[`ThemeSwitcher component visually renders a button, initially in light mode per default 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>
@@ -33,7 +33,7 @@ exports[`ThemeSwitcher component visually renders a button, initially in light m
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 1`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="moon-clear"></oc-icon-stub>
@@ -41,7 +41,7 @@ exports[`ThemeSwitcher component visually toggles between themes upon click 1`]
 `;
 
 exports[`ThemeSwitcher component visually toggles between themes upon click 2`] = `
-<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-inverse oc-button-inverse-raw themeswitcher-btn" type="button">
+<button aria-label="Click to switch theme" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-brand oc-button-brand-raw-inverse themeswitcher-btn" type="button">
   <!-- @slot Content of the button -->
   <span aria-label="Currently used theme" class="oc-visible@s"></span>
   <oc-icon-stub fill-type="line" name="sun"></oc-icon-stub>