diff --git a/package-lock.json b/package-lock.json
index 182374a4d..54c95cd73 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,7 +27,7 @@
         "@material-ui/lab": "^4.0.0-alpha.61",
         "@material-ui/styles": "^4.11.4",
         "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "0.8.0-pre.86",
+        "@saleor/macaw-ui": "0.8.0-pre.90",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^6.0.0",
         "@types/faker": "^5.1.6",
@@ -7950,9 +7950,9 @@
       }
     },
     "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.86",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.86.tgz",
-      "integrity": "sha512-5mUmvfFgrKS3z+uuDtjmcPPE90fTUaxjw9QFa6naGbdqzxH8FDv8nm+7ktkuPkkNQdV1ydrIpWaW/yHY0U07BA==",
+      "version": "0.8.0-pre.90",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.90.tgz",
+      "integrity": "sha512-V3x2HR/piQOaH+X/5OTFZPNJmW0HONUspXSAKfwckMPBiZ4upOg+zbqCaUvkq8Bb+qGD0J4FTwptQuW89LvrCw==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
@@ -41317,9 +41317,9 @@
       }
     },
     "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.86",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.86.tgz",
-      "integrity": "sha512-5mUmvfFgrKS3z+uuDtjmcPPE90fTUaxjw9QFa6naGbdqzxH8FDv8nm+7ktkuPkkNQdV1ydrIpWaW/yHY0U07BA==",
+      "version": "0.8.0-pre.90",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.90.tgz",
+      "integrity": "sha512-V3x2HR/piQOaH+X/5OTFZPNJmW0HONUspXSAKfwckMPBiZ4upOg+zbqCaUvkq8Bb+qGD0J4FTwptQuW89LvrCw==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
diff --git a/package.json b/package.json
index fc5a833d7..ce90b9d65 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "0.8.0-pre.86",
+    "@saleor/macaw-ui": "0.8.0-pre.90",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^6.0.0",
     "@types/faker": "^5.1.6",
