Merged in chore/BOOK-773-replace-old-typography-variables (pull request #3515)

Chore/BOOK-773 replace old typography variables * chore(BOOK-773): Replaced body typography * chore(BOOK-773): Replaced caption typography * chore(BOOK-773): Replaced footnote typography * chore(BOOK-773): Replaced subtitle typography Approved-by: Bianca Widstam
2026-02-03 15:07:18 +00:00
parent dd65467573
commit b3c4761ae5
57 changed files with 261 additions and 634 deletions
--- a/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css
+++ b/apps/partner-sas/app/[lang]/middleware-error/[status]/page.module.css
@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }
--- a/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css
+++ b/apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/layout.module.css
@@ -4,7 +4,8 @@

 .layout {
  display: grid;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
  max-width: var(--max-width-page);
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/layout.module.css
@@ -1,6 +1,7 @@
 .layout {
  display: grid;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  grid-template-rows: auto 1fr;
  position: relative;
 }
--- a/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css
+++ b/apps/scandic-web/app/[lang]/(live)/middleware-error/[status]/page.module.css
@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/login/page.tsx
@@ -1,9 +1,8 @@
 import { redirect } from "next/navigation"
 import { z } from "zod"

-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { env } from "@/env/server"
@@ -94,27 +93,24 @@ export default async function SASxScandicLoginPage(
          {intentDescriptions[parsedParams.intent]}
        </p>
      </Typography>
-      <Footnote textAlign="center">
-        {intl.formatMessage(
-          {
-            id: "linkEuroBonusAccount.manualRedirectLinkMessage",
-            defaultMessage:
-              "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
-          },
-          {
-            loginLink: (str) => (
-              <Link
-                href={loginLink}
-                color="red"
-                size="tiny"
-                textDecoration="underline"
-              >
-                {str}
-              </Link>
-            ),
-          }
-        )}
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p style={{ textAlign: "center" }}>
+          {intl.formatMessage(
+            {
+              id: "linkEuroBonusAccount.manualRedirectLinkMessage",
+              defaultMessage:
+                "If you are not redirected automatically, please <loginLink>click here</loginLink>.",
+            },
+            {
+              loginLink: (str) => (
+                <TextLink typography="Link/sm" href={loginLink}>
+                  {str}
+                </TextLink>
+              ),
+            }
+          )}
+        </p>
+      </Typography>
    </SASModal>
  )
 }
--- a/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css
+++ b/apps/scandic-web/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/otp/OneTimePasswordForm.module.css
@@ -42,7 +42,8 @@
  width: 34px;
  height: 0px;
  padding: var(--Space-x3) 0;
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  border: 1px solid var(--Base-Border-Normal);
  border-radius: var(--Corner-Radius-md);
  text-align: center;
--- a/apps/scandic-web/app/[lang]/webview/layout.module.css
+++ b/apps/scandic-web/app/[lang]/webview/layout.module.css
@@ -1,5 +1,6 @@
 .layout {
  background-color: var(--Background-Primary);
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  min-height: 100dvh;
 }
