diff --git a/.changeset/proud-actors-knock.md b/.changeset/proud-actors-knock.md
new file mode 100644
index 0000000000..96980d3ac4
--- /dev/null
+++ b/.changeset/proud-actors-knock.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': minor
+---
+
+Updated the margin, padding, and gap utility classes to use the pixel values (1, 2, ... , 112) instead of size names (hair, line, ..., bigger-giant).
diff --git a/packages/components-angular/projects/consumer-app/src/app/app.component.html b/packages/components-angular/projects/consumer-app/src/app/app.component.html
index d67562cfc9..b129ac5352 100644
--- a/packages/components-angular/projects/consumer-app/src/app/app.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/app.component.html
@@ -1,6 +1,6 @@
 <header class="bg-dark">
-  <nav class="container py-2">
-    <ul class="d-flex flex-wrap row-gap-1 column-gap-3 m-0 list-unstyled">
+  <nav class="container py-8">
+    <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">
         <a [routerLink]="route.path">{{ route.title }}</a>
       </li>
@@ -8,7 +8,7 @@
   </nav>
 </header>
 
-<main class="container my-3">
+<main class="container my-16">
   <h1>Hurray, it works!</h1>
   <router-outlet></router-outlet>
 </main>
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html
index 100f13963c..26b9e8a2c2 100644
--- a/packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/routes/card-control/card-control.component.html
@@ -2,7 +2,7 @@ <h2>CardControl Forms</h2>
 
 <h3>Form Builder Form</h3>
 <form [formGroup]="formBuilderForm" (ngSubmit)="formBuilderFormOnSubmit($event)">
-  <fieldset class="mb-3">
+  <fieldset class="mb-16">
     <div class="row">
       <div class="col-8">
         <legend>Post Card Control Checkbox</legend>
@@ -30,7 +30,7 @@ <h3>Form Builder Form</h3>
     </div>
   </fieldset>
 
-  <fieldset class="mb-3">
+  <fieldset class="mb-16">
     <div class="row">
       <div class="col-8">
         <legend>Post Card Control Radio Group</legend>
@@ -61,7 +61,7 @@ <h3>Form Builder Form</h3>
     </div>
   </fieldset>
 
-  <div class="d-flex gap-3">
+  <div class="d-flex gap-16">
     <button class="btn btn-secondary" type="reset">Reset</button>
     <button class="btn btn-primary">Submit</button>
   </div>
diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
index 835d642c11..09ed936f43 100644
--- a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
@@ -1,4 +1,4 @@
-<div class="my-4">
+<div class="my-24">
   <h2>Post Accordion</h2>
   <post-accordion [headingLevel]="3">
     <post-accordion-item>
@@ -18,37 +18,37 @@ <h2>Post Accordion</h2>
   </post-accordion>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Alert</h2>
   <post-alert><p>Contentus momentus vero siteos et accusam iretea et justo.</p></post-alert>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Card-Control</h2>
   <post-card-control type="checkbox" label="label"></post-card-control>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Collapsible</h2>
   <post-collapsible-trigger for="angular-collapsible">
-    <button class="btn btn-secondary mb-mini">Toggle</button>
+    <button class="btn btn-secondary mb-8">Toggle</button>
   </post-collapsible-trigger>
   <post-collapsible id="angular-collapsible">
     <p>Contentus momentus vero siteos et accusam iretea et justo.</p>
   </post-collapsible>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Icon</h2>
   <post-icon name="1001"></post-icon>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Logo</h2>
   <post-logo url="https://www.post.ch/en">Logo of the Post, To the homepage</post-logo>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Popover</h2>
   <button class="btn btn-secondary btn-large" data-popover-target="popover-one">
     Click here to see a popover
@@ -64,17 +64,17 @@ <h2 class="h6">Optional title</h2>
   </post-popover>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Popovercontainer</h2>
   <post-popovercontainer></post-popovercontainer>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Rating</h2>
   <post-rating></post-rating>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tabs</h2>
   <post-tabs>
     <post-tab-header panel="unua">Unua langeto</post-tab-header>
@@ -93,12 +93,12 @@ <h2>Post Tabs</h2>
   </post-tabs>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tag</h2>
   <post-tag>Tag</post-tag>
 </div>
 
-<div class="my-4">
+<div class="my-24">
   <h2>Post Tooltip</h2>
   <button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
   <post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>
diff --git a/packages/components/cypress/fixtures/post-card-control.form-association.test.html b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
index 8a06dfcfb3..d551a6534e 100644
--- a/packages/components/cypress/fixtures/post-card-control.form-association.test.html
+++ b/packages/components/cypress/fixtures/post-card-control.form-association.test.html
@@ -41,7 +41,7 @@
         <post-card-control label="Group Member 3" type="radio" name="CardControlGroup" value="2">
         </post-card-control>
       </fieldset>
-      <div class="mt-3 d-flex gap-3 justify-content-end">
+      <div class="mt-16 d-flex gap-16 justify-content-end">
         <button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
         <button type="submit" class="btn btn-primary btn-animated"><span>Submit</span></button>
       </div>
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 0c95129ca8..16672c7e7f 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -13,6 +13,6 @@
     <script nomodule src="/build/post-components.js"></script>
   </head>
   <body>
-    <div class="p-5">Add your component here and start developing!</div>
+    <div class="p-48">Add your component here and start developing!</div>
   </body>
 </html>
diff --git a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
index b5ce4cf38d..e99d6c7ebc 100644
--- a/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Accordion</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-big">
+<div class="alert alert-warning mb-32">
   <p class="alert-heading">Bootstrap accordions are deprecated and will soon be removed.</p>
   <p>
     For a similar behavior, check out our new
@@ -20,21 +20,21 @@ <h1 class="bold font-curve-large">Accordion</h1>
 
 <section>
   <h3>Using JavaScript</h3>
-  <div class="alert alert-info my-large">
+  <div class="alert alert-info my-24">
     <p>
       For the JavaScript accordion to work properly, you need to import collapse.js from Bootstrap
       into your component.
     </p>
   </div>
   <code
-    class="block my-big p-3"
+    class="block my-32 p-16"
     highlight="import 'bootstrap/js/dist/collapse';"
     [languages]="['javascript']"
   ></code>
 
   <app-accordion-demo></app-accordion-demo>
   <code
-    class="block mt-big"
+    class="block mt-32"
     [highlight]="codeTemplate"
     [languages]="['html', 'scss', 'css']"
   ></code>
diff --git a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html
index 5063d58adb..1be8e4d59f 100644
--- a/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/alert/action-alert-demo/action-alert-demo.component.html
@@ -1,8 +1,8 @@
 <button class="btn btn-secondary" (click)="toggleEx1()" #ex1btn>Toggle Ex. 1</button>
 
-<button class="btn btn-secondary ms-3" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>
+<button class="btn btn-secondary ms-16" (click)="toggleEx2()" #ex2btn>Toggle Ex. 2</button>
 
-<button class="btn btn-secondary ms-3" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>
+<button class="btn btn-secondary ms-16" (click)="toggleEx3()" #ex3btn>Toggle Ex. 3</button>
 
 <div class="alert alert-info alert-action pi-1001 alert-fixed-bottom" role="alert" #ex1>
   <div class="alert-content">
diff --git a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
index 5fbde73b66..8ba7ab821f 100644
--- a/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <p>
     The following two color variants are deprecated and will be removed in the next major version of
     the styles package:
@@ -30,7 +30,7 @@ <h1 id="alerts" class="bold font-curve-large">Alerts / Notifications</h1>
 <section class="continous-text">
   <h3>Usage</h3>
 
-  <div class="alert alert-warning mb-bigger-big">
+  <div class="alert alert-warning mb-40">
     <h5>Dismissible alerts are deprecated</h5>
     <p>
       There already exists a
@@ -44,7 +44,7 @@ <h5>Dismissible alerts are deprecated</h5>
     </p>
   </div>
 
-  <div class="alert-container mt-5">
+  <div class="alert-container mt-48">
     <div class="alert alert-info">
       <p class="alert-heading">
         The markup for alerts differs from the basic bootstrap implementation, to secure
@@ -65,7 +65,7 @@ <h5>Dismissible alerts are deprecated</h5>
           or "alert-dark" available.)
         </li>
       </ul>
-      <p class="bold pt-3">For Toasts, the bootstrap classes are not yet available!</p>
+      <p class="bold pt-16">For Toasts, the bootstrap classes are not yet available!</p>
     </div>
   </div>
 </section>
diff --git a/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html b/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html
index d4ec6cb71b..1e6ba42ddd 100644
--- a/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/alert/toast-demo/toast-demo.component.html
@@ -65,13 +65,13 @@
   </div>
 </div>
 
-<div class="heading my-3">
+<div class="heading my-16">
   <h4>Examples of ngx-toastr</h4>
   <a
     href="https://www.npmjs.com/package/ngx-toastr"
     target="_blank"
     rel="noopener"
-    class="btn btn-sm btn-primary me-2"
+    class="btn btn-sm btn-primary me-8"
   >
     ngx-toastr Documentation
   </a>
@@ -84,12 +84,12 @@ <h4>Examples of ngx-toastr</h4>
     ngx-toastr Demo
   </a>
 </div>
-<p class="mb-3 mt-5">
+<p class="mb-16 mt-48">
   Screen reader output is a little better if the close button is disabled (alert messages can still
   be closed by clicking on them). Pass the following option to disable the close button:
 </p>
 <code
-  class="d-block mt-3 mb-5"
+  class="d-block mt-16 mb-48"
   [highlight]="JSON.stringify(toastOptions, null, 2)"
   [languages]="['typescript']"
 ></code>
@@ -98,15 +98,15 @@ <h4>Examples of ngx-toastr</h4>
     <span>Show Danger Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showSuccess()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showSuccess()">
     <span>Show Success Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showInfo()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showInfo()">
     <span>Show Info Toast</span>
   </button>
 
-  <button class="btn btn-secondary btn-animated ms-3" (click)="showWarning()">
+  <button class="btn btn-secondary btn-animated ms-16" (click)="showWarning()">
     <span>Show Warning Toast</span>
   </button>
 </section>
diff --git a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html
index d8716059be..93ca730887 100644
--- a/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/background/background-demo-page/background-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Background</h1>
   <h2 class="font-curve-medium">Custom Post Backgrounds</h2>
 </div>
@@ -10,8 +10,8 @@ <h2 class="bold">Infos</h2>
   be checked individually.
 </p>
 
-<h2 class="bold mt-huge">Default backgrounds</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Default backgrounds</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-1"
@@ -27,7 +27,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
         [colorArray]="[
@@ -44,7 +44,7 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
         [colorArray]="[
@@ -62,13 +62,13 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
   </div>
 </div>
 <code
-  class="block mt-huge"
+  class="block mt-56"
   [highlight]="codeTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
 
-<h2 class="bold mt-huge">Thematic backgrounds</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Thematic backgrounds</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-2"
@@ -84,7 +84,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity2"
         [colorArray]="[
@@ -105,7 +105,7 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity2"
         [colorArray]="[
@@ -127,8 +127,8 @@ <h2 class="bold mt-huge">Thematic backgrounds</h2>
   </div>
 </div>
 
-<h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
-<div class="d-flex my-4">
+<h2 class="bold mt-56">Contextual backgrounds (Intranet only)</h2>
+<div class="d-flex my-24">
   <p class="form-check form-switch">
     <input
       id="bg-opacity-3"
@@ -144,7 +144,7 @@ <h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
 </div>
 <div class="row">
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-gray">
+    <div class="p-16 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
         [colorArray]="['success', 'warning', 'error', 'info']"
@@ -152,7 +152,7 @@ <h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
     </div>
   </div>
   <div class="col-12 col-lg-6">
-    <div class="p-3 bg-dark">
+    <div class="p-16 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
         [colorArray]="['success', 'warning', 'error', 'info']"
diff --git a/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.html b/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.html
index ecace54776..41da9c4da1 100644
--- a/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/background/background-demo/background-demo.component.html
@@ -1,6 +1,6 @@
 <div
   *ngFor="let color of colorArray"
-  class="p-2 my-1"
+  class="p-8 my-4"
   [class]="'bg-' + color"
   [style]="'--post-bg-opacity:' + (dropOpacity ? 0.8 : 1) + ';'"
 >
diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html
index 0b50c8fb78..bab5cb8eec 100644
--- a/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/badge/badge-demo-page/badge-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Badge</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html b/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html
index a93b8e158d..c205e03b35 100644
--- a/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/badge/badge-interactive-demo/badge-interactive-demo.component.html
@@ -1,12 +1,12 @@
 <h4>Links</h4>
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <a href="javascript:;" class="badge">Link Badge</a>
   <a href="javascript:;" class="badge active">Link Badge Active</a>
   <a href="javascript:;" class="badge badge-sm">Link Badge Small</a>
   <a href="javascript:;" class="badge badge-sm active">Link Badge Small Active</a>
 </div>
 
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <a href="javascript:;" class="badge">
     <span>Nested Link Badge</span>
     <span class="badge">10</span>
@@ -26,14 +26,14 @@ <h4>Links</h4>
 </div>
 
 <h4>Buttons</h4>
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <button type="button" class="badge">Button Badge</button>
   <button type="button" class="badge active">Button Badge Active</button>
   <button type="button" class="badge badge-sm">Button Badge Small</button>
   <button type="button" class="badge badge-sm active">Button Badge Small Active</button>
 </div>
 
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <button type="button" class="badge">
     <span>Nested Button Badge</span>
     <span class="badge">10</span>
@@ -53,7 +53,7 @@ <h4>Buttons</h4>
 </div>
 
 <h4>Checkable</h4>
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <div class="badge-check">
     <input id="CheckableBadge" class="badge-check-input" type="checkbox" value="" />
     <label class="badge-check-label" for="CheckableBadge">Checkable Badge</label>
@@ -82,7 +82,7 @@ <h4>Checkable</h4>
   </div>
 </div>
 
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <div class="badge-check">
     <input id="CheckableBadgeNested" class="badge-check-input" type="checkbox" value="" />
     <label class="badge-check-label" for="CheckableBadgeNested">
@@ -126,7 +126,7 @@ <h4>Checkable</h4>
 </div>
 
 <h4>Dismissable</h4>
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <span class="badge">
     <span>Dismissible Badge</span>
     <button type="button" class="btn-close" aria-label="dismiss"></button>
@@ -137,7 +137,7 @@ <h4>Dismissable</h4>
   </span>
 </div>
 
-<div class="d-flex flex-wrap align-items-center gap-3">
+<div class="d-flex flex-wrap align-items-center gap-16">
   <span class="badge">
     <span>Nested Dismissible Badge</span>
     <span class="badge">10</span>
diff --git a/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component.html b/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component.html
index 24e89e438b..0f65c40657 100644
--- a/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/blockquotes/blockquotes-demo-page/blockquotes-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Blockquotes</h1>
   <app-dependency-link documentationPath="content/typography/#blockquotes"></app-dependency-link>
 </div>
@@ -6,7 +6,7 @@ <h1 class="bold font-curve-large">Blockquotes</h1>
 <h3>Basic blockquotes</h3>
 <app-blockquotes-demo></app-blockquotes-demo>
 <code
-  class="block mb-5"
+  class="block mb-48"
   [highlight]="codeTemplateBasic"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
@@ -14,7 +14,7 @@ <h3>Basic blockquotes</h3>
 <h3>Nested blockquotes</h3>
 <app-nested-blockquotes-demo></app-nested-blockquotes-demo>
 <code
-  class="block mb-5"
+  class="block mb-48"
   [highlight]="codeTemplateNested"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
@@ -24,7 +24,7 @@ <h3>Just quotes without any extra styling</h3>
   <app-quotes-demo></app-quotes-demo>
 </div>
 <code
-  class="block mt-3"
+  class="block mt-16"
   [highlight]="codeTemplateQuotes"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
diff --git a/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.html b/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.html
index ff31152e5b..9f703725fb 100644
--- a/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/blockquotes/quotes-demo/quotes-demo.component.html
@@ -1,13 +1,13 @@
 <q>Just quotes</q>
 
-<q lang="de" class="d-block mt-2">Just quotes with a different language</q>
+<q lang="de" class="d-block mt-8">Just quotes with a different language</q>
 
-<q class="d-block mt-2">
+<q class="d-block mt-8">
   Long quotes, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
   tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
 </q>
 
-<q class="d-block mt-2">
+<q class="d-block mt-8">
   Long quotes with nested inside, Lorem ipsum dolor sit amet,
   <q>consetetur sadipscing elitr</q>
   , sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, voluptua.
diff --git a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html b/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html
index a8aa42d114..320f1e97fe 100644
--- a/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/button-group/button-group-demo-page/button-group-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Button Group</h1>
   <app-dependency-link></app-dependency-link>
 </div>
@@ -42,18 +42,18 @@ <h4 class="bold">Checkbox buttons</h4>
   </div>
 
   <ng-container *ngIf="checkboxType === FormType.TemplateDriven">
-    <code class="block mt-large" [highlight]="checkboxTemplate" [languages]="['html']"></code>
-    <code class="block mt-regular" [highlight]="checkboxController" [languages]="['ts']"></code>
+    <code class="block mt-24" [highlight]="checkboxTemplate" [languages]="['html']"></code>
+    <code class="block mt-16" [highlight]="checkboxController" [languages]="['ts']"></code>
   </ng-container>
 
   <ng-container *ngIf="checkboxType === FormType.Reactive">
     <code
-      class="block mt-large"
+      class="block mt-24"
       [highlight]="reactiveCheckboxTemplate"
       [languages]="['html']"
     ></code>
     <code
-      class="block mt-regular"
+      class="block mt-16"
       [highlight]="reactiveCheckboxController"
       [languages]="['ts']"
     ></code>
@@ -99,14 +99,14 @@ <h4 class="bold">Radio buttons</h4>
   </div>
 
   <ng-container *ngIf="radioType === FormType.TemplateDriven">
-    <code class="block mt-large" [highlight]="radioTemplate" [languages]="['html']"></code>
-    <code class="block mt-regular" [highlight]="radioController" [languages]="['ts']"></code>
+    <code class="block mt-24" [highlight]="radioTemplate" [languages]="['html']"></code>
+    <code class="block mt-16" [highlight]="radioController" [languages]="['ts']"></code>
   </ng-container>
 
   <ng-container *ngIf="radioType === FormType.Reactive">
-    <code class="block mt-large" [highlight]="reactiveRadioTemplate" [languages]="['html']"></code>
+    <code class="block mt-24" [highlight]="reactiveRadioTemplate" [languages]="['html']"></code>
     <code
-      class="block mt-regular"
+      class="block mt-16"
       [highlight]="reactiveRadioController"
       [languages]="['ts']"
     ></code>
diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component.html
index 4b7c2a2c82..fa806f5522 100644
--- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo-page/buttons-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Buttons</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.html
index 9c2b68da8f..5ca68c878c 100644
--- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.html
+++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/button-disabled/button-disabled.component.html
@@ -1,10 +1,10 @@
-<div class="p-regular d-flex flex-wrap gap-regular">
+<div class="p-16 d-flex flex-wrap gap-16">
   <button disabled class="btn btn-primary btn-animated"><span>Primary</span></button>
   <button disabled class="btn btn-secondary btn-animated"><span>Secondary</span></button>
   <button disabled class="btn btn-link">Tertiary</button>
 </div>
 
-<div class="bg-primary m-huge-y p-regular d-flex flex-wrap gap-regular">
+<div class="bg-primary m-huge-y p-16 d-flex flex-wrap gap-16">
   <button disabled class="btn btn-primary btn-animated"><span>Primary</span></button>
   <button disabled class="btn btn-secondary btn-animated"><span>Secondary</span></button>
   <button disabled class="btn btn-link">Tertiary</button>
diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html
index bef49b7623..d2c65729b9 100644
--- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/buttons-demo.component.html
@@ -16,7 +16,7 @@ <h3 class="bold mt-huge-r">Disabled buttons</h3>
   <div class="light font-curve-regular mt-regular-r alert alert-warning">
     <h4 class="bold font-curve-regular">Accessibility</h4>
     <p>Disabled controls are an accessibility anti-pattern for various reasons:</p>
-    <ol class="my-regular">
+    <ol class="my-16">
       <li>
         They are not focussable, screen reader users or keyboard users cannot focus the button and
         might miss information that is hidden e.g. in a tooltip.
diff --git a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.html b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.html
index bffabbb361..bc138dbcc6 100644
--- a/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.html
+++ b/packages/demo/src/app/bootstrap/components/buttons/buttons-demo/default-buttons/default-buttons.component.html
@@ -1,10 +1,10 @@
-<div class="p-regular flex-wrap d-flex gap-regular">
+<div class="p-16 flex-wrap d-flex gap-16">
   <button class="btn btn-primary btn-animated"><span>Primary</span></button>
   <button class="btn btn-secondary btn-animated"><span>Secondary</span></button>
   <button class="btn btn-link">Tertiary</button>
 </div>
 
-<div class="bg-primary flex-wrap m-huge-y p-regular d-flex gap-regular">
+<div class="bg-primary flex-wrap m-huge-y p-16 d-flex gap-16">
   <button class="btn btn-primary btn-animated"><span>Primary</span></button>
   <button class="btn btn-secondary btn-animated"><span>Secondary</span></button>
   <button class="btn btn-link">Tertiary</button>
diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html
index b694ea4078..80dc111583 100644
--- a/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/card/card-demo-page/card-demo-page.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="heading py-5">
+  <div class="heading py-48">
     <h1 class="bold font-curve-large">Cards</h1>
     <app-dependency-link></app-dependency-link>
   </div>
diff --git a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html
index 3d4610d7f8..933d753372 100644
--- a/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/card/card-demo/card-demo.component.html
@@ -1,6 +1,6 @@
 <section>
   <div class="row">
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <img class="card-img-top" [src]="imagePath" alt="" />
         <div class="card-body">
@@ -13,16 +13,16 @@ <h5 class="card-title">Card title</h5>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card">
         <div class="card-body">This is some text within a card body.</div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <div class="card-body">
           <h5 class="card-title">Card title</h5>
-          <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+          <h6 class="card-subtitle mb-8 text-muted">Card subtitle</h6>
           <p class="card-text">
             Some quick example text to build on the card title and make up the bulk of the card's
             content.
@@ -32,7 +32,7 @@ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <img class="card-img-top" [src]="imagePath" alt="" />
         <div class="card-body">
@@ -43,7 +43,7 @@ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <ul class="list-group list-group-flush">
           <li class="list-group-item">Cras justo odio</li>
@@ -52,7 +52,7 @@ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
         </ul>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <div class="card-header">Featured</div>
         <ul class="list-group list-group-flush">
@@ -62,7 +62,7 @@ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
         </ul>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card" style="width: 18rem">
         <img class="card-img-top" [src]="imagePath" alt="" />
         <div class="card-body">
@@ -83,7 +83,7 @@ <h5 class="card-title">Card title</h5>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card">
         <div class="card-header">Featured</div>
         <div class="card-body">
@@ -95,7 +95,7 @@ <h5 class="card-title">Special title treatment</h5>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card">
         <h5 class="card-header">Featured</h5>
         <div class="card-body">
@@ -107,7 +107,7 @@ <h5 class="card-title">Special title treatment</h5>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card">
         <div class="card-header">Quote</div>
         <div class="card-body">
@@ -126,7 +126,7 @@ <h5 class="card-title">Special title treatment</h5>
         </div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card text-center">
         <div class="card-header">Featured</div>
         <div class="card-body">
@@ -139,7 +139,7 @@ <h5 class="card-title">Special title treatment</h5>
         <div class="card-footer text-muted">2 days ago</div>
       </div>
     </div>
-    <div class="col-lg-4 col-rg-6 col-12 mb-3">
+    <div class="col-lg-4 col-rg-6 col-12 mb-16">
       <div class="card card-white">
         <div class="card-header">
           <h3 class="mb-0">Post-Example</h3>
diff --git a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
index 454f39fc17..56acd20ed4 100644
--- a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
@@ -7,8 +7,8 @@
 <h3 class="mt-huge-r">Images in cards</h3>
 
 <div class="row">
-  <div class="col-lg-4 col-rg-6 col-12 mb-3">
-    <div class="card mb-3">
+  <div class="col-lg-4 col-rg-6 col-12 mb-16">
+    <div class="card mb-16">
       <img class="card-img-top" [src]="imagePath" alt="" />
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -20,7 +20,7 @@ <h5 class="card-title">Card title</h5>
       </div>
     </div>
   </div>
-  <div class="col-lg-4 col-rg-6 col-12 mb-3">
+  <div class="col-lg-4 col-rg-6 col-12 mb-16">
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
@@ -41,7 +41,7 @@ <h3 class="mt-huge-r">Bad example</h3>
   is legible on an image for every browser size and all different languages.
 </div>
 <div class="row">
-  <div class="col-lg-4 col-rg-6 col-12 mb-3">
+  <div class="col-lg-4 col-rg-6 col-12 mb-16">
     <div class="card">
       <img class="card-img" [src]="imagePath" alt="" />
       <div class="card-img-overlay">
@@ -63,7 +63,7 @@ <h3 class="mt-huge-r">Card groups</h3>
   </div>
 </div>
 
-<div class="card-group mb-5">
+<div class="card-group mb-48">
   <div class="card">
     <img class="card-img-top" [src]="imagePath" alt="" />
     <div class="card-body">
@@ -98,7 +98,7 @@ <h5 class="card-title">Card title</h5>
   </div>
 </div>
 
-<div class="card-group mb-5">
+<div class="card-group mb-48">
   <div class="card">
     <img class="card-img-top" [src]="imagePath" alt="" />
     <div class="card-body">
diff --git a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html
index 346b89e17f..5dd166e326 100644
--- a/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/card/post-card-demo/post-card-demo.component.html
@@ -1,4 +1,4 @@
-<div class="bg-light pt-3 pb-3 mb-3">
+<div class="bg-light pt-16 pb-16 mb-16">
   <div class="container">
     <div class="row row-cols-1 row-cols-md-2">
       <div class="col">
@@ -50,7 +50,7 @@ <h3 class="d-inline font-weight-bold text-large m-0">Telefonnummern</h3>
           <div class="list-group list-group-flush">
             <div class="list-group-item d-block">
               <div class="d-flex justify-content-between">
-                <p class="mb-1">079 000 00 00</p>
+                <p class="mb-4">079 000 00 00</p>
                 <span class="badge rounded-pill border-light border-2">nicht bestätigt</span>
               </div>
               <p>076 111 11 11</p>
@@ -81,7 +81,7 @@ <h3 class="d-inline font-weight-bold text-large m-0">Guthaben & Zahlungsmittel</
                 <h3 class="card-text-large font-weight-bold">CHF 25.00</h3>
                 <p class="mb-0">
                   Debit Direct
-                  <span class="ms-5">****** 346</span>
+                  <span class="ms-48">****** 346</span>
                 </p>
               </div>
               <div class="ms-auto">
diff --git a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html
index 3cac2201f7..d2126c0fc5 100644
--- a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo-page/form-check-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Forms checkbox</h1>
   <app-dependency-link documentationPath="forms/checks-radios/#checks"></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.html b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.html
index 05ecaac8c4..f7ede66a7a 100644
--- a/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-check/form-check-demo/form-check-demo.component.html
@@ -24,7 +24,7 @@ <h3>Form check examples</h3>
 
   <!-- Checks on colored background -->
   <div class="col">
-    <div class="bg-nightblue-bright py-large px-big">
+    <div class="bg-nightblue-bright py-24 px-32">
       <div class="form-check">
         <input class="form-check-input" id="formCheckDefaultColoredBg" type="checkbox" value="" />
         <label class="form-check-label" for="formCheckDefaultColoredBg">Default checkbox</label>
@@ -55,7 +55,7 @@ <h3>Form check examples</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Inline checks</h3>
+<h3 class="mt-24">Inline checks</h3>
 <div class="form-check form-check-inline">
   <input class="form-check-input" id="inlineCheck1" type="checkbox" value="option1" />
   <label class="form-check-label" for="inlineCheck1">1</label>
@@ -65,7 +65,7 @@ <h3 class="mt-4">Inline checks</h3>
   <label class="form-check-label" for="inlineCheck2">2</label>
 </div>
 
-<h3 class="mt-4">Check without label</h3>
+<h3 class="mt-24">Check without label</h3>
 <input
   aria-label="This label is required for accessibility"
   class="form-check-input"
@@ -74,7 +74,7 @@ <h3 class="mt-4">Check without label</h3>
   value=""
 />
 
-<h3 class="mt-4">Check with long label</h3>
+<h3 class="mt-24">Check with long label</h3>
 <div class="row row-cols-1 row-cols-rg-2">
   <div class="col">
     <div class="form-check">
@@ -89,7 +89,7 @@ <h3 class="mt-4">Check with long label</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Validation</h3>
+<h3 class="mt-24">Validation</h3>
 <div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3">
   <div class="col">
     <div class="form-check">
@@ -107,7 +107,7 @@ <h3 class="mt-4">Validation</h3>
   </div>
 </div>
 
-<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-4 bg-light">
+<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-24 bg-light">
   <div class="col">
     <div class="form-check">
       <input class="form-check-input is-invalid" id="FormCheckboxInvalidOnLight" type="checkbox" />
@@ -129,7 +129,7 @@ <h3 class="mt-4">Validation</h3>
   </div>
 </div>
 
-<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-4 bg-dark">
+<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-24 bg-dark">
   <div class="col">
     <div class="form-check">
       <input class="form-check-input is-invalid" id="FormCheckboxInvalidOnDark" type="checkbox" />
diff --git a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html
index 1542f7feda..402c688878 100644
--- a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo-page/form-control-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form control</h1>
   <app-dependency-link documentationPath="forms/form-control"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
diff --git a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.html b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.html
index d9e30141ca..ebca3b67cf 100644
--- a/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-control/form-control-demo/form-control-demo.component.html
@@ -31,7 +31,7 @@
   type="text"
 />
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <input
     id="FormControlInvalid"
     type="text"
@@ -43,7 +43,7 @@
   <p class="invalid-feedback">Error message</p>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <input
     id="FormControlValid"
     type="text"
diff --git a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html
index 2e931d406d..f51b09c126 100644
--- a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form file</h1>
   <app-dependency-link documentationPath="forms/form-control/#file-input"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
diff --git a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.html b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.html
index a4ee10cf51..baecac3ac5 100644
--- a/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-file/form-file-demo/form-file-demo.component.html
@@ -3,28 +3,28 @@
   <label for="formFileLg" class="form-label">Large file input example</label>
 </div>
 
-<div class="mt-4">
+<div class="mt-24">
   <label for="formFile" class="form-label">Default file input example</label>
   <input class="form-control" type="file" id="formFile" />
 </div>
 
-<div class="mt-4">
+<div class="mt-24">
   <label for="formFileMultiple" class="form-label">Multiple files input example</label>
   <input class="form-control" type="file" id="formFileMultiple" multiple />
 </div>
 
-<div class="mt-4">
+<div class="mt-24">
   <label for="formFileSm" class="form-label">Small file input example</label>
   <input class="form-control form-control-sm" id="formFileSm" type="file" />
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <input id="FormFileInvalid" type="file" class="form-control is-invalid" required />
   <label class="form-label" for="FormFileInvalid">Invalid File</label>
   <p class="invalid-feedback">Error message</p>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <input id="FormFileValid" type="file" class="form-control is-valid" />
   <label class="form-label" for="FormFileValid">Valid File</label>
   <p class="valid-feedback">Success message (optional)</p>
diff --git a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html
index c47f190d76..fa1096ac54 100644
--- a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo-page/form-radio-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form radio button</h1>
   <app-dependency-link documentationPath="forms/checks-radios/#radios"></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo/form-radio-demo.component.html b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo/form-radio-demo.component.html
index 6dc25a28e7..106db587ec 100644
--- a/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo/form-radio-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-radio/form-radio-demo/form-radio-demo.component.html
@@ -18,7 +18,7 @@ <h3>Form radio examples</h3>
   </div>
 
   <div class="col">
-    <div class="bg-nightblue-bright py-large px-big">
+    <div class="bg-nightblue-bright py-24 px-32">
       <div class="form-check">
         <input
           class="form-check-input"
@@ -42,7 +42,7 @@ <h3>Form radio examples</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Inline radios</h3>
+<h3 class="mt-24">Inline radios</h3>
 <div class="form-check form-check-inline">
   <input
     class="form-check-input"
@@ -64,7 +64,7 @@ <h3 class="mt-4">Inline radios</h3>
   <label class="form-check-label" for="inlineRadio2">2</label>
 </div>
 
-<h3 class="mt-4">Radio without label</h3>
+<h3 class="mt-24">Radio without label</h3>
 <input
   aria-label="This label is required for accessibility"
   class="form-check-input"
@@ -74,7 +74,7 @@ <h3 class="mt-4">Radio without label</h3>
   value=""
 />
 
-<h3 class="mt-4">Radio with long label</h3>
+<h3 class="mt-24">Radio with long label</h3>
 <div class="row row-cols-1 row-cols-rg-2">
   <div class="col">
     <div class="form-check">
@@ -94,7 +94,7 @@ <h3 class="mt-4">Radio with long label</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Validation</h3>
+<h3 class="mt-24">Validation</h3>
 <div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3">
   <div class="col">
     <div class="form-check">
@@ -112,7 +112,7 @@ <h3 class="mt-4">Validation</h3>
   </div>
 </div>
 
-<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-4 bg-light">
+<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-24 bg-light">
   <div class="col">
     <div class="form-check">
       <input class="form-check-input is-invalid" id="FormRadioInvalidOnLight" type="radio" />
@@ -129,7 +129,7 @@ <h3 class="mt-4">Validation</h3>
   </div>
 </div>
 
-<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-4 bg-dark">
+<div class="row row-cols-1 row-cols-rg-2 row-cols-lg-3 pt-24 bg-dark">
   <div class="col">
     <div class="form-check">
       <input class="form-check-input is-invalid" id="FormRadioInvalidOnDark" type="radio" />
diff --git a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
index ee89078958..ce2aec41d9 100644
--- a/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-range/form-range-demo-page/form-range-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form range</h1>
   <app-dependency-link documentationPath="forms/range"></app-dependency-link>
 </div>
@@ -8,7 +8,7 @@ <h1 class="bold font-curve-large">Form range</h1>
   <code
     [highlight]="customCodeTemplate"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
-    class="block mt-big"
+    class="block mt-32"
   ></code>
 </section>
 
@@ -19,6 +19,6 @@ <h3>Basic form range</h3>
   <code
     [highlight]="basicCodeTemplate"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
