diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
index 0b4d24cbfbe5..9522b422e547 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -3,8 +3,9 @@ import styled from 'styled-components';
 
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
+import { Spacings } from '../tokens';
 import * as AppButton from './AppButton';
-import { measurements, spacings } from './common-styles';
+import { measurements } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import {
@@ -24,7 +25,7 @@ const StyledContent = styled.div({
 });
 
 const StyledButtonGroup = styled.div({
-  margin: `${spacings.spacing6} ${measurements.horizontalViewMargin}`,
+  margin: `${Spacings.spacing6} ${measurements.horizontalViewMargin}`,
 });
 
 export default function Debug() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 865fc790f63f..8ff848cb12b4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { measurements, spacings } from './common-styles';
+import { Colors, Spacings } from '../tokens';
+import { Flex } from './common/layout/Flex';
+import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 import { NavigationScrollbars } from './NavigationBar';
 
@@ -13,7 +14,7 @@ export const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   overflow: 'hidden',
 });
 
@@ -25,7 +26,7 @@ export const Layout = styled.div({
 });
 
 export const SettingsContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({
@@ -40,32 +41,39 @@ export const SettingsContent = styled.div({
   marginBottom: measurements.verticalViewMargin,
 });
 
-export const SettingsStack = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing5,
-});
-
 export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
