diff --git a/packages/theme/src/spacings.ts b/packages/theme/src/spacings.ts
index 059b32c0661..48637c33341 100644
--- a/packages/theme/src/spacings.ts
+++ b/packages/theme/src/spacings.ts
@@ -27,7 +27,7 @@ export type Spacings = typeof spacings;
 export type Spacing = keyof typeof spacings;
 export type SpacingValues = Spacings[Spacing];
 
-type NativeSpacingValue = 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 52 | 64;
+type NativeSpacingValue = 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 52 | 64;
 
 export const nativeSpacings = {
     sp2: 2,
@@ -35,6 +35,7 @@ export const nativeSpacings = {
     sp8: 8,
     sp12: 12,
     sp16: 16,
+    sp20: 20,
     sp24: 24,
     sp32: 32,
     sp40: 40,
diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
index a4985199b64..2aa951e614e 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
@@ -30,7 +30,7 @@ const accountListItemStyle = prepareNativeStyle<{
     justifyContent: 'space-between',
     alignItem: 'center',
 
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     paddingHorizontal: utils.spacings.sp16,
 
     extend: {
diff --git a/suite-native/accounts/src/components/SelectableNetworkItem.tsx b/suite-native/accounts/src/components/SelectableNetworkItem.tsx
index 3e313b09cb2..30a4931d371 100644
--- a/suite-native/accounts/src/components/SelectableNetworkItem.tsx
+++ b/suite-native/accounts/src/components/SelectableNetworkItem.tsx
@@ -19,11 +19,11 @@ const selectableAssetContentStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     justifyContent: 'space-between',
     flex: 1,
-    marginLeft: utils.spacings.sp8 + utils.spacings.sp4,
+    marginLeft: utils.spacings.sp12,
 }));
 
 const tokensBadgeStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.sp4 / 2,
+    paddingBottom: utils.spacings.sp2,
 }));
 
 export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: SelectableAssetItemProps) => {
diff --git a/suite-native/atoms/src/AlertBox.tsx b/suite-native/atoms/src/AlertBox.tsx
index 57fa0381a52..43b3c4cf180 100644
--- a/suite-native/atoms/src/AlertBox.tsx
+++ b/suite-native/atoms/src/AlertBox.tsx
@@ -32,13 +32,13 @@ const alertWrapperStyle = prepareNativeStyle<AlertWrapperStyleType>(
         backgroundColor: utils.colors[backgroundColor],
         paddingVertical: utils.spacings.sp8,
         paddingHorizontal: utils.spacings.sp16,
-        gap: 12,
+        gap: utils.spacings.sp12,
     }),
 );
 
