diff --git a/.changeset/big-maps-pay.md b/.changeset/big-maps-pay.md
new file mode 100644
index 0000000000..abaf495264
--- /dev/null
+++ b/.changeset/big-maps-pay.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-logo` slot explicitly.
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/early-baboons-cross.md b/.changeset/early-baboons-cross.md
new file mode 100644
index 0000000000..2d21811616
--- /dev/null
+++ b/.changeset/early-baboons-cross.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added a `type="button"` attribute to the `post-close-button` to prevent it from submitting forms.
diff --git a/.changeset/early-knives-own.md b/.changeset/early-knives-own.md
new file mode 100644
index 0000000000..a9957352a8
--- /dev/null
+++ b/.changeset/early-knives-own.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-togglebutton` component to enable more flexible usage.
diff --git a/.changeset/flat-badgers-fly.md b/.changeset/flat-badgers-fly.md
new file mode 100644
index 0000000000..6e60585de5
--- /dev/null
+++ b/.changeset/flat-badgers-fly.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed alignment of ´form-switch´ label.
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/four-jokes-tease.md b/.changeset/four-jokes-tease.md
new file mode 100644
index 0000000000..8d7bcdf701
--- /dev/null
+++ b/.changeset/four-jokes-tease.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`.
diff --git a/.changeset/fresh-files-crash.md b/.changeset/fresh-files-crash.md
new file mode 100644
index 0000000000..56ad7a873e
--- /dev/null
+++ b/.changeset/fresh-files-crash.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Removed all usage of deprecated utility sizing classes.
diff --git a/.changeset/fresh-schools-peel.md b/.changeset/fresh-schools-peel.md
new file mode 100644
index 0000000000..23adcd9eb2
--- /dev/null
+++ b/.changeset/fresh-schools-peel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added styles for text links and icon-buttons for Composible Footer in HCM.
\ No newline at end of file
diff --git a/.changeset/good-spoons-tie.md b/.changeset/good-spoons-tie.md
new file mode 100644
index 0000000000..757d40ce10
--- /dev/null
+++ b/.changeset/good-spoons-tie.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Aligned `width` and `height` percentage classes, after utility update.
diff --git a/.changeset/metal-geese-swim.md b/.changeset/metal-geese-swim.md
new file mode 100644
index 0000000000..7f3b1db1d5
--- /dev/null
+++ b/.changeset/metal-geese-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed colors of validation icon in HCM on form elements.
diff --git a/.changeset/nice-beans-impress.md b/.changeset/nice-beans-impress.md
new file mode 100644
index 0000000000..811fe3119b
--- /dev/null
+++ b/.changeset/nice-beans-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-logo` component to enable more flexible usage.
diff --git a/.changeset/olive-squids-enjoy.md b/.changeset/olive-squids-enjoy.md
new file mode 100644
index 0000000000..f667d96864
--- /dev/null
+++ b/.changeset/olive-squids-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed card control checkboxes' text color in HCM.
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/real-phones-scream.md b/.changeset/real-phones-scream.md
new file mode 100644
index 0000000000..76b359853e
--- /dev/null
+++ b/.changeset/real-phones-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Modified header megadropdown to close when focus is moved outside.
diff --git a/.changeset/smooth-spoons-matter.md b/.changeset/smooth-spoons-matter.md
new file mode 100644
index 0000000000..81dd15621a
--- /dev/null
+++ b/.changeset/smooth-spoons-matter.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-togglebutton` slot explicitly.
diff --git a/.changeset/soft-pugs-dream.md b/.changeset/soft-pugs-dream.md
new file mode 100644
index 0000000000..10b4189721
--- /dev/null
+++ b/.changeset/soft-pugs-dream.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor 
+---
+
+Updated the utility classes for sizing.
diff --git a/.changeset/stale-guests-love.md b/.changeset/stale-guests-love.md
new file mode 100644
index 0000000000..eb7a80587d
--- /dev/null
+++ b/.changeset/stale-guests-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins.
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/.changeset/violet-poems-attend.md b/.changeset/violet-poems-attend.md
new file mode 100644
index 0000000000..cfec36d36d
--- /dev/null
+++ b/.changeset/violet-poems-attend.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented new pixel based sizes.
diff --git a/.changeset/warm-walls-stare.md b/.changeset/warm-walls-stare.md
new file mode 100644
index 0000000000..8ec7a47d0a
--- /dev/null
+++ b/.changeset/warm-walls-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored icon declarations to comply with Angular 18's new build system requirements.
diff --git a/.changeset/wicked-scissors-buy.md b/.changeset/wicked-scissors-buy.md
new file mode 100644
index 0000000000..79950fb357
--- /dev/null
+++ b/.changeset/wicked-scissors-buy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed focus from collapsible when in collapsed state.
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/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
index 23d880fb52..94ba27b7be 100644
--- a/packages/components/cypress/fixtures/post-popover.test.html
+++ b/packages/components/cypress/fixtures/post-popover.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>
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/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-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
index ba070ab501..4922e020a0 100644
--- a/packages/components/src/components/post-card-control/post-card-control.scss
+++ b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -4,6 +4,10 @@
 @use '@swisspost/design-system-styles/components/form-check';
 @use '@swisspost/design-system-styles/components/checkbox';
 @use '@swisspost/design-system-styles/components/radio-button';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statements in this file.
@@ -22,7 +26,7 @@
 :host-context(fieldset) {
   &:host(:not(:last-child)) {
     .card-control {
-      margin-bottom: post.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -38,18 +42,18 @@
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 post.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   margin: 0;
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-12');
   background-color: var(--post-card-control-bg);
-  border: post.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color) !important;
   cursor: pointer;
 
   .card-control--input {
     grid-area: input;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
@@ -79,7 +83,7 @@
 
   .card-control--label {
     grid-area: label;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
@@ -101,8 +105,8 @@
 
   .card-control--icon {
     grid-area: icon;
-    width: post.$size-big;
-    height: post.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
 
     > slot {
@@ -195,11 +199,11 @@
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: post.$size-line solid Field;
-    outline-offset: post.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     .card-control--input {
-      outline: post.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
 
       // selector needed to override the .form-check styles
       &[type] {
@@ -264,7 +268,7 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -296,8 +300,8 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
-          border-radius: post.$size-line * 0.5;
+          inset: tokens.get('utility-gap-2');
+          border-radius: calc(tokens.get('utility-gap-2') * 0.5);
           background-color: SelectedItem;
         }
 
@@ -306,7 +310,7 @@
         }
 
         .card-control--input {
-          outline: post.$size-line solid Field;
+          outline: tokens.get('utility-gap-2') solid Field;
         }
       }
     }
@@ -432,7 +436,7 @@
 
 :host([data-context*='fieldset']:not(:last-child)) {
   .card-control {
-    margin-bottom: post.$size-regular;
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
index 4d842bd8a2..0b1d1f3739 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.tsx
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -15,7 +15,7 @@ export class PostClosebutton {
   render() {
     return (
       <Host data-version={version}>
-        <button class="btn btn-icon-close">
+        <button class="btn btn-icon-close" type="button">
           <post-icon aria-hidden="true" name="closex"></post-icon>
           <span class="visually-hidden">
             <slot></slot>
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
index e44c2d25c2..424fc8ebbb 100644
--- a/packages/components/src/components/post-collapsible/post-collapsible.tsx
+++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -96,7 +96,7 @@ export class PostCollapsible {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={version} tabindex={this.collapsed ? -1 : undefined}>
         <slot />
       </Host>
     );
diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index 27a43cc857..b6e3298cbe 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -116,6 +116,10 @@ slot[name='post-logo'] {
     z-index: 1;
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
+
+    &.title-header-mobile-extended {
+      border-bottom: 1px solid var(--post-core-color-sandgrey-012);
+    }
   }
   @include media.max(lg) {
     border-block-end: 1px solid ButtonBorder;
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 1639cc87d8..fa1d21ecb1 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
@@ -150,7 +150,12 @@ export class PostHeader {
             </div>
           </div>
         </div>
-        <div class="title-header d-flex space-between align-center">
+        <div
+          class={
+            'title-header d-flex space-between align-center ' +
+            (this.mobileMenuExtended ? 'title-header-mobile-extended' : '')
+          }
+        >
           <slot name="title"></slot>
           <div class="global-sub">
             <slot name="local-controls"></slot>
diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index 9160671c20..8643e53c7d 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -27,7 +27,6 @@ some content
  - [post-banner](../post-banner)
  - [post-breadcrumb](../post-breadcrumb)
  - [post-breadcrumb-item](../post-breadcrumb-item)
- - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
  - [post-language-switch](../post-language-switch)
@@ -42,7 +41,6 @@ graph TD;
   post-banner --> post-icon
   post-breadcrumb --> post-icon
   post-breadcrumb-item --> post-icon
-  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
   post-language-switch --> post-icon
diff --git a/packages/components/src/components/post-logo/post-logo.tsx b/packages/components/src/components/post-logo/post-logo.tsx
index 313cb0389d..d5ba21c1da 100644
--- a/packages/components/src/components/post-logo/post-logo.tsx
+++ b/packages/components/src/components/post-logo/post-logo.tsx
@@ -41,7 +41,7 @@ export class PostLogo {
     const LogoTag = logoLink ? 'a' : 'span';
 
     return (
-      <Host data-version={version} slot="post-logo">
+      <Host data-version={version}>
         <LogoTag class="logo" {...(logoLink ? { href: logoLink } : {})}>
           <span class="description">
             <slot onSlotchange={() => this.checkDescription()}></slot>
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index ff4d6939e6..1d8e5f1373 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';
@@ -26,9 +27,9 @@ post-mainnavigation {
 
       button {
         @include button.reset-button;
-        text-align: start;
+      text-align: start;
+      @include utilities.focus-style;
       }
-    }
 
     > a,
     > button,
@@ -85,7 +86,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);
         }
@@ -105,7 +107,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 d3129064c4..69483a1c86 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -46,6 +46,7 @@ post-popovercontainer {
     left: 0;
     width: 100%;
     height: auto;
+    border-top: unset;
 
     &.slide-in {
       animation: slide-in;
@@ -87,6 +88,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-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 03d0ff5db9..0ccbc975d6 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -80,6 +80,14 @@ export class PostMegadropdown {
     this.popoverRef.hide();
   }
 
+  private handleFocusout(event: FocusEvent) {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    if (!megadropdown.contains(relatedTarget)) {
+      this.hide();
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -89,7 +97,7 @@ export class PostMegadropdown {
           edge-gap="0"
           ref={el => (this.popoverRef = el)}
         >
-          <div class="megadropdown">
+          <div class="megadropdown" onFocusout={e => this.handleFocusout(e)}>
             <div onClick={() => this.handleBackButtonClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>
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 865a24a729..775c831172 100644
--- a/packages/components/src/components/post-menu/post-menu.tsx
+++ b/packages/components/src/components/post-menu/post-menu.tsx
@@ -1,7 +1,17 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} 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({
@@ -76,7 +86,7 @@ export class PostMenu {
 
   /**
    * Displays the popover menu, focusing the first menu item.
-   * 
+   *
    * @param target - The HTML element relative to which the popover menu should be displayed.
    */
   @Method()
@@ -131,12 +141,15 @@ export class PostMenu {
 
   private controlKeyDownHandler(e: KeyboardEvent) {
     const menuItems = this.getSlottedItems();
+
     if (!menuItems.length) {
       return;
     }
 
-    const currentFocusedElement = this.root.activeElement as HTMLElement; // Use root's activeElement
-    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:
@@ -169,20 +182,19 @@ export class PostMenu {
     }
   }
 
-  private getSlottedItems() {
+  private getSlottedItems(): Element[] {
     const slot = this.host.shadowRoot.querySelector('slot');
     const slottedElements = slot ? slot.assignedElements() : [];
 
-    const 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-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss
index d3de559cac..852a8100e1 100644
--- a/packages/components/src/components/post-rating/post-rating.scss
+++ b/packages/components/src/components/post-rating/post-rating.scss
@@ -1,4 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
 
 :host {
   display: inline-block;
@@ -8,7 +10,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  margin: 0 (-(post.$size-micro));
+  margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
   border-radius: post.$border-radius;
 
   .star {
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
index b0eb329d9d..ac8d98375b 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -51,7 +51,6 @@ export class PostTogglebutton {
   render() {
     return (
       <Host
-        slot="post-togglebutton"
         data-version={version}
         role="button"
         tabindex="0"
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 48caed1ce9..ab40d871bb 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -3,16 +3,15 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
 
-:host {
-  --post-contrast-color: #{color.$white};
-  --post-bg-rgb: #{color-fn.rgb-values(color.$gray-80)};
-}
+tokens.$default-map: utilities.$post-spacing;
 
 post-popovercontainer {
-  padding: spacing.$size-micro spacing.$size-mini;
-  max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
-  min-height: spacing.$size-regular;
+  padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
+  max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8'));
+  min-height: tokens.get('utility-gap-16');
 
   // Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip
   &[arrow] {
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 60605cbfb7..8bffd715bf 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -18,7 +18,7 @@
   <body style="min-height: 200vh">
     <post-header>
       <!-- Logo -->
-      <post-logo>Homepage</post-logo>
+      <post-logo slot="post-logo">Homepage</post-logo>
 
       <!-- Meta navigation -->
       <ul class="list-inline" slot="meta-navigation">
@@ -27,7 +27,7 @@
       </ul>
 
       <!-- Menu button for mobile -->
-      <post-togglebutton>
+      <post-togglebutton slot="post-togglebutton">
         <span class="visually-hidden-sm">Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/get-focusable-children.ts
similarity index 74%
rename from packages/components/src/utils/is-focusable.ts
rename to packages/components/src/utils/get-focusable-children.ts
index 66aa7d74dc..12a33efc02 100644
--- a/packages/components/src/utils/is-focusable.ts
+++ b/packages/components/src/utils/get-focusable-children.ts
@@ -21,8 +21,9 @@ const focusDisablingSelector = `:where(${[
   '[popover]:not(:popover-open) *',
   'details:not([open]) > *:not(details > summary:first-of-type)',
   'details:not([open]) > *:not(details > summary:first-of-type) *',
+  '[tabindex^="-"]',
 ].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/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
index f6861fbce9..ddaae2c01c 100644
--- a/packages/documentation/.storybook/addons/addons.scss
+++ b/packages/documentation/.storybook/addons/addons.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .addon-label {
   color: post.$body-color !important;
@@ -8,11 +12,11 @@
   min-width: 12rem;
   display: flex;
   flex-flow: column nowrap;
-  gap: post.$size-line;
+  gap: tokens.get('utility-gap-2');
   position: absolute;
   top: -5px;
   right: 0;
-  padding: post.$size-mini;
+  padding: tokens.get('utility-gap-8');
   background-color: post.$white;
   border: post.$border-width solid post.$border-color;
   border-radius: post.$border-radius;
@@ -20,7 +24,7 @@
 
   .addon-dropdown__item {
     display: block;
-    padding: post.$size-mini post.$size-small-regular;
+    padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12');
     border-radius: post.$border-radius-sm;
     text-decoration: none;
     color: post.$body-color !important;
@@ -38,6 +42,6 @@
 .addon-button {
   post-icon {
     font-size: post.$font-size-20;
-    margin-inline-end: post.$size-line;
+    margin-inline-end: tokens.get('utility-gap-2');
   }
 }
diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
index 68ad4c73d5..00be20668d 100644
--- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
+++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .version-switcher__loading {
   display: flex;
@@ -17,12 +21,12 @@
 
   .item__deps {
     display: flex;
-    gap: post.$size-small-regular;
+    gap: tokens.get('utility-gap-12');
   }
 
   .deps_dep {
     display: flex;
-    gap: post.$size-line;
+    gap: tokens.get('utility-gap-2');
     font-size: 85%;
   }
 
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/manager.ts b/packages/documentation/.storybook/manager.ts
index c52ce3e90d..ec30bb63de 100644
--- a/packages/documentation/.storybook/manager.ts
+++ b/packages/documentation/.storybook/manager.ts
@@ -17,6 +17,7 @@ addons.setConfig({
       'layout',
       'raw-components',
       'components',
+      'modules',
       'utilities',
       'templates',
       'guidelines',
diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss
index 4d1b551b8c..e7205b7a97 100644
--- a/packages/documentation/.storybook/styles/components/blocks.scss
+++ b/packages/documentation/.storybook/styles/components/blocks.scss
@@ -1,15 +1,19 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/elements/body';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 #storybook-docs {
   .sbdocs-preview {
     border-color: post.$border-color;
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 
   .docblock-argstable {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
 
     tbody {
       position: relative;
@@ -22,7 +26,7 @@
         position: absolute;
         inset: 0;
         border: post.$border-width solid post.$border-color;
-        border-radius: post.$size-mini;
+        border-radius: tokens.get('utility-gap-8');
         z-index: -1;
       }
 
@@ -46,33 +50,33 @@
             background-clip: padding-box !important;
 
             &:first-child {
-              border-inline-start: post.$size-line solid transparent;
+              border-inline-start: tokens.get('utility-gap-2') solid transparent;
             }
 
             &:last-child {
-              border-inline-end: post.$size-line solid transparent;
+              border-inline-end: tokens.get('utility-gap-2') solid transparent;
             }
           }
 
           &:first-child > td {
-            border-block-start: post.$size-hair solid transparent;
+            border-block-start: tokens.get('utility-gap-1') solid transparent;
 
             &:first-child {
-              border-start-start-radius: post.$size-mini;
+              border-start-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-start-end-radius: post.$size-mini;
+              border-start-end-radius: tokens.get('utility-gap-8');
             }
           }
 
           &:last-child > td {
             &:first-child {
-              border-end-start-radius: post.$size-mini;
+              border-end-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-end-end-radius: post.$size-mini;
+              border-end-end-radius: tokens.get('utility-gap-8');
             }
           }
         }
@@ -81,7 +85,7 @@
   }
 
   .docblock-source {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 }
diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss
index 83e1a23c67..7943371d8b 100644
--- a/packages/documentation/.storybook/styles/components/tabs.scss
+++ b/packages/documentation/.storybook/styles/components/tabs.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '../mixins';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 @include mixins.style-docs-only-guard('post-tabs') {
   &::part(tabs) {
@@ -30,7 +34,7 @@
   }
 
   &:where(.sb-tabs-lg, :has(post-tab-panel > .sbdocs)) {
-    margin-top: post.$size-big;
+    margin-top: tokens.get('utility-gap-32');
 
     &::part(tabs) {
       &::before {
@@ -57,9 +61,9 @@
         display: block;
         content: '';
         position: absolute;
-        top: calc(100% + #{post.$size-regular});
+        top: calc(100% + tokens.get('utility-gap-16'));
         left: 0;
-        right: post.$size-mini * -1;
+        right: calc(tokens.get('utility-gap-8') * -1);
         border-top: post.$border-width dashed post.$border-color;
       }
     }
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/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 17ad69d1f9..8e4983d47c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -2,8 +2,8 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
 @use './components';
-@use '@swisspost/design-system-styles/functions/tokens' as tokens;
-@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
 
 tokens.$default-map: utilities.$post-color;
 
@@ -91,10 +91,10 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: post.$size-mini;
+    gap: tokens.get('utility-gap-8', utilities.$post-spacing);
   }
   .docs-title {
-    margin-bottom: post.$size-mini;
+    margin-bottom: tokens.get('utility-gap-8', utilities.$post-spacing);
 
     :first-child {
       margin-right: auto;
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/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
new file mode 100644
index 0000000000..e539797cc7
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
@@ -0,0 +1,22 @@
+describe('Sizing', () => {
+  // Parent based sizing classes [e.g. .quarter, .third, .half, etc.]
+  it('Sizing Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.]
+  it('Sizing Viewport Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Pixel based sizing classes [e.g. h-80, w-56, max-w-24, min-h-24, etc.]
+  it('Sizing Pixel Based', () => {
+    cy.visit('/iframe.html?id=snapshots--pixel-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+});
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/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
index 9896087eb0..f62c4e030d 100644
--- a/packages/documentation/src/shared/tile/tile.component.scss
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -1,13 +1,17 @@
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core.scss' as post;
-@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $tile-size: var(--post-docs-tile-size, 120px);
 $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host {
   a {
-    @include utilities.focus-style {
+    @include utilities-mx.focus-style {
       border-radius: post.$border-radius;
     }
   }
@@ -18,12 +22,12 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
     width: $tile-size;
     height: $tile-size;
     background-color: post.$white;
-    border-radius: post.$size-regular;
+    border-radius: tokens.get('utility-gap-16');
     box-shadow: 0 2px 5px 0 rgba(82, 49, 120, 0.3);
     text-decoration: none;
     text-align: center;
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       border: 2px solid transparent;
     }
 
@@ -32,8 +36,8 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
       justify-content: center;
       align-items: center;
       flex: 0 0 auto;
-      padding: 0 post.$size-micro;
-      height: calc(#{post.$size-mini * 2} + 2.2em);
+      padding: 0 tokens.get('utility-gap-4');
+      height: calc((tokens.get('utility-gap-8') * 2) + 2.2em);
       background-color: post.$yellow;
       border-top-left-radius: inherit;
       border-top-right-radius: inherit;
@@ -57,7 +61,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: post.$size-micro;
+      gap: tokens.get('utility-gap-4');
       border-bottom-left-radius: inherit;
       border-bottom-right-radius: inherit;
 
@@ -83,8 +87,9 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
     @include post.media-breakpoint-down(md) {
       width: $tile-rg-size;
       height: $tile-rg-size;
+
       .tile--title {
-        height: calc(#{post.$size-mini * 1.5} + 2.2em);
+        height: calc((tokens.get('utility-gap-8') * 1.5) + 2.2em);
 
         ~ .tile--icon {
           ::slotted(img) {
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..d8743a3ebb 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,
@@ -44,7 +38,7 @@ To achieve that, you can use classes in the format:
 - `.w-{size}` for the xs breakpoint,
 - `.w-{breakpoint}-{size}` for breakpoints from sm to xl.
 
-For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
+For example, a button with classes `w-full w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 
 To learn more about breakpoints, see the <a href="/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.
 
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..d163752e5c 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/>
@@ -145,7 +126,7 @@ The `<post-card-control>` element is part of the `@swisspost/design-system-compo
     ### Lined up
 
     Change the `width` of a `<card-control>` component, by putting it (for example) in a grid.
-    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-100` to them.
+    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-full` to them.
 
     <Canvas of={CardControlStories.LinedUp} />
     <div className="hide-col-default">
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..f913fb1705 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>
     `,
   ],
@@ -378,7 +347,7 @@ export const LinedUp: Story = {
           <div class="col-${12 / args.colCount}">
             ${Default.render?.(
               {
-                class: args.fullHeight ? 'h-100' : null,
+                class: args.fullHeight ? 'h-full' : null,
                 label: `Checkbox${i}`,
                 description: i === 6 ? '20.- per year' : null,
                 type: args.type,
diff --git a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
index b1692e8273..a88c363129 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
+++ b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
@@ -36,7 +36,7 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw';
 ### Product Card Group
 
 For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
-Ensure consistent height by applying the `.h-100` class to all product cards.
+Ensure consistent height by applying the `.h-full` class to all product cards.
 
 <Canvas of={ProductCardStories.Groupped} />
 
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..624a9030da 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>
@@ -134,7 +134,7 @@ export const Groupped: Story = {
     </div>
   `,
   args: {
-    cardClasses: ' h-100',
+    cardClasses: ' h-full',
   },
 };
 
@@ -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,12 +223,12 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
-            <button class="btn btn-secondary w-100 mb-12">
+          <div class="card-body palette-alternate">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>
@@ -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,12 +310,12 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
-            <button class="btn btn-secondary w-100 mb-12">
+          <div class="card-body palette-alternate">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
index a3bc447d70..ff4778d2c1 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
@@ -56,7 +56,7 @@ export const Checkbox: Story = {
               </span>
             `;
           })}
-          <div class="mt-32 w-100"></div>
+          <div class="mt-32 w-full"></div>
           ${Inline.render?.({ ...context.args, ...Inline.args }, context)}
         </div>
       `,
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/header/language-switch/language-switch.docs.mdx b/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.docs.mdx
rename to packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx
diff --git a/packages/documentation/src/stories/components/header/language-switch/language-switch.snapshot.stories.ts b/packages/documentation/src/stories/components/language-switch/language-switch.snapshot.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.snapshot.stories.ts
rename to packages/documentation/src/stories/components/language-switch/language-switch.snapshot.stories.ts
diff --git a/packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts b/packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
similarity index 98%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts
rename to packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
index 013f6d01d9..e3cb30133e 100644
--- a/packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts
+++ b/packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
@@ -4,7 +4,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent<HTMLPostLanguageSwitchElement> = {
   id: 'decbb10c-2b39-4f47-b67d-337d8111a3ae',
-  title: 'Components/Header/Language Switch',
+  title: 'Components/Language Switch',
   tags: ['package:WebComponents'],
   component: 'post-language-switch',
   render: renderLanguageSwitch,
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/rating/post-rating.snapshot.stories.ts b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
index 6b43d11484..f4da0bc246 100644
--- a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
@@ -18,8 +18,8 @@ export const Rating: Story = {
     return schemes(
       () => html`
         <div class="d-flex gap-16 mb-16">
-          <div class="w-50 d-flex gap-4">readonly: false</div>
-          <div class="w-50 d-flex gap-4">readonly: true</div>
+          <div class="w-half d-flex gap-4">readonly: false</div>
+          <div class="w-half d-flex gap-4">readonly: true</div>
         </div>
         ${bombArgs({
           stars: [3, 5, 10],
@@ -30,10 +30,10 @@ export const Rating: Story = {
             (args: Args) =>
               html`
                 <div class="d-flex gap-16">
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
                   </div>
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: true }, context)}
                   </div>
                 </div>
diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
index 309d2a5182..1045932fce 100644
--- a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
@@ -18,7 +18,7 @@ export const SegmentedButton: Story = {
 
     return schemes(
       scheme => html`
-        <div class=" d-flex flex-column w-75 gap-16 p-16">
+        <div class=" d-flex flex-column w-three-quarters gap-16 p-16">
           ${labelCounts.map(count => {
             const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`);
 
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
index eb42edb536..4ad7a02e91 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
@@ -12,7 +12,7 @@
     <span [class.visually-hidden]="selectedOption">Default custom-select</span>
     <span *ngIf="selectedOption" aria-hidden="true">{{ selectedOption.label }}</span>
   </button>
-  <div aria-labelledby="customSelectButton" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
index 37f20358b2..53d1ba5daf 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
@@ -14,7 +14,7 @@
   <label class="form-label" id="customSelectLabel">
     Floatinglabel custom-select {{ infoText }}
   </label>
-  <div aria-labelledby="customSelectLabel" class="w-100 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
index 5acb16ee25..c5ae75fcdb 100644
--- a/packages/documentation/src/stories/components/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -215,7 +215,7 @@ function render(args: Args, context: StoryContext) {
           <label class="form-label visually-hidden" for="${inputId}">Range controller</label>
           <input
             id="${inputId}"
-            class="form-control mw-giant"
+            class="form-control min-w-80"
             type="text"
             inputmode="decimal"
             value="${args.value}"
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..4065dbc5fe 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'),
   ],
 };
 
@@ -233,7 +229,7 @@ const renderAnimateVariants = (args: Args, customAttrs: { name: string; animatio
     ${customAttrs.map(
       variantArgs =>
         html`
-          <div class="w-50 py-16">
+          <div class="w-half py-16">
             <p class="text-muted fs-tiny">Animation: ${variantArgs.animation}</p>
             <post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon>
           </div>
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/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
index df1c6f2194..c85c6fe719 100644
--- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
+++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
@@ -1,8 +1,12 @@
-@use '../../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .icon-search {
   .icon-search--filters {
-    margin: post.$size-huge auto;
+    margin: tokens.get('utility-gap-56') auto;
     max-width: 500px;
 
     .freetext {
@@ -30,13 +34,13 @@
 
   .icon-search--results {
     display: grid;
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    margin-top: post.$size-big;
+    margin-top: tokens.get('utility-gap-32');
 
     .results--empty {
       display: flex;
-      gap: post.$size-mini;
+      gap: tokens.get('utility-gap-8');
       align-items: center;
       margin-left: auto;
       margin-right: auto;
@@ -61,7 +65,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: post.$size-micro post.$size-regular;
+    padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
     width: 100%;
     height: 80px;
     background-color: var(--post-contrast-color-inverted);
@@ -80,7 +84,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: post.$size-micro post.$size-regular;
+    padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
     background-color: var(--post-gray-10);
     border-top: post.$border-width solid var(--post-gray-20);
     border-bottom-left-radius: post.$border-radius;
diff --git a/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
index e8b900a194..bd350c1c09 100644
--- a/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
@@ -244,7 +244,7 @@ export const ColumnBreakExample: Story = {
       ${args.renderBreakingElement
         ? html`
             <!-- Force next columns to break to new line -->
-            <div class="w-100"></div>
+            <div class="w-full"></div>
           `
         : nothing}
       <div class="col-3">.col-3</div>
diff --git a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
index 95fb494fab..9f201decc4 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
@@ -23,7 +23,7 @@ export const PostLogo: Story = {
                 <p>${url ? 'Links' : 'Images'}</p>
                 <div class="row">
                   <div class="col">
-                    ${['big', 'huge', 'giant'].map(
+                    ${['32', '56', '80'].map(
                       (height, i) => html`
                         <div class="h-${height} ${i === 0 ? 'my' : 'mb'}-16">
                           ${meta.render?.({ ...context.args, url }, context)}
diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
index 9fc01f60e5..2d165a4115 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
@@ -24,7 +24,7 @@ export default meta;
 
 // DECORATORS
 function containerWithHeight(story: StoryFn, context: StoryContext) {
-  return html` <div class="h-giant">${story(context.args, context)}</div> `;
+  return html` <div class="h-80">${story(context.args, context)}</div> `;
 }
 
 // RENDERER
@@ -57,5 +57,5 @@ export const Link: Story = {
 };
 
 export const Height: Story = {
-  render: () => html` <post-logo class="h-huge">Logo of the Post</post-logo> `,
+  render: () => html` <post-logo class="h-56">Logo of the Post</post-logo> `,
 };
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/foundations/typography/typography.blocks.tsx b/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
index 7a605f2506..ecf9a056ca 100644
--- a/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
+++ b/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
@@ -50,7 +50,7 @@ export function FontSizesAndLineheights() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Name</th>
+            <th className="w-quarter">Name</th>
             <th>Class</th>
             <th>Scss variable</th>
             <th>Font Size</th>
@@ -125,7 +125,7 @@ export function Headings() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -190,7 +190,7 @@ export function Paragraphs() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -234,7 +234,7 @@ export function Links() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -284,7 +284,7 @@ export function Inlines() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -402,7 +402,7 @@ export function Lists() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
diff --git a/packages/documentation/src/stories/foundations/typography/typography.styles.scss b/packages/documentation/src/stories/foundations/typography/typography.styles.scss
index 0a67da490d..2517952df0 100644
--- a/packages/documentation/src/stories/foundations/typography/typography.styles.scss
+++ b/packages/documentation/src/stories/foundations/typography/typography.styles.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .sb-fontface-wrapper {
   display: grid;
@@ -7,8 +11,8 @@
 
   @include post.media-breakpoint-up(md) {
     grid-template-columns: max-content min-content max-content;
-    gap: post.$size-regular;
-    margin-bottom: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 
@@ -22,9 +26,9 @@
   }
 
   .sb-fontface__settings {
-    margin-top: post.$size-mini;
-    margin-bottom: post.$size-regular;
-    padding-top: post.$size-mini;
+    margin-top: tokens.get('utility-gap-8');
+    margin-bottom: tokens.get('utility-gap-16');
+    padding-top: tokens.get('utility-gap-8');
     border-top: post.$border-width dashed post.$border-color;
 
     .settings__face {
@@ -51,7 +55,7 @@
       margin-top: 0;
       margin-bottom: 0;
       padding-top: 0;
-      padding-left: post.$size-regular;
+      padding-left: tokens.get('utility-gap-16');
       border-top: 0 none;
       border-left: post.$border-width dashed post.$border-color;
     }
diff --git a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
index e94d151458..cb9d889870 100644
--- a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
+++ b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
@@ -1,13 +1,17 @@
 @use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
   list-style-type: none;
-  gap: post.$size-big;
+  gap: tokens.get('utility-gap-32');
 
   @include post.media-breakpoint-down(sm) {
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
   }
 }
diff --git a/packages/documentation/src/stories/introduction.docs.mdx b/packages/documentation/src/stories/introduction.docs.mdx
index 5397d32781..b58e53ed0a 100644
--- a/packages/documentation/src/stories/introduction.docs.mdx
+++ b/packages/documentation/src/stories/introduction.docs.mdx
@@ -14,29 +14,38 @@ 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>
     ))}
   </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>
+    <div className="mt-32 mb-16 w-full">
+      <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..c44c996075 100644
--- a/packages/documentation/src/stories/introduction.styles.scss
+++ b/packages/documentation/src/stories/introduction.styles.scss
@@ -1,13 +1,17 @@
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core.scss' as post;
-@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
 
-#storybook-docs{
-  overflow-x:hidden;
+tokens.$default-map: utilities.$post-spacing;
+
+#storybook-docs {
+  overflow-x: hidden;
 }
 
-.bg-fullwidth {
+.light-section {
   position: relative;
+  background-color: post.$light;
 
   &:before,
   &:after {
@@ -32,22 +36,22 @@
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
-  padding:0;
+  padding: 0;
   list-style-type: none;
   justify-content: center;
-  gap: post.$size-big;
+  gap: tokens.get('utility-gap-32');
 
   @include post.media-breakpoint-down(sm) {
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
   }
 }
 
 .feature {
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-16');
 
   .feature--icon {
-    margin-bottom: post.$size-regular;
-    font-size: post.$size-huge;
+    margin-bottom: tokens.get('utility-gap-16');
+    font-size: tokens.get('utility-gap-56');
     color: #523178;
   }
 
diff --git a/packages/documentation/src/stories/raw-components/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
similarity index 97%
rename from packages/documentation/src/stories/raw-components/header/components/header.markup.ts
rename to packages/documentation/src/stories/modules/header/components/header.markup.ts
index d6bf86c4f4..43542e2c62 100644
--- a/packages/documentation/src/stories/raw-components/header/components/header.markup.ts
+++ b/packages/documentation/src/stories/modules/header/components/header.markup.ts
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 
 export default html`<post-header>
   <!-- Logo -->
-  <post-logo>Homepage</post-logo>
+  <post-logo slot="post-logo" url="/">Homepage</post-logo>
 
   <!-- Meta navigation -->
   <ul class="list-inline" slot="meta-navigation">
@@ -11,7 +11,7 @@ export default html`<post-header>
   </ul>
 
   <!-- Menu button for mobile -->
-  <post-togglebutton>
+  <post-togglebutton slot="post-togglebutton">
     <span class="visually-hidden-sm">Menu</span>
     <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
     <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
diff --git a/packages/documentation/src/stories/raw-components/header/header.docs.mdx b/packages/documentation/src/stories/modules/header/header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/raw-components/header/header.docs.mdx
rename to packages/documentation/src/stories/modules/header/header.docs.mdx
diff --git a/packages/documentation/src/stories/raw-components/header/header.stories.ts b/packages/documentation/src/stories/modules/header/header.stories.ts
similarity index 94%
rename from packages/documentation/src/stories/raw-components/header/header.stories.ts
rename to packages/documentation/src/stories/modules/header/header.stories.ts
index 21c5eb7178..06546b6b31 100644
--- a/packages/documentation/src/stories/raw-components/header/header.stories.ts
+++ b/packages/documentation/src/stories/modules/header/header.stories.ts
@@ -4,7 +4,7 @@ import HeaderMarkup from './components/header.markup';
 
 const meta: MetaComponent = {
   id: 'header',
-  title: 'Raw Components/Header',
+  title: 'Modules/Header',
   tags: ['package:HTML'],
   parameters: {
     layout: 'fullscreen',
diff --git a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
index 24c46fb995..96fcb2f2de 100644
--- a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
@@ -7,7 +7,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
-  title: 'Raw Components/Breadcrumbs',
+  title: 'Raw Components/Internet Header/Breadcrumbs',
   component: 'swisspost-internet-breadcrumbs',
   tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
diff --git a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
index 86fbed7f1d..85fd8c1677 100644
--- a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
@@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: '27fc009d-3eec-43a9-b3a2-55531e721817',
-  title: 'Raw Components/Footer',
+  title: 'Raw Components/Internet Header/Footer',
   component: 'swisspost-internet-footer',
   tags: ['package:InternetHeader'],
   render: renderInternetFooter,
diff --git a/packages/documentation/src/stories/components/internet-header/config/custom-config.ts b/packages/documentation/src/stories/raw-components/internet-header/config/custom-config.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/custom-config.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/custom-config.ts
diff --git a/packages/documentation/src/stories/components/internet-header/config/language-switch-overrides.ts b/packages/documentation/src/stories/raw-components/internet-header/config/language-switch-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/language-switch-overrides.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/language-switch-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/config/os-flyout-overrides.ts b/packages/documentation/src/stories/raw-components/internet-header/config/os-flyout-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/os-flyout-overrides.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/os-flyout-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/header.docs.mdx b/packages/documentation/src/stories/raw-components/internet-header/header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/header.docs.mdx
rename to packages/documentation/src/stories/raw-components/internet-header/header.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/header.scss b/packages/documentation/src/stories/raw-components/internet-header/header.scss
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/header.scss
rename to packages/documentation/src/stories/raw-components/internet-header/header.scss
diff --git a/packages/documentation/src/stories/components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
similarity index 98%
rename from packages/documentation/src/stories/components/internet-header/header.stories.ts
rename to packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index d6ccd59d79..d51fe7b296 100644
--- a/packages/documentation/src/stories/components/internet-header/header.stories.ts
+++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
@@ -8,7 +8,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
-  title: 'Components/Internet Header',
+  title: 'Raw Components/Internet Header',
   tags: ['package:InternetHeader'],
   component: 'swisspost-internet-header',
   parameters: {
@@ -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..720a6574d7 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-half rounded p-16 elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
index 27a06abd6d..29dc4a3008 100644
--- a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
+++ b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
@@ -1,25 +1,29 @@
 @use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .elevation-container {
   display: flex;
   flex-wrap: wrap;
-  gap: post.$size-big;
-  margin-block: post.$size-large post.$size-bigger-big;
+  gap: tokens.get('utility-gap-32');
+  margin-block: tokens.get('utility-gap-24') tokens.get('utility-gap-40');
 }
 
 .elevation-tile {
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-16');
   border-radius: post.$border-radius;
 
   .h3 {
-    margin-bottom: post.$size-large;
+    margin-bottom: tokens.get('utility-gap-24');
     text-transform: capitalize;
   }
 
   dl {
     display: grid;
     grid-template-columns: max-content 1fr;
-    column-gap: post.$size-regular;
+    column-gap: tokens.get('utility-gap-16');
     margin-bottom: 0;
   }
 
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..fca112fcb4 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss
+++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
@@ -1,9 +1,33 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
+.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;
-    padding: post.$size-mini (post.$size-regular * 0.5);
+    padding: tokens.get('utility-gap-8') calc(tokens.get('utility-gap-16') * 0.5);
     border-top: post.$border-width solid post.$border-color;
     flex: 0 0 50%;
 
@@ -28,12 +52,7 @@
   }
 
   .flex-doc-container__demo {
-    padding: post.$size-mini;
-
-    > * > * {
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-    }
+    padding: tokens.get('utility-gap-8');
 
     @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/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index 2305a8a96e..eab0361910 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -13,60 +13,49 @@ import * as SizingStories from './sizing.stories';
 
 ## Height & Width
 
-Height and width can be set using `h-*` and `w-*` prefixes, max-height and max-width can be set using prefixes `mh-*` and `mw-*` .
+Height and width can be set using our utility classes `h-{size}` and `w-{size}`, max-height and max-width can be set with `max-h-{size}` and `max-w-{size}` and min-height and min-width can be set with `min-h-{size}` and `min-w-{size}`.
 
 ### Parent Based
 
-Bootstrap offers sizing classes with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element (see [Bootstrap Sizing](https://getbootstrap.com/docs/5.3/utilities/sizing/) for reference).
+The design system offers classes for percentage based sizing with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element.
 
-> - `*-25`
-> - `*-50`
-> - `*-75`
-> - `*-100`
+- `*-auto`
+- `*-quarter`
+- `*-third`
+- `*-half`
+- `*-two-thirds`
+- `*-three-quarters`
+- `*-full`
 
-#### Example
+### Example
 
-<Canvas sourceState="shown" of={SizingStories.SizesPercent} />
+<Canvas sourceState="shown" of={SizingStories.PercentSizes} />
 <div className="hide-col-default">
-  <Controls of={SizingStories.SizesPercent} />
+  <Controls of={SizingStories.PercentSizes} />
 </div>
 
-### Relative to breakpoints
-
-For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
+### Pixel Based
 
-See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
+Additional pixel-based sizing classes allow precise height `h-{size}` and width `w-{size}` definitions in pixels (e.g., `w-12` for 12px width and `h-26` for 26px height).
 
-### Post-Sizes
+See all available sizes in the example bellow.
 
-Post sizes can be used as suffixes in the same way. To find out which size name to use, see the "Size name in classes" column in the reference table above or use the "Example Post-Sizes" below.
+### Example
 
-#### Sass variables
-
-{/* prettier-ignore */}
-<div className="banner banner-warning mb-40">
-  <h2 className="banner-heading">Sizing variables are deprecated</h2>
-  <p>The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
-  <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
+<Canvas sourceState="shown" of={SizingStories.PxSizes} />
+<div className="hide-col-default">
+  <Controls of={SizingStories.PxSizes} />
 </div>
 
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SizingStories.SCSS_VARIABLES)
-    .filter(([key, value]) => key !== 'parameters')
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
+### Relative to breakpoints
 
-<Canvas of={SizingStories.Sizes} />
-<div className="hide-col-default">
-  <Controls of={SizingStories.Sizes} />
-</div>
+For width and height, the design system provides additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-full`, `h-md-56`) so that you can set different sizes for specific breakpoints.
+
+See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
 
-## Viewport Based
+### Viewport Based
 
-There is the possibility to set the width and height relative to the viewport.
+There is the possibility to set the width and height as a percentage relative to the viewport. Available percentages: `25`, `33`, `50`, `66`, `75`, `100`.
 
 > - `min-vh-100`
 > - `min-vw-100`
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
index e747d1f7da..3413b40b27 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
@@ -1,7 +1,21 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/variables/sizing' as tokens;
 
 :export {
-  @each $key, $value in post.$post-sizes {
-    #{$key}: #{$value};
+  @each $key, $value in tokens.$post-percentage-sizes {
+    pcsizes_#{$key}: #{$value};
+  }
+  @each $key, $value in tokens.$post-px-sizes {
+    pxsizes_#{$key}: #{$value};
+  }
+  @each $breakpoint in post.$grid-breakpoints-list {
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
   }
 }
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
new file mode 100644
index 0000000000..be6d562b5c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './sizing.styles.scss';
+import meta from './sizing.stories';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+const samples = [
+  { w: 'third', h: 'full', maxW: 'third', minW: 'full', maxH: 'half', minH: 'two-thirds' },
+  { w: 'quarter', h: 'half', maxW: 'quarter', minW: 'half', maxH: 'full', minH: 'quarter' },
+  { w: 'half', h: 'quarter', maxW: 'half', minW: 'quarter', maxH: 'two-thirds', minH: 'third' },
+  {
+    w: 'three-quarters',
+    h: 'quarter',
+    maxW: 'three-quarters',
+    minW: 'three-quarters',
+    maxH: 'quarter',
+    minH: 'half',
+  },
+  { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' },
+];
+
+const vpSamples = [
+  { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' },
+  { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' },
+  { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' },
+  {
+    w: '75',
+    h: '25',
+    maxvW: '75',
+    minvW: '25',
+    maxvH: '50',
+    minvH: '25',
+  },
+  { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' },
+];
+
+const pxSamples = [
+  { w: '12', h: '18', maxW: '33', minW: '12', maxH: '48', minH: '22' },
+  { w: '24', h: '36', maxW: '32', minW: '20', maxH: '40', minH: '24' },
+  { w: '40', h: '56', maxW: '48', minW: '24', maxH: '56', minH: '32' },
+  { w: '28', h: '64', maxW: '80', minW: '56', maxH: '96', minH: '36' },
+  { w: '96', h: '48', maxW: '100', minW: '40', maxH: '112', minH: '48' },
+  { w: '64', h: '56', maxW: '80', minW: '32', maxH: '78', minH: '64' },
+  { w: '20', h: '15', maxW: '22', minW: '12', maxH: '32', minH: '18' },
+  { w: '32', h: '22', maxW: '40', minW: '24', maxH: '36', minH: '20' },
+  { w: '78', h: '96', maxW: '80', minW: '40', maxH: '112', minH: '56' },
+  { w: '48', h: '80', maxW: '96', minW: '50', maxH: '112', minH: '56' },
+  { w: '80', h: '96', maxW: '112', minW: '64', maxH: '100', minH: '36' },
+];
+function generateClassNames(sample: Record<string, string>, isViewport = false) {
+  const prefix = isViewport ? 'v' : '';
+
+  const classNames = ['content'];
+
+  classNames.push(prefix + 'h-' + sample.h);
+  classNames.push(prefix + 'w-' + sample.w);
+
+  if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') {
+    classNames.push('max-vh-' + sample['max' + prefix + 'H']);
+  }
+
+  if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') {
+    classNames.push('max-vw-' + sample['max' + prefix + 'W']);
+  }
+
+  if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') {
+    classNames.push('min-vh-' + sample['min' + prefix + 'H']);
+  }
+
+  if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') {
+    classNames.push('min-vw-' + sample['min' + prefix + 'W']);
+  }
+
+  return classNames.filter(Boolean).join(' ');
+}
+
+export const PercentageSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${samples.map(sample => {
+            return html`<div class="sizing-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })};
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PercentageVpSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          <div class="grid">
+            ${vpSamples.map(sample => {
+              return html`
+                <div class="grid-item">
+                  <div class="sizing-example snapshot">
+                    <div class="${generateClassNames(sample, true)}"></div>
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PixelSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${pxSamples.map(sample => {
+            return html`<div class="sizing-px-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })}
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index 38558d2899..f28ebe9daa 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -1,14 +1,14 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit';
-import './sizing.styles.scss';
-import scss from './sizing.module.scss';
+import sizing from './sizing.module.scss';
+import { parse } from '@/utils/sass-export';
 import { MetaExtended } from '@root/types';
+import './sizing.styles.scss';
+import { camelToKebabCase } from '@/utils/naming';
 
-export const SCSS_VARIABLES = scss;
-
-const sizingOptions = ['auto', ...Object.keys(SCSS_VARIABLES)];
-
-const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
+const sizes: Record<string, string> = parse(sizing);
+const percentageSizes = Object.keys(sizes.pcsizes);
+const pixelSizes = Object.keys(sizes.pxsizes);
 
 const meta: MetaExtended = {
   render: renderSizing,
@@ -18,45 +18,25 @@ const meta: MetaExtended = {
     badges: [],
   },
   args: {
-    height: 'bigger-giant',
-    width: 'bigger-giant',
-    maxHeight: 'null',
-    maxWidth: 'null',
+    height: 'none',
+    width: 'none',
+    maxHeight: 'none',
+    maxWidth: 'none',
+    minHeight: 'none',
+    minWidth: 'none',
   },
-  argTypes: {
-    height: {
-      name: 'height',
-      description: 'Set the height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    width: {
-      name: 'width',
-      description: 'Set the width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    maxHeight: {
-      name: 'max-height',
-      description: 'Set the maximum height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
-    },
-    maxWidth: {
-      name: 'max-width',
-      description: 'Set the maximum width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`
+        <div class="sizing-example">
+          <div class="h-112">
+            ${story(context.args, context)}
+          </div>
+        </div>
+      `;
+      return storyTemplate;
     },
-  },
+  ],
 };
 
 export default meta;
@@ -64,33 +44,73 @@ export default meta;
 type Story = StoryObj;
 
 function renderSizing(args: Args) {
-  const maximumHeight = args.maxHeight && args.maxHeight !== 'null' ? `mh-${args.maxHeight}` : '';
-  const maximumWidth = args.maxWidth && args.maxWidth !== 'null' ? `mw-${args.maxWidth}` : '';
-  const classes = `content h-${args.height} w-${args.width} ${maximumHeight} ${maximumWidth}`;
+  const classNames = [
+    `content`,
+    `h-${args.height}`,
+    `w-${args.width}`,
+    args.maxHeight && args.maxHeight !== 'none' ? `max-h-${args.maxHeight}` : '',
+    args.maxWidth && args.maxWidth !== 'none' ? `max-w-${args.maxWidth}` : '',
+    args.minHeight && args.minHeight !== 'none' ? `min-h-${args.minHeight}` : '',
+    args.minWidth && args.minWidth !== 'none' ? `min-w-${args.minWidth}` : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
-  return html`
-    <div class="sizing-example">
-      <div class="d-flex p-16 gap-16" style="height: 150px">
-        <div class="flex-fill">
-          <div class="${classes}"></div>
-        </div>
-      </div>
-    </div>
-  `;
+  return html`<div class="${classNames}"></div>`;
 }
 
-export const Sizes: Story = {};
-export const SizesPercent: Story = {
+const pcArgTypes = [
+  { name: 'height', category: 'Height', options: percentageSizes },
+  { name: 'width', category: 'Width', options: percentageSizes },
+  { name: 'maxHeight', category: 'Height', options: percentageSizes },
+  { name: 'maxWidth', category: 'Width', options: percentageSizes },
+  { name: 'minHeight', category: 'Height', options: percentageSizes },
+  { name: 'minWidth', category: 'Width', options: percentageSizes },
+];
+
+export const PercentSizes: Story = {
   args: {
-    width: '25',
-    height: '100',
+    width: 'quarter',
+    height: 'full',
   },
-  argTypes: {
-    height: {
-      options: sizeOptionsPercent,
-    },
-    width: {
-      options: sizeOptionsPercent,
-    },
+  argTypes: Object.fromEntries(
+    pcArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
+};
+
+const pxArgTypes = [
+  { name: 'height', category: 'Height', options: pixelSizes },
+  { name: 'width', category: 'Width', options: pixelSizes },
+  { name: 'maxHeight', category: 'Height', options: pixelSizes },
+  { name: 'maxWidth', category: 'Width', options: pixelSizes },
+  { name: 'minHeight', category: 'Height', options: pixelSizes },
+  { name: 'minWidth', category: 'Width', options: pixelSizes },
+];
+
+export const PxSizes: Story = {
+  args: {
+    width: '100',
+    height: '80',
   },
+  argTypes: Object.fromEntries(
+    pxArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
index 6d46035c47..84f5536836 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
@@ -2,7 +2,35 @@
 
 .sizing-example {
   .content {
-    background-color: post.$white;
+    background-color: post.$gray-40;
+  }
+
+  .grid-item {
+    width: 20vw;
+    height: 20vw;
     border: 1px solid post.$gray-40;
+
+    div {
+      background-color: post.$gray-40;
+    }
+  }
+}
+
+.sizing-example .grid {
+  display: grid;
+  grid-template-columns: 100vw;
+  grid-template-rows: 100vh;
+  gap: 30px;
+  .grid-item {
+    width: 100vw;
+    height: 100vh;
   }
 }
+
+.sizing-example.snapshot,
+.sizing-px-example.snapshot {
+  display: flex;
+  width: 20vw;
+  height: 20vw;
+  border: 1px solid post.$gray-40 !important;
+}
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 4abdc3b371..6e93e63899 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -47,7 +47,7 @@ function withLegend(template: TemplateResult, ...legendItems: string[]) {
         ${legendItems.map(
           item => html`
             <li class="d-flex align-items-center">
-              <div class="h-regular w-regular me-8 ${item}"></div>
+              <div class="h-16 w-16 me-8 ${item}"></div>
               <span>${item}</span>
             </li>
           `,
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index bc53d3507d..22dabfe4f2 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} />
 
@@ -79,10 +80,6 @@ import SampleColor from './text-color.sample.scss?raw';
 
 #### Possible Values
 
-##### Fixed-size (deprecated)
-
-<TextUtilityAPI values={SCSS_VARIABLES.fixedLineHeights} cssPrefix="lh" scssPrefix="line-height" />
-
 ##### Relative
 
 For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
@@ -97,11 +94,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.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss
index 77d9affad9..a25016a868 100644
--- a/packages/documentation/src/stories/utilities/text/text.module.scss
+++ b/packages/documentation/src/stories/utilities/text/text.module.scss
@@ -6,7 +6,6 @@
   fontSizes: [map.keys(post.$font-sizes)];
   fontWeights: [('light', 'normal', 'bold')];
   fontStyles: [('normal', 'italic')];
-  fixedLineHeights: [map.keys(post.$post-sizes)];
   relativeLineHeights: [('1', 'base', 'sm', 'lg')];
   colors: [map.keys(post.$theme-colors)];
 }
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index c580356f30..2499546b8b 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-half">
       <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-half 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-half">
       <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/documentation/src/utils/naming.ts b/packages/documentation/src/utils/naming.ts
new file mode 100644
index 0000000000..a57c671fae
--- /dev/null
+++ b/packages/documentation/src/utils/naming.ts
@@ -0,0 +1,3 @@
+export function camelToKebabCase(str: string) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
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/migrations/src/utils/constants.ts b/packages/migrations/src/utils/constants.ts
index 1da92da3a0..f2f4d69cf3 100644
--- a/packages/migrations/src/utils/constants.ts
+++ b/packages/migrations/src/utils/constants.ts
@@ -1,6 +1,7 @@
 export const breakpoints = [ 'xs', 'sm', 'rg', 'md', 'lg', 'xl', 'xxl' ];
 
 const bootstrapSizes = [ '0', '1', '2', '3', '4', '5', 'auto' ];
+
 const postSizes = [
   'hair',
   'line',
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..8fe3fd197e 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
@@ -41,7 +41,7 @@ export default function Home() {
       <section className="mt-huge-r">
         <div className="row">
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2146" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Umzug melden</p>
@@ -50,7 +50,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2026" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Shop</p>
@@ -59,7 +59,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="3140" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -70,7 +70,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2456" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -81,7 +81,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1012" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -92,7 +92,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1024" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -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-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
index ef2b905c51..f953e6ad90 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use './variables' as variables;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .p-datatable-wrapper {
   overflow: initial;
@@ -7,7 +11,7 @@
 
 .p-datatable {
   .p-datatable-thead > tr > th {
-    gap: post.$size-mini;
+    gap: tokens.get('utility-gap-8');
   }
 
   .p-sortable-column {
@@ -31,7 +35,7 @@
   }
 
   p-columnfilter {
-    margin-inline: post.$size-mini;
+    margin-inline: tokens.get('utility-gap-8');
     height: 1.5rem;
 
     filtericon {
@@ -123,7 +127,7 @@
 }
 
 .p-button {
-  gap: post.$size-mini;
+  gap: tokens.get('utility-gap-8');
 
   &.p-button-text {
     color: post.$dark;
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/breadcrumb.scss b/packages/styles/src/components/breadcrumb.scss
index 2f821f09e8..2d4a8b4b26 100644
--- a/packages/styles/src/components/breadcrumb.scss
+++ b/packages/styles/src/components/breadcrumb.scss
@@ -10,10 +10,13 @@
 @use './../variables/components/breadcrumbs';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .breadcrumb {
   @extend %font-curve-small;
   flex-wrap: nowrap;
-  height: map.get(spacing.$post-sizes, 'bigger-big');
+  height: tokens.get('utility-gap-40', utilities.$post-spacing);
   overflow: hidden;
   font-weight: type.$font-weight-normal;
   white-space: nowrap;
diff --git a/packages/styles/src/components/button-group.scss b/packages/styles/src/components/button-group.scss
index f8774ffd6d..9179db8931 100644
--- a/packages/styles/src/components/button-group.scss
+++ b/packages/styles/src/components/button-group.scss
@@ -3,16 +3,19 @@
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/button-group' as bg;
 
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/components/button';
 @use './../variables/components/forms';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .btn-group {
   max-width: 100%;
   flex-wrap: wrap;
-  row-gap: spacing.$size-micro;
+  row-gap: tokens.get('utility-gap-4', utilities.$post-spacing);
   padding-inline-start: button.$btn-border-width;
 
   > .btn {
@@ -31,7 +34,7 @@
     background-color: color.$yellow;
     color: color.$black;
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       background-color: Highlight;
     }
   }
@@ -41,5 +44,5 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
-  @include utilities.focus-style('+ .btn');
+  @include utilities-mx.focus-style('+ .btn');
 }
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 955cb52ccc..f04b55dd91 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -57,17 +57,19 @@ tokens.$default-map: components.$post-button;
 
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    border-color: ButtonBorder;
-    background-color: ButtonFace;
-
-    &:not(:disabled, .disabled) {
-      &:hover {
-        border-color: highlight;
+    &[class] {
+      border-color: ButtonBorder;
+      background-color: ButtonFace;
+
+      &:not(:disabled, .disabled) {
+        &:hover {
+          border-color: highlight;
+        }
       }
-    }
 
-    &:disabled {
-      border-color: GrayText !important;
+      &:disabled {
+        border-color: GrayText !important;
+      }
     }
   }
 }
diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
index 049fad2671..9f4cd95c18 100644
--- a/packages/styles/src/components/card-control.scss
+++ b/packages/styles/src/components/card-control.scss
@@ -3,7 +3,11 @@
 @use '../variables/spacing';
 @use '../variables/components/forms';
 @use '../variables/components/form-check';
-@use '../mixins/utilities';
+@use '../mixins/utilities' as utilities-mx;
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statments in this file.
@@ -13,7 +17,7 @@ fieldset {
   .radio-button-card,
   .checkbox-button-card {
     &:not(:last-child) {
-      margin-bottom: spacing.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -29,12 +33,12 @@ fieldset {
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 spacing.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   position: relative;
-  padding: spacing.$size-regular;
+  padding: tokens.get('utility-gap-16');
   width: 100%;
   background-color: var(--post-card-control-bg);
-  border: spacing.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: commons.$border-radius;
   color: var(--post-card-control-color);
   cursor: pointer;
@@ -43,14 +47,14 @@ fieldset {
     grid-area: input;
     position: relative;
     z-index: 2;
-    margin: spacing.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
     cursor: inherit;
     transition: none;
 
-    @include utilities.focus-style-none();
+    @include utilities-mx.focus-style-none();
 
     &:hover:not([disabled]) ~ label {
       color: var(--post-contrast-color);
@@ -69,7 +73,7 @@ fieldset {
 
   label {
     grid-area: label;
-    margin: spacing.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0;
     border-radius: inherit;
     transition: none;
@@ -78,7 +82,7 @@ fieldset {
       display: block;
       content: '';
       position: absolute;
-      inset: spacing.$size-line * -1;
+      inset: calc(tokens.get('utility-gap-2') * -1);
       border-radius: inherit;
     }
 
@@ -100,8 +104,8 @@ fieldset {
 
   post-icon {
     grid-area: icon;
-    width: spacing.$size-big;
-    height: spacing.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
   }
 
@@ -145,18 +149,18 @@ fieldset {
     }
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     --post-card-control-border-color: FieldText;
     --post-card-control-bg: Field;
     --post-card-control-color: FieldText;
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: spacing.$size-line solid Field;
-    outline-offset: spacing.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     input.form-check-input[type] {
-      outline: spacing.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
       background-color: Field !important;
 
       &::after {
@@ -173,7 +177,7 @@ fieldset {
       &:where(:has(input:checked), .checked) {
         --post-card-control-border-color: FieldText;
         --post-card-control-bg: SelectedItem;
-        --post-card-control-color: SelectedItemText;
+        --post-card-control-color: FieldText;
         --post-card-control-input-border-color: FieldText;
 
         input.form-check-input[type] {
@@ -209,7 +213,7 @@ fieldset {
           display: block;
           content: '';
           position: absolute;
-          inset: spacing.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -286,7 +290,7 @@ fieldset {
         --post-card-control-input-bg: transparent;
       }
 
-      @include utilities.high-contrast-mode() {
+      @include utilities-mx.high-contrast-mode() {
         --post-card-control-border-color: FieldText;
         --post-card-control-bg: Field;
         --post-card-control-color: FieldText;
diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss
index c66363159e..5249aefa17 100644
--- a/packages/styles/src/components/card.scss
+++ b/packages/styles/src/components/card.scss
@@ -7,10 +7,15 @@
 @use './../variables/commons';
 @use './../variables/components/card';
 @use './../functions/sizing';
-@use './../mixins/icons' as icons-mixins;
+@use './../mixins/icons' as icons-mx;
 @use './../variables/icons';
 @use './../variables/animation';
 
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .card-group {
   margin-top: commons.$border-width;
   margin-left: commons.$border-width;
@@ -95,15 +100,15 @@
   .product-card &,
   .card-button & {
     @include media-breakpoint-down(sm) {
-      padding: spacing.$size-regular;
+      padding: tokens.get('utility-gap-16');
     }
 
     @include media-breakpoint-between(sm, md) {
-      padding: spacing.$size-large;
+      padding: tokens.get('utility-gap-24');
     }
 
     @include media-breakpoint-up(md) {
-      padding: spacing.$size-big;
+      padding: tokens.get('utility-gap-32');
     }
   }
 
@@ -172,14 +177,14 @@
   a {
     display: inline-flex;
     align-items: center;
-    padding-inline: spacing.$size-mini;
-    gap: spacing.$size-mini;
+    padding-inline: tokens.get('utility-gap-8');
+    gap: tokens.get('utility-gap-8');
     color: color.$gray-60;
     text-decoration: none;
     -ms-flex-align: center;
 
     &::before {
-      @include icons-mixins.icon(3020);
+      @include icons-mx.icon(3020);
       content: '';
       display: inline-block;
       width: icons.$icon-size-default;
diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss
index 11e0c62038..9808a681ba 100644
--- a/packages/styles/src/components/chip.scss
+++ b/packages/styles/src/components/chip.scss
@@ -118,6 +118,10 @@
       color: chip.$chip-hover-color;
       background-color: chip.$chip-hover-bg;
 
+      @include utilities.high-contrast-mode() {
+        border-color: highlight;
+      }
+
       > .badge {
         background-color: chip.$chip-bg;
       }
diff --git a/packages/styles/src/components/datatable.scss b/packages/styles/src/components/datatable.scss
index b6f9d0b598..25a86b09c5 100644
--- a/packages/styles/src/components/datatable.scss
+++ b/packages/styles/src/components/datatable.scss
@@ -7,12 +7,17 @@
 @use './../variables/components/datatable';
 @use './../variables/components/forms';
 
-@use './../mixins/button' as button-mixins;
+@use './../mixins/button' as button-mx;
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .datatable-header-cell {
   padding: datatable.$datatable-cell-padding;
   font-weight: datatable.$datatable-header-font-weight;
@@ -65,9 +70,9 @@
 
 .ngx-datatable .sort-btn {
   flex: 0 0 auto;
-  width: spacing.$size-regular;
-  height: spacing.$size-regular;
-  margin-left: spacing.$size-mini;
+  width: tokens.get('utility-gap-16');
+  height: tokens.get('utility-gap-16');
+  margin-left: tokens.get('utility-gap-8');
 
   &.datatable-icon-sort-unset {
     @include icons-mx.icon(2127);
@@ -96,7 +101,7 @@
   .datatable-button {
     display: flex;
     align-items: center;
-    @include button-mixins.reset-button;
+    @include button-mx.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;
     margin: datatable.$datatable-button-margin;
@@ -120,7 +125,7 @@
   .datatable-row-count-label {
     @extend %font-curve-small;
     flex: 0 0 auto;
-    margin: 0 spacing.$size-mini 0 0;
+    margin: 0 tokens.get('utility-gap-8') 0 0;
   }
 
   .datatable-row-count-input {
@@ -131,7 +136,7 @@
     padding-bottom: 0;
 
     + .datatable-pagination {
-      padding-left: spacing.$size-mini;
+      padding-left: tokens.get('utility-gap-8');
       border-left: datatable.$datatable-footer-separator;
     }
   }
@@ -195,7 +200,7 @@
   }
 }
 
-@include utilities.high-contrast-mode() {
+@include utilities-mx.high-contrast-mode() {
   .ngx-datatable {
     .datatable-header-cell,
     .datatable-body-cell,
@@ -209,8 +214,8 @@
     .datatable-button {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
 
@@ -218,12 +223,12 @@
     &:not(.datatable-spaced-cells) {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }
@@ -233,17 +238,17 @@
     &.datatable-spaced-cells {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
-          border-left: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
+          border-left: tokens.get('utility-gap-2') solid CanvasText;
 
           &:last-child {
-            border-right: spacing.$size-line solid CanvasText;
+            border-right: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }
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/dialog.scss b/packages/styles/src/components/dialog.scss
index 42b4ca2a4b..b241eca883 100644
--- a/packages/styles/src/components/dialog.scss
+++ b/packages/styles/src/components/dialog.scss
@@ -1,11 +1,16 @@
 @use '../mixins/elevation';
-@use '../mixins/utilities';
+@use '../mixins/utilities' as utilities-mx;
 @use '../variables/spacing';
 @use '../variables/color';
 @use '../variables/animation';
 
 @use './../themes/bootstrap/core' as *;
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 dialog {
   @include elevation.elevation('elevation-5');
 
@@ -23,7 +28,7 @@ dialog {
     backdrop-filter: blur(0);
   }
 
-  @include utilities.high-contrast-mode {
+  @include utilities-mx.high-contrast-mode {
     // Show the border in HCM
     border-width: 2px;
 
@@ -72,9 +77,9 @@ dialog {
 }
 
 dialog > .dialog-grid {
-  margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular;
+  margin: tokens.get('utility-gap-16') tokens.get('utility-gap-16') 0 tokens.get('utility-gap-16');
   display: grid;
-  column-gap: spacing.$size-regular;
+  column-gap: tokens.get('utility-gap-16');
   grid-template-columns: auto 1fr auto;
   grid-template-areas:
     'icon header close-button'
@@ -93,14 +98,14 @@ dialog > .dialog-grid {
   grid-area: icon;
   display: block;
 
-  width: spacing.$size-big;
-  height: spacing.$size-big;
+  width: tokens.get('utility-gap-32');
+  height: tokens.get('utility-gap-32');
 
   // Larger icon for bigger notification dialogs
   dialog:not([size='small']) & {
     @include media-breakpoint-up(sm) {
-      width: spacing.$size-small-huge;
-      height: spacing.$size-small-huge;
+      width: tokens.get('utility-gap-48');
+      height: tokens.get('utility-gap-48');
     }
   }
 }
@@ -123,11 +128,11 @@ dialog > .dialog-grid {
   grid-area: controls;
   position: sticky;
   bottom: 0;
-  padding-block: spacing.$size-regular;
+  padding-block: tokens.get('utility-gap-16');
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
-  gap: spacing.$size-regular;
+  gap: tokens.get('utility-gap-16');
   background-color: inherit;
 
   button {
@@ -141,8 +146,8 @@ dialog > .dialog-grid {
   position: sticky;
   top: 0;
   grid-area: close-button;
-  width: spacing.$size-large;
-  height: spacing.$size-large;
+  width: tokens.get('utility-gap-24');
+  height: tokens.get('utility-gap-24');
   min-height: 0;
 }
 
diff --git a/packages/styles/src/components/dropdown.scss b/packages/styles/src/components/dropdown.scss
index 4e0499438f..5656e61fc3 100644
--- a/packages/styles/src/components/dropdown.scss
+++ b/packages/styles/src/components/dropdown.scss
@@ -7,7 +7,12 @@
 @use './../variables/icons';
 @use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 %toggler-icon {
   content: '';
@@ -40,12 +45,12 @@
     margin: 0.25rem 0;
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     .dropdown-item {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
   }
diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss
index c51862336e..8bbdcfc27e 100644
--- a/packages/styles/src/components/form-input.scss
+++ b/packages/styles/src/components/form-input.scss
@@ -192,13 +192,7 @@ input.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ input.form-control[disabled]) {
diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss
index 692f4b847a..5992098b6a 100644
--- a/packages/styles/src/components/form-range.scss
+++ b/packages/styles/src/components/form-range.scss
@@ -7,21 +7,23 @@
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/components/forms';
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+@use '../functions/tokens';
+@use '../tokens/utilities';
 
 $track-height: 4px;
 $webkit-progress-height-adjustment: 2px;
 $webkit-thumb-width: 32px;
 
 .form-range-wrapper {
-  @include utilities.focus-style {
+  @include utilities-mx.focus-style {
     border-radius: commons.$border-radius;
   }
 }
 
 :not(.form-range-wrapper) > {
   .form-range {
-    @include utilities.focus-style {
+    @include utilities-mx.focus-style {
       border-radius: commons.$border-radius;
     }
   }
@@ -90,7 +92,7 @@ $webkit-thumb-width: 32px;
       box-shadow: none; // Remove default style
     }
 
-    @include utilities.focus-style-custom('::-moz-range-thumb') {
+    @include utilities-mx.focus-style-custom('::-moz-range-thumb') {
       outline: none;
     }
   }
@@ -114,12 +116,12 @@ $webkit-thumb-width: 32px;
   }
 
   + .form-hint {
-    margin-top: spacing.$size-regular;
+    margin-top: tokens.get('utility-gap-16', utilities.$post-spacing);
     transform: translateY(#{-0.5 * forms.$form-range-height});
   }
 }
 
-@include utilities.high-contrast-mode() {
+@include utilities-mx.high-contrast-mode() {
   .form-range {
     // linear-gradient is forced to the value of "none" in forced-color mode
     // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
diff --git a/packages/styles/src/components/form-search-input.scss b/packages/styles/src/components/form-search-input.scss
index f852b09a3c..8a0de94436 100644
--- a/packages/styles/src/components/form-search-input.scss
+++ b/packages/styles/src/components/form-search-input.scss
@@ -42,6 +42,9 @@ tokens.$default-map: components.$post-search-input;
     .search-button {
       post-icon {
         color: tokens.get('input-color-hover-fg', components.$post-text-input);
+        @include utilities.high-contrast-mode() {
+          color: Highlight;
+        }
       }
     }
   }
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index b557ef2570..050c60efc5 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -1,10 +1,12 @@
 @forward './../variables/options';
 
 @use './../mixins/utilities';
-@use './../mixins/forms';
+@use './../functions/forms' as forms-fx;
+@use './../mixins/forms' as forms-mx;
 @use './../functions/tokens';
 @use './../tokens/components';
 @use './../tokens/elements';
+@use './../variables/components/forms';
 
 tokens.$default-map: components.$post-select;
 
@@ -26,7 +28,7 @@ tokens.$default-map: components.$post-select;
   border-color: tokens.get('select-color-enabled-border');
   border-radius: tokens.get('select-border-radius');
   color: tokens.get('select-color-enabled-fg');
-  @include forms.select-bg-image('enabled');
+  background-image: forms-fx.select-arrow-icon('enabled');
 
   &:disabled {
     opacity: 1;
@@ -36,7 +38,7 @@ tokens.$default-map: components.$post-select;
     border-style: tokens.get('select-border-style-disabled');
 
     &:not([multiple]) {
-      @include forms.select-bg-image('disabled');
+      background-image: forms-fx.select-arrow-icon('disabled');
     }
   }
 
@@ -45,7 +47,7 @@ tokens.$default-map: components.$post-select;
       background-color: tokens.get('select-color-selected-bg');
       color: tokens.get('select-color-selected-fg');
       border-color: tokens.get('select-color-selected-border');
-      @include forms.select-bg-image('selected');
+      background-image: forms-fx.select-arrow-icon('selected');
 
       @include utilities.focus-style;
 
@@ -60,7 +62,7 @@ tokens.$default-map: components.$post-select;
       border-color: tokens.get('select-color-hover-border');
 
       &:not([multiple]) {
-        @include forms.select-bg-image('hover');
+        background-image: forms-fx.select-arrow-icon('hover');
       }
 
       @include utilities.high-contrast-mode {
@@ -90,29 +92,53 @@ tokens.$default-map: components.$post-select;
   }
 
   &.is-valid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'valid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$valid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'valid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$valid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'valid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$valid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333');
       }
     }
   }
 
   &.is-invalid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'invalid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$invalid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'invalid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$invalid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'invalid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$invalid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333');
       }
     }
   }
@@ -126,13 +152,7 @@ tokens.$default-map: components.$post-select;
       background-position: center right tokens.get('select-validation-icon-position-inline-end');
     }
 
-    &.is-valid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'valid');
-    }
-
-    &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'invalid');
-    }
+    @include forms-mx.validation-icons();
   }
 }
 
@@ -224,43 +244,43 @@ tokens.$default-map: components.$post-select;
 
 [data-color-scheme='dark'] {
   .form-select:not([multiple]) {
-    @include forms.select-bg-image('enabled', null, 'dark');
+    background-image: forms-fx.select-arrow-icon('enabled', 'dark');
 
     &:disabled {
-      @include forms.select-bg-image('disabled', null, 'dark');
+      background-image: forms-fx.select-arrow-icon('disabled', 'dark');
     }
 
     &:not(:disabled) {
       &:focus {
-        @include forms.select-bg-image('selected', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark');
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark');
       }
     }
 
     &.is-valid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'valid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$valid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$valid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$valid-icon;
       }
     }
 
     &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'invalid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$invalid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$invalid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon;
       }
     }
   }
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index bec86c5fad..2f54dbed56 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -86,13 +86,7 @@ textarea.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ textarea.form-control[disabled]) {
diff --git a/packages/styles/src/components/globals/post-footer.scss b/packages/styles/src/components/globals/post-footer.scss
index 087415d8ab..47eb5033a5 100644
--- a/packages/styles/src/components/globals/post-footer.scss
+++ b/packages/styles/src/components/globals/post-footer.scss
@@ -1,6 +1,7 @@
 @use '../../variables/color';
 @use '../../mixins/media';
 @use '../../mixins/list';
+@use '../../mixins/utilities';
 
 post-footer {
   // mobile
@@ -37,6 +38,24 @@ post-footer {
     &:not(.btn-icon, .app-store-badge) {
       display: block;
       text-decoration: none;
+
+      &:hover {
+        @include utilities.high-contrast-mode() {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &.btn-icon {
+      @include utilities.high-contrast-mode() {
+        color: CanvasText !important;
+      }
+
+      &:hover {
+        @include utilities.high-contrast-mode() {
+          color: LinkText !important;
+        }
+      }
     }
   }
 
diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
index 8cf04ff0c1..1b0dbfcb30 100644
--- a/packages/styles/src/components/icon-close-button.scss
+++ b/packages/styles/src/components/icon-close-button.scss
@@ -15,6 +15,14 @@ tokens.$default-map: components.$post-close;
   background-color: tokens.get('close-enabled-bg');
   color: tokens.get('close-enabled-fg');
 
+  &:hover {
+    > post-icon {
+      @include utilities.high-contrast-mode() {
+        color: Highlight;
+      }
+    }
+  }
+
   > post-icon {
     min-width: tokens.get('close-icon-size');
     width: tokens.get('close-icon-size');
diff --git a/packages/styles/src/components/intranet-header/_language-chooser.scss b/packages/styles/src/components/intranet-header/_language-chooser.scss
index 173f937b8a..fe15311c2f 100644
--- a/packages/styles/src/components/intranet-header/_language-chooser.scss
+++ b/packages/styles/src/components/intranet-header/_language-chooser.scss
@@ -2,7 +2,8 @@
 @use './../../variables/spacing';
 @use './../../variables/commons';
 
-@use './../../mixins/icons' as icon-mixin;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
 #languageParent {
   min-width: 18rem;
@@ -14,7 +15,7 @@
 
     .dropdown-item {
       flex: auto 1 1;
-      padding: spacing.$size-small-regular 0;
+      padding: tokens.get('utility-gap-12', utilities.$post-spacing) 0;
       border: commons.$border-width solid color.$gray-20;
       border-top: 0;
       border-left: 0;
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index 48fcb3ace6..68289de487 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -1,10 +1,14 @@
-@use './../../mixins/utilities';
+@use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
 @use './../../variables/commons';
 @use './../../variables/spacing';
 @use './../../variables/components/intranet-header';
 
 @use './../../themes/bootstrap/core' as *;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Sidebar
 #sidebar {
@@ -14,6 +18,7 @@
   top: 0;
   bottom: 0;
   left: 0;
+  background-color: color.$light;
 
   flex: 1 0 auto;
   flex-direction: column;
@@ -27,7 +32,7 @@
       background: none;
       border: 0;
 
-      @include utilities.focus-style {
+      @include utilities-mx.focus-style {
         border-radius: commons.$border-radius;
       }
     }
@@ -49,13 +54,13 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$size-mini;
-      padding-left: spacing.$size-regular;
+      padding: tokens.get('utility-gap-8');
+      padding-left: tokens.get('utility-gap-16');
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
       button {
-        padding: spacing.$size-mini;
+        padding: tokens.get('utility-gap-8');
       }
 
       &:hover,
@@ -92,6 +97,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/modal.scss b/packages/styles/src/components/modal.scss
index e918313797..d1e2a2ea05 100644
--- a/packages/styles/src/components/modal.scss
+++ b/packages/styles/src/components/modal.scss
@@ -44,7 +44,7 @@ post-ngb-modal-content {
 @include media-breakpoint-up(sm) {
   post-ngb-modal-content {
     // prevents the modal from exceeding the height of the screen
-    max-height: calc(100vh - #{2 * modal.$modal-dialog-margin-y-sm-up});
+    max-height: calc(100vh - (2 * modal.$modal-dialog-margin-y-sm-up));
   }
 
   // Right and left margins are set to "auto" from the sm breakpoint
@@ -58,7 +58,7 @@ post-ngb-modal-content {
 @include media-breakpoint-down(sm) {
   post-ngb-modal-content {
     // make the modal cover the full height available on small screens
-    height: calc(100vh - #{2 * modal.$modal-dialog-margin});
+    height: calc(100vh - (2 * modal.$modal-dialog-margin));
   }
 
   .modal-body,
diff --git a/packages/styles/src/components/pagination.scss b/packages/styles/src/components/pagination.scss
index 56309a1682..44b9b19b30 100644
--- a/packages/styles/src/components/pagination.scss
+++ b/packages/styles/src/components/pagination.scss
@@ -5,8 +5,11 @@
 @use './../variables/spacing';
 @use './../variables/commons';
 @use './../variables/icons';
-@use './../mixins/icons' as icon-mixin;
-@use './../mixins/utilities';
+@use './../mixins/icons' as icon-mx;
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
 
 .pagination {
   .page-item {
@@ -24,12 +27,12 @@
       text-align: center;
       text-decoration: none;
 
-      @include utilities.high-contrast-mode() {
+      @include utilities-mx.high-contrast-mode() {
         &:focus,
         &:focus-within,
         &:focus-visible {
           border-radius: commons.$border-radius;
-          outline: spacing.$size-line solid highlight;
+          outline: tokens.get('utility-gap-2', utilities.$post-spacing) solid highlight;
         }
       }
 
@@ -48,14 +51,14 @@
       &[aria-label='Previous'],
       &[aria-label='Next'] {
         > span {
-          @include icon-mixin.icon(2110);
+          @include icon-mx.icon(2110);
         }
       }
 
       &[aria-label='First'],
       &[aria-label='Last'] {
         > span {
-          @include icon-mixin.icon(2396);
+          @include icon-mx.icon(2396);
         }
       }
 
@@ -79,7 +82,7 @@
       color: pagination.$pagination-active-color;
     }
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       &.active > .page-link {
         background-color: Highlight;
       }
diff --git a/packages/styles/src/components/product-card.scss b/packages/styles/src/components/product-card.scss
index 2cc7536983..35a8b34005 100644
--- a/packages/styles/src/components/product-card.scss
+++ b/packages/styles/src/components/product-card.scss
@@ -9,7 +9,12 @@
 @use './../variables/breakpoints';
 @use './../variables/components/card';
 @use './../functions/sizing';
-@use './../mixins/size' as size-mixin;
+@use './../mixins/media';
+
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .product-navigation {
   display: flex;
@@ -57,7 +62,11 @@
   }
 
   .card-body {
-    @include size-mixin.responsive-size(regular);
+    padding: tokens.get('utility-gap-16');
+
+    @include media.min(md) {
+      padding: tokens.get('utility-gap-24');
+    }
   }
 
   .post-card-favourit {
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 228e836d8e..4e51471f45 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -3,33 +3,16 @@
 @use 'sass:map';
 @use './../themes/bootstrap/core' as *;
 @use './../variables/spacing';
+@use './../variables/sizing';
 @use './../variables/breakpoints';
 @use './../mixins/utilities';
 
-// Post sizes
-@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
-
-    @each $prop,
-      $abbrev
-        in (/* Deprecated */ line-height: lh, height: h, max-height: mh, width: w, max-width: mw)
-    {
-      @each $size, $length in spacing.$post-sizes {
-        .#{$abbrev}#{$infix}-#{$size} {
-          #{$prop}: $length !important;
-        }
-      }
-    }
-  }
-}
-
 // Post breakpoints width - e.g. w-sm-100
 @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     @if $breakpoint != 'xs' {
       @each $prop, $abbrev in (width: w) {
-        @each $size, $length in spacing.$sizes {
+        @each $size, $length in sizing.$post-percentage-sizes {
           .#{$abbrev}-#{$breakpoint}-#{$size} {
             #{$prop}: $length !important;
           }
@@ -38,48 +21,3 @@
     }
   }
 }
-
-// Generate responsive spacing utility classes, a lot of them
-$cache: ();
-
-@each $breakpoint-key, $breakpoint-value in breakpoints.$grid-breakpoints {
-  @if ($breakpoint-key == 'xs') {
-    @each $curve-name, $curve-sizes in spacing.$size-curves {
-      $value: map.get($curve-sizes, $breakpoint-key);
-
-      @each $classname, $property in spacing.$responsive-spacing-properties {
-        $cache: map.set($cache, $classname + $curve-name, $value);
-        @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
-      }
-    }
-  } @else {
-    // Media queries create a scope, upstream variables become read-only and updating the $cache
-    // is impossible from within the media query. Therefore we first compile a stack of utility
-    // classes to compile, and then compile them. With caching, we're able to skip 370 utility
-    // classes from being written (765 vs. 2248 lines of code unminified)
-
-    $stack: ();
-
-    @each $curve-name, $curve-sizes in spacing.$size-curves {
-      $value: map.get($curve-sizes, $breakpoint-key);
-
-      @each $classname, $property in spacing.$responsive-spacing-properties {
-        @if (map.get($cache, $classname + $curve-name) != $value) {
-          $stack: map.set($stack, $classname, $curve-name, $property, $value);
-          $cache: map.set($cache, $classname + $curve-name, $value);
-        }
-      }
-    }
-
-    // Render the stack
-    @include media-breakpoint-up($breakpoint-key) {
-      @each $classname, $class-map in $stack {
-        @each $curve-name, $curve-map in $class-map {
-          @each $property, $value in $curve-map {
-            @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss
index 53159b2d6c..07e4653ae0 100644
--- a/packages/styles/src/components/stepper.scss
+++ b/packages/styles/src/components/stepper.scss
@@ -1,18 +1,29 @@
-@use 'sass:math';
-
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/size' as size-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 
 @use './../variables/color';
 @use './../variables/commons';
 @use './../variables/components/stepper';
 
 @use './../themes/bootstrap/core' as *;
+@use './../mixins/media';
+
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // for backward compatibility
 .stepper-container {
-  @include size-mx.responsive-size('big', 'margin-bottom');
+  margin-bottom: tokens.get('utility-gap-20');
+
+  @include media.min(md) {
+    margin-bottom: tokens.get('utility-gap-32');
+  }
+
+  @include media.min(xl) {
+    margin-bottom: tokens.get('utility-gap-40');
+  }
 
   > .stepper-bar {
     display: none;
@@ -20,7 +31,7 @@
 }
 
 .stepper {
-  @include utilities.reset-list;
+  @include utilities-mx.reset-list;
   // start a counter for the step numbers
   counter-reset: step-index;
 
@@ -29,13 +40,13 @@
   overflow: hidden;
 
   // the first column is half a step wide to make sure the separators are the same size even on small screens
-  grid-template-columns: math.div(stepper.$stepper-indicator-size, 2);
+  grid-template-columns: calc(stepper.$stepper-indicator-size / 2);
 
   // all other columns are 1 fraction of the available space ase we don't know the number of steps
   grid-auto-columns: minmax(0, 1fr);
 
   // we use a padding and negative margin on the last step for the same reason we need the first column
-  padding-inline-end: math.div(stepper.$stepper-indicator-size, 2);
+  padding-inline-end: calc(stepper.$stepper-indicator-size / 2);
 }
 
 .stepper-item {
@@ -44,11 +55,11 @@
   padding-inline-start: 0;
 
   &:not(:first-child) {
-    padding-inline-start: math.div(stepper.$stepper-link-spacing, 2);
+    padding-inline-start: calc(stepper.$stepper-link-spacing / 2);
   }
 
   &:not(:last-child) {
-    padding-inline-end: math.div(stepper.$stepper-link-spacing, 2);
+    padding-inline-end: calc(stepper.$stepper-link-spacing / 2);
     grid-column: span 2;
   }
 
@@ -58,7 +69,7 @@
     content: '';
     display: block;
     position: absolute;
-    inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2);
+    inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
     height: stepper.$stepper-bar-height;
     background-color: stepper.$stepper-bar-color;
     inset-inline: 0;
@@ -109,7 +120,9 @@
 
   .stepper-item:last-child > & {
     margin-inline-start: auto;
-    margin-inline-end: -1 * math.div(stepper.$stepper-indicator-size, 2); // negative margin matching the container padding
+    margin-inline-end: calc(
+      stepper.$stepper-indicator-size / -2
+    ); // negative margin matching the container padding
     text-align: end;
   }
 
@@ -162,7 +175,7 @@
   @include icons-mx.icon(2105);
   display: block;
   position: absolute;
-  top: math.div((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), 2);
+  top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
   z-index: 1;
   height: stepper.$stepper-indicator-check-icon-size;
   width: stepper.$stepper-indicator-check-icon-size;
@@ -170,21 +183,17 @@
   color: stepper.$stepper-indicator-color;
 
   .stepper-item:first-child > & {
-    left: math.div(
-      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
-      2
+    left: calc(
+      (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2
     );
   }
 
   .stepper-item:not(:first-child, :last-child) > & {
-    left: calc(50% - #{math.div(stepper.$stepper-indicator-check-icon-size, 2)});
+    left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2));
   }
 
   .stepper-item:last-child > & {
-    right: math.div(
-      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
-      2
-    );
+    right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
   }
 
   // show only for completed steps
@@ -195,11 +204,11 @@
 
 // hover/focus state
 .stepper-link:is(a[href]) {
-  @include utilities.focus-style {
+  @include utilities-mx.focus-style {
     border-radius: commons.$border-radius;
   }
 
-  @include utilities.focus-hover-style-custom() {
+  @include utilities-mx.focus-hover-style-custom() {
     color: stepper.$stepper-link-color;
 
     .stepper-item[aria-current='step'] > & {
@@ -238,10 +247,7 @@
     // progress bar
     &::before {
       grid-row: -1;
-      margin-block-start: math.div(
-        (stepper.$stepper-indicator-size - stepper.$stepper-bar-height),
-        2
-      );
+      margin-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
       position: static;
     }
 
@@ -291,7 +297,7 @@
   }
 }
 
-@include utilities.high-contrast-mode {
+@include utilities-mx.high-contrast-mode {
   .stepper-item {
     &::before,
     &::after {
@@ -332,7 +338,7 @@
 
   .stepper-link:is(a[href]) {
     .stepper-item[aria-current='step'] > & {
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           border-color: Highlight;
         }
@@ -344,7 +350,7 @@
         color: Canvas;
       }
 
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           background-color: Highlight;
           color: HighlightText;
@@ -357,7 +363,7 @@
         background-color: LinkText;
       }
 
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           background-color: Highlight;
         }
diff --git a/packages/styles/src/components/subnavigation.scss b/packages/styles/src/components/subnavigation.scss
index 7db696a807..0f02c20ed9 100644
--- a/packages/styles/src/components/subnavigation.scss
+++ b/packages/styles/src/components/subnavigation.scss
@@ -2,13 +2,18 @@
 
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins/utilities';
-@use './../functions/utilities' as utility-functions;
+@use './../mixins/utilities' as utilities-mx;
+@use './../functions/utilities' as utilities-fx;
 @use './../variables/components/subnavigation';
 @use './../variables/animation';
 @use './../variables/spacing';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 $module-name: 'subnavigation';
 
 .#{$module-name} {
@@ -16,11 +21,11 @@ $module-name: 'subnavigation';
   background-color: subnavigation.$subnavigation-background-color;
 
   &::after {
-    @include utilities.full-width-underscore(
+    @include utilities-mx.full-width-underscore(
       subnavigation.$subnavigation-border-bottom-color,
       subnavigation.$subnavigation-border-bottom-width
     );
-    z-index: utility-functions.z-index(subnavigation, underscore-root);
+    z-index: utilities-fx.z-index(subnavigation, underscore-root);
   }
 
   &-alternate {
@@ -69,11 +74,11 @@ $module-name: 'subnavigation';
       padding: subnavigation.$subnavigation-link-padding-lg;
     }
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-micro);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-4') * -1);
       }
     }
 
@@ -90,11 +95,11 @@ $module-name: 'subnavigation';
     }
 
     &:not(.active)::after {
-      @include utilities.full-width-underscore(
+      @include utilities-mx.full-width-underscore(
         #{subnavigation.$subnavigation-link-underscore-color-hover},
         #{subnavigation.$subnavigation-link-underscore-height}
       );
-      z-index: utility-functions.z-index(subnavigation, underscore-link);
+      z-index: utilities-fx.z-index(subnavigation, underscore-link);
       right: animation.$transition-distance-medium;
       left: animation.$transition-distance-medium;
       opacity: 0;
@@ -116,16 +121,16 @@ $module-name: 'subnavigation';
       font-weight: $font-weight-bold;
 
       &::after {
-        @include utilities.full-width-underscore(
+        @include utilities-mx.full-width-underscore(
           #{subnavigation.$subnavigation-link-underscore-color-active},
           #{subnavigation.$subnavigation-link-underscore-height}
         );
-        z-index: utility-functions.z-index(subnavigation, underscore-link);
+        z-index: utilities-fx.z-index(subnavigation, underscore-link);
       }
     }
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     &::after {
       background-color: CanvasText;
     }
diff --git a/packages/styles/src/components/switch.scss b/packages/styles/src/components/switch.scss
index 566afada11..52095498ec 100644
--- a/packages/styles/src/components/switch.scss
+++ b/packages/styles/src/components/switch.scss
@@ -198,6 +198,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
 
   .form-check-label {
     color: tokens.get('switch-text-enabled-fg');
+    padding-block: tokens.get('switch-padding-block-container-text');
 
     &.order-first {
       flex: 0 auto;
diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss
index 835e957bc5..e28d3be958 100644
--- a/packages/styles/src/components/tabs/_tab-title.scss
+++ b/packages/styles/src/components/tabs/_tab-title.scss
@@ -6,6 +6,11 @@
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .tab-title[role='tab'] {
   display: inline-block;
   cursor: pointer;
@@ -69,7 +74,7 @@
       top: 0;
       right: -1px;
       left: -1px;
-      height: spacing.$size-micro;
+      height: tokens.get('utility-gap-4');
       background-color: nav.$nav-tabs-link-active-border-color;
     }
   }
@@ -95,8 +100,8 @@
     &:focus,
     &:focus-within,
     &:focus-visible {
-      outline: spacing.$size-line solid Highlight;
-      outline-offset: -(spacing.$size-micro);
+      outline: tokens.get('utility-gap-2') solid Highlight;
+      outline-offset: calc(tokens.get('utility-gap-4') * -1);
     }
 
     &.active {
@@ -110,45 +115,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/functions/_forms.scss b/packages/styles/src/functions/_forms.scss
index 183f1d7d2f..376831a38a 100644
--- a/packages/styles/src/functions/_forms.scss
+++ b/packages/styles/src/functions/_forms.scss
@@ -1,7 +1,12 @@
-// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
+@use 'sass:map';
+
 @use './color';
 @use '../functions/tokens';
+@use '../functions/icons';
+@use '../functions/utilities';
+@use '../variables/components/forms';
 
+// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
 @function get-background-svg-stroke(
   $type,
   $color,
@@ -25,3 +30,39 @@
     $svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
     $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
 }
+
+@function select-arrow-icon($state: null, $mode: 'light') {
+  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
+  $arrow-color-map: (
+    'enabled-light': #050400,
+    'enabled-dark': #fff,
+    'hover-light': #504f4b,
+    'hover-dark': #fff,
+    'selected-light': #050400,
+    'selected-dark': #fff,
+    'disabled-light': #696864,
+    'disabled-dark': #fff,
+  );
+
+  @if ($state) {
+    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  }
+
+  @return $state;
+}
+
+@function encode-color($color) {
+  @return utilities.replace($color, '#', '%23');
+}
+
+@function valid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color);
+  @return $icon;
+}
+
+@function invalid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color);
+  @return $icon;
+}
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 0854d6adf0..e22b4d2d62 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -2,6 +2,7 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 @use './../functions/icons';
+@use './../functions/forms' as forms-fx;
 @use './../functions/utilities' as utilities-fx;
 
 // Placeholder in input fields
@@ -30,29 +31,31 @@
   }
 }
 
-@mixin select-bg-image($state: null, $validation: null, $mode: 'light') {
-  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
-  $arrow-color-map: (
-    'enabled-light': #050400,
-    'enabled-dark': #fff,
-    'hover-light': #504f4b,
-    'hover-dark': #fff,
-    'selected-light': #050400,
-    'selected-dark': #fff,
-    'disabled-light': #696864,
-    'disabled-dark': #fff,
-  );
+// Used on form elements to set the correct colored validation icon
+@mixin validation-icons() {
+  &.is-valid:not(:disabled) {
+    background-image: forms.$valid-icon;
 
-  @if ($validation == 'valid') {
-    $validation: forms.$valid-icon;
-  } @else if ($validation == 'invalid') {
-    $validation: forms.$invalid-icon;
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.valid-icon('#e0e0e0');
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.valid-icon('#333333');
+    }
   }
 
-  @if ($state) {
-    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  &.is-invalid:not(:disabled) {
+    background-image: forms.$invalid-icon;
+
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.invalid-icon('#e0e0e0');
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.invalid-icon('#333333');
+    }
   }
-  background-image: $state, $validation;
 }
 
 @mixin textarea-resizer-svg($color) {
diff --git a/packages/styles/src/mixins/_index.scss b/packages/styles/src/mixins/_index.scss
index 5db656187d..208705c310 100644
--- a/packages/styles/src/mixins/_index.scss
+++ b/packages/styles/src/mixins/_index.scss
@@ -10,6 +10,5 @@
 @forward 'list';
 @forward 'notification';
 @forward 'scroll-shadows';
-@forward 'size';
 @forward 'type';
 @forward 'utilities';
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index da218f342f..3a191aac10 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -60,7 +60,7 @@ tokens.$default-map: components.$post-banner;
   }
 
   &.no-icon {
-    min-height: calc(2 * #{$padding-y} + close.$close-size);
+    min-height: calc(2 * $padding-y + close.$close-size);
     padding-inline-start: $padding-x;
 
     &::before {
@@ -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/mixins/_size.scss b/packages/styles/src/mixins/_size.scss
deleted file mode 100644
index 51d27bfe0a..0000000000
--- a/packages/styles/src/mixins/_size.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-
-@use './../themes/bootstrap/core' as *;
-
-@use './../variables/spacing';
-@use './../functions/utilities';
-
-@mixin bezel-small() {
-  padding: map.get(spacing.$post-sizes, 'mini') map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-small-regular() {
-  padding: map.get(spacing.$post-sizes, 'small-regular') map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-regular() {
-  padding: map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-bigger-regular() {
-  padding: map.get(spacing.$post-sizes, 'small-large');
-}
-
-@mixin bezel-medium() {
-  padding: map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'large');
-}
-
-@mixin bezel-large() {
-  padding: map.get(spacing.$post-sizes, 'big');
-}
-
-@mixin bezel-big() {
-  padding: map.get(spacing.$post-sizes, 'bigger-big');
-}
-
-/**
- * Generate responsive size properties for things like height, width, margin, padding, etc.
- * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
- * @param $property Property key (height, width, padding, margin, top, etc.)
- * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
- */
-@mixin responsive-size($curve-size: 'regular', $property-key: 'padding', $template: '$value') {
-  $curve: map.get(spacing.$size-curves, $curve-size);
-
-  @if ($curve) {
-    $cache: '';
-
-    @each $key, $value in $curve {
-      @if ($key == 'xs') {
-        #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
-      } @else {
-        // Don't write unnecessary media queries
-        @if ($cache != $value) {
-          @include media-breakpoint-up($key) {
-            #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
-          }
-        }
-      }
-      $cache: $value;
-    }
-  } @else {
-    @warn "@mixin responsive-size: Can't find $curve-size: " + $curve-size;
-  }
-}
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 4eb10fd3a0..910b02a29a 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -70,14 +70,22 @@
   pointer-events: none;
 }
 
-@mixin generate-utility-class($classname, $size, $property, $value) {
-  .#{$classname}-#{$size}-r {
-    #{$property}: $value !important;
+@mixin high-contrast-mode() {
+  @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+    @content;
   }
 }
 
-@mixin high-contrast-mode() {
-  @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
+@mixin high-contrast-mode-dark() {
+  @media (forced-colors: active) and (prefers-color-scheme: dark),
+    (-ms-high-contrast: white-on-black) {
+    @content;
+  }
+}
+
+@mixin high-contrast-mode-light() {
+  @media (forced-colors: active) and (prefers-color-scheme: light),
+    (-ms-high-contrast: black-on-white) {
     @content;
   }
 }
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 0696634c6c..e8d4bde6d1 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,6 +26,17 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'width');
+$utilities: map.remove($utilities, 'height');
+$utilities: map.remove($utilities, 'max-width');
+$utilities: map.remove($utilities, 'max-height');
+$utilities: map.remove($utilities, 'min-width');
+$utilities: map.remove($utilities, 'min-height');
+$utilities: map.remove($utilities, 'viewport-width');
+$utilities: map.remove($utilities, 'viewport-height');
+$utilities: map.remove($utilities, 'min-viewport-width');
+$utilities: map.remove($utilities, 'min-viewport-height');
+
 $utilities: map.remove($utilities, 'flex');
 $utilities: map.remove($utilities, 'flex-direction');
 $utilities: map.remove($utilities, 'align-items');
@@ -34,7 +45,9 @@ $utilities: map.remove($utilities, 'align-self');
 $utilities: map.remove($utilities, 'flex-grow');
 $utilities: map.remove($utilities, 'flex-shrink');
 $utilities: map.remove($utilities, 'flex-wrap');
+
 $utilities: map.remove($utilities, 'order');
+
 $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d09cf091b1..04b78b2890 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -2,6 +2,7 @@
 
 @use './functions' as *;
 
+@use '../variables/sizing' as *;
 /*
   Utilities are generated with our utility API using bellow $utilities map.
 
@@ -28,6 +29,126 @@ $position-values: (
 );
 
 $utilities: (
+  'width': (
+    responsive: true,
+    property: width,
+    class: w,
+    values: $post-combined-sizes,
+  ),
+  'height': (
+    responsive: true,
+    property: height,
+    class: h,
+    values: $post-combined-sizes,
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: max-w,
+    values: $post-combined-sizes,
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: max-h,
+    values: $post-combined-sizes,
+  ),
+  'min-width': (
+    responsive: true,
+    property: min-width,
+    class: min-w,
+    values: $post-combined-sizes,
+  ),
+  'min-height': (
+    responsive: true,
+    property: min-height,
+    class: min-h,
+    values: $post-combined-sizes,
+  ),
+  'viewport-width': (
+    responsive: true,
+    property: width,
+    class: vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'viewport-height': (
+    responsive: true,
+    property: height,
+    class: vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-width': (
+    responsive: true,
+    property: min-width,
+    class: min-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-height': (
+    responsive: true,
+    property: min-height,
+    class: min-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'max-viewport-width': (
+    responsive: true,
+    property: max-width,
+    class: max-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'max-viewport-height': (
+    responsive: true,
+    property: max-height,
+    class: max-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
   'align': (
     property: vertical-align,
     class: align,
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/styles/src/variables/_animation.scss b/packages/styles/src/variables/_animation.scss
index 48df5ee979..42489ca857 100644
--- a/packages/styles/src/variables/_animation.scss
+++ b/packages/styles/src/variables/_animation.scss
@@ -1,5 +1,9 @@
 @use 'sass:map';
 @use './spacing';
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Material Design - Motion Guidelines implementation
 // https://material.io/design/motion/
@@ -42,12 +46,12 @@ $transition-easing-bump-in: linear(
 );
 
 // Distances
-$transition-distance-xsmall: map.get(spacing.$post-sizes, 'micro') !default;
-$transition-distance-small: map.get(spacing.$post-sizes, 'small-regular') !default;
-$transition-distance-medium: map.get(spacing.$post-sizes, 'regular') !default;
-$transition-distance-medium-md: map.get(spacing.$post-sizes, 'big') !default;
-$transition-distance-large: map.get(spacing.$post-sizes, 'huge') !default;
-$transition-distance-large-md: map.get(spacing.$post-sizes, 'giant') !default;
+$transition-distance-xsmall: tokens.get('utility-gap-4') !default;
+$transition-distance-small: tokens.get('utility-gap-12') !default;
+$transition-distance-medium: tokens.get('utility-gap-16') !default;
+$transition-distance-medium-md: tokens.get('utility-gap-32') !default;
+$transition-distance-large: tokens.get('utility-gap-56') !default;
+$transition-distance-large-md: tokens.get('utility-gap-80') !default;
 
 $transition-base-timing: $transition-time-default $transition-easing-default !default;
 $transition-base: all $transition-base-timing !default;
diff --git a/packages/styles/src/variables/_index.scss b/packages/styles/src/variables/_index.scss
index aff8c98c7e..a2a1c02cbc 100644
--- a/packages/styles/src/variables/_index.scss
+++ b/packages/styles/src/variables/_index.scss
@@ -11,5 +11,6 @@
 @forward 'icons';
 @forward 'options';
 @forward 'spacing';
+@forward 'sizing';
 @forward 'type';
 @forward 'components';
diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss
new file mode 100644
index 0000000000..139cde6afa
--- /dev/null
+++ b/packages/styles/src/variables/_sizing.scss
@@ -0,0 +1,69 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
+// Sizing
+//
+// Control the default sizing by modifying these variables.
+
+// Post-Sizes
+$post-px-sizes: () !default;
+$post-px-sizes: map.merge(
+  (
+    '0': tokens.get('post-utility-gap-0'),
+    '1': tokens.get('post-utility-gap-1'),
+    '2': tokens.get('post-utility-gap-2'),
+    '3': tokens.get('post-utility-gap-3'),
+    '4': tokens.get('post-utility-gap-4'),
+    '5': tokens.get('post-utility-gap-5'),
+    '6': tokens.get('post-utility-gap-6'),
+    '8': tokens.get('post-utility-gap-8'),
+    '10': tokens.get('post-utility-gap-10'),
+    '11': tokens.get('post-utility-gap-11'),
+    '12': tokens.get('post-utility-gap-12'),
+    '14': tokens.get('post-utility-gap-14'),
+    '15': tokens.get('post-utility-gap-15'),
+    '16': tokens.get('post-utility-gap-16'),
+    '18': tokens.get('post-utility-gap-18'),
+    '19': tokens.get('post-utility-gap-19'),
+    '20': tokens.get('post-utility-gap-20'),
+    '22': tokens.get('post-utility-gap-22'),
+    '24': tokens.get('post-utility-gap-24'),
+    '26': tokens.get('post-utility-gap-26'),
+    '28': tokens.get('post-utility-gap-28'),
+    '30': tokens.get('post-utility-gap-30'),
+    '32': tokens.get('post-utility-gap-32'),
+    '34': tokens.get('post-utility-gap-34'),
+    '36': tokens.get('post-utility-gap-36'),
+    '40': tokens.get('post-utility-gap-40'),
+    '48': tokens.get('post-utility-gap-48'),
+    '56': tokens.get('post-utility-gap-56'),
+    '64': tokens.get('post-utility-gap-64'),
+    '78': tokens.get('post-utility-gap-78'),
+    '80': tokens.get('post-utility-gap-80'),
+    '96': tokens.get('post-utility-gap-96'),
+    '100': tokens.get('post-utility-gap-100'),
+    '112': tokens.get('post-utility-gap-112'),
+  ),
+  $post-px-sizes
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$post-percentage-sizes: () !default;
+$post-percentage-sizes: map.merge(
+  (
+    'quarter': 25%,
+    'third': 33%,
+    'half': 50%,
+    'two-thirds': 66%,
+    'three-quarters': 75%,
+    'full': 100%,
+    auto: auto,
+  ),
+  $post-percentage-sizes
+);
+
+$post-combined-sizes: map.merge($post-px-sizes, $post-percentage-sizes);
diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss
index 7c7ee7b242..dae648a9a7 100644
--- a/packages/styles/src/variables/_spacing.scss
+++ b/packages/styles/src/variables/_spacing.scss
@@ -16,150 +16,6 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-// Post-Sizes
-$size-hair: 1px !default;
-$size-line: 2px !default;
-$size-micro: 0.25rem !default; //   ~4px
-$size-mini: 0.5rem !default; //   ~8px
-$size-small-regular: 0.75rem !default; //  ~12px
-$size-regular: 1rem !default; //  ~16px
-$size-small-large: 1.25rem !default; //  ~20px
-$size-large: 1.5rem !default; //  ~24px
-$size-big: 2rem !default; //  ~32px
-$size-bigger-big: 2.5rem !default; //  ~40px
-$size-small-huge: 3rem !default; //  ~48px
-$size-huge: 3.5rem !default; //  ~56px
-$size-small-giant: 4.5rem !default; //  ~72px
-$size-giant: 5rem !default; //  ~80px
-$size-bigger-giant: 7rem !default; // ~112px
-
-$post-sizes: () !default;
-$post-sizes: map.merge(
-  (
-    'hair': $size-hair,
-    'line': $size-line,
-    'micro': $size-micro,
-    'mini': $size-mini,
-    'small-regular': $size-small-regular,
-    'regular': $size-regular,
-    'small-large': $size-small-large,
-    'large': $size-large,
-    'big': $size-big,
-    'bigger-big': $size-bigger-big,
-    'small-huge': $size-small-huge,
-    'huge': $size-huge,
-    'small-giant': $size-small-giant,
-    'giant': $size-giant,
-    'bigger-giant': $size-bigger-giant,
-  ),
-  $post-sizes
-);
-
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map.merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto,
-  ),
-  $sizes
-);
-
-// Abstand Gross, Section
-$size-curve-giant: (
-  'xs': $size-huge,
-  'sm': $size-huge,
-  'rg': $size-huge,
-  'md': $size-giant,
-  'lg': $size-giant,
-  'xl': $size-giant,
-) !default;
-
-// Abstand standard
-$size-curve-huge: (
-  'xs': $size-big,
-  'sm': $size-big,
-  'rg': $size-big,
-  'md': $size-bigger-big,
-  'lg': $size-bigger-big,
-  'xl': $size-huge,
-) !default;
-
-// Abstand Section halb
-$size-curve-bigger-big: (
-  'xs': $size-large,
-  'sm': $size-large,
-  'rg': $size-large,
-  'md': $size-small-huge,
-  'lg': $size-small-huge,
-  'xl': $size-small-huge,
-) !default;
-
-// Abstand Breadcrumb, Stepper
-$size-curve-big: (
-  'xs': $size-small-large,
-  'sm': $size-small-large,
-  'rg': $size-small-large,
-  'md': $size-big,
-  'lg': $size-big,
-  'xl': $size-bigger-big,
-) !default;
-
-// H2
-$size-curve-large: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-small-large,
-  'lg': $size-small-large,
-  'xl': $size-big,
-) !default;
-
-// Button
-$size-curve-regular: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-large,
-  'lg': $size-large,
-  'xl': $size-large,
-) !default;
-
-// Teaser
-$size-curve-small: (
-  'xs': $size-small-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-) !default;
-
-// Eingabefelder, p, h3, h4
-$size-curve-tiny: (
-  'xs': $size-small-regular,
-  'sm': $size-small-regular,
-  'rg': $size-small-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-) !default;
-
-// List of all adaptive size curves
-$size-curves: (
-  'giant': $size-curve-giant,
-  'huge': $size-curve-huge,
-  'bigger-big': $size-curve-bigger-big,
-  'big': $size-curve-big,
-  'large': $size-curve-large,
-  'regular': $size-curve-regular,
-  'small': $size-curve-small,
-  'tiny': $size-curve-tiny,
-) !default;
-
 $responsive-spacing-properties: (
   'm': 'margin',
   'mt': 'margin-top',
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index 75272390f1..ce1b609e50 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -6,6 +6,11 @@
 @use './components/paragraph';
 @use './../functions/sizing';
 
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -180,10 +185,10 @@ $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: spacing.$size-micro !default;
-$blockquote-padding-left: spacing.$size-small-regular !default;
-$blockquote-margin-top: spacing.$size-large !default;
-$blockquote-margin-y: spacing.$size-regular !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default;
+$blockquote-padding-left: tokens.get('utility-gap-12') !default;
+$blockquote-margin-top: tokens.get('utility-gap-24') !default;
+$blockquote-margin-y: tokens.get('utility-gap-16') !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;
 
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index d4c5a14145..65f09893d3 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -5,6 +5,10 @@
 
 @use './button';
 @use './../../functions/sizing';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $badge-border-radius: 50rem;
 $badge-line-height: type.$line-height-copy;
@@ -12,12 +16,12 @@ $badge-color: color.$white;
 $badge-bg: color.$error;
 $badge-border: color.$white solid commons.$border-thick;
 
-$badge-height: spacing.$size-large;
-$badge-height-sm: spacing.$size-regular;
-$badge-height-empty: spacing.$size-mini;
+$badge-height: tokens.get('utility-gap-24');
+$badge-height-sm: tokens.get('utility-gap-16');
+$badge-height-empty: tokens.get('utility-gap-8');
 
-$badge-padding-x: spacing.$size-mini;
-$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x: tokens.get('utility-gap-8');
+$badge-padding-x-sm: tokens.get('utility-gap-4');
 $badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
 
 $badge-font-size: type.$font-size-12;
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 1249905b40..4c5c9d6748 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -10,6 +10,7 @@
 
 @use '../../functions/tokens';
 @use '../../tokens/components';
+@use '../../tokens/utilities';
 
 tokens.$default-map: components.$post-button;
 
@@ -60,29 +61,29 @@ $btn-icon-size-map: (
 // Old variables / Used elsewhere than on the v2 button component
 $input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width);
 
-$input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
+$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
+$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; // px value to avoid build errors
 $input-btn-line-height: type.$line-height-copy !default;
 
-$input-btn-padding-y-sm: spacing.$size-micro !default;
-$input-btn-padding-x-sm: spacing.$size-regular !default;
+$input-btn-padding-y-sm: 4px !default; // px value to avoid build errors
+$input-btn-padding-x-sm: 16px !default; // px value to avoid build errors
 
-$input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; // px value to avoid build errors
+$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
 
-$input-btn-padding-y-lg: spacing.$size-small-regular !default;
-$input-btn-padding-x-lg: spacing.$size-regular !default;
+$input-btn-padding-y-lg: 12px !default; // px value to avoid build errors
+$input-btn-padding-x-lg: 16px !default; // px value to avoid build errors
 
 $input-btn-focus-width: 0.125rem !default; // 2px
 $input-btn-focus-color: rgba(color.$gray-80, 0.25) !default;
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $btn-height-sm: 2rem;
-$btn-icon-size-sm: spacing.$size-regular !default;
+$btn-icon-size-sm: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $btn-font-size-rg: type.$font-size-14 !default;
 $btn-icon-size-rg: 1.125rem !default;
 $btn-height-md: 3rem;
-$btn-icon-size-md: spacing.$size-small-large !default;
+$btn-icon-size-md: tokens.get('utility-gap-20', utilities.$post-spacing) !default;
 $btn-icon-size-lg: 1.375rem !default;
 $old-btn-icon-size-map: (
   'sm': $btn-icon-size-sm,
diff --git a/packages/styles/src/variables/components/_card.scss b/packages/styles/src/variables/components/_card.scss
index e8836a87ab..8e4b3aab3b 100644
--- a/packages/styles/src/variables/components/_card.scss
+++ b/packages/styles/src/variables/components/_card.scss
@@ -4,6 +4,10 @@
 @use './../type';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Cards
 $card-font-size: type.$font-size-small !default; // Design System only
@@ -14,8 +18,9 @@ $card-margin-top: sizing.calculate-single-box-shadow-size(
   commons.$box-shadow
 ) !default; // ensures the shadow is visible
 
-$card-spacer-y: spacing.$size-small-large !default; // Design System 20px
-$card-spacer-x: spacing.$size-regular !default; // Design System 16px
+$card-spacer-y: 20px !default; // px value to avoid bootstrap build errors
+$card-spacer-x: tokens.get('utility-gap-16') !default;
+
 $card-border-width: commons.$border-width !default;
 $card-border-radius: commons.$border-width * 2 !default; // Design System
 $card-border-color: color.$gray-20 !default; // Design System
diff --git a/packages/styles/src/variables/components/_chip.scss b/packages/styles/src/variables/components/_chip.scss
index df2c9e4617..aa3ca00459 100644
--- a/packages/styles/src/variables/components/_chip.scss
+++ b/packages/styles/src/variables/components/_chip.scss
@@ -8,6 +8,10 @@
 @use './../type';
 
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $chip-color: color.$gray-80;
 $chip-bg: color.$white;
@@ -17,8 +21,8 @@ $chip-border-radius: commons.$border-radius-pill;
 
 $chip-height: map.get(button.$btn-height-map, 'md');
 $chip-max-width: 100%;
-$chip-padding-x: spacing.$size-regular;
-$chip-gap: spacing.$size-mini;
+$chip-padding-x: tokens.get('utility-gap-16');
+$chip-gap: tokens.get('utility-gap-8');
 
 $chip-font-size: type.$font-size-16;
 $chip-font-weight: type.$font-weight-normal;
@@ -32,7 +36,7 @@ $chip-transition:
 $chip-height-sm: button.$btn-height-sm;
 $chip-gap-sm: sizing.px-to-rem(6px);
 $chip-font-size-sm: type.$font-size-14;
-$chip-padding-x-sm: spacing.$size-small-regular;
+$chip-padding-x-sm: tokens.get('utility-gap-12');
 
 $chip-hover-color: color.$black;
 $chip-hover-bg: color.$gray-20;
@@ -53,7 +57,7 @@ $chip-close-button-icon: 2043;
 $chip-close-button-border-width: commons.$border-width;
 $chip-close-button-border-radius: commons.$border-radius-round;
 $chip-close-button-border: $chip-close-button-border-width solid $chip-border-color;
-$chip-close-button-height: spacing.$size-large;
-$chip-close-button-height-sm: spacing.$size-regular;
+$chip-close-button-height: tokens.get('utility-gap-24');
+$chip-close-button-height-sm: tokens.get('utility-gap-16');
 
-$chip-dismissable-padding-start: spacing.$size-mini;
+$chip-dismissable-padding-start: tokens.get('utility-gap-8');
diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss
index c4e6a3d419..05b9f2ea36 100644
--- a/packages/styles/src/variables/components/_close.scss
+++ b/packages/styles/src/variables/components/_close.scss
@@ -2,8 +2,12 @@
 @use './../color';
 @use './../spacing';
 @use './../../functions/icons';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
-$close-size: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$close-size: tokens.get('utility-gap-24') !default;
 $close-border-radius: button.$btn-border-radius !default;
 $close-color: color.$black !default;
 $close-hover-color: color.$black !default;
@@ -11,11 +15,13 @@ $close-disabled-color: var(--post-gray-40) !default;
 $close-transition: button.$btn-transition !default;
 
 // DEPRECATED
-$btn-close-width: spacing.$size-large !default;
+$btn-close-width: tokens.get('utility-gap-24') !default;
 $btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: spacing.$size-regular !default;
+$btn-close-padding-x: tokens.get('utility-gap-16') !default;
 $btn-close-color: color.$black !default;
-$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default;
-$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default;
+$_btn-close-bg: icons.get-colored-svg-url(2043, $btn-close-color);
+$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white);
+$btn-close-bg: url('#{$_btn-close-bg}') !default;
+$btn-close-hcm-bg: url('#{$_btn-close-hcm-bg}') !default;
 $btn-close-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;
diff --git a/packages/styles/src/variables/components/_datatable.scss b/packages/styles/src/variables/components/_datatable.scss
index 2ee6321713..d38707b9a3 100644
--- a/packages/styles/src/variables/components/_datatable.scss
+++ b/packages/styles/src/variables/components/_datatable.scss
@@ -7,37 +7,41 @@
 @use './../type';
 @use './button';
 @use './../../functions/icons';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $datatable-header-font-weight: type.$font-weight-bold;
 $datatable-header-unsorted-color: color.$gray-60;
 
 $datatable-cell-bg: color.$light;
-$datatable-cell-padding-x: spacing.$size-regular;
-$datatable-cell-padding-y: spacing.$size-mini;
+$datatable-cell-padding-x: tokens.get('utility-gap-16');
+$datatable-cell-padding-y: tokens.get('utility-gap-8');
 $datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x;
-$datatable-cell-margin: spacing.$size-line;
+$datatable-cell-margin: tokens.get('utility-gap-2');
 
 $datatable-inverted-cell-bg: color.$white;
 
-$datatable-flush-border-width: spacing.$size-line;
+$datatable-flush-border-width: tokens.get('utility-gap-2');
 $datatable-flush-border-color: color.$gray-10;
 $datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-footer-padding-x: spacing.$size-regular;
+$datatable-footer-padding-x: tokens.get('utility-gap-16');
 $datatable-footer-padding-y: button.$input-btn-focus-width;
 $datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x;
 
-$datatable-footer-separator-width: spacing.$size-line;
+$datatable-footer-separator-width: tokens.get('utility-gap-2');
 $datatable-footer-separator-color: color.$gray-10;
 $datatable-footer-separator: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-row-count-input-width: spacing.$size-bigger-giant;
+$datatable-row-count-input-width: tokens.get('utility-gap-112');
 
 $datatable-button-margin: button.$btn-focus-width;
 $datatable-button-width: calc(100% - 2 * #{$datatable-button-margin});
 $datatable-button-height: $datatable-button-width;
 $datatable-button-focus-shadow: button.$btn-focus-box-shadow;
 
-$datatable-progressbar-height: spacing.$size-micro;
+$datatable-progressbar-height: tokens.get('utility-gap-4');
 $datatable-progressbar-backgroundcolor: color.$gray-10;
 $datatable-progressbar-activecolor: color.$yellow;
diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
index 3623b8676a..85eddf0d30 100644
--- a/packages/styles/src/variables/components/_form-check.scss
+++ b/packages/styles/src/variables/components/_form-check.scss
@@ -6,13 +6,17 @@
 @use './../../functions/icons';
 @use './../../functions/sizing';
 @use './../../functions/forms' as forms-fn;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
-$form-check-row-gap: spacing.$size-small-regular !default;
-$form-check-column-gap: spacing.$size-mini !default;
-$form-check-margin-bottom: spacing.$size-regular !default;
-$form-check-inline-margin-right: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$form-check-row-gap: tokens.get('utility-gap-12') !default;
+$form-check-column-gap: tokens.get('utility-gap-8') !default;
+$form-check-margin-bottom: tokens.get('utility-gap-16') !default;
+$form-check-inline-margin-right: tokens.get('utility-gap-24') !default;
 $form-check-input-size: 1.375rem !default;
-$form-check-input-size-sm: spacing.$size-regular !default;
+$form-check-input-size-sm: tokens.get('utility-gap-16') !default;
 $form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
 $form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 4d3d685670..d6832822f4 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -8,6 +8,9 @@
 @use './../spacing';
 @use './../../functions/sizing';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
 // Forms
 
 // Used elsewhere than text input, textarea or select
@@ -16,14 +19,14 @@ $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
 $input-line-height: type.$line-height-copy !default;
 
-$input-padding-y-sm: button.$input-btn-padding-y-sm !default;
+$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-padding-y-sm) !default;
 $input-line-height-sm: type.$line-height-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
+$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
 $input-disabled-border-color: var(--post-gray-40); // Design System only
@@ -33,7 +36,7 @@ $input-border-width: button.$input-btn-border-width !default;
 
 $input-focus-width: button.$input-btn-focus-width !default;
 $input-focus-box-shadow: none !default;
-$input-focus-outline-thickness: spacing.$size-line;
+$input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing);
 
 $input-height-border: $input-border-width * 2 !default;
 
diff --git a/packages/styles/src/variables/components/_modal.scss b/packages/styles/src/variables/components/_modal.scss
index 8588f965f8..33eb2d2c74 100644
--- a/packages/styles/src/variables/components/_modal.scss
+++ b/packages/styles/src/variables/components/_modal.scss
@@ -7,21 +7,26 @@
 
 @use './button';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Modals
 
 // Padding applied to the modal footer
-$modal-inner-padding: spacing.$size-regular !default;
+$modal-inner-padding: tokens.get('utility-gap-16') !default;
 
 // Padding applied to the modal body
-$modal-body-padding-y: spacing.$size-mini !default;
-$modal-body-padding-x: spacing.$size-big !default;
+$modal-body-padding-y: tokens.get('utility-gap-8') !default;
+$modal-body-padding-x: tokens.get('utility-gap-32') !default;
 $modal-body-padding: $modal-body-padding-y $modal-body-padding-x !default;
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between: 0.5rem !default;
 
-$modal-dialog-margin: spacing.$size-small-regular !default;
-$modal-dialog-margin-y-sm-up: spacing.$size-big !default;
+$modal-dialog-margin: tokens.get('utility-gap-12') !default;
+$modal-dialog-margin-y-sm-up: tokens.get('utility-gap-32') !default;
 
 $modal-title-line-height: type.$line-height-copy !default;
 
@@ -43,7 +48,7 @@ $modal-header-border-color: commons.$border-color !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: $modal-content-border-width !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding-y: spacing.$size-large !default;
+$modal-header-padding-y: tokens.get('utility-gap-24') !default;
 $modal-header-padding-x: $modal-body-padding-x !default;
 $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
@@ -52,10 +57,10 @@ $modal-dialog-width-lg: 800px !default;
 $modal-dialog-width-md: 500px !default;
 $modal-dialog-width-sm: 300px !default;
 
-$modal-xl: sizing.px-to-rem($modal-dialog-width-xl) - 2 * $modal-dialog-margin !default;
-$modal-lg: sizing.px-to-rem($modal-dialog-width-lg) - 2 * $modal-dialog-margin !default;
-$modal-md: sizing.px-to-rem($modal-dialog-width-md) - 2 * $modal-dialog-margin !default;
-$modal-sm: sizing.px-to-rem($modal-dialog-width-sm) - 2 * $modal-dialog-margin !default;
+$modal-xl: calc(sizing.px-to-rem($modal-dialog-width-xl) - 2 * #{$modal-dialog-margin}) !default;
+$modal-lg: calc(sizing.px-to-rem($modal-dialog-width-lg) - 2 * #{$modal-dialog-margin}) !default;
+$modal-md: calc(sizing.px-to-rem($modal-dialog-width-md) - 2 * #{$modal-dialog-margin}) !default;
+$modal-sm: calc(sizing.px-to-rem($modal-dialog-width-sm) - 2 * #{$modal-dialog-margin}) !default;
 
 $modal-fade-transform: translate(0, -50px) !default;
 $modal-show-transform: none !default;
@@ -63,6 +68,6 @@ $modal-transition: transform 0.3s ease-out !default;
 $modal-scale-transform: scale(1.02) !default;
 
 // Padding applied to the close button
-$modal-btn-close-margin-y: spacing.$size-mini !default;
-$modal-btn-close-margin-x: spacing.$size-regular !default;
+$modal-btn-close-margin-y: tokens.get('utility-gap-8') !default;
+$modal-btn-close-margin-x: tokens.get('utility-gap-16') !default;
 $modal-btn-close-margin: $modal-btn-close-margin-y $modal-btn-close-margin-x !default;
diff --git a/packages/styles/src/variables/components/_navbar.scss b/packages/styles/src/variables/components/_navbar.scss
index 78365061db..1f5d88e864 100644
--- a/packages/styles/src/variables/components/_navbar.scss
+++ b/packages/styles/src/variables/components/_navbar.scss
@@ -3,13 +3,16 @@
 @use './../type';
 @use './../components/button';
 @use './../components/nav';
-@use './../../functions/utilities';
+@use './../../functions/utilities' as utilities-fx;
+
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
 // Bootstrap variables
 $navbar-padding-y: (spacing.$spacer * 0.5) !default;
 $navbar-padding-x: spacing.$spacer !default;
 
-$navbar-nav-link-padding-x: spacing.$size-small-huge !default;
+$navbar-nav-link-padding-x: tokens.get('utility-gap-48', utilities.$post-spacing) !default;
 
 $navbar-brand-font-size: type.$font-size-bigger-regular !default;
 $navbar-brand-height: $navbar-brand-font-size * type.$line-height-copy !default;
@@ -25,7 +28,7 @@ $navbar-dark-hover-color: rgba(color.$white, 0.75) !default;
 $navbar-dark-active-color: color.$white !default;
 $navbar-dark-disabled-color: rgba(color.$white, 0.25) !default;
 
-$navbar-dark-toggler-icon-bg: utilities.replace(
+$navbar-dark-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'
@@ -36,7 +39,7 @@ $navbar-light-color: rgba(color.$black, 0.5) !default;
 $navbar-light-hover-color: rgba(color.$black, 0.7) !default;
 $navbar-light-active-color: rgba(color.$black, 0.9) !default;
 $navbar-light-disabled-color: rgba(color.$black, 0.3) !default;
-$navbar-light-toggler-icon-bg: utilities.replace(
+$navbar-light-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'
diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss
index 5e04f515a5..d99239e64b 100644
--- a/packages/styles/src/variables/components/_notification.scss
+++ b/packages/styles/src/variables/components/_notification.scss
@@ -5,10 +5,12 @@
 @use './../spacing';
 @use './../type';
 @use '../../tokens/components';
+@use '../../tokens/utilities';
 @use '../../functions/tokens';
 
 tokens.$default-map: components.$post-banner;
-$notification-body-gap: spacing.$size-micro !default;
+
+$notification-body-gap: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
 $notification-font-weight: type.$font-weight-normal !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
 
@@ -52,8 +54,10 @@ $notification-hr-margin-block-map: () !default;
 $notification-hr-margin-block-map: map.merge(
   $notification-hr-margin-block-map,
   (
-    'banner': spacing.$size-mini spacing.$size-small-regular,
-    'toast': spacing.$size-micro spacing.$size-small-regular,
+    'banner': tokens.get('utility-gap-8', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
+    'toast': tokens.get('utility-gap-4', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
   )
 );
 
diff --git a/packages/styles/src/variables/components/_pagination.scss b/packages/styles/src/variables/components/_pagination.scss
index 5bb76ab1e4..736bf986c5 100644
--- a/packages/styles/src/variables/components/_pagination.scss
+++ b/packages/styles/src/variables/components/_pagination.scss
@@ -3,14 +3,18 @@
 @use './../type';
 @use './../commons';
 @use './button';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Pagination
 
-$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-y: tokens.get('utility-gap-8') !default;
 $pagination-padding-x: 0 !default;
-$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-y-sm: tokens.get('utility-gap-4') !default;
 $pagination-padding-x-sm: 0 !default;
-$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-y-lg: tokens.get('utility-gap-12') !default;
 $pagination-padding-x-lg: 0 !default;
 $pagination-line-height: 1.25 !default;
 
@@ -35,8 +39,12 @@ $pagination-disabled-bg: color.$light !default;
 $pagination-disabled-border-color: color.$gray-10 !default;
 
 $pagination-height-border: $pagination-border-width * 2 !default;
-$pagination-height-inner: (type.$font-size-base * $pagination-line-height) +
-  ($pagination-padding-y * 2) !default;
-$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default;
+$pagination-height-inner: calc(
+  (type.$font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)
+) !default;
+$pagination-height: calc(
+  ((type.$font-size-base * $pagination-line-height) + (tokens.get('utility-gap-8') * 2)) +
+    $pagination-height-border
+) !default;
 
 $pagination-width: $pagination-height !default;
diff --git a/packages/styles/src/variables/components/_spinners.scss b/packages/styles/src/variables/components/_spinners.scss
index 7567fa52a8..3a8146b840 100644
--- a/packages/styles/src/variables/components/_spinners.scss
+++ b/packages/styles/src/variables/components/_spinners.scss
@@ -4,6 +4,11 @@
 @use './../type';
 @use './../../functions/sizing';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Spinners
 
 $spinner-color-primary: color.$yellow !default;
@@ -27,7 +32,7 @@ $spinner-size-map: (
 
 // DEPRECATED
 $spinner-size-sm: type.$font-size-40 !default;
-$spinner-border-width-sm: spacing.$size-micro !default;
+$spinner-border-width-sm: tokens.get('utility-gap-4') !default;
 
 $spinner-size-xs: type.$font-size-16 !default;
-$spinner-border-width-xs: spacing.$size-line !default;
+$spinner-border-width-xs: tokens.get('utility-gap-2') !default;
diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss
index 60bab4b596..e141e3df44 100644
--- a/packages/styles/src/variables/components/_stepper.scss
+++ b/packages/styles/src/variables/components/_stepper.scss
@@ -5,17 +5,22 @@
 
 @use './../../functions/icons' as icon-fn;
 
-$stepper-bar-height: spacing.$size-micro;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
+$stepper-bar-height: tokens.get('utility-gap-4');
 $stepper-bar-color: color.$gray-40;
 $stepper-bar-fill-color: color.$yellow;
 
-$stepper-indicator-size: spacing.$size-bigger-big;
-$stepper-indicator-border-width: spacing.$size-micro;
+$stepper-indicator-size: tokens.get('utility-gap-40');
+$stepper-indicator-border-width: tokens.get('utility-gap-4');
 $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
 $stepper-indicator-font-weight: type.$font-weight-bold;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$stepper-indicator-check-size: spacing.$size-large;
+$stepper-indicator-check-size: tokens.get('utility-gap-24');
 $stepper-indicator-transition:
   color animation.$transition-base-timing,
   background-color animation.$transition-base-timing;
@@ -29,8 +34,8 @@ $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepp
 $stepper-indicator-check-icon-size: $stepper-indicator-check-size;
 
 $stepper-link-line-height: type.$line-height-sm;
-$stepper-link-gap: spacing.$size-mini;
-$stepper-link-spacing: spacing.$size-regular;
+$stepper-link-gap: tokens.get('utility-gap-8');
+$stepper-link-spacing: tokens.get('utility-gap-16');
 $stepper-link-color: var(--post-gray-60);
 
 $stepper-link-current-color: var(--post-gray-80);
diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss
index bf9c3f0c60..d40991e025 100644
--- a/packages/styles/src/variables/components/_subnavigation.scss
+++ b/packages/styles/src/variables/components/_subnavigation.scss
@@ -3,6 +3,10 @@
 @use './../commons';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Subnavigation
 
@@ -20,13 +24,11 @@ $subnavigation-height-xl: sizing.px-to-rem(72);
 $subnavigation-link-color: rgba(var(--post-contrast-color-rgb), 0.6);
 $subnavigation-link-color-hover: var(--post-contrast-color);
 
-$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, 'micro');
+$subnavigation-link-underscore-height: tokens.get('utility-gap-4');
 $subnavigation-link-underscore-color-active: color.$yellow;
 $subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4);
 
-$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, 'regular')
-  map.get(spacing.$post-sizes, 'small-regular');
-$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, 'small-large')
-  map.get(spacing.$post-sizes, 'regular');
+$subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12');
+$subnavigation-link-padding-lg: tokens.get('utility-gap-20') tokens.get('utility-gap-16');
 
-$subnavigation-result-margin-left: map.get(spacing.$post-sizes, 'mini');
+$subnavigation-result-margin-left: tokens.get('utility-gap-8');
diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss
index 685041d26d..7c1aa688af 100644
--- a/packages/styles/src/variables/components/_tables.scss
+++ b/packages/styles/src/variables/components/_tables.scss
@@ -4,11 +4,16 @@
 @use './../spacing';
 @use './../type';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Bootstrap variables
-$table-cell-padding-y: spacing.$size-small-regular !default;
-$table-cell-padding-x: spacing.$size-mini !default;
-$table-cell-padding-y-sm: spacing.$size-mini !default;
-$table-cell-padding-x-sm: spacing.$size-micro !default;
+$table-cell-padding-y: tokens.get('utility-gap-12') !default;
+$table-cell-padding-x: tokens.get('utility-gap-4') !default;
+$table-cell-padding-y-sm: tokens.get('utility-gap-8') !default;
+$table-cell-padding-x-sm: tokens.get('utility-gap-4') !default;
 $table-cell-vertical-align: top !default;
 $table-color: var(--post-contrast-color) !default;
 $table-bg: transparent !default;
diff --git a/packages/styles/src/variables/components/_tag.scss b/packages/styles/src/variables/components/_tag.scss
index a54518da39..0234e5516e 100644
--- a/packages/styles/src/variables/components/_tag.scss
+++ b/packages/styles/src/variables/components/_tag.scss
@@ -1,19 +1,22 @@
 @use './../color' as color;
 @use './../spacing' as spacing;
 @use './../type' as type;
-@use '../../functions/sizing' as sizing;
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
 
-$tag-gap: spacing.$size-micro;
+tokens.$default-map: utilities.$post-spacing;
+
+$tag-gap: tokens.get('utility-gap-4');
 $tag-padding-y: 0;
-$tag-padding-x: spacing.$size-mini;
+$tag-padding-x: tokens.get('utility-gap-8');
 $tag-max-width: 100%;
-$tag-border-width: spacing.$size-hair;
-$tag-border-radius: spacing.$size-micro;
+$tag-border-width: tokens.get('utility-gap-1');
+$tag-border-radius: tokens.get('utility-gap-4');
 $tag-font-size: type.$font-size-16;
-$tag-line-height: spacing.$size-big - (sizing.px-to-rem($tag-border-width) * 2);
+$tag-line-height: calc(tokens.get('utility-gap-32') - ($tag-border-width * 2));
 $tag-icon-size: $tag-font-size * 1.25;
 
-$tag-sm-line-height: spacing.$size-large;
+$tag-sm-line-height: tokens.get('utility-gap-24');
 $tag-sm-icon-size: $tag-font-size;
 
 $tag-default-background: color.$gray-10;
diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss
index acaf720c69..bac65e5f80 100644
--- a/packages/styles/tests/mixins/index.test.scss
+++ b/packages/styles/tests/mixins/index.test.scss
@@ -9,14 +9,6 @@ body {
   }
   @include mixins.focus-outline();
 
-  @include mixins.bezel-small();
-  @include mixins.bezel-small-regular();
-  @include mixins.bezel-regular();
-  @include mixins.bezel-bigger-regular();
-  @include mixins.bezel-medium();
-  @include mixins.bezel-large();
-  @include mixins.bezel-big();
-
   @include mixins.font-curve('tiny');
   @include mixins.font-smoothing();
   @include mixins.font-smoothing-reset();
diff --git a/packages/styles/tests/mixins/size.test.scss b/packages/styles/tests/mixins/size.test.scss
deleted file mode 100644
index 3c96e1d58b..0000000000
--- a/packages/styles/tests/mixins/size.test.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'src/mixins/size';
-
-body {
-  @include size.bezel-small();
-  @include size.bezel-small-regular();
-  @include size.bezel-regular();
-  @include size.bezel-bigger-regular();
-  @include size.bezel-medium();
-  @include size.bezel-large();
-  @include size.bezel-big();
-}
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