-    class="block mt-big"
+    class="block mt-32"
   ></code>
 </section>
diff --git a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html
index 86b9f5930c..227b08bbac 100644
--- a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form select multiple</h1>
   <app-dependency-link documentationPath="forms/select/#sizing"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
diff --git a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.html b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.html
index 7ff522a01c..ef47e708f8 100644
--- a/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-select-multiple/form-select-multiple-demo/form-select-multiple-demo.component.html
@@ -15,7 +15,7 @@ <h3 class="mt-huge-r">
   <code>size</code>
   attribute
 </h3>
-<div class="alert alert-info my-4">
+<div class="alert alert-info my-24">
   <p>
     In Safari on macOS, the size attribute only works as expected from 4+. This is a
     <a
@@ -41,7 +41,7 @@ <h3 class="mt-huge-r">
   <option value="11">Eleven</option>
 </select>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <select id="FormSelectMultipleInvalid" class="form-select is-invalid" multiple size="4" required>
     <option value="1">Value 1</option>
     <option value="2">Value 2</option>
@@ -54,7 +54,7 @@ <h3 class="mt-huge-r">
   <p class="invalid-feedback">Error message</p>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <select id="FormSelectMultipleValid" class="form-select is-valid" multiple size="4">
     <option value="1">Value 1</option>
     <option value="2">Value 2</option>
diff --git a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html
index 3cf688bb26..af882378c1 100644
--- a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form select</h1>
   <app-dependency-link documentationPath="forms/select"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
@@ -22,7 +22,7 @@ <h2 class="alert-heading">
   <app-select-demo></app-select-demo>
 </section>
 
-<div class="alert alert-info mb-bigger-big" role="alert">
+<div class="alert alert-info mb-40" role="alert">
   <h4 class="alert-heading">Need to customize the display of options?</h4>
   <p>
     Check out our example of
diff --git a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.html b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.html
index 9a1a68352a..6550b70dfd 100644
--- a/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-select/form-select-demo/form-select-demo.component.html
@@ -28,7 +28,7 @@
   <option value="3">Three</option>
 </select>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <select id="FormSelectInvalid" class="form-select is-invalid" required>
     <option disabled>Select one..</option>
     <option value="1">Value 1</option>
@@ -38,7 +38,7 @@
   <p class="invalid-feedback">Error message</p>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <select id="FormSelectValid" class="form-select is-valid">
     <option disabled>Select one..</option>
     <option value="1">Value 1</option>
diff --git a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html
index 534bdde165..720fcf4bc2 100644
--- a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo-page/form-switch-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form switch</h1>
   <app-dependency-link documentationPath="forms/checks-radios/#switches"></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.html b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.html
index 9d96193e3e..f35a49f7ad 100644
--- a/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-switch/form-switch-demo/form-switch-demo.component.html
@@ -41,7 +41,7 @@ <h3>Form switch examples</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Inline switches</h3>
+<h3 class="mt-24">Inline switches</h3>
 <div class="form-check form-check-inline form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="inlineSwitch1" />
   <label class="form-check-label" for="inlineSwitch1">1</label>
@@ -51,14 +51,14 @@ <h3 class="mt-4">Inline switches</h3>
   <label class="form-check-label" for="inlineSwitch2">2</label>
 </div>
 
-<h3 class="mt-4">Switch with two labels</h3>
+<h3 class="mt-24">Switch with two labels</h3>
 <div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" role="switch" id="formSwitchTwoLabels" />
   <label class="form-check-label order-first" for="formSwitchTwoLabels">Off</label>
   <label class="form-check-label" for="formSwitchTwoLabels">On</label>
 </div>
 
-<h3 class="mt-4">Switch without label</h3>
+<h3 class="mt-24">Switch without label</h3>
 <div class="form-switch">
   <input
     aria-label="This label is required for accessibility"
@@ -69,7 +69,7 @@ <h3 class="mt-4">Switch without label</h3>
   />
 </div>
 
-<h3 class="mt-4">Switch with long label</h3>
+<h3 class="mt-24">Switch with long label</h3>
 <div class="row row-cols-1 row-cols-rg-2">
   <div class="col">
     <div class="form-check form-switch">
@@ -84,7 +84,7 @@ <h3 class="mt-4">Switch with long label</h3>
   </div>
 </div>
 
-<h3 class="mt-4">Validation</h3>
+<h3 class="mt-24">Validation</h3>
 <div class="row row-cols-1 row-cols-rg-2 align-items-center">
   <div class="col">
     <div class="form-check form-switch">
diff --git a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html
index d54d60c6c5..82a7fd5026 100644
--- a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Form textarea</h1>
   <app-dependency-link documentationPath="forms/floating-labels/#textareas"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
diff --git a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.html b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.html
index e048656bdc..caef602d81 100644
--- a/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/form-textarea/form-textarea-demo/form-textarea-demo.component.html
@@ -3,7 +3,7 @@
   <label for="floatingTextarea2">Comments</label>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <textarea
     id="FormTextareaInvalid"
     type="text"
@@ -16,7 +16,7 @@
   <p class="invalid-feedback">Error message</p>
 </div>
 
-<div class="form-floating mt-4">
+<div class="form-floating mt-24">
   <textarea
     id="FormTextareaValid"
     type="text"
diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html
index 4e509cc2f3..932fa1cd9a 100644
--- a/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Forms</h1>
   <app-dependency-link documentationPath="forms/overview"></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">
     We're deprecating the regular and medium sizes for text input, textarea and select.
   </h2>
diff --git a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html
index 48547c1ac9..1afa4f2a99 100644
--- a/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/forms/forms-demo/forms-demo.component.html
@@ -1,5 +1,5 @@
 <form>
-  <div class="form-floating mb-regular">
+  <div class="form-floating mb-16">
     <input
       type="email"
       class="form-control form-control-lg"
@@ -10,7 +10,7 @@
     <label for="exampleInputEmail1" class="form-label">Email address</label>
     <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
   </div>
-  <div class="form-floating mb-regular">
+  <div class="form-floating mb-16">
     <input
       type="password"
       class="form-control form-control-lg"
@@ -19,12 +19,12 @@
     />
     <label for="exampleInputPassword1" class="form-label">Password</label>
   </div>
-  <div class="form-check mb-3">
+  <div class="form-check mb-16">
     <input type="checkbox" class="form-check-input" id="exampleCheck1" />
     <label class="form-check-label" for="exampleCheck1">Check me out</label>
   </div>
 
-  <div class="d-grid gap-mini d-md-flex justify-content-md-end border-top border-2 pt-regular">
+  <div class="d-grid gap-8 d-md-flex justify-content-md-end border-top border-2 pt-16">
     <button class="btn btn-secondary" type="reset">Reset</button>
     <button class="btn btn-primary" type="submit">Submit</button>
   </div>
diff --git a/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html b/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html
index 907f3d1092..7bf4da0247 100644
--- a/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/tables/tables-demo-page/tables-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Tables</h1>
   <app-dependency-link documentationPath="content/tables"></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/typography/typography-demo-page/typography-demo-page.component.html b/packages/demo/src/app/bootstrap/components/typography/typography-demo-page/typography-demo-page.component.html
index 99b9a8987a..38ac0664e2 100644
--- a/packages/demo/src/app/bootstrap/components/typography/typography-demo-page/typography-demo-page.component.html
+++ b/packages/demo/src/app/bootstrap/components/typography/typography-demo-page/typography-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Typography</h1>
   <app-dependency-link documentationPath="content/typography"></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html b/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html
index e6df0f558d..230a6f55c5 100644
--- a/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/typography/typography-demo/typography-demo.component.html
@@ -28,7 +28,7 @@ <h3>
     </div>
   </div>
 
-  <h2 class="mt-huge">Paragraphs</h2>
+  <h2 class="mt-56">Paragraphs</h2>
   <div class="row">
     <div class="col-md-6 d-flex flex-column">
       <h3 class="h5">Copy with lead (user-facing services)</h3>
@@ -69,7 +69,7 @@ <h3 class="h5">Default paragraph (internal usage)</h3>
     <div class="col-md-6"></div>
   </div>
 
-  <h2 class="mt-huge">Lists</h2>
+  <h2 class="mt-56">Lists</h2>
   <div class="row">
     <div class="col-md-6">
       <ul>
diff --git a/packages/demo/src/app/common/dependency-link/dependency-link.component.html b/packages/demo/src/app/common/dependency-link/dependency-link.component.html
index 60c19e8d42..795eb5f9f8 100644
--- a/packages/demo/src/app/common/dependency-link/dependency-link.component.html
+++ b/packages/demo/src/app/common/dependency-link/dependency-link.component.html
@@ -5,7 +5,7 @@
 <h2 class="font-curve-medium">Using {{ dependency }} v{{ dependencyVersion }}</h2>
 
 <ng-container *ngIf="documentationPaths; else singleButton">
-  <div class="d-flex gap-2">
+  <div class="d-flex gap-8">
     <ng-container
       *ngFor="let path of documentationPaths | keyvalue"
       [ngTemplateOutletContext]="{
diff --git a/packages/demo/src/app/common/footer/footer.component.html b/packages/demo/src/app/common/footer/footer.component.html
index e85e0dadc5..4dfae27465 100644
--- a/packages/demo/src/app/common/footer/footer.component.html
+++ b/packages/demo/src/app/common/footer/footer.component.html
@@ -29,7 +29,7 @@ <h2 class="bold">Support</h2>
   </div>
 </footer>
 
-<footer class="container d-flex justify-content-between py-regular">
+<footer class="container d-flex justify-content-between py-16">
   <span class="bold">&copy; 2024 Swiss Post Ltd.</span>
   <a href="https://github.com/swisspost/design-system" target="_blank" rel="noopener">
     Improve this page
diff --git a/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html b/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html
index f28f873b9c..77a069b4e9 100644
--- a/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html
+++ b/packages/demo/src/app/common/ngb-localization/ngb-localization.component.html
@@ -1,12 +1,12 @@
 <section id="internationalization">
-  <h3 class="bold mt-5">Internationalization</h3>
+  <h3 class="bold mt-48">Internationalization</h3>
 
-  <p class="light font-curve-regular mt-4">
+  <p class="light font-curve-regular mt-24">
     Some ng-bootstrap components contain static English text that does not appear on screen but is
     used in aria attributes needed for accessibility.
   </p>
 
-  <p class="light font-curve-regular mt-4">
+  <p class="light font-curve-regular mt-24">
     The internationalization of this content is done using the
     <code>&#64;angular/localize</code>
     package. To do this, make sure to add
diff --git a/packages/demo/src/app/home/home.component.html b/packages/demo/src/app/home/home.component.html
index 7c638bbceb..5ccb5c8488 100644
--- a/packages/demo/src/app/home/home.component.html
+++ b/packages/demo/src/app/home/home.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="isIE11" class="container">
-  <div class="alert alert-warning mt-3">
+  <div class="alert alert-warning mt-16">
     <h4 class="alert-heading">IE11 not supported</h4>
     <p>
       This app uses Angular {{ getVersion(angularVersion, 'M') }} and therefore does not support
@@ -9,7 +9,7 @@ <h4 class="alert-heading">IE11 not supported</h4>
 </div>
 
 <div class="heading">
-  <div class="container py-5">
+  <div class="container py-48">
     <h1 class="bold font-curve-large" id="home">Swiss Post</h1>
     <h2 class="font-curve-large">Design System</h2>
     <p class="font-monospace small">
@@ -49,7 +49,7 @@ <h2 class="font-curve-large">Design System</h2>
   </div>
 </ng-template>
 
-<div class="bg-light py-5">
+<div class="bg-light py-48">
   <div class="container">
     <div class="alert alert-info" role="alert">
       <h4 class="alert-heading">
@@ -60,7 +60,7 @@ <h4 class="alert-heading">
         Since it is still a beta version it is not yet complete, but in general the new storybook
         version gives you a much better overview of the components and their possible states.
       </p>
-      <div class="mt-3">
+      <div class="mt-16">
         <a
           href="https://design-system.post.ch"
           rel="noopener"
@@ -90,7 +90,7 @@ <h3>Compatibility</h3>
 
       <p id="compatibility-desc">List of compatible version numbers with external dependencies.</p>
 
-      <div class="row gx-5 mt-4">
+      <div class="row gx-5 mt-24">
         <div class="col-md-6 col-sm-12 table-responsive">
           <h4>Styles</h4>
           <table aria-describedby="compatibility-desc" class="table caption-top">
@@ -158,7 +158,7 @@ <h4>Common Web Frontend</h4>
 
     <section>
       <h3>Setup for migration instructions</h3>
-      <div class="row migration-options mb-huge">
+      <div class="row migration-options mb-56">
         <div class="col-md-6">
           <fieldset>
             <legend class="font-curve-small bold">What environment is your application for?</legend>
@@ -226,8 +226,8 @@ <h3>Setup for migration instructions</h3>
       </div>
     </section>
 
-    <section id="v5-to-6" class="mb-huge">
-      <h3 class="bold mb-4">Migration from v5 to v6</h3>
+    <section id="v5-to-6" class="mb-56">
+      <h3 class="bold mb-24">Migration from v5 to v6</h3>
 
       <div class="alert alert-info" role="alert">
         <h4 class="alert-heading">
@@ -276,7 +276,7 @@ <h4 class="h5 bold">Package Update 🩺</h4>
                 :
                 <code
                   appCopyToClipboard
-                  class="d-block mt-1 p-3"
+                  class="d-block mt-4 p-16"
                   [languages]="['bash']"
                   [highlight]="
                     'npm install bootstrap@5.3' +
@@ -290,7 +290,7 @@ <h4 class="h5 bold">Package Update 🩺</h4>
                 Update Design System style package to version 6:
                 <code
                   appCopyToClipboard
-                  class="d-block mt-1 p-3"
+                  class="d-block mt-4 p-16"
                   [languages]="['bash']"
                   highlight="npm install @swisspost/design-system-styles@6"
                 ></code>
@@ -312,7 +312,7 @@ <h4 class="h5 bold">Automatic Migration ⚙️</h4>
               to your application:
               <code
                 appCopyToClipboard
-                class="d-block mt-1 p-3"
+                class="d-block mt-4 p-16"
                 [languages]="['bash']"
                 highlight="npm install @swisspost/design-system-migrations
 npx ng update @swisspost/design-system-migrations --from=5 --to=6 --migrate-only --allow-dirty
@@ -327,7 +327,7 @@ <h4 class="h5 bold">Component Migration 🤓</h4>
             Changes flagged with the ⚙️ symbol should be automatically migrated with our migration
             tool.
           </p>
-          <h5 class="h6 bold mt-4">Accessibility</h5>
+          <h5 class="h6 bold mt-24">Accessibility</h5>
           <ul>
             <li>
               <h6>
@@ -358,7 +358,7 @@ <h6>
               </ul>
             </li>
           </ul>
-          <h5 class="h6 bold mt-4">Deprecations</h5>
+          <h5 class="h6 bold mt-24">Deprecations</h5>
           <ul>
             <li *ngIf="isMigratingAngular">
               <h6>
@@ -399,8 +399,8 @@ <h6>
       </ol>
     </section>
 
-    <section id="v4-to-5" class="mb-huge">
-      <h3 class="bold mb-4">Migration from v4 to v5</h3>
+    <section id="v4-to-5" class="mb-56">
+      <h3 class="bold mb-24">Migration from v4 to v5</h3>
 
       <ol class="bubble-tea">
         <li>
@@ -419,7 +419,7 @@ <h4 class="h5 bold">Old Package Uninstallation 🗑️</h4>
             *ngIf="isMigratingIntranet">s</span>.</p>
           <code
             appCopyToClipboard
-            class="d-block p-3"
+            class="d-block p-16"
             [languages]="['bash']"
             [highlight]="
               'npm uninstall @******/common-web-frontend' +
@@ -434,7 +434,7 @@ <h4 class="h5 bold">
           </h4>
           <code
             appCopyToClipboard
-            class="d-block p-3"
+            class="d-block p-16"
             [languages]="['bash']"
             [highlight]="
               'npm install @swisspost/design-system-styles@5' +
@@ -479,7 +479,7 @@ <h4 class="h5 bold">Package Update 🩺</h4>
             :
             <code
               appCopyToClipboard
-              class="d-block mt-1 p-3"
+              class="d-block mt-4 p-16"
               [languages]="['bash']"
               [highlight]="
                 'npm install bootstrap@5.1' +
@@ -502,7 +502,7 @@ <h4 class="h5 bold">Automatic Migration ⚙️</h4>
               to your application:
               <code
                 appCopyToClipboard
-                class="d-block mt-1 p-3"
+                class="d-block mt-4 p-16"
                 [languages]="['bash']"
                 highlight="npm install @swisspost/design-system-migrations
 npx ng update @swisspost/design-system-migrations --from=4 --to=5 --migrate-only --allow-dirty
@@ -519,7 +519,7 @@ <h4 class="h5 bold">Component Migration 🤓</h4>
           </p>
 
           <h5 class="h6 bold">Deprecations</h5>
-          <ul class="mt-2 mb-3">
+          <ul class="mt-8 mb-16">
             <li>
               <p>
                 <strong>Dropped jQuery dependency</strong>
@@ -576,8 +576,8 @@ <h2 ngbAccordionHeader class="custom-header justify-content-between">
                 <div ngbAccordionBody>
                   <!-- General Files -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Paths &amp; Files</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -593,7 +593,7 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
                           <label class="form-check-label" for="generalnaming_cwfpackagename">
                             <span class="change-badge bg-danger">breaking</span> Renamed <span
                             class="highlight">packages</span>.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>&#64;******/common-web-frontend</code> became <code
                                 appCopyToClipboard>&#64;swisspost/design-system-styles</code></li>
                               <li><code appCopyToClipboard>&#64;******/common-web-frontend-demo</code> became <code
@@ -620,8 +620,8 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
                             Renamed entry files.
                             <br />
 
-                            <ul class="mt-2">
-                              <li class="mb-2">
+                            <ul class="mt-8">
+                              <li class="mb-8">
                                 <strong>Default (index)</strong>
                                 for default Post styles:
                                 <br />
@@ -633,7 +633,7 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
                                   &#64;use "&#64;swisspost/design-system-styles";
                                 </code>
                               </li>
-                              <li class="mb-2">
+                              <li class="mb-8">
                                 <strong>Intranet</strong>
                                 for default Post styles + intranet header styles:
                                 <br />
@@ -645,7 +645,7 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
                                   &#64;use "&#64;swisspost/design-system-styles/intranet.scss";
                                 </code>
                               </li>
-                              <li class="mb-2">
+                              <li class="mb-8">
                                 <strong>Basics</strong>
                                 for resets, typography, utilities and grid only (use this for small
                                 pages with lots of custom styles):
@@ -658,7 +658,7 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
                                   &#64;use "&#64;swisspost/design-system-styles/basics.scss";
                                 </code>
                               </li>
-                              <li class="mb-2">
+                              <li class="mb-8">
                                 <strong>Core</strong>
                                 for functions, mixins, variables and placeholders:
                                 <br />
@@ -744,8 +744,8 @@ <h5 class="mt-4 h6 bold">Paths &amp; Files</h5>
 
                   <!-- General Variables -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Variables</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Variables</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -817,7 +817,7 @@ <h5 class="mt-4 h6 bold">Variables</h5>
                           <label class="form-check-label" for="generalvariables_floatinglabel">
                             <span class="change-badge bg-danger">breaking</span> Removed <span class="highlight">floating-label</span>
                             variables.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$form-floating-label-padding-t</code></li>
                               <li><code appCopyToClipboard>$form-floating-label-padding-b</code></li>
                               <li><code appCopyToClipboard>$form-floating-textarea-line-height</code></li>
@@ -842,7 +842,7 @@ <h5 class="mt-4 h6 bold">Variables</h5>
                           <label class="form-check-label" for="generalvariables_colorsremoved">
                             <span class="change-badge bg-danger">breaking</span> Removed <span
                             class="highlight">color</span> variables.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$white-alpha-10</code>, <code appCopyToClipboard>$white-alpha-20</code>,
                                 <code appCopyToClipboard>$white-alpha-40</code>, <code
                                   appCopyToClipboard>$white-alpha-60</code>, <code
@@ -884,7 +884,7 @@ <h5 class="mt-4 h6 bold">Variables</h5>
                           <label class="form-check-label" for="generalvariables_colorsrenamed">
                             <span class="change-badge bg-danger">breaking</span> Renamed <span
                             class="highlight">color</span> variables.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$gray-pampas</code> became <code appCopyToClipboard>$gray-background-light</code>
                               </li>
                               <li><code appCopyToClipboard>$gray-cararra</code> became <code appCopyToClipboard>$gray-background</code>
@@ -917,7 +917,7 @@ <h5 class="mt-4 h6 bold">Variables</h5>
                           <!-- prettier-ignore -->
                           <label class="form-check-label" for="generalvariables_lineheigts">
                             Dropped usage of <span class="highlight">line-height</span> variables.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$line-height-sm</code></li>
                               <li><code appCopyToClipboard>$line-height-lg</code></li>
                             </ul>
@@ -960,7 +960,7 @@ <h5 class="mt-4 h6 bold">Variables</h5>
                           <label class="form-check-label" for="generalvariables_headingfontsizes">
                             Dropped usage of <span class="highlight">font-size</span> variables.<br>
                             Headings now have responsive font-sizes.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$h1-font-size</code></li>
                               <li><code appCopyToClipboard>$h2-font-size</code></li>
                               <li><code appCopyToClipboard>$h3-font-size</code></li>
@@ -977,8 +977,8 @@ <h5 class="mt-4 h6 bold">Variables</h5>
 
                   <!-- General Mixins -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Mixins</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Mixins</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -994,7 +994,7 @@ <h5 class="mt-4 h6 bold">Mixins</h5>
                           <label class="form-check-label" for="generalmixins_fontsizelineheight">
                             <span class="change-badge bg-danger">breaking</span> Removed <span
                             class="highlight">font-size</span> and <span class="highlight">line-height</span> mixins:<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>font-size-calc()</code></li>
                               <li><code appCopyToClipboard>font-size-and-lineheight()</code></li>
                               <li><code appCopyToClipboard>font-line-height()</code></li>
@@ -1007,8 +1007,8 @@ <h5 class="mt-4 h6 bold">Mixins</h5>
 
                   <!-- General Classes -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Classes</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Classes</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1048,7 +1048,7 @@ <h5 class="mt-4 h6 bold">Classes</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Removed <span
                             class="highlight">secondary</span> classes.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.bg-secondary</code></li>
                               <li><code appCopyToClipboard>.border-secondary</code></li>
                               <li><code appCopyToClipboard>.text-secondary</code></li>
@@ -1072,7 +1072,7 @@ <h5 class="mt-4 h6 bold">Classes</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Updated spacing and alignment helper classes,
                             for better support of <span class="highlight">rtl-mode</span>.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.ml-[size]</code> became <code
                                 appCopyToClipboard>.ms-[size]</code></li>
                               <li><code appCopyToClipboard>.ml-[breakpoint]-[size]</code> became <code appCopyToClipboard>.ms-[breakpoint]-[size]</code>
@@ -1129,7 +1129,7 @@ <h5 class="mt-4 h6 bold">Classes</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Updated <span class="highlight">sr-only</span>
                             classes.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.sr-only</code> became <code appCopyToClipboard>.visually-hidden</code>
                               </li>
                               <li><code appCopyToClipboard>.sr-only-focusable</code> became <code appCopyToClipboard>.visually-hidden-focusable</code>
@@ -1162,7 +1162,7 @@ <h2 ngbAccordionHeader class="custom-header justify-content-between">
                   <!-- Bootstrap Alert / Notifications -->
                   <div>
                     <h5 class="h6 bold">Alert / Notification</h5>
-                    <ul class="list-unstyled my-3">
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1214,8 +1214,8 @@ <h5 class="h6 bold">Alert / Notification</h5>
 
                   <!-- Bootstrap Badge -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Badge</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Badge</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1232,7 +1232,7 @@ <h5 class="mt-4 h6 bold">Badge</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Renamed <span class="highlight">badge</span>
                             classes.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.badge-pill</code> became <code appCopyToClipboard>.rounded-pill</code>
                               </li>
                               <li><code appCopyToClipboard>.badge-[colorname]</code> became <code appCopyToClipboard>.bg-[colorname]</code>
@@ -1258,8 +1258,8 @@ <h5 class="mt-4 h6 bold">Badge</h5>
 
                   <!-- Bootstrap Background -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Background</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Background</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1292,8 +1292,8 @@ <h5 class="mt-4 h6 bold">Background</h5>
 
                   <!-- Bootstrap Blockquote -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Blockquote</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Blockquote</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1346,8 +1346,8 @@ <h5 class="mt-4 h6 bold">Blockquote</h5>
 
                   <!-- Bootstrap Button -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Button</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Button</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1385,7 +1385,7 @@ <h5 class="mt-4 h6 bold">Button</h5>
                           <label class="form-check-label" for="bootstrapbuttons_borderradius">
                             <span class="change-badge bg-danger">breaking</span> Removed <span
                             class="highlight">button</span> variables.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$btn-border-radius-rg</code></li>
                               <li><code appCopyToClipboard>$btn-border-radius-map</code></li>
                             </ul>
@@ -1406,7 +1406,7 @@ <h5 class="mt-4 h6 bold">Button</h5>
                           <!-- prettier-ignore -->
                           <label class="form-check-label" for="bootstrapbuttons_borderradius2">
                             Dropped the usage of <span class="highlight">button</span> variables.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$btn-border-radius-sm</code></li>
                               <li><code appCopyToClipboard>$btn-border-radius-lg</code></li>
                             </ul>
@@ -1463,8 +1463,8 @@ <h5 class="mt-4 h6 bold">Button</h5>
 
                   <!-- Bootstrap Button Close -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Button Close</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Button Close</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1536,8 +1536,8 @@ <h5 class="mt-4 h6 bold">Button Close</h5>
 
                   <!-- Bootstrap Cards -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Card</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Card</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1568,8 +1568,8 @@ <h5 class="mt-4 h6 bold">Card</h5>
 
                   <!-- Bootstrap Forms -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Forms</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Forms</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1605,7 +1605,7 @@ <h5 class="mt-4 h6 bold">Forms</h5>
                             <span *ngIf="isMigratingAngular">⚙️</span> Dropped usage of <code appCopyToClipboard>.form-group</code>
                             class.<br>
                             Use <span class="highlight">utility-class</span>&nbsp;<code
-                            appCopyToClipboard>.mb-regular</code> instead.<br>
+                            appCopyToClipboard>.mb-16</code> instead.<br>
                           </label>
                         </div>
                       </li>
@@ -1638,8 +1638,8 @@ <h5 class="mt-4 h6 bold">Forms</h5>
 
                   <!-- Bootstrap Form-Controls -->
                   <div>
-                    <h5 class="mt-4 h6 bold">From Control</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">From Control</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1690,8 +1690,8 @@ <h5 class="mt-4 h6 bold">From Control</h5>
 
                   <!-- Bootstrap Form-Select -->
                   <div>
-                    <h5 class="mt-4 h6 bold">From Select</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">From Select</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1730,7 +1730,7 @@ <h5 class="mt-4 h6 bold">From Select</h5>
                             class="change-badge bg-danger">breaking</span> Renamed <span class="highlight">select</span>,
                             <span class="highlight">multi-select</span> and <span class="highlight">custom-select</span>
                             classes.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.form-control</code> became <code appCopyToClipboard>.form-select</code>
                               </li>
                               <li><code appCopyToClipboard>.form-control-lg</code> became <code appCopyToClipboard>.form-select-lg</code>
@@ -1780,8 +1780,8 @@ <h5 class="mt-4 h6 bold">From Select</h5>
 
                   <!-- Bootstrap Form-Textarea -->
                   <div>
-                    <h5 class="mt-4 h6 bold">From Textarea</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">From Textarea</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1813,8 +1813,8 @@ <h5 class="mt-4 h6 bold">From Textarea</h5>
 
                   <!-- Bootstrap Form-File -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Form File</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Form File</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1843,8 +1843,8 @@ <h5 class="mt-4 h6 bold">Form File</h5>
 
                   <!-- Bootstrap Form-Checkbox -->
                   <div>
-                    <h5 class="mt-4 h6 bold">From Checkbox</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">From Checkbox</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1861,7 +1861,7 @@ <h5 class="mt-4 h6 bold">From Checkbox</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Renamed <span class="highlight">control</span>
                             classes.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.custom-control.custom-checkbox</code> became <code
                                 appCopyToClipboard>.form-check</code></li>
                               <li><code appCopyToClipboard>.custom-control-input</code> became <code appCopyToClipboard>.form-check-input</code>
@@ -1928,8 +1928,8 @@ <h5 class="mt-4 h6 bold">From Checkbox</h5>
 
                   <!-- Bootstrap Form-Radio -->
                   <div>
-                    <h5 class="mt-4 h6 bold">From Radio</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">From Radio</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -1946,7 +1946,7 @@ <h5 class="mt-4 h6 bold">From Radio</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Renamed <span class="highlight">control</span>
                             classes.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.custom-control.custom-radio</code> became <code
                                 appCopyToClipboard>.form-check</code></li>
                               <li><code appCopyToClipboard>.custom-control-input</code> became <code appCopyToClipboard>.form-check-input</code>
@@ -2013,7 +2013,7 @@ <h5 class="mt-4 h6 bold">From Radio</h5>
 
                   <!-- Post Switch -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Form Switch</h5>
+                    <h5 class="mt-24 h6 bold">Form Switch</h5>
 
                     <p>
                       The
@@ -2027,7 +2027,7 @@ <h5 class="mt-4 h6 bold">Form Switch</h5>
                       </span>
                     </p>
 
-                    <ul class="list-unstyled my-3">
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2044,7 +2044,7 @@ <h5 class="mt-4 h6 bold">Form Switch</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Refactored <span
                             class="highlight">switch</span> classes.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>.switch</code> became <code appCopyToClipboard>.form-check.form-switch</code>
                               </li>
                               <li><code appCopyToClipboard>.switch input.switch</code> became <code appCopyToClipboard>input.form-check-input</code>
@@ -2070,7 +2070,7 @@ <h5 class="mt-4 h6 bold">Form Switch</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Refactored <span
                             class="highlight">switch-label</span>.<br>
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>div.switch label</code> (before <code appCopyToClipboard>label.switch-toggler</code>)
                                 became <code appCopyToClipboard>label.form-check-label.order-first</code></li>
                               <li><code appCopyToClipboard>div.switch label.switch-toggler</code> has been removed</li>
@@ -2153,7 +2153,7 @@ <h2 ngbAccordionHeader class="custom-header justify-content-between">
                   <!-- ngBootstrap Buttons -->
                   <div>
                     <h5 class="h6 bold">Buttons</h5>
-                    <ul class="list-unstyled my-3">
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2221,8 +2221,8 @@ <h5 class="h6 bold">Buttons</h5>
 
                   <!-- ngBootstrap DatePicker -->
                   <div>
-                    <h5 class="mt-4 h6 bold">DatePicker</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">DatePicker</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2238,7 +2238,7 @@ <h5 class="mt-4 h6 bold">DatePicker</h5>
                           <label class="form-check-label" for="ngbootstrapdatepickers_variables">
                             <span class="change-badge bg-danger">breaking</span> Removed <span
                             class="highlight">padding</span> variables.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>$ngb-dp-icon-padding</code></li>
                               <li><code appCopyToClipboard>$ngb-dp-icon-padding-sm</code></li>
                               <li><code appCopyToClipboard>$ngb-dp-icon-padding-rg</code></li>
@@ -2257,8 +2257,8 @@ <h5 class="mt-4 h6 bold">DatePicker</h5>
 
                   <!-- ngBootstrap Modal -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Modal</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Modal</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2330,7 +2330,7 @@ <h2 ngbAccordionHeader class="custom-header justify-content-between">
                   <!-- jQuery Accordion -->
                   <div>
                     <h5 class="h6 bold">Accordion</h5>
-                    <ul class="list-unstyled my-3">
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2381,7 +2381,7 @@ <h2 ngbAccordionHeader class="custom-header justify-content-between">
                   <!-- Post Accordion -->
                   <div>
                     <h5 class="h6 bold">Accordion</h5>
-                    <ul class="list-unstyled my-3">
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2412,8 +2412,8 @@ <h5 class="h6 bold">Accordion</h5>
 
                   <!-- Post Custom-Select -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Custom-Select</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Custom-Select</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2486,8 +2486,8 @@ <h5 class="mt-4 h6 bold">Custom-Select</h5>
 
                   <!-- Post Subnavigation -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Subnavigation</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Subnavigation</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2516,8 +2516,8 @@ <h5 class="mt-4 h6 bold">Subnavigation</h5>
 
                   <!-- Post Topic Teaser -->
                   <div>
-                    <h5 class="mt-4 h6 bold">Topic Teaser</h5>
-                    <ul class="list-unstyled my-3">
+                    <h5 class="mt-24 h6 bold">Topic Teaser</h5>
+                    <ul class="list-unstyled my-16">
                       <li>
                         <div class="form-check">
                           <input
@@ -2534,7 +2534,7 @@ <h5 class="mt-4 h6 bold">Topic Teaser</h5>
                             <span *ngIf="isMigratingAngular">⚙️ </span><span
                             class="change-badge bg-danger">breaking</span> Required <span class="highlight">image</span>
                             attributes.
-                            <ul class="mt-2">
+                            <ul class="mt-8">
                               <li><code appCopyToClipboard>width="100%"</code></li>
                               <li><code appCopyToClipboard>height="100%"</code></li>
                             </ul>
@@ -2623,11 +2623,11 @@ <h4 class="h5 bold">Treat yourself to a 🍺, you've done a great job! 🚀</h4>
     <div class="topic-teaser-container bg-nightblue">
       <div class="row pt-huge-r">
         <div class="topic-teaser-content">
-          <h2 class="topic-teaser-title font-curve-large mb-large">
+          <h2 class="topic-teaser-title font-curve-large mb-24">
             <span class="bold">Resources</span>
             <span class="light">For a consistent user experience</span>
           </h2>
-          <ul class="link-list mb-large">
+          <ul class="link-list mb-24">
             <li class="link-list-item">
               <a
                 target="_blank"
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
index d441b7cd8a..b5649784a7 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-big-sidebar/intranet-header-demo-big-sidebar.component.html
@@ -11,7 +11,7 @@
   <div class="site-content container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-3"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
@@ -51,7 +51,7 @@
 
         <div></div>
       </nav>
