diff --git a/.changeset/bright-insects-unite.md b/.changeset/bright-insects-unite.md
new file mode 100644
index 0000000000..1b9e20b4d1
--- /dev/null
+++ b/.changeset/bright-insects-unite.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Switched mega dropdown content to one column on mobile.
diff --git a/.changeset/dry-trainers-stare.md b/.changeset/dry-trainers-stare.md
new file mode 100644
index 0000000000..9c39d2ade3
--- /dev/null
+++ b/.changeset/dry-trainers-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed opening state of megadropdown trigger and expanded detection.
diff --git a/.changeset/four-beers-leave.md b/.changeset/four-beers-leave.md
new file mode 100644
index 0000000000..7b61eca6d8
--- /dev/null
+++ b/.changeset/four-beers-leave.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added scss file import documentation to palette.
diff --git a/.changeset/poor-jars-call.md b/.changeset/poor-jars-call.md
new file mode 100644
index 0000000000..3ff6c4d4d9
--- /dev/null
+++ b/.changeset/poor-jars-call.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed `.bg-` classes to define background color of elements.
diff --git a/.changeset/pre.json b/.changeset/pre.json
index dd59e1d095..0a150682b6 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -33,7 +33,9 @@
     "blue-kings-beg",
     "brave-kings-dance",
     "breezy-cups-add",
+    "bright-insects-unite",
     "brown-badgers-dream",
+    "calm-rabbits-pull",
     "chatty-kiwis-travel",
     "chatty-spoons-unite",
     "chilled-owls-walk",
@@ -47,6 +49,7 @@
     "dirty-mayflies-taste",
     "dirty-squids-hunt",
     "dry-moons-walk",
+    "dry-trainers-stare",
     "dull-falcons-hope",
     "eight-turkeys-matter",
     "eleven-keys-work",
@@ -64,13 +67,18 @@
     "gold-chairs-grin",
     "gold-chefs-rule",
     "gold-dryers-drop",
+    "gold-news-repair",
     "gorgeous-flowers-flow",
+    "gorgeous-glasses-end",
+    "gorgeous-needles-run",
     "great-humans-talk",
     "grumpy-lobsters-agree",
     "grumpy-parrots-wonder",
+    "heavy-eyes-live",
     "heavy-rats-explode",
     "hip-gifts-give",
     "honest-numbers-end",
+    "hungry-penguins-turn",
     "itchy-meals-drum",
     "khaki-cougars-itch",
     "kind-buses-trade",
@@ -87,11 +95,16 @@
     "metal-rivers-look",
     "nasty-ads-greet",
     "neat-suits-provide",
+    "nervous-lizards-laugh",
     "nervous-rocks-shop",
+    "new-cougars-count",
     "new-goats-impress",
     "new-pianos-mix",
+    "nice-cycles-provide",
     "nice-ligers-attend",
+    "nine-baboons-rule",
     "ninety-nails-float",
+    "old-spiders-travel",
     "orange-maps-tan",
     "pink-weeks-relate",
     "plenty-apricots-raise",
@@ -108,6 +121,7 @@
     "quick-mails-joke",
     "quiet-apes-rhyme",
     "rare-dryers-count",
+    "real-gorillas-behave",
     "red-cobras-cry",
     "red-lies-lick",
     "red-moose-do",
@@ -128,25 +142,32 @@
     "slimy-plums-sniff",
     "slimy-rockets-pull",
     "slow-fishes-reply",
+    "smooth-bugs-explode",
     "soft-moles-whisper",
+    "soft-pugs-dream",
     "strange-bottles-impress",
     "strange-mice-bake",
     "stupid-walls-tie",
     "tame-terms-push",
+    "tender-laws-confess",
     "thirty-cats-juggle",
     "three-lies-do",
     "tidy-dolls-walk",
     "tidy-keys-push",
     "tidy-paws-type",
     "tiny-socks-count",
+    "tough-cheetahs-clean",
     "tricky-crews-agree",
+    "twenty-chairs-kick",
     "twenty-items-drum",
+    "violet-poems-attend",
     "warm-drinks-prove",
     "weak-falcons-study",
     "weak-jars-rhyme",
     "wild-bugs-work",
     "wise-spies-shave",
     "wise-tomatoes-brake",
+    "yellow-gifts-sit",
     "yellow-yaks-jog"
   ]
 }
diff --git a/.changeset/quiet-dolls-lick.md b/.changeset/quiet-dolls-lick.md
new file mode 100644
index 0000000000..929fe508ec
--- /dev/null
+++ b/.changeset/quiet-dolls-lick.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed icon color of banner in high contrast mode.
diff --git a/.changeset/quiet-pots-tickle.md b/.changeset/quiet-pots-tickle.md
new file mode 100644
index 0000000000..29d61ac9d0
--- /dev/null
+++ b/.changeset/quiet-pots-tickle.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added hint to not use active, disabled chips.
diff --git a/.changeset/violet-geckos-shave.md b/.changeset/violet-geckos-shave.md
new file mode 100644
index 0000000000..eccb818090
--- /dev/null
+++ b/.changeset/violet-geckos-shave.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added hover color to `post-accordion` in high contrast mode.
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index dac8ffd293..dfef9566ba 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 1.1.10-next.8
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 77476b8813..f3fcec1e57 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.8",
+  "version": "1.1.10-next.9",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"
diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
index 9711a4ec09..f08d9d448d 100644
--- a/packages/components-angular/projects/components/CHANGELOG.md
+++ b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index 845bdc6452..bd4a0c44b7 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/components-angular/projects/consumer-app/src/app/app.component.html b/packages/components-angular/projects/consumer-app/src/app/app.component.html
index b129ac5352..81d4583196 100644
--- a/packages/components-angular/projects/consumer-app/src/app/app.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/app.component.html
@@ -1,4 +1,4 @@
-<header class="bg-dark">
+<header class="palette-alternate">
   <nav class="container py-8">
     <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">
