From 408009bef32a8f9ab7329624fba3b428d6f672d4 Mon Sep 17 00:00:00 2001
From: Gianluca Spada <glc.spada@gmail.com>
Date: Wed, 18 Sep 2024 17:43:32 +0200
Subject: [PATCH 01/11] feat: [EUDIW-54] Add new pictograms for EUDIW app
 (#332)

## Short description
This PR adds three new pictograms created for the EUDIW app.

## List of changes proposed in this pull request
- Added `PictogramFingerprint`
- Added `PictogramSmile`
- Added `PictogramWalletDoc`

## How to test
Use the new pictograms in the `Pictogram` component or run the
storybook.
---
 scripts/pictograms_timestamp.txt              |  2 +-
 src/components/pictograms/Pictogram.tsx       | 13 ++++-
 .../pictograms/svg/PictogramFingerprint.tsx   | 50 +++++++++++++++++++
 .../pictograms/svg/PictogramSmile.tsx         | 22 ++++++++
 .../pictograms/svg/PictogramWalletDoc.tsx     | 44 ++++++++++++++++
 .../svg/originals/PictogramFingerprint.svg    |  1 +
 .../svg/originals/PictogramSmile.svg          |  1 +
 .../svg/originals/PictogramWalletDoc.svg      |  1 +
 src/core/IOColors.ts                          |  4 +-
 9 files changed, 134 insertions(+), 4 deletions(-)
 create mode 100644 src/components/pictograms/svg/PictogramFingerprint.tsx
 create mode 100644 src/components/pictograms/svg/PictogramSmile.tsx
 create mode 100644 src/components/pictograms/svg/PictogramWalletDoc.tsx
 create mode 100644 src/components/pictograms/svg/originals/PictogramFingerprint.svg
 create mode 100644 src/components/pictograms/svg/originals/PictogramSmile.svg
 create mode 100644 src/components/pictograms/svg/originals/PictogramWalletDoc.svg

diff --git a/scripts/pictograms_timestamp.txt b/scripts/pictograms_timestamp.txt
index 0c29636d..519f491c 100644
--- a/scripts/pictograms_timestamp.txt
+++ b/scripts/pictograms_timestamp.txt
@@ -1 +1 @@
-2024-07-10T13:20:00.647Z
\ No newline at end of file
+2024-09-13T09:57:37.653Z
\ No newline at end of file
diff --git a/src/components/pictograms/Pictogram.tsx b/src/components/pictograms/Pictogram.tsx
index a32a5ce2..9873ef95 100644
--- a/src/components/pictograms/Pictogram.tsx
+++ b/src/components/pictograms/Pictogram.tsx
@@ -95,6 +95,7 @@ import PictogramEmailDotCheck from "./svg/PictogramEmailDotCheck";
 import PictogramEmailDotNotif from "./svg/PictogramEmailDotNotif";
 import PictogramEnded from "./svg/PictogramEnded";
 import PictogramEventClose from "./svg/PictogramEventClose";
+import PictogramFingerprint from "./svg/PictogramFingerprint";
 import PictogramIdea from "./svg/PictogramIdea";
 import PictogramLostConnection from "./svg/PictogramLostConnection";
 import PictogramMessage from "./svg/PictogramMessage";
@@ -106,8 +107,10 @@ import PictogramQrCode from "./svg/PictogramQrCode";
 import PictogramReactivate from "./svg/PictogramReactivate";
 import PictogramSearchLens from "./svg/PictogramSearchLens";
 import PictogramSettings from "./svg/PictogramSettings";
+import PictogramSmile from "./svg/PictogramSmile";
 import PictogramStar from "./svg/PictogramStar";
 import PictogramTiming from "./svg/PictogramTiming";
+import PictogramWalletDoc from "./svg/PictogramWalletDoc";
 import { IOPictogramSizeScale, SVGPictogramProps } from "./types";
 
 export const IOPictograms = {
@@ -169,6 +172,9 @@ export const IOPictograms = {
   comunicationProblem: PictogramComunicationProblem,
   payments: PictogramPayments,
   workInProgress: PictogramWorkInProgress,
+  smile: PictogramSmile,
+  fingerprint: PictogramFingerprint,
+  walletDoc: PictogramWalletDoc,
   // Start Objects Pictogram
   ibanCard: PictogramObjIbanCard,
   followMessage: PictogramObjFollowMessage,
@@ -196,6 +202,7 @@ type PictogramPalette = {
   hands: ColorValue;
   main: ColorValue;
   secondary: ColorValue;
+  tertiary: ColorValue;
 };
 
 export const Pictogram = ({
@@ -223,7 +230,8 @@ export const Pictogram = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );
@@ -365,7 +373,8 @@ export const PictogramBleed = ({
     () => ({
       hands: IOColors[themeObj["pictogram-hands"]],
       main: IOColors[themeObj["pictogram-tint-main"]],
-      secondary: IOColors[themeObj["pictogram-tint-secondary"]]
+      secondary: IOColors[themeObj["pictogram-tint-secondary"]],
+      tertiary: IOColors[themeObj["pictogram-tint-tertiary"]]
     }),
     [themeObj]
   );
diff --git a/src/components/pictograms/svg/PictogramFingerprint.tsx b/src/components/pictograms/svg/PictogramFingerprint.tsx
new file mode 100644
index 00000000..9b71ea49
--- /dev/null
+++ b/src/components/pictograms/svg/PictogramFingerprint.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramFingerprint = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      d="M78.365 84.373a1.251 1.251 0 0 1 -2.233 -0.675L73.183 44.48a1.251 1.251 0 0 1 2.492 -0.191l2.949 39.22a1.2 1.2 0 0 1 -0.267 0.867z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M92.667 89.816a1.245 1.245 0 0 1 -1.6 0.307 1.253 1.253 0 0 1 -0.467 -1.707l20.696 -36.137a1.253 1.253 0 0 1 2.176 1.24L92.773 89.659a1.333 1.333 0 0 1 -0.1 0.149z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="m118.32 142.176 23.688 2.641 -25.564 45.852c-2.8 5.024 -9.291 6.591 -14.073 3.4L4.392 128.785A9.853 9.853 0 0 1 2.04 114.579l29.613 -38.553c3.241 -4.216 9.249 -5.107 13.565 -2l50.269 36.129 -5.416 3.632 -9.891 5.992 -6.541 4.14 -4.833 3.925v4.516l1.667 2.025 4.467 1.091 7.849 -3.116 11.248 -4.833 2.367 4.833 1.416 4.7 2.184 0.816 1.091 6.865 4.249 5.125 7.475 3.816s4.291 -0.433 4.949 -0.875c0.659 -0.443 2.724 -2.184 2.724 -2.184l0.984 -3.049 -1.417 -3.816z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="M107.304 190.344a5.16 5.16 0 0 1 -2.916 -0.908L8.941 123.244A5.067 5.067 0 0 1 6.8 119.82a5.067 5.067 0 0 1 1.008 -3.908L35.973 79.541a5.115 5.115 0 0 1 6.965 -1.067l47.844 33.237a1.253 1.253 0 0 1 0.316 1.741 1.253 1.253 0 0 1 -1.741 0.317L41.512 80.533a2.62 2.62 0 0 0 -3.565 0.549L9.783 117.437a2.613 2.613 0 0 0 -0.516 2c0.108 0.716 0.5 1.34 1.091 1.749l95.447 66.191a2.587 2.587 0 0 0 2.075 0.4 2.587 2.587 0 0 0 1.692 -1.265l24.372 -43.095a1.247 1.247 0 1 1 2.175 1.224l-24.372 43.095a5.12 5.12 0 0 1 -4.457 2.592z"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M73.235 137.051a6.72 6.72 0 0 1 -6.116 -3.875c-1.241 -2.616 -0.708 -5.649 1.341 -7.715 11.907 -11.983 40.504 -19.864 41.712 -20.189q0.136 -0.037 0.275 -0.051c38.72 -4.765 87.581 -21.713 88.072 -21.88l1.292 3.707c-0.492 0.176 -49.619 17.207 -88.739 22.056 -2.125 0.592 -29.055 8.291 -39.829 19.132 -1.057 1.067 -0.991 2.391 -0.573 3.267 0.2 0.424 1.04 1.773 2.857 1.607 8.157 -0.767 20.321 -4.573 31.947 -18.364l3.007 2.533C96 132.085 82.784 136.184 73.893 137.017a5.333 5.333 0 0 1 -0.667 0.033z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M99.231 139.567c-2.508 -0.832 -4.3 -2.408 -5.175 -4.54 -1.775 -4.3 0.641 -9.324 0.925 -9.883l3.507 1.767 -1.757 -0.884 1.759 0.876c-0.543 1.083 -1.733 4.391 -0.8 6.632 0.44 1.075 1.357 1.825 2.783 2.3l-1.241 3.724z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M114.813 155.84c-4.167 0 -9.04 -2.324 -13.115 -7.832 -2.859 -3.849 -3.741 -7.624 -2.625 -11.215 2.259 -7.257 12.067 -10.691 12.481 -10.832l1.276 3.716c-0.084 0.025 -8.349 2.933 -10.008 8.291 -0.724 2.349 -0.057 4.875 2.033 7.699 4.567 6.157 10.207 7.341 13.207 5.324 2.467 -1.667 2.567 -5.041 0.267 -8.815l3.359 -2.051c3.933 6.449 2.116 11.74 -1.425 14.124 -1.525 1.024 -3.392 1.583 -5.44 1.591z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M161.681 145.341c-24.88 0 -47.244 -2.808 -48.993 -3.032l0.5 -3.9c0.8 0.1 81.04 10.157 107.136 -7.565 12.224 -8.307 18.073 -24.005 14.899 -39.987 -3.283 -16.532 -15.132 -28.464 -31.696 -31.905l0.8 -3.849c18.164 3.775 31.153 16.856 34.745 34.987 3.483 17.54 -3.008 34.813 -16.54 44.004 -13.073 8.881 -38.02 11.248 -60.851 11.248"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M96.281 112.72c-0.533 -0.483 -5.157 -4.873 -4.324 -9.299 0.291 -1.557 1.391 -3.699 4.941 -5.073 8.832 -3.408 34.045 2.424 36.887 3.099l-0.908 3.825c-7.4 -1.759 -28.055 -5.783 -34.563 -3.259 -1.5 0.575 -2.333 1.292 -2.492 2.133 -0.341 1.8 1.951 4.608 3.116 5.683l-2.657 2.9z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramFingerprint;
diff --git a/src/components/pictograms/svg/PictogramSmile.tsx b/src/components/pictograms/svg/PictogramSmile.tsx
new file mode 100644
index 00000000..71de7c0d
--- /dev/null
+++ b/src/components/pictograms/svg/PictogramSmile.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramSmile = ({ size, colorValues, ...props }: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" {...props}>
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M118.373 48.416c-1.925 -0.96 -4.276 -0.203 -5.251 1.693l-3.5 6.799 -0.053 0.121c-8.031 18.679 -12.457 33.252 -14.88 43.209 -1.211 4.979 -1.92 8.801 -2.331 11.405 -0.204 1.303 -0.333 2.3 -0.413 2.984a40 40 0 0 0 -0.103 1.007l-0.005 0.064 -0.001 0.021v0.007l-0.001 0.004s0 0.003 3.896 0.287l-3.896 -0.284 -0.005 0.065 -0.003 0.067c-0.268 6.657 3.584 11.48 7.889 14.44 4.229 2.908 9.444 4.441 13.387 4.441 2.157 0 3.907 -1.723 3.907 -3.848s-1.749 -3.848 -3.907 -3.848c-2.232 0 -5.901 -0.984 -8.913 -3.053 -2.915 -2.004 -4.656 -4.597 -4.557 -7.753a24 24 0 0 1 0.077 -0.747c0.067 -0.581 0.183 -1.476 0.372 -2.676 0.376 -2.4 1.045 -6.016 2.207 -10.789 2.317 -9.523 6.595 -23.652 14.425 -41.88l3.379 -6.564a3.82 3.82 0 0 0 -1.72 -5.172"
+      fill={colorValues.hands}
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M151.184 153.164a3.813 3.813 0 0 1 0.888 5.371l-3.171 -2.248a330.667 330.667 0 0 1 3.168 2.252l-0.012 0.016 -0.024 0.032 -0.077 0.104 -0.273 0.355a45.333 45.333 0 0 1 -1.004 1.223 54.667 54.667 0 0 1 -3.749 3.956c-3.217 3.076 -7.952 6.873 -13.881 9.5 -5.969 2.644 -13.221 4.129 -21.285 2.413 -8.056 -1.715 -16.504 -6.535 -25.04 -15.765a3.807 3.807 0 0 1 0.259 -5.435 3.947 3.947 0 0 1 5.52 0.253c7.715 8.344 14.803 12.124 20.912 13.425 6.099 1.297 11.639 0.212 16.429 -1.909 4.829 -2.14 8.824 -5.308 11.644 -8.004a46.667 46.667 0 0 0 3.208 -3.384c0.363 -0.425 0.633 -0.761 0.808 -0.984q0.132 -0.167 0.189 -0.244l0.039 -0.051 0.003 -0.004m5.451 -0.872c-1.751 -1.24 -4.189 -0.851 -5.451 0.872z"
+      fill={colorValues.hands}
+    />
+  </Svg>
+);
+
+export default PictogramSmile;
diff --git a/src/components/pictograms/svg/PictogramWalletDoc.tsx b/src/components/pictograms/svg/PictogramWalletDoc.tsx
new file mode 100644
index 00000000..0f4bdcf0
--- /dev/null
+++ b/src/components/pictograms/svg/PictogramWalletDoc.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Svg, Path } from "react-native-svg";
+import { SVGPictogramProps } from "../types";
+
+const PictogramWalletDoc = ({
+  size,
+  colorValues,
+  ...props
+}: SVGPictogramProps) => (
+  <Svg width={size} height={size} viewBox="0 0 240 240" fill="none" {...props}>
+    <Path
+      d="M84.112 141.587H75.08a5.821 5.821 0 0 1 -5.821 -5.821V28.785a5.821 5.821 0 0 1 5.821 -5.821h157.832a5.82 5.82 0 0 1 5.82 5.821v105.511a5.82 5.82 0 0 1 -5.82 5.821H131.904l-3.093 -5.619 -7.291 -6.521 -8.288 -2.096 -8.067 0.22 -10.384 5.415 -10.661 10.053z"
+      fill={colorValues.tertiary}
+    />
+    <Path
+      d="m56.485 164.693 -3.625 3.48a0.48 0.48 0 0 0 -0.152 0.355 0.533 0.533 0 0 0 0.144 0.364l2.763 2.881a0.533 0.533 0 0 0 0.363 0.152c0.127 0 0.253 -0.051 0.356 -0.144l42.115 -40.392c1.333 -0.641 10.501 -4.807 19.017 -1.841 5.28 1.833 9.469 6.083 12.453 12.631 -0.06 1.267 -0.449 4.891 -2.957 6.235 -3.347 1.791 -10.207 -0.659 -18.807 -6.708a0.493 0.493 0 0 0 -0.38 -0.084 0.52 0.52 0 0 0 -0.329 0.211l-2.289 3.261a0.507 0.507 0 0 0 -0.085 0.38c0.027 0.135 0.101 0.253 0.212 0.329 10.831 7.62 18.704 9.919 24.069 7.012 5.761 -3.117 5.584 -10.899 5.576 -11.228a2.533 2.533 0 0 0 -0.212 -0.912c-3.573 -8.161 -8.837 -13.493 -15.637 -15.84 -11.38 -3.937 -22.785 2.053 -23.267 2.307a2.667 2.667 0 0 0 -0.549 0.396l-35.145 33.7 -18.324 -16.804a0.507 0.507 0 0 0 -0.719 0.035l-2.695 2.94a0.511 0.511 0 0 0 0.025 0.717l18.088 16.584z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M172.657 139.923a0.507 0.507 0 0 0 -0.464 -0.304l-4.191 0.041a0.507 0.507 0 0 0 -0.423 0.229 0.52 0.52 0 0 0 -0.041 0.481c0.971 2.239 1.985 6.048 1.165 7.527 -0.727 1.319 -2.383 1.767 -2.821 1.859h-0.304c-0.863 0 -1.699 0.025 -2.544 0.051 1.783 -3.835 0.929 -7.755 -0.515 -9.917a0.573 0.573 0 0 0 -0.44 -0.229l-4.131 0.119a0.493 0.493 0 0 0 -0.448 0.339 0.547 0.547 0 0 0 0.144 0.557c0.271 0.253 1.267 2.297 1.14 4.713 -0.101 1.969 -0.904 3.616 -2.373 4.9 -30.127 3.532 -50.184 24.019 -66.591 40.781 -9.267 9.469 -17.267 17.648 -25.049 20.697 -11.168 4.368 -26.891 -7.197 -38.127 -17.665 -12.621 -11.768 -22.447 -24.804 -22.54 -24.939a0.493 0.493 0 0 0 -0.339 -0.195 0.533 0.533 0 0 0 -0.38 0.093l-3.185 2.391a0.507 0.507 0 0 0 -0.101 0.709c1.395 1.859 34.411 45.528 59.503 45.528 2.475 0 4.824 -0.431 6.987 -1.276 8.777 -3.439 17.124 -11.971 26.807 -21.864 17.352 -17.733 38.947 -39.808 72.173 -39.808h0.491c0.16 0 0.244 0 0.363 -0.025 0.187 -0.025 4.512 -0.643 6.607 -4.368 1.555 -2.763 1.42 -6.277 -0.397 -10.443z"
+      fill={colorValues.hands}
+    />
+    <Path
+      d="M210.591 65.864a4.093 4.093 0 0 1 -3.184 -1.512l-14.929 -18.248c-2.069 -2.535 -2.331 -6.083 -0.649 -8.829a10.76 10.76 0 0 1 9.225 -5.169 10.8 10.8 0 0 1 9.537 5.736c1.825 -3.413 5.416 -5.736 9.539 -5.736a10.76 10.76 0 0 1 9.225 5.169c1.681 2.747 1.42 6.295 -0.651 8.829l-14.928 18.248a4.107 4.107 0 0 1 -3.185 1.512M201.053 34.64a8.213 8.213 0 0 0 -7.063 3.961c-1.124 1.825 -0.939 4.2 0.447 5.897l14.929 18.248c0.599 0.735 1.849 0.744 2.449 0l14.928 -18.248c1.395 -1.699 1.572 -4.072 0.448 -5.897a8.24 8.24 0 0 0 -7.063 -3.961 8.28 8.28 0 0 0 -8.271 8.271h-2.535a8.28 8.28 0 0 0 -8.271 -8.271"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M238.732 109.619H69.251a1.267 1.267 0 0 1 -1.267 -1.267 1.267 1.267 0 0 1 1.267 -1.268h169.481a1.267 1.267 0 1 1 0 2.533"
+      fill={colorValues.main}
+    />
+    <Path
+      d="M85.023 61.876h55.573a3.364 3.364 0 0 1 3.364 3.364v2.204a3.364 3.364 0 0 1 -3.364 3.364h-55.573a3.364 3.364 0 0 1 -3.364 -3.364V65.24a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+    <Path
+      d="M85.023 80.436h92.104a3.364 3.364 0 0 1 3.364 3.364v2.205a3.364 3.364 0 0 1 -3.364 3.364H85.023a3.364 3.364 0 0 1 -3.364 -3.364V83.8a3.364 3.364 0 0 1 3.364 -3.364Z"
+      stroke={colorValues.main}
+      strokeWidth={2.6666666666666665}
+    />
+  </Svg>
+);
+
+export default PictogramWalletDoc;
diff --git a/src/components/pictograms/svg/originals/PictogramFingerprint.svg b/src/components/pictograms/svg/originals/PictogramFingerprint.svg
new file mode 100644
index 00000000..f15d9581
--- /dev/null
+++ b/src/components/pictograms/svg/originals/PictogramFingerprint.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M78.365 84.373a1.251 1.251 0 0 1 -2.233 -0.675L73.183 44.48a1.251 1.251 0 0 1 2.492 -0.191l2.949 39.22a1.2 1.2 0 0 1 -0.267 0.867z" fill="#AAEEEF"/><path d="M92.667 89.816a1.245 1.245 0 0 1 -1.6 0.307 1.253 1.253 0 0 1 -0.467 -1.707l20.696 -36.137a1.253 1.253 0 0 1 2.176 1.24L92.773 89.659a1.333 1.333 0 0 1 -0.1 0.149z" fill="#AAEEEF"/><path d="m118.32 142.176 23.688 2.641 -25.564 45.852c-2.8 5.024 -9.291 6.591 -14.073 3.4L4.392 128.785A9.853 9.853 0 0 1 2.04 114.579l29.613 -38.553c3.241 -4.216 9.249 -5.107 13.565 -2l50.269 36.129 -5.416 3.632 -9.891 5.992 -6.541 4.14 -4.833 3.925v4.516l1.667 2.025 4.467 1.091 7.849 -3.116 11.248 -4.833 2.367 4.833 1.416 4.7 2.184 0.816 1.091 6.865 4.249 5.125 7.475 3.816s4.291 -0.433 4.949 -0.875c0.659 -0.443 2.724 -2.184 2.724 -2.184l0.984 -3.049 -1.417 -3.816z" fill="#3C65E9"/><path d="M107.304 190.344a5.16 5.16 0 0 1 -2.916 -0.908L8.941 123.244A5.067 5.067 0 0 1 6.8 119.82a5.067 5.067 0 0 1 1.008 -3.908L35.973 79.541a5.115 5.115 0 0 1 6.965 -1.067l47.844 33.237a1.253 1.253 0 0 1 0.316 1.741 1.253 1.253 0 0 1 -1.741 0.317L41.512 80.533a2.62 2.62 0 0 0 -3.565 0.549L9.783 117.437a2.613 2.613 0 0 0 -0.516 2c0.108 0.716 0.5 1.34 1.091 1.749l95.447 66.191a2.587 2.587 0 0 0 2.075 0.4 2.587 2.587 0 0 0 1.692 -1.265l24.372 -43.095a1.247 1.247 0 1 1 2.175 1.224l-24.372 43.095a5.12 5.12 0 0 1 -4.457 2.592z" fill="#AAEEEF"/><path d="M73.235 137.051a6.72 6.72 0 0 1 -6.116 -3.875c-1.241 -2.616 -0.708 -5.649 1.341 -7.715 11.907 -11.983 40.504 -19.864 41.712 -20.189q0.136 -0.037 0.275 -0.051c38.72 -4.765 87.581 -21.713 88.072 -21.88l1.292 3.707c-0.492 0.176 -49.619 17.207 -88.739 22.056 -2.125 0.592 -29.055 8.291 -39.829 19.132 -1.057 1.067 -0.991 2.391 -0.573 3.267 0.2 0.424 1.04 1.773 2.857 1.607 8.157 -0.767 20.321 -4.573 31.947 -18.364l3.007 2.533C96 132.085 82.784 136.184 73.893 137.017a5.333 5.333 0 0 1 -0.667 0.033z" fill="white"/><path d="M99.231 139.567c-2.508 -0.832 -4.3 -2.408 -5.175 -4.54 -1.775 -4.3 0.641 -9.324 0.925 -9.883l3.507 1.767 -1.757 -0.884 1.759 0.876c-0.543 1.083 -1.733 4.391 -0.8 6.632 0.44 1.075 1.357 1.825 2.783 2.3l-1.241 3.724z" fill="white"/><path d="M114.813 155.84c-4.167 0 -9.04 -2.324 -13.115 -7.832 -2.859 -3.849 -3.741 -7.624 -2.625 -11.215 2.259 -7.257 12.067 -10.691 12.481 -10.832l1.276 3.716c-0.084 0.025 -8.349 2.933 -10.008 8.291 -0.724 2.349 -0.057 4.875 2.033 7.699 4.567 6.157 10.207 7.341 13.207 5.324 2.467 -1.667 2.567 -5.041 0.267 -8.815l3.359 -2.051c3.933 6.449 2.116 11.74 -1.425 14.124 -1.525 1.024 -3.392 1.583 -5.44 1.591z" fill="white"/><path d="M161.681 145.341c-24.88 0 -47.244 -2.808 -48.993 -3.032l0.5 -3.9c0.8 0.1 81.04 10.157 107.136 -7.565 12.224 -8.307 18.073 -24.005 14.899 -39.987 -3.283 -16.532 -15.132 -28.464 -31.696 -31.905l0.8 -3.849c18.164 3.775 31.153 16.856 34.745 34.987 3.483 17.54 -3.008 34.813 -16.54 44.004 -13.073 8.881 -38.02 11.248 -60.851 11.248" fill="white"/><path d="M96.281 112.72c-0.533 -0.483 -5.157 -4.873 -4.324 -9.299 0.291 -1.557 1.391 -3.699 4.941 -5.073 8.832 -3.408 34.045 2.424 36.887 3.099l-0.908 3.825c-7.4 -1.759 -28.055 -5.783 -34.563 -3.259 -1.5 0.575 -2.333 1.292 -2.492 2.133 -0.341 1.8 1.951 4.608 3.116 5.683l-2.657 2.9z" fill="white"/></svg>
\ No newline at end of file
diff --git a/src/components/pictograms/svg/originals/PictogramSmile.svg b/src/components/pictograms/svg/originals/PictogramSmile.svg
new file mode 100644
index 00000000..e42df606
--- /dev/null
+++ b/src/components/pictograms/svg/originals/PictogramSmile.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M118.373 48.416c-1.925 -0.96 -4.276 -0.203 -5.251 1.693l-3.5 6.799 -0.053 0.121c-8.031 18.679 -12.457 33.252 -14.88 43.209 -1.211 4.979 -1.92 8.801 -2.331 11.405 -0.204 1.303 -0.333 2.3 -0.413 2.984a40 40 0 0 0 -0.103 1.007l-0.005 0.064 -0.001 0.021v0.007l-0.001 0.004s0 0.003 3.896 0.287l-3.896 -0.284 -0.005 0.065 -0.003 0.067c-0.268 6.657 3.584 11.48 7.889 14.44 4.229 2.908 9.444 4.441 13.387 4.441 2.157 0 3.907 -1.723 3.907 -3.848s-1.749 -3.848 -3.907 -3.848c-2.232 0 -5.901 -0.984 -8.913 -3.053 -2.915 -2.004 -4.656 -4.597 -4.557 -7.753a24 24 0 0 1 0.077 -0.747c0.067 -0.581 0.183 -1.476 0.372 -2.676 0.376 -2.4 1.045 -6.016 2.207 -10.789 2.317 -9.523 6.595 -23.652 14.425 -41.88l3.379 -6.564a3.82 3.82 0 0 0 -1.72 -5.172" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M151.184 153.164a3.813 3.813 0 0 1 0.888 5.371l-3.171 -2.248a330.667 330.667 0 0 1 3.168 2.252l-0.012 0.016 -0.024 0.032 -0.077 0.104 -0.273 0.355a45.333 45.333 0 0 1 -1.004 1.223 54.667 54.667 0 0 1 -3.749 3.956c-3.217 3.076 -7.952 6.873 -13.881 9.5 -5.969 2.644 -13.221 4.129 -21.285 2.413 -8.056 -1.715 -16.504 -6.535 -25.04 -15.765a3.807 3.807 0 0 1 0.259 -5.435 3.947 3.947 0 0 1 5.52 0.253c7.715 8.344 14.803 12.124 20.912 13.425 6.099 1.297 11.639 0.212 16.429 -1.909 4.829 -2.14 8.824 -5.308 11.644 -8.004a46.667 46.667 0 0 0 3.208 -3.384c0.363 -0.425 0.633 -0.761 0.808 -0.984q0.132 -0.167 0.189 -0.244l0.039 -0.051 0.003 -0.004m5.451 -0.872c-1.751 -1.24 -4.189 -0.851 -5.451 0.872z" fill="white"/></svg>
\ No newline at end of file
diff --git a/src/components/pictograms/svg/originals/PictogramWalletDoc.svg b/src/components/pictograms/svg/originals/PictogramWalletDoc.svg
new file mode 100644
index 00000000..d9235baa
--- /dev/null
+++ b/src/components/pictograms/svg/originals/PictogramWalletDoc.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M84.112 141.587H75.08a5.821 5.821 0 0 1 -5.821 -5.821V28.785a5.821 5.821 0 0 1 5.821 -5.821h157.832a5.82 5.82 0 0 1 5.82 5.821v105.511a5.82 5.82 0 0 1 -5.82 5.821H131.904l-3.093 -5.619 -7.291 -6.521 -8.288 -2.096 -8.067 0.22 -10.384 5.415 -10.661 10.053z" fill="#3C65E9"/><path d="m56.485 164.693 -3.625 3.48a0.48 0.48 0 0 0 -0.152 0.355 0.533 0.533 0 0 0 0.144 0.364l2.763 2.881a0.533 0.533 0 0 0 0.363 0.152c0.127 0 0.253 -0.051 0.356 -0.144l42.115 -40.392c1.333 -0.641 10.501 -4.807 19.017 -1.841 5.28 1.833 9.469 6.083 12.453 12.631 -0.06 1.267 -0.449 4.891 -2.957 6.235 -3.347 1.791 -10.207 -0.659 -18.807 -6.708a0.493 0.493 0 0 0 -0.38 -0.084 0.52 0.52 0 0 0 -0.329 0.211l-2.289 3.261a0.507 0.507 0 0 0 -0.085 0.38c0.027 0.135 0.101 0.253 0.212 0.329 10.831 7.62 18.704 9.919 24.069 7.012 5.761 -3.117 5.584 -10.899 5.576 -11.228a2.533 2.533 0 0 0 -0.212 -0.912c-3.573 -8.161 -8.837 -13.493 -15.637 -15.84 -11.38 -3.937 -22.785 2.053 -23.267 2.307a2.667 2.667 0 0 0 -0.549 0.396l-35.145 33.7 -18.324 -16.804a0.507 0.507 0 0 0 -0.719 0.035l-2.695 2.94a0.511 0.511 0 0 0 0.025 0.717l18.088 16.584z" fill="white"/><path d="M172.657 139.923a0.507 0.507 0 0 0 -0.464 -0.304l-4.191 0.041a0.507 0.507 0 0 0 -0.423 0.229 0.52 0.52 0 0 0 -0.041 0.481c0.971 2.239 1.985 6.048 1.165 7.527 -0.727 1.319 -2.383 1.767 -2.821 1.859h-0.304c-0.863 0 -1.699 0.025 -2.544 0.051 1.783 -3.835 0.929 -7.755 -0.515 -9.917a0.573 0.573 0 0 0 -0.44 -0.229l-4.131 0.119a0.493 0.493 0 0 0 -0.448 0.339 0.547 0.547 0 0 0 0.144 0.557c0.271 0.253 1.267 2.297 1.14 4.713 -0.101 1.969 -0.904 3.616 -2.373 4.9 -30.127 3.532 -50.184 24.019 -66.591 40.781 -9.267 9.469 -17.267 17.648 -25.049 20.697 -11.168 4.368 -26.891 -7.197 -38.127 -17.665 -12.621 -11.768 -22.447 -24.804 -22.54 -24.939a0.493 0.493 0 0 0 -0.339 -0.195 0.533 0.533 0 0 0 -0.38 0.093l-3.185 2.391a0.507 0.507 0 0 0 -0.101 0.709c1.395 1.859 34.411 45.528 59.503 45.528 2.475 0 4.824 -0.431 6.987 -1.276 8.777 -3.439 17.124 -11.971 26.807 -21.864 17.352 -17.733 38.947 -39.808 72.173 -39.808h0.491c0.16 0 0.244 0 0.363 -0.025 0.187 -0.025 4.512 -0.643 6.607 -4.368 1.555 -2.763 1.42 -6.277 -0.397 -10.443z" fill="white"/><path d="M210.591 65.864a4.093 4.093 0 0 1 -3.184 -1.512l-14.929 -18.248c-2.069 -2.535 -2.331 -6.083 -0.649 -8.829a10.76 10.76 0 0 1 9.225 -5.169 10.8 10.8 0 0 1 9.537 5.736c1.825 -3.413 5.416 -5.736 9.539 -5.736a10.76 10.76 0 0 1 9.225 5.169c1.681 2.747 1.42 6.295 -0.651 8.829l-14.928 18.248a4.107 4.107 0 0 1 -3.185 1.512M201.053 34.64a8.213 8.213 0 0 0 -7.063 3.961c-1.124 1.825 -0.939 4.2 0.447 5.897l14.929 18.248c0.599 0.735 1.849 0.744 2.449 0l14.928 -18.248c1.395 -1.699 1.572 -4.072 0.448 -5.897a8.24 8.24 0 0 0 -7.063 -3.961 8.28 8.28 0 0 0 -8.271 8.271h-2.535a8.28 8.28 0 0 0 -8.271 -8.271" fill="#AAEEEF"/><path d="M238.732 109.619H69.251a1.267 1.267 0 0 1 -1.267 -1.267 1.267 1.267 0 0 1 1.267 -1.268h169.481a1.267 1.267 0 1 1 0 2.533" fill="#AAEEEF"/><path d="M85.023 61.876h55.573a3.364 3.364 0 0 1 3.364 3.364v2.204a3.364 3.364 0 0 1 -3.364 3.364h-55.573a3.364 3.364 0 0 1 -3.364 -3.364V65.24a3.364 3.364 0 0 1 3.364 -3.364Z" stroke="#AAEEEF" stroke-width="2.6666666666666665"/><path d="M85.023 80.436h92.104a3.364 3.364 0 0 1 3.364 3.364v2.205a3.364 3.364 0 0 1 -3.364 3.364H85.023a3.364 3.364 0 0 1 -3.364 -3.364V83.8a3.364 3.364 0 0 1 3.364 -3.364Z" stroke="#AAEEEF" stroke-width="2.6666666666666665"/></svg>
\ No newline at end of file
diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts
index 1ee94cd1..a2f8e7f9 100644
--- a/src/core/IOColors.ts
+++ b/src/core/IOColors.ts
@@ -283,6 +283,7 @@ export type IOTheme = {
   "pictogram-hands": IOColors;
   "pictogram-tint-main": IOColors;
   "pictogram-tint-secondary": IOColors;
+  "pictogram-tint-tertiary": IOColors;
 };
 
 export const IOThemeLight: IOTheme = {
@@ -311,7 +312,8 @@ export const IOThemeLight: IOTheme = {
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
-  "pictogram-tint-secondary": "turquoise-500"
+  "pictogram-tint-secondary": "turquoise-500",
+  "pictogram-tint-tertiary": "blueIO-400"
 };
 
 export const IOThemeLightLegacy: IOTheme = {

From 492b8a67d452c93b47b6a3ca23a1dd3d191b267f Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Thu, 19 Sep 2024 11:30:49 +0200
Subject: [PATCH 02/11] chore: release 1.46.2

---
 CHANGELOG.md | 20 ++++++++++++++++++--
 package.json |  2 +-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f041f469..78a7b2e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.46.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v1.46.1)
+#### [v1.46.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.46.2)
 
+- feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
+
+#### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
+
+> 18 September 2024
+
+- feat: [PE-680] Change purple badge colors [`#333`](https://github.com/pagopa/io-app-design-system/pull/333)
 - feat(Icons): add iconCieLetter [`#331`](https://github.com/pagopa/io-app-design-system/pull/331)
+- chore: release 1.46.1 [`de72bac`](https://github.com/pagopa/io-app-design-system/commit/de72bac13e4d20c30553609586898d87ad7dfa67)
+- chore: release 2.0.1 [`6cdf523`](https://github.com/pagopa/io-app-design-system/commit/6cdf523a9f723b50d1fae1b63b1a3e821db5d226)
 
 ### [v2.0.0](https://github.com/pagopa/io-app-design-system/compare/v2.0.0-1...v2.0.0)
 
@@ -33,13 +42,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop  [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
 - chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)
 
-#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.0...v2.0.0-0)
+#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v2.0.0-0)
 
 > 31 July 2024
 
 - [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
 - chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)
 
+#### [v1.46.1](https://github.com/pagopa/io-app-design-system/compare/v1.46.0...v1.46.1)
+
+> 11 September 2024
+
+- feat(Icons): add iconCieLetter [`#331`](https://github.com/pagopa/io-app-design-system/pull/331)
+- chore: release 1.46.1 [`de72bac`](https://github.com/pagopa/io-app-design-system/commit/de72bac13e4d20c30553609586898d87ad7dfa67)
+
 #### [v1.46.0](https://github.com/pagopa/io-app-design-system/compare/v1.45.0...v1.46.0)
 
 > 3 September 2024
diff --git a/package.json b/package.json
index 1bfbe71d..bae903e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.46.1",
+  "version": "1.46.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

From ef084b24f9a7231f1a1abe3e1f2e2a61a81b01dc Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Wed, 9 Oct 2024 10:36:09 +0200
Subject: [PATCH 03/11] [IOAPPX-353] Add the new `FooterActions` (from
 `io-app`) and `FooterActionsInline` (#316)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Short description
This PR adds the new `FooterActions` (migrated from `io-app`) and the
new `FooterActionsInline`, which replaces the legacy
`FooterWithButtons`. So if you want to add actions to the footer you
have several options:
- **If you need a single button**, just use `FooterActions` with the
`SingleButton` type
- **If you need two buttons**, depending on your needs:
  - use `FooterActions` as recommended in the official guidelines
- for special reasons (e.g. you need to save space), use
`FooterActionsInline` to render both buttons on the same line
- **If you need three buttons**, just use `FooterActions` with the
`ThreeButtons` type

Both `FooterActions` and `FooterActionsInline` come with two hooks,
`useFooterActionsMeasurements` and `useFooterActionsInlineMeasurements`
respectively, to get the `safeBottomAreaHeight` value to apply to the
`ScrollView`'s `paddingBottom`

## List of changes proposed in this pull request
- Add the new `FooterActions` and `FooterActionsInline` and relative
hooks
- Add the new demo screens to the example app
- Add the new `IOSpacing` object with the common spacing constants
- Update the deprecation note to `FooterWithButtons`
- Add the deprecation note to `BlockButtons`

### Preview


https://github.com/user-attachments/assets/027914cf-3427-4bed-9a0e-9f208fd66c49



## How to test
1. Launch the example app
2. Go to the `FooterActions…` screens

---------

Co-authored-by: Cristiano Tofani <cri.tofani@gmail.com>
---
 example/src/navigation/navigator.tsx          |  65 ++++-
 example/src/navigation/params.ts              |   9 +-
 example/src/navigation/routes.ts              |  28 +-
 ....tsx => FooterActionsEmptyStateScreen.tsx} |  45 ++-
 .../src/pages/FooterActionsInlineNotFixed.tsx |  55 ++++
 .../src/pages/FooterActionsInlineScreen.tsx   |  60 ++++
 example/src/pages/FooterActionsNotFixed.tsx   |  62 +++++
 example/src/pages/FooterActionsScreen.tsx     |  75 +++++
 .../src/pages/FooterActionsStickyScreen.tsx   | 167 +++++++++++
 example/src/pages/FooterWithButton.tsx        |  66 -----
 src/components/layout/BlockButtons.tsx        |   2 +-
 src/components/layout/FooterActions.tsx       | 260 ++++++++++++++++++
 src/components/layout/FooterActionsInline.tsx | 137 +++++++++
 src/components/layout/FooterWithButtons.tsx   |   4 +-
 src/components/layout/HeaderFirstLevel.tsx    |  14 +-
 src/components/layout/HeaderSecondLevel.tsx   |  14 +-
 src/components/layout/common.ts               |   2 +-
 src/components/layout/hooks/index.ts          |   2 +
 .../layout/hooks/useBottomMargins.ts          |  30 ++
 .../useFooterActionsInlineMeasurements.ts     |  38 +++
 .../hooks/useFooterActionsMeasurements.ts     |  35 +++
 src/components/layout/index.tsx               |   3 +
 src/core/IOColors.ts                          |   3 +
 src/core/IOSpacing.ts                         |  14 +
 src/core/IOStyleVariables.ts                  |   6 -
 src/core/index.ts                             |   1 -
 26 files changed, 1061 insertions(+), 136 deletions(-)
 rename example/src/pages/{FooterWithButtonEmptyState.tsx => FooterActionsEmptyStateScreen.tsx} (58%)
 create mode 100644 example/src/pages/FooterActionsInlineNotFixed.tsx
 create mode 100644 example/src/pages/FooterActionsInlineScreen.tsx
 create mode 100644 example/src/pages/FooterActionsNotFixed.tsx
 create mode 100644 example/src/pages/FooterActionsScreen.tsx
 create mode 100644 example/src/pages/FooterActionsStickyScreen.tsx
 delete mode 100644 example/src/pages/FooterWithButton.tsx
 create mode 100644 src/components/layout/FooterActions.tsx
 create mode 100644 src/components/layout/FooterActionsInline.tsx
 create mode 100644 src/components/layout/hooks/index.ts
 create mode 100644 src/components/layout/hooks/useBottomMargins.ts
 create mode 100644 src/components/layout/hooks/useFooterActionsInlineMeasurements.ts
 create mode 100644 src/components/layout/hooks/useFooterActionsMeasurements.ts
 delete mode 100644 src/core/IOStyleVariables.ts

diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 5e1763ea..045af8f1 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -20,12 +20,19 @@ import { DSAlert } from "../pages/Alert";
 import { Badges } from "../pages/Badges";
 import { Buttons } from "../pages/Buttons";
 import { Colors } from "../pages/Colors";
-import { FooterWithButton } from "../pages/FooterWithButton";
-import { FooterWithButtonEmptyState } from "../pages/FooterWithButtonEmptyState";
+import { FooterActionsEmptyStateScreen } from "../pages/FooterActionsEmptyStateScreen";
+import { FooterActionsInlineNotFixed } from "../pages/FooterActionsInlineNotFixed";
+import { FooterActionsInlineScreen } from "../pages/FooterActionsInlineScreen";
+import { FooterActionsNotFixed } from "../pages/FooterActionsNotFixed";
+import { FooterActionsScreen } from "../pages/FooterActionsScreen";
+import { FooterActionsStickyScreen } from "../pages/FooterActionsStickyScreen";
 import { ForceScrollDownViewPage } from "../pages/ForceScrollDownViewPage";
 import { GradientScroll } from "../pages/GradientScroll";
 import { HeaderFirstLevelScreen } from "../pages/HeaderFirstLevel";
 import { HeaderSecondLevelScreen } from "../pages/HeaderSecondLevel";
+import { HeaderSecondLevelCustomBackground } from "../pages/HeaderSecondLevelCustomBackground";
+import { HeaderSecondLevelScreenDiscreteTransition } from "../pages/HeaderSecondLevelDiscreteTransition";
+import { HeaderSecondLevelScreenDiscreteTransitionCustomBg } from "../pages/HeaderSecondLevelScreenDiscreteTransitionCustomBg";
 import { HeaderSecondLevelWithStepper } from "../pages/HeaderSecondLevelWithStepper";
 import { Icons } from "../pages/Icons";
 import { ImageScreen } from "../pages/Image";
@@ -39,6 +46,7 @@ import { NumberPadScreen } from "../pages/NumberPad";
 import { OTPInputScreen } from "../pages/OTPInput";
 import { Pictograms } from "../pages/Pictograms";
 import { Sandbox } from "../pages/Sandbox";
+import { SearchCustom } from "../pages/SearchCustom";
 import { SearchNative } from "../pages/SearchNative";
 import { Selection } from "../pages/Selection";
 import { StaticHeaderSecondLevelScreen } from "../pages/StaticHeaderSecondLevel";
@@ -47,10 +55,6 @@ import { TabNavigationScreen } from "../pages/TabNavigation";
 import { TextInputs } from "../pages/TextInputs";
 import { Toasts } from "../pages/Toasts";
 import { Typography } from "../pages/Typography";
-import { SearchCustom } from "../pages/SearchCustom";
-import { HeaderSecondLevelCustomBackground } from "../pages/HeaderSecondLevelCustomBackground";
-import { HeaderSecondLevelScreenDiscreteTransition } from "../pages/HeaderSecondLevelDiscreteTransition";
-import { HeaderSecondLevelScreenDiscreteTransitionCustomBg } from "../pages/HeaderSecondLevelScreenDiscreteTransitionCustomBg";
 import { AppParamsList } from "./params";
 import APP_ROUTES from "./routes";
 
@@ -275,20 +279,57 @@ const AppNavigator = () => {
           />
 
           <Stack.Screen
-            name={APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.route}
-            component={FooterWithButton}
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS.route}
+            component={FooterActionsScreen}
             options={{
-              headerTitle: APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.title,
+              headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS.title,
+              headerBackTitleVisible: false
+            }}
+          />
+
+          <Stack.Screen
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.route}
+            component={FooterActionsStickyScreen}
+            options={{
+              headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.title,
+              headerBackTitleVisible: false
+            }}
+          />
+
+          <Stack.Screen
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.route}
+            component={FooterActionsNotFixed}
+            options={{
+              headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.title,
+              headerBackTitleVisible: false
+            }}
+          />
+
+          <Stack.Screen
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.route}
+            component={FooterActionsInlineScreen}
+            options={{
+              headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.title,
+              headerBackTitleVisible: false
+            }}
+          />
+
+          <Stack.Screen
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED.route}
+            component={FooterActionsInlineNotFixed}
+            options={{
+              headerTitle:
+                APP_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED.title,
               headerBackTitleVisible: false
             }}
           />
 
           <Stack.Screen
-            name={APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON_EMPTY.route}
-            component={FooterWithButtonEmptyState}
+            name={APP_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.route}
+            component={FooterActionsEmptyStateScreen}
             options={{
               headerShown: false,
-              headerTitle: APP_ROUTES.SCREENS.FOOTER_WITH_BUTTON.title,
+              headerTitle: APP_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.title,
               headerBackTitleVisible: false
             }}
           />
diff --git a/example/src/navigation/params.ts b/example/src/navigation/params.ts
index fa170c55..783be116 100644
--- a/example/src/navigation/params.ts
+++ b/example/src/navigation/params.ts
@@ -36,9 +36,14 @@ export type AppParamsList = {
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STEPPER
     .route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_WITH_BUTTON.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_INLINE_NOT_FIXED
+    .route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_STICKY.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_NOT_FIXED.route]: undefined;
+  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_ACTIONS_EMPTY_STATE.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.GRADIENT_SCROLLVIEW.route]: undefined;
-  [DESIGN_SYSTEM_ROUTES.SCREENS.FOOTER_WITH_BUTTON_EMPTY.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.COMPONENTS.TOASTS.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL.route]: undefined;
   [DESIGN_SYSTEM_ROUTES.SCREENS.FULL_SCREEN_MODAL_2.route]: undefined;
diff --git a/example/src/navigation/routes.ts b/example/src/navigation/routes.ts
index 0c473b7d..670f13de 100644
--- a/example/src/navigation/routes.ts
+++ b/example/src/navigation/routes.ts
@@ -78,13 +78,29 @@ const APP_ROUTES = {
       title: "Full screen modal (second example)"
     },
     SEARCH: { route: "DESIGN_SYSTEM_SEARCHBAR", title: "Search" },
-    FOOTER_WITH_BUTTON_EMPTY: {
-      route: "DESIGN_SYSTEM_FOOTER_WITH_BUTTON_EMPTY",
-      title: "Footer with button (Empty state)"
+    FOOTER_ACTIONS: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS",
+      title: "Footer actions"
     },
-    FOOTER_WITH_BUTTON: {
-      route: "DESIGN_SYSTEM_FOOTER_WITH_BUTTON",
-      title: "Footer with button"
+    FOOTER_ACTIONS_STICKY: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS_STICKY",
+      title: "Footer actions (sticky)"
+    },
+    FOOTER_ACTIONS_NOT_FIXED: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS_NOT_FIXED",
+      title: "Footer actions (not fixed)"
+    },
+    FOOTER_ACTIONS_EMPTY_STATE: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS_EMPTY_STATE",
+      title: "Footer actions (Empty state)"
+    },
+    FOOTER_ACTIONS_INLINE: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS_INLINE",
+      title: "Footer actions (inline)"
+    },
+    FOOTER_ACTIONS_INLINE_NOT_FIXED: {
+      route: "DESIGN_SYSTEM_FOOTER_ACTIONS_INLINE_NOT_FIXED",
+      title: "Footer actions (inline, not fixed)"
     },
     GRADIENT_SCROLLVIEW: {
       route: "DESIGN_SYSTEM_GRADIENT_SCROLLVIEW",
diff --git a/example/src/pages/FooterWithButtonEmptyState.tsx b/example/src/pages/FooterActionsEmptyStateScreen.tsx
similarity index 58%
rename from example/src/pages/FooterWithButtonEmptyState.tsx
rename to example/src/pages/FooterActionsEmptyStateScreen.tsx
index b76a72bb..aa56435d 100644
--- a/example/src/pages/FooterWithButtonEmptyState.tsx
+++ b/example/src/pages/FooterActionsEmptyStateScreen.tsx
@@ -1,21 +1,22 @@
 import {
   Body,
   ContentWrapper,
-  FooterWithButtons,
+  FooterActions,
   H2,
   IOColors,
-  VSpacer
+  VSpacer,
+  useFooterActionsMeasurements
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
-import { useState } from "react";
 import { Alert, Platform, ScrollView, View } from "react-native";
 
 /**
  * This Screen is used to test components in isolation while developing.
  * @returns a screen with a flexed view where you can test components
  */
-export const FooterWithButtonEmptyState = () => {
-  const [footerHeight, setFooterHeight] = useState(0);
+export const FooterActionsEmptyStateScreen = () => {
+  const { footerActionsMeasurements, handleFooterActionsMeasurements } =
+    useFooterActionsMeasurements();
 
   return (
     <View
@@ -27,7 +28,12 @@ export const FooterWithButtonEmptyState = () => {
       {/* This extra View is mandatory when you have a fixed
         bottom component to get a consistent behavior
         across platforms */}
-      <View style={{ flexGrow: 1, paddingBottom: footerHeight }}>
+      <View
+        style={{
+          flexGrow: 1,
+          paddingBottom: footerActionsMeasurements.safeBottomAreaHeight
+        }}
+      >
         <ScrollView
           centerContent
           contentContainerStyle={[
@@ -49,28 +55,15 @@ export const FooterWithButtonEmptyState = () => {
           </ContentWrapper>
         </ScrollView>
       </View>
-      <FooterWithButtons
-        onLayoutChange={setFooterHeight}
-        sticky={true}
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            color: "primary",
-            accessibilityLabel: "primary button",
-            onPress: () => Alert.alert("Button pressed"),
-            label: "Primary button"
+      <FooterActions
+        onMeasure={handleFooterActionsMeasurements}
+        actions={{
+          type: "SingleButton",
+          primary: {
+            label: "Pay button",
+            onPress: () => Alert.alert("Button pressed")
           }
         }}
-        // secondary={{
-        //   type: "Outline",
-        //   buttonProps: {
-        //     color: "primary",
-        //     accessibilityLabel: "secondary button",
-        //     onPress: () => Alert.alert("Button pressed"),
-        //     label: "Secondary button"
-        //   }
-        // }}
-        type="SingleButton"
       />
     </View>
   );
diff --git a/example/src/pages/FooterActionsInlineNotFixed.tsx b/example/src/pages/FooterActionsInlineNotFixed.tsx
new file mode 100644
index 00000000..b3f847c3
--- /dev/null
+++ b/example/src/pages/FooterActionsInlineNotFixed.tsx
@@ -0,0 +1,55 @@
+import {
+  FooterActionsInline,
+  IOColors,
+  VSpacer,
+  useIOTheme
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { Alert, ScrollView, StyleSheet, Text, View } from "react-native";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+export const FooterActionsInlineNotFixed = () => {
+  const theme = useIOTheme();
+
+  return (
+    <ScrollView>
+      {[...Array(9)].map((_el, i) => (
+        <React.Fragment key={`view-${i}`}>
+          <View
+            style={[
+              styles.block,
+              { backgroundColor: IOColors[theme["appBackground-secondary"]] }
+            ]}
+          >
+            <Text style={{ color: IOColors[theme["textBody-tertiary"]] }}>
+              {`Block ${i}`}
+            </Text>
+          </View>
+          <VSpacer size={4} />
+        </React.Fragment>
+      ))}
+      <FooterActionsInline
+        fixed={false}
+        startAction={{
+          label: "Secondary",
+          onPress: onButtonPress
+        }}
+        endAction={{
+          label: "Primary",
+          onPress: onButtonPress
+        }}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 16 / 10
+  }
+});
diff --git a/example/src/pages/FooterActionsInlineScreen.tsx b/example/src/pages/FooterActionsInlineScreen.tsx
new file mode 100644
index 00000000..77fdd220
--- /dev/null
+++ b/example/src/pages/FooterActionsInlineScreen.tsx
@@ -0,0 +1,60 @@
+import {
+  Body,
+  ButtonOutline,
+  ContentWrapper,
+  FooterActionsInline,
+  H1,
+  useFooterActionsInlineMeasurements
+} from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { Alert, ScrollView, View } from "react-native";
+
+/**
+ * This Screen is used to test components in isolation while developing.
+ * @returns a screen with a flexed view where you can test components
+ */
+export const FooterActionsInlineScreen = () => {
+  const {
+    footerActionsInlineMeasurements,
+    handleFooterActionsInlineMeasurements
+  } = useFooterActionsInlineMeasurements();
+
+  return (
+    <View>
+      <ScrollView
+        contentContainerStyle={{
+          paddingBottom: footerActionsInlineMeasurements.safeBottomAreaHeight
+        }}
+      >
+        <ContentWrapper>
+          <H1>Footer Actions (inline)</H1>
+          {[...Array(50)].map((_el, i) => (
+            <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body>
+          ))}
+          <ButtonOutline
+            color="primary"
+            accessibilityLabel="Test ButtonOutline"
+            onPress={() => Alert.alert("Button pressed")}
+            label="Test Button"
+          />
+          {[...Array(10)].map((_el, i) => (
+            <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body>
+          ))}
+        </ContentWrapper>
+      </ScrollView>
+      <FooterActionsInline
+        onMeasure={handleFooterActionsInlineMeasurements}
+        startAction={{
+          color: "primary",
+          label: "Outline button",
+          onPress: () => Alert.alert("Button pressed")
+        }}
+        endAction={{
+          color: "primary",
+          onPress: () => Alert.alert("Button pressed"),
+          label: "Solid button"
+        }}
+      />
+    </View>
+  );
+};
diff --git a/example/src/pages/FooterActionsNotFixed.tsx b/example/src/pages/FooterActionsNotFixed.tsx
new file mode 100644
index 00000000..2ad3e0dd
--- /dev/null
+++ b/example/src/pages/FooterActionsNotFixed.tsx
@@ -0,0 +1,62 @@
+import {
+  FooterActions,
+  IOColors,
+  VSpacer,
+  useIOTheme
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { Alert, ScrollView, StyleSheet, Text, View } from "react-native";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+export const FooterActionsNotFixed = () => {
+  const theme = useIOTheme();
+
+  return (
+    <ScrollView>
+      {[...Array(9)].map((_el, i) => (
+        <React.Fragment key={`view-${i}`}>
+          <View
+            style={[
+              styles.block,
+              { backgroundColor: IOColors[theme["appBackground-secondary"]] }
+            ]}
+          >
+            <Text style={{ color: IOColors[theme["textBody-tertiary"]] }}>
+              {`Block ${i}`}
+            </Text>
+          </View>
+          <VSpacer size={4} />
+        </React.Fragment>
+      ))}
+      <FooterActions
+        fixed={false}
+        actions={{
+          type: "TwoButtons",
+          primary: {
+            label: "Pay button",
+            onPress: onButtonPress
+          },
+          secondary: {
+            label: "Secondary link",
+            onPress: onButtonPress
+          }
+          // tertiary: {
+          //   label: "Tertiary link",
+          //   onPress: onButtonPress
+          // }
+        }}
+      />
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  block: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 16 / 10
+  }
+});
diff --git a/example/src/pages/FooterActionsScreen.tsx b/example/src/pages/FooterActionsScreen.tsx
new file mode 100644
index 00000000..39489d00
--- /dev/null
+++ b/example/src/pages/FooterActionsScreen.tsx
@@ -0,0 +1,75 @@
+import {
+  FooterActions,
+  IOColors,
+  VSpacer,
+  useFooterActionsMeasurements,
+  useIOTheme
+} from "@pagopa/io-app-design-system";
+import React from "react";
+import { Alert, ScrollView, StyleSheet, Text, View } from "react-native";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+export const FooterActionsScreen = () => {
+  const theme = useIOTheme();
+
+  const { footerActionsMeasurements, handleFooterActionsMeasurements } =
+    useFooterActionsMeasurements();
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        contentContainerStyle={{
+          paddingBottom: footerActionsMeasurements.safeBottomAreaHeight
+        }}
+      >
+        {[...Array(9)].map((_el, i) => (
+          <React.Fragment key={`view-${i}`}>
+            <View
+              style={[
+                styles.block,
+                { backgroundColor: IOColors[theme["appBackground-secondary"]] }
+              ]}
+            >
+              <Text style={{ color: IOColors[theme["textBody-tertiary"]] }}>
+                {`Block ${i}`}
+              </Text>
+            </View>
+            <VSpacer size={4} />
+          </React.Fragment>
+        ))}
+      </ScrollView>
+      <FooterActions
+        onMeasure={handleFooterActionsMeasurements}
+        actions={{
+          type: "SingleButton",
+          primary: {
+            label: "Pay button",
+            onPress: onButtonPress
+          }
+          // secondary: {
+          //   label: "Secondary link",
+          //   onPress: onButtonPress
+          // },
+          // tertiary: {
+          //   label: "Tertiary link",
+          //   onPress: onButtonPress
+          // }
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1
+  },
+  block: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 16 / 10
+  }
+});
diff --git a/example/src/pages/FooterActionsStickyScreen.tsx b/example/src/pages/FooterActionsStickyScreen.tsx
new file mode 100644
index 00000000..42c2e88a
--- /dev/null
+++ b/example/src/pages/FooterActionsStickyScreen.tsx
@@ -0,0 +1,167 @@
+import {
+  FooterActions,
+  FooterActionsMeasurements,
+  IOColors,
+  VSpacer,
+  useIOTheme
+} from "@pagopa/io-app-design-system";
+import { useHeaderHeight } from "@react-navigation/elements";
+import React, { useMemo, useState } from "react";
+import {
+  Alert,
+  Dimensions,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+  Text,
+  View
+} from "react-native";
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedScrollHandler,
+  useAnimatedStyle,
+  useSharedValue
+} from "react-native-reanimated";
+
+const onButtonPress = () => {
+  Alert.alert("Alert", "Action triggered");
+};
+
+export const FooterActionsStickyScreen = () => {
+  const theme = useIOTheme();
+
+  const scrollY = useSharedValue<number>(0);
+
+  /* We can't just use `windowHeight` from `Dimensions` because
+  it doesn't count the fixed block used by `react-navigation`
+  for the header */
+  const { height: windowHeight } = Dimensions.get("window");
+  const headerHeight = useHeaderHeight();
+  const activeScreenHeight = windowHeight - headerHeight;
+
+  /* Disambiguation:
+  actionBlock:            Block element fixed at the bottom of the screen
+  actionBlockPlaceholder: Block element to which the fixed action block
+                          needs to be attached
+  */
+  type ActionBlockHeight = LayoutRectangle["height"];
+
+  const [actionBlockHeight, setActionBlockHeight] =
+    useState<ActionBlockHeight>(0);
+  const [actionBlockPlaceholderY, setActionBlockPlaceholderY] =
+    useState<LayoutRectangle["y"]>(0);
+
+  const handleScroll = useAnimatedScrollHandler(({ contentOffset }) => {
+    // eslint-disable-next-line functional/immutable-data
+    scrollY.value = contentOffset.y;
+  });
+
+  /* Get `FooterActions` measurements from `onLayout` */
+  const handleFooterActionsHeight = (values: FooterActionsMeasurements) => {
+    setActionBlockHeight(values.safeBottomAreaHeight);
+  };
+
+  const getActionBlockY = (event: LayoutChangeEvent) => {
+    setActionBlockPlaceholderY(event.nativeEvent.layout.y);
+  };
+
+  const actionBlockPlaceholderTopEdge = useMemo(
+    () => actionBlockPlaceholderY - activeScreenHeight + actionBlockHeight,
+    [actionBlockPlaceholderY, activeScreenHeight, actionBlockHeight]
+  );
+
+  const actionBlockAnimatedStyle = useAnimatedStyle(() => ({
+    /*
+    We only start translating the action block
+    when it reaches the top of the placeholder
+       0 = Translate is blocked
+      -1 = Translate is unblocked
+    */
+    transform: [
+      {
+        translateY: interpolate(
+          scrollY.value,
+          [0, actionBlockPlaceholderTopEdge - 1, actionBlockPlaceholderTopEdge],
+          [0, 0, -1],
+          { extrapolateLeft: Extrapolation.CLAMP }
+        )
+      }
+    ]
+  }));
+
+  const actionBackgroundBlockAnimatedStyle = useAnimatedStyle(() => ({
+    /* Avoid solid background overlap with the
+       system scrollbar */
+    backgroundColor:
+      actionBlockPlaceholderTopEdge < scrollY.value
+        ? "transparent"
+        : IOColors[theme["appBackground-primary"]]
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Animated.ScrollView onScroll={handleScroll} scrollEventThrottle={8}>
+        {[...Array(9)].map((_el, i) => (
+          <React.Fragment key={`view-${i}`}>
+            <View
+              style={[
+                styles.block,
+                { backgroundColor: IOColors[theme["appBackground-secondary"]] }
+              ]}
+            >
+              <Text style={{ color: IOColors[theme["textBody-tertiary"]] }}>
+                {`Block ${i}`}
+              </Text>
+            </View>
+            <VSpacer size={4} />
+          </React.Fragment>
+        ))}
+        {/* Action Block Placeholder: START */}
+        <View
+          onLayout={getActionBlockY}
+          style={{
+            height: actionBlockHeight,
+            backgroundColor: IOColors[theme["appBackground-primary"]]
+          }}
+        />
+        {/* Action Block Placeholder: END */}
+        <View style={[styles.block, styles.footer]}>
+          <Text>{`Footer`}</Text>
+        </View>
+      </Animated.ScrollView>
+      <FooterActions
+        actions={{
+          type: "TwoButtons",
+          primary: {
+            label: "Pay button",
+            onPress: onButtonPress
+          },
+          secondary: {
+            label: "Secondary link",
+            onPress: onButtonPress
+          }
+        }}
+        animatedStyles={{
+          mainBlock: actionBlockAnimatedStyle,
+          background: actionBackgroundBlockAnimatedStyle
+        }}
+        onMeasure={handleFooterActionsHeight}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1
+  },
+  block: {
+    alignItems: "center",
+    justifyContent: "center",
+    aspectRatio: 16 / 10
+  },
+  footer: {
+    backgroundColor: IOColors["success-100"]
+  }
+});
diff --git a/example/src/pages/FooterWithButton.tsx b/example/src/pages/FooterWithButton.tsx
deleted file mode 100644
index 15416188..00000000
--- a/example/src/pages/FooterWithButton.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import {
-  Body,
-  ButtonOutline,
-  ContentWrapper,
-  FooterWithButtons,
-  H1,
-  IOVisualCostants
-} from "@pagopa/io-app-design-system";
-import * as React from "react";
-import { useState } from "react";
-import { Alert, ScrollView, View } from "react-native";
-
-/**
- * This Screen is used to test components in isolation while developing.
- * @returns a screen with a flexed view where you can test components
- */
-export const FooterWithButton = () => {
-  const [footerHeight, setFooterHeight] = useState(0);
-
-  return (
-    <View>
-      <ScrollView contentContainerStyle={{ paddingBottom: footerHeight }}>
-        <View style={{ paddingVertical: IOVisualCostants.appMarginDefault }}>
-          <ContentWrapper>
-            <H1>Footer with button</H1>
-            {[...Array(50)].map((_el, i) => (
-              <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body>
-            ))}
-            <ButtonOutline
-              color="primary"
-              accessibilityLabel="Test ButtonOutline"
-              onPress={() => Alert.alert("Button pressed")}
-              label="Test Button"
-            />
-            {[...Array(10)].map((_el, i) => (
-              <Body key={`body-${i}`}>{`Repeated text ${i}`}</Body>
-            ))}
-          </ContentWrapper>
-        </View>
-      </ScrollView>
-      <FooterWithButtons
-        onLayoutChange={setFooterHeight}
-        sticky={true}
-        primary={{
-          type: "Solid",
-          buttonProps: {
-            color: "primary",
-            accessibilityLabel: "primary button",
-            onPress: () => Alert.alert("Button pressed"),
-            label: "Primary button"
-          }
-        }}
-        // secondary={{
-        //   type: "Outline",
-        //   buttonProps: {
-        //     color: "primary",
-        //     accessibilityLabel: "secondary button",
-        //     onPress: () => Alert.alert("Button pressed"),
-        //     label: "Secondary button"
-        //   }
-        // }}
-        type="SingleButton"
-      />
-    </View>
-  );
-};
diff --git a/src/components/layout/BlockButtons.tsx b/src/components/layout/BlockButtons.tsx
index 31113a7e..58bbf493 100644
--- a/src/components/layout/BlockButtons.tsx
+++ b/src/components/layout/BlockButtons.tsx
@@ -77,7 +77,7 @@ export type BlockButtonsProps = Props;
 
 /**
  * Implements a component that show buttons on a line on 1, 2 or 3 buttons
- * @deprecated This component is deprecated.
+ * @deprecated This component is deprecated. Use `FooterActionsInline` instead.
  */
 export const BlockButtons = (props: Props) => {
   const renderRightButton = () => {
diff --git a/src/components/layout/FooterActions.tsx b/src/components/layout/FooterActions.tsx
new file mode 100644
index 00000000..31a2046b
--- /dev/null
+++ b/src/components/layout/FooterActions.tsx
@@ -0,0 +1,260 @@
+import * as React from "react";
+import { ComponentProps, Fragment, PropsWithChildren, useState } from "react";
+import {
+  ColorValue,
+  LayoutChangeEvent,
+  LayoutRectangle,
+  StyleSheet,
+  Text,
+  View,
+  ViewStyle
+} from "react-native";
+import Animated from "react-native-reanimated";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOVisualCostants,
+  buttonSolidHeight,
+  hexToRgba,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonLink, ButtonOutline, ButtonSolid } from "../buttons";
+import { VSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+type FooterSingleButton = {
+  type: "SingleButton";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary?: never;
+  tertiary?: never;
+};
+
+type FooterTwoButtons = {
+  type: "TwoButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+  tertiary?: never;
+};
+
+type FooterThreeButtons = {
+  type: "ThreeButtons";
+  primary: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+  secondary: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth" | "color">;
+  tertiary: Omit<ComponentProps<typeof ButtonLink>, "color">;
+};
+
+export type FooterActionsMeasurements = {
+  // Height of the "Actions" block
+  actionBlockHeight: number;
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActions = FooterSingleButton | FooterTwoButtons | FooterThreeButtons;
+
+type FooterAnimatedStyles = {
+  /* Apply object returned by `useAnimatedStyle` to the main block */
+  mainBlock?: Animated.AnimateStyle<ViewStyle>;
+  /* Apply object returned by `useAnimatedStyle` to the background */
+  background?: Animated.AnimateStyle<ViewStyle>;
+};
+
+type FooterActionsProps = WithTestID<
+  PropsWithChildren<{
+    actions?: FooterActions;
+    onMeasure?: (measurements: FooterActionsMeasurements) => void;
+    animatedStyles?: FooterAnimatedStyles;
+    /* Make the background transparent */
+    transparent?: boolean;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+    /* Show the following elements:
+       - Opaque red background to show the component boundaries
+       - Height of the component */
+    debugMode?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+/* Margin between ButtonSolid and ButtonLink */
+const spaceBetweenActionAndLink: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  debugText: {
+    position: "absolute",
+    right: 8,
+    top: -16,
+    color: IOColors.black,
+    fontSize: 9,
+    opacity: 0.75
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32
+  }
+});
+
+export const FooterActions = ({
+  actions,
+  excludeSafeAreaMargins = false,
+  animatedStyles,
+  fixed = true,
+  transparent = false,
+  onMeasure,
+  testID,
+  debugMode = false
+}: FooterActionsProps) => {
+  const theme = useIOTheme();
+  const { isExperimental } = useIOExperimentalDesign();
+
+  const { bottomMargin, extraBottomMargin } = useBottomMargins(
+    !!actions?.secondary,
+    excludeSafeAreaMargins
+  );
+
+  /* Total height of actions */
+  const [actionBlockHeight, setActionBlockHeight] =
+    useState<LayoutRectangle["height"]>(0);
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+  const TRANSPARENT_BG_COLOR: ColorValue = "transparent";
+  const BUTTONSOLID_HEIGHT = isExperimental ? buttonSolidHeight : 40;
+
+  /* Safe background block. Cover everything until it reaches
+     the half of the primary action button. It avoids
+     glitchy behavior underneath.  */
+  const safeBackgroundBlockHeight =
+    bottomMargin + actionBlockHeight - BUTTONSOLID_HEIGHT / 2;
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setActionBlockHeight(height);
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Content end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ actionBlockHeight: height, safeBottomAreaHeight });
+  };
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? { position: "absolute", bottom: 0 }
+          : { marginTop: IOSpacing.screenEndMargin },
+        debugMode && {
+          backgroundColor: hexToRgba(IOColors["error-500"], 0.15)
+        },
+        animatedStyles?.mainBlock
+      ]}
+      testID={testID}
+    >
+      {/* Safe background block. It's added because when you swipe up
+          quickly, the content below is visible for about 100ms. Without this
+          block, the content scrolls underneath. */}
+      <Animated.View
+        style={[
+          {
+            ...(fixed && {
+              width: "100%",
+              height: safeBackgroundBlockHeight,
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: transparent
+                ? TRANSPARENT_BG_COLOR
+                : HEADER_BG_COLOR
+            }),
+            ...(fixed ? styles.blockShadow : null)
+          },
+          animatedStyles?.background
+        ]}
+        pointerEvents="none"
+      />
+
+      <View
+        style={styles.buttonContainer}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        {debugMode && (
+          <Text style={styles.debugText}>{`Height: ${actionBlockHeight}`}</Text>
+        )}
+
+        {renderActions(actions, extraBottomMargin)}
+      </View>
+    </Animated.View>
+  );
+};
+
+const renderActions = (
+  actions: FooterActions | undefined,
+  extraBottomMargin: number
+) => {
+  if (!actions) {
+    return null;
+  }
+  const {
+    type,
+    primary: primaryAction,
+    secondary: secondaryAction,
+    tertiary: tertiaryAction
+  } = actions;
+  return (
+    <Fragment>
+      {primaryAction && <ButtonSolid fullWidth {...primaryAction} />}
+      {type === "TwoButtons" && secondaryAction && (
+        <View style={{ alignSelf: "center", marginBottom: extraBottomMargin }}>
+          <VSpacer size={spaceBetweenActionAndLink} />
+          <ButtonLink color="primary" {...secondaryAction} />
+        </View>
+      )}
+      {type === "ThreeButtons" && (
+        <>
+          {secondaryAction && (
+            <>
+              <VSpacer size={spaceBetweenActions} />
+              <ButtonOutline fullWidth color="primary" {...secondaryAction} />
+            </>
+          )}
+          {tertiaryAction && (
+            <View
+              style={{ alignSelf: "center", marginBottom: extraBottomMargin }}
+            >
+              <VSpacer size={spaceBetweenActionAndLink} />
+              <ButtonLink color="primary" {...tertiaryAction} />
+            </View>
+          )}
+        </>
+      )}
+    </Fragment>
+  );
+};
diff --git a/src/components/layout/FooterActionsInline.tsx b/src/components/layout/FooterActionsInline.tsx
new file mode 100644
index 00000000..8a530b7e
--- /dev/null
+++ b/src/components/layout/FooterActionsInline.tsx
@@ -0,0 +1,137 @@
+import * as React from "react";
+import { ComponentProps, PropsWithChildren } from "react";
+import { ColorValue, LayoutChangeEvent, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOSpacer,
+  IOSpacing,
+  IOSpacingScale,
+  IOVisualCostants,
+  useIOTheme,
+  useIOThemeContext
+} from "../../core";
+import { WithTestID } from "../../utils/types";
+import { ButtonOutline, ButtonSolid } from "../buttons";
+import { HSpacer } from "../spacer";
+import { useBottomMargins } from "./hooks/useBottomMargins";
+
+export type FooterActionsInlineMeasurements = {
+  /* Height of the safe bottom area. It includes:
+     - Margin between screen content
+       and actions (contentEndMargin)
+     - Actions block height
+     - Eventual safe area margin (bottomMargin)
+     This is the total bottom padding that needs
+     to be applied to the ScrollView.
+  */
+  safeBottomAreaHeight: number;
+};
+
+type FooterActionsInline = WithTestID<
+  PropsWithChildren<{
+    startAction: Omit<ComponentProps<typeof ButtonOutline>, "fullWidth">;
+    endAction: Omit<ComponentProps<typeof ButtonSolid>, "fullWidth">;
+    onMeasure?: (measurements: FooterActionsInlineMeasurements) => void;
+    /* Don't include safe area insets */
+    excludeSafeAreaMargins?: boolean;
+    /* Fixed at the bottom of the screen */
+    fixed?: boolean;
+  }>
+>;
+
+/* Margin between ButtonSolid and ButtonOutline */
+const spaceBetweenActions: IOSpacer = 16;
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    paddingHorizontal: IOVisualCostants.appMarginDefault,
+    width: "100%",
+    flexShrink: 0
+  },
+  buttonWrapper: {
+    flex: 1
+  },
+  blockShadow: {
+    shadowColor: IOColors.black,
+    shadowOffset: {
+      width: 0,
+      height: -4
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 32,
+    elevation: 10 // Prop supported on Android only
+  }
+});
+
+export const FooterActionsInline = ({
+  startAction,
+  endAction,
+  excludeSafeAreaMargins = false,
+  fixed = true,
+  onMeasure,
+  testID
+}: FooterActionsInline) => {
+  const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
+
+  const { bottomMargin } = useBottomMargins(false, excludeSafeAreaMargins);
+
+  /* Top padding applied above the actions */
+  const topSpacingValue: IOSpacingScale = 16;
+  const topSpacing = fixed ? topSpacingValue : 0;
+
+  /* Background color should be app main background
+     (both light and dark themes) */
+  const HEADER_BG_COLOR: ColorValue = IOColors[theme["appBackground-primary"]];
+
+  const getActionBlockMeasurements = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    /* Height of the safe bottom area, applied to the ScrollView:
+       Actions + Screen end margin */
+    const safeBottomAreaHeight =
+      bottomMargin + height + IOSpacing.screenEndMargin;
+    onMeasure?.({ safeBottomAreaHeight });
+  };
+
+  return (
+    <View
+      style={[
+        {
+          width: "100%",
+          paddingBottom: bottomMargin
+        },
+        fixed
+          ? {
+              position: "absolute",
+              bottom: 0,
+              backgroundColor: HEADER_BG_COLOR
+            }
+          : { marginTop: IOSpacing.screenEndMargin },
+        /* Apply shadow only on light theme OR if fixed */
+        fixed || themeType === "light" ? styles.blockShadow : {},
+        /* Apply bottom border only on dark theme */
+        themeType === "dark" && {
+          borderTopColor: IOColors[theme["divider-bottomBar"]],
+          borderTopWidth: 1
+        }
+      ]}
+      testID={testID}
+    >
+      <View
+        style={[styles.buttonContainer, { paddingTop: topSpacing }]}
+        onLayout={getActionBlockMeasurements}
+        pointerEvents="box-none"
+      >
+        <View style={{ flexDirection: "row" }}>
+          <View style={styles.buttonWrapper}>
+            <ButtonOutline fullWidth {...startAction} />
+          </View>
+          <HSpacer size={spaceBetweenActions} />
+          <View style={styles.buttonWrapper}>
+            <ButtonSolid fullWidth {...endAction} />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
diff --git a/src/components/layout/FooterWithButtons.tsx b/src/components/layout/FooterWithButtons.tsx
index 86aa4d0a..bf890723 100644
--- a/src/components/layout/FooterWithButtons.tsx
+++ b/src/components/layout/FooterWithButtons.tsx
@@ -44,7 +44,9 @@ const verticalSpacing: IOSpacingScale = 16;
 /**
  * Implements a component that show buttons as sticky footer
  * It can include 1, 2 or 3 buttons. If they are 2, they can have the inlineHalf  or the inlineOneThird style
- * @deprecated This component is deprecated. Use `FooterActions` in the main `io-app` repo instead.
+ * @deprecated This component is deprecated. Use `FooterActions` or `FooterActionsInline` instead.
+ * `FooterActionsInline` is the official replacement for `FooterWithButtons`, but use it only
+ * if explicitly required.
  */
 export const FooterWithButtons = ({
   sticky = false,
diff --git a/src/components/layout/HeaderFirstLevel.tsx b/src/components/layout/HeaderFirstLevel.tsx
index 7e3e7e58..1fddc332 100644
--- a/src/components/layout/HeaderFirstLevel.tsx
+++ b/src/components/layout/HeaderFirstLevel.tsx
@@ -23,7 +23,7 @@ import { WithTestID } from "../../utils/types";
 import { IconButton } from "../buttons";
 import { HSpacer } from "../spacer";
 import { H3 } from "../typography";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type CommonProps = WithTestID<{
   title: string;
@@ -41,23 +41,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderFirstLevel = Base | OneAction | TwoActions | ThreeActions;
diff --git a/src/components/layout/HeaderSecondLevel.tsx b/src/components/layout/HeaderSecondLevel.tsx
index 93359dde..ae47e249 100644
--- a/src/components/layout/HeaderSecondLevel.tsx
+++ b/src/components/layout/HeaderSecondLevel.tsx
@@ -37,7 +37,7 @@ import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
-import { ActionProp } from "./common";
+import { HeaderActionProps } from "./common";
 
 type ScrollValues = {
   contentOffsetY: SharedValue<number>;
@@ -85,23 +85,23 @@ interface Base extends CommonProps {
 
 interface OneAction extends CommonProps {
   type: "singleAction";
-  firstAction: ActionProp;
+  firstAction: HeaderActionProps;
   secondAction?: never;
   thirdAction?: never;
 }
 
 interface TwoActions extends CommonProps {
   type: "twoActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
   thirdAction?: never;
 }
 
 interface ThreeActions extends CommonProps {
   type: "threeActions";
-  firstAction: ActionProp;
-  secondAction: ActionProp;
-  thirdAction: ActionProp;
+  firstAction: HeaderActionProps;
+  secondAction: HeaderActionProps;
+  thirdAction: HeaderActionProps;
 }
 
 export type HeaderSecondLevel = BackProps &
diff --git a/src/components/layout/common.ts b/src/components/layout/common.ts
index b1f81c85..81d886aa 100644
--- a/src/components/layout/common.ts
+++ b/src/components/layout/common.ts
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { IconButton } from "../buttons";
 
-export type ActionProp = Pick<
+export type HeaderActionProps = Pick<
   React.ComponentProps<typeof IconButton>,
   "icon" | "onPress" | "accessibilityLabel" | "accessibilityHint" | "testID"
 >;
diff --git a/src/components/layout/hooks/index.ts b/src/components/layout/hooks/index.ts
new file mode 100644
index 00000000..4a88cdd3
--- /dev/null
+++ b/src/components/layout/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./useFooterActionsMeasurements";
+export * from "./useFooterActionsInlineMeasurements";
diff --git a/src/components/layout/hooks/useBottomMargins.ts b/src/components/layout/hooks/useBottomMargins.ts
new file mode 100644
index 00000000..da62e5e3
--- /dev/null
+++ b/src/components/layout/hooks/useBottomMargins.ts
@@ -0,0 +1,30 @@
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IOSpacingScale, IOVisualCostants } from "../../../core";
+
+/* Extra bottom margin for iPhone bottom handle because
+   ButtonLink doesn't have a fixed height */
+const extraSafeAreaMargin: IOSpacingScale = 8;
+
+export const useBottomMargins = (
+  withSecondaryAction: boolean = false,
+  excludeSafeAreaMargins: boolean = false
+) => {
+  const insets = useSafeAreaInsets();
+  const needSafeAreaMargin = insets.bottom !== 0;
+
+  /* Check if the iPhone bottom handle is present.
+     If not, or if you don't need safe area insets,
+     add a default margin to prevent the button
+     from sticking to the bottom. */
+  const bottomMargin =
+    !needSafeAreaMargin || excludeSafeAreaMargins
+      ? IOVisualCostants.appMarginDefault
+      : insets.bottom;
+
+  /* When the secondary action is visible, add extra margin
+     to avoid little space from iPhone bottom handle */
+  const extraBottomMargin =
+    withSecondaryAction && needSafeAreaMargin ? extraSafeAreaMargin : 0;
+
+  return { bottomMargin, extraBottomMargin };
+};
diff --git a/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts b/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts
new file mode 100644
index 00000000..eea74738
--- /dev/null
+++ b/src/components/layout/hooks/useFooterActionsInlineMeasurements.ts
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { FooterActionsInlineMeasurements } from "../FooterActionsInline";
+
+type UseFooterActionsInlineMeasurementsProps = {
+  footerActionsInlineMeasurements: FooterActionsInlineMeasurements;
+  handleFooterActionsInlineMeasurements: (
+    values: FooterActionsInlineMeasurements
+  ) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsInlineMeasurements`
+ *      Object containing the `FooterActionsInline` measurements
+ *   - `handleFooterActionsInlineMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActionsInline`)
+ */
+export const useFooterActionsInlineMeasurements =
+  (): UseFooterActionsInlineMeasurementsProps => {
+    const [
+      footerActionsInlineMeasurements,
+      setFooterActionsInlineMeasurements
+    ] = useState<FooterActionsInlineMeasurements>({
+      safeBottomAreaHeight: 0
+    });
+
+    const handleFooterActionsInlineMeasurements = (
+      values: FooterActionsInlineMeasurements
+    ) => {
+      setFooterActionsInlineMeasurements(values);
+    };
+
+    return {
+      footerActionsInlineMeasurements,
+      handleFooterActionsInlineMeasurements
+    };
+  };
diff --git a/src/components/layout/hooks/useFooterActionsMeasurements.ts b/src/components/layout/hooks/useFooterActionsMeasurements.ts
new file mode 100644
index 00000000..5f41c3c1
--- /dev/null
+++ b/src/components/layout/hooks/useFooterActionsMeasurements.ts
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { FooterActionsMeasurements } from "../FooterActions";
+
+type UseFooterActionsMeasurementsProps = {
+  footerActionsMeasurements: FooterActionsMeasurements;
+  handleFooterActionsMeasurements: (values: FooterActionsMeasurements) => void;
+};
+/**
+ * Custom hook to handle the `FooterActions` measurements
+ * @returns
+ *   - `footerActionsMeasurements`
+ *      Object containing the `FooterActions` measurements
+ *   - `handleFooterActionsMeasurements`
+ *      Function to update the footer actions measurements
+ *      (to be applied to `onMeasure` prop of `FooterActions`)
+ */
+export const useFooterActionsMeasurements =
+  (): UseFooterActionsMeasurementsProps => {
+    const [footerActionsMeasurements, setFooterActionsMeasurements] =
+      useState<FooterActionsMeasurements>({
+        actionBlockHeight: 0,
+        safeBottomAreaHeight: 0
+      });
+
+    const handleFooterActionsMeasurements = (
+      values: FooterActionsMeasurements
+    ) => {
+      setFooterActionsMeasurements(values);
+    };
+
+    return {
+      footerActionsMeasurements,
+      handleFooterActionsMeasurements
+    };
+  };
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index 4b9de220..21392ebf 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,4 +1,6 @@
 export * from "./BlockButtons";
+export * from "./FooterActions";
+export * from "./FooterActionsInline";
 export * from "./FooterWithButtons";
 export * from "./ForceScrollDownView";
 export * from "./GradientBottomActions";
@@ -7,3 +9,4 @@ export * from "./HeaderFirstLevel";
 export * from "./HeaderSecondLevel";
 export * from "./ModalBSHeader";
 export * from "./common";
+export * from "./hooks";
diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts
index a2f8e7f9..3f226c06 100644
--- a/src/core/IOColors.ts
+++ b/src/core/IOColors.ts
@@ -276,6 +276,7 @@ export type IOTheme = {
   "icon-decorative": IOColors;
   // Layout
   "divider-default": IOColors;
+  "divider-bottomBar": IOColors;
   // Status
   errorIcon: IOColors;
   errorText: IOColors;
@@ -306,6 +307,7 @@ export const IOThemeLight: IOTheme = {
   "icon-decorative": "grey-300",
   // Layout
   "divider-default": "grey-200",
+  "divider-bottomBar": "grey-200",
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
@@ -342,6 +344,7 @@ export const IOThemeDark: IOTheme = {
   "icon-default": "grey-450",
   // Layout
   "divider-default": "grey-850",
+  "divider-bottomBar": "grey-850",
   // Status
   errorIcon: "error-400",
   errorText: "error-400",
diff --git a/src/core/IOSpacing.ts b/src/core/IOSpacing.ts
index a6aa1100..4ec14221 100644
--- a/src/core/IOSpacing.ts
+++ b/src/core/IOSpacing.ts
@@ -49,3 +49,17 @@ export const IOModuleIDPHSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPVSpacing: IOModuleIDPSpacing = 16;
 export const IOModuleIDPSavedVSpacing: IOModuleIDPSpacing = 24;
 export const IOListItemLogoMargin: IOModuleIDPSpacing = 8;
+
+/*
+░░░ SPACING CONSTANTS ░░░
+*/
+
+const spacingConstantKeys = ["screenEndMargin"] as const;
+
+export type IOSpacingConstants = {
+  [K in (typeof spacingConstantKeys)[number]]: IOSpacingScale;
+};
+
+export const IOSpacing = {
+  screenEndMargin: 32
+} as const satisfies IOSpacingConstants;
diff --git a/src/core/IOStyleVariables.ts b/src/core/IOStyleVariables.ts
deleted file mode 100644
index 88a20791..00000000
--- a/src/core/IOStyleVariables.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * A collection of default style variables used within IO App.
- */
-export const IOStyleVariables = {
-  switchWidth: 51
-};
diff --git a/src/core/index.ts b/src/core/index.ts
index de156d49..ecd42510 100644
--- a/src/core/index.ts
+++ b/src/core/index.ts
@@ -4,6 +4,5 @@ export * from "./IOTransitions";
 export * from "./IOStyles";
 export * from "./IOShapes";
 export * from "./IOSpacing";
-export * from "./IOStyleVariables";
 export * from "./IODSExperimentalContextProvider";
 export * from "./IOThemeContextProvider";

From 5b3f8a650fa3c7573000eb35a332d0906d0551ed Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Wed, 9 Oct 2024 10:50:29 +0200
Subject: [PATCH 04/11] chore: release 1.47.0

---
 CHANGELOG.md | 14 ++++++++++++--
 package.json |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 78a7b2e0..21925d38 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,9 +4,11 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.46.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.46.2)
+#### [v1.47.0](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.0)
 
+- [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
 - feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
+- chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
 
 #### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
 
@@ -42,13 +44,21 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop  [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
 - chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)
 
-#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v2.0.0-0)
+#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.2...v2.0.0-0)
 
 > 31 July 2024
 
 - [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
 - chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)
 
+#### [v1.46.2](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v1.46.2)
+
+> 19 September 2024
+
+- feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
+- feat: [PE-680] Change purple badge colors [`#333`](https://github.com/pagopa/io-app-design-system/pull/333)
+- chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
+
 #### [v1.46.1](https://github.com/pagopa/io-app-design-system/compare/v1.46.0...v1.46.1)
 
 > 11 September 2024
diff --git a/package.json b/package.json
index bae903e2..75626b41 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.46.2",
+  "version": "1.47.0",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

From 4f33fae9cea941e012478c9e173b62273e50fb44 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 15 Oct 2024 15:54:11 +0200
Subject: [PATCH 05/11] [IOAPPX-398] Add dark mode compatibility to
 `HeaderSecondLevel` (#335)

## Short description
This PR adds dark mode compatibility to the `HeaderSecondLevel`

## List of changes proposed in this pull request
- Replace previous default colors with new ones based on the theme

### Preview


https://github.com/user-attachments/assets/5558dd78-beaf-4186-b09c-06681e61a28c


## How to test
Launch the example app and visit each screen related to the **Header
Second Level**
---
 example/src/navigation/navigator.tsx          |  4 ++--
 example/src/pages/HeaderSecondLevel.tsx       | 24 +++++++++++--------
 .../HeaderSecondLevelDiscreteTransition.tsx   |  6 ++++-
 .../src/pages/HeaderSecondLevelForModal.tsx   |  6 ++++-
 .../pages/HeaderSecondLevelWithStepper.tsx    |  6 ++++-
 example/src/pages/StaticHeaderSecondLevel.tsx |  8 +++++--
 src/components/layout/HeaderSecondLevel.tsx   | 18 ++++++++++----
 src/core/IOColors.ts                          |  3 +++
 8 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/example/src/navigation/navigator.tsx b/example/src/navigation/navigator.tsx
index 045af8f1..b80a2cec 100644
--- a/example/src/navigation/navigator.tsx
+++ b/example/src/navigation/navigator.tsx
@@ -49,7 +49,7 @@ import { Sandbox } from "../pages/Sandbox";
 import { SearchCustom } from "../pages/SearchCustom";
 import { SearchNative } from "../pages/SearchNative";
 import { Selection } from "../pages/Selection";
-import { StaticHeaderSecondLevelScreen } from "../pages/StaticHeaderSecondLevel";
+import { HeaderSecondLevelScreenStatic } from "../pages/StaticHeaderSecondLevel";
 import { StepperPage } from "../pages/Stepper";
 import { TabNavigationScreen } from "../pages/TabNavigation";
 import { TextInputs } from "../pages/TextInputs";
@@ -401,7 +401,7 @@ const AppNavigator = () => {
 
           <Stack.Screen
             name={APP_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.route}
-            component={StaticHeaderSecondLevelScreen}
+            component={HeaderSecondLevelScreenStatic}
             options={{
               headerTitle:
                 APP_ROUTES.COMPONENTS.HEADER_SECOND_LEVEL_STATIC.title,
diff --git a/example/src/pages/HeaderSecondLevel.tsx b/example/src/pages/HeaderSecondLevel.tsx
index ba4563f0..4bf232ba 100644
--- a/example/src/pages/HeaderSecondLevel.tsx
+++ b/example/src/pages/HeaderSecondLevel.tsx
@@ -1,12 +1,3 @@
-import * as React from "react";
-import { useState } from "react";
-import { Alert, View, LayoutChangeEvent } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Animated, {
-  useAnimatedScrollHandler,
-  useSharedValue
-} from "react-native-reanimated";
-import { useNavigation } from "@react-navigation/native";
 import {
   AlertEdgeToEdgeProps,
   Body,
@@ -17,9 +8,19 @@ import {
   HeaderSecondLevel,
   HStack,
   IOVisualCostants,
+  useIOTheme,
   VSpacer,
   VStack
 } from "@pagopa/io-app-design-system";
+import { useNavigation } from "@react-navigation/native";
+import * as React from "react";
+import { useState } from "react";
+import { Alert, LayoutChangeEvent, View } from "react-native";
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { StatusBannerContext } from "../components/StatusBannerProvider";
 
 // This is defined as about the half of a default ListItem… component
@@ -53,6 +54,7 @@ export const HeaderSecondLevelScreen = () => {
 
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
+  const theme = useIOTheme();
 
   const getTitleHeight = (event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;
@@ -122,7 +124,9 @@ export const HeaderSecondLevelScreen = () => {
         onLayout={getTitleHeight}
         // style={{ backgroundColor: IOColors["hanPurple-500"] }}
       >
-        <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+        <H3 color={theme["textHeading-default"]}>
+          Questo è un titolo lungo, ma lungo lungo davvero, eh!
+        </H3>
       </View>
       <VSpacer />
       {["info", "warning", "error"].map(variant => (
diff --git a/example/src/pages/HeaderSecondLevelDiscreteTransition.tsx b/example/src/pages/HeaderSecondLevelDiscreteTransition.tsx
index bb5ee453..31d45100 100644
--- a/example/src/pages/HeaderSecondLevelDiscreteTransition.tsx
+++ b/example/src/pages/HeaderSecondLevelDiscreteTransition.tsx
@@ -3,6 +3,7 @@ import {
   H3,
   HeaderSecondLevel,
   IOVisualCostants,
+  useIOTheme,
   VSpacer
 } from "@pagopa/io-app-design-system";
 import { useNavigation } from "@react-navigation/native";
@@ -15,6 +16,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 export const HeaderSecondLevelScreenDiscreteTransition = () => {
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
+  const theme = useIOTheme();
 
   const animatedScrollViewRef = useAnimatedRef<Animated.ScrollView>();
 
@@ -63,7 +65,9 @@ export const HeaderSecondLevelScreenDiscreteTransition = () => {
       }}
       scrollEventThrottle={8}
     >
-      <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+      <H3 color={theme["textHeading-default"]}>
+        Questo è un titolo lungo, ma lungo lungo davvero, eh!
+      </H3>
       <VSpacer />
       {[...Array(50)].map((_el, i) => (
         <Body key={`body-${i}`}>Repeated text</Body>
diff --git a/example/src/pages/HeaderSecondLevelForModal.tsx b/example/src/pages/HeaderSecondLevelForModal.tsx
index a60949a8..b21e8dd5 100644
--- a/example/src/pages/HeaderSecondLevelForModal.tsx
+++ b/example/src/pages/HeaderSecondLevelForModal.tsx
@@ -12,6 +12,7 @@ import {
   H3,
   HeaderSecondLevel,
   IOVisualCostants,
+  useIOTheme,
   VSpacer
 } from "@pagopa/io-app-design-system";
 
@@ -26,6 +27,7 @@ export const HeaderSecondLevelScreen = () => {
 
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
+  const theme = useIOTheme();
 
   const getTitleHeight = (event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;
@@ -94,7 +96,9 @@ export const HeaderSecondLevelScreen = () => {
         onLayout={getTitleHeight}
         // style={{ backgroundColor: IOColors["hanPurple-500"] }}
       >
-        <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+        <H3 color={theme["textHeading-default"]}>
+          Questo è un titolo lungo, ma lungo lungo davvero, eh!
+        </H3>
       </View>
       <VSpacer />
       {[...Array(50)].map((_el, i) => (
diff --git a/example/src/pages/HeaderSecondLevelWithStepper.tsx b/example/src/pages/HeaderSecondLevelWithStepper.tsx
index 5eab9661..4ab83b1c 100644
--- a/example/src/pages/HeaderSecondLevelWithStepper.tsx
+++ b/example/src/pages/HeaderSecondLevelWithStepper.tsx
@@ -13,6 +13,7 @@ import {
   HeaderSecondLevel,
   IOVisualCostants,
   Stepper,
+  useIOTheme,
   VSpacer
 } from "@pagopa/io-app-design-system";
 
@@ -27,6 +28,7 @@ export const HeaderSecondLevelWithStepper = () => {
 
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
+  const theme = useIOTheme();
 
   const getTitleHeight = (event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;
@@ -74,7 +76,9 @@ export const HeaderSecondLevelWithStepper = () => {
       decelerationRate="normal"
     >
       <View onLayout={getTitleHeight}>
-        <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+        <H3 color={theme["textHeading-default"]}>
+          Questo è un titolo lungo, ma lungo lungo davvero, eh!
+        </H3>
       </View>
       <VSpacer />
       {[...Array(50)].map((_el, i) => (
diff --git a/example/src/pages/StaticHeaderSecondLevel.tsx b/example/src/pages/StaticHeaderSecondLevel.tsx
index 44a31e35..fbeba790 100644
--- a/example/src/pages/StaticHeaderSecondLevel.tsx
+++ b/example/src/pages/StaticHeaderSecondLevel.tsx
@@ -12,13 +12,14 @@ import {
   H3,
   HeaderSecondLevel,
   IOVisualCostants,
+  useIOTheme,
   VSpacer
 } from "@pagopa/io-app-design-system";
 
 // This is defined as about the half of a default ListItem… component
 const defaultTriggerOffsetValue: number = 32;
 
-export const StaticHeaderSecondLevelScreen = () => {
+export const HeaderSecondLevelScreenStatic = () => {
   const [triggerOffsetValue, setTriggerOffsetValue] = useState(
     defaultTriggerOffsetValue
   );
@@ -26,6 +27,7 @@ export const StaticHeaderSecondLevelScreen = () => {
 
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
+  const theme = useIOTheme();
 
   const getTitleHeight = (event: LayoutChangeEvent) => {
     const { height } = event.nativeEvent.layout;
@@ -77,7 +79,9 @@ export const StaticHeaderSecondLevelScreen = () => {
       decelerationRate="normal"
     >
       <View onLayout={getTitleHeight}>
-        <H3>Questo è un titolo lungo, ma lungo lungo davvero, eh!</H3>
+        <H3 color={theme["textHeading-default"]}>
+          Questo è un titolo lungo, ma lungo lungo davvero, eh!
+        </H3>
       </View>
       <VSpacer />
       {[...Array(50)].map((_el, i) => (
diff --git a/src/components/layout/HeaderSecondLevel.tsx b/src/components/layout/HeaderSecondLevel.tsx
index ae47e249..e95acc0e 100644
--- a/src/components/layout/HeaderSecondLevel.tsx
+++ b/src/components/layout/HeaderSecondLevel.tsx
@@ -30,7 +30,8 @@ import {
   hexToRgba,
   iconBtnSizeSmall,
   useIOExperimentalDesign,
-  useIOTheme
+  useIOTheme,
+  useIOThemeContext
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
 import { makeFontStyleObject } from "../../utils/fonts";
@@ -166,19 +167,24 @@ export const HeaderSecondLevel = ({
 
   const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
+  const { themeType } = useIOThemeContext();
   const insets = useSafeAreaInsets();
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
+  const iconButtonColorDefault: ComponentProps<typeof IconButton>["color"] =
+    themeType === "dark" ? "contrast" : "neutral";
+
   const iconButtonColor: ComponentProps<typeof IconButton>["color"] =
-    variant === "neutral" ? "neutral" : "contrast";
+    variant === "contrast" ? "contrast" : iconButtonColorDefault;
+
   const titleColor: ColorValue =
     variant === "neutral"
       ? IOColors[theme["textHeading-default"]]
       : IOColors.white;
 
   /* Visual attributes when there are transitions between states */
-  const HEADER_DEFAULT_BG_COLOR: IOColors = "white";
+  const HEADER_DEFAULT_BG_COLOR: IOColors = theme["appBackground-primary"];
 
   const headerBgColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
@@ -189,10 +195,12 @@ export const HeaderSecondLevel = ({
   const headerBgColorSolidState =
     backgroundColor ?? IOColors[HEADER_DEFAULT_BG_COLOR];
 
+  const borderColorDefault = IOColors[theme["divider-default"]];
+
   const borderColorTransparentState = backgroundColor
     ? hexToRgba(backgroundColor, 0)
-    : hexToRgba(IOColors["grey-100"], 0);
-  const borderColorSolidState = backgroundColor ?? IOColors["grey-100"];
+    : hexToRgba(borderColorDefault, 0);
+  const borderColorSolidState = backgroundColor ?? borderColorDefault;
 
   useLayoutEffect(() => {
     if (isTitleAccessible) {
diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts
index 3f226c06..a39329a3 100644
--- a/src/core/IOColors.ts
+++ b/src/core/IOColors.ts
@@ -275,6 +275,7 @@ export type IOTheme = {
   "icon-default": IOColors;
   "icon-decorative": IOColors;
   // Layout
+  "divider-header": IOColors;
   "divider-default": IOColors;
   "divider-bottomBar": IOColors;
   // Status
@@ -306,6 +307,7 @@ export const IOThemeLight: IOTheme = {
   "icon-default": "grey-650",
   "icon-decorative": "grey-300",
   // Layout
+  "divider-header": "grey-100",
   "divider-default": "grey-200",
   "divider-bottomBar": "grey-200",
   // Status
@@ -343,6 +345,7 @@ export const IOThemeDark: IOTheme = {
   "cardBorder-default": "grey-850",
   "icon-default": "grey-450",
   // Layout
+  "divider-header": "grey-850",
   "divider-default": "grey-850",
   "divider-bottomBar": "grey-850",
   // Status

From 49173c4f3c232303cab4e2e4799d21ef7032274c Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Tue, 15 Oct 2024 16:01:39 +0200
Subject: [PATCH 06/11] chore: release 1.47.1

---
 CHANGELOG.md | 13 +++++++++++--
 package.json |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21925d38..b64342c4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,11 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.47.0](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.0)
+#### [v1.47.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.1)
 
+- [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
 - [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
 - feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
 - chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
+- chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)
 
 #### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
 
@@ -44,13 +46,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop  [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
 - chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)
 
-#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.46.2...v2.0.0-0)
+#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.0...v2.0.0-0)
 
 > 31 July 2024
 
 - [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
 - chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)
 
+#### [v1.47.0](https://github.com/pagopa/io-app-design-system/compare/v1.46.2...v1.47.0)
+
+> 9 October 2024
+
+- [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
+- chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)
+
 #### [v1.46.2](https://github.com/pagopa/io-app-design-system/compare/v1.46.1...v1.46.2)
 
 > 19 September 2024
diff --git a/package.json b/package.json
index 75626b41..d81646d0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.47.0",
+  "version": "1.47.1",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

From f3072ac5493c0a34a4c4caa1355f5a8c86a19d57 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Wed, 16 Oct 2024 11:26:54 +0200
Subject: [PATCH 07/11] [IOAPPX-400] Add `testID` to `ContentWrapper` (#336)

## Short description
This PR adds `testID` prop to the `ContentWrapper` component.

## How to test
N/A
---
 src/components/contentWrapper/ContentWrapper.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/contentWrapper/ContentWrapper.tsx b/src/components/contentWrapper/ContentWrapper.tsx
index e9aaa92c..ea24e0cd 100644
--- a/src/components/contentWrapper/ContentWrapper.tsx
+++ b/src/components/contentWrapper/ContentWrapper.tsx
@@ -1,12 +1,13 @@
 import React from "react";
 import { View } from "react-native";
+import { WithTestID } from "src/utils/types";
 import type { IOAppMargin } from "../../core";
 import { IOVisualCostants } from "../../core/IOStyles";
 
-type IOContentWrapperProps = {
+type IOContentWrapperProps = WithTestID<{
   margin?: IOAppMargin;
   children: React.ReactNode;
-};
+}>;
 
 /**
 `ContentWrapper` is the main wrapper of the application. It automatically sets side margins,
@@ -15,9 +16,11 @@ depending on the size value
  */
 export const ContentWrapper = ({
   margin = IOVisualCostants.appMarginDefault,
+  testID,
   children
 }: IOContentWrapperProps) => (
   <View
+    testID={testID}
     style={{
       paddingHorizontal: margin
     }}

From 2ccec35de737493b3092592fe63911c77e1abef3 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Wed, 16 Oct 2024 11:28:25 +0200
Subject: [PATCH 08/11] chore: release 1.47.2

---
 CHANGELOG.md | 13 +++++++++++--
 package.json |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b64342c4..7d4ae120 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,13 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.47.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.1)
+#### [v1.47.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.2)
 
+- [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
 - [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
 - [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
 - feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
 - chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
 - chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)
+- chore: release 1.47.1 [`49173c4`](https://github.com/pagopa/io-app-design-system/commit/49173c4f3c232303cab4e2e4799d21ef7032274c)
 
 #### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
 
@@ -46,13 +48,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop  [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
 - chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)
 
-#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.0...v2.0.0-0)
+#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.1...v2.0.0-0)
 
 > 31 July 2024
 
 - [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
 - chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)
 
+#### [v1.47.1](https://github.com/pagopa/io-app-design-system/compare/v1.47.0...v1.47.1)
+
+> 15 October 2024
+
+- [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
+- chore: release 1.47.1 [`49173c4`](https://github.com/pagopa/io-app-design-system/commit/49173c4f3c232303cab4e2e4799d21ef7032274c)
+
 #### [v1.47.0](https://github.com/pagopa/io-app-design-system/compare/v1.46.2...v1.47.0)
 
 > 9 October 2024
diff --git a/package.json b/package.json
index d81646d0..0c7bc46a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.47.1",
+  "version": "1.47.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

From 309df9eef2fcb131357aa36910f42fda37de8f89 Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 21 Oct 2024 11:21:16 +0200
Subject: [PATCH 09/11] [IOAPPX-402] Add full dark mode support to
 `ListItemTransaction` (#337)

---
 src/components/listitems/ListItemTransaction.tsx | 7 +++++--
 src/core/IOColors.ts                             | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/listitems/ListItemTransaction.tsx b/src/components/listitems/ListItemTransaction.tsx
index 91210af1..ee51c7e9 100644
--- a/src/components/listitems/ListItemTransaction.tsx
+++ b/src/components/listitems/ListItemTransaction.tsx
@@ -142,6 +142,9 @@ export const ListItemTransaction = ({
     ? theme["interactiveElem-default"]
     : "blue";
 
+  const amountColor: IOColors = theme["textBody-default"];
+  const successColor: IOColors = theme.successText;
+
   const ListItemTransactionContent = () => {
     const TransactionAmountOrBadgeComponent = () => {
       switch (transactionStatus) {
@@ -149,7 +152,7 @@ export const ListItemTransaction = ({
           return (
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? interactiveColor : "black"}
+              color={hasChevronRight ? interactiveColor : amountColor}
               numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
@@ -159,7 +162,7 @@ export const ListItemTransaction = ({
           return (
             <H6
               accessibilityLabel={getAccessibleAmountText(transactionAmount)}
-              color={hasChevronRight ? interactiveColor : "success-700"}
+              color={hasChevronRight ? interactiveColor : successColor}
               numberOfLines={numberOfLines}
             >
               {transactionAmount || ""}
diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts
index a39329a3..74984f75 100644
--- a/src/core/IOColors.ts
+++ b/src/core/IOColors.ts
@@ -281,6 +281,7 @@ export type IOTheme = {
   // Status
   errorIcon: IOColors;
   errorText: IOColors;
+  successText: IOColors;
   // Pictograms
   "pictogram-hands": IOColors;
   "pictogram-tint-main": IOColors;
@@ -313,6 +314,7 @@ export const IOThemeLight: IOTheme = {
   // Status
   errorIcon: "error-600",
   errorText: "error-600",
+  successText: "success-700",
   // Pictograms
   "pictogram-hands": "blueIO-500",
   "pictogram-tint-main": "turquoise-150",
@@ -351,6 +353,7 @@ export const IOThemeDark: IOTheme = {
   // Status
   errorIcon: "error-400",
   errorText: "error-400",
+  successText: "success-400",
   // Pictograms
   "pictogram-hands": "white",
   "pictogram-tint-main": "turquoise-150",

From 382df275569da0f95b0d0f896a77361b493a072f Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 21 Oct 2024 16:39:45 +0200
Subject: [PATCH 10/11] Make the `2.x` version the official, latest release.
 (#339)

---
 CHANGELOG.md                                  |  13 +-
 example/src/pages/Advice.tsx                  |  19 +-
 example/src/pages/Alert.tsx                   |   5 +-
 example/src/pages/Buttons.tsx                 |  37 +-
 example/src/pages/Colors.tsx                  |  12 +-
 example/src/pages/Icons.tsx                   |  44 +-
 example/src/pages/Layout.tsx                  |   6 +-
 example/src/pages/ListItem.tsx                |  75 +-
 example/src/pages/Logos.tsx                   |  67 +-
 example/src/pages/MainScreen.tsx              |  14 +-
 example/src/pages/Modules.tsx                 |  61 +-
 example/src/pages/Pictograms.tsx              | 274 ++++----
 example/src/pages/Typography.tsx              | 174 +++--
 jestSetup.js                                  |   7 +-
 package.json                                  |   2 +-
 .../__snapshots__/advice.test.tsx.snap        |  40 +-
 src/components/accordion/AccordionItem.tsx    |  16 +-
 src/components/alert/Alert.tsx                |  23 +-
 src/components/alert/AlertEdgeToEdge.tsx      |   8 +-
 src/components/badge/Badge.tsx                |  46 +-
 .../__snapshots__/badge.test.tsx.snap         |  38 +-
 src/components/badge/__test__/badge.test.tsx  |   4 +-
 .../__snapshots__/banner.test.tsx.snap        |  52 +-
 src/components/buttons/ButtonLink.tsx         |  47 +-
 src/components/buttons/ButtonOutline.tsx      |  39 +-
 .../__snapshots__/button.test.tsx.snap        | 105 ++-
 src/components/featureInfo/FeatureInfo.tsx    |  26 +-
 src/components/layout/HeaderSecondLevel.tsx   |  27 +-
 src/components/listitems/ListItemAction.tsx   |  88 +--
 src/components/listitems/ListItemAmount.tsx   |   7 +-
 src/components/listitems/ListItemSwitch.tsx   |   6 +-
 .../__snapshots__/listitem.test.tsx.snap      | 430 +++---------
 src/components/modules/ModuleIDP.tsx          |  47 +-
 .../__snapshots__/NumberPad.test.tsx.snap     | 180 +----
 src/components/searchInput/SearchInput.tsx    |  20 +-
 src/components/switch/SwitchLabel.tsx         |  38 +-
 src/components/tabs/TabItem.tsx               |   6 +-
 src/components/tag/Tag.tsx                    |  46 +-
 src/components/textInput/TextInputBase.tsx    |  29 +-
 .../ToastNotification.test.tsx.snap           | 288 +++-----
 src/components/typography/BaseTypography.tsx  |  17 +-
 src/components/typography/Body.tsx            |  81 ++-
 src/components/typography/BodyMonospace.tsx   |  61 +-
 src/components/typography/ButtonText.tsx      |  60 +-
 src/components/typography/Caption.tsx         |  64 +-
 src/components/typography/Chip.tsx            |  62 +-
 src/components/typography/Factory.tsx         |   1 +
 src/components/typography/H1.tsx              |  67 +-
 src/components/typography/H2.tsx              |  67 +-
 src/components/typography/H3.tsx              |  65 +-
 src/components/typography/H4.tsx              |  67 +-
 src/components/typography/H5.tsx              |  58 +-
 src/components/typography/H6.tsx              |  71 +-
 src/components/typography/Hero.tsx            |  63 +-
 src/components/typography/IOText.tsx          | 157 +++++
 src/components/typography/Label.tsx           |  89 ++-
 src/components/typography/LabelHeader.tsx     |  56 --
 src/components/typography/LabelLink.tsx       |  61 --
 src/components/typography/LabelMini.tsx       |  52 ++
 src/components/typography/LabelSmall.tsx      | 104 ++-
 src/components/typography/LabelSmallAlt.tsx   |  76 +-
 .../__snapshots__/typography.test.tsx.snap    | 649 +++---------------
 .../typography/__test__/typography.test.tsx   |  38 +-
 src/components/typography/index.tsx           |   6 +-
 src/components/typography/markdown/MdH1.tsx   |  54 +-
 src/components/typography/markdown/MdH2.tsx   |  57 +-
 src/components/typography/markdown/MdH3.tsx   |  53 +-
 src/components/typography/markdown/MdH4.tsx   |  34 -
 src/components/typography/markdown/MdH5.tsx   |  32 -
 src/components/typography/markdown/MdH6.tsx   |  33 -
 src/core/IOColors.ts                          |  60 +-
 src/core/IOStyles.ts                          |   6 +-
 src/utils/accessibility.ts                    |  34 +
 src/utils/fonts.ts                            | 144 ++--
 stories/featureInfo/FeatureInfo.stories.ts    |   8 +-
 stories/foundation/typography/Link.stories.ts |  28 -
 76 files changed, 1855 insertions(+), 3246 deletions(-)
 create mode 100644 src/components/typography/IOText.tsx
 delete mode 100644 src/components/typography/LabelHeader.tsx
 delete mode 100644 src/components/typography/LabelLink.tsx
 create mode 100644 src/components/typography/LabelMini.tsx
 delete mode 100644 src/components/typography/markdown/MdH4.tsx
 delete mode 100644 src/components/typography/markdown/MdH5.tsx
 delete mode 100644 src/components/typography/markdown/MdH6.tsx
 delete mode 100644 stories/foundation/typography/Link.stories.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7d4ae120..34958a8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v1.47.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v1.47.2)
+#### [v2.0.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v2.0.2)
 
 - [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
 - [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
@@ -12,7 +12,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
 - chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
 - chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)
-- chore: release 1.47.1 [`49173c4`](https://github.com/pagopa/io-app-design-system/commit/49173c4f3c232303cab4e2e4799d21ef7032274c)
+- chore: release 1.47.2 [`2ccec35`](https://github.com/pagopa/io-app-design-system/commit/2ccec35de737493b3092592fe63911c77e1abef3)
 
 #### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
 
@@ -48,13 +48,20 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - [IOAPPX-362] Change `Label…` default weight to Semibold + Fix autocomplete of `IOText` when using `font` prop  [`#322`](https://github.com/pagopa/io-app-design-system/pull/322)
 - chore: release 2.0.0-1 [`15cfe9c`](https://github.com/pagopa/io-app-design-system/commit/15cfe9ccbfa743e9252e13e0687f482dbeb07a58)
 
-#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.1...v2.0.0-0)
+#### [v2.0.0-0](https://github.com/pagopa/io-app-design-system/compare/v1.47.2...v2.0.0-0)
 
 > 31 July 2024
 
 - [IOAPPX-349] Add the new `IOText` component with support for advanced a11y features [`#312`](https://github.com/pagopa/io-app-design-system/pull/312)
 - chore: release 2.0.0-0 [`7227d4b`](https://github.com/pagopa/io-app-design-system/commit/7227d4bee6d1fe913973a5a35e3308555d0101bb)
 
+#### [v1.47.2](https://github.com/pagopa/io-app-design-system/compare/v1.47.1...v1.47.2)
+
+> 16 October 2024
+
+- [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
+- chore: release 1.47.2 [`2ccec35`](https://github.com/pagopa/io-app-design-system/commit/2ccec35de737493b3092592fe63911c77e1abef3)
+
 #### [v1.47.1](https://github.com/pagopa/io-app-design-system/compare/v1.47.0...v1.47.1)
 
 > 15 October 2024
diff --git a/example/src/pages/Advice.tsx b/example/src/pages/Advice.tsx
index d9d3588d..9064af65 100644
--- a/example/src/pages/Advice.tsx
+++ b/example/src/pages/Advice.tsx
@@ -48,9 +48,7 @@ export const DSAdvice = () => (
 
 const renderFeatureInfo = () => (
   <>
-    <H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
-      FeatureInfo
-    </H2>
+    <H2 style={{ marginBottom: 16 }}>FeatureInfo</H2>
     <ComponentViewerBox name="FeatureInfo · with Icon">
       <FeatureInfo
         iconName="info"
@@ -68,8 +66,11 @@ const renderFeatureInfo = () => (
       <VSpacer size={24} />
       <FeatureInfo
         iconName="security"
-        actionLabel="Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper"
-        actionOnPress={onLinkPress}
+        action={{
+          label:
+            "Si applicano i Termini e condizioni d’uso e l’Informativa Privacy di Paytipper",
+          onPress: onLinkPress
+        }}
       />
     </ComponentViewerBox>
     <VSpacer size={16} />
@@ -93,8 +94,10 @@ const renderFeatureInfo = () => (
         body={
           "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. sed do eiusmod tempor ut labore et dolore magna aliqua"
         }
-        actionLabel="Scopri di più"
-        actionOnPress={onLinkPress}
+        action={{
+          label: "Scopri di più",
+          onPress: onLinkPress
+        }}
       />
     </ComponentViewerBox>
   </>
@@ -103,8 +106,6 @@ const renderFeatureInfo = () => (
 const renderBanner = () => (
   <>
     <H2
-      color={"bluegrey"}
-      weight={"Semibold"}
       style={{
         marginBottom: 16,
         paddingTop: IOVisualCostants.appMarginDefault
diff --git a/example/src/pages/Alert.tsx b/example/src/pages/Alert.tsx
index b30a2775..f6ec0f39 100644
--- a/example/src/pages/Alert.tsx
+++ b/example/src/pages/Alert.tsx
@@ -106,7 +106,6 @@ export const DSAlert = () => {
     <Screen>
       <H3
         color={"bluegrey"}
-        weight={"Semibold"}
         style={{
           paddingTop: IOVisualCostants.appMarginDefault,
           marginBottom: 16
@@ -235,7 +234,7 @@ export const DSAlert = () => {
 
       <VSpacer size={40} />
 
-      <H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
+      <H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
         Content + Action
       </H2>
 
@@ -288,7 +287,7 @@ export const DSAlert = () => {
       <VSpacer size={40} />
 
       {/* Full width */}
-      <H2 color={"bluegrey"} weight={"Semibold"} style={{ marginBottom: 16 }}>
+      <H2 color={"bluegrey"} style={{ marginBottom: 16 }}>
         Full width
       </H2>
       <FullWidthComponent>
diff --git a/example/src/pages/Buttons.tsx b/example/src/pages/Buttons.tsx
index d308454d..553e4259 100644
--- a/example/src/pages/Buttons.tsx
+++ b/example/src/pages/Buttons.tsx
@@ -44,7 +44,6 @@ export const Buttons = () => {
       {/* The title should be dynamic, got from the route object */}
       <H2
         color={"bluegrey"}
-        weight={"Semibold"}
         style={{
           marginBottom: 16,
           paddingTop: IOVisualCostants.appMarginDefault
@@ -290,11 +289,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         ButtonOutline
       </H2>
       <ComponentViewerBox name="ButtonOutline · Primary variant (using Pressable API)">
@@ -449,11 +444,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         ButtonLink
       </H2>
       <ComponentViewerBox name="ButtonLink · Primary variant (using Pressable API)">
@@ -594,11 +585,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         IconButton
       </H2>
       <ComponentViewerBox name="IconButton · Primary variant">
@@ -707,11 +694,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         IconButtonSolid
       </H2>
 
@@ -775,11 +758,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         IconButtonContained (Icebox)
       </H2>
       <ComponentViewerBox name="IconButtonContained · Primary variant">
@@ -861,11 +840,7 @@ export const Buttons = () => {
 
       <VSpacer size={40} />
 
-      <H2
-        color={"bluegrey"}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 color={"bluegrey"} style={{ marginBottom: 16, marginTop: 16 }}>
         Specific buttons
       </H2>
 
diff --git a/example/src/pages/Colors.tsx b/example/src/pages/Colors.tsx
index a99a0a42..339073ab 100644
--- a/example/src/pages/Colors.tsx
+++ b/example/src/pages/Colors.tsx
@@ -11,6 +11,7 @@ import {
   IOThemeDark,
   IOThemeLight,
   IOVisualCostants,
+  LabelMini,
   LabelSmall,
   VSpacer,
   hexToRgba,
@@ -263,11 +264,7 @@ export const Colors = () => (
     )}
 
     {/* Gradients */}
-    <H2
-      color={"bluegrey"}
-      weight={"Semibold"}
-      style={{ marginBottom: sectionTitleMargin }}
-    >
+    <H2 color={"bluegrey"} style={{ marginBottom: sectionTitleMargin }}>
       Gradients
     </H2>
     <View style={styles.gradientItemsWrapper}>
@@ -309,14 +306,13 @@ const ColorBox = ({
     </View>
 
     {name && (
-      <LabelSmall
-        fontSize="small"
+      <LabelMini
         numberOfLines={1}
         color={mode === "dark" ? "grey-200" : "bluegrey"}
         weight={"Regular"}
       >
         {name}
-      </LabelSmall>
+      </LabelMini>
     )}
   </View>
 );
diff --git a/example/src/pages/Icons.tsx b/example/src/pages/Icons.tsx
index ab76d12e..362c1d2e 100644
--- a/example/src/pages/Icons.tsx
+++ b/example/src/pages/Icons.tsx
@@ -100,11 +100,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
+      <H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
         Navigation
       </H2>
       <View style={styles.itemsWrapper}>
@@ -123,11 +119,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
+      <H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
         System
       </H2>
       <View style={styles.itemsWrapper}>
@@ -146,11 +138,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
+      <H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
         Biometric
       </H2>
       <View style={styles.itemsWrapper}>
@@ -169,11 +157,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
+      <H2 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
         Categories
       </H2>
       <View style={styles.itemsWrapper}>
@@ -192,13 +176,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
-        Product
-      </H2>
+      <H2 style={{ marginBottom: 12 }}>Product</H2>
       <View style={styles.itemsWrapper}>
         {Object.entries(IOProductIcons).map(([iconItemName]) => (
           <IconViewerBox
@@ -216,9 +194,7 @@ export const Icons = () => {
         ))}
       </View>
 
-      <H4 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
-        IconContained
-      </H4>
+      <H4 style={{ marginBottom: 12 }}>IconContained</H4>
       <ComponentViewerBox name={"IconContained, default variant"}>
         <View style={IOStyles.row}>
           <IconContained icon="device" variant="tonal" color="neutral" />
@@ -227,9 +203,7 @@ export const Icons = () => {
         </View>
       </ComponentViewerBox>
 
-      <H3 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
-        Sizes
-      </H3>
+      <H3 style={{ marginBottom: 12 }}>Sizes</H3>
       <View style={styles.itemsWrapper}>
         {/* If you want to render another icon in different sizes,
       just change the name below */}
@@ -247,9 +221,7 @@ export const Icons = () => {
           />
         ))}
       </View>
-      <H3 color={theme["textHeading-default"]} style={{ marginBottom: 12 }}>
-        Colors
-      </H3>
+      <H3 style={{ marginBottom: 12 }}>Colors</H3>
       <View style={styles.itemsWrapper}>
         {IOIconColors.map(color => (
           <IconViewerBox
diff --git a/example/src/pages/Layout.tsx b/example/src/pages/Layout.tsx
index f6299466..9786dcca 100644
--- a/example/src/pages/Layout.tsx
+++ b/example/src/pages/Layout.tsx
@@ -9,6 +9,7 @@ import {
   IOColors,
   IOSpacer,
   IOVisualCostants,
+  LabelMini,
   LabelSmall,
   VSpacer,
   VStack,
@@ -56,14 +57,13 @@ export const Layout = () => {
                 }}
               >
                 <Body color={theme["textBody-secondary"]}>Content example</Body>
-                <LabelSmall
+                <LabelMini
                   style={{ position: "absolute", right: 4, top: 4 }}
-                  fontSize="small"
                   weight="Regular"
                   color={theme["textBody-tertiary"]}
                 >
                   {value}
-                </LabelSmall>
+                </LabelMini>
               </View>
             </ContentWrapper>
           </View>
diff --git a/example/src/pages/ListItem.tsx b/example/src/pages/ListItem.tsx
index c97c2f09..f0b20461 100644
--- a/example/src/pages/ListItem.tsx
+++ b/example/src/pages/ListItem.tsx
@@ -16,8 +16,7 @@ import {
   ListItemTransactionLogo,
   ListItemTransactionStatusWithBadge,
   VSpacer,
-  useIOExperimentalDesign,
-  useIOTheme
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { Alert, View } from "react-native";
@@ -30,16 +29,10 @@ const onButtonPress = () => {
 
 export const ListItems = () => {
   const { isExperimental, setExperimental } = useIOExperimentalDesign();
-  const theme = useIOTheme();
+
   return (
     <Screen>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemNav
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemNav</H2>
       <ListItemSwitch
         label="Abilita Design Sperimentale"
         value={isExperimental}
@@ -47,72 +40,26 @@ export const ListItems = () => {
       />
       {renderListItemNav()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemInfoCopy
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemInfoCopy</H2>
       {renderListItemInfoCopy()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemInfo
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemInfo</H2>
       {renderListItemInfo()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemHeader
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemHeader</H2>
       {renderListItemHeader()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemAmount
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemAmount</H2>
       {renderListItemAmount()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemAction
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemAction</H2>
       {renderListItemAction()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemTransaction
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemTransaction</H2>
       {renderListItemTransaction()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ListItemRadio
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ListItemRadio</H2>
       {renderListItemRadio()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>
         ListItemRadioWithAmount
       </H2>
       {renderListItemRadioWithAmount()}
diff --git a/example/src/pages/Logos.tsx b/example/src/pages/Logos.tsx
index be97df26..a8181bf2 100644
--- a/example/src/pages/Logos.tsx
+++ b/example/src/pages/Logos.tsx
@@ -16,8 +16,7 @@ import {
   LogoPaymentCard,
   LogoPaymentExt,
   VSpacer,
-  hexToRgba,
-  useIOTheme
+  hexToRgba
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { ScrollView, StyleSheet, View } from "react-native";
@@ -44,54 +43,30 @@ const styles = StyleSheet.create({
   }
 });
 
-export const Logos = () => {
-  const theme = useIOTheme();
-
-  return (
-    <Screen>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{
-          marginBottom: 12,
-          paddingTop: IOVisualCostants.appMarginDefault
-        }}
-      >
-        Avatar
-      </H2>
-      {renderAvatar()}
+export const Logos = () => (
+  <Screen>
+    <H2
+      style={{
+        marginBottom: 12,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Avatar
+    </H2>
+    {renderAvatar()}
 
-      <VSpacer size={24} />
+    <VSpacer size={24} />
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
-        Payment Networks (Small)
-      </H2>
-      {renderPaymentLogosSmall()}
+    <H2 style={{ marginBottom: 12 }}>Payment Networks (Small)</H2>
+    {renderPaymentLogosSmall()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
-        Payment Networks (Big)
-      </H2>
-      {renderPaymentLogosBig()}
+    <H2 style={{ marginBottom: 12 }}>Payment Networks (Big)</H2>
+    {renderPaymentLogosBig()}
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 12 }}
-      >
-        Payment Networks (Card)
-      </H2>
-      {renderPaymentLogosCard()}
-    </Screen>
-  );
-};
+    <H2 style={{ marginBottom: 12 }}>Payment Networks (Card)</H2>
+    {renderPaymentLogosCard()}
+  </Screen>
+);
 
 const cdnPath = "https://assets.cdn.io.italia.it/logos/organizations/";
 
diff --git a/example/src/pages/MainScreen.tsx b/example/src/pages/MainScreen.tsx
index dbad4c2d..f455ec41 100644
--- a/example/src/pages/MainScreen.tsx
+++ b/example/src/pages/MainScreen.tsx
@@ -1,18 +1,18 @@
-import { SectionList, View } from "react-native";
-import * as React from "react";
 import {
-  IOStyles,
   Divider,
   H1,
+  IOStyles,
   LabelSmall,
-  VSpacer,
   ListItemNav,
-  useIOExperimentalDesign,
   ListItemSwitch,
+  VSpacer,
+  useIOExperimentalDesign,
   useIOThemeContext
 } from "@pagopa/io-app-design-system";
-import APP_ROUTES from "../navigation/routes";
+import * as React from "react";
+import { SectionList, View } from "react-native";
 import { AppParamsList } from "../navigation/params";
+import APP_ROUTES from "../navigation/routes";
 import { IOStackNavigationRouteProps } from "../utils/types";
 
 type Props = IOStackNavigationRouteProps<AppParamsList, "DESIGN_SYSTEM_MAIN">;
@@ -76,7 +76,7 @@ const MainScreen = (props: Props) => {
     section: { title: string; description?: string };
   }) => (
     <View style={{ marginTop: 24, marginBottom: 8 }}>
-      <H1 color={theme["textHeading-default"]}>{title}</H1>
+      <H1>{title}</H1>
       {description && (
         <LabelSmall weight={"Regular"} color={theme["textBody-tertiary"]}>
           {description}
diff --git a/example/src/pages/Modules.tsx b/example/src/pages/Modules.tsx
index d3cfae17..66c338ed 100644
--- a/example/src/pages/Modules.tsx
+++ b/example/src/pages/Modules.tsx
@@ -8,8 +8,7 @@ import {
   ModuleNavigation,
   ModulePaymentNotice,
   ModuleSummary,
-  useIOExperimentalDesign,
-  useIOTheme
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { Alert, ImageSourcePropType, View } from "react-native";
@@ -370,7 +369,7 @@ const renderModuleSummary = () => (
 
 const Modules = () => {
   const { isExperimental, setExperimental } = useIOExperimentalDesign();
-  const theme = useIOTheme();
+
   return (
     <Screen>
       <ListItemSwitch
@@ -378,61 +377,19 @@ const Modules = () => {
         value={isExperimental}
         onSwitchValueChange={setExperimental}
       />
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleIDP
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleIDP</H2>
       {renderModuleIDP()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModulePaymentNotice
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModulePaymentNotice</H2>
       {renderModulePaymentNotice()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleSummary
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleSummary</H2>
       {renderModuleSummary()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleCheckout
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleCheckout</H2>
       {renderModuleCheckout()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleAttachment
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleAttachment</H2>
       {renderModuleAttachment()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleCredential
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleCredential</H2>
       {renderModuleCredential()}
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{ marginBottom: 16, marginTop: 16 }}
-      >
-        ModuleNavigation
-      </H2>
+      <H2 style={{ marginBottom: 16, marginTop: 16 }}>ModuleNavigation</H2>
       {renderModuleNavigation()}
     </Screen>
   );
diff --git a/example/src/pages/Pictograms.tsx b/example/src/pages/Pictograms.tsx
index 608ee096..dc47cbe0 100644
--- a/example/src/pages/Pictograms.tsx
+++ b/example/src/pages/Pictograms.tsx
@@ -10,8 +10,7 @@ import {
   Pictogram,
   PictogramBleed,
   SVGPictogramProps,
-  hexToRgba,
-  useIOTheme
+  hexToRgba
 } from "@pagopa/io-app-design-system";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
@@ -71,156 +70,143 @@ const sortedIOPictogramsBleed = sortPictogramSet(IOPictogramsBleed);
 const sortedIOPictogramsObject = sortPictogramSet(IOPictogramsObject);
 const sortedIOPictogramsLegacy = sortPictogramSet(IOPictogramsLegacy);
 
-export const Pictograms = () => {
-  const theme = useIOTheme();
-  return (
-    <Screen>
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{
-          marginBottom: 16,
-          paddingTop: IOVisualCostants.appMarginDefault
-        }}
-      >
-        Pictograms
-      </H2>
-      <View style={styles.itemsWrapper}>
-        {Object.entries(sortedIOPictograms).map(([pictogramItemName]) => (
-          <AssetViewerBox
-            key={pictogramItemName}
-            name={pictogramItemName}
-            type={
-              Object.keys(IOPictogramsBleed).includes(pictogramItemName)
-                ? "hasBleed"
-                : "vector"
-            }
-            image={
-              <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
-            }
-          />
-        ))}
-      </View>
+export const Pictograms = () => (
+  <Screen>
+    <H2
+      style={{
+        marginBottom: 16,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Pictograms
+    </H2>
+    <View style={styles.itemsWrapper}>
+      {Object.entries(sortedIOPictograms).map(([pictogramItemName]) => (
+        <AssetViewerBox
+          key={pictogramItemName}
+          name={pictogramItemName}
+          type={
+            Object.keys(IOPictogramsBleed).includes(pictogramItemName)
+              ? "hasBleed"
+              : "vector"
+          }
+          image={
+            <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
+          }
+        />
+      ))}
+    </View>
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{
-          marginBottom: 16,
-          paddingTop: IOVisualCostants.appMarginDefault
-        }}
-      >
-        Bleed Pictograms
-      </H2>
-      <View style={styles.itemsWrapper}>
-        {Object.entries(sortedIOPictogramsBleed).map(([pictogramItemName]) => (
-          <AssetViewerBox
-            type="bleed"
-            key={pictogramItemName}
-            name={pictogramItemName}
-            size="small"
-            image={
-              <PictogramBleed
-                name={pictogramItemName as IOPictogramsBleed}
-                size="100%"
-              />
-            }
-          />
-        ))}
-      </View>
+    <H2
+      style={{
+        marginBottom: 16,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Bleed Pictograms
+    </H2>
+    <View style={styles.itemsWrapper}>
+      {Object.entries(sortedIOPictogramsBleed).map(([pictogramItemName]) => (
+        <AssetViewerBox
+          type="bleed"
+          key={pictogramItemName}
+          name={pictogramItemName}
+          size="small"
+          image={
+            <PictogramBleed
+              name={pictogramItemName as IOPictogramsBleed}
+              size="100%"
+            />
+          }
+        />
+      ))}
+    </View>
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
-        style={{
-          marginBottom: 16,
-          paddingTop: IOVisualCostants.appMarginDefault
-        }}
-      >
-        Objects Pictograms
-      </H2>
-      <View style={styles.itemsWrapper}>
-        {Object.entries(sortedIOPictogramsObject).map(([pictogramItemName]) => (
-          <AssetViewerBox
-            key={pictogramItemName}
-            name={pictogramItemName}
-            image={
-              <Pictogram
-                name={pictogramItemName as IOPictogramsObject}
-                size="100%"
-              />
-            }
-          />
-        ))}
-      </View>
+    <H2
+      style={{
+        marginBottom: 16,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Objects Pictograms
+    </H2>
+    <View style={styles.itemsWrapper}>
+      {Object.entries(sortedIOPictogramsObject).map(([pictogramItemName]) => (
+        <AssetViewerBox
+          key={pictogramItemName}
+          name={pictogramItemName}
+          image={
+            <Pictogram
+              name={pictogramItemName as IOPictogramsObject}
+              size="100%"
+            />
+          }
+        />
+      ))}
+    </View>
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
+    <H2
+      style={{
+        marginBottom: 16,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Color mode agnostic
+    </H2>
+    <ComponentViewerBox name={`pictogramStyle = "light-content"`}>
+      <View
         style={{
-          marginBottom: 16,
-          paddingTop: IOVisualCostants.appMarginDefault
+          borderRadius: 8,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          backgroundColor: IOColors["blueIO-500"],
+          flexDirection: "row"
         }}
       >
-        Color mode agnostic
-      </H2>
-      <ComponentViewerBox name={`pictogramStyle = "light-content"`}>
-        <View
-          style={{
-            borderRadius: 8,
-            padding: 16,
-            alignContent: "center",
-            justifyContent: "center",
-            backgroundColor: IOColors["blueIO-500"],
-            flexDirection: "row"
-          }}
-        >
-          <Pictogram name="feature" pictogramStyle="light-content" />
-          <HSpacer size={24} />
-          <Pictogram name="umbrellaNew" pictogramStyle="light-content" />
-        </View>
-      </ComponentViewerBox>
-
-      <ComponentViewerBox name={`pictogramStyle = "dark-content"`}>
-        <View
-          style={{
-            borderRadius: 8,
-            padding: 16,
-            alignContent: "center",
-            justifyContent: "center",
-            backgroundColor: IOColors.white,
-            flexDirection: "row",
-            borderColor: hexToRgba(IOColors.black, 0.1),
-            borderWidth: 1
-          }}
-        >
-          <Pictogram name="feedback" pictogramStyle="dark-content" />
-          <HSpacer size={24} />
-          <Pictogram name="charity" pictogramStyle="dark-content" />
-        </View>
-      </ComponentViewerBox>
+        <Pictogram name="feature" pictogramStyle="light-content" />
+        <HSpacer size={24} />
+        <Pictogram name="umbrellaNew" pictogramStyle="light-content" />
+      </View>
+    </ComponentViewerBox>
 
-      <H2
-        color={theme["textHeading-default"]}
-        weight={"Semibold"}
+    <ComponentViewerBox name={`pictogramStyle = "dark-content"`}>
+      <View
         style={{
-          marginBottom: 16,
-          paddingTop: IOVisualCostants.appMarginDefault
+          borderRadius: 8,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          backgroundColor: IOColors.white,
+          flexDirection: "row",
+          borderColor: hexToRgba(IOColors.black, 0.1),
+          borderWidth: 1
         }}
       >
-        Legacy Pictograms
-      </H2>
-      <View style={styles.itemsWrapper}>
-        {Object.entries(sortedIOPictogramsLegacy).map(([pictogramItemName]) => (
-          <AssetViewerBox
-            key={pictogramItemName}
-            name={pictogramItemName}
-            image={
-              <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
-            }
-          />
-        ))}
+        <Pictogram name="feedback" pictogramStyle="dark-content" />
+        <HSpacer size={24} />
+        <Pictogram name="charity" pictogramStyle="dark-content" />
       </View>
-    </Screen>
-  );
-};
+    </ComponentViewerBox>
+
+    <H2
+      style={{
+        marginBottom: 16,
+        paddingTop: IOVisualCostants.appMarginDefault
+      }}
+    >
+      Legacy Pictograms
+    </H2>
+    <View style={styles.itemsWrapper}>
+      {Object.entries(sortedIOPictogramsLegacy).map(([pictogramItemName]) => (
+        <AssetViewerBox
+          key={pictogramItemName}
+          name={pictogramItemName}
+          image={
+            <Pictogram name={pictogramItemName as IOPictograms} size="100%" />
+          }
+        />
+      ))}
+    </View>
+  </Screen>
+);
diff --git a/example/src/pages/Typography.tsx b/example/src/pages/Typography.tsx
index 8a30f585..14e5c6bb 100644
--- a/example/src/pages/Typography.tsx
+++ b/example/src/pages/Typography.tsx
@@ -15,15 +15,12 @@ import {
   Hero,
   IOColors,
   Label,
-  LabelLink,
+  LabelMini,
   LabelSmall,
   LabelSmallAlt,
   MdH1,
   MdH2,
   MdH3,
-  MdH4,
-  MdH5,
-  MdH6,
   VSpacer,
   VStack
 } from "@pagopa/io-app-design-system";
@@ -41,6 +38,8 @@ const styles = StyleSheet.create({
   }
 });
 
+const linkOnPress = () => Alert.alert("onPress triggered");
+
 export const Typography = () => (
   <Screen>
     <VStack space={40}>
@@ -65,15 +64,18 @@ export const Typography = () => (
           lorem aliquam, aliquam massa eget, commodo erat. Maecenas finibus dui
           massa, eget pharetra mauris posuere semper.
         </Body>
+        <Body weight="Semibold">Body Semibold</Body>
+        <Body weight="Bold">Body Bold</Body>
+        <Body asLink onPress={linkOnPress}>
+          Body asLink
+        </Body>
         <BodyMonospace>BodyMonoSpace</BodyMonospace>
       </VStack>
       <VStack space={16}>
         <LabelSmallRow />
         <LabelSmallAltRow />
+        <LabelMiniRow />
         <LabelRow />
-        <LabelLink onPress={() => Alert.alert("onPress LabelLink!")}>
-          LabelLink
-        </LabelLink>
       </VStack>
     </VStack>
 
@@ -85,9 +87,6 @@ export const Typography = () => (
       <MdH1Row />
       <MdH2Row />
       <MdH3Row />
-      <MdH4Row />
-      <MdH5Row />
-      <MdH6Row />
     </VStack>
 
     <VSpacer size={40} />
@@ -204,17 +203,115 @@ export const ChipRow = () => (
 );
 
 export const LabelSmallRow = () => (
-  <View style={styles.row}>
-    <LabelSmall>Label small</LabelSmall>
-    <HSpacer size={16} />
-    <LabelSmall color={"bluegrey"}>Label small</LabelSmall>
-    <HSpacer size={16} />
-    <LabelSmall color={"red"}>Label small</LabelSmall>
-    <HSpacer size={16} />
-    <View style={{ backgroundColor: IOColors.bluegrey }}>
-      <LabelSmall color={"white"}>Label small</LabelSmall>
+  <>
+    <View style={styles.row}>
+      <LabelSmall>Label small</LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall color="grey-700">Label small</LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall color={"red"}>Label small</LabelSmall>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelSmall color={"white"}>Label small</LabelSmall>
+      </View>
+      <HSpacer size={16} />
+      <LabelSmall asLink onPress={linkOnPress}>
+        Label small asLink
+      </LabelSmall>
     </View>
-  </View>
+    <View style={styles.row}>
+      <LabelSmall weight="Semibold">Label small SB</LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall weight="Semibold" color="grey-700">
+        Label small SB
+      </LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall weight="Semibold" color={"red"}>
+        Label small SB
+      </LabelSmall>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelSmall weight="Semibold" color={"white"}>
+          Label small SB
+        </LabelSmall>
+      </View>
+      <HSpacer size={16} />
+      <LabelSmall asLink onPress={linkOnPress} weight="Semibold">
+        Label small SB asLink
+      </LabelSmall>
+    </View>
+    <View style={styles.row}>
+      <LabelSmall weight="Regular">Label small Regular</LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall weight="Regular" color="grey-700">
+        Label small Regular
+      </LabelSmall>
+      <HSpacer size={16} />
+      <LabelSmall weight="Regular" color={"red"}>
+        Label small Regular
+      </LabelSmall>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelSmall weight="Regular" color={"white"}>
+          Label small Regular
+        </LabelSmall>
+      </View>
+      <HSpacer size={16} />
+      <LabelSmall asLink onPress={linkOnPress} weight="Regular">
+        Label small Regular asLink
+      </LabelSmall>
+    </View>
+  </>
+);
+
+export const LabelMiniRow = () => (
+  <>
+    <View style={styles.row}>
+      <LabelMini>Label mini</LabelMini>
+      <HSpacer size={16} />
+      <LabelMini color="grey-700">Label mini</LabelMini>
+      <HSpacer size={16} />
+      <LabelMini color={"red"}>Label mini</LabelMini>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelMini color={"white"}>Label mini</LabelMini>
+      </View>
+    </View>
+    <View style={styles.row}>
+      <LabelMini weight="Semibold">Label mini SB</LabelMini>
+      <HSpacer size={16} />
+      <LabelMini weight="Semibold" color="grey-700">
+        Label mini SB
+      </LabelMini>
+      <HSpacer size={16} />
+      <LabelMini weight="Semibold" color={"red"}>
+        Label mini SB
+      </LabelMini>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelMini weight="Semibold" color={"white"}>
+          Label mini SB
+        </LabelMini>
+      </View>
+    </View>
+    <View style={styles.row}>
+      <LabelMini weight="Regular">Label mini Regular</LabelMini>
+      <HSpacer size={16} />
+      <LabelMini weight="Regular" color="grey-700">
+        Label mini Regular
+      </LabelMini>
+      <HSpacer size={16} />
+      <LabelMini weight="Regular" color={"red"}>
+        Label mini Regular
+      </LabelMini>
+      <HSpacer size={16} />
+      <View style={{ backgroundColor: IOColors["grey-700"] }}>
+        <LabelMini weight="Regular" color={"white"}>
+          Label mini Regular
+        </LabelMini>
+      </View>
+    </View>
+  </>
 );
 
 export const LabelSmallAltRow = () => (
@@ -223,7 +320,7 @@ export const LabelSmallAltRow = () => (
     <HSpacer size={16} />
     <LabelSmallAlt color={"bluegrey"}>Label small alt</LabelSmallAlt>
     <HSpacer size={16} />
-    <View style={{ backgroundColor: IOColors.bluegrey }}>
+    <View style={{ backgroundColor: IOColors["grey-700"] }}>
       <LabelSmallAlt color={"white"}>Label small alt</LabelSmallAlt>
     </View>
   </View>
@@ -233,9 +330,21 @@ export const LabelRow = () => (
   <View style={styles.row}>
     <Label>Label</Label>
     <HSpacer size={16} />
-    <View style={{ backgroundColor: IOColors.bluegrey }}>
+    <View style={{ backgroundColor: IOColors["grey-700"] }}>
       <Label color={"white"}>Label</Label>
     </View>
+    <HSpacer size={16} />
+    <Label asLink onPress={() => Alert.alert("onPress LabelLink!")}>
+      Label asLink
+    </Label>
+    <HSpacer size={16} />
+    <Label
+      weight="Regular"
+      asLink
+      onPress={() => Alert.alert("onPress LabelLink!")}
+    >
+      Label Regular asLink
+    </Label>
   </View>
 );
 
@@ -259,24 +368,3 @@ export const MdH3Row = () => (
     <MdH3 style={styles.distancedTitle}>{getLongerTitle("Markdown H3")}</MdH3>
   </VStack>
 );
-
-export const MdH4Row = () => (
-  <VStack space={4}>
-    <MdH4>{getTitle("Markdown H4")}</MdH4>
-    <MdH4 style={styles.distancedTitle}>{getLongerTitle("Markdown H4")}</MdH4>
-  </VStack>
-);
-
-export const MdH5Row = () => (
-  <VStack space={4}>
-    <MdH5>{getTitle("Markdown H5")}</MdH5>
-    <MdH5 style={styles.distancedTitle}>{getLongerTitle("Markdown H5")}</MdH5>
-  </VStack>
-);
-
-export const MdH6Row = () => (
-  <VStack space={4}>
-    <MdH6>{getTitle("Markdown H6")}</MdH6>
-    <MdH6 style={styles.distancedTitle}>{getLongerTitle("Markdown H6")}</MdH6>
-  </VStack>
-);
diff --git a/jestSetup.js b/jestSetup.js
index d0f2607a..d28af3e0 100644
--- a/jestSetup.js
+++ b/jestSetup.js
@@ -43,4 +43,9 @@ global.fetch = nodeFetch;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any,functional/immutable-data
 global.AbortController = AbortController;
 // eslint-disable-next-line functional/immutable-data, no-underscore-dangle
-global.__reanimatedWorkletInit = jest.fn();
\ No newline at end of file
+global.__reanimatedWorkletInit = jest.fn();
+
+jest.mock("./src/utils/accessibility", () => ({
+  useBoldTextEnabled: () => false,
+  getAccessibleAmountText: t => t
+}));
diff --git a/package.json b/package.json
index 0c7bc46a..f075df1a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "1.47.2",
+  "version": "2.0.2",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
diff --git a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
index 678d98b6..6c9fb1d6 100644
--- a/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
+++ b/src/components/Advice/__test__/__snapshots__/advice.test.tsx.snap
@@ -85,33 +85,21 @@ exports[`Test Advice Components - Experimental Enabled Advice Snapshot 1`] = `
   />
   <Text
     allowFontScaling={true}
-    color="bluegrey"
-    defaultColor="bluegrey"
-    defaultWeight="Regular"
     dynamicTypeRamp="body"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
+        {},
         {
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        {
-          "color": "#475A6D",
+          "color": "#555C70",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 24,
         },
       ]
     }
-    weight="Regular"
   >
     Text
   </Text>
@@ -203,33 +191,21 @@ exports[`Test Advice Components Advice Snapshot 1`] = `
   />
   <Text
     allowFontScaling={false}
-    color="bluegrey"
-    defaultColor="bluegrey"
-    defaultWeight="Regular"
     dynamicTypeRamp="body"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
+        {},
         {
-          "fontSize": 16,
-          "lineHeight": 24,
-        },
-        {
-          "color": "#475A6D",
+          "color": "#555C70",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 24,
         },
       ]
     }
-    weight="Regular"
   >
     Text
   </Text>
diff --git a/src/components/accordion/AccordionItem.tsx b/src/components/accordion/AccordionItem.tsx
index a37f9ee6..4d716e4b 100644
--- a/src/components/accordion/AccordionItem.tsx
+++ b/src/components/accordion/AccordionItem.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import {
   LayoutChangeEvent,
   StyleSheet,
-  Text,
   TouchableWithoutFeedback,
   View
 } from "react-native";
@@ -19,9 +18,8 @@ import {
 } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors, hexToRgba } from "../../core/IOColors";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons/Icon";
-import { H6 } from "../typography";
+import { Body, H6 } from "../typography";
 
 export type AccordionItem = {
   title: string;
@@ -158,11 +156,7 @@ export const AccordionItem = ({
       </TouchableWithoutFeedback>
 
       <AccordionBody expanded={expanded}>
-        {typeof body === "string" ? (
-          <Text style={styles.accordionBodyText}>{body}</Text>
-        ) : (
-          body
-        )}
+        {typeof body === "string" ? <Body>{body}</Body> : body}
       </AccordionBody>
       {/* This gradient adds a smooth end to the content. If it is missing,
       the content will be cut sharply during the height transition. */}
@@ -199,12 +193,6 @@ const styles = StyleSheet.create({
     padding: accordionBodySpacing,
     paddingTop: 0
   },
-  accordionBodyText: {
-    fontSize: 14,
-    lineHeight: 21,
-    color: IOColors["grey-700"],
-    ...makeFontStyleObject("Regular", undefined, "TitilliumSansPro")
-  },
   textContainer: {
     padding: accordionBodySpacing,
     flexDirection: "row",
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 6f24aef8..7e6cd341 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -4,7 +4,6 @@ import {
   PixelRatio,
   Pressable,
   StyleSheet,
-  Text,
   View
 } from "react-native";
 import Animated, {
@@ -15,7 +14,7 @@ import Animated, {
   useSharedValue,
   withSpring
 } from "react-native-reanimated";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
+import { IOVisualCostants } from "../../core";
 import { IOScaleValues, IOSpringValues } from "../../core/IOAnimations";
 import {
   IOColors,
@@ -24,10 +23,10 @@ import {
 } from "../../core/IOColors";
 import { IOAlertRadius } from "../../core/IOShapes";
 import { IOAlertSpacing } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
 import { VSpacer } from "../spacer";
+import { ButtonText } from "../typography";
 import { H4 } from "../typography/H4";
 import { Label } from "../typography/Label";
 
@@ -48,14 +47,6 @@ const styles = StyleSheet.create({
   },
   spacingFullWidth: {
     padding: spacingFullWidth
-  },
-  label: {
-    fontSize: 16,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  labelLegacy: {
-    fontSize: 16,
-    ...makeFontStyleObject("Bold", false, "TitilliumSansPro")
   }
 });
 
@@ -129,7 +120,6 @@ export const Alert = React.forwardRef<View, AlertType>(
     viewRef
   ): JSX.Element => {
     const isPressed: Animated.SharedValue<number> = useSharedValue(0);
-    const { isExperimental } = useIOExperimentalDesign();
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.magnifiedButton?.pressedState;
@@ -198,16 +188,13 @@ export const Alert = React.forwardRef<View, AlertType>(
           {action && (
             <>
               <VSpacer size={8} />
-              <Text
-                style={[
-                  isExperimental ? styles.label : styles.labelLegacy,
-                  { color: IOColors[mapVariantStates[variant].foreground] }
-                ]}
+              <ButtonText
+                color={mapVariantStates[variant].foreground}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
                 {action}
-              </Text>
+              </ButtonText>
             </>
           )}
         </View>
diff --git a/src/components/alert/AlertEdgeToEdge.tsx b/src/components/alert/AlertEdgeToEdge.tsx
index 67eea7d5..fb2472f4 100644
--- a/src/components/alert/AlertEdgeToEdge.tsx
+++ b/src/components/alert/AlertEdgeToEdge.tsx
@@ -170,8 +170,12 @@ export const AlertEdgeToEdge = ({
           {action && (
             <Text
               style={{
-                ...makeFontStyleObject("Bold", false, "TitilliumSansPro"),
-                fontSize: 16,
+                ...makeFontStyleObject(
+                  16,
+                  "TitilliumSansPro",
+                  undefined,
+                  "Bold"
+                ),
                 color: IOColors[mapVariantStates[variant].foreground]
               }}
             >
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index f7321814..12f412e2 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
 import {
   IOBadgeHSpacing,
   IOBadgeRadius,
   IOBadgeVSpacing,
   IOColors,
-  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
+import { IOText } from "../typography";
 
 export type Badge = WithTestID<{
   outline?: boolean;
@@ -52,20 +51,6 @@ const styles = StyleSheet.create({
     borderRadius: IOBadgeRadius,
     paddingHorizontal: IOBadgeHSpacing,
     paddingVertical: IOBadgeVSpacing
-  },
-  label: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    flexShrink: 1
-  },
-  labelFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  legacyLabelFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -178,24 +163,23 @@ export const Badge = ({ text, outline = false, variant, testID }: Badge) => {
             }
       ]}
     >
-      <Text
-        accessibilityLabel={text}
-        importantForAccessibility="yes"
-        accessibilityRole="text"
+      <IOText
+        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+        weight={isExperimental ? "Regular" : "Semibold"}
+        size={12}
+        lineHeight={16}
+        color={foreground}
         numberOfLines={1}
         ellipsizeMode="tail"
-        allowFontScaling={isExperimental}
-        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
-        style={[
-          styles.label,
-          isExperimental ? styles.labelFont : styles.legacyLabelFont,
-          {
-            color: IOColors[foreground]
-          }
-        ]}
+        style={{
+          alignSelf: "center",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          flexShrink: 1
+        }}
       >
         {text}
-      </Text>
+      </IOText>
     </View>
   );
 };
diff --git a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
index 20244e80..1eab52ca 100644
--- a/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
+++ b/src/components/badge/__test__/__snapshots__/badge.test.tsx.snap
@@ -21,29 +21,26 @@ exports[`Test Badge Components - Experimental Enabled Badge Snapshot 1`] = `
   }
 >
   <Text
-    accessibilityLabel="text"
-    accessibilityRole="text"
     allowFontScaling={true}
     ellipsizeMode="tail"
-    importantForAccessibility="yes"
     maxFontSizeMultiplier={1.25}
     numberOfLines={1}
     style={
       [
+        {},
         {
-          "alignSelf": "center",
-          "flexShrink": 1,
-          "fontSize": 12,
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        },
-        {
+          "color": "#555C70",
           "fontFamily": "Readex Pro",
+          "fontSize": 12,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 16,
         },
         {
-          "color": "#555C70",
+          "alignSelf": "center",
+          "flexShrink": 1,
+          "letterSpacing": 0.5,
+          "textTransform": "uppercase",
         },
       ]
     }
@@ -74,29 +71,26 @@ exports[`Test Badge Components Badge Snapshot 1`] = `
   }
 >
   <Text
-    accessibilityLabel="text"
-    accessibilityRole="text"
     allowFontScaling={false}
     ellipsizeMode="tail"
-    importantForAccessibility="yes"
     maxFontSizeMultiplier={1.25}
     numberOfLines={1}
     style={
       [
+        {},
         {
-          "alignSelf": "center",
-          "flexShrink": 1,
-          "fontSize": 12,
-          "lineHeight": 16,
-          "textTransform": "uppercase",
-        },
-        {
+          "color": "#555C70",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 12,
           "fontStyle": "normal",
           "fontWeight": "600",
+          "lineHeight": 16,
         },
         {
-          "color": "#555C70",
+          "alignSelf": "center",
+          "flexShrink": 1,
+          "letterSpacing": 0.5,
+          "textTransform": "uppercase",
         },
       ]
     }
diff --git a/src/components/badge/__test__/badge.test.tsx b/src/components/badge/__test__/badge.test.tsx
index e9f32050..6258083c 100644
--- a/src/components/badge/__test__/badge.test.tsx
+++ b/src/components/badge/__test__/badge.test.tsx
@@ -6,7 +6,7 @@ import { Badge } from "../Badge";
 describe("Test Badge Components", () => {
   it("Badge Snapshot", () => {
     const badge = TestRenderer.create(
-      <Badge text={"text"} variant={"default"}></Badge>
+      <Badge text={"text"} variant={"default"} />
     ).toJSON();
     expect(badge).toMatchSnapshot();
   });
@@ -15,7 +15,7 @@ describe("Test Badge Components", () => {
 describe("Test Badge Components - Experimental Enabled", () => {
   it("Badge Snapshot", () => {
     const badge = TestRendererWithExperimentalEnabledContextProvider(
-      <Badge text={"text"} variant={"default"}></Badge>
+      <Badge text={"text"} variant={"default"} />
     ).toJSON();
     expect(badge).toMatchSnapshot();
   });
diff --git a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
index 63446766..1b5aafde 100644
--- a/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
+++ b/src/components/banner/__test__/__snapshots__/banner.test.tsx.snap
@@ -73,33 +73,21 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
     >
       <Text
         allowFontScaling={true}
-        color="blueIO-850"
-        defaultColor="black"
-        defaultWeight="Regular"
         dynamicTypeRamp="headline"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-            "lineHeight": 24,
-          }
-        }
         maxFontSizeMultiplier={1.25}
         style={
           [
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            },
+            {},
             {
               "color": "#031344",
               "fontFamily": "Readex Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "lineHeight": 24,
             },
           ]
         }
-        weight="Regular"
       >
         Banner title
       </Text>
@@ -197,18 +185,18 @@ exports[`Test Banner Components - Experimental Enabled Banner Snapshot 1`] = `
               allowFontScaling={true}
               ellipsizeMode="tail"
               importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.3}
+              maxFontSizeMultiplier={1.25}
               numberOfLines={1}
               style={
                 [
+                  {},
                   {
+                    "color": "#0E0F13",
                     "fontFamily": "Readex Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "400",
-                  },
-                  {
-                    "color": "#0B3EE3",
+                    "lineHeight": undefined,
                   },
                   {
                     "color": undefined,
@@ -434,33 +422,21 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
     >
       <Text
         allowFontScaling={false}
-        color="blueIO-850"
-        defaultColor="black"
-        defaultWeight="Semibold"
         dynamicTypeRamp="headline"
-        font="TitilliumSansPro"
-        fontStyle={
-          {
-            "fontSize": 18,
-            "lineHeight": 25,
-          }
-        }
         maxFontSizeMultiplier={1.25}
         style={
           [
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            },
+            {},
             {
               "color": "#031344",
               "fontFamily": "Titillium Sans Pro",
+              "fontSize": 18,
               "fontStyle": "normal",
               "fontWeight": "600",
+              "lineHeight": 25,
             },
           ]
         }
-        weight="Semibold"
       >
         Banner title
       </Text>
@@ -558,18 +534,18 @@ exports[`Test Banner Components Banner Snapshot 1`] = `
               allowFontScaling={false}
               ellipsizeMode="tail"
               importantForAccessibility="no-hide-descendants"
-              maxFontSizeMultiplier={1.3}
+              maxFontSizeMultiplier={1.25}
               numberOfLines={1}
               style={
                 [
+                  {},
                   {
+                    "color": "#0E0F13",
                     "fontFamily": "Titillium Sans Pro",
                     "fontSize": 16,
                     "fontStyle": "normal",
                     "fontWeight": "700",
-                  },
-                  {
-                    "color": "#0073E6",
+                    "lineHeight": undefined,
                   },
                   {
                     "color": undefined,
diff --git a/src/components/buttons/ButtonLink.tsx b/src/components/buttons/ButtonLink.tsx
index 737f79c4..2b1e97d8 100644
--- a/src/components/buttons/ButtonLink.tsx
+++ b/src/components/buttons/ButtonLink.tsx
@@ -1,10 +1,5 @@
 import React, { useCallback, useMemo } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -23,7 +18,6 @@ import {
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -32,7 +26,7 @@ import {
   IconClassComponent
 } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
-import { buttonTextFontSize } from "../typography";
+import { IOText, buttonTextFontSize } from "../typography";
 
 export type ColorButtonLink = "primary" | "contrast";
 
@@ -102,20 +96,6 @@ const mapLegacyColorStates: Record<
 };
 
 const DISABLED_OPACITY = 0.5;
-const IOButtonStylesLocal = StyleSheet.create({
-  label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
-    fontSize: buttonTextFontSize
-  }
-});
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const IOButtonLegacyStylesLocal = StyleSheet.create({
-  label: {
-    fontSize: 16,
-    ...makeFontStyleObject("Bold", false, "TitilliumSansPro")
-  }
-});
 
 export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
   (
@@ -139,10 +119,8 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
       [isExperimental]
     );
-    const buttonStylesLocal = useMemo(
-      () => (isExperimental ? IOButtonStylesLocal : IOButtonLegacyStylesLocal),
-      [isExperimental]
-    );
+
+    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
 
     // Scaling transformation applied when the button is pressed
     const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
@@ -255,24 +233,23 @@ export const ButtonLink = React.forwardRef<View, ButtonLinkProps>(
               <HSpacer size={8} />
             </>
           )}
-          <Animated.Text
+          <AnimatedIOText
             accessible={false}
             accessibilityElementsHidden
             importantForAccessibility="no-hide-descendants"
-            style={[
-              buttonStylesLocal.label,
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Bold"}
+            size={buttonTextFontSize}
+            style={
               disabled
                 ? { color: colorMap[color]?.label?.disabled }
-                : { color: colorMap[color]?.label?.default },
-              !disabled && pressedColorLabelAnimationStyle
-            ]}
+                : { ...pressedColorLabelAnimationStyle }
+            }
             numberOfLines={1}
             ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
           >
             {label}
-          </Animated.Text>
+          </AnimatedIOText>
         </Animated.View>
       </Pressable>
     );
diff --git a/src/components/buttons/ButtonOutline.tsx b/src/components/buttons/ButtonOutline.tsx
index 3f1c0f44..877b8a3a 100644
--- a/src/components/buttons/ButtonOutline.tsx
+++ b/src/components/buttons/ButtonOutline.tsx
@@ -24,7 +24,6 @@ import {
   hexToRgba,
   useIOExperimentalDesign
 } from "../../core/";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import {
   AnimatedIcon,
@@ -33,7 +32,7 @@ import {
   IconClassComponent
 } from "../icons";
 import { HSpacer } from "../spacer/Spacer";
-import { buttonTextFontSize } from "../typography";
+import { IOText, buttonTextFontSize } from "../typography";
 
 type ColorButtonOutline = "primary" | "contrast" | "danger";
 export type ButtonOutline = WithTestID<
@@ -193,11 +192,6 @@ const mapLegacyColorStates: Record<
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
 const IOButtonLegacyStylesLocal = StyleSheet.create({
-  // eslint-disable-next-line react-native/no-unused-styles
-  label: {
-    ...makeFontStyleObject("Bold")
-  },
-  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 1
   }
@@ -209,12 +203,6 @@ const iconSize: IOIconSizeScale = 20;
 const DISABLED_OPACITY = 0.5;
 
 const IOButtonStylesLocal = StyleSheet.create({
-  // eslint-disable-next-line react-native/no-unused-styles
-  label: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro"),
-    fontSize: buttonTextFontSize
-  },
-  // eslint-disable-next-line react-native/no-unused-styles
   buttonWithBorder: {
     borderWidth: 2
   }
@@ -239,6 +227,8 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
     const { isExperimental } = useIOExperimentalDesign();
     const isPressed: Animated.SharedValue<number> = useSharedValue(0);
 
+    const AnimatedIOText = Animated.createAnimatedComponent(IOText);
+
     const colorMap = React.useMemo(
       () => (isExperimental ? mapColorStates : mapLegacyColorStates),
       [isExperimental]
@@ -383,25 +373,24 @@ export const ButtonOutline = React.forwardRef<View, ButtonOutline>(
               <HSpacer size={8} />
             </>
           )}
-          <Animated.Text
+          <AnimatedIOText
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Bold"}
+            size={buttonTextFontSize}
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+            numberOfLines={1}
+            ellipsizeMode="tail"
             style={[
-              buttonStylesLocal.label,
               buttonStyles.label,
               disabled
                 ? { color: colorMap[color]?.label?.disabled }
-                : { color: colorMap[color]?.label?.default },
-              !disabled && pressedColorLabelAnimationStyle
+                : { ...pressedColorLabelAnimationStyle }
             ]}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-            allowFontScaling={isExperimental}
-            maxFontSizeMultiplier={1.3}
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
           >
             {label}
-          </Animated.Text>
+          </AnimatedIOText>
         </Animated.View>
       </Pressable>
     );
diff --git a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
index 65e5ec60..d3fd6131 100644
--- a/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
+++ b/src/components/buttons/__test__/__snapshots__/button.test.tsx.snap
@@ -76,18 +76,18 @@ exports[`Test Buttons Components - Experimental Enabled ButtonLink Snapshot 1`]
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
-          },
-          {
-            "color": "#0B3EE3",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -183,25 +183,27 @@ exports[`Test Buttons Components - Experimental Enabled ButtonOutline Snapshot 1
       allowFontScaling={true}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Readex Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0B3EE3",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -300,36 +302,26 @@ exports[`Test Buttons Components - Experimental Enabled ButtonSolid Snapshot 1`]
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={true}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Regular"
         ellipsizeMode="tail"
-        font="ReadexPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Readex Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "400",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Regular"
       >
         label
       </Text>
@@ -803,18 +795,18 @@ exports[`Test Buttons Components ButtonLink Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
             "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
-          },
-          {
-            "color": "#0073E6",
+            "lineHeight": undefined,
           },
           {
             "color": undefined,
@@ -909,24 +901,27 @@ exports[`Test Buttons Components ButtonOutline Snapshot 1`] = `
       allowFontScaling={false}
       ellipsizeMode="tail"
       importantForAccessibility="no-hide-descendants"
-      maxFontSizeMultiplier={1.3}
+      maxFontSizeMultiplier={1.25}
       numberOfLines={1}
       style={
         [
+          {},
           {
+            "color": "#0E0F13",
             "fontFamily": "Titillium Sans Pro",
+            "fontSize": 16,
             "fontStyle": "normal",
             "fontWeight": "700",
+            "lineHeight": undefined,
           },
-          {
-            "alignSelf": "center",
-          },
-          {
-            "color": "#0073E6",
-          },
-          {
-            "color": undefined,
-          },
+          [
+            {
+              "alignSelf": "center",
+            },
+            {
+              "color": undefined,
+            },
+          ],
         ]
       }
     >
@@ -1024,36 +1019,26 @@ exports[`Test Buttons Components ButtonSolid Snapshot 1`] = `
         accessibilityElementsHidden={true}
         accessible={false}
         allowFontScaling={false}
-        color="white"
-        defaultColor="white"
-        defaultWeight="Bold"
         ellipsizeMode="tail"
-        font="TitilliumSansPro"
-        fontStyle={
-          {
-            "fontSize": 16,
-          }
-        }
         importantForAccessibility="no-hide-descendants"
         maxFontSizeMultiplier={1.25}
         numberOfLines={1}
         style={
           [
-            {
-              "alignSelf": "center",
-            },
-            {
-              "fontSize": 16,
-            },
+            {},
             {
               "color": "#FFFFFF",
               "fontFamily": "Titillium Sans Pro",
+              "fontSize": 16,
               "fontStyle": "normal",
               "fontWeight": "700",
+              "lineHeight": 20,
+            },
+            {
+              "alignSelf": "center",
             },
           ]
         }
-        weight="Bold"
       >
         label
       </Text>
diff --git a/src/components/featureInfo/FeatureInfo.tsx b/src/components/featureInfo/FeatureInfo.tsx
index c84c8e33..0f8edece 100644
--- a/src/components/featureInfo/FeatureInfo.tsx
+++ b/src/components/featureInfo/FeatureInfo.tsx
@@ -8,7 +8,7 @@ import {
   IOPictogramSizeScale,
   IOPictograms,
   Icon,
-  LabelLink,
+  Label,
   Pictogram,
   VSpacer
 } from "../../components";
@@ -21,12 +21,13 @@ type PartialFeatureInfo = {
 
 type FeatureInfoActionProps =
   | {
-      actionLabel?: string;
-      actionOnPress: (event: GestureResponderEvent) => void;
+      action: {
+        label: string;
+        onPress: (event: GestureResponderEvent) => void;
+      };
     }
   | {
-      actionLabel?: never;
-      actionOnPress?: never;
+      action?: never;
     };
 
 type FeatureInfoGraphicProps =
@@ -56,8 +57,7 @@ export const FeatureInfo = ({
   iconName,
   pictogramName,
   body,
-  actionLabel,
-  actionOnPress
+  action
 }: FeatureInfoProps) => (
   <View style={[IOStyles.flex, IOStyles.row, IOStyles.alignCenter]}>
     {iconName && (
@@ -69,21 +69,21 @@ export const FeatureInfo = ({
     <HSpacer size={24} />
     <View style={{ flexShrink: 1 }}>
       {renderNode(body)}
-      {actionLabel && actionOnPress && (
+      {action && (
         <>
           {/* Add "marginTop" equivalent if body text is present.
           This verbose code could be deleted once we got "gap"
           property support */}
           {body && <VSpacer size={4} />}
-          <LabelLink
-            fontSize="regular"
-            onPress={actionOnPress}
+          <Label
+            asLink
+            onPress={action.onPress}
             accessible
             importantForAccessibility={"yes"}
             accessibilityElementsHidden={false}
           >
-            {actionLabel}
-          </LabelLink>
+            {action.label}
+          </Label>
         </>
       )}
     </View>
diff --git a/src/components/layout/HeaderSecondLevel.tsx b/src/components/layout/HeaderSecondLevel.tsx
index e95acc0e..a0db613c 100644
--- a/src/components/layout/HeaderSecondLevel.tsx
+++ b/src/components/layout/HeaderSecondLevel.tsx
@@ -34,10 +34,10 @@ import {
   useIOThemeContext
 } from "../../core";
 import type { IOSpacer, IOSpacingScale } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import IconButton from "../buttons/IconButton";
 import { HSpacer } from "../spacer";
+import { IOText } from "../typography";
 import { HeaderActionProps } from "./common";
 
 type ScrollValues = {
@@ -124,16 +124,6 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     flexShrink: 1,
     marginHorizontal: titleHorizontalMargin
-  },
-  headerTitle: {
-    fontSize: 14,
-    textAlign: "center"
-  },
-  headerTitleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  headerTitleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -172,6 +162,8 @@ export const HeaderSecondLevel = ({
   const isTitleAccessible = React.useMemo(() => !!title.trim(), [title]);
   const paddingTop = useSharedValue(ignoreSafeAreaMargin ? 0 : insets.top);
 
+  const AnimatedIOText = Animated.createAnimatedComponent(IOText);
+
   const iconButtonColorDefault: ComponentProps<typeof IconButton>["color"] =
     themeType === "dark" ? "contrast" : "neutral";
 
@@ -307,20 +299,19 @@ export const HeaderSecondLevel = ({
           accessibilityRole="header"
           style={styles.titleContainer}
         >
-          <Animated.Text
+          <AnimatedIOText
+            size={14}
             numberOfLines={1}
             accessible={false}
+            font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+            weight={isExperimental ? "Regular" : "Semibold"}
             style={[
-              styles.headerTitle,
-              { color: titleColor },
-              isExperimental
-                ? styles.headerTitleFont
-                : styles.headerTitleLegacyFont,
+              { color: titleColor, textAlign: "center" },
               titleAnimatedStyle
             ]}
           >
             {title}
-          </Animated.Text>
+          </AnimatedIOText>
         </View>
         <View style={[IOStyles.row, { flexShrink: 0 }]}>
           {type === "threeActions" && (
diff --git a/src/components/listitems/ListItemAction.tsx b/src/components/listitems/ListItemAction.tsx
index 8b1bd608..ee18cf5a 100644
--- a/src/components/listitems/ListItemAction.tsx
+++ b/src/components/listitems/ListItemAction.tsx
@@ -1,11 +1,5 @@
 import React, { ComponentProps, useCallback, useMemo } from "react";
-import {
-  GestureResponderEvent,
-  Pressable,
-  StyleSheet,
-  Text,
-  View
-} from "react-native";
+import { GestureResponderEvent, Pressable, View } from "react-native";
 import Animated, {
   Extrapolate,
   interpolate,
@@ -21,15 +15,12 @@ import {
   IOListItemVisualParams,
   IOScaleValues,
   IOSpringValues,
-  IOStyles,
   hexToRgba,
-  useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
-import { AnimatedIcon, IOIcons, Icon } from "../icons";
-import { buttonTextFontSize } from "../typography/ButtonText";
+import { AnimatedIcon, IOIcons } from "../icons";
+import { ButtonText } from "../typography/ButtonText";
 
 export type ListItemAction = WithTestID<{
   label: string;
@@ -42,23 +33,6 @@ export type ListItemAction = WithTestID<{
     "accessibilityLabel" | "accessibilityHint"
   >;
 
-const styles = StyleSheet.create({
-  label: {
-    fontSize: buttonTextFontSize,
-    lineHeight: 20,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  }
-});
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyStyles = StyleSheet.create({
-  labelLegacy: {
-    fontSize: buttonTextFontSize,
-    lineHeight: 20,
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
-  }
-});
-
 export const ListItemAction = ({
   variant,
   label,
@@ -70,7 +44,6 @@ export const ListItemAction = ({
 }: ListItemAction) => {
   const isPressed = useSharedValue(0);
 
-  const { isExperimental } = useIOExperimentalDesign();
   const theme = useIOTheme();
 
   const listItemAccessibilityLabel = useMemo(
@@ -83,53 +56,14 @@ export const ListItemAction = ({
     pressed: IOColors[theme["listItem-pressed"]]
   };
 
-  const mapLegacyForegroundColor: Record<
-    NonNullable<ListItemAction["variant"]>,
-    IOColors
-  > = {
-    primary: "blue",
-    danger: "error-600"
-  };
-
   const mapForegroundColor: Record<
     NonNullable<ListItemAction["variant"]>,
-    string
+    IOColors
   > = {
-    primary: IOColors[theme["interactiveElem-default"]],
-    danger: IOColors[theme.errorText]
+    primary: theme["interactiveElem-default"],
+    danger: theme.errorText
   };
 
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacyItemActionIcon = (icon: IOIcons) => (
-    <Icon
-      name={icon}
-      color={mapLegacyForegroundColor[variant]}
-      size={IOListItemVisualParams.iconSize}
-    />
-  );
-
-  const itemActionIcon = (icon: IOIcons) => (
-    <>
-      <AnimatedIcon
-        name={icon}
-        color={mapForegroundColor[variant] as IOColors}
-        size={IOListItemVisualParams.iconSize}
-      />
-    </>
-  );
-
-  const itemActionIconComponent = (icon: IOIcons) =>
-    isExperimental ? itemActionIcon(icon) : legacyItemActionIcon(icon);
-
-  const textStyle = [styles.label, { color: mapForegroundColor[variant] }];
-
-  const legacyTextStyle = [
-    legacyStyles.labelLegacy,
-    { color: IOColors[mapLegacyForegroundColor[variant]] }
-  ];
-
-  const textStyleComponent = isExperimental ? textStyle : legacyTextStyle;
-
   // Scaling transformation applied when the button is pressed
   const animationScaleValue = IOScaleValues?.basicButton?.pressedState;
 
@@ -194,11 +128,15 @@ export const ListItemAction = ({
         >
           {icon && (
             <View style={{ marginRight: IOListItemVisualParams.iconMargin }}>
-              {itemActionIconComponent(icon)}
+              <AnimatedIcon
+                name={icon}
+                color={IOColors[mapForegroundColor[variant]]}
+                size={IOListItemVisualParams.iconSize}
+              />
             </View>
           )}
-          <View style={IOStyles.flex}>
-            <Text style={textStyleComponent}>{label}</Text>
+          <View style={{ flexGrow: 1 }}>
+            <ButtonText color={mapForegroundColor[variant]}>{label}</ButtonText>
           </View>
         </Animated.View>
       </Animated.View>
diff --git a/src/components/listitems/ListItemAmount.tsx b/src/components/listitems/ListItemAmount.tsx
index e3e5ea9c..24f7c638 100644
--- a/src/components/listitems/ListItemAmount.tsx
+++ b/src/components/listitems/ListItemAmount.tsx
@@ -54,9 +54,7 @@ export const ListItemAmount = ({
       importantForAccessibility={"no-hide-descendants"}
       accessibilityElementsHidden={false}
     >
-      <H6 weight="Regular" color={theme["textBody-tertiary"]}>
-        {label}
-      </H6>
+      <H6 color={theme["textBody-tertiary"]}>{label}</H6>
     </View>
   );
 
@@ -80,9 +78,8 @@ export const ListItemAmount = ({
         <View style={IOStyles.flex}>{itemInfoTextComponent}</View>
         <HSpacer size={4} />
         <H3
-          weight={"Semibold"}
-          color={"black"}
           {...valueElementProps}
+          color={theme["textBody-default"]}
           accessibilityLabel={`${listItemAccessibilityLabel}; ${
             valueElementProps?.accessibilityLabel ?? ""
           }`}
diff --git a/src/components/listitems/ListItemSwitch.tsx b/src/components/listitems/ListItemSwitch.tsx
index a2a61c8d..46ad6f0b 100644
--- a/src/components/listitems/ListItemSwitch.tsx
+++ b/src/components/listitems/ListItemSwitch.tsx
@@ -12,7 +12,7 @@ import { LoadingSpinner } from "../loadingSpinner";
 import { IOLogoPaymentType, LogoPayment } from "../logos";
 import { HSpacer, VSpacer } from "../spacer";
 import { NativeSwitch } from "../switch/NativeSwitch";
-import { H6, LabelLink, LabelSmall } from "../typography";
+import { H6, LabelMini, LabelSmall } from "../typography";
 
 type PartialProps = WithTestID<{
   label: string;
@@ -186,9 +186,9 @@ export const ListItemSwitch = React.memo(
         {action && (
           <>
             <VSpacer size={IOSelectionListItemVisualParams.actionMargin} />
-            <LabelLink fontSize="small" onPress={action.onPress}>
+            <LabelMini asLink onPress={action.onPress}>
               {action.label}
-            </LabelLink>
+            </LabelMini>
           </>
         )}
       </View>
diff --git a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
index 00bde58b..71c4dc37 100644
--- a/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
+++ b/src/components/listitems/__test__/__snapshots__/listitem.test.tsx.snap
@@ -72,23 +72,24 @@ exports[`Test List Item Components - Experimental Enabled  ListItemAction Snapsh
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
           }
         }
       >
         <Text
+          allowFontScaling={true}
+          maxFontSizeMultiplier={1.25}
           style={
             [
+              {},
               {
+                "color": "#0B3EE3",
                 "fontFamily": "Readex Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
                 "lineHeight": 20,
               },
-              {
-                "color": "#0B3EE3",
-              },
             ]
           }
         >
@@ -170,17 +171,16 @@ exports[`Test List Item Components - Experimental Enabled  ListItemIDP Snapshot
           {
             "alignSelf": "center",
             "flexShrink": 1,
-            "fontSize": 12,
-            "lineHeight": 16,
+            "letterSpacing": 0.5,
             "textTransform": "uppercase",
           },
           {
             "color": "#555C70",
-          },
-          {
             "fontFamily": "Readex Pro",
+            "fontSize": 12,
             "fontStyle": "normal",
             "fontWeight": "400",
+            "lineHeight": 16,
           },
         ]
       }
@@ -238,66 +238,42 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfo Snapshot
       >
         <Text
           allowFontScaling={true}
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#555C70",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
         <Text
           allowFontScaling={true}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -384,66 +360,42 @@ exports[`Test List Item Components - Experimental Enabled  ListItemInfoCopy Snap
       >
         <Text
           allowFontScaling={true}
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#555C70",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
         <Text
           allowFontScaling={true}
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -596,33 +548,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNav Snapshot
       >
         <Text
           allowFontScaling={true}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -837,33 +777,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemNavAlert Snap
       >
         <Text
           allowFontScaling={true}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           testValue
         </Text>
@@ -1016,34 +944,22 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
       >
         <Text
           allowFontScaling={true}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="footnote"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Readex Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
@@ -1128,33 +1044,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
           />
           <Text
             allowFontScaling={true}
-            color="hanPurple-500"
-            defaultColor="blue"
-            defaultWeight="Bold"
             dynamicTypeRamp="footnote"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 14,
-                  "lineHeight": 21,
-                },
+                {},
                 {
                   "color": "#5517E3",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "lineHeight": 21,
                 },
               ]
             }
-            weight="Regular"
           >
             suggestReason
           </Text>
@@ -1179,33 +1083,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         />
         <Text
           allowFontScaling={true}
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           € 1.000,00
         </Text>
@@ -1440,34 +1332,22 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
       >
         <Text
           allowFontScaling={true}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="footnote"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Readex Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
@@ -1491,33 +1371,21 @@ exports[`Test List Item Components - Experimental Enabled  ListItemRadioWithAmou
         />
         <Text
           allowFontScaling={true}
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Regular"
           dynamicTypeRamp="headline"
-          font="ReadexPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 24,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 24,
-              },
+              {},
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Readex Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 24,
               },
             ]
           }
-          weight="Regular"
         >
           € 1.000,00
         </Text>
@@ -1901,23 +1769,24 @@ exports[`Test List Item Components ListItemAction Snapshot 1`] = `
       <View
         style={
           {
-            "flex": 1,
+            "flexGrow": 1,
           }
         }
       >
         <Text
+          allowFontScaling={false}
+          maxFontSizeMultiplier={1.25}
           style={
             [
+              {},
               {
+                "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
                 "fontSize": 16,
                 "fontStyle": "normal",
-                "fontWeight": "600",
+                "fontWeight": "700",
                 "lineHeight": 20,
               },
-              {
-                "color": "#0073E6",
-              },
             ]
           }
         >
@@ -1999,17 +1868,16 @@ exports[`Test List Item Components ListItemIDP Snapshot 1`] = `
           {
             "alignSelf": "center",
             "flexShrink": 1,
-            "fontSize": 12,
-            "lineHeight": 16,
+            "letterSpacing": 0.5,
             "textTransform": "uppercase",
           },
           {
             "color": "#555C70",
-          },
-          {
             "fontFamily": "Titillium Sans Pro",
+            "fontSize": 12,
             "fontStyle": "normal",
             "fontWeight": "600",
+            "lineHeight": 16,
           },
         ]
       }
@@ -2067,66 +1935,42 @@ exports[`Test List Item Components ListItemInfo Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#555C70",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
         <Text
           allowFontScaling={false}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           testValue
         </Text>
@@ -2213,66 +2057,42 @@ exports[`Test List Item Components ListItemInfoCopy Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="grey-700"
-          defaultColor="blue"
-          defaultWeight="Bold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 14,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#555C70",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 14,
                 "fontStyle": "normal",
                 "fontWeight": "400",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Regular"
         >
           label
         </Text>
         <Text
           allowFontScaling={false}
-          color="blue"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={2}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0073E6",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           testValue
         </Text>
@@ -2425,33 +2245,21 @@ exports[`Test List Item Components ListItemNav Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           testValue
         </Text>
@@ -2666,33 +2474,21 @@ exports[`Test List Item Components ListItemNavAlert Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           testValue
         </Text>
@@ -2845,34 +2641,22 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
       >
         <Text
           allowFontScaling={false}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Semibold"
         >
           label
         </Text>
@@ -2957,33 +2741,21 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
           />
           <Text
             allowFontScaling={false}
-            color="hanPurple-500"
-            defaultColor="blue"
-            defaultWeight="Bold"
             dynamicTypeRamp="footnote"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 14,
-                "lineHeight": 21,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 14,
-                  "lineHeight": 21,
-                },
+                {},
                 {
                   "color": "#5517E3",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 14,
                   "fontStyle": "normal",
                   "fontWeight": "400",
+                  "lineHeight": 21,
                 },
               ]
             }
-            weight="Regular"
           >
             suggestReason
           </Text>
@@ -3008,33 +2780,21 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 1`] = `
         />
         <Text
           allowFontScaling={false}
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           € 1.000,00
         </Text>
@@ -3269,34 +3029,22 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
       >
         <Text
           allowFontScaling={false}
-          color="black"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="footnote"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 16,
-              "lineHeight": 21,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           numberOfLines={1}
           style={
             [
-              {
-                "fontSize": 16,
-                "lineHeight": 21,
-              },
+              {},
               {
                 "color": "#0E0F13",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 16,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 21,
               },
             ]
           }
-          weight="Semibold"
         >
           label
         </Text>
@@ -3320,33 +3068,21 @@ exports[`Test List Item Components ListItemRadioWithAmount Snapshot 2`] = `
         />
         <Text
           allowFontScaling={false}
-          color="blueIO-500"
-          defaultColor="black"
-          defaultWeight="Semibold"
           dynamicTypeRamp="headline"
-          font="TitilliumSansPro"
-          fontStyle={
-            {
-              "fontSize": 18,
-              "lineHeight": 25,
-            }
-          }
           maxFontSizeMultiplier={1.25}
           style={
             [
-              {
-                "fontSize": 18,
-                "lineHeight": 25,
-              },
+              {},
               {
                 "color": "#0B3EE3",
                 "fontFamily": "Titillium Sans Pro",
+                "fontSize": 18,
                 "fontStyle": "normal",
                 "fontWeight": "600",
+                "lineHeight": 25,
               },
             ]
           }
-          weight="Semibold"
         >
           € 1.000,00
         </Text>
diff --git a/src/components/modules/ModuleIDP.tsx b/src/components/modules/ModuleIDP.tsx
index 0851b68e..a046fc41 100644
--- a/src/components/modules/ModuleIDP.tsx
+++ b/src/components/modules/ModuleIDP.tsx
@@ -1,20 +1,12 @@
 import * as React from "react";
+import { Image, ImageSourcePropType, Platform, StyleSheet } from "react-native";
 import {
-  Image,
-  ImageSourcePropType,
-  Platform,
-  StyleSheet,
-  Text
-} from "react-native";
-import {
-  IOColors,
   IOListItemLogoMargin,
-  IOVisualCostants,
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
 import { toAndroidCacheTimestamp } from "../../utils/dates";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOText } from "../typography";
 import {
   PressableModuleBase,
   PressableModuleBaseProps
@@ -28,19 +20,6 @@ interface ModuleIDP extends PressableModuleBaseProps {
 }
 
 const styles = StyleSheet.create({
-  idpName: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    flexShrink: 1
-  },
-  idpNameFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  idpLegacyNameFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
-  },
   idpLogo: {
     marginStart: IOListItemLogoMargin,
     width: 120,
@@ -79,18 +58,22 @@ export const ModuleIDP = ({
       testID={testID}
       withLooseSpacing={withLooseSpacing}
     >
-      <Text
-        allowFontScaling={isExperimental}
-        maxFontSizeMultiplier={IOVisualCostants.maxFontSizeMultiplier}
-        style={[
-          styles.idpName,
-          { color: IOColors[theme["textBody-tertiary"]] },
-          isExperimental ? styles.idpNameFont : styles.idpLegacyNameFont
-        ]}
+      <IOText
+        font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+        weight={isExperimental ? "Regular" : "Semibold"}
+        size={12}
+        lineHeight={16}
+        color={theme["textBody-tertiary"]}
+        textStyle={{
+          alignSelf: "center",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          flexShrink: 1
+        }}
         accessibilityLabel={accessibilityLabel ?? name}
       >
         {name}
-      </Text>
+      </IOText>
       <Image
         accessibilityIgnoresInvertColors
         source={urlLogoIDP}
diff --git a/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap b/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
index a50c87a5..dddc2457 100644
--- a/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
+++ b/src/components/numberpad/__test__/__snapshots__/NumberPad.test.tsx.snap
@@ -91,33 +91,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             1
           </Text>
@@ -182,33 +170,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             2
           </Text>
@@ -273,33 +249,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             3
           </Text>
@@ -380,33 +344,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             4
           </Text>
@@ -471,33 +423,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             5
           </Text>
@@ -562,33 +502,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             6
           </Text>
@@ -669,33 +597,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             7
           </Text>
@@ -760,33 +676,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             8
           </Text>
@@ -851,33 +755,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             9
           </Text>
@@ -1099,33 +991,21 @@ exports[`NumberPad Should match the snapshot 1`] = `
         >
           <Text
             allowFontScaling={false}
-            color="white"
-            defaultColor="bluegreyDark"
-            defaultWeight="Semibold"
             dynamicTypeRamp="title2"
-            font="TitilliumSansPro"
-            fontStyle={
-              {
-                "fontSize": 22,
-                "lineHeight": 33,
-              }
-            }
             maxFontSizeMultiplier={1.25}
             style={
               [
-                {
-                  "fontSize": 22,
-                  "lineHeight": 33,
-                },
+                {},
                 {
                   "color": "#FFFFFF",
                   "fontFamily": "Titillium Sans Pro",
+                  "fontSize": 22,
                   "fontStyle": "normal",
                   "fontWeight": "600",
+                  "lineHeight": 33,
                 },
               ]
             }
-            weight="Semibold"
           >
             0
           </Text>
diff --git a/src/components/searchInput/SearchInput.tsx b/src/components/searchInput/SearchInput.tsx
index b4e87fde..6759fc27 100644
--- a/src/components/searchInput/SearchInput.tsx
+++ b/src/components/searchInput/SearchInput.tsx
@@ -36,7 +36,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { ButtonLink } from "../buttons";
 import { IOIconSizeScale, Icon } from "../icons";
 
@@ -51,7 +51,7 @@ const iconMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-700";
 const iconSize: IOIconSizeScale = 16;
 const iconCloseSize: IOIconSizeScale = 24;
-const inputFontSizePlaceholder: number = 14;
+const inputFontSizePlaceholder: IOFontSize = 14;
 const cancelButtonMargin: IOSpacingScale = 16;
 const inputTransitionDuration: number = 250;
 const inputHeightIOS: number = 36;
@@ -324,12 +324,20 @@ const styles = StyleSheet.create({
     marginRight: iconMargin
   },
   placeholder: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   placeholderLegacy: {
-    fontSize: inputFontSizePlaceholder,
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputFontSizePlaceholder,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    )
   },
   cancelButton: {
     position: "absolute",
diff --git a/src/components/switch/SwitchLabel.tsx b/src/components/switch/SwitchLabel.tsx
index c7767882..dc20db3b 100644
--- a/src/components/switch/SwitchLabel.tsx
+++ b/src/components/switch/SwitchLabel.tsx
@@ -1,10 +1,9 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { Pressable, View } from "react-native";
+import { useIOTheme } from "../../core";
 import { IOStyles } from "../../core/IOStyles";
 import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { HSpacer } from "../spacer/Spacer";
 import { H6 } from "../typography/H6";
 import { AnimatedSwitch } from "./AnimatedSwitch";
@@ -23,17 +22,6 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedSwitch>, "disabled" | "checked"> &
   Pick<React.ComponentProps<typeof Pressable>, "onPress">;
 
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const styles = StyleSheet.create({
-  legacyTextValue: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: IOColors.bluegreyDark,
-    flexShrink: 1,
-    ...makeFontStyleObject("Semibold", undefined, "TitilliumSansPro")
-  }
-});
-
 /**
  * A checkbox with the automatic state management that uses a {@link AnimatedCheckBox}
  * The toggleValue change when a `onPress` event is received and dispatch the `onValueChange`.
@@ -47,24 +35,8 @@ export const SwitchLabel = ({
   disabled,
   onValueChange
 }: OwnProps) => {
-  const [toggleValue, setToggleValue] = useState(checked ?? false);
   const theme = useIOTheme();
-
-  const { isExperimental } = useIOExperimentalDesign();
-  const switchLabelText = (
-    <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
-      {label}
-    </H6>
-  );
-
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  const legacySwitchlabelText = (
-    <Text style={styles.legacyTextValue}>{label}</Text>
-  );
-
-  const switchLabelTextComponent = isExperimental
-    ? switchLabelText
-    : legacySwitchlabelText;
+  const [toggleValue, setToggleValue] = useState(checked ?? false);
 
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
@@ -99,7 +71,9 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        {switchLabelTextComponent}
+        <H6 style={{ flexShrink: 1 }} color={theme["textBody-default"]}>
+          {label}
+        </H6>
       </View>
     </Pressable>
   );
diff --git a/src/components/tabs/TabItem.tsx b/src/components/tabs/TabItem.tsx
index 46e00fb7..c87e6aef 100644
--- a/src/components/tabs/TabItem.tsx
+++ b/src/components/tabs/TabItem.tsx
@@ -20,7 +20,7 @@ import { useSpringPressProgressValue } from "../../utils/hooks/useSpringPressPro
 import { WithTestID } from "../../utils/types";
 import { IOIcons, Icon } from "../icons";
 import { HSpacer } from "../spacer";
-import { LabelHeader } from "../typography/LabelHeader";
+import { LabelSmall } from "../typography";
 
 type ColorMode = "light" | "dark";
 
@@ -257,7 +257,9 @@ const TabItem = ({
             <HSpacer size={4} />
           </>
         )}
-        <LabelHeader color={foregroundColor}>{label}</LabelHeader>
+        <LabelSmall weight="Semibold" color={foregroundColor}>
+          {label}
+        </LabelSmall>
       </Animated.View>
     </Pressable>
   );
diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
index f8d0ff66..406756cb 100644
--- a/src/components/tag/Tag.tsx
+++ b/src/components/tag/Tag.tsx
@@ -1,16 +1,21 @@
 import * as O from "fp-ts/lib/Option";
 import { pipe } from "fp-ts/lib/function";
 import React from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-import { IOColors, IOTagRadius, useIOExperimentalDesign } from "../../core";
+import { Platform, StyleSheet, View } from "react-native";
+import {
+  IOColors,
+  IOTagRadius,
+  useIOExperimentalDesign,
+  useIOTheme
+} from "../../core";
 import {
   IOSpacingScale,
   IOTagHSpacing,
   IOTagVSpacing
 } from "../../core/IOSpacing";
-import { makeFontStyleObject } from "../../utils/fonts";
 import { WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
+import { IOText } from "../typography";
 
 type VariantProps = {
   iconColor: IOColors;
@@ -74,21 +79,6 @@ const styles = StyleSheet.create({
   },
   spacer: {
     width: IOTagIconMargin
-  },
-  label: {
-    fontSize: 12,
-    lineHeight: 16,
-    alignSelf: "center",
-    textTransform: "uppercase",
-    color: IOColors["grey-700"],
-    flexShrink: 1
-  },
-  labelFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
-  },
-  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-  legacyLabelFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
   }
 });
 
@@ -151,6 +141,7 @@ export const Tag = ({
   customIconProps,
   iconAccessibilityLabel
 }: Tag) => {
+  const theme = useIOTheme();
   const { isExperimental } = useIOExperimentalDesign();
 
   const variantProps = getVariantProps(variant, customIconProps);
@@ -177,16 +168,23 @@ export const Tag = ({
       )}
       {variantProps && text && <View style={styles.spacer} />}
       {text && (
-        <Text
+        <IOText
+          font={isExperimental ? "ReadexPro" : "TitilliumSansPro"}
+          weight={isExperimental ? "Regular" : "Semibold"}
+          size={12}
+          lineHeight={16}
+          color={theme["textBody-tertiary"]}
           numberOfLines={1}
           ellipsizeMode="tail"
-          style={[
-            styles.label,
-            isExperimental ? styles.labelFont : styles.legacyLabelFont
-          ]}
+          style={{
+            alignSelf: "center",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            flexShrink: 1
+          }}
         >
           {text}
-        </Text>
+        </IOText>
       )}
     </View>
   );
diff --git a/src/components/textInput/TextInputBase.tsx b/src/components/textInput/TextInputBase.tsx
index f9797213..379b357f 100644
--- a/src/components/textInput/TextInputBase.tsx
+++ b/src/components/textInput/TextInputBase.tsx
@@ -26,7 +26,7 @@ import {
   useIOExperimentalDesign,
   useIOTheme
 } from "../../core";
-import { makeFontStyleObject } from "../../utils/fonts";
+import { IOFontSize, makeFontStyleObject } from "../../utils/fonts";
 import { RNTextInputProps, getInputPropsByType } from "../../utils/textInput";
 import { InputType, WithTestID } from "../../utils/types";
 import { IOIconSizeScale, IOIcons, Icon } from "../icons";
@@ -63,7 +63,7 @@ const inputPaddingVertical: IOSpacingScale = 8;
 const inputRadius: number = 8;
 const inputTransitionDuration: number = 250;
 const inputLabelScaleFactor: number = 0.75; /* 16pt becomes 12pt */
-const inputLabelFontSize: number = 16;
+const inputLabelFontSize: IOFontSize = 16;
 const inputDisabledOpacity: number = 0.5;
 const inputRightElementMargin: IOSpacingScale = 8;
 const iconColor: IOColors = "grey-300";
@@ -100,7 +100,6 @@ const styles = StyleSheet.create({
     Android where the text input scrolls, if the user apply some
     gestures on it with keyboard open */
     paddingVertical: 0,
-    fontSize: 16,
     marginTop: inputMarginTop,
     height: "100%",
     /* Slightly move the input on the left on Android
@@ -108,11 +107,21 @@ const styles = StyleSheet.create({
     ...(Platform.OS === "android" && { marginLeft: -4 })
   },
   textInputStyleFont: {
-    ...makeFontStyleObject("Regular", false, "ReadexPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "ReadexPro",
+      undefined,
+      "Regular"
+    )
   },
   // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
   textInputStyleLegacyFont: {
-    ...makeFontStyleObject("Semibold", false, "TitilliumSansPro")
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Semibold"
+    )
   },
   textInputLabelWrapper: {
     position: "absolute",
@@ -123,9 +132,13 @@ const styles = StyleSheet.create({
     justifyContent: "center"
   },
   textInputLabel: {
-    ...makeFontStyleObject("Regular", false, "TitilliumSansPro"),
-    color: inputLabelColor,
-    fontSize: inputLabelFontSize
+    ...makeFontStyleObject(
+      inputLabelFontSize,
+      "TitilliumSansPro",
+      undefined,
+      "Regular"
+    ),
+    color: inputLabelColor
   }
 });
 
diff --git a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
index ed063489..fbcaf70e 100644
--- a/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
+++ b/src/components/toast/__tests__/__snapshots__/ToastNotification.test.tsx.snap
@@ -25,34 +25,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="turquoise-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#003B3D",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -151,34 +141,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="error-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#5D1313",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -210,34 +190,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="info-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#215C76",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -269,34 +239,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="turquoise-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#003B3D",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -328,34 +288,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="success-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#224021",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -387,34 +337,24 @@ exports[`Test ToastNotification component - Experimental Enabled should match sn
 >
   <Text
     allowFontScaling={true}
-    color="warning-850"
-    defaultColor="white"
-    defaultWeight="Regular"
-    font="ReadexPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#614C15",
           "fontFamily": "Readex Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "400",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Regular"
   >
     Hello
   </Text>
@@ -446,34 +386,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="turquoise-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#003B3D",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
@@ -572,34 +502,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="error-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#5D1313",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
@@ -631,34 +551,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="info-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#215C76",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
@@ -690,34 +600,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="turquoise-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#003B3D",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
@@ -749,34 +649,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="success-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#224021",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
@@ -808,34 +698,24 @@ exports[`Test ToastNotification component should match snapshot for props ({ mes
 >
   <Text
     allowFontScaling={false}
-    color="warning-850"
-    defaultColor="white"
-    defaultWeight="Bold"
-    font="TitilliumSansPro"
-    fontStyle={
-      {
-        "fontSize": 16,
-      }
-    }
     maxFontSizeMultiplier={1.25}
     style={
       [
-        {
-          "flexShrink": 1,
-          "paddingVertical": 2,
-        },
-        {
-          "fontSize": 16,
-        },
+        {},
         {
           "color": "#614C15",
           "fontFamily": "Titillium Sans Pro",
+          "fontSize": 16,
           "fontStyle": "normal",
           "fontWeight": "700",
+          "lineHeight": 20,
+        },
+        {
+          "flexShrink": 1,
+          "paddingVertical": 2,
         },
       ]
     }
-    weight="Bold"
   >
     Hello
   </Text>
diff --git a/src/components/typography/BaseTypography.tsx b/src/components/typography/BaseTypography.tsx
index 140fffda..af895646 100644
--- a/src/components/typography/BaseTypography.tsx
+++ b/src/components/typography/BaseTypography.tsx
@@ -1,8 +1,9 @@
 import React, { useMemo } from "react";
-import { StyleProp, Text, TextStyle, View } from "react-native";
+import { Text, TextStyle, View } from "react-native";
 import { IOColors } from "../../core/IOColors";
 import {
   IOFontFamily,
+  IOFontSize,
   IOFontWeight,
   makeFontStyleObject
 } from "../../utils/fonts";
@@ -19,7 +20,7 @@ type BaseTypographyProps = {
 };
 
 type OwnProps = BaseTypographyProps & {
-  fontStyle?: StyleProp<TextStyle>;
+  fontStyle?: TextStyle;
 } & React.ComponentPropsWithRef<typeof Text>;
 
 /**
@@ -41,13 +42,21 @@ const calculateTextStyle = (
  * used to calculate at runtime the platform-dependent styles.
  * This component shouldn't be used in the application but only to compose others `Typography elements`.
  * @param props
+ * @deprecated Use {@link IOText} instead
  * @constructor
  */
 export const BaseTypography = React.forwardRef<View, OwnProps>((props, ref) => {
   const fontStyle = useMemo(
     () =>
-      calculateTextStyle(props.color, props.weight, props.isItalic, props.font),
-    [props.color, props.weight, props.isItalic, props.font]
+      calculateTextStyle(
+        props.color,
+        props.fontStyle?.fontSize as IOFontSize,
+        props.font,
+        props.fontStyle?.lineHeight,
+        props.weight,
+        props.isItalic ? "italic" : "normal"
+      ),
+    [props.color, props.fontStyle, props.font, props.weight, props.isItalic]
   );
 
   const style = props.style
diff --git a/src/components/typography/Body.tsx b/src/components/typography/Body.tsx
index e88fdf84..05a23122 100644
--- a/src/components/typography/Body.tsx
+++ b/src/components/typography/Body.tsx
@@ -1,50 +1,55 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
 import {
-  IOColors,
-  IOTheme,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  "bluegreyDark" | "white" | "blue" | "bluegrey" | "bluegreyLight"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-default"];
-type AllowedWeight = IOFontWeight | "Regular" | "Semibold";
-
-type BodyProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "TitilliumSansPro";
+type BodyStyleProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 export const bodyFontSize = 16;
 export const bodyLineHeight = 24;
-export const bodyDefaultColor: AllowedColors = "bluegrey";
-export const bodyDefaultWeight: AllowedWeight = "Regular";
 
 /**
  * `Body` typographic style
  */
-export const Body = React.forwardRef<View, BodyProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Body = forwardRef<View, BodyStyleProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const BodyProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "body" /* iOS only */,
-      defaultWeight: bodyDefaultWeight,
-      defaultColor: bodyDefaultColor,
-      font: fontName,
-      fontStyle: { fontSize: bodyFontSize, lineHeight: bodyLineHeight }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "body", // iOS only
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Regular",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
+
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/BodyMonospace.tsx b/src/components/typography/BodyMonospace.tsx
index caffc0d7..78b1d122 100644
--- a/src/components/typography/BodyMonospace.tsx
+++ b/src/components/typography/BodyMonospace.tsx
@@ -1,46 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOVisualCostants,
-  useIOExperimentalDesign,
-  type IOColors
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = Extract<IOColors, "bluegreyDark" | "bluegrey">;
-type AllowedWeight = Extract<IOFontWeight, "Medium">;
-
-type BodyMonospaceProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontName: FontFamily = "DMMono";
-const fontSize = 16;
-const lineHeight = 24;
-const monospaceDefaultWeight = "Medium";
-const monospaceDefaultcolor = "bluegrey";
+import { useIOTheme } from "../../core";
+import { bodyFontSize, bodyLineHeight } from "./Body";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
 /**
  * `BodyMonospace` typographic style
  */
-export const BodyMonospace = React.forwardRef<View, BodyMonospaceProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const BodyMonospace = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+
+    const BodyProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "body", // iOS only
+      font: "DMMono",
+      weight: "Medium",
+      size: bodyFontSize,
+      lineHeight: bodyLineHeight,
+      color: customColor ?? theme["textBody-tertiary"],
+      textStyle: {
+        letterSpacing: 0.5
+      }
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "body" /* iOS only */,
-        defaultWeight: monospaceDefaultWeight,
-        defaultColor: monospaceDefaultcolor,
-        font: fontName,
-        fontStyle: { fontSize, lineHeight }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...BodyProps}>
+        {props.children}
+      </IOText>
     );
   }
 );
diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
index 4f00582b..b73f0a2c 100644
--- a/src/components/typography/ButtonText.tsx
+++ b/src/components/typography/ButtonText.tsx
@@ -1,51 +1,41 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-export type ButtonTextAllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular" | "Bold">;
-
-type ButtonTextProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, ButtonTextAllowedColors>
->;
-
-export const buttonTextFontSize = 16;
+export const buttonTextFontSize: IOFontSize = 16;
 /* Needed to render `ButtonOutline` and`ButtonLink` because they use
 `AnimatedText` for color transition through Reanimated */
-const buttonTextDefaultColor: ButtonTextAllowedColors = "white";
-const buttonTextFontName: IOFontFamily = "ReadexPro";
-const buttonTextDefaultWeight: AllowedWeight = "Regular";
+const defaultColor: IOColors = "white";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyTextFontName: IOFontFamily = "TitilliumSansPro";
-const legacyTextDefaultWeight: AllowedWeight = "Bold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Bold";
 
 /**
  * `ButtonText` typographic style
  */
-export const ButtonText = React.forwardRef<View, ButtonTextProps>(
-  (props, ref) => {
+export const ButtonText = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
     const { isExperimental } = useIOExperimentalDesign();
 
-    return useTypographyFactory<AllowedWeight, ButtonTextAllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        defaultWeight: isExperimental
-          ? buttonTextDefaultWeight
-          : legacyTextDefaultWeight,
-        defaultColor: buttonTextDefaultColor,
-        font: isExperimental ? buttonTextFontName : legacyTextFontName,
-        fontStyle: {
-          fontSize: buttonTextFontSize
-        }
-      },
-      ref
+    const ButtonTextProps: IOTextProps = {
+      ...props,
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: buttonTextFontSize,
+      lineHeight: 20,
+      color: customColor ?? defaultColor
+    };
+
+    return (
+      <IOText ref={ref} {...ButtonTextProps}>
+        {props.children}
+      </IOText>
     );
   }
 );
diff --git a/src/components/typography/Caption.tsx b/src/components/typography/Caption.tsx
index 6fcc7767..ea249078 100644
--- a/src/components/typography/Caption.tsx
+++ b/src/components/typography/Caption.tsx
@@ -1,45 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
+const defaultColor: keyof IOTheme = "textBody-default";
 
-type CaptionProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const captionFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+export const captionFontSize: IOFontSize = 12;
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 
 /**
  * `Caption` typographic style
  */
-export const Caption = React.forwardRef<View, CaptionProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Caption = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const CaptionProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption1" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: {
-        fontSize: captionFontSize,
-        textTransform: "uppercase"
+      dynamicTypeRamp: "caption1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: captionFontSize,
+      weight: fontWeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
+        textTransform: "uppercase",
+        letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...CaptionProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/Chip.tsx b/src/components/typography/Chip.tsx
index e6f7180d..04357cd7 100644
--- a/src/components/typography/Chip.tsx
+++ b/src/components/typography/Chip.tsx
@@ -1,45 +1,33 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOColors,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type ChipProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const chipFontSize = 12;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
+const fontName: IOFontFamily = "ReadexPro";
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
 /**
  * `Chip` typographic style
  */
-export const Chip = React.forwardRef<View, ChipProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Chip = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const ChipProps: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "caption2" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font: isExperimental ? font : legacyFont,
-      fontStyle: { fontSize: chipFontSize }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "caption2", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: "Regular",
+      size: 12,
+      color: customColor ?? theme["textBody-default"]
+    };
+
+    return (
+      <IOText ref={ref} {...ChipProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/Factory.tsx b/src/components/typography/Factory.tsx
index 51f37d10..72231e1d 100644
--- a/src/components/typography/Factory.tsx
+++ b/src/components/typography/Factory.tsx
@@ -71,6 +71,7 @@ function isDefaultFactoryProps<WeightPropsType, ColorsPropsType>(
  * The default values can be calculated specifying some fallback values using {@link DefaultArgumentProps}
  * or with a factory function to define some custom behaviour using {@link DefaultFactoryProps}
  * @param props
+ * @deprecated Use `IOText` instead. Or use the new typographic styles that use it.
  */
 export function useTypographyFactory<
   WeightPropsType extends IOFontWeight,
diff --git a/src/components/typography/H1.tsx b/src/components/typography/H1.tsx
index ebb057ba..673b85c8 100644
--- a/src/components/typography/H1.tsx
+++ b/src/components/typography/H1.tsx
@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H1Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h1FontSize = 28;
+export const h1FontSize: IOFontSize = 28;
 export const h1LineHeight = 42;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH1FontSize = 31;
+const legacyH1FontSize: IOFontSize = 31;
 const legacyH1LineHeight = 43;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H1` typographic style
  */
-export const H1 = React.forwardRef<View, H1Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H1 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H1Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "largeTitle" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h1FontSize : legacyH1FontSize,
-        lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "largeTitle", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? h1FontSize : legacyH1FontSize,
+      lineHeight: isExperimental ? h1LineHeight : legacyH1LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H1Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/H2.tsx b/src/components/typography/H2.tsx
index 3015626e..48ce1eaa 100644
--- a/src/components/typography/H2.tsx
+++ b/src/components/typography/H2.tsx
@@ -1,49 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H2Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h2FontSize = 26;
+export const h2FontSize: IOFontSize = 26;
 export const h2LineHeight = 39;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
-const legacyH2FontSize = 28;
+const legacyH2FontSize: IOFontSize = 28;
 const legacyH2LineHeight = 40;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H2` typographic style
  */
-export const H2 = React.forwardRef<View, H2Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H2 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H2Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title1" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? h2FontSize : legacyH2FontSize,
-        lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title1", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: isExperimental ? h2FontSize : legacyH2FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: isExperimental ? h2LineHeight : legacyH2LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H2Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/H3.tsx b/src/components/typography/H3.tsx
index 52dc6880..7005cf98 100644
--- a/src/components/typography/H3.tsx
+++ b/src/components/typography/H3.tsx
@@ -1,48 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold" | "Regular">;
-
-type H3Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
 /* Common typographic styles */
-export const h3FontSize = 22;
+export const h3FontSize: IOFontSize = 22;
 export const h3LineHeight = 33;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
+
 /**
  * `H3` typographic style
  */
-export const H3 = React.forwardRef<View, H3Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H3Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title2" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
+      dynamicTypeRamp: "title2", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: h3FontSize,
-        lineHeight: h3LineHeight
-      }
-    },
-    ref
-  );
-});
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: h3FontSize,
+      lineHeight: h3LineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H3Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/H4.tsx b/src/components/typography/H4.tsx
index f29ab7f9..52bf1c12 100644
--- a/src/components/typography/H4.tsx
+++ b/src/components/typography/H4.tsx
@@ -1,47 +1,42 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H4Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h4FontSize = 20;
+export const h4FontSize: IOFontSize = 20;
 export const h4LineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultColor: AllowedColors = "bluegreyDark";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H4` typographic style
  */
-export const H4 = React.forwardRef<View, H4Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+export const H4 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const H4Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "title3" /* iOS only */,
-      defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-      defaultColor: isExperimental ? defaultColor : legacyDefaultColor,
-      font: isExperimental ? font : legacyFontName,
-      fontStyle: {
-        fontSize: h4FontSize,
-        lineHeight: h4LineHeight
-      }
-    },
-    ref
-  );
-});
+      dynamicTypeRamp: "title3", // iOS only
+      font: isExperimental ? fontName : legacyFontName,
+      size: h4FontSize,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor],
+      lineHeight: h4LineHeight
+    };
+
+    return (
+      <IOText ref={ref} {...H4Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/H5.tsx b/src/components/typography/H5.tsx
index 947f5102..1273a1ab 100644
--- a/src/components/typography/H5.tsx
+++ b/src/components/typography/H5.tsx
@@ -1,45 +1,39 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOTheme, IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOTheme } from "../../core";
+import { IOFontSize } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H5Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h5FontSize = 14;
+export const h5FontSize: IOFontSize = 14;
 export const h5LineHeight = 16;
-const font: FontFamily = "TitilliumSansPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Semibold";
 
 /**
  * `H5` typographic style
  */
-export const H5 = React.forwardRef<View, H5Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H5 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H5Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "subheadline" /* iOS only */,
-      defaultWeight,
-      defaultColor,
-      font,
-      fontStyle: {
-        fontSize: h5FontSize,
-        lineHeight: h5LineHeight,
+      dynamicTypeRamp: "subheadline", // iOS only
+      font: "TitilliumSansPro",
+      weight: "Semibold",
+      size: h5FontSize,
+      lineHeight: h5LineHeight,
+      color: customColor ?? theme[defaultColor],
+      textStyle: {
         textTransform: "uppercase",
         letterSpacing: 0.5
       }
-    },
-    ref
-  );
-});
+    };
+
+    return (
+      <IOText ref={ref} {...H5Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/H6.tsx b/src/components/typography/H6.tsx
index e4fb7b3d..dc4ab95a 100644
--- a/src/components/typography/H6.tsx
+++ b/src/components/typography/H6.tsx
@@ -1,55 +1,44 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import {
-  IOTheme,
-  IOThemeLight,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-// when the weight is bold, only these color are allowed
-type AllowedColors = IOTheme["textBody-default"] | "blueIO-850";
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type H6Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const h6FontSize = 16;
+export const h6FontSize: IOFontSize = 16;
 export const h6LineHeight = 24;
-const h6DefaultColor: AllowedColors = IOThemeLight["textBody-default"];
-const h6DefaultWeight: AllowedWeight = "Regular";
-const fontName: FontFamily = "ReadexPro";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFontSize = 18;
+const legacyFontSize: IOFontSize = 18;
 const legacyLineHeight = 25;
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `H6` typographic style
  */
-export const H6 = React.forwardRef<View, H6Props>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const H6 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const H6Props: IOTextProps = {
       ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "headline" /* iOS only */,
-      defaultWeight: isExperimental ? h6DefaultWeight : legacyDefaultWeight,
-      defaultColor: h6DefaultColor,
+      dynamicTypeRamp: "headline", // iOS only
       font: isExperimental ? fontName : legacyFontName,
-      fontStyle: {
-        fontSize: isExperimental ? h6FontSize : legacyFontSize,
-        lineHeight: isExperimental ? h6LineHeight : legacyLineHeight
-      }
-    },
-    ref
-  );
-});
+      size: isExperimental ? h6FontSize : legacyFontSize,
+      lineHeight: isExperimental ? h6LineHeight : legacyLineHeight,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...H6Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/Hero.tsx b/src/components/typography/Hero.tsx
index b7334c28..3355f421 100644
--- a/src/components/typography/Hero.tsx
+++ b/src/components/typography/Hero.tsx
@@ -1,46 +1,43 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { useIOExperimentalDesign, IOTheme } from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { IOTheme, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontSize, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type AllowedColors = IOTheme["textHeading-default"];
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
+const defaultColor: keyof IOTheme = "textHeading-default";
 
-type HeroProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const heroFontSize = 32;
+export const heroFontSize: IOFontSize = 32;
 export const heroLineHeight = 48;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyFont: FontFamily = "TitilliumSansPro";
-const legacyWeight: AllowedWeight = "Semibold";
-const legacyHeroFontSize = 35;
+const legacyHeroFontSize: IOFontSize = 35;
 const legacyHeroLineHeight = 49;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `Hero` typographic style
  */
-export const Hero = React.forwardRef<View, HeroProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
+export const Hero = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
 
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
+    const HeroProps: IOTextProps = {
       ...props,
-      defaultWeight: isExperimental ? defaultWeight : legacyWeight,
-      defaultColor,
-      font: isExperimental ? fontName : legacyFont,
-      fontStyle: {
-        fontSize: isExperimental ? heroFontSize : legacyHeroFontSize,
-        lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight
-      }
-    },
-    ref
-  );
-});
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? heroFontSize : legacyHeroFontSize,
+      lineHeight: isExperimental ? heroLineHeight : legacyHeroLineHeight,
+      color: customColor ?? theme[defaultColor]
+    };
+
+    return (
+      <IOText ref={ref} {...HeroProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/IOText.tsx b/src/components/typography/IOText.tsx
new file mode 100644
index 00000000..a8e01ce4
--- /dev/null
+++ b/src/components/typography/IOText.tsx
@@ -0,0 +1,157 @@
+import React, { ComponentProps, forwardRef, useMemo } from "react";
+import {
+  ColorValue,
+  GestureResponderEvent,
+  Text,
+  TextStyle,
+  View
+} from "react-native";
+import { IOColors, useIOExperimentalDesign, useIOTheme } from "../../core";
+import { useBoldTextEnabled } from "../../utils/accessibility";
+import {
+  IOFontFamily,
+  IOFontSize,
+  IOFontWeight,
+  makeFontStyleObject
+} from "../../utils/fonts";
+
+/**
+ * We exclude all of the following props when we define a new
+ * typographic style in which all of these visual attributes
+ * are already defined.
+ */
+export type IOTextStyle = Omit<
+  TextStyle,
+  "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "fontStyle"
+>;
+
+export type TypographicStyleProps = Omit<
+  IOTextProps,
+  "style" | "font" | "size" | "weight" | "color" | "lineHeight" | "fontStyle"
+> & { textStyle?: IOTextStyle; style?: IOTextStyle } & {
+  color?: IOTextBaseProps["color"];
+};
+
+/**
+ * The specific properties needed to calculate the font style using {@link makeFontStyleObject} (these information
+ * cannot be included in the default StyleProp<TextStyle>
+ */
+type IOTextBaseProps = {
+  size?: IOFontSize;
+  weight?: IOFontWeight;
+  color?: IOColors;
+  font?: IOFontFamily;
+  lineHeight?: TextStyle["lineHeight"];
+  fontStyle?: TextStyle["fontStyle"];
+  textStyle?: IOTextStyle;
+  style?: IOTextStyle;
+};
+
+type IOTextExcludedProps = Omit<
+  ComponentProps<typeof Text>,
+  "allowFontScaling" | "maxFontSizeMultiplier" | "style"
+>;
+
+export type IOTextProps = IOTextBaseProps & IOTextExcludedProps;
+
+/**
+ * Extend `TypographicStyleProps` with extra props for styles that
+ * can be used as links
+ */
+export type TypographicStyleAsLinkProps =
+  | {
+      color?: never;
+      asLink: true;
+      onPress: (event: GestureResponderEvent) => void;
+    }
+  | { color?: IOColors; asLink?: false };
+
+/**
+ * Decorate the function {@link makeFontStyleObject} with the additional color calculation.
+ * @param color A value key from {@link IOColors}, transformed here in {@link ColorValue}
+ * @param args the args of the function {@link makeFontStyleObject}
+ */
+const calculateTextStyle = (
+  color: IOColors,
+  ...args: Parameters<typeof makeFontStyleObject>
+) => ({
+  ...makeFontStyleObject(...args),
+  color: IOColors[color]
+});
+
+/**
+ * `IOText` is the core Typography component used to render a text.
+ * It accepts all the default text style `StyleProp<TextStyle>` (excluding the ones already applied) in addition with {@link IOTextBaseProps}
+ * used to calculate at runtime the platform-dependent styles.
+ * @param props
+ * @constructor
+ */
+export const IOText = forwardRef<View, IOTextProps>(
+  (
+    {
+      color,
+      size,
+      font,
+      lineHeight,
+      weight,
+      fontStyle,
+      textStyle,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const theme = useIOTheme();
+    const boldEnabled = useBoldTextEnabled();
+
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const computedStyleObj = useMemo(
+      () =>
+        calculateTextStyle(
+          color ?? theme["textBody-default"],
+          size,
+          font,
+          lineHeight,
+          weight,
+          fontStyle,
+          boldEnabled
+        ),
+      [color, theme, size, font, lineHeight, weight, fontStyle, boldEnabled]
+    );
+
+    /* In some cases, for example when we use color transitions with
+    `reanimated` we need to manage chromatic values as `ColorValue`
+    or `string` (not `IOColors`). So we keep a way to override
+    the the `color' attribute without giving the ability to
+    override all other all other typographic attributes
+    through the `style' prop. */
+    const fontStyleObj = style?.color
+      ? [{ ...computedStyleObj, color: style?.color }]
+      : computedStyleObj;
+
+    /* Some typographic styles like `H5` have certain `TextStyle` properties
+     like `textTransform` or `letterSpacing` that we want to apply to the text.
+     We use the `textStyle` prop to pass these properties to the `IOText`
+     component and preserve the ability to define the `style` prop as well.
+     The `style` prop is the last one to be applied, so we can properly
+     override the `color` attribute.
+     */
+    const styleObj = style
+      ? [textStyle ?? {}, fontStyleObj ?? {}, style]
+      : [textStyle ?? {}, fontStyleObj ?? {}];
+
+    /* Accessible typography based on the `fontScale` parameter */
+    const accessibleFontSizeProps: ComponentProps<typeof Text> = {
+      allowFontScaling: isExperimental,
+      maxFontSizeMultiplier: 1.25
+    };
+
+    return (
+      <Text ref={ref} style={styleObj} {...props} {...accessibleFontSizeProps}>
+        {children}
+      </Text>
+    );
+  }
+);
diff --git a/src/components/typography/Label.tsx b/src/components/typography/Label.tsx
index c9432505..21e081d0 100644
--- a/src/components/typography/Label.tsx
+++ b/src/components/typography/Label.tsx
@@ -1,58 +1,51 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
 import {
-  IOColors,
-  IOColorsStatusForeground,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import {
-  ExternalTypographyProps,
-  FontSize,
-  TypographyProps,
-  fontSizeMapping,
-  lineHeightMapping
-} from "./common";
-
-type PartialAllowedColors = Extract<IOColors, "black" | "white" | "grey-700">;
-type AllowedColors = PartialAllowedColors | IOColorsStatusForeground;
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-type LabelProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
-> & { fontSize?: FontSize };
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-const font: FontFamily = "TitilliumSansPro";
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "black";
+type LabelProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 /**
- * `Label` typographic style
+ * `LabelSmall` typographic style
  */
-export const Label = React.forwardRef<View, LabelProps>(
-  ({ fontSize, ...props }, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const Label = forwardRef<View, LabelProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelProps: IOTextProps = {
+      ...props,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Semibold",
+      size: 16,
+      lineHeight: 24,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font,
-        fontStyle: {
-          fontSize: fontSize
-            ? fontSizeMapping[fontSize]
-            : fontSizeMapping.regular,
-          lineHeight: fontSize
-            ? lineHeightMapping[fontSize]
-            : lineHeightMapping.regular
-        }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...LabelProps}>
+        {props.children}
+      </IOText>
     );
   }
 );
diff --git a/src/components/typography/LabelHeader.tsx b/src/components/typography/LabelHeader.tsx
deleted file mode 100644
index e146bf1b..00000000
--- a/src/components/typography/LabelHeader.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { View } from "react-native";
-import React from "react";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { IOTheme, IOThemeLight, useIOExperimentalDesign } from "../../core";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
-
-type AllowedColors =
-  | IOTheme["textBody-default"]
-  | "grey-650"
-  | "grey-850"
-  | "white"
-  | "black";
-type AllowedWeight = Extract<IOFontWeight, "Regular" | "Semibold">;
-
-type LabelHeaderProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-export const labelHeaderFontSize = 14;
-export const labelHeaderLineHeight = 18;
-export const labelHeaderDefaultColor: AllowedColors =
-  IOThemeLight["textBody-default"];
-const labelHeaderFontName: IOFontFamily = "ReadexPro";
-const labelHeaderDefaultWeight: AllowedWeight = "Regular";
-
-// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyLabelHeaderFontName: IOFontFamily = "TitilliumSansPro";
-const legacyLabelHeaderWeight: AllowedWeight = "Semibold";
-const legacyLabelHeaderLineHeight = 20;
-/**
- * `LabelHeader` typographic style
- */
-export const LabelHeader = React.forwardRef<View, LabelHeaderProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
-    // console.log("isExperimental", isExperimental);
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        defaultWeight: isExperimental
-          ? labelHeaderDefaultWeight
-          : legacyLabelHeaderWeight,
-        defaultColor: labelHeaderDefaultColor,
-        font: isExperimental ? labelHeaderFontName : legacyLabelHeaderFontName,
-        fontStyle: {
-          fontSize: labelHeaderFontSize,
-          lineHeight: isExperimental
-            ? labelHeaderLineHeight
-            : legacyLabelHeaderLineHeight
-        }
-      },
-      ref
-    );
-  }
-);
diff --git a/src/components/typography/LabelLink.tsx b/src/components/typography/LabelLink.tsx
deleted file mode 100644
index 29e337b5..00000000
--- a/src/components/typography/LabelLink.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import {
-  IOVisualCostants,
-  useIOExperimentalDesign,
-  type IOColors
-} from "../../core";
-import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import {
-  ExternalTypographyProps,
-  FontSize,
-  TypographyProps,
-  fontSizeMapping,
-  lineHeightMapping
-} from "./common";
-
-type AllowedColors = IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold">;
-type AllowedFontSize = { fontSize?: FontSize };
-
-type LinkProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
-> &
-  AllowedFontSize;
-
-const font: IOFontFamily = "TitilliumSansPro";
-
-export const linkLegacyDefaultColor: AllowedColors = "blue";
-export const linkDefaultColor: AllowedColors = "blueIO-500";
-export const linkDefaultWeight: AllowedWeight = "Semibold";
-
-/**
- * `Link` typographic style
- */
-export const LabelLink = React.forwardRef<View, LinkProps>((props, ref) => {
-  const { isExperimental } = useIOExperimentalDesign();
-
-  return useTypographyFactory<AllowedWeight, AllowedColors>(
-    {
-      accessibilityRole: props.onPress ? "link" : undefined,
-      ...props,
-      allowFontScaling: isExperimental,
-      maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-      dynamicTypeRamp: "footnote" /* iOS only */,
-      defaultWeight: linkDefaultWeight,
-      defaultColor: isExperimental ? linkDefaultColor : linkLegacyDefaultColor,
-      font,
-      fontStyle: {
-        fontSize: props.fontSize
-          ? fontSizeMapping[props.fontSize]
-          : fontSizeMapping.regular,
-        lineHeight: props.fontSize
-          ? lineHeightMapping[props.fontSize]
-          : lineHeightMapping.regular,
-        textDecorationLine: "underline"
-      }
-    },
-    ref
-  );
-});
diff --git a/src/components/typography/LabelMini.tsx b/src/components/typography/LabelMini.tsx
new file mode 100644
index 00000000..bd503e60
--- /dev/null
+++ b/src/components/typography/LabelMini.tsx
@@ -0,0 +1,52 @@
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
+import {
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
+
+type LabelMiniProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
+
+/**
+ * `LabelMini` typographic style
+ */
+export const LabelMini = forwardRef<View, LabelMiniProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelMiniProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Semibold",
+      size: 12,
+      lineHeight: 18,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
+
+    return (
+      <IOText ref={ref} {...LabelMiniProps}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/LabelSmall.tsx b/src/components/typography/LabelSmall.tsx
index 37022e28..1a6f1f57 100644
--- a/src/components/typography/LabelSmall.tsx
+++ b/src/components/typography/LabelSmall.tsx
@@ -1,74 +1,52 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
+import { useIOTheme } from "../../core";
+import { IOFontWeight } from "../../utils/fonts";
 import {
-  IOColors,
-  IOTheme,
-  IOVisualCostants,
-  useIOExperimentalDesign
-} from "../../core";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+  IOText,
+  IOTextProps,
+  TypographicStyleAsLinkProps,
+  TypographicStyleProps
+} from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  | "blue"
-  | "bluegrey"
-  | "red"
-  | "white"
-  | "bluegreyDark"
-  | "grey-700"
-  | "grey-200"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-
-type FontSize = "regular" | "small";
-type AllowedFontSize = { fontSize?: FontSize };
-
-type LabelSmallProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
-> &
-  AllowedFontSize;
-
-const font: FontFamily = "TitilliumSansPro";
-const fontSizeMapping: Record<FontSize, number> = {
-  regular: 14,
-  small: 12
-};
-const lineHeightMapping: Record<FontSize, number> = {
-  regular: 21,
-  small: 18
-};
-const labelDefaultWeight = "Bold";
-const labelDefaultcolor = "blue";
+type LabelSmallProps = TypographicStyleProps & {
+  weight?: Extract<IOFontWeight, "Regular" | "Semibold" | "Bold">;
+} & TypographicStyleAsLinkProps;
 
 /**
  * `LabelSmall` typographic style
  */
-export const LabelSmall = React.forwardRef<View, LabelSmallProps>(
-  (props, ref) => {
-    const { isExperimental } = useIOExperimentalDesign();
+export const LabelSmall = forwardRef<View, LabelSmallProps>(
+  (
+    { weight: customWeight, color: customColor, asLink, ...props },
+    ref?: ForwardedRef<View>
+  ) => {
+    const theme = useIOTheme();
+
+    const defaultColor = asLink
+      ? theme["interactiveElem-default"]
+      : theme["textBody-tertiary"];
+
+    const LabelSmallProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: "TitilliumSansPro",
+      weight: customWeight ?? "Semibold",
+      size: 14,
+      lineHeight: 21,
+      color: customColor ?? defaultColor,
+      ...(asLink
+        ? {
+            accessibilityRole: "link",
+            textStyle: { textDecorationLine: "underline" }
+          }
+        : {})
+    };
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: labelDefaultWeight,
-        defaultColor: labelDefaultcolor,
-        font,
-        fontStyle: {
-          fontSize: props.fontSize
-            ? fontSizeMapping[props.fontSize]
-            : fontSizeMapping.regular,
-          lineHeight: props.fontSize
-            ? lineHeightMapping[props.fontSize]
-            : lineHeightMapping.regular
-        }
-      },
-      ref
+    return (
+      <IOText ref={ref} {...LabelSmallProps}>
+        {props.children}
+      </IOText>
     );
   }
 );
diff --git a/src/components/typography/LabelSmallAlt.tsx b/src/components/typography/LabelSmallAlt.tsx
index b21a378e..b81420b5 100644
--- a/src/components/typography/LabelSmallAlt.tsx
+++ b/src/components/typography/LabelSmallAlt.tsx
@@ -1,61 +1,41 @@
-import React from "react";
+import React, { ForwardedRef, forwardRef } from "react";
 import { View } from "react-native";
-import { IOVisualCostants, useIOExperimentalDesign } from "../../core";
-import type { IOColors, IOTheme } from "../../core/IOColors";
-import { FontFamily, IOFontWeight } from "../../utils/fonts";
-import { useTypographyFactory } from "./Factory";
-import { ExternalTypographyProps, TypographyProps } from "./common";
+import { useIOExperimentalDesign, useIOTheme } from "../../core";
+import { IOFontFamily, IOFontWeight } from "../../utils/fonts";
+import { IOText, IOTextProps, TypographicStyleProps } from "./IOText";
 
-type PartialAllowedColors = Extract<
-  IOColors,
-  | "blue"
-  | "bluegrey"
-  | "red"
-  | "white"
-  | "bluegreyDark"
-  | "grey-700"
-  | "grey-200"
->;
-type AllowedColors = PartialAllowedColors | IOTheme["textBody-tertiary"];
-type AllowedWeight = Extract<IOFontWeight, "Bold" | "Regular" | "Semibold">;
-
-type LabelSmallAltProps = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const labelFontSize = 14;
-const labelLineHeight = 21;
-const fontName: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+const fontSize = 14;
+const lineHeight = 21;
+const fontName: IOFontFamily = "ReadexPro";
+const fontWeight: IOFontWeight = "Regular";
 
 // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
-const legacyLabelFontSize = 16;
-const legacyFontName: FontFamily = "TitilliumSansPro";
-const legacyDefaultWeight: AllowedWeight = "Semibold";
+const legacyFontSize = 16;
+const legacyFontName: IOFontFamily = "TitilliumSansPro";
+const legacyFontWeight: IOFontWeight = "Semibold";
 
 /**
  * `LabelSmallAlt` typographic style. It's referenced as `LabelSmallReadex` in the design projects.
  */
-export const LabelSmallAlt = React.forwardRef<View, LabelSmallAltProps>(
-  (props, ref) => {
+export const LabelSmallAlt = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
     const { isExperimental } = useIOExperimentalDesign();
 
-    return useTypographyFactory<AllowedWeight, AllowedColors>(
-      {
-        ...props,
-        allowFontScaling: isExperimental,
-        maxFontSizeMultiplier: IOVisualCostants.maxFontSizeMultiplier,
-        dynamicTypeRamp: "footnote" /* iOS only */,
-        defaultWeight: isExperimental ? defaultWeight : legacyDefaultWeight,
-        defaultColor,
-        font: isExperimental ? fontName : legacyFontName,
-        fontStyle: {
-          fontSize: isExperimental ? labelFontSize : legacyLabelFontSize,
-          lineHeight: labelLineHeight
-        }
-      },
-      ref
+    const LabelSmallAltProps: IOTextProps = {
+      ...props,
+      dynamicTypeRamp: "footnote" /* iOS only */,
+      font: isExperimental ? fontName : legacyFontName,
+      weight: isExperimental ? fontWeight : legacyFontWeight,
+      size: isExperimental ? fontSize : legacyFontSize,
+      lineHeight,
+      color: customColor ?? theme["textBody-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...LabelSmallAltProps}>
+        {props.children}
+      </IOText>
     );
   }
 );
diff --git a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
index 7fe6f9cf..26e3ceec 100644
--- a/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
+++ b/src/components/typography/__test__/__snapshots__/typography.test.tsx.snap
@@ -3,33 +3,21 @@
 exports[`Test Typography Components Body Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="bluegrey"
-  defaultColor="bluegrey"
-  defaultWeight="Regular"
   dynamicTypeRamp="body"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 16,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "400",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Regular"
 >
   Text
 </Text>
@@ -38,33 +26,23 @@ exports[`Test Typography Components Body Snapshot 1`] = `
 exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="bluegrey"
-  defaultColor="bluegrey"
-  defaultWeight="Medium"
   dynamicTypeRamp="body"
-  font="DMMono"
-  fontStyle={
-    {
-      "fontSize": 16,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
       {
-        "fontSize": 16,
-        "lineHeight": 24,
+        "letterSpacing": 0.5,
       },
       {
-        "color": "#475A6D",
+        "color": "#555C70",
         "fontFamily": "DM Mono",
+        "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "500",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Medium"
 >
   Text
 </Text>
@@ -73,30 +51,20 @@ exports[`Test Typography Components BodyMonospace Snapshot 1`] = `
 exports[`Test Typography Components CTA Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="white"
-  defaultWeight="Bold"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 16,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 16,
-      },
+      {},
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "700",
+        "lineHeight": 20,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -105,33 +73,21 @@ exports[`Test Typography Components CTA Snapshot 1`] = `
 exports[`Test Typography Components H1 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="largeTitle"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 31,
-      "lineHeight": 43,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 31,
-        "lineHeight": 43,
-      },
+      {},
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 31,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 43,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -140,33 +96,21 @@ exports[`Test Typography Components H1 Snapshot 1`] = `
 exports[`Test Typography Components H1 Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="largeTitle"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 31,
-      "lineHeight": 43,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 31,
-        "lineHeight": 43,
-      },
+      {},
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 31,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 43,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -175,33 +119,21 @@ exports[`Test Typography Components H1 Snapshot 2`] = `
 exports[`Test Typography Components H2 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title1"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 28,
-      "lineHeight": 40,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 28,
-        "lineHeight": 40,
-      },
+      {},
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 28,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 40,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -210,33 +142,21 @@ exports[`Test Typography Components H2 Snapshot 1`] = `
 exports[`Test Typography Components H3 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="bluegreyDark"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title2"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 22,
-      "lineHeight": 33,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 22,
-        "lineHeight": 33,
-      },
-      {
-        "color": "#17324D",
+        "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 22,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 33,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -245,33 +165,21 @@ exports[`Test Typography Components H3 Snapshot 1`] = `
 exports[`Test Typography Components H3 Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="bluegreyLight"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title2"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 22,
-      "lineHeight": 33,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 22,
-        "lineHeight": 33,
-      },
+      {},
       {
         "color": "#CCD4DC",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 22,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 33,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -280,33 +188,21 @@ exports[`Test Typography Components H3 Snapshot 2`] = `
 exports[`Test Typography Components H3 Snapshot 3`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title2"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 22,
-      "lineHeight": 33,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 22,
-        "lineHeight": 33,
-      },
+      {},
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 22,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 33,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -315,33 +211,21 @@ exports[`Test Typography Components H3 Snapshot 3`] = `
 exports[`Test Typography Components H3 Snapshot 4`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title2"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 22,
-      "lineHeight": 33,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 22,
-        "lineHeight": 33,
-      },
+      {},
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 22,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 33,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -350,33 +234,21 @@ exports[`Test Typography Components H3 Snapshot 4`] = `
 exports[`Test Typography Components H3 Snapshot 5`] = `
 <Text
   allowFontScaling={false}
-  color="bluegreyDark"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title2"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 22,
-      "lineHeight": 33,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 22,
-        "lineHeight": 33,
-      },
-      {
-        "color": "#17324D",
+        "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 22,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 33,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -385,33 +257,21 @@ exports[`Test Typography Components H3 Snapshot 5`] = `
 exports[`Test Typography Components H4 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="bluegreyDark"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 20,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#17324D",
+        "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 20,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -420,208 +280,44 @@ exports[`Test Typography Components H4 Snapshot 1`] = `
 exports[`Test Typography Components H4 Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="blue"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 20,
-        "lineHeight": 24,
-      },
+      {},
       {
         "color": "#0073E6",
         "fontFamily": "Titillium Sans Pro",
-        "fontStyle": "normal",
-        "fontWeight": "600",
-      },
-    ]
-  }
-  weight="Semibold"
->
-  Text
-</Text>
-`;
-
-exports[`Test Typography Components H4 Snapshot 3`] = `
-<Text
-  allowFontScaling={false}
-  color="white"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
-  dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
-  maxFontSizeMultiplier={1.25}
-  style={
-    [
-      {
         "fontSize": 20,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillium Sans Pro",
         "fontStyle": "normal",
         "fontWeight": "600",
-      },
-    ]
-  }
-  weight="Semibold"
->
-  Text
-</Text>
-`;
-
-exports[`Test Typography Components H4 Snapshot 4`] = `
-<Text
-  allowFontScaling={false}
-  color="bluegreyDark"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
-  dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
-  maxFontSizeMultiplier={1.25}
-  style={
-    [
-      {
-        "fontSize": 20,
         "lineHeight": 24,
       },
-      {
-        "color": "#17324D",
-        "fontFamily": "Titillium Sans Pro",
-        "fontStyle": "normal",
-        "fontWeight": "400",
-      },
     ]
   }
-  weight="Regular"
 >
   Text
 </Text>
 `;
 
-exports[`Test Typography Components H4 Snapshot 5`] = `
+exports[`Test Typography Components H4 Snapshot 3`] = `
 <Text
   allowFontScaling={false}
-  color="bluegrey"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
   dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 20,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#475A6D",
+        "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
-        "fontStyle": "normal",
-        "fontWeight": "400",
-      },
-    ]
-  }
-  weight="Regular"
->
-  Text
-</Text>
-`;
-
-exports[`Test Typography Components H4 Snapshot 6`] = `
-<Text
-  allowFontScaling={false}
-  color="bluegreyLight"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
-  dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
-  maxFontSizeMultiplier={1.25}
-  style={
-    [
-      {
         "fontSize": 20,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#CCD4DC",
-        "fontFamily": "Titillium Sans Pro",
         "fontStyle": "normal",
-        "fontWeight": "400",
-      },
-    ]
-  }
-  weight="Regular"
->
-  Text
-</Text>
-`;
-
-exports[`Test Typography Components H4 Snapshot 7`] = `
-<Text
-  allowFontScaling={false}
-  color="white"
-  defaultColor="bluegreyDark"
-  defaultWeight="Semibold"
-  dynamicTypeRamp="title3"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 20,
-      "lineHeight": 24,
-    }
-  }
-  maxFontSizeMultiplier={1.25}
-  style={
-    [
-      {
-        "fontSize": 20,
+        "fontWeight": "600",
         "lineHeight": 24,
       },
-      {
-        "color": "#FFFFFF",
-        "fontFamily": "Titillium Sans Pro",
-        "fontStyle": "normal",
-        "fontWeight": "400",
-      },
     ]
   }
-  weight="Regular"
 >
   Text
 </Text>
@@ -630,37 +326,24 @@ exports[`Test Typography Components H4 Snapshot 7`] = `
 exports[`Test Typography Components H5 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="subheadline"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "letterSpacing": 0.5,
-      "lineHeight": 16,
-      "textTransform": "uppercase",
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
       {
-        "fontSize": 14,
         "letterSpacing": 0.5,
-        "lineHeight": 16,
         "textTransform": "uppercase",
       },
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 16,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -669,37 +352,24 @@ exports[`Test Typography Components H5 Snapshot 1`] = `
 exports[`Test Typography Components H5 Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="bluegrey"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="subheadline"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "letterSpacing": 0.5,
-      "lineHeight": 16,
-      "textTransform": "uppercase",
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
       {
-        "fontSize": 14,
         "letterSpacing": 0.5,
-        "lineHeight": 16,
         "textTransform": "uppercase",
       },
       {
         "color": "#475A6D",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 16,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -708,37 +378,24 @@ exports[`Test Typography Components H5 Snapshot 2`] = `
 exports[`Test Typography Components H5 Snapshot 3`] = `
 <Text
   allowFontScaling={false}
-  color="blue"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="subheadline"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "letterSpacing": 0.5,
-      "lineHeight": 16,
-      "textTransform": "uppercase",
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
       {
-        "fontSize": 14,
         "letterSpacing": 0.5,
-        "lineHeight": 16,
         "textTransform": "uppercase",
       },
       {
         "color": "#0073E6",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 16,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -747,37 +404,24 @@ exports[`Test Typography Components H5 Snapshot 3`] = `
 exports[`Test Typography Components H5 Snapshot 4`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="subheadline"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "letterSpacing": 0.5,
-      "lineHeight": 16,
-      "textTransform": "uppercase",
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
       {
-        "fontSize": 14,
         "letterSpacing": 0.5,
-        "lineHeight": 16,
         "textTransform": "uppercase",
       },
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 16,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -786,33 +430,21 @@ exports[`Test Typography Components H5 Snapshot 4`] = `
 exports[`Test Typography Components H6 Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Semibold"
   dynamicTypeRamp="headline"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 18,
-      "lineHeight": 25,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 18,
-        "lineHeight": 25,
-      },
+      {},
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 18,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 25,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
@@ -821,33 +453,20 @@ exports[`Test Typography Components H6 Snapshot 1`] = `
 exports[`Test Typography Components Label Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Bold"
-  dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 16,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
-      {
-        "color": "#0E0F13",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 16,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -856,33 +475,20 @@ exports[`Test Typography Components Label Snapshot 1`] = `
 exports[`Test Typography Components Label Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="black"
-  defaultColor="black"
-  defaultWeight="Bold"
-  dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 16,
-      "lineHeight": 24,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 16,
-        "lineHeight": 24,
-      },
+      {},
       {
         "color": "#0E0F13",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 16,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -891,33 +497,21 @@ exports[`Test Typography Components Label Snapshot 2`] = `
 exports[`Test Typography Components LabelSmall Snapshot 1`] = `
 <Text
   allowFontScaling={false}
-  color="blue"
-  defaultColor="blue"
-  defaultWeight="Bold"
   dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "lineHeight": 21,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
+      {},
       {
-        "fontSize": 14,
-        "lineHeight": 21,
-      },
-      {
-        "color": "#0073E6",
+        "color": "#555C70",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 21,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -926,33 +520,21 @@ exports[`Test Typography Components LabelSmall Snapshot 1`] = `
 exports[`Test Typography Components LabelSmall Snapshot 2`] = `
 <Text
   allowFontScaling={false}
-  color="blue"
-  defaultColor="blue"
-  defaultWeight="Bold"
   dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "lineHeight": 21,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 14,
-        "lineHeight": 21,
-      },
+      {},
       {
         "color": "#0073E6",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 21,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -961,33 +543,21 @@ exports[`Test Typography Components LabelSmall Snapshot 2`] = `
 exports[`Test Typography Components LabelSmall Snapshot 3`] = `
 <Text
   allowFontScaling={false}
-  color="bluegrey"
-  defaultColor="blue"
-  defaultWeight="Bold"
   dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "lineHeight": 21,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 14,
-        "lineHeight": 21,
-      },
+      {},
       {
         "color": "#475A6D",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 21,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -996,33 +566,21 @@ exports[`Test Typography Components LabelSmall Snapshot 3`] = `
 exports[`Test Typography Components LabelSmall Snapshot 4`] = `
 <Text
   allowFontScaling={false}
-  color="red"
-  defaultColor="blue"
-  defaultWeight="Bold"
   dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "lineHeight": 21,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 14,
-        "lineHeight": 21,
-      },
+      {},
       {
         "color": "#C02927",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 21,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -1031,33 +589,21 @@ exports[`Test Typography Components LabelSmall Snapshot 4`] = `
 exports[`Test Typography Components LabelSmall Snapshot 5`] = `
 <Text
   allowFontScaling={false}
-  color="white"
-  defaultColor="blue"
-  defaultWeight="Bold"
   dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 14,
-      "lineHeight": 21,
-    }
-  }
   maxFontSizeMultiplier={1.25}
   style={
     [
-      {
-        "fontSize": 14,
-        "lineHeight": 21,
-      },
+      {},
       {
         "color": "#FFFFFF",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 14,
         "fontStyle": "normal",
-        "fontWeight": "700",
+        "fontWeight": "600",
+        "lineHeight": 21,
       },
     ]
   }
-  weight="Bold"
 >
   Text
 </Text>
@@ -1065,36 +611,25 @@ exports[`Test Typography Components LabelSmall Snapshot 5`] = `
 
 exports[`Test Typography Components Link Snapshot 1`] = `
 <Text
+  accessibilityRole="link"
   allowFontScaling={false}
-  color="blue"
-  defaultColor="blue"
-  defaultWeight="Semibold"
-  dynamicTypeRamp="footnote"
-  font="TitilliumSansPro"
-  fontStyle={
-    {
-      "fontSize": 16,
-      "lineHeight": 24,
-      "textDecorationLine": "underline",
-    }
-  }
   maxFontSizeMultiplier={1.25}
+  onPress={[Function]}
   style={
     [
       {
-        "fontSize": 16,
-        "lineHeight": 24,
         "textDecorationLine": "underline",
       },
       {
-        "color": "#0073E6",
+        "color": "#0B3EE3",
         "fontFamily": "Titillium Sans Pro",
+        "fontSize": 16,
         "fontStyle": "normal",
         "fontWeight": "600",
+        "lineHeight": 24,
       },
     ]
   }
-  weight="Semibold"
 >
   Text
 </Text>
diff --git a/src/components/typography/__test__/typography.test.tsx b/src/components/typography/__test__/typography.test.tsx
index 037b2add..a878a2a0 100644
--- a/src/components/typography/__test__/typography.test.tsx
+++ b/src/components/typography/__test__/typography.test.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import * as TestRenderer from "react-test-renderer";
+import { Alert } from "react-native";
 import type { IOColors } from "../../../core/IOColors";
 import { IOFontWeight } from "../../../utils/fonts";
 import { Body } from "../Body";
+import { BodyMonospace } from "../BodyMonospace";
 import { ButtonText } from "../ButtonText";
 import { H1 } from "../H1";
 import { H2 } from "../H2";
@@ -12,8 +14,6 @@ import { H5 } from "../H5";
 import { H6 } from "../H6";
 import { Label } from "../Label";
 import { LabelSmall } from "../LabelSmall";
-import { LabelLink } from "../LabelLink";
-import { BodyMonospace } from "../BodyMonospace";
 import { calculateWeightColor } from "../common";
 
 describe("Test Typography Components", () => {
@@ -54,34 +54,6 @@ describe("Test Typography Components", () => {
     expect(h4Dblue).toMatchSnapshot();
     const h4white = TestRenderer.create(<H4 color={"white"}>Text</H4>).toJSON();
     expect(h4white).toMatchSnapshot();
-
-    // Regular weight
-    // with regular weight, default color is bluegreydark
-    const h4Regular = TestRenderer.create(
-      <H4 weight={"Regular"}>Text</H4>
-    ).toJSON();
-    expect(h4Regular).toMatchSnapshot();
-
-    const h4Regularbluegrey = TestRenderer.create(
-      <H4 weight={"Regular"} color={"bluegrey"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4Regularbluegrey).toMatchSnapshot();
-
-    const h4RegularbluegreyLight = TestRenderer.create(
-      <H4 weight={"Regular"} color={"bluegreyLight"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4RegularbluegreyLight).toMatchSnapshot();
-
-    const h4Regularwhite = TestRenderer.create(
-      <H4 weight={"Regular"} color={"white"}>
-        Text
-      </H4>
-    ).toJSON();
-    expect(h4Regularwhite).toMatchSnapshot();
   });
   it("H5 Snapshot", () => {
     // SemiBold weight, default
@@ -151,7 +123,11 @@ describe("Test Typography Components", () => {
     });
   });
   it("Link Snapshot", () => {
-    const link = TestRenderer.create(<LabelLink>Text</LabelLink>).toJSON();
+    const link = TestRenderer.create(
+      <Label asLink onPress={() => Alert.alert("Pressed")}>
+        Text
+      </Label>
+    ).toJSON();
     expect(link).toMatchSnapshot();
   });
   it("BodyMonospace Snapshot", () => {
diff --git a/src/components/typography/index.tsx b/src/components/typography/index.tsx
index 9fc0bb78..1e797134 100644
--- a/src/components/typography/index.tsx
+++ b/src/components/typography/index.tsx
@@ -1,4 +1,5 @@
 export * from "./BaseTypography";
+export * from "./IOText";
 export * from "./Body";
 export * from "./Caption";
 export * from "./Chip";
@@ -14,12 +15,9 @@ export * from "./Hero";
 export * from "./Label";
 export * from "./LabelSmall";
 export * from "./LabelSmallAlt";
-export * from "./LabelLink";
+export * from "./LabelMini";
 export * from "./BodyMonospace";
 export * from "./common";
 export * from "./markdown/MdH1";
 export * from "./markdown/MdH2";
 export * from "./markdown/MdH3";
-export * from "./markdown/MdH4";
-export * from "./markdown/MdH5";
-export * from "./markdown/MdH6";
diff --git a/src/components/typography/markdown/MdH1.tsx b/src/components/typography/markdown/MdH1.tsx
index 03a86626..70f41585 100644
--- a/src/components/typography/markdown/MdH1.tsx
+++ b/src/components/typography/markdown/MdH1.tsx
@@ -1,32 +1,30 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH1Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 20;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH1` typographic style
  */
-export const MdH1 = (props: MdH1Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+
+export const MdH1 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH1Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      size: 20,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH1Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/markdown/MdH2.tsx b/src/components/typography/markdown/MdH2.tsx
index 950d0f88..26c2b838 100644
--- a/src/components/typography/markdown/MdH2.tsx
+++ b/src/components/typography/markdown/MdH2.tsx
@@ -1,34 +1,31 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH2Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-/* We set 18 instead of 16 to diffrentiate from the H3 typographic style.
-It should be 16 with `SemiBold` font weight. */
-const fontSize = 18;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH2` typographic style
  */
-export const MdH2 = (props: MdH2Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+export const MdH2 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH2Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      /* We set 18 instead of 16 to diffrentiate from the H3 typographic style.
+It should be 16 with `SemiBold` font weight. */
+      size: 18,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH2Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/markdown/MdH3.tsx b/src/components/typography/markdown/MdH3.tsx
index a72ea3e2..50d92039 100644
--- a/src/components/typography/markdown/MdH3.tsx
+++ b/src/components/typography/markdown/MdH3.tsx
@@ -1,32 +1,29 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH3Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 16;
-const lineHeight = 24;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "black";
-const defaultWeight: AllowedWeight = "Regular";
+import React, { ForwardedRef, forwardRef } from "react";
+import { View } from "react-native";
+import { useIOExperimentalDesign, useIOTheme } from "../../../core";
+import { IOText, IOTextProps, TypographicStyleProps } from "../IOText";
 
 /**
  * `MdH3` typographic style
  */
-export const MdH3 = (props: MdH3Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
+export const MdH3 = forwardRef<View, TypographicStyleProps>(
+  ({ color: customColor, ...props }, ref?: ForwardedRef<View>) => {
+    const theme = useIOTheme();
+    const { isExperimental } = useIOExperimentalDesign();
+
+    const MdH3Props: IOTextProps = {
+      ...props,
+      font: isExperimental ? "ReadexPro" : "TitilliumSansPro",
+      weight: isExperimental ? "Regular" : "Semibold",
+      size: 16,
+      lineHeight: 24,
+      color: customColor ?? theme["textHeading-tertiary"]
+    };
+
+    return (
+      <IOText ref={ref} {...MdH3Props}>
+        {props.children}
+      </IOText>
+    );
+  }
+);
diff --git a/src/components/typography/markdown/MdH4.tsx b/src/components/typography/markdown/MdH4.tsx
deleted file mode 100644
index 0c2fa2d4..00000000
--- a/src/components/typography/markdown/MdH4.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Semibold">;
-
-type MdH4Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 14;
-const lineHeight = 24;
-const font: FontFamily = "TitilliumSansPro";
-const defaultColor: AllowedColors = "grey-700";
-const defaultWeight: AllowedWeight = "Semibold";
-
-/**
- * `MdH4` typographic style
- */
-export const MdH4 = (props: MdH4Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      textTransform: "uppercase",
-      letterSpacing: 0.5,
-      lineHeight
-    }
-  });
diff --git a/src/components/typography/markdown/MdH5.tsx b/src/components/typography/markdown/MdH5.tsx
deleted file mode 100644
index c127a621..00000000
--- a/src/components/typography/markdown/MdH5.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH5Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 12;
-const lineHeight = 16;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "grey-850";
-const defaultWeight: AllowedWeight = "Regular";
-
-/**
- * `MdH5` typographic style
- */
-export const MdH5 = (props: MdH5Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight
-    }
-  });
diff --git a/src/components/typography/markdown/MdH6.tsx b/src/components/typography/markdown/MdH6.tsx
deleted file mode 100644
index 30f23e29..00000000
--- a/src/components/typography/markdown/MdH6.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { IOColors, IOTheme } from "../../../core";
-import { FontFamily, IOFontWeight } from "../../../utils/fonts";
-import { ExternalTypographyProps, TypographyProps } from "../common";
-import { useTypographyFactory } from "../Factory";
-
-type AllowedColors = Extract<IOTheme, "textHeading-default"> | IOColors;
-type AllowedWeight = Extract<IOFontWeight, "Regular">;
-
-type MdH6Props = ExternalTypographyProps<
-  TypographyProps<AllowedWeight, AllowedColors>
->;
-
-const fontSize = 10;
-const lineHeight = 14;
-const font: FontFamily = "ReadexPro";
-const defaultColor: AllowedColors = "grey-700";
-const defaultWeight: AllowedWeight = "Regular";
-
-/**
- * `MdH5` typographic style
- */
-export const MdH6 = (props: MdH6Props) =>
-  useTypographyFactory<AllowedWeight, AllowedColors>({
-    ...props,
-    defaultWeight,
-    defaultColor,
-    font,
-    fontStyle: {
-      fontSize,
-      lineHeight,
-      letterSpacing: 0.5
-    }
-  });
diff --git a/src/core/IOColors.ts b/src/core/IOColors.ts
index 74984f75..3fbb2949 100644
--- a/src/core/IOColors.ts
+++ b/src/core/IOColors.ts
@@ -256,37 +256,43 @@ export type IOColorsExtra = keyof typeof IOColorsExtra;
 ░░░ THEME COLORS ░░░
 */
 
-export type IOTheme = {
+const themeKeys = [
   // General
-  "appBackground-primary": IOColors;
-  "appBackground-secondary": IOColors;
-  "appBackground-tertiary": IOColors;
-  "appBackground-accent": IOColors;
-  "interactiveElem-default": IOColors;
-  "interactiveElem-pressed": IOColors;
-  "listItem-pressed": IOColors;
+  "appBackground-primary",
+  "appBackground-secondary",
+  "appBackground-tertiary",
+  "appBackground-accent",
+  "interactiveElem-default",
+  "interactiveElem-pressed",
+  "listItem-pressed",
   // Typography
-  "textHeading-default": IOColors;
-  "textBody-default": IOColors;
-  "textBody-secondary": IOColors;
-  "textBody-tertiary": IOColors;
+  "textHeading-default",
+  "textHeading-secondary",
+  "textHeading-tertiary",
+  "textBody-default",
+  "textBody-secondary",
+  "textBody-tertiary",
   // Design System related
-  "cardBorder-default": IOColors;
-  "icon-default": IOColors;
-  "icon-decorative": IOColors;
+  "cardBorder-default",
+  "icon-default",
+  "icon-decorative",
   // Layout
-  "divider-header": IOColors;
-  "divider-default": IOColors;
-  "divider-bottomBar": IOColors;
+  "divider-header",
+  "divider-default",
+  "divider-bottomBar",
   // Status
-  errorIcon: IOColors;
-  errorText: IOColors;
-  successText: IOColors;
+  "errorIcon",
+  "errorText",
+  "successText",
   // Pictograms
-  "pictogram-hands": IOColors;
-  "pictogram-tint-main": IOColors;
-  "pictogram-tint-secondary": IOColors;
-  "pictogram-tint-tertiary": IOColors;
+  "pictogram-hands",
+  "pictogram-tint-main",
+  "pictogram-tint-secondary",
+  "pictogram-tint-tertiary"
+] as const;
+
+export type IOTheme = {
+  [K in (typeof themeKeys)[number]]: IOColors;
 };
 
 export const IOThemeLight: IOTheme = {
@@ -300,6 +306,8 @@ export const IOThemeLight: IOTheme = {
   "listItem-pressed": "grey-50",
   // Typography
   "textHeading-default": "black",
+  "textHeading-secondary": "grey-850",
+  "textHeading-tertiary": "grey-700",
   "textBody-default": "black",
   "textBody-secondary": "grey-850",
   "textBody-tertiary": "grey-700",
@@ -340,6 +348,8 @@ export const IOThemeDark: IOTheme = {
   "listItem-pressed": "grey-850",
   // Typography
   "textHeading-default": "grey-200",
+  "textHeading-secondary": "grey-300",
+  "textHeading-tertiary": "grey-450",
   "textBody-default": "white",
   "textBody-secondary": "grey-100",
   "textBody-tertiary": "grey-450",
diff --git a/src/core/IOStyles.ts b/src/core/IOStyles.ts
index 8a320544..47430b98 100644
--- a/src/core/IOStyles.ts
+++ b/src/core/IOStyles.ts
@@ -1,5 +1,4 @@
-import { Platform, StyleSheet, Text } from "react-native";
-import { ComponentProps } from "react";
+import { Platform, StyleSheet } from "react-native";
 import { IOIconSizeScale } from "../components/icons";
 import { IOColors } from "./IOColors";
 import { IOModuleIDPRadius } from "./IOShapes";
@@ -19,8 +18,6 @@ interface IOVisualCostants {
   appMarginDefault: IOAppMargin;
   // Header
   headerHeight: number;
-  // Typography
-  maxFontSizeMultiplier: ComponentProps<typeof Text>["maxFontSizeMultiplier"];
   // Dimensions
   avatarSizeSmall: number;
   avatarSizeMedium: number;
@@ -35,7 +32,6 @@ interface IOVisualCostants {
 export const IOVisualCostants: IOVisualCostants = {
   appMarginDefault: 24,
   headerHeight: 56,
-  maxFontSizeMultiplier: 1.25,
   avatarSizeSmall: 44,
   avatarSizeMedium: 66,
   avatarRadiusSizeSmall: 8,
diff --git a/src/utils/accessibility.ts b/src/utils/accessibility.ts
index 31da6295..0b7b224d 100644
--- a/src/utils/accessibility.ts
+++ b/src/utils/accessibility.ts
@@ -1,6 +1,8 @@
 import { pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import I18n from "i18n-js";
+import { useEffect, useState } from "react";
+import { AccessibilityInfo, Platform } from "react-native";
 
 /**
  * This function is used to get the text that will be read by the screen reader
@@ -15,3 +17,35 @@ export const getAccessibleAmountText = (amount?: string) =>
     ),
     O.getOrElseW(() => undefined)
   );
+
+/**
+ * Query whether a bold text is currently enabled. The result is true
+ * when bold text is enabled and false otherwise.
+ */
+export const useBoldTextEnabled = () => {
+  const [boldTextEnabled, setBoldTextEnabled] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS !== "web") {
+      const boldTextChangedSubscription = AccessibilityInfo.addEventListener(
+        "boldTextChanged",
+        isBoldTextEnabled => {
+          setBoldTextEnabled(isBoldTextEnabled);
+        }
+      );
+
+      AccessibilityInfo.isBoldTextEnabled()
+        .then(isBoldTextEnabled => {
+          setBoldTextEnabled(isBoldTextEnabled);
+        })
+        .catch(_ => false);
+
+      return () => {
+        boldTextChangedSubscription.remove();
+      };
+    }
+    return;
+  }, []);
+
+  return boldTextEnabled;
+};
diff --git a/src/utils/fonts.ts b/src/utils/fonts.ts
index b7bfb69c..2ff4be4f 100644
--- a/src/utils/fonts.ts
+++ b/src/utils/fonts.ts
@@ -4,7 +4,7 @@
  * README file included in this repository.
  */
 
-import { Platform } from "react-native";
+import { Platform, TextStyle } from "react-native";
 
 /**
  * Choose the font name based on the platform
@@ -13,33 +13,48 @@ const fonts = {
   TitilliumSansPro: Platform.select({
     android: "TitilliumSansPro",
     web: "TitilliumSansPro",
-    ios: "Titillium Sans Pro"
+    ios: "Titillium Sans Pro",
+    default: "TitilliumSansPro"
   }),
   ReadexPro: Platform.select({
     android: "ReadexPro",
     web: "ReadexPro",
-    ios: "Readex Pro"
+    ios: "Readex Pro",
+    default: "ReadexPro"
   }),
   DMMono: Platform.select({
     android: "DMMono",
     web: "DMMono",
-    ios: "DM Mono"
+    ios: "DM Mono",
+    default: "DMMono"
   })
 };
 
 export type IOFontFamily = keyof typeof fonts;
 
+/*
+ * Font Sizes
+ */
+const fontSizes = [12, 14, 16, 20, 22, 26, 28, 32] as const;
+const fontSizesLegacy = [18, 28, 31, 35] as const;
+const allFontSizes = [...new Set([...fontSizes, ...fontSizesLegacy])];
+export type IOFontSize = (typeof allFontSizes)[number];
+
+/*
+ * Font Weights
+ */
+
 const weights = ["Light", "Regular", "Medium", "Semibold", "Bold"] as const;
 export type IOFontWeight = (typeof weights)[number];
 
 const weightValues = ["300", "400", "500", "600", "700"] as const;
-export type FontWeightValue = (typeof weightValues)[number];
+export type IOFontWeightNumeric = (typeof weightValues)[number];
 
 /**
  * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
  * used on iOS
  */
-export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
+export const fontWeights: Record<IOFontWeight, IOFontWeightNumeric> = {
   Light: "300",
   Regular: "400",
   Medium: "500",
@@ -47,30 +62,28 @@ export const fontWeights: Record<IOFontWeight, FontWeightValue> = {
   Bold: "700"
 };
 
-export type FontFamily = keyof typeof fonts;
-export type FontWeight = keyof typeof fontWeights;
-
-/**
- * Mapping between the nominal description of the weight (also the postfix used on Android) and the numeric value
- * used on iOS
- */
-export const fontWeightsMap: Record<IOFontWeight, FontWeightValue> = {
-  Light: "300",
-  Regular: "400",
-  Medium: "500",
-  Semibold: "600",
-  Bold: "700"
+type FontStyleObject = {
+  fontSize: IOFontSize;
+  /* We also accept `string` because Android needs a composed 
+  fontFamily name, like `TitilliumSansPro-Regular` */
+  fontFamily: string | IOFontFamily;
+  fontWeight?: IOFontWeightNumeric;
+  lineHeight?: TextStyle["lineHeight"];
+  fontStyle?: TextStyle["fontStyle"];
+  boldEnabled?: boolean;
 };
 
-export enum FontStyle {
-  "normal" = "normal",
-  "italic" = "italic"
-}
-
-type FontStyleObject = {
-  fontFamily: string;
-  fontWeight?: FontWeightValue;
-  fontStyle?: FontStyle;
+/* Function that, given a certain weight, returns the next
+available `FontWeight` value. 
+For example, if I set it to `Regular`, the function 
+should return `Medium`, and so on. If I set it to the last `FontWeight`
+value, the function will return the same value.
+*/
+const getBolderFontWeight = (weight: IOFontWeight): IOFontWeight => {
+  const currentWeight = weights.indexOf(weight);
+  return currentWeight === weights.length - 1
+    ? weight
+    : weights[currentWeight + 1];
 };
 
 /**
@@ -80,42 +93,73 @@ type FontStyleObject = {
  * @param isItalic
  */
 export const makeFontFamilyName = (
-  font: FontFamily,
-  weight?: IOFontWeight,
-  isItalic: boolean = false
-): string =>
+  font: IOFontFamily,
+  weight: IOFontWeight = defaultWeight,
+  fontStyle: TextStyle["fontStyle"] = "normal"
+): FontStyleObject["fontFamily"] =>
   Platform.select({
     web: fonts[font],
-    android: `${fonts[font]}-${weight || "Regular"}${isItalic ? "Italic" : ""}`,
+    android: `${fonts[font]}-${weight || "Regular"}${
+      fontStyle === "italic" ? "Italic" : ""
+    }`,
     ios: fonts[font],
-    default: "undefined"
+    default: fonts[font]
   });
 
+/**
+ * Default `IOText` typography style
+ */
+const defaultFont: IOFontFamily = "TitilliumSansPro";
+const defaultWeight: IOFontWeight = "Regular";
+const defaultFontSize: IOFontSize = 16;
+
 /**
  * Return a {@link FontStyleObject} with the fields filled based on the platform (iOS or Android).
- * @param weight
- * @param isItalic
+ * @param size
  * @param font
+ * @param weight
+ * @param fontStyle
  */
+
 export const makeFontStyleObject = (
-  weight: IOFontWeight | undefined = undefined,
-  isItalic: boolean | undefined = false,
-  font: FontFamily | undefined = "TitilliumSansPro"
-): FontStyleObject =>
-  Platform.select({
+  size: IOFontSize = defaultFontSize,
+  font: IOFontFamily = defaultFont,
+  lineHeight: TextStyle["lineHeight"],
+  weight: IOFontWeight = defaultWeight,
+  fontStyle: TextStyle["fontStyle"] = "normal",
+  boldEnabled: boolean = false
+): FontStyleObject => {
+  /* If bold text is currently enabled, we select the next
+     available `IOFontWeight` value */
+  const dynamicWeight = boldEnabled ? getBolderFontWeight(weight) : weight;
+
+  return Platform.select({
     web: {
-      fontFamily: makeFontFamilyName(font, weight, isItalic),
-      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
-      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      fontWeight: fontWeights[dynamicWeight],
+      lineHeight,
+      fontStyle
     },
+    // On Android other type attributes, like `fontWeight` or `fontStyle`
+    // are directly managed through the `fontFamily` name, so we dont' need to
+    // include them in the object.
     android: {
-      includeFontPadding: false,
-      fontFamily: makeFontFamilyName(font, weight, isItalic)
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      lineHeight,
+      includeFontPadding: false
     },
     ios: {
-      fontFamily: makeFontFamilyName(font, weight, isItalic),
-      fontWeight: weight !== undefined ? fontWeightsMap[weight] : weight,
-      fontStyle: isItalic ? FontStyle.italic : FontStyle.normal
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle),
+      fontWeight: fontWeights[dynamicWeight],
+      lineHeight,
+      fontStyle
     },
-    default: { fontFamily: "undefined" }
+    default: {
+      fontSize: size,
+      fontFamily: makeFontFamilyName(font, dynamicWeight, fontStyle)
+    }
   });
+};
diff --git a/stories/featureInfo/FeatureInfo.stories.ts b/stories/featureInfo/FeatureInfo.stories.ts
index 70232416..4c94b05f 100644
--- a/stories/featureInfo/FeatureInfo.stories.ts
+++ b/stories/featureInfo/FeatureInfo.stories.ts
@@ -27,9 +27,11 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = {
   args: {
     body: "Dopo questo passaggio non sarà più possibile annullare il pagamento",
-    actionLabel: "Conferma",
-    actionOnPress: e => {
-      action("clicked")(e);
+    action: {
+      label: "Conferma",
+      onPress: e => {
+        action("clicked")(e);
+      }
     }
   }
 };
diff --git a/stories/foundation/typography/Link.stories.ts b/stories/foundation/typography/Link.stories.ts
deleted file mode 100644
index daeab1ee..00000000
--- a/stories/foundation/typography/Link.stories.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Alert } from "react-native";
-import { LabelLink } from "../../../src/components";
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: "Foundation/Typography/Link",
-  component: LabelLink,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-    layout: "centered",
-    actions: { argTypesRegex: "^on.*" }
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
-  tags: ["autodocs"]
-} satisfies Meta<typeof LabelLink>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    accessibilityLabel: "Tap to trigger test alert",
-    onPress: () => Alert.alert("Alert", "Action triggered"),
-    children: "Hello World"
-  }
-};

From 72467a9b189b27a994d2419df54a86c89f288bfc Mon Sep 17 00:00:00 2001
From: Damiano Plebani <damiano.plebani@pagopa.it>
Date: Mon, 21 Oct 2024 17:00:06 +0200
Subject: [PATCH 11/11] chore: release 2.0.3

---
 CHANGELOG.md | 9 ++++++++-
 package.json | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34958a8d..b49d87f7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,15 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v2.0.3](https://github.com/pagopa/io-app-design-system/compare/v2.0.2...v2.0.3)
+
+- Make the `2.x` version the official, latest release. [`#339`](https://github.com/pagopa/io-app-design-system/pull/339)
+- [IOAPPX-402] Add full dark mode support to `ListItemTransaction` [`#337`](https://github.com/pagopa/io-app-design-system/pull/337)
+
 #### [v2.0.2](https://github.com/pagopa/io-app-design-system/compare/v2.0.1...v2.0.2)
 
+> 17 October 2024
+
 - [IOAPPX-400] Add `testID` to `ContentWrapper` [`#336`](https://github.com/pagopa/io-app-design-system/pull/336)
 - [IOAPPX-398] Add dark mode compatibility to `HeaderSecondLevel` [`#335`](https://github.com/pagopa/io-app-design-system/pull/335)
 - [IOAPPX-353] Add the new `FooterActions` (from `io-app`) and `FooterActionsInline` [`#316`](https://github.com/pagopa/io-app-design-system/pull/316)
 - feat: [EUDIW-54] Add new pictograms for EUDIW app [`#332`](https://github.com/pagopa/io-app-design-system/pull/332)
 - chore: release 1.46.2 [`492b8a6`](https://github.com/pagopa/io-app-design-system/commit/492b8a67d452c93b47b6a3ca23a1dd3d191b267f)
+- chore: release 2.0.2 [`f904e02`](https://github.com/pagopa/io-app-design-system/commit/f904e025a426d346e0e3848f5ae572487bfe5048)
 - chore: release 1.47.0 [`5b3f8a6`](https://github.com/pagopa/io-app-design-system/commit/5b3f8a650fa3c7573000eb35a332d0906d0551ed)
-- chore: release 1.47.2 [`2ccec35`](https://github.com/pagopa/io-app-design-system/commit/2ccec35de737493b3092592fe63911c77e1abef3)
 
 #### [v2.0.1](https://github.com/pagopa/io-app-design-system/compare/v2.0.0...v2.0.1)
 
diff --git a/package.json b/package.json
index f075df1a..7b1f07fb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pagopa/io-app-design-system",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "The library defining the core components of the design system of @pagopa/io-app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",