-      <main role="main" class="col-md-9 col-lg-10 p-3">
+      <main role="main" class="col-md-9 col-lg-10 p-16">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
index aa2c812d15..0772621393 100644
--- a/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
+++ b/packages/demo/src/app/intranet-layout/components/intranet-header-demo-small-sidebar/intranet-header-demo-small-sidebar.component.html
@@ -3,7 +3,7 @@
   <div class="container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-3"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
@@ -44,7 +44,7 @@
 
         <div></div>
       </nav>
-      <main role="main" class="col-md-9 col-lg-10 p-3">
+      <main role="main" class="col-md-9 col-lg-10 p-16">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/demo/src/app/intranet-layout/intranet-layout.component.html b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
index a9a4c3e5f8..929378a6a2 100644
--- a/packages/demo/src/app/intranet-layout/intranet-layout.component.html
+++ b/packages/demo/src/app/intranet-layout/intranet-layout.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-  <div class="heading py-5">
+  <div class="heading py-48">
     <h1 class="bold font-curve-large">Intranet Header</h1>
   </div>
 
@@ -58,7 +58,7 @@ <h2 class="bold">Installation</h2>
     [languages]="['shell']"
   ></code>
 
-  <h2 class="bold mt-5">Usage</h2>
+  <h2 class="bold mt-48">Usage</h2>
   <section class="light font-curve-regular">
     <p>
       In your
@@ -110,8 +110,8 @@ <h2 class="bold mt-5">Usage</h2>
     </p>
   </section>
 
-  <h3 class="bold mt-5" id="intranet-layout-options">Options</h3>
-  <div class="table-responsive-sm mt-3">
+  <h3 class="bold mt-48" id="intranet-layout-options">Options</h3>
+  <div class="table-responsive-sm mt-16">
     <table
       class="table table-striped table-bordered table-sm"
       aria-describedby="intranet-layout-options"
@@ -304,8 +304,8 @@ <h3 class="bold mt-5" id="intranet-layout-options">Options</h3>
       </tbody>
     </table>
   </div>
-  <h3 class="bold mt-5">Examples</h3>
-  <h4 class="bold mt-5">With top navigation, without sidenav</h4>
+  <h3 class="bold mt-48">Examples</h3>
+  <h4 class="bold mt-48">With top navigation, without sidenav</h4>
   <p class="light font-curve-regular">
     Add
     <code class="bg-light">
@@ -328,12 +328,12 @@ <h4 class="bold mt-5">With top navigation, without sidenav</h4>
 
 <div class="container">
   <code
-    class="block mt-3"
+    class="block mt-16"
     [highlight]="codeTemplateReg"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 
-  <h4 class="bold mt-5">Without top navigation, with sidenav</h4>
+  <h4 class="bold mt-48">Without top navigation, with sidenav</h4>
 </div>
 
 <div class="header-showcase-container p-huge-r">
@@ -355,7 +355,7 @@ <h4 class="bold mt-5">Without top navigation, with sidenav</h4>
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 
-  <h4 class="bold mt-5">Intranet-Header "postweb"</h4>
+  <h4 class="bold mt-48">Intranet-Header "postweb"</h4>
   <div class="alert-container">
     <div class="alert alert-danger">
       <p>Top navigation links must be maintained by the application!</p>
diff --git a/packages/demo/src/app/layout-container/layout-container.component.html b/packages/demo/src/app/layout-container/layout-container.component.html
index 1bad4ac93c..5f9a3ff323 100644
--- a/packages/demo/src/app/layout-container/layout-container.component.html
+++ b/packages/demo/src/app/layout-container/layout-container.component.html
@@ -10,7 +10,7 @@
       <div ngbDropdownMenu aria-labelledby="versionDropdown" class="dropdown-menu-end">
         <a *ngFor="let version of versions$ | async" [href]="version.url" ngbDropdownItem>
           <span class="bold">{{ version.title }}</span>
-          <div class="small mt-2 icons" *ngIf="version.dependencies">
+          <div class="small mt-8 icons" *ngIf="version.dependencies">
             <span
               title="Angular"
               *ngIf="version.dependencies.get('@angular/core') as angularVersion"
diff --git a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
index 95e98706bd..1c8ca6febf 100644
--- a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Accordion</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
index 632d09836c..aea8d898a1 100644
--- a/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/accordion/accordion-demo/accordion-demo.component.html
@@ -19,7 +19,7 @@ <h2 ngbAccordionHeader>
             nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
           </p>
 
-          <div class="d-flex flex-row-reverse gap-mini mt-mini">
+          <div class="d-flex flex-row-reverse gap-8 mt-8">
             <button class="btn btn-primary" type="button">Primary</button>
             <button class="btn btn-secondary" type="button">Secondary</button>
             <button class="btn btn-tertiary" type="button">Tertiary</button>
diff --git a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
index 16e28698bd..73a3aec54c 100644
--- a/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/alert/alert-demo-page/alert-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Alerts</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <p>
     The following two color variants are deprecated and will be removed in the next major version of
     the styles package:
@@ -34,7 +34,7 @@ <h1 class="bold font-curve-large">Alerts</h1>
 </section>
 <!-- margin added as we have a fixed bottom alert -->
 <code
-  class="block mb-3"
+  class="block mb-16"
   [highlight]="codeTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
diff --git a/packages/demo/src/app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html
index 36768fd937..e803f9a2d5 100644
--- a/packages/demo/src/app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/carousel/carousel-demo-page/carousel-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Carousel</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<h3 class="mt-5 mb-3 bold">Basic example</h3>
+<h3 class="mt-48 mb-16 bold">Basic example</h3>
 <section>
   <app-ngb-carousel-demo></app-ngb-carousel-demo>
 </section>
@@ -13,7 +13,7 @@ <h3 class="mt-5 mb-3 bold">Basic example</h3>
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
 
-<h3 class="mt-5 mb-3 bold">Light caption</h3>
+<h3 class="mt-48 mb-16 bold">Light caption</h3>
 <section>
   <app-ngb-carousel-light-demo></app-ngb-carousel-light-demo>
 </section>
diff --git a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html
index 2ae70ec024..18477eec87 100644
--- a/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/collapse/collapse-demo-page/collapse-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Collapse</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<section class="mb-0 pb-5">
+<section class="mb-0 pb-48">
   <app-ngb-collapse-demo></app-ngb-collapse-demo>
 </section>
 <code
diff --git a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
index e4ee2bb984..73ab791188 100644
--- a/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/datepicker/datepicker-demo-page/datepicker-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Datepicker</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <p>
     The
     <code>.pi-calendar</code>
@@ -17,7 +17,7 @@ <h1 class="bold font-curve-large">Datepicker</h1>
 <section>
   <p id="languageSelectorTitle" class="light font-curve-regular">Choose a language:</p>
 
-  <fieldset aria-labelledby="languageSelectorTitle" class="btn-group mb-3">
+  <fieldset aria-labelledby="languageSelectorTitle" class="btn-group mb-16">
     <input
       [(ngModel)]="language"
       autocomplete="off"
@@ -71,9 +71,9 @@ <h1 class="bold font-curve-large">Datepicker</h1>
 <section>
   <h3 class="bold">Simple datepicker</h3>
 
-  <div class="row row-cols-md-2 row-cols-lg-3 mb-3 align-items-end">
+  <div class="row row-cols-md-2 row-cols-lg-3 mb-16 align-items-end">
     <div class="col">
-      <div class="mb-4">
+      <div class="mb-24">
         <app-datepicker-simple
           *ngIf="dpSimpleSize !== 'lg'"
           [inputSize]="dpSimpleSize"
@@ -111,7 +111,7 @@ <h3 class="bold">Simple datepicker</h3>
     </div>
   </div>
 
-  <h4 class="h5 bold mt-4">datepicker.component.html</h4>
+  <h4 class="h5 bold mt-24">datepicker.component.html</h4>
   <code
     *ngIf="dpSimpleSize !== 'lg'"
     [highlight]="dpSimpleHtml"
@@ -124,15 +124,15 @@ <h4 class="h5 bold mt-4">datepicker.component.html</h4>
     [languages]="['html']"
     class="block"
   ></code>
-  <h4 class="h5 bold mt-4">datepicker-simple.component.ts</h4>
+  <h4 class="h5 bold mt-24">datepicker-simple.component.ts</h4>
   <code class="block" [highlight]="dpSimpleTs" [languages]="['typescript', 'javascript']"></code>
 </section>
 
 <section>
-  <h3 class="bold mt-5">Datepicker with validation</h3>
+  <h3 class="bold mt-48">Datepicker with validation</h3>
   <div class="row row-cols-md-2 row-cols-lg-3">
     <div class="col">
-      <div class="mb-4">
+      <div class="mb-24">
         <app-datepicker-validation
           *ngIf="dpValidationSize !== 'lg'"
           [inputSize]="dpValidationSize"
@@ -161,7 +161,7 @@ <h3 class="bold mt-5">Datepicker with validation</h3>
     </div>
   </div>
 
-  <h4 class="h5 bold mt-4">datepicker.component.html</h4>
+  <h4 class="h5 bold mt-24">datepicker.component.html</h4>
   <code
     *ngIf="dpValidationSize !== 'lg'"
     [highlight]="dpValidationHtml"
@@ -174,7 +174,7 @@ <h4 class="h5 bold mt-4">datepicker.component.html</h4>
     [languages]="['html']"
     class="block"
   ></code>
-  <h4 class="h5 bold mt-4">datepicker-simple.component.ts</h4>
+  <h4 class="h5 bold mt-24">datepicker-simple.component.ts</h4>
   <code
     class="block"
     [highlight]="dpValidationTs"
@@ -183,7 +183,7 @@ <h4 class="h5 bold mt-4">datepicker-simple.component.ts</h4>
 </section>
 
 <app-ngb-localization>
-  <p class="light font-curve-regular mt-4">
+  <p class="light font-curve-regular mt-24">
     The datepicker requires additional translations for months and days of the week. These can be
     configured using the service below:
   </p>
diff --git a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html
index 8dcbb51cf0..571ccc6083 100644
--- a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo-page/dropdown-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Dropdown</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.html
index df9123f422..de6fcb6d77 100644
--- a/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/dropdown/dropdown-demo/dropdown-demo.component.html
@@ -1,7 +1,7 @@
 <div class="d-flex">
   <div>
     <label for="dropdownBasic1" class="form-label">Basic dropdown</label>
-    <div ngbDropdown class="me-2">
+    <div ngbDropdown class="me-8">
       <button class="btn btn-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
         <button ngbDropdownItem>Action - 1</button>
@@ -23,7 +23,7 @@
   </div>
   <div>
     <label for="dropdownBasic2" class="form-label">Basic dropup</label>
-    <div ngbDropdown placement="top-right" class="me-2">
+    <div ngbDropdown placement="top-right" class="me-8">
       <button class="btn btn-secondary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
         <button ngbDropdownItem>Action - 1</button>
@@ -36,7 +36,7 @@
   </div>
   <div>
     <label for="dropdownBasic3" class="form-label">Long dropup with scroll</label>
-    <div ngbDropdown placement="top-right" class="me-2">
+    <div ngbDropdown placement="top-right" class="me-8">
       <button class="btn btn-primary" id="dropdownBasic3" ngbDropdownToggle>Toggle dropup</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
         <button ngbDropdownItem>Action - 1</button>
@@ -60,7 +60,7 @@
   </div>
   <div>
     <label for="dropdownBasic4" class="form-label">Dropdown with icons</label>
-    <div ngbDropdown class="me-2">
+    <div ngbDropdown class="me-8">
       <button class="btn btn-secondary" id="dropdownBasic4" ngbDropdownToggle>
         Toggle dropdown
       </button>
diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html
index b474646bd8..bb779b2e2e 100644
--- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo-page/modal-demo-page.component.html
@@ -1,10 +1,10 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Modal</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
 <section>
-  <p class="font-curve-regular light mb-5">
+  <p class="font-curve-regular light mb-48">
     To manually remove the focus styles on close button in modal, you will need to add
     <code>ngbAutofocus tabindex="-1"</code>
     to the title with class modal-title. For advanced focus management (focus the [X] button, focus
@@ -27,4 +27,4 @@ <h3 class="bold h5">modal.component.html</h3>
 <code class="block" [highlight]="modalTemplate" [languages]="['html']"></code>
 
 <h3 class="bold h5">modal.component.ts</h3>
-<code class="block mb-5" [highlight]="modalTsTemplate" [languages]="['typescript']"></code>
+<code class="block mb-48" [highlight]="modalTsTemplate" [languages]="['typescript']"></code>
diff --git a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html
index 529e7b541e..b2f689dcac 100644
--- a/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/modal/modal-demo/modal-demo.component.html
@@ -3,10 +3,10 @@ <h3>Default modal</h3>
 <hr />
 
 <h3>Sizes</h3>
-<button type="button" class="btn btn-secondary me-2" (click)="open({ size: 'sm' })">
+<button type="button" class="btn btn-secondary me-8" (click)="open({ size: 'sm' })">
   Small modal
 </button>
-<button type="button" class="btn btn-secondary me-2" (click)="open({ size: 'lg' })">
+<button type="button" class="btn btn-secondary me-8" (click)="open({ size: 'lg' })">
   Large modal
 </button>
 <button type="button" class="btn btn-secondary" (click)="open({ size: 'xl' })">
diff --git a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html
index 1ec54379df..f9d409debe 100644
--- a/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/pagination/pagination-demo-page/pagination-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Pagination</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html
index b15ed30d3d..ac3b480710 100644
--- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo-page/popover-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Popover</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html
index fb6c192bfe..357f72eb31 100644
--- a/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/popover/popover-demo/popover-demo.component.html
@@ -1,4 +1,4 @@
-<div class="d-flex flex-wrap gap-3">
+<div class="d-flex flex-wrap gap-16">
   <button
     type="button"
     class="btn btn-animated btn-secondary"
diff --git a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html
index c18f782315..d6dab0a5ab 100644
--- a/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/progressbar/progressbar-demo-page/progressbar-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Progressbar</h1>
   <app-dependency-link></app-dependency-link>
 </div>
@@ -13,7 +13,7 @@ <h1 class="bold font-curve-large">Progressbar</h1>
 ></code>
 
 <app-ngb-localization>
-  <p class="light font-curve-regular mt-4">
+  <p class="light font-curve-regular mt-24">
     The progress bar also requires an
     <code>ariaLabel</code>
     attribute which provides context to the current progress. See the example above for how to use
diff --git a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html
index 55ded9ea97..6e88868470 100644
--- a/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/rating/rating-demo-page/rating-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Rating</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.html
index b6565697fb..ace1f62a7c 100644
--- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo-page/tabs-demo-page.component.html
@@ -1,10 +1,10 @@
-<div class="heading py-5 container">
+<div class="heading py-48 container">
   <h1 class="bold font-curve-large">Tabs</h1>
   <app-dependency-link documentationPath="components/nav"></app-dependency-link>
 </div>
 
 <section>
-  <div class="my-5">
+  <div class="my-48">
     <div class="container">
       <h3 class="bold">Default</h3>
       <p class="font-curve-regular light">
@@ -21,7 +21,7 @@ <h3 class="bold">Default</h3>
       <code class="block" [highlight]="defaultSnippet" [languages]="['html']"></code>
     </div>
   </div>
-  <div class="bg-nightblue mt-5 py-5">
+  <div class="bg-nightblue mt-48 py-48">
     <div class="container">
       <h3 class="bold">Dark background</h3>
     </div>
@@ -30,7 +30,7 @@ <h3 class="bold">Dark background</h3>
       <code class="block" [highlight]="darkBgSnippet" [languages]="['html']"></code>
     </div>
   </div>
-  <div class="bg-light mb-5 py-5">
+  <div class="bg-light mb-48 py-48">
     <div class="container">
       <h3 class="bold">Light background</h3>
     </div>
@@ -39,12 +39,12 @@ <h3 class="bold">Light background</h3>
       <code class="block" [highlight]="lightBgSnippet" [languages]="['html']"></code>
     </div>
   </div>
-  <div class="my-5">
+  <div class="my-48">
     <div class="container">
       <h3 class="bold">Colored tabs on white background</h3>
     </div>
     <app-ngb-tabs-demo wrapperBg="white" contentBg="coral" tabsBg="coral"></app-ngb-tabs-demo>
-    <div class="bg-coral pb-5">
+    <div class="bg-coral pb-48">
       <div class="container">
         <h4 class="bold">Heads up!</h4>
         <p class="font-curve-regular light">
@@ -57,7 +57,7 @@ <h4 class="bold">Heads up!</h4>
     </div>
   </div>
 
-  <div class="my-5 container">
+  <div class="my-48 container">
     <h3 class="bold">
       Tabs inside a
       <code>.container</code>
@@ -73,7 +73,7 @@ <h3 class="bold">
                 <img src="https://i.imgur.com/676x4D5.jpg" alt="" />
               </div>
               <div class="col-md-8">
-                <h3 class="bold h2 mb-4">Inside job</h3>
+                <h3 class="bold h2 mb-24">Inside job</h3>
                 <p>
                   <i><strong>Inside Job</strong></i>
                   is a 2010 American
@@ -133,7 +133,7 @@ <h3 class="bold h2 mb-4">Inside job</h3>
                 <img src="https://i.imgur.com/c4LLjQZ.jpg" alt="" />
               </div>
               <div class="col-md-8">
-                <h3 class="bold h2 mb-4">Inside out</h3>
+                <h3 class="bold h2 mb-24">Inside out</h3>
                 <p>
                   <i><strong>Inside Out</strong></i>
                   is a 2015 American
@@ -301,7 +301,7 @@ <h3 class="bold h2 mb-4">Inside out</h3>
 
     <div [ngbNavOutlet]="nav" class="tab-content"></div>
 
-    <p class="light font-curve-regular mt-4">
+    <p class="light font-curve-regular mt-24">
       Notice the
       <code>.container</code>
       around all the tabs and the missing
diff --git a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html
index 0c69481e48..8f9f3473a2 100644
--- a/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/tabs/tabs-demo/tabs-demo.component.html
@@ -9,7 +9,7 @@
             <div class="col-md-4">
               <figure>
                 <img src="https://i.imgur.com/SVgu1UI.jpg" alt="Mantis Shrimp on the sea floor" />
-                <figcaption class="mt-1">
+                <figcaption class="mt-4">
                   <em>
                     Photo by
                     <a
@@ -29,7 +29,7 @@
             </div>
             <div class="col-md-8">
               <h3 class="bold h2 mb-0">Mantis shrimp</h3>
-              <h4 class="light h2 mb-4">The heaviest punch</h4>
+              <h4 class="light h2 mb-24">The heaviest punch</h4>
               <p>
                 <strong>Mantis shrimps</strong>
                 , or
@@ -163,7 +163,7 @@ <h4 class="light h2 mb-4">The heaviest punch</h4>
             </div>
             <div class="col-md-8">
               <h3 class="bold h2 mb-0">Tardigrades</h3>
-              <h4 class="light h2 mb-4">The toughest guy</h4>
+              <h4 class="light h2 mb-24">The toughest guy</h4>
               <p>
                 <strong>Tardigrades</strong>
                 (
@@ -378,7 +378,7 @@ <h4 class="light h2 mb-4">The toughest guy</h4>
             </div>
             <div class="col-md-8">
               <h3 class="bold h2 mb-0">Turritopsis dohrnii</h3>
-              <h4 class="light h2 mb-4">The immortal</h4>
+              <h4 class="light h2 mb-24">The immortal</h4>
               <p>
                 <i><strong>Turritopsis dohrnii</strong></i>
                 , also known as the
@@ -535,7 +535,7 @@ <h4 class="light h2 mb-4">The immortal</h4>
             </div>
             <div class="col-md-8">
               <h3 class="bold h2 mb-0">Platypus</h3>
-              <h4 class="light h2 mb-4">The patchwork animal</h4>
+              <h4 class="light h2 mb-24">The patchwork animal</h4>
               <p>
                 The
                 <strong>platypus</strong>
@@ -750,5 +750,5 @@ <h4 class="light h2 mb-4">The patchwork animal</h4>
 
 <!-- the additional div and conditional color classes are for demo purposes only -->
 <div [class]="contentBg ? 'bg-' + contentBg : ''">
-  <div [ngbNavOutlet]="nav" class="container py-5"></div>
+  <div [ngbNavOutlet]="nav" class="container py-48"></div>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.html
index 6b77579656..c455c64591 100644
--- a/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/timepicker/timepicker-demo-page/timepicker-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Timepicker</h1>
   <app-dependency-link></app-dependency-link>
 </div>
@@ -7,7 +7,7 @@ <h1 class="bold font-curve-large">Timepicker</h1>
   <app-timepicker-demo></app-timepicker-demo>
 </section>
 
-<h3 class="h5 bold mt-4">timepicker.component.html</h3>
+<h3 class="h5 bold mt-24">timepicker.component.html</h3>
 <code class="block" [highlight]="codeTemplate" [languages]="['html']"></code>
 
 <app-ngb-localization />
diff --git a/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component.html
index 637a2d2c93..a34039a3d4 100644
--- a/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo-page/tooltip-demo-page.component.html
@@ -1,11 +1,11 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Tooltip</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
 <section>
   <app-ngb-tooltip-demo></app-ngb-tooltip-demo>
-  <p class="mt-3">
+  <p class="mt-16">
     Using
     <code>placement="[position] auto"</code>
     allows the tooltip to be displayed in another location if there is no room for the initial
diff --git a/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo/tooltip-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo/tooltip-demo.component.html
index 313c30b9fb..118f28c9d8 100644
--- a/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo/tooltip-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/tooltip/tooltip-demo/tooltip-demo.component.html
@@ -1,7 +1,7 @@
-<div class="d-flex gap-3 flex-wrap">
+<div class="d-flex gap-16 flex-wrap">
   <button
     type="button"
-    class="btn btn-secondary me-2"
+    class="btn btn-secondary me-8"
     placement="top auto"
     ngbTooltip="Tooltip on top"
   >
@@ -9,7 +9,7 @@
   </button>
   <button
     type="button"
-    class="btn btn-secondary me-2"
+    class="btn btn-secondary me-8"
     placement="right auto"
     ngbTooltip="Tooltip on right"
   >
@@ -17,7 +17,7 @@
   </button>
   <button
     type="button"
-    class="btn btn-secondary me-2"
+    class="btn btn-secondary me-8"
     placement="bottom auto"
     ngbTooltip="Tooltip on bottom"
   >
@@ -25,7 +25,7 @@
   </button>
   <button
     type="button"
-    class="btn btn-secondary me-2"
+    class="btn btn-secondary me-8"
     placement="left auto"
     ngbTooltip="Tooltip on left"
   >
@@ -45,7 +45,7 @@
 
   <button
     type="button"
-    class="btn btn-secondary me-2"
+    class="btn btn-secondary me-8"
     placement="top auto"
     [ngbTooltip]="tooltipContent"
   >
diff --git a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html
index 2913321e82..3aacbd125b 100644
--- a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo-page/typeahead-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Typeahead</h1>
   <app-dependency-link></app-dependency-link>
 </div>
diff --git a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html
index 255ae7ae0b..fce69b2085 100644
--- a/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html
+++ b/packages/demo/src/app/ng-bootstrap/components/typeahead/typeahead-demo/typeahead-demo.component.html
@@ -9,7 +9,7 @@
   <li>limits to 10 results</li>
 </ul>
 
-<div class="form-floating mb-3">
+<div class="form-floating mb-16">
   <input
     id="typeahead-basic"
     placeholder=" "
diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.html b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.html
index ec27127f84..7cc9c069ed 100644
--- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo-page/custom-select-demo-page.component.html
@@ -1,8 +1,8 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Custom select</h1>
 </div>
 
-<div class="alert alert-warning mb-bigger-big">
+<div class="alert alert-warning mb-40">
   <h2 class="alert-heading">This component is deprecated</h2>
   <p>It will be removed in the next major version.</p>
 </div>
@@ -15,11 +15,11 @@ <h2 class="alert-heading">This component is deprecated</h2>
   <app-custom-select-demo></app-custom-select-demo>
 </section>
 
-<p class="h5 bold mt-huge">custom-select-with-floating-label.component.html</p>
+<p class="h5 bold mt-56">custom-select-with-floating-label.component.html</p>
 <code class="block" [highlight]="codeTemplateFloating" [languages]="['html']"></code>
 
-<p class="h5 bold mt-huge">custom-select.component.html</p>
+<p class="h5 bold mt-56">custom-select.component.html</p>
 <code class="block" [highlight]="codeTemplate" [languages]="['html']"></code>
 
-<p class="h5 bold mt-big">custom-select.component.ts</p>
+<p class="h5 bold mt-32">custom-select.component.ts</p>
 <code class="block" [highlight]="codeComponent" [languages]="['typescript']"></code>
diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.html b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.html
index b1c731bd8f..eb42edb536 100644
--- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-demo/custom-select-demo.component.html
@@ -25,7 +25,7 @@
       type="button"
       #option
     >
-      <em aria-hidden="true" class="pi me-small-regular" [class]="'pi-' + option.icon"></em>
+      <em aria-hidden="true" class="pi me-12" [class]="'pi-' + option.icon"></em>
       <span>{{ option.label }}</span>
     </button>
   </div>
diff --git a/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.html b/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.html
index cc656ef98e..edf9db4743 100644
--- a/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/custom-select/custom-select-floating-demo/custom-select-floating-demo.component.html
@@ -32,7 +32,7 @@
       type="button"
       #option
     >
-      <em aria-hidden="true" class="pi me-small-regular" [class]="'pi-' + option.icon"></em>
+      <em aria-hidden="true" class="pi me-12" [class]="'pi-' + option.icon"></em>
       <span>{{ option.label }}</span>
     </button>
   </div>
diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html
index 7414e2c100..aa9ad5ee28 100644
--- a/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/datatable/datatable-demo-page/datatable-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Datatable</h1>
   <h2 class="font-curve-medium">Using ngx-datatable 20.0.0</h2>
   <a
@@ -20,7 +20,7 @@ <h2 class="font-curve-medium">Using ngx-datatable 20.0.0</h2>
   </a>
 </div>
 
-<div class="alert alert-warning mb-bigger-big" role="alert">
+<div class="alert alert-warning mb-40" role="alert">
   <h4 class="alert-heading">Ngx-datatable is not fully accessible</h4>
   <p>
     The datatable offered by the ngx-datatable package does not meet the required accessibility
@@ -30,7 +30,7 @@ <h4 class="alert-heading">Ngx-datatable is not fully accessible</h4>
 
 <section>
   <h3>Basic datatable</h3>
-  <div class="row my-large align-items-end">
+  <div class="row my-24 align-items-end">
     <div class="col">
       <label class="form-label" for="tableType">Table style</label>
       <select id="tableType" class="form-select" [(ngModel)]="tableType">
@@ -62,12 +62,12 @@ <h3>Basic datatable</h3>
       </div>
     </div>
   </div>
-  <div [ngClass]="{ 'bg-light p-regular': tableType === 'inverted-colors' }">
+  <div [ngClass]="{ 'bg-light p-16': tableType === 'inverted-colors' }">
     <app-datatable-demo [tableType]="tableType" [headerColumn]="headerColumn"></app-datatable-demo>
   </div>
-  <p class="h5 bold mt-4">datatable-demo.component.html</p>
+  <p class="h5 bold mt-24">datatable-demo.component.html</p>
   <code class="block" [highlight]="basicTemplate" [languages]="['html']"></code>
-  <p class="h5 bold mt-4">datatable-demo.component.ts</p>
+  <p class="h5 bold mt-24">datatable-demo.component.ts</p>
   <code class="block" [highlight]="basicComponent" [languages]="['typescript']"></code>
 </section>
 
@@ -75,7 +75,7 @@ <h3>Basic datatable</h3>
 
 <section>
   <h3>Paginated datatable</h3>
-  <div class="my-large w-25">
+  <div class="my-24 w-25">
     <label class="form-label" for="paginationMode">Pagination mode</label>
     <select class="form-select" id="paginationMode" [(ngModel)]="paginationMode">
       <option value="standard">Standard pagination</option>
@@ -83,7 +83,7 @@ <h3>Paginated datatable</h3>
     </select>
   </div>
   <app-datatable-paginated-demo [paginationMode]="paginationMode"></app-datatable-paginated-demo>
-  <p class="h5 bold mt-4">datatable-paginated-demo.component.html</p>
+  <p class="h5 bold mt-24">datatable-paginated-demo.component.html</p>
   <code class="block" [highlight]="paginationTemplate" [languages]="['html']"></code>
 </section>
 
@@ -92,13 +92,13 @@ <h3>Paginated datatable</h3>
 <section>
   <h3>Editable datatable</h3>
   <app-datatable-editable-demo></app-datatable-editable-demo>
-  <p class="h5 bold mt-4">datatable-editable-demo.component.html</p>
+  <p class="h5 bold mt-24">datatable-editable-demo.component.html</p>
   <code class="block" [highlight]="editionTemplate" [languages]="['html']"></code>
 </section>
 
 <section>
   <h3>Datatable with loading indicator</h3>
   <app-datatable-loading-demo></app-datatable-loading-demo>
-  <p class="h5 bold mt-4">datatable-loading-demo.component.html</p>
+  <p class="h5 bold mt-24">datatable-loading-demo.component.html</p>
   <code class="block" [highlight]="loadingTemplate" [languages]="['html']"></code>
 </section>
diff --git a/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.html b/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.html
index af1ca56f6c..5cf84febc4 100644
--- a/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/datatable/datatable-editable-demo/datatable-editable-demo.component.html
@@ -53,9 +53,9 @@
 
 <!-- Edition form -->
 <ng-template #editionForm let-dropdown="dropdown" let-row="row" let-rowIndex="rowIndex">
-  <form #f="ngForm" (submit)="Object.assign(rows[rowIndex], f.value)" class="p-regular">
-    <p class="h5 font-weight-bold mb-regular">Update product</p>
-    <div class="form-floating mb-regular">
+  <form #f="ngForm" (submit)="Object.assign(rows[rowIndex], f.value)" class="p-16">
+    <p class="h5 font-weight-bold mb-16">Update product</p>
+    <div class="form-floating mb-16">
       <input
         [ngModel]="row.product"
         [id]="'productName_' + row.id"
@@ -65,7 +65,7 @@
       />
       <label class="form-label" [for]="'productName_' + row.id">Product name</label>
     </div>
-    <div class="form-floating mb-regular">
+    <div class="form-floating mb-16">
       <input
         [ngModel]="row.quantity"
         [id]="'quantity_' + row.id"
@@ -75,7 +75,7 @@
       />
       <label class="form-label" [for]="'quantity_' + row.id">Available quantity</label>
     </div>
-    <div class="d-flex flex-row-reverse pt-regular">
+    <div class="d-flex flex-row-reverse pt-16">
       <button
         (click)="dropdown.close()"
         [disabled]="f.pristine"
@@ -84,7 +84,7 @@
       >
         Apply
       </button>
-      <button (click)="dropdown.close()" class="btn btn-rg btn-secondary me-mini" type="button">
+      <button (click)="dropdown.close()" class="btn btn-rg btn-secondary me-8" type="button">
         Cancel
       </button>
     </div>
diff --git a/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html b/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html
index 1d2d9c2c17..3363a15b68 100644
--- a/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/feedback/feedback-demo-page/feedback-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Feedback</h1>
 </div>
 
diff --git a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.html b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.html
index 02308b9c2c..5e5c64cb96 100644
--- a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.html
@@ -30,7 +30,7 @@ <h2 id="basic-input" class="bold mt-giant-r">Basic input</h2>
     label, screen-reader users have no idea what the input should be, even if there is other text
     next to the field.
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <label class="form-label" for="basic-input-firstname">Firstname</label>
     <input type="text" id="basic-input-firstname" class="form-control" placeholder="Firstname" />
   </div>
@@ -42,8 +42,8 @@ <h2 id="vertical-spacing" class="bold mt-giant-r">Vertical spacing</h2>
     <a routerLink="/post-samples/sizing#padding-and-margin">margin utilities</a>
     .
   </p>
-  <div class="bg-light p-big">
-    <div class="mb-regular">
+  <div class="bg-light p-32">
+    <div class="mb-16">
       <label class="form-label" for="vertical-spacing-firstname">Firstname</label>
       <input
         type="text"
@@ -52,7 +52,7 @@ <h2 id="vertical-spacing" class="bold mt-giant-r">Vertical spacing</h2>
         placeholder="Firstname"
       />
     </div>
-    <div class="mb-regular">
+    <div class="mb-16">
       <label class="form-label" for="vertical-spacing-lastname">Lastname</label>
       <input
         type="text"
@@ -80,7 +80,7 @@ <h2 id="rows-n-cols" class="bold mt-giant-r" style="font-variant-ligatures: none
     <a href="https://getbootstrap.com/docs/5.1/layout/grid/#row-columns">Bootstrap Row Columns</a>
     ).
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <div class="row row-cols-1 row-cols-md-2">
       <div class="col">
         <label class="form-label" for="rows-n-cols-firstname">Firstname</label>
@@ -113,7 +113,7 @@ <h2 id="rows-n-cols" class="bold mt-giant-r" style="font-variant-ligatures: none
     <code>.col-4</code>
     to you two columns respectively.
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <div class="row">
       <div class="col-8">
         <label class="form-label" for="rows-n-cols-city">City</label>
@@ -137,7 +137,7 @@ <h2 id="fields-with-custom-width" class="bold mt-giant-r">Fields with custom wid
     class, this col is sized based on it's content. The other row is stretched to the container
     width. With this setup, we can define a max-width on the input field to shrink it.
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <div class="row">
       <div class="col-auto">
         <label class="form-label" for="custom-width-zip">Zip</label>
@@ -164,19 +164,19 @@ <h2 id="form-buttons" class="bold mt-giant-r">Form buttons</h2>
     <code>d-flex flex-row-reverse</code>
     . This will ensure that the primary button is focused first (because of the markup order) but is
     still aligned to the right. To get some margin between the button we can use the
-    <code>.gap-mini</code>
+    <code>.gap-8</code>
     class. Note that for the buttons, we don't need any row/col structure. Read more about gap
     classes at
     <a routerLink="https://getbootstrap.com/docs/5.1/utilities/spacing/#gap">Bootstrap Gaps</a>
     .
   </p>
-  <div class="bg-light p-big">
-    <div class="mb-regular">
+  <div class="bg-light p-32">
+    <div class="mb-16">
       <label class="form-label" for="form-buttons-firstname">Firstname</label>
       <input type="text" id="form-buttons-firstname" class="form-control" placeholder="Firstname" />
     </div>
 
-    <div class="d-flex flex-row-reverse gap-mini">
+    <div class="d-flex flex-row-reverse gap-8">
       <button class="btn btn-primary">Send</button>
       <button class="btn btn-secondary">Cancel</button>
     </div>
@@ -195,7 +195,7 @@ <h2 id="floating-labels" class="bold mt-giant-r">Floating labels</h2>
     div. In addition, the input field needs a placeholder attribute, preferably equal to a single
     space.
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <div class="row">
       <div class="col">
         <div class="form-floating">
@@ -222,7 +222,7 @@ <h2 id="validation-messages" class="bold mt-giant-r">Validation messages</h2>
     in the case of floating label). Showing and hiding of these messages is typically controlled by
     adding and removing validation classes on the input:
   </p>
