Convert spacing enum to const object

46 files changed, 217 insertions, 205 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index 970ebcbda4..5a231f1495 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -5,7 +5,6 @@ import { urls } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Flex, Icon } from '../lib/components';
-import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
@@ -118,7 +117,7 @@ export default function Account() {
 function DeviceNameRow() {
   const deviceName = useSelector((state) => state.account.deviceName);
   return (
-    <Flex $gap={Spacings.small} $alignItems="center">
+    <Flex $gap="small" $alignItems="center">
       <DeviceRowValue>{deviceName}</DeviceRowValue>
       <DeviceInfoButton />
     </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index ac4c02f6c1..58425f9f3b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -7,7 +7,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { Container, Flex, Spinner } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -41,7 +41,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   height: '10px',
   borderRadius: '50%',
   backgroundColor: props.$result ? Colors.green : Colors.red,
-  marginRight: Spacings.small,
+  marginRight: spacings.small,
 }));
 
 // This component is the topmost component in the API access methods view.
@@ -100,7 +100,7 @@ export default function ApiAccessMethods() {
                   </HeaderSubTitle>
                 </SettingsHeader>
 
-                <Flex $flexDirection="column" $gap={Spacings.large}>
+                <Flex $flexDirection="column" $gap="large">
                   <Cell.Group $noMarginBottom>
                     <ApiAccessMethod
                       method={methods.direct}
@@ -226,7 +226,7 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
         <StyledNameLabel>{props.method.name}</StyledNameLabel>
         {testing && (
           <Cell.SubLabel>
-            <Flex $gap={Spacings.tiny} $alignItems="center">
+            <Flex $gap="tiny" $alignItems="center">
               <Spinner size="small" />
               {messages.pgettext('api-access-methods-view', 'Testing...')}
             </Flex>
@@ -244,7 +244,7 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
           <Cell.SubLabel>{messages.pgettext('api-access-methods-view', 'In use')}</Cell.SubLabel>
         )}
       </Cell.LabelContainer>
-      <Flex $gap={Spacings.small} $alignItems="center">
+      <Flex $gap="small" $alignItems="center">
         {props.method.type === 'direct' && (
           <InfoButton
             message={[
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
index da4d2f3788..aab1faa398 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useScheduler } from '../../shared/scheduler';
 import { Flex, Icon, IconButton } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 
 const COPIED_ICON_DURATION = 2000;
@@ -52,7 +52,7 @@ export default function ClipboardLabel(props: IProps) {
       <StyledLabel aria-hidden={obscured} {...otherProps}>
         {obscured ? '●●●● ●●●● ●●●● ●●●●' : (displayValue ?? value)}
       </StyledLabel>
-      <Flex $gap={Spacings.medium}>
+      <Flex $gap="medium">
         {obscureValue !== false && (
           <IconButton
             onClick={toggleObscured}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
index 8afbec176c..38de8d3ff1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -6,7 +6,7 @@ import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Flex } from '../lib/components';
-import { Spacings } from '../lib/foundations';
+import { spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { useSelector } from '../redux/store';
@@ -33,7 +33,7 @@ export const StyledIllustration = styled.img({
 });
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.medium,
+  marginRight: spacings.medium,
 });
 
 const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
@@ -57,7 +57,7 @@ export default function DaitaSettings() {
                       <StyledIllustration
                         src={`${PATH_PREFIX}assets/images/daita-off-illustration.svg`}
                       />
-                      <Flex $flexDirection="column" $gap={Spacings.medium}>
+                      <Flex $flexDirection="column" $gap="medium">
                         <StyledHeaderSubTitle>
                           {sprintf(
                             messages.pgettext(
@@ -96,7 +96,7 @@ export default function DaitaSettings() {
                       <StyledIllustration
                         src={`${PATH_PREFIX}assets/images/daita-on-illustration.svg`}
                       />
-                      <Flex $flexDirection="column" $gap={Spacings.medium}>
+                      <Flex $flexDirection="column" $gap="medium">
                         <StyledHeaderSubTitle>
                           {sprintf(
                             messages.pgettext(
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index c32ebcb2e2..e9bb8a1204 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../lib/foundations';
+import { spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
 import { AppNavigationHeader } from './';
@@ -21,7 +21,7 @@ const StyledContent = styled.div({
 });
 
 const StyledButtonGroup = styled.div({
-  margin: `${Spacings.large} ${measurements.horizontalViewMargin}`,
+  margin: `${spacings.large} ${measurements.horizontalViewMargin}`,
 });
 
 export default function Debug() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
index 9fd48925a5..93d55f1a39 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Flex } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { IconBadge } from '../lib/icon-badge';
 import { useSelector } from '../redux/store';
 import { AppMainHeader } from './app-main-header';
@@ -55,7 +55,7 @@ export function DeviceRevokedView() {
       <StyledCustomScrollbars fillContainer>
         <StyledContainer>
           <StyledBody>
-            <Flex $justifyContent="center" $margin={{ bottom: Spacings.medium }}>
+            <Flex $justifyContent="center" $margin={{ bottom: 'medium' }}>
               <IconBadge state="negative" />
             </Flex>
             <StyledTitle data-testid="title">
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
index 88c3e31832..39dc286c6b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Flex, Logo } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { AppMainHeader } from './app-main-header';
 import { measurements } from './common-styles';
 import { Container, Layout } from './Layout';
@@ -43,12 +43,8 @@ export default function ErrorView(props: ErrorViewProps) {
         {!props.settingsUnavailable && <AppMainHeader.SettingsButton />}
       </AppMainHeader>
       <StyledContainer>
-        <Flex $flexDirection="column" $gap={Spacings.small}>
-          <Flex
-            $flexDirection="column"
-            $alignItems="center"
-            $justifyContent="end"
-            $gap={Spacings.medium}>
+        <Flex $flexDirection="column" $gap="medium">
+          <Flex $flexDirection="column" $alignItems="center" $justifyContent="end" $gap="medium">
             <Logo variant="icon" size="2" />
             <Logo variant="text" size="2" />
           </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index 3893348987..5473b69f03 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -10,7 +10,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Flex, Icon } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { IconBadge } from '../lib/icon-badge';
 import { generateRoutePath } from '../lib/routeHelpers';
@@ -166,7 +166,7 @@ export function TimeAdded(props: ITimeAddedProps) {
       <StyledCustomScrollbars fillContainer>
         <StyledContainer>
           <StyledBody>
-            <Flex $justifyContent="center" $margin={{ bottom: Spacings.medium }}>
+            <Flex $justifyContent="center" $margin={{ bottom: 'medium' }}>
               <IconBadge state="positive" />
             </Flex>
             <StyledTitle>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
index 5f7923d02e..0f80d890de 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -7,7 +7,6 @@ import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { Flex, Icon } from '../lib/components';
-import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { IconBadge } from '../lib/icon-badge';
 import { RoutePath } from '../lib/routes';
@@ -122,7 +121,7 @@ function WelcomeView() {
         </StyledAccountNumberContainer>
       </StyledAccountNumberMessage>
 
-      <Flex $alignItems="center" $gap={Spacings.tiny} $margin={{ bottom: Spacings.medium }}>
+      <Flex $alignItems="center" $gap="tiny" $margin={{ bottom: 'medium' }}>
         <StyledDeviceLabel>
           {sprintf(
             // TRANSLATORS: A label that will display the newly created device name to inform the user
@@ -156,7 +155,7 @@ function Content() {
 
   return (
     <>
-      <Flex $justifyContent="center" $margin={{ bottom: Spacings.medium }}>
+      <Flex $justifyContent="center" $margin={{ bottom: 'medium' }}>
         <IconBadge state="negative" />
       </Flex>
       <StyledTitle data-testid="title">
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 341ad270d7..bdccc709b1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Flex } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import { measurements } from './common-styles';
 import { NavigationScrollbars } from './NavigationScrollbars';
 
@@ -40,7 +40,7 @@ export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: `${Spacings.large} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
+  padding: `${spacings.large} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
   [`${SettingsContent} &&`]: {
     paddingBottom: 0,
   },
@@ -48,7 +48,7 @@ export const Footer = styled.div({
 
 export const SettingsStack = styled(Flex).attrs({
   $flexDirection: 'column',
-  $gap: Spacings.medium,
+  $gap: 'medium',
 })({});
 
 export const SettingsGroup = styled(Flex).attrs({
@@ -58,10 +58,10 @@ export const SettingsGroup = styled(Flex).attrs({
 
 export const ButtonStack = styled(Flex).attrs({
   $flexDirection: 'column',
-  $gap: Spacings.medium,
+  $gap: 'medium',
 })({
   [`${Footer} &&`]: {
-    margin: `0 ${Spacings.small}`,
+    margin: `0 ${spacings.small}`,
   },
 });
 
@@ -69,5 +69,5 @@ export const LabelStack = styled(Flex).attrs({
   $flexGrow: 1,
   $flexDirection: 'row',
   $alignItems: 'center',
-  $gap: Spacings.small,
+  $gap: 'small',
 })({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
index ba1a8a5faa..afb75ce500 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
@@ -9,7 +9,7 @@ import { useAppContext } from '../context';
 import { formatAccountNumber } from '../lib/account';
 import useActions from '../lib/actionsHook';
 import { Box, Button, Flex, Icon, Label, LabelTiny, Spinner, TitleMedium } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { IconBadge } from '../lib/icon-badge';
 import accountActions from '../redux/account/actions';
@@ -312,7 +312,7 @@ class Login extends React.Component<IProps, IState> {
       this.props.loginState.method === 'existing_account';
 
     return (
-      <Flex $flexDirection="column" $gap={Spacings.small}>
+      <Flex $flexDirection="column" $gap="small">
         <Label htmlFor={inputId} data-testid="subtitle">
           {this.formSubtitle()}
         </Label>
@@ -370,7 +370,7 @@ class Login extends React.Component<IProps, IState> {
 
   private createFooter() {
     return (
-      <Flex $flexDirection="column" $gap={Spacings.small}>
+      <Flex $flexDirection="column" $gap="small">
         <LabelTiny color={Colors.white60}>
           {messages.pgettext('login-view', 'Don’t have an account number?')}
         </LabelTiny>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 595bc322f3..39e7f00913 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Icon } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import { buttonReset } from '../lib/styles';
 import * as Cell from './cell';
 import { hugeText, largeText, measurements, smallText, tinyText } from './common-styles';
@@ -39,7 +39,7 @@ const baseButtonStyles = {
 
 export const StyledAccountDropdownItemButton = styled.button({
   ...baseButtonStyles,
-  paddingLeft: Spacings.medium,
+  paddingLeft: spacings.medium,
 });
 
 export const StyledAccountDropdownItemIconButton = styled.button({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx
index f067155ee1..cc64f1f41f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx
@@ -17,7 +17,6 @@ import { getDownloadUrl } from '../../shared/version';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Flex, Icon, Spinner } from '../lib/components';
-import { Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { IconBadge } from '../lib/icon-badge';
 import { useEffectEvent } from '../lib/utility-hooks';
@@ -234,7 +233,7 @@ function Sent() {
   return (
     <StyledContent>
       <StyledForm>
-        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.medium }}>
+        <Flex $justifyContent="center" $margin={{ top: 'large', bottom: 'medium' }}>
           <IconBadge state="positive" />
         </Flex>
         <StyledSendStatus>{messages.pgettext('support-view', 'Sent')}</StyledSendStatus>
@@ -259,7 +258,7 @@ function Failed() {
   return (
     <StyledContent>
       <StyledForm>
-        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.medium }}>
+        <Flex $justifyContent="center" $margin={{ top: 'large', bottom: 'medium' }}>
           <IconBadge state="negative" />
         </Flex>
         <StyledSendStatus>{messages.pgettext('support-view', 'Failed to send')}</StyledSendStatus>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
index 10997dd353..b0d35343fa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
@@ -7,7 +7,6 @@ import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Flex, Spinner } from '../lib/components';
-import { Spacings } from '../lib/foundations';
 import { IconBadge } from '../lib/icon-badge';
 import { useSelector } from '../redux/store';
 import * as AppButton from './AppButton';
@@ -153,7 +152,7 @@ export function RedeemVoucherResponse() {
 
   if (submitting) {
     return (
-      <Flex $alignItems="center" $margin={{ top: Spacings.small }} $gap={Spacings.small}>
+      <Flex $alignItems="center" $margin={{ top: 'small' }} $gap="small">
         <Spinner size="medium" />
         <StyledProgressResponse>
           {messages.pgettext('redeem-voucher-view', 'Verifying voucher...')}
@@ -226,7 +225,7 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
           </AppButton.BlueButton>,
         ]}
         close={props.onClose}>
-        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.medium }}>
+        <Flex $justifyContent="center" $margin={{ top: 'large', bottom: 'medium' }}>
           <IconBadge state="positive" />
         </Flex>
         <StyledTitle>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
index 864954763e..5f039194c4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import * as Cell from './cell';
 
 const indicatorStyles: Styles<
@@ -19,7 +19,7 @@ const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (pro
 
 const TickIcon = styled(Cell.CellIcon)({
   marginLeft: '3px',
-  marginRight: Spacings.small,
+  marginRight: spacings.small,
 });
 
 interface IProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index ca04dc281a..4fffcae8b8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Flex, LabelTiny, TitleBig } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
@@ -23,11 +23,8 @@ function SettingsHeader(props: SettingsHeaderProps, forwardRef: React.Ref<HTMLDi
     <Flex
       ref={forwardRef}
       $flexDirection="column"
-      $gap={Spacings.small}
-      $margin={{
-        horizontal: Spacings.medium,
-        bottom: Spacings.small,
-      }}
+      $gap="small"
+      $margin={{ horizontal: 'medium', bottom: 'medium' }}
       className={props.className}>
       {props.children}
     </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 0f59e9c3f7..c7fd3db1a3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -7,7 +7,7 @@ import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Flex, Icon, IconProps } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
@@ -207,7 +207,7 @@ const StyledStatusTitle = styled.div(normalText, {
   fontWeight: 'bold',
   lineHeight: '20px',
   color: Colors.white,
-  gap: Spacings.tiny,
+  gap: spacings.tiny,
 });
 
 const StyledStatusSubTitle = styled.div(tinyText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index ba68853c7c..326d72985d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -12,7 +12,7 @@ import { strings } from '../../shared/constants';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button, Container, Flex, FootnoteMini, IconButton, Spinner } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
@@ -21,7 +21,6 @@ import { AppNavigationHeader } from './';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements } from './common-styles';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
@@ -183,7 +182,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
           </StyledNoResult>
         )}
 
-      <Flex $flexDirection="column" $gap={Spacings.medium}>
+      <Flex $flexDirection="column" $gap="medium">
         {filteredApplications !== undefined && filteredApplications.length > 0 && (
           <ApplicationList applications={filteredApplications} rowRenderer={rowRenderer} />
         )}
@@ -486,7 +485,7 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
         )}
       </SettingsHeader>
       {loadingDiskPermissions && (
-        <Flex $justifyContent="center" $margin={{ top: Spacings.large }}>
+        <Flex $justifyContent="center" $margin={{ top: 'large' }}>
           <Spinner size="big" />
         </Flex>
       )}
@@ -506,12 +505,9 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
         </StyledNoResult>
       )}
 
-      <Flex
-        $flexDirection="column"
-        $gap={Spacings.medium}
-        $margin={{ bottom: measurements.verticalViewMargin }}>
+      <Flex $flexDirection="column" $gap="medium" $margin={{ bottom: 'large' }}>
         {(showSplitSection || showNonSplitSection) && (
-          <Flex $flexDirection="column" $gap={Spacings.medium}>
+          <Flex $flexDirection="column" $gap="medium">
             <Accordion expanded={showSplitSection}>
               <Cell.Section sectionTitle={excludedTitle}>
                 <ApplicationList
@@ -561,15 +557,15 @@ function MacOsSplitTunnelingAvailability({
   if (!needFullDiskPermissions) return null;
 
   return (
-    <Flex $flexDirection="column" $gap={Spacings.large}>
+    <Flex $flexDirection="column" $gap="large">
       <HeaderSubTitle>
         {messages.pgettext(
           'split-tunneling-view',
           'To use split tunneling please enable “Full disk access” for “Mullvad VPN” in the macOS system settings.',
         )}
       </HeaderSubTitle>
-      <Flex $flexDirection="column" $gap={Spacings.small}>
-        <Flex $flexDirection="column" $gap={Spacings.big}>
+      <Flex $flexDirection="column" $gap="small">
+        <Flex $flexDirection="column" $gap="big">
           <WideSmallButton onClick={showFullDiskAccessSettings}>
             {messages.pgettext('split-tunneling-view', 'Open System Settings')}
           </WideSmallButton>
@@ -653,7 +649,7 @@ function ApplicationRow(props: IApplicationRowProps) {
         <StyledIconPlaceholder />
       )}
       <StyledCellLabel>{props.application.name}</StyledCellLabel>
-      <Flex $gap={Spacings.small}>
+      <Flex $gap="small">
         {props.onDelete && (
           <IconButton variant="secondary" onClick={onDelete}>
             <IconButton.Icon icon="cross-circle" />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 65b4d683db..9cdc24ff31 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements, normalText } from './common-styles';
@@ -38,12 +38,12 @@ const disabledApplication = (props: DisabledApplicationProps) => ({
 });
 
 export const StyledIcon = styled(Cell.CellImage)<DisabledApplicationProps>(disabledApplication, {
-  marginRight: Spacings.small,
+  marginRight: spacings.small,
 });
 
 export const StyledCellWarningIcon = styled(Cell.CellTintedIcon)({
-  marginLeft: Spacings.small,
-  marginRight: Spacings.tiny,
+  marginLeft: spacings.small,
+  marginRight: spacings.tiny,
 });
 
 export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>(
@@ -58,14 +58,14 @@ export const StyledCellLabel = styled(Cell.Label)<DisabledApplicationProps>(
 
 export const StyledIconPlaceholder = styled.div({
   width: '35px',
-  marginRight: Spacings.small,
+  marginRight: spacings.small,
 });
 
 export const StyledSpinnerRow = styled(Cell.CellButton)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: `${Spacings.small} 0`,
+  padding: `${spacings.small} 0`,
   marginBottom: measurements.rowVerticalMargin,
   background: Colors.blue40,
 });
@@ -79,7 +79,7 @@ export const StyledNoResult = styled(Cell.CellFooter)({
   flexDirection: 'column',
   paddingTop: 0,
   marginTop: 0,
-  marginBottom: '48px',
+  marginBottom: spacings.large,
 });
 
 export const StyledNoResultText = styled(Cell.CellFooterText)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
index 09873038a0..a748845fc3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -8,7 +8,7 @@ import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { Button, Flex, IconButton, Spinner } from '../lib/components';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { IconBadge, IconBadgeProps } from '../lib/icon-badge';
@@ -115,9 +115,7 @@ export default function TooManyDevices() {
         <StyledCustomScrollbars fillContainer>
           <StyledContainer>
             <StyledBody>
-              <Flex
-                $justifyContent="center"
-                $margin={{ top: Spacings.large, bottom: Spacings.medium }}>
+              <Flex $justifyContent="center" $margin={{ top: 'large', bottom: 'medium' }}>
                 <IconBadge key={imageSource} state={imageSource} />
               </Flex>
               {devices !== undefined && (
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index 59ace63e08..befa4e80c9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -8,7 +8,7 @@ import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useAppContext } from '../context';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
@@ -31,7 +31,7 @@ import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.medium,
+  marginRight: spacings.medium,
 });
 
 const StyledTitleLabel = styled(Cell.SectionTitle)({
@@ -44,11 +44,11 @@ const StyledSectionItem = styled(Cell.Container)({
 
 const LanIpRanges = styled.ul({
   listStyle: 'disc outside',
-  marginLeft: Spacings.large,
+  marginLeft: spacings.large,
 });
 
 const IndentedValueLabel = styled(Cell.ValueLabel)({
-  marginLeft: Spacings.medium,
+  marginLeft: spacings.medium,
 });
 
 export default function VpnSettings() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
index 222581447e..5240152272 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/AppMainHeader.tsx
@@ -1,6 +1,5 @@
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { Flex, HeaderProps, Logo, LogoProps, MainHeader } from '../../lib/components';
-import { Spacings } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { FocusFallback } from '../Focus';
 import {
@@ -39,7 +38,7 @@ const AppMainHeader = ({
         <FocusFallback>
           {logoVariant !== 'none' ? <Logo variant={logoVariant} /> : <div />}
         </FocusFallback>
-        <Flex $gap={Spacings.medium} $alignItems="center">
+        <Flex $gap="medium" $alignItems="center">
           {children}
         </Flex>
       </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
index a83dbf34fc..e35d5d2ac8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
@@ -5,7 +5,7 @@ import { closeToExpiry, formatRemainingTime, hasExpired } from '../../../../shar
 import { messages } from '../../../../shared/gettext';
 import { capitalizeEveryWord } from '../../../../shared/string-helpers';
 import { Flex, FootnoteMini } from '../../../lib/components';
-import { Colors, Spacings } from '../../../lib/foundations';
+import { Colors } from '../../../lib/foundations';
 import { useSelector } from '../../../redux/store';
 
 const StyledTimeLeftLabel = styled(FootnoteMini)({
@@ -29,7 +29,7 @@ export const AppMainHeaderDeviceInfo = () => {
       : '';
 
   return (
-    <Flex $gap={Spacings.large} $margin={{ top: Spacings.tiny }}>
+    <Flex $gap="large" $margin={{ top: 'tiny' }}>
       <StyledDeviceLabel color={Colors.white80}>
         {sprintf(
           // TRANSLATORS: A label that will display the newly created device name to inform the user
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index e1b8257fea..9c2acb8937 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Box, IconProps } from '../../lib/components';
-import { Colors, Spacings } from '../../lib/foundations';
+import { Colors, spacings } from '../../lib/foundations';
 import { CellDisabledContext } from './Container';
 import { CellTintedIcon } from './Label';
 import { Row } from './Row';
@@ -22,8 +22,8 @@ const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColorHover = props.$selected ? Colors.green : Colors.blue80;
 
   return {
-    paddingRight: Spacings.medium,
-    paddingLeft: Spacings.medium,
+    paddingRight: spacings.medium,
+    paddingLeft: spacings.medium,
     flex: 1,
     alignContent: 'center',
     cursor: 'default',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
index bca01464c6..bbdf6cc038 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../lib/foundations';
+import { spacings } from '../../lib/foundations';
 import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
-  padding: `0 ${Spacings.medium}`,
+  padding: `0 ${spacings.medium}`,
 });
 
 export const CellDisabledContext = React.createContext<boolean>(false);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index 406d284bc5..be4ada0647 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 
 import { LabelTiny } from '../../lib/components';
-import { Colors, Spacings } from '../../lib/foundations';
+import { Colors, spacings } from '../../lib/foundations';
 
 export const CellFooter = styled.div({
-  margin: `${Spacings.tiny} ${Spacings.large} 0px`,
+  margin: `${spacings.tiny} ${spacings.large} 0px`,
 });
 
 export const CellFooterText = styled(LabelTiny).attrs({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index e2314380eb..4ff662a737 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Icon, IconProps, Image, ImageProps } from '../../lib/components';
-import { Colors, Spacings } from '../../lib/foundations';
+import { Colors, spacings } from '../../lib/foundations';
 import { buttonText, normalText, tinyText } from '../common-styles';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -30,7 +30,7 @@ const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
   color: props.disabled ? Colors.white20 : Colors.white60,
   flex: -1,
   textAlign: 'right',
-  margin: `0 ${Spacings.small}`,
+  margin: `0 ${spacings.small}`,
 }));
 
 const StyledImage = styled(Image)<ImageProps & { disabled?: boolean }>(({ disabled }) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index b419cae667..a3209b419e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { useAppContext } from '../../context';
-import { Colors, Spacings } from '../../lib/foundations';
+import { Colors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
@@ -22,7 +22,7 @@ interface SectionTitleProps {
 }
 
 export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
-  paddingRight: Spacings.medium,
+  paddingRight: spacings.medium,
   color: props.disabled ? Colors.white20 : Colors.white,
   fontWeight: props.$thin ? 400 : 600,
   fontSize: props.$thin ? '15px' : '18px',
@@ -49,7 +49,7 @@ export function Section(props: SectionProps) {
 
 const StyledChevronButton = styled(ChevronButton)({
   padding: 0,
-  marginRight: Spacings.medium,
+  marginRight: spacings.medium,
 });
 
 const StyledTitleContainer = styled(Container)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
index 08e58ab2f7..a9212295a9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
 import { Icon } from '../../lib/components';
-import { Colors, Spacings } from '../../lib/foundations';
+import { Colors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useStyledRef } from '../../lib/utility-hooks';
@@ -16,7 +16,7 @@ const StyledTitleLabel = styled(Cell.SectionTitle)({
 });
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.medium,
+  marginRight: spacings.medium,
 });
 
 export interface SelectorItem<T> {
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 140d87e7fe..4628493fa9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Colors, Spacings } from '../lib/foundations';
+import { Colors, spacings } from '../lib/foundations';
 
 export const openSans: React.CSSProperties = {
   fontFamily: 'Open Sans',
@@ -65,8 +65,8 @@ export const hugeText = {
 
 export const measurements = {
   rowMinHeight: '48px',
-  horizontalViewMargin: Spacings.medium,
-  verticalViewMargin: Spacings.large,
-  rowVerticalMargin: Spacings.large,
-  buttonVerticalMargin: Spacings.medium,
+  horizontalViewMargin: spacings.medium,
+  verticalViewMargin: spacings.large,
+  rowVerticalMargin: spacings.large,
+  buttonVerticalMargin: spacings.medium,
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
index efcd2f6c26..a4113e6764 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Flex, FlexProps } from '../../../lib/components';
-import { Spacings } from '../../../lib/foundations';
+import { spacings } from '../../../lib/foundations';
 
 export interface ContainerProps extends FlexProps {
   size?: '3' | '4';
@@ -10,8 +10,8 @@ export interface ContainerProps extends FlexProps {
 }
 
 const sizes: Record<'3' | '4', string> = {
-  '3': `calc(100% - ${Spacings.large} * 2)`,
-  '4': `calc(100% - ${Spacings.medium} * 2)`,
+  '3': `calc(100% - ${spacings.large} * 2)`,
+  '4': `calc(100% - ${spacings.medium} * 2)`,
 };
 
 const StyledFlex = styled(Flex)<{ $size: string }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
index c4cf49ce14..2bf725dc29 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx
@@ -7,7 +7,6 @@ import { messages } from '../../../shared/gettext';
 import { FilterChip, Flex, IconButton, LabelTiny } from '../../lib/components';
 import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-locations';
-import { Spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { useNormalRelaySettings } from '../../lib/relay-settings-hooks';
@@ -156,10 +155,10 @@ export default function SelectLocation() {
                 <>
                   {showFilters && (
                     <Flex
-                      $gap={Spacings.small}
+                      $gap="small"
                       $alignItems="center"
                       $flexWrap="wrap"
-                      $margin={{ horizontal: Spacings.small, bottom: Spacings.medium }}>
+                      $margin={{ horizontal: 'small', bottom: 'medium' }}>
                       <LabelTiny>
                         {messages.pgettext('select-location-view', 'Filtered:')}
                       </LabelTiny>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
index 6a1274f7be..a35d490a55 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
 import { BodySmall, Container, Flex, TitleBig, TitleLarge } from '../../../lib/components';
-import { Colors, Spacings } from '../../../lib/foundations';
+import { Colors } from '../../../lib/foundations';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../../';
@@ -32,17 +32,17 @@ export const ChangelogView = () => {
             <AppNavigationHeader title={messages.pgettext('changelog-view', 'What’s new')} />
 
             <NavigationScrollbars>
-              <Flex $flexDirection="column" $gap={Spacings.large}>
+              <Flex $flexDirection="column" $gap="large">
                 <Container size="4">
                   <TitleBig as={'h1'}>{messages.pgettext('changelog-view', 'What’s new')}</TitleBig>
                 </Container>
-                <Flex $flexDirection="column" $gap={Spacings.small}>
+                <Flex $flexDirection="column" $gap="small">
                   <Container size="4">
                     <TitleLarge as="h2">{version}</TitleLarge>
                   </Container>
                   <Container size="3" $flexDirection="column">
                     {changelog.length ? (
-                      <StyledList as="ul" $flexDirection="column" $gap={Spacings.medium}>
+                      <StyledList as="ul" $flexDirection="column" $gap="medium">
                         {changelog.map((item, i) => (
                           <BodySmall as="li" key={i} color={Colors.white60}>
                             {item}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
index 5842474f7d..5ce7593784 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { Colors, Radius, Spacings } from '../../foundations';
+import { Colors, Radius } from '../../foundations';
 import { Flex } from '../flex';
 import { ButtonBase } from './ButtonBase';
 import { ButtonProvider } from './ButtonContext';
@@ -108,10 +108,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <StyledButton ref={ref} disabled={disabled} {...props}>
           <StyledFlex
             $flex={1}
-            $gap={Spacings.small}
+            $gap="small"
             $alignItems="center"
             $padding={{
-              horizontal: Spacings.small,
+              horizontal: 'small',
             }}>
             {children}
           </StyledFlex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/container/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/container/Container.tsx
index aadf7a1648..29653d90a6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/container/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/container/Container.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../foundations';
+import { spacings } from '../../foundations';
 import { Flex, FlexProps } from '../flex';
 
 export interface ContainerProps extends FlexProps {
@@ -10,8 +10,8 @@ export interface ContainerProps extends FlexProps {
 }
 
 const sizes: Record<'3' | '4', string> = {
-  '3': `calc(100% - ${Spacings.large} * 2)`,
-  '4': `calc(100% - ${Spacings.medium} * 2)`,
+  '3': `calc(100% - ${spacings.large} * 2)`,
+  '4': `calc(100% - ${spacings.medium} * 2)`,
 };
 
 const StyledFlex = styled(Flex)<{ $size: string }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
index d6a8beae36..a1221f7f35 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { WebTarget } from 'styled-components';
 
-import { Colors, Radius, Spacings } from '../../foundations';
+import { Colors, Radius } from '../../foundations';
 import { buttonReset } from '../../styles';
 import { Flex } from '../flex';
 import { FilterChipIcon, FilterChipText } from './components';
@@ -57,11 +57,11 @@ const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(
           {...props}>
           <Flex
             $flex={1}
-            $gap={Spacings.tiny}
+            $gap="tiny"
             $alignItems="center"
             $justifyContent="space-between"
             $padding={{
-              horizontal: Spacings.small,
+              horizontal: 'small',
             }}>
             {children}
           </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/flex/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/flex/Flex.tsx
index 28b2159cb9..57e05ca11d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/flex/Flex.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/flex/Flex.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Spacings } from '../../foundations';
+import { Spacings, spacings } from '../../foundations';
 import { Layout, LayoutProps } from '../layout';
 
 export interface FlexProps extends LayoutProps {
@@ -17,18 +17,19 @@ export interface FlexProps extends LayoutProps {
   children?: React.ReactNode;
 }
 
-export const Flex = styled(Layout)<FlexProps>(
-  ({
-    $gap,
-    $flex,
-    $flexDirection,
-    $alignItems,
-    $justifyContent,
-    $flexGrow,
-    $flexShrink,
-    $flexBasis,
-    $flexWrap,
-  }) => ({
+export const Flex = styled(Layout)<FlexProps>(({
+  $gap: gapProp,
+  $flex,
+  $flexDirection,
+  $alignItems,
+  $justifyContent,
+  $flexGrow,
+  $flexShrink,
+  $flexBasis,
+  $flexWrap,
+}) => {
+  const $gap = gapProp ? spacings[gapProp] : undefined;
+  return {
     display: 'flex',
     gap: $gap,
     flex: $flex,
@@ -39,5 +40,5 @@ export const Flex = styled(Layout)<FlexProps>(
     flexShrink: $flexShrink,
     flexBasis: $flexBasis,
     flexWrap: $flexWrap,
-  }),
-);
+  };
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts
index 266aa63e7f..0acfbdd0ac 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts
@@ -1,33 +1,50 @@
-import { Spacings } from '../../foundations';
+import { Spacings, spacings } from '../../foundations';
 import { LayoutSpacings } from './types';
 
-export const all = (margin: Spacings) => ({ margin });
+export const all = (value: Spacings) => {
+  const marginAll = spacings[value];
+  return { margin: marginAll };
+};
 
-const vertical = (margin: Spacings) => ({
-  ...top(margin),
-  ...bottom(margin),
+const vertical = (value: Spacings) => ({
+  ...top(value),
+  ...bottom(value),
 });
 
-const horizontal = (margin: Spacings) => ({
-  ...left(margin),
-  ...right(margin),
-});
+const horizontal = (value: Spacings) => {
+  return {
+    ...left(value),
+    ...right(value),
+  };
+};
 
-const top = (marginTop: Spacings) => ({
-  marginTop,
-});
+const top = (value: Spacings) => {
+  const marginTop = spacings[value];
+  return {
+    marginTop,
+  };
+};
 
-const right = (marginRight: Spacings) => ({
-  marginRight,
-});
+const right = (value: Spacings) => {
+  const marginRight = spacings[value];
+  return {
+    marginRight,
+  };
+};
 
-const bottom = (marginBottom: Spacings) => ({
-  marginBottom,
-});
+const bottom = (value: Spacings) => {
+  const marginBottom = spacings[value];
+  return {
+    marginBottom,
+  };
+};
 
-const left = (marginLeft: Spacings) => ({
-  marginLeft,
-});
+const left = (value: Spacings) => {
+  const marginLeft = spacings[value];
+  return {
+    marginLeft,
+  };
+};
 
 export const margin: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
   all,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts
index c806c73309..07b63a83d3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts
@@ -1,33 +1,48 @@
-import { Spacings } from '../../foundations';
+import { Spacings, spacings } from '../../foundations';
 import { LayoutSpacings } from './types';
 
-export const all = (padding: Spacings) => ({ padding });
+export const all = (value: Spacings) => {
+  const paddingAll = spacings[value];
+  return { padding: paddingAll };
+};
 
-const vertical = (padding: Spacings) => ({
-  ...top(padding),
-  ...bottom(padding),
+const vertical = (value: Spacings) => ({
+  ...top(value),
+  ...bottom(value),
 });
 
-const horizontal = (padding: Spacings) => ({
-  ...left(padding),
-  ...right(padding),
+const horizontal = (value: Spacings) => ({
+  ...left(value),
+  ...right(value),
 });
 
-const top = (paddingTop: Spacings) => ({
-  paddingTop,
-});
+const top = (value: Spacings) => {
+  const paddingTop = spacings[value];
+  return {
+    paddingTop,
+  };
+};
 
-const right = (paddingRight: Spacings) => ({
-  paddingRight,
-});
+const right = (value: Spacings) => {
+  const paddingRight = spacings[value];
+  return {
+    paddingRight,
+  };
+};
 
-const bottom = (paddingBottom: Spacings) => ({
-  paddingBottom,
-});
+const bottom = (value: Spacings) => {
+  const paddingBottom = spacings[value];
+  return {
+    paddingBottom,
+  };
+};
 
-const left = (paddingLeft: Spacings) => ({
-  paddingLeft,
-});
+const left = (value: Spacings) => {
+  const paddingLeft = spacings[value];
+  return {
+    paddingLeft,
+  };
+};
 
 export const padding: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
   all,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/logo/Logo.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/logo/Logo.tsx
index 2a23a06c22..1afa5574c7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/logo/Logo.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/logo/Logo.tsx
@@ -1,4 +1,3 @@
-import { Spacings } from '../../foundations';
 import { Flex } from '../flex';
 import { Image } from '../image';
 
@@ -31,7 +30,7 @@ export const Logo = ({ variant = 'icon', size: sizeProp = '1' }: LogoProps) => {
       const logoSize = logoSizes[sizeProp];
       const textSize = textSizes[sizeProp];
       return (
-        <Flex $flex={1} $alignItems="center" $gap={Spacings.small}>
+        <Flex $flex={1} $alignItems="center" $gap="small">
           <Image source="logo-icon" height={logoSize} />
           <Image source="logo-text" height={textSize} />
         </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
index eaa61f4936..6912780b96 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../../foundations';
+import { Colors } from '../../foundations';
 import { TransientProps } from '../../types';
 import { Flex } from '../flex';
 import { MainHeaderIconButton } from './components';
@@ -38,9 +38,9 @@ const MainHeader = ({ size = '1', variant = 'default', children, ...props }: Hea
         $flexDirection="column"
         $justifyContent="center"
         $margin={{
-          horizontal: Spacings.medium,
-          top: Spacings.medium,
-          bottom: Spacings.small,
+          horizontal: 'medium',
+          top: 'medium',
+          bottom: 'small',
         }}>
         {children}
       </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
index d17b54ca83..556e96541c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors, Spacings } from '../../foundations';
+import { Colors, spacings } from '../../foundations';
 import { TransientProps } from '../../types';
 import { Flex } from '../flex';
 import {
@@ -24,7 +24,7 @@ export const StyledContent = styled.div({
   placeContent: 'center',
   minHeight: '32px',
   height: '32px',
-  gap: Spacings.tiny,
+  gap: spacings.tiny,
 });
 
 const NavigationHeader = ({ titleVisible, children, ...props }: NavigationHeaderProps) => {
@@ -35,8 +35,8 @@ const NavigationHeader = ({ titleVisible, children, ...props }: NavigationHeader
           $flexDirection="column"
           $justifyContent="center"
           $padding={{
-            horizontal: Spacings.medium,
-            vertical: Spacings.small,
+            horizontal: 'medium',
+            vertical: 'small',
           }}>
           <StyledContent>{children}</StyledContent>
         </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderButtonGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderButtonGroup.tsx
index b05e0c1eb7..ac924771e2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderButtonGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/components/NavigationHeaderButtonGroup.tsx
@@ -1,9 +1,8 @@
 import styled from 'styled-components';
 
-import { Spacings } from '../../../foundations';
 import { Flex } from '../../flex';
 
 export const NavigationHeaderButtonGroup = styled(Flex).attrs({
-  $gap: Spacings.large,
+  $gap: 'large',
   $alignItems: 'center',
 })({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/Progress.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/Progress.tsx
index 021c0a2a0e..ba062f0898 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/Progress.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/Progress.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { Spacings } from '../../foundations';
 import { Flex } from '../flex';
 import {
   ProgressFooter,
@@ -24,7 +23,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
     const percent = ((normalizedValue - min) / (max - min)) * 100;
     return (
       <ProgressProvider value={value} min={min} max={max} percent={percent} disabled={disabled}>
-        <Flex $flexDirection="column" $gap={Spacings.small} ref={ref} {...props}>
+        <Flex $flexDirection="column" $gap="small" ref={ref} {...props}>
           {children}
         </Flex>
       </ProgressProvider>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressFooter.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressFooter.tsx
index 1201b04133..4dfc6370ad 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressFooter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressFooter.tsx
@@ -1,10 +1,9 @@
 import styled from 'styled-components';
 
-import { Spacings } from '../../../foundations';
 import { Flex } from '../../flex';
 
 export const ProgressFooter = styled(Flex).attrs({
   $alignItems: 'center',
   $justifyContent: 'space-between',
-  $gap: Spacings.medium,
+  $gap: 'medium',
 })``;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts
index b90ff06e9b..db55a0cc5c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts
@@ -8,10 +8,12 @@ export const spacingPrimitives = {
   '--spc-32': spacingTokens.spc32,
 } as const;
 
-export enum Spacings {
-  tiny = 'var(--spc-4)',
-  small = 'var(--spc-8)',
-  medium = 'var(--spc-16)',
-  large = 'var(--spc-24)',
-  big = 'var(--spc-32)',
-}
+export const spacings = {
+  tiny: 'var(--spc-4)',
+  small: 'var(--spc-8)',
+  medium: 'var(--spc-16)',
+  large: 'var(--spc-24)',
+  big: 'var(--spc-32)',
+} as const;
+
+export type Spacings = keyof typeof spacings;