Merged in chore/BOOK-701-replace-subtitle-component (pull request #3398)

chore(BOOK-701): replace subtitle with typography * chore(BOOK-701): replace subtitle with typography * chore(BOOK-701): align center * chore(BOOK-701): change token * chore(BOOK-701): change text color * fix(BOOK-704): revert pricechange dialog changes * chore(BOOK-701): remove subtitle from package.json Approved-by: Matilda Landström
2026-01-12 07:40:30 +00:00
parent a88b022186
commit 1b9273136a
43 changed files with 337 additions and 448 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/index.tsx
@@ -3,7 +3,7 @@
 import { useReducer } from "react"
 import { useIntl } from "react-intl"

-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import JobylonCard from "../JobylonCard"
 import Filter from "./Filter"
@@ -80,15 +80,18 @@ export default function JobList({ allJobs }: JobListProps) {
        departmentFilters={departmentFilters}
        categoryFilters={categoryFilters}
      />
-      <Subtitle type="two">
-        {intl.formatMessage(
-          {
-            id: "jobylonFeed.resultCount",
-            defaultMessage: "{count, plural, one {# Result} other {# Results}}",
-          },
-          { count: state.jobs.length }
-        )}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage(
+            {
+              id: "jobylonFeed.resultCount",
+              defaultMessage:
+                "{count, plural, one {# Result} other {# Results}}",
+            },
+            { count: state.jobs.length }
+          )}
+        </p>
+      </Typography>
      <ul className={styles.list}>
        {state.jobs.map((job) => (
          <li key={job.id}>
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
@@ -6,7 +6,7 @@ import { dt } from "@scandic-hotels/common/dt"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"

@@ -36,9 +36,9 @@ export default function JobylonCard({ job }: JobylonCardProps) {

  return (
    <div className={styles.jobylonCard}>
-      <Subtitle asChild>
+      <Typography variant="Title/Subtitle/md">
        <h3>{job.title}</h3>
-      </Subtitle>
+      </Typography>

      <div className={styles.contentWrapper}>
        <div>
@@ -62,7 +62,7 @@ export default function JobylonCard({ job }: JobylonCardProps) {
              id: "jobylonFeed.card.viewAndApplyButton",
              defaultMessage: "View & apply",
            })}
-            <MaterialIcon icon="open_in_new" size={20} />
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
          </a>
        </Button>
      </div>
--- a/apps/scandic-web/components/Blocks/TextCols/index.tsx
+++ b/apps/scandic-web/components/Blocks/TextCols/index.tsx
@@ -1,5 +1,5 @@
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import styles from "./textcols.module.css"

@@ -11,7 +11,9 @@ export default function TextCols({ text_cols }: TextColProps) {
      {text_cols.columns.map((col) => {
        return (
          <section key={col.title} className={styles.column}>
-            <Subtitle>{col.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{col.title}</p>
+            </Typography>
            <JsonToHtml
              nodes={col.text.json.children}
              embeds={col.text.embedded_itemsConnection.edges}
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/CityListing/CityListingItem/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { mapImageVaultImagesToGalleryImages } from "@/utils/imageGallery"
@@ -41,9 +40,9 @@ export default function CityListingItem({ city }: CityListingItemProps) {
        />
      </div>
      <section className={styles.content}>
-        <Subtitle asChild>
+        <Typography variant="Title/Subtitle/md">
          <h3>{city.heading}</h3>
-        </Subtitle>
+        </Typography>
        {city.experiences?.length ? (
          <ExperienceList experiences={city.experiences} />
        ) : null}
--- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
@@ -10,7 +10,7 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"

@@ -136,9 +136,9 @@ export default function DatePickerSingleDesktop({
        MonthCaption(props) {
          return (
            <div className={props.className}>
-              <Subtitle asChild type="two">
-                {props.children}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{props.children}</p>
+              </Typography>
            </div>
          )
        },
--- a/apps/scandic-web/components/DatePicker/Single/Mobile.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Mobile.tsx
@@ -5,7 +5,6 @@ import { useIntl } from "react-intl"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -85,9 +84,9 @@ export default function DatePickerSingleMobile({
          MonthCaption(props) {
            return (
              <div className={props.className}>
-                <Subtitle asChild type="two">
-                  {props.children}
-                </Subtitle>
+                <Typography variant="Title/Subtitle/md">
+                  <p>{props.children}</p>
+                </Typography>
              </div>
            )
          },
--- a/apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/Filter/index.tsx
@@ -2,8 +2,8 @@

 import { useIntl } from "react-intl"

-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useDestinationDataStore } from "@/stores/destination-data"

@@ -41,14 +41,14 @@ export default function Filter({ filters }: FilterProps) {
      </Title>
      <form className={styles.form}>
        <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
            <legend>
              {intl.formatMessage({
                id: "filter.facilities",
                defaultMessage: "Hotel facilities",
              })}
            </legend>
-          </Subtitle>
+          </Typography>
          <ul className={styles.list}>
            {facilityFilters.map((filter) => (
              <li key={`filter-${filter.slug}`}>
@@ -66,14 +66,14 @@ export default function Filter({ filters }: FilterProps) {
        </fieldset>

        <fieldset className={styles.fieldset}>
-          <Subtitle type="two" asChild>
+          <Typography variant="Title/Subtitle/md">
            <legend>
              {intl.formatMessage({
                id: "filter.hotelSurroundings",
                defaultMessage: "Hotel surroundings",
              })}
            </legend>
-          </Subtitle>
+          </Typography>
          <ul className={styles.list}>
            {surroundingsFilters.map((filter) => (
              <li key={`filter-${filter.slug}`}>
--- a/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css
+++ b/apps/scandic-web/components/DestinationFilterAndSort/destinationFilterAndSort.module.css
@@ -9,6 +9,10 @@
  z-index: var(--default-modal-overlay-z-index);
 }

+.title {
+  text-align: center;
+}
+
 .dialog {
  width: min(80dvw, 960px);
  border-radius: var(--Corner-radius-lg);
--- a/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
+++ b/apps/scandic-web/components/DestinationFilterAndSort/index.tsx
@@ -14,7 +14,7 @@ import { Alert } from "@scandic-hotels/design-system/Alert"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useDestinationDataStore } from "@/stores/destination-data"

@@ -144,11 +144,9 @@ export default function DestinationFilterAndSort({
            {({ close }) => (
              <>
                <header className={styles.header}>
-                  <Subtitle
-                    type="two"
-                    textAlign="center"
+                  <Typography
+                    variant="Title/Subtitle/md"
                    className={styles.title}
-                    asChild
                  >
                    <h3>
                      {intl.formatMessage({
@@ -156,7 +154,7 @@ export default function DestinationFilterAndSort({
                        defaultMessage: "Filter and sort",
                      })}
                    </h3>
-                  </Subtitle>
+                  </Typography>
                  <button
                    onClick={close}
                    type="button"
--- a/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
@@ -6,7 +6,6 @@ import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"

@@ -39,12 +38,14 @@ export function AddedAncillaries({
  return (
    <div className={styles.container}>
      <div className={styles.header}>
-        <Subtitle>
-          {intl.formatMessage({
-            defaultMessage: "My extras",
-            id: "myStay.addedAncillaries.title",
-          })}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/lg">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "My extras",
+              id: "myStay.addedAncillaries.title",
+            })}
+          </p>
+        </Typography>

        {booking.ancillary?.deliveryTime && (
          <Typography variant="Body/Paragraph/mdBold">
--- a/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Modal/ModalContent/Header/index.tsx
@@ -1,7 +1,7 @@
 import { Button as ButtonRAC } from "react-aria-components"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import styles from "./header.module.css"

@@ -13,7 +13,9 @@ interface HeaderProps extends React.PropsWithChildren {
 export default function Header({ children, handleClose, title }: HeaderProps) {
  return (
    <header className={styles.header}>
-      <Subtitle>{title}</Subtitle>
+      <Typography variant="Title/Subtitle/lg">
+        <p>{title}</p>
+      </Typography>
      <ButtonRAC className={styles.close} onPress={handleClose}>
        <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
      </ButtonRAC>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx
@@ -128,7 +128,7 @@ export default function NewDates({ checkInDate, checkOutDate }: NewDatesProps) {
              <MaterialIcon icon="calendar_today" />
            </ButtonRAC>
            <Modal>
-              <Dialog>
+              <Dialog className={styles.dialog}>
                {({ close }) => (
                  <>
                    <DatePickerSingleDesktop
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
@@ -1,5 +1,5 @@
 import Caption from "@scandic-hotels/design-system/Caption"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import styles from "./priceContainer.module.css"

@@ -34,9 +34,9 @@ export default function PriceContainer({
        </Caption>
      </div>
      <div className={styles.wrapper}>
-        <Subtitle className={styles.price} color="burgundy" type="one">
-          {price}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <p>{price}</p>
+        </Typography>
      </div>
    </div>
  )
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/priceContainer.module.css
@@ -19,6 +19,7 @@
  padding-left: var(--Space-x2);
  display: flex;
  align-items: center;
+  color: var(--Text-Heading);
 }

 .price {
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"

 import useDropdownStore from "@/stores/main-menu"

@@ -35,18 +34,10 @@ export default function LanguageSwitcherContainer({
            onClick={() => toggleDropdown(position)}
          >
            <MaterialIcon
-              icon="chevron_left"
-              color="Icon/Interactive/Accent"
+              icon="arrow_back_ios"
+              color="Icon/Interactive/Default"
              size={20}
            />
-            <Subtitle type="one" asChild>
-              <span>
-                {intl.formatMessage({
-                  id: "common.mainMenu",
-                  defaultMessage: "Main menu",
-                })}
-              </span>
-            </Subtitle>
          </button>
        </div>
      ) : null}
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContainer/languageSwitcherContainer.module.css
@@ -1,5 +1,4 @@
 .backWrapper {
-  background-color: var(--Base-Surface-Secondary-light-Normal);
  padding: var(--Space-x2);
 }

--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/index.tsx
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { languages } from "@scandic-hotels/common/constants/language"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -32,12 +31,14 @@ export default function LanguageSwitcherContent({

  return (
    <div className={styles.languageWrapper}>
-      <Subtitle className={styles.subtitle} type="two">
-        {intl.formatMessage({
-          id: "common.selectYourLanguage",
-          defaultMessage: "Select your language",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
+        <p>
+          {intl.formatMessage({
+            id: "common.selectYourLanguage",
+            defaultMessage: "Select your language",
+          })}
+        </p>
+      </Typography>
      <ul className={styles.list}>
        {urlKeys.map((key) => {
          const url = urls[key]?.url
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/apps/scandic-web/components/SasTierComparison/index.tsx
@@ -6,7 +6,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -130,7 +129,9 @@ function TierDetails({
      <div className={styles.tierContent}>
        <div className={styles.tierInfo}>
          <div className={styles.tierTitle}>
-            <Subtitle color="burgundy">{tierMatch.title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p className={styles.title}>{tierMatch.title}</p>
+            </Typography>
          </div>
          <div>{children}</div>
        </div>
--- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
+++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
@@ -31,6 +31,10 @@
  flex-direction: column;
 }

+.title {
+  color: var(--Text-Heading);
+}
+
 .tierDetails {
  overflow: hidden;
  background-color: var(--Base-Surface-Primary-light-Normal);
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/index.tsx
@@ -1,4 +1,4 @@
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { JoinLoyaltyContactEnums } from "@scandic-hotels/trpc/types/joinLoyaltyContact"

 import { getIntl } from "@/i18n"
@@ -13,12 +13,14 @@ export default async function Contact({ contactBlock }: ContactProps) {
  const intl = await getIntl()
  return (
    <article className={styles.contactContainer}>
-      <Subtitle>
-        {intl.formatMessage({
-          id: "common.contactUs",
-          defaultMessage: "Contact us",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage({
+            id: "common.contactUs",
+            defaultMessage: "Contact us",
+          })}
+        </p>
+      </Typography>
      <section className={styles.contact}>
        {contactBlock.map((contact, i) => {
          switch (contact.typename) {
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/ReadMore/index.tsx
@@ -1,7 +1,7 @@
 import { scandicFriends } from "@scandic-hotels/common/constants/routes/myPages"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { faq } from "@/constants/webHrefs"

@@ -32,12 +32,14 @@ export default async function ReadMore() {

  return (
    <article className={styles.wrapper}>
-      <Subtitle>
-        {intl.formatMessage({
-          id: "common.readMore",
-          defaultMessage: "Read more",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md">
+        <p>
+          {intl.formatMessage({
+            id: "common.readMore",
+            defaultMessage: "Read more",
+          })}
+        </p>
+      </Typography>
      <div className={styles.links}>
        {links.map((link) => (
          <Link
--- a/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/TeaserCard/index.tsx
@@ -1,6 +1,5 @@
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import TeaserCardSidepeek from "./Sidepeek"
@@ -39,9 +38,9 @@ export default function TeaserCard({
        </div>
      )}
      <div className={styles.content}>
-        <Subtitle textAlign="left" type="two" color="black">
-          {title}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <p>{title}</p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{description}</p>
        </Typography>
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx
@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

 import AdultSelector from "../AdultSelector"
@@ -40,9 +40,9 @@ export function GuestsRoom({
  return (
    <div className={styles.roomContainer}>
      <section className={styles.roomDetailsContainer}>
-        <Subtitle type="two" className={styles.roomHeading}>
-          {roomLabel}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md" className={styles.roomHeading}>
+          <p>{roomLabel}</p>
+        </Typography>
        <AdultSelector roomIndex={index} currentAdults={room.adults} />
        <ChildSelector
          roomIndex={index}
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/index.tsx
@@ -9,7 +9,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import Modal from "@scandic-hotels/design-system/Modal"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "../../../../contexts/EnterDetails/RoomContext"
@@ -75,13 +74,18 @@ export default function MemberPriceModal() {
                  })}
                </p>
              </Typography>
-              <Subtitle type="two" color="red">
-                {formatPrice(
-                  intl,
-                  memberPrice.pricePerStay ?? 0,
-                  memberPrice.currency ?? CurrencyEnum.Unknown
-                )}
-              </Subtitle>
+              <Typography
+                variant="Title/Subtitle/md"
+                className={styles.redPrice}
+              >
+                <p>
+                  {formatPrice(
+                    intl,
+                    memberPrice.pricePerStay ?? 0,
+                    memberPrice.currency ?? CurrencyEnum.Unknown
+                  )}
+                </p>
+              </Typography>
            </span>
          )}
        </div>
--- a/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/MemberPriceModal/modal.module.css
@@ -21,6 +21,9 @@
  gap: var(--Space-x1);
  align-items: center;
 }
+.redPrice {
+  color: var(--Text-Accent-Primary);
+}

@media screen and (min-width: 768px) {
  .modalContent {
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/TimeoutSpinner/index.tsx
@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"

 import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -20,12 +19,14 @@ export default function TimeoutSpinner() {
  return (
    <div className={styles.container}>
      <LoadingSpinner />
-      <Subtitle className={styles.heading}>
-        {intl.formatMessage({
-          id: "enterDetails.payment.loadingTitle",
-          defaultMessage: "Taking longer than usual",
-        })}
-      </Subtitle>
+      <Typography variant="Title/Subtitle/md" className={styles.heading}>
+        <p>
+          {intl.formatMessage({
+            id: "enterDetails.payment.loadingTitle",
+            defaultMessage: "Taking longer than usual",
+          })}
+        </p>
+      </Typography>
      <Typography
        variant="Body/Paragraph/mdRegular"
        className={styles.messageContainer}
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -14,7 +14,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
@@ -63,12 +62,14 @@ export default function PriceChangeSummary({
            {({ close }) => (
              <div className={styles.content}>
                <header className={styles.header}>
-                  <Subtitle>
-                    {intl.formatMessage({
-                      id: "common.priceDetails",
-                      defaultMessage: "Price details",
-                    })}
-                  </Subtitle>
+                  <Typography variant="Title/Subtitle/md">
+                    <p>
+                      {intl.formatMessage({
+                        id: "common.priceDetails",
+                        defaultMessage: "Price details",
+                      })}
+                    </p>
+                  </Typography>
                  <Button
                    onPress={close}
                    variant="clean"
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -5,7 +5,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import Title from "@scandic-hotels/design-system/Title"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -129,12 +128,14 @@ export default function PriceChangeDialog({
              </p>
            </Typography>
            <div>
-              <Subtitle textAlign="center" color="burgundy">
-                {intl.formatMessage({
-                  id: "enterDetails.priceChangeDialog.newTotalLabel",
-                  defaultMessage: "New total",
-                })}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p style={{ textAlign: "center" }}>
+                  {intl.formatMessage({
+                    id: "enterDetails.priceChangeDialog.newTotalLabel",
+                    defaultMessage: "New total",
+                  })}
+                </p>
+              </Typography>
              <div className={styles.prices}>
                <Caption striked>
                  {formatPrice(intl, prevTotalPrice, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/SelectedRoom/index.tsx
@@ -8,7 +8,7 @@ import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReserva
 import { Button } from "@scandic-hotels/design-system/Button"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"

 import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
@@ -61,25 +61,28 @@ export default function SelectedRoom() {
              })}
            </h2>
          </Footnote>
-          <Subtitle
-            type="two"
+          <Typography
+            variant="Title/Subtitle/md"
            className={styles.description}
-            color="uiTextHighContrast"
          >
-            {intl.formatMessage(
-              {
-                id: "enterDetails.selectedRoom.roomType.description",
-                defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
-              },
-              {
-                roomType: room.roomType,
-                rateDescription: room.cancellationText,
-                rate: ([str]) => {
-                  return str ? <span className={styles.rate}>{str}</span> : null
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "enterDetails.selectedRoom.roomType.description",
+                  defaultMessage: "{roomType} <rate>{rateDescription}</rate>",
                },
-              }
-            )}
-          </Subtitle>
+                {
+                  roomType: room.roomType,
+                  rateDescription: room.cancellationText,
+                  rate: ([str]) => {
+                    return str ? (
+                      <span className={styles.rate}>{str}</span>
+                    ) : null
+                  },
+                }
+              )}
+            </p>
+          </Typography>
          <Button
            variant="Text"
            size="sm"
--- a/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Summary/UI/index.tsx
@@ -11,7 +11,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "../../../../hooks/useLang"
@@ -101,12 +100,14 @@ export default function SummaryUI({
        role="button"
        onClick={isDesktop ? undefined : handleToggleSummary}
      >
-        <Subtitle className={styles.title} type="two">
-          {intl.formatMessage({
-            id: "booking.bookingSummary",
-            defaultMessage: "Booking summary",
-          })}
-        </Subtitle>
+        <Typography className={styles.title} variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              id: "booking.bookingSummary",
+              defaultMessage: "Booking summary",
+            })}
+          </p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
          <p>
            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -12,7 +12,6 @@ import { NoPriceAvailableCard } from "@scandic-hotels/design-system/HotelCard/No
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import Link from "@scandic-hotels/design-system/OldDSLink"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useGetPointsCurrency } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -88,7 +87,9 @@ export default function ListingHotelCardDialog({
          />
          <div>
            <div className={styles.name}>
-              <Subtitle type="two">{name}</Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{name}</p>
+              </Typography>
            </div>
            <div className={styles.facilities}>
              {amenities.map((facility) => (
@@ -127,35 +128,47 @@ export default function ListingHotelCardDialog({
                </Caption>
              )}
              <div className={styles.listingPrices}>
-                {publicPrice && !isUserLoggedIn && memberPrice ? (
+                {publicPrice && !isUserLoggedIn ? (
                  <>
-                    <Subtitle type="two">
-                      {publicPrice} {currency}
-                    </Subtitle>
+                    <Typography variant="Title/Subtitle/md">
+                      <p>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                    {memberPrice && <Caption>/</Caption>}
                  </>
                ) : (
                  bookingCode &&
                  publicPrice && (
-                    <Subtitle type="two" color="red">
-                      {publicPrice} {currency}
-                    </Subtitle>
+                    <Typography
+                      variant="Title/Subtitle/md"
+                      className={styles.red}
+                    >
+                      <p>
+                        {publicPrice} {currency}
+                      </p>
+                    </Typography>
                  )
                )}
                {memberPrice && (
-                  <Subtitle type="two" color="red">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: memberPrice,
-                        currency,
-                      }
-                    )}
-                  </Subtitle>
+                  <Typography
+                    variant="Title/Subtitle/md"
+                    className={styles.red}
+                  >
+                    <p>
+                      {intl.formatMessage(
+                        {
+                          id: "common.priceCurrency",
+                          defaultMessage: "{price} {currency}",
+                        },
+                        {
+                          price: memberPrice,
+                          currency,
+                        }
+                      )}
+                    </p>
+                  </Typography>
                )}
                {redemptionPrice && (
                  <HotelPointsRow
@@ -164,31 +177,36 @@ export default function ListingHotelCardDialog({
                  />
                )}
                {chequePrice && (
-                  <Subtitle type="two">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: chequePrice.numberOfCheques,
-                        currency: "CC",
-                      }
-                    )}
-                    {chequePrice.additionalPricePerStay > 0
-                      ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                        " + " +
-                        intl.formatMessage(
+                  <>
+                    <Typography variant="Title/Subtitle/md">
+                      <span>
+                        {intl.formatMessage(
                          {
                            id: "common.priceCurrency",
                            defaultMessage: "{price} {currency}",
                          },
                          {
-                            price: chequePrice.additionalPricePerStay,
-                            currency: chequePrice.currency,
+                            price: chequePrice.numberOfCheques,
+                            currency: "CC",
                          }
-                        )
-                      : null}
+                        )}
+                        {chequePrice.additionalPricePerStay > 0
+                          ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                            " + " +
+                            intl.formatMessage(
+                              {
+                                id: "common.priceCurrency",
+                                defaultMessage: "{price} {currency}",
+                              },
+                              {
+                                price: chequePrice.additionalPricePerStay,
+                                currency: chequePrice.currency,
+                              }
+                            )
+                          : null}
+                      </span>
+                    </Typography>
+
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
@@ -199,20 +217,24 @@ export default function ListingHotelCardDialog({
                        })}
                      </span>
                    </Typography>
-                  </Subtitle>
+                  </>
                )}
                {voucherPrice && (
-                  <Subtitle type="two">
-                    {intl.formatMessage(
-                      {
-                        id: "common.priceCurrency",
-                        defaultMessage: "{price} {currency}",
-                      },
-                      {
-                        price: voucherPrice,
-                        currency,
-                      }
-                    )}
+                  <>
+                    <Typography variant="Title/Subtitle/md">
+                      <p>
+                        {intl.formatMessage(
+                          {
+                            id: "common.priceCurrency",
+                            defaultMessage: "{price} {currency}",
+                          },
+                          {
+                            price: voucherPrice,
+                            currency,
+                          }
+                        )}
+                      </p>
+                    </Typography>
                    <Typography variant="Body/Paragraph/mdRegular">
                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                      <span>
@@ -223,7 +245,7 @@ export default function ListingHotelCardDialog({
                        })}
                      </span>
                    </Typography>
-                  </Subtitle>
+                  </>
                )}
              </div>
            </div>
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -19,6 +19,10 @@
  gap: var(--Space-x15);
 }

+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .name {
  height: 48px;
  max-width: 180px;
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -1,3 +1,4 @@
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
@@ -5,7 +6,6 @@ import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -152,18 +152,22 @@ export function DesktopSummary({
        </div>
        <div className={styles.summaryPrice}>
          <div className={styles.summaryPriceTextDesktop}>
-            <Subtitle
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
-              textAlign="right"
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx(styles.alignRight, {
+                [styles.red]: showDiscounted,
+              })}
            >
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
            {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
              <Caption
                textAlign="right"
@@ -210,15 +214,20 @@ export function DesktopSummary({
                defaultMessage: "Total price",
              })}
            </Caption>
-            <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
-              {formatPrice(
-                intl,
-                selectedRates.totalPrice.local.price,
-                selectedRates.totalPrice.local.currency,
-                selectedRates.totalPrice.local.additionalPrice,
-                selectedRates.totalPrice.local.additionalPriceCurrency
-              )}
-            </Subtitle>
+            <Typography
+              variant="Title/Subtitle/md"
+              className={cx({ [styles.red]: showDiscounted })}
+            >
+              <p>
+                {formatPrice(
+                  intl,
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
+                )}
+              </p>
+            </Typography>
            <Footnote
              color="uiTextMediumContrast"
              className={styles.summaryPriceTextMobile}
@@ -258,18 +267,23 @@ function RateSummary({
  if (!room || !room.isSelected) {
    return (
      <div key={`unselected-${roomIndex}`}>
-        <Subtitle color="uiTextPlaceholder">
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            { roomIndex: roomIndex + 1 }
-          )}
-        </Subtitle>
+        <Typography
+          variant="Title/Subtitle/md"
+          className={styles.placeholderText}
+        >
+          <p>
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              { roomIndex: roomIndex + 1 }
+            )}
+          </p>
+        </Typography>
        <Typography
          variant="Body/Paragraph/mdRegular"
-          className={styles.selectRoom}
+          className={styles.placeholderText}
        >
          <p>
            {intl.formatMessage({
@@ -286,12 +300,14 @@ function RateSummary({
    <div key={roomIndex}>
      {isMultiRoom ? (
        <>
-          <Subtitle color="uiTextHighContrast">
-            {intl.formatMessage(
-              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-              { roomIndex: roomIndex + 1 }
-            )}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>
+              {intl.formatMessage(
+                { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+                { roomIndex: roomIndex + 1 }
+              )}
+            </p>
+          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.uiTextMediumContrast}
@@ -304,9 +320,9 @@ function RateSummary({
        </>
      ) : (
        <>
-          <Subtitle color="uiTextHighContrast">
-            {room.roomInfo.roomType}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{room.roomInfo.roomType}</p>
+          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.uiTextMediumContrast}
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -37,6 +37,14 @@
  max-width: 264px;
 }

+.alignRight {
+  text-align: right;
+}
+
+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .summaryPrice {
  align-self: center;
  display: flex;
@@ -77,8 +85,8 @@
  display: block;
 }

-.selectRoom {
-  color: var(--UI-Text-Placeholder);
+.placeholderText {
+  color: var(--Text-Tertiary);
 }

 .uiTextMediumContrast {
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -8,7 +8,6 @@ import Caption from "@scandic-hotels/design-system/Caption"
 import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
@@ -56,9 +55,9 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
            { roomIndex: roomNr }
          )}
        </Caption>
-        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
-          {selectedRate.roomInfo.roomType}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
+          <p>{selectedRate.roomInfo.roomType}</p>
+        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <div>
            <p className={styles.uiTextMediumContrast}>{rateTitle}</p>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
 import { SelectedRoomPanel } from "./SelectedRoomPanel"
@@ -116,7 +116,9 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {

        <div className={styles.header}>
          {selectedRate && !isActiveRoom ? null : (
-            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
+            <Typography variant="Title/Subtitle/md">
+              <p>{title}</p>
+            </Typography>
          )}
          {selectedRate && isActiveRoom ? (
            <Button
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
@@ -2,9 +2,9 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"

 import styles from "./hotelChequeCard.module.css"
+import { Typography } from "../../Typography"

 type ProductTypeCheque = {
  localPrice: {
@@ -35,17 +35,17 @@ export default function HotelChequeCard({
          })}
        </Caption>
        <div className={styles.cheque}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeCheque.localPrice.numberOfCheques}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
+          </Typography>
          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <>
              +
-              <Subtitle type="two" color="uiTextHighContrast">
-                {productTypeCheque.localPrice.additionalPricePerStay}
-              </Subtitle>
+              <Typography variant="Title/Subtitle/md">
+                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
+              </Typography>
              <Caption color="uiTextHighContrast">
                {productTypeCheque.localPrice.currency}
              </Caption>
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
@@ -1,9 +1,9 @@
 import { useIntl } from "react-intl"

 import Caption from "../../Caption"
-import Subtitle from "../../Subtitle"

 import styles from "./hotelVoucherCard.module.css"
+import { Typography } from "../../Typography"

 type ProductTypeVoucher = {
  numberOfVouchers: number
@@ -25,9 +25,9 @@ export default function HotelVoucherCard({
          })}
        </Caption>
        <div className={styles.voucher}>
-          <Subtitle type="two" color="uiTextHighContrast">
-            {productTypeVoucher.numberOfVouchers}
-          </Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{productTypeVoucher.numberOfVouchers}</p>
+          </Typography>
          <Caption color="uiTextHighContrast" className={styles.currency}>
            {intl.formatMessage(
              {
--- a/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx
+++ b/packages/design-system/lib/components/Modal/ModalContentWithActions/index.tsx
@@ -1,6 +1,6 @@
 import { MaterialIcon } from "../../Icons/MaterialIcon"
 import { OldDSButton as Button } from "../../OldDSButton"
-import Subtitle from "../../Subtitle"
+import { Typography } from "../../Typography"

 import styles from "./modalContent.module.css"

@@ -35,7 +35,9 @@ export function ModalContentWithActions({
    <>
      {title && (
        <header className={styles.header}>
-          <Subtitle>{title}</Subtitle>
+          <Typography variant="Title/Subtitle/md">
+            <p>{title}</p>
+          </Typography>
          <button onClick={onClose} type="button" className={styles.close}>
            <MaterialIcon icon="close" color="Icon/Interactive/Placeholder" />
          </button>
--- a/packages/design-system/lib/components/Subtitle/index.tsx
+++ b/packages/design-system/lib/components/Subtitle/index.tsx
@@ -1,51 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { subtitleVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-import { Children, ReactNode } from "react"
-
-interface SubtitleProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof subtitleVariants> {
-  asChild?: boolean
-}
-
-/**
- * @deprecated Use `Typography` instead.
- */
-export default function Subtitle({
-  asChild = false,
-  className = "",
-  color,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: SubtitleProps) {
-  if (checkForEmptyChildren(props.children) === 0) {
-    return null
-  }
-  const Comp = asChild ? Slot : "p"
-  const classNames = subtitleVariants({
-    className,
-    color,
-    textAlign,
-    textTransform,
-    type,
-  })
-  return <Comp className={classNames} {...props} />
-}
-
-function checkForEmptyChildren(children: ReactNode) {
-  return Children.toArray(children).filter((child) => {
-    if (child === "") {
-      return false
-    } else if (child == null) {
-      return false
-    } else {
-      return true
-    }
-  }).length
-}
--- a/packages/design-system/lib/components/Subtitle/subtitle.module.css
+++ b/packages/design-system/lib/components/Subtitle/subtitle.module.css
@@ -1,92 +0,0 @@
-.subtitle {
-  margin: 0;
-  padding: 0;
-}
-
-.one {
-  font-family: var(--typography-Subtitle-1-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-1-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-1-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-1-letterSpacing);
-  line-height: var(--typography-Subtitle-1-lineHeight);
-}
-
-.two {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: clamp(
-    var(--typography-Subtitle-2-Mobile-fontSize),
-    0.3vw + 15px,
-    var(--typography-Subtitle-2-Desktop-fontSize)
-  );
-  font-weight: 500;
-  letter-spacing: var(--typography-Subtitle-2-letterSpacing);
-  line-height: var(--typography-Subtitle-2-lineHeight);
-}
-
-.regular {
-  text-transform: none;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.baseTextDisabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.mainGrey60 {
-  color: var(--Main-Grey-60);
-}
--- a/packages/design-system/lib/components/Subtitle/variants.ts
+++ b/packages/design-system/lib/components/Subtitle/variants.ts
@@ -1,42 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./subtitle.module.css"
-
-const config = {
-  variants: {
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      baseTextDisabled: styles.baseTextDisabled,
-      pale: styles.pale,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      red: styles.red,
-      mainGrey60: styles.mainGrey60,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    textTransform: {
-      regular: styles.regular,
-      uppercase: styles.uppercase,
-      capitalize: styles.capitalize,
-    },
-    type: {
-      one: styles.one,
-      two: styles.two,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    textAlign: "left",
-    textTransform: "regular",
-    type: "one",
-  },
-} as const
-
-export const subtitleVariants = cva(styles.subtitle, config)
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -175,7 +175,6 @@
    "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
    "./StaticMap": "./lib/components/StaticMap/index.tsx",
    "./Stepper": "./lib/components/Stepper/index.tsx",
-    "./Subtitle": "./lib/components/Subtitle/index.tsx",
    "./Switch": "./lib/components/Switch/index.tsx",
    "./Table": "./lib/components/Table/index.tsx",
    "./TextArea": "./lib/components/TextArea/index.tsx",