--- a/apps/scandic-web/app/not-found.module.css
+++ b/apps/scandic-web/app/not-found.module.css
@@ -1,3 +1,4 @@
 .layout {
-  font-family: var(--typography-Body-Regular-fontFamily);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/desktopHeader.module.css
@@ -16,18 +16,14 @@

 .iconTh {
  padding: var(--Space-x5) var(--Space-x2) var(--Space-x2);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
  vertical-align: bottom;
 }

 .summaryTh {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
  padding: 0 var(--Space-x2) var(--Space-x2);
  vertical-align: top;
 }

 .select {
-  font-weight: var(--typography-Caption-Regular-fontWeight);
  padding: 0 var(--Space-x2) var(--Space-x2);
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/DesktopHeader/index.tsx
@@ -1,3 +1,5 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import MembershipLevelIcon from "@/components/Levels/Icon"

 import LevelSummary from "../../LevelSummary"
@@ -37,12 +39,14 @@ export default function DesktopHeader({
        <th />
        {levels.map((level, idx) => {
          return (
-            <th
-              key={"summary" + level.level_id + idx}
-              className={styles.summaryTh}
+            <Typography
+              variant="Body/Supporting text (caption)/smRegular"
+              key={"name" + level.level_id + idx}
            >
-              <LevelSummary level={level} />
-            </th>
+              <th className={styles.summaryTh}>
+                <LevelSummary level={level} />
+              </th>
+            </Typography>
          )
        })}
      </tr>
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx
@@ -82,10 +82,12 @@ function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
          </span>
        </hgroup>
      </summary>
-      <p
-        className={styles.rewardDescription}
-        dangerouslySetInnerHTML={{ __html: description }}
-      />
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p
+          className={styles.rewardDescription}
+          dangerouslySetInnerHTML={{ __html: description }}
+        />
+      </Typography>
    </details>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/largeTable.module.css
@@ -15,14 +15,11 @@
 }

 .td {
-  font-size: var(--typography-Footnote-Regular-fontSize);
  text-align: center;
 }

 .rewardTh {
  padding: var(--Space-x3) var(--Space-x2);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: var(--typography-Caption-Regular-fontWeight);
 }

 .details[open] .chevron {
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/index.tsx
@@ -1,5 +1,7 @@
 import { useIntl } from "react-intl"

+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import styles from "./levelSummary.module.css"

 import type { LevelSummaryProps } from "@/types/components/overviewTable"
@@ -32,7 +34,9 @@ export default function LevelSummary({

  return (
    <div className={styles.levelSummary}>
-      <span className={styles.levelRequirements}>{pointsMsg}</span>
+      <Typography variant="Label/xsRegular">
+        <span className={styles.levelRequirements}>{pointsMsg}</span>
+      </Typography>
      {showDescription && (
        <p className={styles.levelSummaryText}>{level.description}</p>
      )}
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LevelSummary/levelSummary.module.css
@@ -8,16 +8,14 @@

 .levelRequirements {
  border-radius: var(--Corner-Radius-md);
-  background-color: var(--Scandic-Brand-Pale-Peach);
-  color: var(--Scandic-Peach-80);
+  background-color: var(--Surface-Brand-Primary-1-Default);
+  color: var(--Text-Interactive-Secondary);
  padding: var(--Space-x05) var(--Space-x1);
  text-align: center;
  width: 100%;
 }

 .levelSummaryText {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
  margin: 0;
 }

@@ -26,12 +24,3 @@
    padding: var(--Space-x05) var(--Space-x1);
  }
 }
-@media screen and (min-width: 1367px) {
-  .levelRequirements {
-    font-size: var(--typography-Footnote-Regular-fontSize);
-  }
-
-  .levelSummaryText {
-    font-size: var(--typography-Caption-Regular-fontSize);
-  }
-}
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/index.tsx
@@ -27,10 +27,12 @@ export default function RewardCard({
              </span>
            </hgroup>
          </summary>
-          <p
-            className={styles.rewardCardDescription}
-            dangerouslySetInnerHTML={{ __html: description }}
-          />
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p
+              className={styles.rewardCardDescription}
+              dangerouslySetInnerHTML={{ __html: description }}
+            />
+          </Typography>
        </details>
      </div>
      <div className={styles.rewardComparison}>
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/Card/rewardCard.module.css
@@ -12,8 +12,6 @@
 }

 .rewardCardDescription {
-  font-size: var(--typography-Caption-Regular-fontSize);
-  line-height: 150%;
  padding-right: var(--Space-x4);
 }

--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx
@@ -1,6 +1,7 @@
 import { Minus } from "react-feather"

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

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

@@ -21,8 +22,8 @@ export default function RewardValue({ reward }: RewardValueProps) {
    )
  }
  return (
-    <div className={styles.rewardValueContainer}>
-      <span className={styles.rewardValue}>{reward.value}</span>
-    </div>
+    <Typography variant="Body/Paragraph/mdBold">
+      <div className={styles.rewardValueContainer}>{reward.value}</div>
+    </Typography>
  )
 }
--- a/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css
@@ -7,17 +7,6 @@
  text-wrap: balance;
 }

-.rewardValue {
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
-}
-
-.rewardValueDetails {
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  text-align: center;
-  color: var(--UI-Grey-80);
-}
-
 .checkIcon {
  display: inline-flex;
 }
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/CityClusterMarker.tsx
@@ -10,6 +10,7 @@ import { useMediaQuery } from "usehooks-ts"

 import { useMarkerHover } from "@scandic-hotels/common/hooks/map/useMarkerHover"
 import { InfoWindow } from "@scandic-hotels/design-system/Map/InfoWindow"
+import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useDestinationPageCitiesMapStore } from "@/stores/destination-page-cities-map"

@@ -79,7 +80,10 @@ export default function CityClusterMarker({
      })}
      anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
    >
-      <span className={styles.count}>{sizeAsText}</span>
+      <Typography variant="Title/Subtitle/md">
+        <span>{sizeAsText}</span>
+      </Typography>
+
      {isDesktop && isHovered ? (
        <InfoWindow
          position={position}
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/clusterMarker.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/clusterMarker.module.css
@@ -20,9 +20,3 @@
    height: 46px !important;
  }
 }
-
-.count {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Subtitle-2-fontSize);
-  font-weight: var(--typography-Subtitle-2-fontWeight);
-}
--- a/apps/scandic-web/components/DatePicker/Single/desktop.module.css
+++ b/apps/scandic-web/components/DatePicker/Single/desktop.module.css
@@ -19,12 +19,13 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
+  text-decoration: none;
 }

 td.rangeEnd,
@@ -90,14 +91,16 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }

 .weekDay {
-  color: var(--UI-Text-Placeholder);
-  font-family: var(--typography-Footnote-Labels-fontFamily);
-  font-size: var(--typography-Footnote-Labels-fontSize);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family:
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }

 .footer {
--- a/apps/scandic-web/components/DatePicker/Single/mobile.module.css
+++ b/apps/scandic-web/components/DatePicker/Single/mobile.module.css
@@ -89,12 +89,13 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
+  text-decoration: none;
 }

 td.rangeEnd,
