diff --git a/example/src/pages/Selection.tsx b/example/src/pages/Selection.tsx
index 3b7a609b..d9f1a273 100644
--- a/example/src/pages/Selection.tsx
+++ b/example/src/pages/Selection.tsx
@@ -9,39 +9,48 @@ import {
   NewRadioItem,
   RadioGroup,
   SwitchLabel,
-  VSpacer
+  VSpacer,
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import React, { useState } from "react";
 import { View } from "react-native";
 import { ComponentViewerBox } from "../components/ComponentViewerBox";
 import { Screen } from "../components/Screen";
 
-export const Selection = () => (
-  <Screen>
-    <H2
-      style={{
-        marginVertical: 16,
-        paddingTop: IOVisualCostants.appMarginDefault
-      }}
-    >
-      Checkbox
-    </H2>
-    {/* CheckboxLabel */}
-    {renderCheckboxLabel()}
-    {/* ListItemCheckbox */}
-    {renderListItemCheckbox()}
-    <H2 style={{ marginVertical: 16 }}>Radio</H2>
-    {/* RadioListItem */}
-    <RadioListItemsShowroom />
-    <H2 style={{ marginVertical: 16 }}>Switch</H2>
-    {/* Native Switch */}
-    <NativeSwitchShowroom />
-    {/* ListItemSwitch */}
-    <ListItemSwitchShowroom />
-    {/* SwitchLabel */}
-    {renderAnimatedSwitch()}
-  </Screen>
-);
+export const Selection = () => {
+  const { isExperimental, setExperimental } = useIOExperimentalDesign();
+  return (
+    <Screen>
+      <H2
+        style={{
+          marginVertical: 16,
+          paddingTop: IOVisualCostants.appMarginDefault
+        }}
+      >
+        Checkbox
+      </H2>
+      <ListItemSwitch
+        label="Abilita Design Sperimentale"
+        value={isExperimental}
+        onSwitchValueChange={setExperimental}
+      />
+      {/* CheckboxLabel */}
+      {renderCheckboxLabel()}
+      {/* ListItemCheckbox */}
+      {renderListItemCheckbox()}
+      <H2 style={{ marginVertical: 16 }}>Radio</H2>
+      {/* RadioListItem */}
+      <RadioListItemsShowroom />
+      <H2 style={{ marginVertical: 16 }}>Switch</H2>
+      {/* Native Switch */}
+      <NativeSwitchShowroom />
+      {/* ListItemSwitch */}
+      <ListItemSwitchShowroom />
+      {/* SwitchLabel */}
+      {renderAnimatedSwitch()}
+    </Screen>
+  );
+};
 
 const renderCheckboxLabel = () => (
   <>
diff --git a/src/components/checkbox/AnimatedCheckbox.tsx b/src/components/checkbox/AnimatedCheckbox.tsx
index b2370440..63fd1050 100644
--- a/src/components/checkbox/AnimatedCheckbox.tsx
+++ b/src/components/checkbox/AnimatedCheckbox.tsx
@@ -8,9 +8,13 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import {
+  IOSelectionTickLegacyVisualParams,
+  IOSelectionTickVisualParams
+} from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -52,6 +56,25 @@ const styles = StyleSheet.create({
 export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
   const isChecked = checked ?? false;
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const borderColorOffState =
+    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBorderColorOffState =
+    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
+  const borderColorProp = isExperimental
+    ? borderColorOffState
+    : legacyBorderColorOffState;
+
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
+
   const squareAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
@@ -89,8 +112,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkboxBorder,
           {
-            borderColor:
-              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+            borderColor: borderColorProp
           }
         ]}
       />
@@ -98,8 +120,7 @@ export const AnimatedCheckbox = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.checkBoxSquare,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxSquare
         ]}
diff --git a/src/components/checkbox/AnimatedMessageCheckbox.tsx b/src/components/checkbox/AnimatedMessageCheckbox.tsx
index b9ebac97..a4fb4292 100644
--- a/src/components/checkbox/AnimatedMessageCheckbox.tsx
+++ b/src/components/checkbox/AnimatedMessageCheckbox.tsx
@@ -1,21 +1,23 @@
 import React, { useEffect } from "react";
-import { StyleSheet, Pressable, PressableProps } from "react-native";
+import { Pressable, PressableProps, StyleSheet } from "react-native";
 import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
+  Easing,
   interpolate,
+  useAnimatedStyle,
+  useSharedValue,
   withSpring,