diff --git a/src/apps/components/AllAppList/AllAppList.tsx b/src/apps/components/AllAppList/AllAppList.tsx
index 21f4775fd..1e25520a9 100644
--- a/src/apps/components/AllAppList/AllAppList.tsx
+++ b/src/apps/components/AllAppList/AllAppList.tsx
@@ -27,7 +27,7 @@ const AllAppList: React.FC<AllAppListProps> = ({
   }
 
   return (
-    <Box display="flex" flexDirection="column" gap="s5" marginTop="s5">
+    <Box display="flex" flexDirection="column" gap={5} marginTop={5}>
       {appsPairs.map(appPair => (
         <AppListRow
           key={appPair[0].name.en}
diff --git a/src/apps/components/AppAvatar/AppAvatar.tsx b/src/apps/components/AppAvatar/AppAvatar.tsx
index 4d1d5aeae..fb41c66a2 100644
--- a/src/apps/components/AppAvatar/AppAvatar.tsx
+++ b/src/apps/components/AppAvatar/AppAvatar.tsx
@@ -2,7 +2,7 @@ import { AppLogo } from "@dashboard/apps/types";
 import { Box, GenericAppIcon } from "@saleor/macaw-ui/next";
 import React from "react";
 
-const avatarSize = "s8";
+const avatarSize = 8;
 
 export const AppAvatar: React.FC<{
   logo?: AppLogo | undefined;
@@ -11,7 +11,7 @@ export const AppAvatar: React.FC<{
     return (
       <Box
         __backgroundColor={logo?.color}
-        padding="s1"
+        padding={1}
         width={avatarSize}
         height={avatarSize}
         borderRadius={2}
@@ -26,7 +26,7 @@ export const AppAvatar: React.FC<{
       <Box
         __backgroundColor={logo?.color}
         backgroundColor="surfaceNeutralSubdued"
-        padding="s1"
+        padding={1}
         width={avatarSize}
         height={avatarSize}
         display="flex"
diff --git a/src/apps/components/AppDetailsPage/HeaderOptions.tsx b/src/apps/components/AppDetailsPage/HeaderOptions.tsx
index 401fdcde7..be1c8e5a9 100644
--- a/src/apps/components/AppDetailsPage/HeaderOptions.tsx
+++ b/src/apps/components/AppDetailsPage/HeaderOptions.tsx
@@ -31,7 +31,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
 
   if (!data) {
     return (
-      <Box marginX="s7">
+      <Box marginX={7}>
         <Skeleton />
         <div className={classes.hr} />
       </Box>
@@ -39,7 +39,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
   }
 
   return (
-    <Box marginX="s7">
+    <Box marginX={7}>
       <div className={classes.appHeaderLinks}>
         <ExternalLink
           className={classes.headerLinkContainer}
diff --git a/src/apps/components/AppInstallPage/AppInstallPage.tsx b/src/apps/components/AppInstallPage/AppInstallPage.tsx
index eb9a3f864..069f00d9e 100644
--- a/src/apps/components/AppInstallPage/AppInstallPage.tsx
+++ b/src/apps/components/AppInstallPage/AppInstallPage.tsx
@@ -45,7 +45,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
   return (
     <DetailPageLayout gridTemplateColumns={1} withSavebar={false}>
       <DetailPageLayout.Content>
-        <Box paddingY="s6">
+        <Box paddingY={6}>
           <CardSpacer />
           <Card>
             <CardTitle
@@ -127,7 +127,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             </CardContent>
           </Card>
           <CardSpacer />
-          <Box display="flex" justifyContent="space-between" padding="s6">
+          <Box display="flex" justifyContent="space-between" padding={6}>
             <Button variant="secondary" onClick={navigateToAppsList}>
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
diff --git a/src/apps/components/AppListPage/AppListPage.tsx b/src/apps/components/AppListPage/AppListPage.tsx
index 6355153dc..ebaecceb0 100644
--- a/src/apps/components/AppListPage/AppListPage.tsx
+++ b/src/apps/components/AppListPage/AppListPage.tsx
@@ -80,15 +80,15 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
         display="flex"
         flexDirection="column"
         alignItems="center"
-        marginY="s5"
+        marginY={5}
       >
-        <Box className={classes.appContent} marginY="s5">
+        <Box className={classes.appContent} marginY={5}>
           {nothingInstalled && (
-            <Box paddingY="s3">
+            <Box paddingY={3}>
               <Text as="h3" variant="heading" color="textNeutralSubdued">
                 {intl.formatMessage(messages.installedApps)}
               </Text>
-              <Box marginTop="s3">
+              <Box marginTop={3}>
                 <Text variant="caption">
                   {intl.formatMessage(messages.nothingInstalledPlaceholder)}
                 </Text>
@@ -97,7 +97,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
           )}
           {sectionsAvailability.installed && (
             <>
-              <Box paddingX="s5" paddingY="s3">
+              <Box paddingX={5} paddingY={3}>
                 <Text as="h3" variant="heading" color="textNeutralSubdued">
                   {intl.formatMessage(messages.installedApps)}
                 </Text>
@@ -113,7 +113,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
           )}
           <MarketplaceAlert error={marketplaceError} />
           {sectionsAvailability.all && !marketplaceError && (
-            <Box marginTop="s7">
+            <Box marginTop={7}>
               <Text
                 as="h3"
                 variant="heading"
@@ -131,7 +131,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
             </Box>
           )}
           {sectionsAvailability.comingSoon && !marketplaceError && (
-            <Box marginTop="s7">
+            <Box marginTop={7}>
               <Text
                 as="h3"
                 variant="heading"
diff --git a/src/apps/components/AppListRow/AppListCardActions.tsx b/src/apps/components/AppListRow/AppListCardActions.tsx
index ce906c3ca..a7d8f668a 100644
--- a/src/apps/components/AppListRow/AppListCardActions.tsx
+++ b/src/apps/components/AppListRow/AppListCardActions.tsx
@@ -45,14 +45,14 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
     <Box
       display="flex"
       justifyContent="flex-end"
-      gap="s3"
+      gap={3}
       borderStyle="solid"
       borderWidth={1}
       borderBottomLeftRadius={3}
       borderBottomRightRadius={3}
       borderColor="neutralPlain"
       borderTopStyle="none"
-      padding="s5"
+      padding={5}
     >
       {githubForkHandler && (
         <Button
diff --git a/src/apps/components/AppListRow/AppListCardDescription.tsx b/src/apps/components/AppListRow/AppListCardDescription.tsx
index f86b3025b..8accf6d8b 100644
--- a/src/apps/components/AppListRow/AppListCardDescription.tsx
+++ b/src/apps/components/AppListRow/AppListCardDescription.tsx
@@ -18,14 +18,14 @@ const AppListCardDescription: React.FC<AppListCardDescriptionProps> = ({
     borderTopRightRadius={3}
     borderColor="neutralPlain"
     borderBottomStyle="none"
-    padding="s5"
+    padding={5}
   >
     <Box
       display="flex"
       flexDirection="row"
       alignItems="center"
-      marginBottom="s5"
-      gap="s3"
+      marginBottom={5}
+      gap={3}
     >
       <AppLogo backgroundColor={app.logo.color}>
         {app.logo.source ? (
diff --git a/src/apps/components/AppListRow/AppListCardIntegrations.tsx b/src/apps/components/AppListRow/AppListCardIntegrations.tsx
index d933efcff..32da5c8b0 100644
--- a/src/apps/components/AppListRow/AppListCardIntegrations.tsx
+++ b/src/apps/components/AppListRow/AppListCardIntegrations.tsx
@@ -22,14 +22,14 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
       display="flex"
       flexDirection="row"
       flexWrap="wrap"
-      gap="s5"
-      margin="s0"
+      gap={5}
+      margin={0}
       borderColor="neutralPlain"
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
-      paddingY="s2"
-      paddingX="s5"
+      paddingY={2}
+      paddingX={5}
       alignItems="start"
     >
       {integrations.map(integration => (
@@ -37,7 +37,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
           as="li"
           display="flex"
           alignItems="center"
-          gap="s1.5"
+          gap={1.5}
           key={integration.name}
         >
           <Box
@@ -47,7 +47,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
             borderStyle="solid"
             borderColor="neutralPlain"
             borderWidth={1}
-            padding="s1"
+            padding={1}
             display="flex"
             placeItems="center"
           >
diff --git a/src/apps/components/AppListRow/AppListCardLinks.tsx b/src/apps/components/AppListRow/AppListCardLinks.tsx
index e7f7ef414..0f2bd0714 100644
--- a/src/apps/components/AppListRow/AppListCardLinks.tsx
+++ b/src/apps/components/AppListRow/AppListCardLinks.tsx
@@ -18,13 +18,13 @@ const AppListCardLinks: React.FC<AppListCardLinksProps> = ({ links }) => {
       display="flex"
       flexDirection="row"
       flexWrap="wrap"
-      gap="s4"
+      gap={4}
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
-      paddingY="s3"
-      paddingX="s5"
+      paddingY={3}
+      paddingX={5}
     >
       {links?.map(link => (
         <Box as="span" key={link.name}>
diff --git a/src/apps/components/AppListRow/AppListRow.tsx b/src/apps/components/AppListRow/AppListRow.tsx
index 771a7b06f..a706d8e31 100644
--- a/src/apps/components/AppListRow/AppListRow.tsx
+++ b/src/apps/components/AppListRow/AppListRow.tsx
@@ -62,8 +62,8 @@ const AppListRow: React.FC<AppListRowProps> = ({
       gridTemplateColumns={2}
       __gridTemplateRows="repeat(4, auto)"
       gridAutoFlow={isSingleApp ? "column" : "row"}
-      columnGap="s5"
-      padding="s5"
+      columnGap={5}
+      padding={5}
     >
       {appPair.map(app => (
         <AppListCardDescription key={app.name.en + "description"} app={app} />
diff --git a/src/apps/components/AppListRow/AppLogo.tsx b/src/apps/components/AppListRow/AppLogo.tsx
index f1903d7ab..fe179e725 100644
--- a/src/apps/components/AppListRow/AppLogo.tsx
+++ b/src/apps/components/AppListRow/AppLogo.tsx
@@ -10,8 +10,8 @@ export const AppLogo: React.FC<AppLogoProps> = ({
   children,
 }) => (
   <Box
-    width="s10"
-    height="s10"
+    width={10}
+    height={10}
     display="flex"
     placeItems="center"
     borderRadius={3}
diff --git a/src/apps/components/AppPage/AppPageNav.tsx b/src/apps/components/AppPage/AppPageNav.tsx
index c7c453e2c..6f4a95603 100644
--- a/src/apps/components/AppPage/AppPageNav.tsx
+++ b/src/apps/components/AppPage/AppPageNav.tsx
@@ -39,9 +39,9 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
         justifyContent="space-between"
         width="100%"
       >
-        <Box display="flex" gap="s4" alignItems="center">
+        <Box display="flex" gap={4} alignItems="center">
           <TopNavLink to={goBackLink} variant="tertiary" />
-          <Box display="flex" gap="s2" alignItems="center">
+          <Box display="flex" gap={2} alignItems="center">
             <AppAvatar />
             <Box display="flex" flexDirection="column">
               <Text variant="heading">{name}</Text>
@@ -62,7 +62,7 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
           </Box>
         </Box>
       </Box>
-      <Box display="flex" gap="s1.5">
+      <Box display="flex" gap={1.5}>
         <Button
           whiteSpace="nowrap"
           variant="secondary"
diff --git a/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx b/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
index b54cda27b..a41383599 100644
--- a/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
+++ b/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
@@ -17,7 +17,7 @@ export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
   return (
     <Box
       display="flex"
-      gap="s1.5"
+      gap={1.5}
       onClick={e => {
         try {
           e.preventDefault();
diff --git a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
index 50787fa18..bfc9df2e2 100644
--- a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
+++ b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
@@ -28,7 +28,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
       disabled={!app.isActive}
     >
       <List.Item
-        padding="s4"
+        padding={4}
         borderTopStyle="solid"
         borderWidth={1}
         borderColor="neutralPlain"
@@ -43,7 +43,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         cursor={app.isActive ? "pointer" : "not-allowed"}
       >
         <Box
-          gap="s2"
+          gap={2}
           alignItems="center"
           display="grid"
           __gridTemplateColumns="1fr auto"
@@ -51,11 +51,11 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
           <AppAvatar logo={logo} />
           <Box
             display="flex"
-            gap="s1"
+            gap={1}
             flexDirection="column"
             alignItems="flex-start"
           >
-            <Box display="flex" gap="s2">
+            <Box display="flex" gap={2}>
               <Text variant="bodyStrong">{app.name}</Text>
               <Text variant="body" color="textNeutralSubdued">
                 {`v${app.version}`}
@@ -84,12 +84,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         </Box>
         <Box
           display="flex"
-          marginTop={{ mobile: "s1.5", desktop: "s0" }}
+          marginTop={{ mobile: 1.5, desktop: 0 }}
           flexDirection="row"
           justifyContent={{ mobile: "flex-end", desktop: "flex-start" }}
-          gap="s3"
+          gap={3}
         >
-          <Box marginLeft="auto" display="flex" alignItems="center" gap="s5">
+          <Box marginLeft="auto" display="flex" alignItems="center" gap={5}>
             {!app.isActive && (
               <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage {...messages.appDisabled} />
diff --git a/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx b/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
index bf860606e..1eaf6bd43 100644
--- a/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
+++ b/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
@@ -32,7 +32,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
 
   return (
     <List.Item
-      padding="s4"
+      padding={4}
       borderTopStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
@@ -42,7 +42,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
     >
       <Box
         display="flex"
-        gap="s2"
+        gap={2}
         alignItems="center"
         justifyContent={{ mobile: "space-between", desktop: "flex-start" }}
       >
@@ -75,7 +75,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
           <>
             <Tooltip>
               <Tooltip.Trigger>
-                <Box display="flex" placeItems="center" gap="s1" marginX="s1">
+                <Box display="flex" placeItems="center" gap={1} marginX={1}>
                   <WarningIcon size="small" color="iconCriticalSubdued" />
                   <Text
                     variant="caption"
diff --git a/src/channels/components/ChannelForm/ChannelForm.tsx b/src/channels/components/ChannelForm/ChannelForm.tsx
index 8700ef375..202a17ee7 100644
--- a/src/channels/components/ChannelForm/ChannelForm.tsx
+++ b/src/channels/components/ChannelForm/ChannelForm.tsx
@@ -226,7 +226,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             onChange={onDefaultCountryChange}
           />
           <FormSpacer />
-          <Box display="flex" gap="s1.5" alignItems="center">
+          <Box display="flex" gap={1.5} alignItems="center">
             <ControlledSwitch
               data-test-id="order-settings-mark-as-paid"
               disabled={disabled}
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index 1c9e9882f..0ad333715 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -75,7 +75,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           backgroundColor="subdued"
           borderStyle="solid"
           position="sticky"
-          top="s0"
+          top={0}
           borderLeftWidth={0}
           borderTopWidth={0}
           borderBottomWidth={0}
@@ -89,9 +89,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           <Box
             ref={appActionAnchor}
             position="sticky"
-            bottom="s0"
-            left="s0"
-            right="s0"
+            bottom={0}
+            left={0}
+            right={0}
             backgroundColor="plain"
             borderTopWidth={1}
             borderTopStyle="solid"
diff --git a/src/components/AppLayout/LimitsInfo.tsx b/src/components/AppLayout/LimitsInfo.tsx
index fc96afa29..6f51f2f38 100644
--- a/src/components/AppLayout/LimitsInfo.tsx
+++ b/src/components/AppLayout/LimitsInfo.tsx
@@ -9,7 +9,7 @@ interface LimitsInfoProps {
  * @deprecated use `Text` instead
  */
 export const LimitsInfo: React.FC<LimitsInfoProps> = ({ text }) => (
-  <Box position="absolute" left="s7" bottom="s1">
+  <Box position="absolute" left={7} bottom={1}>
     {text}
   </Box>
 );
diff --git a/src/components/AppLayout/ListFilters/ListFilters.tsx b/src/components/AppLayout/ListFilters/ListFilters.tsx
index 666b5d2f8..ffcfc1901 100644
--- a/src/components/AppLayout/ListFilters/ListFilters.tsx
+++ b/src/components/AppLayout/ListFilters/ListFilters.tsx
@@ -30,11 +30,11 @@ export const ListFilters = ({
     <Box
       display="grid"
       gridTemplateColumns={2}
-      gap="s4"
-      paddingBottom="s2"
-      paddingX="s6"
+      gap={4}
+      paddingBottom={2}
+      paddingX={6}
     >
-      <Box display="flex" alignItems="center" gap="s4">
+      <Box display="flex" alignItems="center" gap={4}>
         <FiltersSelect
           errorMessages={errorMessages}
           menu={filterStructure}
diff --git a/src/components/AppLayout/TopNav/Menu.tsx b/src/components/AppLayout/TopNav/Menu.tsx
index 2532975b1..bb12c87a1 100644
--- a/src/components/AppLayout/TopNav/Menu.tsx
+++ b/src/components/AppLayout/TopNav/Menu.tsx
@@ -31,7 +31,7 @@ export const Menu: React.FC<TopNavMenuProps> = ({ items, dataTestId }) => (
     <Dropdown.Content align="end">
       <Box>
         <List
-          padding="s2"
+          padding={2}
           borderRadius={4}
           boxShadow="overlay"
           backgroundColor="surfaceNeutralPlain"
@@ -40,8 +40,8 @@ export const Menu: React.FC<TopNavMenuProps> = ({ items, dataTestId }) => (
             <Dropdown.Item key={item.label}>
               <List.Item
                 borderRadius={4}
-                paddingX="s1.5"
-                paddingY="s2"
+                paddingX={1.5}
+                paddingY={2}
                 onClick={item.onSelect}
                 data-test-id={item.testId}
               >
diff --git a/src/components/AppLayout/TopNav/TopNavLink.tsx b/src/components/AppLayout/TopNav/TopNavLink.tsx
index 203d610e9..421778957 100644
--- a/src/components/AppLayout/TopNav/TopNavLink.tsx
+++ b/src/components/AppLayout/TopNav/TopNavLink.tsx
@@ -6,7 +6,7 @@ export const TopNavLink: React.FC<{
   to: string;
   variant?: "secondary" | "tertiary";
 }> = ({ to, variant = "secondary" }) => (
-  <Link to={to} className={sprinkles({ marginRight: "s2" })}>
+  <Link to={to} className={sprinkles({ marginRight: 2 })}>
     <Button
       icon={<ArrowLeftIcon />}
       variant={variant}
diff --git a/src/components/AppLayout/TopNav/TopNavWrapper.tsx b/src/components/AppLayout/TopNav/TopNavWrapper.tsx
index 66174e56e..96b5e565b 100644
--- a/src/components/AppLayout/TopNav/TopNavWrapper.tsx
+++ b/src/components/AppLayout/TopNav/TopNavWrapper.tsx
@@ -10,8 +10,8 @@ export const TopNavWrapper: React.FC<{ withoutBorder?: boolean }> = ({
   <Box
     display="flex"
     alignItems="center"
-    paddingX="s6"
-    paddingY="s5"
+    paddingX={6}
+    paddingY={5}
     borderBottomWidth={withoutBorder ? 0 : 1}
     borderBottomStyle="solid"
     borderColor="neutralPlain"
diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx
index 86df22f3f..26347e9d4 100644
--- a/src/components/Attributes/AttributeRow.tsx
+++ b/src/components/Attributes/AttributeRow.tsx
@@ -199,11 +199,11 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
       );
     case AttributeInputTypeEnum.BOOLEAN:
       return (
-        <Box as="li" display="flex" gap="s2" alignItems="center" padding="s1">
+        <Box as="li" display="flex" gap={2} alignItems="center" padding={1}>
           <Box data-test-id="attribute-value">
             <Box
               display="flex"
-              gap="s0.5"
+              gap={0.5}
               flexDirection="column"
               alignItems="flex-end"
             >
@@ -224,7 +224,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             as="label"
             htmlFor={`attribute:${attribute.label}`}
             display="flex"
-            gap="s1"
+            gap={1}
             cursor="pointer"
           >
             <Text>{attribute.label}</Text>
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index 02ed48bcf..2389e025b 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -76,7 +76,7 @@ export const Attributes: React.FC<AttributesProps> = ({
         {title || intl.formatMessage(messages.header)}
       </DashboardCard.Title>
       <DashboardCard.Content>
-        <Box display="flex" flexDirection="column" gap="s2">
+        <Box display="flex" flexDirection="column" gap={2}>
           <Accordion defaultValue="attributes-accordion">
             <Accordion.Item value="attributes-accordion">
               <Accordion.Trigger buttonDataTestId="attributes-expand">
diff --git a/src/components/Attributes/BasicAttributeRow.tsx b/src/components/Attributes/BasicAttributeRow.tsx
index dbfe80b0c..7feeb4469 100644
--- a/src/components/Attributes/BasicAttributeRow.tsx
+++ b/src/components/Attributes/BasicAttributeRow.tsx
@@ -19,18 +19,18 @@ export const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
     as="li"
     justifyContent="space-between"
     alignItems="center"
-    paddingY="s6"
-    paddingX="s0.5"
+    paddingY={6}
+    paddingX={0.5}
     display="grid"
     gridTemplateColumns={2}
-    gap="s5"
+    gap={5}
   >
     <Box
       data-test-id="attribute-label"
       as="label"
       htmlFor={id}
       display="flex"
-      gap="s1"
+      gap={1}
       cursor={clickableLabel ? "pointer" : "auto"}
     >
       <Text>{label}</Text>
diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx
index 4a2ca73d6..8e23dae0d 100644
--- a/src/components/Attributes/ExtendedAttributeRow.tsx
+++ b/src/components/Attributes/ExtendedAttributeRow.tsx
@@ -18,7 +18,7 @@ const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
         display="flex"
         justifyContent="space-between"
         alignItems="center"
-        paddingY="s6"
+        paddingY={6}
       >
         <Text data-test-id="attribute-label">{label}</Text>
         <Button
diff --git a/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx b/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
index 311649cf9..af7f5c8b5 100644
--- a/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
+++ b/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
@@ -30,7 +30,7 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
     <Dropdown.Content align="end">
       <Box>
         <List
-          padding="s2"
+          padding={2}
           borderRadius={4}
           boxShadow="overlay"
           backgroundColor="surfaceNeutralPlain"
@@ -39,8 +39,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             <Dropdown.Item>
               <List.Item
                 borderRadius={4}
-                paddingX="s1.5"
-                paddingY="s2"
+                paddingX={1.5}
+                paddingY={2}
                 onClick={item.onSelect}
                 data-test-id={item.testId}
               >
diff --git a/src/components/Card/Content.tsx b/src/components/Card/Content.tsx
index 89ad0b18b..a7bd6e4be 100644
--- a/src/components/Card/Content.tsx
+++ b/src/components/Card/Content.tsx
@@ -2,7 +2,7 @@ import { Box, Sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 
 export const Content: React.FC<Sprinkles> = ({ children, ...rest }) => (
-  <Box paddingX="s6" {...rest}>
+  <Box paddingX={6} {...rest}>
     {children}
   </Box>
 );
diff --git a/src/components/Card/Root.tsx b/src/components/Card/Root.tsx
index b49197057..1789b3cf8 100644
--- a/src/components/Card/Root.tsx
+++ b/src/components/Card/Root.tsx
@@ -2,7 +2,7 @@ import { Box, Sprinkles } from "@saleor/macaw-ui/next";
 import React from "react";
 
 export const Root: React.FC<Sprinkles> = ({ children, ...rest }) => (
-  <Box display="flex" flexDirection="column" gap="s6" {...rest}>
+  <Box display="flex" flexDirection="column" gap={6} {...rest}>
     {children}
   </Box>
 );
diff --git a/src/components/Card/Title.tsx b/src/components/Card/Title.tsx
index 4db7848b4..a58114d23 100644
--- a/src/components/Card/Title.tsx
+++ b/src/components/Card/Title.tsx
@@ -2,7 +2,7 @@ import { Box, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 
 export const Title: React.FC = ({ children }) => (
-  <Box paddingX="s6" paddingTop="s6">
+  <Box paddingX={6} paddingTop={6}>
     <Text variant="heading">{children}</Text>
   </Box>
 );
diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
index e1d580a6f..987f5b095 100644
--- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
+++ b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
@@ -71,7 +71,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
   );
 
   return (
-    <Box display="flex" gap="s3" paddingTop="s3" flexDirection="column">
+    <Box display="flex" gap={3} paddingTop={3} flexDirection="column">
       <RadioGroup
         value={String(isPublished)}
         onValueChange={value => {
@@ -85,14 +85,14 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
         disabled={disabled}
         display="flex"
         flexDirection="column"
-        gap="s3"
+        gap={3}
       >
         <RadioGroup.Item
           id={`${id}-isPublished-true`}
           value="true"
           name="isPublished"
         >
-          <Box display="flex" alignItems="baseline" gap="s2">
+          <Box display="flex" alignItems="baseline" gap={2}>
             <Text>{messages.visibleLabel}</Text>
             {isPublished &&
               publicationDate &&
@@ -109,7 +109,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
           value="false"
           name="isPublished"
         >
-          <Box display="flex" alignItems="baseline" gap="s2">
+          <Box display="flex" alignItems="baseline" gap={2}>
             <Text>{messages.hiddenLabel}</Text>
             {publicationDate &&
               !isPublished &&
@@ -122,7 +122,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
         </RadioGroup.Item>
       </RadioGroup>
       {!isPublished && (
-        <Box display="flex" flexDirection="column" alignItems="start" gap="s1">
+        <Box display="flex" flexDirection="column" alignItems="start" gap={1}>
           <Checkbox
             onCheckedChange={(checked: boolean) => setPublicationDate(checked)}
             checked={isPublicationDate}
@@ -172,13 +172,13 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
             }
             display="flex"
             flexDirection="column"
-            gap="s3"
+            gap={3}
           >
             <RadioGroup.Item
               id={`channel:isAvailableForPurchase:${id}-true`}
               value="true"
             >
-              <Box display="flex" __alignItems="baseline" gap="s2">
+              <Box display="flex" __alignItems="baseline" gap={2}>
                 <Text>{messages.availableLabel}</Text>
                 {isAvailable &&
                   availableForPurchase &&
@@ -193,7 +193,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
               id={`channel:isAvailableForPurchase:${id}-false`}
               value="false"
             >
-              <Box display="flex" __alignItems="baseline" gap="s2">
+              <Box display="flex" __alignItems="baseline" gap={2}>
                 <Text>{messages.unavailableLabel}</Text>
                 {availableForPurchase && !isAvailable && (
                   <Text variant="caption" color="textNeutralSubdued">
@@ -206,7 +206,7 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
           {!isAvailable && (
             <Box
               display="flex"
-              gap="s1"
+              gap={1}
               flexDirection="column"
               alignItems="start"
             >
diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
index 9e7723d37..c12953bcb 100644
--- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
@@ -15,12 +15,12 @@ export const ChannelAvailabilityItemWrapper: React.FC<
   ChannelContentWrapperProps
 > = ({ data: { name }, messages, children }) => (
   <Accordion data-test-id="channel-availability-item">
-    <Accordion.Item value="channel-availability-item" gap="s9">
+    <Accordion.Item value="channel-availability-item" gap={9}>
       <Accordion.Trigger buttonDataTestId="expand-icon">
         <Text variant={"bodyEmp"}>{name}</Text>
         <Label text={messages.availableDateText} />
       </Accordion.Trigger>
-      <Accordion.Content paddingLeft="s3">{children}</Accordion.Content>
+      <Accordion.Content paddingLeft={3}>{children}</Accordion.Content>
     </Accordion.Item>
   </Accordion>
 );
diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
index e1ea8f01b..99ca0f56c 100644
--- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
@@ -42,7 +42,7 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
     <DashboardCard>
       <DashboardCard.Title>
         <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Box display={"flex"} flexDirection={"column"} gap="s1">
+          <Box display={"flex"} flexDirection={"column"} gap={1}>
             <div>
               {intl.formatMessage({
                 id: "5A6/2C",
@@ -70,8 +70,8 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
           </RequirePermissions>
         </Box>
       </DashboardCard.Title>
-      <DashboardCard.Content gap="s1" display="flex" flexDirection="column">
-        <Box display="flex" flexDirection="column" gap="s5">
+      <DashboardCard.Content gap={1} display="flex" flexDirection="column">
+        <Box display="flex" flexDirection="column" gap={5}>
           {children}
         </Box>
       </DashboardCard.Content>
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index 036612539..fb3adb3f4 100644
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/src/components/Datagrid/Datagrid.tsx
@@ -425,7 +425,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
 
   if (loading) {
     return (
-      <Box display="flex" justifyContent="center" marginY="s9">
+      <Box display="flex" justifyContent="center" marginY={9}>
         <CircularProgress />
       </Box>
     );
@@ -566,7 +566,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
               </div>
             </>
           ) : (
-            <Box padding="s6" textAlign="center">
+            <Box padding={6} textAlign="center">
               <Text size="small">{emptyText}</Text>
             </Box>
           )}
diff --git a/src/components/Datagrid/styles.ts b/src/components/Datagrid/styles.ts
index d5522e009..a7cd869f3 100644
--- a/src/components/Datagrid/styles.ts
+++ b/src/components/Datagrid/styles.ts
@@ -27,7 +27,7 @@ const useStyles = makeStyles(
         display: "flex",
         alignItems: "center",
         justifyContent: "flex-end",
-        padding: vars.space["s1.5"],
+        padding: vars.spacing[1.5],
       },
       columnPicker: {
         display: "flex",
@@ -40,7 +40,7 @@ const useStyles = makeStyles(
       },
       ghostIcon: {
         color: vars.colors.foreground.iconNeutralPlain,
-        padding: vars.space.s1,
+        padding: vars.spacing[1],
       },
       portal: {
         "& input::-webkit-outer-spin-button, input::-webkit-inner-spin-button":
@@ -74,7 +74,7 @@ const useStyles = makeStyles(
           letterSpacing: vars.letterSpacing.bodyStrongSmall,
           lineHeight: vars.lineHeight.bodyEmpMedium,
           fontWeight: vars.fontWeight.bodySmall,
-          padding: vars.space.s1,
+          padding: vars.spacing[1],
           outline: 0,
         },
         "& input[type='number']:not([class*='MuiInputBase'])": {
diff --git a/src/components/DateTimeField/DateTimeField.tsx b/src/components/DateTimeField/DateTimeField.tsx
index 2e2e260ca..9ed6d7e00 100644
--- a/src/components/DateTimeField/DateTimeField.tsx
+++ b/src/components/DateTimeField/DateTimeField.tsx
@@ -29,7 +29,7 @@ export const DateTimeField: React.FC<DateTimeFieldProps> = ({
   const parsedValue = value ? splitDateTime(value) : { date: "", time: "" };
 
   return (
-    <Box display="flex" gap="s0.5">
+    <Box display="flex" gap={0.5}>
       <TextField
         fullWidth
         disabled={disabled}
diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx
index c25b34a3a..f15011964 100644
--- a/src/components/FileUploadField/FileUploadField.tsx
+++ b/src/components/FileUploadField/FileUploadField.tsx
@@ -57,7 +57,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
     <>
       <Box display="flex" justifyContent="flex-end">
         {file.label ? (
-          <Box display="flex" gap="s2" alignItems="center">
+          <Box display="flex" gap={2} alignItems="center">
             <Text variant="caption">
               {loading ? (
                 <Skeleton />
diff --git a/src/components/FilterPresetsSelect/FilterPresetItem.tsx b/src/components/FilterPresetsSelect/FilterPresetItem.tsx
index b977495dc..92a0e824b 100644
--- a/src/components/FilterPresetsSelect/FilterPresetItem.tsx
+++ b/src/components/FilterPresetsSelect/FilterPresetItem.tsx
@@ -19,10 +19,10 @@ export const FilterPresetItem = ({
   return (
     <Dropdown.Item>
       <List.Item
-        paddingLeft="s1.5"
-        paddingRight="s8"
-        paddingY="s1"
-        gap="s3"
+        paddingLeft={1.5}
+        paddingRight={8}
+        paddingY={1}
+        gap={3}
         borderRadius={2}
         position="relative"
         display="flex"
@@ -40,7 +40,7 @@ export const FilterPresetItem = ({
             zIndex="2"
             position="absolute"
             __top="50%"
-            right="s1.5"
+            right={1.5}
             __transform="translateY(-50%)"
             onClick={onRemove}
             display="flex"
diff --git a/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx b/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx
index c2e9fe760..656c5ee41 100644
--- a/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx
+++ b/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx
@@ -118,21 +118,21 @@ export const FilterPresetsSelect = ({
             __minWidth={175}
             __maxHeight={400}
             overflowY="auto"
-            padding="s1"
+            padding={1}
             borderRadius={3}
             boxShadow="overlay"
             borderColor="neutralHighlight"
             borderStyle="solid"
             borderWidth={1}
             width="100%"
-            marginTop="s0.5"
+            marginTop={0.5}
             backgroundColor="surfaceNeutralPlain"
           >
             <Dropdown.Item>
               <List.Item
-                paddingX="s1.5"
-                paddingY="s1"
-                gap="s3"
+                paddingX={1.5}
+                paddingY={1}
+                gap={3}
                 borderRadius={3}
                 onClick={onSelectAll}
               >
@@ -143,14 +143,14 @@ export const FilterPresetsSelect = ({
             </Dropdown.Item>
             {savedPresets.length > 0 && (
               <Box
-                height="spx"
-                marginY="s1"
+                height="px"
+                marginY={1}
                 __backgroundColor={vars.colors.border.neutralHighlight}
                 __marginLeft={-4}
                 __width={getSeparatorWidth("4px")}
               />
             )}
-            <Box display="flex" flexDirection="column" gap="s0.5">
+            <Box display="flex" flexDirection="column" gap={0.5}>
               {savedPresets.map((preset, index) => (
                 <FilterPresetItem
                   isActive={activePreset === index + 1}
@@ -176,7 +176,7 @@ export const FilterPresetsSelect = ({
         <Button
           data-test-id="update-preset-button"
           className={sprinkles({
-            marginLeft: "s3",
+            marginLeft: 3,
           })}
           onClick={() => onUpdate(savedPresets[activePreset - 1])}
           variant="secondary"
@@ -191,7 +191,7 @@ export const FilterPresetsSelect = ({
             <Button
               data-test-id="add-preset-button"
               className={sprinkles({
-                marginLeft: "s3",
+                marginLeft: 3,
               })}
               icon={<PlusIcon />}
               onClick={onSave}
diff --git a/src/components/Hr.tsx b/src/components/Hr.tsx
index 8d7fd671d..8585af3ca 100644
--- a/src/components/Hr.tsx
+++ b/src/components/Hr.tsx
@@ -13,7 +13,7 @@ export const Hr: React.FC<{
     backgroundColor="surfaceNeutralDepressed"
     borderWidth={0}
     width="100%"
-    height={1}
+    height="px"
   />
 );
 
diff --git a/src/components/LimitReachedAlert.tsx b/src/components/LimitReachedAlert.tsx
index 0ebdd3bdd..2ec0849c7 100644
--- a/src/components/LimitReachedAlert.tsx
+++ b/src/components/LimitReachedAlert.tsx
@@ -13,7 +13,7 @@ const LimitReachedAlert: React.FC<LimitReachedAlertProps> = props => (
     className={clsx(
       sprinkles({
         gridColumn: "8",
-        marginBottom: "s2",
+        marginBottom: 2,
       }),
       "remove-icon-background",
     )}
diff --git a/src/components/Metadata/Metadata.tsx b/src/components/Metadata/Metadata.tsx
index c0a287f5f..3eb489352 100644
--- a/src/components/Metadata/Metadata.tsx
+++ b/src/components/Metadata/Metadata.tsx
@@ -68,7 +68,7 @@ export const Metadata: React.FC<MetadataProps> = memo(({ data, onChange }) => {
   };
 
   return (
-    <Box display="grid" gap="s2" paddingBottom="s6">
+    <Box display="grid" gap={2} paddingBottom={6}>
       <MetadataCard
         data={data?.metadata}
         isPrivate={false}
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index 55b8e0e75..de10a2f91 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -60,7 +60,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
       data-test-id="metadata-editor"
       data-test-is-private={isPrivate}
       data-test-expanded={expanded}
-      gap="s1"
+      gap={1}
     >
       <DashboardCard.Title>
         <Box
@@ -124,7 +124,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                 <Table>
                   <TableHead>
                     <TableRowLink>
-                      <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                      <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                         <Text variant="caption" color="textNeutralSubdued">
                           <FormattedMessage
                             id="nudPsY"
@@ -133,7 +133,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                           />
                         </Text>
                       </TableCell>
-                      <TableCell style={{ paddingLeft: vars.space.s8 }}>
+                      <TableCell style={{ paddingLeft: vars.spacing[8] }}>
                         <Text variant="caption" color="textNeutralSubdued">
                           <FormattedMessage
                             id="LkuDEb"
@@ -145,7 +145,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                       <TableCell
                         style={{
                           textAlign: "end",
-                          paddingRight: vars.space.s6,
+                          paddingRight: vars.spacing[6],
                         }}
                       >
                         <Text variant="caption" color="textNeutralSubdued">
@@ -161,7 +161,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                   <TableBody>
                     {data.map((field, fieldIndex) => (
                       <TableRowLink data-test-id="field" key={fieldIndex}>
-                        <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                        <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                           <TextField
                             InputProps={{
                               classes: {
@@ -194,7 +194,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                             value={field.value}
                           />
                         </TableCell>
-                        <TableCell style={{ paddingRight: vars.space.s6 }}>
+                        <TableCell style={{ paddingRight: vars.spacing[6] }}>
                           <Box display="flex" justifyContent="flex-end">
                             <Button
                               variant="secondary"
@@ -217,7 +217,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                   </TableBody>
                 </Table>
               )}
-              <DashboardCard.Content marginTop="s2" paddingLeft="s6">
+              <DashboardCard.Content marginTop={2} paddingLeft={6}>
                 <Button
                   variant="secondary"
                   data-test-id="add-field"
diff --git a/src/components/PageSectionHeader/PageSectionHeader.tsx b/src/components/PageSectionHeader/PageSectionHeader.tsx
index e72e77382..4067ba4c3 100644
--- a/src/components/PageSectionHeader/PageSectionHeader.tsx
+++ b/src/components/PageSectionHeader/PageSectionHeader.tsx
@@ -12,7 +12,7 @@ const PageSectionHeader: React.FC<PageSectionHeaderProps> = props => {
   const { title, description } = props;
 
   return (
-    <Box paddingTop="s6">
+    <Box paddingTop={6}>
       {title && <Typography variant="h5">{title}</Typography>}
       {title && description && <VerticalSpacer />}
       {description && <Typography variant="body2">{description}</Typography>}
diff --git a/src/components/RichTextEditor/styles.ts b/src/components/RichTextEditor/styles.ts
index 759d53d4f..470be757d 100644
--- a/src/components/RichTextEditor/styles.ts
+++ b/src/components/RichTextEditor/styles.ts
@@ -123,7 +123,7 @@ const useStyles = makeStyles(
         transition: theme.transitions.duration.short + "ms",
         padding: theme.spacing(3, 2),
         paddingBottom: theme.spacing(),
-        paddingLeft: vars.space[4],
+        paddingLeft: vars.spacing[4],
         "&:hover": {
           border: `1px solid ${vars.colors.border.neutralHighlight}`,
         },
diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index 8d318ef8b..65cfa0cbf 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -131,13 +131,13 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
       <DashboardCard.Content>
         {shouldDisplayHelperText && <Text>{helperText}</Text>}
         {expanded && (
-          <Box display="grid" gap="s2">
+          <Box display="grid" gap={2}>
             <Box>
               <Input
                 error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
                 name={SeoField.slug}
                 label={
-                  <Box display="flex" gap="s1">
+                  <Box display="flex" gap={1}>
                     <Box as="span">
                       <FormattedMessage defaultMessage="Slug" id="IoDlcd" />
                     </Box>
@@ -174,7 +174,7 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
               maxLength={maxTitleLength}
               placeholder={titlePlaceholder}
               label={
-                <Box display="flex" gap="s1">
+                <Box display="flex" gap={1}>
                   <Box as="span">
                     <FormattedMessage
                       defaultMessage="Search engine title"
diff --git a/src/components/Sidebar/MountingPoint.tsx b/src/components/Sidebar/MountingPoint.tsx
index eff37337b..748224304 100644
--- a/src/components/Sidebar/MountingPoint.tsx
+++ b/src/components/Sidebar/MountingPoint.tsx
@@ -10,13 +10,7 @@ export const MountingPoint = () => {
     theme === "defaultLight" ? sideBarDefaultLogo : sideBarDefaultLogoDarkMode;
 
   return (
-    <Box
-      display="flex"
-      gap="s3"
-      paddingX="s4"
-      paddingY="s5"
-      alignItems="center"
-    >
+    <Box display="flex" gap={3} paddingX={4} paddingY={5} alignItems="center">
       <Avatar.Store src={logo} scheme="decorative2" size="small" />
       <Text variant="bodyStrong" size="small">
         Saleor Dashboard
diff --git a/src/components/Sidebar/menu/Divider.tsx b/src/components/Sidebar/menu/Divider.tsx
index 682f6061b..9850af687 100644
--- a/src/components/Sidebar/menu/Divider.tsx
+++ b/src/components/Sidebar/menu/Divider.tsx
@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const Divider: React.FC<Props> = ({ menuItem }) => (
-  <List.Divider paddingY={menuItem.paddingY ?? "s1.5"} paddingX="s1">
+  <List.Divider paddingY={menuItem.paddingY ?? 1.5} paddingX={1}>
     <Text variant="caption" size="small" color="textNeutralSubdued">
       {menuItem.label}
     </Text>
diff --git a/src/components/Sidebar/menu/ItemGroup.tsx b/src/components/Sidebar/menu/ItemGroup.tsx
index fc5a5fc59..b7d9c258d 100644
--- a/src/components/Sidebar/menu/ItemGroup.tsx
+++ b/src/components/Sidebar/menu/ItemGroup.tsx
@@ -24,8 +24,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
       data-test-id={`menu-list-item`}
     >
       <List.ItemGroup.Trigger
-        paddingX="s2"
-        paddingRight="s1"
+        paddingX={2}
+        paddingRight={1}
         borderRadius={3}
         size="small"
         active={isActive}
@@ -43,8 +43,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
           <Box
             display="flex"
             alignItems="center"
-            gap="s3"
-            paddingY="s1.5"
+            gap={3}
+            paddingY={1.5}
             borderRadius={3}
           >
             {menuItem.icon}
@@ -59,13 +59,13 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
           borderLeftWidth={1}
           borderLeftStyle="solid"
           borderColor="neutralPlain"
-          paddingLeft="s4"
-          marginLeft="s4"
+          paddingLeft={4}
+          marginLeft={4}
           display="flex"
           flexDirection="column"
-          marginBottom="s2"
-          marginTop="s1"
-          gap="spx"
+          marginBottom={2}
+          marginTop={1}
+          gap="px"
         >
           {menuItem.children?.map(child => (
             <MenuItem menuItem={child} key={child.id} />
diff --git a/src/components/Sidebar/menu/Menu.tsx b/src/components/Sidebar/menu/Menu.tsx
index 0ab3ec78a..c22372cbb 100644
--- a/src/components/Sidebar/menu/Menu.tsx
+++ b/src/components/Sidebar/menu/Menu.tsx
@@ -8,8 +8,8 @@ export const Menu = () => {
   const menuStructure = useMenuStructure();
 
   return (
-    <Box padding="s3" overflowY="auto" className="hide-scrollbar">
-      <List as="ol" display="grid" gap="s1" data-test-id="menu-list">
+    <Box padding={3} overflowY="auto" className="hide-scrollbar">
+      <List as="ol" display="grid" gap={1} data-test-id="menu-list">
         {menuStructure.map(menuItem => (
           <MenuItem menuItem={menuItem} key={menuItem.id} />
         ))}
diff --git a/src/components/Sidebar/menu/SingleItem.tsx b/src/components/Sidebar/menu/SingleItem.tsx
index bca1b2f08..36cba6882 100644
--- a/src/components/Sidebar/menu/SingleItem.tsx
+++ b/src/components/Sidebar/menu/SingleItem.tsx
@@ -27,7 +27,7 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
   return (
     <List.Item
       borderRadius={3}
-      paddingX="s2"
+      paddingX={2}
       active={active}
       onClick={handleMenuItemClick}
       data-test-id={`menu-item-label-${menuItem.id}`}
@@ -42,8 +42,8 @@ export const SingleItem: React.FC<Props> = ({ menuItem }) => {
       >
         <Box
           className={sprinkles({
-            paddingY: "s1.5",
-            gap: "s3",
+            paddingY: 1.5,
+            gap: 3,
             display: "flex",
             alignItems: "center",
           })}
diff --git a/src/components/Sidebar/menu/useMenuStructure.tsx b/src/components/Sidebar/menu/useMenuStructure.tsx
index f5e093600..110246f49 100644
--- a/src/components/Sidebar/menu/useMenuStructure.tsx
+++ b/src/components/Sidebar/menu/useMenuStructure.tsx
@@ -49,7 +49,7 @@ export function useMenuStructure() {
     id: "extensions",
     label: intl.formatMessage(sectionNames.appExtensions),
     type: "divider",
-    paddingY: "s1.5",
+    paddingY: 1.5,
   };
 
   const getAppSection = (): SidebarMenuItem => ({
diff --git a/src/components/Sidebar/user/Controls.tsx b/src/components/Sidebar/user/Controls.tsx
index 5df94e95c..702b50bb3 100644
--- a/src/components/Sidebar/user/Controls.tsx
+++ b/src/components/Sidebar/user/Controls.tsx
@@ -62,7 +62,7 @@ export const UserControls = () => {
       <Dropdown.Content align="end">
         <Box __minWidth={192}>
           <List
-            padding="s2"
+            padding={2}
             borderRadius={4}
             boxShadow="overlay"
             backgroundColor="surfaceNeutralPlain"
@@ -108,8 +108,8 @@ export const UserControls = () => {
               <List.Item
                 display="flex"
                 alignItems="center"
-                gap="s2"
-                marginTop="s1"
+                gap={2}
+                marginTop={1}
                 onClick={changeTheme}
                 {...listItemStyles}
                 data-test-id="theme-switch"
@@ -125,7 +125,7 @@ export const UserControls = () => {
 };
 
 const listItemStyles = {
-  paddingX: "s1.5",
-  paddingY: "s2",
+  paddingX: 1.5,
+  paddingY: 2,
   borderRadius: 4,
 } as const;
diff --git a/src/components/Sidebar/user/Info.tsx b/src/components/Sidebar/user/Info.tsx
index 1d3acf303..9fa0ea274 100644
--- a/src/components/Sidebar/user/Info.tsx
+++ b/src/components/Sidebar/user/Info.tsx
@@ -12,16 +12,16 @@ export const UserInfo = () => {
   return (
     <Box
       display="flex"
-      gap="s3"
-      paddingX="s3"
-      paddingY="s4"
+      gap={3}
+      paddingX={3}
+      paddingY={4}
       alignItems="center"
       borderTopWidth={1}
       borderColor="neutralPlain"
       borderTopStyle="solid"
       justifyContent="space-between"
     >
-      <Box display="flex" gap="s3" alignItems="center">
+      <Box display="flex" gap={3} alignItems="center">
         <UserAvatar initials={getUserInitials(user)} url={user?.avatar?.url} />
         <Box __width={128} className="ellipsis">
           <Text variant="bodyStrong" size="small">
diff --git a/src/components/StatusDot/StatusDot.tsx b/src/components/StatusDot/StatusDot.tsx
index 72175ddd2..da826f57f 100644
--- a/src/components/StatusDot/StatusDot.tsx
+++ b/src/components/StatusDot/StatusDot.tsx
@@ -18,8 +18,8 @@ const getStatusColor = (
 
 export const StatusDot: React.FC<StatusDotProps> = ({ status }) => (
   <Box
-    width="s2"
-    height="s2"
+    width={2}
+    height={2}
     borderRadius="50%"
     backgroundColor={getStatusColor(status)}
   />
diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx
index 3431488e0..8e104e497 100644
--- a/src/components/TableCellHeader/TableCellHeader.tsx
+++ b/src/components/TableCellHeader/TableCellHeader.tsx
@@ -11,7 +11,7 @@ const useStyles = makeStyles(
   theme => ({
     arrow: {
       transition: theme.transitions.duration.short + "ms",
-      marginBottom: vars.space.s1,
+      marginBottom: vars.spacing[1],
     },
     arrowLeft: {
       marginLeft: -24,
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index 672cc9fd9..3c68bb2cc 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -99,7 +99,7 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
         {isSmUp && renderVersionInfo}
       </TopNav>
       <DetailPageLayout.Content data-test-id="configuration-menu">
-        <Box paddingX="s6" __maxWidth={"1024px"} margin="auto">
+        <Box paddingX={6} __maxWidth={"1024px"} margin="auto">
           {menus
             .filter(menu =>
               menu.menuItems.some(menuItem =>
diff --git a/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx b/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
index a3ed46cd2..f39106349 100644
--- a/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
+++ b/src/custom-apps/components/CustomAppListPage/CustomAppListPage.tsx
@@ -46,8 +46,8 @@ const CustomAppListPage: React.FC<CustomAppListPageProps> = ({
           />
         </Button>
       </TopNav>
-      <Box padding="s6">
-        <Box marginBottom="s1.5">
+      <Box padding={6}>
+        <Box marginBottom={1.5}>
           <Text as="p">
             <FormattedMessage
               defaultMessage="Local apps are custom webhooks & token pairs that can be used to
diff --git a/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx b/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
index 72533b0eb..bf17abf1d 100644
--- a/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
+++ b/src/custom-apps/components/PermissionAlert/PermissionAlert.tsx
@@ -38,7 +38,7 @@ const PermissionAlert: React.FC<PermissionAlertProps> = ({ query }) => {
           close={false}
           className="remove-icon-background"
         >
-          <Box display="flex" gap="s2">
+          <Box display="flex" gap={2}>
             {permissions.map(permission => (
               <Chip size="small" key={permission}>
                 <Text variant="caption" size="small">
diff --git a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
index 8b8dcef9c..81901a880 100644
--- a/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
+++ b/src/custom-apps/components/WebhookDetailsPage/WebhookDetailsPage.tsx
@@ -117,7 +117,7 @@ const WebhookDetailsPage: React.FC<WebhookDetailsPageProps> = ({
           <DetailPageLayout gridTemplateColumns={1}>
             <TopNav href={backUrl} title={getHeaderTitle(intl, webhook)} />
             <DetailPageLayout.Content>
-              <Box padding="s6">
+              <Box padding={6}>
                 <WebhookStatus
                   data={data.isActive}
                   disabled={disabled}
diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
index 7ea5460d5..8f8c34379 100644
--- a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
+++ b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
@@ -116,7 +116,7 @@ const CustomerAddressListPage: React.FC<
           display="flex"
           justifyContent="center"
           alignItems="center"
-          padding="s6"
+          padding={6}
           flexDirection="column"
         >
           <Typography variant="h5">
diff --git a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
index 2bd2da47a..8439fb484 100644
--- a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
+++ b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
@@ -68,7 +68,7 @@ const GiftCardSettingsPage: React.FC = () => {
         <Form initial={initialData} onSubmit={handleSubmit}>
           {({ data: formData, submit, change }) => (
             <>
-              <Box padding="s6" margin="auto" height="100vh">
+              <Box padding={6} margin="auto" height="100vh">
                 <Grid variant="inverted">
                   <div>
                     <Typography>
diff --git a/src/giftCards/GiftCardUpdate/GiftCardHistory/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardHistory/styles.ts
index e523cf0a2..0f2e487f3 100644
--- a/src/giftCards/GiftCardUpdate/GiftCardHistory/styles.ts
+++ b/src/giftCards/GiftCardUpdate/GiftCardHistory/styles.ts
@@ -5,12 +5,12 @@ const useStyles = makeStyles(
   {
     header: {
       fontWeight: 500,
-      marginBottom: vars.space.spx,
+      marginBottom: vars.spacing.px,
     },
     root: {
-      marginTop: vars.space["s1.5"],
-      paddingLeft: vars.space.s6,
-      paddingRight: vars.space.s6,
+      marginTop: vars.spacing["s1.5"],
+      paddingLeft: vars.spacing[6],
+      paddingRight: vars.spacing[6],
     },
   },
   { name: "GiftCardHistory" },
diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
index af5af5e77..21c8a75b7 100644
--- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
+++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
@@ -17,12 +17,12 @@ const HomeAnalyticsCard: React.FC<HomeAnalyticsCardProps> = props => {
       borderStyle="solid"
       borderColor="neutralPlain"
       borderRadius={3}
-      padding="s5"
+      padding={5}
       display="flex"
       justifyContent="space-between"
       data-test-id={testId}
     >
-      <Box display="flex" flexDirection="column" gap="s0.5">
+      <Box display="flex" flexDirection="column" gap={0.5}>
         <Text size="large" variant="body">
           {title}
         </Text>
diff --git a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
index 42d02adb3..14ab07c61 100644
--- a/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
+++ b/src/home/components/HomeNotificationTable/HomeNotificationTable.tsx
@@ -35,8 +35,8 @@ const useStyles = makeStyles(
       cursor: "pointer",
       /* Table to be replaced with Box */
       "& .MuiTableCell-root": {
-        paddingLeft: `${vars.space.s5} !important`,
-        paddingRight: `${vars.space.s5} !important`,
+        paddingLeft: `${vars.spacing[5]} !important`,
+        paddingRight: `${vars.spacing[5]} !important`,
       },
     },
     cardContent: {
diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx
index a353153ec..00cad9fb8 100644
--- a/src/home/components/HomePage/HomePage.tsx
+++ b/src/home/components/HomePage/HomePage.tsx
@@ -55,7 +55,7 @@ const HomePage: React.FC<HomePageProps> = props => {
     <DetailPageLayout withSavebar={false}>
       <TopNav title={<HomeHeader userName={userName} />} />
       <DetailPageLayout.Content>
-        <Box paddingLeft="s6" paddingRight="s8">
+        <Box paddingLeft={6} paddingRight={8}>
           <CardSpacer />
           <RequirePermissions
             requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
@@ -63,8 +63,8 @@ const HomePage: React.FC<HomePageProps> = props => {
             <Box
               display="grid"
               __gridTemplateColumns="repeat(2, 1fr)"
-              gap="s5"
-              marginBottom="s5"
+              gap={5}
+              marginBottom={5}
             >
               <HomeAnalyticsCard
                 title={intl.formatMessage(homePageMessages.salesCardTitle)}
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index db7f6bd6c..9c0e7e053 100644
--- a/src/home/components/HomeProductListCard/HomeProductListCard.tsx
+++ b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
@@ -49,8 +49,8 @@ const useStyles = makeStyles(
       cursor: "pointer",
       /* Table to be replaced with Box */
       "& .MuiTableCell-root": {
-        paddingLeft: `${vars.space.s5} !important`,
-        paddingRight: `${vars.space.s5} !important`,
+        paddingLeft: `${vars.spacing[5]} !important`,
+        paddingRight: `${vars.spacing[5]} !important`,
       },
     },
     cardContent: {
diff --git a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
index 2bf146adf..d5bbbdba5 100644
--- a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
+++ b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
@@ -87,7 +87,7 @@ const MenuDetailsPage: React.FC<MenuDetailsPageProps> = ({
       {({ change, data, submit }) => (
         <DetailPageLayout gridTemplateColumns={1}>
           <DetailPageLayout.Content>
-            <Box padding="s6" margin="auto" height="100vh">
+            <Box padding={6} margin="auto" height="100vh">
               <Backlink href={menuListUrl()}>
                 {intl.formatMessage(sectionNames.navigation)}
               </Backlink>
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index 7d926ffb0..b4ece95d7 100644
--- a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
+++ b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
@@ -84,7 +84,7 @@ const OrderDraftPage: React.FC<OrderDraftPageProps> = props => {
       <TopNav
         href={orderDraftListUrl()}
         title={
-          <Box display="flex" alignItems="center" gap="s3">
+          <Box display="flex" alignItems="center" gap={3}>
             <span>{order?.number ? "#" + order?.number : undefined}</span>
             <div>
               {order && order.created ? (
diff --git a/src/orders/components/OrderDraftPage/styles.ts b/src/orders/components/OrderDraftPage/styles.ts
index 13a3b6e43..4bfec33de 100644
--- a/src/orders/components/OrderDraftPage/styles.ts
+++ b/src/orders/components/OrderDraftPage/styles.ts
@@ -7,7 +7,7 @@ export const useAlertStyles = makeStyles(
       marginBottom: theme.spacing(3),
       "& .MuiCardContent-root": {
         backgroundColor: "unset",
-        paddingRight: vars.space.s8,
+        paddingRight: vars.spacing[8],
       },
     },
   }),
diff --git a/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx b/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
index 9fc287756..ba4649757 100644
--- a/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
+++ b/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
@@ -25,7 +25,7 @@ const ExtraInfoLines: React.FC<ExtraInfoLinesProps> = ({ fulfillment }) => {
 
   return (
     <Box
-      paddingY="s4"
+      paddingY={4}
       borderColor="neutralHighlight"
       borderBottomStyle={"solid"}
       borderBottomWidth={1}
diff --git a/src/orders/components/OrderHistory/styles.ts b/src/orders/components/OrderHistory/styles.ts
index e8ed27335..735d8da8d 100644
--- a/src/orders/components/OrderHistory/styles.ts
+++ b/src/orders/components/OrderHistory/styles.ts
@@ -16,8 +16,8 @@ export const useStyles = makeStyles(
     },
     root: {
       marginTop: theme.spacing(4),
-      paddingRight: vars.space.s6,
-      paddingLeft: vars.space.s6,
+      paddingRight: vars.spacing[6],
+      paddingLeft: vars.spacing[6],
     },
     user: {
       marginBottom: theme.spacing(1),
diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
index 147efae73..47941762a 100644
--- a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
+++ b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
@@ -75,7 +75,7 @@ const OrderInvoiceList: React.FC<OrderInvoiceListProps> = props => {
           onInvoiceGenerate && (
             <Button
               onClick={onInvoiceGenerate}
-              className={sprinkles({ marginRight: "s0.5" })}
+              className={sprinkles({ marginRight: 0.5 })}
             >
               <FormattedMessage
                 id="e0RKe+"
diff --git a/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx b/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
index ef66921d2..f1836769a 100644
--- a/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
+++ b/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
@@ -133,7 +133,7 @@ export const OrderListDatagrid: React.FC<OrderListDatagridProps> = ({
           rowAnchor={handleRowAnchor}
         />
 
-        <Box paddingX="s6">
+        <Box paddingX={6}>
           <TablePaginationWithContext
             component="div"
             settings={settings}
diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx
index 5b67ea0bb..0c920bcd1 100644
--- a/src/orders/components/OrderListPage/OrderListPage.tsx
+++ b/src/orders/components/OrderListPage/OrderListPage.tsx
@@ -128,7 +128,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
           alignItems="center"
         >
           <Box display="flex">
-            <Box marginX="s3" display="flex" alignItems="center">
+            <Box marginX={3} display="flex" alignItems="center">
               <ChevronRightIcon />
             </Box>
 
@@ -149,7 +149,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
             />
           </Box>
 
-          <Box display="flex" alignItems="center" gap="s2">
+          <Box display="flex" alignItems="center" gap={2}>
             {!!onSettingsOpen && (
               <CardMenu
                 className={classes.settings}
diff --git a/src/orders/components/OrderPayment/styles.ts b/src/orders/components/OrderPayment/styles.ts
index aba213b56..989418b43 100644
--- a/src/orders/components/OrderPayment/styles.ts
+++ b/src/orders/components/OrderPayment/styles.ts
@@ -45,7 +45,7 @@ export const useStyles = makeStyles(
       justifyContent: "right",
     },
     payments: {
-      paddingRight: vars.space.s6,
+      paddingRight: vars.spacing[6],
     },
   }),
   { name: "OrderPayment" },
diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts
index 9c2922fe5..65fee33e5 100644
--- a/src/orders/fixtures.ts
+++ b/src/orders/fixtures.ts
@@ -2244,8 +2244,8 @@ export const variants = [
 ];
 export const prefixes = ["01", "02", "41", "49"];
 export const shippingMethods = [
-  { country: "whole world", id: "s1", name: "DHL", price: {} },
-  { country: "Afghanistan", id: "s2", name: "UPS" },
+  { country: "whole world", id: 1, name: "DHL", price: {} },
+  { country: "Afghanistan", id: 2, name: "UPS" },
 ];
 export const orderLineSearch = (
   placeholderImage: string,
diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
index 6973a9e08..e51f1b965 100644
--- a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
+++ b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
@@ -128,7 +128,7 @@ const PageTypeDetailsPage: React.FC<PageTypeDetailsPageProps> = props => {
                   margin: "auto",
                 })}
               >
-                <Box paddingTop="s6">
+                <Box paddingTop={6}>
                   <Typography>
                     {intl.formatMessage(commonMessages.generalInformations)}
                   </Typography>
diff --git a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
index a84318e31..1795f71c0 100644
--- a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
+++ b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
@@ -45,7 +45,7 @@ const useStyles = makeStyles(
     colName: {
       display: "flex",
       alignItems: "center",
-      gap: vars.space.s2,
+      gap: vars.spacing[2],
     },
     avatarDefault: {
       "& div": {
diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
index 0daa0fccf..ea30d4e4d 100644
--- a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
+++ b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
@@ -212,7 +212,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                 })}
                 name="hasVariants"
                 onChange={event => onHasVariantsToggle(event.target.value)}
-                className={sprinkles({ paddingLeft: "s6" })}
+                className={sprinkles({ paddingLeft: 6 })}
               />
               {data.hasVariants && (
                 <>
diff --git a/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx b/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
index e97d6dace..893de62fb 100644
--- a/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
+++ b/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
@@ -38,7 +38,7 @@ export const ProductDetailsForm: React.FC<ProductDetailsFormProps> = ({
       <DashboardCard.Title>
         {intl.formatMessage(commonMessages.generalInformations)}
       </DashboardCard.Title>
-      <DashboardCard.Content display="grid" gap="s2" paddingX="s5">
+      <DashboardCard.Content display="grid" gap={2} paddingX={5}>
         <Input
           label={intl.formatMessage({
             id: "6AMFki",
diff --git a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
index 75a65ed64..0d29e7eff 100644
--- a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
+++ b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
@@ -262,7 +262,7 @@ export const ProductListDatagrid: React.FC<ProductListDatagridProps> = ({
           )}
         />
 
-        <Box paddingX="s6">
+        <Box paddingX={6}>
           <TablePaginationWithContext
             component="div"
             colSpan={(products?.length === 0 ? 1 : 2) + settings.columns.length}
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 14eb3eb9d..ff3bb93a3 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -156,7 +156,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
           alignItems="center"
         >
           <Box display="flex">
-            <Box marginX="s3" display="flex" alignItems="center">
+            <Box marginX={3} display="flex" alignItems="center">
               <ChevronRightIcon />
             </Box>
 
@@ -178,7 +178,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
               })}
             />
           </Box>
-          <Box display="flex" alignItems="center" gap="s2">
+          <Box display="flex" alignItems="center" gap={2}>
             {hasLimits(limits, "productVariants") && (
               <Text variant="caption">
                 {intl.formatMessage(
@@ -267,7 +267,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
               defaultMessage: "Search Products...",
             })}
             actions={
-              <Box display="flex" gap="s4">
+              <Box display="flex" gap={4}>
                 <ProductListDeleteButton
                   ref={setBulkDeleteButtonRef}
                   onClick={onProductsDelete}
diff --git a/src/products/components/ProductListTiles/ProductListTiles.tsx b/src/products/components/ProductListTiles/ProductListTiles.tsx
index 38cdcbacf..e7aab428e 100644
--- a/src/products/components/ProductListTiles/ProductListTiles.tsx
+++ b/src/products/components/ProductListTiles/ProductListTiles.tsx
@@ -29,7 +29,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
   const renderContent = useCallback(() => {
     if (loading) {
       return (
-        <Box display="flex" justifyContent="center" marginY="s9">
+        <Box display="flex" justifyContent="center" marginY={9}>
           <CircularProgress />
         </Box>
       );
@@ -40,9 +40,9 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
         <Box
           display="grid"
           gridTemplateColumns={{ mobile: 3, tablet: 5, desktop: 6 }}
-          gap="s6"
-          padding="s6"
-          __paddingTop={`calc(${vars.space[9]} - ${vars.space[5]}`}
+          gap={6}
+          padding={6}
+          __paddingTop={`calc(${vars.spacing[9]} - ${vars.spacing[5]}`}
           data-test-id="tile-view"
         >
           {products.map(product => (
@@ -57,7 +57,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
     }
 
     return (
-      <Box padding="s6" textAlign="center">
+      <Box padding={6} textAlign="center">
         <Text size="small">{intl.formatMessage(messages.emptyText)}</Text>
       </Box>
     );
@@ -66,7 +66,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
   return (
     <>
       {renderContent()}
-      <Box paddingX="s6">
+      <Box paddingX={6}>
         <TablePaginationWithContext
           component="div"
           settings={settings}
diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx
index 42872cad9..e8e7868bf 100644
--- a/src/products/components/ProductMedia/ProductMedia.tsx
+++ b/src/products/components/ProductMedia/ProductMedia.tsx
@@ -134,7 +134,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
             </Dropdown.Trigger>
             <Dropdown.Content align="end">
               <List
-                padding="s2"
+                padding={2}
                 borderRadius={4}
                 boxShadow="overlay"
                 backgroundColor="surfaceNeutralPlain"
@@ -142,8 +142,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                 <Dropdown.Item>
                   <List.Item
                     borderRadius={4}
-                    paddingX="s1.5"
-                    paddingY="s2"
+                    paddingX={1.5}
+                    paddingY={2}
                     onClick={() => imagesUpload.current.click()}
                     data-test-id="upload-images"
                   >
@@ -153,8 +153,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                 <Dropdown.Item>
                   <List.Item
                     borderRadius={4}
-                    paddingX="s1.5"
-                    paddingY="s2"
+                    paddingX={1.5}
+                    paddingY={2}
                     onClick={openMediaUrlModal}
                     data-test-id="upload-media-url"
                   >
@@ -183,7 +183,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
         </Box>
         <Box position="relative">
           {media === undefined ? (
-            <Box padding="s5">
+            <Box padding={5}>
               <Skeleton />
             </Box>
           ) : media.length > 0 ? (
@@ -212,7 +212,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                     onSortEnd={onImageReorder}
                     className={sprinkles({
                       display: "grid",
-                      gap: "s5",
+                      gap: 5,
                       gridTemplateColumns: { mobile: 2, tablet: 3, desktop: 4 },
                       opacity: isDragActive ? "0.2" : "1",
                     })}
diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx
index 0b1dc897f..850b9ca39 100644
--- a/src/products/components/ProductOrganization/ProductOrganization.tsx
+++ b/src/products/components/ProductOrganization/ProductOrganization.tsx
@@ -99,7 +99,7 @@ export const ProductOrganization: React.FC<
           description: "section header",
         })}
       </DashboardCard.Title>
-      <DashboardCard.Content gap="s5" display="flex" flexDirection="column">
+      <DashboardCard.Content gap={5} display="flex" flexDirection="column">
         {canChangeType ? (
           <SingleAutocompleteSelectField
             displayValue={productTypeInputDisplayValue}
@@ -119,7 +119,7 @@ export const ProductOrganization: React.FC<
             {...fetchMoreProductTypes}
           />
         ) : (
-          <Box display="flex" flexDirection="column" gap="s3">
+          <Box display="flex" flexDirection="column" gap={3}>
             <Box display="flex" flexDirection="column">
               <Text variant="bodyEmp">
                 <FormattedMessage id="anK7jD" defaultMessage="Product Type" />
diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx
index 30a0cc8f9..cda4e2000 100644
--- a/src/products/components/ProductStocks/ProductStocks.tsx
+++ b/src/products/components/ProductStocks/ProductStocks.tsx
@@ -145,7 +145,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
           />
         </Box>
 
-        <Box paddingY="s2" display="grid" gap="s2">
+        <Box paddingY={2} display="grid" gap={2}>
           <Checkbox
             checked={data.isPreorder}
             name="isPreorder"
@@ -158,7 +158,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
             }}
             disabled={disabled}
           >
-            <Box display="flex" gap="s1" paddingY="s1.5">
+            <Box display="flex" gap={1} paddingY={1.5}>
               <Text>
                 <FormattedMessage {...messages.variantInPreorder} />
               </Text>
@@ -187,7 +187,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
           )}
 
           {!data.isPreorder && (
-            <Box display="grid" gap="s2">
+            <Box display="grid" gap={2}>
               <Box display="flex" flexDirection="column">
                 <Text>
                   <FormattedMessage {...messages.quantity} />
@@ -233,7 +233,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
           <Table>
             <TableHead>
               <TableRowLink>
-                <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                   <Text variant="caption" color="textNeutralSubdued">
                     <FormattedMessage {...messages.warehouseName} />
                   </Text>
@@ -260,7 +260,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
 
                 return (
                   <TableRowLink key={stock.id}>
-                    <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                    <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                       <Text>{stock.label}</Text>
                     </TableCell>
                     <TableCell>
@@ -298,13 +298,13 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                     <TableRowLink className={sprinkles({ cursor: "pointer" })}>
                       <TableCell
                         colSpan={3}
-                        style={{ paddingLeft: vars.space.s6 }}
+                        style={{ paddingLeft: vars.spacing[6] }}
                       >
                         <Text>
                           <FormattedMessage {...messages.assignWarehouse} />
                         </Text>
                       </TableCell>
-                      <TableCell style={{ paddingRight: vars.space.s6 }}>
+                      <TableCell style={{ paddingRight: vars.spacing[6] }}>
                         <Button
                           type="button"
                           icon={<PlusIcon />}
@@ -317,7 +317,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                   <Dropdown.Content align="end">
                     <Box>
                       <List
-                        padding="s2"
+                        padding={2}
                         borderRadius={4}
                         boxShadow="overlay"
                         backgroundColor="surfaceNeutralPlain"
@@ -325,8 +325,8 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                         {warehousesToAssign.map(warehouse => (
                           <Dropdown.Item key={warehouse.id}>
                             <List.Item
-                              paddingX="s1.5"
-                              paddingY="s2"
+                              paddingX={1.5}
+                              paddingY={2}
                               borderRadius={4}
                               onClick={() =>
                                 handleWarehouseStockAdd(warehouse.id)
@@ -346,7 +346,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
         )}
       {data.isPreorder && (
         <DashboardCard.Content>
-          <Box display="grid" gap="s2">
+          <Box display="grid" gap={2}>
             <Text variant="caption">
               <FormattedMessage {...messages.preorderEndDateSetup} />
             </Text>
@@ -393,11 +393,11 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
             </Box>
           </Box>
 
-          <Box display="grid" gap="s1" paddingTop="s2">
+          <Box display="grid" gap={1} paddingTop={2}>
             <Text variant="caption" color="textNeutralSubdued">
               <FormattedMessage {...messages.preorderProductsAvailability} />
             </Text>
-            <Box display="grid" gap="s1.5">
+            <Box display="grid" gap={1.5}>
               <Box __width="50%">
                 <Input
                   min={0}
@@ -432,7 +432,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
         <Table>
           <TableHead>
             <TableRowLink>
-              <TableCell style={{ paddingLeft: vars.space.s6 }}>
+              <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                 <Text variant="caption" color="textNeutralSubdued">
                   <FormattedMessage {...sectionNames.channels} />
                 </Text>
@@ -457,7 +457,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
 
               return (
                 <TableRowLink key={listing.id}>
-                  <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                  <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                     <Text>{listing.name}</Text>
                   </TableCell>
                   <TableCell>
diff --git a/src/products/components/ProductTile/ProductTile.tsx b/src/products/components/ProductTile/ProductTile.tsx
index cfba1e0e3..744e57941 100644
--- a/src/products/components/ProductTile/ProductTile.tsx
+++ b/src/products/components/ProductTile/ProductTile.tsx
@@ -21,7 +21,7 @@ const commonThumbnailProps = {
   borderColor: "neutralHighlight",
   borderStyle: "solid",
   borderWidth: 1,
-  marginBottom: "s1.5",
+  marginBottom: 1.5,
   borderRadius: 3,
   aspectRatio: "1 / 1",
 } as const;
@@ -65,7 +65,7 @@ export const ProductTile: React.FC<ProductTileProps> = ({
       </Box>
     )}
     <Box display="flex" alignItems="center">
-      <Box paddingRight="s1">
+      <Box paddingRight={1}>
         <StatusDot status={getTileStatus(product.channelListings)} />
       </Box>
       <Text
@@ -74,12 +74,12 @@ export const ProductTile: React.FC<ProductTileProps> = ({
         variant="caption"
         size="small"
         alignItems="center"
-        className={sprinkles({ paddingY: "s0.5" })}
+        className={sprinkles({ paddingY: 0.5 })}
       >
         {product.productType.name}
       </Text>
     </Box>
-    <Box display="flex" justifyContent="space-between" marginTop="s0.5">
+    <Box display="flex" justifyContent="space-between" marginTop={0.5}>
       <Text ellipsis color="textNeutralDefault" variant="bodyEmp" size="small">
         {product.name}
       </Text>
@@ -87,10 +87,10 @@ export const ProductTile: React.FC<ProductTileProps> = ({
     <Box
       position={"absolute"}
       margin="auto"
-      __right={`calc(${vars.space.s5} / -2)`}
-      __top={`calc(${vars.space.s5} / -2)`}
-      __width={`calc(100% + ${vars.space.s5})`}
-      __height={`calc(100% + ${vars.space.s5})`}
+      __right={`calc(${vars.spacing[5]} / -2)`}
+      __top={`calc(${vars.spacing[5]} / -2)`}
+      __width={`calc(100% + ${vars.spacing[5]})`}
+      __height={`calc(100% + ${vars.spacing[5]})`}
       __opacity={0.1}
       borderRadius={5}
       backgroundColor={{
diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
index 09da6ae9a..d85e53925 100644
--- a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
+++ b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
@@ -96,7 +96,7 @@ export const ProductVariantPrice: React.FC<
       <ResponsiveTable>
         <TableHead>
           <TableRowLink>
-            <TableCell style={{ paddingLeft: vars.space.s6 }}>
+            <TableCell style={{ paddingLeft: vars.spacing[6] }}>
               <Text variant="caption" color="textNeutralSubdued">
                 <FormattedMessage
                   id="c8UT0c"
@@ -140,7 +140,7 @@ export const ProductVariantPrice: React.FC<
 
               return (
                 <TableRowLink key={listing?.id || `skeleton-${index}`}>
-                  <TableCell style={{ paddingLeft: vars.space.s6 }}>
+                  <TableCell style={{ paddingLeft: vars.spacing[6] }}>
                     <Text>{listing?.name || <Skeleton />}</Text>
                   </TableCell>
                   <TableCell>
diff --git a/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx b/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
index 295d0c433..9200f7bc9 100644
--- a/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
+++ b/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
@@ -60,7 +60,7 @@ const ShippingWeightUnitForm: React.FC<ShippingWeightUnitFormProps> = ({
               onChange={change}
             />
           </CardContent>
-          <CardActions style={{ paddingLeft: vars.space.s6 }}>
+          <CardActions style={{ paddingLeft: vars.spacing[6] }}>
             <Button onClick={submit} data-test-id="save-unit">
               <FormattedMessage {...buttonMessages.save} />
             </Button>
diff --git a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
index d6cccce97..6865d6294 100644
--- a/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
+++ b/src/siteSettings/components/SiteSettingsPage/SiteSettingsPage.tsx
@@ -143,7 +143,7 @@ const SiteSettingsPage: React.FC<SiteSettingsPageProps> = props => {
               title={intl.formatMessage(commonMessages.generalInformations)}
             />
             <DetailPageLayout.Content>
-              <Box gap="s2" paddingLeft="s6">
+              <Box gap={2} paddingLeft={6}>
                 <Box display="grid" __gridTemplateColumns="1fr 3fr">
                   <PageSectionHeader
                     title={intl.formatMessage(messages.sectionCheckoutTitle)}
diff --git a/src/staff/components/StaffList/StaffList.tsx b/src/staff/components/StaffList/StaffList.tsx
index dba29418d..7cc455eca 100644
--- a/src/staff/components/StaffList/StaffList.tsx
+++ b/src/staff/components/StaffList/StaffList.tsx
@@ -123,7 +123,7 @@ const StaffList: React.FC<StaffListProps> = props => {
               key={staffMember ? staffMember.id : "skeleton"}
             >
               <TableCell>
-                <Box display="flex" alignItems="center" gap="s2">
+                <Box display="flex" alignItems="center" gap={2}>
                   <UserAvatar
                     url={staffMember?.avatar?.url}
                     initials={getUserInitials(staffMember)}
diff --git a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
index e9a467719..c58d35b89 100644
--- a/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
+++ b/src/taxes/pages/TaxChannelsPage/TaxChannelsPage.tsx
@@ -163,7 +163,7 @@ export const TaxChannelsPage: React.FC<TaxChannelsPageProps> = props => {
           <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
             <DetailPageLayout.Content>
-              <Box padding="s6">
+              <Box padding={6}>
                 <PageTabs value="channels" onChange={handleTabChange}>
                   <PageTab
                     label={intl.formatMessage(taxesMessages.channelsSection)}
diff --git a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx b/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
index f51482981..2f1186850 100644
--- a/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
+++ b/src/taxes/pages/TaxClassesPage/TaxClassesPage.tsx
@@ -122,7 +122,7 @@ export const TaxClassesPage: React.FC<TaxClassesPageProps> = props => {
           <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
             <DetailPageLayout.Content>
-              <Box padding="s6">
+              <Box padding={6}>
                 <PageTabs value="tax-classes" onChange={handleTabChange}>
                   <PageTab
                     label={intl.formatMessage(taxesMessages.channelsSection)}
diff --git a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
index 3998462ea..2c9f24530 100644
--- a/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
+++ b/src/taxes/pages/TaxCountriesPage/TaxCountriesPage.tsx
@@ -94,7 +94,7 @@ export const TaxCountriesPage: React.FC<TaxCountriesPageProps> = props => {
           <DetailPageLayout gridTemplateColumns={1}>
             <TopNav title={<TaxPageTitle />} />
             <DetailPageLayout.Content>
-              <Box padding="s6">
+              <Box padding={6}>
                 <PageTabs value="countries" onChange={handleTabChange}>
                   <PageTab
                     label={intl.formatMessage(taxesMessages.channelsSection)}
diff --git a/src/themeOverrides.ts b/src/themeOverrides.ts
index 48532eb00..763853e87 100644
--- a/src/themeOverrides.ts
+++ b/src/themeOverrides.ts
@@ -52,7 +52,7 @@ export const themeOverrides: Partial<Theme> = {
     },
     MuiCardHeader: {
       root: {
-        paddingRight: vars.space.s8,
+        paddingRight: vars.spacing[8],
         backgroundColor: vars.colors.background.surfaceNeutralPlain,
       },
       title: {
diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
index 0ec5c162e..d97de90b5 100644
--- a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
+++ b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
@@ -29,7 +29,7 @@ const useStyles = makeStyles(
     },
     rowLink: {
       "& .MuiTableCell-root": {
-        paddingLeft: `${vars.space.s6} !important`,
+        paddingLeft: `${vars.spacing[6]} !important`,
       },
     },
   },