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/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-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/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/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/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/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/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 0d447ab844..fbd679d15c 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.tsx
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -14,7 +14,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 cbded0ac45..2b22afd3ed 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -110,6 +110,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);
+    }
   }
 }
 
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 9f888e3c1c..3d0cf0487d 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -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-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-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 3871f4d11c..c489f8c48b 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -45,6 +45,7 @@ post-popovercontainer {
     left: 0;
     width: 100%;
     height: auto;
+    border-top: unset;
 
     &.slide-in {
       animation: slide-in;
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-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 8d1d131f33..ab40d871bb 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -3,11 +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';
+
+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/get-focusable-children.ts b/packages/components/src/utils/get-focusable-children.ts
index 68b0679ab6..12a33efc02 100644
--- a/packages/components/src/utils/get-focusable-children.ts
+++ b/packages/components/src/utils/get-focusable-children.ts
@@ -21,6 +21,7 @@ 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 getFocusableChildren = (element: Element): NodeListOf<HTMLElement> => {
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/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/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/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/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 59f10871de..d8743a3ebb 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -38,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/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 9cd2c98798..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
@@ -126,7 +126,7 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
     ### 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/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
index eb5f0a4275..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
@@ -347,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 69ddfe4f01..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
@@ -134,7 +134,7 @@ export const Groupped: Story = {
     </div>
   `,
   args: {
-    cardClasses: ' h-100',
+    cardClasses: ' h-full',
   },
 };
 
@@ -224,11 +224,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <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>
@@ -311,11 +311,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <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/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 0a98a341b4..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 max-w-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 3dbd83a857..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 max-w-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/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
index 6e4f636648..4065dbc5fe 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts
+++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
@@ -229,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/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/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 efb493a5e2..b58e53ed0a 100644
--- a/packages/documentation/src/stories/introduction.docs.mdx
+++ b/packages/documentation/src/stories/introduction.docs.mdx
@@ -21,7 +21,7 @@ import { technologies } from './introduction.data';
     ))}
   </ul>
   <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
-    <div className="mt-32 mb-16 w-100">
+    <div className="mt-32 mb-16 w-full">
       <a
         className="btn btn-primary btn-lg"
         href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"
diff --git a/packages/documentation/src/stories/introduction.styles.scss b/packages/documentation/src/stories/introduction.styles.scss
index 5b2d3545bb..c44c996075 100644
--- a/packages/documentation/src/stories/introduction.styles.scss
+++ b/packages/documentation/src/stories/introduction.styles.scss
@@ -1,6 +1,9 @@
 @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';
+
+tokens.$default-map: utilities.$post-spacing;
 
 #storybook-docs {
   overflow-x: hidden;
@@ -36,19 +39,19 @@
   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/modules/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
index d6bf86c4f4..43542e2c62 100644
--- a/packages/documentation/src/stories/modules/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/utilities/elevation/elevation.stories.ts b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
index 6d7231a49b..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 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.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
index 6c1d78fed9..fca112fcb4 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss
+++ b/packages/documentation/src/stories/utilities/flex/flex.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;
 
 .flex-story-container,
 .flex-doc-container__demo {
@@ -23,7 +27,7 @@
 .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%;
 
@@ -48,7 +52,7 @@
   }
 
   .flex-doc-container__demo {
-    padding: post.$size-mini;
+    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/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 7e093615a2..22dabfe4f2 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -80,10 +80,6 @@ import './text.styles.scss';
 
 #### 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.
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 96372f13c9..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="my-container w-50">
+    <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="my-container w-50 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="my-container w-50">
+    <div class="my-container w-half">
       <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
     </div>
   `,
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index 86ee385d3b..8fe3fd197e 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -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">
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/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 0eaed65339..e19b8f19a2 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/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 e34dd42ae8..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 {
@@ -28,7 +32,7 @@
       background: none;
       border: 0;
 
-      @include utilities.focus-style {
+      @include utilities-mx.focus-style {
         border-radius: commons.$border-radius;
       }
     }
@@ -50,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,
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 bf76e9bf87..4e51471f45 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -21,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 4c18c0b9f3..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 {
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 3d312d6ea1..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 {
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/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/_spacing.scss b/packages/styles/src/variables/_spacing.scss
index b4d8528415..dae648a9a7 100644
--- a/packages/styles/src/variables/_spacing.scss
+++ b/packages/styles/src/variables/_spacing.scss
@@ -16,137 +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
-);
-
-// 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();
-}