From ea3123acaf70d30db5757beaecd1d87aa3305506 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Fri, 19 May 2023 12:54:05 +0200
Subject: [PATCH] feat: migrate macaw ui to new spacing scale

---
 package-lock.json                             | 14 ++++-----
 package.json                                  |  2 +-
 src/apps/components/AllAppList/AllAppList.tsx |  2 +-
 src/apps/components/AppAvatar/AppAvatar.tsx   |  6 ++--
 .../AppDetailsPage/HeaderOptions.tsx          |  4 +--
 .../AppInstallPage/AppInstallPage.tsx         |  4 +--
 .../components/AppListPage/AppListPage.tsx    | 14 ++++-----
 .../AppListRow/AppListCardActions.tsx         |  4 +--
 .../AppListRow/AppListCardDescription.tsx     |  6 ++--
 .../AppListRow/AppListCardIntegrations.tsx    | 12 ++++----
 .../AppListRow/AppListCardLinks.tsx           |  6 ++--
 src/apps/components/AppListRow/AppListRow.tsx |  4 +--
 src/apps/components/AppListRow/AppLogo.tsx    |  4 +--
 src/apps/components/AppPage/AppPageNav.tsx    |  6 ++--
 .../InstalledAppListRow/AppManifestUrl.tsx    |  2 +-
 .../InstalledAppListRow.tsx                   | 14 ++++-----
 .../NotInstalledAppListRow.tsx                |  6 ++--
 .../components/ChannelForm/ChannelForm.tsx    |  2 +-
 src/components/AppLayout/AppLayout.tsx        |  8 ++---
 src/components/AppLayout/LimitsInfo.tsx       |  2 +-
 .../AppLayout/ListFilters/ListFilters.tsx     |  8 ++---
 src/components/AppLayout/TopNav/Menu.tsx      |  6 ++--
 .../AppLayout/TopNav/TopNavLink.tsx           |  2 +-
 .../AppLayout/TopNav/TopNavWrapper.tsx        |  4 +--
 src/components/Attributes/AttributeRow.tsx    |  6 ++--
 src/components/Attributes/Attributes.tsx      |  2 +-
 .../Attributes/BasicAttributeRow.tsx          |  8 ++---
 .../Attributes/ExtendedAttributeRow.tsx       |  2 +-
 .../ButtonWithDropdown/ButtonWithDropdown.tsx |  6 ++--
 src/components/Card/Content.tsx               |  2 +-
 src/components/Card/Root.tsx                  |  2 +-
 src/components/Card/Title.tsx                 |  2 +-
 .../ChannelAvailabilityItemContent.tsx        | 18 +++++------
 .../ChannelAvailabilityItemWrapper.tsx        |  4 +--
 .../ChannelsAvailabilityCardWrapper.tsx       |  6 ++--
 src/components/Datagrid/Datagrid.tsx          |  5 ++--
 src/components/Datagrid/styles.ts             |  6 ++--
 .../DateTimeField/DateTimeField.tsx           |  2 +-
 .../FileUploadField/FileUploadField.tsx       |  2 +-
 .../FilterPresetsSelect/FilterPresetItem.tsx  | 10 +++----
 .../FilterPresetsSelect.tsx                   | 20 ++++++-------
 src/components/LimitReachedAlert.tsx          |  2 +-
 src/components/Metadata/Metadata.tsx          |  2 +-
 src/components/Metadata/MetadataCard.tsx      | 14 ++++-----
 .../PageSectionHeader/PageSectionHeader.tsx   |  2 +-
 src/components/SeoForm/SeoForm.tsx            |  6 ++--
 src/components/Sidebar/MountingPoint.tsx      |  8 ++++-
 src/components/Sidebar/menu/Divider.tsx       |  2 +-
 src/components/Sidebar/menu/ItemGroup.tsx     | 18 +++++------
 src/components/Sidebar/menu/Menu.tsx          |  4 +--
 src/components/Sidebar/menu/SingleItem.tsx    |  6 ++--
 .../Sidebar/menu/useMenuStructure.tsx         |  2 +-
 src/components/Sidebar/user/Controls.tsx      | 10 +++----
 src/components/Sidebar/user/Info.tsx          |  8 ++---
 src/components/StatusDot/StatusDot.tsx        |  4 +--
 .../TableCellHeader/TableCellHeader.tsx       |  2 +-
 src/configuration/ConfigurationPage.tsx       |  2 +-
 .../CustomAppListPage/CustomAppListPage.tsx   |  4 +--
 .../PermissionAlert/PermissionAlert.tsx       |  2 +-
 .../WebhookDetailsPage/WebhookDetailsPage.tsx |  2 +-
 .../CustomerAddressListPage.tsx               |  2 +-
 .../GiftCardSettings/GiftCardSettingsPage.tsx |  2 +-
 .../GiftCardUpdate/GiftCardHistory/styles.ts  |  8 ++---
 .../HomeAnalyticsCard/HomeAnalyticsCard.tsx   |  4 +--
 .../HomeNotificationTable.tsx                 |  4 +--
 src/home/components/HomePage/HomePage.tsx     |  6 ++--
 .../HomeProductListCard.tsx                   |  4 +--
 .../MenuDetailsPage/MenuDetailsPage.tsx       |  2 +-
 .../OrderChangeWarehouseDialog.tsx            |  2 +-
 .../OrderDraftPage/OrderDraftPage.tsx         |  2 +-
 .../components/OrderDraftPage/styles.ts       |  2 +-
 .../ExtraInfoLines.tsx                        |  2 +-
 src/orders/components/OrderHistory/styles.ts  |  4 +--
 .../OrderInvoiceList/OrderInvoiceList.tsx     |  2 +-
 .../OrderListDatagrid/OrderListDatagrid.tsx   |  2 +-
 .../OrderListPage/OrderListPage.tsx           |  4 +--
 src/orders/components/OrderPayment/styles.ts  |  2 +-
 .../PageTypeDetailsPage.tsx                   |  2 +-
 .../PermissionGroupMemberList.tsx             |  2 +-
 .../ProductTypeDetailsPage.tsx                |  2 +-
 .../ProductDetailsForm/ProductDetailsForm.tsx |  2 +-
 .../ProductListDatagrid.tsx                   |  2 +-
 .../ProductListPage/ProductListPage.tsx       |  6 ++--
 .../ProductListTiles/ProductListTiles.tsx     | 10 +++----
 .../components/ProductMedia/ProductMedia.tsx  | 14 ++++-----
 .../ProductOrganization.tsx                   |  4 +--
 .../ProductStocks/ProductStocks.tsx           | 30 +++++++++----------
 .../components/ProductTile/ProductTile.tsx    | 16 +++++-----
 .../ProductVariantPrice.tsx                   |  4 +--
 .../ShippingWeightUnitForm.tsx                |  2 +-
 .../SiteSettingsPage/SiteSettingsPage.tsx     |  2 +-
 src/staff/components/StaffList/StaffList.tsx  |  2 +-
 .../pages/TaxChannelsPage/TaxChannelsPage.tsx |  2 +-
 .../pages/TaxClassesPage/TaxClassesPage.tsx   |  2 +-
 .../TaxCountriesPage/TaxCountriesPage.tsx     |  2 +-
 src/themeOverrides.ts                         |  2 +-
 .../TranslationsLanguageList.tsx              |  2 +-
 97 files changed, 257 insertions(+), 252 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7a7283ca75b..aeacb87fa3f 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.81",
