diff --git a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
index e4881c1ff..d41b24643 100644
--- a/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
+++ b/apps/scandic-web/components/Blocks/FullWidthCampaign/index.tsx
@@ -1,8 +1,9 @@
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import styles from "./fullWidthCampaign.module.css"
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx
index af79ae40d..e2cc09875 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Activities/index.tsx
@@ -1,7 +1,8 @@
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import { getIntl } from "@/i18n"
 
 import styles from "./activities.module.css"
diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
index 25e71217d..d4e8bf0be 100644
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
@@ -1,6 +1,8 @@
 import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import { serverClient } from "@/lib/trpc/server"
 
 import Blocks from "@/components/Blocks"
@@ -8,7 +10,6 @@ import Hero from "@/components/Hero"
 import MaxWidth from "@/components/MaxWidth"
 import Sidebar from "@/components/Sidebar"
 import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import TrackingSDK from "@/components/TrackingSDK"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx
index cbc52cb3e..41ddb833f 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelCount/index.tsx
@@ -2,9 +2,9 @@
 
 import { useIntl } from "react-intl"
 
-import { useHotelFilterStore } from "@/stores/hotel-filters"
+import Preamble from "@scandic-hotels/design-system/Preamble"
 
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import { useHotelFilterStore } from "@/stores/hotel-filters"
 
 export default function HotelCount() {
   const intl = useIntl()
diff --git a/apps/scandic-web/components/Modal/index.tsx b/apps/scandic-web/components/Modal/index.tsx
index a67614bce..b70fa7221 100644
--- a/apps/scandic-web/components/Modal/index.tsx
+++ b/apps/scandic-web/components/Modal/index.tsx
@@ -12,8 +12,8 @@ import {
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Preamble from "@scandic-hotels/design-system/Preamble"
 
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import {
diff --git a/apps/scandic-web/components/Section/Header/index.tsx b/apps/scandic-web/components/Section/Header/index.tsx
index 67b2ff1d5..31b1f71f1 100644
--- a/apps/scandic-web/components/Section/Header/index.tsx
+++ b/apps/scandic-web/components/Section/Header/index.tsx
@@ -1,4 +1,5 @@
-import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Preamble from "@scandic-hotels/design-system/Preamble"
+
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import SectionLink from "../Link"
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/index.tsx b/apps/scandic-web/components/TempDesignSystem/Text/Preamble/index.tsx
deleted file mode 100644
index 96af1f15d..000000000
--- a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { preambleVariants } from "./variants"
-
-import type { CaptionProps } from "./preamble"
-
-export default function Preamble({
-  asChild = false,
-  className = "",
-  color,
-  textAlign,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = preambleVariants({
-    className,
-    color,
-    textAlign,
-  })
-  return <Comp className={classNames} {...props} />
-}
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.ts b/apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.ts
deleted file mode 100644
index 987ba5749..000000000
--- a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { VariantProps } from "class-variance-authority"
-
-import type { preambleVariants } from "./variants"
-
-export interface CaptionProps
-  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof preambleVariants> {
-  asChild?: boolean
-}
diff --git a/packages/design-system/lib/components/Preamble/index.tsx b/packages/design-system/lib/components/Preamble/index.tsx
new file mode 100644
index 000000000..dfac9b8a6
--- /dev/null
+++ b/packages/design-system/lib/components/Preamble/index.tsx
@@ -0,0 +1,30 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { preambleVariants } from './variants'
+
+import type { VariantProps } from 'class-variance-authority'
+
+interface CaptionProps
+  extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'color'>,
+    VariantProps<typeof preambleVariants> {
+  asChild?: boolean
+}
+
+/**
+ * @deprecated Use `Typography` instead.
+ */
+export default function Preamble({
+  asChild = false,
+  className = '',
+  color,
+  textAlign,
+  ...props
+}: CaptionProps) {
+  const Comp = asChild ? Slot : 'p'
+  const classNames = preambleVariants({
+    className,
+    color,
+    textAlign,
+  })
+  return <Comp className={classNames} {...props} />
+}
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.module.css b/packages/design-system/lib/components/Preamble/preamble.module.css
similarity index 100%
rename from apps/scandic-web/components/TempDesignSystem/Text/Preamble/preamble.module.css
rename to packages/design-system/lib/components/Preamble/preamble.module.css
diff --git a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/variants.ts b/packages/design-system/lib/components/Preamble/variants.ts
similarity index 78%
rename from apps/scandic-web/components/TempDesignSystem/Text/Preamble/variants.ts
rename to packages/design-system/lib/components/Preamble/variants.ts
index d007d985b..fff43bbe2 100644
--- a/apps/scandic-web/components/TempDesignSystem/Text/Preamble/variants.ts
+++ b/packages/design-system/lib/components/Preamble/variants.ts
@@ -1,6 +1,6 @@
-import { cva } from "class-variance-authority"
+import { cva } from 'class-variance-authority'
 
-import styles from "./preamble.module.css"
+import styles from './preamble.module.css'
 
 const config = {
   variants: {
@@ -17,7 +17,7 @@ const config = {
     },
   },
   defaultVariants: {
-    color: "black",
+    color: 'black',
   },
 } as const
 
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 69c784824..ea915cc7a 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -24,6 +24,7 @@
     "./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",
     "./CodeRateCard": "./dist/components/RateCard/Code/index.js",
     "./PointsRateCard": "./dist/components/RateCard/Points/index.js",
+    "./Preamble": "./dist/components/Preamble/index.js",
     "./NoRateAvailableCard": "./dist/components/RateCard/NoRateAvailable/index.js",
     "./IconButton": "./dist/components/IconButton/index.js",
     "./Icons": "./dist/components/Icons/index.js",