diff --git a/src/components/ArticleComment/FooterActions/index.tsx b/src/components/ArticleComment/FooterActions/index.tsx
index 2104c97545..8107f02e34 100644
--- a/src/components/ArticleComment/FooterActions/index.tsx
+++ b/src/components/ArticleComment/FooterActions/index.tsx
@@ -228,7 +228,7 @@ const BaseFooterActions = ({
       <section ref={formWrapperRef}>
         {showForm && (
           <>
-            <Spacer size="base" />
+            <Spacer size="sp16" />
             <ArticleCommentForm
               articleId={article?.id!}
               setEditor={setEditor}
diff --git a/src/components/Dialogs/RssFeedDialog/Content.tsx b/src/components/Dialogs/RssFeedDialog/Content.tsx
index 9487b82574..0f5867dd1b 100644
--- a/src/components/Dialogs/RssFeedDialog/Content.tsx
+++ b/src/components/Dialogs/RssFeedDialog/Content.tsx
@@ -90,7 +90,7 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
                     />
                   </p>
                 </section>
-                <Spacer size="loose" />
+                <Spacer size="sp24" />
               </>
             ) : null}
 
@@ -139,7 +139,7 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
                 </section>
               ) : (
                 <>
-                  <Spacer size="base" />
+                  <Spacer size="sp16" />
                   <section className={styles.warningInput}>
                     <TextIcon
                       icon={<Icon icon={IconInfo} size={24} />}
@@ -157,9 +157,9 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
               )}
             </section>
 
-            <Spacer size="base" />
+            <Spacer size="sp16" />
             <hr />
-            <Spacer size="base" />
+            <Spacer size="sp16" />
 
             {/* gateways */}
             <section className={styles.gateways}>
diff --git a/src/components/Dialogs/SetPasswordDialog/Content.tsx b/src/components/Dialogs/SetPasswordDialog/Content.tsx
index c09eee6002..e93b6ac17a 100644
--- a/src/components/Dialogs/SetPasswordDialog/Content.tsx
+++ b/src/components/Dialogs/SetPasswordDialog/Content.tsx
@@ -150,7 +150,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
               description="src/components/Dialogs/SetPasswordDialog/Content.tsx"
             />
           </p>
-          <Spacer size="base" />
+          <Spacer size="sp16" />
         </Dialog.Content.Message>
         {InnerForm}
       </Dialog.Content>
diff --git a/src/components/Dialogs/TagEditorDialog/List/index.tsx b/src/components/Dialogs/TagEditorDialog/List/index.tsx
index 5a63e3bfcc..1aeef23f33 100644
--- a/src/components/Dialogs/TagEditorDialog/List/index.tsx
+++ b/src/components/Dialogs/TagEditorDialog/List/index.tsx
@@ -137,7 +137,7 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
           ))}
         </List>
 
-        <Spacer size="base" />
+        <Spacer size="sp16" />
 
         <Dialog.Content>
           <Dialog.Content.Message smUpAlign="center">