+        "@saleor/macaw-ui": "0.8.0-pre.86",
         "@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.81",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.81.tgz",
-      "integrity": "sha512-6s15zUyn82492DwMDNm0yI6uAzik8t/OlI+LrH23L3EgzcyzprbA7DYzwcV4C7vlCEiMxywLnfS/0b1RYnhM1w==",
+      "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==",
       "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.81",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.81.tgz",
-      "integrity": "sha512-6s15zUyn82492DwMDNm0yI6uAzik8t/OlI+LrH23L3EgzcyzprbA7DYzwcV4C7vlCEiMxywLnfS/0b1RYnhM1w==",
+      "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==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom-interactions": "^0.5.0",
diff --git a/package.json b/package.json
index f939fbc926b..4670eb42969 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.81",
+    "@saleor/macaw-ui": "0.8.0-pre.86",
     "@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 cbf7fcaf6a3..21f4775fd2e 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={8} marginTop={8}>
+    <Box display="flex" flexDirection="column" gap="s5" marginTop="s5">
       {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 2e81b4e17a3..4d1d5aeae11 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 = 11;
+const avatarSize = "s8";
 
 export const AppAvatar: React.FC<{
   logo?: AppLogo | undefined;
@@ -11,7 +11,7 @@ export const AppAvatar: React.FC<{
     return (
       <Box
         __backgroundColor={logo?.color}
-        padding={3}
+        padding="s1"
         width={avatarSize}
         height={avatarSize}
         borderRadius={2}
@@ -26,7 +26,7 @@ export const AppAvatar: React.FC<{
       <Box
         __backgroundColor={logo?.color}
         backgroundColor="surfaceNeutralSubdued"
-        padding={3}
+        padding="s1"
         width={avatarSize}
         height={avatarSize}
         display="flex"
diff --git a/src/apps/components/AppDetailsPage/HeaderOptions.tsx b/src/apps/components/AppDetailsPage/HeaderOptions.tsx
index d14e83f5dbd..401fdcde786 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={10}>
+      <Box marginX="s7">
         <Skeleton />
         <div className={classes.hr} />
       </Box>
@@ -39,7 +39,7 @@ const HeaderOptions: React.FC<HeaderOptionsProps> = ({
   }
 
   return (
-    <Box marginX={10}>
+    <Box marginX="s7">
       <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 93cfaf7bb61..eb9a3f86422 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={9}>
+        <Box paddingY="s6">
           <CardSpacer />
           <Card>
             <CardTitle
@@ -127,7 +127,7 @@ export const AppInstallPage: React.FC<AppInstallPageProps> = ({
             </CardContent>
           </Card>
           <CardSpacer />
-          <Box display="flex" justifyContent="space-between" padding={9}>
+          <Box display="flex" justifyContent="space-between" padding="s6">
             <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 c810ba86538..6355153dcc2 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={8}
+        marginY="s5"
       >
-        <Box className={classes.appContent} marginY={8}>
+        <Box className={classes.appContent} marginY="s5">
           {nothingInstalled && (
-            <Box paddingY={6}>
+            <Box paddingY="s3">
               <Text as="h3" variant="heading" color="textNeutralSubdued">
                 {intl.formatMessage(messages.installedApps)}
               </Text>
-              <Box marginTop={6}>
+              <Box marginTop="s3">
                 <Text variant="caption">
                   {intl.formatMessage(messages.nothingInstalledPlaceholder)}
                 </Text>
@@ -97,7 +97,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
           )}
           {sectionsAvailability.installed && (
             <>
-              <Box paddingX={8} paddingY={6}>
+              <Box paddingX="s5" paddingY="s3">
                 <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={10}>
+            <Box marginTop="s7">
               <Text
                 as="h3"
                 variant="heading"
@@ -131,7 +131,7 @@ export const AppListPage: React.FC<AppListPageProps> = props => {
             </Box>
           )}
           {sectionsAvailability.comingSoon && !marketplaceError && (
-            <Box marginTop={10}>
+            <Box marginTop="s7">
               <Text
                 as="h3"
                 variant="heading"
diff --git a/src/apps/components/AppListRow/AppListCardActions.tsx b/src/apps/components/AppListRow/AppListCardActions.tsx
index f5563064f2e..ce906c3ca35 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={6}
+      gap="s3"
       borderStyle="solid"
       borderWidth={1}
       borderBottomLeftRadius={3}
       borderBottomRightRadius={3}
       borderColor="neutralPlain"
       borderTopStyle="none"
-      padding={8}
+      padding="s5"
     >
       {githubForkHandler && (
         <Button
diff --git a/src/apps/components/AppListRow/AppListCardDescription.tsx b/src/apps/components/AppListRow/AppListCardDescription.tsx
index 4cf2752f3bb..f86b3025bc9 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={8}
+    padding="s5"
   >
     <Box
       display="flex"
       flexDirection="row"
       alignItems="center"
-      marginBottom={8}
-      gap={6}
+      marginBottom="s5"
+      gap="s3"
     >
       <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 5390f234acb..d933efcff23 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={8}
-      margin={0}
+      gap="s5"
+      margin="s0"
       borderColor="neutralPlain"
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
-      paddingY={5}
-      paddingX={8}
+      paddingY="s2"
+      paddingX="s5"
       alignItems="start"
     >
       {integrations.map(integration => (
@@ -37,7 +37,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
           as="li"
           display="flex"
           alignItems="center"
-          gap={4}
+          gap="s1.5"
           key={integration.name}
         >
           <Box
@@ -47,7 +47,7 @@ const AppListCardIntegrations: React.FC<AppListCardIntegrationsProps> = ({
             borderStyle="solid"
             borderColor="neutralPlain"
             borderWidth={1}
-            padding={3}
+            padding="s1"
             display="flex"
             placeItems="center"
           >
diff --git a/src/apps/components/AppListRow/AppListCardLinks.tsx b/src/apps/components/AppListRow/AppListCardLinks.tsx
index c23215cd093..e7f7ef41410 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={7}
+      gap="s4"
       borderLeftStyle="solid"
       borderRightStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
-      paddingY={6}
-      paddingX={8}
+      paddingY="s3"
+      paddingX="s5"
     >
       {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 df9eeeb2d85..771a7b06f47 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={8}
-      padding={8}
+      columnGap="s5"
+      padding="s5"
     >
       {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 8d1c85b07ae..f1903d7abae 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={13}
-    height={13}
+    width="s10"
+    height="s10"
     display="flex"
     placeItems="center"
     borderRadius={3}
diff --git a/src/apps/components/AppPage/AppPageNav.tsx b/src/apps/components/AppPage/AppPageNav.tsx
index 16664f1a537..bf10007a9cc 100644
--- a/src/apps/components/AppPage/AppPageNav.tsx
+++ b/src/apps/components/AppPage/AppPageNav.tsx
@@ -31,9 +31,9 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
         justifyContent="space-between"
         width="100%"
       >
-        <Box display="flex" gap={7} alignItems="center">
+        <Box display="flex" gap="s4" alignItems="center">
           <TopNavLink to={goBackLink} variant="tertiary" />
-          <Box display="flex" gap={5} alignItems="center">
+          <Box display="flex" gap="s2" alignItems="center">
             <AppAvatar />
             <Box display="flex" flexDirection="column">
               <Text variant="heading">{name}</Text>
@@ -54,7 +54,7 @@ export const AppPageNav: React.FC<AppPageNavProps> = ({
           </Box>
         </Box>
       </Box>
-      <Box display="flex" gap={4}>
+      <Box display="flex" gap="s1.5">
         {supportUrl && (
           <Button
             variant="secondary"
diff --git a/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx b/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
index f1acf11a12f..b54cda27b00 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={4}
+      gap="s1.5"
       onClick={e => {
         try {
           e.preventDefault();
diff --git a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
index 2f1d9d606d8..9fe1e5b9df5 100644
--- a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
+++ b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
@@ -37,7 +37,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
       disabled={!app.isActive}
     >
       <List.Item
-        padding={7}
+        padding="s4"
         borderTopStyle="solid"
         borderWidth={1}
         borderColor="neutralPlain"
@@ -48,7 +48,7 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         cursor={app.isActive ? "pointer" : "not-allowed"}
       >
         <Box
-          gap={5}
+          gap="s2"
           alignItems="center"
           display="grid"
           __gridTemplateColumns="1fr auto"
@@ -56,11 +56,11 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
           <AppAvatar logo={logo} />
           <Box
             display="flex"
-            gap={3}
+            gap="s1"
             flexDirection="column"
             alignItems="flex-start"
           >
-            <Box display="flex" gap={5}>
+            <Box display="flex" gap="s2">
               <Text variant="bodyStrong">{app.name}</Text>
               <Text variant="body" color="textNeutralSubdued">
                 {`v${app.version}`}
@@ -89,12 +89,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
         </Box>
         <Box
           display="flex"
-          marginTop={{ mobile: 4, desktop: 0 }}
+          marginTop={{ mobile: "s1.5", desktop: "s0" }}
           flexDirection="row"
           justifyContent={{ mobile: "flex-end", desktop: "flex-start" }}
-          gap={6}
+          gap="s3"
         >
-          <Box marginLeft="auto" display="flex" alignItems="center" gap={8}>
+          <Box marginLeft="auto" display="flex" alignItems="center" gap="s5">
             {!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 8389ddaa1a8..bf860606ebb 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={7}
+      padding="s4"
       borderTopStyle="solid"
       borderWidth={1}
       borderColor="neutralPlain"
@@ -42,7 +42,7 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
     >
       <Box
         display="flex"
-        gap={5}
+        gap="s2"
         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={3} marginX={3}>
+                <Box display="flex" placeItems="center" gap="s1" marginX="s1">
                   <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 a43a01a1ff2..8700ef375dc 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={4} alignItems="center">
+          <Box display="flex" gap="s1.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 0ad3337158b..1c9e9882f24 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={0}
+          top="s0"
           borderLeftWidth={0}
           borderTopWidth={0}
           borderBottomWidth={0}
@@ -89,9 +89,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           <Box
             ref={appActionAnchor}
             position="sticky"
-            bottom={0}
-            left={0}
-            right={0}
+            bottom="s0"
+            left="s0"
+            right="s0"
             backgroundColor="plain"
             borderTopWidth={1}
             borderTopStyle="solid"
diff --git a/src/components/AppLayout/LimitsInfo.tsx b/src/components/AppLayout/LimitsInfo.tsx
index 301c4e2b9ff..fc96afa298b 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={10} bottom={3}>
+  <Box position="absolute" left="s7" bottom="s1">
     {text}
   </Box>
 );
diff --git a/src/components/AppLayout/ListFilters/ListFilters.tsx b/src/components/AppLayout/ListFilters/ListFilters.tsx
index 49db03b3f1a..666b5d2f8ee 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={7}
-      paddingBottom={5}
-      paddingX={9}
+      gap="s4"
+      paddingBottom="s2"
+      paddingX="s6"
     >
-      <Box display="flex" alignItems="center" gap={7}>
+      <Box display="flex" alignItems="center" gap="s4">
         <FiltersSelect
           errorMessages={errorMessages}
           menu={filterStructure}
diff --git a/src/components/AppLayout/TopNav/Menu.tsx b/src/components/AppLayout/TopNav/Menu.tsx
index 0ef66ffc279..2532975b14d 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={5}
+          padding="s2"
           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={4}
-                paddingY={5}
+                paddingX="s1.5"
+                paddingY="s2"
                 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 94bf2b97a3d..203d610e969 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: 5 })}>
+  <Link to={to} className={sprinkles({ marginRight: "s2" })}>
     <Button
       icon={<ArrowLeftIcon />}
       variant={variant}
diff --git a/src/components/AppLayout/TopNav/TopNavWrapper.tsx b/src/components/AppLayout/TopNav/TopNavWrapper.tsx
index bb30abb9a68..66174e56e8c 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={9}
-    paddingY={8}
+    paddingX="s6"
+    paddingY="s5"
     borderBottomWidth={withoutBorder ? 0 : 1}
     borderBottomStyle="solid"
     borderColor="neutralPlain"
diff --git a/src/components/Attributes/AttributeRow.tsx b/src/components/Attributes/AttributeRow.tsx
index b2ec8d7f613..86df22f3f69 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={5} alignItems="center" padding={3}>
+        <Box as="li" display="flex" gap="s2" alignItems="center" padding="s1">
           <Box data-test-id="attribute-value">
             <Box
               display="flex"
-              gap={2}
+              gap="s0.5"
               flexDirection="column"
               alignItems="flex-end"
             >
@@ -224,7 +224,7 @@ const AttributeRow: React.FC<AttributeRowProps> = ({
             as="label"
             htmlFor={`attribute:${attribute.label}`}
             display="flex"
-            gap={3}
+            gap="s1"
             cursor="pointer"
           >
             <Text>{attribute.label}</Text>
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index a4b0babb8ef..02ed48bcf06 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={5}>
+        <Box display="flex" flexDirection="column" gap="s2">
           <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 6c7bbba85f1..dbfe80b0c91 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={3}
-    paddingX={2}
+    paddingY="s6"
+    paddingX="s0.5"
     display="grid"
     gridTemplateColumns={2}
-    gap={8}
+    gap="s5"
   >
     <Box
       data-test-id="attribute-label"
       as="label"
       htmlFor={id}
       display="flex"
-      gap={3}
+      gap="s1"
       cursor={clickableLabel ? "pointer" : "auto"}
     >
       <Text>{label}</Text>
diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx
index 95273986840..4a2ca73d606 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={3}
+        paddingY="s6"
       >
         <Text data-test-id="attribute-label">{label}</Text>
         <Button
diff --git a/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx b/src/components/ButtonWithDropdown/ButtonWithDropdown.tsx
index d61610203f7..311649cf9f1 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={5}
+          padding="s2"
           borderRadius={4}
           boxShadow="overlay"
           backgroundColor="surfaceNeutralPlain"
@@ -39,8 +39,8 @@ export const ButtonWithDropdown: React.FC<ButtonWithDropdownProps> = ({
             <Dropdown.Item>
               <List.Item
                 borderRadius={4}
-                paddingX={4}
-                paddingY={5}
+                paddingX="s1.5"
+                paddingY="s2"
                 onClick={item.onSelect}
                 data-test-id={item.testId}
               >
diff --git a/src/components/Card/Content.tsx b/src/components/Card/Content.tsx
index 023d7fc34d1..89ad0b18b99 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={9} {...rest}>
+  <Box paddingX="s6" {...rest}>
     {children}
   </Box>
 );
diff --git a/src/components/Card/Root.tsx b/src/components/Card/Root.tsx
index 5506664183b..b4919705778 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={9} {...rest}>
+  <Box display="flex" flexDirection="column" gap="s6" {...rest}>
     {children}
   </Box>
 );
diff --git a/src/components/Card/Title.tsx b/src/components/Card/Title.tsx
index 13d4eebe8b8..4db7848b405 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={9} paddingTop={9}>
+  <Box paddingX="s6" paddingTop="s6">
     <Text variant="heading">{children}</Text>
   </Box>
 );
diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent.tsx
index 871f8f8aba3..e1d580a6fa9 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={6} paddingTop={6} flexDirection="column">
+    <Box display="flex" gap="s3" paddingTop="s3" 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={6}
+        gap="s3"
       >
         <RadioGroup.Item
           id={`${id}-isPublished-true`}
           value="true"
           name="isPublished"
         >
-          <Box display="flex" alignItems="baseline" gap={5}>
+          <Box display="flex" alignItems="baseline" gap="s2">
             <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={5}>
+          <Box display="flex" alignItems="baseline" gap="s2">
             <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={3}>
+        <Box display="flex" flexDirection="column" alignItems="start" gap="s1">
           <Checkbox
             onCheckedChange={(checked: boolean) => setPublicationDate(checked)}
             checked={isPublicationDate}
@@ -172,13 +172,13 @@ export const ChannelAvailabilityItemContent: React.FC<ChannelContentProps> = ({
             }
             display="flex"
             flexDirection="column"
-            gap={6}
+            gap="s3"
           >
             <RadioGroup.Item
               id={`channel:isAvailableForPurchase:${id}-true`}
               value="true"
             >
-              <Box display="flex" __alignItems="baseline" gap={5}>
+              <Box display="flex" __alignItems="baseline" gap="s2">
                 <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={5}>
+              <Box display="flex" __alignItems="baseline" gap="s2">
                 <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={3}
+              gap="s1"
               flexDirection="column"
               alignItems="start"
             >
diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
index 9ba9f7ac58a..9e7723d3706 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={12}>
+    <Accordion.Item value="channel-availability-item" gap="s9">
       <Accordion.Trigger buttonDataTestId="expand-icon">
         <Text variant={"bodyEmp"}>{name}</Text>
         <Label text={messages.availableDateText} />
       </Accordion.Trigger>
-      <Accordion.Content paddingLeft={6}>{children}</Accordion.Content>
+      <Accordion.Content paddingLeft="s3">{children}</Accordion.Content>
     </Accordion.Item>
   </Accordion>
 );
diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
index 4cb29ed92db..e1ea8f01bf4 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={3}>
+          <Box display={"flex"} flexDirection={"column"} gap="s1">
             <div>
               {intl.formatMessage({
                 id: "5A6/2C",
@@ -70,8 +70,8 @@ export const ChannelsAvailabilityCardWrapper: React.FC<
           </RequirePermissions>
         </Box>
       </DashboardCard.Title>
-      <DashboardCard.Content gap={3} display="flex" flexDirection="column">
-        <Box display="flex" flexDirection="column" gap={8}>
+      <DashboardCard.Content gap="s1" display="flex" flexDirection="column">
+        <Box display="flex" flexDirection="column" gap="s5">
           {children}
         </Box>
       </DashboardCard.Content>
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index 1d872f7920e..03661253971 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={12}>
+      <Box display="flex" justifyContent="center" marginY="s9">
         <CircularProgress />
       </Box>
     );
@@ -566,7 +566,7 @@ export const Datagrid: React.FC<DatagridProps> = ({
               </div>
             </>
           ) : (
-            <Box padding={9} textAlign="center">
+            <Box padding="s6" textAlign="center">
               <Text size="small">{emptyText}</Text>
             </Box>
           )}
@@ -596,5 +596,4 @@ export const Datagrid: React.FC<DatagridProps> = ({
   );
 };
 
-Datagrid.displayName = "Datagrid";
 export default Datagrid;
diff --git a/src/components/Datagrid/styles.ts b/src/components/Datagrid/styles.ts
index 2964f6cb836..d5522e0097e 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[4],
+        padding: vars.space["s1.5"],
       },
       columnPicker: {
         display: "flex",
@@ -40,7 +40,7 @@ const useStyles = makeStyles(
       },
       ghostIcon: {
         color: vars.colors.foreground.iconNeutralPlain,
-        padding: vars.space["3"],
+        padding: vars.space.s1,
       },
       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[3],
+          padding: vars.space.s1,
           outline: 0,
         },
         "& input[type='number']:not([class*='MuiInputBase'])": {
diff --git a/src/components/DateTimeField/DateTimeField.tsx b/src/components/DateTimeField/DateTimeField.tsx
index 2ca2072e3fa..2e2e260ca8e 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={2}>
+    <Box display="flex" gap="s0.5">
       <TextField
         fullWidth
         disabled={disabled}
diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx
index cb455df7ebf..c25b34a3adf 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={5} alignItems="center">
+          <Box display="flex" gap="s2" alignItems="center">
             <Text variant="caption">
               {loading ? (
                 <Skeleton />
diff --git a/src/components/FilterPresetsSelect/FilterPresetItem.tsx b/src/components/FilterPresetsSelect/FilterPresetItem.tsx
index a2022b14e8d..b977495dc00 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={4}
-        paddingRight={11}
-        paddingY={3}
-        gap={6}
+        paddingLeft="s1.5"
+        paddingRight="s8"
+        paddingY="s1"
+        gap="s3"
         borderRadius={2}
         position="relative"
         display="flex"
@@ -40,7 +40,7 @@ export const FilterPresetItem = ({
             zIndex="2"
             position="absolute"
             __top="50%"
-            right={4}
+            right="s1.5"
             __transform="translateY(-50%)"
             onClick={onRemove}
             display="flex"
diff --git a/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx b/src/components/FilterPresetsSelect/FilterPresetsSelect.tsx
index de6f9bee63e..c2e9fe76017 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={3}
+            padding="s1"
             borderRadius={3}
             boxShadow="overlay"
             borderColor="neutralHighlight"
             borderStyle="solid"
             borderWidth={1}
             width="100%"
-            marginTop={2}
+            marginTop="s0.5"
             backgroundColor="surfaceNeutralPlain"
           >
             <Dropdown.Item>
               <List.Item
-                paddingX={4}
-                paddingY={3}
-                gap={6}
+                paddingX="s1.5"
+                paddingY="s1"
+                gap="s3"
                 borderRadius={3}
                 onClick={onSelectAll}
               >
@@ -143,14 +143,14 @@ export const FilterPresetsSelect = ({
             </Dropdown.Item>
             {savedPresets.length > 0 && (
               <Box
-                height={1}
-                marginY={3}
+                height="spx"
+                marginY="s1"
                 __backgroundColor={vars.colors.border.neutralHighlight}
                 __marginLeft={-4}
                 __width={getSeparatorWidth("4px")}
               />
             )}
-            <Box display="flex" flexDirection="column" gap={2}>
+            <Box display="flex" flexDirection="column" gap="s0.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: 6,
+            marginLeft: "s3",
           })}
           onClick={() => onUpdate(savedPresets[activePreset - 1])}
           variant="secondary"
@@ -191,7 +191,7 @@ export const FilterPresetsSelect = ({
             <Button
               data-test-id="add-preset-button"
               className={sprinkles({
-                marginLeft: 6,
+                marginLeft: "s3",
               })}
               icon={<PlusIcon />}
               onClick={onSave}
diff --git a/src/components/LimitReachedAlert.tsx b/src/components/LimitReachedAlert.tsx
index 5b731dcbd04..0ebdd3bdd4f 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: 5,
+        marginBottom: "s2",
       }),
       "remove-icon-background",
     )}
diff --git a/src/components/Metadata/Metadata.tsx b/src/components/Metadata/Metadata.tsx
index 4ffbba9928b..88495757b79 100644
--- a/src/components/Metadata/Metadata.tsx
+++ b/src/components/Metadata/Metadata.tsx
@@ -53,7 +53,7 @@ export const Metadata: React.FC<MetadataProps> = ({ data, onChange }) => {
   };
 
   return (
-    <Box display="grid" gap={5} paddingBottom={9}>
+    <Box display="grid" gap="s2" paddingBottom="s6">
       <MetadataCard
         data={data?.metadata}
         isPrivate={false}
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index 47255c649f1..55b8e0e75a0 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={3}
+      gap="s1"
     >
       <DashboardCard.Title>
         <Box
@@ -124,7 +124,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                 <Table>
                   <TableHead>
                     <TableRowLink>
-                      <TableCell style={{ paddingLeft: vars.space[9] }}>
+                      <TableCell style={{ paddingLeft: vars.space.s6 }}>
                         <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[11] }}>
+                      <TableCell style={{ paddingLeft: vars.space.s8 }}>
                         <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[9],
+                          paddingRight: vars.space.s6,
                         }}
                       >
                         <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[9] }}>
+                        <TableCell style={{ paddingLeft: vars.space.s6 }}>
                           <TextField
                             InputProps={{
                               classes: {
@@ -194,7 +194,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                             value={field.value}
                           />
                         </TableCell>
-                        <TableCell style={{ paddingRight: vars.space[9] }}>
+                        <TableCell style={{ paddingRight: vars.space.s6 }}>
                           <Box display="flex" justifyContent="flex-end">
                             <Button
                               variant="secondary"
@@ -217,7 +217,7 @@ export const MetadataCard: React.FC<MetadataCardProps> = ({
                   </TableBody>
                 </Table>
               )}
-              <DashboardCard.Content marginTop={5} paddingLeft={9}>
+              <DashboardCard.Content marginTop="s2" paddingLeft="s6">
                 <Button
                   variant="secondary"
                   data-test-id="add-field"
diff --git a/src/components/PageSectionHeader/PageSectionHeader.tsx b/src/components/PageSectionHeader/PageSectionHeader.tsx
index da29dbc0947..e72e7738287 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={9}>
+    <Box paddingTop="s6">
       {title && <Typography variant="h5">{title}</Typography>}
       {title && description && <VerticalSpacer />}
       {description && <Typography variant="body2">{description}</Typography>}
diff --git a/src/components/SeoForm/SeoForm.tsx b/src/components/SeoForm/SeoForm.tsx
index 314d0a3a798..2802f7ebaf6 100644
--- a/src/components/SeoForm/SeoForm.tsx
+++ b/src/components/SeoForm/SeoForm.tsx
@@ -143,13 +143,13 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
       <DashboardCard.Content>
         {shouldDisplayHelperText && <Text>{helperText}</Text>}
         {expanded && (
-          <Box display="grid" gap={5}>
+          <Box display="grid" gap="s2">
             <Box>
               <Input
                 error={!!getError(SeoField.slug) || slug.length > maxSlugLength}
                 name={SeoField.slug}
                 label={
-                  <Box display="flex" gap={3}>
+                  <Box display="flex" gap="s1">
                     <Box as="span">
                       <FormattedMessage defaultMessage="Slug" id="IoDlcd" />
                     </Box>
@@ -187,7 +187,7 @@ export const SeoForm: React.FC<SeoFormProps> = props => {
               placeholder={titlePlaceholder}
               helperText={intl.formatMessage(seoFieldMessage)}
               label={
-                <Box display="flex" gap={3}>
+                <Box display="flex" gap="s1">
                   <Box as="span">
                     <FormattedMessage
                       defaultMessage="Search engine title"
diff --git a/src/components/Sidebar/MountingPoint.tsx b/src/components/Sidebar/MountingPoint.tsx
index ba3c597b6cf..eff37337b13 100644
--- a/src/components/Sidebar/MountingPoint.tsx
+++ b/src/components/Sidebar/MountingPoint.tsx
@@ -10,7 +10,13 @@ export const MountingPoint = () => {
     theme === "defaultLight" ? sideBarDefaultLogo : sideBarDefaultLogoDarkMode;
 
   return (
-    <Box display="flex" gap={6} paddingX={7} paddingY={8} alignItems="center">
+    <Box
+      display="flex"
+      gap="s3"
+      paddingX="s4"
+      paddingY="s5"
+      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 aa0b96c3028..682f6061bd8 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 ?? 4} paddingX={3}>
+  <List.Divider paddingY={menuItem.paddingY ?? "s1.5"} paddingX="s1">
     <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 22e6f117e0a..fc5a5fc596d 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={5}
-        paddingRight={3}
+        paddingX="s2"
+        paddingRight="s1"
         borderRadius={3}
         size="small"
         active={isActive}
@@ -43,8 +43,8 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
           <Box
             display="flex"
             alignItems="center"
-            gap={6}
-            paddingY={4}
+            gap="s3"
+            paddingY="s1.5"
             borderRadius={3}
           >
             {menuItem.icon}
@@ -59,13 +59,13 @@ export const ItemGroup: React.FC<Props> = ({ menuItem }) => {
           borderLeftWidth={1}
           borderLeftStyle="solid"
           borderColor="neutralPlain"
-          paddingLeft={7}
-          marginLeft={7}
+          paddingLeft="s4"
+          marginLeft="s4"
           display="flex"
           flexDirection="column"
-          marginBottom={5}
-          marginTop={3}
-          gap={1}
+          marginBottom="s2"
+          marginTop="s1"
+          gap="spx"
         >
           {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 f3eae7ea615..0ab3ec78a58 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={6} overflowY="auto" className="hide-scrollbar">
-      <List as="ol" display="grid" gap={3} data-test-id="menu-list">
+    <Box padding="s3" overflowY="auto" className="hide-scrollbar">
+      <List as="ol" display="grid" gap="s1" 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 7cc7226690b..bca1b2f084f 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={5}
+      paddingX="s2"
       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: 4,
-            gap: 6,
+            paddingY: "s1.5",
+            gap: "s3",
             display: "flex",
             alignItems: "center",
           })}
diff --git a/src/components/Sidebar/menu/useMenuStructure.tsx b/src/components/Sidebar/menu/useMenuStructure.tsx
index a4af46294a8..f5e093600d7 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: 4,
+    paddingY: "s1.5",
   };
 
   const getAppSection = (): SidebarMenuItem => ({
diff --git a/src/components/Sidebar/user/Controls.tsx b/src/components/Sidebar/user/Controls.tsx
index c72762143eb..5df94e95ca2 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={5}
+            padding="s2"
             borderRadius={4}
             boxShadow="overlay"
             backgroundColor="surfaceNeutralPlain"
@@ -108,8 +108,8 @@ export const UserControls = () => {
               <List.Item
                 display="flex"
                 alignItems="center"
-                gap={5}
-                marginTop={3}
+                gap="s2"
+                marginTop="s1"
                 onClick={changeTheme}
                 {...listItemStyles}
                 data-test-id="theme-switch"
@@ -125,7 +125,7 @@ export const UserControls = () => {
 };
 
 const listItemStyles = {
-  paddingX: 4,
-  paddingY: 5,
+  paddingX: "s1.5",
+  paddingY: "s2",
   borderRadius: 4,
 } as const;
diff --git a/src/components/Sidebar/user/Info.tsx b/src/components/Sidebar/user/Info.tsx
index bcaac325bd6..1d3acf303ef 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={6}
-      paddingX={6}
-      paddingY={7}
+      gap="s3"
+      paddingX="s3"
+      paddingY="s4"
       alignItems="center"
       borderTopWidth={1}
       borderColor="neutralPlain"
       borderTopStyle="solid"
       justifyContent="space-between"
     >
-      <Box display="flex" gap={6} alignItems="center">
+      <Box display="flex" gap="s3" 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 8053ca0ad8a..72175ddd2af 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={5}
-    height={5}
+    width="s2"
+    height="s2"
     borderRadius="50%"
     backgroundColor={getStatusColor(status)}
   />
diff --git a/src/components/TableCellHeader/TableCellHeader.tsx b/src/components/TableCellHeader/TableCellHeader.tsx
index 4d6d6a1d8b2..3431488e00d 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[3],
+      marginBottom: vars.space.s1,
     },
     arrowLeft: {
       marginLeft: -24,
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index 022a77f9971..672cc9fd9ac 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={9} __maxWidth={"1024px"} margin="auto">
+        <Box paddingX="s6" __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 bc2cbe80a71..a3ed46cd25b 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={9}>
-        <Box marginBottom={4}>
+      <Box padding="s6">
+        <Box marginBottom="s1.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 9db5e9ee6e5..72533b0ebfd 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={5}>
+          <Box display="flex" gap="s2">
             {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 5e5825fd195..8b8dcef9c23 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={9}>
+              <Box padding="s6">
                 <WebhookStatus
                   data={data.isActive}
                   disabled={disabled}
diff --git a/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx b/src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx
index 76ad51389de..7ea5460d505 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={9}
+          padding="s6"
           flexDirection="column"
         >
           <Typography variant="h5">
diff --git a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx
index ec48c153baf..2bd2da47ac3 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={9} margin="auto" height="100vh">
+              <Box padding="s6" 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 2c0d7155c59..e523cf0a2c3 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[1],
+      marginBottom: vars.space.spx,
     },
     root: {
-      marginTop: vars.space[4],
-      paddingLeft: vars.space[9],
-      paddingRight: vars.space[9],
+      marginTop: vars.space["s1.5"],
+      paddingLeft: vars.space.s6,
+      paddingRight: vars.space.s6,
     },
   },
   { name: "GiftCardHistory" },
diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
index d97a2436357..af5af5e7707 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={8}
+      padding="s5"
       display="flex"
       justifyContent="space-between"
       data-test-id={testId}
     >
-      <Box display="flex" flexDirection="column" gap={2}>
+      <Box display="flex" flexDirection="column" gap="s0.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 29f8a12b72e..42d02adb3db 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[8]} !important`,
-        paddingRight: `${vars.space[8]} !important`,
+        paddingLeft: `${vars.space.s5} !important`,
+        paddingRight: `${vars.space.s5} !important`,
       },
     },
     cardContent: {
diff --git a/src/home/components/HomePage/HomePage.tsx b/src/home/components/HomePage/HomePage.tsx
index db28c6f43aa..a353153ecdc 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={9} paddingRight={11}>
+        <Box paddingLeft="s6" paddingRight="s8">
           <CardSpacer />
           <RequirePermissions
             requiredPermissions={[PermissionEnum.MANAGE_ORDERS]}
@@ -63,8 +63,8 @@ const HomePage: React.FC<HomePageProps> = props => {
             <Box
               display="grid"
               __gridTemplateColumns="repeat(2, 1fr)"
-              gap={8}
-              marginBottom={8}
+              gap="s5"
+              marginBottom="s5"
             >
               <HomeAnalyticsCard
                 title={intl.formatMessage(homePageMessages.salesCardTitle)}
diff --git a/src/home/components/HomeProductListCard/HomeProductListCard.tsx b/src/home/components/HomeProductListCard/HomeProductListCard.tsx
index dc027fdc39d..db7f6bd6c0c 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[8]} !important`,
-        paddingRight: `${vars.space[8]} !important`,
+        paddingLeft: `${vars.space.s5} !important`,
+        paddingRight: `${vars.space.s5} !important`,
       },
     },
     cardContent: {
diff --git a/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx b/src/navigation/components/MenuDetailsPage/MenuDetailsPage.tsx
index 2c8a15dcd00..2bf146adf7e 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={9} margin="auto" height="100vh">
+            <Box padding="s6" margin="auto" height="100vh">
               <Backlink href={menuListUrl()}>
                 {intl.formatMessage(sectionNames.navigation)}
               </Backlink>
diff --git a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
index 48f205533a3..ead32f31691 100644
--- a/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
+++ b/src/orders/components/OrderChangeWarehouseDialog/OrderChangeWarehouseDialog.tsx
@@ -150,7 +150,7 @@ export const OrderChangeWarehouseDialog: React.FC<
         </DialogContent>
       </ScrollShadow>
 
-      <DialogTable ref={setAnchor} css>
+      <DialogTable ref={setAnchor}>
         {filteredWarehouses ? (
           <RadioGroup
             value={selectedWarehouseId}
diff --git a/src/orders/components/OrderDraftPage/OrderDraftPage.tsx b/src/orders/components/OrderDraftPage/OrderDraftPage.tsx
index 01cef04ba61..7d926ffb090 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={6}>
+          <Box display="flex" alignItems="center" gap="s3">
             <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 4ec8840721c..13a3b6e4339 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[11],
+        paddingRight: vars.space.s8,
       },
     },
   }),
diff --git a/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx b/src/orders/components/OrderFulfilledProductsCard/ExtraInfoLines.tsx
index 662fcdf7307..9fc2877563c 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={7}
+      paddingY="s4"
       borderColor="neutralHighlight"
       borderBottomStyle={"solid"}
       borderBottomWidth={1}
diff --git a/src/orders/components/OrderHistory/styles.ts b/src/orders/components/OrderHistory/styles.ts
index e39a63baf04..e8ed2733537 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[9],
-      paddingLeft: vars.space[9],
+      paddingRight: vars.space.s6,
+      paddingLeft: vars.space.s6,
     },
     user: {
       marginBottom: theme.spacing(1),
diff --git a/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx b/src/orders/components/OrderInvoiceList/OrderInvoiceList.tsx
index 6e3fc6fae68..147efae73ce 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: 2 })}
+              className={sprinkles({ marginRight: "s0.5" })}
             >
               <FormattedMessage
                 id="e0RKe+"
diff --git a/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx b/src/orders/components/OrderListDatagrid/OrderListDatagrid.tsx
index b4184b5173c..ef66921d2b4 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={9}>
+        <Box paddingX="s6">
           <TablePaginationWithContext
             component="div"
             settings={settings}
diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx
index 0567e00ae6e..5b67ea0bbc7 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={6} display="flex" alignItems="center">
+            <Box marginX="s3" display="flex" alignItems="center">
               <ChevronRightIcon />
             </Box>
 
@@ -149,7 +149,7 @@ const OrderListPage: React.FC<OrderListPageProps> = ({
             />
           </Box>
 
-          <Box display="flex" alignItems="center" gap={5}>
+          <Box display="flex" alignItems="center" gap="s2">
             {!!onSettingsOpen && (
               <CardMenu
                 className={classes.settings}
diff --git a/src/orders/components/OrderPayment/styles.ts b/src/orders/components/OrderPayment/styles.ts
index 255e9e9badc..aba213b56a0 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[9],
+      paddingRight: vars.space.s6,
     },
   }),
   { name: "OrderPayment" },
diff --git a/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx b/src/pageTypes/components/PageTypeDetailsPage/PageTypeDetailsPage.tsx
index 2c0f1e5942b..6973a9e08bf 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={9}>
+                <Box paddingTop="s6">
                   <Typography>
                     {intl.formatMessage(commonMessages.generalInformations)}
                   </Typography>
diff --git a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
index b9adf211c98..a84318e314b 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[5],
+      gap: vars.space.s2,
     },
     avatarDefault: {
       "& div": {
diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
index e52e4df9d60..0daa0fccfc1 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: 9 })}
+                className={sprinkles({ paddingLeft: "s6" })}
               />
               {data.hasVariants && (
                 <>
diff --git a/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx b/src/products/components/ProductDetailsForm/ProductDetailsForm.tsx
index ce467d0a9b4..e97d6dace01 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={5} paddingX={8}>
+      <DashboardCard.Content display="grid" gap="s2" paddingX="s5">
         <Input
           label={intl.formatMessage({
             id: "6AMFki",
diff --git a/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx b/src/products/components/ProductListDatagrid/ProductListDatagrid.tsx
index 6e34c723fa5..75a65ed648b 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={9}>
+        <Box paddingX="s6">
           <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 b00a5ec82ee..14eb3eb9d6b 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={6} display="flex" alignItems="center">
+            <Box marginX="s3" display="flex" alignItems="center">
               <ChevronRightIcon />
             </Box>
 
@@ -178,7 +178,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
               })}
             />
           </Box>
-          <Box display="flex" alignItems="center" gap={5}>
+          <Box display="flex" alignItems="center" gap="s2">
             {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={7}>
+              <Box display="flex" gap="s4">
                 <ProductListDeleteButton
                   ref={setBulkDeleteButtonRef}
                   onClick={onProductsDelete}
diff --git a/src/products/components/ProductListTiles/ProductListTiles.tsx b/src/products/components/ProductListTiles/ProductListTiles.tsx
index 66956550325..38cdcbacf36 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={12}>
+        <Box display="flex" justifyContent="center" marginY="s9">
           <CircularProgress />
         </Box>
       );
@@ -40,8 +40,8 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
         <Box
           display="grid"
           gridTemplateColumns={{ mobile: 3, tablet: 5, desktop: 6 }}
-          gap={9}
-          padding={9}
+          gap="s6"
+          padding="s6"
           __paddingTop={`calc(${vars.space[9]} - ${vars.space[5]}`}
           data-test-id="tile-view"
         >
@@ -57,7 +57,7 @@ export const ProductListTiles: React.FC<ProductListTilesProps> = ({
     }
 
     return (
-      <Box padding={9} textAlign="center">
+      <Box padding="s6" 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={9}>
+      <Box paddingX="s6">
         <TablePaginationWithContext
           component="div"
           settings={settings}
diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx
index da041167ddc..42872cad9f0 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={5}
+                padding="s2"
                 borderRadius={4}
                 boxShadow="overlay"
                 backgroundColor="surfaceNeutralPlain"
@@ -142,8 +142,8 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                 <Dropdown.Item>
                   <List.Item
                     borderRadius={4}
-                    paddingX={4}
-                    paddingY={5}
+                    paddingX="s1.5"
+                    paddingY="s2"
                     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={4}
-                    paddingY={5}
+                    paddingX="s1.5"
+                    paddingY="s2"
                     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={8}>
+            <Box padding="s5">
               <Skeleton />
             </Box>
           ) : media.length > 0 ? (
@@ -212,7 +212,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
                     onSortEnd={onImageReorder}
                     className={sprinkles({
                       display: "grid",
-                      gap: 8,
+                      gap: "s5",
                       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 e21a2733dc2..0b1dc897fdb 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={8} display="flex" flexDirection="column">
+      <DashboardCard.Content gap="s5" display="flex" flexDirection="column">
         {canChangeType ? (
           <SingleAutocompleteSelectField
             displayValue={productTypeInputDisplayValue}
@@ -119,7 +119,7 @@ export const ProductOrganization: React.FC<
             {...fetchMoreProductTypes}
           />
         ) : (
-          <Box display="flex" flexDirection="column" gap={6}>
+          <Box display="flex" flexDirection="column" gap="s3">
             <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 209ae7ca9ee..30a0cc8f987 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={5} display="grid" gap={5}>
+        <Box paddingY="s2" display="grid" gap="s2">
           <Checkbox
             checked={data.isPreorder}
             name="isPreorder"
@@ -158,7 +158,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
             }}
             disabled={disabled}
           >
-            <Box display="flex" gap={3} paddingY={4}>
+            <Box display="flex" gap="s1" paddingY="s1.5">
               <Text>
                 <FormattedMessage {...messages.variantInPreorder} />
               </Text>
@@ -187,7 +187,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
           )}
 
           {!data.isPreorder && (
-            <Box display="grid" gap={5}>
+            <Box display="grid" gap="s2">
               <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[9] }}>
+                <TableCell style={{ paddingLeft: vars.space.s6 }}>
                   <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[9] }}>
+                    <TableCell style={{ paddingLeft: vars.space.s6 }}>
                       <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[9] }}
+                        style={{ paddingLeft: vars.space.s6 }}
                       >
                         <Text>
                           <FormattedMessage {...messages.assignWarehouse} />
                         </Text>
                       </TableCell>
-                      <TableCell style={{ paddingRight: vars.space[9] }}>
+                      <TableCell style={{ paddingRight: vars.space.s6 }}>
                         <Button
                           type="button"
                           icon={<PlusIcon />}
@@ -317,7 +317,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
                   <Dropdown.Content align="end">
                     <Box>
                       <List
-                        padding={5}
+                        padding="s2"
                         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={4}
-                              paddingY={5}
+                              paddingX="s1.5"
+                              paddingY="s2"
                               borderRadius={4}
                               onClick={() =>
                                 handleWarehouseStockAdd(warehouse.id)
@@ -346,7 +346,7 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
         )}
       {data.isPreorder && (
         <DashboardCard.Content>
-          <Box display="grid" gap={5}>
+          <Box display="grid" gap="s2">
             <Text variant="caption">
               <FormattedMessage {...messages.preorderEndDateSetup} />
             </Text>
@@ -393,11 +393,11 @@ export const ProductStocks: React.FC<ProductStocksProps> = ({
             </Box>
           </Box>
 
-          <Box display="grid" gap={3} paddingTop={5}>
+          <Box display="grid" gap="s1" paddingTop="s2">
             <Text variant="caption" color="textNeutralSubdued">
               <FormattedMessage {...messages.preorderProductsAvailability} />
             </Text>
-            <Box display="grid" gap={4}>
+            <Box display="grid" gap="s1.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[9] }}>
+              <TableCell style={{ paddingLeft: vars.space.s6 }}>
                 <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[9] }}>
+                  <TableCell style={{ paddingLeft: vars.space.s6 }}>
                     <Text>{listing.name}</Text>
                   </TableCell>
                   <TableCell>
diff --git a/src/products/components/ProductTile/ProductTile.tsx b/src/products/components/ProductTile/ProductTile.tsx
index 82d27cb1339..cfba1e0e3c3 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: 4,
+  marginBottom: "s1.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={3}>
+      <Box paddingRight="s1">
         <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: 2 })}
+        className={sprinkles({ paddingY: "s0.5" })}
       >
         {product.productType.name}
       </Text>
     </Box>
-    <Box display="flex" justifyContent="space-between" marginTop={2}>
+    <Box display="flex" justifyContent="space-between" marginTop="s0.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[8]} / -2)`}
-      __top={`calc(${vars.space[8]} / -2)`}
-      __width={`calc(100% + ${vars.space[8]})`}
-      __height={`calc(100% + ${vars.space[8]})`}
+      __right={`calc(${vars.space.s5} / -2)`}
+      __top={`calc(${vars.space.s5} / -2)`}
+      __width={`calc(100% + ${vars.space.s5})`}
+      __height={`calc(100% + ${vars.space.s5})`}
       __opacity={0.1}
       borderRadius={5}
       backgroundColor={{
diff --git a/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx b/src/products/components/ProductVariantPrice/ProductVariantPrice.tsx
index 33581a1acc6..09da6ae9a8b 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[9] }}>
+            <TableCell style={{ paddingLeft: vars.space.s6 }}>
               <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[9] }}>
+                  <TableCell style={{ paddingLeft: vars.space.s6 }}>
                     <Text>{listing?.name || <Skeleton />}</Text>
                   </TableCell>
                   <TableCell>
diff --git a/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx b/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
index 97a28e29c48..295d0c433b4 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[9] }}>
+          <CardActions style={{ paddingLeft: vars.space.s6 }}>
             <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 579d5e8478a..d6cccce97ad 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={5} paddingLeft={9}>
+              <Box gap="s2" paddingLeft="s6">
                 <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 8449ef69516..5e7952d2b88 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={5}>
+                <Box display="flex" alignItems="center" gap="s2">
                   <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 6ba21d1bb38..e9a46771918 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={9}>
+              <Box padding="s6">
                 <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 75ae70944ae..f514829811e 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={9}>
+              <Box padding="s6">
                 <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 6b44b51133e..3998462ea58 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={9}>
+              <Box padding="s6">
                 <PageTabs value="countries" onChange={handleTabChange}>
                   <PageTab
                     label={intl.formatMessage(taxesMessages.channelsSection)}
diff --git a/src/themeOverrides.ts b/src/themeOverrides.ts
index 506eaab0a6f..48532eb00f2 100644
--- a/src/themeOverrides.ts
+++ b/src/themeOverrides.ts
@@ -52,7 +52,7 @@ export const themeOverrides: Partial<Theme> = {
     },
     MuiCardHeader: {
       root: {
-        paddingRight: vars.space[11],
+        paddingRight: vars.space.s8,
         backgroundColor: vars.colors.background.surfaceNeutralPlain,
       },
       title: {
diff --git a/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx b/src/translations/components/TranslationsLanguageList/TranslationsLanguageList.tsx
index 82dfe8a17dd..0ec5c162e96 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[9]} !important`,
+        paddingLeft: `${vars.space.s6} !important`,
       },
     },
   },