@pagopa/io-app-design-system 2.0.3 → 2.1.0-2

package/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap

@@ -83,10 +83,10 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
           {},
           {
             "color": "#0E0F13",
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillio",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           {
@@ -190,10 +190,10 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
           {},
           {
             "color": "#0E0F13",
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillio",
             "fontSize": 16,
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "600",
             "lineHeight": undefined,
           },
           [
@@ -311,10 +311,10 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
             {},
             {
               "color": "#FFFFFF",
-              "fontFamily": "Readex Pro",
+              "fontFamily": "Titillio",
               "fontSize": 16,
               "fontStyle": "normal",
-              "fontWeight": "400",
+              "fontWeight": "600",
               "lineHeight": 20,
             },
             {

package/src/components/layout/HeaderSecondLevel.tsx

@@ -303,8 +303,8 @@ export const HeaderSecondLevel = ({
             size={14}
             numberOfLines={1}
             accessible={false}
-            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
-            weight={isExperimental ? "Regular" : "Semibold"}
+            font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+            weight={"Semibold"}
             style={[
               { color: titleColor, textAlign: "center" },
               titleAnimatedStyle

package/src/components/listitems/ListItemRadioWithAmount.tsx

@@ -5,8 +5,7 @@ import { IOColors, useIOTheme } from "../../core";
 import { Icon } from "../icons";
 import { AnimatedRadio } from "../radio/AnimatedRadio";
 import { HSpacer, VSpacer } from "../spacer";
-import { H6, LabelSmallAlt } from "../typography";
-import { LabelSmall } from "../typography/LabelSmall";
+import { H6, LabelSmall } from "../typography";
 import { PressableListItemBase } from "./PressableListItemsBase";
 
 export type ListItemRadioWithAmountProps = {
@@ -56,9 +55,13 @@ export const ListItemRadioWithAmount = ({
       }}
     >
       <View style={{ flexShrink: 1 }}>
-        <LabelSmallAlt numberOfLines={1} color={theme["textBody-default"]}>
+        <LabelSmall
+          weight="Semibold"
+          numberOfLines={1}
+          color={theme["textBody-default"]}
+        >
           {label}
-        </LabelSmallAlt>
+        </LabelSmall>
         {isSuggested && (
           <>
             <VSpacer size={4} />

package/src/components/listitems/ListItemTransaction.tsx

@@ -24,7 +24,7 @@ import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
 import { IOIconSizeScale, Icon } from "../icons";
 import { IOLogoPaymentType } from "../logos";
 import { VSpacer } from "../spacer";
-import { H6, LabelSmall, LabelSmallAlt } from "../typography";
+import { H6, LabelSmall } from "../typography";
 import {
   PressableBaseProps,
   PressableListItemBase
@@ -192,12 +192,13 @@ export const ListItemTransaction = ({
           </View>
         )}
         <View style={IOStyles.flex}>
-          <LabelSmallAlt
+          <LabelSmall
             numberOfLines={numberOfLines}
             color={theme["textBody-default"]}
+            weight="Semibold"
           >
             {title}
-          </LabelSmallAlt>
+          </LabelSmall>
           <LabelSmall weight="Regular" color={theme["textBody-tertiary"]}>
             {subtitle}
           </LabelSmall>

package/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap

@@ -84,10 +84,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 20,
               },
             ]
@@ -176,10 +176,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
           },
           {
             "color": "#555C70",
-            "fontFamily": "Readex Pro",
+            "fontFamily": "Titillio",
             "fontSize": 12,
             "fontStyle": "normal",
-            "fontWeight": "400",
+            "fontWeight": "600",
             "lineHeight": 16,
           },
         ]
@@ -245,7 +245,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -266,10 +266,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -367,7 +367,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               {},
               {
                 "color": "#555C70",
-                "fontFamily": "Titillium Sans Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
@@ -388,10 +388,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -555,10 +555,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -784,10 +784,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -952,10 +952,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 21,
               },
             ]
@@ -1051,7 +1051,7 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
                 {},
                 {
                   "color": "#5517E3",
-                  "fontFamily": "Titillium Sans Pro",
+                  "fontFamily": "Titillio",
                   "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
@@ -1090,10 +1090,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -1340,10 +1340,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {},
               {
                 "color": "#0E0F13",
-                "fontFamily": "Readex Pro",
+                "fontFamily": "Titillio",
                 "fontSize": 14,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 21,
               },
             ]
@@ -1378,10 +1378,10 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
               {},
               {
                 "color": "#0B3EE3",
-                "fontFamily": "Readex Pro",
-                "fontSize": 16,
+                "fontFamily": "Titillio",
+                "fontSize": 18,
                 "fontStyle": "normal",
-                "fontWeight": "400",
+                "fontWeight": "600",
                 "lineHeight": 24,
               },
             ]
@@ -1967,7 +1967,7 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }
@@ -2089,7 +2089,7 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }
@@ -2256,7 +2256,7 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }
@@ -2485,7 +2485,7 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }
@@ -2650,7 +2650,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 16,
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 21,
@@ -2791,7 +2791,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }
@@ -3038,7 +3038,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
-                "fontSize": 16,
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "600",
                 "lineHeight": 21,