@@ -176,7 +176,7 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
           </Dialog.Content.Message>
         </Dialog.Content>
 
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Dialog.Content>
 
       {isAllowAdd && (
diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx b/src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx
index 00c4a4790d..cc6c41ce3f 100644
--- a/src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx
+++ b/src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx
@@ -33,7 +33,7 @@ const SupportPreview = ({
                   id="Myrqtn"
                 />
               </p>
-              <Spacer size="xtight" />
+              <Spacer size="sp8" />
               <p>
                 <FormattedMessage
                   defaultMessage="With your support, I will be able to accumulate more energy to create."
@@ -52,7 +52,7 @@ const SupportPreview = ({
                 <FormattedMessage defaultMessage="says: " id="M05PcB" />
               </TextIcon>
             </p>
-            <Spacer size="xtight" />
+            <Spacer size="sp8" />
           </>
         )}
 
diff --git a/src/components/Forms/PaymentForm/AddCredit/index.tsx b/src/components/Forms/PaymentForm/AddCredit/index.tsx
index 364090dbd7..564d46ddd2 100644
--- a/src/components/Forms/PaymentForm/AddCredit/index.tsx
+++ b/src/components/Forms/PaymentForm/AddCredit/index.tsx
@@ -272,7 +272,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
         <ConfirmTable.Row type="balance">
           <Balance currency={currency} amount={balance} showTopUp={false} />
         </ConfirmTable.Row>
-        <Spacer size="xtight" />
+        <Spacer size="sp8" />
       </ConfirmTable>
       {InnerForm}
       <StripeCheckout error={checkoutError} onChange={onCheckoutChange} />
@@ -283,7 +283,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
     return (
       <section className={styles.container}>
         {Content}
-        <Spacer size="loose" />
+        <Spacer size="sp24" />
         <Dialog.RoundedButton
           text={
             <FormattedMessage
@@ -302,7 +302,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
           }
           loading={isSubmitting || waiting}
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
         <Dialog.RoundedButton
           color="black"
           onClick={switchToSetAmount}
diff --git a/src/components/Forms/PaymentForm/ConnectStripeAccount/Request.tsx b/src/components/Forms/PaymentForm/ConnectStripeAccount/Request.tsx
index c33a1b81ea..c2fb4b703d 100644
--- a/src/components/Forms/PaymentForm/ConnectStripeAccount/Request.tsx
+++ b/src/components/Forms/PaymentForm/ConnectStripeAccount/Request.tsx
@@ -65,7 +65,7 @@ const Request: React.FC<Props> = ({ back, nextStep, closeDialog }) => {
 
       <Dialog.Content>
         <SelectCountry country={country} onChange={setCountry} />
-        <Spacer size="xxloose" />
+        <Spacer size="sp40" />
       </Dialog.Content>
 
       <Dialog.Footer
diff --git a/src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx b/src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx
index 9c0efd16e0..d55e4757d4 100644
--- a/src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx
+++ b/src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx
@@ -283,7 +283,7 @@ const Confirm: React.FC<FormProps> = ({
               </TextIcon>
             }
           />
-          <Spacer size="base" />
+          <Spacer size="sp16" />
         </>
       )}
 
diff --git a/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx b/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
index 343f996590..ed65c74e11 100644
--- a/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
+++ b/src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx
@@ -250,7 +250,7 @@ const SetAmount: React.FC<FormProps> = ({
   const ComposedAmountInputHint = () => {
     const hkdHint = isHKD ? (
       <section>
-        <Spacer size="xxtight" />
+        <Spacer size="sp4" />
         <FormattedMessage
           defaultMessage="Payment will be processed by Stripe, allowing your support to be unrestricted by region."
           id="TX5UzL"
@@ -394,7 +394,7 @@ const SetAmount: React.FC<FormProps> = ({
     <section className={styles.container}>
       {InnerForm}
 
-      <Spacer size="loose" />
+      <Spacer size="sp24" />
       <SubmitButton mode="rounded" {...submitButtonProps} />
 
       {isUSDT && hasEthAddress && !isConnectedAddress && (
diff --git a/src/components/Forms/PaymentForm/Processing/index.tsx b/src/components/Forms/PaymentForm/Processing/index.tsx
index 87aabdfb64..980fd2369e 100644
--- a/src/components/Forms/PaymentForm/Processing/index.tsx
+++ b/src/components/Forms/PaymentForm/Processing/index.tsx
@@ -179,7 +179,7 @@ const OthersProcessingForm: React.FC<Props> = ({
 
       {error && (
         <>
-          <Spacer size="loose" />
+          <Spacer size="sp24" />
           <Dialog.RoundedButton
             color="black"
             onClick={prevStep}
@@ -362,7 +362,7 @@ const USDTProcessingForm: React.FC<Props> = ({
         </PaymentInfo>
         {isError && (
           <>
-            <Spacer size="loose" />
+            <Spacer size="sp24" />
             <Dialog.RoundedButton
               color="black"
               onClick={switchToConfirm}
diff --git a/src/components/Forms/PaymentForm/StripeCheckout/index.tsx b/src/components/Forms/PaymentForm/StripeCheckout/index.tsx
index e8e26a95bd..1db0946958 100644
--- a/src/components/Forms/PaymentForm/StripeCheckout/index.tsx
+++ b/src/components/Forms/PaymentForm/StripeCheckout/index.tsx
@@ -67,7 +67,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({ error, onChange }) => {
         </Form.Field.Content>
 
         <Form.Field.Footer fieldMsgId={fieldMsgId} error={error} />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
         <Form.Field.Footer
           fieldMsgId={fieldMsgId}
           hint={
diff --git a/src/components/Spacer/index.tsx b/src/components/Spacer/index.tsx
index 237423c809..51780f5d28 100644
--- a/src/components/Spacer/index.tsx
+++ b/src/components/Spacer/index.tsx
@@ -1,17 +1,9 @@
 import styles from './styles.module.css'
 
 interface SpacerProps {
-  size?:
-    | 'xxtight'
-    | 'xtight'
-    | 'base'
-    | 'baseLoose'
-    | 'loose'
-    | 'xloose'
-    | 'xxloose'
-    | 'xxxloose'
+  size?: 'sp4' | 'sp8' | 'sp16' | 'sp20' | 'sp24' | 'sp32' | 'sp40' | 'sp64'
 }
 
-export const Spacer: React.FC<SpacerProps> = ({ size = 'loose' }) => (
+export const Spacer: React.FC<SpacerProps> = ({ size = 'sp24' }) => (
   <div className={styles[size]} aria-hidden></div>
 )
diff --git a/src/components/Spacer/styles.module.css b/src/components/Spacer/styles.module.css
index c84b61723f..b2fbe0a0cb 100644
--- a/src/components/Spacer/styles.module.css
+++ b/src/components/Spacer/styles.module.css
@@ -1,31 +1,31 @@
-.xxtight {
+.sp4 {
   padding-bottom: var(--sp4);
 }
 
-.xtight {
+.sp8 {
   padding-bottom: var(--sp8);
 }
 
-.base {
+.sp16 {
   padding-bottom: var(--sp16);
 }
 
-.baseLoose {
+.sp20 {
   padding-bottom: var(--sp20);
 }
 
-.loose {
+.sp24 {
   padding-bottom: var(--sp24);
 }
 
-.xloose {
+.sp32 {
   padding-bottom: var(--sp32);
 }
 
-.xxloose {
+.sp40 {
   padding-bottom: var(--sp40);
 }
 
-.xxxloose {
+.sp64 {
   padding-bottom: var(--sp64);
 }
diff --git a/src/views/ArticleDetail/Collection/index.tsx b/src/views/ArticleDetail/Collection/index.tsx
index e0773c0c16..cabc5e6fcf 100644
--- a/src/views/ArticleDetail/Collection/index.tsx
+++ b/src/views/ArticleDetail/Collection/index.tsx
@@ -102,7 +102,7 @@ const Collection: React.FC<{
                 })
               }
             />
-            <Spacer size="xtight" />
+            <Spacer size="sp8" />
             <UserDigest.Mini
               user={node.author}
               avatarSize={16}
diff --git a/src/views/ArticleDetail/Comments/CommentsDialog/ListContent.tsx b/src/views/ArticleDetail/Comments/CommentsDialog/ListContent.tsx
index f23fdd1afb..b676864b80 100644
--- a/src/views/ArticleDetail/Comments/CommentsDialog/ListContent.tsx
+++ b/src/views/ArticleDetail/Comments/CommentsDialog/ListContent.tsx
@@ -34,7 +34,7 @@ const CommentsDialogListContent = ({
     <>
       <Dialog.Content fixedHeight>
         <LatestComments id={id} lock={lock} />
-        <Spacer size="baseLoose" />
+        <Spacer size="sp20" />
         <section className={styles.fixedToolbar}>
           <FixedToolbar
             articleDetails={articleDetails}
diff --git a/src/views/ArticleDetail/Comments/LatestComments/index.tsx b/src/views/ArticleDetail/Comments/LatestComments/index.tsx
index e9c835a568..a16dd5e762 100644
--- a/src/views/ArticleDetail/Comments/LatestComments/index.tsx
+++ b/src/views/ArticleDetail/Comments/LatestComments/index.tsx
@@ -141,7 +141,7 @@ const LatestComments = ({ id, lock }: { id: string; lock: boolean }) => {
           isFallbackEditor
           showClear
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
       {!comments || (comments.length <= 0 && <EmptyComment />)}
       {!!comments && comments.length > 0 && (
@@ -151,7 +151,7 @@ const LatestComments = ({ id, lock }: { id: string; lock: boolean }) => {
           loader={
             <>
               <Placeholder />
-              <Spacer size="loose" />
+              <Spacer size="sp24" />
             </>
           }
           eof={
diff --git a/src/views/ArticleDetail/Placeholder/index.tsx b/src/views/ArticleDetail/Placeholder/index.tsx
index ea142a0c06..f68e896d0a 100644
--- a/src/views/ArticleDetail/Placeholder/index.tsx
+++ b/src/views/ArticleDetail/Placeholder/index.tsx
@@ -11,7 +11,7 @@ const Placeholder = () => {
         <div className={styles.line}></div>
         <div className={styles.line}></div>
       </section>
-      <Spacer size="base" />
+      <Spacer size="sp16" />
       <section className={styles.image}></section>
       <section className={styles.text}>
         <div className={styles.line}></div>
diff --git a/src/views/ArticleDetail/Support/SupportAuthor/index.tsx b/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
index 9a00a5cdef..d911153dae 100644
--- a/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
+++ b/src/views/ArticleDetail/Support/SupportAuthor/index.tsx
@@ -275,7 +275,7 @@ const SupportAuthor = (props: SupportAuthorProps) => {
       )}
       {isWalletSelect && (
         <>
-          <Spacer size="xxloose" />
+          <Spacer size="sp40" />
           <AuthWalletFeed
             submitCallback={() => forward('networkSelect')}
             isInSupport
@@ -284,7 +284,7 @@ const SupportAuthor = (props: SupportAuthorProps) => {
       )}
       {isNetworkSelect && (
         <>
-          <Spacer size="xxloose" />
+          <Spacer size="sp40" />
           <DynamicSwitchNetworkForm
             submitCallback={() => forward('setAmount')}
           />
diff --git a/src/views/ArticleDetail/Support/SupportWidget/index.tsx b/src/views/ArticleDetail/Support/SupportWidget/index.tsx
index 4143027822..1cf7876e5c 100644
--- a/src/views/ArticleDetail/Support/SupportWidget/index.tsx
+++ b/src/views/ArticleDetail/Support/SupportWidget/index.tsx
@@ -172,7 +172,7 @@ const SupportWidget = ({
                           />
                         </TextIcon>
                       </p>
-                      <Spacer size="xtight" />
+                      <Spacer size="sp8" />
                       <p data-test-id={TEST_ID.ARTICLE_SUPPORT_REPLY}>
                         {replyToDonator}
                       </p>
@@ -188,7 +188,7 @@ const SupportWidget = ({
                           />
                         </TextIcon>
                       </p>
-                      <Spacer size="xtight" />
+                      <Spacer size="sp8" />
                       <p data-test-id={TEST_ID.ARTICLE_SUPPORT_REPLY}>
                         <FormattedMessage
                           defaultMessage="With your support, I will be able to accumulate more energy to create."
diff --git a/src/views/ArticleDetail/index.tsx b/src/views/ArticleDetail/index.tsx
index 1558e3056a..f234dcde36 100644
--- a/src/views/ArticleDetail/index.tsx
+++ b/src/views/ArticleDetail/index.tsx
@@ -417,7 +417,7 @@ const BaseArticleDetail = ({
       </section>
 
       <Media at="sm">
-        <Spacer size="xxxloose" />
+        <Spacer size="sp64" />
         <CommentsDialog
           id={article.id}
           articleDetails={article}
diff --git a/src/views/CampaignDetail/Description/index.tsx b/src/views/CampaignDetail/Description/index.tsx
index 4789b6e6fb..593f25f077 100644
--- a/src/views/CampaignDetail/Description/index.tsx
+++ b/src/views/CampaignDetail/Description/index.tsx
@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 import { useContext } from 'react'
 
-import { LanguageContext, Layout } from '~/components'
+import { LanguageContext, Layout, Spacer } from '~/components'
 import { DescriptionCampaignFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -28,6 +28,8 @@ const Description = ({
             ],
         }}
       />
+
+      <Spacer size="sp40" />
     </Layout.Main.Spacing>
   )
 }
diff --git a/src/views/Follow/index.tsx b/src/views/Follow/index.tsx
index 460f02fd0f..ed24d4c2de 100644
--- a/src/views/Follow/index.tsx
+++ b/src/views/Follow/index.tsx
@@ -75,7 +75,7 @@ const Follow = () => {
         />
       </Media>
       <Media greaterThan="sm">
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
 
       <Layout.Main.Spacing hasVertical={false}>
diff --git a/src/views/Me/Notifications/index.tsx b/src/views/Me/Notifications/index.tsx
index f9fd3af9c4..b5a5f6f8d6 100644
--- a/src/views/Me/Notifications/index.tsx
+++ b/src/views/Me/Notifications/index.tsx
@@ -132,10 +132,10 @@ const Notifications = () => {
             </Layout.Header.Title>
           }
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
       <Media greaterThan="sm">
-        <Spacer size="xloose" />
+        <Spacer size="sp32" />
       </Media>
 
       <Head
diff --git a/src/views/Me/Settings/Misc/index.tsx b/src/views/Me/Settings/Misc/index.tsx
index 4eaf06a21c..cd4776ccb2 100644
--- a/src/views/Me/Settings/Misc/index.tsx
+++ b/src/views/Me/Settings/Misc/index.tsx
@@ -44,7 +44,7 @@ const SettingsMisc = () => {
         </TableView>
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }
diff --git a/src/views/Me/Settings/Notifications/CircleSettings/index.tsx b/src/views/Me/Settings/Notifications/CircleSettings/index.tsx
index 52ca0cc982..90929d9f51 100644
--- a/src/views/Me/Settings/Notifications/CircleSettings/index.tsx
+++ b/src/views/Me/Settings/Notifications/CircleSettings/index.tsx
@@ -438,7 +438,7 @@ const NotificationsCircleSettings = () => {
         <BaseNotificationSettings />
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }
diff --git a/src/views/Me/Settings/Notifications/index.tsx b/src/views/Me/Settings/Notifications/index.tsx
index 75b6a3ba0a..ffb2a588d8 100644
--- a/src/views/Me/Settings/Notifications/index.tsx
+++ b/src/views/Me/Settings/Notifications/index.tsx
@@ -36,7 +36,7 @@ const NotificationSettings = () => {
         <GeneralSettings />
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }
diff --git a/src/views/User/UserProfile/DropdownActions/ArchiveUser/Dialog.tsx b/src/views/User/UserProfile/DropdownActions/ArchiveUser/Dialog.tsx
index 192b201825..b3524d5fab 100644
--- a/src/views/User/UserProfile/DropdownActions/ArchiveUser/Dialog.tsx
+++ b/src/views/User/UserProfile/DropdownActions/ArchiveUser/Dialog.tsx
@@ -85,7 +85,7 @@ const ArchiveUserDialog = ({
 
           {!isPreConfirm && (
             <>
-              <Spacer size="xtight" />
+              <Spacer size="sp8" />
               <Form.Input
                 type="password"
                 name="password"
diff --git a/src/views/User/UserProfile/FollowingDialog/Content/index.tsx b/src/views/User/UserProfile/FollowingDialog/Content/index.tsx
index 4809e15340..8441b74c43 100644
--- a/src/views/User/UserProfile/FollowingDialog/Content/index.tsx
+++ b/src/views/User/UserProfile/FollowingDialog/Content/index.tsx
@@ -13,7 +13,7 @@ const FollowingDialogContent = () => {
   return (
     <Dialog.Content noSpacing>
       <FeedType type={feedType} setFeedType={setFeedType} />
-      <Spacer size="xtight" />
+      <Spacer size="sp8" />
       {feedType === 'circle' && <CirclesFeed />}
       {feedType === 'tag' && <TagsFeed />}
       {feedType === 'user' && <UsersFeed />}