-  withTiming,
-  Easing
+  withTiming
 } from "react-native-reanimated";
-import { IOColors } from "../../core/IOColors";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
-import { AnimatedTick } from "../common/AnimatedTick";
+import { IOColors } from "../../core/IOColors";
+import { IOSpacingScale } from "../../core/IOSpacing";
 import {
+  IOSelectionTickLegacyVisualParams,
   IOSelectionTickVisualParams,
   IOVisualCostants
 } from "../../core/IOStyles";
-import { IOSpacingScale } from "../../core/IOSpacing";
+import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
   checked?: boolean;
@@ -50,9 +52,18 @@ export const AnimatedMessageCheckbox = ({
   onPress
 }: AnimatedMessageCheckbox) => {
   const isChecked = checked ?? true;
+  const { isExperimental } = useIOExperimentalDesign();
 
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
 
   useEffect(() => {
     // eslint-disable-next-line functional/immutable-data
@@ -87,8 +98,7 @@ export const AnimatedMessageCheckbox = ({
         style={[
           styles.checkBoxCircle,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxCircle
         ]}
diff --git a/src/components/checkbox/CheckboxLabel.tsx b/src/components/checkbox/CheckboxLabel.tsx
index 31a706bc..9f0379de 100644
--- a/src/components/checkbox/CheckboxLabel.tsx
+++ b/src/components/checkbox/CheckboxLabel.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
-import { triggerHaptic } from "../../functions/haptic-feedback/hapticFeedback";
-import { H6 } from "../typography/H6";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } 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 { AnimatedCheckbox } from "./AnimatedCheckbox";
 
 type Props = {
@@ -21,6 +23,17 @@ type OwnProps = Props &
   Pick<React.ComponentProps<typeof AnimatedCheckbox>, "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, "TitilliumWeb")
+  }
+});
+
 /**
  * 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`.
@@ -36,6 +49,22 @@ export const CheckboxLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const checkboxLabelText = (
+    <H6 style={{ flexShrink: 1 }} color={"black"}>
+      {label}
+    </H6>
+  );
+
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyCheckboxlabelText = (
+    <Text style={styles.legacyTextValue}>{label}</Text>
+  );
+
+  const checkboxLabelTextComponent = isExperimental
+    ? checkboxLabelText
+    : legacyCheckboxlabelText;
+
   const toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -67,9 +96,7 @@ export const CheckboxLabel = ({
           <AnimatedCheckbox checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 color={"black"} style={{ flexShrink: 1 }}>
-          {label}
-        </H6>
+        {checkboxLabelTextComponent}
       </View>
     </Pressable>
   );
diff --git a/src/components/radio/AnimatedRadio.tsx b/src/components/radio/AnimatedRadio.tsx
index 7bda863d..ec22617a 100644
--- a/src/components/radio/AnimatedRadio.tsx
+++ b/src/components/radio/AnimatedRadio.tsx
@@ -8,9 +8,13 @@ import Animated, {
   withSpring,
   withTiming
 } from "react-native-reanimated";
+import { useIOExperimentalDesign } from "../../core";
 import { IOSpringValues } from "../../core/IOAnimations";
 import { IOColors } from "../../core/IOColors";
-import { IOSelectionTickVisualParams } from "../../core/IOStyles";
+import {
+  IOSelectionTickLegacyVisualParams,
+  IOSelectionTickVisualParams
+} from "../../core/IOStyles";
 import { AnimatedTick } from "../common/AnimatedTick";
 
 type Props = {
@@ -50,6 +54,25 @@ const styles = StyleSheet.create({
 export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
   const isChecked = checked ?? false;
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const borderColorOffState =
+    IOColors[IOSelectionTickVisualParams.borderColorOffState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBorderColorOffState =
+    IOColors[IOSelectionTickLegacyVisualParams.borderColorOffState];
+  const borderColorProp = isExperimental
+    ? borderColorOffState
+    : legacyBorderColorOffState;
+
+  const backgroundColorOnState =
+    IOColors[IOSelectionTickVisualParams.bgColorOnState];
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyBackgroundColorOnState =
+    IOColors[IOSelectionTickLegacyVisualParams.bgColorOnState];
+  const backgroundColorProp = isExperimental
+    ? backgroundColorOnState
+    : legacyBackgroundColorOnState;
+
   const circleAnimationProgress = useSharedValue(checked ? 1 : 0);
   const tickAnimationProgress = useSharedValue(checked ? 1 : 0);
 
@@ -87,8 +110,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.radioBorder,
           {
-            borderColor:
-              IOColors[IOSelectionTickVisualParams.borderColorOffState]
+            borderColor: borderColorProp
           }
         ]}
       />
@@ -96,8 +118,7 @@ export const AnimatedRadio = ({ checked, onPress, disabled }: OwnProps) => {
         style={[
           styles.radioCircle,
           {
-            backgroundColor:
-              IOColors[IOSelectionTickVisualParams.bgColorOnState]
+            backgroundColor: backgroundColorProp
           },
           animatedCheckboxSquare
         ]}
diff --git a/src/components/switch/NativeSwitch.tsx b/src/components/switch/NativeSwitch.tsx
index 9cc1a953..c900dd19 100644
--- a/src/components/switch/NativeSwitch.tsx
+++ b/src/components/switch/NativeSwitch.tsx
@@ -1,19 +1,41 @@
 import React from "react";
-import { Switch, SwitchProps } from "react-native";
+import { Platform, Switch, SwitchProps } from "react-native";
+import { useIOExperimentalDesign } from "../../core";
 import { IOColors } from "../../core/IOColors";
 import { IOSwitchVisualParams } from "../../core/IOStyles";
 
 type OwnProps = Pick<SwitchProps, "onValueChange" | "value">;
 
-export const NativeSwitch = ({ onValueChange, value }: OwnProps) => (
-  <Switch
-    trackColor={{
-      false: IOColors[IOSwitchVisualParams.bgColorOffState],
-      true: IOColors[IOSwitchVisualParams.bgColorOnState]
-    }}
-    thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
-    ios_backgroundColor={IOColors[IOSwitchVisualParams.bgColorOffState]}
-    onValueChange={onValueChange}
-    value={value}
-  />
-);
+// TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+const bgLegacyTrackColorAndroid =
+  Platform.OS === "android" ? IOColors["grey-300"] : IOColors.greyUltraLight;
+
+export const NativeSwitch = ({ onValueChange, value }: OwnProps) => {
+  const { isExperimental } = useIOExperimentalDesign();
+  const trackColor = {
+    false: IOColors[IOSwitchVisualParams.bgColorOffState],
+    true: IOColors[IOSwitchVisualParams.bgColorOnState]
+  };
+
+  // TODO: Remove this when legacy look is deprecated https://pagopa.atlassian.net/browse/IOPLT-153
+  const legacyTrackColor = {
+    false: bgLegacyTrackColorAndroid,
+    true: IOColors.blue
+  };
+
+  const trackColorComponent = isExperimental ? trackColor : legacyTrackColor;
+
+  return (
+    <Switch
+      trackColor={trackColorComponent}
+      thumbColor={IOColors[IOSwitchVisualParams.bgCircle]}
+      ios_backgroundColor={
+        isExperimental
+          ? IOColors[IOSwitchVisualParams.bgColorOffState]
+          : bgLegacyTrackColorAndroid
+      }
+      onValueChange={onValueChange}
+      value={value}
+    />
+  );
+};
diff --git a/src/components/switch/SwitchLabel.tsx b/src/components/switch/SwitchLabel.tsx
index 7de4488b..e37cb7b7 100644
--- a/src/components/switch/SwitchLabel.tsx
+++ b/src/components/switch/SwitchLabel.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useState } from "react";
-import { Pressable, View } from "react-native";
-import { H6 } from "../typography/H6";
-import { HSpacer } from "../spacer/Spacer";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { IOColors, useIOExperimentalDesign } 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";
 
 type Props = {
@@ -21,6 +23,17 @@ 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, "TitilliumWeb")
+  }
+});
+
 /**
  * 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`.
@@ -36,6 +49,22 @@ export const SwitchLabel = ({
 }: OwnProps) => {
   const [toggleValue, setToggleValue] = useState(checked ?? false);
 
+  const { isExperimental } = useIOExperimentalDesign();
+  const switchLabelText = (
+    <H6 style={{ flexShrink: 1 }} color={"black"}>
+      {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 toggleCheckbox = () => {
     triggerHaptic("impactLight");
     setToggleValue(!toggleValue);
@@ -64,9 +93,7 @@ export const SwitchLabel = ({
           <AnimatedSwitch checked={checked ?? toggleValue} />
         </View>
         <HSpacer size={8} />
-        <H6 style={{ flexShrink: 1 }} color={"black"}>
-          {label}
-        </H6>
+        {switchLabelTextComponent}
       </View>
     </Pressable>
   );