diff --git a/packages/components/src/components/post-alert/post-alert.tsx b/packages/components/src/components/post-alert/post-alert.tsx
index 637d1b13c5..f114fbcd29 100644
--- a/packages/components/src/components/post-alert/post-alert.tsx
+++ b/packages/components/src/components/post-alert/post-alert.tsx
@@ -156,7 +156,7 @@ export class PostAlert {
 
     return (
       <Host data-version={version}>
-        <div role="alert" class={this.classes}>
+        <div role="alert" class={this.classes} part={this.classes}>
           {this.dismissible && (
             <button class="btn-close" onClick={this.onDismissButtonClick}>
               <span class="visually-hidden">{this.dismissLabel}</span>
diff --git a/packages/components/src/components/post-tabs/post-tabs.tsx b/packages/components/src/components/post-tabs/post-tabs.tsx
index 72687cbc19..68d6e97e9a 100644
--- a/packages/components/src/components/post-tabs/post-tabs.tsx
+++ b/packages/components/src/components/post-tabs/post-tabs.tsx
@@ -5,6 +5,8 @@ import { fadeIn, fadeOut } from '@/animations';
 /**
  * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
  * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
+ * @part tabs - Add custom styles for the tab header container.
+ * @part content - Add custom styles for the tab panel container.
  */
 
 @Component({
@@ -196,12 +198,12 @@ export class PostTabs {
   render() {
     return (
       <Host data-version={version}>
-        <div class="tabs-wrapper">
+        <div class="tabs-wrapper" part="tabs">
           <div class="tabs" role="tablist">
             <slot name="tabs" onSlotchange={() => this.enableTabs()} />
           </div>
         </div>
-        <div class="tab-content">
+        <div class="tab-content" part="content">
           <slot onSlotchange={() => this.moveMisplacedTabs()} />
         </div>
       </Host>
diff --git a/packages/components/src/components/post-tabs/readme.md b/packages/components/src/components/post-tabs/readme.md
index 03a9bf03cc..0580e3c303 100644
--- a/packages/components/src/components/post-tabs/readme.md
+++ b/packages/components/src/components/post-tabs/readme.md
@@ -47,6 +47,14 @@ Type: `Promise<void>`
 | `"tabs"`    | Slot for placing tab headers. Each tab header should be a <post-tab-header> element. |
 
 
+## Shadow Parts
+
+| Part        | Description                                     |
+| ----------- | ----------------------------------------------- |
+| `"content"` | Add custom styles for the tab panel container.  |
+| `"tabs"`    | Add custom styles for the tab header container. |
+
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/documentation/.storybook/styles/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
similarity index 100%
rename from packages/documentation/.storybook/styles/layout.scss
rename to packages/documentation/.storybook/blocks/layout/layout.scss
diff --git a/packages/documentation/.storybook/blocks/layout.tsx b/packages/documentation/.storybook/blocks/layout/layout.tsx
similarity index 91%
rename from packages/documentation/.storybook/blocks/layout.tsx
rename to packages/documentation/.storybook/blocks/layout/layout.tsx
index f9ffee8d66..f3f76ec72c 100644
--- a/packages/documentation/.storybook/blocks/layout.tsx
+++ b/packages/documentation/.storybook/blocks/layout/layout.tsx
@@ -1,8 +1,8 @@
 import { DocsContainer, DocsContainerProps, Unstyled } from '@storybook/blocks';
 import { PropsWithChildren } from 'react';
-import '../styles/layout.scss';
-import Footer from './footer';
-import Header from './header';
+import './layout.scss';
+import Footer from '../footer';
+import Header from '../header';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 function shouldShowHeader() {
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 00492a9325..521f730499 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import type { Preview } from '@storybook/web-components';
 import { extractArgTypes, extractComponentDescription } from '@kurbar/storybook-addon-docs-stencil';
 import { format } from 'prettier';
-import DocsLayout from './blocks/layout';
+import DocsLayout from './blocks/layout/layout';
 import { openFullScreenDemo, prettierOptions, resetComponents } from './helpers';
 import './helpers/register-web-components';
 import './addons/cypress-storybook/client';
diff --git a/packages/documentation/.storybook/styles/components/alert.scss b/packages/documentation/.storybook/styles/components/alert.scss
new file mode 100644
index 0000000000..328aeb41fb
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/alert.scss
@@ -0,0 +1,134 @@
+@use 'sass:math';
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+$post-docs-alert-border-width: post.$size-line;
+$post-docs-alert-border-style: solid;
+$post-docs-alert-border-radius: post.$size-mini;
+$post-docs-alert-box-shadow: none;
+
+$post-docs-alert-padding-md: 1em 2em 1em 3.5em;
+$post-docs-alert-padding-sm: 0.25em 1em 0.25em 2.25em;
+
+$post-docs-alert-icon-size-md: 2em;
+$post-docs-alert-icon-size-sm: 1.4em;
+
+$post-docs-alert-line-height-md: 1.35;
+$post-docs-alert-line-height-sm: 1.25;
+
+$post-docs-alert-variants: (
+  info: (
+    background-color: '250, 249, 248',
+    border-color: #1ea0d6,
+    color: #0776a4,
+  ),
+  warning: (
+    background-color: '250, 249, 248',
+    border-color: #db8b12,
+    color: #b16a00,
+  ),
+  danger: (
+    background-color: '250, 249, 248',
+    border-color: #d12e35,
+    color: #a1050b,
+  ),
+);
+
+@include mixins.style-docs-only-guard('.alert') {
+  border-width: $post-docs-alert-border-width;
+  border-style: $post-docs-alert-border-style;
+  border-radius: $post-docs-alert-border-radius;
+  box-shadow: $post-docs-alert-box-shadow;
+  font-size: 1rem;
+
+  &:not(.alert-action) {
+    > :only-child:not(code),
+    > :first-child:not(code) + :last-child:not(code) {
+      font-size: inherit;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.alert-sm,
+  &.alert-md {
+    display: block;
+    min-height: 0;
+    font-family: inherit;
+
+    a {
+      font-size: inherit;
+      font-weight: inherit;
+      color: inherit;
+
+      &:hover {
+        color: black;
+      }
+    }
+  }
+
+  &.alert-sm {
+    padding: $post-docs-alert-padding-sm;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: $post-docs-alert-line-height-sm;
+
+    &::before {
+      top: list.nth($post-docs-alert-padding-sm, 1) +
+        (($post-docs-alert-line-height-sm - $post-docs-alert-icon-size-sm) * 0.5);
+      left: (list.nth($post-docs-alert-padding-sm, 4) - $post-docs-alert-icon-size-sm) * 0.5;
+      width: $post-docs-alert-icon-size-sm;
+      height: $post-docs-alert-icon-size-sm;
+    }
+
+    code {
+      font-size: 0.833333em;
+    }
+  }
+
+  &.alert-md {
+    padding: $post-docs-alert-padding-md;
+    font-size: 0.9rem;
+    line-height: $post-docs-alert-line-height-md;
+
+    &::before {
+      top: list.nth($post-docs-alert-padding-md, 1) +
+        (($post-docs-alert-line-height-md - $post-docs-alert-icon-size-md) * 0.5);
+      left: (list.nth($post-docs-alert-padding-md, 4) - $post-docs-alert-icon-size-md) * 0.5;
+      width: $post-docs-alert-icon-size-md;
+      height: $post-docs-alert-icon-size-md;
+    }
+  }
+
+  @each $name, $colorMap in $post-docs-alert-variants {
+    &.alert-#{$name} {
+      --post-bg-rgb: #{map.get($colorMap, 'background-color')};
+      --post-contrast-color: #{map.get($colorMap, 'color')};
+
+      border-color: map.get($colorMap, 'border-color');
+    }
+  }
+}
+
+@include mixins.style-docs-only-guard('post-alert') {
+  &::part(alert) {
+    border-width: $post-docs-alert-border-width;
+    border-style: $post-docs-alert-border-style;
+    border-radius: $post-docs-alert-border-radius;
+    box-shadow: $post-docs-alert-box-shadow;
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  @each $name, $colorMap in $post-docs-alert-variants {
+    &::part(alert-#{$name}) {
+      --post-bg-rgb: #{map.get($colorMap, 'background-color')};
+      --post-contrast-color: #{map.get($colorMap, 'color')};
+      border-color: map.get($colorMap, 'border-color');
+    }
+  }
+}
diff --git a/packages/documentation/.storybook/styles/components/blockquote.scss b/packages/documentation/.storybook/styles/components/blockquote.scss
new file mode 100644
index 0000000000..3741b9e53a
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/blockquote.scss
@@ -0,0 +1,13 @@
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+@include mixins.style-docs-only-guard('.blockquote') {
+  padding: 0;
+  border-left: 0 none;
+  font-style: italic;
+}
+
+@include mixins.style-docs-only-guard('.blockquote-footer') {
+  padding: 0;
+  border-left: 0 none;
+}
diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss
new file mode 100644
index 0000000000..6c17a5bfa1
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/blocks.scss
@@ -0,0 +1,49 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+#storybook-docs {
+  .sbdocs-preview {
+    border-color: post.$border-color;
+    border-radius: post.$size-mini;
+    box-shadow: none;
+  }
+
+  .docblock-argstable {
+    border-radius: post.$size-mini;
+
+    tbody {
+      position: relative;
+      -webkit-filter: none;
+      filter: none;
+
+      &:before {
+        display: block;
+        content: '';
+        position: absolute;
+        inset: 0;
+        border: post.$border-width solid post.$border-color;
+        border-radius: post.$size-mini;
+        z-index: -1;
+      }
+
+      > tr {
+        > th,
+        > td {
+          background-color: transparent;
+          border: 0 none;
+        }
+
+        &:not(:first-child) {
+          > th,
+          > td {
+            border-top: post.$border-width solid post.$border-color;
+          }
+        }
+      }
+    }
+  }
+
+  .docblock-source {
+    border-radius: post.$size-mini;
+    box-shadow: none;
+  }
+}
diff --git a/packages/documentation/.storybook/styles/components/fonts.scss b/packages/documentation/.storybook/styles/components/fonts.scss
new file mode 100644
index 0000000000..fbfe9f585e
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/fonts.scss
@@ -0,0 +1,44 @@
+// FiraCode WebFonts
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 700;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-bold.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 400;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-regular.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'FiraCode';
+  font-weight: 300;
+  font-style: normal;
+  src: url('/assets/fonts/firacode/firacode-light.woff2') format('woff2'),
+    url('/assets/fonts/firacode/firacode-light.woff') format('woff');
+}
+
+// Reddit Mono WebFonts
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 700;
+  src: local('Reddit Mono Bold'), url('/assets/fonts/reddit/reddit-mono-bold.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 400;
+  src: local('Reddit Mono Regular'),
+    url('/assets/fonts/reddit/reddit-mono-regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: 'Reddit Mono';
+  font-weight: 300;
+  src: local('Reddit Mono Light'), url('/assets/fonts/reddit/reddit-mono-light.woff') format('woff');
+}
diff --git a/packages/documentation/.storybook/styles/components/index.scss b/packages/documentation/.storybook/styles/components/index.scss
new file mode 100644
index 0000000000..21dfcac82f
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/index.scss
@@ -0,0 +1,8 @@
+@use './fonts.scss';
+@use './typo.scss';
+@use './blocks.scss';
+
+// styles to apply only when components used in the docs, not in the iframe
+@use './alert.scss';
+@use './tabs.scss';
+@use './blockquote.scss';
diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss
new file mode 100644
index 0000000000..bd1b618255
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/tabs.scss
@@ -0,0 +1,67 @@
+@use '@swisspost/design-system-styles/core' as post;
+@use '../mixins';
+
+@include mixins.style-docs-only-guard('post-tabs') {
+  &::part(tabs) {
+    background: none;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 100vw;
+      height: 1px;
+      background-color: post.$border-color;
+      transform: translateX(-50%);
+    }
+  }
+
+  &::part(content) {
+    position: relative;
+
+    &::before {
+      display: block;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: post.$size-regular * -1;
+      left: calc(100% + #{post.$size-mini});
+      border-left: post.$size-hair dotted post.$border-color;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      position: absolute;
+      top: calc(100% + #{post.$size-regular});
+      left: 0;
+      right: post.$size-mini * -1;
+      border-top: post.$size-hair dotted post.$border-color;
+    }
+  }
+}
+
+@include mixins.style-docs-only-guard('post-tab-header.tab-title[role="tab"]') {
+  border-top-left-radius: post.$border-radius;
+  border-top-right-radius: post.$border-radius;
+
+  &:first-child {
+    margin-left: post.$size-big;
+  }
+
+  &.active {
+    border-top-left-radius: post.$border-radius;
+    border-top-right-radius: post.$border-radius;
+
+    &::before {
+      background-color: post.$black;
+      border-radius: inherit;
+    }
+  }
+
+  ~ post-tab-header {
+    margin-left: 1px;
+  }
+}
diff --git a/packages/documentation/.storybook/styles/components/typo.scss b/packages/documentation/.storybook/styles/components/typo.scss
new file mode 100644
index 0000000000..75c30547d7
--- /dev/null
+++ b/packages/documentation/.storybook/styles/components/typo.scss
@@ -0,0 +1,38 @@
+:root {
+  --post-docs-font-serif: 'FiraCode', sans-serif;
+  --post-docs-font-monospace: 'Reddit Mono', monospace;
+}
+
+body {
+  font-family: var(--post-docs-font-serif);
+
+  // manager
+  #root {
+    * {
+      font-family: var(--post-docs-font-monospace);
+    }
+  }
+
+  // preview
+  #storybook-docs {
+    * {
+      font-family: inherit;
+    }
+
+    :is(pre, .prismjs) {
+      font-family: var(--post-docs-font-monospace);
+    }
+
+    .docs-story > :first-child {
+      font-family: var(--bs-body-font-family);
+    }
+
+    .font-sans-serif {
+      font-family: var(--bs-font-sans-serif) !important;
+    }
+
+    .font-monospace {
+      font-family: var(--bs-font-monospace) !important;
+    }
+  }
+}
diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
index 42b4aa89de..e13bdbb8e2 100644
--- a/packages/documentation/.storybook/styles/manager.scss
+++ b/packages/documentation/.storybook/styles/manager.scss
@@ -1,6 +1,6 @@
 @use '@swisspost/design-system-styles/components/root';
-@use '@swisspost/design-system-styles/components/fonts';
 @use '@swisspost/design-system-styles/mixins/utilities';
+@use './components';
 @use '../addons/version-switcher/version-switcher';
 
 .sidebar-header {
diff --git a/packages/documentation/.storybook/styles/mixins/index.scss b/packages/documentation/.storybook/styles/mixins/index.scss
new file mode 100644
index 0000000000..46ea4dd001
--- /dev/null
+++ b/packages/documentation/.storybook/styles/mixins/index.scss
@@ -0,0 +1 @@
+@forward './style-docs-only-guard';
diff --git a/packages/documentation/.storybook/styles/mixins/style-docs-only-guard.scss b/packages/documentation/.storybook/styles/mixins/style-docs-only-guard.scss
new file mode 100644
index 0000000000..a447820358
--- /dev/null
+++ b/packages/documentation/.storybook/styles/mixins/style-docs-only-guard.scss
@@ -0,0 +1,7 @@
+@mixin style-docs-only-guard($selector) {
+  #storybook-docs {
+    #{$selector}:not(.docs-story #{$selector}) {
+      @content;
+    }
+  }
+}
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 79104b3f34..1b2cf39544 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -3,6 +3,7 @@
 @use '@swisspost/design-system-styles/intranet.scss';
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
+@use './components';
 
 #storybook-root,
 #storybook-docs {
@@ -78,7 +79,7 @@
     // Style buttons related to the current page next to the tile
     .docs-title,
     .docs-title nav {
-      display:flex;
+      display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: post.$size-mini;
@@ -87,7 +88,7 @@
       margin-bottom: post.$size-mini;
 
       :first-child {
-        margin-right:auto;
+        margin-right: auto;
       }
     }
   }
@@ -159,57 +160,6 @@
     }
   }
 
-  .alert {
-    &.alert-sm,
-    &.alert-md {
-      display: block;
-      min-height: 0;
-      font-family: inherit;
-
-      a {
-        opacity: 0.75;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-
-        &:hover {
-          opacity: 1;
-        }
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &.alert-sm {
-      padding: 0.25em 1em 0.25em 3em;
-      font-size: 0.9em;
-      font-weight: 400;
-
-      &::before {
-        height: 1.5em;
-        width: 1.5em;
-        left: 0.75em;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    &.alert-md {
-      padding: 1em 2em 1em 4em;
-      font-size: inherit;
-
-      &::before {
-        height: 2em;
-        width: 2em;
-        left: 1em;
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-  }
-
   @include post.high-contrast-mode() {
     .innerZoomElementWrapper {
       > * {
diff --git a/packages/documentation/.storybook/styles/themes.ts b/packages/documentation/.storybook/styles/themes.ts
index e8332a10a5..e0de995a40 100644
--- a/packages/documentation/.storybook/styles/themes.ts
+++ b/packages/documentation/.storybook/styles/themes.ts
@@ -13,7 +13,7 @@ export const light = create({
   appBorderRadius: 3,
 
   // Typography
-  fontBase: '"Frutiger Neue For Post", sans-serif',
+  fontBase: '"Reddit Mono", monospace',
   fontCode: 'monospace',
 
   // Text colors
@@ -51,7 +51,7 @@ export const dark = create({
   appBorderRadius: 3,
 
   // Typography
-  fontBase: '"Frutiger Neue For Post", sans-serif',
+  fontBase: '""Reddit Mono", monospace',
   fontCode: 'monospace',
 
   // Text colors
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff b/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff
new file mode 100644
index 0000000000..74e57c4c1b
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff differ
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff2 b/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff2
new file mode 100644
index 0000000000..349dc36a56
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-bold.woff2 differ
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-light.woff b/packages/documentation/public/assets/fonts/firacode/firacode-light.woff
new file mode 100644
index 0000000000..1c1ebc6864
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-light.woff differ
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-light.woff2 b/packages/documentation/public/assets/fonts/firacode/firacode-light.woff2
new file mode 100644
index 0000000000..eeaa30363c
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-light.woff2 differ
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff b/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff
new file mode 100644
index 0000000000..8816b695b3
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff differ
diff --git a/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff2 b/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff2
new file mode 100644
index 0000000000..f8b63fb018
Binary files /dev/null and b/packages/documentation/public/assets/fonts/firacode/firacode-regular.woff2 differ
diff --git a/packages/documentation/public/assets/fonts/reddit/reddit-mono-bold.woff b/packages/documentation/public/assets/fonts/reddit/reddit-mono-bold.woff
new file mode 100644
index 0000000000..f3e3c9bbac
Binary files /dev/null and b/packages/documentation/public/assets/fonts/reddit/reddit-mono-bold.woff differ
diff --git a/packages/documentation/public/assets/fonts/reddit/reddit-mono-light.woff b/packages/documentation/public/assets/fonts/reddit/reddit-mono-light.woff
new file mode 100644
index 0000000000..c2ce520276
Binary files /dev/null and b/packages/documentation/public/assets/fonts/reddit/reddit-mono-light.woff differ
diff --git a/packages/documentation/public/assets/fonts/reddit/reddit-mono-regular.woff b/packages/documentation/public/assets/fonts/reddit/reddit-mono-regular.woff
new file mode 100644
index 0000000000..4c437a32c3
Binary files /dev/null and b/packages/documentation/public/assets/fonts/reddit/reddit-mono-regular.woff differ
diff --git a/packages/documentation/src/stories/foundation/typography/typography.blocks.tsx b/packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
index 8f4aaeb416..7a605f2506 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
+++ b/packages/documentation/src/stories/foundation/typography/typography.blocks.tsx
@@ -134,7 +134,7 @@ export function Headings() {
             <td>
               <code>&lt;h1&gt;&lt;/h1&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h1">h1 Heading</p>
             </td>
           </tr>
@@ -142,7 +142,7 @@ export function Headings() {
             <td>
               <code>&lt;h2&gt;&lt;/h2&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h2">h2 Heading</p>
             </td>
           </tr>
@@ -150,7 +150,7 @@ export function Headings() {
             <td>
               <code>&lt;h3&gt;&lt;/h3&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h3">h3 Heading</p>
             </td>
           </tr>
@@ -158,7 +158,7 @@ export function Headings() {
             <td>
               <code>&lt;h4&gt;&lt;/h4&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h4">h4 Heading</p>
             </td>
           </tr>
@@ -166,7 +166,7 @@ export function Headings() {
             <td>
               <code>&lt;h5&gt;&lt;/h5&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h5">h5 Heading</p>
             </td>
           </tr>
@@ -174,7 +174,7 @@ export function Headings() {
             <td>
               <code>&lt;h6&gt;&lt;/h6&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 h6">h6 Heading</p>
             </td>
           </tr>
@@ -199,7 +199,7 @@ export function Paragraphs() {
             <td>
               <code>&lt;p&gt;&lt;/p&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et justo accusam et duo dolores et ea rebum. Consetetur sadipscing
                 elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
@@ -216,7 +216,7 @@ export function Paragraphs() {
             <td>
               <code>&lt;p class="lead"&gt;&lt;/p&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p className="m-0 lead">
                 Lead sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
               </p>
@@ -243,7 +243,7 @@ export function Links() {
             <td>
               <code>&lt;a&gt;&lt;/a&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 <a href="#" onClick={e => e.preventDefault()}>
                   Link
@@ -261,7 +261,7 @@ export function Links() {
                 &lt;/p&gt;
               </code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et justo accusam et duo dolores et ea rebum. Consetetur sadipscing
                 elitr, sed diam nonumy eirmod tempor{' '}
@@ -293,7 +293,7 @@ export function Inlines() {
             <td>
               <code>&lt;small&gt;&lt;/small&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <small>accusam et justo duo</small> dolores et ea rebum.
               </p>
@@ -303,7 +303,7 @@ export function Inlines() {
             <td>
               <code>&lt;strong&gt;&lt;/strong&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <strong>accusam et justo duo</strong> dolores et ea rebum.
               </p>
@@ -313,7 +313,7 @@ export function Inlines() {
             <td>
               <code>&lt;em&gt;&lt;/em&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <em>accusam et justo duo</em> dolores et ea rebum.
               </p>
@@ -323,7 +323,7 @@ export function Inlines() {
             <td>
               <code>&lt;sub&gt;&lt;/sub&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <sub>accusam et justo duo</sub> dolores et ea rebum.
               </p>
@@ -333,7 +333,7 @@ export function Inlines() {
             <td>
               <code>&lt;sup&gt;&lt;/sup&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <sup>accusam et justo duo</sup> dolores et ea rebum.
               </p>
@@ -343,7 +343,7 @@ export function Inlines() {
             <td>
               <code>&lt;mark&gt;&lt;/mark&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <mark>accusam et justo duo</mark> dolores et ea rebum.
               </p>
@@ -353,7 +353,7 @@ export function Inlines() {
             <td>
               <code>&lt;abbr&gt;&lt;/abbr&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <abbr title="abbrevation"> accusam et justo duo</abbr> dolores et ea
                 rebum.
@@ -364,7 +364,7 @@ export function Inlines() {
             <td>
               <code>&lt;code&gt;&lt;/code&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <code>accusam et justo duo</code> dolores et ea rebum.
               </p>
@@ -374,7 +374,7 @@ export function Inlines() {
             <td>
               <code>&lt;kbd&gt;&lt;/kbd&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <kbd>accusam et justo duo</kbd> dolores et ea rebum.
               </p>
@@ -384,7 +384,7 @@ export function Inlines() {
             <td>
               <code>&lt;del&gt;&lt;/del&gt;</code>
             </td>
-            <td>
+            <td className="font-sans-serif">
               <p>
                 At vero eos et <del>accusam et justo duo</del> dolores et ea rebum.
               </p>