Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography * chore(BOOK-739): replace caption with typography * chore(BOOK-739): refactor div * chore(BOOK-739): refactor badge * chore(BOOK-739): remove span * chore(BOOK-739): skeleton update * chore(BOOK-739): update * chore(BOOK-739): update reward * chore(BOOK-739): update voucher currency Approved-by: Erik Tiekstra
2026-01-14 09:33:27 +00:00
parent d284e82828
commit d9ec1b1f2d
53 changed files with 465 additions and 673 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx
@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -41,15 +40,18 @@ export default function JobylonCard({ job }: JobylonCardProps) {
      </Typography>

      <div className={styles.contentWrapper}>
-        <div>
-          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
-          <Caption>
-            {job.locations
-              .map((loc) => `${loc.city}, ${loc.country}`)
-              .join(" | ")}
-          </Caption>
-          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
-        </div>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <div>
+            <p>{job.categories.map((cat) => cat.text).join(", ")}</p>
+            <p>
+              {job.locations
+                .map((loc) => `${loc.city}, ${loc.country}`)
+                .join(" | ")}
+            </p>
+            <p className={styles.deadline}>{deadlineText}</p>
+          </div>
+        </Typography>
+
        <Button
          theme="base"
          size="small"
--- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css
@@ -7,6 +7,10 @@
  border-radius: var(--Corner-radius-md);
 }

+.deadline {
+  color: var(--Text-Secondary);
+}
+
 .contentWrapper {
  display: grid;
  gap: var(--Space-x1);
--- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx
@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

@@ -81,23 +80,20 @@ async function LevelCard({ level }: LevelCardProps) {
      <Typography variant="Title/xs" className={styles.pointMsg}>
        <h5>{pointsMsg}</h5>
      </Typography>
-      <div className={styles.textContainer}>
-        {level.rewards.map((reward) => (
-          <Caption
-            className={styles.levelText}
-            key={reward.reward_id}
-            textAlign="center"
-            color="textMediumContrast"
-          >
-            <MaterialIcon
-              icon="check"
-              className={styles.checkIcon}
-              color="Icon/Interactive/Accent"
-            />
-            {reward.label}
-          </Caption>
-        ))}
-      </div>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.textContainer}>
+          {level.rewards.map((reward) => (
+            <p className={styles.levelText} key={reward.reward_id}>
+              <MaterialIcon
+                icon="check"
+                className={styles.checkIcon}
+                color="Icon/Interactive/Accent"
+              />
+              {reward.label}
+            </p>
+          ))}
+        </div>
+      </Typography>
    </article>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css
@@ -37,6 +37,7 @@
 }

 .levelText {
+  color: var(--Text-Secondary);
  margin: 0;
 }

--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/ActiveRedeemedBadge.tsx
@@ -3,8 +3,8 @@
 import { motion } from "motion/react"
 import { useIntl } from "react-intl"

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

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

