Add spacing tokens to common styles

1 files changed, 20 insertions, 4 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index 98f4d803c7..a4e335ca64 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -70,9 +70,25 @@ export const hugeText = {
   color: colors.white,
 };
 
+export const spacings = {
+  spacing1: '4px',
+  spacing2: '6px',
+  spacing3: '8px',
+  spacing4: '12px',
+  spacing5: '16px',
+  spacing6: '24px',
+  spacing7: '32px',
+  spacing8: '40px',
+  spacing9: '48px',
+  spacing10: '56px',
+  spacing11: '64px',
+  spacing12: '72px',
+  spacing13: '80px',
+};
+
 export const measurements = {
-  rowMinHeight: '44px',
-  viewMargin: '22px',
-  rowVerticalMargin: '20px',
-  buttonVerticalMargin: '18px',
+  rowMinHeight: spacings.spacing9,
+  viewMargin: spacings.spacing6,
+  rowVerticalMargin: spacings.spacing6,
+  buttonVerticalMargin: spacings.spacing5,
 };