Use color token throughout app

60 files changed, 333 insertions, 365 deletions

diff --git a/desktop/packages/mullvad-vpn/src/config.json b/desktop/packages/mullvad-vpn/src/config.json
index a77c47de45..a603139ba9 100644
--- a/desktop/packages/mullvad-vpn/src/config.json
+++ b/desktop/packages/mullvad-vpn/src/config.json
@@ -6,38 +6,6 @@
     "privacyGuide": "https://mullvad.net/help/first-steps-towards-online-privacy/",
     "download": "https://mullvad.net/download/vpn/"
   },
-  "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)",
-    "red40": "rgba(227, 64, 57, 0.4)",
-    "red45": "rgba(227, 64, 57, 0.45)",
-    "green90": "rgba(68, 173, 77, 0.9)",
-    "green40": "rgba(68, 173, 77, 0.4)"
-  },
   "strings": {
     "wireguard": "WireGuard",
     "openvpn": "OpenVPN",
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
index 228dd179dc..155fb0465d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { measurements, normalText, tinyText } from './common-styles';
 
 export const AccountContainer = styled.div({
@@ -28,12 +28,12 @@ const AccountRowText = styled.span({
 export const AccountRowLabel = styled(AccountRowText)(tinyText, {
   lineHeight: '20px',
   marginBottom: '5px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 export const AccountRowValue = styled(AccountRowText)(normalText, {
   fontWeight: 600,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const DeviceRowValue = styled(AccountRowValue)({
@@ -41,7 +41,7 @@ export const DeviceRowValue = styled(AccountRowValue)({
 });
 
 export const AccountOutOfTime = styled(AccountRowValue)({
-  color: colors.red,
+  color: Colors.red,
 });
 
 export const StyledDeviceNameRow = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
index e11eec5fad..cdfb906ab4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -2,13 +2,12 @@ import { useCallback, useMemo } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { AccessMethodSetting } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { Container, Flex } from '../lib/components';
-import { Spacings } from '../lib/foundations';
+import { Colors, Spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -50,7 +49,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   width: '10px',
   height: '10px',
   borderRadius: '50%',
-  backgroundColor: props.$result ? colors.green : colors.red,
+  backgroundColor: props.$result ? Colors.green : Colors.red,
   marginRight: Spacings.spacing2,
 }));
 
@@ -300,8 +299,8 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
         <ContextMenuTrigger>
           <StyledMethodTriggerImage
             source="icon-more"
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             height={36}
             width={36}
           />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
index f82b997cc4..26ddf6a217 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/AppButton.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { Colors } from '../lib/foundations';
 import { useMounted } from '../lib/utility-hooks';
 import {
   StyledButtonContent,
@@ -32,7 +32,7 @@ interface IIconProps {
 }
 
 export function Icon(props: IIconProps) {
-  return <ImageView {...props} tintColor={colors.white} />;
+  return <ImageView {...props} tintColor={Colors.white} />;
 }
 
 export interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -157,37 +157,37 @@ export function BlockingButton(props: IBlockingProps) {
 }
 
 export const RedButton = styled(BaseButton)({
-  backgroundColor: colors.red,
+  backgroundColor: Colors.red,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red95,
+    backgroundColor: Colors.red95,
   },
 });
 
 export const GreenButton = styled(BaseButton)({
-  backgroundColor: colors.green,
+  backgroundColor: Colors.green,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.green90,
+    backgroundColor: Colors.green90,
   },
 });
 
 export const BlueButton = styled(BaseButton)({
-  backgroundColor: colors.blue80,
+  backgroundColor: Colors.blue80,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.blue60,
+    backgroundColor: Colors.blue60,
   },
 });
 
 export const TransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.white20,
+  backgroundColor: Colors.white20,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
 });
 
 export const RedTransparentButton = styled(BaseButton)(transparentButton, {
-  backgroundColor: colors.red60,
+  backgroundColor: Colors.red60,
   '&&:not(:disabled):hover': {
-    backgroundColor: colors.red80,
+    backgroundColor: Colors.red80,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
index 6e16fdf6db..c0ec34a592 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { Icon } from './cell/Label';
 
 interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
@@ -25,8 +25,8 @@ export default function ChevronButton(props: IProps) {
   return (
     <Button {...otherProps}>
       <StyledIcon
-        tintColor={colors.white80}
-        tintHoverColor={colors.white}
+        tintColor={Colors.white80}
+        tintHoverColor={Colors.white}
         source={up ? 'icon-chevron-up' : 'icon-chevron-down'}
         height={24}
         width={24}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
index 7f1970ebfc..bccf15d3d0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useScheduler } from '../../shared/scheduler';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 import ImageView from './ImageView';
 
@@ -80,8 +80,8 @@ export default function ClipboardLabel(props: IProps) {
           }>
           <ImageView
             source={obscured ? 'icon-unobscure' : 'icon-obscure'}
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
             width={24}
           />
         </StyledButton>
@@ -95,8 +95,8 @@ export default function ClipboardLabel(props: IProps) {
         }>
         <ImageView
           source={justCopied ? 'icon-tick' : 'icon-copy'}
-          tintColor={justCopied ? colors.green : colors.white}
-          tintHoverColor={justCopied ? colors.green : colors.white80}
+          tintColor={justCopied ? Colors.green : Colors.white}
+          tintHoverColor={justCopied ? Colors.green : Colors.white80}
           width={justCopied ? 22 : 24}
         />
       </StyledCopyButton>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
index 2e01c9375f..5b6e43c4f3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { useBoolean, useStyledRef } from '../lib/utility-hooks';
 import { smallText } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
@@ -117,7 +117,7 @@ const StyledMenu = styled.div<StyledMenuProps>((props) => {
     right: props.$align === 'left' ? 'auto' : iconMargin,
     padding: '7px 4px',
     background: 'rgb(36, 53, 78)',
-    border: `1px solid ${colors.darkBlue}`,
+    border: `1px solid ${Colors.darkBlue}`,
     borderRadius: '8px',
     zIndex: 1,
   };
@@ -130,17 +130,17 @@ const StyledMenuItem = styled.button(smallText, (props) => ({
   background: 'transparent',
   border: 'none',
   textAlign: 'left',
-  color: props.disabled ? colors.white50 : colors.white,
+  color: props.disabled ? Colors.white50 : Colors.white,
 
   '&&:hover': {
-    background: props.disabled ? 'transparent' : colors.blue,
+    background: props.disabled ? 'transparent' : Colors.blue,
   },
 }));
 
 const StyledSeparator = styled.hr({
   height: '1px',
   border: 'none',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   margin: '4px 9px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
index 5c105fa7ea..051f6b938f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettings.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { IpAddress } from '../lib/ip';
 import { useBoolean, useMounted, useStyledRef } from '../lib/utility-hooks';
@@ -255,8 +255,8 @@ export default function CustomDnsSettings() {
             source="icon-add"
             width={18}
             height={18}
-            tintColor={colors.white40}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white40}
+            tintHoverColor={Colors.white60}
             tabIndex={-1}
           />
         </StyledAddCustomDnsButton>
@@ -369,7 +369,7 @@ function CellListItem(props: ICellListItemProps) {
                 source="icon-close"
                 width={18}
                 height={18}
-                tintColor={editing ? colors.black : colors.white40}
+                tintColor={editing ? Colors.black : Colors.white40}
               />
             </StyledRemoveButton>
           </AriaDescribed>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
index b8fdc7fd38..18b98ff6e3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import * as Cell from './cell';
 import ImageView from './ImageView';
 
@@ -9,7 +9,7 @@ export const StyledCustomDnsFooter = styled(Cell.CellFooter)({
 });
 
 export const StyledAddCustomDnsButton = styled(Cell.CellButton)({
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
 });
 
 export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: number }>((props) => ({
@@ -25,7 +25,7 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: numbe
 
 export const StyledContainer = styled(Cell.Container)({
   display: 'flex',
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
 });
 
 export const StyledButton = styled.button({
@@ -57,6 +57,6 @@ export const StyledRemoveButton = styled.button({
 
 export const StyledRemoveIcon = styled(ImageView)({
   [StyledRemoveButton + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
index cf1c413f6b..a26510db90 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { useSelector } from '../redux/store';
 import { AppMainHeader } from './app-main-header';
 import * as AppButton from './AppButton';
@@ -18,7 +18,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -38,12 +38,12 @@ export const StyledStatusIcon = styled.div({
 export const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   marginBottom: '8px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledMessage = styled.span(smallText, {
   marginBottom: measurements.rowVerticalMargin,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export function DeviceRevokedView() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
index 647dc78b4a..849838024d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { AppMainHeader } from './app-main-header';
 import { measurements } from './common-styles';
 import ImageView from './ImageView';
@@ -36,7 +36,7 @@ const Subtitle = styled.span({
   fontSize: '14px',
   lineHeight: '20px',
   margin: `0 ${measurements.horizontalViewMargin}`,
-  color: colors.white40,
+  color: Colors.white40,
   textAlign: 'center',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
index df154e628b..e1d6002d29 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -3,12 +3,13 @@ import { useParams } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, links } from '../../config.json';
+import { links } from '../../config.json';
 import { formatDate } from '../../shared/account-expiry';
 import { formatRelativeDate } from '../../shared/date-helper';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -35,7 +36,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -53,7 +54,7 @@ export const StyledTitle = styled.span(hugeText, {
 
 export const StyledLabel = styled.span(tinyText, {
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '9px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
index 5e62751570..1cb2fcde1e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountErrorViewStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import AccountNumberLabel from './AccountNumberLabel';
 import * as Cell from './cell';
 import { hugeText, measurements, tinyText } from './common-styles';
@@ -12,7 +12,7 @@ export const StyledAccountNumberLabel = styled(AccountNumberLabel)({
   lineHeight: '20px',
   fontSize: '20px',
   fontWeight: 700,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledModalCellContainer = styled(Cell.Container)({
@@ -28,7 +28,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -45,11 +45,11 @@ export const StyledTitle = styled.span(hugeText, {
 
 export const StyledMessage = styled.span(tinyText, {
   marginBottom: '20px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledAccountNumberMessage = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledStatusIcon = styled.div({
@@ -70,5 +70,5 @@ export const StyledDeviceLabel = styled.span(tinyText, {
   alignItems: 'middle',
   lineHeight: '20px',
   marginBottom: '18px',
-  color: colors.white,
+  color: Colors.white,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
index 790215cab4..93a76d7774 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { Ownership } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
@@ -10,6 +9,7 @@ import {
   filterLocations,
   filterLocationsByEndPointType,
 } from '../lib/filter-locations';
+import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useNormalRelaySettings, useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { useBoolean } from '../lib/utility-hooks';
@@ -29,7 +29,7 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   flex: 1,
 });
 
@@ -240,7 +240,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) {
           <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label>
         </AriaLabel>
         <ImageView
-          tintColor={colors.white80}
+          tintColor={Colors.white80}
           source={expanded ? 'icon-chevron-up' : 'icon-chevron-down'}
           height={24}
         />
@@ -290,7 +290,7 @@ function FilterByProvider(props: IFilterByProviderProps) {
       <Cell.CellButton onClick={toggleExpanded}>
         <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label>
         <ImageView
-          tintColor={colors.white80}
+          tintColor={Colors.white80}
           source={expanded ? 'icon-chevron-up' : 'icon-chevron-down'}
           height={24}
         />
@@ -327,20 +327,20 @@ const StyledCheckbox = styled.div({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: colors.white,
+  backgroundColor: Colors.white,
   borderRadius: '4px',
 });
 
 const StyledRow = styled(Cell.Row)({
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
   '&&:hover': {
-    backgroundColor: colors.blue80,
+    backgroundColor: Colors.blue80,
   },
 });
 
 const StyledRowTitle = styled.label<IStyledRowTitleProps>(normalText, (props) => ({
   fontWeight: props.$bold ? 600 : 400,
-  color: colors.white,
+  color: Colors.white,
   marginLeft: '22px',
 }));
 
@@ -358,7 +358,7 @@ function CheckboxRow(props: ICheckboxRowProps) {
   return (
     <StyledRow onClick={onToggle}>
       <StyledCheckbox role="checkbox" aria-label={props.label} aria-checked={props.checked}>
-        {props.checked && <ImageView source="icon-tick" width={18} tintColor={colors.green} />}
+        {props.checked && <ImageView source="icon-tick" width={18} tintColor={Colors.green} />}
       </StyledCheckbox>
       <StyledRowTitle aria-hidden $bold={props.$bold}>
         {props.label}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
index 8243e5b3be..90dd080529 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx
@@ -1,6 +1,6 @@
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { Button, IconButton, IconButtonProps } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 import ImageView from './ImageView';
 import { ModalAlert, ModalAlertType } from './Modal';
@@ -17,8 +17,8 @@ export function InfoIcon(props: IInfoIconProps) {
     <ImageView
       source="icon-info"
       width={props.size ?? 18}
-      tintColor={props.tintColor ?? colors.white}
-      tintHoverColor={props.tintHoverColor ?? colors.white80}
+      tintColor={props.tintColor ?? Colors.white}
+      tintHoverColor={props.tintHoverColor ?? Colors.white80}
       className={props.className}
     />
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
index 5d0133f2cf..59675c025e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean } from '../lib/utility-hooks';
@@ -26,7 +26,7 @@ export default function Launch() {
 }
 
 const StyledFooter = styled(Footer)({
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   transition: 'opacity 250ms ease-in-out',
 });
 
@@ -34,14 +34,14 @@ const StyledFooterInner = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   borderRadius: '8px',
   margin: 0,
   padding: '16px',
 });
 
 const StyledFooterMessage = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
   margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 092e4f1f01..ebfe29618d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { Spacings } from '../lib/foundations';
 import { buttonReset } from '../lib/styles';
 import * as Cell from './cell';
@@ -46,13 +46,13 @@ const baseButtonStyles = {
   ...buttonReset,
   width: '100%',
   height: '100%',
-  backgroundColor: colors.white60,
+  backgroundColor: Colors.white60,
   cursor: 'default',
   '&&:hover': {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
   '&:focus-visible': {
-    outline: `2px solid ${colors.white}`,
+    outline: `2px solid ${Colors.white}`,
     outlineOffset: '-2px',
   },
 };
@@ -74,14 +74,14 @@ export const StyledAccountDropdownTrailingButton = styled.button({
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&:focus-visible': {
-    outline: `2px solid ${colors.white}`,
+    outline: `2px solid ${Colors.white}`,
     outlineOffset: '2px',
   },
 });
 
 export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)(largeText, {
   margin: '0',
-  color: colors.blue80,
+  color: Colors.blue80,
   borderWidth: 0,
   textAlign: 'left',
   marginLeft: 0,
@@ -99,7 +99,7 @@ export const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({
   width: '100%',
   bottom: 0,
   transform: `translateY(${props.$show ? 0 : 100}%)`,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   transition: 'transform 250ms ease-in-out',
 }));
 
@@ -132,14 +132,14 @@ export const StyledAccountInputGroup = styled.form<IStyledAccountInputGroupProps
   borderStyle: 'solid',
   borderRadius: '8px',
   overflow: 'hidden',
-  borderColor: props.$error ? colors.red40 : props.$active ? colors.darkBlue : 'transparent',
+  borderColor: props.$error ? Colors.red40 : props.$active ? Colors.darkBlue : 'transparent',
   opacity: props.$editable ? 1 : 0.6,
 }));
 
 export const StyledAccountInputBackdrop = styled.div({
   display: 'flex',
-  backgroundColor: colors.white,
-  borderColor: colors.darkBlue,
+  backgroundColor: Colors.white,
+  borderColor: Colors.darkBlue,
 });
 
 export const StyledInputButton = styled.button<{ $visible: boolean }>((props) => ({
@@ -151,12 +151,12 @@ export const StyledInputButton = styled.button<{ $visible: boolean }>((props) =>
   justifyContent: 'center',
   opacity: props.$visible ? 1 : 0,
   transition: 'opacity 250ms ease-in-out',
-  backgroundColor: colors.green,
+  backgroundColor: Colors.green,
 }));
 
 export const StyledDropdownSpacer = styled.div({
   height: 1,
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const StyledTitle = styled.h1(hugeText, {
@@ -170,11 +170,11 @@ export const StyledInput = styled(FormattableTextInput)(largeText, {
   minWidth: 0,
   borderWidth: 0,
   padding: '12px 12px 12px',
-  color: colors.blue,
+  color: Colors.blue,
   backgroundColor: 'transparent',
   flex: 1,
   '&&::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
@@ -183,19 +183,19 @@ export const StyledBlockMessageContainer = styled.div({
   flexDirection: 'column',
   flex: 1,
   alignSelf: 'start',
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
   borderRadius: '8px',
   margin: '5px 16px 10px',
   padding: '16px',
 });
 
 export const StyledBlockTitle = styled.div(smallText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '5px',
   fontWeight: 700,
 });
 
 export const StyledBlockMessage = styled.div(tinyText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '10px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
index e339566c24..a78105379c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
@@ -2,8 +2,8 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import log from '../../shared/logging';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { useWillExit } from '../lib/will-exit';
 import * as AppButton from './AppButton';
@@ -128,7 +128,7 @@ const StyledModalAlert = styled.div<{ $visible: boolean; $closing: boolean }>((p
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: colors.darkBlue,
+    backgroundColor: Colors.darkBlue,
     borderRadius: '11px',
     padding: '16px 0 16px 16px',
     maxHeight: '80vh',
@@ -320,15 +320,15 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
     switch (type) {
       case ModalAlertType.info:
         source = 'icon-info';
-        color = colors.white;
+        color = Colors.white;
         break;
       case ModalAlertType.caution:
         source = 'icon-alert';
-        color = colors.white;
+        color = Colors.white;
         break;
       case ModalAlertType.warning:
         source = 'icon-alert';
-        color = colors.red;
+        color = Colors.red;
         break;
 
       case ModalAlertType.loading:
@@ -355,13 +355,13 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
 }
 
 const ModalTitle = styled.h1(normalText, {
-  color: colors.white,
+  color: Colors.white,
   fontWeight: 600,
   margin: '18px 0 0 0',
 });
 
 export const ModalMessage = styled.span(tinyText, {
-  color: colors.white80,
+  color: Colors.white80,
   marginTop: '16px',
 
   [`${ModalTitle} ~ &&`]: {
@@ -372,5 +372,5 @@ export const ModalMessage = styled.span(tinyText, {
 export const ModalMessageList = styled.ul({
   listStyle: 'disc outside',
   paddingLeft: '20px',
-  color: colors.white80,
+  color: Colors.white80,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index bdc81af686..d2496447ed 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
 import { IconButton } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent, useLastDefinedValue, useStyledRef } from '../lib/utility-hooks';
 import * as AppButton from './AppButton';
 import { tinyText } from './common-styles';
@@ -13,11 +13,11 @@ import ImageView from './ImageView';
 const NOTIFICATION_AREA_ID = 'notification-area';
 
 export const NotificationTitle = styled.span(tinyText, {
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const NotificationSubtitleText = styled.span(tinyText, {
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 interface INotificationSubtitleProps {
@@ -39,7 +39,7 @@ export const NotificationActionButton = styled(AppButton.SimpleButton)({
 
 export const NotificationActionButtonInner = styled(ImageView)({
   [NotificationActionButton + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -56,7 +56,7 @@ export function NotificationOpenLinkAction(props: NotificationActionProps) {
         <NotificationActionButtonInner
           height={12}
           width={12}
-          tintColor={colors.white60}
+          tintColor={Colors.white60}
           source="icon-extLink"
         />
       </NotificationActionButton>
@@ -73,7 +73,7 @@ export function NotificationTroubleshootDialogAction(props: NotificationActionPr
       <NotificationActionButtonInner
         height={12}
         width={12}
-        tintColor={colors.white60}
+        tintColor={Colors.white60}
         source="icon-info"
       />
     </NotificationActionButton>
@@ -112,9 +112,9 @@ interface INotificationIndicatorProps {
 }
 
 const notificationIndicatorTypeColorMap = {
-  success: colors.green,
-  warning: colors.yellow,
-  error: colors.red,
+  success: Colors.green,
+  warning: Colors.yellow,
+  error: Colors.red,
 };
 
 export const NotificationIndicator = styled.div<INotificationIndicatorProps>((props) => ({
@@ -136,7 +136,7 @@ const Collapsible = styled.div<ICollapsibleProps>((props) => {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: props.$alignBottom ? 'flex-end' : 'flex-start',
-    backgroundColor: colors.darkerBlue,
+    backgroundColor: Colors.darkerBlue,
     overflow: 'hidden',
     // Using auto as the initial value prevents transition if a notification is visible on mount.
     height: props.$height === undefined ? 'auto' : `${props.$height}px`,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
index d03c90a0e2..422bec3d50 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { NonEmptyArray } from '../../shared/utils';
+import { Colors } from '../lib/foundations';
 import { useStyledRef } from '../lib/utility-hooks';
 import { Icon } from './cell';
 
@@ -153,18 +153,18 @@ const StyledPageIndicator = styled.div<{ $current: boolean }>((props) => ({
   width: '8px',
   height: '8px',
   borderRadius: '50%',
-  backgroundColor: props.$current ? colors.white80 : colors.white40,
+  backgroundColor: props.$current ? Colors.white80 : Colors.white40,
 
   [`${StyledTransparentButton}:hover &&`]: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 }));
 
 const StyledArrow = styled(Icon)((props) => ({
-  backgroundColor: props.disabled ? colors.white20 : props.tintColor,
+  backgroundColor: props.disabled ? Colors.white20 : props.tintColor,
 
   [`${StyledTransparentButton}:hover &&`]: {
-    backgroundColor: props.disabled ? colors.white20 : props.tintHoverColor,
+    backgroundColor: props.disabled ? Colors.white20 : props.tintHoverColor,
   },
 }));
 
@@ -203,8 +203,8 @@ function Controls(props: ControlsProps) {
             height={12}
             width={7}
             source="icon-chevron"
-            tintColor={colors.white}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white60}
           />
         </StyledTransparentButton>
         <StyledTransparentButton onClick={props.next}>
@@ -213,8 +213,8 @@ function Controls(props: ControlsProps) {
             height={12}
             width={7}
             source="icon-chevron"
-            tintColor={colors.white}
-            tintHoverColor={colors.white60}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white60}
           />
         </StyledTransparentButton>
       </StyledArrows>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
index 26a70fe242..da055cb5da 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { hugeText, measurements, smallText } from './common-styles';
 
 export const StyledContentContainer = styled.div({
@@ -37,8 +37,8 @@ const input = {
   flex: 1,
   borderRadius: '4px',
   padding: '14px',
-  color: colors.blue,
-  backgroundColor: colors.white,
+  color: Colors.blue,
+  backgroundColor: Colors.white,
   border: 'none',
 };
 
@@ -60,16 +60,16 @@ export const StyledStatusIcon = styled.div({
 
 export const StyledSentMessage = styled.span(smallText, {
   overflow: 'visible',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 export const StyledThanks = styled.span({
-  color: colors.green,
+  color: Colors.green,
 });
 
 export const StyledEmail = styled.span({
   fontWeight: 900,
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledSendStatus = styled.span(hugeText, {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
index 37f51ee5e4..93d39a57df 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { normalText, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 import ImageView from './ImageView';
 
 export const StyledLabel = styled.span(smallText, {
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '9px',
 });
 
@@ -16,19 +16,19 @@ export const StyledInput = styled(FormattableTextInput)(normalText, {
   padding: '14px',
   fontWeight: 600,
   lineHeight: '26px',
-  color: colors.blue,
-  backgroundColor: colors.white,
+  color: Colors.blue,
+  backgroundColor: Colors.white,
   border: 'none',
   borderRadius: '4px',
   '&&::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
 export const StyledResponse = styled.span(tinyText, {
   lineHeight: '20px',
   marginTop: '8px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledProgressWrapper = styled.div({
@@ -42,7 +42,7 @@ export const StyledProgressResponse = styled(StyledResponse)({
 });
 
 export const StyledErrorResponse = styled(StyledResponse)({
-  color: colors.red,
+  color: Colors.red,
 });
 
 export const StyledEmptyResponse = styled.span({
@@ -65,6 +65,6 @@ export const StyledStatusIcon = styled.div({
 export const StyledTitle = styled.span(smallText, {
   lineHeight: '22px',
   fontWeight: 400,
-  color: colors.white,
+  color: Colors.white,
   marginBottom: '5px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
index 1060121b9e..97fb6471b1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import * as Cell from './cell';
 
 const indicatorStyles: Styles<
@@ -14,7 +14,7 @@ const indicatorStyles: Styles<
 };
 
 const StyledRelayStatus = styled.div<{ $active: boolean }>(indicatorStyles, (props) => ({
-  backgroundColor: props.$active ? colors.green90 : colors.red95,
+  backgroundColor: props.$active ? Colors.green90 : Colors.red95,
 }));
 
 const TickIcon = styled(Cell.Icon)({
@@ -29,12 +29,12 @@ interface IProps {
 
 export default function RelayStatusIndicator(props: IProps) {
   return props.selected ? (
-    <TickIcon tintColor={colors.white} source="icon-tick" width={18} />
+    <TickIcon tintColor={Colors.white} source="icon-tick" width={18} />
   ) : (
     <StyledRelayStatus $active={props.active} />
   );
 }
 
 export const SpecialLocationIndicator = styled.div(indicatorStyles, {
-  backgroundColor: colors.white90,
+  backgroundColor: Colors.white90,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
index fe1d1936aa..dc9810e299 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { Colors } from '../lib/foundations';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
 import { normalText } from './common-styles';
 import ImageView from './ImageView';
@@ -20,17 +20,17 @@ export const StyledSearchInput = styled.input.attrs({ type: 'text' })({
   padding: '9px 38px',
   margin: 0,
   lineHeight: '24px',
-  color: colors.white60,
-  backgroundColor: colors.white10,
+  color: Colors.white60,
+  backgroundColor: Colors.white10,
   '&&::placeholder': {
-    color: colors.white60,
+    color: Colors.white60,
   },
   '&&:focus': {
-    color: colors.blue,
-    backgroundColor: colors.white,
+    color: Colors.blue,
+    backgroundColor: Colors.white,
   },
   '&&:focus::placeholder': {
-    color: colors.blue40,
+    color: Colors.blue40,
   },
 });
 
@@ -50,19 +50,19 @@ export const StyledSearchIcon = styled(ImageView)({
   transform: 'translateY(-50%)',
   left: '9px',
   [`${StyledSearchInput}:focus ~ &&`]: {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 });
 
 export const StyledClearIcon = styled(ImageView)({
   '&&:hover': {
-    backgroundColor: colors.white60,
+    backgroundColor: Colors.white60,
   },
   [`${StyledSearchInput}:focus ~ ${StyledClearButton} &&`]: {
-    backgroundColor: colors.blue40,
+    backgroundColor: Colors.blue40,
   },
   [`${StyledSearchInput}:focus ~ ${StyledClearButton} &&:hover`]: {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 });
 
@@ -107,10 +107,10 @@ export default function SearchBar(props: ISearchBarProps) {
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}
       />
-      <StyledSearchIcon source="icon-search" width={24} tintColor={colors.white60} />
+      <StyledSearchIcon source="icon-search" width={24} tintColor={Colors.white60} />
       {props.searchTerm.length > 0 && (
         <StyledClearButton onClick={onClear}>
-          <StyledClearIcon source="icon-close" width={18} tintColor={colors.white40} />
+          <StyledClearIcon source="icon-close" width={18} tintColor={Colors.white40} />
         </StyledClearButton>
       )}
     </StyledSearchContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
index 534a01a58c..bc96fab5a7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { Colors } from '../lib/foundations';
 
 export enum SecuredDisplayStyle {
   secured,
@@ -15,14 +15,14 @@ export enum SecuredDisplayStyle {
 }
 
 const securedDisplayStyleColorMap = {
-  [SecuredDisplayStyle.securing]: colors.white,
-  [SecuredDisplayStyle.securingPq]: colors.white,
-  [SecuredDisplayStyle.unsecuring]: colors.white,
-  [SecuredDisplayStyle.secured]: colors.green,
-  [SecuredDisplayStyle.securedPq]: colors.green,
-  [SecuredDisplayStyle.blocked]: colors.white,
-  [SecuredDisplayStyle.unsecured]: colors.red,
-  [SecuredDisplayStyle.failedToSecure]: colors.red,
+  [SecuredDisplayStyle.securing]: Colors.white,
+  [SecuredDisplayStyle.securingPq]: Colors.white,
+  [SecuredDisplayStyle.unsecuring]: Colors.white,
+  [SecuredDisplayStyle.secured]: Colors.green,
+  [SecuredDisplayStyle.securedPq]: Colors.green,
+  [SecuredDisplayStyle.blocked]: Colors.white,
+  [SecuredDisplayStyle.unsecured]: Colors.red,
+  [SecuredDisplayStyle.failedToSecure]: Colors.red,
 };
 
 const StyledSecuredLabel = styled.span<{ $displayStyle: SecuredDisplayStyle }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index b2ebe680d8..03c0696705 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -2,12 +2,12 @@ import { useCallback, useEffect, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Flex } from '../lib/components';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
@@ -207,7 +207,7 @@ const StyledStatusTitle = styled.div(normalText, {
   alignItems: 'center',
   fontWeight: 'bold',
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 const StyledStatusImage = styled(ImageView)({
@@ -215,7 +215,7 @@ const StyledStatusImage = styled(ImageView)({
 });
 
 const StyledStatusSubTitle = styled.div(tinyText, {
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 interface ImportStatusProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
index ed2dd84695..baccb60f42 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
@@ -1,9 +1,9 @@
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
+import { Colors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs, useRefCallback, useStyledRef } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
@@ -16,7 +16,7 @@ const StyledTextArea = styled.textarea({
   width: '100%',
   flex: 1,
   padding: '13px',
-  color: colors.blue,
+  color: Colors.blue,
 });
 
 export default function SettingsTextImport() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
index b9ce4a6a59..0db3499f3e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SmallButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 import { smallText } from './common-styles';
 
 export enum SmallButtonColor {
@@ -14,18 +14,18 @@ function getButtonColors(color?: SmallButtonColor, disabled?: boolean) {
   switch (color) {
     case SmallButtonColor.red:
       return {
-        background: disabled ? colors.red60 : colors.red,
-        backgroundHover: disabled ? colors.red60 : colors.red80,
+        background: disabled ? Colors.red60 : Colors.red,
+        backgroundHover: disabled ? Colors.red60 : Colors.red80,
       };
     case SmallButtonColor.green:
       return {
-        background: disabled ? colors.green40 : colors.green,
-        backgroundHover: disabled ? colors.green40 : colors.green90,
+        background: disabled ? Colors.green40 : Colors.green,
+        backgroundHover: disabled ? Colors.green40 : Colors.green90,
       };
     default:
       return {
-        background: disabled ? colors.blue50 : colors.blue,
-        backgroundHover: disabled ? colors.blue50 : colors.blue60,
+        background: disabled ? Colors.blue50 : Colors.blue,
+        backgroundHover: disabled ? Colors.blue50 : Colors.blue60,
       };
   }
 }
@@ -46,7 +46,7 @@ const StyledSmallButton = styled.button<StyledSmallButtonProps>(smallText, (prop
     padding: '5px 16px',
     border: 'none',
     background: buttonColors.background,
-    color: props.disabled ? colors.white50 : colors.white,
+    color: props.disabled ? Colors.white50 : Colors.white,
     borderRadius: '4px',
     marginLeft: `${BUTTON_GROUP_GAP}px`,
     alignItems: 'center',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 98438116c9..af8b55e243 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { Spacings } from '../lib/foundations';
+import { Colors, Spacings } from '../lib/foundations';
 import * as AppButton from './AppButton';
 import * as Cell from './cell';
 import { measurements, normalText } from './common-styles';
@@ -27,7 +26,7 @@ export const StyledNavigationScrollbars = styled(NavigationScrollbars)({
 
 export const StyledCellButton = styled(Cell.CellButton)<{ $lookDisabled?: boolean }>((props) => ({
   '&&:not(:disabled):hover': {
-    backgroundColor: props.$lookDisabled ? colors.blue : undefined,
+    backgroundColor: props.$lookDisabled ? Colors.blue : undefined,
   },
 }));
 
@@ -73,7 +72,7 @@ export const StyledSpinnerRow = styled(Cell.CellButton)({
   justifyContent: 'center',
   padding: `${Spacings.spacing3} 0`,
   marginBottom: measurements.rowVerticalMargin,
-  background: colors.blue40,
+  background: Colors.blue40,
 });
 
 export const StyledBrowseButton = styled(AppButton.BlueButton)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
index 595bc422a2..ba28320c55 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 
 interface IProps {
   id?: string;
@@ -18,7 +18,7 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({
   position: 'relative',
   width: '34px',
   height: '22px',
-  borderColor: props.disabled ? colors.white20 : colors.white80,
+  borderColor: props.disabled ? Colors.white20 : Colors.white80,
   borderWidth: '2px',
   borderStyle: 'solid',
   borderRadius: '11px',
@@ -26,9 +26,9 @@ const SwitchContainer = styled.div<{ disabled: boolean }>((props) => ({
 }));
 
 const Knob = styled.div<{ $isOn: boolean; disabled: boolean }>((props) => {
-  let backgroundColor = props.$isOn ? colors.green : colors.red;
+  let backgroundColor = props.$isOn ? Colors.green : Colors.red;
   if (props.disabled) {
-    backgroundColor = props.$isOn ? colors.green40 : colors.red40;
+    backgroundColor = props.$isOn ? Colors.green40 : Colors.red40;
   }
 
   return {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
index 23a5d68b34..ed797ead33 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -2,12 +2,12 @@ import { useCallback } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
 import { IDevice } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
+import { Colors } from '../lib/foundations';
 import { transitions, useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { RoutePath } from '../lib/routes';
@@ -49,7 +49,7 @@ const StyledStatusIcon = styled.div({
 const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   margin: `0 ${measurements.horizontalViewMargin} 8px`,
-  color: colors.white,
+  color: Colors.white,
 });
 
 const StyledLabel = styled.span({
@@ -57,7 +57,7 @@ const StyledLabel = styled.span({
   fontSize: '12px',
   fontWeight: 600,
   lineHeight: '20px',
-  color: colors.white,
+  color: Colors.white,
   margin: `0 ${measurements.horizontalViewMargin} 18px`,
 });
 
@@ -81,7 +81,7 @@ const StyledDeviceName = styled.span(normalText, {
 const StyledDeviceDate = styled.span(tinyText, {
   fontSize: '10px',
   lineHeight: '10px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledRemoveDeviceButton = styled.button({
@@ -262,8 +262,8 @@ function Device(props: IDeviceProps) {
               source="icon-close"
               width={18}
               height={18}
-              tintColor={colors.white40}
-              tintHoverColor={colors.white60}
+              tintColor={Colors.white40}
+              tintHoverColor={Colors.white60}
             />
           </StyledRemoveDeviceButton>
         )}
@@ -271,7 +271,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={confirmationVisible}
         type={ModalAlertType.warning}
-        iconColor={colors.red}
+        iconColor={Colors.red}
         buttons={[
           <AppButton.RedButton key="remove" onClick={onRemove} disabled={deleting}>
             {
@@ -303,7 +303,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={error}
         type={ModalAlertType.warning}
-        iconColor={colors.red}
+        iconColor={Colors.red}
         buttons={[
           <AppButton.BlueButton key="close" onClick={resetError}>
             {messages.gettext('Close')}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
index 55059e223f..76a3fdeb16 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
@@ -1,17 +1,17 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
+import { Colors } from '../lib/foundations';
 
 export default styled.span({
   display: 'inline-block',
   fontFamily: 'Open Sans',
-  color: colors.blue,
+  color: Colors.blue,
   fontSize: '12px',
   fontWeight: 800,
   lineHeight: '20px',
   padding: '1px 8px',
   marginLeft: '8px',
-  background: colors.yellow,
+  background: Colors.yellow,
   borderRadius: '5px',
   textAlign: 'center',
   verticalAlign: 'middle',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
index de2649e3c6..f4c5428157 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { useBoolean, useCombinedRefs, useEffectEvent, useStyledRef } from '../../lib/utility-hooks';
 import { normalText } from '../common-styles';
 import ImageView from '../ImageView';
@@ -30,9 +30,9 @@ const StyledInput = styled.input<{ $focused: boolean; $valid?: boolean }>((props
   border: 'none',
   width: '100%',
   height: '100%',
-  color: props.$valid === false ? colors.red : props.$focused ? colors.blue : colors.white,
+  color: props.$valid === false ? Colors.red : props.$focused ? Colors.blue : Colors.white,
   '&&::placeholder': {
-    color: props.$focused ? colors.blue60 : colors.white60,
+    color: props.$focused ? Colors.blue60 : Colors.white60,
   },
 }));
 
@@ -178,7 +178,7 @@ export const Input = React.memo(React.forwardRef(InputWithRef));
 const InputFrame = styled.div<{ $focused: boolean }>((props) => ({
   display: 'flex',
   flexGrow: 0,
-  backgroundColor: props.$focused ? colors.white : 'rgba(255,255,255,0.1)',
+  backgroundColor: props.$focused ? Colors.white : 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
   padding: '6px 8px',
 }));
@@ -287,7 +287,7 @@ const StyledTextArea = styled.textarea<{ $invalid?: boolean }>(normalText, (prop
   fontWeight: 400,
   resize: 'none',
   padding: '10px 25px 10px 0',
-  color: props.$invalid ? colors.red : 'auto',
+  color: props.$invalid ? Colors.red : 'auto',
 }));
 
 const StyledInputFiller = styled.div({
@@ -399,8 +399,8 @@ export function RowInput(props: IRowInputProps) {
           <ImageView
             source="icon-check"
             height={18}
-            tintColor={value === '' ? colors.blue60 : colors.blue}
-            tintHoverColor={value === '' ? colors.blue60 : colors.blue80}
+            tintColor={value === '' ? Colors.blue60 : Colors.blue}
+            tintHoverColor={value === '' ? Colors.blue60 : Colors.blue80}
           />
         </StyledSubmitButton>
       </StyledCellInputRowContainer>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
index 16807bee46..954e277844 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Row.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { measurements } from '../common-styles';
 import { Group } from './Group';
 
@@ -14,7 +14,7 @@ export const Row = styled.div.withConfig({
 })<RowProps>((props) => ({
   display: 'flex',
   alignItems: 'center',
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   minHeight: measurements.rowMinHeight,
   paddingLeft: measurements.horizontalViewMargin,
   paddingRight: measurements.horizontalViewMargin,
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 0917cce129..7de9a01305 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -1,9 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
-import { Spacings } from '../../lib/foundations';
+import { Colors, Spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useStyledRef } from '../../lib/utility-hooks';
@@ -198,21 +197,21 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
           $visible={props.isSelected}
           source="icon-tick"
           width={18}
-          tintColor={colors.white}
+          tintColor={Colors.white}
         />
         <SelectorCellLabel subLabel={props.subLabel}>{props.children}</SelectorCellLabel>
       </Cell.CellButton>
       {props.details && (
         <StyledSideButton
-          $backgroundColor={colors.blue40}
-          $backgroundColorHover={colors.blue80}
+          $backgroundColor={Colors.blue40}
+          $backgroundColorHover={Colors.blue80}
           aria-label={props.details.ariaLabel}
           onClick={navigate}>
           <StyledSideButtonImage
             source="icon-chevron"
             width={7}
-            tintColor={colors.white}
-            tintHoverColor={colors.white80}
+            tintColor={Colors.white}
+            tintHoverColor={Colors.white80}
           />
         </StyledSideButton>
       )}
@@ -243,9 +242,9 @@ interface StyledCustomContainerProps {
 }
 
 const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({
-  backgroundColor: props.selected ? colors.green : colors.blue40,
+  backgroundColor: props.selected ? Colors.green : Colors.blue40,
   '&&:hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue,
+    backgroundColor: props.selected ? Colors.green : Colors.blue,
   },
 }));
 
@@ -367,7 +366,7 @@ export function SelectorWithCustomItem<T, U>(props: SelectorWithCustomItemProps<
             $visible={customIsSelected}
             source="icon-tick"
             width={18}
-            tintColor={colors.white}
+            tintColor={Colors.white}
           />
           <Cell.ValueLabel>{messages.gettext('Custom')}</Cell.ValueLabel>
           <AriaInput>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
index ccca7cdc0b..efd44271ca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsGroup.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { measurements, tinyText } from '../common-styles';
 import InfoButton from '../InfoButton';
 import { SettingsRowErrorMessage } from './SettingsRow';
@@ -15,7 +15,7 @@ const StyledContainer = styled.div({
 const StyledTitle = styled.h2(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  color: colors.white80,
+  color: Colors.white80,
   margin: `0 ${measurements.horizontalViewMargin} 8px`,
   lineHeight: '17px',
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
index 6f4f1a0d90..d0c0a3c087 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRadioGroup.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useId, useState } from 'react';
 import { styled } from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { AriaInput, AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
 import { SettingsSelectItem } from './SettingsSelect';
@@ -60,7 +60,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     height: '12px',
     borderRadius: '50%',
     backgroundColor: 'transparent',
-    border: `1px ${colors.white} solid`,
+    border: `1px ${Colors.white} solid`,
     top: 0,
     left: 0,
   },
@@ -71,7 +71,7 @@ const StyledRadioButton = styled.input.attrs({ type: 'radio' })({
     width: '8px',
     height: '8px',
     borderRadius: '50%',
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
     top: '3px',
     left: '3px',
   },
@@ -85,7 +85,7 @@ const StyledRadioButtonContainer = styled.div({
 });
 
 const StyledRadioButtonLabel = styled.label(smallNormalText, {
-  color: colors.white,
+  color: Colors.white,
   marginLeft: '8px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
index 04f809a144..7b62dd251a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { measurements, smallNormalText, tinyText } from '../common-styles';
 import ImageView from '../ImageView';
@@ -14,7 +14,7 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   margin: `0 ${measurements.horizontalViewMargin} ${measurements.rowVerticalMargin}`,
   padding: '0 8px',
   minHeight: '36px',
-  backgroundColor: colors.blue60,
+  backgroundColor: Colors.blue60,
   borderRadius: '4px',
 
   [`${StyledSettingsGroup} &&`]: {
@@ -36,11 +36,11 @@ const StyledSettingsRow = styled.label<{ $invalid: boolean }>((props) => ({
   outlineWidth: '1px',
   borderStyle: 'solid',
   outlineStyle: 'solid',
-  borderColor: props.$invalid ? colors.red : 'transparent',
-  outlineColor: props.$invalid ? colors.red : 'transparent',
+  borderColor: props.$invalid ? Colors.red : 'transparent',
+  outlineColor: props.$invalid ? Colors.red : 'transparent',
   '&&:focus-within': {
-    borderColor: props.$invalid ? colors.red : colors.white,
-    outlineColor: props.$invalid ? colors.red : colors.white,
+    borderColor: props.$invalid ? Colors.red : Colors.white,
+    outlineColor: props.$invalid ? Colors.red : Colors.white,
   },
 }));
 
@@ -61,7 +61,7 @@ const StyledSettingsRowErrorMessage = styled.div(tinyText, {
   alignItems: 'center',
   marginLeft: measurements.horizontalViewMargin,
   marginTop: '5px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledErrorMessageAlertIcon = styled(ImageView)({
@@ -132,7 +132,7 @@ export function SettingsRow(props: React.PropsWithChildren<IndentedRowProps>) {
 export function SettingsRowErrorMessage(props: React.PropsWithChildren) {
   return (
     <StyledSettingsRowErrorMessage>
-      <StyledErrorMessageAlertIcon source="icon-alert" tintColor={colors.red} width={12} />
+      <StyledErrorMessageAlertIcon source="icon-alert" tintColor={Colors.red} width={12} />
       {props.children}
     </StyledSettingsRowErrorMessage>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
index 7b5e1d7ab4..aa7b64bbec 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { useScheduler } from '../../../shared/scheduler';
+import { Colors } from '../../lib/foundations';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import { AriaInput } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
@@ -20,13 +20,13 @@ const StyledSelect = styled.div.attrs({ tabIndex: 0 })(smallNormalText, {
   position: 'relative',
   background: 'transparent',
   border: 'none',
-  color: colors.white,
+  color: Colors.white,
   borderRadius: '4px',
   height: '26px',
 
   '&&:focus': {
-    outline: `1px ${colors.darkBlue} solid`,
-    backgroundColor: colors.blue,
+    outline: `1px ${Colors.darkBlue} solid`,
+    backgroundColor: Colors.blue,
   },
 });
 
@@ -37,8 +37,8 @@ const StyledItems = styled.div<{ $direction: 'down' | 'up' }>((props) => ({
   top: props.$direction === 'down' ? 'calc(100% + 4px)' : 'auto',
   bottom: props.$direction === 'up' ? 'calc(100% + 4px)' : 'auto',
   right: '-1px',
-  backgroundColor: colors.darkBlue,
-  border: `1px ${colors.darkerBlue} solid`,
+  backgroundColor: Colors.darkBlue,
+  border: `1px ${Colors.darkerBlue} solid`,
   borderRadius: '4px',
   padding: '4px 8px',
   maxHeight: '250px',
@@ -155,7 +155,7 @@ export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>)
             <StyledSelectedText>
               {props.items.find((item) => item.value === value)?.label ?? ''}
             </StyledSelectedText>
-            <StyledChevron tintColor={colors.white60} source="icon-chevron-down" width={22} />
+            <StyledChevron tintColor={Colors.white60} source="icon-chevron-down" width={22} />
           </StyledSelectedContainerInner>
           <StyledInvisibleItems>
             {props.items.map((item) => (
@@ -220,7 +220,7 @@ const StyledItem = styled.div<{ $selected: boolean }>((props) => ({
   paddingRight: '18px',
   whiteSpace: 'nowrap',
   '&&:hover': {
-    backgroundColor: colors.blue,
+    backgroundColor: Colors.blue,
   },
 }));
 
@@ -248,7 +248,7 @@ function Item<T extends string>(props: ItemProps<T>) {
       role="option"
       $selected={props.selected}
       aria-selected={props.selected}>
-      {props.selected && <TickIcon tintColor={colors.white} source="icon-tick" width={12} />}
+      {props.selected && <TickIcon tintColor={Colors.white} source="icon-tick" width={12} />}
       {props.item.label}
     </StyledItem>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
index 44381bc681..f7f0bdc484 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsTextInput.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { useEffectEvent } from '../../lib/utility-hooks';
 import { AriaInput } from '../AriaGroup';
 import { smallNormalText } from '../common-styles';
@@ -13,11 +13,11 @@ const StyledInput = styled.input(smallNormalText, {
   textAlign: 'right',
   background: 'transparent',
   border: 'none',
-  color: colors.white,
+  color: Colors.white,
   width: '100px',
 
   '&&::placeholder': {
-    color: colors.white50,
+    color: Colors.white50,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
index 7e271e4306..ece1107580 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SideButton.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { measurements } from '../common-styles';
 import { buttonColor, ButtonColors } from './styles';
 
@@ -22,7 +22,7 @@ export const SideButton = styled.button<ButtonColors & { $noSeparator?: boolean
       bottom: 0,
       height: '50%',
       width: '1px',
-      backgroundColor: colors.darkBlue,
+      backgroundColor: Colors.darkBlue,
     },
   }),
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
index c6bff32ef3..c2e34d265e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionDetails.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   EndpointObfuscationType,
   ITunnelEndpoint,
@@ -13,6 +12,7 @@ import {
   tunnelTypeToString,
 } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
 
@@ -38,7 +38,7 @@ const StyledConnectionDetailsHeading = styled.h2(tinyText, {
   margin: '0 0 4px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledConnectionDetailsContainer = styled.div({
@@ -58,13 +58,13 @@ const StyledIpLabelContainer = styled.div({
 
 const StyledConnectionDetailsLabel = styled.span(tinyText, {
   display: 'block',
-  color: colors.white,
+  color: Colors.white,
   fontWeight: '400',
   minHeight: '1em',
 });
 
 const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({
-  color: colors.white60,
+  color: Colors.white60,
   whiteSpace: 'nowrap',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
index a50fada589..f660662910 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionPanelChevron.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import ImageView from '../ImageView';
 
 const Container = styled.button({
@@ -13,7 +13,7 @@ const Container = styled.button({
 
 const Chevron = styled(ImageView)({
   [Container + ':hover &&']: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -33,7 +33,7 @@ export default function ConnectionPanelChevron(props: IProps) {
         source={props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
         width={24}
         height={24}
-        tintColor={colors.white}
+        tintColor={Colors.white}
       />
     </Container>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
index 1745fdaf11..ee2cfac3d2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionStatus.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 
@@ -29,14 +29,14 @@ export default function ConnectionStatus() {
 function getConnectionSTatusLabelColor(tunnelState: TunnelState, lockdownMode: boolean) {
   switch (tunnelState.state) {
     case 'connected':
-      return colors.green;
+      return Colors.green;
     case 'connecting':
     case 'disconnecting':
-      return colors.white;
+      return Colors.white;
     case 'disconnected':
-      return lockdownMode ? colors.white : colors.red;
+      return lockdownMode ? Colors.white : Colors.red;
     case 'error':
-      return tunnelState.details.blockingError ? colors.red : colors.white;
+      return tunnelState.details.blockingError ? Colors.red : Colors.white;
   }
 }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
index 5b7e60ade0..cac4f654fe 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/FeatureIndicators.tsx
@@ -2,9 +2,10 @@ import { useEffect, useRef } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors, strings } from '../../../config.json';
+import { strings } from '../../../config.json';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useStyledRef } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
@@ -28,7 +29,7 @@ const StyledTitle = styled.h2(tinyText, {
   margin: '0 0 2px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: colors.white60,
+  color: Colors.white60,
 });
 
 const StyledFeatureIndicators = styled.div({
@@ -50,8 +51,8 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '4px',
-  background: colors.darkerBlue,
-  color: colors.white,
+  background: Colors.darkerBlue,
+  color: Colors.white,
   fontWeight: 400,
   whiteSpace: 'nowrap',
   visibility: 'hidden',
@@ -59,17 +60,17 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   // Style clickable feature indicators with a border and on-hover effect
   boxSizing: 'border-box', // make border act as padding rather than margin
   border: 'solid 1px',
-  borderColor: props.onClick ? colors.blue : colors.darkerBlue,
+  borderColor: props.onClick ? Colors.blue : Colors.darkerBlue,
   transition: 'background ease-in-out 300ms',
   '&&:hover': {
-    background: props.onClick ? colors.blue60 : undefined,
+    background: props.onClick ? Colors.blue60 : undefined,
   },
 }));
 
 const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({
   position: 'absolute',
   top: `${LINE_HEIGHT + GAP}px`,
-  color: colors.white,
+  color: Colors.white,
   padding: '2px 8px 2px 16px',
   display: props.$display ? 'inline' : 'none',
 }));
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
index 097e3b291b..9771c124ed 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Hostname.tsx
@@ -1,8 +1,8 @@
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { IConnectionReduxState } from '../../redux/connection/reducers';
 import { useSelector } from '../../redux/store';
 import { smallText } from '../common-styles';
@@ -14,7 +14,7 @@ const StyledAccordion = styled(ConnectionPanelAccordion)({
 });
 
 const StyledHostname = styled.span(smallText, {
-  color: colors.white60,
+  color: Colors.white60,
   fontWeight: '400',
   flexShrink: 0,
   minHeight: '1em',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
index 2685394158..d168d09cc9 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/Location.tsx
@@ -1,14 +1,14 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { TunnelState } from '../../../shared/daemon-rpc-types';
+import { Colors } from '../../lib/foundations';
 import { useSelector } from '../../redux/store';
 import { largeText } from '../common-styles';
 import Marquee from '../Marquee';
 import { ConnectionPanelAccordion } from './styles';
 
 const StyledLocation = styled.span(largeText, {
-  color: colors.white,
+  color: Colors.white,
   flexShrink: 0,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
index 4cc42c0623..b9a64fbfa0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomListDialogs.tsx
@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import {
   compareRelayLocationGeographical,
   ICustomList,
@@ -12,6 +11,7 @@ import {
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Colors } from '../../lib/foundations';
 import { formatHtml } from '../../lib/html-formatter';
 import { useBoolean } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
@@ -105,7 +105,7 @@ const StyledSelectListItemLabel = styled(Cell.Label)(normalText, {
 
 const StyledSelectListItemIcon = styled(Cell.Icon)({
   [`${Cell.CellButton}:not(:disabled):hover &&`]: {
-    backgroundColor: colors.white80,
+    backgroundColor: Colors.white80,
   },
 });
 
@@ -137,7 +137,7 @@ function SelectList(props: SelectListProps) {
 
 const StyledInputErrorText = styled.span(tinyText, {
   marginTop: '6px',
-  color: colors.red,
+  color: Colors.red,
 });
 
 interface EditListProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
index 56e2635866..c6dcfafb78 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/CustomLists.tsx
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { CustomListError, CustomLists, RelayLocation } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
+import { Colors } from '../../lib/foundations';
 import { useBoolean, useStyledRef } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
@@ -26,7 +26,7 @@ const StyledInputContainer = styled.div({
   display: 'flex',
   alignItems: 'center',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   height: measurements.rowMinHeight,
 });
@@ -34,7 +34,7 @@ const StyledInputContainer = styled.div({
 const StyledHeaderLabel = styled(Cell.Label)({
   display: 'block',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   margin: 0,
   height: measurements.rowMinHeight,
@@ -53,17 +53,17 @@ const StyledSideButtonIcon = styled(Cell.Icon)({
   padding: '3px',
 
   [`${StyledCellButton}:disabled &&, ${StyledAddListCellButton}:disabled &&`]: {
-    backgroundColor: colors.white40,
+    backgroundColor: Colors.white40,
   },
 
   [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]:
     {
-      backgroundColor: colors.white,
+      backgroundColor: Colors.white,
     },
 });
 
 const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
-  color: props.$error ? colors.red : 'auto',
+  color: props.$error ? Colors.red : 'auto',
 }));
 
 interface CustomListsProps {
@@ -101,10 +101,10 @@ export default function CustomLists(props: CustomListsProps) {
           {messages.pgettext('select-location-view', 'Custom lists')}
         </StyledHeaderLabel>
         <StyledCellButton
-          $backgroundColor={colors.blue}
-          $backgroundColorHover={colors.blue80}
+          $backgroundColor={Colors.blue}
+          $backgroundColorHover={Colors.blue80}
           onClick={showAddList}>
-          <StyledSideButtonIcon source="icon-add" tintColor={colors.white60} width={18} />
+          <StyledSideButtonIcon source="icon-add" tintColor={Colors.white60} width={18} />
         </StyledCellButton>
       </StyledCellContainer>
 
@@ -196,11 +196,11 @@ function AddListForm(props: AddListFormProps) {
           </StyledInputContainer>
 
           <StyledAddListCellButton
-            $backgroundColor={colors.blue}
-            $backgroundColorHover={colors.blue80}
+            $backgroundColor={Colors.blue}
+            $backgroundColorHover={Colors.blue80}
             disabled={!nameValid}
             onClick={createList}>
-            <StyledSideButtonIcon source="icon-check" tintColor={colors.white60} width={18} />
+            <StyledSideButtonIcon source="icon-check" tintColor={Colors.white60} width={18} />
           </StyledAddListCellButton>
         </StyledCellContainer>
         <Cell.CellFooter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
index 58e9ba9606..dbdc6cceef 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/LocationRowStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { buttonColor, ButtonColors } from '../cell/styles';
 import { measurements, normalText } from '../common-styles';
@@ -85,11 +85,11 @@ export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonPro
 export const StyledHoverIcon = styled(ImageView).attrs({
   width: 18,
   height: 18,
-  tintColor: colors.white60,
-  tintHoverColor: colors.white,
+  tintColor: Colors.white60,
+  tintHoverColor: Colors.white,
 })({
   [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
   },
 });
 
@@ -99,19 +99,19 @@ export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButt
 );
 
 export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = colors.blue60;
+  let backgroundColor = Colors.blue60;
   if (selected) {
-    backgroundColor = colors.green;
+    backgroundColor = Colors.green;
   } else if (level === 1) {
-    backgroundColor = colors.blue40;
+    backgroundColor = Colors.blue40;
   } else if (level === 2) {
-    backgroundColor = colors.blue20;
+    backgroundColor = Colors.blue20;
   } else if (level === 3) {
-    backgroundColor = colors.blue10;
+    backgroundColor = Colors.blue10;
   }
 
   return {
     $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : colors.blue80,
+    $backgroundColorHover: selected || disabled ? backgroundColor : Colors.blue80,
   };
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
index 28312da19e..e069d33fbc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/ScopeBar.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import { smallText } from '../common-styles';
 
 const StyledScopeBar = styled.div({
   display: 'flex',
   flexDirection: 'row',
-  backgroundColor: colors.blue40,
+  backgroundColor: Colors.blue40,
   borderRadius: '13px',
   overflow: 'hidden',
 });
@@ -40,12 +40,12 @@ const StyledScopeBarItem = styled.button<{ selected?: boolean }>(smallText, (pro
   flex: 1,
   flexBasis: 0,
   padding: '4px 8px',
-  color: colors.white,
+  color: Colors.white,
   textAlign: 'center',
   border: 'none',
-  backgroundColor: props.selected ? colors.green : 'transparent',
+  backgroundColor: props.selected ? Colors.green : 'transparent',
   '&&:hover': {
-    backgroundColor: props.selected ? colors.green : colors.blue40,
+    backgroundColor: props.selected ? Colors.green : Colors.blue40,
   },
 }));
 
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 7779d6fb2b..e06d2f86b8 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
@@ -1,12 +1,13 @@
 import { useCallback, useState } from 'react';
 import { sprintf } from 'sprintf-js';
 
-import { colors, strings } from '../../../config.json';
+import { strings } from '../../../config.json';
 import { Ownership } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
 import { IconButton } from '../../lib/components';
 import { useRelaySettingsUpdater } from '../../lib/constraint-updater';
 import { daitaFilterActive, filterSpecialLocations } from '../../lib/filter-locations';
+import { Colors } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { formatHtml } from '../../lib/html-formatter';
 import { useNormalRelaySettings } from '../../lib/relay-settings-hooks';
@@ -171,8 +172,8 @@ export default function SelectLocation() {
                               height={16}
                               width={16}
                               source="icon-close"
-                              tintColor={colors.white60}
-                              tintHoverColor={colors.white80}
+                              tintColor={Colors.white60}
+                              tintHoverColor={Colors.white80}
                             />
                           </StyledClearFilterButton>
                         </StyledFilter>
@@ -194,8 +195,8 @@ export default function SelectLocation() {
                               height={16}
                               width={16}
                               source="icon-close"
-                              tintColor={colors.white60}
-                              tintHoverColor={colors.white80}
+                              tintColor={Colors.white60}
+                              tintHoverColor={Colors.white80}
                             />
                           </StyledClearFilterButton>
                         </StyledFilter>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
index ff83a6fc8d..5ab08368a3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocationStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
+import { Colors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
 import SearchBar from '../SearchBar';
@@ -24,7 +24,7 @@ export const StyledNavigationBarAttachment = styled.div({
 
 export const StyledFilterRow = styled.div({
   ...tinyText,
-  color: colors.white,
+  color: Colors.white,
   margin: '0 6px 16px',
 });
 
@@ -32,11 +32,11 @@ export const StyledFilter = styled.div({
   ...tinyText,
   display: 'inline-flex',
   alignItems: 'center',
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   borderRadius: '4px',
   padding: '3px 8px',
   marginLeft: '6px',
-  color: colors.white,
+  color: Colors.white,
 });
 
 export const StyledClearFilterButton = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
index b64da30573..fb8227b4fd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../../config.json';
 import { messages } from '../../../shared/gettext';
+import { Colors } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useSelector } from '../../redux/store';
@@ -154,8 +154,8 @@ export function CustomBridgeLocationRow(
         <StyledSpecialLocationSideButton
           source={icon}
           width={20}
-          tintColor={colors.white}
-          tintHoverColor={colors.white80}
+          tintColor={Colors.white}
+          tintHoverColor={Colors.white80}
         />
       </Cell.SideButton>
     </StyledLocationRowContainerWithMargin>
diff --git a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
index c022329e74..1181148286 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/custom-bridge.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../../src/config.json';
+import { colors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -97,16 +97,16 @@ test('App should add new custom bridge', async () => {
 
 test('App should select custom bridge', async () => {
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 
   const automaticButton = page.getByText('Automatic');
   await automaticButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).not.toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colors['--color-green']);
 
   await customBridgeButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 });
 
 test('App should edit custom bridge', async () => {
@@ -133,7 +133,7 @@ test('App should edit custom bridge', async () => {
 
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
   await expect(customBridgeButton).toBeEnabled();
-  await expect(customBridgeButton).toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
 });
 
 test('App should delete custom bridge', async () => {
@@ -155,5 +155,5 @@ test('App should delete custom bridge', async () => {
 
   const customBridgeButton = page.locator('button:has-text("Custom bridge")');
   await expect(customBridgeButton).toBeDisabled();
-  await expect(customBridgeButton).not.toHaveCSS('background-color', colors.green);
+  await expect(customBridgeButton).not.toHaveCSS('background-color', colors['--color-green']);
 });
diff --git a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
index b9518f8717..a4077ffe3d 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/installed/state-dependent/obfuscation.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { execSync } from 'child_process';
 import { Page } from 'playwright';
 
-import { colors } from '../../../../src/config.json';
+import { colors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -35,7 +35,7 @@ test('App should have automatic obfuscation', async () => {
   );
 
   const automatic = page.getByTestId('automatic-obfuscation');
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n');
   expect(cliObfuscation[0]).toEqual('Obfuscation mode: auto');
@@ -49,7 +49,7 @@ test('App should set obfuscation to shadowsocks with custom port', async () => {
   ).toBe(RoutePath.shadowsocks);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const customInput = page.locator('input[type="text"]');
   await customInput.click();
@@ -57,13 +57,13 @@ test('App should set obfuscation to shadowsocks with custom port', async () => {
   await customInput.blur();
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', colors.green);
+  await expect(customItem).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 
   const shadowsocksItem = page.locator('button', { hasText: 'Shadowsocks' });
   await shadowsocksItem.click();
-  await expect(shadowsocksItem).toHaveCSS('background-color', colors.green);
+  await expect(shadowsocksItem).toHaveCSS('background-color', colors['--color-green']);
   await expect(shadowsocksItem).toContainText(`Port: ${SHADOWSOCKS_PORT}`);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[2];
@@ -76,7 +76,7 @@ test('App should still have shadowsocks custom port', async () => {
   ).toBe(RoutePath.shadowsocks);
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', colors.green);
+  await expect(customItem).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 });
@@ -87,18 +87,18 @@ test('App should set obfuscation to UDP-over-TCP with port', async () => {
   ).toBe(RoutePath.udpOverTcp);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors.green);
+  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
 
   const portButton = page.locator('button', { hasText: UDPOVERTCP_PORT });
   await portButton.click();
 
-  await expect(portButton).toHaveCSS('background-color', colors.green);
+  await expect(portButton).toHaveCSS('background-color', colors['--color-green']);
 
   await util.waitForNavigation(() => page.click('button[aria-label="Back"]'));
 
   const udpOverTcpItem = page.locator('button', { hasText: 'UDP-over-TCP' });
   await udpOverTcpItem.click();
-  await expect(udpOverTcpItem).toHaveCSS('background-color', colors.green);
+  await expect(udpOverTcpItem).toHaveCSS('background-color', colors['--color-green']);
   await expect(udpOverTcpItem).toContainText(`Port: ${UDPOVERTCP_PORT}`);
 
   const cliObfuscation = execSync('mullvad obfuscation get').toString().split('\n')[1];
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
index e63e62f51f..cee7ebee38 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/expired-account-error-view.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
@@ -27,11 +27,11 @@ test('App should show Expired Account Error View', async () => {
   await expect(page.locator('text=Out of time')).toBeVisible();
   const buyMoreButton = page.locator('button:has-text("Buy more credit")');
   await expect(buyMoreButton).toBeVisible();
-  expect(await getBackgroundColor(buyMoreButton)).toBe(colors.green);
+  expect(await getBackgroundColor(buyMoreButton)).toBe(colors['--color-green']);
 
   const redeemVoucherButton = page.locator('button:has-text("Redeem voucher")');
   await expect(redeemVoucherButton).toBeVisible();
-  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colors.green);
+  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colors['--color-green']);
 });
 
 test('App should show out of time view after running out of time', async () => {
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
index 7af0d1297a..b2b9544495 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
 import { MockedTestUtils, startMockedApp } from './mocked-utils';
@@ -34,7 +34,7 @@ test('App should notify user about account expiring soon', async () => {
 
   const indicator = page.getByTestId('notificationIndicator');
   const indicatorColor = await getBackgroundColor(indicator);
-  expect(indicatorColor).toBe(colors.yellow);
+  expect(indicatorColor).toBe(colors['--color-yellow']);
 
   await util.sendMockIpcResponse<IAccountData>({
     channel: 'account-',
diff --git a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
index c723418ec7..e8e5e61155 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/select-location.spec.ts
@@ -1,8 +1,8 @@
 import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
 import { getDefaultSettings } from '../../../src/main/default-settings';
+import { colors } from '../../../src/renderer/lib/foundations';
 import {
   IRelayList,
   IRelayListWithEndpointData,
@@ -90,7 +90,7 @@ async function setMultihop() {
 test('App should show entry selection', async () => {
   const entryTab = page.getByText('Entry');
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -99,7 +99,7 @@ test('App should show entry selection', async () => {
 test('App should show exit selection', async () => {
   const exitTab = page.getByText('Exit');
   await exitTab.click();
-  await expect(exitTab).toHaveCSS('background-color', colors.green);
+  await expect(exitTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -120,7 +120,7 @@ test("App shouldn't show entry selection when daita is enabled without direct on
 
   const entryTab = page.getByText('Entry').first();
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).not.toBeVisible();
@@ -141,7 +141,7 @@ test('App should show entry selection when daita is enabled with direct only', a
 
   const entryTab = page.getByText('Entry');
   await entryTab.click();
-  await expect(entryTab).toHaveCSS('background-color', colors.green);
+  await expect(entryTab).toHaveCSS('background-color', colors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
diff --git a/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts b/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
index 38315c2136..0fe2e03aa3 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/shared/tunnel-state.ts
@@ -1,16 +1,16 @@
 import { expect } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/config.json';
+import { colors } from '../../../src/renderer/lib/foundations';
 import { anyOf } from '../utils';
 
-const DISCONNECTED_COLOR = colors.red;
-const CONNECTED_COLOR = colors.green;
-const WHITE_COLOR = colors.white;
+const DISCONNECTED_COLOR = colors['--color-red'];
+const CONNECTED_COLOR = colors['--color-green'];
+const WHITE_COLOR = colors['--color-white'];
 
-const DISCONNECTED_BUTTON_COLOR = anyOf(colors.red, colors.red80);
-const DISCONNECTING_BUTTON_COLOR = anyOf(colors.green40);
-const CONNECTED_BUTTON_COLOR = anyOf(colors.green, colors.green90);
+const DISCONNECTED_BUTTON_COLOR = anyOf(colors['--color-red'], colors['--color-red-80']);
+const DISCONNECTING_BUTTON_COLOR = anyOf(colors['--color-green-40']);
+const CONNECTED_BUTTON_COLOR = anyOf(colors['--color-green'], colors['--color-green-90']);
 
 const getLabel = (page: Page) => page.locator('span[role="status"]');
 const getHeader = (page: Page) => page.locator('header');