diff --git a/packages/components-angular/projects/consumer-app/src/styles.scss b/packages/components-angular/projects/consumer-app/src/styles.scss
index 1bcba5ba5f..496f5a4f49 100644
--- a/packages/components-angular/projects/consumer-app/src/styles.scss
+++ b/packages/components-angular/projects/consumer-app/src/styles.scss
@@ -1 +1 @@
-@use '@swisspost/design-system-styles';
+@use '@swisspost/design-system-styles/post-external.scss';
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 8c9419a1cd..816d41a2c6 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 6db0c2c351..9d8dad0a91 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 22e837531b..f40588bf27 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,44 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.9
+
+### Major Changes
+
+- Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state. (by [@alizedebray](https://github.com/alizedebray) with [#4223](https://github.com/swisspost/design-system/pull/4223))
+
+### Minor Changes
+
+- Added composable footer component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-megadropdown` component. (by [@leagrdv](https://github.com/leagrdv) with [#4177](https://github.com/swisspost/design-system/pull/4177))
+
+- Added the parts `button` and `body` in the `post-accordion-item` component, so one can override styles from the outside. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4065](https://github.com/swisspost/design-system/pull/4065))
+
+- Added the css parts `button` and `body` in the `post-accorddion-item` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-language-switch` component that enables users to change the language of a page. (by [@leagrdv](https://github.com/leagrdv) with [#4044](https://github.com/swisspost/design-system/pull/4044))
+
+### Patch Changes
+
+- Switched mega dropdown content to one column on mobile. (by [@leagrdv](https://github.com/leagrdv) with [#4300](https://github.com/swisspost/design-system/pull/4300))
+
+- Fixed opening state of megadropdown trigger and expanded detection. (by [@leagrdv](https://github.com/leagrdv) with [#4299](https://github.com/swisspost/design-system/pull/4299))
+
+- Fix tab isolation in nested `post-tabs` components by scoping tab queries and interactions to the current instance. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4211](https://github.com/swisspost/design-system/pull/4211))
+
+- Added a fixed slot `post-list-item` on the `post-list-item` host element, so it is no longer necessary to add it manually. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Fixed the used `headingLevel` in the `post-accorddion-item` component. The component now uses the value from its closest `post-accorddion` parent component, if this is specified and falls back to `h2` if not specified. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles. (by [@alizedebray](https://github.com/alizedebray) with [#4242](https://github.com/swisspost/design-system/pull/4242))
+
+- Fixed an issue with the post-list component where the `horizontal` property could not be set programmatically. Also, reduced the specificity of the component's styles to make customization easier. (by [@alizedebray](https://github.com/alizedebray) with [#4137](https://github.com/swisspost/design-system/pull/4137))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-icons@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Minor Changes
diff --git a/packages/components/cypress/e2e/tag.cy.ts b/packages/components/cypress/e2e/tag.cy.ts
index 0d00db286e..89ada3d6f8 100644
--- a/packages/components/cypress/e2e/tag.cy.ts
+++ b/packages/components/cypress/e2e/tag.cy.ts
@@ -29,7 +29,7 @@ describe('Tag', () => {
       });
     });
 
-    it('should set the tags bg-color according to the prop `variant`', () => {
+    it('should set the tags background color according to the prop `variant`', () => {
       ['gray', 'white', 'info', 'success', 'danger', 'warning', 'yellow'].forEach(bg => {
         cy.get('@tag').invoke('attr', 'variant', bg).should('have.attr', 'variant', bg);
         cy.get('@wrapper').should('have.class', `tag-${bg}`);
diff --git a/packages/components/package.json b/packages/components/package.json
index 2068ff5214..d261b38173 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,8 +40,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
index afdaeb0109..76172f1f38 100644
--- a/packages/components/src/components.d.ts
+++ b/packages/components/src/components.d.ts
@@ -311,10 +311,6 @@ export namespace Components {
           * Hides the popover menu and restores focus to the previously focused element.
          */
         "hide": () => Promise<void>;
-        /**
-          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
-         */
-        "isLanguageSwitch": boolean;
         /**
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
@@ -1155,10 +1151,6 @@ declare namespace LocalJSX {
         "for": string;
     }
     interface PostMenu {
-        /**
-          * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
-         */
-        "isLanguageSwitch"?: boolean;
         /**
           * Emits when the menu is shown or hidden. The event payload is a boolean: `true` when the menu was opened, `false` when it was closed.
          */
diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.scss b/packages/components/src/components/post-accordion-item/post-accordion-item.scss
index 0e4bc8249e..e5c7319221 100644
--- a/packages/components/src/components/post-accordion-item/post-accordion-item.scss
+++ b/packages/components/src/components/post-accordion-item/post-accordion-item.scss
@@ -21,6 +21,9 @@ tokens.$default-map: components.$post-accordion;
   }
   &:has(.accordion-button:hover)::after {
     border-color: tokens.get('accordion-hover-border');
+    @include utility-mx.high-contrast-mode() {
+      border-color: Highlight;
+    }
   }
 }
 
@@ -47,7 +50,6 @@ tokens.$default-map: components.$post-accordion;
     calc(
       tokens.get('accordion-header-padding-inline') + tokens.get('accordion-border-bottom-width')
     );
-  transition: accordion.$accordion-button-transition;
   cursor: pointer;
 
   &::before {
@@ -100,13 +102,7 @@ tokens.$default-map: components.$post-accordion;
   @include utility-mx.high-contrast-mode() {
     &:hover,
     &:focus-visible {
-      &:not(:disabled) {
-        outline: tokens.get('accordion-border-bottom-width') solid Highlight;
-      }
-    }
-
-    &:disabled {
-      opacity: 1 !important;
+      color: Highlight;
     }
   }
 }
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 1639cc87d8..9e04361563 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -47,6 +47,10 @@ export class PostHeader {
       ? slideUp(this.mobileMenu)
       : slideDown(this.mobileMenu);
 
+    // Update the state of the toggle button
+    const menuButton = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
+    menuButton.toggled = !this.mobileMenuExtended;
+
     // Toggle menu visibility before it slides down and after it slides back up
     if (this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
     this.mobileMenuExtended = !this.mobileMenuExtended;
@@ -107,10 +111,6 @@ export class PostHeader {
     if (newDevice === 'desktop' && this.mobileMenuExtended) {
       this.toggleMobileMenu();
       this.mobileMenuAnimation.finish(); // no animation
-
-
-      const menuToggler = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
-      if (menuToggler) menuToggler.toggled = false;
     }
 
     // Apply only on change for doing work only when necessary
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 9e767ffa25..c6f08ed52b 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/button';
 @use '@swisspost/design-system-styles/mixins/icons';
+@use '@swisspost/design-system-styles/mixins/utilities';
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/functions/tokens';
 @use '@swisspost/design-system-styles/tokens/elements';
@@ -19,6 +20,7 @@ post-mainnavigation {
     post-megadropdown-trigger button {
       @include button.reset-button;
       text-align: start;
+      @include utilities.focus-style;
     }
 
     > a,
@@ -73,7 +75,8 @@ post-mainnavigation {
           border-block-width: var(--post-core-dimension-2);
         }
 
-        &.selected {
+        &.selected,
+        &[aria-expanded='true'] {
           border-block-width: var(--post-core-dimension-4);
           font-weight: var(--post-core-font-weight-700);
         }
@@ -93,7 +96,8 @@ post-mainnavigation {
           transition: transform animation.$transition-base-timing;
         }
 
-        &.selected::after {
+        &.selected::after,
+        &[aria-expanded='true']::after {
           transform: rotate(180deg);
         }
       }
diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
index a9d5e32f23..f63d1add6e 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
@@ -43,9 +43,7 @@ export class PostMegadropdownTrigger {
   }
 
   private handleToggle() {
-    if (this.megadropdown && this.slottedButton) {
-      this.ariaExpanded = !this.ariaExpanded;
-      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+    if (this.megadropdown) {
       this.megadropdown.toggle(this.host);
     } else {
       console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -55,6 +53,16 @@ export class PostMegadropdownTrigger {
   componentDidLoad() {
     this.validateControlFor();
 
+    // Check if the mega dropdown attached to the trigger is expanded or not
+    document.addEventListener('postToggleMegadropdown', (event: CustomEvent) => {
+      if ((event.target as HTMLPostMegadropdownElement).id === this.for) {
+        this.ariaExpanded = event.detail;
+        if (this.slottedButton) {
+          this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+        }
+      }
+    });
+
     this.slottedButton = this.host.querySelector('button');
     if (this.slottedButton) {
       this.slottedButton.setAttribute('aria-haspopup', 'menu');
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index ba5e0d7465..3871f4d11c 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -77,6 +77,10 @@ post-popovercontainer {
     @include media.max(lg) {
       grid-template-columns: repeat(auto-fit, minmax(min(35vw, 100%), 1fr));
     }
+
+    @include media.max(sm) {
+      grid-template-columns: 1fr;
+    }
   }
 
   h2 {
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
deleted file mode 100644
index f09d32524a..0000000000
--- a/packages/components/src/components/post-menu-item/post-menu-item.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-    display: block;
-}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx
index b4c7de0469..5f6685d5d9 100644
--- a/packages/components/src/components/post-menu-item/post-menu-item.tsx
+++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx
@@ -1,14 +1,10 @@
-import { Component, h, Element, Host } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 import { version } from '@root/package.json';
 
 @Component({
   tag: 'post-menu-item',
-  shadow: true,
-  styleUrl: 'post-menu-item.scss',
 })
 export class PostMenuItem {
-  @Element() host: HTMLPostMenuItemElement;
-  
   render() {
     return (
       <Host role="menuitem" data-version={version}>
diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss
index 95b15284b7..d207ad3f3d 100644
--- a/packages/components/src/components/post-menu/post-menu.scss
+++ b/packages/components/src/components/post-menu/post-menu.scss
@@ -8,4 +8,9 @@ post-popovercontainer {
   padding: var(--post-menu-padding);
   background-color: var(--post-menu-bg, #ffffff);
   border-color: var(--post-menu-bg, #ffffff);
-}
\ No newline at end of file
+}
+
+.popover-container {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx
index 8e6edd5cfb..775c831172 100644
--- a/packages/components/src/components/post-menu/post-menu.tsx
+++ b/packages/components/src/components/post-menu/post-menu.tsx
@@ -11,7 +11,7 @@ import {
 } from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
 import { version } from '@root/package.json';
-import { isFocusable } from '@/utils/is-focusable';
+import { getFocusableChildren } from '@/utils/get-focusable-children';
 import { getRoot } from '@/utils';
 
 @Component({
@@ -43,11 +43,6 @@ export class PostMenu {
    */
   @Prop() readonly placement?: Placement = 'bottom';
 
-  /**
-   * Whether or not the post-menu is used within a post-language-switch component as the children structure is not the same.
-   */
-  @Prop() isLanguageSwitch: boolean = false;
-
   /**
    * Holds the current visibility state of the menu.
    * This state is internally managed to track whether the menu is open (`true`) or closed (`false`),
@@ -151,11 +146,10 @@ export class PostMenu {
       return;
     }
 
-    const currentFocusedElement = this.isLanguageSwitch
-      ? (document.activeElement.shadowRoot.querySelector('button') as HTMLElement)
-      : (this.root.activeElement as HTMLElement); // Use root's active element
-
-    let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+    let currentIndex = menuItems.findIndex(el => {
+      // Check if the item is currently focused within its rendered scope (document or shadow root)
+      return el === getRoot(el).activeElement;
+    });
 
     switch (e.key) {
       case this.KEYCODES.UP:
@@ -191,24 +185,16 @@ export class PostMenu {
   private getSlottedItems(): Element[] {
     const slot = this.host.shadowRoot.querySelector('slot');
     const slottedElements = slot ? slot.assignedElements() : [];
-    let menuItems;
 
-    if (this.isLanguageSwitch) {
-      menuItems = Array.from(document.querySelectorAll('post-language-option[variant="dropdown"]'))
-        .map(el => el.shadowRoot.querySelector('button'))
-        .flat();
-    } else {
-      menuItems = slottedElements
-        .filter(el => el.tagName === 'POST-MENU-ITEM')
-        .map(el => {
-          const slot = el.shadowRoot.querySelector('slot');
-          const assignedElements = slot ? slot.assignedElements() : [];
-          return assignedElements.filter(isFocusable);
-        })
-        .flat();
-    }
-
-    return menuItems;
+    return (
+      slottedElements
+        // If the element is a slot, get the assigned elements
+        .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
+        // Filter out elements that have a 'menuitem' role
+        .filter(el => el.getAttribute('role') === 'menuitem')
+        // For each menu item, get any focusable children (e.g., buttons, links)
+        .flatMap(el => Array.from(getFocusableChildren(el)))
+    );
   }
 
   render() {
diff --git a/packages/components/src/components/post-popover/post-popover.scss b/packages/components/src/components/post-popover/post-popover.scss
index aa81fd5f0d..9bd6558e33 100644
--- a/packages/components/src/components/post-popover/post-popover.scss
+++ b/packages/components/src/components/post-popover/post-popover.scss
@@ -6,9 +6,6 @@
 }
 
 :host {
-  --post-contrast-color: #{post.$white};
-  --post-bg-rgb: #{post.rgb-values(post.$gray-80)};
-
   display: block;
 }
 
diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
index adeb6b4e4f..00fc94bfd8 100644
--- a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
+++ b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
@@ -22,9 +22,10 @@
 :where(post-popovercontainer) {
   @include elevation-mx.elevation('elevation-3');
 
+  background: var(--post-current-palette-bg);
+  color: var(--post-current-palette-fg);
   position: fixed;
   z-index: commons.$zindex-popover;
-
   width: max-content;
   margin: 0;
   padding: 0;
@@ -34,8 +35,6 @@
   }
 
   box-sizing: border-box;
-  color: var(--post-contrast-color);
-  background-color: rgb(var(--post-bg-rgb));
   border: 2px solid transparent; // Keeping the default border for HCM
   border-radius: commons.$border-radius;
 
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 48caed1ce9..8d1d131f33 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -4,11 +4,6 @@
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
 
-:host {
-  --post-contrast-color: #{color.$white};
-  --post-bg-rgb: #{color-fn.rgb-values(color.$gray-80)};
-}
-
 post-popovercontainer {
   padding: spacing.$size-micro spacing.$size-mini;
   max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/get-focusable-children.ts
similarity index 76%
rename from packages/components/src/utils/is-focusable.ts
rename to packages/components/src/utils/get-focusable-children.ts
index 66aa7d74dc..68b0679ab6 100644
--- a/packages/components/src/utils/is-focusable.ts
+++ b/packages/components/src/utils/get-focusable-children.ts
@@ -23,6 +23,6 @@ const focusDisablingSelector = `:where(${[
   'details:not([open]) > *:not(details > summary:first-of-type) *',
 ].join(',')})`;
 
-export const isFocusable = (element: Element) => {
-  return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector);
+export const getFocusableChildren = (element: Element): NodeListOf<HTMLElement> => {
+  return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
 };
diff --git a/packages/components/src/utils/get-root.ts b/packages/components/src/utils/get-root.ts
index 0c84953d8c..ad33d956ab 100644
--- a/packages/components/src/utils/get-root.ts
+++ b/packages/components/src/utils/get-root.ts
@@ -1,4 +1,4 @@
-export function getRoot(element: HTMLElement): Document | ShadowRoot {
+export function getRoot(element: Element): Document | ShadowRoot {
   const root = element.getRootNode();
 
   if (root instanceof Document || root instanceof ShadowRoot) {
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index b590055606..c705f1bc2a 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -92,7 +92,7 @@ export default (params: { pathToStoryFile?: String }) => (
       )}
     </div>
     <footer className="docs-footer mt-56">
-      <div className="bg-light">
+      <div>
         <div className="container">
           <div className="pt-big-r pb-big-r">
             <h2 className="mt-0">Design System Team Members</h2>
diff --git a/packages/documentation/.storybook/blocks/header.tsx b/packages/documentation/.storybook/blocks/header.tsx
index f607b8274b..8731d27fb0 100644
--- a/packages/documentation/.storybook/blocks/header.tsx
+++ b/packages/documentation/.storybook/blocks/header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default () => (
-  <header className="docs-header bg-yellow">
+  <header className="docs-header">
     <div className="container py-48">
       <h1>
         Swiss Post
diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
index c9c9cad20b..c4114a2cfc 100644
--- a/packages/documentation/.storybook/blocks/layout/layout.scss
+++ b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -6,6 +6,7 @@
   background-repeat: no-repeat;
   background-position: center left 60vw;
   background-size: auto 100%;
+  background-color: post.$yellow;
 
   .container {
     padding-right: 20vw;
@@ -28,6 +29,10 @@
 }
 
 .docs-footer {
+  > div:first-child {
+    background-color: post.$light;
+  }
+
   ul.list-profile {
     display: grid;
     grid-template-rows: auto;
diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
index 2d5b33aafa..2b8f3d1308 100644
--- a/packages/documentation/.storybook/styles/manager.scss
+++ b/packages/documentation/.storybook/styles/manager.scss
@@ -97,16 +97,16 @@
 
   #misc,
   [data-item-id^='health'],
-  :is(#raw-components, [data-parent-id="raw-components"]):where([data-env="production"] *) {
+  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *) {
     display: none;
   }
 
   #introduction--docs,
-  [data-parent-id="misc"] a {
+  [data-parent-id='misc'] a {
     padding-inline-start: 0.5rem;
   }
 
-  [data-parent-id="misc"]:where(:not([data-parent-id="misc"] + *)) {
+  [data-parent-id='misc']:where(:not([data-parent-id='misc'] + *)) {
     margin-block-start: 1rem;
   }
 }
@@ -146,34 +146,3 @@
     letter-spacing: 0.1em;
   }
 }
-
-.bg-dark {
-  #storybook-explorer-tree {
-    .sidebar-item {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--post-gray-80);
-      }
-
-      &[data-selected='true'] {
-        background-color: rgba(var(--post-yellow-rgb), 0.7);
-        color: var(--post-contrast-color);
-      }
-    }
-  }
-
-  #downshift-1-menu {
-    .search-result-item {
-      .search-result-item--label {
-        span {
-          color: var(--post-gray-40);
-        }
-      }
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--post-gray-80);
-      }
-    }
-  }
-}
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index b7c127a363..9ea15657c3 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.10
+
+### Minor Changes
+
+- Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4065](https://github.com/swisspost/design-system/pull/4065))
+
+- Updated the utility classes for sizing. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Added the css parts `button` and `body` in the `post-accorddion-item` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv) with [#4200](https://github.com/swisspost/design-system/pull/4200))
+
+- Implemented new pixel based sizes. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Added the `post-language-switch` component that enables users to change the language of a page. (by [@leagrdv](https://github.com/leagrdv) with [#4044](https://github.com/swisspost/design-system/pull/4044))
+
+### Patch Changes
+
+- Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state. (by [@alizedebray](https://github.com/alizedebray) with [#4223](https://github.com/swisspost/design-system/pull/4223))
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-components-react@9.0.0-next.9
+  - @swisspost/internet-header@2.0.0-next.9
+  - @swisspost/design-system-tokens@9.0.0-next.9
+  - @swisspost/design-system-icons@9.0.0-next.9
+
 ## 6.0.0-next.9
 
 ### Major Changes
diff --git a/packages/documentation/cypress/e2e/components/hint.cy.ts b/packages/documentation/cypress/e2e/components/hint.cy.ts
index 1fe02de8f4..5bffb66467 100644
--- a/packages/documentation/cypress/e2e/components/hint.cy.ts
+++ b/packages/documentation/cypress/e2e/components/hint.cy.ts
@@ -2,7 +2,7 @@ describe('Hint', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
       cy.visit('/iframe.html?id=snapshots--hint');
-      cy.get('.hint', { timeout: 30000 }).should('be.visible');
+      cy.get('.form-hint', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });
 
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 6c16faee3d..275e7f7bf1 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -28,12 +28,12 @@
     "lint": "eslint **/*.{ts,tsx,mdx}"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.8",
-    "@swisspost/internet-header": "workspace:2.0.0-next.8",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.9",
+    "@swisspost/internet-header": "workspace:2.0.0-next.9",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -54,8 +54,8 @@
     "@storybook/types": "8.3.6",
     "@storybook/web-components": "8.3.6",
     "@storybook/web-components-vite": "8.3.6",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.9",
     "@types/css-modules": "1.0.5",
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.3",
diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects
index 9537b51f5f..a9163cf506 100644
--- a/packages/documentation/public/_redirects
+++ b/packages/documentation/public/_redirects
@@ -11,3 +11,4 @@
 
 
 
+
diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json
index 3aff9f35d1..8c103ea1da 100644
--- a/packages/documentation/public/assets/versions.json
+++ b/packages/documentation/public/assets/versions.json
@@ -1,7 +1,7 @@
 [
   {
     "title": "Version 9",
-    "version": "9.0.0-next.8",
+    "version": "9.0.0-next.9",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
     "dependencies": {
@@ -9,22 +9,50 @@
       "@ng-bootstrap/ng-bootstrap": "^17.0.0",
       "bootstrap": "~5.3.0",
       "@swisspost/design-system-changelog-github": "1.0.2",
-      "@swisspost/design-system-components": "9.0.0-next.8",
-      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.8",
-      "@swisspost/design-system-components-angular": "9.0.0-next.8",
-      "@swisspost/design-system-components-react": "9.0.0-next.8",
-      "@swisspost/design-system-documentation": "6.0.0-next.9",
-      "@swisspost/design-system-icons": "9.0.0-next.8",
-      "@swisspost/internet-header": "2.0.0-next.8",
-      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.8",
-      "@swisspost/design-system-intranet-header": "9.0.0-next.8",
-      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.8",
-      "@swisspost/design-system-migrations": "9.0.0-next.8",
-      "@swisspost/design-system-nextjs-integration": "0.1.14-next.8",
-      "@swisspost/design-system-styles": "9.0.0-next.8",
-      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.8",
-      "@swisspost/design-system-styles-primeng": "9.0.0-next.8",
-      "@swisspost/design-system-tokens": "9.0.0-next.8"
+      "@swisspost/design-system-components": "9.0.0-next.9",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.9",
+      "@swisspost/design-system-components-angular": "9.0.0-next.9",
+      "@swisspost/design-system-components-react": "9.0.0-next.9",
+      "@swisspost/design-system-documentation": "6.0.0-next.10",
+      "@swisspost/design-system-icons": "9.0.0-next.9",
+      "@swisspost/internet-header": "2.0.0-next.9",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.9",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.9",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.9",
+      "@swisspost/design-system-migrations": "9.0.0-next.9",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.9",
+      "@swisspost/design-system-styles": "9.0.0-next.9",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.9",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.9",
+      "@swisspost/design-system-tokens": "9.0.0-next.9"
+    }
+  },
+  {
+    "title": "Version 9",
+    "version": "9.0.0-next.8",
+    "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
+    "url": "https://swisspost-design-system-version-9.netlify.app",
+    "dependencies": {
+      "@angular/core": "^18.0.0",
+      "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+      "bootstrap": "~5.3.0",
+      "@swisspost/design-system-changelog-github": "1.0.2",
+      "@swisspost/design-system-components": "9.0.0-next.2",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2",
+      "@swisspost/design-system-components-angular": "9.0.0-next.2",
+      "@swisspost/design-system-components-react": "9.0.0-next.2",
+      "@swisspost/design-system-documentation": "6.0.0-next.2",
+      "@swisspost/design-system-icons": "9.0.0-next.2",
+      "@swisspost/internet-header": "1.14.6-next.2",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.2",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2",
+      "@swisspost/design-system-migrations": "9.0.0-next.2",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.2",
+      "@swisspost/design-system-styles": "9.0.0-next.2",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.2",
+      "@swisspost/design-system-tokens": "9.0.0-next.2"
     }
   },
   {
diff --git a/packages/documentation/src/shared/decorators/dark-background.ts b/packages/documentation/src/shared/decorators/dark-background.ts
deleted file mode 100644
index 73b82b8680..0000000000
--- a/packages/documentation/src/shared/decorators/dark-background.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { StoryContext, StoryFn } from '@storybook/web-components';
-import { html } from 'lit';
-
-export function coloredBackground(story: StoryFn, context: StoryContext, color: string) {
-  return html`
-    <div class="bg-${color}" style="margin: -40px -30px; padding: 40px 30px;">
-      ${story(context.args, context)}
-    </div>
-  `;
-}
diff --git a/packages/documentation/src/stories/components/avatar/avatar.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
index 628bbed4c4..d7854c2561 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.stories.ts
+++ b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
@@ -1,8 +1,7 @@
-import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { components } from '@swisspost/design-system-components/dist/docs.json';
-import { coloredBackground } from '@/shared/decorators/dark-background';
 
 const AVATAR_ARGTYPES = components.find(c => c.tag === 'post-avatar');
 const USERID_ARGTYPE = AVATAR_ARGTYPES?.props.find(p => p.name === 'userid');
@@ -61,9 +60,6 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  decorators: [
-    (story: StoryFn, context: StoryContext) => coloredBackground(story, context, 'light'),
-  ],
   render: (args: Args) => html`<post-avatar
     firstname="${args.firstname || nothing}"
     lastname="${args.lastname || nothing}"
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index 847787302f..268d17b4f3 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -26,7 +26,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 ### Colors
 
 You can change the badge color simply by applying a `.bg-*` class to it.
-See all available classes in the [background utilities documentation](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs).
 
 <Canvas of={badgeStories.Colors} />
 
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 48f53347f8..77df5446e8 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -2,7 +2,6 @@ import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
 import backgroundColors from '@/shared/background-colors.module.scss';
-import { coloredBackground } from '@/shared/decorators/dark-background';
 import chipMeta from '@/stories/components/chip/chip.stories';
 
 const meta: MetaComponent = {
@@ -10,7 +9,6 @@ const meta: MetaComponent = {
   title: 'Components/Badge',
   tags: ['package:HTML'],
   render: renderBadge,
-  decorators: [adaptiveBackground],
   parameters: {
     badges: [],
     design: {
@@ -69,8 +67,8 @@ const meta: MetaComponent = {
       },
     },
     background: {
-      name: 'Backround',
-      description: 'You can use the Background classes to color the cards',
+      name: 'Background',
+      description: 'You can use the background classes to color the cards',
       control: {
         type: 'select',
       },
@@ -84,13 +82,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-function adaptiveBackground(story: StoryFn, context: StoryContext) {
-  const { args } = context;
-  const isLight = ['bg-white', 'bg-light', 'bg-gray'].includes(args.background as string);
-  return isLight ? coloredBackground(story, context, 'dark') : story(args, context);
-}
-
 // RENDERER
 function renderBadge(args: Args) {
   const sizingClass = args.showNumber && args.size !== 'large' ? ` ${args.size}` : '';
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 1bba1e812e..59f10871de 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -28,12 +28,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
 The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
 
-### Inverted
-
-Inverted buttons don't need special classes, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background, as well as set the `data-color-scheme="dark"` to a parent element and you're done for the day.
-
-<Canvas of={ButtonStories.Inverted} />
-
 ### Full-width
 
 In some situation, it is desirable to display a button using the full available width,
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index f8d2ba788e..1cdcd7f4aa 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -230,16 +230,6 @@ export const Default: Story = {
   ...Template,
 };
 
-export const Inverted: Story = {
-  ...Template,
-  decorators: [
-    (story: StoryFn, context: StoryContext) =>
-      html`
-        <div class="p-16 bg-dark" data-color-scheme="dark">${story(context.args, context)}</div>
-      `,
-  ],
-};
-
 const VariantsTemplate = {
   parameters: {
     controls: {
diff --git a/packages/documentation/src/stories/components/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/card-button/card-button.stories.ts
index 13e7a8b731..3850f2cbe5 100644
--- a/packages/documentation/src/stories/components/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/card-button/card-button.stories.ts
@@ -2,7 +2,6 @@ import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
-import backgroundColors from '@/shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: '6f8f76ec-a2b5-4eb0-87f7-4021e1a5b8d0',
@@ -62,13 +61,13 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    background: {
-      name: 'Backround',
-      description: 'You can use the Background classes to color the cards',
+    palette: {
+      name: 'Palette',
+      description: 'You can use the color scheme of the cards',
       control: {
         type: 'select',
       },
-      options: Object.keys(backgroundColors),
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: {
         category: 'General',
       },
@@ -79,7 +78,7 @@ export default meta;
 function cardButtonRender(args: Args, count = 42) {
   const [_, updateArgs] = useArgs();
   return html`
-    <div class="card card-button ${args.background}" id="${`card-button${count}`}">
+    <div class="card card-button ${args.palette}" id="${`card-button${count}`}">
       <button
         class="post-card-favourit"
         @click="${() => (count === 42 ? updateArgs({ favourite: !args.favourite }) : '')}"
@@ -129,18 +128,15 @@ const multipleArgs = [
     {
       focus: 'Schwerpunkt',
       title: 'Post zurückbehalten',
-      background: 'bg-nightblue',
     },
     {
       focus: 'Schwerpunkt',
       title: 'Briefmarken',
       favourite: true,
-      background: 'bg-nightblue',
     },
     {
       focus: 'Schwerpunkt',
       tittle: 'Meine Sendungen',
-      background: 'bg-nightblue',
     },
   ],
   [
@@ -148,11 +144,9 @@ const multipleArgs = [
       focus: 'Schwerpunkt',
       title: 'Pick@home',
       favourite: 'true',
-      background: 'bg-nightblue',
     },
     {
       title: 'E-Finance: Demoversion',
-      background: 'bg-nightblue',
     },
     {
       title: 'Adressänderung mit Nachsendung',
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index c191c0a889..9cd2c98798 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -43,12 +43,6 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
 
     ## Examples
 
-    ### Dark backgrounds
-    <Canvas of={CardControlStandardHTMLStories.DarkBackground} />
-    <div className="hide-col-default">
-      <Controls of={CardControlStandardHTMLStories.DarkBackground} />
-    </div>
-
     ### Grouping
 
     Checkbox cards can be grouped together. Use a `fieldset`/`legend` combination to label the group. If there is an error, link the legend with the error message through the `aria-describedby` attribute on the `legend`, pointing to the `id` of the error message.
@@ -95,23 +89,10 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
 
     ## Installation
 
-The `<post-card-control>` element is part of the `@swisspost/design-system-components` package. For more information, read the
-
-<a href="/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs">
-  getting started with components guide
-</a>
-.
+    The `<post-card-control>` element is part of the `@swisspost/design-system-components` package. For more information, read the <a href="/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs">getting started with components guide</a>.
 
     ## Examples
 
-    ### Dark backgrounds
-
-    <Canvas of={CardControlStories.DarkBackground}/>
-
-    <div className="hide-col-default">
-      <Controls of={CardControlStories.DarkBackground} />
-    </div>
-
     ### Custom icon
 
     You can use our built-in icons by just adding the `icon` property with the name of the desired icon.<br/>
diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
index 9ec50a47b3..d8e67a0cbb 100644
--- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
@@ -1,14 +1,10 @@
-import type { Args, StoryContext, StoryFn } from '@storybook/web-components';
+import type { Args } from '@storybook/web-components';
 import { useArgs, useState } from '@storybook/preview-api';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '@/utils';
 import { MetaComponent } from '@root/types';
-import { parse } from '@/utils/sass-export';
-import scss from '../card-control.module.scss';
-
-const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
 
 type useStateFn = typeof useState;
 
@@ -185,40 +181,6 @@ export const Default = {
   },
 };
 
-export const DarkBackground = {
-  parameters: {
-    docs: {
-      controls: {
-        include: ['Background-Color', 'Type', 'Checked', 'Disabled', 'Validation'],
-      },
-    },
-  },
-  decorators: [
-    (story: StoryFn, context: StoryContext) =>
-      html`<div
-        class="bg-${context.args.background}"
-        style="margin: -40px -30px; padding: 40px 30px;"
-      >
-        ${story(context.args, context)}
-      </div>`,
-  ],
-  args: {
-    background: 'dark',
-    icon: '1001',
-  },
-  argTypes: {
-    background: {
-      name: 'Background-Color',
-      description: 'The background color of a surrounding wrapper element.',
-      control: {
-        type: 'select',
-      },
-      options: [...Object.keys(SCSS_VARIABLES.dark)],
-    },
-  },
-  render: Default.render,
-};
-
 function col(label: string, args: Args, useState: useStateFn) {
   const [id] = useState(cardControlId++);
 
diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
index 2114493b81..eb5f0a4275 100644
--- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
@@ -3,11 +3,6 @@ import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { parse } from '@/utils/sass-export';
-import scss from '../card-control.module.scss';
-import { coloredBackground } from '@/shared/decorators/dark-background';
-
-const SCSS_VARIABLES: { [key: string]: string | object } = parse(scss);
 
 const meta: MetaComponent = {
   id: '886fabcf-148b-4054-a2ec-4869668294fb',
@@ -132,32 +127,6 @@ export const Default: Story = {
   },
 };
 
-export const DarkBackground: Story = {
-  parameters: {
-    docs: {
-      controls: {
-        include: ['Background-Color', 'type', 'checked', 'disabled', 'validity'],
-      },
-    },
-  },
-  decorators: [(story, context) => coloredBackground(story, context, context.args.background)],
-  args: {
-    background: 'dark',
-    icon: '1001',
-  },
-  argTypes: {
-    background: {
-      name: 'Background-Color',
-      description: 'The background color of a surrounding wrapper element.',
-      control: {
-        type: 'select',
-      },
-      options: [...Object.keys(SCSS_VARIABLES.dark)],
-    },
-  },
-  render: Default.render,
-};
-
 export const CustomContent: Story = {
   args: {
     'slots-default': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
@@ -274,7 +243,7 @@ export const FormIntegration: Story = {
       <div class="mt-16">
         <h4>FormData</h4>
         <p class="fs-small">Submit or reset the form to see how the FormData will look like.</p>
-        <pre id="AssociatedFormOutput" class="p-8 bg-dark rounded fs-tiny">{}</pre>
+        <pre id="AssociatedFormOutput" class="p-8 palette-accent rounded fs-tiny">{}</pre>
       </div>
     `,
   ],
diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
index 9ab28b83ce..69ddfe4f01 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts
+++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
@@ -94,7 +94,7 @@ function getText(args: Args) {
 function renderProductCard(args: Args) {
   return html`
     <a href="#" class="card product-card${args.cardClasses}">
-      <div class="card-body product-navigation bg-white">
+      <div class="card-body product-navigation">
         ${getTitle(args)} ${getText(args)}
         <span class="link-icon">
           <post-icon name="3020" aria-hidden="true"></post-icon>
@@ -143,7 +143,7 @@ export const Multipart: Story = {
     <div class="row row-cols-md-2 border-gutters">
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body bg-white" data-sync-height-with="product-header">
+          <div class="card-body" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Preiswert</h3>
@@ -161,7 +161,7 @@ export const Multipart: Story = {
             </div>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-1">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -173,7 +173,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-white" data-sync-height-with="product-body-2">
+          <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16 align-items-stretch">
@@ -208,7 +208,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-3">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -223,7 +223,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
+          <div class="card-body palette-alternate">
             <button class="btn btn-secondary w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
@@ -237,7 +237,7 @@ export const Multipart: Story = {
 
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body bg-white" data-sync-height-with="product-header">
+          <div class="card-body" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Schneller</h3>
@@ -257,7 +257,7 @@ export const Multipart: Story = {
             </div>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-1">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -272,7 +272,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-white" data-sync-height-with="product-body-2">
+          <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16 align-items-stretch">
@@ -295,7 +295,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-3">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -310,7 +310,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
+          <div class="card-body palette-alternate">
             <button class="btn btn-secondary w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
diff --git a/packages/documentation/src/stories/components/chip/chip.stories.ts b/packages/documentation/src/stories/components/chip/chip.stories.ts
index 6afc0eb00c..bfe043687c 100644
--- a/packages/documentation/src/stories/components/chip/chip.stories.ts
+++ b/packages/documentation/src/stories/components/chip/chip.stories.ts
@@ -74,7 +74,8 @@ const meta: MetaComponent = {
     },
     active: {
       name: 'Active',
-      description: 'If `true`, the chip is active.',
+      description:
+        'If `true`, the chip is active.<div className="mt-8 banner banner-info banner-sm">Disabling active chips can result in confusing or unexpected behavior and should be avoided.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       if: {
         arg: 'type',
         eq: 'filter',
diff --git a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
index 5f05c52cfe..b74488df7d 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
@@ -26,7 +26,7 @@ export const Dialog: Story = {
         </style>
         <div class="d-flex flex-wrap align-items-start gap-regular">
           ${bombArgs({
-            backgroundColor: ['bg-white', 'bg-primary'],
+            palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             size: context.argTypes.size.options,
             icon: ['none', '1034'],
             closeButton: [true, false],
diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
index 8f21a73884..6ef2fde293 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
@@ -16,7 +16,7 @@ const meta: Meta = {
     size: 'medium',
     position: 'center',
     icon: 'none',
-    backgroundColor: 'bg-white',
+    palette: 'palette-default',
     animation: 'pop-in',
     closeButton: true,
     open: false,
@@ -75,13 +75,13 @@ const meta: Meta = {
       options: ['none', '1034', '2105', '2104', '2106'],
       table: { category: 'Content' },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'The background color of the dialog field',
+    palette: {
+      name: 'Palette',
+      description: 'The color scheme of the dialog',
       control: {
         type: 'select',
       },
-      options: ['bg-white', 'bg-light', 'bg-primary'],
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: { category: 'Variant' },
     },
     closeButton: {
@@ -140,14 +140,13 @@ const Template = {
     const postDialogCloseButton = args.closeButton ? getCloseButton() : nothing;
 
     // Don't declare default values or show empty containers
-    if (args.backgroundColor === 'bg-white') args.backgroundColor = nothing;
     if (args.animation === 'pop-in') args.animation = nothing;
     if (args.position === 'center') args.position = nothing;
     if (args.size === 'medium') args.size = nothing;
 
     return html`
       <dialog
-        class="${args.backgroundColor}"
+        class="${args.palette}"
         data-size="${args.size}"
         data-position="${args.position}"
         data-animation="${args.animation}"
diff --git a/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
index 9c7933a53e..2735a4d430 100644
--- a/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
@@ -1,6 +1,7 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { renderHint } from './hint.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -13,19 +14,6 @@ type Story = StoryObj;
 
 export const Hint: Story = {
   render: (_args: Args, context: StoryContext) => {
-    return html`
-      <div class="hint">
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div
-              class="${bg} d-flex gap-16 flex-column p-16"
-              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
-            >
-              ${renderHint({ ..._args }, context, 'example-input-' + bg)}
-            </div>
-          `,
-        )}
-      </div>
-    `;
+    return schemes(() => html` ${renderHint({ ..._args }, context)} `);
   },
 };
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
index f2dcc8671c..b344c1d2ab 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
@@ -10,10 +10,10 @@
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
index 4abbf2b754..5efec79704 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
@@ -4,10 +4,10 @@
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
index 327653911e..f0ba1cb8c0 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
@@ -1,4 +1,4 @@
-<div class="modal-header p-48 mb-16 rounded-top bg-danger">
+<div class="modal-header p-48 mb-16 rounded-top">
   <div class="text-center">
     <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-24 mb-16"></span>
     <p class="h4 bold">Please check your details</p>
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index ed2cdd6f98..95c48c61e6 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -25,7 +25,7 @@ const meta: MetaComponent = {
     id: 'popover-one',
     innerHtml:
       'A longer message that needs more time to read. <a href="#">Links</a> are also possible.',
-    backgroundColor: 'primary',
+    palette: 'palette-accent',
     closeButtonCaption: 'Close',
     placement: 'top',
     arrow: true,
@@ -46,17 +46,13 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'Define a background color, either `bg-primary` or `bg-yellow`.',
+    palette: {
+      name: 'Palette',
+      description: 'Define the popover color scheme.',
       control: {
-        type: 'radio',
-        labels: {
-          yellow: 'Yellow',
-          primary: 'Primary',
-        },
+        type: 'select',
       },
-      options: ['primary', 'yellow'],
+      options: ['palette-accent', 'palette-brand'],
       table: {
         category: 'General',
         type: {
@@ -95,7 +91,7 @@ function render(args: Args) {
       </button>
     </div>
     <post-popover
-      class="bg-${args.backgroundColor}"
+      class="${args.palette}"
       id="${args.id}"
       placement="${args.placement}"
       ?arrow="${args.arrow}"
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx b/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
index e5fae8462f..4e44e6f940 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
@@ -6,15 +6,21 @@ import * as subnavigationStories from './subnavigation.stories.ts';
 
 # Subnavigation
 
-<p className="lead">Supplement the header navigation with a secondary entry-point,
-providing access to additional features in your application.</p>
+<p className="lead">
+  Supplement the header navigation with a secondary entry-point, providing access to additional
+  features in your application.
+</p>
 
 <ul>
   <li>
-    <a href="#style-imports" target="_self">Style Imports</a>
+    <a href="#style-imports" target="_self">
+      Style Imports
+    </a>
   </li>
   <li>
-    <a href="#examples" target="_self">Examples</a>
+    <a href="#examples" target="_self">
+      Examples
+    </a>
   </li>
 </ul>
 
@@ -23,15 +29,15 @@ providing access to additional features in your application.</p>
   <Controls of={subnavigationStories.Default} />
 </div>
 
-<StylesPackageImport components={["subnavigation"]} />
+<StylesPackageImport components={['subnavigation']} />
 
 ## Examples
 
-### Colored Background
+### Alternative colors
 
-To set the background of the component, simply use one of our [background utility](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) classes.
+To change the color scheme of the component, simply use one of our [palette](?path=/docs/43481535-5b39-40b5-a273-478b07dc3b31--docs) classes.
 
-<Canvas of={subnavigationStories.ColoredBackground} />
+<Canvas of={subnavigationStories.AlternativeColors} />
 
 ### Badges
 
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss b/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
deleted file mode 100644
index 0f96859738..0000000000
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-
-$background-classes: ();
-
-@each $key in map.keys(post.$background-colors) {
-  $background-classes: list.append($background-classes, 'bg-#{$key}', $separator: comma);
-}
-
-:export {
-  bg-classes: [$background-classes];
-}
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
index 209858814b..dd45460afa 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
@@ -19,11 +19,10 @@ export const Subnavigation: Story = {
       () => html`
         <div class=" d-flex gap-16 flex-column">
           ${bombArgs({
-            backgroundColor: ['default', 'bg-light', 'bg-dark'],
+            palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             badges: [false, true],
             itemCount: [2, 5],
           })
-            .filter(args => !(args.backgroundColor !== 'default' && args.badges === true))
             .filter(args => !(args.itemCount !== 5 && args.badges === true))
             .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
         </div>
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
index f36fe62933..8229f2ae73 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
@@ -1,11 +1,6 @@
 import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
-import { parse } from '@/utils/sass-export';
-import scss from './subnavigation.module.scss';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
@@ -21,16 +16,16 @@ const meta: MetaComponent = {
   },
   args: {
     itemCount: 3,
-    backgroundColor: 'default',
+    palette: 'palette-default',
   },
   argTypes: {
-    backgroundColor: {
-      name: 'Background Color',
-      description: 'Sets the background of the component',
+    palette: {
+      name: 'Palette',
+      description: 'Sets the color scheme of the component',
       control: {
         type: 'select',
       },
-      options: ['default', ...SCSS_VARIABLES['bg-classes']],
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: {
         category: 'General',
       },
@@ -68,9 +63,7 @@ function clickBlocker(story: StoryFn, context: StoryContext) {
 
 function renderTest(args: Args) {
   return html`
-    <div
-      class="subnavigation${args.backgroundColor !== 'default' ? ' ' + args.backgroundColor : ''}"
-    >
+    <div class="subnavigation ${args.palette}">
       <div class="container container-fluid-xs container-fluid-sm">
         <ul class="subnavigation-list">
           ${Array.from(
@@ -94,9 +87,9 @@ type Story = StoryObj;
 
 export const Default: Story = {};
 
-export const ColoredBackground: Story = {
+export const AlternativeColors: Story = {
   args: {
-    backgroundColor: 'bg-gray',
+    palette: 'palette-accent',
   },
 };
 
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 6d9d41e4dc..aa84b8a140 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -21,7 +21,7 @@ const meta: MetaComponent = {
   args: {
     id: 'tooltip-one',
     innerHTML: 'Hi there 👋',
-    backgroundColor: 'primary',
+    palette: 'palette-accent',
     placement: 'top',
     delayed: false,
   },
@@ -42,17 +42,13 @@ const meta: MetaComponent = {
         },
       },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'Define a background color, either `bg-primary` or `bg-yellow`.',
+    palette: {
+      name: 'Palette',
+      description: 'Define the color scheme of the tooltip.',
       control: {
-        type: 'radio',
-        labels: {
-          yellow: 'Yellow',
-          primary: 'Primary',
-        },
+        type: 'select',
       },
-      options: ['primary', 'yellow'],
+      options: ['palette-accent', 'palette-brand'],
       table: {
         category: 'General',
         type: {
@@ -76,9 +72,9 @@ function render(args: Args) {
   const [currentArgs, updateArgs] = useArgs();
   // Just for fun
   const innerHTML =
-    args.backgroundColor === 'yellow'
-      ? args.innerHTML.replace('👋', '🤘🏾')
-      : args.innerHTML.replace('🤘🏾', '👋');
+    args.palette === 'palette-accent'
+      ? args.innerHTML.replace('🤘🏾', '👋')
+      : args.innerHTML.replace('👋', '🤘🏾');
 
   if (currentArgs.innerHTML !== innerHTML) updateArgs({ innerHTML });
 
@@ -86,7 +82,7 @@ function render(args: Args) {
     <button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">Button</button>
     <post-tooltip
       id="${args.id}"
-      class="bg-${args.backgroundColor}"
+      class="${args.palette}"
       placement="${ifDefined(args.placement)}"
       arrow="${ifDefined(args.arrow)}"
       delayed="${ifDefined(args.delayed)}"
@@ -108,7 +104,7 @@ export const NonFocusable: StoryObj = {
       <cite data-tooltip-target="${args.id}">This is a cite element with a tooltip on it.</cite>
       <post-tooltip
         id="${args.id}"
-        background-color=" ${ifDefined(args.backgroundColor)}"
+        class="${args.palette}"
         placement="${ifDefined(args.placement)}"
       >
         This is not the link you are looking for
@@ -131,7 +127,7 @@ export const Multiple: StoryObj = {
       </button>
       <post-tooltip
         id="${args.id}"
-        class="bg-${args.background}"
+        class="${args.palette}"
         placement="${ifDefined(args.placement)}"
       >
         I'm the same, no matter what
diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
index b2fb68e6e2..69b60cc25b 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
+++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as IconStories from './icon.stories';
 import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
 import { Search } from './search/search-icons.blocks';
+import './icon.styles.scss';
 
 <Meta of={IconStories} />
 
@@ -59,8 +60,7 @@ import { Search } from './search/search-icons.blocks';
 
     ### Style
 
-    With the use of our [border](#TODO),[background](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs)
-    and [padding](#TODO) utilities, you can create various styling effects.
+    With the use of our [border](#TODO) and [padding](#TODO) utilities, you can create various styling effects.
 
     <Canvas of={IconStories.Style} sourceState="shown" />
 
@@ -98,6 +98,7 @@ import { Search } from './search/search-icons.blocks';
     To use them, set the `animation` prop to one of the animation names above.
 
     <Canvas of={IconStories.Animate} sourceState="shown" />
+
   </PostTabPanel>
 
   <PostTabHeader panel="search">Find your Icon</PostTabHeader>
@@ -106,5 +107,6 @@ import { Search } from './search/search-icons.blocks';
     Use the grid below to browse all available icons.
 
     <Search />
+
   </PostTabPanel>
 </PostTabs>
diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
index ee403f21c2..6e4f636648 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts
+++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
@@ -141,7 +141,7 @@ export const Size: Story = {
 const styleVariants = [
   { class: 'border rounded p-16', style: 'font-size: 4rem' },
   { class: 'border border-success rounded p-16 text-success', style: 'font-size: 4rem' },
-  { class: 'rounded-circle bg-info p-16', style: 'font-size: 4rem' },
+  { class: 'rounded-circle p-16', style: 'font-size: 4rem; background-color: #cce4ee' },
 ];
 
 export const Style: Story = {
@@ -177,11 +177,7 @@ export const Flip: Story = {
   ],
 };
 
-const scaleVariants = [
-  { class: 'bg-info', scale: 0.5 },
-  { class: 'bg-info' },
-  { class: 'bg-info', scale: 1.5 },
-];
+const scaleVariants = [{ scale: 0.5 }, {}, { scale: 1.5 }];
 
 export const Scale: Story = {
   parameters: {
@@ -192,7 +188,7 @@ export const Scale: Story = {
   render: args => renderVariants(args, scaleVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-24'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-24 scale-container'),
   ],
 };
 
diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss
new file mode 100644
index 0000000000..de679b582d
--- /dev/null
+++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.scale-container post-icon {
+  background-color: post.$info;
+}
diff --git a/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx b/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
index 83a3402eaf..dfb95071a9 100644
--- a/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
+++ b/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as paletteStories from './palettes.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
 <Meta of={paletteStories} />
 
@@ -25,3 +26,5 @@ You can apply this text color to any element by using the `.palette-text` class.
 <div className="hide-col-default">
   <Controls of={paletteStories.Default} />
 </div>
+
+<StylesPackageImport components={['post-palettes']} />
diff --git a/packages/documentation/src/stories/introduction.docs.mdx b/packages/documentation/src/stories/introduction.docs.mdx
index 5397d32781..efb493a5e2 100644
--- a/packages/documentation/src/stories/introduction.docs.mdx
+++ b/packages/documentation/src/stories/introduction.docs.mdx
@@ -14,7 +14,7 @@ import { technologies } from './introduction.data';
     {packages.map(p => (
       <li key={p.name}>
         <ti-le title={p.name} href={p.link.github.href} ariaLabel={p.link.github.ariaLabel}>
-          <img src={p.img.src} alt={p.img.alt}/>
+          <img src={p.img.src} alt={p.img.alt} />
           <span>{p.version}</span>
         </ti-le>
       </li>
@@ -22,21 +22,30 @@ import { technologies } from './introduction.data';
   </ul>
   <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
     <div className="mt-32 mb-16 w-100">
-      <a className="btn btn-primary btn-lg" href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs">Get started</a>
+      <a
+        className="btn btn-primary btn-lg"
+        href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"
+      >
+        Get started
+      </a>
     </div>
     <a
       href="https://www.experience-hub.ch/document/2803"
       rel="noopener"
       className="btn btn-secondary"
     >
-      <span>Experience Hub<sup>1</sup></span>
+      <span>
+        Experience Hub<sup>1</sup>
+      </span>
     </a>
     <a
       href="https://www.figma.com/files/1052961410179009444/project/45002065/Web"
       rel="noopener"
       className="btn btn-secondary"
     >
-      <span>Figma<sup>2</sup></span>
+      <span>
+        Figma<sup>2</sup>
+      </span>
     </a>
     <a
       href="https://fonts.post.ch/frutigerneueforpost/#/"
@@ -53,11 +62,19 @@ import { technologies } from './introduction.data';
       <span>GitHub</span>
     </a>
   </div>
-  <p className="mb-0 fs-tiny lh-tiny"><sup>1</sup> Login required. Get access with your post account, or use the registration form on the login page.<br />
-    <sup>2</sup> Login required. Get access with your post account, or click <a href="mailto:ux@post.ch?subject=I need access to Figma&body=Hello%2C%20I%20need%20access%20to%20Figma%20%0A%E2%80%A2%20%20Project%20name%3A%20%0A%E2%80%A2%20Project%20Owner%20at%20the%20Post%20Office%20%28email%29%3A%20%0A%E2%80%A2%20Project%20Start%20Date%3A%20%0A%E2%80%A2%20Email%20address%20to%20be%20authorized%3A%20">here</a>.</p>
+  <p className="mb-0 fs-tiny lh-tiny">
+    <sup>1</sup> Login required. Get access with your post account, or use the registration form on
+    the login page.
+    <br />
+    <sup>2</sup> Login required. Get access with your post account, or click{' '}
+    <a href="mailto:ux@post.ch?subject=I need access to Figma&body=Hello%2C%20I%20need%20access%20to%20Figma%20%0A%E2%80%A2%20%20Project%20name%3A%20%0A%E2%80%A2%20Project%20Owner%20at%20the%20Post%20Office%20%28email%29%3A%20%0A%E2%80%A2%20Project%20Start%20Date%3A%20%0A%E2%80%A2%20Email%20address%20to%20be%20authorized%3A%20">
+      here
+    </a>
+    .
+  </p>
 </div>
 
-<div className="mt-56 py-56 bg-light bg-fullwidth text-center">
+<div className="mt-56 py-56 light-section text-center">
   <h2 className="h3 mb-32">Features</h2>
 
   <div className="row g-0">
diff --git a/packages/documentation/src/stories/introduction.styles.scss b/packages/documentation/src/stories/introduction.styles.scss
index 252cc95c97..5b2d3545bb 100644
--- a/packages/documentation/src/stories/introduction.styles.scss
+++ b/packages/documentation/src/stories/introduction.styles.scss
@@ -2,12 +2,13 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
 
-#storybook-docs{
-  overflow-x:hidden;
+#storybook-docs {
+  overflow-x: hidden;
 }
 
-.bg-fullwidth {
+.light-section {
   position: relative;
+  background-color: post.$light;
 
   &:before,
   &:after {
@@ -32,7 +33,7 @@
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
-  padding:0;
+  padding: 0;
   list-style-type: none;
   justify-content: center;
   gap: post.$size-big;
diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index a0200a7ae3..d51fe7b296 100644
--- a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
+++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
@@ -202,7 +202,7 @@ export const CssVariables = {
         }
       </style>
       ${meta.render && meta.render(args, context)}
-      <p id="my-div" class="position-sticky bg-dark p-16">
+      <p id="my-div" class="position-sticky palette-accent p-16">
         I am sticky! I am always positioned right below the header when you scroll up and down.
       </p>
     `;
diff --git a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
index 7da0cdbde8..7bba9184f8 100644
--- a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
+++ b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
@@ -12,7 +12,7 @@ const meta: Meta = {
 
 function render() {
   return html`
-    <div class="bg-light error-container">
+    <div class="palette-alternate error-container">
       <div class="container">
         <div class="row">
           <div class="col-sm-8 py-56">
diff --git a/packages/documentation/src/stories/utilities/background/background.blocks.tsx b/packages/documentation/src/stories/utilities/background/background.blocks.tsx
deleted file mode 100644
index 24b7454f04..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.blocks.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export function BackgroundContainer(props: { name: string; color: string }) {
-  return (
-    <article className="background-container">
-      <div className="background-container__description">
-        <h3 className="description__title h6">{props.name}</h3>
-      </div>
-      <div className="background-container__background">
-        <div className={`background__tile bg-${props.name}`}>Text</div>
-      </div>
-      <div className="background-container__props">
-        <dl>
-          <dt>Class</dt>
-          <dd>
-            <code>.bg-{props.name}</code>
-          </dd>
-        </dl>
-      </div>
-    </article>
-  );
-}
diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
deleted file mode 100644
index ce837f362f..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.docs.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import { forEach } from '@/utils/react';
-import { parse } from '@/utils/sass-export';
-import { BackgroundContainer } from './background.blocks';
-import * as BackgroundStories from './background.stories';
-import scss from './background.module.scss';
-import './background.styles.scss';
-
-export const SCSS_VARIABLES = parse(scss);
-
-<Meta of={BackgroundStories} />
-
-# Background
-
-<div className="lead">
-  Use the background utility classes to set the background of an element to any predefined color.
-</div>
-
-Background utilities also set the text color by defining the following CSS variables:
-
-- `--post-contrast-color` and `--post-contrast-color-rgb`
-- `--post-contrast-color-inverted` and `--post-contrast-color-inverted-rgb`
-
-## Background Containers
-
-To set a background on an element, simply add a `.bg-{colorname}` class to it.
-
-<Canvas of={BackgroundStories.ColoredBackground} sourceState="shown" />
-
-### Available Backgrounds
-
-#### Base
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES.base, function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-#### Signal
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES.signal, function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-#### Signal backgrounds
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES['signal-background'], function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-## Nested
-
-It is possible to nest backgrounds.
-
-<div className="banner banner-info banner-md">
-  Text color and inverted text color CSS variables are set for each background to always ensure the
-  best possible contrast.
-</div>
-
-<Canvas of={BackgroundStories.NestedBackgrounds} sourceState="shown" />
-
-## Opacity
-
-Change the background opacity simply by setting the CSS variable `--post-bg-opacity`.
-
-<div className="banner banner-info banner-md">
-  Low background opacity is not recommended as it can lead to poor contrast. It is then your
-  responsibility to ensure that the contrast ratio between foreground and background is at least
-  4.5:1. More information on that topic is available on our [accessibility
-  docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
-</div>
-
-<Canvas of={BackgroundStories.TranslucentBackgrounds} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/background/background.module.scss b/packages/documentation/src/stories/utilities/background/background.module.scss
deleted file mode 100644
index f630e81f1d..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-
-$non-base-background-colors: ();
-$non-base-background-colors: map.merge($non-base-background-colors, post.$signal-colors);
-$non-base-background-colors: map.merge($non-base-background-colors, post.$signal-background-colors);
-
-:export {
-  @each $color, $value in post.$background-colors {
-    @if (map.has-key($non-base-background-colors, $color) == false) {
-      base_#{$color}: $value;
-    }
-  }
-
-  @each $color, $value in post.$signal-colors {
-    signal_#{$color}: $value;
-  }
-
-  @each $color, $value in post.$signal-background-colors {
-    signal-background_#{$color}: $value;
-  }
-}
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
deleted file mode 100644
index 3d8e27f20c..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import { MetaExtended } from '@root/types';
-
-const meta: MetaExtended = {
-  id: '60852fac-a861-4415-8276-bd38d68653bb',
-  title: 'Utilities/Background',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const ColoredBackground: Story = {
-  render: () => html` <div class="bg-yellow p-16">Content</div> `,
-};
-
-export const NestedBackgrounds: Story = {
-  render: () => html`
-    <div class="bg-gray p-16">
-      Content in
-      <code>.bg-gray</code>
-      container.
-      <div class="bg-dark p-16">
-        Content in
-        <code>.bg-dark</code>
-        container.
-        <div class="bg-light p-16">
-          Content in
-          <code>.bg-light</code>
-          container.
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-export const TranslucentBackgrounds: Story = {
-  render: () => html`
-    <div class="bg-dark p-16">Container with default opacity (1).</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
-  `,
-};
diff --git a/packages/documentation/src/stories/utilities/background/background.styles.scss b/packages/documentation/src/stories/utilities/background/background.styles.scss
deleted file mode 100644
index af6b159dd0..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.styles.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.background-container__section {
-  display: grid;
-  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
-
-  @include post.media-breakpoint-down(md) {
-    display: block;
-  }
-}
-
-.background-container {
-  display: contents;
-
-  > * {
-    padding: post.$size-mini (post.$size-regular * 0.5);
-    border-top: post.$border-width solid post.$border-color;
-
-    &:first-child {
-      padding-inline-start: 0;
-    }
-    &:last-child {
-      padding-inline-end: 0;
-    }
-  }
-
-  .background-container__description {
-    .description__title {
-      &:first-letter {
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  .background-container__background {
-    .background__tile {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-      min-height: 1rem * post.$line-height-base * 2.5;
-    }
-  }
-
-  .background-container__props {
-    dl {
-      display: grid;
-      grid-template-columns: max-content auto;
-      gap: 0 post.$size-mini;
-      margin: 0;
-
-      dt,
-      dd {
-        margin: 0;
-      }
-    }
-  }
-
-  @include post.media-breakpoint-down(md) {
-    display: grid;
-    grid-template-rows: auto auto;
-    grid-template-columns: 40% 60%;
-
-    .background-container__description {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .background-container__background {
-      grid-row: 2;
-      grid-column: 1 / 3;
-      padding-top: 0;
-      padding-inline: 0;
-      border-top: 0 none;
-    }
-
-    .background-container__props {
-      grid-row: 1;
-      grid-column: 2;
-    }
-  }
-}
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
index 9d3f04c309..5b2009434b 100644
--- a/packages/documentation/src/stories/utilities/display/display.docs.mdx
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks';
 import * as DisplayStories from './display.stories';
 import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
 import { forEach } from '@/utils/react';
+import './display.styles.scss';
 
 export const displayOptions = [
   'none',
diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
index 91b3a91143..ca41374c5f 100644
--- a/packages/documentation/src/stories/utilities/display/display.stories.ts
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -12,9 +12,10 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
+  decorators: [story => html` <div class="display-story">${story()}</div> `],
   render: () =>
     html`
-      <div class="d-inline bg-yellow p-8">Content</div>
-      <div class="d-inline bg-black p-8">Content</div>
+      <div class="d-inline p-8">Content</div>
+      <div class="d-inline p-8">Content</div>
     `,
 };
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
index 3bf9067e93..6619ae5899 100644
--- a/packages/documentation/src/stories/utilities/display/display.styles.scss
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -9,3 +9,9 @@
     background-color: color.adjust(post.$border-color, $lightness: 15%);
   }
 }
+
+.display-story {
+  > div {
+    background-color: post.$yellow;
+  }
+}
diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
index 30f22b3565..6d7231a49b 100644
--- a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
@@ -15,5 +15,5 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => html` <div class="w-50 rounded p-16 bg-aubergine elevation-5">I'm elevated!</div> `,
+  render: () => html` <div class="w-50 rounded p-16 elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
index 642f5ec5ee..7b762b1bc5 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
+++ b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
@@ -57,8 +57,8 @@ export function FlexDirectionContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="flex">
       <div className={`d-flex flex-${props.name}`}>
-        <div className="bg-yellow p-12">First content</div>
-        <div className="bg-gray p-12">Second content</div>
+        <div className="p-12">First content</div>
+        <div className="p-12">Second content</div>
       </div>
     </FlexDocContainer>
   );
@@ -68,8 +68,8 @@ export function AlignItemsContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-items">
       <div className={`d-flex align-items-${props.name}`}>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray px-12 py-48">Content</div>
+        <div className="p-12">Small content</div>
+        <div className="px-12 py-48">Big content</div>
       </div>
     </FlexDocContainer>
   );
@@ -79,8 +79,8 @@ export function JustifyContentContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="justify-content">
       <div className={`d-flex justify-content-${props.name}`}>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -90,9 +90,9 @@ export function AlignSelfContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-self">
       <div className="d-flex align-items-start">
-        <div className="bg-gray px-12 py-48">Content</div>
-        <div className={`bg-yellow p-12 align-self-${props.name}`}>Content with align-self</div>
-        <div className="bg-gray px-12 py-48">Content</div>
+        <div className="px-12 py-48">Content</div>
+        <div className={`p-12 align-self-${props.name}`}>Content with align-self</div>
+        <div className="px-12 py-48">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -102,10 +102,10 @@ export function GrowContainer(props: { name: number }) {
   return (
     <FlexDocContainer name={props.name.toString()} prefix="flex-grow">
       <div className="d-flex align-items-start grow-shrink-container">
-        <div className={`bg-yellow p-12 flex-grow-${props.name}`}>
+        <div className={`p-12 flex-grow-${props.name}`}>
           I'm {props.name === 0 ? 'not' : ''} growing
         </div>
-        <div className="bg-gray p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -115,12 +115,12 @@ export function ShrinkContainer(props: { name: number }) {
   return (
     <FlexDocContainer name={props.name.toString()} prefix="flex-shrink">
       <div className="d-flex align-items-start grow-shrink-container">
-        <div className="bg-gray p-12">
+        <div className="p-12">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
           ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
-        <div className={`bg-yellow p-12 flex-shrink-${props.name}`}>
+        <div className={`p-12 flex-shrink-${props.name}`}>
           I {props.name === 0 ? "don't" : ''} shrink
         </div>
       </div>
@@ -132,14 +132,14 @@ export function AlignContentContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-content">
       <div className={`align-content-container d-flex align-content-${props.name} flex-wrap`}>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -149,14 +149,14 @@ export function WrapContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="flex">
       <div className={`d-flex flex-${props.name}`}>
-        <div className="bg-gray p-12">Content 1</div>
-        <div className="bg-yellow p-12">Content 2</div>
-        <div className="bg-gray p-12">Content 3</div>
-        <div className="bg-yellow p-12">Content 4</div>
-        <div className="bg-gray p-12">Content 5</div>
-        <div className="bg-yellow p-12">Content 6</div>
-        <div className="bg-gray p-12">Content 7</div>
-        <div className="bg-yellow p-12">Content 8</div>
+        <div className="p-12">Content 1</div>
+        <div className="p-12">Content 2</div>
+        <div className="p-12">Content 3</div>
+        <div className="p-12">Content 4</div>
+        <div className="p-12">Content 5</div>
+        <div className="p-12">Content 6</div>
+        <div className="p-12">Content 7</div>
+        <div className="p-12">Content 8</div>
       </div>
     </FlexDocContainer>
   );
diff --git a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
index 1add5d5375..b48be2628a 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
@@ -18,6 +18,7 @@ const { id, ...metaWithoutId } = meta;
 export default {
   ...metaWithoutId,
   title: 'Snapshots',
+  decorators: null,
 };
 
 type Story = StoryObj;
@@ -28,9 +29,9 @@ function getFlex(type: string) {
       return html`
         ${flexDirectionValues.map(
           val => html`
-            <div class="d-flex flex-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray p-12">Content</div>
+            <div class="d-flex flex-snap-container flex-${val}">
+              <div class="p-12">Content 1</div>
+              <div class="p-12">Content 2</div>
             </div>
           `,
         )}
@@ -39,9 +40,9 @@ function getFlex(type: string) {
       return html`
         ${flexAlignItemsValues.map(
           val => html`
-            <div class="d-flex align-items-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray px-12 py-48">Content</div>
+            <div class="d-flex flex-snap-container align-items-${val}">
+              <div class="p-12">Small content</div>
+              <div class="px-12 py-48">Big content</div>
             </div>
           `,
         )}
@@ -50,9 +51,9 @@ function getFlex(type: string) {
       return html`
         ${flexJustifyContentValues.map(
           val => html`
-            <div class="d-flex justify-content-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray p-12">Content</div>
+            <div class="d-flex flex-snap-container justify-content-${val}">
+              <div class="p-12">Content</div>
+              <div class="p-12">Content</div>
             </div>
           `,
         )}
@@ -61,10 +62,10 @@ function getFlex(type: string) {
       return html`
         ${flexAlignSelfValues.map(
           val => html`
-            <div class="d-flex align-items-start">
-              <div class="bg-gray px-12 py-48">Content</div>
-              <div class="bg-yellow p-12 align-self-${val}">Content with align-self</div>
-              <div class="bg-gray px-12 py-48">Content</div>
+            <div class="d-flex flex-snap-container align-items-start">
+              <div class="px-12 py-48">Content</div>
+              <div class="p-12 align-self-${val}">Content with align-self</div>
+              <div class="px-12 py-48">Content</div>
             </div>
           `,
         )}
@@ -76,11 +77,11 @@ function getFlex(type: string) {
           value: [0, 1],
         }).map(
           args => html`
-            <div class="d-flex align-items-start grow-shrink-container">
-              <div class="bg-yellow p-12 flex-${args.type}-${args.value}">
+            <div class="d-flex flex-snap-container align-items-start grow-shrink-container">
+              <div class="p-12 flex-${args.type}-${args.value}">
                 I'm ${args.value === 0 ? 'not' : ''} ${args.type}ing
               </div>
-              <div class="bg-gray p-12">
+              <div class="p-12">
                 ${args.type === 'grow'
                   ? 'Content'
                   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}
@@ -93,11 +94,10 @@ function getFlex(type: string) {
       return html`
         ${flexAlignContentValues.map(
           val => html`
-            <div class="align-content-container d-flex flex-wrap align-content-${val}">
-              ${Array.from({ length: 8 }).map(
-                (_, i) =>
-                  html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content</div> `,
-              )}
+            <div
+              class="align-content-container d-flex flex-snap-container flex-wrap align-content-${val}"
+            >
+              ${Array.from({ length: 8 }).map(() => html` <div class="p-12">Content</div> `)}
             </div>
           `,
         )}
@@ -106,11 +106,9 @@ function getFlex(type: string) {
       return html`
         ${flexWrapValues.map(
           val => html`
-            <div class="d-flex flex-${val}">
+            <div class="d-flex flex-snap-container flex-${val}">
               ${Array.from({ length: 30 }).map(
-                (_, i) => html`
-                  <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content ${i + 1}</div>
-                `,
+                (_, i) => html` <div class="p-12">Content ${i + 1}</div> `,
               )}
             </div>
           `,
@@ -123,12 +121,10 @@ function getFlex(type: string) {
           ['last', 5, 4, 3, 2, 1, 0, 'first'],
         ].map(
           arr => html`
-            <div class="d-flex flex-wrap">
+            <div class="d-flex flex-snap-container flex-wrap">
               ${arr.map(
                 (order, i) =>
-                  html`<div class="bg-${i % 2 === 0 ? 'gray' : 'yellow'} p-8 order-${order}">
-                    Element ${i} with position: ${order}
-                  </div>`,
+                  html`<div class="p-8 order-${order}">Element ${i} with position: ${order}</div>`,
               )}
             </div>
           `,
@@ -138,12 +134,12 @@ function getFlex(type: string) {
       return html`
         ${[true, false].map(
           isEqual => html`
-            <div class="d-flex">
-              <div class="bg-yellow p-8 flex-fill">Content</div>
-              <div class="bg-gray p-8 flex-fill">
+            <div class="d-flex flex-snap-container">
+              <div class="p-8 flex-fill">Content</div>
+              <div class="p-8 flex-fill">
                 ${isEqual ? 'Content' : 'Element with more content than the others'}
               </div>
-              <div class="bg-yellow p-8 flex-fill">Content</div>
+              <div class="p-8 flex-fill">Content</div>
             </div>
           `,
         )}
diff --git a/packages/documentation/src/stories/utilities/flex/flex.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
index b049815326..5fa1194325 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.stories.ts
+++ b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
@@ -5,6 +5,7 @@ import { MetaExtended } from '@root/types';
 const meta: MetaExtended = {
   id: 'b0154a21-1138-4a69-953a-c17c3cb7c538',
   title: 'Utilities/Flex',
+  decorators: [story => html`<div class="flex-story-container">${story()}</div>`],
 };
 
 export default meta;
@@ -15,8 +16,8 @@ export const Default: Story = {
   render: () =>
     html`
       <div class="d-flex flex-row">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -25,8 +26,8 @@ export const AlignItems: Story = {
   render: () =>
     html`
       <div class="d-flex align-items-end">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray px-8 py-48">Content</div>
+        <div class="p-8">Small content</div>
+        <div class="px-8 py-48">Big content</div>
       </div>
     `,
 };
@@ -35,9 +36,9 @@ export const AlignSelf: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-gray px-8 py-48">Content</div>
-        <div class="bg-yellow align-self-end p-8">Content</div>
-        <div class="bg-gray px-8 py-48">Content</div>
+        <div class="px-8 py-48">Content</div>
+        <div class="align-self-end p-8">Content</div>
+        <div class="px-8 py-48">Content</div>
       </div>
     `,
 };
@@ -46,8 +47,8 @@ export const JustifyContent: Story = {
   render: () =>
     html`
       <div class="d-flex justify-content-between">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -56,8 +57,8 @@ export const GrowShrink: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow flex-grow-1 p-8">I'm growing</div>
-        <div class="bg-gray flex-shrink-1 p-8">I'm shrinking</div>
+        <div class="flex-grow-1 p-8">I'm growing</div>
+        <div class="flex-shrink-1 p-8">I'm shrinking</div>
       </div>
     `,
 };
@@ -66,9 +67,7 @@ export const AlignContent: Story = {
   render: () =>
     html`
       <div style="height: 14rem" class="d-flex flex-wrap align-content-around">
-        ${Array.from({ length: 14 }).map(
-          (_, i) => html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-8">Content</div> `,
-        )}
+        ${Array.from({ length: 14 }).map(() => html` <div class="p-8">Content</div> `)}
       </div>
     `,
 };
@@ -77,9 +76,9 @@ export const Order: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 order-3">First element, positioned last</div>
-        <div class="bg-gray p-8 order-2">Second element</div>
-        <div class="bg-yellow p-8 order-1">Last element, positioned first</div>
+        <div class="p-8 order-3">First element, positioned last</div>
+        <div class="p-8 order-2">Second element</div>
+        <div class="p-8 order-1">Last element, positioned first</div>
       </div>
     `,
 };
@@ -88,20 +87,20 @@ export const Wrap: Story = {
   render: () =>
     html`
       <div class="d-flex flex-wrap">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -110,9 +109,9 @@ export const FillEqual: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
-        <div class="bg-gray p-8 flex-fill">Same content, same width</div>
-        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
       </div>
     `,
 };
@@ -121,9 +120,9 @@ export const Fill: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 flex-fill">Content</div>
-        <div class="bg-gray p-8 flex-fill">Element with more content than the others</div>
-        <div class="bg-yellow p-8 flex-fill">Content</div>
+        <div class="p-8 flex-fill">Content</div>
+        <div class="p-8 flex-fill">Element with more content than the others</div>
+        <div class="p-8 flex-fill">Content</div>
       </div>
     `,
 };
diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
index 065df88b56..6c1d78fed9 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss
+++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
@@ -1,5 +1,25 @@
 @use '@swisspost/design-system-styles/core' as post;
 
+.flex-story-container,
+.flex-doc-container__demo {
+  > * > * {
+    border-radius: post.$border-radius;
+    box-shadow: post.$elevation-1;
+  }
+}
+
+.flex-snap-container,
+.flex-story-container .d-flex,
+.flex-doc-container__demo .d-flex {
+  > *:nth-child(odd) {
+    background-color: post.$yellow;
+  }
+
+  > *:nth-child(even) {
+    background-color: post.$gray;
+  }
+}
+
 .flex-doc-container {
   > * {
     align-self: stretch;
@@ -30,11 +50,6 @@
   .flex-doc-container__demo {
     padding: post.$size-mini;
 
-    > * > * {
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-    }
-
     @include post.media-breakpoint-up(lg) {
       border: post.$border-width solid post.$border-color;
     }
diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts b/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
index b2b5bbd9f4..9e8e1ffaef 100644
--- a/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
+++ b/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
@@ -47,7 +47,7 @@ const meta: MetaExtended = {
   render: (args: Args) => {
     return html`
       <div
-        class="bg-yellow ${args.overflow ? 'overflow-' + args.overflow : ''}${args.overflowX
+        class="my-container ${args.overflow ? 'overflow-' + args.overflow : ''}${args.overflowX
           ? ' overflow-x-' + args.overflowX
           : ''}${args.overflowY ? ' overflow-y-' + args.overflowY : ''}"
       >
diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss b/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
index 6c1ca1515f..7eacaa1299 100644
--- a/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
+++ b/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
@@ -19,6 +19,10 @@
   }
 }
 
+.my-container {
+  background-color: post.$yellow;
+}
+
 // Snapshots
 .snapshot-container {
   width: 30rem;
diff --git a/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
index 9b4d17e3d2..6f42ddf356 100644
--- a/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
@@ -26,12 +26,14 @@ export const Position: Story = {
               return html`
                 <p>Position ${position}</p>
                 <div class="snapshot-outer-container">
-                  <div class="snapshot-container bg-gray m-0 position-relative">
-                    <div class="bg-dark"></div>
-                    <div class="bg-yellow position-${position} top-0 start-50">I'm ${position}</div>
-                    <div class="bg-dark"></div>
-                    <div class="bg-dark"></div>
-                    <div class="bg-dark"></div>
+                  <div class="snapshot-container m-0 position-relative">
+                    <div></div>
+                    <div class="my-element position-${position} top-0 start-50">
+                      I'm ${position}
+                    </div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
                   </div>
                 </div>
               `;
@@ -48,7 +50,7 @@ export const Position: Story = {
               return html`
                 <p class="mt-12">${xArgName}: ${xArgValue}% / ${yArgName}: ${yArgValue}%</p>
                 <div class="snapshot-arrange-container">
-                  <div class="bg-info ${args.x} ${args.y}"></div>
+                  <div class="${args.x} ${args.y}"></div>
                 </div>
               `;
             })}
@@ -70,7 +72,7 @@ export const Position: Story = {
                   Translate middle: ${args.translateMiddle ? args.translateMiddle : 'none'}
                 </p>
                 <div class="snapshot-translate-middle-container">
-                  <div class="bg-yellow start-50 top-50 ${translateMiddleValue}"></div>
+                  <div class="start-50 top-50 ${translateMiddleValue}"></div>
                 </div>
               `;
             })}
diff --git a/packages/documentation/src/stories/utilities/position/position.stories.ts b/packages/documentation/src/stories/utilities/position/position.stories.ts
index 7c4532915a..08b91f9dca 100644
--- a/packages/documentation/src/stories/utilities/position/position.stories.ts
+++ b/packages/documentation/src/stories/utilities/position/position.stories.ts
@@ -108,11 +108,11 @@ const meta: MetaExtended = {
     }
     return html`
       <div
-        class="bg-yellow position-${args.position} ${args.top ? 'top-' + args.top : ''}${args.bottom
-          ? 'bottom-' + args.bottom
-          : ''} ${args.start ? 'start-' + args.start : ''}${args.end
-          ? 'end-' + args.end
-          : ''}${translateMiddleValue}"
+        class="my-element position-${args.position} ${args.top
+          ? 'top-' + args.top
+          : ''}${args.bottom ? 'bottom-' + args.bottom : ''} ${args.start
+          ? 'start-' + args.start
+          : ''}${args.end ? 'end-' + args.end : ''}${translateMiddleValue}"
       ></div>
     `;
   },
@@ -146,11 +146,10 @@ export const Default: Story = {
 
 export const TranslateMiddle: Story = {
   decorators: [
-    story =>
-      html` <div class="translate-middle-container position-relative bg-gray">${story()}</div> `,
+    story => html` <div class="translate-middle-container position-relative">${story()}</div> `,
   ],
   render: () => {
-    return html`<div class="position-absolute start-50 top-50 bg-yellow"></div>
-      <div class="position-absolute start-50 top-50 translate-middle bg-info"></div>`;
+    return html`<div class="position-absolute start-50 top-50"></div>
+      <div class="position-absolute start-50 top-50 translate-middle"></div>`;
   },
 };
diff --git a/packages/documentation/src/stories/utilities/position/position.styles.scss b/packages/documentation/src/stories/utilities/position/position.styles.scss
index 3f4769a3e7..79a80ce39e 100644
--- a/packages/documentation/src/stories/utilities/position/position.styles.scss
+++ b/packages/documentation/src/stories/utilities/position/position.styles.scss
@@ -25,10 +25,16 @@
 .translate-middle-container {
   height: 20rem;
   flex: 0 0 50%;
+  background-color: post.$gray;
   @include centered-dot();
 
   > * {
     @include square;
+    background-color: post.$yellow;
+
+    &.translate-middle {
+      background-color: post.$info;
+    }
   }
 }
 
@@ -53,7 +59,8 @@
       background-color: post.$dark;
     }
 
-    .bg-yellow {
+    .my-element {
+      background: post.$yellow;
       width: 2rem;
       height: 2rem;
       border-radius: post.$border-radius;
@@ -102,17 +109,22 @@
 .snapshot-container {
   height: 16rem;
   margin: 2rem;
+  background-color: post.$gray;
 
-  .bg-dark {
-    width: 2rem;
-    height: 2rem;
+  > * {
     border-radius: post.$border-radius;
-  }
 
-  .bg-yellow {
-    padding: 1rem;
-    display: inline-block;
-    border-radius: post.$border-radius;
+    &:not(.my-element) {
+      width: 2rem;
+      height: 2rem;
+      background-color: post.$dark;
+    }
+
+    &.my-element {
+      background-color: post.$yellow;
+      padding: 1rem;
+      display: inline-block;
+    }
   }
 }
 
@@ -130,6 +142,14 @@
   }
 }
 
+.snapshot-arrange-container > * {
+  background-color: post.$info;
+}
+
 .snapshot-translate-middle-container {
   @include centered-dot();
+
+  > * {
+    background-color: post.$yellow;
+  }
 }
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index bc53d3507d..7e093615a2 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -6,6 +6,7 @@ import SampleFontSize from './text-font-size.sample.scss?raw';
 import SampleFontWeight from './text-font-weight.sample.scss?raw';
 import SampleLineHeight from './text-line-height.sample.scss?raw';
 import SampleColor from './text-color.sample.scss?raw';
+import './text.styles.scss';
 
 <Meta of={TextStories} />
 
@@ -97,11 +98,6 @@ Define how text-blocks are displayed.
 
 ### Color
 
-<div className="banner banner-warning my-24">
-  The `.text-auto` class is deprecated since text color is now set by the{' '}
-  [backgrounds](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) themselves.
-</div>
-
 Colorize text with `.text-*` utility classes.
 To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
 
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index c580356f30..96372f13c9 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -63,12 +63,12 @@ export const TextAlign: Story = {
 
 export const TextWrapping: Story = {
   render: () => html`
-    <div class="w-50 bg-info">
+    <div class="my-container w-50">
       <p class="text-nowrap">
         This text should NOT wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
     </div>
-    <div class="w-50 bg-info text-nowrap">
+    <div class="my-container w-50 text-nowrap">
       <p class="text-wrap">
         This text should wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
@@ -78,7 +78,7 @@ export const TextWrapping: Story = {
 
 export const WordBreak: Story = {
   render: () => html`
-    <div class="w-50 bg-info">
+    <div class="my-container w-50">
       <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
     </div>
   `,
diff --git a/packages/documentation/src/stories/utilities/text/text.styles.scss b/packages/documentation/src/stories/utilities/text/text.styles.scss
new file mode 100644
index 0000000000..509c0b15af
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text.styles.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-container {
+  background-color: post.$info;
+}
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index a7bace80e0..807dd0d607 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Minor Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index b03a924ce3..0f3b5682c3 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-icons",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "A collection of Swiss Post icons intended for use with the Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index 2db462b044..f7dd748648 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 2.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 2.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index 76ecec1354..6dde983e09 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 0f5df4ea7d..97f5d85a8c 100644
--- a/packages/intranet-header-workspace/CHANGELOG.md
+++ b/packages/intranet-header-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-workspace
 
+## 3.0.22-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 3.0.22-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 95956f194b..de134fc131 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header-workspace",
-  "version": "3.0.22-next.8",
+  "version": "3.0.22-next.9",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": "18.2.13",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "watch": "1.0.2",
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
index b21c4ce804..aafbc814da 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-showcase
 
+## 1.0.10-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.9
+
 ## 1.0.10-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
index c18ba6a52f..75ca1ed84b 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@swisspost/design-system-intranet-header-showcase",
-  "version": "1.0.10-next.8",
+  "version": "1.0.10-next.9",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.9"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
index e9741bc70e..8f2669bd44 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -11,11 +11,11 @@
   <div class="site-content container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
index 0772621393..6b5b8ceb3a 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -3,11 +3,11 @@
   <div class="container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar site-content p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index 7e2cc17e10..49b833b831 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json
index cee0dd96ac..b395ba1e61 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Intranet header for internal Swiss Post applications as an Angular component.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -18,11 +18,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.8"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.9"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md
index 95272121a5..e52c6ddcde 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ## 9.0.0-next.7
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 856c6ed0fa..92123fafcd 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-migrations",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Scripts to migrate an Angular application from one Design System version to another.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md
index 26d7a15efb..940f3dfe9c 100644
--- a/packages/nextjs-integration/CHANGELOG.md
+++ b/packages/nextjs-integration/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @swisspost/design-system-nextjs-integration
 
+## 0.1.14-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-components-react@9.0.0-next.9
+  - @swisspost/internet-header@2.0.0-next.9
+
 ## 0.1.14-next.8
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index a343f8f10b..be32dc764c 100644
--- a/packages/nextjs-integration/package.json
+++ b/packages/nextjs-integration/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-nextjs-integration",
-  "version": "0.1.14-next.8",
+  "version": "0.1.14-next.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
-    "@swisspost/internet-header": "workspace:2.0.0-next.8",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
+    "@swisspost/internet-header": "workspace:2.0.0-next.9",
     "next": "15.0.1",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index 5d0b4f9713..86ee385d3b 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -17,7 +17,7 @@ export default function Home() {
 
       <section>
         <h2 className="h4 mt-huge-r">Sendung Verfolgen</h2>
-        <form className="bg-yellow mt-16 py-16 px-32 d-flex gap-24">
+        <form className="palette-brand mt-16 py-16 px-32 d-flex gap-24">
           <PostIcon name="1010" className="fs-small-huge"></PostIcon>
           <div className="form-floating" style={{ minWidth: '50%' }}>
             <input
@@ -113,7 +113,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Hier steckt mehr drin</h3>
                 <p className="card-text">Black-Week-Topangebote nicht verpassen</p>
                 <a href="#" className="btn btn-tertiary">
@@ -127,7 +127,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Einfach easy frankieren</h3>
                 <p className="card-text">DigitalStamp: Mit der Post-App frankieren</p>
                 <a href="#" className="btn btn-tertiary">
@@ -141,7 +141,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Neue Briefmarken</h3>
                 <p className="card-text">Entdecken Sie jetzt Ihre liebsten Motive</p>
                 <a href="#" className="btn btn-tertiary">
@@ -166,7 +166,7 @@ export default function Home() {
           <PostTabHeader panel="two" data-tooltip-target="tooltip-two">
             Delivered
           </PostTabHeader>
-          <PostTooltip className="bg-yellow" id="tooltip-two">
+          <PostTooltip className="palette-brand" id="tooltip-two">
             👻
           </PostTooltip>
           <PostTabPanel name="two">
@@ -175,7 +175,7 @@ export default function Home() {
               <button className="btn btn-secondary" data-popover-target="popover-one">
                 See details
               </button>
-              <PostPopover id="popover-one" className="bg-primary" closeButtonCaption="close">
+              <PostPopover id="popover-one" className="palette-accent" closeButtonCaption="close">
                 <h3 className="h5 mt-0">Details for this content</h3>
                 <p>Here are some more details for this content.</p>
                 <div className="d-flex flex-row-reverse gap-16">
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index b4d766e1b4..1208e871ef 100644
--- a/packages/styles-primeng-workspace/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng-workspace
 
+## 1.0.6-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 1.0.6-next.8
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index 5a58e45f77..60cb3e674e 100644
--- a/packages/styles-primeng-workspace/package.json
+++ b/packages/styles-primeng-workspace/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@swisspost/design-system-styles-primeng-workspace",
   "description": "Showcase for a Post like custom prime-ng theme",
-  "version": "1.0.6-next.8",
+  "version": "1.0.6-next.9",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "primeng": "17.18.7",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
index 69061786fc..b2b7b9a9ca 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
@@ -1,21 +1,7 @@
 <h1 class="visually-hidden">PrimeNg data table showcase</h1>
-
 <div
   class="sticky-top border-bottom d-flex align-items-center justify-content-between py-16 mb-56"
-  [class.bg-white]="!hasDarkBackground"
-  [class.bg-dark]="hasDarkBackground"
 >
-  <div class="form-check form-switch">
-    <input
-      class="form-check-input"
-      type="checkbox"
-      role="switch"
-      id="bakgroundSwitch"
-      [(ngModel)]="hasDarkBackground"
-    />
-    <label class="form-check-label" for="bakgroundSwitch">Dark background</label>
-  </div>
-
   <fieldset class="btn-group" aria-label="Basic datatable style">
     <input
       type="radio"
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
index e44edab042..dea2bd6e33 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
@@ -19,7 +19,6 @@ interface Product {
 })
 export class AppComponent {
   @HostBinding('class') containerClasses = 'd-block container my-32 py-24';
-  @HostBinding('class.bg-dark') hasDarkBackground = false;
 
   datatableStyleClass = '';
 
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
index e384aee8c3..3395842e1d 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
index 90f2fe1261..82bed38adc 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Swiss Post styles for PrimeNg datatable.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     "primeng": "^17.18.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 3edf73590f..de60763ac3 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.9
+
+### Minor Changes
+
+- Added composable footer component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Removed outdated portal-specific styles, including subnavigation-related rules. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4186](https://github.com/swisspost/design-system/pull/4186))
+
+- Added the possibility to define a `$child-selector` parameter with our list mixins, so they can be used also with custom elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated the utility classes for sizing. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv) with [#4200](https://github.com/swisspost/design-system/pull/4200))
+
+- Implemented new pixel based sizes. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+### Patch Changes
+
+- Fixed the `btn-icon` styles, so icons within can no longer be rendered too small, because of the inline-padding on the button. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Fixed the appstore-badge styles to get rid of the inline gap below. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
 ## 9.0.0-next.8
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 2c1fd2a663..83cf01001d 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.9",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index 08c5ac9ecf..3a1ef96b67 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -3,6 +3,7 @@
 @use './../mixins/color' as color-mx;
 @use './../placeholders/badge' as badge-ph;
 @use './../variables/components/badge';
+@use './../variables/color';
 
 .badge {
   --post-badge-height: #{badge.$badge-height};
@@ -29,4 +30,11 @@
   &.badge-sm {
     @extend %badge-sm;
   }
+
+  // Add background options to the badge element only
+  @each $name, $color in color.$background-colors {
+    &.bg-#{$name} {
+      @include color-mx.colored-background($color);
+    }
+  }
 }
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
index dc17321869..fc41252901 100644
--- a/packages/styles/src/components/datepicker.scss
+++ b/packages/styles/src/components/datepicker.scss
@@ -105,7 +105,7 @@ span.ngb-dp-navigation-chevron {
     height: 40px !important;
     line-height: 40px;
 
-    &.active:not(.bg-primary) {
+    &.active {
       outline: none;
     }
   }
@@ -129,10 +129,6 @@ span.ngb-dp-navigation-chevron {
   background-color: transparent;
 }
 
-.ngb-dp-day > .btn-light.bg-primary.text-white {
-  background-color: color.$yellow !important;
-}
-
 .ngb-dp-open {
   display: flex;
   align-items: center;
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index 48fcb3ace6..e34dd42ae8 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -14,6 +14,7 @@
   top: 0;
   bottom: 0;
   left: 0;
+  background-color: color.$light;
 
   flex: 1 0 auto;
   flex-direction: column;
@@ -92,6 +93,7 @@
     padding: spacing.$spacer 0;
     overflow-x: hidden;
     overflow-y: auto; // Scrollable contents if viewport is shorter than content.
+    background-color: color.$light;
 
     @include media-breakpoint-down(md) {
       bottom: auto;
diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss
index 835e957bc5..4c18c0b9f3 100644
--- a/packages/styles/src/components/tabs/_tab-title.scss
+++ b/packages/styles/src/components/tabs/_tab-title.scss
@@ -110,45 +110,3 @@
     }
   }
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tab-title {
-      background-color: $color;
-
-      &.active {
-        background-color: $color;
-      }
-    }
-
-    .nav-item {
-      background-color: $color;
-    }
-  }
-}
-
-[class*='bg-'] .tab-title.active {
-  &:focus {
-    &::after {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  // write supports for selectors this way: https://stackoverflow.com/a/62666132
-  // need to include * otherwise it throws build error
-  @supports #{'\selector(*:focus-visible)'} {
-    &:focus {
-      &::after {
-        background-color: unset;
-      }
-    }
-
-    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-    &:focus-visible {
-      &::after {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/components/tabs/_tabs-wrapper.scss b/packages/styles/src/components/tabs/_tabs-wrapper.scss
index 2b5ccbf4bf..318bb7c0fe 100644
--- a/packages/styles/src/components/tabs/_tabs-wrapper.scss
+++ b/packages/styles/src/components/tabs/_tabs-wrapper.scss
@@ -61,12 +61,3 @@
 .tab-content {
   padding-top: spacing.$spacer;
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tabs-wrapper {
-      background-color: $color;
-    }
-  }
-}
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index da218f342f..3d312d6ea1 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -111,6 +111,10 @@ tokens.$default-map: components.$post-banner;
   &:not(.no-icon)::before {
     @include icons-mx.icon($icon);
     color: $icon-color;
+
+    @include utilities-mx.high-contrast-mode {
+      color: CanvasText;
+    }
   }
 
   // Prevent flashing when using post-icon
diff --git a/packages/styles/src/utilities/temp/_legacy.scss b/packages/styles/src/utilities/temp/_legacy.scss
index e6b757081f..4b4c0a8b3a 100644
--- a/packages/styles/src/utilities/temp/_legacy.scss
+++ b/packages/styles/src/utilities/temp/_legacy.scss
@@ -58,10 +58,3 @@ span.spacer {
 .no-toggle-arrow::after {
   display: none !important;
 }
-
-// Background Utility
-@each $name, $color in color.$background-colors {
-  .bg-#{$name} {
-    @include color-mx.colored-background($color);
-  }
-}
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index ee303ee4eb..7df602c786 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ## 9.0.0-next.7
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index ed53edebf7..08f97ec4b3 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index f9f4255a0d..fe27410856 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -1247,7 +1247,7 @@
               "disabled": {
                 "bg": {
                   "$type": "color",
-                  "$value": "{post.core.color.brand.white}"
+                  "$value": "{post.core.color.colorless}"
                 },
                 "fg": {
                   "$type": "color",
@@ -1948,10 +1948,18 @@
               }
             },
             "input": {
-              "enabled": {
+              "disabled": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.colorless}"
+                },
                 "border": {
                   "$type": "color",
-                  "$value": "{post.core.color.sandgrey.080}"
+                  "$value": "{post.core.color.sandgrey.alpha.lightsand.60}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.alpha.lightsand.60}"
                 }
               }
             }
@@ -7113,6 +7121,12 @@
             "text": {
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.block.7}"
+            },
+            "container": {
+              "text": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.9}"
+              }
             }
           },
           "inline": {
@@ -8957,7 +8971,6 @@
         "post.scheme.color.interactive.notification.error.bg": "6165ecb63010c190df5bf65b59d442a4f802a05d",
         "post.scheme.color.interactive.notification.error.icon": "6a602959aae6c213148ff0f586280a123ebff780",
         "post.scheme.color.interactive.notification.error.stroke": "f6a25a2fe2b3146d1684d3906e635ef9505a4c23",
-        "post.scheme.color.interactive.input.enabled.border": "0acd1351445659355ab8d6f7f370fe1c217ebe91",
         "post.scheme.color.surface.default.bg": "76160b240c5dee3ecddf678e49fb08e554103e19",
         "post.scheme.color.surface.default.fg": "0497e52aa5f3173648ad5d0a10d8433eb3f229d4",
         "post.scheme.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff",
@@ -8989,16 +9002,17 @@
         "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
         "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
         "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
+        "post.scheme.color.interactive.input.disabled.bg": "751b8e0c0c47287585e354becf6a35bc76d3ef30",
+        "post.scheme.color.interactive.input.disabled.border": "03fcc579a4ae77e80ca5f0e8b4a33c17b07b9944",
+        "post.scheme.color.interactive.input.disabled.fg": "ab50ae4da2b62ef7e661bbd499b51e51b20b6289",
         "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
         "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
         "post.scheme.color.interactive.input.enabled.bg": "ee1559ba9c687a96a4f52b60241ad08d6af675ef",
         "post.scheme.color.interactive.input.enabled.fg": "c0b646bc7315b3eb57777ada948f08b0fd3d718d",
+        "post.scheme.color.interactive.input.enabled.border": "0acd1351445659355ab8d6f7f370fe1c217ebe91",
         "post.scheme.color.interactive.input.hover.bg": "9e0464752dbef48d2c13c82b1865fb29baa976d6",
         "post.scheme.color.interactive.input.hover.fg": "4191ea628c0c943fa24e832a57e02fce109f0a73",
-        "post.scheme.color.interactive.input.hover.border": "69ac281e1d33ebdb46f1512dd957323d89a6cc66",
-        "post.scheme.color.interactive.input.disabled.bg": "751b8e0c0c47287585e354becf6a35bc76d3ef30",
-        "post.scheme.color.interactive.input.disabled.fg": "ab50ae4da2b62ef7e661bbd499b51e51b20b6289",
-        "post.scheme.color.interactive.input.disabled.border": "03fcc579a4ae77e80ca5f0e8b4a33c17b07b9944"
+        "post.scheme.color.interactive.input.hover.border": "69ac281e1d33ebdb46f1512dd957323d89a6cc66"
       }
     },
     {
@@ -10490,6 +10504,7 @@
         "post.switch.element.handle": "c09fd2baa596cab64d62c4fb1fca8fa8c26291c5",
         "post.switch.gap.inline.text": "247b45d301bcca98b2d94934a5bf224368055263",
         "post.switch.padding.block.text": "fdf8cc0d615a1cd0116f36d0e88f0909474b74c2",
+        "post.switch.padding.block.container.text": "29cbdc47443a3446365e6d2120aabaadd5072b50",
         "post.switch.padding.inline.handle": "b512bd24b1efc090fbf71338c7581b91be49db5c",
         "post.switch.border-radius.round": "4cc09b8f409accc41f0553e1fb332ba603b3e501",
         "post.switch.border-width": "c45a9f2a969bb1f731fbb1f2c1433a57d238be0e",
@@ -10597,14 +10612,14 @@
         "post.toast.color.error-icon": "3096bb0553257be18a766df213ba83685ab63040",
         "post.validation.group.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
         "post.validation.group.icon.size": "ce5d0ae47c1f80a7ea39a6e5b25a00055c450e7d",
+        "post.validation.group.icon.block.start": "e52e3d301a820f000d2cd339f1fab72a5f09ce81",
+        "post.validation.group.icon.block.end": "f30710c36d79b96b33c33ad8e67524cc1ae3cd7a",
+        "post.validation.group.padding.inline.start": "37c8364dbc202912a5a557a5f8cc026e1f84a3bf",
         "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795",
         "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
         "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646",
         "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469",
-        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f",
-        "post.validation.group.padding.inline.start": "37c8364dbc202912a5a557a5f8cc026e1f84a3bf",
-        "post.validation.group.icon.block.start": "e52e3d301a820f000d2cd339f1fab72a5f09ce81",
-        "post.validation.group.icon.block.end": "f30710c36d79b96b33c33ad8e67524cc1ae3cd7a"
+        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f"
       }
     },
     {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5031b6aa97..93cd856493 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,10 +47,10 @@ importers:
         specifier: 0.3.7
         version: 0.3.7
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -159,10 +159,10 @@ importers:
         specifier: 18.2.13
         version: 18.2.13(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.13(@angular/animations@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -241,7 +241,7 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../components
       tslib:
         specifier: 2.6.3
@@ -251,7 +251,7 @@ importers:
   packages/components-react:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
     devDependencies:
       '@types/node':
@@ -303,22 +303,22 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../tokens/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.8
+        specifier: workspace:2.0.0-next.9
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -376,10 +376,10 @@ importers:
         specifier: 8.3.6
         version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass-embedded@1.78.0)(sass@1.78.0)(terser@5.31.6))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../intranet-header-workspace/dist/intranet-header
       '@types/css-modules':
         specifier: 1.0.5
@@ -520,7 +520,7 @@ importers:
   packages/internet-header:
     dependencies:
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       body-scroll-lock:
         specifier: 4.0.0-beta.0
@@ -671,7 +671,7 @@ importers:
         specifier: 2.11.8
         version: 2.11.8
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -765,21 +765,21 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../styles/dist
       tslib:
         specifier: 2.6.3
         version: 2.6.3
     devDependencies:
       '@swisspost/design-system-intranet-header-workspace':
-        specifier: workspace:3.0.22-next.8
+        specifier: workspace:3.0.22-next.9
         version: link:../..
     publishDirectory: ../../dist/intranet-header
 
   packages/intranet-header-workspace/projects/intranet-header-showcase:
     dependencies:
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../dist/intranet-header
 
   packages/migrations:
@@ -825,13 +825,13 @@ importers:
   packages/nextjs-integration:
     dependencies:
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.8
+        specifier: workspace:2.0.0-next.9
         version: link:../internet-header
       next:
         specifier: 15.0.1
@@ -893,10 +893,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -987,7 +987,7 @@ importers:
         specifier: 18.2.13
         version: 18.2.13(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.13(@angular/animations@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -1063,7 +1063,7 @@ importers:
         specifier: ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0