@@ -25,12 +25,14 @@ export default function ActiveRedeemedBadge() {
      >
        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
      </motion.div>
-      <Caption>
-        {intl.formatMessage({
-          id: "rewards.active",
-          defaultMessage: "Active",
-        })}
-      </Caption>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          {intl.formatMessage({
+            id: "rewards.active",
+            defaultMessage: "Active",
+          })}
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
@@ -2,7 +2,6 @@

 import { useIntl } from "react-intl"

-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 { toast } from "@scandic-hotels/design-system/Toast"
@@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {
          <p>{reward.description}</p>
        </Typography>
        <div className={styles.rewardBadge}>
-          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
-            {intl.formatMessage({
-              id: "redeemFlow.promoCode",
-              defaultMessage: "Promo code",
-            })}
-          </Caption>
-          <Caption textAlign="center" color="uiTextHighContrast">
-            {reward.operaRewardId}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <p>
+              {intl.formatMessage({
+                id: "redeemFlow.promoCode",
+                defaultMessage: "Promo code",
+              })}
+            </p>
+          </Typography>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{reward.operaRewardId}</p>
+          </Typography>
        </div>
      </div>
      <footer className={styles.modalFooter}>
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/MembershipNumberBadge.tsx
@@ -1,6 +1,6 @@
 import { useIntl } from "react-intl"

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

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

@@ -12,8 +12,8 @@ export default function MembershipNumberBadge({
  const intl = useIntl()

  return (
-    <div className={styles.rewardBadge}>
-      <Caption textAlign="center" color="uiTextHighContrast">
+    <Typography variant="Body/Supporting text (caption)/smRegular">
+      <span className={styles.rewardBadge}>
        {intl.formatMessage(
          {
            id: "rewards.membershipId",
@@ -21,7 +21,7 @@ export default function MembershipNumberBadge({
          },
          { id: membershipNumber }
        )}
-      </Caption>
-    </div>
+      </span>
+    </Typography>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/TimedRedeemedBadge.tsx
@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"

 import Countdown from "@/components/Countdown"

@@ -21,12 +21,14 @@ export default function TimedRedeemedBadge() {
    <>
      <div className={styles.redeemed}>
        <MaterialIcon icon="check_circle" color="Icon/Feedback/Success" />
-        <Caption>
-          {intl.formatMessage({
-            id: "rewards.redeemed.validThrough",
-            defaultMessage: "Redeemed & valid through:",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage({
+              id: "rewards.redeemed.validThrough",
+              defaultMessage: "Redeemed & valid through:",
+            })}
+          </p>
+        </Typography>
      </div>
      <Countdown
        minutes={duration.minutes()}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/redeem.module.css
@@ -129,6 +129,7 @@
  background: var(--Base-Surface-Secondary-light-Normal);
  display: grid;
  gap: var(--Space-x05);
+  text-align: center;
 }

 .redeemButton {
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/OldStayCard/index.tsx
@@ -1,7 +1,6 @@
 "use client"

 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 Image from "@scandic-hotels/design-system/Image"
 import Link from "@scandic-hotels/design-system/OldDSLink"
@@ -62,14 +61,14 @@ function CardContent({ stay }: StayCardProps) {
            icon="calendar_month"
            color="Icon/Interactive/Default"
          />
-          <Caption asChild>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {" - "}
-          <Caption asChild>
-            <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {" - "}
+              <time dateTime={departDateTime}>{departDate}</time>
+            </p>
+          </Typography>
        </div>
      </footer>
    </article>
--- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
+++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx
@@ -6,10 +6,9 @@ import { useIntl } from "react-intl"

 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
+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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import useLang from "@/hooks/useLang"
@@ -115,19 +114,15 @@ export default function DatePickerSingleDesktop({
              />
              <footer className={props.className}>
                <Button
-                  intent="tertiary"
+                  variant="Tertiary"
                  onPress={close}
-                  size="small"
-                  theme="base"
+                  color="Primary"
+                  size="sm"
                >
-                  <Caption color="white" type="bold" asChild>
-                    <span>
-                      {intl.formatMessage({
-                        id: "datePicker.selectDates",
-                        defaultMessage: "Select dates",
-                      })}
-                    </span>
-                  </Caption>
+                  {intl.formatMessage({
+                    id: "datePicker.selectDates",
+                    defaultMessage: "Select dates",
+                  })}
                </Button>
              </footer>
            </>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx
@@ -1,4 +1,3 @@
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import styles from "./priceContainer.module.css"
@@ -23,15 +22,17 @@ export default function PriceContainer({
  return (
    <div className={styles.priceContainer}>
      <div className={styles.info}>
-        <Caption color="uiTextHighContrast" type="bold">
-          {text}
-        </Caption>
-        <Caption color="uiTextHighContrast">
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {nightsText}, {adultsText}
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {totalChildren > 0 ? `, ${childrenText}` : ""}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>{text}</p>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {nightsText}, {adultsText}
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {totalChildren > 0 ? `, ${childrenText}` : ""}
+          </p>
+        </Typography>
      </div>
      <div className={styles.wrapper}>
        <Typography variant="Title/Subtitle/md">
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/apps/scandic-web/components/SasTierComparison/index.tsx
@@ -1,7 +1,6 @@
 "use client"
 import Image from "next/image"

-import Caption from "@scandic-hotels/design-system/Caption"
 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"
@@ -129,7 +128,7 @@ function TierDetails({
        <div className={styles.tierInfo}>
          <div className={styles.tierTitle}>
            <Typography variant="Title/Subtitle/md">
-              <p className={styles.title}>{tierMatch.title}</p>
+              <p className={styles.tierMatch}>{tierMatch.title}</p>
            </Typography>
          </div>
          <div>{children}</div>
@@ -162,9 +161,9 @@ function ReadMoreLink({
 function ColumnTitle({ children }: { children?: ReactNode }) {
  return (
    <div className={styles.columnTitle}>
-      <Caption type="bold" asChild>
+      <Typography variant="Title/Overline/sm">
        <span>{children}</span>
-      </Caption>
+      </Typography>
    </div>
  )
 }
--- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
+++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
@@ -36,10 +36,6 @@
  flex-direction: column;
 }

-.title {
-  color: var(--Text-Heading);
-}
-
 .tierDetails {
  overflow: hidden;
  background-color: var(--Base-Surface-Primary-light-Normal);
@@ -114,6 +110,11 @@
  width: 100%;
 }

+.tierMatch {
+  text-align: left;
+  color: var(--Text-Heading);
+}
+
 .tierTitles {
  cursor: pointer;
  padding: var(--Space-x05);
--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -76,9 +75,9 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
          </div>
        </div>
        {ancillary.description && (
-          <Caption asChild color="uiTextHighContrast">
+          <Typography variant="Body/Supporting text (caption)/smRegular">
            <div dangerouslySetInnerHTML={{ __html: ancillary.description }} />
-          </Caption>
+          </Typography>
        )}
      </div>
    </article>
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css
@@ -1,5 +1,6 @@
 .button {
  align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
  border: none;
  border-radius: var(--Corner-radius-md);
  cursor: pointer;
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx
@@ -1,18 +1,17 @@
 "use client"
 import { useIntl } from "react-intl"

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

 import { buttonVariants } from "./variants"

 import type { SearchListProps } from ".."

-interface ClearSearchButtonProps
-  extends Pick<
-    SearchListProps,
-    "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
-  > {
+interface ClearSearchButtonProps extends Pick<
+  SearchListProps,
+  "getItemProps" | "handleClearSearchHistory" | "highlightedIndex"
+> {
  index: number
 }

@@ -41,14 +40,14 @@ export default function ClearSearchButton({
      type="button"
    >
      <MaterialIcon icon="delete" color="Icon/Interactive/Default" size={20} />
-      <Caption color="burgundy" type="bold" asChild>
+      <Typography variant="Body/Supporting text (caption)/smBold">
        <span>
          {intl.formatMessage({
            id: "bookingWidget.search.clearSearches",
            defaultMessage: "Clear searches",
          })}
        </span>
-      </Caption>
+      </Typography>
    </button>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx
@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"

-import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -306,10 +305,15 @@ function SearchListError({
      getMenuProps={getMenuProps}
      variant="error"
    >
-      <Caption className={styles.heading} color="red">
-        <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-        {caption}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.heading}
+      >
+        <p>
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
+          {caption}
+        </p>
+      </Typography>
      <Typography
        className={styles.errorBody}
        variant="Body/Paragraph/mdRegular"
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/searchList.module.css
@@ -28,6 +28,7 @@
  align-items: center;
  display: flex;
  gap: var(--Space-x1);
+  color: var(--Text-Interactive-Error);
 }

 .text {
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/index.tsx
@@ -2,8 +2,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

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

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import BookingCode from "../BookingCode"
@@ -43,30 +43,25 @@ export function VoucherSkeleton() {
    <div className={styles.optionsContainer}>
      {config.bookingCodeEnabled && (
        <div className={styles.voucherSkeletonContainer}>
-          <label>
-            <Caption type="bold" color="red" asChild>
-              <span>{vouchers}</span>
-            </Caption>
-          </label>
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <label>{vouchers}</label>
+          </Typography>
          <SkeletonShimmer width="100%" display="block" />
        </div>
      )}
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <div className={styles.options}>
+          <div className={cx(styles.option, styles.showOnTablet)}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {vouchers}
+          </div>

-      <div className={styles.options}>
-        <div className={cx(styles.option, styles.showOnTablet)}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{vouchers}</span>
-          </Caption>
+          <div className={styles.option}>
+            <SkeletonShimmer width="24px" height="24px" />
+            {reward}
+          </div>
        </div>
-
-        <div className={styles.option}>
-          <SkeletonShimmer width="24px" height="24px" />
-          <Caption color="uiTextMediumContrast" asChild>
-            <span>{reward}</span>
-          </Caption>
-        </div>
-      </div>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css
@@ -10,6 +10,7 @@
  gap: var(--Space-x2);
  margin-top: var(--Space-x2);
  align-items: center;
+  color: var(--Text-Secondary);
 }

 .optionsContainer {
@@ -18,6 +19,7 @@
 }
 .voucherSkeletonContainer {
  padding: var(--Space-x1) var(--Space-x15);
+  color: var(--Text-Secondary);
 }

 .checkbox {
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css
@@ -3,3 +3,7 @@
  justify-content: space-between;
  align-items: center;
 }
+
+.label {
+  color: var(--Text-Default);
+}
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx
@@ -3,8 +3,8 @@
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

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

 import styles from "./adult-selector.module.css"

@@ -38,9 +38,12 @@ export default function AdultSelector({

  return (
    <section className={styles.container}>
-      <Caption color="uiTextHighContrast" type="bold">
-        {adultsLabel}
-      </Caption>
+      <Typography
+        variant="Body/Supporting text (caption)/smBold"
+        className={styles.label}
+      >
+        <p>{adultsLabel}</p>
+      </Typography>
      <Stepper
        count={currentAdults}
        handleOnDecrease={decreaseAdultsCount}
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/child-selector.module.css
@@ -4,8 +4,8 @@
  align-items: center;
 }

-.captionBold {
-  font-weight: 600;
+.label {
+  color: var(--Text-Default);
 }

 .childInfoContainer {
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx
@@ -55,7 +55,10 @@ export default function ChildSelector({
  return (
    <>
      <section className={styles.container}>
-        <Typography variant="Body/Supporting text (caption)/smBold">
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.label}
+        >
          <p>{childrenLabel}</p>
        </Typography>
        <Stepper
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -34,6 +34,7 @@
 }

 .roomHeading {
+  color: var(--Text-Default);
  margin-bottom: var(--Space-x1);
 }

--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/Signup/index.tsx
@@ -8,8 +8,8 @@ import {
 } from "react-hook-form"
 import { useIntl } from "react-intl"

-import Caption from "@scandic-hotels/design-system/Caption"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
 import useLang from "../../../../../hooks/useLang"
@@ -70,14 +70,14 @@ export default function Signup({
          }}
        >
          <header>
-            <Caption type="bold">
+            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.required}>
                {intl.formatMessage({
                  id: "common.birthDate",
                  defaultMessage: "Birth date",
                })}
              </span>
-            </Caption>
+            </Typography>
          </header>
          <DateSelect
            labels={{
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx
@@ -2,7 +2,6 @@ import React from "react"
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "@scandic-hotels/design-system/Caption"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import {
@@ -115,27 +114,25 @@ function PaymentCard({

  return (
    <div className={styles.card}>
-      <Caption
-        type="bold"
-        textTransform="uppercase"
-        className={styles.cardTitle}
-      >
-        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-        {title}{" "}
-        <span>
+      <Typography variant="Tag/sm">
+        <p>
          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {"/ "}
-          {intl.formatMessage(
-            {
-              id: "booking.roomIndex",
-              defaultMessage: "Room {roomIndex}",
-            },
-            {
-              roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
-            }
-          )}
-        </span>
-      </Caption>
+          {title}{" "}
+          <span className={styles.roomInfo}>
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {"/ "}
+            {intl.formatMessage(
+              {
+                id: "booking.roomIndex",
+                defaultMessage: "Room {roomIndex}",
+              },
+              {
+                roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "),
+              }
+            )}
+          </span>
+        </p>
+      </Typography>
      <Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
        <p>
          {formatPrice(intl, price, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css
@@ -13,12 +13,8 @@
  border-radius: var(--Corner-radius-md);
 }

-.cardTitle {
-  text-transform: uppercase;
-}
-
-.cardTitle > span {
-  color: var(--UI-Text-Placeholder);
+.roomInfo {
+  color: var(--Text-Tertiary);
 }

 .card.inactive {
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
@@ -10,7 +10,6 @@ import {
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-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"
@@ -107,21 +106,28 @@ export default function PriceChangeSummary({
                              <p>{room.roomType}</p>
                            </Typography>
                            <div className={styles.priceRow}>
-                              <Caption color="uiTextMediumContrast">
-                                {intl.formatMessage({
-                                  id: "priceDetails.roomCharge",
-                                  defaultMessage: "Room charge",
-                                })}
-                              </Caption>
+                              <Typography variant="Body/Supporting text (caption)/smRegular">
+                                <p>
+                                  {intl.formatMessage({
+                                    id: "priceDetails.roomCharge",
+                                    defaultMessage: "Room charge",
+                                  })}
+                                </p>
+                              </Typography>
                              {newPrice ? (
                                <div className={styles.updatedPrice}>
-                                  <Caption color="uiTextMediumContrast" striked>
-                                    {formatPrice(
-                                      intl,
-                                      room.roomPrice.perStay.local.price,
-                                      room.roomPrice.perStay.local.currency
-                                    )}
-                                  </Caption>
+                                  <Typography
+                                    variant="Body/Supporting text (caption)/smRegular"
+                                    className={styles.prevPrice}
+                                  >
+                                    <p>
+                                      {formatPrice(
+                                        intl,
+                                        room.roomPrice.perStay.local.price,
+                                        room.roomPrice.perStay.local.currency
+                                      )}
+                                    </p>
+                                  </Typography>
                                  <Typography variant="Body/Paragraph/mdBold">
                                    <p>
                                      {formatPrice(
@@ -133,32 +139,38 @@ export default function PriceChangeSummary({
                                  </Typography>
                                </div>
                              ) : (
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    room.roomPrice.perStay.local.price,
-                                    room.roomPrice.perStay.local.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      room.roomPrice.perStay.local.price,
+                                      room.roomPrice.perStay.local.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              )}
                            </div>
                            {room.breakfast && (
                              <div className={styles.priceRow}>
-                                <Caption color="uiTextMediumContrast">
-                                  {intl.formatMessage({
-                                    id: "enterDetails.priceChangeDialog.breakfastCharge",
-                                    defaultMessage: "Breakfast charge",
-                                  })}
-                                </Caption>
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    Number(
-                                      room.breakfast.localPrice.totalPrice
-                                    ),
-                                    room.breakfast.localPrice.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {intl.formatMessage({
+                                      id: "enterDetails.priceChangeDialog.breakfastCharge",
+                                      defaultMessage: "Breakfast charge",
+                                    })}
+                                  </p>
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      Number(
+                                        room.breakfast.localPrice.totalPrice
+                                      ),
+                                      room.breakfast.localPrice.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              </div>
                            )}
                            {room.roomFeatures?.map((feature) => (
@@ -166,20 +178,24 @@ export default function PriceChangeSummary({
                                className={styles.priceRow}
                                key={feature.itemCode}
                              >
-                                <Caption color="uiTextMediumContrast">
-                                  {getRoomFeatureDescription(
-                                    feature.code,
-                                    feature.description,
-                                    intl
-                                  )}
-                                </Caption>
-                                <Caption color="uiTextMediumContrast">
-                                  {formatPrice(
-                                    intl,
-                                    Number(feature.localPrice.totalPrice),
-                                    feature.localPrice.currency
-                                  )}
-                                </Caption>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {getRoomFeatureDescription(
+                                      feature.code,
+                                      feature.description,
+                                      intl
+                                    )}
+                                  </p>
+                                </Typography>
+                                <Typography variant="Body/Supporting text (caption)/smRegular">
+                                  <p>
+                                    {formatPrice(
+                                      intl,
+                                      Number(feature.localPrice.totalPrice),
+                                      feature.localPrice.currency
+                                    )}
+                                  </p>
+                                </Typography>
                              </div>
                            ))}
                          </div>
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
@@ -59,6 +59,10 @@
  color: var(--UI-Text-Medium-contrast);
 }

+.prevPrice {
+  text-decoration: line-through;
+}
+
 .updatedPrice {
  display: flex;
  align-items: center;
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
@@ -2,7 +2,6 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"
@@ -131,9 +130,12 @@ export default function PriceChangeDialog({
                </p>
              </Typography>
              <div className={styles.prices}>
-                <Caption striked>
-                  {formatPrice(intl, prevTotalPrice, currency)}
-                </Caption>
+                <Typography
+                  variant="Body/Supporting text (caption)/smRegular"
+                  className={styles.prevPrice}
+                >
+                  <p>{formatPrice(intl, prevTotalPrice, currency)}</p>
+                </Typography>
                <Typography variant="Body/Paragraph/mdBold">
                  <p style={{ textAlign: "center" }}>
                    {formatPrice(intl, newTotalPrice, currency)}
--- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
@@ -63,6 +63,10 @@
  width: 100dvw;
 }

+.prevPrice {
+  text-decoration: line-through;
+}
+
 .header {
  display: flex;
  flex-direction: column;
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"

 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
 import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
@@ -61,6 +61,20 @@ export default function ListingHotelCardDialog({
    defaultMessage: "Not enough points",
  })
  const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+  const label = redemptionPrice
+    ? intl.formatMessage({
+        id: "hotelCard.availableRates",
+        defaultMessage: "Available rates",
+      })
+    : chequePrice || voucherPrice
+      ? intl.formatMessage({
+          id: "common.from",
+          defaultMessage: "From",
+        })
+      : intl.formatMessage({
+          id: "listingHotelCardDialog.perNightFrom",
+          defaultMessage: "Per night from",
+        })

  return (
    <div className={styles.container}>
@@ -112,21 +126,10 @@ export default function ListingHotelCardDialog({
        chequePrice ? (
          <div className={styles.bottomContainer}>
            <div className={styles.pricesContainer}>
-              {redemptionPrice ? (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "hotelCard.availableRates",
-                    defaultMessage: "Available rates",
-                  })}
-                </Caption>
-              ) : (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "listingHotelCardDialog.perNightFrom",
-                    defaultMessage: "Per night from",
-                  })}
-                </Caption>
-              )}
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{label}</p>
+              </Typography>
+
              <div className={styles.listingPrices}>
                {publicPrice && !isUserLoggedIn ? (
                  <>
@@ -135,8 +138,15 @@ export default function ListingHotelCardDialog({
                        {publicPrice} {currency}
                      </p>
                    </Typography>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {memberPrice && <Caption>/</Caption>}
+                    {memberPrice && (
+                      <Typography
+                        variant="Body/Supporting text (caption)/smRegular"
+                        className={styles.divider}
+                      >
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                        <p>/</p>
+                      </Typography>
+                    )}
                  </>
                ) : (
                  bookingCode &&
@@ -206,44 +216,12 @@ export default function ListingHotelCardDialog({
                          : null}
                      </span>
                    </Typography>
-
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
-                    </Typography>
                  </>
                )}
                {voucherPrice && (
                  <>
                    <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>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
+                      <p>{formatPrice(intl, voucherPrice, currency)}</p>
                    </Typography>
                  </>
                )}
--- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
+++ b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css
@@ -19,6 +19,9 @@
  gap: var(--Space-x15);
 }

+.divider {
+  color: var(--Text-Tertiary);
+}
 .red {
  color: var(--Text-Accent-Primary);
 }
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx
@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"

 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 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 { Typography } from "@scandic-hotels/design-system/Typography"

@@ -148,7 +146,12 @@ export function DesktopSummary({
              )}
            </p>
          </Typography>
-          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>{summaryPriceText}</p>
+          </Typography>
        </div>
        <div className={styles.summaryPrice}>
          <div className={styles.summaryPriceTextDesktop}>
@@ -169,17 +172,18 @@ export function DesktopSummary({
              </p>
            </Typography>
            {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
-              <Caption
-                textAlign="right"
-                color="uiTextMediumContrast"
-                striked={true}
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.regularPrice}
              >
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.regularPrice,
-                  selectedRates.totalPrice.local.currency
-                )}
-              </Caption>
+                <p>
+                  {formatPrice(
+                    intl,
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
+                  )}
+                </p>
+              </Typography>
            )}
            {!!selectedRates.totalPrice.requested && (
              <Typography
@@ -207,34 +211,6 @@ export function DesktopSummary({
              </Typography>
            )}
          </div>
-          <div className={styles.summaryPriceTextMobile}>
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage({
-                id: "common.totalPrice",
-                defaultMessage: "Total price",
-              })}
-            </Caption>
-            <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}
-            >
-              {summaryPriceText}
-            </Footnote>
-          </div>
          <Button
            className={styles.continueButton}
            disabled={!isAllRoomsSelected || isSubmitting}
@@ -308,15 +284,15 @@ function RateSummary({
              )}
            </p>
          </Typography>
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
+          <Typography variant="Body/Paragraph/mdRegular">
            <p>{room.roomInfo.roomType}</p>
          </Typography>
-          <Caption color="uiTextMediumContrast">
-            {getRateDetails(room.rate)}
-          </Caption>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.secondaryText}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
        </>
      ) : (
        <>
@@ -325,7 +301,7 @@ function RateSummary({
          </Typography>
          <Typography
            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
+            className={styles.secondaryText}
          >
            <p>{getRateDetails(room.rate)}</p>
          </Typography>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css
@@ -41,6 +41,12 @@
  text-align: right;
 }

+.regularPrice {
+  color: var(--Text-Secondary);
+  text-decoration: line-through;
+  text-align: right;
+}
+
 .red {
  color: var(--Text-Accent-Primary);
 }
@@ -77,10 +83,6 @@
  min-width: 140px;
 }

-.summaryPriceTextMobile {
-  white-space: nowrap;
-}
-
 .mobileSummary {
  display: block;
 }
@@ -89,8 +91,8 @@
  color: var(--Text-Tertiary);
 }

-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+.secondaryText {
+  color: var(--Text-Secondary);
 }

@media (min-width: 1367px) {
@@ -120,10 +122,6 @@
    gap: var(--Space-x2);
  }

-  .summaryPriceTextMobile {
-    display: none;
-  }
-
  .summaryPrice,
  .continueButton {
    width: auto;
--- 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
@@ -4,7 +4,6 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { logger } from "@scandic-hotels/common/logger"
-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"
@@ -49,12 +48,14 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
  return (
    <div className={styles.selectedRoomPanel}>
      <div className={styles.content}>
-        <Caption color="uiTextHighContrast">
-          {intl.formatMessage(
-            { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
-            { roomIndex: roomNr }
-          )}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            {intl.formatMessage(
+              { id: "booking.roomIndex", defaultMessage: "Room {roomIndex}" },
+              { roomIndex: roomNr }
+            )}
+          </p>
+        </Typography>
        <Typography variant="Title/Subtitle/md" className={styles.subtitle}>
          <p>{selectedRate.roomInfo.roomType}</p>
        </Typography>
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
@@ -1,8 +1,8 @@
 "use client"
 import { useIntl } from "react-intl"

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

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

@@ -12,12 +12,14 @@ export default function RoomNotAvailable() {
    <div className={styles.noRoomsContainer}>
      <div className={styles.noRooms}>
        <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={16} />
-        <Caption color="uiTextHighContrast" type="bold">
-          {intl.formatMessage({
-            id: "selectRate.thisRoomIsNotAvailable",
-            defaultMessage: "This room is not available",
-          })}
-        </Caption>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              id: "selectRate.thisRoomIsNotAvailable",
+              defaultMessage: "This room is not available",
+            })}
+          </p>
+        </Typography>
      </div>
    </div>
  )
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
@@ -5,4 +5,5 @@
  gap: var(--Space-x1);
  margin: 0;
  padding: var(--Space-x2);
+  align-items: center;
 }
--- a/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
+++ b/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
@@ -3,8 +3,8 @@
 import { useIntl } from "react-intl"

 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 { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"

@@ -63,9 +63,12 @@ function Message({
      },
      {
        span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
            <span>{str}</span>
-          </Caption>
+          </Typography>
        ),
        price,
      }
@@ -81,9 +84,12 @@ function Message({
      },
      {
        span: (str) => (
-          <Caption color="red" type="bold" asChild>
+          <Typography
+            variant="Body/Supporting text (caption)/smBold"
+            className={styles.red}
+          >
            <span>{str}</span>
-          </Caption>
+          </Typography>
        ),
        price,
      }
@@ -98,9 +104,12 @@ function Message({
    },
    {
      span: (str) => (
-        <Caption color="red" type="bold" asChild>
+        <Typography
+          variant="Body/Supporting text (caption)/smBold"
+          className={styles.red}
+        >
          <span>{str}</span>
-        </Caption>
+        </Typography>
      ),
      price,
    }
--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
@@ -18,6 +18,10 @@
  position: relative;
 }

+.red {
+  color: var(--Text-Accent-Primary);
+}
+
 .badge {
  display: flex;
  align-items: center;
--- a/packages/design-system/lib/components/Caption/caption.module.css
+++ b/packages/design-system/lib/components/Caption/caption.module.css
@@ -1,127 +0,0 @@
-p.caption {
-  margin: 0;
-  padding: 0;
-}
-
-.captionFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Caption-Bold-fontFamily);
-  font-size: var(--typography-Caption-Bold-fontSize);
-  font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
-  letter-spacing: var(--typography-Caption-Bold-letterSpacing);
-  line-height: var(--typography-Caption-Bold-lineHeight);
-  text-decoration: var(--typography-Caption-Bold-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Caption-Labels-fontFamily);
-  font-size: var(--typography-Caption-Labels-fontSize);
-  font-weight: var(--typography-Caption-Labels-fontWeight);
-  letter-spacing: var(--typography-Caption-Labels-letterSpacing);
-  line-height: var(--typography-Caption-Labels-lineHeight);
-  text-decoration: var(--typography-Caption-Labels-textDecoration);
-}
-
-.underline {
-  font-family: var(--typography-Caption-Underline-fontFamily);
-  font-size: var(--typography-Caption-Underline-fontSize);
-  font-weight: var(--typography-Caption-Underline-fontWeight);
-  letter-spacing: var(--typography-Caption-Underline-letterSpacing);
-  line-height: var(--typography-Caption-Underline-lineHeight);
-  text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
-}
-
-.regular {
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
-  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
-  line-height: var(--typography-Caption-Regular-lineHeight);
-  text-decoration: var(--typography-Caption-Regular-textDecoration);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.striked {
-  text-decoration: line-through;
-}
-
-.baseTextAccent {
-  color: var(--Base-Text-Accent);
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.textMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.baseTextHighContrast {
-  color: var(--Base-Text-High-contrast);
-}
-
-.baseTextMediumContrast {
-  color: var(--Base-Text-Medium-contrast);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.white {
-  color: var(--UI-Opacity-White-100);
-}
-
-.uiTextActive {
-  color: var(--UI-Text-Active);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.disabled {
-  color: var(--Base-Text-Disabled);
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.right {
-  text-align: right;
-}
-
-.green {
-  color: var(--UI-Semantic-Success);
-}
-.blue {
-  color: var(--UI-Semantic-Information);
-}
--- a/packages/design-system/lib/components/Caption/index.tsx
+++ b/packages/design-system/lib/components/Caption/index.tsx
@@ -1,48 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { captionVariants, fontOnlycaptionVariants } from "./variants"
-import { VariantProps } from "class-variance-authority"
-
-interface CaptionProps
-  extends
-    Omit<React.HTMLAttributes<HTMLHeadingElement>, "color">,
-    VariantProps<typeof captionVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Caption({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  uppercase,
-  striked,
-  type,
-  ...props
-}: CaptionProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? fontOnlycaptionVariants({
-        className,
-        textTransform,
-        uppercase,
-        striked,
-        type,
-      })
-    : captionVariants({
-        className,
-        color,
-        textTransform,
-        textAlign,
-        uppercase,
-        striked,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}
--- a/packages/design-system/lib/components/Caption/variants.ts
+++ b/packages/design-system/lib/components/Caption/variants.ts
@@ -1,80 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./caption.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    color: {
-      baseTextAccent: styles.baseTextAccent,
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      textMediumContrast: styles.textMediumContrast,
-      red: styles.red,
-      white: styles.white,
-      green: styles.green,
-      blue: styles.blue,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextActive: styles.uiTextActive,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      disabled: styles.disabled,
-      baseTextHighContrast: styles.baseTextHighContrast,
-      baseTextMediumContrast: styles.baseTextMediumContrast,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-      right: styles.right,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    color: "black",
-    type: "regular",
-  },
-} as const
-
-export const captionVariants = cva(styles.caption, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-      underline: styles.underline,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-    uppercase: {
-      true: styles.uppercase,
-    },
-    striked: {
-      true: styles.striked,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const fontOnlycaptionVariants = cva(
-  styles.captionFontOnly,
-  fontOnlyConfig
-)
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/hotelChequeCard.module.css
@@ -17,6 +17,10 @@
  color: var(--Text-Default);
 }

+.secondaryText {
+  color: var(--Text-Secondary);
+}
+
 .cheque {
  justify-content: end;
 }
--- a/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelChequeCard/index.tsx
@@ -1,7 +1,6 @@
 import { useIntl } from "react-intl"

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

 import styles from "./hotelChequeCard.module.css"
 import { Typography } from "../../Typography"
@@ -28,17 +27,21 @@ export default function HotelChequeCard({
  return (
    <div className={styles.chequeCard}>
      <div className={styles.chequeRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
        <div className={styles.cheque}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeCheque.localPrice.numberOfCheques}</p>
          </Typography>
-          <Caption color="uiTextHighContrast">{CurrencyEnum.CC}</Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>{CurrencyEnum.CC}</p>
+          </Typography>
          {productTypeCheque.localPrice.additionalPricePerStay > 0 ? (
            // eslint-disable-next-line formatjs/no-literal-string-in-jsx
            <>
@@ -46,9 +49,9 @@ export default function HotelChequeCard({
              <Typography variant="Title/Subtitle/md">
                <p>{productTypeCheque.localPrice.additionalPricePerStay}</p>
              </Typography>
-              <Caption color="uiTextHighContrast">
-                {productTypeCheque.localPrice.currency}
-              </Caption>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{productTypeCheque.localPrice.currency}</p>
+              </Typography>
            </>
          ) : null}
        </div>
@@ -56,21 +59,33 @@ export default function HotelChequeCard({
      {productTypeCheque.requestedPrice &&
      productTypeCheque.requestedPrice.additionalPricePerStay > 0 ? (
        <div className={styles.chequeRow}>
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage({
-              id: "booking.approx",
-              defaultMessage: "Approx.",
-            })}
-          </Caption>
-          <Caption color="uiTextMediumContrast">
-            {productTypeCheque.requestedPrice.numberOfCheques} {CurrencyEnum.CC}
-            {productTypeCheque.requestedPrice.additionalPricePerStay
-              ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
-                " + "
-              : ""}
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
-          </Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {intl.formatMessage({
+                id: "booking.approx",
+                defaultMessage: "Approx.",
+              })}
+            </p>
+          </Typography>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {productTypeCheque.requestedPrice.numberOfCheques}{" "}
+              {CurrencyEnum.CC}
+              {productTypeCheque.requestedPrice.additionalPricePerStay
+                ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+                  " + "
+                : ""}
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {`${productTypeCheque.requestedPrice.additionalPricePerStay} ${productTypeCheque.requestedPrice.currency}`}
+            </p>
+          </Typography>
        </div>
      ) : null}
    </div>
--- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/index.tsx
@@ -151,7 +151,20 @@ export function StandaloneHotelCardDialog({
                </RoomPrice>
              ) : null}
              {voucherPrice ? (
-                <RoomPrice price={voucherPrice} currency={currency} />
+                <RoomPrice
+                  price={voucherPrice}
+                  currency={intl.formatMessage(
+                    {
+                      id: "price.numberOfVouchers",
+                      defaultMessage:
+                        "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                    },
+                    {
+                      numberOfVouchers: voucherPrice,
+                    }
+                  )}
+                  includePerNight={false}
+                />
              ) : null}
              {/* Show public price if:
                1) user is not logged in, or
--- a/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelVoucherCard/index.tsx
@@ -1,7 +1,5 @@
 import { useIntl } from "react-intl"

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

@@ -18,28 +16,32 @@ export default function HotelVoucherCard({
  return (
    <div className={styles.voucherCard}>
      <div className={styles.voucherRow}>
-        <Caption>
-          {intl.formatMessage({
-            id: "common.from",
-            defaultMessage: "From",
-          })}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <p>
+            {intl.formatMessage({
+              id: "common.from",
+              defaultMessage: "From",
+            })}
+          </p>
+        </Typography>
        <div className={styles.voucher}>
          <Typography variant="Title/Subtitle/md">
            <p>{productTypeVoucher.numberOfVouchers}</p>
          </Typography>
-          <Caption color="uiTextHighContrast" className={styles.currency}>
-            {intl.formatMessage(
-              {
-                id: "price.numberOfVouchers",
-                defaultMessage:
-                  "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
-              },
-              {
-                numberOfVouchers: productTypeVoucher.numberOfVouchers,
-              }
-            )}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  id: "price.numberOfVouchers",
+                  defaultMessage:
+                    "{numberOfVouchers, plural, one {Voucher} other {Vouchers}}",
+                },
+                {
+                  numberOfVouchers: productTypeVoucher.numberOfVouchers,
+                }
+              )}
+            </p>
+          </Typography>
        </div>
      </div>
    </div>
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -12,7 +12,6 @@ import {
  selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
-import Caption from "../Caption"
 import { Divider } from "../Divider"
 import { FacilityToIcon } from "../FacilityToIcon"
 import HotelLogoIcon from "../Icons/Logos"
@@ -341,12 +340,14 @@ export const HotelCardComponent = memo(
                )}
                {prices?.redemptions?.length ? (
                  <div className={styles.pointsCard}>
-                    <Caption>
-                      {intl.formatMessage({
-                        id: "hotelCard.availableRates",
-                        defaultMessage: "Available rates",
-                      })}
-                    </Caption>
+                    <Typography variant="Body/Supporting text (caption)/smRegular">
+                      <p>
+                        {intl.formatMessage({
+                          id: "hotelCard.availableRates",
+                          defaultMessage: "Available rates",
+                        })}
+                      </p>
+                    </Typography>
                    {prices.redemptions.map((redemption) => (
                      <HotelPointsRow
                        key={redemption.rateCode}
--- a/packages/design-system/lib/components/ImageContainer/index.tsx
+++ b/packages/design-system/lib/components/ImageContainer/index.tsx
@@ -1,5 +1,5 @@
-import Caption from "../Caption"
 import Image from "../Image"
+import { Typography } from "../Typography"

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

@@ -42,7 +42,9 @@ export default function ImageContainer({
          focalPoint={leftImage.focalPoint}
          dimensions={leftImage.dimensions}
        />
-        <Caption>{leftImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{leftImage.meta.caption}</p>
+        </Typography>
      </article>
      <article>
        <Image
@@ -54,7 +56,9 @@ export default function ImageContainer({
          focalPoint={rightImage.focalPoint}
          dimensions={rightImage.dimensions}
        />
-        <Caption>{rightImage.meta.caption}</Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{rightImage.meta.caption}</p>
+        </Typography>
      </article>
    </section>
  )
--- a/packages/design-system/lib/components/Switch/index.tsx
+++ b/packages/design-system/lib/components/Switch/index.tsx
@@ -5,7 +5,7 @@ import { RegisterOptions, useController, useFormContext } from "react-hook-form"

 import styles from "./switch.module.css"
 import { MaterialIcon } from "../Icons/MaterialIcon"
-import Caption from "../Caption"
+import { Typography } from "../Typography"

 interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  name: string
@@ -37,10 +37,12 @@ export default function Switch({
      {children}
      <span className={styles.switch} tabIndex={0}></span>
      {fieldState.error ? (
-        <Caption className={styles.error} fontOnly>
-          <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
-          {fieldState.error.message}
-        </Caption>
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>
+            <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
+            {fieldState.error.message}
+          </p>
+        </Typography>
      ) : null}
    </AriaSwitch>
  )
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -14,7 +14,6 @@
    "./Button": "./lib/components/Button/index.tsx",
    "./ButtonLink": "./lib/components/ButtonLink/index.tsx",
    "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
-    "./Caption": "./lib/components/Caption/index.tsx",
    "./Card": "./lib/components/Card/index.tsx",
    "./ChipButton": "./lib/components/ChipButton/index.tsx",
    "./ChipLink": "./lib/components/ChipLink/index.tsx",