Update to new spacings from design system

43 files changed, 94 insertions, 109 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
index 04115f8005..970ebcbda4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Account.tsx
@@ -118,7 +118,7 @@ export default function Account() {
 function DeviceNameRow() {
   const deviceName = useSelector((state) => state.account.deviceName);
   return (
-    <Flex $gap={Spacings.spacing3} $alignItems="center">
+    <Flex $gap={Spacings.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 646a2013b0..ac4c02f6c1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -41,7 +41,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   height: '10px',
   borderRadius: '50%',
   backgroundColor: props.$result ? Colors.green : Colors.red,
-  marginRight: Spacings.spacing2,
+  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.spacing6}>
+                <Flex $flexDirection="column" $gap={Spacings.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.spacing1} $alignItems="center">
+            <Flex $gap={Spacings.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.spacing3} $alignItems="center">
+      <Flex $gap={Spacings.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 c7c675f584..da4d2f3788 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -52,7 +52,7 @@ export default function ClipboardLabel(props: IProps) {
       <StyledLabel aria-hidden={obscured} {...otherProps}>
         {obscured ? '●●●● ●●●● ●●●● ●●●●' : (displayValue ?? value)}
       </StyledLabel>
-      <Flex $gap={Spacings.spacing5}>
+      <Flex $gap={Spacings.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 444d85e00f..8afbec176c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx
@@ -33,7 +33,7 @@ export const StyledIllustration = styled.img({
 });
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.spacing5,
+  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.spacing5}>
+                      <Flex $flexDirection="column" $gap={Spacings.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.spacing5}>
+                      <Flex $flexDirection="column" $gap={Spacings.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 6e3fe6540c..c32ebcb2e2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -21,7 +21,7 @@ const StyledContent = styled.div({
 });
 
 const StyledButtonGroup = styled.div({
-  margin: `${Spacings.spacing6} ${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 3125c1c3e1..9fd48925a5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -55,7 +55,7 @@ export function DeviceRevokedView() {
       <StyledCustomScrollbars fillContainer>
         <StyledContainer>
           <StyledBody>
-            <Flex $justifyContent="center" $margin={{ bottom: Spacings.spacing5 }}>
+            <Flex $justifyContent="center" $margin={{ bottom: Spacings.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 c9cf1b1f93..88c3e31832 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -43,12 +43,12 @@ export default function ErrorView(props: ErrorViewProps) {
         {!props.settingsUnavailable && <AppMainHeader.SettingsButton />}
       </AppMainHeader>
       <StyledContainer>
-        <Flex $flexDirection="column" $gap={Spacings.spacing3}>
+        <Flex $flexDirection="column" $gap={Spacings.small}>
           <Flex
             $flexDirection="column"
             $alignItems="center"
             $justifyContent="end"
-            $gap={Spacings.spacing4}>
+            $gap={Spacings.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 8a72a30cfa..3893348987 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -166,7 +166,7 @@ export function TimeAdded(props: ITimeAddedProps) {
       <StyledCustomScrollbars fillContainer>
         <StyledContainer>
           <StyledBody>
-            <Flex $justifyContent="center" $margin={{ bottom: Spacings.spacing5 }}>
+            <Flex $justifyContent="center" $margin={{ bottom: Spacings.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 785d6405e1..5f7923d02e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorView.tsx
@@ -122,7 +122,7 @@ function WelcomeView() {
         </StyledAccountNumberContainer>
       </StyledAccountNumberMessage>
 
-      <Flex $alignItems="center" $gap={Spacings.spacing1} $margin={{ bottom: Spacings.spacing5 }}>
+      <Flex $alignItems="center" $gap={Spacings.tiny} $margin={{ bottom: Spacings.medium }}>
         <StyledDeviceLabel>
           {sprintf(
             // TRANSLATORS: A label that will display the newly created device name to inform the user
@@ -156,7 +156,7 @@ function Content() {
 
   return (
     <>
-      <Flex $justifyContent="center" $margin={{ bottom: Spacings.spacing5 }}>
+      <Flex $justifyContent="center" $margin={{ bottom: Spacings.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 ff7c8c7943..341ad270d7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -40,7 +40,7 @@ export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: `${Spacings.spacing6} ${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.spacing5,
+  $gap: Spacings.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.spacing5,
+  $gap: Spacings.medium,
 })({
   [`${Footer} &&`]: {
-    margin: `0 ${Spacings.spacing3}`,
+    margin: `0 ${Spacings.small}`,
   },
 });
 
@@ -69,5 +69,5 @@ export const LabelStack = styled(Flex).attrs({
   $flexGrow: 1,
   $flexDirection: 'row',
   $alignItems: 'center',
-  $gap: Spacings.spacing3,
+  $gap: Spacings.small,
 })({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
index 34a04d1dc0..ba1a8a5faa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
@@ -312,7 +312,7 @@ class Login extends React.Component<IProps, IState> {
       this.props.loginState.method === 'existing_account';
 
     return (
-      <Flex $flexDirection="column" $gap={Spacings.spacing3}>
+      <Flex $flexDirection="column" $gap={Spacings.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.spacing3}>
+      <Flex $flexDirection="column" $gap={Spacings.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 99d7fd044f..595bc322f3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -39,7 +39,7 @@ const baseButtonStyles = {
 
 export const StyledAccountDropdownItemButton = styled.button({
   ...baseButtonStyles,
-  paddingLeft: Spacings.spacing5,
+  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 86064e1fd7..f067155ee1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReport.tsx
@@ -234,9 +234,7 @@ function Sent() {
   return (
     <StyledContent>
       <StyledForm>
-        <Flex
-          $justifyContent="center"
-          $margin={{ top: Spacings.spacing6, bottom: Spacings.spacing5 }}>
+        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.medium }}>
           <IconBadge state="positive" />
         </Flex>
         <StyledSendStatus>{messages.pgettext('support-view', 'Sent')}</StyledSendStatus>
@@ -261,9 +259,7 @@ function Failed() {
   return (
     <StyledContent>
       <StyledForm>
-        <Flex
-          $justifyContent="center"
-          $margin={{ top: Spacings.spacing6, bottom: Spacings.spacing5 }}>
+        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.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 d39f6ce1d3..10997dd353 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucher.tsx
@@ -153,7 +153,7 @@ export function RedeemVoucherResponse() {
 
   if (submitting) {
     return (
-      <Flex $alignItems="center" $margin={{ top: Spacings.spacing3 }} $gap={Spacings.spacing3}>
+      <Flex $alignItems="center" $margin={{ top: Spacings.small }} $gap={Spacings.small}>
         <Spinner size="medium" />
         <StyledProgressResponse>
           {messages.pgettext('redeem-voucher-view', 'Verifying voucher...')}
@@ -226,9 +226,7 @@ export function RedeemVoucherAlert(props: IRedeemVoucherAlertProps) {
           </AppButton.BlueButton>,
         ]}
         close={props.onClose}>
-        <Flex
-          $justifyContent="center"
-          $margin={{ top: Spacings.spacing6, bottom: Spacings.spacing5 }}>
+        <Flex $justifyContent="center" $margin={{ top: Spacings.large, bottom: Spacings.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 6c15358b01..864954763e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
@@ -19,7 +19,7 @@ const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (pro
 
 const TickIcon = styled(Cell.CellIcon)({
   marginLeft: '3px',
-  marginRight: Spacings.spacing3,
+  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 8aa8686cb6..ca04dc281a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -23,11 +23,10 @@ function SettingsHeader(props: SettingsHeaderProps, forwardRef: React.Ref<HTMLDi
     <Flex
       ref={forwardRef}
       $flexDirection="column"
-      $gap={Spacings.spacing3}
+      $gap={Spacings.small}
       $margin={{
-        top: Spacings.spacing3,
-        horizontal: Spacings.spacing5,
-        bottom: Spacings.spacing4,
+        horizontal: Spacings.medium,
+        bottom: Spacings.small,
       }}
       className={props.className}>
       {props.children}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 2d1580863f..0f59e9c3f7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -207,7 +207,7 @@ const StyledStatusTitle = styled.div(normalText, {
   fontWeight: 'bold',
   lineHeight: '20px',
   color: Colors.white,
-  gap: Spacings.spacing1,
+  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 fe543317ca..ba68853c7c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -183,7 +183,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
           </StyledNoResult>
         )}
 
-      <Flex $flexDirection="column" $gap={Spacings.spacing5}>
+      <Flex $flexDirection="column" $gap={Spacings.medium}>
         {filteredApplications !== undefined && filteredApplications.length > 0 && (
           <ApplicationList applications={filteredApplications} rowRenderer={rowRenderer} />
         )}
@@ -486,7 +486,7 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
         )}
       </SettingsHeader>
       {loadingDiskPermissions && (
-        <Flex $justifyContent="center" $margin={{ top: Spacings.spacing6 }}>
+        <Flex $justifyContent="center" $margin={{ top: Spacings.large }}>
           <Spinner size="big" />
         </Flex>
       )}
@@ -508,10 +508,10 @@ export function SplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsPro
 
       <Flex
         $flexDirection="column"
-        $gap={Spacings.spacing5}
+        $gap={Spacings.medium}
         $margin={{ bottom: measurements.verticalViewMargin }}>
         {(showSplitSection || showNonSplitSection) && (
-          <Flex $flexDirection="column" $gap={Spacings.spacing5}>
+          <Flex $flexDirection="column" $gap={Spacings.medium}>
             <Accordion expanded={showSplitSection}>
               <Cell.Section sectionTitle={excludedTitle}>
                 <ApplicationList
@@ -561,15 +561,15 @@ function MacOsSplitTunnelingAvailability({
   if (!needFullDiskPermissions) return null;
 
   return (
-    <Flex $flexDirection="column" $gap={Spacings.spacing6}>
+    <Flex $flexDirection="column" $gap={Spacings.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.spacing3}>
-        <Flex $flexDirection="column" $gap={Spacings.spacing7}>
+      <Flex $flexDirection="column" $gap={Spacings.small}>
+        <Flex $flexDirection="column" $gap={Spacings.big}>
           <WideSmallButton onClick={showFullDiskAccessSettings}>
             {messages.pgettext('split-tunneling-view', 'Open System Settings')}
           </WideSmallButton>
@@ -653,7 +653,7 @@ function ApplicationRow(props: IApplicationRowProps) {
         <StyledIconPlaceholder />
       )}
       <StyledCellLabel>{props.application.name}</StyledCellLabel>
-      <Flex $gap={Spacings.spacing3}>
+      <Flex $gap={Spacings.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 a2a8160b93..65b4d683db 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -38,12 +38,12 @@ const disabledApplication = (props: DisabledApplicationProps) => ({
 });
 
 export const StyledIcon = styled(Cell.CellImage)<DisabledApplicationProps>(disabledApplication, {
-  marginRight: Spacings.spacing4,
+  marginRight: Spacings.small,
 });
 
 export const StyledCellWarningIcon = styled(Cell.CellTintedIcon)({
-  marginLeft: Spacings.spacing3,
-  marginRight: Spacings.spacing1,
+  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.spacing4,
+  marginRight: Spacings.small,
 });
 
 export const StyledSpinnerRow = styled(Cell.CellButton)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  padding: `${Spacings.spacing3} 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: Spacings.spacing9,
+  marginBottom: '48px',
 });
 
 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 f843f4a08a..09873038a0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -117,7 +117,7 @@ export default function TooManyDevices() {
             <StyledBody>
               <Flex
                 $justifyContent="center"
-                $margin={{ top: Spacings.spacing6, bottom: Spacings.spacing5 }}>
+                $margin={{ top: Spacings.large, bottom: Spacings.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 46b0f8014e..59ace63e08 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -31,7 +31,7 @@ import { NavigationScrollbars } from './NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.spacing5,
+  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.spacing6,
+  marginLeft: Spacings.large,
 });
 
 const IndentedValueLabel = styled(Cell.ValueLabel)({
-  marginLeft: Spacings.spacing5,
+  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 cae1bf4336..222581447e 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
@@ -39,7 +39,7 @@ const AppMainHeader = ({
         <FocusFallback>
           {logoVariant !== 'none' ? <Logo variant={logoVariant} /> : <div />}
         </FocusFallback>
-        <Flex $gap={Spacings.spacing5} $alignItems="center">
+        <Flex $gap={Spacings.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 d13e486455..a83dbf34fc 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
@@ -29,7 +29,7 @@ export const AppMainHeaderDeviceInfo = () => {
       : '';
 
   return (
-    <Flex $gap={Spacings.spacing6} $margin={{ top: Spacings.spacing1 }}>
+    <Flex $gap={Spacings.large} $margin={{ top: Spacings.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 cd4bb87c32..e1b8257fea 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -22,8 +22,8 @@ const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColorHover = props.$selected ? Colors.green : Colors.blue80;
 
   return {
-    paddingRight: Spacings.spacing5,
-    paddingLeft: Spacings.spacing5,
+    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 9394acf7f0..bca01464c6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -5,7 +5,7 @@ import { Spacings } from '../../lib/foundations';
 import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
-  padding: `0 ${Spacings.spacing5}`,
+  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 cd575dc9a0..406d284bc5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -4,7 +4,7 @@ import { LabelTiny } from '../../lib/components';
 import { Colors, Spacings } from '../../lib/foundations';
 
 export const CellFooter = styled.div({
-  margin: `${Spacings.spacing1} ${Spacings.spacing6} 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 d111540a6a..e2314380eb 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -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.spacing3}`,
+  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 580fb71fde..b419cae667 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -22,7 +22,7 @@ interface SectionTitleProps {
 }
 
 export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
-  paddingRight: Spacings.spacing5,
+  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.spacing5,
+  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 34e285f267..08e58ab2f7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -16,7 +16,7 @@ const StyledTitleLabel = styled(Cell.SectionTitle)({
 });
 
 const StyledInfoButton = styled(InfoButton)({
-  marginRight: Spacings.spacing5,
+  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 89692c79f6..140d87e7fe 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -64,9 +64,9 @@ export const hugeText = {
 };
 
 export const measurements = {
-  rowMinHeight: Spacings.spacing9,
-  horizontalViewMargin: Spacings.spacing5,
-  verticalViewMargin: Spacings.spacing6,
-  rowVerticalMargin: Spacings.spacing6,
-  buttonVerticalMargin: Spacings.spacing5,
+  rowMinHeight: '48px',
+  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 565c6bcd04..efcd2f6c26 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
@@ -10,8 +10,8 @@ export interface ContainerProps extends FlexProps {
 }
 
 const sizes: Record<'3' | '4', string> = {
-  '3': `calc(100% - ${Spacings.spacing6} * 2)`,
-  '4': `calc(100% - ${Spacings.spacing5} * 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 ca74447798..c4cf49ce14 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
@@ -156,10 +156,10 @@ export default function SelectLocation() {
                 <>
                   {showFilters && (
                     <Flex
-                      $gap={Spacings.spacing3}
+                      $gap={Spacings.small}
                       $alignItems="center"
                       $flexWrap="wrap"
-                      $margin={{ horizontal: Spacings.spacing3, bottom: Spacings.spacing5 }}>
+                      $margin={{ horizontal: Spacings.small, bottom: Spacings.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 cb7719e53e..6a1274f7be 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
@@ -32,17 +32,17 @@ export const ChangelogView = () => {
             <AppNavigationHeader title={messages.pgettext('changelog-view', 'What’s new')} />
 
             <NavigationScrollbars>
-              <Flex $flexDirection="column" $gap={Spacings.spacing6}>
+              <Flex $flexDirection="column" $gap={Spacings.large}>
                 <Container size="4">
                   <TitleBig as={'h1'}>{messages.pgettext('changelog-view', 'What’s new')}</TitleBig>
                 </Container>
-                <Flex $flexDirection="column" $gap={Spacings.spacing3}>
+                <Flex $flexDirection="column" $gap={Spacings.small}>
                   <Container size="4">
                     <TitleLarge as="h2">{version}</TitleLarge>
                   </Container>
                   <Container size="3" $flexDirection="column">
                     {changelog.length ? (
-                      <StyledList as="ul" $flexDirection="column" $gap={Spacings.spacing5}>
+                      <StyledList as="ul" $flexDirection="column" $gap={Spacings.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 f8fe5f7879..5842474f7d 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
@@ -108,10 +108,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         <StyledButton ref={ref} disabled={disabled} {...props}>
           <StyledFlex
             $flex={1}
-            $gap={Spacings.spacing3}
+            $gap={Spacings.small}
             $alignItems="center"
             $padding={{
-              horizontal: Spacings.spacing3,
+              horizontal: Spacings.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 94b609fa96..aadf7a1648 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
@@ -10,8 +10,8 @@ export interface ContainerProps extends FlexProps {
 }
 
 const sizes: Record<'3' | '4', string> = {
-  '3': `calc(100% - ${Spacings.spacing6} * 2)`,
-  '4': `calc(100% - ${Spacings.spacing5} * 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 a6a8839735..d6a8beae36 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
@@ -57,11 +57,11 @@ const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(
           {...props}>
           <Flex
             $flex={1}
-            $gap={Spacings.spacing1}
+            $gap={Spacings.tiny}
             $alignItems="center"
             $justifyContent="space-between"
             $padding={{
-              horizontal: Spacings.spacing3,
+              horizontal: Spacings.small,
             }}>
             {children}
           </Flex>
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 94387051f7..2a23a06c22 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
@@ -31,7 +31,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.spacing3}>
+        <Flex $flex={1} $alignItems="center" $gap={Spacings.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 07327803f8..eaa61f4936 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
@@ -38,9 +38,9 @@ const MainHeader = ({ size = '1', variant = 'default', children, ...props }: Hea
         $flexDirection="column"
         $justifyContent="center"
         $margin={{
-          horizontal: Spacings.spacing5,
-          top: Spacings.spacing5,
-          bottom: Spacings.spacing3,
+          horizontal: Spacings.medium,
+          top: Spacings.medium,
+          bottom: Spacings.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 a291c40718..d17b54ca83 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
@@ -24,7 +24,7 @@ export const StyledContent = styled.div({
   placeContent: 'center',
   minHeight: '32px',
   height: '32px',
-  gap: Spacings.spacing1,
+  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.spacing5,
-            vertical: Spacings.spacing3,
+            horizontal: Spacings.medium,
+            vertical: Spacings.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 e256944021..b05e0c1eb7 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
@@ -4,6 +4,6 @@ import { Spacings } from '../../../foundations';
 import { Flex } from '../../flex';
 
 export const NavigationHeaderButtonGroup = styled(Flex).attrs({
-  $gap: Spacings.spacing6,
+  $gap: Spacings.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 950a07539d..021c0a2a0e 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
@@ -24,7 +24,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.spacing3} ref={ref} {...props}>
+        <Flex $flexDirection="column" $gap={Spacings.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 779c1cde6c..1201b04133 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
@@ -6,5 +6,5 @@ import { Flex } from '../../flex';
 export const ProgressFooter = styled(Flex).attrs({
   $alignItems: 'center',
   $justifyContent: 'space-between',
-  $gap: Spacings.spacing5,
+  $gap: Spacings.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 c787c0626b..b90ff06e9b 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
@@ -9,17 +9,9 @@ export const spacingPrimitives = {
 } as const;
 
 export enum Spacings {
-  spacing1 = 'var(--spc-4)',
-  spacing2 = 'var(--spc-6)',
-  spacing3 = 'var(--spc-8)',
-  spacing4 = 'var(--spc-12)',
-  spacing5 = 'var(--spc-16)',
-  spacing6 = 'var(--spc-24)',
-  spacing7 = 'var(--spc-32)',
-  spacing8 = 'var(--spc-40)',
-  spacing9 = 'var(--spc-48)',
-  spacing10 = 'var(--spc-56)',
-  spacing11 = 'var(--spc-64)',
-  spacing12 = 'var(--spc-72)',
-  spacing13 = 'var(--spc-80)',
+  tiny = 'var(--spc-4)',
+  small = 'var(--spc-8)',
+  medium = 'var(--spc-16)',
+  large = 'var(--spc-24)',
+  big = 'var(--spc-32)',
 }