-  <ul class="light font-curve-regular px-giant">
+  <ul class="light font-curve-regular px-80">
     <li>
       The message needs the class
       <code>.invalid-feedback/.valid-feedback</code>
@@ -245,7 +245,7 @@ <h2 id="validation-messages" class="bold mt-giant-r">Validation messages</h2>
       </ul>
     </li>
   </ul>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <form action="/" class="was-validated">
       <!-- Form Control -->
       <div class="row">
@@ -299,7 +299,7 @@ <h2 id="hints" class="bold mt-giant-r">Hints</h2>
     <code>&lt;input&gt;</code>
     with the aria-labelledby attribute to the hint via id.
   </p>
-  <div class="bg-light p-big">
+  <div class="bg-light p-32">
     <div class="form-floating">
       <input
         id="hints-firstname"
@@ -309,7 +309,7 @@ <h2 id="hints" class="bold mt-giant-r">Hints</h2>
         placeholder=" "
       />
       <label class="form-label" for="hints-firstname">Firstname</label>
-      <div id="firstname-hint" class="form-text d-flex align-items-center gap-mini">
+      <div id="firstname-hint" class="form-text d-flex align-items-center gap-8">
         <i class="pi pi-info" aria-hidden="true"></i>
         <span>Also provide any middle names in this field</span>
       </div>