@@ -156,14 +157,16 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }

 .weekDay {
-  color: var(--UI-Text-Placeholder);
-  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);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family:
+    var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }

@media screen and (min-width: 1367px) {
--- a/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
+++ b/apps/scandic-web/components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css
@@ -4,13 +4,6 @@
  padding: var(--Space-x3) var(--Space-x2);
 }

-.subtitle {
-  font-family: var(--typography-Subtitle-2-fontFamily);
-  font-size: var(--typography-Subtitle-2-Mobile-fontSize);
-  font-weight: var(--typography-Subtitle-2-fontWeight);
-  color: var(--Base-Text-High-contrast);
-}
-
 .list {
  list-style: none;
 }
--- a/apps/scandic-web/components/MyPages/Pagination/pagination.module.css
+++ b/apps/scandic-web/components/MyPages/Pagination/pagination.module.css
@@ -16,8 +16,8 @@
  cursor: pointer;
  height: 32px;
  width: 32px;
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
  padding: 0;
  display: flex;
  align-items: center;
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/contactRow.module.css
@@ -2,6 +2,7 @@
  display: flex;
  flex-direction: column;
  gap: var(--Space-x05);
+  align-items: flex-start;
 }

 .link {
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -1,15 +1,13 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import {
  MaterialIcon,
  type MaterialIconSetIconProps,
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getValueFromContactConfig } from "@scandic-hotels/trpc/utils/contactConfig"

 import { serverClient } from "@/lib/trpc/server"

-// import { getValueFromContactConfig } from "@/utils/contactConfig"
 import styles from "./contactRow.module.css"

 import type { ContactRowProps } from "@/types/components/sidebar/joinLoyaltyContact"
@@ -46,22 +44,27 @@ export default async function ContactRow({ contact }: ContactRowProps) {

  return (
    <div className={styles.wrapper}>
-      <Typography
-        variant="Body/Paragraph/mdBold"
-        className={styles.displayText}
-      >
-        <p>{contact.display_text}</p>
-      </Typography>
-      <Link
+      {contact.display_text ? (
+        <Typography
+          variant="Body/Paragraph/mdBold"
+          className={styles.displayText}
+        >
+          <p>{contact.display_text}</p>
+        </Typography>
+      ) : null}
+      <TextLink
+        typography="Link/sm"
        className={styles.link}
        href={openableLink}
-        textDecoration="underline"
-        size="small"
      >
        {Icon ? <Icon size={20} color="Icon/Interactive/Default" /> : null}
        {val}
-      </Link>
-      {footnote && <Footnote color="burgundy">{footnote}</Footnote>}
+      </TextLink>
+      {footnote && (
+        <Typography variant="Body/Supporting text (caption)/smRegular">
+          <p>{footnote}</p>
+        </Typography>
+      )}
    </div>
  )
 }
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/contact.module.css
@@ -13,18 +13,9 @@
  gap: var(--Space-x15);
 }

-.contact > div {
-  display: flex;
-  justify-content: center;
-}
-
@media screen and (min-width: 1367px) {
  .contactContainer {
    align-items: start;
    padding-top: var(--Space-x2);
  }
-
-  .contact > div {
-    justify-content: start;
-  }
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/Label.tsx
@@ -1,13 +1,11 @@
-import Footnote from "@scandic-hotels/design-system/Footnote"
+import { Typography } from "@scandic-hotels/design-system/Typography"

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

 export default function Label({ children }: React.PropsWithChildren) {
  return (
-    <li className={styles.label}>
-      <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-        {children}
-      </Footnote>
-    </li>
+    <Typography variant="Title/Overline/sm">
+      <li className={styles.label}>{children}</li>
+    </Typography>
  )
 }
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/List/list.module.css
@@ -5,5 +5,6 @@
 }

 .label {
-  padding: 0 var(--Space-x1);
+  padding: 0 var(--Space-x1) var(--Space-x05);
+  color: var(--Text-Tertiary);
 }