+  padding: `${Spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
   [`${SettingsContent} &&`]: {
     paddingBottom: 0,
   },
 });
 
-export const Spacing = styled.div<{ height: string }>((props) => ({
-  height: props.height,
-}));
+export const SettingsStack = styled(Flex).attrs({
+  $flexDirection: 'column',
+  $gap: Spacings.spacing5,
+})({});
 
-export const ButtonStack = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing5,
-  margin: `0 ${spacings.spacing6}`,
+export const SettingsGroup = styled(Flex).attrs({
+  $flex: 1,
+  $flexDirection: 'column',
+})({});
+
+export const ButtonStack = styled(Flex).attrs(() => ({
+  $flexDirection: 'column',
+  $gap: Spacings.spacing5,
+  $margin: `0 ${Spacings.spacing6}`,
+}))({
   [`${Footer} &&`]: {
-    margin: `0 ${spacings.spacing3}`,
+    margin: `0 ${Spacings.spacing3}`,
   },
 });
+
+export const LabelStack = styled(Flex).attrs(() => ({
+  $flexGrow: 1,
+  $flexDirection: 'row',
+  $alignItems: 'center',
+  $gap: Spacings.spacing3,
+}))({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
index 4c79f0225cc7..15f760941f32 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -1,27 +1,30 @@
 import { useCallback } from 'react';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { getDownloadUrl } from '../../shared/version';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
+import { Colors } from '../tokens';
 import { RedButton } from './AppButton';
 import * as Cell from './cell';
+import { TitleBig } from './common/text';
 import { BackAction } from './KeyboardNavigation';
 import {
   ButtonStack,
   Footer,
+  LabelStack,
   Layout,
   SettingsContainer,
   SettingsContent,
+  SettingsGroup,
   SettingsNavigationScrollbars,
   SettingsStack,
 } from './Layout';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
-import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import { StyledCellIcon } from './SettingsStyles';
+import SettingsHeader from './SettingsHeader';
 
 export default function Support() {
   const history = useHistory();
@@ -52,44 +55,44 @@ export default function Support() {
             <SettingsNavigationScrollbars fillContainer>
               <SettingsContent>
                 <SettingsHeader>
-                  <HeaderTitle>{messages.pgettext('navigation-bar', 'Settings')}</HeaderTitle>
+                  <TitleBig>{messages.pgettext('navigation-bar', 'Settings')}</TitleBig>
                 </SettingsHeader>
 
                 <SettingsStack>
                   {showSubSettings ? (
                     <>
-                      <Cell.Group $noMarginBottom>
+                      <SettingsGroup>
                         <UserInterfaceSettingsButton />
                         <MultihopButton />
                         <DaitaButton />
                         <VpnSettingsButton />
-                      </Cell.Group>
+                      </SettingsGroup>
 
                       {showSplitTunneling && (
-                        <Cell.Group $noMarginBottom>
+                        <SettingsGroup>
                           <SplitTunnelingButton />
-                        </Cell.Group>
+                        </SettingsGroup>
                       )}
                     </>
                   ) : (
-                    <Cell.Group $noMarginBottom>
+                    <SettingsGroup>
                       <UserInterfaceSettingsButton />
-                    </Cell.Group>
+                    </SettingsGroup>
                   )}
 
-                  <Cell.Group $noMarginBottom>
+                  <SettingsGroup>
                     <ApiAccessMethodsButton />
-                  </Cell.Group>
+                  </SettingsGroup>
 
-                  <Cell.Group $noMarginBottom>
+                  <SettingsGroup>
                     <SupportButton />
                     <AppVersionButton />
-                  </Cell.Group>
+                  </SettingsGroup>
 
                   {window.env.development && (
-                    <Cell.Group $noMarginBottom>
+                    <SettingsGroup>
                       <DebugButton />
-                    </Cell.Group>
+                    </SettingsGroup>
                   )}
                 </SettingsStack>
                 <Footer>
@@ -229,7 +232,7 @@ function AppVersionButton() {
 
     const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage;
 
-    alertIcon = <StyledCellIcon source="icon-alert" width={18} tintColor={colors.red} />;
+    alertIcon = <Cell.UntintedIcon source="icon-alert" width={18} tintColor={Colors.red} />;
     footer = (
       <Cell.CellFooter>
         <Cell.CellFooterText>{message}</Cell.CellFooterText>
@@ -246,8 +249,10 @@ function AppVersionButton() {
           source: 'icon-extLink',
           'aria-label': messages.pgettext('accessibility', 'Opens externally'),
         }}>
-        {alertIcon}
-        <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
+        <LabelStack>
+          {alertIcon}
+          <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
+        </LabelStack>
         <Cell.SubText>{appVersion}</Cell.SubText>
       </Cell.CellNavigationButton>
       {footer}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 1d1a1f4e7111..8b78264a9a5f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { hugeText, spacings, tinyText } from './common-styles';
+import { Colors, Spacings } from '../tokens';
+import { LabelTiny, TitleBig } from './common/text';
 
 export const Container = styled.div({
   flex: 0,
-  margin: `${spacings.spacing3} ${spacings.spacing5} ${spacings.spacing4}`,
+  margin: `${Spacings.spacing3} ${Spacings.spacing5} ${Spacings.spacing4}`,
 });
 
 export const ContentWrapper = styled.div({
@@ -15,13 +15,14 @@ export const ContentWrapper = styled.div({
   },
 });
 
-export const HeaderTitle = styled.span(hugeText, {
+export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
   hyphens: 'auto',
 });
-export const HeaderSubTitle = styled.span(tinyText, {
-  color: colors.white60,
-});
+
+export const HeaderSubTitle = styled(LabelTiny).attrs({
+  $color: Colors.white60,
+})({});
 
 interface ISettingsHeaderProps {
   children?: React.ReactNode;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index a9777defafb9..8da1f41e873c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -12,8 +12,8 @@ import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
 import { useSelector } from '../redux/store';
-import { measurements, normalText } from './common-styles';
-import { tinyText } from './common-styles';
+import { Flex } from './common/layout/Flex';
+import { measurements, normalText, tinyText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from './Layout';
@@ -25,20 +25,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { SmallButton, SmallButtonGrid } from './SmallButton';
-import { SmallButtonColor } from './SmallButton';
-
-const ContentContainer = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
-
-const Content = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
+import { SmallButton, SmallButtonColor, SmallButtonGrid } from './SmallButton';
 
 const StyledSmallButtonGrid = styled(SmallButtonGrid)({
   margin: `0 ${measurements.horizontalViewMargin}`,
@@ -157,8 +144,7 @@ export default function SettingsImport() {
               />
             </NavigationItems>
           </NavigationBar>
-
-          <ContentContainer>
+          <Flex $flexDirection="column" $flex={1}>
             <SettingsHeader>
               <HeaderTitle>
                 {messages.pgettext('settings-import', 'Server IP override')}
@@ -171,7 +157,7 @@ export default function SettingsImport() {
               </HeaderSubTitle>
             </SettingsHeader>
 
-            <Content>
+            <Flex $flexDirection="column" $flex={1}>
               <StyledSmallButtonGrid>
                 <SmallButton onClick={navigateTextImport}>
                   {messages.pgettext('settings-import', 'Import via text')}
@@ -182,7 +168,7 @@ export default function SettingsImport() {
               </StyledSmallButtonGrid>
 
               <SettingsImportStatus status={importStatus} />
-            </Content>
+            </Flex>
 
             <Footer>
               <SmallButton
@@ -211,7 +197,7 @@ export default function SettingsImport() {
                 'Clearing the imported overrides changes the server IPs, in the Select location view, back to default.',
               )}
             />
-          </ContentContainer>
+          </Flex>
         </SettingsContainer>
       </Layout>
     </BackAction>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
deleted file mode 100644
index 55915945f45c..000000000000
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-import * as Cell from './cell';
-import { spacings } from './common-styles';
-
-export const StyledCellIcon = styled(Cell.UntintedIcon)({
-  marginRight: spacings.spacing3,
-});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index 072f62728c59..5dad65219f9f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { sprintf } from 'sprintf-js';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import {
   IApplication,
   ILinuxSplitTunnelingApplication,
@@ -14,13 +14,16 @@ import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
 import { IReduxState } from '../redux/store';
+import { Colors, Spacings } from '../tokens';
 import Accordion from './Accordion';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
+import { Flex } from './common/layout';
+import { FootnoteMini } from './common/text';
 import { CustomScrollbarsRef } from './CustomScrollbars';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer, Spacing } from './Layout';
+import { Layout, SettingsContainer } from './Layout';
 import List from './List';
 import { ModalAlert, ModalAlertType } from './Modal';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
@@ -37,7 +40,6 @@ import {
   StyledIcon,
   StyledIconPlaceholder,
   StyledListContainer,
-  StyledMiniTitle,
   StyledNavigationScrollbars,
   StyledNoResult,
   StyledNoResultText,
@@ -201,7 +203,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
       <ModalAlert
         isOpen={browseError !== undefined}
         type={ModalAlertType.warning}
-        iconColor={colors.red}
+        iconColor={Colors.red}
         message={sprintf(
           // TRANSLATORS: Error message showed in a dialog when an application fails to launch.
           messages.pgettext(
@@ -240,7 +242,7 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) {
   const hideWarningDialog = useCallback(() => setShowWarning(false), []);
 
   const disabled = props.application.warning === 'launches-elsewhere';
-  const warningColor = disabled ? colors.red : colors.yellow;
+  const warningColor = disabled ? Colors.red : Colors.yellow;
   const warningMessage = disabled
     ? sprintf(
         messages.pgettext(
@@ -538,34 +540,33 @@ function MacOsSplitTunnelingAvailability({
   const { showFullDiskAccessSettings, daemonPrepareRestart } = useAppContext();
   const restartDaemon = useCallback(() => daemonPrepareRestart(true), [daemonPrepareRestart]);
 
+  if (!needFullDiskPermissions) return null;
+
   return (
-    <>
-      {needFullDiskPermissions === true ? (
-        <>
-          <HeaderSubTitle>
-            {messages.pgettext(
-              'split-tunneling-view',
-              'To use split tunneling please enable “Full disk access” for “Mullvad VPN” in the macOS system settings.',
-            )}
-          </HeaderSubTitle>
-          <Spacing height="24px" />
+    <Flex $flexDirection="column" $gap={Spacings.spacing6}>
+      <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}>
           <WideSmallButton onClick={showFullDiskAccessSettings}>
             {messages.pgettext('split-tunneling-view', 'Open System Settings')}
           </WideSmallButton>
-          <Spacing height="32px" />
-          <StyledMiniTitle>
+          <FootnoteMini $color={Colors.white60}>
             {messages.pgettext(
               'split-tunneling-view',
               'Enabled "Full disk access" and still having issues?',
             )}
-          </StyledMiniTitle>
-          <Spacing height="8px" />
-          <WideSmallButton onClick={restartDaemon}>
-            {messages.pgettext('split-tunneling-view', 'Restart Mullvad Service')}
-          </WideSmallButton>
-        </>
-      ) : null}
-    </>
+          </FootnoteMini>
+        </Flex>
+        <WideSmallButton onClick={restartDaemon}>
+          {messages.pgettext('split-tunneling-view', 'Restart Mullvad Service')}
+        </WideSmallButton>
+      </Flex>
+    </Flex>
   );
 }
 
@@ -635,8 +636,8 @@ function ApplicationRow(props: IApplicationRowProps) {
           source="icon-close"
           width={18}
           onClick={onDelete}
-          tintColor={colors.white40}
-          tintHoverColor={colors.white60}
+          tintColor={Colors.white40}
+          tintHoverColor={Colors.white60}
         />
       )}
       {props.onAdd && (
@@ -644,8 +645,8 @@ function ApplicationRow(props: IApplicationRowProps) {
           source="icon-add"
           width={18}
           onClick={onAdd}
-          tintColor={colors.white40}
-          tintHoverColor={colors.white60}
+          tintColor={Colors.white40}
+          tintHoverColor={Colors.white60}
         />
       )}
       {props.onRemove && (
@@ -653,8 +654,8 @@ function ApplicationRow(props: IApplicationRowProps) {
           source="icon-remove"
           width={18}
           onClick={onRemove}
-          tintColor={colors.white40}
-          tintHoverColor={colors.white60}
+          tintColor={Colors.white40}
+          tintHoverColor={Colors.white60}
         />
       )}
     </Cell.CellButton>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index a2046e61c973..01eb73ec50b3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { colors } from '../../config.json';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
-import { measurements, miniText, normalText } from './common-styles';
+import { measurements, normalText } from './common-styles';
 import ImageView from './ImageView';
 import { NavigationScrollbars } from './NavigationBar';
 import SearchBar from './SearchBar';
@@ -118,11 +118,6 @@ export const StyledHeaderTitle = styled(HeaderTitle)({
   flex: 1,
 });
 
-export const StyledMiniTitle = styled.span({
-  ...miniText,
-  color: colors.white60,
-});
-
 export const StyledSearchBar = styled(SearchBar)({
   marginLeft: measurements.horizontalViewMargin,
   marginRight: measurements.horizontalViewMargin,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
index 9c3415d90d33..38a0f71bbde5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/UserInterfaceSettings.tsx
@@ -9,7 +9,14 @@ import { useSelector } from '../redux/store';
 import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import {
+  LabelStack,
+  Layout,
+  SettingsContainer,
+  SettingsContent,
+  SettingsGroup,
+  SettingsStack,
+} from './Layout';
 import {
   NavigationBar,
   NavigationContainer,
@@ -19,18 +26,7 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '2px',
-});
-
-const StyledCellIcon = styled(Cell.UntintedIcon)({
-  marginRight: '8px',
-});
-
-const StyledAnimateMapSettingsGroup = styled(Cell.Group)({
+const StyledAnimateMapCellGroup = styled(SettingsGroup)({
   '@media (prefers-reduced-motion: reduce)': {
     display: 'none',
   },
@@ -63,35 +59,37 @@ export default function UserInterfaceSettings() {
                 </HeaderTitle>
               </SettingsHeader>
 
-              <StyledContent>
-                <Cell.Group>
-                  <NotificationsSetting />
-                </Cell.Group>
-                <Cell.Group>
-                  <MonochromaticTrayIconSetting />
-                </Cell.Group>
+              <SettingsContent>
+                <SettingsStack>
+                  <SettingsGroup>
+                    <NotificationsSetting />
+                  </SettingsGroup>
+                  <SettingsGroup>
+                    <MonochromaticTrayIconSetting />
+                  </SettingsGroup>
 
-                <Cell.Group>
-                  <LanguageButton />
-                </Cell.Group>
+                  <SettingsGroup>
+                    <LanguageButton />
+                  </SettingsGroup>
 
-                {(window.env.platform === 'win32' ||
-                  (window.env.platform === 'darwin' && window.env.development)) && (
-                  <Cell.Group>
-                    <UnpinnedWindowSetting />
-                  </Cell.Group>
-                )}
+                  {(window.env.platform === 'win32' ||
+                    (window.env.platform === 'darwin' && window.env.development)) && (
+                    <SettingsGroup>
+                      <UnpinnedWindowSetting />
+                    </SettingsGroup>
+                  )}
 
-                {unpinnedWindow && (
-                  <Cell.Group>
-                    <StartMinimizedSetting />
-                  </Cell.Group>
-                )}
+                  {unpinnedWindow && (
+                    <SettingsGroup>
+                      <StartMinimizedSetting />
+                    </SettingsGroup>
+                  )}
 
-                <StyledAnimateMapSettingsGroup>
-                  <AnimateMapSetting />
-                </StyledAnimateMapSettingsGroup>
-              </StyledContent>
+                  <StyledAnimateMapCellGroup>
+                    <AnimateMapSetting />
+                  </StyledAnimateMapCellGroup>
+                </SettingsStack>
+              </SettingsContent>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
@@ -259,13 +257,15 @@ function LanguageButton() {
 
   return (
     <Cell.CellNavigationButton onClick={navigate}>
-      <StyledCellIcon width={24} height={24} source="icon-language" />
-      <Cell.Label>
-        {
-          // TRANSLATORS: Navigation button to the 'Language' settings view
-          messages.pgettext('user-interface-settings-view', 'Language')
-        }
-      </Cell.Label>
+      <LabelStack>
+        <Cell.UntintedIcon width={24} height={24} source="icon-language" />
+        <Cell.Label>
+          {
+            // TRANSLATORS: Navigation button to the 'Language' settings view
+            messages.pgettext('user-interface-settings-view', 'Language')
+          }
+        </Cell.Label>
+      </LabelStack>
       <Cell.SubText>{localeDisplayName}</Cell.SubText>
     </Cell.CellNavigationButton>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index c23ecdbf4719..c27072cab292 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -2,7 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import { IDnsOptions, TunnelProtocol, wrapConstraint } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
@@ -15,6 +15,7 @@ import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
 import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { useSelector } from '../redux/store';
+import { Colors, Spacings } from '../tokens';
 import * as AppButton from './AppButton';
 import { AriaDescription, AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup';
 import * as Cell from './cell';
@@ -22,7 +23,7 @@ import Selector, { SelectorItem } from './cell/Selector';
 import CustomDnsSettings from './CustomDnsSettings';
 import InfoButton, { InfoIcon } from './InfoButton';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout';
 import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
 import {
   NavigationBar,
@@ -33,19 +34,8 @@ import {
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
-const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '2px',
-});
-
 const StyledInfoIcon = styled(InfoIcon)({
-  marginRight: '16px',
-});
-
-const StyledSelectorContainer = styled.div({
-  flex: 0,
+  marginRight: Spacings.spacing5,
 });
 
 const StyledTitleLabel = styled(Cell.SectionTitle)({
@@ -53,16 +43,16 @@ const StyledTitleLabel = styled(Cell.SectionTitle)({
 });
 
 const StyledSectionItem = styled(Cell.Container)({
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
 });
 
 const LanIpRanges = styled.ul({
   listStyle: 'disc outside',
-  marginLeft: '20px',
+  marginLeft: Spacings.spacing6,
 });
 
 const IndentedValueLabel = styled(Cell.ValueLabel)({
-  marginLeft: '16px',
+  marginLeft: Spacings.spacing5,
 });
 
 export default function VpnSettings() {
@@ -89,46 +79,48 @@ export default function VpnSettings() {
                 <HeaderTitle>{messages.pgettext('vpn-settings-view', 'VPN settings')}</HeaderTitle>
               </SettingsHeader>
 
-              <StyledContent>
-                <Cell.Group>
-                  <AutoStart />
-                  <AutoConnect />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <AllowLan />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <DnsBlockers />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <EnableIpv6 />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <KillSwitchInfo />
-                  <LockdownMode />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <TunnelProtocolSetting />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <WireguardSettingsButton />
-                  <OpenVpnSettingsButton />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <CustomDnsSettings />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <IpOverrideButton />
-                </Cell.Group>
-              </StyledContent>
+              <SettingsContent>
+                <SettingsStack>
+                  <SettingsGroup>
+                    <AutoStart />
+                    <AutoConnect />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <AllowLan />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <DnsBlockers />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <EnableIpv6 />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <KillSwitchInfo />
+                    <LockdownMode />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <TunnelProtocolSetting />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <WireguardSettingsButton />
+                    <OpenVpnSettingsButton />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <CustomDnsSettings />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <IpOverrideButton />
+                  </SettingsGroup>
+                </SettingsStack>
+              </SettingsContent>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
@@ -736,15 +728,13 @@ function TunnelProtocolSetting() {
 
   return (
     <AriaInputGroup>
-      <StyledSelectorContainer>
-        <Selector
-          title={messages.pgettext('vpn-settings-view', 'Tunnel protocol')}
-          items={tunnelProtocolItems}
-          value={tunnelProtocol ?? null}
-          onSelect={setTunnelProtocol}
-          automaticValue={null}
-        />
-      </StyledSelectorContainer>
+      <Selector
+        title={messages.pgettext('vpn-settings-view', 'Tunnel protocol')}
+        items={tunnelProtocolItems}
+        value={tunnelProtocol ?? null}
+        onSelect={setTunnelProtocol}
+        automaticValue={null}
+      />
       {openVpnDisabled ? (
         <Cell.CellFooter>
           <AriaDescription>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
index b199bd5ee576..b9ee3dedb13b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/WireguardSettings.tsx
@@ -21,7 +21,7 @@ import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGro
 import * as Cell from './cell';
 import Selector, { SelectorItem, SelectorWithCustomItem } from './cell/Selector';
 import { BackAction } from './KeyboardNavigation';
-import { Layout, SettingsContainer } from './Layout';
+import { Layout, SettingsContainer, SettingsContent, SettingsGroup, SettingsStack } from './Layout';
 import { ModalMessage } from './Modal';
 import {
   NavigationBar,
@@ -40,13 +40,6 @@ function mapPortToSelectorItem(value: number): SelectorItem<number> {
   return { label: value.toString(), value };
 }
 
-const StyledContent = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-  marginBottom: '2px',
-});
-
 const StyledSelectorContainer = styled.div({
   flex: 0,
 });
@@ -84,28 +77,29 @@ export default function WireguardSettings() {
                   )}
                 </HeaderTitle>
               </SettingsHeader>
-
-              <StyledContent>
-                <Cell.Group>
-                  <PortSelector />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <ObfuscationSettings />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <QuantumResistantSetting />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <IpVersionSetting />
-                </Cell.Group>
-
-                <Cell.Group>
-                  <MtuSetting />
-                </Cell.Group>
-              </StyledContent>
+              <SettingsContent>
+                <SettingsStack>
+                  <SettingsGroup>
+                    <PortSelector />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <ObfuscationSettings />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <QuantumResistantSetting />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <IpVersionSetting />
+                  </SettingsGroup>
+
+                  <SettingsGroup>
+                    <MtuSetting />
+                  </SettingsGroup>
+                </SettingsStack>
+              </SettingsContent>
             </NavigationScrollbars>
           </NavigationContainer>
         </SettingsContainer>
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 83f73be146d1..f637008a6811 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
-import { spacings } from '../common-styles';
+import { Colors, Spacings } from '../../tokens';
+import { Center } from '../common/layout';
 import { IImageViewProps } from '../ImageView';
 import { CellDisabledContext } from './Container';
 import { Icon } from './Label';
@@ -16,15 +16,15 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement>
 
 const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColor = props.$selected
-    ? colors.green
+    ? Colors.green
     : props.$containedInSection
-      ? colors.blue40
-      : colors.blue;
-  const backgroundColorHover = props.$selected ? colors.green : colors.blue80;
+      ? Colors.blue40
+      : Colors.blue;
+  const backgroundColorHover = props.$selected ? Colors.green : Colors.blue80;
 
   return {
-    paddingRight: spacings.spacing5,
-    paddingLeft: spacings.spacing5,
+    paddingRight: Spacings.spacing5,
+    paddingLeft: Spacings.spacing5,
     flex: 1,
     alignContent: 'center',
     cursor: 'default',
@@ -58,13 +58,6 @@ export const CellButton = styled(
   }),
 )({});
 
-const StyledNavigationButtonIcon = styled('div')({
-  display: 'grid',
-  placeItems: 'center',
-  width: '24px',
-  height: '24px',
-});
-
 interface ICellNavigationButtonProps extends ICellButtonProps {
   isAriaDescription?: boolean;
   icon?: IImageViewProps;
@@ -80,9 +73,9 @@ export function CellNavigationButton({
   return (
     <CellButton {...props}>
       {children}
-      <StyledNavigationButtonIcon>
+      <Center $height="24px" $width="24px">
         <Icon {...icon} />
-      </StyledNavigationButtonIcon>
+      </Center>
     </CellButton>
   );
 }
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 e35babf79046..f8db1c45e6f9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { Spacings } from '../../tokens';
 import { Row } from './Row';
 
 const StyledContainer = styled(Row)({
-  paddingRight: '16px',
+  padding: `0 ${Spacings.spacing5}`,
 });
 
 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 8d5391c0023a..245422563881 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,16 +1,12 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
-import { spacings, tinyText } from '../common-styles';
+import { Colors, Spacings } from '../../tokens';
+import { LabelTiny } from '../common/text';
 
 export const CellFooter = styled.div({
-  margin: `${spacings.spacing1} ${spacings.spacing6} 0px`,
+  margin: `${Spacings.spacing1} ${Spacings.spacing6} 0px`,
 });
 
-export const CellFooterText = styled.span(tinyText, {
-  color: colors.white60,
-});
-
-export const CellFooterBoldText = styled(CellFooterText)({
-  fontWeight: 900,
-});
+export const CellFooterText = styled(LabelTiny).attrs({
+  $color: Colors.white60,
+})({});
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 556481e50ee1..3123a31dc43b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
-import { buttonText, normalText, spacings, tinyText } from '../common-styles';
+import { Colors, Spacings } from '../../tokens';
+import { buttonText, normalText, tinyText } from '../common-styles';
 import ImageView, { IImageViewProps } from '../ImageView';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -11,7 +11,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   display: 'flex',
   margin: '10px 0',
   flex: 1,
-  color: props.disabled ? colors.white40 : colors.white,
+  color: props.disabled ? Colors.white40 : Colors.white,
   textAlign: 'left',
 
   [`${LabelContainer} &&`]: {
@@ -27,10 +27,10 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
 }));
 
 const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
-  color: props.disabled ? colors.white20 : colors.white60,
+  color: props.disabled ? Colors.white20 : Colors.white60,
   flex: -1,
   textAlign: 'right',
-  margin: `0 ${spacings.spacing3}`,
+  margin: `0 ${Spacings.spacing3}`,
 }));
 
 const StyledIconContainer = styled.div<{ disabled: boolean }>((props) => ({
@@ -38,8 +38,8 @@ const StyledIconContainer = styled.div<{ disabled: boolean }>((props) => ({
 }));
 
 const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
-  tintColor: props.tintColor ?? colors.white,
-  tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60,
+  tintColor: props.tintColor ?? Colors.white,
+  tintHoverColor: props.tintHoverColor ?? props.tintColor ?? Colors.white60,
 }))((props: IImageViewProps) => ({
   '&&:hover': {
     backgroundColor: props.tintHoverColor,
@@ -52,7 +52,7 @@ const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({
 const StyledSubLabel = styled.div<{ disabled: boolean }>(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  color: colors.white60,
+  color: Colors.white60,
   marginBottom: '5px',
   lineHeight: '14px',
   height: '14px',
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 b7465ecb93cd..0e390eb901a9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { useAppContext } from '../../context';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
+import { Colors, Spacings } from '../../tokens';
 import Accordion from '../Accordion';
 import ChevronButton from '../ChevronButton';
 import { buttonText, openSans, sourceSansPro } from '../common-styles';
@@ -22,8 +22,8 @@ interface SectionTitleProps {
 }
 
 export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
-  paddingRight: '16px',
-  color: props.disabled ? colors.white20 : colors.white,
+  paddingRight: Spacings.spacing5,
+  color: props.disabled ? Colors.white20 : Colors.white,
   fontWeight: props.$thin ? 400 : 600,
   fontSize: props.$thin ? '15px' : '18px',
   ...(props.$thin ? openSans : sourceSansPro),
@@ -49,7 +49,7 @@ export function Section(props: SectionProps) {
 
 const StyledChevronButton = styled(ChevronButton)({
   padding: 0,
-  marginRight: '16px',
+  marginRight: Spacings.spacing5,
 });
 
 const StyledTitleContainer = styled(Container)({
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 18c5237843eb..fc08d8411d7a 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 } from '../../config.json';
+import { Colors, Spacings } from '../tokens';
 
 export const openSans: React.CSSProperties = {
   fontFamily: 'Open Sans',
@@ -10,13 +10,6 @@ export const sourceSansPro: React.CSSProperties = {
   fontFamily: '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
 };
 
-export const miniText = {
-  ...openSans,
-  fontSize: '10px',
-  fontWeight: 600,
-  lineHeight: '15px',
-};
-
 export const tinyText = {
   ...openSans,
   fontSize: '12px',
@@ -29,7 +22,7 @@ export const smallText = {
   fontSize: '14px',
   fontWeight: 600,
   lineHeight: '20px',
-  color: colors.white80,
+  color: Colors.white80,
 };
 
 export const smallNormalText = {
@@ -52,7 +45,7 @@ export const largeText = {
 
 export const buttonText = {
   ...largeText,
-  color: colors.white,
+  color: Colors.white,
 };
 
 export const bigText = {
@@ -67,29 +60,13 @@ export const hugeText = {
   fontSize: '32px',
   fontWeight: 700,
   lineHeight: '34px',
-  color: colors.white,
-};
-
-export const spacings = {
-  spacing1: '4px',
-  spacing2: '6px',
-  spacing3: '8px',
-  spacing4: '12px',
-  spacing5: '16px',
-  spacing6: '24px',
-  spacing7: '32px',
-  spacing8: '40px',
-  spacing9: '48px',
-  spacing10: '56px',
-  spacing11: '64px',
-  spacing12: '72px',
-  spacing13: '80px',
+  color: Colors.white,
 };
 
 export const measurements = {
-  rowMinHeight: spacings.spacing9,
-  horizontalViewMargin: spacings.spacing5,
-  verticalViewMargin: spacings.spacing6,
-  rowVerticalMargin: spacings.spacing6,
-  buttonVerticalMargin: spacings.spacing5,
+  rowMinHeight: Spacings.spacing9,
+  horizontalViewMargin: Spacings.spacing5,
+  verticalViewMargin: Spacings.spacing6,
+  rowVerticalMargin: Spacings.spacing6,
+  buttonVerticalMargin: Spacings.spacing5,
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx
new file mode 100644
index 000000000000..3222bb97196b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+interface CenterProps {
+  $width?: string;
+  $height?: string;
+}
+
+export const Center = styled.div<CenterProps>((props) => ({
+  display: 'grid',
+  placeItems: 'center',
+  height: props.$height,
+  width: props.$width,
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
new file mode 100644
index 000000000000..1b73d69f4c50
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Spacings } from '../../../tokens';
+
+export interface FlexProps {
+  $gap?: Spacings;
+  $flex?: React.CSSProperties['flex'];
+  $flexDirection?: React.CSSProperties['flexDirection'];
+  $alignItems?: React.CSSProperties['alignItems'];
+  $justifyContent?: React.CSSProperties['justifyContent'];
+  $flexGrow?: React.CSSProperties['flexGrow'];
+  $flexShrink?: React.CSSProperties['flexShrink'];
+  children?: React.ReactNode;
+}
+
+export const Flex = styled.div<FlexProps>(
+  ({ $gap, $flex, $flexDirection, $alignItems, $justifyContent, $flexGrow, $flexShrink }) => ({
+    display: 'flex',
+    gap: $gap,
+    flex: $flex,
+    flexDirection: $flexDirection,
+    alignItems: $alignItems,
+    justifyContent: $justifyContent,
+    flexGrow: $flexGrow,
+    flexShrink: $flexShrink,
+  }),
+);
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
new file mode 100644
index 000000000000..5afb47169d47
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+import { Spacings } from '../../../tokens';
+import { margin } from './margin';
+import { padding } from './padding';
+import { LayoutSpacings } from './types';
+
+interface LayoutProps {
+  $margin?: Spacings | LayoutSpacings;
+  $padding?: Spacings | LayoutSpacings;
+}
+
+const combine = (
+  funcs: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties>,
+  spacings?: Spacings | LayoutSpacings,
+): React.CSSProperties => {
+  if (!spacings) return {};
+
+  if (typeof spacings === 'string') return funcs.all(spacings);
+
+  const result: React.CSSProperties = {};
+  for (const [key, value] of Object.entries(spacings)) {
+    Object.assign(result, funcs[key as keyof LayoutSpacings](value));
+  }
+
+  return result;
+};
+
+export const Layout = styled.div<LayoutProps>(({ $margin, $padding }) => ({
+  ...combine(margin, $margin),
+  ...combine(padding, $padding),
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts
new file mode 100644
index 000000000000..885ab32d4b08
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts
@@ -0,0 +1,3 @@
+export * from './Center';
+export * from './Flex';
+export * from './Layout';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
new file mode 100644
index 000000000000..c410e47c343b
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts
@@ -0,0 +1,40 @@
+import { Spacings } from '../../../tokens';
+import { LayoutSpacings } from './types';
+
+export const all = (margin: Spacings) => ({ margin });
+
+const vertical = (margin: Spacings) => ({
+  ...top(margin),
+  ...bottom(margin),
+});
+
+const horizontal = (margin: Spacings) => ({
+  ...left(margin),
+  ...right(margin),
+});
+
+const top = (marginTop: Spacings) => ({
+  marginTop,
+});
+
+const right = (marginRight: Spacings) => ({
+  marginRight,
+});
+
+const bottom = (marginBottom: Spacings) => ({
+  marginBottom,
+});
+
+const left = (marginLeft: Spacings) => ({
+  marginLeft,
+});
+
+export const margin: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
+  all,
+  vertical,
+  horizontal,
+  top,
+  right,
+  bottom,
+  left,
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
new file mode 100644
index 000000000000..d98a209203d7
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts
@@ -0,0 +1,40 @@
+import { Spacings } from '../../../tokens';
+import { LayoutSpacings } from './types';
+
+export const all = (padding: Spacings) => ({ padding });
+
+const vertical = (padding: Spacings) => ({
+  ...top(padding),
+  ...bottom(padding),
+});
+
+const horizontal = (padding: Spacings) => ({
+  ...left(padding),
+  ...right(padding),
+});
+
+const top = (paddingTop: Spacings) => ({
+  paddingTop,
+});
+
+const right = (paddingRight: Spacings) => ({
+  paddingRight,
+});
+
+const bottom = (paddingBottom: Spacings) => ({
+  paddingBottom,
+});
+
+const left = (paddingLeft: Spacings) => ({
+  paddingLeft,
+});
+
+export const padding: Record<keyof LayoutSpacings, (value: Spacings) => React.CSSProperties> = {
+  all,
+  vertical,
+  horizontal,
+  top,
+  right,
+  bottom,
+  left,
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
new file mode 100644
index 000000000000..f31c45891789
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts
@@ -0,0 +1,11 @@
+import { Spacings } from '../../../tokens';
+
+export interface LayoutSpacings {
+  all?: 'string';
+  vertical?: Spacings;
+  horizontal?: Spacings;
+  top?: Spacings;
+  right?: Spacings;
+  bottom?: Spacings;
+  left?: Spacings;
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
new file mode 100644
index 000000000000..9cfe1bc9c041
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const BodySmall = styled(Text)({
+  ...typography['bodySmall'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
new file mode 100644
index 000000000000..705a939e5d48
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const BodySmallSemiBold = styled(Text)({
+  ...typography['bodySmallSemibold'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
new file mode 100644
index 000000000000..adbafb90d129
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const FootnoteMini = styled(Text)({
+  ...typography['footnoteMini'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
new file mode 100644
index 000000000000..9f6f8a143c42
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const LabelTiny = styled(Text)({
+  ...typography['labelTiny'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
new file mode 100644
index 000000000000..f4b32d988d08
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+import { Colors } from '../../../tokens';
+
+interface TextProps {
+  $color?: Colors;
+}
+
+export const Text = styled.div<TextProps>(({ $color }) => ({
+  color: $color ? $color : Colors.white,
+}));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
new file mode 100644
index 000000000000..16d76c04ef82
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const TitleBig = styled(Text)({
+  ...typography['titleBig'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
new file mode 100644
index 000000000000..e939b099fc05
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+export const TitleLarge = styled(Text)({
+  ...typography['titleLarge'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
new file mode 100644
index 000000000000..578d435ef373
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+import { typography } from '../../../tokens';
+import { Text } from './Text';
+
+export const TitleMedium = styled(Text)({
+  ...typography['titleMedium'],
+});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
new file mode 100644
index 000000000000..56db1927fc80
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts
@@ -0,0 +1,8 @@
+export * from './BodySmall';
+export * from './BodySmallSemiBold';
+export * from './FootnoteMini';
+export * from './LabelTiny';
+export * from './Text';
+export * from './TitleBig';
+export * from './TitleLarge';
+export * from './TitleMedium';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts
new file mode 100644
index 000000000000..46dc8508befe
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/colors.ts
@@ -0,0 +1,32 @@
+export enum Colors {
+  darkerBlue = 'rgba(25, 38, 56, 0.95)',
+  darkBlue = 'rgb(25, 46, 69)',
+  blue = 'rgb(41, 77, 115)',
+  darkGreen = 'rgb(32, 84, 37)',
+  green = 'rgb(68, 173, 77)',
+  red = 'rgb(227, 64, 57)',
+  darkYellow = 'rgb(142, 78, 19)',
+  yellow = 'rgb(255, 213, 36)',
+  black = 'rgb(0, 0, 0)',
+  white = 'rgb(255, 255, 255)',
+  white90 = 'rgba(255, 255, 255, 0.9)',
+  white80 = 'rgba(255, 255, 255, 0.8)',
+  white60 = 'rgba(255, 255, 255, 0.6)',
+  white50 = 'rgba(255, 255, 255, 0.5)',
+  white40 = 'rgba(255, 255, 255, 0.4)',
+  white20 = 'rgba(255, 255, 255, 0.2)',
+  white10 = 'rgba(255, 255, 255, 0.1)',
+  blue10 = 'rgba(41, 77, 115, 0.1)',
+  blue20 = 'rgba(41, 77, 115, 0.2)',
+  blue40 = 'rgba(41, 77, 115, 0.4)',
+  blue50 = 'rgba(41, 77, 115, 0.5)',
+  blue60 = 'rgba(41, 77, 115, 0.6)',
+  blue80 = 'rgba(41, 77, 115, 0.8)',
+  red95 = 'rgba(227, 64, 57, 0.95)',
+  red80 = 'rgba(227, 64, 57, 0.8)',
+  red60 = 'rgba(227, 64, 57, 0.6)',
+  red45 = 'rgba(227, 64, 57, 0.45)',
+  red40 = 'rgba(227, 64, 57, 0.4)',
+  green90 = 'rgba(68, 173, 77, 0.9)',
+  green40 = 'rgba(68, 173, 77, 0.4)',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
new file mode 100644
index 000000000000..53555f1d5aef
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts
@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './spacings';
+export * from './typography';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts
new file mode 100644
index 000000000000..fb0c92486300
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/spacings.ts
@@ -0,0 +1,15 @@
+export enum Spacings {
+  spacing1 = '4px',
+  spacing2 = '6px',
+  spacing3 = '8px',
+  spacing4 = '12px',
+  spacing5 = '16px',
+  spacing6 = '24px',
+  spacing7 = '32px',
+  spacing8 = '40px',
+  spacing9 = '48px',
+  spacing10 = '56px',
+  spacing11 = '64px',
+  spacing12 = '72px',
+  spacing13 = '80px',
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts
new file mode 100644
index 000000000000..df7359b8f0ae
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/tokens/typography.ts
@@ -0,0 +1,96 @@
+export enum FontFamilies {
+  openSans = 'Open Sans',
+  openSansPro = '"Source Sans Pro", "Noto Sans Myanmar", "Noto Sans Thai", sans-serif',
+}
+
+export enum Fonts {
+  title = FontFamilies.openSansPro,
+  body = FontFamilies.openSans,
+  label = FontFamilies.openSans,
+  footnote = FontFamilies.openSans,
+}
+
+export enum FontWeights {
+  regular = 400,
+  semiBold = 600,
+  bold = 700,
+}
+
+export enum FontSizes {
+  big = '32px',
+  large = '24px',
+  medium = '18px',
+  small = '14px',
+  tiny = '12px',
+  mini = '10px',
+}
+
+export enum LineHeights {
+  big = '34px',
+  large = '28px',
+  medium = '24px',
+  small = '20px',
+  tiny = '18px',
+  mini = '15px',
+}
+
+interface Typography {
+  fontFamily: React.CSSProperties['fontFamily'];
+  fontSize: React.CSSProperties['fontSize'];
+  fontWeight: React.CSSProperties['fontWeight'];
+  lineHeight: React.CSSProperties['lineHeight'];
+}
+
+export const typography: Record<
+  | 'titleBig'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'bodySmall'
+  | 'bodySmallSemibold'
+  | 'labelTiny'
+  | 'footnoteMini',
+  Typography
+> = {
+  titleBig: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.bold,
+    fontSize: FontSizes.big,
+    lineHeight: LineHeights.big,
+  },
+  titleLarge: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.bold,
+    fontSize: FontSizes.large,
+    lineHeight: LineHeights.large,
+  },
+  titleMedium: {
+    fontFamily: Fonts.title,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.medium,
+    lineHeight: LineHeights.medium,
+  },
+  bodySmall: {
+    fontFamily: Fonts.body,
+    fontWeight: FontWeights.regular,
+    fontSize: FontSizes.small,
+    lineHeight: LineHeights.small,
+  },
+  bodySmallSemibold: {
+    fontFamily: Fonts.body,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.small,
+    lineHeight: LineHeights.small,
+  },
+  labelTiny: {
+    fontFamily: Fonts.label,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.tiny,
+    lineHeight: LineHeights.tiny,
+  },
+  footnoteMini: {
+    fontFamily: Fonts.footnote,
+    fontWeight: FontWeights.semiBold,
+    fontSize: FontSizes.mini,
+    lineHeight: LineHeights.mini,
+  },
+} as const;