diff --git a/packages/theme/src/spacings.ts b/packages/theme/src/spacings.ts
index c8c6e9716fc..059b32c0661 100644
--- a/packages/theme/src/spacings.ts
+++ b/packages/theme/src/spacings.ts
@@ -27,14 +27,20 @@ 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;
+
 export const nativeSpacings = {
-    extraSmall: 4,
-    small: 8,
-    medium: 16,
-    large: 24,
-    extraLarge: 32,
-    xxl: 64,
-} as const;
+    sp2: 2,
+    sp4: 4,
+    sp8: 8,
+    sp12: 12,
+    sp16: 16,
+    sp24: 24,
+    sp32: 32,
+    sp40: 40,
+    sp52: 52,
+    sp64: 64,
+} as const satisfies { [V in NativeSpacingValue as `sp${V}`]: V };
 
 export type NativeSpacings = typeof nativeSpacings;
 export type NativeSpacing = keyof typeof nativeSpacings;
diff --git a/suite-native/accounts/src/components/AccountSectionTitle.tsx b/suite-native/accounts/src/components/AccountSectionTitle.tsx
index 3ef9a28837a..e6ba9f61251 100644
--- a/suite-native/accounts/src/components/AccountSectionTitle.tsx
+++ b/suite-native/accounts/src/components/AccountSectionTitle.tsx
@@ -33,7 +33,7 @@ export const AccountSectionTitle: React.FC<AccountSectionTitleProps> = ({
     }, [account, localCurrency, rates]);
 
     return (
-        <HStack alignItems="center" justifyContent="space-between" marginBottom="medium">
+        <HStack alignItems="center" justifyContent="space-between" marginBottom="sp16">
             <Text variant="highlight">{account.accountLabel}</Text>
 
             {hasAnyKnownTokens && (
diff --git a/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx b/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx
index c603e46aeb0..6ebeae195cc 100644
--- a/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx
+++ b/suite-native/accounts/src/components/AccountSelectBottomSheet.tsx
@@ -20,7 +20,7 @@ type AccountSelectBottomSheetProps = {
 };
 
 const contentContainerStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const AccountSelectBottomSheet = React.memo(
diff --git a/suite-native/accounts/src/components/AccountsList/AccountsList.tsx b/suite-native/accounts/src/components/AccountsList/AccountsList.tsx
index 7f50e214246..0121d04bacc 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsList.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsList.tsx
@@ -56,7 +56,7 @@ export const AccountsList = ({
 
     return (
         <>
-            <VStack spacing="medium" paddingBottom="medium">
+            <VStack spacing="sp16" paddingBottom="sp16">
                 {groups.map(([accountTypeHeader, networkAccounts]) => (
                     <Card key={accountTypeHeader} noPadding>
                         {networkAccounts.map(account => (
diff --git a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
index a694851abd8..af705900055 100644
--- a/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
+++ b/suite-native/accounts/src/components/AccountsList/AccountsListItemBase.tsx
@@ -31,14 +31,14 @@ const accountListItemStyle = prepareNativeStyle<{
     alignItem: 'center',
 
     paddingVertical: 12,
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 
     extend: {
         condition: hasBackground,
         style: {
             backgroundColor: utils.colors.backgroundSurfaceElevation1,
-            paddingTop: utils.spacings.medium,
-            paddingBottom: utils.spacings.medium,
+            paddingTop: utils.spacings.sp16,
+            paddingBottom: utils.spacings.sp16,
 
             extend: [
                 {
@@ -54,7 +54,7 @@ const accountListItemStyle = prepareNativeStyle<{
                     style: {
                         borderBottomLeftRadius: utils.borders.radii.medium,
                         borderBottomRightRadius: utils.borders.radii.medium,
-                        marginBottom: utils.spacings.extraLarge,
+                        marginBottom: utils.spacings.sp32,
                         ...utils.boxShadows.small,
                     },
                 },
@@ -78,7 +78,7 @@ const valuesContainerStyle = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     flexShrink: 0,
     alignItems: 'flex-end',
-    paddingLeft: utils.spacings.small,
+    paddingLeft: utils.spacings.sp8,
 }));
 
 export const AccountsListItemBase = ({
@@ -110,10 +110,10 @@ export const AccountsListItemBase = ({
             disabled={disabled}
         >
             <Box flexDirection="row" alignItems="center" flex={1}>
-                <Box marginRight="medium">{icon}</Box>
+                <Box marginRight="sp16">{icon}</Box>
                 <Box style={applyStyle(accountDescriptionStyle)}>
                     <Text>{title}</Text>
-                    <HStack spacing="extraSmall" alignItems="center">
+                    <HStack spacing="sp4" alignItems="center">
                         {badges}
                     </HStack>
                 </Box>
diff --git a/suite-native/accounts/src/components/AccountsSearchForm.tsx b/suite-native/accounts/src/components/AccountsSearchForm.tsx
index cec79d33de4..93d8f0085b6 100644
--- a/suite-native/accounts/src/components/AccountsSearchForm.tsx
+++ b/suite-native/accounts/src/components/AccountsSearchForm.tsx
@@ -46,7 +46,7 @@ export const AccountsSearchForm = ({ onPressCancel, onInputChange }: AccountsSea
             )}
             exiting={FadeOut.duration(SEARCH_INPUT_ANIMATION_DURATION)}
         >
-            <HStack marginHorizontal="medium" spacing="medium" justifyContent="space-between">
+            <HStack marginHorizontal="sp16" spacing="sp16" justifyContent="space-between">
                 <Animated.View
                     entering={SlideInLeft.duration(SEARCH_INPUT_ANIMATION_DURATION).delay(
                         SEARCH_INPUT_ANIMATION_DELAY,
diff --git a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx
index 9cdfaa8df2a..41ecb9ac6e8 100644
--- a/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx
+++ b/suite-native/accounts/src/components/SearchableAccountsListScreenHeader.tsx
@@ -25,7 +25,7 @@ export const SEARCH_FORM_CONTAINER_HEIGHT = 56;
 
 const searchFormContainerStyle = prepareNativeStyle(utils => ({
     height: SEARCH_FORM_CONTAINER_HEIGHT,
-    marginBottom: utils.spacings.medium,
+    marginBottom: utils.spacings.sp16,
 }));
 
 export const SearchableAccountsListScreenHeader = ({
diff --git a/suite-native/accounts/src/components/SelectableNetworkItem.tsx b/suite-native/accounts/src/components/SelectableNetworkItem.tsx
index 728af8b9e20..3e313b09cb2 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.small + utils.spacings.extraSmall,
+    marginLeft: utils.spacings.sp8 + utils.spacings.sp4,
 }));
 
 const tokensBadgeStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.extraSmall / 2,
+    paddingBottom: utils.spacings.sp4 / 2,
 }));
 
 export const SelectableNetworkItem = ({ symbol, onPress, rightIcon }: SelectableAssetItemProps) => {
diff --git a/suite-native/alerts/src/components/AlertSheet.tsx b/suite-native/alerts/src/components/AlertSheet.tsx
index 6248cc2ea09..493e4ae8646 100644
--- a/suite-native/alerts/src/components/AlertSheet.tsx
+++ b/suite-native/alerts/src/components/AlertSheet.tsx
@@ -24,18 +24,18 @@ type AlertSheetProps = {
 const alertSheetContainerStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: utils.spacings.extraLarge,
-    paddingHorizontal: utils.spacings.large,
-    paddingVertical: utils.spacings.extraLarge,
-    marginBottom: utils.spacings.extraLarge,
-    marginHorizontal: utils.spacings.small,
+    paddingTop: utils.spacings.sp32,
+    paddingHorizontal: utils.spacings.sp24,
+    paddingVertical: utils.spacings.sp32,
+    marginBottom: utils.spacings.sp32,
+    marginHorizontal: utils.spacings.sp8,
     borderRadius: utils.borders.radii.medium,
     ...utils.boxShadows.small,
 }));
 
 const alertSheetContentStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    gap: utils.spacings.large,
+    gap: utils.spacings.sp24,
 }));
 
 const shakeTriggerStyle = prepareNativeStyle(_ => ({
@@ -115,7 +115,7 @@ export const AlertSheet = ({ alert }: AlertSheetProps) => {
                                     />
                                 )}
                                 {appendix}
-                                <VStack spacing="medium">
+                                <VStack spacing="sp16">
                                     <Button
                                         size="medium"
                                         colorScheme={primaryButtonVariant}
diff --git a/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx b/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx
index e73fb277d78..ca5714545d2 100644
--- a/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx
+++ b/suite-native/assets/src/components/DiscoveryAssetsLoader.tsx
@@ -18,7 +18,7 @@ export const DiscoveryAssetsLoader = ({ isListEmpty }: { isListEmpty: boolean })
     return (
         <>
             <ListItemSkeleton />
-            <HStack justifyContent="center" marginBottom="medium">
+            <HStack justifyContent="center" marginBottom="sp16">
                 <Icon size="mediumLarge" name="trezor" />
                 <Text variant="callout">{discoveryProgressText}</Text>
             </HStack>
diff --git a/suite-native/atoms/src/Accordion/AccordionItem.tsx b/suite-native/atoms/src/Accordion/AccordionItem.tsx
index ee35282d020..fa8830056ed 100644
--- a/suite-native/atoms/src/Accordion/AccordionItem.tsx
+++ b/suite-native/atoms/src/Accordion/AccordionItem.tsx
@@ -20,7 +20,7 @@ const triggerStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: utils.spacings.extraSmall,
+    paddingTop: utils.spacings.sp4,
 }));
 
 const titleStyle = prepareNativeStyle(_ => ({
@@ -35,7 +35,7 @@ const contentWrapperStyle = prepareNativeStyle(() => ({
 }));
 
 const contentStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.small,
+    paddingBottom: utils.spacings.sp8,
 }));
 
 const accordionWrapperStyle = prepareNativeStyle(() => ({
diff --git a/suite-native/atoms/src/AlertBox.tsx b/suite-native/atoms/src/AlertBox.tsx
index ef71eedfce6..57fa0381a52 100644
--- a/suite-native/atoms/src/AlertBox.tsx
+++ b/suite-native/atoms/src/AlertBox.tsx
@@ -30,8 +30,8 @@ const alertWrapperStyle = prepareNativeStyle<AlertWrapperStyleType>(
         borderWidth: 1,
         borderColor: utils.colors[borderColor],
         backgroundColor: utils.colors[backgroundColor],
-        paddingVertical: utils.spacings.small,
-        paddingHorizontal: utils.spacings.medium,
+        paddingVertical: utils.spacings.sp8,
+        paddingHorizontal: utils.spacings.sp16,
         gap: 12,
     }),
 );
diff --git a/suite-native/atoms/src/Badge.tsx b/suite-native/atoms/src/Badge.tsx
index fd4048662d5..feb20240c70 100644
--- a/suite-native/atoms/src/Badge.tsx
+++ b/suite-native/atoms/src/Badge.tsx
@@ -51,8 +51,8 @@ const badgeStyle = prepareNativeStyle<BadgeStyleProps>(
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: utils.colors[backgroundColor],
-        paddingHorizontal: utils.spacings.small - (size === 'medium' ? 0 : 2),
-        paddingVertical: utils.spacings.small / 4,
+        paddingHorizontal: utils.spacings.sp8 - (size === 'medium' ? 0 : 2),
+        paddingVertical: utils.spacings.sp8 / 4,
         borderRadius: utils.borders.radii.round,
         extend: [
             {
@@ -163,7 +163,7 @@ export const Badge = ({
                 }),
                 style,
             ]}
-            spacing={utils.spacings.extraSmall}
+            spacing={utils.spacings.sp4}
         >
             {icon && badgeIcon}
             <Text color={textColor} variant={textVariant} numberOfLines={1} ellipsizeMode="tail">
diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx
index 2c3d4f2422c..9ee1f817023 100644
--- a/suite-native/atoms/src/Button/Button.tsx
+++ b/suite-native/atoms/src/Button/Button.tsx
@@ -180,13 +180,13 @@ export const buttonSchemeToColorsMap = {
 const sizeToDimensionsMap = {
     extraSmall: {
         minHeight: 36,
-        paddingVertical: nativeSpacings.small,
+        paddingVertical: nativeSpacings.sp8,
         paddingHorizontal: 12,
     },
     small: {
         minHeight: 40,
         paddingVertical: 10,
-        paddingHorizontal: nativeSpacings.medium,
+        paddingHorizontal: nativeSpacings.sp16,
     },
     medium: {
         minHeight: 48,
@@ -195,8 +195,8 @@ const sizeToDimensionsMap = {
     },
     large: {
         minHeight: 56,
-        paddingVertical: nativeSpacings.medium,
-        paddingHorizontal: nativeSpacings.large,
+        paddingVertical: nativeSpacings.sp16,
+        paddingHorizontal: nativeSpacings.sp24,
     },
 } as const satisfies Record<ButtonSize, NativeStyleObject>;
 
diff --git a/suite-native/atoms/src/Card/Card.tsx b/suite-native/atoms/src/Card/Card.tsx
index 498fe067fab..e900973fe8e 100644
--- a/suite-native/atoms/src/Card/Card.tsx
+++ b/suite-native/atoms/src/Card/Card.tsx
@@ -26,7 +26,7 @@ const cardContainerStyle = prepareNativeStyle<{
 }>((utils, { isAlertDisplayed, noPadding, borderColor }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.medium,
-    padding: noPadding ? 0 : utils.spacings.medium,
+    padding: noPadding ? 0 : utils.spacings.sp16,
     ...utils.boxShadows.small,
 
     extend: [
@@ -51,8 +51,8 @@ const alertBoxWrapperStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderTopLeftRadius: utils.borders.radii.medium,
     borderTopRightRadius: utils.borders.radii.medium,
-    paddingHorizontal: utils.spacings.extraSmall,
-    paddingTop: utils.spacings.extraSmall,
+    paddingHorizontal: utils.spacings.sp4,
+    paddingTop: utils.spacings.sp4,
 }));
 
 export const Card = ({
diff --git a/suite-native/atoms/src/Card/CardDivider.tsx b/suite-native/atoms/src/Card/CardDivider.tsx
index 08d59548937..f8350a53443 100644
--- a/suite-native/atoms/src/Card/CardDivider.tsx
+++ b/suite-native/atoms/src/Card/CardDivider.tsx
@@ -27,7 +27,7 @@ const dividerStyle = prepareNativeStyle<SetRequired<CardDividerProps, 'horizonta
     }),
 );
 
-export const CardDivider = ({ color, horizontalPadding = 'medium' }: CardDividerProps) => {
+export const CardDivider = ({ color, horizontalPadding = 'sp16' }: CardDividerProps) => {
     const { applyStyle } = useNativeStyles();
 
     return <Divider style={applyStyle(dividerStyle, { color, horizontalPadding })} />;
diff --git a/suite-native/atoms/src/ErrorMessage.tsx b/suite-native/atoms/src/ErrorMessage.tsx
index e9840617034..8776104d9be 100644
--- a/suite-native/atoms/src/ErrorMessage.tsx
+++ b/suite-native/atoms/src/ErrorMessage.tsx
@@ -15,11 +15,11 @@ const errorMessageStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: utils.colors.backgroundAlertRedSubtleOnElevation0,
-    margin: utils.spacings.small,
+    margin: utils.spacings.sp8,
     borderColor: utils.colors.borderAlertRed,
     borderWidth: 1,
     borderRadius: utils.borders.radii.medium,
-    padding: utils.spacings.large,
+    padding: utils.spacings.sp24,
 }));
 
 export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
@@ -27,7 +27,7 @@ export const ErrorMessage = ({ errorMessage }: ErrorMessageProps) => {
 
     return (
         <Box style={applyStyle(errorMessageStyle)}>
-            <Box marginRight="small">
+            <Box marginRight="sp8">
                 <Icon name="warningCircle" size="large" color="iconAlertRed" />
             </Box>
             <Text color="textAlertRed">Error: {errorMessage}</Text>
diff --git a/suite-native/atoms/src/Headered.tsx b/suite-native/atoms/src/Headered.tsx
index 3d8643ba82e..42f5552a5c1 100644
--- a/suite-native/atoms/src/Headered.tsx
+++ b/suite-native/atoms/src/Headered.tsx
@@ -14,16 +14,14 @@ type HeaderedProps = {
 type HeaderContainerProps = { children: ReactNode };
 
 const HeaderContainer = ({ children }: HeaderContainerProps) => (
-    <Box paddingHorizontal="medium">
-        {G.isString(children) ? <Text>{children}</Text> : children}
-    </Box>
+    <Box paddingHorizontal="sp16">{G.isString(children) ? <Text>{children}</Text> : children}</Box>
 );
 
 /**
  * Adds a header to child component with app-wide padding styles.
  */
 export const Headered = ({ children, header }: HeaderedProps) => (
-    <VStack spacing="medium">
+    <VStack spacing="sp16">
         <HeaderContainer>{header}</HeaderContainer>
         {children}
     </VStack>
diff --git a/suite-native/atoms/src/Input/Input.tsx b/suite-native/atoms/src/Input/Input.tsx
index 01a769d22ae..d7fee699b87 100644
--- a/suite-native/atoms/src/Input/Input.tsx
+++ b/suite-native/atoms/src/Input/Input.tsx
@@ -46,15 +46,15 @@ export type InputProps = TextInputProps &
     >;
 
 const INPUT_VERTICAL_PADDING =
-    Platform.OS == 'android' ? nativeSpacings.medium - 2 : nativeSpacings.medium;
+    Platform.OS == 'android' ? nativeSpacings.sp16 - 2 : nativeSpacings.sp16;
 const INPUT_WITH_LABEL_BOTTOM_PADDING =
-    Platform.OS == 'android' ? nativeSpacings.extraSmall : nativeSpacings.small;
-const INPUT_LABEL_TOP_PADDING = nativeSpacings.extraLarge;
-const INPUT_LABEL_TOP_PADDING_MINIMIZED = INPUT_LABEL_TOP_PADDING + nativeSpacings.small;
-const INPUT_WRAPPER_PADDING_HORIZONTAL = nativeSpacings.medium * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
-const INPUT_WRAPPER_PADDING_VERTICAL = nativeSpacings.medium * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+    Platform.OS == 'android' ? nativeSpacings.sp4 : nativeSpacings.sp8;
+const INPUT_LABEL_TOP_PADDING = nativeSpacings.sp32;
+const INPUT_LABEL_TOP_PADDING_MINIMIZED = INPUT_LABEL_TOP_PADDING + nativeSpacings.sp8;
+const INPUT_WRAPPER_PADDING_HORIZONTAL = nativeSpacings.sp16 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+const INPUT_WRAPPER_PADDING_VERTICAL = nativeSpacings.sp16 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const INPUT_WRAPPER_PADDING_VERTICAL_MINIMIZED =
-    nativeSpacings.small * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
+    nativeSpacings.sp8 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 const INPUT_TEXT_HEIGHT = 24 * ACCESSIBILITY_FONTSIZE_MULTIPLIER;
 
 type InputWrapperStyleProps = {
@@ -135,12 +135,12 @@ const inputStyle = prepareNativeStyle<InputStyleProps>(
         justifyContent: 'center',
         minHeight: INPUT_TEXT_HEIGHT,
         color: isDisabled ? utils.colors.textSubdued : utils.colors.textDefault,
-        left: isLeftIconDisplayed ? utils.spacings.large : 0,
+        left: isLeftIconDisplayed ? utils.spacings.sp24 : 0,
         paddingRight: isRightIconDisplayed ? 40 : 0,
         borderWidth: 0,
         flex: 1,
         // Make the text input uniform on both platforms (https://stackoverflow.com/a/68458803/1281305)
-        paddingTop: isLabelDisplayed ? utils.spacings.large : INPUT_VERTICAL_PADDING,
+        paddingTop: isLabelDisplayed ? utils.spacings.sp24 : INPUT_VERTICAL_PADDING,
         paddingBottom: isLabelDisplayed ? INPUT_WITH_LABEL_BOTTOM_PADDING : INPUT_VERTICAL_PADDING,
     }),
 );
@@ -158,7 +158,7 @@ const labelStyle = prepareNativeStyle(
         color: utils.colors.textSubdued,
         position: 'absolute',
         top: INPUT_LABEL_TOP_PADDING,
-        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.large : 0),
+        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.sp24 : 0),
         extend: {
             condition: isLabelMinimized,
             style: {
@@ -173,7 +173,7 @@ const placeholderStyle = prepareNativeStyle(
     (utils, { isLeftIconDisplayed }: InputLabelStyleProps) => ({
         position: 'absolute',
         top: INPUT_VERTICAL_PADDING + utils.borders.widths.large,
-        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.large : 0),
+        left: INPUT_WRAPPER_PADDING_HORIZONTAL + (isLeftIconDisplayed ? utils.spacings.sp24 : 0),
         color: utils.colors.textSubdued,
     }),
 );
@@ -188,11 +188,11 @@ const iconStyle = prepareNativeStyle(() => ({
 
 const leftIconStyle = prepareNativeStyle(utils => ({
     marginRight: 3,
-    left: utils.spacings.small,
+    left: utils.spacings.sp8,
 }));
 
 const rightIconStyle = prepareNativeStyle(utils => ({
-    right: utils.spacings.medium,
+    right: utils.spacings.sp16,
 }));
 
 const useInputLabelAnimationStyles = ({
diff --git a/suite-native/atoms/src/Input/InputWrapper.tsx b/suite-native/atoms/src/Input/InputWrapper.tsx
index ac49de2a20b..90350c81238 100644
--- a/suite-native/atoms/src/Input/InputWrapper.tsx
+++ b/suite-native/atoms/src/Input/InputWrapper.tsx
@@ -14,7 +14,7 @@ export type InputWrapperProps = {
 };
 
 const labelStyle = prepareNativeStyle(utils => ({
-    marginTop: utils.spacings.small,
+    marginTop: utils.spacings.sp8,
     marginLeft: 11,
     marginBottom: 18,
 }));
diff --git a/suite-native/atoms/src/Input/SearchInput.tsx b/suite-native/atoms/src/Input/SearchInput.tsx
index f8914607a62..4c3219d76fb 100644
--- a/suite-native/atoms/src/Input/SearchInput.tsx
+++ b/suite-native/atoms/src/Input/SearchInput.tsx
@@ -19,7 +19,7 @@ const inputStyle = prepareNativeStyle(utils => ({
     ...utils.typography.body,
     flex: 1,
     color: utils.colors.textOnTertiary,
-    marginLeft: utils.spacings.medium,
+    marginLeft: utils.spacings.sp16,
     lineHeight: 0,
 }));
 
diff --git a/suite-native/atoms/src/OrderedListIcon.tsx b/suite-native/atoms/src/OrderedListIcon.tsx
index 7e39483ffb6..73fec6d13ec 100644
--- a/suite-native/atoms/src/OrderedListIcon.tsx
+++ b/suite-native/atoms/src/OrderedListIcon.tsx
@@ -12,8 +12,8 @@ const iconBackgroundStyle = prepareNativeStyle<{ color: Color; borderColor: Colo
     (utils, { color, borderColor }) => ({
         alignItems: 'center',
         justifyContent: 'center',
-        width: utils.spacings.extraLarge,
-        height: utils.spacings.extraLarge,
+        width: utils.spacings.sp32,
+        height: utils.spacings.sp32,
         borderRadius: 12,
         extend: [
             {
diff --git a/suite-native/atoms/src/ScreenHeaderWrapper.tsx b/suite-native/atoms/src/ScreenHeaderWrapper.tsx
index 1c7c8c248ae..f1b700592f8 100644
--- a/suite-native/atoms/src/ScreenHeaderWrapper.tsx
+++ b/suite-native/atoms/src/ScreenHeaderWrapper.tsx
@@ -14,10 +14,10 @@ const screenHeaderWrapperStyle = prepareNativeStyle<{ insets: EdgeInsets }>(
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        paddingLeft: Math.max(insets.left, utils.spacings.medium),
-        paddingRight: Math.max(insets.right, utils.spacings.medium),
-        paddingVertical: utils.spacings.medium,
-        paddingBottom: utils.spacings.extraSmall * 3,
+        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,
     }),
 );
 
diff --git a/suite-native/atoms/src/SelectableItem.tsx b/suite-native/atoms/src/SelectableItem.tsx
index d9fd08301cd..e5da71b9b45 100644
--- a/suite-native/atoms/src/SelectableItem.tsx
+++ b/suite-native/atoms/src/SelectableItem.tsx
@@ -13,7 +13,7 @@ import { Radio } from './Radio';
 const cardStyle = prepareNativeStyle((utils, { isSelected }: { isSelected: boolean }) => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.medium,
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
     ...utils.boxShadows.small,
     extend: [
         {
@@ -21,7 +21,7 @@ const cardStyle = prepareNativeStyle((utils, { isSelected }: { isSelected: boole
             style: {
                 borderColor: utils.colors.iconPrimaryDefault,
                 borderWidth: utils.borders.widths.large,
-                padding: utils.spacings.medium - utils.borders.widths.large,
+                padding: utils.spacings.sp16 - utils.borders.widths.large,
                 ...utils.boxShadows.medium,
             },
         },
@@ -40,11 +40,11 @@ const radioWrapperStyle = prepareNativeStyle(_ => ({
 }));
 
 const subtitleWrapperStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.extraSmall,
+    paddingBottom: utils.spacings.sp4,
 }));
 
 const badgeWrapperStyle = prepareNativeStyle(utils => ({
-    paddingTop: utils.spacings.extraSmall,
+    paddingTop: utils.spacings.sp4,
 }));
 
 type SelectableItemProps = {
@@ -72,7 +72,7 @@ export const SelectableItem = ({
             activeOpacity={0.6}
             style={applyStyle(cardStyle, { isSelected })}
         >
-            <VStack spacing={utils.spacings.extraSmall}>
+            <VStack spacing={utils.spacings.sp4}>
                 <Box style={applyStyle(titleWrapperStyle)}>
                     <Text variant="titleSmall" color="textDefault">
                         {title}
diff --git a/suite-native/atoms/src/Sheet/BottomSheet.tsx b/suite-native/atoms/src/Sheet/BottomSheet.tsx
index 70497681c75..02f450cbb1c 100644
--- a/suite-native/atoms/src/Sheet/BottomSheet.tsx
+++ b/suite-native/atoms/src/Sheet/BottomSheet.tsx
@@ -31,7 +31,7 @@ const sheetWrapperStyle = prepareNativeStyle<WrapperStyleProps>((utils, { insetB
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
     borderTopLeftRadius: utils.borders.radii.large,
     borderTopRightRadius: utils.borders.radii.large,
-    paddingBottom: Math.max(insetBottom, utils.spacings.medium),
+    paddingBottom: Math.max(insetBottom, utils.spacings.sp16),
     maxHeight: '90%',
 }));
 
@@ -126,7 +126,7 @@ export const BottomSheet = ({
                                     keyboardShouldPersistTaps="handled"
                                 >
                                     <Animated.View>
-                                        <Box paddingHorizontal="medium" {...boxProps}>
+                                        <Box paddingHorizontal="sp16" {...boxProps}>
                                             {children}
                                         </Box>
                                     </Animated.View>
diff --git a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx
index 9762cf3ad2c..7500c3f4cfe 100644
--- a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx
+++ b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx
@@ -17,7 +17,7 @@ type SheetHeaderWrapperStyleProps = { isHeaderDisplayed: boolean };
 
 const sheetHeaderWrapperStyle = prepareNativeStyle<SheetHeaderWrapperStyleProps>(
     (utils, { isHeaderDisplayed }) => ({
-        marginBottom: utils.spacings.large,
+        marginBottom: utils.spacings.sp24,
 
         extend: {
             condition: isHeaderDisplayed,
@@ -33,9 +33,9 @@ const sheetHeaderStyle = prepareNativeStyle<{ isCloseDisplayed: boolean }>(
         flexDirection: isCloseDisplayed ? 'row' : 'column',
         justifyContent: 'space-between',
         alignItems: isCloseDisplayed ? 'center' : 'flex-start',
-        paddingHorizontal: utils.spacings.large,
-        paddingTop: utils.spacings.large,
-        paddingBottom: utils.spacings.medium,
+        paddingHorizontal: utils.spacings.sp24,
+        paddingTop: utils.spacings.sp24,
+        paddingBottom: utils.spacings.sp16,
     }),
 );
 
@@ -74,7 +74,7 @@ export const BottomSheetHeader = ({
 
     return (
         <Box
-            marginVertical="small"
+            marginVertical="sp8"
             style={applyStyle(sheetHeaderWrapperStyle, { isHeaderDisplayed })}
         >
             <BottomSheetGrabber />
diff --git a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
index 5b9e97003f1..d06d854cdae 100644
--- a/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
+++ b/suite-native/atoms/src/Skeleton/ListItemSkeleton.tsx
@@ -11,7 +11,7 @@ const skeletonContainer = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingVertical: 12,
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 const MAIN_ITEM_HEIGHT = 48;
@@ -32,7 +32,7 @@ export const ListItemSkeleton = () => {
         <Box style={applyStyle(skeletonContainer)}>
             <BoxSkeleton width={MAIN_ITEM_WIDTH} height={MAIN_ITEM_HEIGHT} />
 
-            <VStack spacing="small" alignItems="flex-end">
+            <VStack spacing="sp8" alignItems="flex-end">
                 <BoxSkeleton
                     width={TOP_SUB_ITEM_WIDTH}
                     height={SUBITEM_HEIGHT}
diff --git a/suite-native/atoms/src/Stack.tsx b/suite-native/atoms/src/Stack.tsx
index ce8f28711ea..0b956849adb 100644
--- a/suite-native/atoms/src/Stack.tsx
+++ b/suite-native/atoms/src/Stack.tsx
@@ -18,7 +18,7 @@ type SpacerStyleProps = {
 };
 
 const spacerStyle = prepareNativeStyle<SpacerStyleProps>((utils, { spacing, orientation }) => {
-    const spacingValue = typeof spacing === 'number' ? spacing : utils.spacings[spacing ?? 'small'];
+    const spacingValue = typeof spacing === 'number' ? spacing : utils.spacings[spacing ?? 'sp8'];
     const flexDirection = orientation === 'horizontal' ? 'row' : 'column';
 
     return {
diff --git a/suite-native/atoms/src/StepsProgressBar.tsx b/suite-native/atoms/src/StepsProgressBar.tsx
index cd36ed45751..b046ad53499 100644
--- a/suite-native/atoms/src/StepsProgressBar.tsx
+++ b/suite-native/atoms/src/StepsProgressBar.tsx
@@ -12,9 +12,9 @@ type StepsProgressBarProps = {
 const progressBarWrapperStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
-    paddingVertical: utils.spacings.small,
-    paddingHorizontal: utils.spacings.small,
-    gap: utils.spacings.extraSmall,
+    paddingVertical: utils.spacings.sp8,
+    paddingHorizontal: utils.spacings.sp8,
+    gap: utils.spacings.sp4,
     borderRadius: 10,
     borderWidth: utils.borders.widths.small,
     alignItems: 'center',
diff --git a/suite-native/atoms/src/Table.tsx b/suite-native/atoms/src/Table.tsx
index deb58db7bbc..5a5fadd458b 100644
--- a/suite-native/atoms/src/Table.tsx
+++ b/suite-native/atoms/src/Table.tsx
@@ -21,7 +21,7 @@ export const Th = ({ children }: TdProps) => (
     </Box>
 );
 export const Tr = ({ children }: TableProps) => (
-    <HStack flexDirection="row" justifyContent="space-between" marginVertical="small">
+    <HStack flexDirection="row" justifyContent="space-between" marginVertical="sp8">
         {children}
     </HStack>
 );
diff --git a/suite-native/atoms/src/TextDivider.tsx b/suite-native/atoms/src/TextDivider.tsx
index 1ba9252e5ef..0cc18643cbe 100644
--- a/suite-native/atoms/src/TextDivider.tsx
+++ b/suite-native/atoms/src/TextDivider.tsx
@@ -25,7 +25,7 @@ const separatorStyle = prepareNativeStyle<{ horizontalMargin?: number; color: Co
 
 const separatorTitleStyle = prepareNativeStyle(utils => ({
     paddingHorizontal: 12,
-    paddingVertical: utils.spacings.extraSmall,
+    paddingVertical: utils.spacings.sp4,
 }));
 
 export const TextDivider = ({
diff --git a/suite-native/atoms/src/TitleHeader/PictogramTitleHeader.tsx b/suite-native/atoms/src/TitleHeader/PictogramTitleHeader.tsx
index a152d44fa8f..8f0cacb5f09 100644
--- a/suite-native/atoms/src/TitleHeader/PictogramTitleHeader.tsx
+++ b/suite-native/atoms/src/TitleHeader/PictogramTitleHeader.tsx
@@ -25,7 +25,7 @@ export const PictogramTitleHeader = ({
     size = 'large',
 }: PictogramTitleHeaderProps) => {
     return (
-        <VStack alignItems="center" spacing="large">
+        <VStack alignItems="center" spacing="sp24">
             <Pictogram variant={variant} icon={icon} size={size} />
             <CenteredTitleHeader title={title} subtitle={subtitle} titleVariant={titleVariant} />
         </VStack>
diff --git a/suite-native/atoms/src/TitleHeader/TitleHeader.tsx b/suite-native/atoms/src/TitleHeader/TitleHeader.tsx
index 871a1b8c503..97541e3b599 100644
--- a/suite-native/atoms/src/TitleHeader/TitleHeader.tsx
+++ b/suite-native/atoms/src/TitleHeader/TitleHeader.tsx
@@ -18,7 +18,7 @@ export const TitleHeader = ({
     subtitle,
     titleVariant = 'titleSmall',
     textAlign = 'left',
-    titleSpacing = 'small',
+    titleSpacing = 'sp8',
 }: TitleHeaderProps) => {
     return (
         <VStack
diff --git a/suite-native/biometrics/src/components/BiometricOverlay.tsx b/suite-native/biometrics/src/components/BiometricOverlay.tsx
index 0d535c9c383..bcde03df68b 100644
--- a/suite-native/biometrics/src/components/BiometricOverlay.tsx
+++ b/suite-native/biometrics/src/components/BiometricOverlay.tsx
@@ -20,7 +20,7 @@ const bottomWrapperStyle = prepareNativeStyle(utils => ({
     marginHorizontal: 'auto',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: utils.spacings.extraSmall,
+    gap: utils.spacings.sp4,
 }));
 
 type BiometricOverlayProps = {
diff --git a/suite-native/coin-enabling/src/components/BtcOnlyCoinEnablingContent.tsx b/suite-native/coin-enabling/src/components/BtcOnlyCoinEnablingContent.tsx
index f03fb67d40e..fbcfd61e748 100644
--- a/suite-native/coin-enabling/src/components/BtcOnlyCoinEnablingContent.tsx
+++ b/suite-native/coin-enabling/src/components/BtcOnlyCoinEnablingContent.tsx
@@ -15,9 +15,9 @@ export const BtcOnlyCoinEnablingContent = () => {
 
     return (
         <Box style={applyStyle(contentStyle)}>
-            <VStack spacing="large" alignItems="center">
+            <VStack spacing="sp24" alignItems="center">
                 <BtcSvg />
-                <VStack spacing="small">
+                <VStack spacing="sp8">
                     <Text textAlign="center" variant="titleSmall">
                         <Translation id="moduleSettings.coinEnabling.btcOnly.title" />
                     </Text>
diff --git a/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx b/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
index 7f231f64e7a..dfdb727a9db 100644
--- a/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
+++ b/suite-native/coin-enabling/src/components/DiscoveryCoinsFilter.tsx
@@ -48,7 +48,7 @@ export const DiscoveryCoinsFilter = ({
                     allowChangeAnalytics={allowChangeAnalytics}
                 />
             ))}
-            <VStack paddingTop="small" paddingBottom="extraLarge" alignItems="center">
+            <VStack paddingTop="sp8" paddingBottom="sp32" alignItems="center">
                 <Icon name="questionLight" color="textSubdued" size="large" />
                 <Text color="textSubdued" textAlign="center">
                     <Translation id="moduleSettings.coinEnabling.bottomNote" />
diff --git a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
index be36474b178..82f1e77a82b 100644
--- a/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
+++ b/suite-native/coin-enabling/src/components/NetworkSymbolSwitchItem.tsx
@@ -46,7 +46,7 @@ const wrapperStyle = prepareNativeStyle(_ => ({
 }));
 
 const iconWrapperStyle = prepareNativeStyle(utils => ({
-    paddingVertical: utils.spacings.small,
+    paddingVertical: utils.spacings.sp8,
 }));
 
 export const NetworkSymbolSwitchItem = ({
diff --git a/suite-native/coin-enabling/src/screens/CoinEnablingInitScreen.tsx b/suite-native/coin-enabling/src/screens/CoinEnablingInitScreen.tsx
index ac81fca3ec0..efece75ce19 100644
--- a/suite-native/coin-enabling/src/screens/CoinEnablingInitScreen.tsx
+++ b/suite-native/coin-enabling/src/screens/CoinEnablingInitScreen.tsx
@@ -26,14 +26,14 @@ const BUTTON_HEIGHT = 48;
 
 const headerWrapperStyle = prepareNativeStyle(utils => ({
     zIndex: 2,
-    paddingTop: utils.spacings.extraLarge,
+    paddingTop: utils.spacings.sp32,
 }));
 
 const gradientBackgroundTopStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    height: utils.spacings.medium,
+    height: utils.spacings.sp16,
     position: 'absolute',
-    bottom: -utils.spacings.medium,
+    bottom: -utils.spacings.sp16,
     pointerEvents: 'none',
 }));
 
@@ -59,7 +59,7 @@ const buttonWrapperStyle = prepareNativeStyle(utils => ({
 }));
 
 const buttonStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const CoinEnablingInitScreen = () => {
@@ -98,10 +98,10 @@ export const CoinEnablingInitScreen = () => {
 
     return (
         <Screen
-            customHorizontalPadding={utils.spacings.medium}
+            customHorizontalPadding={utils.spacings.sp16}
             screenHeader={
                 <View style={applyStyle(headerWrapperStyle)}>
-                    <VStack paddingBottom="extraLarge" paddingHorizontal="medium">
+                    <VStack paddingBottom="sp32" paddingHorizontal="sp16">
                         <Text variant="titleSmall">
                             <Translation id="moduleSettings.coinEnabling.initialSetup.title" />
                         </Text>
diff --git a/suite-native/connection-status/src/OfflineBanner.tsx b/suite-native/connection-status/src/OfflineBanner.tsx
index 61fc624a43b..31c7fa4037f 100644
--- a/suite-native/connection-status/src/OfflineBanner.tsx
+++ b/suite-native/connection-status/src/OfflineBanner.tsx
@@ -16,7 +16,7 @@ const containerStyle = prepareNativeStyle(utils => ({
 const contentStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
     (utils, { topSafeAreaInset }) => ({
         marginTop: topSafeAreaInset,
-        paddingTop: utils.spacings.small,
+        paddingTop: utils.spacings.sp8,
         paddingBottom: 12,
         alignItems: 'center',
     }),
diff --git a/suite-native/device-manager/src/components/DeviceAction.tsx b/suite-native/device-manager/src/components/DeviceAction.tsx
index 39373f570b7..63b8ce3fc04 100644
--- a/suite-native/device-manager/src/components/DeviceAction.tsx
+++ b/suite-native/device-manager/src/components/DeviceAction.tsx
@@ -13,11 +13,11 @@ type DeviceActionProps = {
 };
 
 const contentStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
     paddingVertical: 12,
     alignItems: 'center',
     height: 44 * ACCESSIBILITY_FONTSIZE_MULTIPLIER,
-    gap: utils.spacings.small,
+    gap: utils.spacings.sp8,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderWidth: utils.borders.widths.small,
     borderRadius: 12,
diff --git a/suite-native/device-manager/src/components/DeviceInfoButton.tsx b/suite-native/device-manager/src/components/DeviceInfoButton.tsx
index b95d623540f..8908290a3bf 100644
--- a/suite-native/device-manager/src/components/DeviceInfoButton.tsx
+++ b/suite-native/device-manager/src/components/DeviceInfoButton.tsx
@@ -57,7 +57,7 @@ export const DeviceInfoButton = ({ showAsFullWidth }: DeviceInfoButtonProps) =>
             onPress={handleDeviceRedirect}
             showAsFullWidth={showAsFullWidth}
         >
-            <HStack spacing="small" style={applyStyle(contentStyle, { showAsFullWidth })}>
+            <HStack spacing="sp8" style={applyStyle(contentStyle, { showAsFullWidth })}>
                 <Icon name="infoLight" size="mediumLarge" />
                 <Text variant="hint">
                     <Translation id="deviceManager.deviceButtons.deviceInfo" />
diff --git a/suite-native/device-manager/src/components/DeviceItem/ConnectionDot.tsx b/suite-native/device-manager/src/components/DeviceItem/ConnectionDot.tsx
index da86cbd7623..6899a4db8e9 100644
--- a/suite-native/device-manager/src/components/DeviceItem/ConnectionDot.tsx
+++ b/suite-native/device-manager/src/components/DeviceItem/ConnectionDot.tsx
@@ -7,8 +7,8 @@ type ConnectionDotProps = {
 };
 
 const dotStyle = prepareNativeStyle<{ isConnected: boolean }>((utils, { isConnected }) => ({
-    width: utils.spacings.small,
-    height: utils.spacings.small,
+    width: utils.spacings.sp8,
+    height: utils.spacings.sp8,
     borderRadius: utils.borders.radii.round,
     backgroundColor: utils.colors.iconDisabled,
     extend: {
diff --git a/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx b/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx
index ae1a346df25..b59a07e32c6 100644
--- a/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx
+++ b/suite-native/device-manager/src/components/DeviceItem/DeviceItem.tsx
@@ -16,7 +16,7 @@ const deviceItemWrapperStyle = prepareNativeStyle(utils => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 10,
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const DeviceItem = ({ deviceState, onPress }: DeviceItemProps) => {
diff --git a/suite-native/device-manager/src/components/DeviceItem/DeviceItemContent.tsx b/suite-native/device-manager/src/components/DeviceItem/DeviceItemContent.tsx
index c110ff7e9c8..2f16bd8f3c0 100644
--- a/suite-native/device-manager/src/components/DeviceItem/DeviceItemContent.tsx
+++ b/suite-native/device-manager/src/components/DeviceItem/DeviceItemContent.tsx
@@ -35,7 +35,7 @@ const contentWrapperStyle = prepareNativeStyle<{ height: number }>((utils, { hei
     flexShrink: 1,
     height: height * ACCESSIBILITY_FONTSIZE_MULTIPLIER,
     alignItems: 'center',
-    spacing: utils.spacings.medium,
+    spacing: utils.spacings.sp16,
 }));
 
 const itemStyle = prepareNativeStyle<{ isCompact: boolean }>((_, { isCompact }) => ({
diff --git a/suite-native/device-manager/src/components/DeviceItem/SimpleDeviceItemContent.tsx b/suite-native/device-manager/src/components/DeviceItem/SimpleDeviceItemContent.tsx
index 82b66e130b8..dce5d353564 100644
--- a/suite-native/device-manager/src/components/DeviceItem/SimpleDeviceItemContent.tsx
+++ b/suite-native/device-manager/src/components/DeviceItem/SimpleDeviceItemContent.tsx
@@ -73,7 +73,7 @@ export const SimpleDeviceItemContent = React.memo(
                         </Text>
                     )}
                     {isConnectionStateVisible && (
-                        <HStack alignItems="center" spacing="small">
+                        <HStack alignItems="center" spacing="sp8">
                             <ConnectionDot isConnected={deviceIsConnected} />
                             <Text
                                 variant="hint"
diff --git a/suite-native/device-manager/src/components/DeviceItem/WalletDetailDeviceItemContent.tsx b/suite-native/device-manager/src/components/DeviceItem/WalletDetailDeviceItemContent.tsx
index 67d500dd384..2cc6b7139df 100644
--- a/suite-native/device-manager/src/components/DeviceItem/WalletDetailDeviceItemContent.tsx
+++ b/suite-native/device-manager/src/components/DeviceItem/WalletDetailDeviceItemContent.tsx
@@ -20,9 +20,9 @@ export type WalletDetailDeviceItemContentProps = {
 
 const headerStyle = prepareNativeStyle(utils => ({
     flexShrink: 1,
-    paddingRight: utils.spacings.small,
+    paddingRight: utils.spacings.sp8,
     alignItems: 'center',
-    gap: utils.spacings.small,
+    gap: utils.spacings.sp8,
 }));
 
 const headerTextStyle = prepareNativeStyle(() => ({
diff --git a/suite-native/device-manager/src/components/DeviceList.tsx b/suite-native/device-manager/src/components/DeviceList.tsx
index 74cad485707..fdd454478b1 100644
--- a/suite-native/device-manager/src/components/DeviceList.tsx
+++ b/suite-native/device-manager/src/components/DeviceList.tsx
@@ -60,15 +60,15 @@ const SEPARATOR_VERTICAL_PADDING = 4;
 const SEPARATOR_HEIGHT = 26;
 
 const buttonWrapperStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
-    paddingTop: utils.spacings.small,
+    paddingHorizontal: utils.spacings.sp16,
+    paddingTop: utils.spacings.sp8,
 }));
 
 const ConnectButton = ({ isDividerVisible, onPress }: ConnectButtonProps) => {
     const { applyStyle } = useNativeStyles();
 
     return isDividerVisible ? (
-        <VStack spacing="extraSmall" paddingTop="extraSmall">
+        <VStack spacing="sp4" paddingTop="sp4">
             <TextDivider title="generic.orSeparator" />
             <Box style={applyStyle(buttonWrapperStyle)}>
                 <Button colorScheme="tertiaryElevation0" onPress={onPress}>
diff --git a/suite-native/device-manager/src/components/DeviceManagerContent.tsx b/suite-native/device-manager/src/components/DeviceManagerContent.tsx
index eb1fa1fc82f..f806f67090a 100644
--- a/suite-native/device-manager/src/components/DeviceManagerContent.tsx
+++ b/suite-native/device-manager/src/components/DeviceManagerContent.tsx
@@ -36,8 +36,8 @@ const scrollViewStyle = prepareNativeStyle<{ maxHeight: number }>((_, { maxHeigh
 
 const deviceButtonsStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    paddingHorizontal: utils.spacings.medium,
-    paddingBottom: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
+    paddingBottom: utils.spacings.sp16,
 }));
 
 export const DeviceManagerContent = () => {
@@ -76,7 +76,7 @@ export const DeviceManagerContent = () => {
     }
 
     // based on DeviceManagerModal header height and top offset
-    const scrollViewTopOffset = insets.top + utils.spacings.large + HEADER_HEIGHT;
+    const scrollViewTopOffset = insets.top + utils.spacings.sp24 + HEADER_HEIGHT;
     const scrollViewMaxHeight = CONTENT_MAX_HEIGHT - scrollViewTopOffset;
 
     const isAddHiddenWalletButtonVisible = !hasDiscovery && device?.connected;
@@ -104,7 +104,7 @@ export const DeviceManagerContent = () => {
                 />
 
                 {!isPortfolioTrackerDevice && (
-                    <VStack spacing={12} paddingTop="large">
+                    <VStack spacing={12} paddingTop="sp24">
                         <WalletList onSelectDevice={handleSelectDevice} />
                         <Stack
                             orientation={
diff --git a/suite-native/device-manager/src/components/DeviceManagerModal.tsx b/suite-native/device-manager/src/components/DeviceManagerModal.tsx
index 058622b56a8..140d9d2237f 100644
--- a/suite-native/device-manager/src/components/DeviceManagerModal.tsx
+++ b/suite-native/device-manager/src/components/DeviceManagerModal.tsx
@@ -85,7 +85,7 @@ export const DeviceManagerModal = ({
                                 <HStack
                                     justifyContent="space-between"
                                     alignItems="center"
-                                    spacing="medium"
+                                    spacing="sp16"
                                     flex={1}
                                 >
                                     {deviceState && (
diff --git a/suite-native/device-manager/src/components/DeviceSwitch.tsx b/suite-native/device-manager/src/components/DeviceSwitch.tsx
index f6fe78de08b..e820b77f187 100644
--- a/suite-native/device-manager/src/components/DeviceSwitch.tsx
+++ b/suite-native/device-manager/src/components/DeviceSwitch.tsx
@@ -18,8 +18,8 @@ const switchStyle = prepareNativeStyle<SwitchStyleProps>((utils, { isDeviceManag
     alignItems: 'center',
     justifyContent: 'space-between',
     height: SCREEN_HEADER_HEIGHT,
-    paddingVertical: utils.spacings.small,
-    paddingHorizontal: utils.spacings.medium,
+    paddingVertical: utils.spacings.sp8,
+    paddingHorizontal: utils.spacings.sp16,
     borderColor: utils.colors.borderElevation2,
     borderWidth: utils.borders.widths.small,
     borderRadius: utils.borders.radii.round,
@@ -51,7 +51,7 @@ export const DeviceSwitch = () => {
 
     return (
         <Pressable onPress={toggleDeviceManager} style={applyStyle(switchWrapperStyle)}>
-            <HStack justifyContent="space-between" alignItems="center" spacing="medium">
+            <HStack justifyContent="space-between" alignItems="center" spacing="sp16">
                 <Box style={applyStyle(switchStyle, { isDeviceManagerVisible })}>
                     {deviceState && (
                         <DeviceItemContent
diff --git a/suite-native/device-manager/src/components/PortfolioTrackerDeviceManagerContent.tsx b/suite-native/device-manager/src/components/PortfolioTrackerDeviceManagerContent.tsx
index ec9ebe4cd9d..c1d8c3fffbc 100644
--- a/suite-native/device-manager/src/components/PortfolioTrackerDeviceManagerContent.tsx
+++ b/suite-native/device-manager/src/components/PortfolioTrackerDeviceManagerContent.tsx
@@ -25,12 +25,12 @@ type NavigationProp = StackToStackCompositeNavigationProps<
 >;
 
 const contentStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 
-    spacing: utils.spacings.medium,
+    spacing: utils.spacings.sp16,
 
-    paddingBottom: utils.spacings.medium,
-    marginTop: utils.spacings.medium,
+    paddingBottom: utils.spacings.sp16,
+    marginTop: utils.spacings.sp16,
 }));
 
 export const PortfolioTrackerDeviceManagerContent = () => {
diff --git a/suite-native/device-manager/src/components/WalletItem.tsx b/suite-native/device-manager/src/components/WalletItem.tsx
index 00e51f764ac..31b31eae54a 100644
--- a/suite-native/device-manager/src/components/WalletItem.tsx
+++ b/suite-native/device-manager/src/components/WalletItem.tsx
@@ -38,7 +38,7 @@ const walletItemStyle = prepareNativeStyle<WalletItemStyleProps>(
             {
                 condition: isSelectable,
                 style: {
-                    paddingHorizontal: utils.spacings.medium,
+                    paddingHorizontal: utils.spacings.sp16,
                     backgroundColor: utils.colors.backgroundSurfaceElevation1,
                     borderWidth: utils.borders.widths.small,
                 },
diff --git a/suite-native/device-manager/src/components/WalletList.tsx b/suite-native/device-manager/src/components/WalletList.tsx
index 8dbd405ea3c..a45962701d4 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="medium">
+        <VStack spacing={12} paddingHorizontal="sp16">
             {devices.map(device => {
                 if (!device.state) {
                     return null;
diff --git a/suite-native/device/src/components/BootloaderModalAppendix.tsx b/suite-native/device/src/components/BootloaderModalAppendix.tsx
index 49a4b220aec..a331a1c6f3b 100644
--- a/suite-native/device/src/components/BootloaderModalAppendix.tsx
+++ b/suite-native/device/src/components/BootloaderModalAppendix.tsx
@@ -2,7 +2,7 @@ import { VStack, Box, Text } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 
 export const BootloaderModalAppendix = () => (
-    <VStack spacing="large">
+    <VStack spacing="sp24">
         <VStack>
             <Text variant="callout">
                 <Translation id="moduleDevice.bootloaderModal.appendix.exit.title" />
diff --git a/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx b/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx
index 53ede983c97..33bd08606fe 100644
--- a/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx
+++ b/suite-native/device/src/components/ConfirmOnTrezorBottomSheet.tsx
@@ -19,9 +19,9 @@ export const ConfirmOnTrezorBottomSheet = ({
             isVisible={isOpened}
             onClose={onClose}
             isCloseDisplayed={false}
-            paddingHorizontal="large"
+            paddingHorizontal="sp24"
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <VStack alignItems="center">
                     <Text textAlign="center" variant="titleSmall">
                         <Translation id="moduleDevice.confirmOnDeviceSheetTitle" />
diff --git a/suite-native/device/src/components/ConfirmOnTrezorImage.tsx b/suite-native/device/src/components/ConfirmOnTrezorImage.tsx
index 09b547d0770..d0495985806 100644
--- a/suite-native/device/src/components/ConfirmOnTrezorImage.tsx
+++ b/suite-native/device/src/components/ConfirmOnTrezorImage.tsx
@@ -12,7 +12,7 @@ type ConfirmOnTrezorImageProps = {
 
 const imageContainerStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
-    bottom: -utils.spacings.extraSmall, // Hides a part of the image under bottom screen edge.
+    bottom: -utils.spacings.sp4, // Hides a part of the image under bottom screen edge.
     width: '100%',
     alignItems: 'center',
 }));
diff --git a/suite-native/device/src/components/HowToUpdateBottomSheet.tsx b/suite-native/device/src/components/HowToUpdateBottomSheet.tsx
index 101370c9e6d..d3f2e22dab6 100644
--- a/suite-native/device/src/components/HowToUpdateBottomSheet.tsx
+++ b/suite-native/device/src/components/HowToUpdateBottomSheet.tsx
@@ -24,8 +24,8 @@ export const HowToUpdateBottomSheet = ({
 
     return (
         <BottomSheet isVisible={isVisible} onClose={onClose} title={title}>
-            <VStack spacing="large">
-                <VStack paddingHorizontal="large">
+            <VStack spacing="sp24">
+                <VStack paddingHorizontal="sp24">
                     <Text variant="callout">
                         <Translation id="deviceInfo.updateHowTo.subtitle" />
                     </Text>
diff --git a/suite-native/device/src/components/UninitializedDeviceModalAppendix.tsx b/suite-native/device/src/components/UninitializedDeviceModalAppendix.tsx
index c2bb0eda7a3..f3082f006cc 100644
--- a/suite-native/device/src/components/UninitializedDeviceModalAppendix.tsx
+++ b/suite-native/device/src/components/UninitializedDeviceModalAppendix.tsx
@@ -7,7 +7,7 @@ export const UninitializedDeviceModalAppendix = () => {
             <Text variant="callout">
                 <Translation id="moduleDevice.noSeedModal.appendix.title" />
             </Text>
-            <VStack spacing="medium" paddingTop="large">
+            <VStack spacing="sp16" paddingTop="sp24">
                 <BottomSheetListItem
                     iconNumber={1}
                     translationKey="moduleDevice.noSeedModal.appendix.lines.1"
diff --git a/suite-native/device/src/screens/DeviceInfoModalScreen.tsx b/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
index e1a22f04d58..7e0fe21f01a 100644
--- a/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
+++ b/suite-native/device/src/screens/DeviceInfoModalScreen.tsx
@@ -133,9 +133,9 @@ export const DeviceInfoModalScreen = () => {
         >
             <Box style={applyStyle(contentStyle)}>
                 <Card {...cardAlertProps}>
-                    <HStack spacing="large">
+                    <HStack spacing="sp24">
                         <Image width={92} height={151} source={deviceImageMap[deviceModel]} />
-                        <VStack spacing="extraSmall" justifyContent="center">
+                        <VStack spacing="sp4" justifyContent="center">
                             {deviceLabel && <Text variant="titleSmall">{deviceLabel}</Text>}
                             <Text variant="label" color="textSubdued">
                                 {device?.name}
@@ -149,7 +149,7 @@ export const DeviceInfoModalScreen = () => {
                     </HStack>
                 </Card>
             </Box>
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <Button
                     colorScheme="tertiaryElevation0"
                     onPress={handleAccessoriesClick}
diff --git a/suite-native/formatters/src/components/FiatBalanceFormatter.tsx b/suite-native/formatters/src/components/FiatBalanceFormatter.tsx
index d1c58444d27..5a4f1e0ddbe 100644
--- a/suite-native/formatters/src/components/FiatBalanceFormatter.tsx
+++ b/suite-native/formatters/src/components/FiatBalanceFormatter.tsx
@@ -13,7 +13,7 @@ type BalanceFormatterProps = FormatterProps<string | null> & { isForcedDiscreetM
 
 const wholeNumberStyle = prepareNativeStyle(utils => ({
     flexShrink: 1,
-    marginBottom: -utils.spacings.small,
+    marginBottom: -utils.spacings.sp8,
     textAlign: 'center',
 }));
 
diff --git a/suite-native/graph/src/components/AxisLabel.tsx b/suite-native/graph/src/components/AxisLabel.tsx
index 70b3304ce89..800779a4cdd 100644
--- a/suite-native/graph/src/components/AxisLabel.tsx
+++ b/suite-native/graph/src/components/AxisLabel.tsx
@@ -31,7 +31,7 @@ const axisLabelStyle = prepareNativeStyle<AxisLabelStyleProps>(
             condition: isOverflowing,
             style: {
                 left: undefined,
-                right: spacings.small,
+                right: spacings.sp8,
             },
         },
     }),
@@ -46,7 +46,7 @@ export const AxisLabel = ({ x, value }: AxisLabelProps) => {
     const handleLayoutOverflow = useCallback(() => {
         if (viewRef.current) {
             viewRef.current.measureInWindow((viewX, _, viewWidth) => {
-                const graphHorizontalPadding = utils.spacings.small;
+                const graphHorizontalPadding = utils.spacings.sp8;
                 // The right most pixel of the axis label is overflowing the graph width.
                 if (viewX + viewWidth + graphHorizontalPadding > SCREEN_WIDTH) {
                     setIsOverflowing(true);
diff --git a/suite-native/graph/src/components/GraphError.tsx b/suite-native/graph/src/components/GraphError.tsx
index 4b5063833a5..2b84c7fec06 100644
--- a/suite-native/graph/src/components/GraphError.tsx
+++ b/suite-native/graph/src/components/GraphError.tsx
@@ -23,7 +23,7 @@ const errorIconStyle = prepareNativeStyle(({ colors }) => ({
 }));
 
 const tryAgainButtonStyle = prepareNativeStyle(({ spacings }) => ({
-    marginTop: spacings.small,
+    marginTop: spacings.sp8,
 }));
 
 const ErrorIcon = () => {
@@ -40,7 +40,7 @@ export const GraphError = ({ error, onTryAgain }: GraphErrorProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
-        <VStack spacing="small" alignItems="center" paddingHorizontal="medium">
+        <VStack spacing="sp8" alignItems="center" paddingHorizontal="sp16">
             <ErrorIcon />
             <Animated.View entering={FadeInDown} exiting={FadeOutUp}>
                 <Text variant="hint" color="textSubdued" textAlign="center">
diff --git a/suite-native/graph/src/components/GraphFiatBalance.tsx b/suite-native/graph/src/components/GraphFiatBalance.tsx
index cf261c53c30..4002254080b 100644
--- a/suite-native/graph/src/components/GraphFiatBalance.tsx
+++ b/suite-native/graph/src/components/GraphFiatBalance.tsx
@@ -25,7 +25,7 @@ const wrapperStyle = prepareNativeStyle(_ => ({
 
 const Skeleton = () => {
     return (
-        <VStack alignItems="center" spacing="small">
+        <VStack alignItems="center" spacing="sp8">
             <BoxSkeleton elevation="0" width={180} height={44} />
             <BoxSkeleton elevation="0" width={140} height={20} />
         </VStack>
diff --git a/suite-native/graph/src/components/PriceChangeIndicator.tsx b/suite-native/graph/src/components/PriceChangeIndicator.tsx
index f42bfea6a2c..f0ee28b9104 100644
--- a/suite-native/graph/src/components/PriceChangeIndicator.tsx
+++ b/suite-native/graph/src/components/PriceChangeIndicator.tsx
@@ -61,8 +61,8 @@ const priceIncreaseWrapperStyle = prepareNativeStyle<{ hasPriceIncreased: boolea
             : utils.colors.backgroundAlertRedSubtleOnElevation0,
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: utils.spacings.small,
-        paddingVertical: utils.spacings.extraSmall / 2,
+        paddingHorizontal: utils.spacings.sp8,
+        paddingVertical: utils.spacings.sp4 / 2,
         borderRadius: utils.borders.radii.round,
     }),
 );
diff --git a/suite-native/graph/src/components/TimeSwitch.tsx b/suite-native/graph/src/components/TimeSwitch.tsx
index 4b652d6b542..12401d9914c 100644
--- a/suite-native/graph/src/components/TimeSwitch.tsx
+++ b/suite-native/graph/src/components/TimeSwitch.tsx
@@ -25,7 +25,7 @@ export const timeSwitchItems: TimeSwitchItemType[] = [
 const timeSwitchStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-around',
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const TimeSwitch = ({ selectedTimeFrame = 24, onSelectTimeFrame }: TimeSwitchProps) => {
diff --git a/suite-native/graph/src/components/TransactionEventTooltip.tsx b/suite-native/graph/src/components/TransactionEventTooltip.tsx
index e6f63892dea..cd0c35e98d2 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.small,
+    paddingVertical: 1.5 * utils.spacings.sp8,
     // fade in/out animation doesn't work for elevation (shadow) on Android
     elevation: 0,
 }));
diff --git a/suite-native/message-system/src/components/FeatureMessageScreen.tsx b/suite-native/message-system/src/components/FeatureMessageScreen.tsx
index 92496ce1025..375105ce3b9 100644
--- a/suite-native/message-system/src/components/FeatureMessageScreen.tsx
+++ b/suite-native/message-system/src/components/FeatureMessageScreen.tsx
@@ -14,9 +14,9 @@ const screenStyle = prepareNativeStyle(utils => ({
     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingHorizontal: utils.spacings.large,
-    paddingTop: utils.spacings.xxl,
-    paddingBottom: utils.spacings.extraLarge,
+    paddingHorizontal: utils.spacings.sp24,
+    paddingTop: utils.spacings.sp64,
+    paddingBottom: utils.spacings.sp32,
     position: 'absolute',
     left: 0,
     top: 0,
@@ -123,7 +123,7 @@ export const FeatureMessageScreen = () => {
                 />
             </Box>
 
-            <VStack spacing="medium" style={applyStyle(buttonsWrapperStyle)}>
+            <VStack spacing="sp16" style={applyStyle(buttonsWrapperStyle)}>
                 {isCtaVisible && (
                     <Button size="large" colorScheme="primary" onPress={handleCtaPress}>
                         {ctaLabel}
diff --git a/suite-native/message-system/src/components/MessageBanner.tsx b/suite-native/message-system/src/components/MessageBanner.tsx
index 8f742f1d470..d835b6d6b39 100644
--- a/suite-native/message-system/src/components/MessageBanner.tsx
+++ b/suite-native/message-system/src/components/MessageBanner.tsx
@@ -47,7 +47,7 @@ const MessageBannerVariantToStyleMap = {
 const messageContainerStyle = prepareNativeStyle<{ backgroundColor: Color }>(
     (utils, { backgroundColor }) => ({
         backgroundColor: utils.colors[backgroundColor],
-        padding: utils.spacings.medium,
+        padding: utils.spacings.sp16,
         flexShrink: 1,
     }),
 );
diff --git a/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx b/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx
index 350417cfebb..0617280ce1b 100644
--- a/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountAlreadyImported.tsx
@@ -60,11 +60,11 @@ export const AccountAlreadyImported = ({ account }: AccountImportImportedAccount
                 {account && <AccountsListItem account={account} />}
             </Card>
             <Box>
-                <Box marginBottom="large" marginTop="large">
+                <Box marginBottom="sp24" marginTop="sp24">
                     <Divider />
                 </Box>
                 <Box>
-                    <Box marginBottom="medium">
+                    <Box marginBottom="sp16">
                         <Button
                             size="large"
                             colorScheme="tertiaryElevation0"
diff --git a/suite-native/module-accounts-import/src/components/AccountImportLoader.tsx b/suite-native/module-accounts-import/src/components/AccountImportLoader.tsx
index 4d4cb85e608..db18ddff5ce 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportLoader.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportLoader.tsx
@@ -69,7 +69,7 @@ export const AccountImportLoader = ({ loadingState, onComplete }: AccountImportL
 
     return (
         <Box style={applyStyle(loaderContainerStyle)}>
-            <Box marginBottom="large">
+            <Box marginBottom="sp24">
                 <Spinner loadingState={spinnerLoadingState} onComplete={onComplete} />
             </Box>
             <Box style={applyStyle(textContainerStyle)}>
diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx
index cccc5a5744c..7fc28788cb9 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportOverview.tsx
@@ -36,7 +36,7 @@ export const AccountImportOverview = ({ balance, networkSymbol }: AssetsOverview
                 />
             }
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 {!isTestnet(networkSymbol) && <FiatBalanceFormatter value={fiatBalanceValue} />}
                 <TextInputField
                     testID="@account-import/coin-synced/label-input"
diff --git a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx
index 3ab1da3eb72..1745e12864d 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportOverviewCard.tsx
@@ -14,7 +14,7 @@ import {
 import { NetworkSymbol } from '@suite-common/wallet-config';
 
 const assetCardStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.large,
+    padding: utils.spacings.sp24,
     borderRadius: utils.borders.radii.large,
     width: '100%',
 }));
@@ -54,10 +54,10 @@ export const AccountImportOverviewCard = ({
 
     return (
         <Card style={applyStyle(assetCardStyle)}>
-            <Box flexDirection="row" marginBottom="large" justifyContent="space-between">
+            <Box flexDirection="row" marginBottom="sp24" justifyContent="space-between">
                 <Box flexDirection="row">
                     {icon}
-                    <Box marginLeft="medium">
+                    <Box marginLeft="sp16">
                         <Text>{coinName}</Text>
                         {cryptoAmount}
                     </Box>
diff --git a/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx b/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx
index 27fa32f32fe..b3f1f885f6d 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportSubHeader.tsx
@@ -50,7 +50,7 @@ export const AccountImportSubHeader = () => {
                 ) : null
             }
             content={
-                <VStack alignItems="center" spacing="small">
+                <VStack alignItems="center" spacing="sp8">
                     <Text variant="titleSmall" adjustsFontSizeToFit numberOfLines={1}>
                         <Translation id="moduleAccountImport.title" />
                     </Text>
diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx
index 376a72d0994..c6cf94dceb1 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportSummary.tsx
@@ -56,7 +56,7 @@ export const AccountImportSummary = ({ networkSymbol, accountInfo }: AccountImpo
     ) : undefined;
 
     return (
-        <VStack spacing="extraLarge" flex={1}>
+        <VStack spacing="sp32" flex={1}>
             <Box flex={1} alignItems="center" justifyContent="center">
                 <PictogramTitleHeader
                     title={<Text variant="titleSmall">{title}</Text>}
diff --git a/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx b/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx
index 82b3f23d3fa..df4159e9895 100644
--- a/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx
+++ b/suite-native/module-accounts-import/src/components/AccountImportSummaryForm.tsx
@@ -47,7 +47,7 @@ type NavigationProp = StackToStackCompositeNavigationProps<
 >;
 
 const confirmButtonStyle = prepareNativeStyle(utils => ({
-    marginBottom: utils.spacings.small,
+    marginBottom: utils.spacings.sp8,
 }));
 
 export const AccountImportSummaryForm = ({
@@ -116,7 +116,7 @@ export const AccountImportSummaryForm = ({
 
     const renderItem = useCallback(
         ({ item }: { item: TokenInfo }) => (
-            <Box marginBottom="small">
+            <Box marginBottom="sp8">
                 <EthereumTokenInfo
                     symbol={item.symbol as TokenSymbol}
                     balance={item.balance}
@@ -142,7 +142,7 @@ export const AccountImportSummaryForm = ({
                             networkSymbol={networkSymbol}
                         />
                         {knownTokens.length > 0 && (
-                            <Box marginTop="medium" marginBottom="small">
+                            <Box marginTop="sp16" marginBottom="sp8">
                                 <Text variant="titleSmall">Tokens: </Text>
                             </Box>
                         )}
@@ -150,8 +150,8 @@ export const AccountImportSummaryForm = ({
                 }
                 ListFooterComponent={
                     <>
-                        <Divider marginHorizontal="extraLarge" marginTop="large" />
-                        <Box marginHorizontal="medium" marginTop="large">
+                        <Divider marginHorizontal="sp32" marginTop="sp24" />
+                        <Box marginHorizontal="sp16" marginTop="sp24">
                             <Button
                                 testID="@account-import/coin-synced/confirm-button"
                                 onPress={handleImportAccount}
diff --git a/suite-native/module-accounts-import/src/components/DevXpub.tsx b/suite-native/module-accounts-import/src/components/DevXpub.tsx
index f5a274bdf20..848921b073c 100644
--- a/suite-native/module-accounts-import/src/components/DevXpub.tsx
+++ b/suite-native/module-accounts-import/src/components/DevXpub.tsx
@@ -52,7 +52,7 @@ export const DevXpub = ({ symbol, onSelect }: DevXpubProps) => {
 
     if (G.isArray(xpub)) {
         return (
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 {xpub.map(({ address, title }, index) => {
                     const testIdSuffix = index === 0 ? '' : `/${index}`;
 
diff --git a/suite-native/module-accounts-import/src/components/SelectableNetworkList.tsx b/suite-native/module-accounts-import/src/components/SelectableNetworkList.tsx
index 6472e696695..ba1794360aa 100644
--- a/suite-native/module-accounts-import/src/components/SelectableNetworkList.tsx
+++ b/suite-native/module-accounts-import/src/components/SelectableNetworkList.tsx
@@ -18,7 +18,7 @@ const NetworkItemSection = ({
     onSelectItem: SelectableAssetListProps['onSelectItem'];
 }) => (
     <HeaderedCard title={title}>
-        <VStack spacing="large">
+        <VStack spacing="sp24">
             {networks.map(symbol => (
                 <SelectableNetworkItem key={symbol} symbol={symbol} onPress={onSelectItem} />
             ))}
@@ -42,7 +42,7 @@ const TestnetNetworkItemSection = ({ onSelectItem }: SelectableAssetListProps) =
 };
 
 export const SelectableNetworkList = ({ onSelectItem }: SelectableAssetListProps) => (
-    <VStack spacing="large">
+    <VStack spacing="sp24">
         <NetworkItemSection
             title="Select a coin to sync"
             networks={portfolioTrackerMainnets}
diff --git a/suite-native/module-accounts-import/src/components/XpubHint.tsx b/suite-native/module-accounts-import/src/components/XpubHint.tsx
index 33d64955d44..c3a6e0ba00c 100644
--- a/suite-native/module-accounts-import/src/components/XpubHint.tsx
+++ b/suite-native/module-accounts-import/src/components/XpubHint.tsx
@@ -15,7 +15,7 @@ const sheetTriggerStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: utils.spacings.large,
+    paddingVertical: utils.spacings.sp24,
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
     borderTopWidth: utils.borders.widths.small,
     borderTopColor: utils.colors.borderElevation1,
diff --git a/suite-native/module-accounts-import/src/components/XpubHintBottomSheet.tsx b/suite-native/module-accounts-import/src/components/XpubHintBottomSheet.tsx
index 79dbdd08378..eff5dba48f1 100644
--- a/suite-native/module-accounts-import/src/components/XpubHintBottomSheet.tsx
+++ b/suite-native/module-accounts-import/src/components/XpubHintBottomSheet.tsx
@@ -33,9 +33,9 @@ export const XpubHintBottomSheet = ({
 
     return (
         <BottomSheet title={title} isVisible={isVisible} onClose={handleClose}>
-            <Box paddingTop="small" justifyContent="space-between">
+            <Box paddingTop="sp8" justifyContent="space-between">
                 <Video name={video} aspectRatio={1} />
-                <VStack spacing="large" paddingTop="large">
+                <VStack spacing="sp24" paddingTop="sp24">
                     <Text color="textSubdued" textAlign="center" variant="hint">
                         <Translation
                             id={textTranslationTag}
@@ -49,7 +49,7 @@ export const XpubHintBottomSheet = ({
                         />
                     </Text>
                 </VStack>
-                <Box marginTop="extraLarge">
+                <Box marginTop="sp32">
                     <Button
                         data-testID="@accounts-import/xpub-help-modal/confirm-btn"
                         onPress={handleClose}
diff --git a/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx b/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
index 23a89a08e95..e1a3986aaa5 100644
--- a/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
+++ b/suite-native/module-accounts-import/src/screens/XpubScanScreen.tsx
@@ -189,7 +189,7 @@ export const XpubScanScreen = ({
             >
                 <SelectableNetworkItem symbol={networkSymbol} />
             </HeaderedCard>
-            <VStack spacing="medium" marginHorizontal="medium">
+            <VStack spacing="sp16" marginHorizontal="sp16">
                 <View style={applyStyle(cameraStyle)}>
                     <XpubImportSection
                         onRequestCamera={handleToggleScanner}
@@ -203,7 +203,7 @@ export const XpubScanScreen = ({
                     textColor="textSubdued"
                 />
                 <Form form={form}>
-                    <VStack spacing="medium">
+                    <VStack spacing="sp16">
                         <TextInputField
                             testID="@accounts-import/sync-coins/xpub-input"
                             name="xpubAddress"
diff --git a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx
index da4f13c136d..87e363aee36 100644
--- a/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx
+++ b/suite-native/module-accounts-management/src/components/AccountDetailCryptoValue.tsx
@@ -22,7 +22,7 @@ export const AccountDetailCryptoValue = memo(
         tokenAddress,
         isBalance = true,
     }: AccountDetailBalanceProps) => (
-        <HStack spacing="small" flexDirection="row" alignItems="center" justifyContent="center">
+        <HStack spacing="sp8" flexDirection="row" alignItems="center" justifyContent="center">
             <CryptoIcon symbol={tokenAddress || networkSymbol} size="extraSmall" />
 
             {tokenSymbol ? (
diff --git a/suite-native/module-accounts-management/src/components/AccountDetailGraph.tsx b/suite-native/module-accounts-management/src/components/AccountDetailGraph.tsx
index 389c985f6a0..6d485fa08be 100644
--- a/suite-native/module-accounts-management/src/components/AccountDetailGraph.tsx
+++ b/suite-native/module-accounts-management/src/components/AccountDetailGraph.tsx
@@ -44,7 +44,7 @@ export const AccountDetailGraph = ({ accountKey, tokenContract }: AccountDetailG
     useEffect(setInitialSelectedPoints, [setInitialSelectedPoints]);
 
     return (
-        <VStack spacing="large">
+        <VStack spacing="sp24">
             <AccountDetailGraphHeader accountKey={accountKey} tokenAddress={tokenContract} />
 
             <Graph<FiatGraphPointWithCryptoBalance>
diff --git a/suite-native/module-accounts-management/src/components/AccountDetailGraphHeader.tsx b/suite-native/module-accounts-management/src/components/AccountDetailGraphHeader.tsx
index 6e7750d172a..68ca4fa0248 100644
--- a/suite-native/module-accounts-management/src/components/AccountDetailGraphHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/AccountDetailGraphHeader.tsx
@@ -62,7 +62,7 @@ export const AccountDetailGraphHeader = ({ accountKey, tokenAddress }: AccountBa
     if (!account) return null;
 
     return (
-        <VStack spacing="extraSmall" alignItems="center">
+        <VStack spacing="sp4" alignItems="center">
             <CryptoBalance
                 accountSymbol={account.symbol}
                 tokenSymbol={tokenSymbol}
diff --git a/suite-native/module-accounts-management/src/components/AccountRenameForm.tsx b/suite-native/module-accounts-management/src/components/AccountRenameForm.tsx
index 0244b870503..65e47ff9d66 100644
--- a/suite-native/module-accounts-management/src/components/AccountRenameForm.tsx
+++ b/suite-native/module-accounts-management/src/components/AccountRenameForm.tsx
@@ -31,7 +31,7 @@ const AccountLabelFieldHint = ({ formControl }: AccountLabelFieldHintProps) => {
     const { accountLabel } = useWatch({ control: formControl });
 
     return (
-        <Box paddingLeft="small">
+        <Box paddingLeft="sp8">
             <Text variant="label" color="textSubdued">
                 {accountLabel ? accountLabel.length : 0} / {MAX_ACCOUNT_LABEL_LENGTH} letters
             </Text>
@@ -76,9 +76,9 @@ export const AccountRenameForm = ({ accountKey, onSubmit }: AccountRenameFormPro
     });
 
     return (
-        <Box marginTop="medium">
+        <Box marginTop="sp16">
             <Form form={form}>
-                <VStack spacing="small">
+                <VStack spacing="sp8">
                     <TextInputField
                         ref={inputRef}
                         name="accountLabel"
diff --git a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
index 9d88ab2036c..909a12b1e37 100644
--- a/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
+++ b/suite-native/module-accounts-management/src/components/CoinPriceCard.tsx
@@ -21,7 +21,7 @@ const cardStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItem: 'center',
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.medium,
 }));
@@ -36,7 +36,7 @@ const indicatorContainer = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     alignItems: 'center',
     justifyContent: 'flex-start',
-    marginTop: utils.spacings.small / 4,
+    marginTop: utils.spacings.sp8 / 4,
 }));
 
 const PriceChangeIndicator = ({ valuePercentageChange }: PriceChangeIndicatorProps) => {
@@ -86,7 +86,7 @@ export const CoinPriceCard = ({ accountKey }: CoinPriceCardProps) => {
     return (
         <Card style={applyStyle(cardStyle)}>
             <Box flexDirection="row" alignItems="center" flex={1}>
-                <Box marginRight="medium">
+                <Box marginRight="sp16">
                     <RoundedIcon name={networkSymbol} />
                 </Box>
                 <Box style={applyStyle(cardContentStyle)}>
diff --git a/suite-native/module-accounts-management/src/components/IncludeTokensToggle.tsx b/suite-native/module-accounts-management/src/components/IncludeTokensToggle.tsx
index a81a53225ae..a0ca34467df 100644
--- a/suite-native/module-accounts-management/src/components/IncludeTokensToggle.tsx
+++ b/suite-native/module-accounts-management/src/components/IncludeTokensToggle.tsx
@@ -8,8 +8,8 @@ type IncludeTokensToggleProps = {
 };
 
 export const IncludeTokensToggle = ({ isToggled, onToggle }: IncludeTokensToggleProps) => (
-    <VStack spacing="large" marginTop="small">
-        <Box marginHorizontal="large">
+    <VStack spacing="sp24" marginTop="sp8">
+        <Box marginHorizontal="sp24">
             <Toggle
                 leftLabel="Ethereum"
                 rightLabel="Include tokens"
@@ -19,7 +19,7 @@ export const IncludeTokensToggle = ({ isToggled, onToggle }: IncludeTokensToggle
         </Box>
         {isToggled && (
             <Animated.View entering={FadeIn}>
-                <Box marginHorizontal="small">
+                <Box marginHorizontal="sp8">
                     <AlertBox
                         variant="info"
                         title="Note, your Ethereum balance doesn’t include tokens."
diff --git a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx
index 95a3839a82e..6b95c039ccb 100644
--- a/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/TokenAccountDetailScreenSubHeader.tsx
@@ -36,7 +36,7 @@ export const TokenAccountDetailScreenSubHeader = ({
                     <Text ellipsizeMode="tail" numberOfLines={1}>
                         {tokenName}
                     </Text>
-                    <HStack spacing="extraSmall" alignItems="center">
+                    <HStack spacing="sp4" alignItems="center">
                         <CryptoIcon symbol="eth" size="extraSmall" />
                         <Text
                             variant="label"
diff --git a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
index 8c97f371f47..64fbf734d4b 100644
--- a/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
+++ b/suite-native/module-accounts-management/src/components/TransactionListHeader.tsx
@@ -141,14 +141,14 @@ export const TransactionListHeader = memo(
             !isPortfolioTrackerDevice;
 
         return (
-            <Box marginBottom="small">
-                <VStack spacing="large">
+            <Box marginBottom="sp8">
+                <VStack spacing="sp24">
                     <TransactionListHeaderContent
                         accountKey={accountKey}
                         tokenContract={tokenContract}
                     />
                     {accountHasTransactions && (
-                        <HStack marginVertical="medium" paddingHorizontal="medium" flex={1}>
+                        <HStack marginVertical="sp16" paddingHorizontal="sp16" flex={1}>
                             <Box flex={1}>
                                 <Button viewLeft="receive" size="large" onPress={handleReceive}>
                                     <Translation id="transactions.receive" />
@@ -164,7 +164,7 @@ export const TransactionListHeader = memo(
                         </HStack>
                     )}
                     {isPriceCardDisplayed && (
-                        <Box marginBottom={accountHasTransactions ? undefined : 'medium'}>
+                        <Box marginBottom={accountHasTransactions ? undefined : 'sp16'}>
                             <CoinPriceCard accountKey={accountKey} />
                         </Box>
                     )}
@@ -172,7 +172,7 @@ export const TransactionListHeader = memo(
                     {accountHasTransactions && (
                         <>
                             <Divider />
-                            <Box marginVertical="small" marginHorizontal="large">
+                            <Box marginVertical="sp8" marginHorizontal="sp24">
                                 <Text variant="titleSmall">
                                     <Translation id="transactions.title" />
                                 </Text>
diff --git a/suite-native/module-accounts-management/src/screens/AccountDetailLoadingScreen.tsx b/suite-native/module-accounts-management/src/screens/AccountDetailLoadingScreen.tsx
index 7e52b73b527..91deed10493 100644
--- a/suite-native/module-accounts-management/src/screens/AccountDetailLoadingScreen.tsx
+++ b/suite-native/module-accounts-management/src/screens/AccountDetailLoadingScreen.tsx
@@ -15,7 +15,7 @@ import { BoxSkeleton, Card, VStack } from '@suite-native/atoms';
 const SCREEN_WIDTH = Dimensions.get('window').width;
 
 const cardStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.small,
+    padding: utils.spacings.sp8,
 }));
 
 export const AccountDetailLoadingScreen = () => {
@@ -29,12 +29,12 @@ export const AccountDetailLoadingScreen = () => {
                 <ScreenSubHeader leftIcon={<GoBackIcon closeActionType={closeActionType} />} />
             }
         >
-            <VStack spacing="extraLarge" alignItems="center">
+            <VStack spacing="sp32" alignItems="center">
                 <Card style={applyStyle(cardStyle)}>
                     <BoxSkeleton width={SCREEN_WIDTH - 32} height={70} />
                 </Card>
                 <Card style={applyStyle(cardStyle)}>
-                    <VStack spacing="large" alignItems="center" paddingHorizontal="large">
+                    <VStack spacing="sp24" alignItems="center" paddingHorizontal="sp24">
                         <BoxSkeleton width={104} height={104} borderRadius={52} />
                         <BoxSkeleton width={160} height={30} />
                         <BoxSkeleton width={200} height={24} />
diff --git a/suite-native/module-accounts-management/src/screens/AccountSettingsScreen.tsx b/suite-native/module-accounts-management/src/screens/AccountSettingsScreen.tsx
index 94b3a9becfd..9e84310708a 100644
--- a/suite-native/module-accounts-management/src/screens/AccountSettingsScreen.tsx
+++ b/suite-native/module-accounts-management/src/screens/AccountSettingsScreen.tsx
@@ -25,7 +25,7 @@ import { AccountSettingsRemoveCoinButton } from '../components/AccountSettingsRe
 
 const AccountDetailSettingsRow = ({ title, children }: { title: string; children: ReactNode }) => (
     <Box
-        paddingVertical="small"
+        paddingVertical="sp8"
         flexDirection="row"
         alignItems="center"
         justifyContent="space-between"
@@ -38,7 +38,7 @@ const AccountDetailSettingsRow = ({ title, children }: { title: string; children
 );
 
 const CryptoNameWithIcon = ({ symbol }: { symbol: NetworkSymbol }) => (
-    <HStack spacing="small" flexDirection="row" alignItems="center" justifyContent="flex-end">
+    <HStack spacing="sp8" flexDirection="row" alignItems="center" justifyContent="flex-end">
         <Text variant="hint">{networks[symbol].name}</Text>
         <CryptoIcon symbol={symbol} size="extraSmall" />
     </HStack>
@@ -76,7 +76,7 @@ export const AccountSettingsScreen = ({
         >
             <Box flex={1} justifyContent="space-between">
                 <Card>
-                    <VStack spacing="extraSmall">
+                    <VStack spacing="sp4">
                         <AccountDetailSettingsRow title="Coin">
                             <CryptoNameWithIcon symbol={account.symbol} />
                         </AccountDetailSettingsRow>
@@ -87,7 +87,7 @@ export const AccountSettingsScreen = ({
                         )}
                     </VStack>
                 </Card>
-                <VStack marginHorizontal="medium" spacing="medium">
+                <VStack marginHorizontal="sp16" spacing="sp16">
                     <AccountSettingsShowXpubButton accountKey={account.key} />
                     {isPortfolioTrackerDevice && (
                         <AccountSettingsRemoveCoinButton accountKey={account.key} />
diff --git a/suite-native/module-add-accounts/src/components/AccountTypeDecisionBottomSheet.tsx b/suite-native/module-add-accounts/src/components/AccountTypeDecisionBottomSheet.tsx
index eeb3f3b428c..34a0e09cd8a 100644
--- a/suite-native/module-add-accounts/src/components/AccountTypeDecisionBottomSheet.tsx
+++ b/suite-native/module-add-accounts/src/components/AccountTypeDecisionBottomSheet.tsx
@@ -7,7 +7,7 @@ const ACCOUNT_TYPES_URL = 'https://trezor.io/learn/a/multiple-accounts-in-trezor
 
 const descStyle = prepareNativeStyle(utils => ({
     alignSelf: 'center',
-    paddingBottom: utils.spacings.small,
+    paddingBottom: utils.spacings.sp8,
 }));
 
 type AccountTypeDecisionBottomSheetProps = {
@@ -43,7 +43,7 @@ export const AccountTypeDecisionBottomSheet = ({
             onClose={onClose}
             isCloseDisplayed={false}
         >
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <Text color="textSubdued" style={applyStyle(descStyle)}>
                     <Translation
                         id="moduleAddAccounts.accountTypeDecisionBottomSheet.description"
diff --git a/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx b/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx
index 3926cf69c8c..307ff51a208 100644
--- a/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx
+++ b/suite-native/module-add-accounts/src/screens/AddCoinAccountScreen.tsx
@@ -56,7 +56,7 @@ export const AddCoinAccountScreen = ({
             }
         >
             <Card>
-                <VStack spacing="large">
+                <VStack spacing="sp24">
                     {supportedNetworkSymbols.map(networkSymbol => (
                         <SelectableNetworkItem
                             key={networkSymbol}
diff --git a/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryFinishedScreen.tsx b/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryFinishedScreen.tsx
index 30689537ea9..f3275e46af7 100644
--- a/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryFinishedScreen.tsx
+++ b/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryFinishedScreen.tsx
@@ -72,7 +72,7 @@ export const AddCoinDiscoveryFinishedScreen = ({ route }) => {
         <Screen
             screenHeader={<ScreenSubHeader leftIcon={<GoBackIcon closeActionType="close" />} />}
         >
-            <Box paddingTop="large" paddingHorizontal="small" paddingBottom="extraLarge">
+            <Box paddingTop="sp24" paddingHorizontal="sp8" paddingBottom="sp32">
                 <Text variant="titleMedium">
                     <Translation
                         id={titleKey}
@@ -96,7 +96,7 @@ export const AddCoinDiscoveryFinishedScreen = ({ route }) => {
                     lineColor="borderElevation0"
                     textColor="textSubdued"
                 />
-                <Box paddingTop="small" paddingHorizontal="medium">
+                <Box paddingTop="sp8" paddingHorizontal="sp16">
                     <Button
                         colorScheme="tertiaryElevation0"
                         onPress={handleAddAccount}
diff --git a/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryRunningScreen.tsx b/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryRunningScreen.tsx
index 3bb1ef5a831..6a22ff0beae 100644
--- a/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryRunningScreen.tsx
+++ b/suite-native/module-add-accounts/src/screens/AddCoinDiscoveryRunningScreen.tsx
@@ -89,9 +89,9 @@ export const AddCoinDiscoveryRunningScreen = ({ route }) => {
 
     return (
         <Screen>
-            <VStack flex={1} justifyContent="center" alignItems="center" spacing="extraLarge">
+            <VStack flex={1} justifyContent="center" alignItems="center" spacing="sp32">
                 <Spinner loadingState={loadingResult} onComplete={handleFinish} />
-                <VStack spacing="extraSmall">
+                <VStack spacing="sp4">
                     <Text variant="titleSmall" textAlign="center">
                         <Translation
                             id="moduleAddAccounts.coinDiscoveryRunningScreen.title"
diff --git a/suite-native/module-add-accounts/src/screens/SelectAccountTypeScreen.tsx b/suite-native/module-add-accounts/src/screens/SelectAccountTypeScreen.tsx
index 9de8641adab..538d967c78b 100644
--- a/suite-native/module-add-accounts/src/screens/SelectAccountTypeScreen.tsx
+++ b/suite-native/module-add-accounts/src/screens/SelectAccountTypeScreen.tsx
@@ -35,7 +35,7 @@ const EXTRA_BOTTOM_PADDING = 48;
 const ACCOUNT_TYPES_URL = 'https://trezor.io/learn/a/multiple-accounts-in-trezor-suite';
 
 const bulletsForKeyPath = (keyPath: TxKeyPath) => (
-    <Box paddingLeft="small">
+    <Box paddingLeft="sp8">
         <Translation
             id={keyPath}
             values={{
@@ -54,7 +54,7 @@ const bulletsForKeyPath = (keyPath: TxKeyPath) => (
 );
 
 const itemsStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.extraSmall,
+    paddingHorizontal: utils.spacings.sp4,
 }));
 
 const bottomWrapperStyle = prepareNativeStyle((_, { bottomInset }: { bottomInset: number }) => ({
@@ -70,15 +70,15 @@ const gradientStyle = prepareNativeStyle(_ => ({
 }));
 
 const buttonWrapperStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
 }));
 
 const aboutStyle = prepareNativeStyle((utils, { bottomInset }: { bottomInset: number }) => ({
-    paddingTop: utils.spacings.extraLarge,
+    paddingTop: utils.spacings.sp32,
     paddingBottom: EXTRA_BOTTOM_PADDING + GRADIENT_HEIGHT + bottomInset,
     width: '100%',
-    paddingHorizontal: utils.spacings.small,
+    paddingHorizontal: utils.spacings.sp8,
     gap: 12,
 }));
 
@@ -125,7 +125,7 @@ export const SelectAccountTypeScreen = ({
                     />
                 }
             >
-                <VStack spacing="large" style={applyStyle(itemsStyle)}>
+                <VStack spacing="sp24" style={applyStyle(itemsStyle)}>
                     {types.map(item => {
                         const { titleKey, subtitleKey, descKey } = accountTypeTranslationKeys[item];
 
diff --git a/suite-native/module-authorize-device/src/components/connect/ConnectingTrezorHelp.tsx b/suite-native/module-authorize-device/src/components/connect/ConnectingTrezorHelp.tsx
index 324615aa3d3..966f65a8832 100644
--- a/suite-native/module-authorize-device/src/components/connect/ConnectingTrezorHelp.tsx
+++ b/suite-native/module-authorize-device/src/components/connect/ConnectingTrezorHelp.tsx
@@ -48,7 +48,7 @@ export const ConnectingTrezorHelp = () => {
                 subtitle={modalSubtitle}
                 onClose={toggleBottomSheet}
             >
-                <VStack padding="small">
+                <VStack padding="sp8">
                     {hasDeviceRequestedPin ? (
                         <Text>
                             <Translation
diff --git a/suite-native/module-authorize-device/src/components/connect/PinForm.tsx b/suite-native/module-authorize-device/src/components/connect/PinForm.tsx
index 9511ad86786..c05767e4429 100644
--- a/suite-native/module-authorize-device/src/components/connect/PinForm.tsx
+++ b/suite-native/module-authorize-device/src/components/connect/PinForm.tsx
@@ -17,12 +17,12 @@ const pinMatrix = [
 const MATRIX_MARGIN = 40;
 
 const cardStyle = prepareNativeStyle(utils => ({
-    marginBottom: utils.spacings.small,
+    marginBottom: utils.spacings.sp8,
     padding: MATRIX_MARGIN,
 }));
 
 const pinProgressWrapperStyle = prepareNativeStyle(utils => ({
-    height: utils.spacings.extraLarge,
+    height: utils.spacings.sp32,
     justifyContent: 'center',
 }));
 
@@ -31,7 +31,7 @@ const loaderWrapperStyle = prepareNativeStyle(utils => ({
     width: '100%',
     height: '100%',
     margin: MATRIX_MARGIN,
-    paddingBottom: utils.spacings.extraLarge,
+    paddingBottom: utils.spacings.sp32,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
@@ -49,7 +49,7 @@ export const PinForm = () => {
 
     return (
         <Form form={form}>
-            <VStack spacing="small" alignItems="center">
+            <VStack spacing="sp8" alignItems="center">
                 <Text color="textSubdued">
                     <Translation id="moduleConnectDevice.pinScreen.form.keypadInfo" />
                 </Text>
@@ -58,9 +58,9 @@ export const PinForm = () => {
                 </Box>
             </VStack>
             <Card style={applyStyle(cardStyle)}>
-                <VStack justifyContent="center" alignItems="center" spacing="large">
+                <VStack justifyContent="center" alignItems="center" spacing="sp24">
                     {pinMatrix.map(pinRow => (
-                        <HStack key={pinRow.join('')} spacing="medium">
+                        <HStack key={pinRow.join('')} spacing="sp16">
                             {pinRow.map(value => (
                                 <PinMatrixButton key={value} value={value} />
                             ))}
@@ -69,7 +69,7 @@ export const PinForm = () => {
                 </VStack>
                 <PinFormControlButtons />
                 {form.formState.isSubmitted && (
-                    <VStack style={applyStyle(loaderWrapperStyle)} spacing="medium">
+                    <VStack style={applyStyle(loaderWrapperStyle)} spacing="sp16">
                         <Loader size="large" />
                         <Text variant="titleSmall">
                             <Translation id="moduleConnectDevice.pinScreen.form.submitting" />
diff --git a/suite-native/module-authorize-device/src/components/connect/PinFormControlButtons.tsx b/suite-native/module-authorize-device/src/components/connect/PinFormControlButtons.tsx
index 65cce0ceed0..c5e1f41201f 100644
--- a/suite-native/module-authorize-device/src/components/connect/PinFormControlButtons.tsx
+++ b/suite-native/module-authorize-device/src/components/connect/PinFormControlButtons.tsx
@@ -38,7 +38,7 @@ type NavigationProp = StackToStackCompositeNavigationProps<
 const buttonsWrapperStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
     width: '100%',
-    paddingTop: utils.spacings.large,
+    paddingTop: utils.spacings.sp24,
 }));
 
 const ANIMATION_DURATION = 100;
@@ -154,7 +154,7 @@ export const PinFormControlButtons = () => {
                     exiting={FadeOut}
                     style={applyStyle(buttonsWrapperStyle)}
                 >
-                    <HStack spacing="medium" onLayout={handleOnLayout} paddingBottom="large">
+                    <HStack spacing="sp16" onLayout={handleOnLayout} paddingBottom="sp24">
                         <IconButton
                             onPress={handleDelete}
                             iconName="backspace"
diff --git a/suite-native/module-authorize-device/src/components/connect/PinFormProgress.tsx b/suite-native/module-authorize-device/src/components/connect/PinFormProgress.tsx
index 32f848780eb..5baf6f926ef 100644
--- a/suite-native/module-authorize-device/src/components/connect/PinFormProgress.tsx
+++ b/suite-native/module-authorize-device/src/components/connect/PinFormProgress.tsx
@@ -9,8 +9,8 @@ const dotStyle = prepareNativeStyle<{ isSubmitted: boolean }>((utils, { isSubmit
     const color = isSubmitted ? utils.colors.textDisabled : utils.colors.textDefault;
 
     return {
-        width: utils.spacings.small,
-        height: utils.spacings.small,
+        width: utils.spacings.sp8,
+        height: utils.spacings.sp8,
         borderRadius: utils.borders.radii.round,
         borderColor: color,
         borderWidth: utils.borders.widths.small,
@@ -22,7 +22,7 @@ const enteredDigitsStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.round,
     backgroundColor: utils.colors.backgroundSurfaceElevation0,
     borderColor: utils.colors.borderElevation1,
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const PinFormProgress = () => {
diff --git a/suite-native/module-authorize-device/src/components/connect/PinOnDevice.tsx b/suite-native/module-authorize-device/src/components/connect/PinOnDevice.tsx
index ab6e7bd3bbb..50092edef5b 100644
--- a/suite-native/module-authorize-device/src/components/connect/PinOnDevice.tsx
+++ b/suite-native/module-authorize-device/src/components/connect/PinOnDevice.tsx
@@ -30,7 +30,7 @@ const wrapperStyle = prepareNativeStyle(utils => ({
     flex: 1,
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingTop: utils.spacings.large,
+    paddingTop: utils.spacings.sp24,
 }));
 const imageStyle = prepareNativeStyle(_ => ({
     maxHeight: SCREEN_HEIGHT * 0.6,
diff --git a/suite-native/module-authorize-device/src/components/passphrase/EmptyWalletInfoSheet.tsx b/suite-native/module-authorize-device/src/components/passphrase/EmptyWalletInfoSheet.tsx
index 599114639e7..7674cc4ac1e 100644
--- a/suite-native/module-authorize-device/src/components/passphrase/EmptyWalletInfoSheet.tsx
+++ b/suite-native/module-authorize-device/src/components/passphrase/EmptyWalletInfoSheet.tsx
@@ -25,13 +25,13 @@ type EmptyWalletInfoSheetProps = {
 };
 
 const bottomSheetStyle = prepareNativeStyle(utils => ({
-    gap: utils.spacings.large,
-    paddingTop: utils.spacings.small,
+    gap: utils.spacings.sp24,
+    paddingTop: utils.spacings.sp8,
 }));
 
 const bottomSheetBottomStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
-    gap: utils.spacings.large,
+    gap: utils.spacings.sp24,
     padding: 0,
 }));
 
@@ -68,7 +68,7 @@ export const EmptyWalletInfoSheet = ({ onClose, isVisible }: EmptyWalletInfoShee
                     <Translation id="modulePassphrase.emptyPassphraseWallet.confirmEmptyWalletSheet.title" />
                 }
             />
-            <VStack alignItems="center" spacing="large" padding="small">
+            <VStack alignItems="center" spacing="sp24" padding="sp8">
                 <BottomSheetListItem
                     iconName="pencilUnderscored"
                     translationKey="modulePassphrase.emptyPassphraseWallet.confirmEmptyWalletSheet.list.backup"
diff --git a/suite-native/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx b/suite-native/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx
index ea070c81fff..11154b436a1 100644
--- a/suite-native/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx
+++ b/suite-native/module-authorize-device/src/components/passphrase/PassphraseContentScreenWrapper.tsx
@@ -17,7 +17,7 @@ export const PassphraseContentScreenWrapper = ({
 }: PassphraseContentScreenWrapperProps) => {
     return (
         <PassphraseScreenWrapper>
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <VStack>
                     <Text variant="titleMedium">{title}</Text>
                     {subtitle && <Text>{subtitle}</Text>}
diff --git a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx b/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx
index d2b5c86f46d..9b9eb9e5669 100644
--- a/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx
+++ b/suite-native/module-authorize-device/src/components/passphrase/PassphraseForm.tsx
@@ -45,7 +45,7 @@ type PassphraseFormProps = {
 const formStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
     borderRadius: utils.borders.radii.large,
-    gap: utils.spacings.medium,
+    gap: utils.spacings.sp16,
 }));
 
 const cardStyle = prepareNativeStyle(_ => ({
diff --git a/suite-native/module-authorize-device/src/components/passphrase/PassphraseScreenWrapper.tsx b/suite-native/module-authorize-device/src/components/passphrase/PassphraseScreenWrapper.tsx
index 44cf1409ee5..e671ba8ec1a 100644
--- a/suite-native/module-authorize-device/src/components/passphrase/PassphraseScreenWrapper.tsx
+++ b/suite-native/module-authorize-device/src/components/passphrase/PassphraseScreenWrapper.tsx
@@ -14,7 +14,7 @@ export const PassphraseScreenWrapper = ({ children }: PassphraseScreenWrapperPro
 
     return (
         <Screen
-            customHorizontalPadding={utils.spacings.medium}
+            customHorizontalPadding={utils.spacings.sp16}
             screenHeader={<PassphraseScreenHeader />}
         >
             {children}
diff --git a/suite-native/module-authorize-device/src/screens/connect/ConnectingDeviceScreen.tsx b/suite-native/module-authorize-device/src/screens/connect/ConnectingDeviceScreen.tsx
index 414b8c8e703..10cd5075dfc 100644
--- a/suite-native/module-authorize-device/src/screens/connect/ConnectingDeviceScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/connect/ConnectingDeviceScreen.tsx
@@ -20,13 +20,13 @@ export const ConnectingDeviceScreen = () => {
 
     return (
         <ConnectDeviceScreenView style={applyStyle(screenStyle)} shouldDisplayCancelButton={false}>
-            <VStack spacing="medium" alignItems="center">
+            <VStack spacing="sp16" alignItems="center">
                 <ActivityIndicator size="large" />
                 <Box flexDirection="row" alignItems="center">
                     <Text variant="titleMedium">
                         <Translation id="moduleConnectDevice.connectingDeviceScreen.title" />
                     </Text>
-                    <Box paddingBottom="small" paddingLeft="small">
+                    <Box paddingBottom="sp8" paddingLeft="sp8">
                         <Icon name="trezor" size="extraLarge" />
                     </Box>
                 </Box>
diff --git a/suite-native/module-authorize-device/src/screens/connect/PinScreen.tsx b/suite-native/module-authorize-device/src/screens/connect/PinScreen.tsx
index 9936a78a28c..97900a758a6 100644
--- a/suite-native/module-authorize-device/src/screens/connect/PinScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/connect/PinScreen.tsx
@@ -16,7 +16,7 @@ export const PinScreen = () => {
     return (
         <ConnectDeviceScreenView>
             {deviceModel === DeviceModelInternal.T1B1 ? (
-                <VStack spacing="medium" alignItems="center" flex={1} marginTop="large">
+                <VStack spacing="sp16" alignItems="center" flex={1} marginTop="sp24">
                     <Image source={deviceImageMap[deviceModel]} width={161} height={194} />
                     <PinForm />
                 </VStack>
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseConfirmOnTrezorScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseConfirmOnTrezorScreen.tsx
index 33a2126ffa6..03fac6830a7 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseConfirmOnTrezorScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseConfirmOnTrezorScreen.tsx
@@ -59,11 +59,11 @@ export const PassphraseConfirmOnTrezorScreen = () => {
     return (
         <PassphraseScreenWrapper>
             <VStack
-                spacing="large"
+                spacing="sp24"
                 alignItems="center"
                 justifyContent="center"
                 flex={1}
-                padding="small"
+                padding="sp8"
             >
                 <DeviceT3T1Svg />
                 <CenteredTitleHeader
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 811ae3a128f..ca4a5ad909d 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEmptyWalletScreen.tsx
@@ -78,7 +78,7 @@ export const PassphraseEmptyWalletScreen = () => {
             title={<Translation id="modulePassphrase.emptyPassphraseWallet.title" />}
         >
             <Card style={applyStyle(cardStyle)}>
-                <VStack alignItems="center" spacing="medium" style={applyStyle(cardContentStyle)}>
+                <VStack alignItems="center" spacing="sp16" style={applyStyle(cardContentStyle)}>
                     <QuestionMarks />
                     <Text variant="highlight" textAlign="center">
                         <Translation id="modulePassphrase.emptyPassphraseWallet.confirmCard.description" />
@@ -94,7 +94,7 @@ export const PassphraseEmptyWalletScreen = () => {
                 textColor="textSubdued"
             />
             <VStack spacing={20}>
-                <VStack alignItems="center" spacing="extraSmall">
+                <VStack alignItems="center" spacing="sp4">
                     <Text
                         textAlign="center"
                         variant="highlight"
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEnableOnDeviceScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEnableOnDeviceScreen.tsx
index f041cd6d851..8753090e4a4 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEnableOnDeviceScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseEnableOnDeviceScreen.tsx
@@ -56,7 +56,7 @@ export const PassphraseEnableOnDeviceScreen = () => {
                 </ScreenHeaderWrapper>
             }
         >
-            <VStack flex={1} justifyContent="center" alignItems="center" spacing="medium">
+            <VStack flex={1} justifyContent="center" alignItems="center" spacing="sp16">
                 <DeviceT3T1Svg />
                 <CenteredTitleHeader
                     title={<Translation id="modulePassphrase.enablePassphrase.title" />}
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFeatureUnlockFormScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFeatureUnlockFormScreen.tsx
index 22a60a4fa7a..8105f46ec43 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFeatureUnlockFormScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFeatureUnlockFormScreen.tsx
@@ -33,7 +33,7 @@ export const PassphraseFeatureUnlockFormScreen = () => {
                 </ScreenHeader>
             }
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <Text variant="titleMedium">
                     <Translation id="modulePassphrase.passphraseFeatureUnlock.title" />
                 </Text>
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 ff980236db8..43c07e345d1 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseFormScreen.tsx
@@ -18,7 +18,7 @@ const cardStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.medium,
     borderColor: utils.colors.backgroundAlertBlueSubtleOnElevationNegative,
     borderWidth: utils.borders.widths.small,
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
     flex: 1,
     justifyContent: 'center',
 }));
@@ -81,7 +81,7 @@ export const PassphraseFormScreen = () => {
                 />
             }
         >
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <View
                     style={applyStyle(animationWrapperStyle)}
                     onLayout={(event: LayoutChangeEvent) =>
@@ -90,7 +90,7 @@ export const PassphraseFormScreen = () => {
                 >
                     <Animated.View style={animationStyle}>
                         <Box style={applyStyle(cardStyle)}>
-                            <VStack spacing="medium">
+                            <VStack spacing="sp16">
                                 <VStack spacing={12}>
                                     <HStack>
                                         <View style={applyStyle(warningIconWrapperStyle)}>
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseLoadingScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseLoadingScreen.tsx
index 115500a3ccd..076b8e74728 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseLoadingScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseLoadingScreen.tsx
@@ -55,9 +55,9 @@ export const PassphraseLoadingScreen = () => {
 
     return (
         <PassphraseScreenWrapper>
-            <VStack flex={1} justifyContent="center" alignItems="center" spacing="extraLarge">
+            <VStack flex={1} justifyContent="center" alignItems="center" spacing="sp32">
                 <Spinner loadingState={loadingResult} onComplete={handleSuccess} />
-                <VStack spacing="extraSmall">
+                <VStack spacing="sp4">
                     <Text variant="titleSmall" textAlign="center">
                         <Translation id="modulePassphrase.loading.title" />
                     </Text>
diff --git a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx
index e18d9d91199..52eec30ebf8 100644
--- a/suite-native/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx
+++ b/suite-native/module-authorize-device/src/screens/passphrase/PassphraseVerifyEmptyWalletScreen.tsx
@@ -42,7 +42,7 @@ export const PassphraseVerifyEmptyWalletScreen = () => {
                 <Translation id="modulePassphrase.emptyPassphraseWallet.verifyEmptyWallet.description" />
             }
         >
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <AlertBox
                     variant="warning"
                     title={
diff --git a/suite-native/module-connect-popup/src/components/ButtonRequestsOverlay.tsx b/suite-native/module-connect-popup/src/components/ButtonRequestsOverlay.tsx
index 75e19de3064..b0f72f2cfb0 100644
--- a/suite-native/module-connect-popup/src/components/ButtonRequestsOverlay.tsx
+++ b/suite-native/module-connect-popup/src/components/ButtonRequestsOverlay.tsx
@@ -16,7 +16,7 @@ export const ButtonRequestsOverlay = () => {
     const getButtonRequestComponent = (request: ButtonRequest) => {
         if (request.code === 'ButtonRequest_Address') {
             return (
-                <Box paddingBottom="extraLarge" key={request.code}>
+                <Box paddingBottom="sp32" key={request.code}>
                     <Text variant="body">{(request as any).data.address}</Text>
                 </Box>
             );
@@ -26,13 +26,7 @@ export const ButtonRequestsOverlay = () => {
     };
 
     return (
-        <VStack
-            spacing="large"
-            alignItems="center"
-            justifyContent="center"
-            flex={1}
-            padding="small"
-        >
+        <VStack spacing="sp24" alignItems="center" justifyContent="center" flex={1} padding="sp8">
             {selectedDevice.buttonRequests.map(request => getButtonRequestComponent(request))}
 
             <ConfirmOnTrezorImage
diff --git a/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx b/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx
index 1153a34fb94..0c50d9d6dd3 100644
--- a/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx
+++ b/suite-native/module-connect-popup/src/screens/ConnectPopupScreen.tsx
@@ -103,7 +103,7 @@ export const ConnectPopupScreen = ({
                 }
 
                 return (
-                    <VStack spacing="small" alignItems="center">
+                    <VStack spacing="sp8" alignItems="center">
                         <Text variant="titleSmall">
                             {method.confirmation?.label ?? method.info}
                         </Text>
diff --git a/suite-native/module-dev-utils/src/components/DevCheckBoxListItem.tsx b/suite-native/module-dev-utils/src/components/DevCheckBoxListItem.tsx
index ac3e1e4c0c8..6f827961ae8 100644
--- a/suite-native/module-dev-utils/src/components/DevCheckBoxListItem.tsx
+++ b/suite-native/module-dev-utils/src/components/DevCheckBoxListItem.tsx
@@ -16,7 +16,7 @@ export const DevCheckBoxListItem = ({
             flexDirection="row"
             justifyContent="space-between"
             alignItems="center"
-            paddingVertical="small"
+            paddingVertical="sp8"
         >
             <Text variant="body">{title}</Text>
             <CheckBox isChecked={isChecked} onChange={onPress} />
diff --git a/suite-native/module-dev-utils/src/components/FeatureFlags.tsx b/suite-native/module-dev-utils/src/components/FeatureFlags.tsx
index 53e059e4cef..f1699adc697 100644
--- a/suite-native/module-dev-utils/src/components/FeatureFlags.tsx
+++ b/suite-native/module-dev-utils/src/components/FeatureFlags.tsx
@@ -22,7 +22,7 @@ const FeatureFlag = ({ featureFlag }: { featureFlag: FeatureFlagEnum }) => {
 
 export const FeatureFlags = () => (
     <Card>
-        <VStack spacing="small">
+        <VStack spacing="sp8">
             <Text variant="titleSmall">Feature Flags</Text>
             <VStack>
                 {Object.values(FeatureFlagEnum).map(featureFlag => (
diff --git a/suite-native/module-dev-utils/src/components/MessageSystemInfo.tsx b/suite-native/module-dev-utils/src/components/MessageSystemInfo.tsx
index 3d692399821..6ef0690281a 100644
--- a/suite-native/module-dev-utils/src/components/MessageSystemInfo.tsx
+++ b/suite-native/module-dev-utils/src/components/MessageSystemInfo.tsx
@@ -24,9 +24,9 @@ export const MessageSystemInfo = () => {
 
     return (
         <Card>
-            <VStack paddingTop="medium">
+            <VStack paddingTop="sp16">
                 <Text variant="highlight">Message system</Text>
-                <VStack spacing="small" paddingBottom="medium">
+                <VStack spacing="sp8" paddingBottom="sp16">
                     <Text variant="label">Codesign Build: {isCodesigned.toString()}</Text>
                     <Text variant="label">ConfigUrl: {remoteConfigUrl}</Text>
                     <Text variant="label">Sequence: {config?.sequence}</Text>
@@ -40,7 +40,7 @@ export const MessageSystemInfo = () => {
                     </Button>
                 </VStack>
                 <Text variant="highlight">Valid messages:</Text>
-                <VStack spacing="small">
+                <VStack spacing="sp8">
                     <Divider />
                     {allValidMessages.map(m => (
                         <VStack key={m.id}>
diff --git a/suite-native/module-dev-utils/src/components/TestnetsToggle.tsx b/suite-native/module-dev-utils/src/components/TestnetsToggle.tsx
index c1d978624cc..e5a3236a7a4 100644
--- a/suite-native/module-dev-utils/src/components/TestnetsToggle.tsx
+++ b/suite-native/module-dev-utils/src/components/TestnetsToggle.tsx
@@ -13,7 +13,7 @@ export const TestnetsToggle = () => {
     };
 
     return (
-        <HStack flexDirection="row" alignItems="center" spacing="large">
+        <HStack flexDirection="row" alignItems="center" spacing="sp24">
             <Box flexShrink={1}>
                 <Text>Testnet coins & features</Text>
                 <Text variant="hint" color="textSubdued">
diff --git a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx
index acb98be15b3..3a76688d646 100644
--- a/suite-native/module-dev-utils/src/screens/DemoScreen.tsx
+++ b/suite-native/module-dev-utils/src/screens/DemoScreen.tsx
@@ -36,7 +36,7 @@ import { TypographyStyle } from '@trezor/theme';
 
 const inputStackStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.medium,
-    padding: utils.spacings.small,
+    padding: utils.spacings.sp8,
 }));
 
 const textVariants: TypographyStyle[] = [
@@ -99,7 +99,7 @@ export const DemoScreen = () => {
 
     return (
         <Screen screenHeader={<ScreenSubHeader />}>
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <VStack>
                     <Text variant="titleSmall">Badge:</Text>
                     <HStack justifyContent="center" style={applyStyle(flexWrapStyle)}>
@@ -233,8 +233,8 @@ export const DemoScreen = () => {
                 <Divider />
                 <Box>
                     <SearchInput onChange={() => {}} placeholder="Type here.." />
-                    <Box marginVertical="medium">
-                        <VStack style={applyStyle(inputStackStyle)} spacing="small">
+                    <Box marginVertical="sp16">
+                        <VStack style={applyStyle(inputStackStyle)} spacing="sp8">
                             <InputWrapper label="Recipient">
                                 <Input
                                     ref={demoInputRef}
@@ -254,8 +254,8 @@ export const DemoScreen = () => {
                             </InputWrapper>
                         </VStack>
                     </Box>
-                    <Box marginVertical="medium">
-                        <VStack style={applyStyle(inputStackStyle)} spacing="small">
+                    <Box marginVertical="sp16">
+                        <VStack style={applyStyle(inputStackStyle)} spacing="sp8">
                             <InputWrapper hint="This input is not valid.">
                                 <Input
                                     value={input2Text}
@@ -266,7 +266,7 @@ export const DemoScreen = () => {
                             </InputWrapper>
                         </VStack>
                     </Box>
-                    <Box marginTop="large">
+                    <Box marginTop="sp24">
                         <Text variant="titleLarge">Title Large</Text>
                     </Box>
                     <Box>
@@ -281,16 +281,16 @@ export const DemoScreen = () => {
                         onChange={() => setIsSwitch2Active(!isSwitch2Active)}
                         isDisabled
                     />
-                    <Box marginVertical="medium">
+                    <Box marginVertical="sp16">
                         <Text>Icon:</Text>
                         <Icon name="warningCircle" size="large" />
                     </Box>
-                    <Box marginVertical="medium">
+                    <Box marginVertical="sp16">
                         <Text>Hints:</Text>
                         <Hint>Hned to mažem</Hint>
                         <Hint variant="error">Please enter a valid address dumbo</Hint>
                     </Box>
-                    <Box marginVertical="medium">
+                    <Box marginVertical="sp16">
                         <Text>Radio:</Text>
                         <Box flexDirection="row" justifyContent="space-between">
                             <Radio
@@ -309,7 +309,7 @@ export const DemoScreen = () => {
                             />
                         </Box>
                     </Box>
-                    <Box marginVertical="medium">
+                    <Box marginVertical="sp16">
                         <Text>Checkbox:</Text>
                         <Box flexDirection="row" justifyContent="space-between">
                             <CheckBox
@@ -333,9 +333,9 @@ export const DemoScreen = () => {
                         </Box>
                     </Box>
                     <NumPadButton value={2} onPress={() => null} />
-                    <Box marginTop="medium" marginBottom="medium">
+                    <Box marginTop="sp16" marginBottom="sp16">
                         <Text>AlertBox:</Text>
-                        <VStack spacing="medium">
+                        <VStack spacing="sp16">
                             <AlertBox variant="info" title="Info" />
                             <AlertBox variant="success" title="Success" />
                             <AlertBox variant="error" title="Error" />
@@ -359,7 +359,7 @@ export const DemoScreen = () => {
                             />
                         </VStack>
                     </Box>
-                    <VStack marginTop="medium">
+                    <VStack marginTop="sp16">
                         <Text variant="titleMedium">Skeleton</Text>
                         <Card>
                             <ListItemSkeleton />
diff --git a/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx b/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
index 019d955e035..c051fd63f35 100644
--- a/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
+++ b/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
@@ -27,7 +27,7 @@ export const DevUtilsScreen = ({
         <Screen screenHeader={<ScreenSubHeader content="DEV utils" />}>
             <VStack>
                 <Card>
-                    <VStack spacing="medium">
+                    <VStack spacing="sp16">
                         <TitleHeader
                             title="Build version"
                             subtitle={`${getEnv()}-${getSuiteVersion()}, commit ${getCommitHash() || 'N/A in debug build'}`}
diff --git a/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx b/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx
index 207388f8470..dbb7a53a586 100644
--- a/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx
@@ -42,7 +42,7 @@ export const HomeScreen = () => {
             customHorizontalPadding={0}
         >
             {isEmptyHomeRendererShown ? (
-                <Box marginHorizontal="small">
+                <Box marginHorizontal="sp8">
                     <EmptyHomeRenderer />
                 </Box>
             ) : (
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx b/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx
index d118a12f159..05d1dcbeddc 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/BiometricsBottomSheet.tsx
@@ -25,17 +25,17 @@ const cardStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
     borderRadius: utils.borders.radii.medium,
     backgroundColor: utils.colors.backgroundSurfaceElevation1,
-    padding: utils.spacings.large,
-    marginBottom: utils.spacings.large,
-    gap: utils.spacings.large,
+    padding: utils.spacings.sp24,
+    marginBottom: utils.spacings.sp24,
+    gap: utils.spacings.sp24,
 }));
 const textContentStyle = prepareNativeStyle(utils => ({
-    gap: utils.spacings.small,
+    gap: utils.spacings.sp8,
 }));
 
 const buttonWrapperStyle = prepareNativeStyle(utils => ({
-    gap: utils.spacings.medium,
-    paddingHorizontal: utils.spacings.small,
+    gap: utils.spacings.sp16,
+    paddingHorizontal: utils.spacings.sp8,
 }));
 
 export const BiometricsBottomSheet = () => {
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/EmptyConnectedDeviceState.tsx b/suite-native/module-home/src/screens/HomeScreen/components/EmptyConnectedDeviceState.tsx
index d3e9700089e..2bb7c10b9b2 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/EmptyConnectedDeviceState.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/EmptyConnectedDeviceState.tsx
@@ -14,8 +14,8 @@ const cardStyle = prepareNativeStyle(utils => ({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: utils.spacings.extraLarge,
-    paddingHorizontal: utils.spacings.large,
+    paddingVertical: utils.spacings.sp32,
+    paddingHorizontal: utils.spacings.sp24,
 }));
 
 const contentStyle = prepareNativeStyle(_ => ({
@@ -38,7 +38,7 @@ export const EmptyConnectedDeviceState = () => {
 
     return (
         <Card style={applyStyle(cardStyle)}>
-            <VStack spacing="large" style={applyStyle(contentStyle)}>
+            <VStack spacing="sp24" style={applyStyle(contentStyle)}>
                 <PictogramTitleHeader
                     variant="green"
                     size="large"
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioCrossroads.tsx b/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioCrossroads.tsx
index 5e9204432af..09615dd7729 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioCrossroads.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioCrossroads.tsx
@@ -21,9 +21,9 @@ import { ConnectTrezorSvg } from '../../../assets/ConnectTrezorSvg';
 const cardStyle = prepareNativeStyle<{ flex: 1 | 2 }>((utils, { flex }) => ({
     flex,
     justifyContent: 'center',
-    paddingTop: utils.spacings.extraLarge,
-    paddingBottom: utils.spacings.large,
-    paddingHorizontal: utils.spacings.large,
+    paddingTop: utils.spacings.sp32,
+    paddingBottom: utils.spacings.sp24,
+    paddingHorizontal: utils.spacings.sp24,
 }));
 
 const buttonWrapperStyle = prepareNativeStyle(() => ({
@@ -58,10 +58,10 @@ export const EmptyPortfolioCrossroads = () => {
     };
 
     return (
-        <VStack spacing="medium" flex={1}>
+        <VStack spacing="sp16" flex={1}>
             <Card style={applyStyle(cardStyle, { flex: 2 })}>
-                <VStack spacing="large" justifyContent="center" alignItems="center">
-                    <VStack alignItems="center" spacing="large">
+                <VStack spacing="sp24" justifyContent="center" alignItems="center">
+                    <VStack alignItems="center" spacing="sp24">
                         <ConnectTrezorSvg />
                         <VStack alignItems="center">
                             <Box>
@@ -82,8 +82,8 @@ export const EmptyPortfolioCrossroads = () => {
                 </VStack>
             </Card>
             <Card style={applyStyle(cardStyle, { flex: 1 })}>
-                <VStack spacing="large" justifyContent="center" alignItems="center">
-                    <VStack spacing="small" alignItems="center">
+                <VStack spacing="sp24" justifyContent="center" alignItems="center">
+                    <VStack spacing="sp8" alignItems="center">
                         <Text variant="titleSmall" textAlign="center">
                             <Translation id="moduleHome.emptyState.connectOrImportCrossroads.syncCoins.title" />
                         </Text>
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioTrackerState.tsx b/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioTrackerState.tsx
index ab8c1c8fe4b..6577b62ed09 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioTrackerState.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/EmptyPortfolioTrackerState.tsx
@@ -17,9 +17,9 @@ import {
 const SCREEN_HEIGHT = Dimensions.get('screen').height;
 
 const cardStyle = prepareNativeStyle(utils => ({
-    paddingTop: utils.spacings.extraLarge,
-    paddingBottom: utils.spacings.large,
-    paddingVertical: utils.spacings.large,
+    paddingTop: utils.spacings.sp32,
+    paddingBottom: utils.spacings.sp24,
+    paddingVertical: utils.spacings.sp24,
 }));
 const imageStyle = prepareNativeStyle(_ => ({
     maxHeight: SCREEN_HEIGHT * 0.25,
@@ -49,22 +49,22 @@ export const EmptyPortfolioTrackerState = () => {
     };
 
     return (
-        <VStack spacing="extraLarge">
+        <VStack spacing="sp32">
             <Card
                 alertVariant="info"
                 alertTitle={<Translation id="moduleHome.emptyState.portfolioTracker.alert" />}
                 style={applyStyle(cardStyle)}
             >
                 <VStack
-                    spacing="extraLarge"
+                    spacing="sp32"
                     alignItems="center"
                     justifyContent="center"
-                    paddingHorizontal="extraSmall"
+                    paddingHorizontal="sp4"
                 >
                     <VStack
-                        spacing="medium"
-                        paddingTop="small"
-                        paddingBottom="small"
+                        spacing="sp16"
+                        paddingTop="sp8"
+                        paddingBottom="sp8"
                         alignItems="center"
                         justifyContent="center"
                     >
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/EnableViewOnlyBottomSheet.tsx b/suite-native/module-home/src/screens/HomeScreen/components/EnableViewOnlyBottomSheet.tsx
index d9542576de3..2be4a96f35d 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/EnableViewOnlyBottomSheet.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/EnableViewOnlyBottomSheet.tsx
@@ -28,13 +28,13 @@ import { DisconnectedTrezorSvg } from '../../../assets/DisconnectedTrezorSvg';
 const SHOW_TIMEOUT = 1500;
 
 const svgStyle = prepareNativeStyle(utils => ({
-    paddingTop: utils.spacings.small,
+    paddingTop: utils.spacings.sp8,
     width: '100%',
     height: 206,
 }));
 
 const buttonWrapperStyle = prepareNativeStyle(utils => ({
-    gap: utils.spacings.medium,
+    gap: utils.spacings.sp16,
 }));
 
 export const EnableViewOnlyBottomSheet = () => {
@@ -139,7 +139,7 @@ export const EnableViewOnlyBottomSheet = () => {
 
     return (
         <BottomSheet isVisible={isVisible} onClose={handleClose} isCloseDisplayed={false}>
-            <VStack spacing="large" paddingHorizontal="small">
+            <VStack spacing="sp24" paddingHorizontal="sp8">
                 <Box style={applyStyle(svgStyle)}>
                     <DisconnectedTrezorSvg />
                 </Box>
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
index e160582f89a..cf8ec9162d2 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioContent.tsx
@@ -35,9 +35,9 @@ export const PortfolioContent = forwardRef<PortfolioGraphRef>((_props, ref) => {
     };
 
     return (
-        <VStack spacing="large" marginTop="small">
+        <VStack spacing="sp24" marginTop="sp8">
             <PortfolioGraph ref={ref} />
-            <VStack spacing="large" marginHorizontal="small">
+            <VStack spacing="sp24" marginHorizontal="sp8">
                 <Box>
                     <Assets />
                 </Box>
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx
index 7ccc862957e..6d2ceec40bf 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraph.tsx
@@ -55,7 +55,7 @@ export const PortfolioGraph = forwardRef<PortfolioGraphRef>((_props, ref) => {
     );
 
     return (
-        <VStack spacing="large" testID="@home/portfolio/graph">
+        <VStack spacing="sp24" testID="@home/portfolio/graph">
             {isAnyMainnetAccountPresent ? <PortfolioGraphHeader /> : null}
             <Graph
                 points={graphPoints}
diff --git a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraphHeader.tsx b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraphHeader.tsx
index e99d2514d22..df5c2ad135e 100644
--- a/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraphHeader.tsx
+++ b/suite-native/module-home/src/screens/HomeScreen/components/PortfolioGraphHeader.tsx
@@ -18,7 +18,7 @@ export const PortfolioGraphHeader = () => {
 
     return (
         <Box>
-            <VStack spacing="extraSmall" alignItems="center">
+            <VStack spacing="sp4" alignItems="center">
                 {!isLoading && (
                     <GraphFiatBalance
                         selectedPointAtom={selectedPointAtom}
diff --git a/suite-native/module-onboarding/src/components/OnboardingFooter.tsx b/suite-native/module-onboarding/src/components/OnboardingFooter.tsx
index 3aef4675b8a..b89787004d1 100644
--- a/suite-native/module-onboarding/src/components/OnboardingFooter.tsx
+++ b/suite-native/module-onboarding/src/components/OnboardingFooter.tsx
@@ -9,7 +9,7 @@ import { OnboardingStackRoutes } from '@suite-native/navigation';
 
 const wrapperStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
     marginBottom: 28,
 }));
 
@@ -33,7 +33,7 @@ export const OnboardingFooter = ({
     const buttonTitle = route.name === OnboardingStackRoutes.Welcome ? 'Get started' : 'Next';
 
     return (
-        <Stack spacing="medium" style={applyStyle(wrapperStyle)}>
+        <Stack spacing="sp16" style={applyStyle(wrapperStyle)}>
             {onBack && (
                 <Button
                     colorScheme="tertiaryElevation0"
diff --git a/suite-native/module-onboarding/src/components/OnboardingScreen.tsx b/suite-native/module-onboarding/src/components/OnboardingScreen.tsx
index cb5b0906d9c..8bbca7572e3 100644
--- a/suite-native/module-onboarding/src/components/OnboardingScreen.tsx
+++ b/suite-native/module-onboarding/src/components/OnboardingScreen.tsx
@@ -20,9 +20,9 @@ const contentStyle = prepareNativeStyle(utils => ({
 }));
 
 const cardStyle = prepareNativeStyle(utils => ({
-    marginHorizontal: utils.spacings.medium,
-    marginTop: utils.spacings.medium,
-    paddingTop: utils.spacings.large,
+    marginHorizontal: utils.spacings.sp16,
+    marginTop: utils.spacings.sp16,
+    paddingTop: utils.spacings.sp24,
     borderRadius: 20,
     borderWidth: utils.borders.widths.small,
     borderColor: utils.colors.borderElevation1,
@@ -74,7 +74,7 @@ export const OnboardingScreen = ({
                     {children}
                 </Box>
                 {footer && (
-                    <Box alignItems="center" marginTop="large">
+                    <Box alignItems="center" marginTop="sp24">
                         {footer}
                     </Box>
                 )}
diff --git a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
index f580ce897c7..cdba5ef8f68 100644
--- a/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
+++ b/suite-native/module-onboarding/src/components/OnboardingScreenHeader.tsx
@@ -36,7 +36,7 @@ export const OnboardingScreenHeader = ({
 
     return (
         <Box alignItems="center" style={applyStyle(wrapperStyle)} alignSelf="center">
-            <Box marginBottom="extraLarge">
+            <Box marginBottom="sp32">
                 <StepsProgressBar
                     numberOfSteps={isUsbDeviceConnectFeatureEnabled ? 3 : 2}
                     activeStep={activeStep}
diff --git a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
index 2958942df6b..c066990c385 100644
--- a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
+++ b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
@@ -32,15 +32,15 @@ type NavigationProps = StackToStackCompositeNavigationProps<
 
 const titleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
-    marginTop: utils.spacings.large,
+    marginTop: utils.spacings.sp24,
     marginBottom: 12,
-    paddingHorizontal: utils.spacings.large,
+    paddingHorizontal: utils.spacings.sp24,
 }));
 
 const subtitleStyle = prepareNativeStyle(utils => ({
     textAlign: 'center',
-    marginBottom: utils.spacings.large,
-    paddingHorizontal: utils.spacings.large,
+    marginBottom: utils.spacings.sp24,
+    paddingHorizontal: utils.spacings.sp24,
 }));
 
 const buttonsWrapperStyle = prepareNativeStyle(() => ({
@@ -50,10 +50,10 @@ const buttonsWrapperStyle = prepareNativeStyle(() => ({
 }));
 
 const cardStyle = prepareNativeStyle(utils => ({
-    marginHorizontal: utils.spacings.medium,
-    marginTop: utils.spacings.medium,
-    marginBottom: utils.spacings.extraLarge,
-    paddingHorizontal: utils.spacings.medium,
+    marginHorizontal: utils.spacings.sp16,
+    marginTop: utils.spacings.sp16,
+    marginBottom: utils.spacings.sp32,
+    paddingHorizontal: utils.spacings.sp16,
     paddingTop: 60,
     paddingBottom: 20,
     borderRadius: 20,
@@ -64,8 +64,8 @@ const cardStyle = prepareNativeStyle(utils => ({
 }));
 
 const consentInfoStyle = prepareNativeStyle(utils => ({
-    gap: utils.spacings.small,
-    paddingVertical: utils.spacings.extraSmall,
+    gap: utils.spacings.sp8,
+    paddingVertical: utils.spacings.sp4,
     alignItems: 'center',
 }));
 
@@ -76,10 +76,10 @@ const analyticsConsentStyle = prepareNativeStyle(_ => ({
 }));
 
 const consentWrapperStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
-    paddingVertical: utils.spacings.medium,
-    marginBottom: utils.spacings.small,
-    borderRadius: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
+    paddingVertical: utils.spacings.sp16,
+    marginBottom: utils.spacings.sp8,
+    borderRadius: utils.spacings.sp16,
     backgroundColor: utils.colors.backgroundTertiaryDefaultOnElevation1,
     width: '100%',
     flexDirection: 'row',
@@ -146,7 +146,7 @@ export const AnalyticsConsentScreen = () => {
                     <Translation id="moduleOnboarding.analyticsConsentScreen.subtitle" />
                 </Text>
                 <VStack style={applyStyle(analyticsConsentStyle)}>
-                    <Stack spacing="large" paddingBottom="medium">
+                    <Stack spacing="sp24" paddingBottom="sp16">
                         <AnalyticsInfoRow
                             iconName="eyeSlash"
                             title={
diff --git a/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx b/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx
index 788aead65a6..3b69a0e8ce5 100644
--- a/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx
+++ b/suite-native/module-onboarding/src/screens/TrackBalancesScreen.tsx
@@ -45,7 +45,7 @@ const IconWrapper = ({ children }: { children: ReactNode }) => {
     if (!isUsbDeviceConnectFeatureEnabled) return <>{children}</>;
 
     return (
-        <Box alignSelf="center" flex={2} justifyContent="center" paddingHorizontal="small">
+        <Box alignSelf="center" flex={2} justifyContent="center" paddingHorizontal="sp8">
             {children}
         </Box>
     );
diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
index e6dfe2686f5..6ccdcbabe31 100644
--- a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
+++ b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
@@ -22,7 +22,7 @@ const titleStyle = prepareNativeStyle(_ => ({
 }));
 
 const trezorLinkStyle = prepareNativeStyle(utils => ({
-    paddingBottom: utils.spacings.large,
+    paddingBottom: utils.spacings.sp24,
     justifyContent: 'flex-end',
 }));
 
@@ -56,7 +56,7 @@ export const WelcomeScreen = () => {
             <Box flex={1} />
             <Box alignItems="center" justifyContent="center">
                 <Box alignItems="center">
-                    <Box marginBottom="large">
+                    <Box marginBottom="sp24">
                         <Icon size="extraLarge" name="trezor" color="iconDefault" />
                     </Box>
                     <Box style={applyStyle(titleStyle)}>
diff --git a/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx b/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx
index fd9506aee69..ed6e55bfe3a 100644
--- a/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx
+++ b/suite-native/module-send/src/components/AddressReviewHelpSheet.tsx
@@ -22,7 +22,7 @@ export const AddressReviewHelpSheet = ({ body, title, subtitle }: AddressReviewH
             textAlign: 'left',
             pictogramVariant: 'red',
             primaryButtonTitle: <Translation id="generic.buttons.gotIt" />,
-            titleSpacing: 'extraSmall',
+            titleSpacing: 'sp4',
         });
 
     return (
diff --git a/suite-native/module-send/src/components/AddressReviewSheetSection.tsx b/suite-native/module-send/src/components/AddressReviewSheetSection.tsx
index 51e1723aecb..6c3972829ed 100644
--- a/suite-native/module-send/src/components/AddressReviewSheetSection.tsx
+++ b/suite-native/module-send/src/components/AddressReviewSheetSection.tsx
@@ -9,7 +9,7 @@ type AddressReviewSheetSectionProps = {
 
 export const AddressReviewSheetSection = ({ title, content }: AddressReviewSheetSectionProps) => {
     return (
-        <VStack spacing="extraSmall">
+        <VStack spacing="sp4">
             <Text variant="highlight">{title}</Text>
             <Text color="textSubdued">{content}</Text>
         </VStack>
diff --git a/suite-native/module-send/src/components/AddressReviewStepList.tsx b/suite-native/module-send/src/components/AddressReviewStepList.tsx
index 8b4e3da35a4..f9f5059f08a 100644
--- a/suite-native/module-send/src/components/AddressReviewStepList.tsx
+++ b/suite-native/module-send/src/components/AddressReviewStepList.tsx
@@ -27,7 +27,7 @@ import { AddressOriginHelpButton } from '../components/AddressOriginHelpButton';
 
 const NUMBER_OF_STEPS = 3;
 const OVERLAY_INITIAL_POSITION = 75;
-const LIST_VERTICAL_SPACING = nativeSpacings.medium;
+const LIST_VERTICAL_SPACING = nativeSpacings.sp16;
 
 type RouteProps = StackProps<SendStackParamList, SendStackRoutes.SendAddressReview>['route'];
 type NavigationProps = StackToStackCompositeNavigationProps<
diff --git a/suite-native/module-send/src/components/AmountErrorMessage.tsx b/suite-native/module-send/src/components/AmountErrorMessage.tsx
index 594c2cf54aa..800cacc9459 100644
--- a/suite-native/module-send/src/components/AmountErrorMessage.tsx
+++ b/suite-native/module-send/src/components/AmountErrorMessage.tsx
@@ -6,7 +6,7 @@ import { getOutputFieldName } from '../utils';
 
 const errorStyle = prepareNativeStyle<{ isFiatDisplayed: boolean }>(
     (utils, { isFiatDisplayed }) => ({
-        marginHorizontal: isFiatDisplayed ? utils.spacings.medium : 0,
+        marginHorizontal: isFiatDisplayed ? utils.spacings.sp16 : 0,
     }),
 );
 
diff --git a/suite-native/module-send/src/components/FeeOption.tsx b/suite-native/module-send/src/components/FeeOption.tsx
index f9689465330..c48c0a3b231 100644
--- a/suite-native/module-send/src/components/FeeOption.tsx
+++ b/suite-native/module-send/src/components/FeeOption.tsx
@@ -44,7 +44,7 @@ const wrapperStyle = prepareNativeStyle(utils => ({
 }));
 
 const valuesWrapperStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
 }));
 
 type FeeOptionProps = {
@@ -129,12 +129,12 @@ export const FeeOption = ({
             >
                 <Box style={applyStyle(valuesWrapperStyle)}>
                     <HStack
-                        spacing="large"
+                        spacing="sp24"
                         justifyContent="space-between"
                         flex={1}
                         alignItems="center"
                     >
-                        <VStack alignItems="flex-start" spacing="extraSmall">
+                        <VStack alignItems="flex-start" spacing="sp4">
                             <Box alignItems="center" flexDirection="row">
                                 <Text variant="highlight">
                                     <Translation id={label} />
@@ -148,7 +148,7 @@ export const FeeOption = ({
                                 {`~ ${feeTimeEstimate}`}
                             </Text>
                         </VStack>
-                        <VStack flex={1} alignItems="flex-end" spacing="extraSmall">
+                        <VStack flex={1} alignItems="flex-end" spacing="sp4">
                             <CryptoToFiatAmountFormatter
                                 variant="body"
                                 color="textDefault"
diff --git a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
index d12c073a341..e18e503aafa 100644
--- a/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
+++ b/suite-native/module-send/src/components/FeeOptionErrorMessage.tsx
@@ -30,7 +30,7 @@ export const FeeOptionErrorMessage = ({ isVisible }: FeeOptionErrorMessageProps)
 
     return (
         <Animated.View style={[applyStyle(errorStyle), animatedErrorStyle]}>
-            <HStack alignItems="center" spacing="small">
+            <HStack alignItems="center" spacing="sp8">
                 <Icon name="warningCircle" size="mediumLarge" color="iconAlertRed" />
                 <Text variant="hint">
                     <Translation id="moduleSend.fees.error" />
diff --git a/suite-native/module-send/src/components/FeesFooter.tsx b/suite-native/module-send/src/components/FeesFooter.tsx
index f1b234ccee3..8f3669bc042 100644
--- a/suite-native/module-send/src/components/FeesFooter.tsx
+++ b/suite-native/module-send/src/components/FeesFooter.tsx
@@ -24,14 +24,14 @@ const CARD_BOTTOM_PADDING = 40;
 const BUTTON_ENTERING_DELAY = 45;
 
 const footerWrapperStyle = prepareNativeStyle(utils => ({
-    marginBottom: utils.spacings.medium,
+    marginBottom: utils.spacings.sp16,
 }));
 
 const cardStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    paddingTop: utils.spacings.small,
+    paddingTop: utils.spacings.sp8,
     backgroundColor: utils.colors.backgroundSurfaceElevationNegative,
     borderColor: utils.colors.borderElevation0,
     borderWidth: utils.borders.widths.small,
diff --git a/suite-native/module-send/src/components/OutputsReviewFooter.tsx b/suite-native/module-send/src/components/OutputsReviewFooter.tsx
index 760e40ba5be..9f97f7e7a1d 100644
--- a/suite-native/module-send/src/components/OutputsReviewFooter.tsx
+++ b/suite-native/module-send/src/components/OutputsReviewFooter.tsx
@@ -56,7 +56,7 @@ const navigateToAccountDetail = ({
 
 const footerStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const OutputsReviewFooter = ({ accountKey }: { accountKey: AccountKey }) => {
diff --git a/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx b/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx
index 8814dd71fbc..5034fe64e04 100644
--- a/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx
+++ b/suite-native/module-send/src/components/QrCodeBottomSheetIcon.tsx
@@ -20,7 +20,7 @@ export const QrCodeBottomSheetIcon = ({ onCodeScanned }: QrCodeBottomSheetIconPr
 
     return (
         <>
-            <TouchableOpacity onPress={toggleBottomSheet} hitSlop={utils.spacings.small}>
+            <TouchableOpacity onPress={toggleBottomSheet} hitSlop={utils.spacings.sp8}>
                 <Icon name="qrCode" size="large" />
             </TouchableOpacity>
 
diff --git a/suite-native/module-send/src/components/RecipientInputs.tsx b/suite-native/module-send/src/components/RecipientInputs.tsx
index a6b5ba3fedd..af2ee419cf5 100644
--- a/suite-native/module-send/src/components/RecipientInputs.tsx
+++ b/suite-native/module-send/src/components/RecipientInputs.tsx
@@ -12,7 +12,7 @@ type RecipientInputsProps = {
 };
 export const RecipientInputs = ({ index, accountKey }: RecipientInputsProps) => {
     return (
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             <AddressInput index={index} accountKey={accountKey} />
             <CardDivider />
             <AmountInputs index={index} accountKey={accountKey} />
diff --git a/suite-native/module-send/src/components/RecipientsSummary.tsx b/suite-native/module-send/src/components/RecipientsSummary.tsx
index 142bed7b3dd..ce5dcb2fe64 100644
--- a/suite-native/module-send/src/components/RecipientsSummary.tsx
+++ b/suite-native/module-send/src/components/RecipientsSummary.tsx
@@ -51,7 +51,7 @@ export const RecipientsSummary = ({ accountKey }: FeesRecipientsProps) => {
             {outputs.map(output => (
                 <Card key={output.address} style={applyStyle(cardStyle)}>
                     <HStack>
-                        <VStack flex={0.6} justifyContent="center" spacing="extraSmall">
+                        <VStack flex={0.6} justifyContent="center" spacing="sp4">
                             <Text variant="callout">
                                 <Translation id="moduleSend.fees.recipient.singular" />
                             </Text>
@@ -64,7 +64,7 @@ export const RecipientsSummary = ({ accountKey }: FeesRecipientsProps) => {
                                 {output.address}
                             </Text>
                         </VStack>
-                        <VStack flex={0.4} alignItems="flex-end" spacing="extraSmall">
+                        <VStack flex={0.4} alignItems="flex-end" spacing="sp4">
                             <CryptoToFiatAmountFormatter
                                 variant="hint"
                                 color="textDefault"
diff --git a/suite-native/module-send/src/components/ReviewOutputCard.tsx b/suite-native/module-send/src/components/ReviewOutputCard.tsx
index a6a0cf581f4..17686f7cf07 100644
--- a/suite-native/module-send/src/components/ReviewOutputCard.tsx
+++ b/suite-native/module-send/src/components/ReviewOutputCard.tsx
@@ -15,8 +15,8 @@ type ReviewOutputCardProps = {
 const cardStyle = prepareNativeStyle<{ isConfirmed: boolean }>((utils, { isConfirmed }) => ({
     borderWidth: utils.borders.widths.small,
     borderColor: utils.colors.borderElevation1,
-    marginHorizontal: utils.spacings.small,
-    paddingHorizontal: utils.spacings.medium,
+    marginHorizontal: utils.spacings.sp8,
+    paddingHorizontal: utils.spacings.sp16,
     paddingVertical: 12,
     borderRadius: 12,
     extend: {
@@ -41,8 +41,8 @@ export const ReviewOutputCard = ({ children, title, outputState }: ReviewOutputC
                     <ReviewOutputStatusBadge status={outputState} />
                     <Text variant="callout">{title}</Text>
                 </HStack>
-                <CardDivider color={dividerColor} horizontalPadding="medium" />
-                <Box paddingLeft="large">{children}</Box>
+                <CardDivider color={dividerColor} horizontalPadding="sp16" />
+                <Box paddingLeft="sp24">{children}</Box>
             </VStack>
         </Card>
     );
diff --git a/suite-native/module-send/src/components/ReviewOutputItemList.tsx b/suite-native/module-send/src/components/ReviewOutputItemList.tsx
index aca39105c02..4f6e4c90caf 100644
--- a/suite-native/module-send/src/components/ReviewOutputItemList.tsx
+++ b/suite-native/module-send/src/components/ReviewOutputItemList.tsx
@@ -24,7 +24,7 @@ import { SlidingFooterOverlay } from './SlidingFooterOverlay';
 type ReviewOutputItemListProps = { accountKey: AccountKey };
 
 const INITIAL_OFFSET = 85;
-const LIST_VERTICAL_SPACING = nativeSpacings.medium;
+const LIST_VERTICAL_SPACING = nativeSpacings.sp16;
 
 export const ReviewOutputItemList = ({ accountKey }: ReviewOutputItemListProps) => {
     const account = useSelector((state: AccountsRootState) =>
diff --git a/suite-native/module-send/src/components/ReviewOutputItemValues.tsx b/suite-native/module-send/src/components/ReviewOutputItemValues.tsx
index 9e93eb99027..48cfc1126bd 100644
--- a/suite-native/module-send/src/components/ReviewOutputItemValues.tsx
+++ b/suite-native/module-send/src/components/ReviewOutputItemValues.tsx
@@ -19,7 +19,7 @@ export const ReviewOutputItemValues = ({
                     <Translation id={translationKey} />
                 </Text>
             </Box>
-            <VStack flex={0.45} alignItems="flex-end" spacing="extraSmall">
+            <VStack flex={0.45} alignItems="flex-end" spacing="sp4">
                 <CryptoToFiatAmountFormatter
                     variant="hint"
                     color="textDefault"
diff --git a/suite-native/module-send/src/components/ReviewOutputSummaryItem.tsx b/suite-native/module-send/src/components/ReviewOutputSummaryItem.tsx
index 95f8c11da8c..1403fec73bd 100644
--- a/suite-native/module-send/src/components/ReviewOutputSummaryItem.tsx
+++ b/suite-native/module-send/src/components/ReviewOutputSummaryItem.tsx
@@ -38,7 +38,7 @@ export const ReviewOutputSummaryItem = ({
                 title={translate('moduleSend.review.outputs.total.label')}
                 outputState={state}
             >
-                <VStack spacing="medium">
+                <VStack spacing="sp16">
                     <ReviewOutputItemValues
                         value={totalSpent}
                         networkSymbol={networkSymbol}
diff --git a/suite-native/module-send/src/components/SendFeesForm.tsx b/suite-native/module-send/src/components/SendFeesForm.tsx
index 67e3dc1b03b..5dbb78fa13e 100644
--- a/suite-native/module-send/src/components/SendFeesForm.tsx
+++ b/suite-native/module-send/src/components/SendFeesForm.tsx
@@ -79,8 +79,8 @@ export const SendFeesForm = ({ accountKey, feeLevels }: SendFormProps) => {
     return (
         <Form form={form}>
             <Box flex={1} justifyContent="space-between">
-                <VStack spacing="medium">
-                    <VStack spacing="extraSmall">
+                <VStack spacing="sp16">
+                    <VStack spacing="sp4">
                         <Text variant="titleSmall">
                             <Translation id="moduleSend.fees.description.title" />
                         </Text>
diff --git a/suite-native/module-send/src/components/SendOutputFields.tsx b/suite-native/module-send/src/components/SendOutputFields.tsx
index 58d546c13ad..8062ef402dc 100644
--- a/suite-native/module-send/src/components/SendOutputFields.tsx
+++ b/suite-native/module-send/src/components/SendOutputFields.tsx
@@ -23,7 +23,7 @@ export const SendOutputFields = ({ accountKey }: SendOutputFieldsProps) => {
     const outputsFieldArray = useFieldArray({ control, name: 'outputs' });
 
     return (
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             <Text variant="titleSmall">
                 <Translation id="moduleSend.outputs.recipients.title" />
             </Text>
@@ -31,9 +31,9 @@ export const SendOutputFields = ({ accountKey }: SendOutputFieldsProps) => {
                 {outputsFieldArray.fields.map((output, index) => (
                     <RecipientInputs key={output.id} index={index} accountKey={accountKey} />
                 ))}
-                {/* 
+                {/*
               TODO: add output (outputs.append({...})) button
-              issue: https://github.com/trezor/trezor-suite/issues/12944 
+              issue: https://github.com/trezor/trezor-suite/issues/12944
               */}
             </Card>
         </VStack>
diff --git a/suite-native/module-send/src/components/SendScreen.tsx b/suite-native/module-send/src/components/SendScreen.tsx
index 99bc60952b6..00a09ade98b 100644
--- a/suite-native/module-send/src/components/SendScreen.tsx
+++ b/suite-native/module-send/src/components/SendScreen.tsx
@@ -15,7 +15,7 @@ export const SendScreen = ({ children, footer, screenHeader, subheader }: SendSc
 
     return (
         <Screen
-            customHorizontalPadding={utils.spacings.medium}
+            customHorizontalPadding={utils.spacings.sp16}
             screenHeader={screenHeader}
             subheader={subheader}
             footer={footer}
diff --git a/suite-native/module-send/src/components/SendScreenSubHeader.tsx b/suite-native/module-send/src/components/SendScreenSubHeader.tsx
index d3fa84741ab..8e14625bfb2 100644
--- a/suite-native/module-send/src/components/SendScreenSubHeader.tsx
+++ b/suite-native/module-send/src/components/SendScreenSubHeader.tsx
@@ -18,7 +18,7 @@ type AccountBalanceScreenHeaderProps = {
 };
 
 export const SendScreenSubHeader = (props: ScreenSubHeaderProps) => (
-    <ScreenSubHeader {...props} customHorizontalPadding={nativeSpacings.medium} />
+    <ScreenSubHeader {...props} customHorizontalPadding={nativeSpacings.sp16} />
 );
 
 export const AccountBalanceScreenHeader = ({ accountKey }: AccountBalanceScreenHeaderProps) => {
@@ -40,12 +40,12 @@ export const AccountBalanceScreenHeader = ({ accountKey }: AccountBalanceScreenH
     return (
         <SendScreenSubHeader
             content={
-                <VStack spacing="extraSmall" alignItems="center">
-                    <HStack spacing="small" alignItems="center">
+                <VStack spacing="sp4" alignItems="center">
+                    <HStack spacing="sp8" alignItems="center">
                         {networkSymbol && <CryptoIcon symbol={networkSymbol} size="extraSmall" />}
                         {accountLabel && <Text variant="highlight">{accountLabel}</Text>}
                     </HStack>
-                    <HStack spacing="extraSmall" alignItems="center">
+                    <HStack spacing="sp4" alignItems="center">
                         <CryptoAmountFormatter
                             variant="hint"
                             value={availableBalance}
diff --git a/suite-native/module-send/src/components/SignSuccessMessage.tsx b/suite-native/module-send/src/components/SignSuccessMessage.tsx
index 758c0ada5ae..7e604ec7022 100644
--- a/suite-native/module-send/src/components/SignSuccessMessage.tsx
+++ b/suite-native/module-send/src/components/SignSuccessMessage.tsx
@@ -26,7 +26,7 @@ export const SignSuccessMessage = () => {
 
     return (
         <Animated.View entering={SlideInDown}>
-            <VStack paddingHorizontal="large" alignItems="center" paddingBottom="large">
+            <VStack paddingHorizontal="sp24" alignItems="center" paddingBottom="sp24">
                 <ReviewSuccessSvg />
                 <Text variant="highlight" textAlign="center">
                     <Translation id="moduleSend.review.outputs.successMessage" />
diff --git a/suite-native/module-send/src/components/SlidingFooterOverlay.tsx b/suite-native/module-send/src/components/SlidingFooterOverlay.tsx
index 6663247a34a..2fd702b7641 100644
--- a/suite-native/module-send/src/components/SlidingFooterOverlay.tsx
+++ b/suite-native/module-send/src/components/SlidingFooterOverlay.tsx
@@ -25,7 +25,7 @@ const GRADIENT_BACKGROUND_HEIGHT = 50;
 
 const footerOverlayStyle = prepareNativeStyle(utils => ({
     position: 'absolute',
-    paddingTop: utils.spacings.large,
+    paddingTop: utils.spacings.sp24,
     width: '100%',
     height: '100%',
 }));
diff --git a/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx b/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
index b1f70213bde..765b1ca8001 100644
--- a/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
+++ b/suite-native/module-send/src/screens/SendAddressReviewScreen.tsx
@@ -66,8 +66,8 @@ export const SendAddressReviewScreen = ({
             // TODO: improve the illustration: https://github.com/trezor/trezor-suite/issues/13965
             footer={isReviewInProgress && <SendConfirmOnDeviceImage />}
         >
-            <Box flex={1} justifyContent="space-between" marginTop="medium">
-                <VStack justifyContent="center" alignItems="center" spacing="large">
+            <Box flex={1} justifyContent="space-between" marginTop="sp16">
+                <VStack justifyContent="center" alignItems="center" spacing="sp24">
                     <Text variant="titleSmall">
                         <Translation id="moduleSend.review.address.title" />
                     </Text>
diff --git a/suite-native/module-send/src/screens/SendFeesScreen.tsx b/suite-native/module-send/src/screens/SendFeesScreen.tsx
index fadb4657219..315d775b1b9 100644
--- a/suite-native/module-send/src/screens/SendFeesScreen.tsx
+++ b/suite-native/module-send/src/screens/SendFeesScreen.tsx
@@ -22,7 +22,7 @@ export const SendFeesScreen = ({
 
     return (
         <SendScreen screenHeader={<AccountBalanceScreenHeader accountKey={accountKey} />}>
-            <VStack spacing="extraLarge" flex={1}>
+            <VStack spacing="sp32" flex={1}>
                 <RecipientsSummary accountKey={accountKey} />
                 <SendFeesForm accountKey={accountKey} feeLevels={feeLevels} />
             </VStack>
diff --git a/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx b/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx
index 019c09043f3..324e643a1a3 100644
--- a/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx
+++ b/suite-native/module-send/src/screens/SendOutputsReviewScreen.tsx
@@ -68,7 +68,7 @@ export const SendOutputsReviewScreen = ({
             }
             footer={<OutputsReviewFooter accountKey={accountKey} />}
         >
-            <VStack flex={1} spacing="extraLarge" justifyContent="space-between">
+            <VStack flex={1} spacing="sp32" justifyContent="space-between">
                 <ReviewOutputItemList accountKey={accountKey} />
                 <SignSuccessMessage />
             </VStack>
diff --git a/suite-native/module-send/src/screens/SendOutputsScreen.tsx b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
index ac052956f1c..b886b416fe1 100644
--- a/suite-native/module-send/src/screens/SendOutputsScreen.tsx
+++ b/suite-native/module-send/src/screens/SendOutputsScreen.tsx
@@ -41,7 +41,7 @@ import { calculateMaxAmountWithNormalFeeThunk } from '../sendFormThunks';
 
 const buttonWrapperStyle = prepareNativeStyle(utils => ({
     width: '100%',
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
 }));
 
 const DEFAULT_VALUES = [
@@ -226,7 +226,7 @@ export const SendOutputsScreen = ({
                 )
             }
         >
-            <Box marginTop="extraLarge" marginBottom="extraLarge">
+            <Box marginTop="sp32" marginBottom="sp32">
                 <Form form={form}>
                     <Box flex={1} justifyContent="space-between">
                         <SendOutputFields accountKey={accountKey} />
diff --git a/suite-native/module-settings/src/components/AboutUsBanners.tsx b/suite-native/module-settings/src/components/AboutUsBanners.tsx
index 5bf69b6ff8f..99902dc96f2 100644
--- a/suite-native/module-settings/src/components/AboutUsBanners.tsx
+++ b/suite-native/module-settings/src/components/AboutUsBanners.tsx
@@ -5,8 +5,8 @@ import { useOpenLink } from '@suite-native/link';
 import { Icon } from '@suite-common/icons-deprecated';
 
 const cardStyle = prepareNativeStyle<{ backgroundColor: Color }>((utils, { backgroundColor }) => ({
-    paddingHorizontal: utils.spacings.large,
-    paddingVertical: utils.spacings.large * 2,
+    paddingHorizontal: utils.spacings.sp24,
+    paddingVertical: utils.spacings.sp24 * 2,
     backgroundColor: utils.colors[backgroundColor],
 }));
 
@@ -27,7 +27,7 @@ export const AboutUsBanners = () => {
     return (
         <VStack>
             <Card style={applyStyle(cardStyle, { backgroundColor: 'backgroundNeutralBold' })}>
-                <VStack spacing="large" style={applyStyle(stackStyle)}>
+                <VStack spacing="sp24" style={applyStyle(stackStyle)}>
                     <Icon color="iconOnPrimary" name="trezor" />
                     <Text
                         textAlign="center"
@@ -42,11 +42,11 @@ export const AboutUsBanners = () => {
                 </VStack>
             </Card>
             <Card style={applyStyle(cardStyle, { backgroundColor: 'backgroundSecondaryDefault' })}>
-                <VStack spacing="large" style={applyStyle(stackStyle)}>
+                <VStack spacing="sp24" style={applyStyle(stackStyle)}>
                     <Text color="textDefaultInverted" variant="titleMedium">
                         Follow us
                     </Text>
-                    <HStack spacing="large">
+                    <HStack spacing="sp24">
                         <IconButton
                             size="large"
                             colorScheme="tertiaryElevation1"
diff --git a/suite-native/module-settings/src/components/AppVersion.tsx b/suite-native/module-settings/src/components/AppVersion.tsx
index e7b01da5623..0b2ce0d5374 100644
--- a/suite-native/module-settings/src/components/AppVersion.tsx
+++ b/suite-native/module-settings/src/components/AppVersion.tsx
@@ -6,7 +6,7 @@ import { getSuiteVersion, getCommitHash } from '@trezor/env-utils';
 import { ProductionDebug } from './ProductionDebug';
 
 export const AppVersion = () => (
-    <HStack marginHorizontal="medium" justifyContent="space-between">
+    <HStack marginHorizontal="sp16" justifyContent="space-between">
         <Box>
             {S.isNotEmpty(getSuiteVersion()) && (
                 <Text variant="hint" color="textDisabled">
diff --git a/suite-native/module-settings/src/components/ColorSchemePicker.tsx b/suite-native/module-settings/src/components/ColorSchemePicker.tsx
index 850ddba312d..68bb6fb3769 100644
--- a/suite-native/module-settings/src/components/ColorSchemePicker.tsx
+++ b/suite-native/module-settings/src/components/ColorSchemePicker.tsx
@@ -11,7 +11,7 @@ export const ColorSchemePicker = () => {
     return (
         <VStack spacing={11}>
             <Text>Color Scheme</Text>
-            <HStack spacing="small" style={applyStyle(themesContainerStyle)}>
+            <HStack spacing="sp8" style={applyStyle(themesContainerStyle)}>
                 <ColorSchemePickerItem colorScheme="standard" />
                 <ColorSchemePickerItem colorScheme="dark" />
                 <ColorSchemePickerItem colorScheme="system" />
diff --git a/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx b/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx
index 3b87ad4ce6b..e92ac227c3d 100644
--- a/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx
+++ b/suite-native/module-settings/src/components/ColorSchemePickerItem.tsx
@@ -36,7 +36,7 @@ const pickerItemDotStyle = prepareNativeStyle<PickerItemDotStyleProps>(
         extend: {
             condition: !isFirstItem,
             style: {
-                marginLeft: utils.negative(utils.spacings.small),
+                marginLeft: utils.negative(utils.spacings.sp8),
             },
         },
     }),
@@ -46,8 +46,8 @@ const textStyle = prepareNativeStyle(utils => ({
     alignSelf: 'center',
     textAlign: 'center',
     paddingTop: 23,
-    paddingBottom: utils.spacings.small,
-    paddingHorizontal: utils.spacings.small,
+    paddingBottom: utils.spacings.sp8,
+    paddingHorizontal: utils.spacings.sp8,
     textTransform: 'capitalize',
 }));
 
diff --git a/suite-native/module-settings/src/components/FAQInfoPanel.tsx b/suite-native/module-settings/src/components/FAQInfoPanel.tsx
index 31b088b52f3..0b4d64fbf09 100644
--- a/suite-native/module-settings/src/components/FAQInfoPanel.tsx
+++ b/suite-native/module-settings/src/components/FAQInfoPanel.tsx
@@ -112,7 +112,7 @@ export const FAQInfoPanel = () => {
     const [isUsbDeviceConnectFeatureEnabled] = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled);
 
     return (
-        <VStack paddingHorizontal="small">
+        <VStack paddingHorizontal="sp8">
             {isUsbDeviceConnectFeatureEnabled ? <EnabledUsbFAQ /> : <DisabledUsbFAQ />}
         </VStack>
     );
diff --git a/suite-native/module-settings/src/components/SettingsSection.tsx b/suite-native/module-settings/src/components/SettingsSection.tsx
index 15c9aed6003..58f633f1eb6 100644
--- a/suite-native/module-settings/src/components/SettingsSection.tsx
+++ b/suite-native/module-settings/src/components/SettingsSection.tsx
@@ -24,8 +24,8 @@ export const SettingsSection = ({
             flexDirection="row"
             justifyContent="space-between"
             alignItems="center"
-            marginBottom="medium"
-            marginLeft="medium"
+            marginBottom="sp16"
+            marginLeft="sp16"
         >
             <Box>
                 <Text variant="titleSmall">{title}</Text>
@@ -42,7 +42,7 @@ export const SettingsSection = ({
             )}
         </Box>
         <Card>
-            <VStack spacing="large">{children}</VStack>
+            <VStack spacing="sp24">{children}</VStack>
         </Card>
     </Box>
 );
diff --git a/suite-native/module-settings/src/components/SettingsSectionItem.tsx b/suite-native/module-settings/src/components/SettingsSectionItem.tsx
index 48a3c5ee7c0..502b7be61ee 100644
--- a/suite-native/module-settings/src/components/SettingsSectionItem.tsx
+++ b/suite-native/module-settings/src/components/SettingsSectionItem.tsx
@@ -20,7 +20,7 @@ export type SettingsSectionItemProps = {
 const listItemRightContainerStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    marginLeft: utils.spacings.medium,
+    marginLeft: utils.spacings.sp16,
 }));
 
 export const SettingsSectionItem = ({
diff --git a/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx b/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx
index 541d801568e..0a7d106ce76 100644
--- a/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx
+++ b/suite-native/module-settings/src/components/SettingsSectionItemIcon.tsx
@@ -6,7 +6,7 @@ type SettingsSectionItemIconProps = {
 };
 
 export const SettingsSectionItemIcon = ({ iconName }: SettingsSectionItemIconProps) => (
-    <Box justifyContent="center" alignItems="center" marginRight="medium">
+    <Box justifyContent="center" alignItems="center" marginRight="sp16">
         <RoundedIcon name={iconName} color="iconSubdued" iconSize="mediumLarge" />
     </Box>
 );
diff --git a/suite-native/module-settings/src/components/SupportCard.tsx b/suite-native/module-settings/src/components/SupportCard.tsx
index 9a83ba424fc..e9b31c43f23 100644
--- a/suite-native/module-settings/src/components/SupportCard.tsx
+++ b/suite-native/module-settings/src/components/SupportCard.tsx
@@ -4,7 +4,7 @@ import { Button, Card, HStack, PictogramTitleHeader, Text, VStack } from '@suite
 import { Translation } from '@suite-native/intl';
 
 const supportCardStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.extraLarge,
+    padding: utils.spacings.sp32,
 }));
 
 export const SupportCard = () => {
@@ -16,7 +16,7 @@ export const SupportCard = () => {
     return (
         <Card style={applyStyle(supportCardStyle)}>
             <HStack justifyContent="space-between">
-                <VStack spacing="medium" alignItems="flex-start" paddingTop="small">
+                <VStack spacing="sp16" alignItems="flex-start" paddingTop="sp8">
                     <Text variant="titleSmall">
                         <Translation id="moduleSettings.faq.supportCard.title" />
                     </Text>
diff --git a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
index b7ae9f9b16f..22b5abf885a 100644
--- a/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
+++ b/suite-native/module-settings/src/components/TouchableSwitchRow.tsx
@@ -46,7 +46,7 @@ export const TouchableSwitchRow = ({
                 flexDirection="row"
                 justifyContent="space-between"
                 alignItems="flex-start"
-                marginVertical="medium"
+                marginVertical="sp16"
             >
                 <Box style={applyStyle(contentStyle)} flexDirection="row">
                     <RoundedIcon name={iconName} color="iconSubdued" />
diff --git a/suite-native/module-settings/src/components/ViewOnly/About.tsx b/suite-native/module-settings/src/components/ViewOnly/About.tsx
index d56833247a0..89489e810cd 100644
--- a/suite-native/module-settings/src/components/ViewOnly/About.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/About.tsx
@@ -7,7 +7,7 @@ export type AboutProps = {
 };
 
 export const About = ({ onPressAbout }: AboutProps) => (
-    <Box marginVertical="medium" marginHorizontal="extraLarge" alignItems="center">
+    <Box marginVertical="sp16" marginHorizontal="sp32" alignItems="center">
         <Text variant="hint" textAlign="center" color="textSubdued">
             <Translation
                 id="moduleSettings.viewOnly.subtitle"
diff --git a/suite-native/module-settings/src/components/ViewOnly/AboutViewOnlyBottomSheet.tsx b/suite-native/module-settings/src/components/ViewOnly/AboutViewOnlyBottomSheet.tsx
index 6df024389c3..10f5768d703 100644
--- a/suite-native/module-settings/src/components/ViewOnly/AboutViewOnlyBottomSheet.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/AboutViewOnlyBottomSheet.tsx
@@ -11,7 +11,7 @@ const HowItWorks = () => {
             <Text variant="callout">
                 <Translation id="moduleSettings.viewOnly.about.contentTitle" />
             </Text>
-            <Box paddingLeft="small">
+            <Box paddingLeft="sp8">
                 <Translation
                     id="moduleSettings.viewOnly.about.content"
                     values={{
@@ -49,7 +49,7 @@ export const AboutViewOnlyBottomSheet = ({ isVisible, onClose }: AboutViewOnlyBo
 
     return (
         <BottomSheet isVisible={isVisible} onClose={onClose} isCloseDisplayed={false}>
-            <VStack spacing="large" paddingHorizontal="small">
+            <VStack spacing="sp24" paddingHorizontal="sp8">
                 <TitleHeader
                     title={<Translation id="moduleSettings.viewOnly.about.title" />}
                     subtitle={<Translation id="moduleSettings.viewOnly.about.subtitle" />}
diff --git a/suite-native/module-settings/src/components/ViewOnly/DevicesEmpty.tsx b/suite-native/module-settings/src/components/ViewOnly/DevicesEmpty.tsx
index 953f912383f..92bf84f7cd5 100644
--- a/suite-native/module-settings/src/components/ViewOnly/DevicesEmpty.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/DevicesEmpty.tsx
@@ -8,14 +8,14 @@ import { About, AboutProps } from './About';
 const svgWrapperStyle = prepareNativeStyle(utils => ({
     width: 180,
     height: 156,
-    paddingBottom: utils.spacings.large,
+    paddingBottom: utils.spacings.sp24,
 }));
 
 const emptyContentStyle = prepareNativeStyle(utils => ({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: utils.spacings.large,
+    paddingHorizontal: utils.spacings.sp24,
 }));
 
 export const DevicesEmpty = ({ onPressAbout }: AboutProps) => {
diff --git a/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx b/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx
index 0b4f22b76fe..a61d96cda4f 100644
--- a/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/DevicesManagement.tsx
@@ -12,11 +12,11 @@ import { WalletRow } from './WalletRow';
 
 const cardStyle = prepareNativeStyle(utils => ({
     padding: 0,
-    marginTop: utils.spacings.large,
+    marginTop: utils.spacings.sp24,
 }));
 
 const deviceStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
     alignItems: 'center',
     gap: 12,
 }));
@@ -27,7 +27,7 @@ export const DevicesManagement = ({ onPressAbout }: AboutProps) => {
 
     return (
         <>
-            <Box paddingHorizontal="large">
+            <Box paddingHorizontal="sp24">
                 <About onPressAbout={onPressAbout} />
             </Box>
             {deviceGroups.map(devices => {
@@ -44,7 +44,7 @@ export const DevicesManagement = ({ onPressAbout }: AboutProps) => {
                                 <Text variant="highlight" color="textDefault">
                                     {firstDevice.features.label || firstDevice.name}
                                 </Text>
-                                <HStack alignItems="center" spacing="small">
+                                <HStack alignItems="center" spacing="sp8">
                                     <ConnectionDot isConnected={firstDevice.connected} />
                                     <Text
                                         variant="hint"
diff --git a/suite-native/module-settings/src/components/ViewOnly/OrderedListItem.tsx b/suite-native/module-settings/src/components/ViewOnly/OrderedListItem.tsx
index 0dda00aa126..0d22fe31c2d 100644
--- a/suite-native/module-settings/src/components/ViewOnly/OrderedListItem.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/OrderedListItem.tsx
@@ -15,7 +15,7 @@ export const OrderedListItem = ({ children, order, variant, color }: OrderedList
         <Text variant={variant} color={color}>
             {order}.
         </Text>
-        <Box flexShrink={1} paddingLeft="small">
+        <Box flexShrink={1} paddingLeft="sp8">
             <Text variant={variant} color={color}>
                 {children}
             </Text>
diff --git a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
index e53139aa700..f164358657b 100644
--- a/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
+++ b/suite-native/module-settings/src/components/ViewOnly/WalletRow.tsx
@@ -21,7 +21,7 @@ type WalletRowProps = {
 };
 
 const walletRowStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
     justifyContent: 'space-between',
     alignItems: 'center',
     height: 60,
diff --git a/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx b/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx
index 1e0601cf77f..cc18121cbb8 100644
--- a/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsAboutUsScreen.tsx
@@ -25,9 +25,9 @@ export const SettingsAboutUsScreen = () => {
         <Screen
             screenHeader={<ScreenSubHeader content={translate('moduleSettings.aboutUs.title')} />}
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <AboutUsBanners />
-                <Divider marginVertical="medium" />
+                <Divider marginVertical="sp16" />
                 <SettingsSection title="Legal">
                     <SettingsSectionItem
                         title="Terms & conditions"
diff --git a/suite-native/module-settings/src/screens/SettingsCoinEnablingScreen.tsx b/suite-native/module-settings/src/screens/SettingsCoinEnablingScreen.tsx
index 6166a50d788..84024b19e1e 100644
--- a/suite-native/module-settings/src/screens/SettingsCoinEnablingScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsCoinEnablingScreen.tsx
@@ -98,7 +98,7 @@ export const SettingsCoinEnablingScreen = () => {
             }
         >
             {showNetworks ? (
-                <Box paddingTop="large" paddingBottom="medium" paddingHorizontal="small">
+                <Box paddingTop="sp24" paddingBottom="sp16" paddingHorizontal="sp8">
                     <DiscoveryCoinsFilter />
                 </Box>
             ) : (
diff --git a/suite-native/module-settings/src/screens/SettingsCustomizationScreen.tsx b/suite-native/module-settings/src/screens/SettingsCustomizationScreen.tsx
index 6e332146352..428acaad707 100644
--- a/suite-native/module-settings/src/screens/SettingsCustomizationScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsCustomizationScreen.tsx
@@ -13,7 +13,7 @@ export const SettingsCustomizationScreen = () => {
                 <ScreenSubHeader content={translate('moduleSettings.customization.title')} />
             }
         >
-            <Box marginHorizontal="medium">
+            <Box marginHorizontal="sp16">
                 <ColorSchemePicker />
             </Box>
         </Screen>
diff --git a/suite-native/module-settings/src/screens/SettingsFAQScreen.tsx b/suite-native/module-settings/src/screens/SettingsFAQScreen.tsx
index 8cc655714c4..f037e53f2bc 100644
--- a/suite-native/module-settings/src/screens/SettingsFAQScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsFAQScreen.tsx
@@ -10,7 +10,7 @@ export const SettingsFAQScreen = () => {
 
     return (
         <Screen screenHeader={<ScreenSubHeader content={translate('moduleSettings.faq.title')} />}>
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <FAQInfoPanel />
                 <SupportCard />
             </VStack>
diff --git a/suite-native/module-settings/src/screens/SettingsLocalizationScreen.tsx b/suite-native/module-settings/src/screens/SettingsLocalizationScreen.tsx
index 92be85c9e13..1f72a32ec9c 100644
--- a/suite-native/module-settings/src/screens/SettingsLocalizationScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsLocalizationScreen.tsx
@@ -15,7 +15,7 @@ export const SettingsLocalizationScreen = () => {
             }
         >
             <Card>
-                <VStack spacing="small">
+                <VStack spacing="sp8">
                     <CurrencySelector />
                     <CryptoUnitsSelector />
                 </VStack>
diff --git a/suite-native/module-settings/src/screens/SettingsScreen.tsx b/suite-native/module-settings/src/screens/SettingsScreen.tsx
index 7f933b922b8..472ff6c04e9 100644
--- a/suite-native/module-settings/src/screens/SettingsScreen.tsx
+++ b/suite-native/module-settings/src/screens/SettingsScreen.tsx
@@ -8,7 +8,7 @@ import { SupportSettings } from '../components/SupportSettings';
 
 export const SettingsScreen = () => (
     <Screen screenHeader={<DeviceManagerScreenHeader />}>
-        <VStack marginTop="extraLarge" spacing="extraLarge">
+        <VStack marginTop="sp32" spacing="sp32">
             <PreferencesSettings />
             <FeaturesSettings />
             <SupportSettings />
diff --git a/suite-native/module-staking-management/src/components/StakePendingCard.tsx b/suite-native/module-staking-management/src/components/StakePendingCard.tsx
index b63a1f1cf00..92605728a51 100644
--- a/suite-native/module-staking-management/src/components/StakePendingCard.tsx
+++ b/suite-native/module-staking-management/src/components/StakePendingCard.tsx
@@ -17,14 +17,14 @@ import { NativeStakingRootState } from '@suite-native/staking/src/types';
 const stakingItemStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     alignItems: 'center',
-    gap: utils.spacings.extraSmall,
+    gap: utils.spacings.sp4,
 }));
 
 const valuesContainerStyle = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     flexShrink: 0,
     alignItems: 'flex-end',
-    paddingLeft: utils.spacings.small,
+    paddingLeft: utils.spacings.sp8,
 }));
 
 const getCardAlertProps = (isStakeConfirming: boolean, isStakePending: boolean) => {
diff --git a/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx b/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx
index ca348369797..6c397119dac 100644
--- a/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx
+++ b/suite-native/module-staking-management/src/components/StakingBalancesOverviewCard.tsx
@@ -17,19 +17,19 @@ import {
 const stakingItemStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     alignItems: 'center',
-    gap: utils.spacings.extraSmall,
-    paddingBottom: utils.spacings.small,
+    gap: utils.spacings.sp4,
+    paddingBottom: utils.spacings.sp8,
 }));
 
 const stakingCardStyle = prepareNativeStyle(utils => ({
-    marginTop: utils.spacings.medium,
+    marginTop: utils.spacings.sp16,
 }));
 
 const stakingWrapperStyle = prepareNativeStyle(utils => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    paddingBottom: utils.spacings.medium,
+    paddingBottom: utils.spacings.sp16,
 }));
 
 const separatorStyle = prepareNativeStyle(utils => ({
@@ -126,7 +126,7 @@ export const StakingBalancesOverviewCard = ({
                     flexDirection="row"
                     alignItems="center"
                     justifyContent="space-between"
-                    paddingTop="medium"
+                    paddingTop="sp16"
                 >
                     <Text color="textSubdued">
                         <Translation id="staking.apy" />
diff --git a/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx b/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx
index 4ec0f608053..36e3ab5a1d2 100644
--- a/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx
+++ b/suite-native/module-staking-management/src/components/StakingDetailScreenHeader.tsx
@@ -18,7 +18,7 @@ import { AccountsRootState, selectAccountLabel } from '@suite-common/wallet-core
 const headerStyle = prepareNativeStyle(utils => ({
     flexShrink: 1,
     alignItems: 'center',
-    gap: utils.spacings.small,
+    gap: utils.spacings.sp8,
 }));
 
 const headerTextStyle = prepareNativeStyle(() => ({
diff --git a/suite-native/module-staking-management/src/components/StakingInfo.tsx b/suite-native/module-staking-management/src/components/StakingInfo.tsx
index 28d500893f7..77215956d50 100644
--- a/suite-native/module-staking-management/src/components/StakingInfo.tsx
+++ b/suite-native/module-staking-management/src/components/StakingInfo.tsx
@@ -11,8 +11,8 @@ import { StakingBalancesOverviewCard } from './StakingBalancesOverviewCard';
 import { StakingUnavailableBottomSheet } from './StakingUnavailableBottomSheet';
 
 const sectionStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.small,
-    paddingVertical: utils.spacings.large,
+    paddingHorizontal: utils.spacings.sp8,
+    paddingVertical: utils.spacings.sp24,
     flex: 1,
 }));
 
@@ -50,11 +50,11 @@ export const StakingInfo = ({ accountKey }: StakingInfoProps) => {
                 handleToggleBottomSheet={handleToggleBottomSheet}
             />
 
-            <Box marginTop="extraLarge" alignItems="center">
+            <Box marginTop="sp32" alignItems="center">
                 {/* TODO: replace with new icon once we have new package ready */}
                 {/* <Icon name="desktop" color="textSubdued" size="extraLarge" /> */}
 
-                <Box justifyContent="center" alignItems="center" marginTop="small">
+                <Box justifyContent="center" alignItems="center" marginTop="sp8">
                     <Text color="textSubdued" textAlign="center">
                         <Translation id="staking.stakingCanBeManaged" />
                     </Text>
diff --git a/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx b/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx
index b2c6ab5d2ad..3e01191d63a 100644
--- a/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx
+++ b/suite-native/module-staking-management/src/components/StakingUnavailableBottomSheet.tsx
@@ -3,7 +3,7 @@ import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 const bottomSheetElementStyle = prepareNativeStyle(utils => ({
-    marginVertical: utils.spacings.small,
+    marginVertical: utils.spacings.sp8,
 }));
 
 type StakingUnavailableBottomSheet = {
@@ -31,7 +31,7 @@ export const StakingUnavailableBottomSheet = ({
             isVisible
             isCloseDisplayed={false}
             onClose={handleToggleBottomSheet}
-            paddingHorizontal="large"
+            paddingHorizontal="sp24"
         >
             <Text
                 color="textSubdued"
diff --git a/suite-native/navigation/src/components/Screen.tsx b/suite-native/navigation/src/components/Screen.tsx
index f4b03043a8a..e4edccfc768 100644
--- a/suite-native/navigation/src/components/Screen.tsx
+++ b/suite-native/navigation/src/components/Screen.tsx
@@ -106,8 +106,8 @@ export const Screen = ({
     isScrollable = true,
     hasStatusBar = true,
     backgroundColor = 'backgroundSurfaceElevation0',
-    customVerticalPadding = nativeSpacings.small,
-    customHorizontalPadding = nativeSpacings.small,
+    customVerticalPadding = nativeSpacings.sp8,
+    customHorizontalPadding = nativeSpacings.sp8,
     extraKeyboardAvoidingViewHeight = 0,
     hasBottomInset = true,
 }: ScreenProps) => {
diff --git a/suite-native/navigation/src/components/ScreenHeader.tsx b/suite-native/navigation/src/components/ScreenHeader.tsx
index 627278d37c8..84fd4e55038 100644
--- a/suite-native/navigation/src/components/ScreenHeader.tsx
+++ b/suite-native/navigation/src/components/ScreenHeader.tsx
@@ -8,7 +8,7 @@ type ScreenHeaderProps = {
 };
 
 export const ScreenHeader = ({ hasBottomPadding, children }: ScreenHeaderProps) => (
-    <ScreenHeaderWrapper marginBottom={hasBottomPadding ? 'small' : undefined}>
+    <ScreenHeaderWrapper marginBottom={hasBottomPadding ? 'sp8' : undefined}>
         {children}
     </ScreenHeaderWrapper>
 );
diff --git a/suite-native/navigation/src/components/ScreenSubHeader.tsx b/suite-native/navigation/src/components/ScreenSubHeader.tsx
index dd9116fb4f0..e4b98447185 100644
--- a/suite-native/navigation/src/components/ScreenSubHeader.tsx
+++ b/suite-native/navigation/src/components/ScreenSubHeader.tsx
@@ -26,9 +26,9 @@ const headerStyle = prepareNativeStyle<{ customHorizontalPadding?: number }>(
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        padding: customHorizontalPadding || utils.spacings.small,
+        padding: customHorizontalPadding || utils.spacings.sp8,
         backgroundColor: utils.colors.backgroundSurfaceElevation0,
-        height: ICON_SIZE + utils.spacings.small * 2,
+        height: ICON_SIZE + utils.spacings.sp8 * 2,
     }),
 );
 
diff --git a/suite-native/navigation/src/components/TabBarItem.tsx b/suite-native/navigation/src/components/TabBarItem.tsx
index 6f1ba8d9247..7aa7859b143 100644
--- a/suite-native/navigation/src/components/TabBarItem.tsx
+++ b/suite-native/navigation/src/components/TabBarItem.tsx
@@ -21,7 +21,7 @@ const tabBarItemStyle = prepareNativeStyle(_ => ({
 const tabBarItemContainerStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    paddingTop: utils.spacings.small,
+    paddingTop: utils.spacings.sp8,
 }));
 
 const TAB_BAR_ITEM_HORIZONTAL_HIT_SLOP = 15;
diff --git a/suite-native/notifications/src/components/Notification.tsx b/suite-native/notifications/src/components/Notification.tsx
index b1e9af27fa2..2bf2d385c74 100644
--- a/suite-native/notifications/src/components/Notification.tsx
+++ b/suite-native/notifications/src/components/Notification.tsx
@@ -36,10 +36,10 @@ const notificationContainerStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingVertical: utils.spacings.extraSmall,
+    paddingVertical: utils.spacings.sp4,
     borderRadius: utils.borders.radii.round,
     backgroundColor: utils.colors.backgroundNeutralBold,
-    paddingHorizontal: utils.spacings.extraSmall,
+    paddingHorizontal: utils.spacings.sp4,
     ...utils.boxShadows.small,
 }));
 
@@ -124,10 +124,7 @@ export const Notification = ({
                         exiting={SlideOutUp.duration(EXIT_ANIMATION_DURATION)}
                     >
                         <TouchableWithoutFeedback onPress={onPress}>
-                            <HStack
-                                spacing="extraLarge"
-                                style={applyStyle(notificationContainerStyle)}
-                            >
+                            <HStack spacing="sp32" style={applyStyle(notificationContainerStyle)}>
                                 <HStack
                                     spacing={12}
                                     flexDirection="row"
@@ -139,7 +136,7 @@ export const Notification = ({
                                         {description}
                                     </Box>
                                 </HStack>
-                                <Box marginHorizontal="small">{iconRight}</Box>
+                                <Box marginHorizontal="sp8">{iconRight}</Box>
                             </HStack>
                         </TouchableWithoutFeedback>
                     </Animated.View>
diff --git a/suite-native/notifications/src/components/NotificationRenderer.tsx b/suite-native/notifications/src/components/NotificationRenderer.tsx
index 81fbebeee0a..bfcb58f64eb 100644
--- a/suite-native/notifications/src/components/NotificationRenderer.tsx
+++ b/suite-native/notifications/src/components/NotificationRenderer.tsx
@@ -13,7 +13,7 @@ const notificationContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number
         flex: 1,
         flexDirection: 'row',
         marginTop: topSafeAreaInset,
-        paddingHorizontal: utils.spacings.medium,
+        paddingHorizontal: utils.spacings.sp16,
     }),
 );
 
diff --git a/suite-native/qr-code/src/components/AddressQRCode.tsx b/suite-native/qr-code/src/components/AddressQRCode.tsx
index 7a61d13520f..807b2b528c2 100644
--- a/suite-native/qr-code/src/components/AddressQRCode.tsx
+++ b/suite-native/qr-code/src/components/AddressQRCode.tsx
@@ -36,14 +36,14 @@ export const AddressQRCode = ({ address }: AddressQRCodeProps) => {
     };
 
     return (
-        <VStack spacing="large">
+        <VStack spacing="sp24">
             <QRCode data={address} />
             <Pressable onLongPress={handleCopyAddress} style={applyStyle(addressContainer)}>
                 <Text variant="titleSmall" textAlign="center">
                     {address}
                 </Text>
             </Pressable>
-            <HStack spacing="small" justifyContent="center">
+            <HStack spacing="sp8" justifyContent="center">
                 <Button
                     size="small"
                     viewLeft="copy"
diff --git a/suite-native/qr-code/src/components/CameraPermissionError.tsx b/suite-native/qr-code/src/components/CameraPermissionError.tsx
index bb18bc31049..51cf402a398 100644
--- a/suite-native/qr-code/src/components/CameraPermissionError.tsx
+++ b/suite-native/qr-code/src/components/CameraPermissionError.tsx
@@ -4,11 +4,11 @@ import { Box, Button, Text } from '@suite-native/atoms';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 const permissionTextContainerStyle = prepareNativeStyle(({ spacings }) => ({
-    paddingTop: spacings.extraLarge,
+    paddingTop: spacings.sp32,
 }));
 
 const grantPermissionButtonStyle = prepareNativeStyle(({ spacings }) => ({
-    marginTop: spacings.large,
+    marginTop: spacings.sp24,
 }));
 
 export const CameraPermissionError = () => {
diff --git a/suite-native/qr-code/src/components/QRCodeScanner.tsx b/suite-native/qr-code/src/components/QRCodeScanner.tsx
index e89a9488e44..aa2baf9cc20 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.medium * 2;
+const SCANNER_SIZE = Dimensions.get('screen').width - nativeSpacings.sp16 * 2;
 
 const cameraContainerStyle = prepareNativeStyle(utils => ({
     borderRadius: utils.borders.radii.medium,
@@ -67,7 +67,7 @@ export const QRCodeScanner = ({ onCodeScanned }: QRCodeScannerProps) => {
 
         case PermissionStatus.GRANTED:
             return (
-                <VStack spacing="medium" justifyContent="center">
+                <VStack spacing="sp16" justifyContent="center">
                     <HStack alignItems="center" justifyContent="center">
                         <Icon
                             name="lightbulb"
diff --git a/suite-native/qr-code/src/components/ScanQRBottomSheet.tsx b/suite-native/qr-code/src/components/ScanQRBottomSheet.tsx
index 0103ca2565d..82feda67310 100644
--- a/suite-native/qr-code/src/components/ScanQRBottomSheet.tsx
+++ b/suite-native/qr-code/src/components/ScanQRBottomSheet.tsx
@@ -28,7 +28,7 @@ export const ScanQRBottomSheet = ({
     return (
         <BottomSheet isVisible={isVisible} onClose={onClose} title={title}>
             {isVisible && ( // conditionally rendered so the inside hooks are not triggered until is the bottom sheet displayed.
-                <VStack spacing={SPACING} paddingTop="extraLarge">
+                <VStack spacing={SPACING} paddingTop="sp32">
                     <QRCodeScanner onCodeScanned={handleCodeScanned} />
                     <PickQRFromGalleryButton onImagePicked={handleCodeScanned} onError={onClose} />
                 </VStack>
diff --git a/suite-native/qr-code/src/components/XpubQRCodeBottomSheet.tsx b/suite-native/qr-code/src/components/XpubQRCodeBottomSheet.tsx
index 8c136859f50..b8174ccd310 100644
--- a/suite-native/qr-code/src/components/XpubQRCodeBottomSheet.tsx
+++ b/suite-native/qr-code/src/components/XpubQRCodeBottomSheet.tsx
@@ -16,7 +16,7 @@ type XpubQRCodeBottomSheetProps = Pick<BottomSheetProps, 'isVisible'> & {
 };
 
 const buttonStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.medium,
+    paddingHorizontal: utils.spacings.sp16,
 }));
 
 export const XpubQRCodeBottomSheet = ({
@@ -70,7 +70,7 @@ export const XpubQRCodeBottomSheet = ({
 
     return (
         <BottomSheet title={sheetTitle} isVisible={isVisible} onClose={onClose}>
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <XpubQRCodeCard isXpubShown={isXpubShown} qrCodeData={qrCodeData} />
 
                 <Box style={applyStyle(buttonStyle)}>
diff --git a/suite-native/qr-code/src/components/XpubQRCodeCard.tsx b/suite-native/qr-code/src/components/XpubQRCodeCard.tsx
index e3505aafebb..ef95f81c0d1 100644
--- a/suite-native/qr-code/src/components/XpubQRCodeCard.tsx
+++ b/suite-native/qr-code/src/components/XpubQRCodeCard.tsx
@@ -14,12 +14,12 @@ const xpubCardStyle = prepareNativeStyle(utils => ({
     height: XPUB_CARD_HEIGHT,
     justifyContent: 'center',
     alignItems: 'center',
-    marginHorizontal: utils.spacings.small,
-    marginTop: utils.spacings.small,
+    marginHorizontal: utils.spacings.sp8,
+    marginTop: utils.spacings.sp8,
 }));
 
 const xpubCardTextContainerStyle = prepareNativeStyle(utils => ({
-    marginTop: utils.spacings.small,
+    marginTop: utils.spacings.sp8,
     alignItems: 'center',
     justifyContent: 'center',
 }));
diff --git a/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx b/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx
index ff7339c5951..9acc571c0d9 100644
--- a/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx
+++ b/suite-native/qr-code/src/components/XpubQRCodeWarningOverlay.tsx
@@ -4,7 +4,7 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 const overlayStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
     alignItems: 'center',
-    padding: utils.spacings.medium,
+    padding: utils.spacings.sp16,
 }));
 
 export const XpubOverlayWarning = () => {
diff --git a/suite-native/receive/src/components/AddressMismatchBottomSheet.tsx b/suite-native/receive/src/components/AddressMismatchBottomSheet.tsx
index 5c540d2f77b..616f13558a3 100644
--- a/suite-native/receive/src/components/AddressMismatchBottomSheet.tsx
+++ b/suite-native/receive/src/components/AddressMismatchBottomSheet.tsx
@@ -22,9 +22,9 @@ export const AddressMismatchBottomSheet = ({
             isVisible={isOpened}
             onClose={onClose}
             isCloseDisplayed={false}
-            paddingHorizontal="large"
+            paddingHorizontal="sp24"
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <ReceiveAddressBottomSheetHeader
                     title={<Translation id="moduleReceive.bottomSheets.addressMismatch.title" />}
                     description={
@@ -32,7 +32,7 @@ export const AddressMismatchBottomSheet = ({
                     }
                 />
 
-                <VStack spacing="small">
+                <VStack spacing="sp8">
                     <Text variant="callout">
                         <Translation id="moduleReceive.bottomSheets.addressMismatch.remember" />
                     </Text>
@@ -45,7 +45,7 @@ export const AddressMismatchBottomSheet = ({
                 </VStack>
 
                 <Box flex={1}>
-                    <VStack spacing="medium">
+                    <VStack spacing="sp16">
                         <Button
                             viewLeft="warningTriangle"
                             colorScheme="tertiaryElevation0"
diff --git a/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx b/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx
index a97efd7d953..9803f7cdc45 100644
--- a/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx
+++ b/suite-native/receive/src/components/ReceiveAccountDetailsCard.tsx
@@ -32,7 +32,7 @@ export const ReceiveAccountDetailsCard = ({
         );
 
     return (
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             <Card noPadding={!tokenContract}>
                 {tokenContract ? (
                     <TokenReceiveCard contract={tokenContract} accountKey={accountKey} />
diff --git a/suite-native/receive/src/components/ReceiveAddressCard.tsx b/suite-native/receive/src/components/ReceiveAddressCard.tsx
index 609a3ddc9d2..6c29308b835 100644
--- a/suite-native/receive/src/components/ReceiveAddressCard.tsx
+++ b/suite-native/receive/src/components/ReceiveAddressCard.tsx
@@ -66,7 +66,7 @@ export const ReceiveAddressCard = ({
     return (
         <Animated.View layout={Layout}>
             <Card {...cardAlertProps}>
-                <Box paddingVertical="small">
+                <Box paddingVertical="sp8">
                     {isReceiveApproved ? (
                         <AddressQRCode address={address} />
                     ) : (
diff --git a/suite-native/receive/src/components/ShowAddressButtons.tsx b/suite-native/receive/src/components/ShowAddressButtons.tsx
index a468b6d4ced..8a0b116c00e 100644
--- a/suite-native/receive/src/components/ShowAddressButtons.tsx
+++ b/suite-native/receive/src/components/ShowAddressButtons.tsx
@@ -36,7 +36,7 @@ export const ShowAddressButtons = ({ onShowAddress }: ShowAddressButtonsProps) =
     };
 
     return (
-        <VStack spacing="large">
+        <VStack spacing="sp24">
             <Button viewLeft="eye" size="large" onPress={handleShowAddress}>
                 <Translation
                     id={
diff --git a/suite-native/receive/src/components/ShowAddressViewOnlyBottomSheet.tsx b/suite-native/receive/src/components/ShowAddressViewOnlyBottomSheet.tsx
index c3d3987bcac..2a71ee3aa05 100644
--- a/suite-native/receive/src/components/ShowAddressViewOnlyBottomSheet.tsx
+++ b/suite-native/receive/src/components/ShowAddressViewOnlyBottomSheet.tsx
@@ -31,7 +31,7 @@ export const ShowAddressViewOnlyBottomSheet = ({
             isCloseDisplayed={false}
             onClose={handleCloseViewOnlyBottomSheet}
         >
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <VStack alignItems="center">
                     <Text variant="titleSmall">
                         <Translation id="moduleReceive.receiveAddressCard.viewOnlyWarning.title" />
@@ -40,7 +40,7 @@ export const ShowAddressViewOnlyBottomSheet = ({
                         <Translation id="moduleReceive.receiveAddressCard.viewOnlyWarning.description" />
                     </Text>
                 </VStack>
-                <VStack spacing="medium" style={applyStyle(buttonWrapperStyle)}>
+                <VStack spacing="sp16" style={applyStyle(buttonWrapperStyle)}>
                     <Button colorScheme="yellowBold" onPress={onShowAddress}>
                         <Translation id="moduleReceive.receiveAddressCard.viewOnlyWarning.primaryButton" />
                     </Button>
diff --git a/suite-native/receive/src/components/TokenReceiveCard.tsx b/suite-native/receive/src/components/TokenReceiveCard.tsx
index 7ddfff37d23..b162c6ad35d 100644
--- a/suite-native/receive/src/components/TokenReceiveCard.tsx
+++ b/suite-native/receive/src/components/TokenReceiveCard.tsx
@@ -27,7 +27,7 @@ const valuesContainerStyle = prepareNativeStyle(utils => ({
     maxWidth: '40%',
     flexShrink: 0,
     alignItems: 'flex-end',
-    paddingLeft: utils.spacings.small,
+    paddingLeft: utils.spacings.sp8,
 }));
 
 export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps) => {
@@ -53,7 +53,7 @@ export const TokenReceiveCard = ({ contract, accountKey }: TokenReceiveCardProps
         <VStack>
             <Box flexDirection="row" justifyContent="space-between" alignItems="center">
                 <Box flex={1} flexDirection="row" alignItems="center">
-                    <Box marginRight="medium">
+                    <Box marginRight="sp16">
                         <RoundedIcon name={contract} />
                     </Box>
                     <Box style={applyStyle(tokenDescriptionStyle)}>
diff --git a/suite-native/receive/src/components/UnverifiedAddress.tsx b/suite-native/receive/src/components/UnverifiedAddress.tsx
index 65a49986989..2523cd1a775 100644
--- a/suite-native/receive/src/components/UnverifiedAddress.tsx
+++ b/suite-native/receive/src/components/UnverifiedAddress.tsx
@@ -27,7 +27,7 @@ export const UnverifiedAddress = ({
     const isDeviceInViewOnlyMode = useSelector(selectIsDeviceInViewOnlyMode);
 
     return (
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             {isPortfolioTrackerDevice || isDeviceInViewOnlyMode ? (
                 <UnverifiedAddressWarning />
             ) : (
diff --git a/suite-native/receive/src/components/UnverifiedAddressDevice.tsx b/suite-native/receive/src/components/UnverifiedAddressDevice.tsx
index 693a702095b..75a7aa49af8 100644
--- a/suite-native/receive/src/components/UnverifiedAddressDevice.tsx
+++ b/suite-native/receive/src/components/UnverifiedAddressDevice.tsx
@@ -32,7 +32,7 @@ const PAN_GESTURE_THRESHOLD = 50;
 
 const deviceFrameStyle = prepareNativeStyle(utils => ({
     width: DEVICE_SCREEN_WIDTH,
-    padding: utils.spacings.extraSmall,
+    padding: utils.spacings.sp4,
     borderWidth: utils.borders.widths.small,
     borderRadius: utils.borders.radii.large / 2,
     borderColor: utils.colors.borderElevation2,
@@ -43,7 +43,7 @@ const deviceScreenStyle = prepareNativeStyle<{ isPaginationEnabled: boolean }>(
         justifyContent: 'center',
         alignItems: 'center',
         minHeight: DEVICE_SCREEN_HEIGHT,
-        paddingVertical: isPaginationEnabled ? utils.spacings.large : 40,
+        paddingVertical: isPaginationEnabled ? utils.spacings.sp24 : 40,
         maxWidth: DEVICE_SCREEN_WIDTH,
         backgroundColor: DEVICE_SCREEN_BACKGROUND_COLOR,
         borderRadius: utils.borders.radii.large / 2,
@@ -91,12 +91,12 @@ export const UnverifiedAddressDevice = ({
     };
 
     return (
-        <VStack spacing="medium" alignItems="center">
+        <VStack spacing="sp16" alignItems="center">
             <Box style={applyStyle(deviceFrameStyle)}>
                 <PanGestureHandler onGestureEvent={handlePaginationPanGesture}>
                     <Animated.View>
                         <VStack
-                            spacing="large"
+                            spacing="sp24"
                             style={applyStyle(deviceScreenStyle, { isPaginationEnabled })}
                         >
                             <Pressable onLongPress={isAddressRevealed ? handleCopyAddress : null}>
diff --git a/suite-native/receive/src/components/UnverifiedAddressDeviceHint.tsx b/suite-native/receive/src/components/UnverifiedAddressDeviceHint.tsx
index f2d9c34e861..52fd92ed795 100644
--- a/suite-native/receive/src/components/UnverifiedAddressDeviceHint.tsx
+++ b/suite-native/receive/src/components/UnverifiedAddressDeviceHint.tsx
@@ -19,7 +19,7 @@ export const UnverifiedAddressDeviceHint = () => {
 
     return (
         <Animated.View entering={FadeIn}>
-            <VStack spacing="medium">
+            <VStack spacing="sp16">
                 <Text variant="hint" color="textSubdued" textAlign="center">
                     <Translation id="moduleReceive.receiveAddressCard.deviceHint.description" />
                 </Text>
diff --git a/suite-native/receive/src/components/UnverifiedAddressWarning.tsx b/suite-native/receive/src/components/UnverifiedAddressWarning.tsx
index f4de582782f..4452240515c 100644
--- a/suite-native/receive/src/components/UnverifiedAddressWarning.tsx
+++ b/suite-native/receive/src/components/UnverifiedAddressWarning.tsx
@@ -37,7 +37,7 @@ export const UnverifiedAddressWarning = () => {
     const pictogramContentKey = isPortfolioTrackerDevice ? 'portfolioTracker' : 'viewOnly';
 
     return (
-        <Box marginVertical="medium" paddingHorizontal="medium" paddingVertical="extraLarge">
+        <Box marginVertical="sp16" paddingHorizontal="sp16" paddingVertical="sp32">
             <PictogramTitleHeader
                 variant="yellow"
                 icon="warningTriangleLight"
diff --git a/suite-native/receive/src/screens/ReceiveModalScreen.tsx b/suite-native/receive/src/screens/ReceiveModalScreen.tsx
index a2ab574dd93..f907c0a9ad9 100644
--- a/suite-native/receive/src/screens/ReceiveModalScreen.tsx
+++ b/suite-native/receive/src/screens/ReceiveModalScreen.tsx
@@ -38,19 +38,19 @@ type ScreenSubHeaderContent = {
 };
 
 const cardStyle = prepareNativeStyle(utils => ({
-    padding: utils.spacings.small,
+    padding: utils.spacings.sp8,
 }));
 
 const LoadingReceiveAccount = () => {
     const { applyStyle } = useNativeStyles();
 
     return (
-        <VStack spacing="extraLarge" alignItems="center" paddingHorizontal="small">
+        <VStack spacing="sp32" alignItems="center" paddingHorizontal="sp8">
             <Card style={applyStyle(cardStyle)}>
                 <BoxSkeleton width={SCREEN_WIDTH - 32} height={70} />
             </Card>
             <Card style={applyStyle(cardStyle)}>
-                <VStack spacing="large" alignItems="center" paddingHorizontal="large">
+                <VStack spacing="sp24" alignItems="center" paddingHorizontal="sp24">
                     <BoxSkeleton width={SCREEN_WIDTH - 80} height={200} />
                     <BoxSkeleton width={SCREEN_WIDTH - 80} height={48} borderRadius={24} />
                 </VStack>
@@ -93,7 +93,7 @@ const ReceiveModalScreenSubHeader = ({ accountKey, tokenContract }: ScreenSubHea
                             values={{ coinSymbol: networkSymbol?.toUpperCase() }}
                         />
                     </Text>
-                    <HStack spacing="small" alignItems="center">
+                    <HStack spacing="sp8" alignItems="center">
                         {networkSymbol && <CryptoIcon symbol={networkSymbol} size="extraSmall" />}
                         {accountLabel && (
                             <Text variant="highlight">
diff --git a/suite-native/toasts/src/components/Toast.tsx b/suite-native/toasts/src/components/Toast.tsx
index 422d5200374..7dca6eaa72e 100644
--- a/suite-native/toasts/src/components/Toast.tsx
+++ b/suite-native/toasts/src/components/Toast.tsx
@@ -26,15 +26,15 @@ type ToastStyle = {
 const ToastContainerStyle = prepareNativeStyle<{ backgroundColor: Color; hasIcon: boolean }>(
     (utils, { backgroundColor, hasIcon }) => ({
         backgroundColor: utils.colors[backgroundColor],
-        paddingVertical: utils.spacings.extraSmall,
-        paddingLeft: utils.spacings.extraSmall,
-        paddingRight: utils.spacings.medium,
+        paddingVertical: utils.spacings.sp4,
+        paddingLeft: utils.spacings.sp4,
+        paddingRight: utils.spacings.sp16,
         borderRadius: utils.borders.radii.round,
         extend: [
             {
                 condition: !hasIcon,
                 style: {
-                    paddingLeft: utils.spacings.medium,
+                    paddingLeft: utils.spacings.sp16,
                     paddingVertical: 14,
                 },
             },
diff --git a/suite-native/toasts/src/components/ToastRenderer.tsx b/suite-native/toasts/src/components/ToastRenderer.tsx
index e523d7afac5..77b07fa2f84 100644
--- a/suite-native/toasts/src/components/ToastRenderer.tsx
+++ b/suite-native/toasts/src/components/ToastRenderer.tsx
@@ -13,7 +13,7 @@ const toastsContainerStyle = prepareNativeStyle<{ topSafeAreaInset: number }>(
         position: 'absolute',
         justifyContent: 'center',
         marginTop: topSafeAreaInset,
-        paddingHorizontal: utils.spacings.medium,
+        paddingHorizontal: utils.spacings.sp16,
     }),
 );
 
diff --git a/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx b/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx
index acde7d96a17..a0dcfcc4a1f 100644
--- a/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/NetworkTransactionDetailSummary.tsx
@@ -76,7 +76,7 @@ export const NetworkTransactionDetailSummary = ({
     }
 
     return (
-        <VStack spacing="large">
+        <VStack spacing="sp24">
             {A.isNotEmpty(transactionInputAddresses) && (
                 <TransactionDetailAddressesSection
                     addressesType="inputs"
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
index 63066f1a183..7782f183d9d 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSection.tsx
@@ -21,17 +21,17 @@ type TransactionDetailAddressesSectionProps = {
 
 const showMoreButtonContainerStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
-    marginLeft: utils.spacings.extraLarge,
+    marginLeft: utils.spacings.sp32,
 }));
 const showMoreButtonStyle = prepareNativeStyle(_ => ({ flexDirection: 'row' }));
 
 const hiddenTransactionsCountStyle = prepareNativeStyle(utils => ({
     justifyContent: 'center',
-    marginLeft: utils.spacings.small,
+    marginLeft: utils.spacings.sp8,
     backgroundColor: utils.colors.backgroundNeutralSubtleOnElevation1,
     borderRadius: utils.borders.radii.round,
-    paddingHorizontal: utils.spacings.small,
-    paddingVertical: utils.spacings.small / 4,
+    paddingHorizontal: utils.spacings.sp8,
+    paddingVertical: utils.spacings.sp8 / 4,
 }));
 
 const addressTextStyle = prepareNativeStyle(_ => ({
@@ -43,21 +43,21 @@ const stepperDotWrapperStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     marginTop: 12,
     backgroundColor: utils.colors.backgroundSurfaceElevation2,
-    width: utils.spacings.medium,
-    height: utils.spacings.medium,
+    width: utils.spacings.sp16,
+    height: utils.spacings.sp16,
     borderRadius: utils.borders.radii.round,
 }));
 
 const stepperDotStyle = prepareNativeStyle(utils => ({
-    width: utils.spacings.extraSmall,
-    height: utils.spacings.extraSmall,
+    width: utils.spacings.sp4,
+    height: utils.spacings.sp4,
     borderRadius: utils.borders.radii.round,
     backgroundColor: utils.colors.backgroundNeutralSubdued,
 }));
 
 const coinIconWrapperStyle = prepareNativeStyle(utils => ({
     alignSelf: 'flex-start',
-    padding: utils.spacings.small * 1.5,
+    padding: utils.spacings.sp8 * 1.5,
     backgroundColor: utils.colors.backgroundSurfaceElevation2,
     borderRadius: utils.borders.radii.round,
 }));
@@ -135,7 +135,7 @@ export const TransactionDetailAddressesSection = ({
 
             {areChangeAddressesVisible && (
                 <>
-                    <CardDivider horizontalPadding="medium" />
+                    <CardDivider horizontalPadding="sp16" />
                     <SummaryRow leftComponent={<TransactionDetailSummaryStepper />}>
                         <Box flexDirection="row" justifyContent="space-between" alignItems="center">
                             <Box>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSheet.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSheet.tsx
index e1f8938d474..9eb4be0c491 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSheet.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailAddressesSheet.tsx
@@ -26,8 +26,8 @@ const addressStyle = prepareNativeStyle(_ => ({ maxWidth: '90%' }));
 
 const copyContainerStyle = prepareNativeStyle(utils => ({
     flex: 1,
-    paddingTop: utils.spacings.extraSmall,
-    marginHorizontal: utils.spacings.small,
+    paddingTop: utils.spacings.sp4,
+    marginHorizontal: utils.spacings.sp8,
 }));
 
 export const formatAddressLabel = (addressType: AddressesType, count: number) => {
@@ -60,7 +60,7 @@ const AddressRow = ({ address }: { address: string }) => {
 
 const AddressesListCard = ({ addresses }: { addresses: VinVoutAddress[] }) => (
     <Card>
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             {addresses.map(({ address }) => (
                 <AddressRow key={address} address={address} />
             ))}
@@ -112,8 +112,8 @@ export const TransactionDetailAddressesSheet = ({
                     leftLabel={formatAddressLabel('inputs', inputAddresses.length)}
                     rightLabel={formatAddressLabel('outputs', outputAddresses.length)}
                 />
-                <Box marginVertical="medium">
-                    <VStack spacing="medium">
+                <Box marginVertical="sp16">
+                    <VStack spacing="sp16">
                         <AddressesListCard addresses={targetAddresses} />
 
                         {A.isNotEmpty(changeAddresses) && (
@@ -123,7 +123,7 @@ export const TransactionDetailAddressesSheet = ({
                             </>
                         )}
                     </VStack>
-                    <Box marginTop="large" paddingHorizontal="small">
+                    <Box marginTop="sp24" paddingHorizontal="sp8">
                         <Button size="large" onPress={onClose}>
                             Close
                         </Button>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx
index 8d190a361e0..ee8c8b84155 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailData.tsx
@@ -62,7 +62,7 @@ export const TransactionDetailData = ({
     const hasIncludedCoins = isMultiTokenTransaction || isNetworkTransactionWithTokens;
 
     return (
-        <VStack spacing="medium">
+        <VStack spacing="sp16">
             {isPhishingTransaction && (
                 <AlertBox
                     variant="error"
@@ -84,7 +84,7 @@ export const TransactionDetailData = ({
                 />
             )}
             <Card borderColor="borderElevation1" style={applyStyle(cardStyle)}>
-                <VStack spacing="large">
+                <VStack spacing="sp24">
                     <TransactionDetailRow title={translate('transactions.detail.feeLabel')}>
                         <Box alignItems="flex-end">
                             <CryptoAmountFormatter
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
index e52f690f854..6f5222ebd0f 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailHeader.tsx
@@ -26,7 +26,7 @@ const ICON_SIZE = 56;
 const ICON_SPINNER_WIDTH = 3;
 
 const fiatValueStyle = prepareNativeStyle(utils => ({
-    marginTop: -utils.spacings.extraSmall,
+    marginTop: -utils.spacings.sp4,
 }));
 
 export const TransactionDetailHeader = ({
@@ -49,7 +49,7 @@ export const TransactionDetailHeader = ({
     return (
         <DiscreetTextTrigger>
             <Box alignItems="center">
-                <VStack spacing="medium" alignItems="center" justifyContent="center">
+                <VStack spacing="sp16" alignItems="center" justifyContent="center">
                     <TransactionIcon
                         transactionType={type}
                         isAnimated={isPendingTx}
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailIncludedCoins.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailIncludedCoins.tsx
index b21abdac90b..74b2fb65a60 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailIncludedCoins.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailIncludedCoins.tsx
@@ -35,7 +35,7 @@ const IncludedCoinsSheetTrigger = ({ title, onPress }: { title: string; onPress:
             <TouchableOpacity onPress={onPress}>
                 <Box flexDirection="row" alignItems="center" justifyContent="space-between">
                     <Box flexDirection="row" alignItems="center">
-                        <Box marginRight="medium">
+                        <Box marginRight="sp16">
                             <RoundedIcon name="treeStructure" />
                         </Box>
                         <Text>{title}</Text>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx
index 47d7d030140..fdb992c4aab 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheet.tsx
@@ -26,21 +26,21 @@ type InputsOutputsHeaderProps = {
 };
 
 const InputsOutputsHeader = ({ inputsCount, outputsCount }: InputsOutputsHeaderProps) => (
-    <Box flexDirection="row" justifyContent="space-between" marginBottom="medium">
-        <Box flex={1} flexDirection="row" alignItems="center" paddingLeft="small">
+    <Box flexDirection="row" justifyContent="space-between" marginBottom="sp16">
+        <Box flex={1} flexDirection="row" alignItems="center" paddingLeft="sp8">
             <Text variant="hint" color="textSubdued">
                 Inputs · {inputsCount}
             </Text>
-            <Box marginLeft="small">
+            <Box marginLeft="sp8">
                 <Icon name="receiveAlt" color="iconSubdued" size="medium" />
             </Box>
         </Box>
 
-        <Box flex={1} flexDirection="row" alignItems="center" paddingLeft="large">
+        <Box flex={1} flexDirection="row" alignItems="center" paddingLeft="sp24">
             <Text variant="hint" color="textSubdued">
                 Outputs · {outputsCount}
             </Text>
-            <Box marginLeft="small">
+            <Box marginLeft="sp8">
                 <Icon name="sendAlt" color="iconSubdued" size="medium" />
             </Box>
         </Box>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx
index 94605c0784b..cf89f9150b8 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailInputsSheetSection.tsx
@@ -73,7 +73,7 @@ export const TransactionDetailInputsSheetSection = ({
     return (
         <Box>
             {G.isString(header) ? (
-                <Box paddingLeft="small" marginVertical="small">
+                <Box paddingLeft="sp8" marginVertical="sp8">
                     <Text color="textSubdued" variant="hint">
                         {header}
                     </Text>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx
index 86cc0a3aad9..c8823af4318 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailListItem.tsx
@@ -63,7 +63,7 @@ export const TransactionDetailListItem = ({
             style={applyStyle(transactionListItemContainerStyle, { isFirst, isLast })}
         >
             <Box flexDirection="row" alignItems="center" flex={1}>
-                <Box marginRight="medium">
+                <Box marginRight="sp16">
                     <RoundedIcon name={tokenTransfer?.contract || transaction.symbol} />
                 </Box>
                 <Box style={applyStyle(CoinNameContainerStyle)}>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailParametersSheet.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailParametersSheet.tsx
index b2655aaf0c4..d50b9717698 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailParametersSheet.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailParametersSheet.tsx
@@ -95,13 +95,13 @@ export const TransactionDetailParametersSheet = ({
                         <Box
                             flexDirection="row"
                             alignItems="center"
-                            paddingLeft="medium"
+                            paddingLeft="sp16"
                             justifyContent="flex-end"
                         >
                             <Text numberOfLines={1} style={{ flexShrink: 1 }}>
                                 <TransactionIdFormatter value={transaction.txid} />
                             </Text>
-                            <Box marginLeft="small">
+                            <Box marginLeft="sp8">
                                 <IconButton
                                     iconName="copy"
                                     onPress={handleClickCopy}
@@ -115,7 +115,7 @@ export const TransactionDetailParametersSheet = ({
                         <Text>
                             <ConfirmationsCount txid={transaction.txid} accountKey={accountKey} />
                         </Text>
-                        <Box marginLeft="small">
+                        <Box marginLeft="sp8">
                             <Icon name="confirmation" />
                         </Box>
                     </TransactionDetailRow>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheet.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheet.tsx
index af5aabb22e1..44d6f2a98f1 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheet.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheet.tsx
@@ -34,7 +34,7 @@ const BottomSheetTrigger = ({
     return (
         <TouchableOpacity style={applyStyle(triggerStyle)} onPress={onPress}>
             <Box flexDirection="row" alignItems="center">
-                <Box marginRight="medium">
+                <Box marginRight="sp16">
                     <Icon name={iconName} color="iconDefault" size="mediumLarge" />
                 </Box>
                 <Text>{title}</Text>
@@ -61,9 +61,9 @@ export const TransactionDetailSheet = ({
             title={title}
             subtitle={`Transaction #${transactionId}`}
         >
-            <Box paddingTop="large">
+            <Box paddingTop="sp24">
                 {children}
-                <Box paddingHorizontal="small" marginTop="large">
+                <Box paddingHorizontal="sp8" marginTop="sp24">
                     <Button size="large" onPress={onVisibilityChange}>
                         Close
                     </Button>
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
index f15cb08b524..793f109476f 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionDetailSheets.tsx
@@ -49,7 +49,7 @@ export const TransactionDetailSheets = ({
 
     return (
         <Card style={applyStyle(cardStyle)} borderColor="borderElevation1">
-            <VStack spacing="large">
+            <VStack spacing="sp24">
                 <TransactionDetailParametersSheet
                     isVisible={expandedSheet === 'parameters'}
                     transaction={transaction}
diff --git a/suite-native/transactions/src/components/TransactionDetail/TransactionSummaryRow.tsx b/suite-native/transactions/src/components/TransactionDetail/TransactionSummaryRow.tsx
index a820a98e5b9..42aea874b02 100644
--- a/suite-native/transactions/src/components/TransactionDetail/TransactionSummaryRow.tsx
+++ b/suite-native/transactions/src/components/TransactionDetail/TransactionSummaryRow.tsx
@@ -20,7 +20,7 @@ export const SummaryRow = ({
     return (
         <Box flexDirection="row" alignItems="flex-start">
             <Box style={applyStyle(summaryColumnStyle)}>{leftComponent}</Box>
-            <Box marginLeft="medium" flex={1}>
+            <Box marginLeft="sp16" flex={1}>
                 {children}
             </Box>
         </Box>
diff --git a/suite-native/transactions/src/components/TransactionsEmptyState.tsx b/suite-native/transactions/src/components/TransactionsEmptyState.tsx
index 5574a8593a9..f0b727a9f10 100644
--- a/suite-native/transactions/src/components/TransactionsEmptyState.tsx
+++ b/suite-native/transactions/src/components/TransactionsEmptyState.tsx
@@ -17,8 +17,8 @@ const cardStyle = prepareNativeStyle(utils => ({
     alignItems: 'center',
     flex: 1,
     width: '100%',
-    paddingHorizontal: utils.spacings.large,
-    paddingVertical: utils.spacings.extraLarge,
+    paddingHorizontal: utils.spacings.sp24,
+    paddingVertical: utils.spacings.sp32,
     borderRadius: utils.borders.radii.large,
 }));
 
@@ -38,7 +38,7 @@ export const TransactionsEmptyState = ({ accountKey }: { accountKey: string }) =
     return (
         <Box style={applyStyle(wrapperStyle)}>
             <Card style={applyStyle(cardStyle)}>
-                <Box marginBottom="large" alignItems="center">
+                <Box marginBottom="sp24" alignItems="center">
                     <PictogramTitleHeader
                         variant="green"
                         icon="stack"
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
index f1950a70a26..8b7b3ffac88 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionList.tsx
@@ -66,12 +66,12 @@ type TransactionListItem =
     | (WalletAccountTransaction | MonthKey);
 
 const sectionListStyle = prepareNativeStyle(utils => ({
-    paddingHorizontal: utils.spacings.small,
+    paddingHorizontal: utils.spacings.sp8,
     flex: 1,
 }));
 
 const sectionListContainerStyle = prepareNativeStyle(utils => ({
-    paddingVertical: utils.spacings.small,
+    paddingVertical: utils.spacings.sp8,
 }));
 
 const sortKeysPendingFirst = (a: string, b: string) => {
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListGroupTitle.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListGroupTitle.tsx
index a067629ede1..9c8c61c92ba 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionListGroupTitle.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionListGroupTitle.tsx
@@ -8,8 +8,8 @@ type TransactionListGroupProps = {
 };
 
 const dateTextStyle = prepareNativeStyle(utils => ({
-    marginVertical: utils.spacings.medium,
-    marginHorizontal: utils.spacings.medium,
+    marginVertical: utils.spacings.sp16,
+    marginHorizontal: utils.spacings.sp16,
 }));
 
 export const TransactionListGroupTitle = ({ monthKey }: TransactionListGroupProps) => {
@@ -21,7 +21,7 @@ export const TransactionListGroupTitle = ({ monthKey }: TransactionListGroupProp
             : MonthNameFormatter.format(parseTransactionMonthKey(monthKey));
 
     return (
-        <Box paddingLeft="small">
+        <Box paddingLeft="sp8">
             <Text color="textSubdued" variant="hint" style={applyStyle(dateTextStyle)}>
                 {sectionTitle}
             </Text>
diff --git a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
index 34a99c5f38a..3967ddec38a 100644
--- a/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
+++ b/suite-native/transactions/src/components/TransactionsList/TransactionListItemContainer.tsx
@@ -64,15 +64,15 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
         alignItems: 'center',
         justifyContent: 'space-between',
         backgroundColor: utils.colors.backgroundSurfaceElevation1,
-        marginHorizontal: utils.spacings.small,
-        paddingHorizontal: utils.spacings.medium,
+        marginHorizontal: utils.spacings.sp8,
+        paddingHorizontal: utils.spacings.sp16,
         paddingTop: 12,
         paddingBottom: 12,
         extend: [
             {
                 condition: isFirst,
                 style: {
-                    paddingTop: utils.spacings.medium,
+                    paddingTop: utils.spacings.sp16,
                     borderTopLeftRadius: utils.borders.radii.large / 2,
                     borderTopRightRadius: utils.borders.radii.large / 2,
                 },
@@ -80,8 +80,8 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
             {
                 condition: isLast,
                 style: {
-                    paddingBottom: utils.spacings.medium,
-                    marginBottom: utils.spacings.small,
+                    paddingBottom: utils.spacings.sp16,
+                    marginBottom: utils.spacings.sp8,
                     borderBottomLeftRadius: utils.borders.radii.large / 2,
                     borderBottomRightRadius: utils.borders.radii.large / 2,
                 },
@@ -92,7 +92,7 @@ export const transactionListItemContainerStyle = prepareNativeStyle<TransactionL
 
 const titleStyle = prepareNativeStyle(utils => ({
     flexDirection: 'row',
-    gap: utils.spacings.small,
+    gap: utils.spacings.sp8,
 }));
 
 const descriptionBoxStyle = prepareNativeStyle(_ => ({
@@ -104,7 +104,7 @@ const descriptionBoxStyle = prepareNativeStyle(_ => ({
 export const valuesContainerStyle = prepareNativeStyle(utils => ({
     flexShrink: 0,
     alignItems: 'flex-end',
-    marginLeft: utils.spacings.small,
+    marginLeft: utils.spacings.sp8,
     maxWidth: '40%',
 }));
 
@@ -183,8 +183,8 @@ export const TransactionListItemContainer = ({
                     isAnimated={isTransactionPending}
                     iconColor={iconColor}
                 />
-                <Box marginLeft="medium" flex={1}>
-                    <HStack flexDirection="row" alignItems="center" spacing="extraSmall">
+                <Box marginLeft="sp16" flex={1}>
+                    <HStack flexDirection="row" alignItems="center" spacing="sp4">
                         <Box style={applyStyle(titleStyle)}>
                             <Text variant="body">{transactionTitle}</Text>
                             {isPhishingTransaction && (
diff --git a/suite-native/transactions/src/screens/TransactionDetailScreen.tsx b/suite-native/transactions/src/screens/TransactionDetailScreen.tsx
index 0db7ea50bf8..71eab0cadd9 100644
--- a/suite-native/transactions/src/screens/TransactionDetailScreen.tsx
+++ b/suite-native/transactions/src/screens/TransactionDetailScreen.tsx
@@ -71,7 +71,7 @@ export const TransactionDetailScreen = ({
 
     return (
         <Screen
-            customHorizontalPadding={utils.spacings.medium}
+            customHorizontalPadding={utils.spacings.sp16}
             screenHeader={
                 <ScreenSubHeader
                     closeActionType={closeActionType}
@@ -88,8 +88,8 @@ export const TransactionDetailScreen = ({
                 />
             }
         >
-            <VStack spacing="large">
-                <VStack spacing="extraLarge">
+            <VStack spacing="sp24">
+                <VStack spacing="sp32">
                     <TransactionDetailHeader
                         transaction={transaction}
                         tokenTransfer={tokenTransfer as TypedTokenTransfer}