--- 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
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
 import { useDebounceValue } from "usehooks-ts"

 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"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -192,16 +191,14 @@ export default function SearchList({
        {typeFilteredSearchHistory && typeFilteredSearchHistory.length > 0 && (
          <>
            <Divider className={styles.noResultsDivider} />
-            <Footnote
-              className={styles.text}
-              color="uiTextPlaceholder"
-              textTransform="uppercase"
-            >
-              {intl.formatMessage({
-                id: "bookingWidget.searchList.latestSearches",
-                defaultMessage: "Latest searches",
-              })}
-            </Footnote>
+            <Typography variant="Title/Overline/sm">
+              <p className={styles.text}>
+                {intl.formatMessage({
+                  id: "bookingWidget.searchList.latestSearches",
+                  defaultMessage: "Latest searches",
+                })}
+              </p>
+            </Typography>
            <List
              getItemProps={getItemProps}
              highlightedIndex={highlightedIndex}
@@ -226,12 +223,14 @@ export default function SearchList({
  if (displaySearchHistory) {
    return (
      <Dialog getMenuProps={getMenuProps}>
-        <Footnote color="uiTextPlaceholder" textTransform="uppercase">
-          {intl.formatMessage({
-            id: "bookingWidget.searchList.latestSearches",
-            defaultMessage: "Latest searches",
-          })}
-        </Footnote>
+        <Typography variant="Title/Overline/sm">
+          <p className={styles.text}>
+            {intl.formatMessage({
+              id: "bookingWidget.searchList.latestSearches",
+              defaultMessage: "Latest searches",
+            })}
+          </p>
+        </Typography>
        <List
          getItemProps={getItemProps}
          highlightedIndex={highlightedIndex}
--- 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
@@ -33,6 +33,7 @@

 .text {
  padding: 0 var(--Space-x1);
+  color: var(--Text-Tertiary);
  white-space: normal;
 }
 .textPlaceholderColor {
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Desktop.tsx
@@ -65,7 +65,7 @@ export default function DatePickerRangeDesktop({
        range_start: styles.rangeStart,
        root: `${classNames.root} ${styles.container}`,
        week: styles.week,
-        weekday: `${classNames.weekday} ${styles.weekDay}`,
+        weekday: styles.weekDay,
        nav: `${classNames.nav} ${styles.nav}`,
        button_next: `${classNames.button_next} ${styles.button_next}`,
        button_previous: `${classNames.button_previous} ${styles.button_previous}`,
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/Mobile.tsx
@@ -98,7 +98,7 @@ export default function DatePickerRangeMobile({
          range_start: styles.rangeStart,
          root: `${classNames.root} ${styles.root}`,
          week: styles.week,
-          weekday: `${classNames.weekday} ${styles.weekDay}`,
+          weekday: styles.weekDay,
        }}
        disabled={[
          { from: lastDayOfPreviousMonth, to: yesterday },
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/desktop.module.css
@@ -20,12 +20,12 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
+  text-decoration: none;
 }

 td.rangeEnd,
@@ -92,14 +92,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }

 .weekDay {
-  color: var(--UI-Text-Placeholder);
-  font-family: var(--typography-Footnote-Labels-fontFamily);
-  font-size: var(--typography-Footnote-Labels-fontSize);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }

 .footer {
--- a/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
+++ b/packages/booking-flow/lib/components/BookingWidget/DatePicker/Range/mobile.module.css
@@ -97,12 +97,12 @@ div.months {
 td.day,
 td.rangeEnd,
 td.rangeStart {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
-  text-decoration: var(--typography-Body-Bold-textDecoration);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
+  text-decoration: none;
 }

 td.rangeEnd,
@@ -165,15 +165,15 @@ td.day[data-outside="true"] ~ td.day[data-disabled="true"] button.dayButton,
 }

 .weekDay {
-  color: var(--Base-Text-Medium-contrast);
-  opacity: 1;
-  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);
-  text-transform: uppercase;
+  color: var(--Text-Tertiary);
+  font-family: var(--Title-Overline-sm-Font-family), var(--Title-Overline-sm-Font-fallback);
+  font-size: var(--Title-Overline-sm-Size);
+  font-style: normal;
+  font-weight: var(--Title-Overline-sm-Font-weight);
+  line-height: 1.5;
+  letter-spacing: var(--Title-Overline-sm-Letter-spacing);
+  text-transform: var(--Title-Overline-sm-Text-Transform);
+  text-decoration: none;
 }

@media screen and (min-width: 1367px) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx
@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -83,8 +82,8 @@ export default function JoinScandicFriendsCard({
        </Typography>
      </Checkbox>

-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -93,19 +92,18 @@ export default function JoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -28,6 +28,7 @@

 .terms {
  grid-area: terms;
+  color: var(--Text-Secondary);
 }

@media screen and (min-width: 768px) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/index.tsx
@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
@@ -97,8 +96,8 @@ export function PartnerSASJoinScandicFriendsCard({
        />
      </div>

-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -107,19 +106,18 @@ export function PartnerSASJoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/Multiroom/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -31,6 +31,7 @@

 .terms {
  grid-area: terms;
+  color: var(--Text-Secondary);
 }

@media screen and (min-width: 768px) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx
@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { useLazyPathname } from "@scandic-hotels/common/hooks/useLazyPathname"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import { LoginButton } from "@scandic-hotels/design-system/LoginButton"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trackEvent } from "@scandic-hotels/tracking/base"
 import { trackLoginClick } from "@scandic-hotels/tracking/navigation"
@@ -101,8 +100,8 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
        })}
      </LoginButton>

-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -111,19 +110,18 @@ export function JoinScandicFriendsCard({ name = "join" }: Props) {
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -34,6 +34,7 @@

 .terms {
  grid-area: terms;
+  color: var(--Text-Secondary);
 }

@media screen and (min-width: 768px) {
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/index.tsx
@@ -4,9 +4,8 @@ import { useIntl } from "react-intl"

 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
-import Link from "@scandic-hotels/design-system/OldDSLink"
+import { TextLink } from "@scandic-hotels/design-system/TextLink"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"

@@ -94,8 +93,8 @@ export function PartnerSASJoinScandicFriendsCard({
        />
      </div>

-      <div className={styles.terms}>
-        <Footnote color="uiTextPlaceholder">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.terms}>
          {intl.formatMessage(
            {
              id: "enterDetails.joinScandicFriendsCard.terms",
@@ -104,19 +103,18 @@ export function PartnerSASJoinScandicFriendsCard({
            },
            {
              termsAndConditionsLink: (str) => (
-                <Link
-                  textDecoration="underline"
-                  size="tiny"
+                <TextLink
+                  typography="Link/sm"
                  target="_blank"
                  href={routes.membershipTermsAndConditions[lang]}
                >
                  {str}
-                </Link>
+                </TextLink>
              ),
            }
          )}
-        </Footnote>
-      </div>
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
+++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/PartnerSASJoinScandicFriendsCard/partnerSASJoinScandicFriendsCard.module.css
@@ -31,6 +31,7 @@

 .terms {
  grid-area: terms;
+  color: var(--Text-Secondary);
 }

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

 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 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 { Typography } from "@scandic-hotels/design-system/Typography"
 import { getHotelRoom } from "@scandic-hotels/trpc/routers/booking/helpers"
@@ -47,20 +46,14 @@ export default function SelectedRoom() {
    <div className={styles.wrapper} data-available={room.isAvailable}>
      <div className={styles.main}>
        <div className={styles.headerContainer}>
-          <Footnote
-            className={styles.title}
-            asChild
-            textTransform="uppercase"
-            type="label"
-            color="uiTextHighContrast"
-          >
-            <h2>
+          <Typography variant="Title/Overline/sm">
+            <h2 className={styles.title}>
              {intl.formatMessage({
                id: "common.room",
                defaultMessage: "Room",
              })}
            </h2>
-          </Footnote>
+          </Typography>
          <Typography
            variant="Title/Subtitle/md"
            className={styles.description}
--- a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/hotelFilter.module.css
@@ -9,7 +9,7 @@
 }

 .facilities {
-  font-family: var(--typography-Body-Bold-fontFamily);
+  font-family: var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
  padding-bottom: var(--Space-x3);
 }

--- a/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
+++ b/packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
@@ -3,7 +3,6 @@
 import { useIntl } from "react-intl"

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

 import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
@@ -37,9 +36,11 @@ export default function SignupPromoDesktop({
      data-testid="signup-promo-desktop"
    >
      {badgeContent && <span className={styles.badge}>{badgeContent}</span>}
-      <Footnote color="burgundy">
-        <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          <Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
+        </p>
+      </Typography>
    </div>
  ) : null
 }
--- a/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx
+++ b/packages/booking-flow/lib/components/SignupPromo/Mobile.tsx
@@ -2,7 +2,7 @@

 import { useIntl } from "react-intl"

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

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

@@ -14,9 +14,11 @@ export default function SignupPromoMobile() {
      data-footer-spacing-signup
      className={styles.memberDiscountBannerMobile}
    >
-      <Footnote color="burgundy">
-        <Message />
-      </Footnote>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p>
+          <Message />
+        </p>
+      </Typography>
    </div>
  )
 }
--- a/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
+++ b/packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css
@@ -5,6 +5,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
+  color: var(--Text-Default);
 }

 .memberDiscountBannerDesktop {
@@ -16,10 +17,11 @@
  padding: var(--Space-x15) var(--Space-x2);
  gap: var(--Space-x2);
  position: relative;
+  color: var(--Text-Default);
 }

 .red {
-  color: var(--Text-Accent-Primary);
+  color: var(--Scandic-Brand-Scandic-Red);
 }

 .badge {
--- a/packages/design-system/lib/components/Footnote/footnote.module.css
+++ b/packages/design-system/lib/components/Footnote/footnote.module.css
@@ -1,82 +0,0 @@
-.footnote {
-  margin: 0;
-  padding: 0;
-}
-
-.footnoteFontOnly {
-  font-style: normal;
-}
-
-.bold {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: var(--typography-Footnote-Bold-fontWeight);
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-  text-decoration: var(--typography-Footnote-Bold-textDecoration);
-}
-
-.regular {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Regular-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-  text-decoration: var(--typography-Footnote-Regular-textDecoration);
-}
-
-.labels {
-  font-family: var(--typography-Footnote-Labels-fontFamily);
-  font-size: var(--typography-Footnote-Labels-fontSize);
-  font-weight: var(--typography-Footnote-Labels-fontWeight);
-  letter-spacing: var(--typography-Footnote-Labels-letterSpacing);
-  line-height: var(--typography-Footnote-Labels-lineHeight);
-  text-decoration: var(--typography-Footnote-Labels-textDecoration);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.center {
-  text-align: center;
-}
-
-.left {
-  text-align: left;
-}
-
-.black {
-  color: var(--Main-Grey-100);
-}
-
-.burgundy {
-  color: var(--Scandic-Brand-Burgundy);
-}
-
-.pale {
-  color: var(--Scandic-Brand-Pale-Peach);
-}
-
-.peach50 {
-  color: var(--Scandic-Peach-50);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-.uiTextPlaceholder {
-  color: var(--UI-Text-Placeholder);
-}
-
-.white {
-  color: var(--Main-Grey-White);
-}
-
-.baseTextDisabled {
-  color: var(--Base-Text-Disabled);
-}
--- a/packages/design-system/lib/components/Footnote/index.tsx
+++ b/packages/design-system/lib/components/Footnote/index.tsx
@@ -1,44 +0,0 @@
-import { Slot } from "@radix-ui/react-slot"
-
-import { footnoteFontOnlyVariants, footnoteVariants } from "./variants"
-
-import type { VariantProps } from "class-variance-authority"
-
-interface FootnoteProps
-  extends
-    Omit<React.HTMLAttributes<HTMLParagraphElement>, "color">,
-    VariantProps<typeof footnoteVariants> {
-  asChild?: boolean
-  fontOnly?: boolean
-}
-
-/**
- * @deprecated Use `@scandic-hotels/design-system/Typography` instead.
- */
-export default function Footnote({
-  asChild = false,
-  className = "",
-  color,
-  fontOnly = false,
-  textAlign,
-  textTransform,
-  type,
-  ...props
-}: FootnoteProps) {
-  const Comp = asChild ? Slot : "p"
-  const classNames = fontOnly
-    ? footnoteFontOnlyVariants({
-        className,
-        textAlign,
-        textTransform,
-        type,
-      })
-    : footnoteVariants({
-        className,
-        color,
-        textAlign,
-        textTransform,
-        type,
-      })
-  return <Comp className={classNames} {...props} />
-}
--- a/packages/design-system/lib/components/Footnote/variants.ts
+++ b/packages/design-system/lib/components/Footnote/variants.ts
@@ -1,61 +0,0 @@
-import { cva } from "class-variance-authority"
-
-import styles from "./footnote.module.css"
-
-const config = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-    },
-    color: {
-      black: styles.black,
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-      peach50: styles.peach50,
-      uiTextMediumContrast: styles.uiTextMediumContrast,
-      uiTextHighContrast: styles.uiTextHighContrast,
-      uiTextPlaceholder: styles.uiTextPlaceholder,
-      white: styles.white,
-      baseTextDisabled: styles.baseTextDisabled,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const footnoteVariants = cva(styles.footnote, config)
-
-const fontOnlyConfig = {
-  variants: {
-    type: {
-      regular: styles.regular,
-      bold: styles.bold,
-      label: styles.labels,
-    },
-    textAlign: {
-      center: styles.center,
-      left: styles.left,
-    },
-    textTransform: {
-      uppercase: styles.uppercase,
-    },
-  },
-  defaultVariants: {
-    type: "regular",
-  },
-} as const
-
-export const footnoteFontOnlyVariants = cva(
-  styles.footnoteFontOnly,
-  fontOnlyConfig
-)
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/hotelPriceCard.module.css
@@ -35,8 +35,3 @@
  justify-content: start;
  align-items: baseline;
 }
-
-.perNight {
-  font-weight: 400;
-  font-size: var(--typography-Caption-Regular-fontSize);
-}
--- a/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelPriceCard/index.tsx
@@ -1,8 +1,8 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"

-import { Divider } from "../../Divider"
 import { RateTypeEnum } from "@scandic-hotels/common/constants/rateType"
+import { Divider } from "../../Divider"
 import { Typography } from "../../Typography"
 import styles from "./hotelPriceCard.module.css"

@@ -117,14 +117,16 @@ export function HotelPriceCard({
            >
              <p>
                {productTypePrices.localPrice.currency}
-                {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                <span className={styles.perNight}>
-                  /
-                  {intl.formatMessage({
-                    id: "common.night",
-                    defaultMessage: "night",
-                  })}
-                </span>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <span>
+                    /
+                    {intl.formatMessage({
+                      id: "common.night",
+                      defaultMessage: "night",
+                    })}
+                  </span>
+                </Typography>
              </p>
            </Typography>
          </div>
--- a/packages/design-system/lib/components/OldDSLink/link.module.css
+++ b/packages/design-system/lib/components/OldDSLink/link.module.css
@@ -50,30 +50,15 @@
  gap: var(--Space-x05);
 }

-.breadcrumb {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-}
-
-.link.breadcrumb {
-  font-family: var(--typography-Footnote-Bold-fontFamily);
-  font-size: var(--typography-Footnote-Bold-fontSize);
-  font-weight: 500;
-  letter-spacing: var(--typography-Footnote-Bold-letterSpacing);
-  line-height: var(--typography-Footnote-Bold-lineHeight);
-}
-
 .myPageMobileDropdown {
  display: flex;
  align-items: center;
  color: var(--Scandic-Brand-Burgundy);
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  line-height: var(--typography-Body-Regular-lineHeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  line-height: 1.5;
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
  padding: var(--Space-x1);
  border-radius: var(--Corner-Radius-md);
  gap: var(--Space-x1);
@@ -97,11 +82,12 @@
 .shortcut {
  display: grid;
  align-items: center;
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: var(--typography-Body-Regular-fontWeight);
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
  gap: var(--Space-x2);
  grid-template-columns: 1fr auto;
  padding: var(--Space-x2) var(--Space-x3);
@@ -133,22 +119,13 @@
  line-height: 140%;
 }

-/* Tiny should be removed, it's not a variant of the Link*/
-.tiny {
-  font-family: var(--typography-Footnote-Regular-fontFamily);
-  font-size: var(--typography-Footnote-Regular-fontSize);
-  font-weight: var(--typography-Footnote-Regular-fontWeight);
-  letter-spacing: var(--typography-Footnote-Regular-letterSpacing);
-  line-height: var(--typography-Footnote-Regular-lineHeight);
-}
-
 .bold {
-  font-family: var(--typography-Body-Bold-fontFamily);
-  font-size: var(--typography-Body-Bold-fontSize);
-  font-weight: 500
-    /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight) */;
-  letter-spacing: var(--typography-Body-Bold-letterSpacing);
-  line-height: var(--typography-Body-Bold-lineHeight);
+  font-family:
+    var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
+  font-size: var(--Body-Paragraph-Size);
+  font-weight: var(--Body-Paragraph-Font-weight-2);
+  letter-spacing: var(--Body-Paragraph-Letter-spacing);
+  line-height: 1.5;
 }

 .menu {
--- a/packages/design-system/lib/components/OldDSLink/variants.ts
+++ b/packages/design-system/lib/components/OldDSLink/variants.ts
@@ -18,7 +18,6 @@ export const linkVariants = cva(styles.link, {
    size: {
      small: styles.small,
      large: styles.large,
-      tiny: styles.tiny,
      none: "",
    },
    textDecoration: {
@@ -29,7 +28,6 @@ export const linkVariants = cva(styles.link, {
    },
    variant: {
      icon: styles.icon,
-      breadcrumb: styles.breadcrumb,
      myPageMobileDropdown: styles.myPageMobileDropdown,
      navigation: styles.navigation,
      menu: styles.menu,
--- a/packages/design-system/lib/design-system-new-deprecated.css
+++ b/packages/design-system/lib/design-system-new-deprecated.css
@@ -1,131 +1,3 @@
-:root {
-  --typography-Body-Bold-fontFamily: "fira sans";
-  --typography-Body-Bold-fontSize: 16px;
-  --typography-Body-Bold-fontWeight: "medium";
-  --typography-Body-Bold-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Bold-lineHeight: 150%;
-  --typography-Body-Bold-textDecoration: "none";
-  --typography-Body-Regular-fontFamily: "fira sans";
-  --typography-Body-Regular-fontSize: 16px;
-  --typography-Body-Regular-fontWeight: "regular";
-  --typography-Body-Regular-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Regular-lineHeight: 150%;
-  --typography-Body-Regular-textDecoration: "none";
-  --typography-Body-Underline-fontFamily: "fira sans";
-  --typography-Body-Underline-fontSize: 16px;
-  --typography-Body-Underline-letterSpacing: 1.2000000476837158%;
-  --typography-Body-Underline-lineHeight: 150%;
-  --typography-Body-Underline-textDecoration: "underline";
-  --typography-Caption-Bold-fontFamily: "fira sans";
-  --typography-Caption-Bold-fontSize: 14px;
-  --typography-Caption-Bold-fontWeight: "medium";
-  --typography-Caption-Bold-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Bold-lineHeight: 139.9999976158142%;
-  --typography-Caption-Bold-textDecoration: "none";
-  --typography-Caption-Labels-fontFamily: "brandon text";
-  --typography-Caption-Labels-fontSize: 14px;
-  --typography-Caption-Labels-fontWeight: "bold";
-  --typography-Caption-Labels-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Labels-lineHeight: 150%;
-  --typography-Caption-Labels-textDecoration: "none";
-  --typography-Caption-Regular-fontFamily: "fira sans";
-  --typography-Caption-Regular-fontSize: 14px;
-  --typography-Caption-Regular-fontWeight: "regular";
-  --typography-Caption-Regular-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Regular-lineHeight: 139.9999976158142%;
-  --typography-Caption-Regular-textDecoration: "none";
-  --typography-Caption-Underline-fontFamily: "fira sans";
-  --typography-Caption-Underline-fontSize: 14px;
-  --typography-Caption-Underline-fontWeight: "medium";
-  --typography-Caption-Underline-letterSpacing: 1.399999976158142%;
-  --typography-Caption-Underline-lineHeight: 139.9999976158142%;
-  --typography-Caption-Underline-textDecoration: "underline";
-  --typography-Footnote-Bold-fontFamily: "fira sans";
-  --typography-Footnote-Bold-fontSize: 12px;
-  --typography-Footnote-Bold-fontWeight: "medium";
-  --typography-Footnote-Bold-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Bold-lineHeight: 150%;
-  --typography-Footnote-Bold-textDecoration: "none";
-  --typography-Footnote-Labels-fontFamily: "brandon text";
-  --typography-Footnote-Labels-fontSize: 12px;
-  --typography-Footnote-Labels-fontWeight: "bold";
-  --typography-Footnote-Labels-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Labels-lineHeight: 150%;
-  --typography-Footnote-Labels-textDecoration: "none";
-  --typography-Footnote-Regular-fontFamily: "fira sans";
-  --typography-Footnote-Regular-fontSize: 12px;
-  --typography-Footnote-Regular-fontWeight: "regular";
-  --typography-Footnote-Regular-letterSpacing: 1.399999976158142%;
-  --typography-Footnote-Regular-lineHeight: 150%;
-  --typography-Footnote-Regular-textDecoration: "none";
-  --typography-Preamble-Desktop-fontSize: 20px;
-  --typography-Preamble-fontFamily: "fira sans";
-  --typography-Preamble-fontWeight: "regular";
-  --typography-Preamble-letterSpacing: 1%;
-  --typography-Preamble-lineHeight: 139.9999976158142%;
-  --typography-Preamble-Mobile-fontSize: 18px;
-  --typography-Preamble-textDecoration: "none";
-  --typography-Script-1-Desktop-fontSize: 32px;
-  --typography-Script-1-fontFamily: "biro script plus";
-  --typography-Script-1-fontWeight: "regular";
-  --typography-Script-1-letterSpacing: 2%;
-  --typography-Script-1-lineHeight: 110.00000238418579%;
-  --typography-Script-1-Mobile-fontSize: 24px;
-  --typography-Script-2-Desktop-fontSize: 24px;
-  --typography-Script-2-fontWeight: "regular";
-  --typography-Script-2-letterSpacing: 2%;
-  --typography-Script-2-lineHeight: 110.00000238418579%;
-  --typography-Script-2-Mobile-fontSize: 20px;
-  --typography-Subtitle-1-Desktop-fontSize: 24px;
-  --typography-Subtitle-1-fontFamily: "fira sans";
-  --typography-Subtitle-1-letterSpacing: 1%;
-  --typography-Subtitle-1-lineHeight: 120.00000476837158%;
-  --typography-Subtitle-1-Mobile-fontSize: 20px;
-  --typography-Subtitle-2-Desktop-fontSize: 20px;
-  --typography-Subtitle-2-fontFamily: "fira sans";
-  --typography-Subtitle-2-fontSize: 20px;
-  --typography-Subtitle-2-fontWeight: "medium";
-  --typography-Subtitle-2-letterSpacing: 1%;
-  --typography-Subtitle-2-lineHeight: 120.00000476837158%;
-  --typography-Subtitle-2-Mobile-fontSize: 18px;
-  --typography-Title-1-Desktop-fontSize: 64px;
-  --typography-Title-1-fontFamily: "brandon text";
-  --typography-Title-1-fontSize: 64px;
-  --typography-Title-1-fontWeight: "black";
-  --typography-Title-1-letterSpacing: 0.25%;
-  --typography-Title-1-lineHeight: 110.00000238418579%;
-  --typography-Title-1-Mobile-fontSize: 48px;
-  --typography-Title-1-textDecoration: "none";
-  --typography-Title-2-Desktop-fontSize: 48px;
-  --typography-Title-2-fontFamily: "brandon text";
-  --typography-Title-2-fontWeight: "black";
-  --typography-Title-2-letterSpacing: 0.25%;
-  --typography-Title-2-lineHeight: 110.00000238418579%;
-  --typography-Title-2-Mobile-fontSize: 36px;
-  --typography-Title-2-textDecoration: "none";
-  --typography-Title-3-Desktop-fontSize: 36px;
-  --typography-Title-3-fontFamily: "brandon text";
-  --typography-Title-3-fontSize: 36px;
-  --typography-Title-3-fontWeight: "black";
-  --typography-Title-3-letterSpacing: 0.25%;
-  --typography-Title-3-lineHeight: 110.00000238418579%;
-  --typography-Title-3-Mobile-fontSize: 30px;
-  --typography-Title-3-textDecoration: "none";
-  --typography-Title-4-Desktop-fontSize: 28px;
-  --typography-Title-4-fontFamily: "brandon text";
-  --typography-Title-4-fontWeight: "bold";
-  --typography-Title-4-letterSpacing: 0.25%;
-  --typography-Title-4-lineHeight: 110.00000238418579%;
-  --typography-Title-4-Mobile-fontSize: 24px;
-  --typography-Title-4-textDecoration: "none";
-  --typography-Title-5-Desktop-fontSize: 24px;
-  --typography-Title-5-fontFamily: "brandon text";
-  --typography-Title-5-fontWeight: "black";
-  --typography-Title-5-letterSpacing: 0.25%;
-  --typography-Title-5-lineHeight: 110.00000238418579%;
-  --typography-Title-5-Mobile-fontSize: 20px;
-  --typography-Title-5-textDecoration: "none";
-}
 :root {
  --Base-Border-Hover: var(--Scandic-Peach-80);
  --Base-Border-Inverted: var(--UI-Opacity-White-100);
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -26,7 +26,6 @@
    "./Divider": "./lib/components/Divider/index.tsx",
    "./FacilityToIcon": "./lib/components/FacilityToIcon/index.tsx",
    "./FakeButton": "./lib/components/FakeButton/index.tsx",
-    "./Footnote": "./lib/components/Footnote/index.tsx",
    "./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx",
    "./Form/Country": "./lib/components/Form/Country/index.tsx",
    "./Form/Date": "./lib/components/Form/Date/index.tsx",