-const textStyle = prepareNativeStyle(_ => ({
+const textStyle = prepareNativeStyle(utils => ({
     flex: 1,
-    paddingTop: 2,
+    paddingTop: utils.spacings.sp2,
 }));
 
 const variantToColorMap = {
diff --git a/suite-native/atoms/src/Badge.tsx b/suite-native/atoms/src/Badge.tsx
index feb20240c70..e6cb2f991ed 100644
--- a/suite-native/atoms/src/Badge.tsx
+++ b/suite-native/atoms/src/Badge.tsx
@@ -52,7 +52,7 @@ const badgeStyle = prepareNativeStyle<BadgeStyleProps>(
         justifyContent: 'center',
         backgroundColor: utils.colors[backgroundColor],
         paddingHorizontal: utils.spacings.sp8 - (size === 'medium' ? 0 : 2),
-        paddingVertical: utils.spacings.sp8 / 4,
+        paddingVertical: utils.spacings.sp2,
         borderRadius: utils.borders.radii.round,
         extend: [
             {
diff --git a/suite-native/atoms/src/BottomSheetListItem.tsx b/suite-native/atoms/src/BottomSheetListItem.tsx
index 320913f9de3..030100f923d 100644
--- a/suite-native/atoms/src/BottomSheetListItem.tsx
+++ b/suite-native/atoms/src/BottomSheetListItem.tsx
@@ -17,7 +17,7 @@ export const BottomSheetListItem = ({ translationKey, ...props }: BottomSheetLis
     const { applyStyle } = useNativeStyles();
 
     return (
-        <HStack spacing={12} alignItems="center">
+        <HStack spacing="sp12" alignItems="center">
             <OrderedListIcon {...props} />
             <Text style={applyStyle(listItemStyle)}>
                 <Translation id={translationKey} />
diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx
index 9ee1f817023..9e2e40bb08e 100644
--- a/suite-native/atoms/src/Button/Button.tsx
+++ b/suite-native/atoms/src/Button/Button.tsx
@@ -181,7 +181,7 @@ const sizeToDimensionsMap = {
     extraSmall: {
         minHeight: 36,
         paddingVertical: nativeSpacings.sp8,
-        paddingHorizontal: 12,
+        paddingHorizontal: nativeSpacings.sp12,
     },
     small: {
         minHeight: 40,
@@ -190,8 +190,8 @@ const sizeToDimensionsMap = {
     },
     medium: {
         minHeight: 48,
-        paddingVertical: 12,
-        paddingHorizontal: 20,
+        paddingVertical: nativeSpacings.sp12,
+        paddingHorizontal: nativeSpacings.sp20,
     },
     large: {
         minHeight: 56,
diff --git a/suite-native/atoms/src/ScreenHeaderWrapper.tsx b/suite-native/atoms/src/ScreenHeaderWrapper.tsx
index f1b700592f8..26d55e931b1 100644
--- a/suite-native/atoms/src/ScreenHeaderWrapper.tsx
+++ b/suite-native/atoms/src/ScreenHeaderWrapper.tsx
@@ -17,7 +17,7 @@ const screenHeaderWrapperStyle = prepareNativeStyle<{ insets: EdgeInsets }>(
         paddingLeft: Math.max(insets.left, utils.spacings.sp16),
         paddingRight: Math.max(insets.right, utils.spacings.sp16),
         paddingVertical: utils.spacings.sp16,
-        paddingBottom: utils.spacings.sp4 * 3,
+        paddingBottom: utils.spacings.sp12,
     }),
 );
 
diff --git a/suite-native/atoms/src/Select/SelectTrigger.tsx b/suite-native/atoms/src/Select/SelectTrigger.tsx
index 66c090b5636..20a87210051 100644
--- a/suite-native/atoms/src/Select/SelectTrigger.tsx
+++ b/suite-native/atoms/src/Select/SelectTrigger.tsx
@@ -25,7 +25,7 @@ const selectStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.small,
     borderColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     color: utils.colors.textSubdued,
-    paddingLeft: 12,
+    paddingLeft: utils.spacings.sp12,
     paddingRight: 23.25,
     height: SELECT_HEIGHT,
 }));
diff --git a/suite-native/atoms/src/SelectableItem.tsx b/suite-native/atoms/src/SelectableItem.tsx
index e5da71b9b45..930f1391bcf 100644
--- a/suite-native/atoms/src/SelectableItem.tsx
+++ b/suite-native/atoms/src/SelectableItem.tsx
@@ -33,10 +33,10 @@ const titleWrapperStyle = prepareNativeStyle(_ => ({
     justifyContent: 'space-between',
 }));
 
-const radioWrapperStyle = prepareNativeStyle(_ => ({
+const radioWrapperStyle = prepareNativeStyle(utils => ({
     width: '100%',
     alignItems: 'flex-end',
-    paddingTop: 12,
+    paddingTop: utils.spacings.sp12,
 }));
 
 const subtitleWrapperStyle = prepareNativeStyle(utils => ({
diff --git a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
index d06d854cdae..03d0479273b 100644
--- a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
+++ b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
@@ -10,7 +10,7 @@ import { VStack } from '../Stack';
 const skeletonContainer = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     paddingHorizontal: utils.spacings.sp16,
 }));
 
diff --git a/suite-native/atoms/src/TextDivider.tsx b/suite-native/atoms/src/TextDivider.tsx
index 0cc18643cbe..ca586900ef0 100644
--- a/suite-native/atoms/src/TextDivider.tsx
+++ b/suite-native/atoms/src/TextDivider.tsx
@@ -24,7 +24,7 @@ const separatorStyle = prepareNativeStyle<{ horizontalMargin?: number; color: Co
 );
 
 const separatorTitleStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: 12,
+    paddingHorizontal: utils.spacings.sp12,
     paddingVertical: utils.spacings.sp4,
 }));
 
diff --git a/suite-native/biometrics/src/components/BiometricsIcon.tsx b/suite-native/biometrics/src/components/BiometricsIcon.tsx
index e9564777190..55ae7c607c4 100644
--- a/suite-native/biometrics/src/components/BiometricsIcon.tsx
+++ b/suite-native/biometrics/src/components/BiometricsIcon.tsx
@@ -1,20 +1,17 @@
 import { Platform } from 'react-native';
 
-import { IconName, Icon } from '@suite-common/icons-deprecated';
+import { Icon, IconName } from '@suite-common/icons-deprecated';
 import { Box } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
-const ICON_SIZE_DEFAULT = 64;
-const ICON_WRAPPER_PADDING = 12;
-
 const iconWrapperStyle = prepareNativeStyle(
-    (utils, { wrapperSize, showShadow }: { wrapperSize: number; showShadow: boolean }) => ({
-        padding: ICON_WRAPPER_PADDING,
+    (utils, { iconSize, showShadow }: { iconSize: number; showShadow: boolean }) => ({
+        padding: utils.spacings.sp12,
         borderRadius: utils.borders.radii.round,
         backgroundColor: utils.colors.backgroundSurfaceElevation2,
         color: utils.colors.iconPrimaryDefault,
-        width: wrapperSize,
-        height: wrapperSize,
+        width: iconSize + 2 * utils.spacings.sp12,
+        height: iconSize + 2 * utils.spacings.sp12,
 
         extend: {
             condition: showShadow,
@@ -28,18 +25,14 @@ type BiometricsIconProps = {
     showShadow?: boolean;
 };
 
-export const BiometricsIcon = ({
-    iconSize = ICON_SIZE_DEFAULT,
-    showShadow = false,
-}: BiometricsIconProps) => {
+export const BiometricsIcon = ({ iconSize = 64, showShadow = false }: BiometricsIconProps) => {
     const { applyStyle } = useNativeStyles();
     const icon: IconName = Platform.OS === 'ios' ? 'touchId' : 'fingerprint';
-    const iconWrapperSize = iconSize + 2 * ICON_WRAPPER_PADDING;
 
     return (
         <Box
             style={applyStyle(iconWrapperStyle, {
-                wrapperSize: iconWrapperSize,
+                iconSize,
                 showShadow,
             })}
         >
diff --git a/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx b/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
index dfdb727a9db..b351edca46d 100644
--- a/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
+++ b/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
@@ -38,7 +38,7 @@ export const DiscoveryCoinsFilter = ({
     const uniqueNetworkSymbols = [...new Set(availableNetworks.map(n => n.symbol))];
 
     return (
-        <VStack spacing={12}>
+        <VStack spacing="sp12">
             {uniqueNetworkSymbols.map((networkSymbol: NetworkSymbol) => (
                 <NetworkSymbolSwitchItem
                     key={networkSymbol}
diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
index 82f1e77a82b..b4e7484bdb8 100644
--- a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
+++ b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
@@ -37,10 +37,10 @@ const cardStyle = prepareNativeStyle<{ isEnabled: boolean }>((utils, { isEnabled
     ],
 }));
 
-const wrapperStyle = prepareNativeStyle(_ => ({
+const wrapperStyle = prepareNativeStyle(utils => ({
     paddingVertical: 6,
     paddingHorizontal: 14,
-    gap: 12,
+    gap: utils.spacings.sp12,
     alignItems: 'center',
     flex: 1,
 }));
@@ -128,7 +128,7 @@ export const NetworkSymbolSwitchItem = ({
                     </View>
                     <HStack
                         justifyContent="space-between"
-                        spacing={12}
+                        spacing="sp12"
                         flex={1}
                         alignItems="center"
                     >
diff --git a/suite-native/connection-status/src/OfflineBanner.tsx b/suite-native/connection-status/src/OfflineBanner.tsx
index 31c7fa4037f..2b0f10d5d3c 100644
--- a/suite-native/connection-status/src/OfflineBanner.tsx
+++ b/suite-native/connection-status/src/OfflineBanner.tsx
@@ -17,7 +17,7 @@ const contentStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     (utils, { topSafeAreaInset }) => ({
         marginTop: topSafeAreaInset,
         paddingTop: utils.spacings.sp8,
-        paddingBottom: 12,
+        paddingBottom: utils.spacings.sp12,
         alignItems: 'center',
     }),
 );
diff --git a/suite-native/device-manager/src/components/DeviceAction.tsx b/suite-native/device-manager/src/components/DeviceAction.tsx
index 63b8ce3fc04..ee837ee4a4a 100644
--- a/suite-native/device-manager/src/components/DeviceAction.tsx
+++ b/suite-native/device-manager/src/components/DeviceAction.tsx
@@ -14,7 +14,7 @@ type DeviceActionProps = {
 
 const contentStyle = prepareNativeStyle(utils => ({
     paddingHorizontal: utils.spacings.sp16,
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     alignItems: 'center',
     height: 44 * ACCESSIBILITY_FONTSIZE_MULTIPLIER,
     gap: utils.spacings.sp8,
diff --git a/suite-native/device-manager/src/components/DeviceManagerContent.tsx b/suite-native/device-manager/src/components/DeviceManagerContent.tsx
index f806f67090a..374b576c18f 100644
--- a/suite-native/device-manager/src/components/DeviceManagerContent.tsx
+++ b/suite-native/device-manager/src/components/DeviceManagerContent.tsx
@@ -104,7 +104,7 @@ export const DeviceManagerContent = () => {
                 />
 
                 {!isPortfolioTrackerDevice && (
-                    <VStack spacing={12} paddingTop="sp24">
+                    <VStack spacing="sp12" paddingTop="sp24">
                         <WalletList onSelectDevice={handleSelectDevice} />
                         <Stack
                             orientation={
diff --git a/suite-native/device-manager/src/components/WalletItem.tsx b/suite-native/device-manager/src/components/WalletItem.tsx
index 31b31eae54a..3ebe73ea6c6 100644
--- a/suite-native/device-manager/src/components/WalletItem.tsx
+++ b/suite-native/device-manager/src/components/WalletItem.tsx
@@ -92,7 +92,7 @@ export const WalletItem = ({ deviceState, onPress, isSelectable = true }: Wallet
                         {walletNameLabel}
                     </Text>
                 </HStack>
-                <HStack alignItems="center" spacing={12}>
+                <HStack alignItems="center" spacing="sp12">
                     <FiatAmountFormatter
                         value={String(fiatBalance)}
                         variant="hint"
diff --git a/suite-native/device-manager/src/components/WalletList.tsx b/suite-native/device-manager/src/components/WalletList.tsx
index a45962701d4..861291dc49d 100644
--- a/suite-native/device-manager/src/components/WalletList.tsx
+++ b/suite-native/device-manager/src/components/WalletList.tsx
@@ -14,7 +14,7 @@ export const WalletList = ({ onSelectDevice }: WalletListProps) => {
     const devices = useSelector(selectDeviceInstances);
 
     return (
-        <VStack spacing={12} paddingHorizontal="sp16">
+        <VStack spacing="sp12" paddingHorizontal="sp16">
             {devices.map(device => {
                 if (!device.state) {
                     return null;
diff --git a/suite-native/graph/src/components/PriceChangeIndicator.tsx b/suite-native/graph/src/components/PriceChangeIndicator.tsx
index f0ee28b9104..1a9fd380a4f 100644
--- a/suite-native/graph/src/components/PriceChangeIndicator.tsx
+++ b/suite-native/graph/src/components/PriceChangeIndicator.tsx
@@ -62,7 +62,7 @@ const priceIncreaseWrapperStyle = prepareNativeStyle<{ hasPriceIncreased: boolea
         flexDirection: 'row',
         alignItems: 'center',
         paddingHorizontal: utils.spacings.sp8,
-        paddingVertical: utils.spacings.sp4 / 2,
+        paddingVertical: utils.spacings.sp2,
         borderRadius: utils.borders.radii.round,
     }),
 );
diff --git a/suite-native/graph/src/components/TransactionEventTooltip.tsx b/suite-native/graph/src/components/TransactionEventTooltip.tsx
index cd0c35e98d2..94d6b1351d4 100644
--- a/suite-native/graph/src/components/TransactionEventTooltip.tsx
+++ b/suite-native/graph/src/components/TransactionEventTooltip.tsx
@@ -51,7 +51,7 @@ const TooltipContainerStyle = prepareNativeStyle<{ x: number; y: number }>((_, {
 }));
 
 const TooltipCardStyle = prepareNativeStyle(utils => ({
-    paddingVertical: 1.5 * utils.spacings.sp8,
+    paddingVertical: utils.spacings.sp12,
     // fade in/out animation doesn't work for elevation (shadow) on Android
     elevation: 0,
 }));
diff --git a/suite-native/message-system/src/components/MessageBanner.tsx b/suite-native/message-system/src/components/MessageBanner.tsx
index d835b6d6b39..f51fe9a889f 100644
--- a/suite-native/message-system/src/components/MessageBanner.tsx
+++ b/suite-native/message-system/src/components/MessageBanner.tsx
@@ -132,7 +132,7 @@ export const MessageBanner = ({ message }: MessageBannerProps) => {
             style={applyStyle(messageContainerStyle, { backgroundColor })}
         >
             <HStack
-                spacing={12}
+                spacing="sp12"
                 alignItems="center"
                 justifyContent="space-between"
                 style={{ maxWidth: '100%' }}
@@ -140,7 +140,7 @@ export const MessageBanner = ({ message }: MessageBannerProps) => {
                 <Box style={applyStyle(IconContainerStyle)}>
                     <Icon name={icon} color={iconColor} size="mediumLarge" />
                 </Box>
-                <VStack spacing={4} style={applyStyle(messageTextContainerStyle)}>
+                <VStack spacing="sp4" style={applyStyle(messageTextContainerStyle)}>
                     <Text color="textSubdued" variant="hint">
                         {messageContent}
                     </Text>
diff --git a/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx b/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx
index a6142dca869..890b1a4c422 100644
--- a/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx
+++ b/suite-native/message-system/src/components/MessageSystemBannerRenderer.tsx
@@ -24,7 +24,7 @@ export const MessageSystemBannerRenderer = () => {
 
     return (
         <VStack
-            spacing={4}
+            spacing="sp4"
             style={applyStyle(messageBannerContainerStyle, {
                 topSafeAreaInset: topInset,
             })}
diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
index 909a12b1e37..ffcf015c298 100644
--- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
+++ b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
@@ -36,7 +36,7 @@ const indicatorContainer = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    marginTop: utils.spacings.sp8 / 4,
+    marginTop: utils.spacings.sp2,
 }));
 
 const PriceChangeIndicator = ({ valuePercentageChange }: PriceChangeIndicatorProps) => {
diff --git a/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx b/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx
index 5a9dba288b4..042eac6fc6a 100644
--- a/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/connect/ConnectAndUnlockDeviceScreen.tsx
@@ -25,11 +25,11 @@ import { ConnectDeviceScreenHeader } from '../../components/connect/ConnectDevic
 
 const ANIMATION_HEIGHT = Dimensions.get('screen').height * 0.6;
 
-const screenContentStyle = prepareNativeStyle(() => ({
+const screenContentStyle = prepareNativeStyle(utils => ({
     flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: 40,
+    paddingTop: utils.spacings.sp40,
 }));
 
 const animationStyle = prepareNativeStyle(() => ({
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
index ca4a5ad909d..b37eee59ce9 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
@@ -93,7 +93,7 @@ export const PassphraseEmptyWalletScreen = () => {
                 lineColor="borderElevation0"
                 textColor="textSubdued"
             />
-            <VStack spacing={20}>
+            <VStack spacing="sp20">
                 <VStack alignItems="center" spacing="sp4">
                     <Text
                         textAlign="center"
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
index 43c07e345d1..59545110e54 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
@@ -27,8 +27,8 @@ const cardTextStyle = prepareNativeStyle(_ => ({
     width: '90%',
 }));
 
-const warningIconWrapperStyle = prepareNativeStyle(_ => ({
-    paddingTop: 2,
+const warningIconWrapperStyle = prepareNativeStyle(utils => ({
+    paddingTop: utils.spacings.sp2,
 }));
 
 const animationWrapperStyle = prepareNativeStyle(() => ({
@@ -91,7 +91,7 @@ export const PassphraseFormScreen = () => {
                     <Animated.View style={animationStyle}>
                         <Box style={applyStyle(cardStyle)}>
                             <VStack spacing="sp16">
-                                <VStack spacing={12}>
+                                <VStack spacing="sp12">
                                     <HStack>
                                         <View style={applyStyle(warningIconWrapperStyle)}>
                                             <Icon
diff --git a/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx b/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx
index ef95b47ee13..d7b45675882 100644
--- a/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx
+++ b/suite-native/module-onboarding/src/components/AnalyticsInfoRow.tsx
@@ -19,8 +19,8 @@ const iconWrapper = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.round,
 }));
 
-const rowContentStyle = prepareNativeStyle(_ => ({
-    marginLeft: 12,
+const rowContentStyle = prepareNativeStyle(utils => ({
+    marginLeft: utils.spacings.sp12,
     marginRight: 48,
 }));
 
diff --git a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
index cdba5ef8f68..a86f5013e77 100644
--- a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
+++ b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
@@ -10,14 +10,14 @@ type OnboardingScreenHeaderProps = {
     activeStep: number;
 };
 
-const titleStyle = prepareNativeStyle(() => ({
+const titleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
-    marginBottom: 12,
+    marginBottom: utils.spacings.sp12,
 }));
 
-const wrapperStyle = prepareNativeStyle(() => ({
-    paddingHorizontal: 16,
-    paddingTop: 32,
+const wrapperStyle = prepareNativeStyle(utils => ({
+    paddingHorizontal: utils.spacings.sp16,
+    paddingTop: utils.spacings.sp32,
 }));
 
 const subtitleStyle = prepareNativeStyle(() => ({
diff --git a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
index c066990c385..3532ae7c247 100644
--- a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
+++ b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
@@ -33,7 +33,7 @@ type NavigationProps = StackToStackCompositeNavigationProps<
 const titleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
     marginTop: utils.spacings.sp24,
-    marginBottom: 12,
+    marginBottom: utils.spacings.sp12,
     paddingHorizontal: utils.spacings.sp24,
 }));
 
diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
index 6ccdcbabe31..4b05235c9d6 100644
--- a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
+++ b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
@@ -15,9 +15,9 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { OnboardingFooter } from '../components/OnboardingFooter';
 import { OnboardingScreen } from '../components/OnboardingScreen';
 
-const titleStyle = prepareNativeStyle(_ => ({
+const titleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
-    marginBottom: 12,
+    marginBottom: utils.spacings.sp12,
     alignItems: 'center',
 }));
 
diff --git a/suite-native/module-send/src/components/AddressInput.tsx b/suite-native/module-send/src/components/AddressInput.tsx
index 1ad073d341f..1e49caa78a0 100644
--- a/suite-native/module-send/src/components/AddressInput.tsx
+++ b/suite-native/module-send/src/components/AddressInput.tsx
@@ -39,7 +39,7 @@ export const AddressInput = ({ index, accountKey }: AddressInputProps) => {
     };
 
     return (
-        <VStack spacing={12}>
+        <VStack spacing="sp12">
             <Text variant="hint">
                 <Translation id="moduleSend.outputs.recipients.addressLabel" />
             </Text>
diff --git a/suite-native/module-send/src/components/AddressReviewStep.tsx b/suite-native/module-send/src/components/AddressReviewStep.tsx
index 585a1de9fa6..1f0fadea1aa 100644
--- a/suite-native/module-send/src/components/AddressReviewStep.tsx
+++ b/suite-native/module-send/src/components/AddressReviewStep.tsx
@@ -61,7 +61,7 @@ export const AddressReviewStep = ({
     return (
         <View onLayout={onLayout}>
             <Card style={applyStyle(cardStyle, { isFinalStep: !stepNumber })}>
-                <HStack spacing={12} flexDirection="row" alignItems="center">
+                <HStack spacing="sp12" flexDirection="row" alignItems="center">
                     <OrderedListIcon {...getIconProps(stepNumber)} />
                     <Box flexShrink={1}>
                         <Text variant="callout">
diff --git a/suite-native/module-send/src/components/AmountInputs.tsx b/suite-native/module-send/src/components/AmountInputs.tsx
index af20263f6b6..e0d1572220a 100644
--- a/suite-native/module-send/src/components/AmountInputs.tsx
+++ b/suite-native/module-send/src/components/AmountInputs.tsx
@@ -100,7 +100,7 @@ export const AmountInputs = ({ index, accountKey }: AmountInputProps) => {
     if (!networkSymbol) return null;
 
     return (
-        <VStack spacing={12}>
+        <VStack spacing="sp12">
             <HStack flex={1} justifyContent="space-between" alignItems="center">
                 <Text variant="hint">
                     <Translation id="moduleSend.outputs.recipients.amountLabel" />
diff --git a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
index e18e503aafa..da8b454994c 100644
--- a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
+++ b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
@@ -12,7 +12,7 @@ type FeeOptionErrorMessageProps = {
 const ERROR_HEIGHT = 40;
 
 const errorStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: 12,
+    paddingHorizontal: utils.spacings.sp12,
     justifyContent: 'center',
     backgroundColor: utils.colors.backgroundAlertRedSubtleOnElevation1,
     overflow: 'hidden',
diff --git a/suite-native/module-send/src/components/FeeOptionsList.tsx b/suite-native/module-send/src/components/FeeOptionsList.tsx
index 29adb918464..9d5c08ff3d2 100644
--- a/suite-native/module-send/src/components/FeeOptionsList.tsx
+++ b/suite-native/module-send/src/components/FeeOptionsList.tsx
@@ -29,7 +29,7 @@ export const FeeOptionsList = ({ feeLevels, networkSymbol, accountKey }: FeeOpti
     const transactionBytes = normalLevel.bytes;
 
     return (
-        <VStack spacing={12}>
+        <VStack spacing="sp12">
             {Object.entries(predefinedFeeLevels).map(([feeKey, feeLevel]) => (
                 <FeeOption
                     key={feeKey}
diff --git a/suite-native/module-send/src/components/FeesFooter.tsx b/suite-native/module-send/src/components/FeesFooter.tsx
index 8f3669bc042..79ecbe20539 100644
--- a/suite-native/module-send/src/components/FeesFooter.tsx
+++ b/suite-native/module-send/src/components/FeesFooter.tsx
@@ -72,7 +72,7 @@ export const FeesFooter = ({
                         <Text variant="callout">
                             <Translation id="moduleSend.fees.totalAmount" />
                         </Text>
-                        <VStack spacing={2} alignItems="flex-end">
+                        <VStack spacing="sp2" alignItems="flex-end">
                             <CryptoToFiatAmountFormatter
                                 variant="callout"
                                 color="textDefault"
diff --git a/suite-native/module-send/src/components/RecipientsSummary.tsx b/suite-native/module-send/src/components/RecipientsSummary.tsx
index ce5dcb2fe64..a46621112c3 100644
--- a/suite-native/module-send/src/components/RecipientsSummary.tsx
+++ b/suite-native/module-send/src/components/RecipientsSummary.tsx
@@ -21,7 +21,7 @@ const cardStyle = prepareNativeStyle(utils => ({
     borderColor: utils.colors.borderElevation0,
     backgroundColor: utils.colors.backgroundTertiaryDefaultOnElevation0,
     borderWidth: utils.borders.widths.small,
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     ...utils.boxShadows.none,
 }));
 
diff --git a/suite-native/module-send/src/components/ReviewOutputCard.tsx b/suite-native/module-send/src/components/ReviewOutputCard.tsx
index 17686f7cf07..fdcbfe81671 100644
--- a/suite-native/module-send/src/components/ReviewOutputCard.tsx
+++ b/suite-native/module-send/src/components/ReviewOutputCard.tsx
@@ -17,7 +17,7 @@ const cardStyle = prepareNativeStyle<{ isConfirmed: boolean }>((utils, { isConfi
     borderColor: utils.colors.borderElevation1,
     marginHorizontal: utils.spacings.sp8,
     paddingHorizontal: utils.spacings.sp16,
-    paddingVertical: 12,
+    paddingVertical: utils.spacings.sp12,
     borderRadius: 12,
     extend: {
         condition: isConfirmed,
@@ -36,7 +36,7 @@ export const ReviewOutputCard = ({ children, title, outputState }: ReviewOutputC
 
     return (
         <Card style={applyStyle(cardStyle, { isConfirmed })}>
-            <VStack spacing={12}>
+            <VStack spacing="sp12">
                 <HStack alignItems="center">
                     <ReviewOutputStatusBadge status={outputState} />
                     <Text variant="callout">{title}</Text>
diff --git a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
index 22b5abf885a..063ee62cc59 100644
--- a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
+++ b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
@@ -13,8 +13,8 @@ type TouchableSwitchRowProps = {
     iconName: IconName;
 };
 
-const textStyle = prepareNativeStyle(_ => ({
-    marginLeft: 12,
+const textStyle = prepareNativeStyle(utils => ({
+    marginLeft: utils.spacings.sp12,
     flex: 1,
 }));
 
diff --git a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
index f164358657b..bc52feab9c7 100644
--- a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
@@ -109,7 +109,7 @@ export const WalletRow = ({ device }: WalletRowProps) => {
 
     return (
         <HStack key={device.instance} style={applyStyle(walletRowStyle)}>
-            <HStack spacing={12} alignItems="center">
+            <HStack spacing="sp12" alignItems="center">
                 <Icon
                     name={device.useEmptyPassphrase ? 'standardWallet' : 'password'}
                     size="mediumLarge"
diff --git a/suite-native/navigation/src/components/ScreenSubHeader.tsx b/suite-native/navigation/src/components/ScreenSubHeader.tsx
index e4b98447185..b5e4c701156 100644
--- a/suite-native/navigation/src/components/ScreenSubHeader.tsx
+++ b/suite-native/navigation/src/components/ScreenSubHeader.tsx
@@ -28,7 +28,7 @@ const headerStyle = prepareNativeStyle<{ customHorizontalPadding?: number }>(
         alignItems: 'center',
         padding: customHorizontalPadding || utils.spacings.sp8,
         backgroundColor: utils.colors.backgroundSurfaceElevation0,
-        height: ICON_SIZE + utils.spacings.sp8 * 2,
+        height: ICON_SIZE + 2 * utils.spacings.sp8,
     }),
 );
 
diff --git a/suite-native/notifications/src/components/Notification.tsx b/suite-native/notifications/src/components/Notification.tsx
index 2bf2d385c74..cdd2be90b9d 100644
--- a/suite-native/notifications/src/components/Notification.tsx
+++ b/suite-native/notifications/src/components/Notification.tsx
@@ -126,7 +126,7 @@ export const Notification = ({
                         <TouchableWithoutFeedback onPress={onPress}>
                             <HStack spacing="sp32" style={applyStyle(notificationContainerStyle)}>
                                 <HStack
-                                    spacing={12}
+                                    spacing="sp12"
                                     flexDirection="row"
                                     style={applyStyle(notificationContentStyle)}
                                 >
diff --git a/suite-native/qr-code/src/components/QRCodeScanner.tsx b/suite-native/qr-code/src/components/QRCodeScanner.tsx
index aa2baf9cc20..105fd2f0490 100644
--- a/suite-native/qr-code/src/components/QRCodeScanner.tsx
+++ b/suite-native/qr-code/src/components/QRCodeScanner.tsx
@@ -16,7 +16,7 @@ type QRCodeScannerProps = {
     onCodeScanned: (data: string) => void;
 };
 
-const SCANNER_SIZE = Dimensions.get('screen').width - nativeSpacings.sp16 * 2;
+const SCANNER_SIZE = Dimensions.get('screen').width - 2 * nativeSpacings.sp16;
 
 const cameraContainerStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.medium,
diff --git a/suite-native/receive/src/components/ReceiveAccount.tsx b/suite-native/receive/src/components/ReceiveAccount.tsx
index a3e4f094a5e..605fe1465ba 100644
--- a/suite-native/receive/src/components/ReceiveAccount.tsx
+++ b/suite-native/receive/src/components/ReceiveAccount.tsx
@@ -51,7 +51,7 @@ export const ReceiveAccount = ({ accountKey, tokenContract }: AccountReceiveProp
 
     return (
         <Box flex={1}>
-            <VStack spacing={12}>
+            <VStack spacing="sp12">
                 {isAccountDetailVisible && (
                     <ReceiveAccountDetailsCard
                         accountKey={accountKey}
diff --git a/suite-native/toasts/src/components/Toast.tsx b/suite-native/toasts/src/components/Toast.tsx
index 7dca6eaa72e..48ac5eee962 100644
--- a/suite-native/toasts/src/components/Toast.tsx
+++ b/suite-native/toasts/src/components/Toast.tsx
@@ -46,7 +46,7 @@ const IconContainerStyle = prepareNativeStyle<{
     backgroundColor: Color;
     isDefaultVariant: boolean;
 }>((utils, { backgroundColor, isDefaultVariant }) => ({
-    padding: 12,
+    padding: utils.spacings.sp12,
     borderRadius: utils.borders.radii.round,
     backgroundColor: utils.transparentize(
         isDefaultVariant ? 0.75 : 0,
@@ -106,7 +106,7 @@ export const Toast = ({ toast }: ToastProps) => {
             exiting={FadeOut.duration(TOAST_ANIMATION_DURATION)}
             style={applyStyle(ToastContainerStyle, { backgroundColor, hasIcon: !!icon })}
         >
-            <HStack spacing={12} alignItems="center">
+            <HStack spacing="sp12" alignItems="center">
                 {icon && (
                     <Box
                         style={applyStyle(IconContainerStyle, {
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
index 7782f183d9d..376e6a1b468 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
@@ -31,7 +31,7 @@ const hiddenTransactionsCountStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     borderRadius: utils.borders.radii.round,
     paddingHorizontal: utils.spacings.sp8,
-    paddingVertical: utils.spacings.sp8 / 4,
+    paddingVertical: utils.spacings.sp2,
 }));
 
 const addressTextStyle = prepareNativeStyle(_ => ({
@@ -41,7 +41,7 @@ const addressTextStyle = prepareNativeStyle(_ => ({
 const stepperDotWrapperStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 12,
+    marginTop: utils.spacings.sp12,
     backgroundColor: utils.colors.backgroundSurfaceElevation2,
     width: utils.spacings.sp16,
     height: utils.spacings.sp16,
@@ -57,7 +57,7 @@ const stepperDotStyle = prepareNativeStyle(utils => ({
 
 const coinIconWrapperStyle = prepareNativeStyle(utils => ({
     alignSelf: 'flex-start',
-    padding: utils.spacings.sp8 * 1.5,
+    padding: utils.spacings.sp12,
     backgroundColor: utils.colors.backgroundSurfaceElevation2,
     borderRadius: utils.borders.radii.round,
 }));
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
index 793f109476f..9871354b9fb 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
@@ -28,7 +28,10 @@ const sheetToAnalyticsEventMap: Record<SheetType, TransactionSheetAnalyticsEvent
     inputs: EventType.TransactionDetailInputOutput,
 };
 
-const cardStyle = prepareNativeStyle(() => ({ paddingVertical: 12, paddingRight: 12 }));
+const cardStyle = prepareNativeStyle(utils => ({
+    paddingVertical: utils.spacings.sp12,
+    paddingRight: utils.spacings.sp12,
+}));
 
 export const TransactionDetailSheets = ({
     transaction,
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSummary.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSummary.tsx
index ff29f4a45fd..db37f165ca3 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSummary.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSummary.tsx
@@ -16,7 +16,7 @@ type TransactionDetailSummaryProps = {
 };
 
 export const cardStyle = prepareNativeStyle(utils => ({
-    paddingBottom: 12,
+    paddingBottom: utils.spacings.sp12,
     ...utils.boxShadows.none,
 }));
 
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
index 5995bf07d41..ad12d1e4630 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionIcon.tsx
@@ -32,9 +32,9 @@ const transactionIconMap: Record<TransactionType, IconName> = {
 
 const cryptoIconStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
-    right: -2,
-    bottom: -2,
-    padding: 2,
+    right: -utils.spacings.sp2,
+    bottom: -utils.spacings.sp2,
+    padding: utils.spacings.sp2,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.round,
 }));
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
index 3967ddec38a..5da81dc2fdb 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
@@ -66,8 +66,8 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
         backgroundColor: utils.colors.backgroundSurfaceElevation1,
         marginHorizontal: utils.spacings.sp8,
         paddingHorizontal: utils.spacings.sp16,
-        paddingTop: 12,
-        paddingBottom: 12,
+        paddingTop: utils.spacings.sp12,
+        paddingBottom: utils.spacings.sp12,
         extend: [
             {
                 condition: isFirst,