diff --git a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.ts b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.ts
index 6c448f6036..2d6c095b09 100644
--- a/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.ts
+++ b/packages/demo/src/app/post-sample/components/forms/forms-demo-page/forms-demo-page.component.ts
@@ -38,19 +38,19 @@ export class FormsDemoPageComponent {
     <input type="text" id="city" class="form-control" placeholder="City">
   </div>
 </div>`;
-  verticalSpacing = `<div class="mb-regular">
+  verticalSpacing = `<div class="mb-16">
   <label for="firstname">Firstname</label>
   <input type="text" id="firstname" class="form-control" placeholder="Firstname">
 </div>
-<div class="mb-regular">
+<div class="mb-16">
   <label for="lastname">Lastname</label>
   <input type="text" id="lastname" class="form-control" placeholder="Lastname">
 </div>`;
-  buttons = `<div class="mb-regular">
+  buttons = `<div class="mb-16">
   <label for="firstname">Firstname</label>
   <input type="text" id="firstname" class="form-control" placeholder="Firstname">
 </div>
-<div class="d-flex flex-row-reverse gap-mini">
+<div class="d-flex flex-row-reverse gap-8">
   <button class="btn btn-primary">Send</button>
   <button class="btn btn-secondary">Cancel</button>
 </div>`;
diff --git a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html
index c7e3ccdcb7..0c560ae85e 100644
--- a/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/icons/icons-demo-page/icons-demo-page.component.html
@@ -1,10 +1,10 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Post icons</h1>
 </div>
 
 <div class="alert alert-info">
   <h2 class="h5">We have something new for you!</h2>
-  <p class="mt-2">
+  <p class="mt-8">
     The usage of icons as base64 encoded background images in CSS will soon be deprecated. You can
     switch to the brand new icon component
     <code>post-icon</code>
@@ -14,7 +14,7 @@ <h2 class="h5">We have something new for you!</h2>
     </a>
     featuring a search and over 800 icons.
   </p>
-  <p class="mt-3">
+  <p class="mt-16">
     <a
       href="https://design-system.post.ch/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs"
       class="btn btn-primary"
diff --git a/packages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.html b/packages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.html
index 5374c25266..f1c9e89314 100644
--- a/packages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.html
@@ -5,11 +5,11 @@
   </p>
   <h4>Example:</h4>
   <div class="row">
-    <div class="col-2 mb-3"><strong>Rendered</strong></div>
+    <div class="col-2 mb-16"><strong>Rendered</strong></div>
     <div class="col-2"><strong>Applied classes</strong></div>
     <div class="col-4"><strong>Markup</strong></div>
     <div class="col-4"><strong>SASS</strong></div>
-    <div class="col-2 mb-3 text-center">
+    <div class="col-2 mb-16 text-center">
       <i class="pi pi-1000" aria-hidden="true"></i>
     </div>
     <div class="col-2">pi pi-1000</div>
@@ -19,7 +19,7 @@ <h4>Example:</h4>
     <div class="col-4">
       <code class="sass">// No additional SASS necessary</code>
     </div>
-    <div class="col-2 mb-3 text-center">
+    <div class="col-2 mb-16 text-center">
       <i class="pi pi-1000-warning" aria-hidden="true"></i>
     </div>
     <div class="col-2">
@@ -41,7 +41,7 @@ <h4>Example:</h4>
         &#125;
       </code>
     </div>
-    <div class="col-2 mb-3 text-center">
+    <div class="col-2 mb-16 text-center">
       <i class="pi pi-heart" aria-hidden="true"></i>
     </div>
     <div class="col-2">pi pi-heart</div>
@@ -59,7 +59,7 @@ <h4>Example:</h4>
         &#125;
       </code>
     </div>
-    <div class="col-2 mb-3 text-center">
+    <div class="col-2 mb-16 text-center">
       <i class="pi pi-heart-coral pi-border" aria-hidden="true"></i>
     </div>
     <div class="col-2">pi pi-heart-coral pi-border</div>
@@ -87,7 +87,7 @@ <h4>Colors</h4>
   </p>
   <section class="row">
     <div
-      class="col-12 p-2"
+      class="col-12 p-8"
       *ngFor="let color of colors"
       [ngClass]="color === 'white' ? 'bg-primary' : ''"
     >
@@ -105,7 +105,7 @@ <h4>Colors</h4>
         </code>
       </div>
     </div>
-    <div class="col-12 mt-3">
+    <div class="col-12 mt-16">
       Include a certain icon in all contextual colors (Example for pi-1000):
       <br />
       <code class="sass">
@@ -122,7 +122,7 @@ <h4>Colors</h4>
         &#125;
       </code>
     </div>
-    <div class="col-12 mt-3">
+    <div class="col-12 mt-16">
       Include the entire icon set in a specific color (Example for Post-Color "Nightblue"):
       <br />
       <code class="sass">
@@ -143,35 +143,35 @@ <h4>Colors</h4>
   </section>
   <h4>Available Adjustments</h4>
   <section class="row">
-    <div class="col-2 text-center mb-3">
+    <div class="col-2 text-center mb-16">
       <i class="pi pi-border pi-1000" aria-hidden="true"></i>
     </div>
     <div class="col-3">
       <strong>With border</strong>
     </div>
     <code class="col-7">&lt;i class="pi pi-border pi-1000"&gt;&lt;/i&gt;</code>
-    <div class="col-2 text-center mb-3">
+    <div class="col-2 text-center mb-16">
       <i class="pi pi-1000 pi-small" aria-hidden="true"></i>
     </div>
     <div class="col-3">
       <strong>Small</strong>
     </div>
     <code class="col-7">&lt;i class="pi pi-small pi-1000"&gt;&lt;/i&gt;</code>
-    <div class="col-2 text-center mb-3">
+    <div class="col-2 text-center mb-16">
       <i class="pi pi-1000 pi-2x" aria-hidden="true"></i>
     </div>
     <div class="col-3">
       <strong>2x</strong>
     </div>
     <code class="col-7">&lt;i class="pi pi-2x pi-1000"&gt;&lt;/i&gt;</code>
-    <div class="col-2 text-center mb-3">
+    <div class="col-2 text-center mb-16">
       <i class="pi pi-1000 pi-3x" aria-hidden="true"></i>
     </div>
     <div class="col-3">
       <strong>3x</strong>
     </div>
     <code class="col-7">&lt;i class="pi pi-3x pi-1000"&gt;&lt;/i&gt;</code>
-    <div class="col-2 text-center mb-3">
+    <div class="col-2 text-center mb-16">
       <i class="pi pi-1000 pi-4x" aria-hidden="true"></i>
     </div>
     <div class="col-3">
@@ -186,17 +186,17 @@ <h4>All SVG Icons</h4>
     .
   </p>
   <section class="row">
-    <div class="col-auto mb-2 text-center" *ngFor="let iconName of preColored">
+    <div class="col-auto mb-8 text-center" *ngFor="let iconName of preColored">
       <i class="pi" [class]="'pi-' + iconName" aria-hidden="true"></i>
       <br />
-      <code class="text-dark mt-1">pi-{{ iconName }}</code>
+      <code class="text-dark mt-4">pi-{{ iconName }}</code>
     </div>
   </section>
   <section class="row">
-    <div class="col-auto mb-2 text-center" *ngFor="let nr of range">
+    <div class="col-auto mb-8 text-center" *ngFor="let nr of range">
       <i class="pi" [class]="'pi-' + nr" aria-hidden="true"></i>
       <br />
-      <code class="text-dark mt-1">pi-{{ nr }}</code>
+      <code class="text-dark mt-4">pi-{{ nr }}</code>
     </div>
   </section>
 </section>
diff --git a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-content/notification-overlay.content.html b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-content/notification-overlay.content.html
index d6e0278af0..e405c5d3b1 100644
--- a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-content/notification-overlay.content.html
+++ b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-content/notification-overlay.content.html
@@ -1,6 +1,6 @@
-<div class="modal-header p-5 mb-3 rounded-top bg-danger">
+<div class="modal-header p-48 mb-16 rounded-top bg-danger">
   <div class="text-center">
-    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-4 mb-3"></span>
+    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-24 mb-16"></span>
     <p class="h4 bold">Bitte prüfen Sie Ihre Angaben</p>
     <p class="h4">Einige Angaben zur Rückseite fehlen oder sind unvollständig.</p>
   </div>
diff --git a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html
index e39e9ca624..001dcb481b 100644
--- a/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html
+++ b/packages/demo/src/app/post-sample/components/notification-overlay/notification-overlay-demo-page/notification-overlay-page.component.html
@@ -1,8 +1,8 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Notification overlay</h1>
 </div>
 
-<div class="mb-5">
+<div class="mb-48">
   This is just a simple to describe how to create an overlay notification only with bootstrap
   classes
 </div>
diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html
index 10600c94cd..4dd07f366a 100644
--- a/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html
+++ b/packages/demo/src/app/post-sample/components/post-cards/post-card-button/post-card-button.component.html
@@ -5,7 +5,7 @@
       <a href="#" class="card-body d-flex align-items-center">
         <i class="pi pi-1014-white"></i>
         <div>
-          <p class="mb-1">Schwerpunkt</p>
+          <p class="mb-4">Schwerpunkt</p>
           <h5 class="font-weight-bold mb-0">Post zurückbehalten</h5>
         </div>
       </a>
@@ -17,7 +17,7 @@ <h5 class="font-weight-bold mb-0">Post zurückbehalten</h5>
       <a href="#" class="card-body d-flex align-items-center">
         <i class="pi pi-1014-white"></i>
         <div>
-          <p class="mb-1">Schwerpunkt</p>
+          <p class="mb-4">Schwerpunkt</p>
           <h5 class="font-weight-bold mb-0">Briefmarken</h5>
         </div>
       </a>
@@ -29,7 +29,7 @@ <h5 class="font-weight-bold mb-0">Briefmarken</h5>
       <a href="#" class="card-body d-flex align-items-center">
         <i class="pi pi-1014-white"></i>
         <div>
-          <p class="mb-1">Schwerpunkt</p>
+          <p class="mb-4">Schwerpunkt</p>
           <h5 class="font-weight-bold mb-0">Meine Sendungen</h5>
         </div>
       </a>
@@ -41,7 +41,7 @@ <h5 class="font-weight-bold mb-0">Meine Sendungen</h5>
       <a href="#" class="card-body d-flex align-items-center">
         <i class="pi pi-1014-white"></i>
         <div>
-          <p class="mb-1">Schwerpunkt</p>
+          <p class="mb-4">Schwerpunkt</p>
           <h5 class="font-weight-bold mb-0">Pick&#64;home</h5>
         </div>
       </a>
@@ -53,7 +53,7 @@ <h5 class="font-weight-bold mb-0">Pick&#64;home</h5>
       <a href="#" class="card-body d-flex align-items-center">
         <i class="pi pi-1014-white"></i>
         <div>
-          <p class="mb-1">Schwerpunkt</p>
+          <p class="mb-4">Schwerpunkt</p>
           <h5 class="font-weight-bold mb-0">Post zurückbehalten</h5>
         </div>
       </a>
diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-navigation/post-card-product-navigation.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-navigation/post-card-product-navigation.component.html
index 2c23429c04..e24291f0b9 100644
--- a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-navigation/post-card-product-navigation.component.html
+++ b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-navigation/post-card-product-navigation.component.html
@@ -3,7 +3,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit.</p>
         </div>
         <span class="link-icon">
@@ -18,7 +18,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
         <span class="link-icon">
@@ -33,7 +33,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
         <span class="link-icon">
@@ -48,7 +48,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
         </div>
         <span class="link-icon">
           <i class="pi pi-3020" aria-hidden="true"></i>
@@ -62,7 +62,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
         <span class="link-icon">
@@ -77,7 +77,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
@@ -93,7 +93,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
         <span class="link-icon">
@@ -108,7 +108,7 @@
     <a href="#" class="card h-100 product-card">
       <div class="card-body product-navigation">
         <div>
-          <p class="bold h3 mb-regular">Preiswert</p>
+          <p class="bold h3 mb-16">Preiswert</p>
           <p class="lead">Lorem ipsum dolor sit. Lorem, ipsum dolor.</p>
         </div>
         <span class="link-icon">
diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html
index 38627d953e..fdb6d37776 100644
--- a/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html
+++ b/packages/demo/src/app/post-sample/components/post-cards/post-card-product-teaser/post-card-product-teaser.component.html
@@ -12,7 +12,7 @@ <h3>Javascript needed!</h3>
             <div class="product-navigation">
               <div>
                 <h3 class="font-weight-bold">Preiswert</h3>
-                <h4 class="mb-regular">Sample Product</h4>
+                <h4 class="mb-16">Sample Product</h4>
                 <p class="lead">
                   Mit SAMPLE PRODUCT kommen Ihre Briefe kostengünstig und zuverlässig ans Ziel.
                 </p>
@@ -29,7 +29,7 @@ <h4 class="mb-regular">Sample Product</h4>
           <div class="card-body bg-light" data-sync-height-with="product-body-1">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3">
+            <dl class="horizontal-list mt-16">
               <div class="horizontal-list-item">
                 <dt class="font-weight-light">bis 500 g</dt>
                 <dd class="h3 font-weight-bold">1.20</dd>
@@ -44,7 +44,7 @@ <h5 class="font-weight-bold h6">Sample Product</h5>
           <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3 align-items-stretch">
+            <dl class="horizontal-list mt-16 align-items-stretch">
               <div class="horizontal-list-item justify-content-between d-flex flex-column">
                 <dt class="font-weight-light">
                   so zwischen ca. 5g
@@ -79,7 +79,7 @@ <h5 class="font-weight-bold h6">Sample Product</h5>
           <div class="card-body bg-light" data-sync-height-with="product-body-3">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3">
+            <dl class="horizontal-list mt-16">
               <div class="horizontal-list-item">
                 <dt class="font-weight-light">bis 500 g</dt>
                 <dd class="h3 font-weight-bold">1.20</dd>
@@ -116,7 +116,7 @@ <h5 class="font-weight-bold h6">Sample Product</h5>
             <div class="product-navigation">
               <div>
                 <h3 class="font-weight-bold">Schneller</h3>
-                <h4 class="mb-regular">Sample Product</h4>
+                <h4 class="mb-16">Sample Product</h4>
                 <p class="lead">
                   Lorem ipsum aafw ea aewfwe awef awfeaea awefa wawef waf wawefa ea dolor sit amet
                   consectetur adipisicing elit. Iusto nulla laboriosam nesciunt. Unde velit dolores
@@ -135,7 +135,7 @@ <h4 class="mb-regular">Sample Product</h4>
           <div class="card-body bg-light" data-sync-height-with="product-body-1">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3">
+            <dl class="horizontal-list mt-16">
               <div class="horizontal-list-item">
                 <dt class="font-weight-light">bis 500 g</dt>
                 <dd class="h3 font-weight-bold">1.20</dd>
@@ -154,7 +154,7 @@ <h5 class="font-weight-bold h6">Sample Product</h5>
           <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3 align-items-stretch">
+            <dl class="horizontal-list mt-16 align-items-stretch">
               <div class="horizontal-list-item justify-content-between d-flex flex-column">
                 <dt class="font-weight-light">
                   so zwischen ca. 5g
@@ -177,7 +177,7 @@ <h5 class="font-weight-bold h6">Sample Product</h5>
           <div class="card-body bg-light" data-sync-height-with="product-body-3">
             <h5 class="font-weight-bold h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="horizontal-list mt-3">
+            <dl class="horizontal-list mt-16">
               <div class="horizontal-list-item">
                 <dt class="font-weight-light">bis 500 g</dt>
                 <dd class="h3 font-weight-bold">1.20</dd>
diff --git a/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html b/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html
index ac95cf7860..78514da4b6 100644
--- a/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/post-cards/post-cards-demo-page/post-cards-demo-page.component.html
@@ -1,43 +1,43 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Product Cards</h1>
   <app-dependency-link></app-dependency-link>
 </div>
 
 <section>
-  <h3 class="bold mt-big-r mb-3">Card Buttons</h3>
+  <h3 class="bold mt-big-r mb-16">Card Buttons</h3>
   <app-card-button></app-card-button>
   <code
-    class="block mt-3"
+    class="block mt-16"
     [highlight]="postCardButtonHtml"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 </section>
 
 <section>
-  <h3 class="bold mt-big-r mb-3">Product navigation</h3>
+  <h3 class="bold mt-big-r mb-16">Product navigation</h3>
   <app-card-product-navigation></app-card-product-navigation>
   <code
-    class="block mt-3"
+    class="block mt-16"
     [highlight]="postCardProductNavigationHtml"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 </section>
 
 <section>
-  <h3 class="bold mt-big-r mb-3">Product teaser with prices</h3>
-  <div class="bg-light p-big">
+  <h3 class="bold mt-big-r mb-16">Product teaser with prices</h3>
+  <div class="bg-light p-32">
     <app-card-product-teaser></app-card-product-teaser>
   </div>
 
-  <h4 class="mt-4 mb-3">component.html</h4>
+  <h4 class="mt-24 mb-16">component.html</h4>
   <code
-    class="block mt-3"
+    class="block mt-16"
     [highlight]="postCardProductTeaserHtml"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
-  <h4 class="mt-4 mb-3">component.ts</h4>
+  <h4 class="mt-24 mb-16">component.ts</h4>
   <code
-    class="block mt-3"
+    class="block mt-16"
     [highlight]="postCardProductTeaserTs"
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
diff --git a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html
index 0004ad0635..29dc84871d 100644
--- a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.html
@@ -9,12 +9,12 @@ <h5>Manually specifying breakpoints</h5>
       The square below has a "Big" padding from the large (lg) breakpoint and a "Regular" padding
       below.
     </p>
-    <div class="border border-dark bg-petrol h-bigger-giant w-bigger-giant p-regular p-lg-big">
+    <div class="border border-dark bg-petrol h-bigger-giant w-bigger-giant p-16 p-lg-32">
       <div class="bg-light h-100"></div>
     </div>
 
     <!-- Code sample -->
-    <code class="mt-regular block" [highlight]="highlightManualDemo" [languages]="['html']"></code>
+    <code class="mt-16 block" [highlight]="highlightManualDemo" [languages]="['html']"></code>
   </div>
   <div class="col d-flex flex-column">
     <h5>Using automatic responsive behavior</h5>
@@ -28,7 +28,7 @@ <h5>Using automatic responsive behavior</h5>
 
     <!-- Code sample -->
     <code
-      class="mt-regular block"
+      class="mt-16 block"
       [highlight]="highlightAutomaticDemo"
       [languages]="['html']"
     ></code>
diff --git a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts
index 49b04f8994..6b46043ea2 100644
--- a/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts
+++ b/packages/demo/src/app/post-sample/components/sizing/responsive-sizing-demo/responsive-sizing-demo.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
 })
 export class ResponsiveSizingDemoComponent {
   get highlightManualDemo(): string {
-    return `<div class="p-regular p-lg-big"></div>`;
+    return `<div class="p-16 p-lg-32"></div>`;
   }
 
   get highlightAutomaticDemo(): string {
diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html
index 0d12ee919d..ee0cf53065 100644
--- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Sizing</h1>
   <app-dependency-link
     [documentationPaths]="{ sizing: 'utilities/sizing', spacing: 'utilities/spacing' }"
@@ -15,7 +15,7 @@ <h3 class="h5">Sizing variables are deprecated</h3>
     and have a look at the
     <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.
   </p>
-  <h4 class="h6 mt-regular">Affected properties:</h4>
+  <h4 class="h6 mt-16">Affected properties:</h4>
   <ul>
     <li>
       <strong>margin</strong>
@@ -42,7 +42,7 @@ <h4 class="h6 mt-regular">Affected properties:</h4>
       (new solution with updated naming system up coming)
     </li>
   </ul>
-  <h4 class="h6 mt-regular">NOT affected properties:</h4>
+  <h4 class="h6 mt-16">NOT affected properties:</h4>
   <ul>
     <li>
       Responsive behaviour (e.g.
@@ -53,7 +53,7 @@ <h4 class="h6 mt-regular">NOT affected properties:</h4>
 </div>
 
 <section>
-  <h3 id="post-sizes-reference-table" class="mt-5">Post-Sizes Reference Table</h3>
+  <h3 id="post-sizes-reference-table" class="mt-48">Post-Sizes Reference Table</h3>
   <table class="table table-striped table-sm" aria-describedby="post-sizes-reference-table">
     <thead class="thead-dark">
       <tr>
diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts
index 43c9be9893..6c832772d4 100644
--- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts
+++ b/packages/demo/src/app/post-sample/components/sizing/sizing-demo-page/sizing-demo-page.component.ts
@@ -15,7 +15,7 @@ enum PostSizeImplementation {
 
 const heightWidth = `<div class="d-block bg-primary w-bigger-giant h-small-regular"></div>`;
 const paddingMargin = `<div class="bg-primary d-inline-block">
-    <div class="bg-white d-inline-block p-regular m-mini ms-huge">Text</div>
+    <div class="bg-white d-inline-block p-16 m-8 ms-56">Text</div>
 </div>`;
 
 @Component({
diff --git a/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.html b/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.html
index 784ea270f7..d7ed0f51b8 100644
--- a/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/sizing/sizing-demo/sizing-demo.component.html
@@ -2,21 +2,21 @@
   ~ Copyright 2021 by Swiss Post, Information Technology
   -->
 
-<div class="d-flex bg-primary p-regular" style="height: 150px">
+<div class="d-flex bg-primary p-16" style="height: 150px">
   <div class="flex-fill">
     <div class="bg-light" [class]="demoClass"></div>
   </div>
 
   <!-- Legend -->
-  <ul class="ps-regular text-white">
-    <li class="d-flex align-items-center mb-regular">
-      <div class="bg-light h-regular w-regular me-mini"></div>
+  <ul class="ps-16 text-white">
+    <li class="d-flex align-items-center mb-16">
+      <div class="bg-light h-regular w-regular me-8"></div>
       <span>content</span>
     </li>
   </ul>
 </div>
 
-<form [formGroup]="demoForm" class="row mt-regular">
+<form [formGroup]="demoForm" class="row mt-16">
   <!-- Width control -->
   <div class="col" formGroupName="width">
     <label class="form-label" for="width">Width</label>
@@ -79,5 +79,5 @@
 </form>
 
 <!-- Code sample -->
-<p class="h5 bold mt-4">sizing-demo.component.html</p>
+<p class="h5 bold mt-24">sizing-demo.component.html</p>
 <code [highlight]="highlight" [languages]="['html']" class="block"></code>
diff --git a/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.html b/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.html
index 753f823d0d..d16468809c 100644
--- a/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/sizing/spacing-demo/spacing-demo.component.html
@@ -2,7 +2,7 @@
   ~ Copyright 2021 by Swiss Post, Information Technology
   -->
 
-<div class="bg-primary p-regular d-flex align-items-start">
+<div class="bg-primary p-16 d-flex align-items-start">
   <!-- Demo -->
   <div class="flex-fill d-flex">
     <div class="bg-active">
@@ -13,23 +13,23 @@
   </div>
 
   <!-- Legend -->
-  <ul class="ps-regular text-white">
-    <li class="d-flex align-items-center mb-regular">
-      <div class="bg-active h-regular w-regular me-mini"></div>
+  <ul class="ps-16 text-white">
+    <li class="d-flex align-items-center mb-16">
+      <div class="bg-active h-regular w-regular me-8"></div>
       <span>margin</span>
     </li>
-    <li class="d-flex align-items-center mb-regular">
-      <div class="bg-petrol-bright h-regular w-regular me-mini"></div>
+    <li class="d-flex align-items-center mb-16">
+      <div class="bg-petrol-bright h-regular w-regular me-8"></div>
       <span>padding</span>
     </li>
-    <li class="d-flex align-items-center mb-regular">
-      <div class="bg-light h-regular w-regular me-mini"></div>
+    <li class="d-flex align-items-center mb-16">
+      <div class="bg-light h-regular w-regular me-8"></div>
       <span>content</span>
     </li>
   </ul>
 </div>
 
-<form [formGroup]="demoForm" class="row mt-regular">
+<form [formGroup]="demoForm" class="row mt-16">
   <!-- Margin controls -->
   <ng-container formGroupName="margin">
     <div class="col">
@@ -78,7 +78,7 @@
 </form>
 
 <!-- Code sample -->
-<p class="h5 bold mt-4">spacing-demo.component.html</p>
+<p class="h5 bold mt-24">spacing-demo.component.html</p>
 <code
   class="block"
   [highlight]="highlight"
diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html
index 2c7f21a814..ce86ef80e9 100644
--- a/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Post-Spinner</h1>
 </div>
 
@@ -22,7 +22,7 @@ <h4 class="alert-heading">Info for implementing</h4>
   </div>
 </div>
 <code
-  class="block mt-3"
+  class="block mt-16"
   [highlight]="spinner"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
@@ -45,7 +45,7 @@ <h4 class="alert-heading">Info for implementing</h4>
   </div>
 </div>
 <code
-  class="block mt-3"
+  class="block mt-16"
   [highlight]="spinnerSmall"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
@@ -53,7 +53,7 @@ <h4 class="alert-heading">Info for implementing</h4>
 <p>XS spinner. Usage: On button, inline with text, ...; when waiting for a response.</p>
 <app-spinner-mini-demo></app-spinner-mini-demo>
 <code
-  class="block mt-3"
+  class="block mt-16"
   [highlight]="codeTemplate"
   [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
 ></code>
diff --git a/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.html b/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.html
index cf0577ad51..0b0aa4fd67 100644
--- a/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/spinner/spinner-mini-demo/spinner-mini-demo.component.html
@@ -1,8 +1,8 @@
 <button class="btn btn-secondary btn-animated">
-  <div class="loader loader-xs d-inline-block me-1"></div>
+  <div class="loader loader-xs d-inline-block me-4"></div>
   <span>Data is loading...</span>
 </button>
-<button class="btn btn-secondary btn-animated ms-3" disabled="disabled">
-  <div class="loader loader-xs d-inline-block me-1"></div>
+<button class="btn btn-secondary btn-animated ms-16" disabled="disabled">
+  <div class="loader loader-xs d-inline-block me-4"></div>
   <span>Data is loading...</span>
 </button>
diff --git a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html
index 25f03ff513..384a1dc4cc 100644
--- a/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/stepper/stepper-demo-page/stepper-demo-page.component.html
@@ -2,7 +2,7 @@
   ~ Copyright 2021 by Swiss Post, Information Technology
   -->
 
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Stepper</h1>
 </div>
 
diff --git a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html
index 02f1ae20f8..e341f5eeb4 100644
--- a/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/subnavigation/subnavigation-demo-page/subnavigation-demo-page.component.html
@@ -1,4 +1,4 @@
-<div class="heading py-5">
+<div class="heading py-48">
   <h1 class="bold font-curve-large">Subnavigation</h1>
 </div>
 
diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html
index 58a07ad2d9..12cd078a61 100644
--- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html
+++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo-page/topic-teaser-demo-page.component.html
@@ -1,9 +1,9 @@
-<div class="heading py-5 container">
+<div class="heading py-48 container">
   <h1 class="bold font-curve-large">Topic teaser</h1>
 </div>
 
 <div class="container">
-  <p class="mb-5 light font-curve-regular">
+  <p class="mb-48 light font-curve-regular">
     If you use multiple topic teasers on one page, each topic teaser must have a different
     background.
     <br />
@@ -12,10 +12,10 @@ <h1 class="bold font-curve-large">Topic teaser</h1>
     " or "bg-light" as background.
   </p>
 
-  <h3 class="bold mt-5 mb-3">Basic example</h3>
+  <h3 class="bold mt-48 mb-16">Basic example</h3>
 </div>
 
-<app-topic-teaser-demo class="d-block pb-huge"></app-topic-teaser-demo>
+<app-topic-teaser-demo class="d-block pb-56"></app-topic-teaser-demo>
 
 <div class="container">
   <code
@@ -24,10 +24,10 @@ <h3 class="bold mt-5 mb-3">Basic example</h3>
     [languages]="['html', 'scss', 'css', 'typescript', 'javascript']"
   ></code>
 
-  <h3 class="bold mt-5 mb-3">Image on right side</h3>
+  <h3 class="bold mt-48 mb-16">Image on right side</h3>
 </div>
 
-<app-topic-teaser-right-demo class="d-block pb-huge"></app-topic-teaser-right-demo>
+<app-topic-teaser-right-demo class="d-block pb-56"></app-topic-teaser-right-demo>
 
 <div class="container">
   <code
diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html
index a4a42dd94e..16c69e39d3 100644
--- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-demo/topic-teaser-demo.component.html
@@ -13,11 +13,11 @@
         </div>
 
         <div class="topic-teaser-content">
-          <h2 class="topic-teaser-title font-curve-large mb-large">
+          <h2 class="topic-teaser-title font-curve-large mb-24">
             <span class="bold">Lorem ipsum</span>
             <span class="light">sit amet, consetetur sadipscing elitr</span>
           </h2>
-          <ul class="link-list mb-large">
+          <ul class="link-list mb-24">
             <li class="link-list-item">
               <a href="#"><span>Lorem ipsum dolor</span></a>
             </li>
diff --git a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html
index b6e74bea91..3b3454cc85 100644
--- a/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html
+++ b/packages/demo/src/app/post-sample/components/topic-teaser/topic-teaser-right-demo/topic-teaser-right-demo.component.html
@@ -3,11 +3,11 @@
     <div class="topic-teaser-container bg-light">
       <div class="row pt-huge-r">
         <div class="topic-teaser-content">
-          <h2 class="topic-teaser-title font-curve-large mb-large">
+          <h2 class="topic-teaser-title font-curve-large mb-24">
             <span class="bold">Lorem ipsum</span>
             <span class="light">sit amet, consetetur sadipscing elitr</span>
           </h2>
-          <ul class="link-list mb-large">
+          <ul class="link-list mb-24">
             <li class="link-list-item">
               <a href="#"><span>Lorem ipsum dolor</span></a>
             </li>
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index 94d67ecb01..a64503e76b 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -32,14 +32,14 @@ function getGitHubUrl(path: String) {
 
 export default (params: { pathToStoryFile?: String }) => (
   <>
-    <div className="container mt-huge font-size-18 text-end">
+    <div className="container mt-56 font-size-18 text-end">
       {params.pathToStoryFile && (
         <a href={getGitHubUrl(params.pathToStoryFile)} rel="noopener">
           Edit this page on GitHub
         </a>
       )}
     </div>
-    <footer className="docs-footer mt-huge">
+    <footer className="docs-footer mt-56">
       <div className="bg-light">
         <div className="container">
           <div className="pt-big-r pb-big-r">
@@ -72,9 +72,9 @@ export default (params: { pathToStoryFile?: String }) => (
         </div>
       </div>
 
-      <div className="container d-flex justify-content-between py-regular">
+      <div className="container d-flex justify-content-between py-16">
         <strong>&copy; {new Date().getFullYear()} Swiss Post Ltd.</strong>
-        <div className="d-flex gap-3">
+        <div className="d-flex gap-16">
           <a
             href="https://www.post.ch/en/pages/footer/data-protection-and-disclaimer"
             rel="noopener"
diff --git a/packages/documentation/.storybook/blocks/header.tsx b/packages/documentation/.storybook/blocks/header.tsx
index 06e5032c5c..ba6799c2fc 100644
--- a/packages/documentation/.storybook/blocks/header.tsx
+++ b/packages/documentation/.storybook/blocks/header.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export default () => (
   <header className="docs-header bg-yellow">
-    <div className="container py-5">
+    <div className="container py-48">
       <h1 className="mt-0 bold font-curve-large">
         Swiss Post
         <br />
diff --git a/packages/documentation/.storybook/helpers/register-web-components.ts b/packages/documentation/.storybook/helpers/register-web-components.ts
index a0da406351..b35607835b 100644
--- a/packages/documentation/.storybook/helpers/register-web-components.ts
+++ b/packages/documentation/.storybook/helpers/register-web-components.ts
@@ -20,7 +20,7 @@ if (postComponentsDocJson && internetHeaderDocJson) {
   components.forEach(component => {
     component.props.forEach(prop => {
       if (prop.deprecation) {
-        const deprecationAlert = `<span className="mb-micro alert alert-warning alert-sm">**Deprecated:** ${prop.deprecation}</span>`;
+        const deprecationAlert = `<span className="mb-4 alert alert-warning alert-sm">**Deprecated:** ${prop.deprecation}</span>`;
         prop.docs = `${prop.deprecation ? deprecationAlert : ''}${prop.docs}`;
       }
     });
diff --git a/packages/documentation/cypress/snapshots/utilities/spacing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/spacing.snapshot.ts
new file mode 100644
index 0000000000..ad8f398489
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/spacing.snapshot.ts
@@ -0,0 +1,13 @@
+describe('Spacing', () => {
+  it('margin and padding', () => {
+    cy.visit('/iframe.html?id=snapshots--margin-and-padding');
+    cy.get('.margin-padding-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Margin and Padding', { widths: [320, 1440] });
+  });
+
+  it('gap', () => {
+    cy.visit('/iframe.html?id=snapshots--gap');
+    cy.get('.gap-example', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Gap', { widths: [320, 1440] });
+  });
+});
diff --git a/packages/documentation/src/shared/nb-bootstrap/ngb-component-alert.mdx b/packages/documentation/src/shared/nb-bootstrap/ngb-component-alert.mdx
index 4cf6ac3242..70508db5e1 100644
--- a/packages/documentation/src/shared/nb-bootstrap/ngb-component-alert.mdx
+++ b/packages/documentation/src/shared/nb-bootstrap/ngb-component-alert.mdx
@@ -1,4 +1,4 @@
-<div className="alert alert-info mb-bigger-big">
+<div className="alert alert-info mb-40">
   <p className="alert-heading">The {props.component} is an ng-bootstrap component.</p>
   <p>This documentation gives only the specifics for a usage within Post project.<br/>
     Read the complete information about the component's configuration in <a href={`https://ng-bootstrap.github.io/#/components/${props.component}`} rel="nofollow noopener noreferrer">ng-bootstrap {props.component} documentation</a>.</p>
diff --git a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
index 59fe61ea9d..29aad4d04b 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts
@@ -20,7 +20,7 @@ export const Accordion: Story = {
       <div>
         ${['bg-white', 'bg-light', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-column gap-regular p-regular mt-regular">
+            <div class="${bg} d-flex flex-column gap-16 p-16 mt-16">
               ${meta.render?.({ ...context.args }, context)}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
index fb8bc4756e..6326d983e3 100644
--- a/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/alert/alert.snapshot.stories.ts
@@ -18,10 +18,10 @@ type Story = StoryObj;
 
 export const Alert: Story = {
   render: () => html`
-    <div class="d-flex gap-3 flex-wrap">
+    <div class="d-flex gap-16 flex-wrap">
       ${['bg-white', 'bg-dark'].map(
         bg => html`
-          <div class="${bg + ' d-flex flex-column gap-3 flex-wrap p-3'}">
+          <div class="${bg + ' d-flex flex-column gap-16 flex-wrap p-16'}">
             ${bombArgs({
               type: alertMeta?.argTypes?.type?.options,
               icon: ['no-icon', undefined, '1001'],
@@ -107,10 +107,10 @@ export const PostAlert: Story = {
       '</button>';
 
     return html`
-      <div class="d-flex gap-3 flex-wrap">
+      <div class="d-flex gap-16 flex-wrap">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg + ' d-flex flex-column gap-3 flex-wrap p-3'}">
+            <div class="${bg + ' d-flex flex-column gap-16 flex-wrap p-16'}">
               ${bombArgs({
                 type: ['primary', 'success', 'danger', 'warning', 'info', 'gray'],
                 icon: ['none', undefined, '1001'],
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index bc75087176..2a09ada6bc 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -47,7 +47,7 @@ const meta: MetaComponent = {
     action: {
       name: 'Action Buttons',
       description:
-        'If `true`, the alert contains action buttons on its right side.<span className="mt-mini alert alert-info alert-sm">Alert content must then be wrapped in a `.alert-content` container.</span>',
+        'If `true`, the alert contains action buttons on its right side.<span className="mt-8 alert alert-info alert-sm">Alert content must then be wrapped in a `.alert-content` container.</span>',
       control: { type: 'boolean' },
     },
     fixed: {
@@ -66,7 +66,7 @@ const meta: MetaComponent = {
       name: 'Icon',
       description:
         'The icon to display in the alert. By default, the icon depends on the alert type.' +
-        '<span className="mt-mini alert alert-info alert-sm">' +
+        '<span className="mt-8 alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
         '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index f24651a95f..e959a43318 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -123,8 +123,8 @@ export const Contents: Story = {
     innerHTML:
       '<h4 slot="heading">Titulum</h4>' +
       '<ul class="list-unstyled">' +
-      '<li class="d-flex gap-mini"><post-icon name="1027"></post-icon>Un orde redlis titem</li>' +
-      '<li class="d-flex gap-mini"><post-icon name="1028"></post-icon>An deven moreun orde redlis titem</li>' +
+      '<li class="d-flex gap-8"><post-icon name="1027"></post-icon>Un orde redlis titem</li>' +
+      '<li class="d-flex gap-8"><post-icon name="1028"></post-icon>An deven moreun orde redlis titem</li>' +
       '</ul>' +
       '<hr/>' +
       '<p>Contentum momentum ipsum tipsum sit amet, consetetur sadipscing elitr.</p>' +
diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
index 11ffcf873d..1390d53715 100644
--- a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Badge: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 showNumber: [true, false],
                 size: context.argTypes.size.options,
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index c754b5fa45..48f53347f8 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -131,7 +131,7 @@ export const Position: Story = {
   `,
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="d-flex gap-large align-items-center">${story(args, context)}</div>
+      <div class="d-flex gap-24 align-items-center">${story(args, context)}</div>
     `,
   ],
 };
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
index 723a38ff0d..a327f0df89 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Blockquote: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap align-items-start gap-regular">
+      <div class="d-flex flex-wrap align-items-start gap-16">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 text: [
                   'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.',
diff --git a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
index 90951cde20..803fb14eeb 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const ButtonGroup: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 size: context.argTypes.size.options,
                 element: context.argTypes.element.options,
diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
index c109af1fcd..ff8db2a59f 100644
--- a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Button: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 variant: context.argTypes.variant.options,
                 size: context.argTypes.size.options,
@@ -41,9 +41,9 @@ export const Button: Story = {
                 .map((args: Args) =>
                   Default.render?.({ ...context.args, ...args, animated: false }, context),
                 )}
-              <div class="mt-big w-100"></div>
+              <div class="mt-32 w-100"></div>
               ${AccentColors.render?.({ ...context.args, ...AccentColors.args }, context)}
-              <div class="mt-big w-100"></div>
+              <div class="mt-32 w-100"></div>
               ${SignalColors.render?.({ ...context.args, ...SignalColors.args }, context)}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index 09739ace2f..9ef2b2b16d 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -143,7 +143,7 @@ const meta: MetaComponent = {
       name: 'Icon',
       description:
         'Defines a custom icon.' +
-        '<span className="mt-mini alert alert-info alert-sm">' +
+        '<span className="mt-8 alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
         '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
@@ -203,7 +203,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, makes the component appear inactive and disables its functionality.<div className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
@@ -271,7 +271,7 @@ export const Inverted: Story = {
   ...Template,
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      html` <div class="p-3 bg-dark">${story(context.args, context)}</div> `,
+      html` <div class="p-16 bg-dark">${story(context.args, context)}</div> `,
   ],
 };
 
@@ -334,7 +334,7 @@ export const FullWidth: Story = {
 
 export const Align: Story = {
   render: () => html`
-    <div class="d-flex flex-row-reverse gap-mini justify-content-end">
+    <div class="d-flex flex-row-reverse gap-8 justify-content-end">
       <button class="btn btn-primary">Send</button>
       <button class="btn btn-secondary">Cancel</button>
     </div>
diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
index 5e1dd4c118..d47771583f 100644
--- a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -91,7 +91,7 @@ function cardButtonRender(args: Args, count = 42) {
       <a href="#" class="card-body d-flex align-items-center">
         <post-icon name=${args.icon}></post-icon>
         <div>
-          <p class="mb-1">${args.focus}</p>
+          <p class="mb-4">${args.focus}</p>
           <h5 class="font-weight-bold mb-0">${args.title}</h5>
         </div>
       </a>
diff --git a/packages/documentation/src/stories/components/cards/card/card.docs.mdx b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
index 1c6e61e83e..215feeadd0 100644
--- a/packages/documentation/src/stories/components/cards/card/card.docs.mdx
+++ b/packages/documentation/src/stories/components/cards/card/card.docs.mdx
@@ -52,7 +52,7 @@ Use card groups to render cards as a single, attached element with equal width a
 
 ### Bad example
 
-<div className="alert alert-danger mb-3">
+<div className="alert alert-danger mb-16">
   Never use text with a background image because you can't ensure it is readable by everyone for all languages and
   browser sizes.
 </div>
diff --git a/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts b/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
index cdead12199..7f6e727964 100644
--- a/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.snapshot.stories.ts
@@ -60,7 +60,7 @@ export const Card: Story = {
       // Map default template variants
       .map(
         args => html`
-          <div class="col-6 p-3">
+          <div class="col-6 p-16">
             ${Default.render && Default.render({ ...meta.args, ...args }, context)}
           </div>
         `,
@@ -74,7 +74,7 @@ export const Card: Story = {
       // Map custom template variants
       .map(
         ({ story, colWidth }) => html`
-          <div class=${'p-3 col-' + colWidth}>
+          <div class=${'p-16 col-' + colWidth}>
             ${story.render && story.render({ ...meta.args, ...story.args }, context)}
           </div>
         `,
diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
index bdbdc7bfbb..52862d937b 100644
--- a/packages/documentation/src/stories/components/cards/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -213,7 +213,7 @@ function clickBlocker(story: StoryFn, context: StoryContext) {
 }
 
 function paddedContainer(story: StoryFn, context: StoryContext) {
-  return html` <div class="p-mini">${story(context.args, context)}</div> `;
+  return html` <div class="p-8">${story(context.args, context)}</div> `;
 }
 
 function gridContainer(story: StoryFn, context: StoryContext) {
@@ -247,7 +247,7 @@ function getCardBody({ customBody, content, action, showTitle, showSubtitle }: A
   return html`
     <div class="card-body">
       ${showTitle ? html` <h5 class="card-title">Titulum</h5> ` : nothing}
-      ${showSubtitle ? html` <h6 class="card-subtitle mb-2 text-muted">Sub Titulum</h6> ` : nothing}
+      ${showSubtitle ? html` <h6 class="card-subtitle mb-8 text-muted">Sub Titulum</h6> ` : nothing}
       <p class="card-text">${content}</p>
       ${choose(
         action,
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
index fb52992ee6..4b19341738 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.snapshot.stories.ts
@@ -27,7 +27,7 @@ export const ProductCard: Story = {
         args.title = `${args.title} (${args.level})`;
 
         return html`
-          <div class="col-12 mb-large">${Default.render && Default.render(args, context)}</div>
+          <div class="col-12 mb-24">${Default.render && Default.render(args, context)}</div>
         `;
       });
 
@@ -36,7 +36,7 @@ export const ProductCard: Story = {
       // Map custom template variants
       .map(
         story => html`
-          <div class="mb-large">
+          <div class="mb-24">
             ${story.render && story.render({ ...meta.args, ...story.args }, context)}
           </div>
         `,
@@ -47,7 +47,7 @@ export const ProductCard: Story = {
       <div>
         ${['white', 'dark'].map(
           bg => html`
-            <div class=${'p-regular bg-' + bg}>
+            <div class=${'p-16 bg-' + bg}>
               <div class="row row-cols-md-2 row-cols-xl-3">${defaultTemplateVariants}</div>
               ${customTemplateVariants}
             </div>
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
index d3905c65a8..30069535ef 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -66,7 +66,7 @@ function clickBlocker(story: StoryFn, context: StoryContext) {
 }
 
 function paddedContainer(story: StoryFn, context: StoryContext) {
-  return html` <div class="p-mini">${story(context.args, context)}</div> `;
+  return html` <div class="p-8">${story(context.args, context)}</div> `;
 }
 
 function gridContainer(story: StoryFn, context: StoryContext) {
@@ -82,7 +82,7 @@ function getTitle(args: Args) {
   if (!args.title) return nothing;
 
   const headingTag = unsafeStatic(args.level);
-  const headingClass = `mb-regular${args.level === 'h3' ? '' : ' h3'}`;
+  const headingClass = `mb-16${args.level === 'h3' ? '' : ' h3'}`;
   return html`<${headingTag} class="${headingClass}">${args.title}</${headingTag}>`;
 }
 
@@ -147,7 +147,7 @@ export const Multipart: Story = {
             <div class="product-navigation">
               <div>
                 <h3>Preiswert</h3>
-                <h4 class="mb-regular">Sample Product</h4>
+                <h4 class="mb-16">Sample Product</h4>
                 <p class="lead">
                   Mit SAMPLE PRODUCT kommen Ihre Briefe kostengünstig und zuverlässig ans Ziel.
                 </p>
@@ -164,7 +164,7 @@ export const Multipart: Story = {
           <div class="card-body bg-light" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3">
+            <dl class="mt-16">
               <dt>bis 500 g</dt>
               <dd class="h3">1.20</dd>
 
@@ -176,7 +176,7 @@ export const Multipart: Story = {
           <div class="card-body bg-white" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3 align-items-stretch">
+            <dl class="mt-16 align-items-stretch">
               <div class="horizontal-list-item justify-content-between d-flex flex-column">
                 <dt>
                   so zwischen ca. 5g
@@ -211,7 +211,7 @@ export const Multipart: Story = {
           <div class="card-body bg-light" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3">
+            <dl class="mt-16">
               <dt>bis 500 g</dt>
               <dd class="h3">1.20</dd>
 
@@ -224,7 +224,7 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body bg-light">
-            <button class="btn btn-secondary btn-animated w-100 mb-small-regular">
+            <button class="btn btn-secondary btn-animated w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
 
@@ -241,7 +241,7 @@ export const Multipart: Story = {
             <div class="product-navigation">
               <div>
                 <h3>Schneller</h3>
-                <h4 class="mb-regular">Sample Product</h4>
+                <h4 class="mb-16">Sample Product</h4>
                 <p class="lead">
                   Lorem ipsum aafw ea aewfwe awef awfeaea awefa wawef waf wawefa ea dolor sit amet
                   consectetur adipisicing elit. Iusto nulla laboriosam nesciunt. Unde velit dolores
@@ -260,7 +260,7 @@ export const Multipart: Story = {
           <div class="card-body bg-light" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3">
+            <dl class="mt-16">
               <dt>bis 500 g</dt>
               <dd class="h3">1.20</dd>
 
@@ -275,7 +275,7 @@ export const Multipart: Story = {
           <div class="card-body bg-white" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3 align-items-stretch">
+            <dl class="mt-16 align-items-stretch">
               <div class="horizontal-list-item justify-content-between d-flex flex-column">
                 <dt>
                   so zwischen ca. 5g
@@ -298,7 +298,7 @@ export const Multipart: Story = {
           <div class="card-body bg-light" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
-            <dl class="mt-3">
+            <dl class="mt-16">
               <dt>bis 500 g</dt>
               <dd class="h3">1.20</dd>
 
@@ -311,7 +311,7 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body bg-light">
-            <button class="btn btn-secondary btn-animated w-100 mb-small-regular">
+            <button class="btn btn-secondary btn-animated w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
 
diff --git a/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts b/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts
index 9f4f0de9db..4614405661 100644
--- a/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Chip: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 text: [
                   'Malakceptebla Insigno',
diff --git a/packages/documentation/src/stories/components/chip/chip.stories.ts b/packages/documentation/src/stories/components/chip/chip.stories.ts
index 5fe47939e0..5db2d2326b 100644
--- a/packages/documentation/src/stories/components/chip/chip.stories.ts
+++ b/packages/documentation/src/stories/components/chip/chip.stories.ts
@@ -64,7 +64,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'If `true`, the chip is disabled.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'If `true`, the chip is disabled.<div className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
@@ -205,7 +205,7 @@ export const FilterCheckboxChip: Story = {
     return html`
       <fieldset>
         <legend>Migrandaj Itineroj</legend>
-        <div class="d-flex flex-wrap gap-mini">
+        <div class="d-flex flex-wrap gap-8">
           ${checkboxChips.map(({ text, active }, index) =>
             renderChip({ ...args, text, active }, context, index),
           )}
@@ -213,7 +213,7 @@ export const FilterCheckboxChip: Story = {
       </fieldset>
     `;
   },
-  decorators: [story => html`<div class="d-flex gap-huge">${story()}</div>`],
+  decorators: [story => html`<div class="d-flex gap-56">${story()}</div>`],
   args: {
     type: 'filter',
   },
@@ -231,7 +231,7 @@ export const FilterRadioChip: Story = {
     return html`
       <fieldset>
         <legend class="">Serĉrezultoj</legend>
-        <div class="d-flex flex-wrap gap-mini">
+        <div class="d-flex flex-wrap gap-8">
           ${radioChips.map(({ text, number, active }, index) =>
             renderChip({ ...args, text, number, active }, context, index),
           )}
@@ -239,7 +239,7 @@ export const FilterRadioChip: Story = {
       </fieldset>
     `;
   },
-  decorators: [story => html`<div class="d-flex gap-huge">${story()}</div>`],
+  decorators: [story => html`<div class="d-flex gap-56">${story()}</div>`],
   args: {
     type: 'filter',
     radio: true,
@@ -250,7 +250,7 @@ export const FilterRadioChip: Story = {
 
 export const Dismissible: Story = {
   render: ({ dismissed, ...args }, context) => html`
-    <div class="d-flex flex-wrap gap-mini">
+    <div class="d-flex flex-wrap gap-8">
       ${renderChip({ ...args, text: 'Unua uzanta enigo' }, context)}
       ${renderChip({ ...args, text: 'Dua uzanta enigo' }, context)}
       ${renderChip({ ...args, text: 'Tria uzanta enigo' }, context)}
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
index 552139bb72..c04cbbea2d 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts
@@ -24,7 +24,7 @@ export const Collapsible: Story = {
                 collapsed: [false, true],
               }).map(
                 (args: Args, i: number) => html`
-                  <div class="col-6 p-3 d-flex flex-column gap-regular">
+                  <div class="col-6 p-16 d-flex flex-column gap-16">
                     <p class="m-0">collapsed: ${args.collapsed}</p>
                     ${meta.render?.(
                       { ...context.args, ...args },
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
index fbf05091d0..c31393f6ac 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -19,7 +19,7 @@ const meta: MetaComponent<HTMLPostCollapsibleElement> = {
     },
   },
   args: {
-    innerHTML: `<p class='border rounded p-large'>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
+    innerHTML: `<p class='border rounded p-24'>Contentus momentus vero siteos et accusam iretea et justo.</p>`,
     collapsed: false,
   },
 };
@@ -28,7 +28,7 @@ export default meta;
 
 // DECORATORS
 function gap(story: StoryFn, context: StoryContext) {
-  return html` <div class="d-flex flex-column gap-regular">${story(context.args, context)}</div> `;
+  return html` <div class="d-flex flex-column gap-16">${story(context.args, context)}</div> `;
 }
 
 //RENDERER
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown-basic.sample.html b/packages/documentation/src/stories/components/dropdown/dropdown-basic.sample.html
index d9aa6dd759..1e1aff7a3e 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown-basic.sample.html
+++ b/packages/documentation/src/stories/components/dropdown/dropdown-basic.sample.html
@@ -1,6 +1,6 @@
 <div>
   <label for="dropdownBasic1" class="form-label">Basic dropdown</label>
-  <div ngbDropdown class="me-2">
+  <div ngbDropdown class="me-8">
     <button class="btn btn-primary" id="dropdownBasic1" ngbDropdownToggle>Toggle dropdown</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
       <button ngbDropdownItem>Action - 1</button>
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown-dropup-scroll.sample.html b/packages/documentation/src/stories/components/dropdown/dropdown-dropup-scroll.sample.html
index 1563f1e952..0f3792b3ba 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown-dropup-scroll.sample.html
+++ b/packages/documentation/src/stories/components/dropdown/dropdown-dropup-scroll.sample.html
@@ -1,6 +1,6 @@
 <div>
   <label for="dropdownBasic3" class="form-label">Long dropup with scroll</label>
-  <div ngbDropdown placement="top-right" class="me-2">
+  <div ngbDropdown placement="top-right" class="me-8">
     <button class="btn btn-primary" id="dropdownBasic3" ngbDropdownToggle>Toggle dropup</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
       <button ngbDropdownItem>Action - 1</button>
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown-dropup.sample.html b/packages/documentation/src/stories/components/dropdown/dropdown-dropup.sample.html
index 3d79b46323..446b49f86c 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown-dropup.sample.html
+++ b/packages/documentation/src/stories/components/dropdown/dropdown-dropup.sample.html
@@ -1,6 +1,6 @@
 <div>
   <label for="dropdownBasic2" class="form-label">Basic dropup</label>
-  <div ngbDropdown placement="top-right" class="me-2">
+  <div ngbDropdown placement="top-right" class="me-8">
     <button class="btn btn-secondary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
       <button ngbDropdownItem>Action - 1</button>
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown-icons.sample.html b/packages/documentation/src/stories/components/dropdown/dropdown-icons.sample.html
index 2b3b518eeb..4e2d230fe2 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown-icons.sample.html
+++ b/packages/documentation/src/stories/components/dropdown/dropdown-icons.sample.html
@@ -1,6 +1,6 @@
 <div>
   <label for="dropdownBasic4" class="form-label">Dropdown with icons</label>
-  <div ngbDropdown class="me-2">
+  <div ngbDropdown class="me-8">
     <button class="btn btn-secondary" id="dropdownBasic4" ngbDropdownToggle>Toggle dropdown</button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic3">
       <button ngbDropdownItem class="btn-border-radius-sm">
diff --git a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts
index 0e30a96f02..dd0bfef944 100644
--- a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.snapshot.stories.ts
@@ -26,7 +26,7 @@ const bombedArgs = bombArgs({
 export const CardControl: StoryObj = {
   render: () => {
     return html`
-      <div class="d-flex gap-3 flex-wrap">
+      <div class="d-flex gap-16 flex-wrap">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div class="${bg + ' row g-3'}">
diff --git a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
index 9646d4ad34..2aaeb51fb2 100644
--- a/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/standard-html/card-control.stories.ts
@@ -84,7 +84,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -161,7 +161,7 @@ export const Default = {
     const controlId = `CardControl_${id}`;
     const description = html`<span class="font-size-12">${args.description}</span>`;
     const icon = html` <post-icon name="${args.icon}" aria-hidden="true"></post-icon> `;
-    const invalidFeedback = html`<p class="invalid-feedback mt-2">Invalid feedback</p>`;
+    const invalidFeedback = html`<p class="invalid-feedback mt-8">Invalid feedback</p>`;
 
     return html`
       <div class="${cardClasses}">
@@ -246,7 +246,7 @@ export const Group = {
   },
   render: (args: Args) => {
     const invalidFeedback = html`
-      <p id="invalid-feedback" class="d-inline-flex mt-3 invalid-feedback">Invalid choice</p>
+      <p id="invalid-feedback" class="d-inline-flex mt-16 invalid-feedback">Invalid choice</p>
     `;
 
     return html`
diff --git a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.snapshot.stories.ts
index 113bd59714..e5e72e2c66 100644
--- a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.snapshot.stories.ts
@@ -22,7 +22,7 @@ export const PostCardControl: Story = {
             <div class="${bg}">
               ${context.argTypes.type.options.map(
                 (type: string) => html`
-                  <div class="d-flex flex-column gap-regular p-regular mt-regular">
+                  <div class="d-flex flex-column gap-16 p-16 mt-16">
                     <h2 class="h5">type: ${type}</h2>
                     ${bombArgs({
                       icon: ['1001'],
diff --git a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
index 0a08220489..23fd25ff22 100644
--- a/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/forms/card-control/web-component/card-control.stories.ts
@@ -107,7 +107,7 @@ export const Default: Story = {
 
     const content = html`${unsafeHTML(args['slots-default'])}`;
     const icon = html`<span slot="icon">${unsafeHTML(args['slots-icon'])}</span>`;
-    const invalidFeedback = html`<p class="invalid-feedback${args.groupValidation ? '' : ' mt-2'}">
+    const invalidFeedback = html`<p class="invalid-feedback${args.groupValidation ? '' : ' mt-8'}">
       Invalid feedback
     </p>`;
 
@@ -272,10 +272,10 @@ export const FormIntegration: Story = {
   decorators: [
     story => html`
       ${story()}
-      <div class="mt-3">
+      <div class="mt-16">
         <h4>FormData</h4>
         <p class="fs-small">Submit or reset the form to see how the FormData will look like.</p>
-        <pre id="AssociatedFormOutput" class="p-2 bg-dark rounded fs-tiny">{}</pre>
+        <pre id="AssociatedFormOutput" class="p-8 bg-dark rounded fs-tiny">{}</pre>
       </div>
     `,
   ],
@@ -295,7 +295,7 @@ export const FormIntegration: Story = {
         <legend>Legend</legend>
         ${Default.render?.(args, context)}
       </fieldset>
-      <fieldset class="mt-3" .disabled=${args.radioFieldset}>
+      <fieldset class="mt-16" .disabled=${args.radioFieldset}>
         <legend aria-describedby="radio-invalid-feedback">Legend</legend>
         ${[1, 2, 3].map(
           n =>
@@ -310,7 +310,7 @@ export const FormIntegration: Story = {
         )}
         ${args.radioValidity === 'false' ? invalidFeedback : nothing}
       </fieldset>
-      <div class="mt-3 d-flex gap-3 justify-content-end">
+      <div class="mt-16 d-flex gap-16 justify-content-end">
         <button type="reset" class="btn btn-link"><post-icon name="2042"></post-icon>Reset</button>
         <button type="submit" class="btn btn-primary btn-animated"><span>Submit</span></button>
       </div>
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
index 34f1aefe2e..62cd7c691e 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.snapshot.stories.ts
@@ -22,10 +22,10 @@ export const Checkbox: Story = {
       });
     });
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${[
                 ...bombArgs({
                   checked: ['indeterminate'],
@@ -57,7 +57,7 @@ export const Checkbox: Story = {
                   </span>
                 `;
               })}
-              <div class="mt-big w-100"></div>
+              <div class="mt-32 w-100"></div>
               ${Inline.render?.({ ...context.args, ...Inline.args }, context)}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 0d169c0168..5180fab5dd 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -63,7 +63,7 @@ const meta: MetaComponent = {
       name: 'Hidden Label',
       description:
         'If `true`, the checkbox label is set via an `aria-label` attribute and is therefore not visible.' +
-        '<span className="mt-mini alert alert-info alert-sm">' +
+        '<span className="mt-8 alert alert-info alert-sm">' +
         'Shown or hidden, a label must always be defined.<br/>' +
         'More details in our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs">accessibility docs</a>.' +
         '</span>',
@@ -109,7 +109,7 @@ const meta: MetaComponent = {
       name: 'Disabled',
       description:
         'If `true`, makes the checkbox appear inactive and disables its functionality.' +
-        '<span className="mt-mini alert alert-info alert-sm">' +
+        '<span className="mt-8 alert alert-info alert-sm">' +
         'There are accessibility concerns with the disabled state.<br/>' +
         'More details in our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs">accessibility docs</a>.' +
         '</span>',
diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select-basic.sample.html b/packages/documentation/src/stories/components/forms/custom-select/custom-select-basic.sample.html
index b1c731bd8f..eb42edb536 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select-basic.sample.html
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select-basic.sample.html
@@ -25,7 +25,7 @@
       type="button"
       #option
     >
-      <em aria-hidden="true" class="pi me-small-regular" [class]="'pi-' + option.icon"></em>
+      <em aria-hidden="true" class="pi me-12" [class]="'pi-' + option.icon"></em>
       <span>{{ option.label }}</span>
     </button>
   </div>
diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select-floating.sample.html b/packages/documentation/src/stories/components/forms/custom-select/custom-select-floating.sample.html
index 5edaf61ce9..37f20358b2 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select-floating.sample.html
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select-floating.sample.html
@@ -27,7 +27,7 @@
       type="button"
       #option
     >
-      <em aria-hidden="true" class="pi me-small-regular" [class]="'pi-' + option.icon"></em>
+      <em aria-hidden="true" class="pi me-12" [class]="'pi-' + option.icon"></em>
       <span>{{ option.label }}</span>
     </button>
   </div>
diff --git a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
index 6a405d79bb..c1564b1ff9 100644
--- a/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.snapshot.stories.ts
@@ -28,10 +28,10 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
     },
   ];
   return html`
-    <div class="d-flex flex-wrap align-items-start gap-regular">
+    <div class="d-flex flex-wrap align-items-start gap-16">
       ${['bg-white', 'bg-dark'].map(
         bg => html`
-          <div class="${bg} d-flex gap-3 flex-column p-3">
+          <div class="${bg} d-flex gap-16 flex-column p-16">
             <h3>Sizes</h3>
             ${getCombinations('size', context.argTypes.size.options, combinations)
               .filter(
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 2185c8891d..612b4a2352 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -56,7 +56,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -155,7 +155,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
index 36ca56fd15..bc85351312 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Radio: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex gap-3 flex-column p-3">
+            <div class="${bg} d-flex gap-16 flex-column p-16">
               ${[
                 ...bombArgs({
                   label: [
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index 6d91388534..ba3380ef73 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -56,7 +56,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -92,7 +92,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
index ddc5a77f69..1a895771f1 100644
--- a/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts
@@ -70,10 +70,10 @@ export const Select: Story = {
       .map(args => ({ ...args, id: `a-${crypto.randomUUID()}` }));
 
     return html`
-      <div class="d-flex gap-3 flex-column">
+      <div class="d-flex gap-16 flex-column">
         ${['bg-white', 'bg-dark'].map(bg => {
           return html`
-            <div class="${bg} d-flex gap-3 flex-column p-3">
+            <div class="${bg} d-flex gap-16 flex-column p-16">
               <h2>Default</h2>
               ${bombArgsGeneratedDefault.map((args: Args) => {
                 return html`
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 84d8d793dc..ed35da3737 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -59,7 +59,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -173,7 +173,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-8 alert alert-info alert-sm">There are accessibility issues with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts
index 79d1b91fba..0175dd301d 100644
--- a/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/slider/slider.snapshot.stories.ts
@@ -15,11 +15,11 @@ type Story = StoryObj;
 export const Slider: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap align-items-start gap-regular">
+      <div class="d-flex flex-wrap align-items-start gap-16">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
             <div
-              class="${bg} d-flex  flex-wrap align-items-start flex-column gap-regular p-regular"
+              class="${bg} d-flex  flex-wrap align-items-start flex-column gap-16 p-16"
             >
               ${[
                 ...bombArgs({
diff --git a/packages/documentation/src/stories/components/forms/slider/slider.stories.ts b/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
index 91b7610214..591777d9a7 100644
--- a/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/forms/slider/slider.stories.ts
@@ -47,7 +47,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -135,7 +135,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
index 46846cb5d1..73fdc01d6a 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.snapshot.stories.ts
@@ -30,7 +30,7 @@ export const Switch: Story = {
         .map(
           (args: Args) =>
             html`
-              <div class="col-6 p-3">
+              <div class="col-6 p-16">
                 ${meta.render?.({ ...context.args, ...args }, { ...context, id: args.id })}
               </div>
             `,
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index 2ebde7a6ce..cecaf030c7 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -54,7 +54,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -75,7 +75,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</span>',
       control: {
         type: 'boolean',
       },
@@ -100,7 +100,7 @@ const meta: MetaComponent = {
       },
     },
   },
-  decorators: [story => html` <div class="pt-3">${story()}</div> `],
+  decorators: [story => html` <div class="pt-16">${story()}</div> `],
 };
 
 export default meta;
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
index 2ca08413d1..5e75638ff2 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.snapshot.stories.ts
@@ -36,10 +36,10 @@ export const Textarea: Story = {
     ];
 
     return html`
-      <div class="d-flex flex-wrap align-items-start gap-regular">
+      <div class="d-flex flex-wrap align-items-start gap-16">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex gap-3 flex-column p-3">
+            <div class="${bg} d-flex gap-16 flex-column p-16">
               <h3>Sizes</h3>
               ${getCombinations('size', context.argTypes.size.options, combinations).map(
                 (args: Args) => {
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index d2ccae6656..cf212513c4 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -56,7 +56,7 @@ const meta: MetaComponent = {
     hiddenLabel: {
       name: 'Hidden Label',
       description:
-        'Renders the component with or without a visible label.<span className="mt-mini alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
+        'Renders the component with or without a visible label.<span className="mt-8 alert alert-info alert-sm">There are accessibility concerns with hidden labels.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#labels">label accessibility guide</a>.</span>',
       if: {
         arg: 'floatingLabel',
         truthy: false,
@@ -145,7 +145,7 @@ const meta: MetaComponent = {
     disabled: {
       name: 'Disabled',
       description:
-        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-mini alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
+        'When set to `true`, disables the component\'s functionality and places it in a disabled state.<div className="mt-8 alert alert-info alert-sm">There are accessibility concerns with the disabled state.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       control: {
         type: 'boolean',
       },
diff --git a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
index d000f03f2f..a1580109d0 100644
--- a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts
@@ -18,7 +18,7 @@ export const Heading: Story = {
       <div>
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-column gap-regular p-regular mt-regular">
+            <div class="${bg} d-flex flex-column gap-16 p-16 mt-16">
               ${bombArgs({
                 title: [
                   'Lorem ipsum dolor sit',
diff --git a/packages/documentation/src/stories/components/icons/icon.stories.ts b/packages/documentation/src/stories/components/icons/icon.stories.ts
index a0b5de252a..06314f3b07 100644
--- a/packages/documentation/src/stories/components/icons/icon.stories.ts
+++ b/packages/documentation/src/stories/components/icons/icon.stories.ts
@@ -112,7 +112,7 @@ export const Color: Story = {
   render: args => renderVariants(args, colorVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-2'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-8'),
   ],
 };
 
@@ -139,9 +139,9 @@ export const Size: Story = {
 };
 
 const styleVariants = [
-  { class: 'border rounded p-3', style: 'font-size: 4rem' },
-  { class: 'border border-success rounded p-3 text-success', style: 'font-size: 4rem' },
-  { class: 'rounded-circle bg-info p-3', style: 'font-size: 4rem' },
+  { class: 'border rounded p-16', style: 'font-size: 4rem' },
+  { class: 'border border-success rounded p-16 text-success', style: 'font-size: 4rem' },
+  { class: 'rounded-circle bg-info p-16', style: 'font-size: 4rem' },
 ];
 
 export const Style: Story = {
@@ -153,7 +153,7 @@ export const Style: Story = {
   render: args => renderVariants(args, styleVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-2'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-8'),
   ],
 };
 
@@ -173,7 +173,7 @@ export const Flip: Story = {
   render: args => renderVariants(args, flipVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-2'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-8'),
   ],
 };
 
@@ -192,7 +192,7 @@ export const Scale: Story = {
   render: args => renderVariants(args, scaleVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-4'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-24'),
   ],
 };
 
@@ -215,7 +215,7 @@ export const Rotate: Story = {
   render: args => renderVariants(args, rotateVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-2'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-8'),
   ],
 };
 
@@ -233,7 +233,7 @@ const renderAnimateVariants = (args: Args, customAttrs: { name: string; animatio
     ${customAttrs.map(
       variantArgs =>
         html`
-          <div class="w-50 py-3">
+          <div class="w-50 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/components/internet-header/header/header.stories.ts b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts
index 78a83573a1..78c62a8692 100644
--- a/packages/documentation/src/stories/components/internet-header/header/header.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts
@@ -166,11 +166,11 @@ const meta: MetaComponent = {
         >
           ${story()}
           <div class="container">
-            <p class="fake-content my-big"></p>
-            <p class="fake-content my-big"></p>
-            <p class="fake-content my-big"></p>
-            <p class="fake-content my-big"></p>
-            <p class="fake-content my-big"></p>
+            <p class="fake-content my-32"></p>
+            <p class="fake-content my-32"></p>
+            <p class="fake-content my-32"></p>
+            <p class="fake-content my-32"></p>
+            <p class="fake-content my-32"></p>
           </div>
         </div>
       `,
@@ -222,6 +222,6 @@ export const OSFlyoutOverrides: Story = {
 
 export const CustomContent: Story = {
   args: {
-    innerHTML: `<p class="mx-regular mb-0" slot="main">Hello, User!</p>`,
+    innerHTML: `<p class="mx-16 mb-0" slot="main">Hello, User!</p>`,
   },
 };
diff --git a/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts
index 4b60ed0d5d..23995b5877 100644
--- a/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts
@@ -24,7 +24,7 @@ export const Default = {
         }
       </style>
       ${meta.render && meta.render(args, context)}
-      <p id="my-div" class="position-sticky bg-nightblue p-regular">
+      <p id="my-div" class="position-sticky bg-nightblue p-16">
         I am sticky! I am always positioned right below the header when you scroll up and down.
       </p>
     `;
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
index 62d9ef4b1b..d304a71b41 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
@@ -12,7 +12,7 @@
     </li>
     <li class="nav-item"><a class="nav-link">Link 3</a></li>
   </sp-intranet-header>
-  <main role="main" class="container header-margin pt-huge">
+  <main role="main" class="container header-margin pt-56">
     <h1>Content</h1>
     <p>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
index c3fc441b70..f2dcc8671c 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
@@ -1,16 +1,16 @@
 <section class="layout-container header-big with-searchbar">
   <sp-intranet-header [showIntranetSearch]="true" siteTitle="PostWeb">
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Home</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Post Informatik</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Service-Portal</a></li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">Die Post</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">Home</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">Post Informatik</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">Service-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">Die Post</a></li>
   </sp-intranet-header>
   <div class="site-content container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
         id="sidebar"
       >
         <div class="sidebar-sticky header-margin bg-light">
@@ -35,7 +35,7 @@
           </ul>
         </div>
       </nav>
-      <main class="col-md-9 col-lg-10 p-regular" role="main">
+      <main class="col-md-9 col-lg-10 p-16" role="main">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
index 4ee54fd26c..4abbf2b754 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
@@ -4,7 +4,7 @@
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-regular"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
         id="sidebar"
       >
         <div class="sidebar-sticky header-margin bg-light">
@@ -26,7 +26,7 @@
           </ul>
         </div>
       </nav>
-      <main class="col-md-9 col-lg-10 p-regular" role="main">
+      <main class="col-md-9 col-lg-10 p-16" role="main">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
index b88fe41ade..620230a23a 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
@@ -1,6 +1,6 @@
-<div class="modal-header p-5 mb-3 rounded-top bg-danger">
+<div class="modal-header p-48 mb-16 rounded-top bg-danger">
   <div class="text-center">
-    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-4 mb-3"></span>
+    <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-24 mb-16"></span>
     <p class="h4 bold">Please check your details</p>
     <p class="h4">Some information on the previous page is missing or incomplete.</p>
   </div>
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 43f8efcab9..e7e517ba18 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -35,7 +35,7 @@ const meta: MetaComponent = {
     id: {
       name: 'Id',
       description:
-        'The id is used to connect a trigger element with the popover. <div className="mt-mini alert alert-info alert-sm">`<button data-popover-target="...">` is the only valid trigger element for `post-popover`.</div>',
+        'The id is used to connect a trigger element with the popover. <div className="mt-8 alert alert-info alert-sm">`<button data-popover-target="...">` is the only valid trigger element for `post-popover`.</div>',
       table: {
         category: 'General',
       },
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 deb879d3f8..b918d5a351 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
@@ -15,16 +15,16 @@ type Story = StoryObj;
 export const Rating: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="p-5">
+      <div class="p-48">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} p-3">
-              <div class="d-flex gap-3 mb-3">
-                <div class="w-50 d-flex gap-1">
+            <div class="${bg} p-16">
+              <div class="d-flex gap-16 mb-16">
+                <div class="w-50 d-flex gap-4">
                   readonly:
                   <pre>false</pre>
                 </div>
-                <div class="w-50 d-flex gap-1">
+                <div class="w-50 d-flex gap-4">
                   readonly:
                   <pre>true</pre>
                 </div>
@@ -37,7 +37,7 @@ export const Rating: Story = {
                 .map(
                   (args: Args) =>
                     html`
-                      <div class="d-flex gap-3">
+                      <div class="d-flex gap-16">
                         <div class="w-50">
                           ${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
                         </div>
diff --git a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
index 466ae70505..4a5f7c51a2 100644
--- a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
@@ -15,10 +15,10 @@ type Story = StoryObj;
 export const Spinner: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class="d-flex flex-wrap align-items-start gap-regular">
+      <div class="d-flex flex-wrap align-items-start gap-16">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 size: context.argTypes.size.options,
               }).map((args: Args) => {
diff --git a/packages/documentation/src/stories/components/spinner/spinner.stories.ts b/packages/documentation/src/stories/components/spinner/spinner.stories.ts
index d7a5c9bff1..bb1b4cb6bf 100644
--- a/packages/documentation/src/stories/components/spinner/spinner.stories.ts
+++ b/packages/documentation/src/stories/components/spinner/spinner.stories.ts
@@ -54,7 +54,7 @@ export default meta;
 type Story = StoryObj;
 
 function generateDecorators(story: StoryFn, context: StoryContext) {
-  return html` <div class="m-5 overflow-hidden">${story(context.args, context)}</div> `;
+  return html` <div class="m-48 overflow-hidden">${story(context.args, context)}</div> `;
 }
 
 function render(args: Args) {
@@ -93,16 +93,16 @@ export const BlockSection: Story = {
 export const Inline: Story = {
   render: () => html`<button class="btn btn-secondary btn-animated">
       <div
-        class="loader loader-16 d-inline-block me-1"
+        class="loader loader-16 d-inline-block me-4"
         role="status"
         aria-live="polite"
         aria-hidden="true"
       ></div>
       <span>Data is loading…</span>
     </button>
-    <button class="btn btn-secondary btn-animated ms-3" disabled="disabled">
+    <button class="btn btn-secondary btn-animated ms-16" disabled="disabled">
       <div
-        class="loader loader-16 d-inline-block me-1"
+        class="loader loader-16 d-inline-block me-4"
         role="status"
         aria-live="polite"
         aria-hidden="true"
diff --git a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
index bd86917120..71d61a99f5 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
+++ b/packages/documentation/src/stories/components/stepper/stepper.docs.mdx
@@ -15,7 +15,7 @@ import * as StepperStories from './stepper.stories';
 
 <p className="lead">The stepped progression component provides an interactive visual overview of a process. It shows at a glance the amount of steps a user is required to go through, and serves as a guide for each step, indicating its status.</p>
 
-<div className="alert alert-warning mb-bigger-big">
+<div className="alert alert-warning mb-40">
   <p className="alert-heading">The stepper previously used ng-bootstrap's progressbar component, this has been deprecated in favor of the CSS-only stepper documented below.</p>
   <div className="d-flex justify-content-end"><PostComponentDemoLink component="stepper" /></div>
 </div>
diff --git a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
index 52efed51d4..e69c32af22 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts
@@ -21,10 +21,10 @@ export const Stepper: Story = {
       'Sed vulputate lacinia eros, sit amet mattis sem luctus sit amet. Vestibulum pharetra tortor a laoreet malesuada.',
     ];
     return html`
-      <div class="d-flex flex-column gap-1">
+      <div class="d-flex flex-column gap-4">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-column gap-regular p-regular">
+            <div class="${bg} d-flex flex-column gap-16 p-16">
               ${bombArgs({
                 currentStepNumber: meta.argTypes?.currentStepNumber?.options,
               }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
index 7ae8f88fa4..76e0ed99bf 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
@@ -15,7 +15,7 @@ type Story = StoryObj;
 export const Subnavigation: Story = {
   render: (_args: Args, context: StoryContext) => {
     return html`
-      <div class=" d-flex gap-3 flex-column">
+      <div class=" d-flex gap-16 flex-column">
         ${bombArgs({
           backgroundColor: ['default', 'bg-light', 'bg-dark'],
           badges: [false, true],
diff --git a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
index ae27dc3ecc..8f607015ef 100644
--- a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts
@@ -115,7 +115,7 @@ export const Table: Story = {
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-2012"></i>
                           </button>
-                          <button class="btn btn-primary btn-icon btn-md ms-2">
+                          <button class="btn btn-primary btn-icon btn-md ms-8">
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-3193"></i>
                           </button>
@@ -130,7 +130,7 @@ export const Table: Story = {
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-2012"></i>
                           </button>
-                          <button class="btn btn-primary btn-icon btn-md ms-2">
+                          <button class="btn btn-primary btn-icon btn-md ms-8">
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-3193"></i>
                           </button>
@@ -145,7 +145,7 @@ export const Table: Story = {
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-2012"></i>
                           </button>
-                          <button class="btn btn-primary btn-icon btn-md ms-2">
+                          <button class="btn btn-primary btn-icon btn-md ms-8">
                             <span class="visually-hidden">Edit</span>
                             <i class="pi pi-3193"></i>
                           </button>
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 32b861014b..6e02746a6c 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -195,7 +195,7 @@ export const TableWithButtons: Story = {
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
-          <button class="btn btn-primary btn-icon btn-md ms-2">
+          <button class="btn btn-primary btn-icon btn-md ms-8">
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
@@ -210,7 +210,7 @@ export const TableWithButtons: Story = {
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
-          <button class="btn btn-primary btn-icon btn-md ms-2">
+          <button class="btn btn-primary btn-icon btn-md ms-8">
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
@@ -225,7 +225,7 @@ export const TableWithButtons: Story = {
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="2012"></post-icon>
           </button>
-          <button class="btn btn-primary btn-icon btn-md ms-2">
+          <button class="btn btn-primary btn-icon btn-md ms-8">
             <span class="visually-hidden">Edit</span>
             <post-icon aria-hidden="true" name="3193"></post-icon>
           </button>
diff --git a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
index 33326bac76..80cfbea95e 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts
@@ -18,7 +18,7 @@ export const Tabs: Story = {
       <div>
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-column gap-regular p-regular mt-regular">
+            <div class="${bg} d-flex flex-column gap-16 p-16 mt-16">
               ${bombArgs({
                 activePanel: [undefined, 'tria'],
               }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
diff --git a/packages/documentation/src/stories/components/tabs/tabs.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
index 43a973b25f..262f4e0369 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
@@ -91,7 +91,7 @@ export const Async: Story = {
       return html`
         ${story()}
         <hr />
-        <div class="d-flex gap-mini">
+        <div class="d-flex gap-8">
           <button class="btn btn-default" id="add-tab" type="button" @click="${addTab}">
             <post-icon name="2040"></post-icon>
             Add tab
diff --git a/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts b/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts
index 50d6ef79a3..f76130514d 100644
--- a/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts
+++ b/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts
@@ -16,7 +16,7 @@ export const Tag: Story = {
   render: (args: Args, context: StoryContext) => html`
     ${['bg-white', 'bg-dark'].map(
       bg => html`
-        <div class="${bg} p-3">
+        <div class="${bg} p-16">
           ${bombArgs({
             size: context.argTypes.size.options,
             markup: [
@@ -27,7 +27,7 @@ export const Tag: Story = {
             showIcon: [false, true],
           }).map(
             (bombArgs: Args) =>
-              html`<div class="d-flex flex-wrap gap-1 mb-4">
+              html`<div class="d-flex flex-wrap gap-4 mb-24">
                 ${context.argTypes.variant.options
                   .filter((v: string) => v !== 'null')
                   .map((variant: string) =>
diff --git a/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts b/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts
index 1e372ae3e4..06c7b09e4b 100644
--- a/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts
+++ b/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts
@@ -124,7 +124,7 @@ export const Icon: Story = {
 export const Variants: Story = {
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      html`<div class="d-flex flex-wrap gap-3">${story(context.args, context)}</div>`,
+      html`<div class="d-flex flex-wrap gap-16">${story(context.args, context)}</div>`,
   ],
   render: (args: Args, context: StoryContext) => {
     const variants: string[] = context.argTypes.variant.options.slice(1);
diff --git a/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts b/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts
index 2696b9aac7..348cee0718 100644
--- a/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts
+++ b/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts
@@ -16,7 +16,7 @@ export const PostTag: Story = {
   render: (args: Args, context: StoryContext) =>
     html` ${['bg-white', 'bg-dark'].map(
       bg => html`
-        <div class="${bg} p-3">
+        <div class="${bg} p-16">
           ${bombArgs({
             'size': context.argTypes.size.options,
             'icon': ['', '1001'],
@@ -27,7 +27,7 @@ export const PostTag: Story = {
             ],
           }).map(
             (bombArgs: Args) =>
-              html`<div class="d-flex flex-wrap gap-1 mb-4">
+              html`<div class="d-flex flex-wrap gap-4 mb-24">
                 ${context.argTypes.variant.options
                   .filter((v: string) => v !== 'null')
                   .map((variant: string) =>
diff --git a/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts b/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts
index ac86b3f25f..784647501e 100644
--- a/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts
+++ b/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts
@@ -83,7 +83,7 @@ export const Icon: Story = {
 export const Variants: Story = {
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      html`<div class="d-flex flex-wrap gap-3">${story(context.args, context)}</div>`,
+      html`<div class="d-flex flex-wrap gap-16">${story(context.args, context)}</div>`,
   ],
   render: (args: Args, context: StoryContext) => {
     const variants: string[] = context.argTypes.variant.options.slice(1);
diff --git a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
index 74f96303aa..b121d1d6fe 100644
--- a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts
@@ -19,10 +19,10 @@ export const Toast: Story = {
     const longText =
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia. Sequi excepturi quia voluptate nesciunt cum veritatis? Quas molestias nostrum temporibus saepe porro facilis tempora natus non modi fugiat, vitae facere quos placeat maiores incidunt illo itaque sequi dolore! Temporibus recusandae, veritatis eos vitae optio porro magni rem culpa enim provident sed. Libero blanditiis delectus voluptatibus, temporibus alias laudantium ad tempora iure, sunt minima maiores qui ut? Aliquam quis obcaecati id, officiis accusamus voluptas rerum magnam, est a culpa voluptatum tenetur ab, asperiores vel dolor ipsum alias tempore sint aliquid? Eum architecto laboriosam dolor inventore deleniti? Repellat perferendis ratione dolorem, amet deleniti minima repudiandae eos iure maiores, dicta sequi architecto ipsa sit ab laudantium praesentium maxime asperiores molestiae ad nulla ullam est saepe vero. Qui ratione vero dicta nisi molestiae rem consectetur, natus ipsam facilis repellendus animi ullam debitis temporibus sapiente quam.';
     return html`
-      <div class="d-flex flex-wrap gap-1 align-items-start">
+      <div class="d-flex flex-wrap gap-4 align-items-start">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
+            <div class="${bg} d-flex flex-wrap align-items-start gap-16 p-16">
               ${bombArgs({
                 title: ['Title', shortText],
                 content: [shortText, longText],
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index fa4a69b566..9b99373341 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -89,7 +89,7 @@ const meta: MetaComponent = {
       name: 'Icon',
       description:
         'Defines a custom icon.' +
-        '<span className="mt-mini alert alert-info alert-sm">' +
+        '<span className="mt-8 alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
         '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
index 383285161e..f441fab1b0 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts
@@ -31,7 +31,7 @@ export const TopicTeaser: Story = {
                 .filter((args: Args) => args.title !== args.subtitle || args.linkCount == 5)
                 .map((args: Args) => {
                   return html`
-                    <div class="p-3">
+                    <div class="p-16">
                       ${Default.render?.({ ...context.args, ...Default.args, ...args }, context)}
                     </div>
                   `;
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
index 47155cec42..10cc43c464 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -165,11 +165,11 @@ export const Default: Story = {
 
     const content = html`
       <div class="topic-teaser-content">
-        <h2 class="topic-teaser-title font-curve-large mb-large">
+        <h2 class="topic-teaser-title font-curve-large mb-24">
           <span class="bold">${args.title}</span>
           <span class="light">${args.subtitle}</span>
         </h2>
-        <ul class="link-list mb-large">
+        <ul class="link-list mb-24">
           ${links}
         </ul>
       </div>
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html b/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
index 382e9effe3..d15f140049 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
+++ b/packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html
@@ -1,4 +1,4 @@
-<div class="form-control-wrapper form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-16">
   <input
     id="typeahead-basic"
     placeholder=" "
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.sample.html b/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
index 382e9effe3..d15f140049 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
+++ b/packages/documentation/src/stories/components/typeahead/typeahead.sample.html
@@ -1,4 +1,4 @@
-<div class="form-control-wrapper form-floating mb-3">
+<div class="form-control-wrapper form-floating mb-16">
   <input
     id="typeahead-basic"
     placeholder=" "
diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
index c9edb9ac2d..9c79c686f0 100644
--- a/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
+++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.docs.mdx
@@ -25,12 +25,12 @@ Bedingungen wie Menschen ohne Behinderungen beanspruchen können.</p>
 
 Disabled states of input fields or buttons pose many accessibility issues.
 
-<ul class="list-unstyled ms-regular">
-  <div class="d-flex gap-mini"><div>❌</div><li>Disabled fields cannot be reached by pressing tab</li></div>
-  <div class="d-flex gap-mini"><div>❌</div><li>It's often unclear why something is disabled</li></div>
-  <div class="d-flex gap-mini"><div>❌</div><li>It's often unclear how to enable a disabled field or button</li></div>
-  <div class="d-flex gap-mini"><div>❌</div><li>Disabled fields have low contrast</li></div>
-  <div class="d-flex gap-mini"><div>❌</div><li>The disabled state of a field is not always obvious (hard to discern from an enabled field)</li></div>
+<ul class="list-unstyled ms-16">
+  <div class="d-flex gap-8"><div>❌</div><li>Disabled fields cannot be reached by pressing tab</li></div>
+  <div class="d-flex gap-8"><div>❌</div><li>It's often unclear why something is disabled</li></div>
+  <div class="d-flex gap-8"><div>❌</div><li>It's often unclear how to enable a disabled field or button</li></div>
+  <div class="d-flex gap-8"><div>❌</div><li>Disabled fields have low contrast</li></div>
+  <div class="d-flex gap-8"><div>❌</div><li>The disabled state of a field is not always obvious (hard to discern from an enabled field)</li></div>
 </ul>
 
 <div class="table-responsive">
@@ -46,16 +46,16 @@ Disabled states of input fields or buttons pose many accessibility issues.
       </tr>
       <tr>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>❌</div><li>Forms with required fields tend to have the send button disabled until all required fields are correctly filled. The issue here is that with long forms or on small devices it's sometimes hard to spot the one field that was missed.</li>
           </ul>
-          
+
         </td>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>✔️</div><li>Let the user make mistakes and help them to correct them. Mark the required fields with error messages, scroll to the first invalid field and help the user fill the form correctly.</li>
           </ul>
-        
+
         </td>
       </tr>
       <tr>
@@ -63,12 +63,12 @@ Disabled states of input fields or buttons pose many accessibility issues.
       </tr>
       <tr>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>❌</div><li>The user submits a form. While the client waits for the server response and to prevent double submission, the submit button gets disabled. The reason why this button gets disabled might not be obvious.</li>
           </ul>
         </td>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>✔️</div><li>Provide a loading indicator or display a message that shows current progress when uploading large files. Disable duplicate form submissions internally by either aborting the current request and sending a new one or supressing new submissions during loading. Offer a remedy if the request timed out or an error occurred on the server (reload the page, retry form submission, ...).</li>
           </ul>
         </td>
@@ -78,12 +78,12 @@ Disabled states of input fields or buttons pose many accessibility issues.
       </tr>
       <tr>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>❌</div><li>Some options in a radio button group or select field are disabled because they are not available at this time or with the current configuration. This can be confusing because it's often unclear why these options are not available or how to enable them.</li>
           </ul>
         </td>
         <td>
-          <ul class="list-unstyled d-flex gap-mini">
+          <ul class="list-unstyled d-flex gap-8">
             <div>✔️</div>
             <li>
             There are multiple possible solutions, depending on the situation:
diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
index 832d2170e1..25da221ede 100644
--- a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
+++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
@@ -19,7 +19,7 @@ export const Default: Story = {};
 export const FormGoodExample: Story = {
   render: () => html`
     <form id="myForm" onsubmit="validateForm(event)" novalidate>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="firstname">Firstname</label>
           <input type="text" id="firstname" class="form-control" required />
@@ -31,7 +31,7 @@ export const FormGoodExample: Story = {
           <div class="invalid-feedback">Please enter your lastname.</div>
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="phonenumber">Phone Number</label>
           <input type="tel" id="phonenumber" class="form-control" />
@@ -43,7 +43,7 @@ export const FormGoodExample: Story = {
           <div class="invalid-feedback">Please enter a valid email address.</div>
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="address">Address</label>
           <input type="text" id="address" class="form-control" />
@@ -54,7 +54,7 @@ export const FormGoodExample: Story = {
           <div class="invalid-feedback">Please enter your city.</div>
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="country">Country</label>
           <input type="text" id="country" class="form-control" />
@@ -66,7 +66,7 @@ export const FormGoodExample: Story = {
           <div class="invalid-feedback">Please enter your zip code.</div>
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="question1">Random Question 1</label>
           <input type="text" id="question1" class="form-control" required />
@@ -77,7 +77,7 @@ export const FormGoodExample: Story = {
           <input type="text" id="question2" class="form-control" />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="question3">Random Question 3</label>
           <input type="text" id="question3" class="form-control" />
@@ -88,7 +88,7 @@ export const FormGoodExample: Story = {
           <div class="invalid-feedback">Please answer this question.</div>
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-check">
             <input class="form-check-input" type="checkbox" id="terms" required />
@@ -99,7 +99,7 @@ export const FormGoodExample: Story = {
           </div>
         </div>
       </div>
-      <div class="d-flex flex-row-reverse gap-mini">
+      <div class="d-flex flex-row-reverse gap-8">
         <button class="btn btn-primary" type="submit">Send</button>
       </div>
     </form>
@@ -150,7 +150,7 @@ export const FormGoodExample: Story = {
 
         // Create loader element
         const loader = document.createElement('div');
-        loader.classList.add('loader', 'loader-16', 'd-inline-block', 'me-1');
+        loader.classList.add('loader', 'loader-16', 'd-inline-block', 'me-4');
         loader.setAttribute('role', 'status');
         loader.setAttribute('aria-live', 'polite');
         loader.setAttribute('aria-hidden', 'true');
@@ -170,7 +170,7 @@ export const FormGoodExample: Story = {
 
 export const FormBadExample: Story = {
   render: () => html` <form id="myBadForm" onsubmit="submitBadForm(event)" novalidate>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="firstname">Firstname</label>
           <input type="text" id="firstname" class="form-control" required />
@@ -180,7 +180,7 @@ export const FormBadExample: Story = {
           <input type="text" id="lastname" class="form-control" required />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="phonenumber">Phone Number</label>
           <input type="tel" id="phonenumber" class="form-control" />
@@ -190,7 +190,7 @@ export const FormBadExample: Story = {
           <input type="email" id="email" class="form-control" required />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="address">Address</label>
           <input type="text" id="address" class="form-control" />
@@ -200,7 +200,7 @@ export const FormBadExample: Story = {
           <input type="text" id="city" class="form-control" />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="country">Country</label>
           <input type="text" id="country" class="form-control" />
@@ -210,7 +210,7 @@ export const FormBadExample: Story = {
           <input type="number" id="zip" class="form-control" />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="question1">Random Question 1</label>
           <input type="text" id="question1" class="form-control" required />
@@ -220,7 +220,7 @@ export const FormBadExample: Story = {
           <input type="text" id="question2" class="form-control" />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <label class="form-label" for="question3">Random Question 3</label>
           <input type="text" id="question3" class="form-control" />
@@ -230,7 +230,7 @@ export const FormBadExample: Story = {
           <input type="text" id="question4" class="form-control" required />
         </div>
       </div>
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-check">
             <input class="form-check-input" type="checkbox" id="termsBad" required />
@@ -240,7 +240,7 @@ export const FormBadExample: Story = {
           </div>
         </div>
       </div>
-      <div class="d-flex flex-row-reverse gap-mini">
+      <div class="d-flex flex-row-reverse gap-8">
         <button class="btn btn-primary" type="submit" disabled>Send</button>
       </div>
     </form>
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
index 667a9ae0d1..ee292e5196 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
@@ -16,5 +16,5 @@ type Story = StoryObj;
 
 export const Default: Story = {
   render: () =>
-    html` <div class="w-50 rounded p-regular bg-aubergine elevation-5">I'm elevated!</div> `,
+    html` <div class="w-50 rounded p-16 bg-aubergine elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
index 601925201c..5bfb236ab5 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
@@ -10,7 +10,7 @@ const meta: MetaExtended = {
   },
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="p-regular column-example text-center">${story(args, context)}</div>
+      <div class="p-16 column-example text-center">${story(args, context)}</div>
     `,
   ],
   args: {
@@ -252,7 +252,7 @@ export const ResetOffsetExample: Story = {
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html`
       ${story(args, context)}
-      <p class="mt-regular"><small>Resize the browser window to see changes.</small></p>
+      <p class="mt-16"><small>Resize the browser window to see changes.</small></p>
     `,
   ],
   render: () => html`
diff --git a/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx
index 449c92db1d..73a1f27865 100644
--- a/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/layout/shared.blocks.tsx
@@ -6,7 +6,7 @@ import scss from './shared.module.scss';
 export const SCSS_VARIABLES: any = parse(scss);
 
 export const SpecTable = (props: { children: string | JSX.Element | JSX.Element[] }) => (
-  <div className="table-responsive my-big">
+  <div className="table-responsive my-32">
     <table className="table">
       <thead>
         <tr>
diff --git a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
index 67f3efc434..78574aa0d5 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
+++ b/packages/documentation/src/stories/foundation/typography/typography.docs.mdx
@@ -54,7 +54,7 @@ The line height depends on the font size and is specified with a multiplying fac
 
 ### Responsive font size
 
-<div className="alert alert-info my-3">
+<div className="alert alert-info my-16">
   <h4 className="h5">Deprecated font-size definitions</h4>
   <div>
     The size and number of font-curves will change in the future because the naming and values used
diff --git a/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx b/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx
index bd4c8d292b..44916243be 100644
--- a/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/design-principles/design-principles.docs.mdx
@@ -16,7 +16,7 @@ Our aim is to make things simple, trustworthy, and inclusive. We create easy-to-
     <div className="col-lg-3 principle-container--item" key={index}>
       <div className="principle">
         <post-icon name={principle.icon} style={{ fontSize: '3rem' }}></post-icon>
-        <h3 className="principle--title mt-small-large">{principle.title}</h3>
+        <h3 className="principle--title mt-20">{principle.title}</h3>
         <p className="principle--description">{principle.description}</p>
       </div>
     </div>
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts
index 0258d7e0ab..03dd562785 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts
@@ -118,7 +118,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- General Files -->
           <section>
             <h6>Paths &amp; Files</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -130,7 +130,7 @@ export class MigrationV45ManualListComponent extends LitElement {
 
                   <label class="form-check-label" for="general.naming_cwfpackagename">
                     <span class="tag tag-sm tag-danger">breaking</span> Renamed <em>packages</em>.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>@******/common-web-frontend</code> became
                         <code>@swisspost/design-system-styles</code>
@@ -160,8 +160,8 @@ export class MigrationV45ManualListComponent extends LitElement {
                     Renamed entry files. Renamed entry files.
                     <br />
 
-                    <ul class="mt-2">
-                      <li class="mb-2">
+                    <ul class="mt-8">
+                      <li class="mb-8">
                         <strong>Default (index)</strong>
                         for default Post styles:
                         <br />
@@ -169,7 +169,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                         to
                         <code> @use "@swisspost/design-system-styles"; </code>
                       </li>
-                      <li class="mb-2">
+                      <li class="mb-8">
                         <strong>Intranet</strong>
                         for default Post styles + intranet header styles:
                         <br />
@@ -177,7 +177,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                         to
                         <code> @use "@swisspost/design-system-styles/intranet.scss"; </code>
                       </li>
-                      <li class="mb-2">
+                      <li class="mb-8">
                         <strong>Basics</strong>
                         for resets, typography, utilities and grid only (use this for small pages
                         with lots of custom styles):
@@ -186,7 +186,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                         to
                         <code> @use "@swisspost/design-system-styles/basics.scss"; </code>
                       </li>
-                      <li class="mb-2">
+                      <li class="mb-8">
                         <strong>Core</strong>
                         for functions, mixins, variables and placeholders:
                         <br />
@@ -273,7 +273,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- General Variables -->
           <section>
             <h6>Variables</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -334,7 +334,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="general.variables_floatinglabel">
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>floating-label</em> variables.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$form-floating-label-padding-t</code></li>
                       <li><code>$form-floating-label-padding-b</code></li>
                       <li><code>$form-floating-textarea-line-height</code></li>
@@ -356,7 +356,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="general.variables_colorsremoved">
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>color</em> variables.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>$white-alpha-10</code>, <code>$white-alpha-20</code>,
                         <code>$white-alpha-40</code>, <code>$white-alpha-60</code>,
@@ -395,7 +395,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="general.variables_colorsrenamed">
                     <span class="tag tag-sm tag-danger">breaking</span> Renamed
                     <em>color</em> variables.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$gray-pampas</code> became <code>$gray-background-light</code></li>
                       <li><code>$gray-cararra</code> became <code>$gray-background</code></li>
                       <li><code>$colors</code> became <code>$background-colors</code></li>
@@ -423,7 +423,7 @@ export class MigrationV45ManualListComponent extends LitElement {
 
                   <label class="form-check-label" for="general.variables_lineheigts">
                     Dropped usage of <em>line-height</em> variables.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$line-height-sm</code></li>
                       <li><code>$line-height-lg</code></li>
                     </ul>
@@ -459,7 +459,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="general.variables_headingfontsizes">
                     Dropped usage of <em>font-size</em> variables.<br />
                     Headings now have responsive font-sizes.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$h1-font-size</code></li>
                       <li><code>$h2-font-size</code></li>
                       <li><code>$h3-font-size</code></li>
@@ -477,7 +477,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- General Mixins -->
           <section>
             <h6>Mixins</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -490,7 +490,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="general.mixins_fontsizelineheight">
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>font-size</em> and <em>line-height</em> mixins:<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>font-size-calc()</code></li>
                       <li><code>font-size-and-lineheight()</code></li>
                       <li><code>font-line-height()</code></li>
@@ -504,7 +504,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- General Classes -->
           <section>
             <h6>Classes</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -540,7 +540,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     >${this._templateAutoIconAngular()}
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>secondary</em> classes.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>.bg-secondary</code></li>
                       <li><code>.border-secondary</code></li>
                       <li><code>.text-secondary</code></li>
@@ -562,7 +562,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span>
                     Updated spacing and alignment helper classes, for better support of
                     <em>rtl-mode</em>.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>.ml-[size]</code> became <code>.ms-[size]</code></li>
                       <li>
                         <code>.ml-[breakpoint]-[size]</code> became
@@ -629,7 +629,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span> Updated
                     <em>sr-only</em>
                     classes.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>.sr-only</code> became <code>.visually-hidden</code></li>
                       <li>
                         <code>.sr-only-focusable</code> became
@@ -654,7 +654,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Alert / Notifications -->
           <section>
             <h6>Alert / Notification</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -703,7 +703,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Badge -->
           <section>
             <h6>Badge</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -717,7 +717,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     ${this._templateAutoIconAngular()}
                     <span class="tag tag-sm tag-danger">breaking</span> Renamed
                     <em>badge</em> classes.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>.badge-pill</code> became
                         <code>.rounded-pill</code>
@@ -758,7 +758,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Background -->
           <section>
             <h6>Background</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -790,7 +790,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Blockquote -->
           <section>
             <h6>Blockquote</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -840,7 +840,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Button -->
           <section>
             <h6>Button</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -874,7 +874,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="bootstrap.buttons_borderradius">
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>button</em> variables.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$btn-border-radius-rg</code></li>
                       <li><code>$btn-border-radius-map</code></li>
                     </ul>
@@ -892,7 +892,7 @@ export class MigrationV45ManualListComponent extends LitElement {
 
                   <label class="form-check-label" for="bootstrap.buttons_borderradius2">
                     Dropped the usage of <em>button</em> variables.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$btn-border-radius-sm</code></li>
                       <li><code>$btn-border-radius-lg</code></li>
                     </ul>
@@ -946,7 +946,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Button Close -->
           <section>
             <h6>Button Close</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1014,7 +1014,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Cards -->
           <section>
             <h6>Card</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1045,7 +1045,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Forms -->
           <section>
             <h6>Forms</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1074,7 +1074,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="bootstrap.forms_formgroup">
                     ${this._templateAutoIconAngular()} Dropped usage of
                     <code>.form-group</code> class.<br />
-                    Use <em>utility-class</em>&nbsp;<code>.mb-regular</code> instead.<br />
+                    Use <em>utility-class</em>&nbsp;<code>.mb-16</code> instead.<br />
                   </label>
                 </div>
               </li>
@@ -1107,7 +1107,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-Controls -->
           <section>
             <h6>From Control</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1157,7 +1157,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-Select -->
           <section>
             <h6>From Select</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1191,7 +1191,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <em>multi-select</em> and
                     <em>custom-select</em>
                     classes.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>.form-control</code> became
                         <code>.form-select</code>
@@ -1259,7 +1259,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-Textarea -->
           <section>
             <h6>From Textarea</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1291,7 +1291,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-File -->
           <section>
             <h6>Form File</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1320,7 +1320,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-Checkbox -->
           <section>
             <h6>From Checkbox</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1335,7 +1335,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span> Renamed
                     <em>control</em>
                     classes.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>.custom-control.custom-checkbox</code> became
                         <code>.form-check</code>
@@ -1407,7 +1407,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Bootstrap Form-Radio -->
           <section>
             <h6>From Radio</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1422,7 +1422,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span> Renamed
                     <em>control</em>
                     classes.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>.custom-control.custom-radio</code> became
                         <code>.form-check</code>
@@ -1506,7 +1506,7 @@ export class MigrationV45ManualListComponent extends LitElement {
               </span>
             </p>
 
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1520,7 +1520,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     ${this._templateAutoIconAngular()}
                     <span class="tag tag-sm tag-danger">breaking</span> Refactored
                     <em>switch</em> classes.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>.switch</code> became
                         <code>.form-check.form-switch</code>
@@ -1546,7 +1546,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     ${this._templateAutoIconAngular()}
                     <span class="tag tag-sm tag-danger">breaking</span> Refactored
                     <em>switch-label</em>.<br />
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li>
                         <code>div.switch label</code> (before <code>label.switch-toggler</code>)
                         became
@@ -1621,7 +1621,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- ngBootstrap Buttons -->
           <div>
             <h6>Buttons</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1676,7 +1676,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- ngBootstrap DatePicker -->
           <div>
             <h6>DatePicker</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1689,7 +1689,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                   <label class="form-check-label" for="ngbootstrap.datepickers_variables">
                     <span class="tag tag-sm tag-danger">breaking</span> Removed
                     <em>padding</em> variables.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>$ngb-dp-icon-padding</code></li>
                       <li><code>$ngb-dp-icon-padding-sm</code></li>
                       <li><code>$ngb-dp-icon-padding-rg</code></li>
@@ -1711,7 +1711,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- ngBootstrap Modal -->
           <div>
             <h6>Modal</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1767,7 +1767,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- jQuery Accordion -->
           <div>
             <h6 class="h6 bold">Accordion</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1811,7 +1811,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Post Accordion -->
           <div>
             <h6>Accordion</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1851,7 +1851,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Post Custom-Select -->
           <div>
             <h6>Custom-Select</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1919,7 +1919,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Post Subnavigation -->
           <div>
             <h6>Subnavigation</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1949,7 +1949,7 @@ export class MigrationV45ManualListComponent extends LitElement {
           <!-- Post Topic Teaser -->
           <div>
             <h6>Topic Teaser</h6>
-            <ul class="list-unstyled my-3">
+            <ul class="list-unstyled my-16">
               <li>
                 <div class="form-check">
                   <input
@@ -1964,7 +1964,7 @@ export class MigrationV45ManualListComponent extends LitElement {
                     <span class="tag tag-sm tag-danger">breaking</span> Required
                     <em>image</em>
                     attributes.
-                    <ul class="mt-2">
+                    <ul class="mt-8">
                       <li><code>width="100%"</code></li>
                       <li><code>height="100%"</code></li>
                     </ul>
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts
index 22b6d98a57..d24f1a5fe1 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts
@@ -110,7 +110,7 @@ export class MigrationV45Component extends LitElement {
                 `
               : nothing}
             <h4>Deprecations</h4>
-            <ul class="mt-2 mb-3">
+            <ul class="mt-8 mb-16">
               <li>
                 <p>
                   <strong>Dropped jQuery dependency</strong>
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts
index 3a425bb1fb..1420f6156c 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts
@@ -119,7 +119,7 @@ export class MigrationV67Component extends LitElement {
               <h4>Styles</h4>
 
               <ul>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Removed the following <em>color</em> variables
                     <span class="tag tag-sm tag-danger">breaking</span>
@@ -136,27 +136,27 @@ export class MigrationV67Component extends LitElement {
                     <code>$warning</code>.
                   </p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Removed the Sass map <code>$contextual-colors</code>
                     <span class="tag tag-sm tag-danger">breaking</span>
                   </p>
                   <p class="info">Instead use the map <code>$signal-colors</code>.</p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Removed the Sass variable <code>$gray-background-light</code>
                     <span class="tag tag-sm tag-danger">breaking</span>
                   </p>
                   <p class="info">Instead use the variable <code>$light</code>.</p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Renamed the Sass variable <code>$gray-background</code> to <code>$gray</code>
                     <span class="tag tag-sm tag-danger">breaking</span>
                   </p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Removed the following classes out of the <em>background-utilities</em>
                     <span class="tag tag-sm tag-danger">breaking</span>
@@ -172,7 +172,7 @@ export class MigrationV67Component extends LitElement {
                     <code>.bg-warning</code>.
                   </p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Restricted the <em>badge</em> usage to showcasing counts exclusively ⚙️
                     <span class="tag tag-sm tag-danger">breaking</span>
@@ -185,7 +185,7 @@ export class MigrationV67Component extends LitElement {
                     </p>
                   </p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Updated the <em>badge</em> color to red.
                   </p>
@@ -202,7 +202,7 @@ export class MigrationV67Component extends LitElement {
               <h4>Web Components</h4>
 
               <ul>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Updated the package entry file paths within the <em>package.json</em> to the
                     paths, recommended by stencil
@@ -229,7 +229,7 @@ export class MigrationV67Component extends LitElement {
                     lazy-loaded components.
                   </p>
                 </li>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Renamed all <em>custom-events</em> in our existing web-components
                     <span class="tag tag-sm tag-danger">breaking</span>
@@ -264,7 +264,7 @@ export class MigrationV67Component extends LitElement {
                 ${
                   this.angular
                     ? html`
-                        <li class="mb-3">
+                        <li class="mb-16">
                           <h5>
                             ngbAccordion
                             <span class="tag tag-sm tag-danger">breaking</span>
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
index e0d87a3891..0e3663a67b 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv8-9.component.ts
@@ -38,7 +38,7 @@ export class MigrationV89Component extends LitElement {
               <h4>Styles</h4>
 
               <ul>
-                <li class="mb-3">
+                <li class="mb-16">
                   <p>
                     Removed deprecated line-height variables
                     <span class="tag tag-sm tag-danger">breaking</span>
diff --git a/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts
index d72aab9461..af05f6eb2d 100644
--- a/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts
+++ b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts
@@ -17,7 +17,7 @@ export class SetupComponent extends LitElement {
   render() {
     return html`
       <section>
-        <div class="row gap-large migration-options">
+        <div class="row gap-24 migration-options">
           <div class="col-auto">
             <label class="form-label font-curve-small bold" for="docs_Default_ExampleSelect">
               What currentVersion of the Design System is your application currently using?
diff --git a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
index 1cb5209bd1..6ee4b4e4e6 100644
--- a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
@@ -26,11 +26,11 @@ The header for client-facing applications.
   <li><a href="#migration-from-the-old-header" target="_self">Migration from the old header</a></li>
 </ul>
 
-<div class="card my-bigger-big">
+<div class="card my-40">
   <div class="card-body">
     <h5 class="card-title">Request a configuration</h5>
 
-    <p class="card-text">The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header. 
+    <p class="card-text">The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
     <br/>If you're working on a new project, you probably need a new configuration. Please contact the Post Portal Team.</p>
 
     <a className="mb-small-r btn-primary btn"
@@ -68,7 +68,7 @@ Internet-header package provide two versions:
     <Source code={SampleFrameworks} dark={SourceDarkMode} language="html" />
 
     <div>
-      <div class="row mb-2">
+      <div class="row mb-8">
         <div class="col-6 fw-bold">Lazy-Loaded</div>
         <div class="col-6 fw-bold">Bare Component</div>
       </div>
@@ -90,7 +90,7 @@ Internet-header package provide two versions:
     - [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header).
 
     <div>
-      <div class="row mb-2">
+      <div class="row mb-8">
         <div class="col-6 fw-bold">Lazy-Loaded</div>
         <div class="col-6 fw-bold">Bare Component</div>
       </div>
diff --git a/packages/documentation/src/stories/home.docs.mdx b/packages/documentation/src/stories/home.docs.mdx
index 0b17c8f189..86ce0adefe 100644
--- a/packages/documentation/src/stories/home.docs.mdx
+++ b/packages/documentation/src/stories/home.docs.mdx
@@ -8,9 +8,9 @@ import { technologies } from './home.data';
 
 <Meta of={HomeStories} />
 
-<div className="mt-huge text-center">
+<div className="mt-56 text-center">
   <h2 className="h3">Packages &amp; Resources</h2>
-  <ul className="mt-big tile-wrapper" role="list">
+  <ul className="mt-32 tile-wrapper" role="list">
     {packages.map(p => (
       <li key={p.name}>
         <ti-le title={p.name} href={p.link.github.href} ariaLabel={p.link.github.ariaLabel}>
@@ -20,8 +20,8 @@ import { technologies } from './home.data';
       </li>
     ))}
   </ul>
-  <div className="mt-regular mb-regular d-flex gap-mini flex-wrap justify-content-center">
-    <div className="mt-big mb-regular w-100">
+  <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
+    <div className="mt-32 mb-16 w-100">
       <a className="btn btn-primary btn-lg" href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs">Get started</a>
     </div>
     <a
@@ -57,8 +57,8 @@ import { technologies } from './home.data';
     <sup>2</sup> Login required. Get access with your post account, or click <a href="mailto:ux@post.ch?subject=I need access to Figma&body=Hello%2C%20I%20need%20access%20to%20Figma%20%0A%E2%80%A2%20%20Project%20name%3A%20%0A%E2%80%A2%20Project%20Owner%20at%20the%20Post%20Office%20%28email%29%3A%20%0A%E2%80%A2%20Project%20Start%20Date%3A%20%0A%E2%80%A2%20Email%20address%20to%20be%20authorized%3A%20">here</a>.</p>
 </div>
 
-<div className="mt-huge py-huge bg-light bg-fullwidth text-center">
-  <h2 className="h3 mb-big">Features</h2>
+<div className="mt-56 py-56 bg-light bg-fullwidth text-center">
+  <h2 className="h3 mb-32">Features</h2>
 
   <div className="row g-0">
     <div className="col-md-4">
@@ -94,8 +94,8 @@ import { technologies } from './home.data';
   </div>
 </div>
 
-<div className="mt-huge text-center">
-  <h2 className="h3 mb-big">Technologies</h2>
+<div className="mt-56 text-center">
+  <h2 className="h3 mb-32">Technologies</h2>
 
   <div className="tile-wrapper">
     {technologies.map(t => (
diff --git a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
index ec93c946b3..132302c9ea 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
+++ b/packages/documentation/src/stories/patterns/forms/forms.docs.mdx
@@ -55,7 +55,7 @@ width. With this setup, we can define a max-width on the input field to shrink i
 ## Form buttons
 
 Buttons, often at the end of the form are right aligned. We can achieve this with the classes `d-flex flex-row-reverse`. This will ensure that the primary button is focused first (because of the markup order) but is
-still aligned to the right. To get some margin between the button we can use the `.gap-mini` class. Note that for the buttons, we don't need any row/col structure.
+still aligned to the right. To get some margin between the button we can use the `.gap-8` class. Note that for the buttons, we don't need any row/col structure.
 
 <Canvas of={FormPatternsStories.Buttons} sourceState="shown" />
 
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index 1c0f0b6764..c5f6c06d6f 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -68,11 +68,11 @@ export const CustomWidth: Story = {
 
 export const VerticalSpacing: Story = {
   render: () => html`
-    <div class="mb-regular">
+    <div class="mb-16">
       <label for="firstname">Firstname</label>
       <input type="text" id="firstname" class="form-control" />
     </div>
-    <div class="mb-regular">
+    <div class="mb-16">
       <label for="lastname">Lastname</label>
       <input type="text" id="lastname" class="form-control" />
     </div>
@@ -81,11 +81,11 @@ export const VerticalSpacing: Story = {
 
 export const Buttons: Story = {
   render: () => html`
-    <div class="mb-regular">
+    <div class="mb-16">
       <label for="firstname">Firstname</label>
       <input type="text" id="firstname" class="form-control" />
     </div>
-    <div class="d-flex flex-row-reverse gap-mini">
+    <div class="d-flex flex-row-reverse gap-8">
       <button class="btn btn-primary">Send</button>
       <button class="btn btn-secondary">Cancel</button>
     </div>
@@ -115,7 +115,7 @@ export const Validation: Story = {
   render: () => html`
     <form action="/">
       <!-- Form Control -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-floating">
             <input
@@ -145,7 +145,7 @@ export const Validation: Story = {
       </div>
 
       <!-- Form Select -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-floating">
             <select id="FormSelectInvalid" class="form-select is-invalid" required></select>
@@ -167,7 +167,7 @@ export const Validation: Story = {
       </div>
 
       <!-- Form Select Multiple-->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-floating">
             <select
@@ -195,7 +195,7 @@ export const Validation: Story = {
       </div>
 
       <!-- Form File -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-floating">
             <input id="FormFileInvalid" type="file" class="form-control is-invalid" required />
@@ -213,7 +213,7 @@ export const Validation: Story = {
       </div>
 
       <!-- Form Textarea -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-floating">
             <textarea
@@ -244,7 +244,7 @@ Value</textarea
       </div>
 
       <!-- Form Checkbox -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-check">
             <input class="form-check-input is-invalid" id="FormCheckboxInvalid" type="checkbox" />
@@ -267,7 +267,7 @@ Value</textarea
       </div>
 
       <!-- Form Radio -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-check">
             <input class="form-check-input is-invalid" id="FormRadioInvalid" type="radio" />
@@ -285,7 +285,7 @@ Value</textarea
       </div>
 
       <!-- Form Range -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="">
             <label class="form-label" for="FormRangeInvalid">Invalid Range</label>
@@ -303,7 +303,7 @@ Value</textarea
       </div>
 
       <!-- Form Switch -->
-      <div class="row mb-regular">
+      <div class="row mb-16">
         <div class="col">
           <div class="form-check form-switch">
             <input
diff --git a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
index 71069b195c..e64bc34d35 100644
--- a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
+++ b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
@@ -15,19 +15,19 @@ function render() {
     <div class="bg-light error-container">
       <div class="container">
         <div class="row">
-          <div class="col-rg-8 py-huge">
+          <div class="col-rg-8 py-56">
             <h2>
               This page could not be found.
               <br />
               <span class="fw-light">A reasons for this could be a misspelled URL.</span>
             </h2>
-            <p class="mt-3">
+            <p class="mt-16">
               We kindly ask you to review this once again. It is also possible that we have moved,
               archived, or renamed the relevant page. Perhaps you can find the content you're
               looking for on our homepage. Or use the search on our portal to locate the desired
               page.
             </p>
-            <div class="d-flex gap-3 mt-4">
+            <div class="d-flex gap-16 mt-24">
               <a class="btn btn-primary" href="/" @click="${(e: Event) => e.preventDefault()}"
                 >Home page</a
               >
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index b1cd3521ef..4ac0d880f4 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -15,20 +15,20 @@ export default meta;
 type Story = StoryObj;
 
 export const ColoredBackground: Story = {
-  render: () => html` <div class="bg-yellow p-3">Content</div> `,
+  render: () => html` <div class="bg-yellow p-16">Content</div> `,
 };
 
 export const NestedBackgrounds: Story = {
   render: () => html`
-    <div class="bg-gray p-3">
+    <div class="bg-gray p-16">
       Content in
       <code>.bg-gray</code>
       container.
-      <div class="bg-dark p-3">
+      <div class="bg-dark p-16">
         Content in
         <code>.bg-dark</code>
         container.
-        <div class="bg-light p-3">
+        <div class="bg-light p-16">
           Content in
           <code>.bg-light</code>
           container.
@@ -40,10 +40,10 @@ export const NestedBackgrounds: Story = {
 
 export const TranslucentBackgrounds: Story = {
   render: () => html`
-    <div class="bg-aubergine p-3">Container with default opacity (1).</div>
-    <div class="bg-aubergine p-3" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
-    <div class="bg-aubergine p-3" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
-    <div class="bg-aubergine p-3" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
-    <div class="bg-aubergine p-3" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
+    <div class="bg-aubergine p-16">Container with default opacity (1).</div>
+    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
+    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
+    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
+    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
   `,
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index 2eeea5d5fd..5e883563a4 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -44,7 +44,7 @@ Post sizes can be used as suffixes in the same way. To find out which size name
 #### Sass variables
 
 {/* prettier-ignore */}
-<div className="alert alert-warning mb-bigger-big">
+<div className="alert alert-warning mb-40">
   <h2 className="alert-heading">Sizing variables are deprecated</h2>
   <p>The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
   <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index dbebae4cdc..38558d2899 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -70,7 +70,7 @@ function renderSizing(args: Args) {
 
   return html`
     <div class="sizing-example">
-      <div class="d-flex p-regular gap-regular" style="height: 150px">
+      <div class="d-flex p-16 gap-16" style="height: 150px">
         <div class="flex-fill">
           <div class="${classes}"></div>
         </div>
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
index ecd61e9877..b6d2cb7ed9 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
@@ -1,63 +1,76 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as SpacingStories from './spacing.stories';
 
+export const firstBreakpoint = Object.values(SpacingStories.SCSS_VARIABLES.firstBreakpoint)[0];
+export const breakpoints = Object.values(SpacingStories.SCSS_VARIABLES.breakpoints).map((breakpoint, i, arr) => [breakpoint, i !== arr.length - 1]);
+
 <Meta of={SpacingStories} />
 
 # Spacing
 
 <div className="lead">
-Our spacing utility brings uniform and consistent spacing to your elements,
+Ensure consistent spacing across all pages.
+</div>
 
-By adhering to standardized spacing guidelines, we maintain visual alignment and
-improve the overall user interface.
+## Margin and Padding
 
+<div className="alert alert-info">
+  <h4 className="alert-heading">Avoid applying spacing classes to grid elements (e.g. `.row`, `.col`, `.col-*`).</h4>
+  <p>The grid system uses negative margins and positive padding along the horizontal axis, and applying additional spacing classes can affect the layout unless done with careful consideration.</p>
 </div>
 
-<div className="alert alert-warning mb-bigger-big">
-  <h2 className="alert-heading">Sizing variables are deprecated</h2>
-  <p>The current set of the post-specific spacing utility is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
-  <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
-</div>
+The naming convention for spacing utilities follows this pattern:
+- For all breakpoints (<code>{firstBreakpoint}</code> and up): `{property}{sides}-{size}`
+- Starting from a specific breakpoint ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `{property}{sides}-{breakpoint}-{size}`
 
-## Padding & Margin
+### Properties
 
-You can apply the desired spacings for `margin` and/or `padding` all around an element using the classes `m-*` and `p-*`, or you can specify a position (e.g. `pt-*` , `pb-*` , `pe-*` , `ps-*` respectively for a padding at top, bottom, end/right and start/left). You can also set a spacing along the horizontal axis (i.e. right and left) using `mx-*` / `px-*` or along the vertical axis (i.e. top and bottom) using `my-*` / `py-*` .
+- `m`: for classes that set <strong>margin</strong>
+- `p`: for classes that set <strong>padding</strong>
 
-Our base spacing classes with suffixes going from 0 to 5 (`*-0`, `*-1`, ..., `*-5`).
+### Sides
 
-Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/e728de1f-0d71-4317-8bb8-cbef0bf8d5db--docs) to find out which size names are available.
+- blank: for classes that set a margin or padding on <strong>all sides</strong> (top, bottom, left, and right)
+- `x`: for classes that set a <strong>horizontal</strong> margin or padding (left and right)
+- `y`: for classes that set a <strong>vertical</strong> margin or padding (top and bottom)
+- `t`: for classes that set a margin or padding at the <strong>top</strong>
+- `b`: for classes that set a margin or padding at the <strong>bottom</strong>
+- `s`: for classes that set a margin or padding at the <strong>start</strong> (left in LTR)
+- `e`: for classes that set a margin or padding at the <strong>end</strong> (right in LTR)
 
-<div className="alert alert-warning">
-  <h4 className="alert-heading">Do not use spacing classes on grid elements (i.e. `.row`, `.col`, `.col-*`).</h4>
-  <p>Our grid is built with negative margins and positive paddings on the x-axis. Therefore, use this spacing classes only if you know exactly what you are doing!</p>
-</div>
+### Sizes
+
+See all available sizes in the example bellow.
 
-<Canvas sourceState="shown" of={SpacingStories.Default} />
+### Example
+
+<Canvas sourceState="shown" of={SpacingStories.MarginAndPadding} />
 <div className="hide-col-default">
-  <Controls of={SpacingStories.Default} />
+  <Controls of={SpacingStories.MarginAndPadding} />
 </div>
 
-## Responsive behavior
-
-By default, the above classes apply to all breakpoints.
+## Gap
 
-##### Manually specifying breakpoints
+When using `display: grid` or `display: flex`, you can use the gap utilities to manage spacing between child elements.
+These classes simplify the process of managing spacing without needing to individually add margin utilities to each child element.
 
-If you need to change the size or spacing of an element based on the breakpoint, you should
-mention it in the class name using one of the following infixes: {Object.values(SpacingStories.SCSS_VARIABLES.breakpoints).map((s, index, array) => (<span key={s}><code>{`-${s}-`}</code>{index !== array.length - 1 && ', '}</span>))}.
-When a breakpoint is specified, the size applies to that breakpoint and to all those that are
-larger.
+The format for gap classes is as follows:
+- For all breakpoints (<code>{firstBreakpoint}</code> and up): `{property}-{size}`
+- Starting from a specific breakpoint ({breakpoints.map(([b, isLast]) => (<span key={b}><code>{b}</code>{isLast ? ', ' : ''}</span>))}): `gap-{breakpoint}-{size}`
 
-The square below has a big padding from the large breakpoint (i.e. `.p-lg-big`) and a regular
-padding below (i.e. `.p-regular`).
+### Properties
 
-<Canvas of={SpacingStories.ResponsiveExample} />
+- `row-gap`: for classes that set a gap between <strong>rows</strong>
+- `column-gap`: for classes that set a gap between <strong>columns</strong>
+- `gap`: for classes that set a gap between both <strong>columns and rows</strong>
 
-##### Using automatic responsive behavior
+### Sizes
 
-Another way to define a responsive size is to use the `-r` suffix. It allows to obtain a size which updates automatically and consistently depending on the breakpoint, without having to specify anything manually.
+See all available sizes in the example bellow.
 
-The square below has a "large" responsive padding, which means the padding size
-automatically changes based on the breakpoint but remains visually consistent.
+### Example
 
-<Canvas of={SpacingStories.AutomaticResponsiveExample} />
+<Canvas sourceState="shown" of={SpacingStories.Gap} />
+<div className="hide-col-default">
+  <Controls of={SpacingStories.Gap} />
+</div>
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.module.scss b/packages/documentation/src/stories/utilities/spacing/spacing.module.scss
index 05a8bec5eb..0b5a6608cb 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.module.scss
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.module.scss
@@ -1,12 +1,18 @@
 @use 'sass:list';
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities' as tokens;
 
 :export {
-  @each $key, $value in post.$post-sizes {
-    sizes_#{$key}: #{$value};
+  @each $key, $value in tokens.$post-spacing {
+    spacing_#{$key}: #{$value};
   }
   @each $breakpoint in post.$grid-breakpoints-list {
-    breakpoints_#{$breakpoint}: $breakpoint;
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
   }
 }
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts
new file mode 100644
index 0000000000..ae8276ebb8
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts
@@ -0,0 +1,42 @@
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta, { MarginAndPadding as MandP, Gap as G } from './spacing.stories';
+import './spacing.styles.scss';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const MarginAndPadding: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    const snapshotArgs = {
+      marginSize: '24',
+      paddingSize: '16',
+      breakpointClasses: 'm-md-48 p-md-32',
+    };
+
+    return html`
+      <div class="margin-padding-example">
+        ${MandP.render?.({ ...MandP.args, ...snapshotArgs }, context)}
+      </div>
+    `;
+  },
+};
+
+export const Gap: Story = {
+  render: (_args: Args, context: StoryContext) => {
+    const snapshotArgs = {
+      gapSize: '24',
+      breakpointClass: 'gap-md-48',
+    };
+
+    return html`
+      <div class="gap-example">${G.render?.({ ...G.args, ...snapshotArgs }, context)}</div>
+    `;
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 16aaeab012..4abdc3b371 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -1,179 +1,187 @@
 import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
-import './spacing.styles.scss';
+import { MetaExtended } from '@root/types';
 import { parse } from '@/utils/sass-export';
 import scss from './spacing.module.scss';
-import { MetaExtended } from '@root/types';
+import './spacing.styles.scss';
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const SCSS_VARIABLES: any = parse(scss);
 
-const sizingOptions = ['0', '1', '2', '3', '4', '5', 'auto', ...Object.keys(SCSS_VARIABLES.sizes)];
+const properties = ['margin', 'padding', 'gap'];
+const sizes = properties.reduce((options, property) => {
+  return {
+    ...options,
+    [property]: Object.keys(SCSS_VARIABLES.spacing)
+      .filter((key: string) => key.startsWith(`post-utility-${property}-`))
+      .map((key: string) => key.replace(`post-utility-${property}-`, '')),
+  };
+}, {} as { [property: string]: string[] });
 
-const positionOptions = {
-  null: 'All around',
-  x: 'Along the horizontal axis',
-  y: 'Along the vertical axis',
-  t: 'At the top',
-  b: 'At the bottom',
-  e: 'To the right',
-  s: 'To the left',
+const sides = {
+  null: 'All sides',
+  x: 'x - Along the horizontal axis',
+  y: 'y - Along the vertical axis',
+  t: 't - At the top',
+  b: 'b - At the bottom',
+  s: 's - At the start',
+  e: 'e - At the end',
 };
 
 const meta: MetaExtended = {
   id: 'facaacfd-18f1-49b4-80f1-a96680730fa0',
   title: 'Utilities/Spacing',
-  parameters: {
-    badges: [],
-  },
-  args: {
-    marginSize: 'regular',
-    marginPosition: 'null',
-    paddingSize: 'regular',
-    paddingPosition: 'null',
-  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+function withLegend(template: TemplateResult, ...legendItems: string[]) {
+  legendItems.unshift('element');
+  return html`
+    <div class="d-flex align-items-start justify-content-between">
+      ${template}
+      <ul class="legend list-unstyled">
+        ${legendItems.map(
+          item => html`
+            <li class="d-flex align-items-center">
+              <div class="h-regular w-regular me-8 ${item}"></div>
+              <span>${item}</span>
+            </li>
+          `,
+        )}
+      </ul>
+    </div>
+  `;
+}
+
+export const MarginAndPadding: Story = {
   argTypes: {
-    marginSize: {
-      name: 'Margin size',
-      description: 'Sets the size of the Margin.',
+    marginSides: {
+      name: 'Sides',
+      description: 'Sets the margin sides.',
       control: {
         type: 'select',
+        labels: sides,
       },
-      options: sizingOptions,
+      options: Object.keys(sides),
       table: {
-        category: 'General',
+        category: 'Margin',
       },
     },
-    marginPosition: {
-      name: 'Margin Position',
-      description: 'Sets the position of the Margin.',
+    marginSize: {
+      name: 'Size',
+      description: 'Sets the margin size.',
       control: {
         type: 'select',
-        labels: positionOptions,
       },
-      options: Object.keys(positionOptions),
+      options: sizes.margin,
       table: {
-        category: 'General',
+        category: 'Margin',
       },
     },
-    paddingSize: {
-      name: 'Padding size',
-      description: 'Sets the size of the Padding.',
+    paddingSides: {
+      name: 'Sides',
+      description: 'Sets the padding sides.',
       control: {
         type: 'select',
+        labels: sides,
       },
-      options: sizingOptions.filter(option => option !== 'auto'),
+      options: Object.keys(sides),
       table: {
-        category: 'General',
+        category: 'Padding',
       },
     },
-    paddingPosition: {
-      name: 'Padding Position',
-      description: 'Sets the position of the Padding.',
+    paddingSize: {
+      name: 'Size',
+      description: 'Sets the padding size.',
       control: {
         type: 'select',
-        labels: positionOptions,
       },
-      options: Object.keys(positionOptions),
+      options: sizes.padding,
       table: {
-        category: 'General',
+        category: 'Padding',
       },
     },
   },
-};
-
-export default meta;
+  args: {
+    marginSides: 'null',
+    marginSize: '20',
+    paddingSides: 'null',
+    paddingSize: '12',
+  },
+  render: (args: Args) => {
+    const getPosition = (position: string) => (position === 'null' ? '' : position);
+    const marginClass = `m${getPosition(args.marginSides)}-${args.marginSize}`;
+    const paddingClass = `p${getPosition(args.paddingSides)}-${args.paddingSize}`;
 
-type Story = StoryObj;
+    // used only for the snapshots
+    const breakpointClasses = args.breakpointClasses ? ` ${args.breakpointClasses}` : '';
 
-export const Default: Story = {
-  render: (args: Args) => {
-    // this will be the only code visible in the code preview
-    return html`
-      <div
-        class="w-bigger-giant h-bigger-giant m${args.marginPosition === 'null'
-          ? ''
-          : args.marginPosition}-${args.marginSize} p${args.paddingPosition === 'null'
-          ? ''
-          : args.paddingPosition}-${args.paddingSize}"
-      ></div>
-    `;
+    return html` <div class="${marginClass} ${paddingClass}${breakpointClasses}"></div> `;
   },
   decorators: [
-    // everything in here will be visible in the example, but only the content coming from the `story` function will be shown in the code preview
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="spacing-example d-flex gap-3">
-        <div class="d-none">${story(args, context)}</div>
-
-        <div class="d-flex flex-fill">
-          <div
-            class="margin ${['null', 'x', 's', 'e'].includes(args.marginPosition as string) &&
-            args.marginSize === 'auto'
-              ? 'w-100'
-              : ''}"
-          >
-            <div
-              class="w-bigger-giant h-bigger-giant padding m${args.marginPosition === 'null'
-                ? ''
-                : args.marginPosition}-${args.marginSize} p${args.paddingPosition === 'null'
-                ? ''
-                : args.paddingPosition}-${args.paddingSize}"
-            >
-              <div class="h-100 content"></div>
-            </div>
-          </div>
-        </div>
-
-        <ul class="legend list-unstyled">
-          <li class="d-flex align-items-center">
-            <div class="h-regular w-regular me-mini margin"></div>
-            <span>margin</span>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="h-regular w-regular me-mini padding"></div>
-            <span>padding</span>
-          </li>
-          <li class="d-flex align-items-center">
-            <div class="h-regular w-regular me-mini content"></div>
-            <span>content</span>
-          </li>
-        </ul>
-      </div>
-    `,
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`
+        <div class="margin-padding-example">${story(context.args, context)}</div>
+      `;
+      return withLegend(storyTemplate, 'margin', 'padding');
+    },
   ],
 };
 
-export const ResponsiveExample: Story = {
-  render: () => {
-    return html` <div class="h-bigger-giant w-bigger-giant p-regular p-lg-big"></div> `;
+export const Gap: Story = {
+  argTypes: {
+    property: {
+      name: 'Property',
+      description: 'Sets the gap property.',
+      control: {
+        type: 'select',
+      },
+      options: ['gap', 'row-gap', 'column-gap'],
+      table: {
+        category: 'Gap',
+      },
+    },
+    size: {
+      name: 'Size',
+      description: 'Sets the gap size.',
+      control: {
+        type: 'select',
+      },
+      options: sizes.gap,
+      table: {
+        category: 'Gap',
+      },
+    },
   },
-  decorators: [
-    // everything in here will be visible in the example, but only the content coming from the `story` function will be shown in the code preview
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="spacing-example p-regular">
-        <div class="d-none">${story(args, context)}</div>
-        <div class="padding h-bigger-giant w-bigger-giant p-regular p-lg-big">
-          <div class="content h-100"></div>
-        </div>
-        <p><small>Resize the browser window to see changes.</small></p>
+  args: {
+    property: 'gap',
+    size: '16',
+  },
+  render: (args: Args) => {
+    // used only for the snapshots
+    const breakpointClass = args.breakpointClass ? ` ${args.breakpointClass}` : '';
+    return html`
+      <div
+        class="${args.property}-${args.size}${breakpointClass}"
+        style="display: grid; grid-template-columns: 1fr 1fr 1fr"
+      >
+        <div>First child</div>
+        <div>Second child</div>
+        <div>Third child</div>
+        <div>Fourth child</div>
+        <div>Fifth child</div>
+        <div>Sixth child</div>
       </div>
-    `,
-  ],
-};
-
-export const AutomaticResponsiveExample: Story = {
-  render: () => {
-    return html` <div class="h-bigger-giant w-bigger-giant p-large-r"></div> `;
+    `;
   },
   decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="spacing-example p-regular">
-        <div class="d-none">${story(args, context)}</div>
-        <div class="padding h-bigger-giant w-bigger-giant p-large-r">
-          <div class="content h-100"></div>
-        </div>
-        <p><small>Resize the browser window to see changes.</small></p>
-      </div>
-    `,
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`<div class="gap-example">${story(context.args, context)}</div>`;
+      return withLegend(storyTemplate, 'gap');
+    },
   ],
 };
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss b/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss
index 4e6328d3c1..f9afc38bd2 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss
@@ -1,24 +1,55 @@
+@use 'sass:color';
 @use '@swisspost/design-system-styles/core' as post;
 
-.spacing-example {
+$margin-color: color.adjust(post.$coral-bright, $lightness: 30%);
+$padding-color: color.complement($margin-color);
+$gap-color: color.adjust(post.$aubergine-bright, $lightness: 30%);
+$content-color: post.$white;
+$border: 1px solid post.$gray-40;
+
+.margin-padding-example {
+  display: flex;
+  width: fit-content;
+  background-color: $margin-color;
+
+  > div {
+    height: 100px;
+    width: 100px;
+    background-image: linear-gradient($content-color, $content-color), linear-gradient($padding-color, $padding-color);
+    background-clip: content-box, padding-box;
+    border: $border;
+  }
+}
+
+.gap-example {
+  > div {
+    width: fit-content;
+    background-color: $gap-color;
+    border: $border;
+    text-align: center;
+
+    > div {
+      background-color: $content-color;
+      padding: 12px 16px;
+    }
+  }
+}
+
+.legend {
   .margin {
-    background-color: #f4cea3;
+    background-color: $margin-color;
   }
+
   .padding {
-    background-color: #c4dab9;
-    border: 1px solid post.$gray-40;
-  }
-  .content {
-    background-color: post.$white;
+    background-color: $padding-color;
   }
 
-  .legend {
-    .padding {
-      border: 0 none;
-    }
+  .gap {
+    background-color: $gap-color;
+  }
 
-    .content {
-      border: 1px solid post.$gray-40;
-    }
+  .element {
+    background-color: $content-color;
+    border: $border;
   }
 }
diff --git a/packages/documentation/src/stories/utilities/text/text.blocks.tsx b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
index c952fba55d..71d6315c27 100644
--- a/packages/documentation/src/stories/utilities/text/text.blocks.tsx
+++ b/packages/documentation/src/stories/utilities/text/text.blocks.tsx
@@ -31,7 +31,7 @@ export const TextUtilityAPI = (props: {
       <dt className="col-3">Values:</dt>
       <dd className="col-9">
         {props.values.map(value => (
-          <code key={value} className="me-2">
+          <code key={value} className="me-8">
             {value}
           </code>
         ))}
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 15dc2b296e..d706b20076 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -49,7 +49,7 @@ import SampleColor from './text-color.sample.scss?raw';
 
 ### Font Weight
 
-<div className="alert alert-warning my-4">
+<div className="alert alert-warning my-24">
   The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
 </div>
 
@@ -70,7 +70,7 @@ import SampleColor from './text-color.sample.scss?raw';
 
 <Canvas of={TextStories.FontStyle} sourceState="shown" />
 
-<p className="mb-big">
+<p className="mb-32">
   <em>There are no Sass variables for font styles at this time.</em>
 </p>
 
@@ -109,7 +109,7 @@ Define how text-blocks are displayed.
 
 ### Color
 
-<div className="alert alert-warning my-4">
+<div className="alert alert-warning my-24">
   The `.text-auto` class is deprecated since text color is now set by the{' '}
   [backgrounds](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) themselves.
 </div>
diff --git a/packages/icons/public/index.html b/packages/icons/public/index.html
index e59b56b38a..4372e0a8fe 100644
--- a/packages/icons/public/index.html
+++ b/packages/icons/public/index.html
@@ -19,10 +19,10 @@
   </head>
   <body style="padding: 1rem">
     <!-- This is a very simple icons debug page that can also be accessed via CDN in order to quickly check on a specific package version or to test locally -->
-    <div class="container my-5" x-data="icons">
+    <div class="container my-48" x-data="icons">
       <section>
         <h1 id="converted">Icons</h1>
-        <code class="my-big d-block">
+        <code class="my-32 d-block">
           Version:
           <span x-text="icons.version"></span>
           <br />
@@ -52,7 +52,7 @@ <h1 id="converted">Icons</h1>
       </section>
 
       <section x-show="icons.wrongViewBox.length > 0">
-        <h1 class="mt-huge mb-big">Wrong ViewBox</h1>
+        <h1 class="mt-56 mb-32">Wrong ViewBox</h1>
         <p>The viewBox attribute of the incoming SVG file is not set to "0 0 32 32".</p>
         <div class="converted-icons icons">
           <template x-for="icon in icons.wrongViewBox">
@@ -69,7 +69,7 @@ <h1 class="mt-huge mb-big">Wrong ViewBox</h1>
       </section>
 
       <section x-show="icons.noKeywords.length > 0">
-        <h1 class="mt-huge mb-big">No Keywords</h1>
+        <h1 class="mt-56 mb-32">No Keywords</h1>
         <p>The incoming SVG file has no keywords specified.</p>
         <div class="converted-icons icons">
           <template x-for="icon in icons.noKeywords">
@@ -86,7 +86,7 @@ <h1 class="mt-huge mb-big">No Keywords</h1>
       </section>
 
       <section x-show="icons.errored.length > 0">
-        <h1 class="mt-huge mb-big">Errored</h1>
+        <h1 class="mt-56 mb-32">Errored</h1>
         <ul>
           <template x-for="icon in icons.errored">
             <li>
@@ -99,7 +99,7 @@ <h1 class="mt-huge mb-big">Errored</h1>
       </section>
 
       <section x-show="icons.notFound && icons.notFound.length > 0">
-        <h1 class="mt-huge mb-big">SVG file not found</h1>
+        <h1 class="mt-56 mb-32">SVG file not found</h1>
         <ul>
           <template x-for="icon in icons.noSVG">
             <li x-text="icon.file.basename"></li>
diff --git a/packages/internet-header/src/index.html b/packages/internet-header/src/index.html
index 82d449ed6c..9889ff20cf 100644
--- a/packages/internet-header/src/index.html
+++ b/packages/internet-header/src/index.html
@@ -24,7 +24,7 @@
     >
     </swisspost-internet-header>
 
-    <div class="container my-big">
+    <div class="container my-32">
       <swisspost-internet-breadcrumbs></swisspost-internet-breadcrumbs>
     </div>
 
@@ -1484,7 +1484,7 @@
       document.querySelector('swisspost-internet-breadcrumbs').customItems = customBreadcrumbItems;
     </script>
 
-    <main id="main-content-container" class="container mt-huge">
+    <main id="main-content-container" class="container mt-56">
       <h1>Test</h1>
       <button
         onclick="document.querySelector('swisspost-internet-header').shadowRoot.querySelector('post-search').toggleDropdown(true)"
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html
index 71d249541e..ca43b25572 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/navigation/navigation.component.html
@@ -1,35 +1,35 @@
 <section class="preview">
   <sp-intranet-header [showIntranetSearch]="true" siteTitle="PostWeb" searchUrl="/">
-    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item"><a href="/postweb" class="col-auto py-16 px-48 nav-link">Home</a></li>
     <li class="nav-item">
-      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+      <a href="/postweb/post-informatik" class="col-auto py-16 px-48 nav-link" target="_self">
         Post Informatik
       </a>
     </li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">HR-Portal</a></li>
     <li class="nav-item">
-      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+      <a href="/postweb/service-portal" class="col-auto py-16 px-48 nav-link">Service-Portal</a>
     </li>
     <li class="nav-item">
-      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+      <a href="/postweb/die-post" class="col-auto py-16 px-48 nav-link">Die Post</a>
     </li>
   </sp-intranet-header>
 </section>
 
 <section class="preview">
   <sp-intranet-header siteTitle="PostWeb" [optionDropdownContent]="myCustomOptions">
-    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item"><a href="/postweb" class="col-auto py-16 px-48 nav-link">Home</a></li>
     <li class="nav-item">
-      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+      <a href="/postweb/post-informatik" class="col-auto py-16 px-48 nav-link" target="_self">
         Post Informatik
       </a>
     </li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">HR-Portal</a></li>
     <li class="nav-item">
-      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+      <a href="/postweb/service-portal" class="col-auto py-16 px-48 nav-link">Service-Portal</a>
     </li>
     <li class="nav-item">
-      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+      <a href="/postweb/die-post" class="col-auto py-16 px-48 nav-link">Die Post</a>
     </li>
   </sp-intranet-header>
 </section>
@@ -42,18 +42,18 @@
     [optionHeaderContent]="headerOptions"
     [optionDropdownContent]="myCustomOptions"
   >
-    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item"><a href="/postweb" class="col-auto py-16 px-48 nav-link">Home</a></li>
     <li class="nav-item">
-      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+      <a href="/postweb/post-informatik" class="col-auto py-16 px-48 nav-link" target="_self">
         Post Informatik
       </a>
     </li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">HR-Portal</a></li>
     <li class="nav-item">
-      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+      <a href="/postweb/service-portal" class="col-auto py-16 px-48 nav-link">Service-Portal</a>
     </li>
     <li class="nav-item">
-      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+      <a href="/postweb/die-post" class="col-auto py-16 px-48 nav-link">Die Post</a>
     </li>
   </sp-intranet-header>
 </section>
@@ -64,18 +64,18 @@
     [optionHeaderContent]="headerOptions"
     [optionDropdownContent]="myCustomOptions"
   >
-    <li class="nav-item"><a href="/postweb" class="col-auto py-3 px-5 nav-link">Home</a></li>
+    <li class="nav-item"><a href="/postweb" class="col-auto py-16 px-48 nav-link">Home</a></li>
     <li class="nav-item">
-      <a href="/postweb/post-informatik" class="col-auto py-3 px-5 nav-link" target="_self">
+      <a href="/postweb/post-informatik" class="col-auto py-16 px-48 nav-link" target="_self">
         Post Informatik
       </a>
     </li>
-    <li class="nav-item"><a class="col-auto py-3 px-5 nav-link">HR-Portal</a></li>
+    <li class="nav-item"><a class="col-auto py-16 px-48 nav-link">HR-Portal</a></li>
     <li class="nav-item">
-      <a href="/postweb/service-portal" class="col-auto py-3 px-5 nav-link">Service-Portal</a>
+      <a href="/postweb/service-portal" class="col-auto py-16 px-48 nav-link">Service-Portal</a>
     </li>
     <li class="nav-item">
-      <a href="/postweb/die-post" class="col-auto py-3 px-5 nav-link">Die Post</a>
+      <a href="/postweb/die-post" class="col-auto py-16 px-48 nav-link">Die Post</a>
     </li>
   </sp-intranet-header>
 </section>
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
index 9ad11e04e1..e9741bc70e 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -11,7 +11,7 @@
   <div class="site-content container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-3"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
@@ -52,7 +52,7 @@
 
         <div></div>
       </nav>
-      <main role="main" class="col-md-9 col-lg-10 p-3">
+      <main role="main" class="col-md-9 col-lg-10 p-16">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
index aa2c812d15..0772621393 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -3,7 +3,7 @@
   <div class="container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-3"
+        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
@@ -44,7 +44,7 @@
 
         <div></div>
       </nav>
-      <main role="main" class="col-md-9 col-lg-10 p-3">
+      <main role="main" class="col-md-9 col-lg-10 p-16">
         <h1>Content</h1>
         <p>
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
index 28cb535c63..7fce0172d9 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.html
@@ -7,7 +7,7 @@
             <span class="visually-hidden">{{ getPostLogoText() }}</span>
           </a>
         </div>
-        <div class="title flex-shrink-1 px-4">
+        <div class="title flex-shrink-1 px-24">
           <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
         </div>
         <div *ngIf="showIntranetSearch" class="col search-textbox d-none d-md-block">
@@ -32,7 +32,7 @@ <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
           class="settings ms-auto flex-shrink-0 d-flex align-self-stretch"
         >
           <div class="align-self-stretch d-flex" display="dynamic" container="body">
-            <div class="align-self-center p-3">
+            <div class="align-self-center p-16">
               <div #headerExtraContent>
                 <ng-container
                   [ngTemplateOutlet]="optionHeaderContent"
@@ -56,7 +56,7 @@ <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
             placement="bottom-right"
           >
             <button
-              class="btn btn-tertiary px-3 rounded-0 flex-shrink-0 no-toggle-arrow"
+              class="btn btn-tertiary px-16 rounded-0 flex-shrink-0 no-toggle-arrow"
               id="profileMenu"
               ngbDropdownToggle
             >
@@ -100,7 +100,7 @@ <h1 class="m-0 font-weight-bold">{{ siteTitle }}</h1>
           *ngIf="hasNavbar === true"
           (click)="toggleMenu()"
           id="nav-toggler"
-          class="btn btn-lg btn-tertiary px-3 border-left rounded-0 flex-shrink-0 align-self-stretch d-md-none"
+          class="btn btn-lg btn-tertiary px-16 border-left rounded-0 flex-shrink-0 align-self-stretch d-md-none"
         >
           <em class="pi pi-2070"></em>
         </button>
diff --git a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
index 91c5cce575..05dbd6cf26 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
+++ b/packages/intranet-header-workspace/projects/intranet-header/src/lib/swisspost-intranet-header.component.ts
@@ -139,7 +139,7 @@ export class SwissPostIntranetHeaderComponent implements OnInit, OnChanges, Afte
       const extensionElement = `<li tabindex="0" class="nav-item${
         this.openedMenuOverflow ? '' : ' hidden'
       }" id="more">
-                                    <span class="nav-link col-auto py-3 px-4"></span>
+                                    <span class="nav-link col-auto py-16 px-24"></span>
                                 </li>`;
       this.navElement = this.dom.nativeElement.querySelector('#nav');
       if (this.navElement == null) {
diff --git a/packages/migrations/src/migrations/bootstrap/forms/index.ts b/packages/migrations/src/migrations/bootstrap/forms/index.ts
index 3e40449c2a..f9e68c18ea 100644
--- a/packages/migrations/src/migrations/bootstrap/forms/index.ts
+++ b/packages/migrations/src/migrations/bootstrap/forms/index.ts
@@ -24,7 +24,7 @@ class FormGroupClassUpdate implements DomUpdate {
         if (!isFloatingLabel) {
           $element
             .removeClass('form-group')
-            .addClass('mb-regular');
+            .addClass('mb-16');
         }
       });
   }
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index e21a3aa330..751410ea5a 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -17,7 +17,7 @@ export default function Home() {
 
       <section>
         <h2 className="h4 mt-huge-r">Sendung Verfolgen</h2>
-        <form className="bg-yellow mt-3 py-3 px-big d-flex gap-4">
+        <form className="bg-yellow mt-16 py-16 px-32 d-flex gap-24">
           <PostIcon name="1010" className="fs-small-huge"></PostIcon>
           <div className="form-floating" style={{ minWidth: '50%' }}>
             <input
@@ -42,27 +42,27 @@ export default function Home() {
         <div className="row">
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">Umzug melden</p>
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">Umzug melden</p>
               </div>
             </a>
           </div>
 
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">Shop</p>
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">Shop</p>
               </div>
             </a>
           </div>
 
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">
                   Preise für Briefe und Pakete
                 </p>
               </div>
@@ -71,9 +71,9 @@ export default function Home() {
 
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">
                   Paketetiketten erstellen
                 </p>
               </div>
@@ -82,9 +82,9 @@ export default function Home() {
 
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">
                   Pakete abholen lassen
                 </p>
               </div>
@@ -93,16 +93,16 @@ export default function Home() {
 
           <div className="col-xl-2 col-md-6">
             <a href="#" className="card h-100 product-card">
-              <div className="card-body p-3 product-navigation justify-content-start d-flex flex-column align-items-center">
+              <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-2 text-center text-muted fs-regular fw-normal">
+                <p className="mt-8 text-center text-muted fs-regular fw-normal">
                   Personalisierte Briefmarken
                 </p>
               </div>
             </a>
           </div>
         </div>
-        <a href="" className="text-muted btn btn-tertiary btn-md mt-3">
+        <a href="" className="text-muted btn btn-tertiary btn-md mt-16">
           <PostIcon name="3020"></PostIcon>
           Alle Onlinedienste
         </a>
@@ -114,11 +114,11 @@ export default function Home() {
             <div className="topic-teaser-container bg-yellow">
               <div className="row pt-huge-r">
                 <div className="topic-teaser-content">
-                  <h2 className="topic-teaser-title font-curve-large mb-large">
+                  <h2 className="topic-teaser-title font-curve-large mb-24">
                     <span className="bold">Post für Sie</span>
                     <span className="light">Einfach versenden, schnell ankommen</span>
                   </h2>
-                  <ul className="link-list mb-large">
+                  <ul className="link-list mb-24">
                     <li className="link-list-item">
                       <a href="#">
                         <span>Briefe versenden</span>
@@ -162,7 +162,7 @@ export default function Home() {
 
       <section className="pt-huge-r mb-huge-r">
         <div className="row">
-          <div className="col-lg-4 col-rg-6 col-12 mb-3">
+          <div className="col-lg-4 col-rg-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
               <div className="card-body bg-gray">
@@ -176,7 +176,7 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="col-lg-4 col-rg-6 col-12 mb-3">
+          <div className="col-lg-4 col-rg-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
               <div className="card-body bg-gray">
@@ -190,7 +190,7 @@ export default function Home() {
             </div>
           </div>
 
-          <div className="col-lg-4 col-rg-6 col-12 mb-3">
+          <div className="col-lg-4 col-rg-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
               <div className="card-body bg-gray">
@@ -230,7 +230,7 @@ export default function Home() {
               <PostPopover id="popover-one" className="bg-primary" closeButtonCaption="close">
                 <h3 className="h5 mt-0">Details for this content</h3>
                 <p>Here are some more details for this content.</p>
-                <div className="d-flex flex-row-reverse gap-3">
+                <div className="d-flex flex-row-reverse gap-16">
                   <button className="btn btn-primary btn-rg">OK</button>
                   <button className="btn btn-secondary btn-rg">Nope</button>
                 </div>
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
index 7c332476ef..3fe9ef430b 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
@@ -1,7 +1,7 @@
 <h1 class="visually-hidden">PrimeNg data table showcase</h1>
 
 <div
-  class="sticky-top border-bottom d-flex align-items-center justify-content-between py-regular mb-huge"
+  class="sticky-top border-bottom d-flex align-items-center justify-content-between py-16 mb-56"
   [class.bg-white]="!hasDarkBackground"
   [class.bg-nightblue]="hasDarkBackground"
 >
@@ -86,7 +86,7 @@ <h2 class="h4">Sortable</h2>
   </ng-template>
 </p-table>
 
-<hr class="my-huge" />
+<hr class="my-56" />
 
 <h2 class="h4">Filterable</h2>
 <p-table
@@ -144,7 +144,7 @@ <h2 class="h4">Filterable</h2>
   </ng-template>
 </p-table>
 
-<hr class="my-huge" />
+<hr class="my-56" />
 
 <h2 class="h4">Orderable</h2>
 <p-table
@@ -174,7 +174,7 @@ <h2 class="h4">Orderable</h2>
   </ng-template>
 </p-table>
 
-<hr class="my-huge" />
+<hr class="my-56" />
 
 <h2 class="h4">Selectable</h2>
 <p-table
@@ -208,7 +208,7 @@ <h2 class="h4">Selectable</h2>
   </ng-template>
 </p-table>
 
-<hr class="my-huge" />
+<hr class="my-56" />
 
 <h2 class="h4">With Checkboxes</h2>
 <p-table
@@ -242,7 +242,7 @@ <h2 class="h4">With Checkboxes</h2>
   </ng-template>
 </p-table>
 
-<hr class="my-huge" />
+<hr class="my-56" />
 
 <h2 class="h4">With Radio buttons</h2>
 <p-table
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
index 471523fbc4..65c95e22ac 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
@@ -18,7 +18,7 @@ interface Product {
   templateUrl: './app.component.html',
 })
 export class AppComponent {
-  @HostBinding('class') containerClasses = 'd-block container my-big py-large';
+  @HostBinding('class') containerClasses = 'd-block container my-32 py-24';
   @HostBinding('class.bg-nightblue') hasDarkBackground = false;
 
   datatableStyleClass = '';
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 65c32a0278..101f2af0f6 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -542,7 +542,7 @@
 
 - Deprecated the base64 icons defined as CSS backgrounds. This technology is outdated and contributes a large amount to the CSS bloat. The current approach for using icons is the `post-icon` web-component. (by [@gfellerph](https://github.com/gfellerph) with [#1226](https://github.com/swisspost/design-system/pull/1226))
 
-- Deprecated the post-specific sizing variables (e.g. `$size-hair`, `$size-huge`, etc.) and classes (`.m-hair`, `.mt-sm-micro`, etc.) for all of the following properties: `margin`, `padding`, `line-height`, `height`, `max-height`, `width`, `max-width` and `gap`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1267](https://github.com/swisspost/design-system/pull/1267))
+- Deprecated the post-specific sizing variables (e.g. `$size-hair`, `$size-huge`, etc.) and classes (`.m-1`, `.mt-sm-4`, etc.) for all of the following properties: `margin`, `padding`, `line-height`, `height`, `max-height`, `width`, `max-width` and `gap`. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1267](https://github.com/swisspost/design-system/pull/1267))
 
 ## 5.4.1
 
diff --git a/packages/styles/src/basics.scss b/packages/styles/src/basics.scss
index 065e4439cb..b89c93e1f3 100644
--- a/packages/styles/src/basics.scss
+++ b/packages/styles/src/basics.scss
@@ -1,7 +1,8 @@
 @forward './variables/options';
 
-@use './elements';
+@use 'elements';
+@use 'utilities';
+
 @use 'components/elevation';
-@use 'components/utilities';
 @use 'components/sizing';
 @use 'components/grid';
diff --git a/packages/styles/src/components/_index.scss b/packages/styles/src/components/_index.scss
index cfedbc1c47..46f8dcf59c 100644
--- a/packages/styles/src/components/_index.scss
+++ b/packages/styles/src/components/_index.scss
@@ -40,7 +40,6 @@
 @use 'tooltip';
 @use 'topic-teaser';
 @use 'transitions';
-@use 'utilities';
 @use 'tag';
 
 // Imports depending on source order to override bootstrap styles
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 68bf75e297..228e836d8e 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -6,47 +6,16 @@
 @use './../variables/breakpoints';
 @use './../mixins/utilities';
 
-// Post margins, paddings and sizes
+// Post sizes
 @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
 
     @each $prop,
       $abbrev
-        in (
-          margin: m,
-          padding: p,
-          /* Deprecated */ line-height: lh,
-          height: h,
-          max-height: mh,
-          width: w,
-          max-width: mw,
-          gap: gap
-        )
+        in (/* Deprecated */ line-height: lh, height: h, max-height: mh, width: w, max-width: mw)
     {
       @each $size, $length in spacing.$post-sizes {
-        @if ($prop == margin or $prop == padding) {
-          .#{$abbrev}t#{$infix}-#{$size},
-          .#{$abbrev}y#{$infix}-#{$size} {
-            #{$prop}-top: $length !important;
-          }
-
-          .#{$abbrev}e#{$infix}-#{$size},
-          .#{$abbrev}x#{$infix}-#{$size} {
-            #{$prop}-right: $length !important;
-          }
-
-          .#{$abbrev}b#{$infix}-#{$size},
-          .#{$abbrev}y#{$infix}-#{$size} {
-            #{$prop}-bottom: $length !important;
-          }
-
-          .#{$abbrev}s#{$infix}-#{$size},
-          .#{$abbrev}x#{$infix}-#{$size} {
-            #{$prop}-left: $length !important;
-          }
-        }
-
         .#{$abbrev}#{$infix}-#{$size} {
           #{$prop}: $length !important;
         }
diff --git a/packages/styles/src/functions/_string.scss b/packages/styles/src/functions/_string.scss
new file mode 100644
index 0000000000..1c79f06f99
--- /dev/null
+++ b/packages/styles/src/functions/_string.scss
@@ -0,0 +1,13 @@
+@use 'sass:string';
+
+@function replace($string, $term, $replacement: '') {
+  $index: string.index($string, $term);
+
+  @if $index {
+    $before: string.slice($string, 1, $index - 1);
+    $after: string.slice($string, $index + string.length($term));
+    @return $before + $replacement + replace($after, $term, $replacement);
+  }
+
+  @return $string;
+}
diff --git a/packages/styles/src/index.scss b/packages/styles/src/index.scss
index 7bf28ea879..fd78bce402 100644
--- a/packages/styles/src/index.scss
+++ b/packages/styles/src/index.scss
@@ -1,5 +1,6 @@
 @forward './variables/options';
 
+@use './utilities';
 @use './elements';
 @use './components';
 
diff --git a/packages/styles/src/intranet.scss b/packages/styles/src/intranet.scss
index 15e5ec70d3..5738064522 100644
--- a/packages/styles/src/intranet.scss
+++ b/packages/styles/src/intranet.scss
@@ -1,5 +1,6 @@
 @forward './variables/options';
 
-@use './elements';
+@use 'utilities';
+@use 'elements';
 @use 'components';
 @use 'components/intranet-header';
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss
index cc042736d1..87f2a3fa55 100644
--- a/packages/styles/src/post-external.scss
+++ b/packages/styles/src/post-external.scss
@@ -1,3 +1,4 @@
 @use './post-tokens-external';
+@use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss
index 41a9ca2447..834c79f621 100644
--- a/packages/styles/src/post-internal.scss
+++ b/packages/styles/src/post-internal.scss
@@ -1,3 +1,4 @@
 @use './post-tokens-internal';
+@use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index cff122af29..01cb191d0c 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -6,4 +6,24 @@
 // manipulate $utilities before you import utilities/api
 $utilities: map.remove($utilities, 'background-color');
 
+$utilities: map.remove($utilities, 'margin');
+$utilities: map.remove($utilities, 'margin-x');
+$utilities: map.remove($utilities, 'margin-y');
+$utilities: map.remove($utilities, 'margin-top');
+$utilities: map.remove($utilities, 'margin-end');
+$utilities: map.remove($utilities, 'margin-bottom');
+$utilities: map.remove($utilities, 'margin-start');
+
+$utilities: map.remove($utilities, 'padding');
+$utilities: map.remove($utilities, 'padding-x');
+$utilities: map.remove($utilities, 'padding-y');
+$utilities: map.remove($utilities, 'padding-top');
+$utilities: map.remove($utilities, 'padding-end');
+$utilities: map.remove($utilities, 'padding-bottom');
+$utilities: map.remove($utilities, 'padding-start');
+
+$utilities: map.remove($utilities, 'gap');
+$utilities: map.remove($utilities, 'row-gap');
+$utilities: map.remove($utilities, 'column-gap');
+
 @import 'bootstrap/scss/utilities/api';
diff --git a/packages/styles/src/utilities/_mixins.scss b/packages/styles/src/utilities/_mixins.scss
new file mode 100644
index 0000000000..01e84ab529
--- /dev/null
+++ b/packages/styles/src/utilities/_mixins.scss
@@ -0,0 +1,23 @@
+@use '../mixins/media';
+@use '../variables/breakpoints';
+
+@mixin generate-utilities($properties, $value, $prefix, $suffix, $infix: '') {
+  .#{$prefix}#{$infix}#{$suffix} {
+    @each $property in $properties {
+      #{$property}: #{$value};
+    }
+  }
+}
+
+@mixin generate-responsive-utilities($properties, $value, $prefix, $suffix) {
+  @each $breakpoint, $min-width in breakpoints.$grid-breakpoints {
+    @if ($min-width == 0) {
+      @include generate-utilities($properties, $value, $prefix, $suffix);
+    } @else {
+      @include media.min($min-width) {
+        $infix: '-#{$breakpoint}';
+        @include generate-utilities($properties, $value, $prefix, $suffix, $infix);
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
new file mode 100644
index 0000000000..d7c1bca0e7
--- /dev/null
+++ b/packages/styles/src/utilities/_variables.scss
@@ -0,0 +1,86 @@
+@use '../tokens/utilities' as tokens;
+
+/*
+  Add new utilities using the following structure:
+    [set]: (
+      tokens: map (required),
+      classes: (
+        [group]: (
+          responsive: boolean (optional),
+          prefixes: map (required),
+        )
+      )
+    )
+
+    - `set`:
+      The name of the token set (e.g., if the tokens are contained in the "$post-spacing" map, the set is "spacing").
+
+    - `tokens`:
+      The map of tokens that should be used to generate the utility classes.
+
+    - `group`:
+      The group name used in the token keys (e.g., if the tokens are named "post-utility-margin-*", the group is "margin").
+
+    - `responsive`:
+      If set to `true`, the utility classes will be generated for all breakpoints (e.g., `-sm`, `-md`, `-lg`, etc.).
+      If set to `false` or omitted, utilities will be generated without a breakpoint infix.
+
+    - `prefixes`:
+      A map where each key is the class name prefix and the value is the CSS property (or properties) that the class will set.
+
+  Example:
+  spacing: (
+    tokens: tokens.$post-spacing,       // Refers to the token map containing all spacing values
+    classes: (
+      margin: (                         // Refers to the token "post-utility-margin-*" token in above map
+        classes: (
+          m: margin,                    // Generates `.m-*` classes to set the `margin` property
+          mx: margin-left margin-right, // Generates `.mx-*` classes to set `margin-left` and `margin-right` properties
+          ...
+        ),
+        responsive: true,               // Generates responsive classes
+      )
+    )
+  )
+*/
+
+$utilities: (
+  spacing: (
+    tokens: tokens.$post-spacing,
+    classes: (
+      margin: (
+        responsive: true,
+        prefixes: (
+          m: margin,
+          mx: margin-inline,
+          ms: margin-inline-start,
+          me: margin-inline-end,
+          my: margin-block,
+          mt: margin-block-start,
+          mb: margin-block-end,
+        ),
+      ),
+      padding: (
+        responsive: true,
+        prefixes: (
+          p: padding,
+          px: padding-inline,
+          ps: padding-inline-start,
+          pe: padding-inline-end,
+          py: padding-block,
+          pt: padding-block-start,
+          pb: padding-block-end,
+        ),
+      ),
+      gap: (
+        responsive: true,
+        prefixes: (
+          gap: gap,
+          row-gap: row-gap,
+          column-gap: column-gap,
+        ),
+      ),
+    ),
+  ),
+  // IMPORTANT: When adding new utilities here, please ensure to remove the corresponding bootstrap utilities in `src/themes/bootstrap/_utilities.scss`.
+);
diff --git a/packages/styles/src/utilities/index.scss b/packages/styles/src/utilities/index.scss
new file mode 100644
index 0000000000..4faeb72b77
--- /dev/null
+++ b/packages/styles/src/utilities/index.scss
@@ -0,0 +1,30 @@
+@use 'sass:map';
+
+@use '../functions/string';
+
+@use './mixins' as *;
+@use './variables' as *;
+
+@use './temp/legacy';
+
+@each $set, $config in $utilities {
+  $tokens: map.get($config, tokens);
+  $classes: map.get($config, classes);
+
+  @each $group, $classesConfig in $classes {
+    $responsive: map.get($classesConfig, responsive);
+    $prefixes: map.get($classesConfig, prefixes);
+
+    @each $key, $value in $tokens {
+      $suffix: string.replace($key, 'post-utility-#{$group}');
+
+      @each $prefix, $properties in $prefixes {
+        @if $responsive {
+          @include generate-responsive-utilities($properties, $value, $prefix, $suffix);
+        } @else {
+          @include generate-utilities($properties, $value, $prefix, $suffix);
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/src/components/utilities.scss b/packages/styles/src/utilities/temp/_legacy.scss
similarity index 79%
rename from packages/styles/src/components/utilities.scss
rename to packages/styles/src/utilities/temp/_legacy.scss
index 4ab4e9c196..3a963fc06c 100644
--- a/packages/styles/src/components/utilities.scss
+++ b/packages/styles/src/utilities/temp/_legacy.scss
@@ -1,16 +1,14 @@
-@forward './../variables/options';
-
 @use 'sass:map';
 @use 'sass:color' as sass-color;
 @use 'sass:list';
 
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/utilities' as bu; // TODO: Move Design System utilities to utilities folder.
-@use './../mixins/color' as color-mx;
-@use './../mixins/utilities';
-@use './../variables/color';
-@use './../variables/spacing';
-@use './../variables/grid';
+@use '../../themes/bootstrap/core' as *;
+@use '../../themes/bootstrap/utilities' as bu; // TODO: Move Design System utilities to utilities folder.
+@use '../../mixins/color' as color-mx;
+@use '../../mixins/utilities';
+@use '../../variables/color';
+@use '../../variables/spacing';
+@use '../../variables/grid';
 
 .bold {
   font-weight: 700;
diff --git a/packages/styles/tests/components/utilities.test.scss b/packages/styles/tests/components/utilities.test.scss
deleted file mode 100644
index c6f8ac82dd..0000000000
--- a/packages/styles/tests/components/utilities.test.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'tests/jest';
-@use 'src/components/utilities';
-
-// Check if component forwards options
-@include jest.true(map.has-key(meta.module-variables('utilities'), 'font-base-path'));
diff --git a/packages/styles/tests/functions/string.test.scss b/packages/styles/tests/functions/string.test.scss
new file mode 100644
index 0000000000..2247cf29a6
--- /dev/null
+++ b/packages/styles/tests/functions/string.test.scss
@@ -0,0 +1,22 @@
+@use 'tests/jest';
+@use 'src/functions/string';
+
+$paragraph: "I think Ruth's dog is cuter than your dog!";
+
+// it should replace a term by another
+@include jest.equal(
+    'I think my dog is cuter than your dog!',
+    string.replace($paragraph, "Ruth's", 'my')
+);
+
+// it should replace all occurrences
+@include jest.equal(
+    "I think Ruth's cat is cuter than your cat!",
+    string.replace($paragraph, "dog", 'cat')
+);
+
+// it should return the original string when it does not contain the term to replace
+@include jest.equal(
+    $paragraph,
+    string.replace($paragraph, "Sandy's", 'my')
+);
diff --git a/packages/styles/tests/utilities/index.test.scss b/packages/styles/tests/utilities/index.test.scss
new file mode 100644
index 0000000000..65b6554c4f
--- /dev/null
+++ b/packages/styles/tests/utilities/index.test.scss
@@ -0,0 +1,16 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'tests/jest';
+@use 'src/utilities';
+
+
+.test {
+  // it should include legacy utilities
+  @extend .bold;
+
+  // it should correctly create utilities from tokens
+  @extend .m-16;
+  @extend .mt-24;
+  @extend .m-lg-8;
+  @extend .my-sm-48;
+}
diff --git a/packages/styles/tests/utilities/mixins.test.scss b/packages/styles/tests/utilities/mixins.test.scss
new file mode 100644
index 0000000000..8792c4c959
--- /dev/null
+++ b/packages/styles/tests/utilities/mixins.test.scss
@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'tests/jest';
+@use 'src/utilities/mixins';
+
+
+.test {
+  @include mixins.generate-utilities('font-weight', '400', 'fw', 'normal');
+  @include mixins.generate-utilities('font-size', '1.5rem', 'fs', 'large', 'sm');
+  @include mixins.generate-responsive-utilities('row-gap', '48px', 'rg', '48');
+}