@@ -3079,7 +3079,7 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
                 "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
-                "lineHeight": 25,
+                "lineHeight": 24,
               },
             ]
           }

package/src/components/modules/ModuleAttachment.tsx

@@ -7,7 +7,7 @@ import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack, VStack } from "../stack";
-import { LabelSmallAlt } from "../typography";
+import { LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -66,12 +66,13 @@ const ModuleAttachmentContent = ({
         space={4}
         style={{ alignItems: "flex-start", flexShrink: 1, flexGrow: 1 }}
       >
-        <LabelSmallAlt
+        <LabelSmall
+          weight="Semibold"
           numberOfLines={2}
           color={theme["interactiveElem-default"]}
         >
           {title}
-        </LabelSmallAlt>
+        </LabelSmall>
         <Badge text={format.toUpperCase()} variant="default" />
       </VStack>
       <IconOrActivityIndicatorComponent />

package/src/components/modules/ModuleCredential.tsx

@@ -20,7 +20,7 @@ import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { LoadingSpinner } from "../loadingSpinner";
 import { HStack } from "../stack/Stack";
-import { LabelSmallAlt } from "../typography";
+import { LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -89,14 +89,15 @@ const ModuleCredential = (props: WithTestID<ModuleCredentialProps>) => {
         {/* Graphical assets */}
         {iconComponent ?? imageComponent}
 
-        <LabelSmallAlt
+        <LabelSmall
           color={theme["interactiveElem-default"]}
+          weight="Semibold"
           numberOfLines={2}
           lineBreakMode="middle"
           style={{ flexShrink: 1 }}
         >
           {label}
-        </LabelSmallAlt>
+        </LabelSmall>
       </HStack>
       <View style={IOStyles.row}>
         {badge ? (

package/src/components/modules/ModuleIDP.tsx

@@ -59,8 +59,8 @@ export const ModuleIDP = ({
       withLooseSpacing={withLooseSpacing}
     >
       <IOText
-        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
-        weight={isExperimental ? "Regular" : "Semibold"}
+        font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+        weight={"Semibold"}
         size={12}
         lineHeight={16}
         color={theme["textBody-tertiary"]}

package/src/components/modules/ModuleNavigation.tsx

@@ -18,7 +18,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { IOIcons, Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { Chip, LabelSmallAlt } from "../typography";
+import { Chip, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import {
   PressableModuleBase,
@@ -79,14 +79,15 @@ export const ModuleNavigation = (props: WithTestID<ModuleNavigationProps>) => {
           {iconComponent ?? imageComponent}
 
           <View style={{ flexShrink: 1 }}>
-            <LabelSmallAlt
+            <LabelSmall
               color={theme["interactiveElem-default"]}
+              weight="Semibold"
               numberOfLines={2}
               lineBreakMode="middle"
               style={{ flexShrink: 1 }}
             >
               {title}
-            </LabelSmallAlt>
+            </LabelSmall>
             {subtitle && (
               <Chip color={theme["textBody-tertiary"]}>{subtitle}</Chip>
             )}

package/src/components/modules/ModulePaymentNotice.tsx

@@ -7,7 +7,7 @@ import { WithTestID } from "../../utils/types";
 import { Badge } from "../badge";
 import { Icon } from "../icons";
 import { HStack, VStack } from "../stack";
-import { H6, LabelSmall, LabelSmallAlt } from "../typography";
+import { H6, LabelSmall } from "../typography";
 import { ModuleStatic } from "./ModuleStatic";
 import { PressableModuleBase } from "./PressableModuleBase";
 
@@ -98,12 +98,13 @@ const ModulePaymentNoticeContent = ({
           </LabelSmall>
         )}
         {subtitle && (
-          <LabelSmallAlt
+          <LabelSmall
             color={theme["interactiveElem-default"]}
             numberOfLines={2}
+            weight="Semibold"
           >
             {subtitle}
-          </LabelSmallAlt>
+          </LabelSmall>
         )}
       </View>
       <View style={styles.endBlock}>

package/src/components/searchInput/SearchInput.tsx

@@ -326,7 +326,7 @@ const styles = StyleSheet.create({
   placeholder: {
     ...makeFontStyleObject(
       inputFontSizePlaceholder,
-      "ReadexPro",
+      "Titillio",
       undefined,
       "Regular"
     )

package/src/components/tag/Tag.tsx

@@ -169,8 +169,8 @@ export const Tag = ({
       {variantProps && text && <View style={styles.spacer} />}
       {text && (
         <IOText
-          font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
-          weight={isExperimental ? "Regular" : "Semibold"}
+          font={isExperimental ? "Titillio" : "TitilliumSansPro"}
+          weight={"Semibold"}
           size={12}
           lineHeight={16}
           color={theme["textBody-tertiary"]}

package/src/components/textInput/TextInputBase.tsx

@@ -107,12 +107,7 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject(
-      inputLabelFontSize,
-      "ReadexPro",
-      undefined,
-      "Regular"
-    )
+    ...makeFontStyleObject(inputLabelFontSize, "Titillio", undefined, "Regular")
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {

package/src/components/typography/Body.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOTheme } from "../../core";
-import { IOFontWeight } from "../../utils/fonts";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
 import {
   IOText,
   IOTextProps,
@@ -16,6 +16,12 @@ type BodyStyleProps = TypographicStyleProps & {
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
 
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Regular";
+
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Regular";
+
 /**
  * `Body` typographic style
  */
@@ -25,6 +31,7 @@ export const Body = forwardRef<View, BodyStyleProps>(
     ref?: ForwardedRef<View>
   ) => {
     const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
     const defaultColor = asLink
       ? theme["interactiveElem-default"]
@@ -33,8 +40,12 @@ export const Body = forwardRef<View, BodyStyleProps>(
     const BodyProps: IOTextProps = {
       ...props,
       dynamicTypeRamp: "body", // iOS only
-      font: "TitilliumSansPro",
-      weight: customWeight ?? "Regular",
+      font: isExperimental ? fontName : legacyFontName,
+      weight: customWeight
+        ? customWeight
+        : isExperimental
+        ? fontWeight
+        : legacyFontWeight,
       size: bodyFontSize,
       lineHeight: bodyLineHeight,
       color: customColor ?? defaultColor,

package/src/components/typography/ButtonText.tsx

@@ -9,8 +9,8 @@ export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
 const defaultColor: IOColors = "white";
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";

package/src/components/typography/Caption.tsx

@@ -7,7 +7,7 @@ import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 const defaultColor: keyof IOTheme = "textBody-default";
 
 export const captionFontSize: IOFontSize = 12;
-const fontName: IOFontFamily = "ReadexPro";
+const fontName: IOFontFamily = "Titillio";
 const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153

package/src/components/typography/Chip.tsx

@@ -4,7 +4,7 @@ import { useIOExperimentalDesign, useIOTheme } from "../../core";
 import { IOFontFamily } from "../../utils/fonts";
 import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-const fontName: IOFontFamily = "ReadexPro";
+const fontName: IOFontFamily = "Titillio";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 /**

package/src/components/typography/H1.tsx

@@ -8,12 +8,10 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyH1FontSize: IOFontSize = 31;
-const legacyH1LineHeight = 43;
 const legacyFontName: IOFontFamily = "TitilliumSansPro";
 const legacyFontWeight: IOFontWeight = "Semibold";
 
@@ -30,8 +28,8 @@ export const H1 = forwardRef<View, TypographicStyleProps>(
       dynamicTypeRamp: "largeTitle", // iOS only
       font: isExperimental ? fontName : legacyFontName,
       weight: isExperimental ? fontWeight : legacyFontWeight,
-      size: isExperimental ? h1FontSize : legacyH1FontSize,
-      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight,
+      size: h1FontSize,
+      lineHeight: h1LineHeight,
       color: customColor ?? theme[defaultColor]
     };
 

package/src/components/typography/H2.tsx

@@ -8,8 +8,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 39;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyH2FontSize: IOFontSize = 28;

package/src/components/typography/H3.tsx

@@ -9,8 +9,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 /* Common typographic styles */
 export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";

package/src/components/typography/H4.tsx

@@ -8,8 +8,8 @@ const defaultColor: keyof IOTheme = "textHeading-default";
 
 export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const fontName: IOFontFamily = "ReadexPro";
-const fontWeight: IOFontWeight = "Regular";
+const fontName: IOFontFamily = "Titillio";
+const fontWeight: IOFontWeight = "Semibold";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const legacyFontName: IOFontFamily = "TitilliumSansPro";