Deprecate old color tokens and variables

89 files changed, 462 insertions, 417 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/AccountStyles.tsx
index 155fb0465d..7426269686 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 '../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.white60,
 });
 
 export const AccountRowValue = styled(AccountRowText)(normalText, {
   fontWeight: 600,
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const DeviceRowValue = styled(AccountRowValue)({
@@ -41,7 +41,7 @@ export const DeviceRowValue = styled(AccountRowValue)({
 });
 
 export const AccountOutOfTime = styled(AccountRowValue)({
-  color: Colors.red,
+  color: DeprecatedColors.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 b3c7aca0e0..c8d398cdc6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx
@@ -7,7 +7,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { useApiAccessMethodTest } from '../lib/api-access-methods';
 import { Button, Container, Flex, Spinner } from '../lib/components';
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { generateRoutePath } from '../lib/routeHelpers';
 import { RoutePath } from '../lib/routes';
@@ -39,7 +39,7 @@ const StyledTestResultCircle = styled.div<{ $result: boolean }>((props) => ({
   width: '10px',
   height: '10px',
   borderRadius: '50%',
-  backgroundColor: props.$result ? Colors.green : Colors.red,
+  backgroundColor: props.$result ? DeprecatedColors.green : DeprecatedColors.red,
   marginRight: spacings.small,
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
index 8c64634654..da7dc13873 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ChevronButton.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Icon } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 
 interface IProps extends React.HTMLAttributes<HTMLButtonElement> {
   up: boolean;
@@ -18,7 +18,7 @@ const StyledIcon = styled(Icon)({
   alignSelf: 'stretch',
   justifyContent: 'center',
   '&&:hover': {
-    backgroundColor: Colors.white,
+    backgroundColor: DeprecatedColors.white,
   },
 });
 
@@ -27,7 +27,7 @@ export default function ChevronButton(props: IProps) {
 
   return (
     <Button {...otherProps}>
-      <StyledIcon color={Colors.white60} icon={up ? 'chevron-up' : 'chevron-down'} />
+      <StyledIcon color={DeprecatedColors.white60} icon={up ? 'chevron-up' : 'chevron-down'} />
     </Button>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
index aab1faa398..2acba17ece 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ClipboardLabel.tsx
@@ -5,7 +5,7 @@ import { messages } from '../../shared/gettext';
 import log from '../../shared/logging';
 import { useScheduler } from '../../shared/scheduler';
 import { Flex, Icon, IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useBoolean } from '../lib/utility-hooks';
 
 const COPIED_ICON_DURATION = 2000;
@@ -71,7 +71,7 @@ export default function ClipboardLabel(props: IProps) {
           </IconButton>
         )}
         {justCopied ? (
-          <Icon icon="checkmark" color={Colors.green}></Icon>
+          <Icon icon="checkmark" color={DeprecatedColors.green}></Icon>
         ) : (
           <IconButton
             onClick={onCopy}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
index 24a78472a2..bc1ebb4c8a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ContextMenu.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useBoolean, useStyledRef } from '../lib/utility-hooks';
 import { smallText } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
@@ -114,7 +114,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 ${DeprecatedColors.darkBlue}`,
     borderRadius: '8px',
     zIndex: 1,
   };
@@ -127,17 +127,17 @@ const StyledMenuItem = styled.button(smallText, (props) => ({
   background: 'transparent',
   border: 'none',
   textAlign: 'left',
-  color: props.disabled ? Colors.white50 : Colors.white,
+  color: props.disabled ? DeprecatedColors.white50 : DeprecatedColors.white,
 
   '&&:hover': {
-    background: props.disabled ? 'transparent' : Colors.blue,
+    background: props.disabled ? 'transparent' : DeprecatedColors.blue,
   },
 }));
 
 const StyledSeparator = styled.hr({
   height: '1px',
   border: 'none',
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
   margin: '4px 9px',
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/CustomDnsSettingsStyles.tsx
index 59122c1b49..9ed0ce1397 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 '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import * as Cell from './cell';
 
 export const StyledCustomDnsFooter = styled(Cell.CellFooter)({
@@ -20,17 +20,17 @@ export const StyledAddCustomDnsLabel = styled(Cell.Label)<{ $paddingLeft?: numbe
 
 export const StyledItemContainer = styled(Cell.Container)({
   display: 'flex',
-  backgroundColor: Colors.blue40,
+  backgroundColor: DeprecatedColors.blue40,
   '&&:hover': {
-    backgroundColor: Colors.blue80,
+    backgroundColor: DeprecatedColors.blue80,
   },
 });
 
 export const AddServerContainer = styled(Cell.Container)({
   display: 'flex',
-  backgroundColor: Colors.blue20,
+  backgroundColor: DeprecatedColors.blue20,
   '&&:hover': {
-    backgroundColor: Colors.blue60,
+    backgroundColor: DeprecatedColors.blue60,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
index 642617db3d..b93a3fe551 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/DeviceRevokedView.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button, Flex } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { IconBadge } from '../lib/icon-badge';
 import { useSelector } from '../redux/store';
 import { AppMainHeader } from './app-main-header';
@@ -18,7 +18,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -31,12 +31,12 @@ export const StyledBody = styled.div({
 export const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   marginBottom: '8px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const StyledMessage = styled.span(smallText, {
   marginBottom: measurements.rowVerticalMargin,
-  color: Colors.white,
+  color: DeprecatedColors.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 39dc286c6b..76ab1fc894 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ErrorView.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Flex, Logo } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { AppMainHeader } from './app-main-header';
 import { measurements } from './common-styles';
 import { Container, Layout } from './Layout';
@@ -19,7 +19,7 @@ const Subtitle = styled.span({
   fontSize: '14px',
   lineHeight: '20px',
   margin: `0 ${measurements.horizontalViewMargin}`,
-  color: Colors.white40,
+  color: DeprecatedColors.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 97eea51960..397f657cff 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/ExpiredAccountAddTime.tsx
@@ -11,7 +11,7 @@ import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Button, Flex } from '../lib/components';
 import { FlexColumn } from '../lib/components/flex-column';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { TransitionType, useHistory } from '../lib/history';
 import { IconBadge } from '../lib/icon-badge';
 import { generateRoutePath } from '../lib/routeHelpers';
@@ -36,7 +36,7 @@ export const StyledCustomScrollbars = styled(CustomScrollbars)({
 export const StyledContainer = styled(Container)({
   paddingTop: '22px',
   minHeight: '100%',
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
 });
 
 export const StyledBody = styled.div({
@@ -54,7 +54,7 @@ export const StyledTitle = styled.span(hugeText, {
 
 export const StyledLabel = styled.span(tinyText, {
   lineHeight: '20px',
-  color: Colors.white,
+  color: DeprecatedColors.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 81ba2496a8..2c000d4af4 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 '../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.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: DeprecatedColors.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: DeprecatedColors.white,
 });
 
 export const StyledAccountNumberMessage = styled.span(tinyText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const StyledAccountNumberContainer = styled.div({
@@ -60,5 +60,5 @@ export const StyledAccountNumberContainer = styled.div({
 
 export const StyledDeviceLabel = styled.span(tinyText, {
   lineHeight: '20px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
index 5e762ac62c..5c43bde31f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Filter.tsx
@@ -10,7 +10,7 @@ import {
   filterLocations,
   filterLocationsByEndPointType,
 } from '../lib/filter-locations';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useNormalRelaySettings, useTunnelProtocol } from '../lib/relay-settings-hooks';
 import { useBoolean } from '../lib/utility-hooks';
@@ -28,7 +28,7 @@ import { NavigationContainer } from './NavigationContainer';
 import { NavigationScrollbars } from './NavigationScrollbars';
 
 const StyledNavigationScrollbars = styled(NavigationScrollbars)({
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
   flex: 1,
 });
 
@@ -230,7 +230,7 @@ function FilterByOwnership(props: IFilterByOwnershipProps) {
         <AriaLabel>
           <Cell.Label>{messages.pgettext('filter-view', 'Ownership')}</Cell.Label>
         </AriaLabel>
-        <Icon color={Colors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} />
+        <Icon color={DeprecatedColors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} />
       </Cell.CellButton>
 
       <Accordion expanded={expanded}>
@@ -276,7 +276,7 @@ function FilterByProvider(props: IFilterByProviderProps) {
     <>
       <Cell.CellButton onClick={toggleExpanded}>
         <Cell.Label>{messages.pgettext('filter-view', 'Providers')}</Cell.Label>
-        <Icon color={Colors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} />
+        <Icon color={DeprecatedColors.white80} icon={expanded ? 'chevron-up' : 'chevron-down'} />
       </Cell.CellButton>
       <Accordion expanded={expanded}>
         <CheckboxRow
@@ -310,20 +310,20 @@ const StyledCheckbox = styled.div({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: Colors.white,
+  backgroundColor: DeprecatedColors.white,
   borderRadius: '4px',
 });
 
 const StyledRow = styled(Cell.Row)({
-  backgroundColor: Colors.blue40,
+  backgroundColor: DeprecatedColors.blue40,
   '&&:hover': {
-    backgroundColor: Colors.blue80,
+    backgroundColor: DeprecatedColors.blue80,
   },
 });
 
 const StyledRowTitle = styled.label<IStyledRowTitleProps>(normalText, (props) => ({
   fontWeight: props.$bold ? 600 : 400,
-  color: Colors.white,
+  color: DeprecatedColors.white,
   marginLeft: '22px',
 }));
 
@@ -341,7 +341,7 @@ function CheckboxRow(props: ICheckboxRowProps) {
   return (
     <StyledRow onClick={onToggle}>
       <StyledCheckbox role="checkbox" aria-label={props.label} aria-checked={props.checked}>
-        {props.checked && <Icon icon="checkmark" color={Colors.green} />}
+        {props.checked && <Icon icon="checkmark" color={DeprecatedColors.green} />}
       </StyledCheckbox>
       <StyledRowTitle aria-hidden $bold={props.$bold}>
         {props.label}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
index 61432e6c74..767edb2115 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Launch.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { TransitionType, 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: DeprecatedColors.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: DeprecatedColors.darkBlue,
   borderRadius: '8px',
   margin: 0,
   padding: '16px',
 });
 
 const StyledFooterMessage = styled.span(tinyText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
   margin: `8px 0 ${measurements.buttonVerticalMargin} 0`,
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
index 5dc0c3047d..21b404b2d8 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Flex } from '../lib/components';
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import { measurements } from './common-styles';
 import { NavigationScrollbars } from './NavigationScrollbars';
 
@@ -9,7 +9,7 @@ export const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  backgroundColor: Colors.blue,
+  backgroundColor: DeprecatedColors.blue,
   overflow: 'hidden',
 });
 
@@ -22,7 +22,7 @@ export const Layout = styled.div({
 });
 
 export const SettingsContainer = styled(Container)({
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
 });
 
 export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
index ccd122eac0..d095323973 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Login.tsx
@@ -9,7 +9,7 @@ import { useAppContext } from '../context';
 import { formatAccountNumber } from '../lib/account';
 import useActions from '../lib/actionsHook';
 import { Box, Button, Flex, Icon, Label, LabelTiny, Spinner, TitleMedium } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { IconBadge } from '../lib/icon-badge';
 import accountActions from '../redux/account/actions';
@@ -370,7 +370,7 @@ class Login extends React.Component<IProps, IState> {
   private createFooter() {
     return (
       <Flex $flexDirection="column" $gap="small">
-        <LabelTiny color={Colors.white60}>
+        <LabelTiny color={DeprecatedColors.white60}>
           {messages.pgettext('login-view', 'Don’t have an account number?')}
         </LabelTiny>
         <Button onClick={this.props.createNewAccount} disabled={!this.allowCreateAccount()}>
@@ -448,7 +448,7 @@ function AccountDropdownItem({ label, onRemove, onSelect, value }: AccountDropdo
                 accountNumber: label,
               },
             )}>
-            <TitleMedium color={Colors.blue80}>{label}</TitleMedium>
+            <TitleMedium color={DeprecatedColors.blue80}>{label}</TitleMedium>
           </StyledAccountDropdownItemButton>
           <Box $height="48px" $width="48px" center>
             <StyledAccountDropdownItemIconButton
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
index 39e7f00913..7b605ecdfa 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/LoginStyles.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { Icon } from '../lib/components';
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import { buttonReset } from '../lib/styles';
 import * as Cell from './cell';
 import { hugeText, largeText, measurements, smallText, tinyText } from './common-styles';
@@ -26,13 +26,13 @@ const baseButtonStyles = {
   ...buttonReset,
   width: '100%',
   height: '100%',
-  backgroundColor: Colors.white60,
+  backgroundColor: DeprecatedColors.white60,
   cursor: 'default',
   '&&:hover': {
-    backgroundColor: Colors.white40,
+    backgroundColor: DeprecatedColors.white40,
   },
   '&:focus-visible': {
-    outline: `2px solid ${Colors.white}`,
+    outline: `2px solid ${DeprecatedColors.white}`,
     outlineOffset: '-2px',
   },
 };
@@ -54,14 +54,14 @@ export const StyledAccountDropdownTrailingButton = styled.button({
   backgroundColor: 'transparent',
   cursor: 'pointer',
   '&:focus-visible': {
-    outline: `2px solid ${Colors.white}`,
+    outline: `2px solid ${DeprecatedColors.white}`,
     outlineOffset: '2px',
   },
 });
 
 export const StyledAccountDropdownItemButtonLabel = styled(Cell.Label)(largeText, {
   margin: '0',
-  color: Colors.blue80,
+  color: DeprecatedColors.blue80,
   borderWidth: 0,
   textAlign: 'left',
   marginLeft: 0,
@@ -79,7 +79,7 @@ export const StyledFooter = styled(Footer)<{ $show: boolean }>((props) => ({
   width: '100%',
   bottom: 0,
   transform: `translateY(${props.$show ? 0 : 100}%)`,
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
   transition: 'transform 250ms ease-in-out',
 }));
 
@@ -112,14 +112,18 @@ 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
+    ? DeprecatedColors.red40
+    : props.$active
+      ? DeprecatedColors.darkBlue
+      : 'transparent',
   opacity: props.$editable ? 1 : 0.6,
 }));
 
 export const StyledAccountInputBackdrop = styled.div({
   display: 'flex',
-  backgroundColor: Colors.white,
-  borderColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.white,
+  borderColor: DeprecatedColors.darkBlue,
 });
 
 export const StyledInputButton = styled.button<{ $visible: boolean }>((props) => ({
@@ -130,12 +134,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: DeprecatedColors.green,
 }));
 
 export const StyledDropdownSpacer = styled.div({
   height: 1,
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
 });
 
 export const StyledTitle = styled.h1(hugeText, {
@@ -149,11 +153,11 @@ export const StyledInput = styled(FormattableTextInput)(largeText, {
   minWidth: 0,
   borderWidth: 0,
   padding: '12px 12px 12px',
-  color: Colors.blue,
+  color: DeprecatedColors.blue,
   backgroundColor: 'transparent',
   flex: 1,
   '&&::placeholder': {
-    color: Colors.blue40,
+    color: DeprecatedColors.blue40,
   },
 });
 
@@ -162,19 +166,19 @@ export const StyledBlockMessageContainer = styled.div({
   flexDirection: 'column',
   flex: 1,
   alignSelf: 'start',
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
   borderRadius: '8px',
   margin: '5px 16px 10px',
   padding: '16px',
 });
 
 export const StyledBlockTitle = styled.div(smallText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
   marginBottom: '5px',
   fontWeight: 700,
 });
 
 export const StyledBlockMessage = styled.div(tinyText, {
-  color: Colors.white,
+  color: DeprecatedColors.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 41808d487d..647b09c612 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/Modal.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import log from '../../shared/logging';
 import { Icon, IconProps, Spinner } from '../lib/components';
 import { FlexColumn } from '../lib/components/flex-column';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { IconBadge } from '../lib/icon-badge';
 import { useEffectEvent } from '../lib/utility-hooks';
 import { ButtonGroup } from './ButtonGroup';
@@ -128,7 +128,7 @@ const StyledModalAlert = styled.div<{ $visible: boolean; $closing: boolean }>((p
   return {
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: Colors.darkBlue,
+    backgroundColor: DeprecatedColors.darkBlue,
     borderRadius: '11px',
     padding: '16px 0 16px 16px',
     maxHeight: '80vh',
@@ -314,15 +314,15 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
     switch (type) {
       case ModalAlertType.info:
         source = 'info-circle';
-        color = Colors.white;
+        color = DeprecatedColors.white;
         break;
       case ModalAlertType.caution:
         source = 'alert-circle';
-        color = Colors.white;
+        color = DeprecatedColors.white;
         break;
       case ModalAlertType.warning:
         source = 'alert-circle';
-        color = Colors.red;
+        color = DeprecatedColors.red;
         break;
       case ModalAlertType.loading:
         return <Spinner size="big" />;
@@ -343,13 +343,13 @@ class ModalAlertImpl extends React.Component<IModalAlertImplProps, IModalAlertSt
 }
 
 const ModalTitle = styled.h1(normalText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
   fontWeight: 600,
   margin: '18px 0 0 0',
 });
 
 export const ModalMessage = styled.span(tinyText, {
-  color: Colors.white80,
+  color: DeprecatedColors.white80,
   marginTop: '16px',
 
   [`${ModalTitle} ~ &&`]: {
@@ -360,5 +360,5 @@ export const ModalMessage = styled.span(tinyText, {
 export const ModalMessageList = styled.ul({
   listStyle: 'disc outside',
   paddingLeft: '20px',
-  color: Colors.white80,
+  color: DeprecatedColors.white80,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
index 93399b460c..c40879baf1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 import { InAppNotificationIndicatorType } from '../../shared/notifications/notification';
 import { IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useExclusiveTask } from '../lib/hooks/use-exclusive-task';
 import { useEffectEvent, useLastDefinedValue, useStyledRef } from '../lib/utility-hooks';
 import { tinyText } from './common-styles';
@@ -12,11 +12,11 @@ import { tinyText } from './common-styles';
 const NOTIFICATION_AREA_ID = 'notification-area';
 
 export const NotificationTitle = styled.span(tinyText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const NotificationSubtitleText = styled.span(tinyText, {
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 interface INotificationSubtitleProps {
@@ -90,9 +90,9 @@ interface INotificationIndicatorProps {
 }
 
 const notificationIndicatorTypeColorMap = {
-  success: Colors.green,
-  warning: Colors.yellow,
-  error: Colors.red,
+  success: DeprecatedColors.green,
+  warning: DeprecatedColors.yellow,
+  error: DeprecatedColors.red,
 };
 
 export const NotificationIndicator = styled.div<INotificationIndicatorProps>((props) => ({
@@ -114,7 +114,7 @@ const Collapsible = styled.div<ICollapsibleProps>((props) => {
     display: 'flex',
     flexDirection: 'column',
     justifyContent: props.$alignBottom ? 'flex-end' : 'flex-start',
-    backgroundColor: Colors.darkerBlue,
+    backgroundColor: DeprecatedColors.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/NotificationSubtitle.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
index 68d2572a62..eb3b7b905d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationSubtitle.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { InAppNotificationSubtitle } from '../../shared/notifications';
 import { LabelTiny } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { formatHtml } from '../lib/html-formatter';
 import { ExternalLink } from './ExternalLink';
 import { InternalLink } from './InternalLink';
@@ -47,14 +47,14 @@ export const NotificationSubtitle = ({ subtitle, ...props }: NotificationSubtitl
 
   if (!Array.isArray(subtitle)) {
     return (
-      <LabelTiny color={Colors.white60} {...props}>
+      <LabelTiny color={DeprecatedColors.white60} {...props}>
         {formatHtml(subtitle)}
       </LabelTiny>
     );
   }
 
   return (
-    <LabelTiny color={Colors.white60} {...props}>
+    <LabelTiny color={DeprecatedColors.white60} {...props}>
       {subtitle.map((subtitle, index, arr) => {
         const content = formatSubtitle(subtitle);
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
index 897297a243..b4d702d455 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/PageSlider.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { NonEmptyArray } from '../../shared/utils';
 import { IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useStyledRef } from '../lib/utility-hooks';
 
 const PAGE_GAP = 16;
@@ -153,10 +153,10 @@ const StyledPageIndicator = styled.div<{ $current: boolean }>((props) => ({
   width: '8px',
   height: '8px',
   borderRadius: '50%',
-  backgroundColor: props.$current ? Colors.white80 : Colors.white40,
+  backgroundColor: props.$current ? DeprecatedColors.white80 : DeprecatedColors.white40,
 
   [`${StyledTransparentButton}:hover &&`]: {
-    backgroundColor: Colors.white80,
+    backgroundColor: DeprecatedColors.white80,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ProblemReportStyles.tsx
index da055cb5da..ec65a5d795 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 '../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.blue,
+  backgroundColor: DeprecatedColors.white,
   border: 'none',
 };
 
@@ -60,16 +60,16 @@ export const StyledStatusIcon = styled.div({
 
 export const StyledSentMessage = styled.span(smallText, {
   overflow: 'visible',
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 export const StyledThanks = styled.span({
-  color: Colors.green,
+  color: DeprecatedColors.green,
 });
 
 export const StyledEmail = styled.span({
   fontWeight: 900,
-  color: Colors.white,
+  color: DeprecatedColors.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 6dc538c3b3..2be22ca5ea 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RedeemVoucherStyles.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
 
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { normalText, smallText, tinyText } from './common-styles';
 import FormattableTextInput from './FormattableTextInput';
 
 export const StyledLabel = styled.span(smallText, {
-  color: Colors.white,
+  color: DeprecatedColors.white,
   marginBottom: '9px',
 });
 
@@ -15,19 +15,19 @@ export const StyledInput = styled(FormattableTextInput)(normalText, {
   padding: '14px',
   fontWeight: 600,
   lineHeight: '26px',
-  color: Colors.blue,
-  backgroundColor: Colors.white,
+  color: DeprecatedColors.blue,
+  backgroundColor: DeprecatedColors.white,
   border: 'none',
   borderRadius: '4px',
   '&&::placeholder': {
-    color: Colors.blue40,
+    color: DeprecatedColors.blue40,
   },
 });
 
 export const StyledResponse = styled.span(tinyText, {
   lineHeight: '20px',
   marginTop: '8px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const StyledProgressResponse = styled(StyledResponse)({
@@ -35,7 +35,7 @@ export const StyledProgressResponse = styled(StyledResponse)({
 });
 
 export const StyledErrorResponse = styled(StyledResponse)({
-  color: Colors.red,
+  color: DeprecatedColors.red,
 });
 
 export const StyledEmptyResponse = styled.span({
@@ -46,6 +46,6 @@ export const StyledEmptyResponse = styled.span({
 export const StyledTitle = styled.span(smallText, {
   lineHeight: '22px',
   fontWeight: 400,
-  color: Colors.white,
+  color: DeprecatedColors.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 5f039194c4..8236e140ca 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/RelayStatusIndicator.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } 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 ? DeprecatedColors.green90 : DeprecatedColors.red95,
 }));
 
 const TickIcon = styled(Cell.CellIcon)({
@@ -29,12 +29,12 @@ interface IProps {
 
 export default function RelayStatusIndicator(props: IProps) {
   return props.selected ? (
-    <TickIcon color={Colors.white} icon="checkmark" />
+    <TickIcon color={DeprecatedColors.white} icon="checkmark" />
   ) : (
     <StyledRelayStatus $active={props.active} />
   );
 }
 
 export const SpecialLocationIndicator = styled.div(indicatorStyles, {
-  backgroundColor: Colors.white90,
+  backgroundColor: DeprecatedColors.white90,
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
index 5d4a672676..374b4c7bd6 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SearchBar.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../shared/gettext';
 import { Icon, IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useEffectEvent, useStyledRef } from '../lib/utility-hooks';
 import { normalText } from './common-styles';
 
@@ -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: DeprecatedColors.white60,
+  backgroundColor: DeprecatedColors.white10,
   '&&::placeholder': {
-    color: Colors.white60,
+    color: DeprecatedColors.white60,
   },
   '&&:focus': {
-    color: Colors.blue,
-    backgroundColor: Colors.white,
+    color: DeprecatedColors.blue,
+    backgroundColor: DeprecatedColors.white,
   },
   '&&:focus::placeholder': {
-    color: Colors.blue40,
+    color: DeprecatedColors.blue40,
   },
 });
 
@@ -41,7 +41,7 @@ export const StyledClearButton = styled(IconButton)({
   transform: 'translateY(-50%)',
   right: '9px',
   [`${StyledSearchInput}:focus ~ && > div`]: {
-    backgroundColor: Colors.blue40,
+    backgroundColor: DeprecatedColors.blue40,
   },
 });
 
@@ -51,7 +51,7 @@ export const StyledSearchIcon = styled(Icon)({
   transform: 'translateY(-50%)',
   left: '8px',
   [`${StyledSearchInput}:focus ~ &&`]: {
-    backgroundColor: Colors.blue,
+    backgroundColor: DeprecatedColors.blue,
   },
 });
 
@@ -96,7 +96,7 @@ export default function SearchBar(props: ISearchBarProps) {
         onInput={onInput}
         placeholder={messages.gettext('Search for...')}
       />
-      <StyledSearchIcon icon="search" color={Colors.white60} />
+      <StyledSearchIcon icon="search" color={DeprecatedColors.white60} />
       {props.searchTerm.length > 0 && (
         <StyledClearButton variant="secondary" onClick={onClear}>
           <IconButton.Icon icon="cross-circle" />
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SecuredLabel.tsx
index bc96fab5a7..ec50ec09b2 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 { messages } from '../../shared/gettext';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } 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]: DeprecatedColors.white,
+  [SecuredDisplayStyle.securingPq]: DeprecatedColors.white,
+  [SecuredDisplayStyle.unsecuring]: DeprecatedColors.white,
+  [SecuredDisplayStyle.secured]: DeprecatedColors.green,
+  [SecuredDisplayStyle.securedPq]: DeprecatedColors.green,
+  [SecuredDisplayStyle.blocked]: DeprecatedColors.white,
+  [SecuredDisplayStyle.unsecured]: DeprecatedColors.red,
+  [SecuredDisplayStyle.failedToSecure]: DeprecatedColors.red,
 };
 
 const StyledSecuredLabel = styled.span<{ $displayStyle: SecuredDisplayStyle }>((props) => ({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
index 4fffcae8b8..24b69409de 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import { Flex, LabelTiny, TitleBig } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 
 export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
@@ -10,7 +10,7 @@ export const HeaderTitle = styled(TitleBig)({
 });
 
 export const HeaderSubTitle = styled(LabelTiny).attrs({
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 })({});
 
 interface SettingsHeaderProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
index 4f47426b83..40e4077e5f 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -7,7 +7,7 @@ import { useScheduler } from '../../shared/scheduler';
 import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { Button, Flex, Icon, IconProps } from '../lib/components';
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import { TransitionType, useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
@@ -203,12 +203,12 @@ const StyledStatusTitle = styled.div(normalText, {
   alignItems: 'center',
   fontWeight: 'bold',
   lineHeight: '20px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
   gap: spacings.tiny,
 });
 
 const StyledStatusSubTitle = styled.div(tinyText, {
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 interface ImportStatusProps {
@@ -235,9 +235,9 @@ function SettingsImportStatus(props: ImportStatusProps) {
     iconProps = props.status.successful
       ? {
           icon: 'checkmark',
-          color: Colors.green,
+          color: DeprecatedColors.green,
         }
-      : { icon: 'cross', color: Colors.red };
+      : { icon: 'cross', color: DeprecatedColors.red };
 
     if (props.status.successful) {
       subtitle =
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
index 70d774d702..85213109df 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { messages } from '../../shared/gettext';
 import useActions from '../lib/actionsHook';
 import { IconButton } from '../lib/components';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs, useRefCallback, useStyledRef } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
@@ -17,7 +17,7 @@ const StyledTextArea = styled.textarea({
   width: '100%',
   flex: 1,
   padding: '13px',
-  color: Colors.blue,
+  color: DeprecatedColors.blue,
 });
 
 export default function SettingsTextImport() {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
index ab2821d415..7e54ef3d14 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx
@@ -13,7 +13,7 @@ import { messages } from '../../shared/gettext';
 import { useAppContext } from '../context';
 import { Button, Container, Flex, FootnoteMini, IconButton, Spinner } from '../lib/components';
 import { FlexColumn } from '../lib/components/flex-column';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useAfterTransition } from '../lib/transition-hooks';
@@ -202,7 +202,7 @@ function LinuxSplitTunnelingSettings(props: IPlatformSplitTunnelingSettingsProps
       <ModalAlert
         isOpen={browseError !== undefined}
         type={ModalAlertType.warning}
-        iconColor={Colors.red}
+        iconColor={DeprecatedColors.red}
         message={sprintf(
           // TRANSLATORS: Error message showed in a dialog when an application fails to launch.
           messages.pgettext(
@@ -241,7 +241,7 @@ function LinuxApplicationRow(props: ILinuxApplicationRowProps) {
   const hideWarningDialog = useCallback(() => setShowWarning(false), []);
 
   const disabled = props.application.warning === 'launches-elsewhere';
-  const warningColor = disabled ? Colors.red : Colors.yellow;
+  const warningColor = disabled ? DeprecatedColors.red : DeprecatedColors.yellow;
   const warningMessage = disabled
     ? sprintf(
         messages.pgettext(
@@ -586,7 +586,7 @@ function MacOsSplitTunnelingAvailability({
               {messages.pgettext('split-tunneling-view', 'Open System Settings')}
             </Button.Text>
           </Button>
-          <FootnoteMini color={Colors.white60}>
+          <FootnoteMini color={DeprecatedColors.white60}>
             {messages.pgettext(
               'split-tunneling-view',
               'Enabled "Full disk access" and still having issues?',
@@ -635,7 +635,7 @@ function applicationGetKey<T extends IApplication>(application: T): string {
 }
 
 const StyledContainer = styled(Cell.Container)({
-  backgroundColor: Colors.blue40,
+  backgroundColor: DeprecatedColors.blue40,
 });
 
 interface IApplicationRowProps {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
index 0c4a200baa..1f100e38b4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import * as Cell from './cell';
 import { measurements, normalText } from './common-styles';
 import { NavigationScrollbars } from './NavigationScrollbars';
@@ -23,7 +23,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 ? DeprecatedColors.blue : undefined,
   },
 }));
 
@@ -65,7 +65,7 @@ export const StyledSpinnerRow = styled(Cell.CellButton)({
   justifyContent: 'center',
   padding: `${spacings.small} 0`,
   marginBottom: measurements.rowVerticalMargin,
-  background: Colors.blue40,
+  background: DeprecatedColors.blue40,
 });
 
 export const StyledNoResult = styled(Cell.CellFooter)({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Switch.tsx
index ba28320c55..4677d09c05 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 '../lib/foundations';
+import { DeprecatedColors } 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 ? DeprecatedColors.white20 : DeprecatedColors.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 ? DeprecatedColors.green : DeprecatedColors.red;
   if (props.disabled) {
-    backgroundColor = props.$isOn ? Colors.green40 : Colors.red40;
+    backgroundColor = props.$isOn ? DeprecatedColors.green40 : DeprecatedColors.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 3c011fd872..5c2a14a45d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/TooManyDevices.tsx
@@ -9,7 +9,7 @@ import { capitalizeEveryWord } from '../../shared/string-helpers';
 import { useAppContext } from '../context';
 import { Button, Flex, IconButton, Spinner } from '../lib/components';
 import { FlexColumn } from '../lib/components/flex-column';
-import { Colors } from '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 import { TransitionType, useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { IconBadge, IconBadgeProps } from '../lib/icon-badge';
@@ -42,7 +42,7 @@ const StyledBody = styled.div({
 const StyledTitle = styled.span(bigText, {
   lineHeight: '38px',
   margin: `0 ${measurements.horizontalViewMargin} 8px`,
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 const StyledLabel = styled.span({
@@ -50,7 +50,7 @@ const StyledLabel = styled.span({
   fontSize: '12px',
   fontWeight: 600,
   lineHeight: '20px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
   margin: `0 ${measurements.horizontalViewMargin} 18px`,
 });
 
@@ -74,7 +74,7 @@ const StyledDeviceName = styled.span(normalText, {
 const StyledDeviceDate = styled.span(tinyText, {
   fontSize: '10px',
   lineHeight: '10px',
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 export default function TooManyDevices() {
@@ -256,7 +256,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={confirmationVisible}
         type={ModalAlertType.warning}
-        iconColor={Colors.red}
+        iconColor={DeprecatedColors.red}
         buttons={[
           <Button variant="destructive" key="remove" onClick={onRemove} disabled={deleting}>
             <Button.Text>
@@ -290,7 +290,7 @@ function Device(props: IDeviceProps) {
       <ModalAlert
         isOpen={error}
         type={ModalAlertType.warning}
-        iconColor={Colors.red}
+        iconColor={DeprecatedColors.red}
         buttons={[
           <Button key="close" onClick={resetError}>
             <Button.Text>{messages.gettext('Close')}</Button.Text>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
index af344f4aef..b0ebf2e99d 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx
@@ -9,7 +9,7 @@ import log from '../../shared/logging';
 import { useAppContext } from '../context';
 import { Button } from '../lib/components';
 import { useRelaySettingsUpdater } from '../lib/constraint-updater';
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 import { useHistory } from '../lib/history';
 import { formatHtml } from '../lib/html-formatter';
 import { useTunnelProtocol } from '../lib/relay-settings-hooks';
@@ -40,7 +40,7 @@ const StyledTitleLabel = styled(Cell.SectionTitle)({
 });
 
 const StyledSectionItem = styled(Cell.Container)({
-  backgroundColor: Colors.blue40,
+  backgroundColor: DeprecatedColors.blue40,
 });
 
 const LanIpRanges = styled.ul({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/YellowLabel.tsx
index 76a3fdeb16..b869cd5df6 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 '../lib/foundations';
+import { DeprecatedColors } from '../lib/foundations';
 
 export default styled.span({
   display: 'inline-block',
   fontFamily: 'Open Sans',
-  color: Colors.blue,
+  color: DeprecatedColors.blue,
   fontSize: '12px',
   fontWeight: 800,
   lineHeight: '20px',
   padding: '1px 8px',
   marginLeft: '8px',
-  background: Colors.yellow,
+  background: DeprecatedColors.yellow,
   borderRadius: '5px',
   textAlign: 'center',
   verticalAlign: 'middle',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
index e35d5d2ac8..0b544a1dd5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderDeviceInfo.tsx
@@ -5,7 +5,7 @@ import { closeToExpiry, formatRemainingTime, hasExpired } from '../../../../shar
 import { messages } from '../../../../shared/gettext';
 import { capitalizeEveryWord } from '../../../../shared/string-helpers';
 import { Flex, FootnoteMini } from '../../../lib/components';
-import { Colors } from '../../../lib/foundations';
+import { DeprecatedColors } from '../../../lib/foundations';
 import { useSelector } from '../../../redux/store';
 
 const StyledTimeLeftLabel = styled(FootnoteMini)({
@@ -30,7 +30,7 @@ export const AppMainHeaderDeviceInfo = () => {
 
   return (
     <Flex $gap="large" $margin={{ top: 'tiny' }}>
-      <StyledDeviceLabel color={Colors.white80}>
+      <StyledDeviceLabel color={DeprecatedColors.white80}>
         {sprintf(
           // TRANSLATORS: A label that will display the newly created device name to inform the user
           // TRANSLATORS: about it.
@@ -43,7 +43,7 @@ export const AppMainHeaderDeviceInfo = () => {
         )}
       </StyledDeviceLabel>
       {accountExpiry && !closeToExpiry(accountExpiry) && !isOutOfTime && (
-        <StyledTimeLeftLabel color={Colors.white80}>
+        <StyledTimeLeftLabel color={DeprecatedColors.white80}>
           {sprintf(messages.pgettext('device-management', 'Time left: %(timeLeft)s'), {
             timeLeft: formattedExpiry,
           })}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
index 9c2acb8937..3092b785b0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Box, IconProps } from '../../lib/components';
-import { Colors, spacings } from '../../lib/foundations';
+import { DeprecatedColors, spacings } from '../../lib/foundations';
 import { CellDisabledContext } from './Container';
 import { CellTintedIcon } from './Label';
 import { Row } from './Row';
@@ -15,11 +15,11 @@ interface IStyledCellButtonProps extends React.HTMLAttributes<HTMLButtonElement>
 
 const StyledCellButton = styled(Row)<IStyledCellButtonProps>((props) => {
   const backgroundColor = props.$selected
-    ? Colors.green
+    ? DeprecatedColors.green
     : props.$containedInSection
-      ? Colors.blue40
-      : Colors.blue;
-  const backgroundColorHover = props.$selected ? Colors.green : Colors.blue80;
+      ? DeprecatedColors.blue40
+      : DeprecatedColors.blue;
+  const backgroundColorHover = props.$selected ? DeprecatedColors.green : DeprecatedColors.blue80;
 
   return {
     paddingRight: spacings.medium,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
index be4ada0647..4a598fdef7 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx
@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 
 import { LabelTiny } from '../../lib/components';
-import { Colors, spacings } from '../../lib/foundations';
+import { DeprecatedColors, spacings } from '../../lib/foundations';
 
 export const CellFooter = styled.div({
   margin: `${spacings.tiny} ${spacings.large} 0px`,
 });
 
 export const CellFooterText = styled(LabelTiny).attrs({
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 })({});
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 7d219a533f..f247e579a1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Input.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import { IconButton } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import { useBoolean, useCombinedRefs, useEffectEvent, useStyledRef } from '../../lib/utility-hooks';
 import { normalText } from '../common-styles';
 import { BackAction } from '../KeyboardNavigation';
@@ -30,9 +30,14 @@ 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
+      ? DeprecatedColors.red
+      : props.$focused
+        ? DeprecatedColors.blue
+        : DeprecatedColors.white,
   '&&::placeholder': {
-    color: props.$focused ? Colors.blue60 : Colors.white60,
+    color: props.$focused ? DeprecatedColors.blue60 : DeprecatedColors.white60,
   },
 }));
 
@@ -178,7 +183,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 ? DeprecatedColors.white : 'rgba(255,255,255,0.1)',
   borderRadius: '4px',
   padding: '6px 8px',
 }));
@@ -281,7 +286,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 ? DeprecatedColors.red : 'auto',
 }));
 
 const StyledInputFiller = styled.div({
@@ -295,10 +300,10 @@ const StyledInputFiller = styled.div({
 // TODO: This can be removed once we implement the new colors from foundations
 const StyledIconButton = styled(IconButton)<{ $disabled: boolean }>(({ $disabled }) => ({
   ['> div']: {
-    backgroundColor: $disabled ? Colors.blue60 : Colors.blue,
+    backgroundColor: $disabled ? DeprecatedColors.blue60 : DeprecatedColors.blue,
   },
   ['&&:hover > div']: {
-    backgroundColor: $disabled ? Colors.blue60 : Colors.blue80,
+    backgroundColor: $disabled ? DeprecatedColors.blue60 : DeprecatedColors.blue80,
   },
 }));
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
index 4ff662a737..00fc51a4a4 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import { Icon, IconProps, Image, ImageProps } from '../../lib/components';
-import { Colors, spacings } from '../../lib/foundations';
+import { DeprecatedColors, spacings } from '../../lib/foundations';
 import { buttonText, normalText, tinyText } from '../common-styles';
 import { CellButton } from './CellButton';
 import { CellDisabledContext } from './Container';
@@ -11,7 +11,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
   display: 'flex',
   margin: '10px 0',
   flex: 1,
-  color: props.disabled ? Colors.white40 : Colors.white,
+  color: props.disabled ? DeprecatedColors.white40 : DeprecatedColors.white,
   textAlign: 'left',
 
   [`${LabelContainer} &&`]: {
@@ -27,7 +27,7 @@ const StyledLabel = styled.div<{ disabled: boolean }>(buttonText, (props) => ({
 }));
 
 const StyledSubText = styled.span<{ disabled: boolean }>(tinyText, (props) => ({
-  color: props.disabled ? Colors.white20 : Colors.white60,
+  color: props.disabled ? DeprecatedColors.white20 : DeprecatedColors.white60,
   flex: -1,
   textAlign: 'right',
   margin: `0 ${spacings.small}`,
@@ -56,7 +56,7 @@ const StyledTintedIcon = styled(Icon)<IconProps & { disabled?: boolean }>(
 const StyledSubLabel = styled.div<{ disabled: boolean }>(tinyText, {
   display: 'flex',
   alignItems: 'center',
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
   marginBottom: '5px',
   lineHeight: '14px',
   height: '14px',
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 954e277844..3a520aed5b 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 '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.blue,
   minHeight: measurements.rowMinHeight,
   paddingLeft: measurements.horizontalViewMargin,
   paddingRight: measurements.horizontalViewMargin,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
index a3209b419e..6b2ceddc01 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import { useAppContext } from '../../context';
-import { Colors, spacings } from '../../lib/foundations';
+import { DeprecatedColors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { useBoolean, useEffectEvent } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
@@ -23,7 +23,7 @@ interface SectionTitleProps {
 
 export const SectionTitle = styled(Row)<SectionTitleProps>(buttonText, (props) => ({
   paddingRight: spacings.medium,
-  color: props.disabled ? Colors.white20 : Colors.white,
+  color: props.disabled ? DeprecatedColors.white20 : DeprecatedColors.white,
   fontWeight: props.$thin ? 400 : 600,
   fontSize: props.$thin ? '15px' : '18px',
   ...(props.$thin ? openSans : sourceSansPro),
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 a9212295a9..807ac0218c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Selector.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
 import { Icon } from '../../lib/components';
-import { Colors, spacings } from '../../lib/foundations';
+import { DeprecatedColors, spacings } from '../../lib/foundations';
 import { useHistory } from '../../lib/history';
 import { RoutePath } from '../../lib/routes';
 import { useStyledRef } from '../../lib/utility-hooks';
@@ -194,8 +194,8 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
       </Cell.CellButton>
       {props.details && (
         <StyledSideButton
-          $backgroundColor={Colors.blue40}
-          $backgroundColorHover={Colors.blue80}
+          $backgroundColor={DeprecatedColors.blue40}
+          $backgroundColorHover={DeprecatedColors.blue80}
           aria-label={props.details.ariaLabel}
           onClick={navigate}>
           <Icon icon="chevron-right" />
@@ -228,9 +228,9 @@ interface StyledCustomContainerProps {
 }
 
 const StyledCustomContainer = styled(Cell.Container)<StyledCustomContainerProps>((props) => ({
-  backgroundColor: props.selected ? Colors.green : Colors.blue40,
+  backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue40,
   '&&:hover': {
-    backgroundColor: props.selected ? Colors.green : Colors.blue,
+    backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue,
   },
 }));
 
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 efd44271ca..f3a2a0b3ea 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 '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.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 d0c0a3c087..c2b602ded3 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 '../../lib/foundations';
+import { DeprecatedColors } 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 ${DeprecatedColors.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: DeprecatedColors.white,
     top: '3px',
     left: '3px',
   },
@@ -85,7 +85,7 @@ const StyledRadioButtonContainer = styled.div({
 });
 
 const StyledRadioButtonLabel = styled.label(smallNormalText, {
-  color: Colors.white,
+  color: DeprecatedColors.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 baf64edca4..092376fe22 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsRow.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Icon } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import { AriaInputGroup, AriaLabel } from '../AriaGroup';
 import { measurements, smallNormalText, tinyText } from '../common-styles';
 import { StyledSettingsGroup, useSettingsGroupContext } from './SettingsGroup';
@@ -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: DeprecatedColors.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 ? DeprecatedColors.red : 'transparent',
+  outlineColor: props.$invalid ? DeprecatedColors.red : 'transparent',
   '&&:focus-within': {
-    borderColor: props.$invalid ? Colors.red : Colors.white,
-    outlineColor: props.$invalid ? Colors.red : Colors.white,
+    borderColor: props.$invalid ? DeprecatedColors.red : DeprecatedColors.white,
+    outlineColor: props.$invalid ? DeprecatedColors.red : DeprecatedColors.white,
   },
 }));
 
@@ -61,7 +61,7 @@ const StyledSettingsRowErrorMessage = styled.div(tinyText, {
   alignItems: 'center',
   marginLeft: measurements.horizontalViewMargin,
   marginTop: '5px',
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 const StyledErrorMessageAlertIcon = styled(Icon)({
@@ -132,7 +132,7 @@ export function SettingsRow(props: React.PropsWithChildren<IndentedRowProps>) {
 export function SettingsRowErrorMessage(props: React.PropsWithChildren) {
   return (
     <StyledSettingsRowErrorMessage>
-      <StyledErrorMessageAlertIcon icon="alert-circle" color={Colors.red} size="small" />
+      <StyledErrorMessageAlertIcon icon="alert-circle" color={DeprecatedColors.red} size="small" />
       {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 6d0ef951bb..7647909f1a 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/SettingsSelect.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { useScheduler } from '../../../shared/scheduler';
 import { Icon } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.white,
   borderRadius: '4px',
   height: '26px',
 
   '&&:focus': {
-    outline: `1px ${Colors.darkBlue} solid`,
-    backgroundColor: Colors.blue,
+    outline: `1px ${DeprecatedColors.darkBlue} solid`,
+    backgroundColor: DeprecatedColors.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: DeprecatedColors.darkBlue,
+  border: `1px ${DeprecatedColors.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 color={Colors.white60} icon="chevron-down" />
+            <StyledChevron color={DeprecatedColors.white60} icon="chevron-down" />
           </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: DeprecatedColors.blue,
   },
 }));
 
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 f7f0bdc484..cd0f328471 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 '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.white,
   width: '100px',
 
   '&&::placeholder': {
-    color: Colors.white50,
+    color: DeprecatedColors.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 ece1107580..e8cae54309 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 '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.darkBlue,
     },
   }),
 );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
index 4628493fa9..5d43443305 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Colors, spacings } from '../lib/foundations';
+import { DeprecatedColors, spacings } from '../lib/foundations';
 
 export const openSans: React.CSSProperties = {
   fontFamily: 'Open Sans',
@@ -22,7 +22,7 @@ export const smallText = {
   fontSize: '14px',
   fontWeight: 600,
   lineHeight: '20px',
-  color: Colors.white80,
+  color: DeprecatedColors.white80,
 };
 
 export const smallNormalText = {
@@ -45,7 +45,7 @@ export const largeText = {
 
 export const buttonText = {
   ...largeText,
-  color: Colors.white,
+  color: DeprecatedColors.white,
 };
 
 export const bigText = {
@@ -60,7 +60,7 @@ export const hugeText = {
   fontSize: '32px',
   fontWeight: 700,
   lineHeight: '34px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
 };
 
 export const measurements = {
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 c2e34d265e..83423039a0 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
@@ -12,7 +12,7 @@ import {
   tunnelTypeToString,
 } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.white60,
 });
 
 const StyledConnectionDetailsContainer = styled.div({
@@ -58,13 +58,13 @@ const StyledIpLabelContainer = styled.div({
 
 const StyledConnectionDetailsLabel = styled.span(tinyText, {
   display: 'block',
-  color: Colors.white,
+  color: DeprecatedColors.white,
   fontWeight: '400',
   minHeight: '1em',
 });
 
 const StyledConnectionDetailsTitle = styled(StyledConnectionDetailsLabel)({
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
   whiteSpace: 'nowrap',
 });
 
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 ee2cfac3d2..aefef4d7c5 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
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { TunnelState } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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 DeprecatedColors.green;
     case 'connecting':
     case 'disconnecting':
-      return Colors.white;
+      return DeprecatedColors.white;
     case 'disconnected':
-      return lockdownMode ? Colors.white : Colors.red;
+      return lockdownMode ? DeprecatedColors.white : DeprecatedColors.red;
     case 'error':
-      return tunnelState.details.blockingError ? Colors.red : Colors.white;
+      return tunnelState.details.blockingError ? DeprecatedColors.red : DeprecatedColors.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 1ab79a6300..2bcc711d0c 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
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { strings } from '../../../shared/constants';
 import { FeatureIndicator } from '../../../shared/daemon-rpc-types';
 import { messages } from '../../../shared/gettext';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import { useStyledRef } from '../../lib/utility-hooks';
 import { useSelector } from '../../redux/store';
 import { tinyText } from '../common-styles';
@@ -28,7 +28,7 @@ const StyledTitle = styled.h2(tinyText, {
   margin: '0 0 2px',
   fontSize: '10px',
   lineHeight: '15px',
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 });
 
 const StyledFeatureIndicators = styled.div({
@@ -50,8 +50,8 @@ const StyledFeatureIndicatorLabel = styled.span(tinyText, (props) => ({
   justifyContent: 'center',
   alignItems: 'center',
   borderRadius: '4px',
-  background: Colors.darkerBlue,
-  color: Colors.white,
+  background: DeprecatedColors.darkerBlue,
+  color: DeprecatedColors.white,
   fontWeight: 400,
   whiteSpace: 'nowrap',
   visibility: 'hidden',
@@ -59,17 +59,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 ? DeprecatedColors.blue : DeprecatedColors.darkerBlue,
   transition: 'background ease-in-out 300ms',
   '&&:hover': {
-    background: props.onClick ? Colors.blue60 : undefined,
+    background: props.onClick ? DeprecatedColors.blue60 : undefined,
   },
 }));
 
 const StyledBaseEllipsis = styled.span<{ $display: boolean }>(tinyText, (props) => ({
   position: 'absolute',
   top: `${LINE_HEIGHT + GAP}px`,
-  color: Colors.white,
+  color: DeprecatedColors.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 9771c124ed..26b2b48b16 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
@@ -2,7 +2,7 @@ import { sprintf } from 'sprintf-js';
 import styled from 'styled-components';
 
 import { messages } from '../../../shared/gettext';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.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 d168d09cc9..833b26252b 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 { TunnelState } from '../../../shared/daemon-rpc-types';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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: DeprecatedColors.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 78710fe44f..e1dbe0b073 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
@@ -12,7 +12,7 @@ import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
 import { Button } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } 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.CellTintedIcon)({
   [`${Cell.CellButton}:not(:disabled):hover &&`]: {
-    backgroundColor: Colors.white80,
+    backgroundColor: DeprecatedColors.white80,
   },
 });
 
@@ -137,7 +137,7 @@ function SelectList(props: SelectListProps) {
 
 const StyledInputErrorText = styled.span(tinyText, {
   marginTop: '6px',
-  color: Colors.red,
+  color: DeprecatedColors.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 1b506bf3d0..852d63ad78 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
@@ -9,7 +9,7 @@ import {
 import { messages } from '../../../shared/gettext';
 import log from '../../../shared/logging';
 import { useAppContext } from '../../context';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import { useBoolean, useStyledRef } from '../../lib/utility-hooks';
 import Accordion from '../Accordion';
 import * as Cell from '../cell';
@@ -30,7 +30,7 @@ const StyledInputContainer = styled.div({
   display: 'flex',
   alignItems: 'center',
   flex: 1,
-  backgroundColor: Colors.blue,
+  backgroundColor: DeprecatedColors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   height: measurements.rowMinHeight,
 });
@@ -38,7 +38,7 @@ const StyledInputContainer = styled.div({
 const StyledHeaderLabel = styled(Cell.Label)({
   display: 'block',
   flex: 1,
-  backgroundColor: Colors.blue,
+  backgroundColor: DeprecatedColors.blue,
   paddingLeft: measurements.horizontalViewMargin,
   margin: 0,
   height: measurements.rowMinHeight,
@@ -55,17 +55,17 @@ const StyledAddListCellButton = styled(StyledCellButton)({
 
 const StyledSideButtonIcon = styled(Cell.CellIcon)({
   [`${StyledCellButton}:disabled &&, ${StyledAddListCellButton}:disabled &&`]: {
-    backgroundColor: Colors.white40,
+    backgroundColor: DeprecatedColors.white40,
   },
 
   [`${StyledCellButton}:not(:disabled):hover &&, ${StyledAddListCellButton}:not(:disabled):hover &&`]:
     {
-      backgroundColor: Colors.white,
+      backgroundColor: DeprecatedColors.white,
     },
 });
 
 const StyledInput = styled(SimpleInput)<{ $error: boolean }>((props) => ({
-  color: props.$error ? Colors.red : 'auto',
+  color: props.$error ? DeprecatedColors.red : 'auto',
 }));
 
 interface CustomListsProps {
@@ -103,10 +103,10 @@ export default function CustomLists(props: CustomListsProps) {
           {messages.pgettext('select-location-view', 'Custom lists')}
         </StyledHeaderLabel>
         <StyledCellButton
-          $backgroundColor={Colors.blue}
-          $backgroundColorHover={Colors.blue80}
+          $backgroundColor={DeprecatedColors.blue}
+          $backgroundColorHover={DeprecatedColors.blue80}
           onClick={showAddList}>
-          <StyledSideButtonIcon icon="add-circle" color={Colors.white60} />
+          <StyledSideButtonIcon icon="add-circle" color={DeprecatedColors.white60} />
         </StyledCellButton>
       </StyledCellContainer>
 
@@ -198,11 +198,11 @@ function AddListForm(props: AddListFormProps) {
           </StyledInputContainer>
 
           <StyledAddListCellButton
-            $backgroundColor={Colors.blue}
-            $backgroundColorHover={Colors.blue80}
+            $backgroundColor={DeprecatedColors.blue}
+            $backgroundColorHover={DeprecatedColors.blue80}
             disabled={!nameValid}
             onClick={createList}>
-            <StyledSideButtonIcon icon="checkmark" color={Colors.white60} />
+            <StyledSideButtonIcon icon="checkmark" color={DeprecatedColors.white60} />
           </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 89fdb7079f..bbea50bf5f 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
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Styles } from 'styled-components/dist/types';
 
 import { Icon } from '../../lib/components';
-import { Colors } from '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { buttonColor, ButtonColors } from '../cell/styles';
 import { measurements, normalText } from '../common-styles';
@@ -83,10 +83,10 @@ export const StyledHoverIconButton = styled.button<ButtonColors & HoverButtonPro
 );
 
 export const StyledHoverIcon = styled(Icon).attrs({
-  color: Colors.white60,
+  color: DeprecatedColors.white60,
 })({
   [`${StyledHoverIconButton}:hover &&`]: {
-    backgroundColor: Colors.white,
+    backgroundColor: DeprecatedColors.white,
   },
 });
 
@@ -96,19 +96,19 @@ export const StyledHoverInfoButton = styled(InfoButton)<ButtonColors & HoverButt
 );
 
 export function getButtonColor(selected: boolean, level: number, disabled?: boolean) {
-  let backgroundColor = Colors.blue60;
+  let backgroundColor = DeprecatedColors.blue60;
   if (selected) {
-    backgroundColor = Colors.green;
+    backgroundColor = DeprecatedColors.green;
   } else if (level === 1) {
-    backgroundColor = Colors.blue40;
+    backgroundColor = DeprecatedColors.blue40;
   } else if (level === 2) {
-    backgroundColor = Colors.blue20;
+    backgroundColor = DeprecatedColors.blue20;
   } else if (level === 3) {
-    backgroundColor = Colors.blue10;
+    backgroundColor = DeprecatedColors.blue10;
   }
 
   return {
     $backgroundColor: backgroundColor,
-    $backgroundColorHover: selected || disabled ? backgroundColor : Colors.blue80,
+    $backgroundColorHover: selected || disabled ? backgroundColor : DeprecatedColors.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 e069d33fbc..c50f8ef688 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 '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import { smallText } from '../common-styles';
 
 const StyledScopeBar = styled.div({
   display: 'flex',
   flexDirection: 'row',
-  backgroundColor: Colors.blue40,
+  backgroundColor: DeprecatedColors.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: DeprecatedColors.white,
   textAlign: 'center',
   border: 'none',
-  backgroundColor: props.selected ? Colors.green : 'transparent',
+  backgroundColor: props.selected ? DeprecatedColors.green : 'transparent',
   '&&:hover': {
-    backgroundColor: props.selected ? Colors.green : Colors.blue40,
+    backgroundColor: props.selected ? DeprecatedColors.green : DeprecatedColors.blue40,
   },
 }));
 
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 8064a05c56..c9de24b6cb 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 '../../lib/foundations';
+import { DeprecatedColors } from '../../lib/foundations';
 import * as Cell from '../cell';
 import { normalText, tinyText } from '../common-styles';
 import SearchBar from '../SearchBar';
@@ -23,7 +23,7 @@ export const StyledNavigationBarAttachment = styled.div({
 
 export const StyledFilterRow = styled.div({
   ...tinyText,
-  color: Colors.white,
+  color: DeprecatedColors.white,
   margin: '0 6px 16px',
 });
 
@@ -31,11 +31,11 @@ export const StyledFilter = styled.div({
   ...tinyText,
   display: 'inline-flex',
   alignItems: 'center',
-  backgroundColor: Colors.blue,
+  backgroundColor: DeprecatedColors.blue,
   borderRadius: '4px',
   padding: '3px 8px',
   marginLeft: '6px',
-  color: Colors.white,
+  color: DeprecatedColors.white,
 });
 
 export const StyledClearFilterButton = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
index 967ad3cd95..94fcee90f0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx
@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import { messages } from '../../../../../shared/gettext';
 import { getDownloadUrl } from '../../../../../shared/version';
 import { useAppContext } from '../../../../context';
-import { Colors } from '../../../../lib/foundations';
+import { DeprecatedColors } from '../../../../lib/foundations';
 import { useSelector } from '../../../../redux/store';
 import * as Cell from '../../../cell';
 import { LabelStack } from '../../../Layout';
@@ -36,7 +36,7 @@ export function AppVersionListItem() {
 
     const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage;
 
-    alertIcon = <Cell.CellIcon icon="alert-circle" color={Colors.red} />;
+    alertIcon = <Cell.CellIcon icon="alert-circle" color={DeprecatedColors.red} />;
     footer = (
       <Cell.CellFooter>
         <Cell.CellFooterText>{message}</Cell.CellFooterText>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
index a35d490a55..ca1b70a8e1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 import { messages } from '../../../../shared/gettext';
 import { BodySmall, Container, Flex, TitleBig, TitleLarge } from '../../../lib/components';
-import { Colors } from '../../../lib/foundations';
+import { DeprecatedColors } from '../../../lib/foundations';
 import { useHistory } from '../../../lib/history';
 import { useSelector } from '../../../redux/store';
 import { AppNavigationHeader } from '../../';
@@ -44,13 +44,13 @@ export const ChangelogView = () => {
                     {changelog.length ? (
                       <StyledList as="ul" $flexDirection="column" $gap="medium">
                         {changelog.map((item, i) => (
-                          <BodySmall as="li" key={i} color={Colors.white60}>
+                          <BodySmall as="li" key={i} color={DeprecatedColors.white60}>
                             {item}
                           </BodySmall>
                         ))}
                       </StyledList>
                     ) : (
-                      <BodySmall color={Colors.white60}>
+                      <BodySmall color={DeprecatedColors.white60}>
                         {messages.pgettext(
                           'changelog-view',
                           'No updates or changes were made in this release for this platform.',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
index 03481e2350..a47b360e91 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/Button.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { Colors, Radius, spacings } from '../../foundations';
+import { DeprecatedColors, Radius, spacings } from '../../foundations';
 import { ButtonBase } from './ButtonBase';
 import { ButtonProvider } from './ButtonContext';
 import { ButtonIcon, ButtonText, StyledButtonIcon, StyledButtonText } from './components';
@@ -15,19 +15,19 @@ const styles = {
   radius: Radius.radius4,
   variants: {
     primary: {
-      background: Colors.blue,
-      hover: Colors.blue60,
-      disabled: Colors.blue50,
+      background: DeprecatedColors.blue,
+      hover: DeprecatedColors.blue60,
+      disabled: DeprecatedColors.blue50,
     },
     success: {
-      background: Colors.green,
-      hover: Colors.green90,
-      disabled: Colors.green40,
+      background: DeprecatedColors.green,
+      hover: DeprecatedColors.green90,
+      disabled: DeprecatedColors.green40,
     },
     destructive: {
-      background: Colors.red,
-      hover: Colors.red80,
-      disabled: Colors.red60,
+      background: DeprecatedColors.red,
+      hover: DeprecatedColors.red80,
+      disabled: DeprecatedColors.red60,
     },
   },
   flex: {
@@ -75,7 +75,7 @@ export const StyledButton = styled(ButtonBase)<ButtonProps>`
       }
 
       &:focus-visible {
-        outline: 2px solid ${Colors.white};
+        outline: 2px solid ${DeprecatedColors.white};
         outline-offset: 2px;
       }
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
index b8a6d0582a..b70a312c71 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonIcon.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { Icon, IconProps } from '../../icon';
 import { useButtonContext } from '../ButtonContext';
 
@@ -14,7 +14,7 @@ export function ButtonIcon({ ...props }: ButtonIconProps) {
     <StyledButtonIcon
       size="medium"
       aria-hidden="true"
-      color={disabled ? Colors.white40 : Colors.white}
+      color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white}
       {...props}
     />
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
index a55a48e637..8bdaa4ea40 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/button/components/ButtonText.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { BodySmallSemiBold, BodySmallSemiBoldProps } from '../../typography';
 import { useButtonContext } from '../ButtonContext';
 
@@ -10,5 +10,10 @@ export const StyledButtonText = styled(BodySmallSemiBold)``;
 
 export function ButtonText<T extends React.ElementType = 'span'>(props: ButtonTextProps<T>) {
   const { disabled } = useButtonContext();
-  return <StyledButtonText color={disabled ? Colors.white40 : Colors.white} {...props} />;
+  return (
+    <StyledButtonText
+      color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white}
+      {...props}
+    />
+  );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx
index b042de86c6..46501bd894 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/dot/Dot.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../foundations';
+import { DeprecatedColors } from '../../foundations';
 
 export interface DotProps {
   variant?: 'primary' | 'success' | 'warning' | 'error';
@@ -21,10 +21,10 @@ const sizes = {
 };
 
 const colors = {
-  primary: Colors.white80,
-  success: Colors.green,
-  warning: Colors.yellow,
-  error: Colors.red,
+  primary: DeprecatedColors.white80,
+  success: DeprecatedColors.green,
+  warning: DeprecatedColors.yellow,
+  error: DeprecatedColors.red,
 };
 
 export const Dot = ({ variant = 'primary', size = 'medium', ...props }: DotProps) => {
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
index a1221f7f35..666dc6a5f3 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/FilterChip.tsx
@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
 import styled, { WebTarget } from 'styled-components';
 
-import { Colors, Radius } from '../../foundations';
+import { DeprecatedColors, Radius } from '../../foundations';
 import { buttonReset } from '../../styles';
 import { Flex } from '../flex';
 import { FilterChipIcon, FilterChipText } from './components';
@@ -12,9 +12,9 @@ export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonEl
 }
 
 const variables = {
-  background: Colors.blue,
-  hover: Colors.blue60,
-  disabled: Colors.blue50,
+  background: DeprecatedColors.blue,
+  hover: DeprecatedColors.blue60,
+  disabled: DeprecatedColors.blue50,
 } as const;
 
 const StyledButton = styled.button({
@@ -34,7 +34,7 @@ const StyledButton = styled.button({
     background: 'var(--disabled)',
   },
   '&:focus-visible': {
-    outline: `2px solid ${Colors.white}`,
+    outline: `2px solid ${DeprecatedColors.white}`,
   },
 });
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx
index d2138362ff..c101d4f9b0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipIcon.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { Icon, IconProps } from '../../icon';
 import { useFilterChipContext } from '../FilterChipContext';
 
@@ -10,5 +10,11 @@ export const StyledIcon = styled(Icon)({});
 
 export const FilterChipIcon = ({ ...props }: FilterChipIconProps) => {
   const { disabled } = useFilterChipContext();
-  return <Icon size="small" color={disabled ? Colors.white40 : Colors.white} {...props} />;
+  return (
+    <Icon
+      size="small"
+      color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white}
+      {...props}
+    />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
index 67e3952825..dfffdd1d6c 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/filter-chip/components/FilterChipText.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { BodySmallSemiBoldProps, LabelTiny } from '../../typography';
 import { useFilterChipContext } from '../FilterChipContext';
 
@@ -12,5 +12,7 @@ export const FilterChipText = <T extends React.ElementType = 'span'>(
   props: FilterChipTextProps<T>,
 ) => {
   const { disabled } = useFilterChipContext();
-  return <StyledText color={disabled ? Colors.white40 : Colors.white} {...props} />;
+  return (
+    <StyledText color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props} />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
index 7db42fdcf7..86b64633ee 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { Colors } from '../../foundations';
+import { DeprecatedColors } from '../../foundations';
 import { buttonReset } from '../../styles';
 import { IconProps, iconSizes } from '../icon/Icon';
 import { IconButtonIcon } from './components/IconButtonIcon';
@@ -20,7 +20,7 @@ const StyledButton = styled.button({
   width: 'var(--size)',
   borderRadius: '100%',
   '&:focus-visible': {
-    outline: `2px solid ${Colors.white}`,
+    outline: `2px solid ${DeprecatedColors.white}`,
     outlineOffset: '1px',
   },
 });
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
index a65d887469..8fcb709990 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/components/IconButtonIcon.tsx
@@ -1,20 +1,20 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { Icon, IconProps } from '../../icon/Icon';
 import { useIconButtonContext } from '../IconButtonContext';
 export type IconButtonIconProps = IconProps;
 
 const variants = {
   primary: {
-    background: Colors.white,
-    hover: Colors.white60,
-    disabled: Colors.white50,
+    background: DeprecatedColors.white,
+    hover: DeprecatedColors.white60,
+    disabled: DeprecatedColors.white50,
   },
   secondary: {
-    background: Colors.white60,
-    hover: Colors.white80,
-    disabled: Colors.white50,
+    background: DeprecatedColors.white60,
+    hover: DeprecatedColors.white80,
+    disabled: DeprecatedColors.white50,
   },
 } as const;
 
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
index 2f6a1fdd29..e387784485 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx
@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../foundations';
+import { DeprecatedColors } from '../../foundations';
 import { TransientProps } from '../../types';
 import { icons } from './types';
 
 export type IconProps = {
   icon: keyof typeof icons;
   size?: 'tiny' | 'small' | 'medium' | 'large' | 'big';
-  color?: Colors;
+  color?: DeprecatedColors;
   className?: string;
 } & React.HTMLAttributes<HTMLDivElement>;
 
@@ -34,7 +34,7 @@ const PATH_PREFIX = process.env.NODE_ENV === 'development' ? '../' : '';
 export const Icon = ({
   icon: iconProp,
   size = 'medium',
-  color = Colors.white,
+  color = DeprecatedColors.white,
   ...props
 }: IconProps) => {
   const icon = icons[iconProp];
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
index f9b423b37a..4af0f60345 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/link/Link.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Colors, Radius } from '../../foundations';
+import { DeprecatedColors, Radius } from '../../foundations';
 import { Text, TextProps } from '../typography';
 import { LinkIcon } from './components';
 
@@ -10,7 +10,7 @@ export type LinkProps<T extends React.ElementType = 'a'> = TextProps<T> & {
 };
 
 const StyledText = styled(Text)<{
-  $hoverColor: Colors | undefined;
+  $hoverColor: DeprecatedColors | undefined;
 }>((props) => ({
   background: 'transparent',
   cursor: 'default',
@@ -24,15 +24,15 @@ const StyledText = styled(Text)<{
   },
   '&&:focus-visible': {
     borderRadius: Radius.radius4,
-    outline: `2px solid ${Colors.white}`,
+    outline: `2px solid ${DeprecatedColors.white}`,
     outlineOffset: '2px',
   },
 }));
 
-const getHoverColor = (color: Colors | undefined) => {
+const getHoverColor = (color: DeprecatedColors | undefined) => {
   switch (color) {
-    case Colors.white60:
-      return Colors.white;
+    case DeprecatedColors.white60:
+      return DeprecatedColors.white;
     default:
       return undefined;
   }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
index f0f76c0de9..44e5bd732b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemLabel.tsx
@@ -1,4 +1,4 @@
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { LabelTinyProps, TitleMedium } from '../../typography';
 import { useListItem } from '../ListItemContext';
 
@@ -8,5 +8,7 @@ export const ListItemLabel = <E extends React.ElementType = 'span'>(
   props: ListItemLabelProps<E>,
 ) => {
   const { disabled } = useListItem();
-  return <TitleMedium color={disabled ? Colors.white40 : Colors.white} {...props} />;
+  return (
+    <TitleMedium color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props} />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
index 6ea5ab6437..187ca0fb75 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemText.tsx
@@ -1,4 +1,4 @@
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { Text, TextProps } from '../../typography';
 import { useListItem } from '../ListItemContext';
 
@@ -6,5 +6,11 @@ export type ListItemProps<E extends React.ElementType = 'span'> = TextProps<E>;
 
 export const ListItemText = <E extends React.ElementType = 'span'>(props: ListItemProps<E>) => {
   const { disabled } = useListItem();
-  return <Text variant="labelTiny" color={disabled ? Colors.white40 : Colors.white60} {...props} />;
+  return (
+    <Text
+      variant="labelTiny"
+      color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white60}
+      {...props}
+    />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx
index 7450fe1d49..bf607a4088 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/list-item/components/ListItemTrigger.tsx
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { ButtonBase } from '../../button';
 import { useListItem } from '../ListItemContext';
 import { StyledFlex } from './ListItemContent';
@@ -22,7 +22,7 @@ const StyledButton = styled(ButtonBase)<{ $disabled?: boolean }>`
     `}
 
   &&:focus-visible {
-    outline: 2px solid ${Colors.white};
+    outline: 2px solid ${DeprecatedColors.white};
     outline-offset: -1px;
     z-index: 10;
   }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
index 6912780b96..1da94c3028 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/main-header/MainHeader.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../foundations';
+import { DeprecatedColors } from '../../foundations';
 import { TransientProps } from '../../types';
 import { Flex } from '../flex';
 import { MainHeaderIconButton } from './components';
@@ -16,9 +16,9 @@ const sizes = {
 };
 
 const variants = {
-  default: Colors.blue,
-  error: Colors.red,
-  success: Colors.green,
+  default: DeprecatedColors.blue,
+  error: DeprecatedColors.red,
+  success: DeprecatedColors.green,
 };
 
 const StyledHeader = styled.header<TransientProps<HeaderProps>>(
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
index 9528139482..2e035b87c2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/navigation-header/NavigationHeader.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors, spacings } from '../../foundations';
+import { DeprecatedColors, spacings } from '../../foundations';
 import { TransientProps } from '../../types';
 import { Flex } from '../flex';
 import {
@@ -15,7 +15,7 @@ export type NavigationHeaderProps = React.PropsWithChildren<{
 }>;
 
 const StyledHeader = styled.nav<TransientProps<NavigationHeaderProps>>({
-  backgroundColor: Colors.darkBlue,
+  backgroundColor: DeprecatedColors.darkBlue,
 });
 
 export const StyledContent = styled.div({
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
index 73fb6e16d5..08a4d61055 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressPercent.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
@@ -15,7 +15,7 @@ export const ProgressPercent = <T extends React.ElementType = 'span'>(
 ) => {
   const { percent, disabled } = useProgress();
   return (
-    <StyledText color={disabled ? Colors.white40 : Colors.white} {...props}>
+    <StyledText color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white} {...props}>
       {`${Math.round(percent)}%`}
     </StyledText>
   );
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
index e0ffb6c745..c49d3339cd 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressRange.tsx
@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 
-import { Colors, Radius } from '../../../foundations';
+import { DeprecatedColors, Radius } from '../../../foundations';
 import { useProgress } from '../ProgressContext';
 
 const StyledDiv = styled.div<{
   disabled?: boolean;
 }>`
-  background-color: ${({ disabled }) => (disabled ? Colors.white50 : Colors.white)};
+  background-color: ${({ disabled }) =>
+    disabled ? DeprecatedColors.white50 : DeprecatedColors.white};
   border-radius: ${Radius.radius4};
   height: 100%;
   width: 100%;
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
index b5663bd4c7..ffcb22c745 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/progress/components/ProgressText.tsx
@@ -1,4 +1,4 @@
-import { Colors } from '../../../foundations';
+import { DeprecatedColors } from '../../../foundations';
 import { LabelTiny, LabelTinyProps } from '../../typography';
 import { useProgress } from '../ProgressContext';
 
@@ -6,5 +6,7 @@ export type ProgressTextProps<T extends React.ElementType = 'span'> = LabelTinyP
 
 export const ProgressText = <T extends React.ElementType = 'span'>(props: ProgressTextProps<T>) => {
   const { disabled } = useProgress();
-  return <LabelTiny color={disabled ? Colors.white40 : Colors.white60} {...props} />;
+  return (
+    <LabelTiny color={disabled ? DeprecatedColors.white40 : DeprecatedColors.white60} {...props} />
+  );
 };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx
index 55d0a5106f..d69bfb25fc 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/theme/Theme.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 import {
-  colors,
+  deprecatedColors,
   fontFamilies,
   fontSizes,
   fontWeights,
@@ -16,7 +16,7 @@ type VariablesProps = React.PropsWithChildren<object>;
 const VariablesGlobalStyle = createGlobalStyle`
   :root {
     ${Object.entries({
-      ...colors,
+      ...deprecatedColors,
       ...spacingPrimitives,
       ...radius,
       ...fontFamilies,
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
index cf42893f1f..9d15a40c03 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { Colors, Typography, typography } from '../../foundations';
+import { DeprecatedColors, Typography, typography } from '../../foundations';
 import { PolymorphicProps, TransientProps } from '../../types';
 
 type TextBaseProps = {
   variant?: Typography;
-  color?: Colors;
+  color?: DeprecatedColors;
 };
 
 export type TextProps<T extends React.ElementType = 'span'> = PolymorphicProps<T, TextBaseProps>;
 
 const StyledText = styled.span<TransientProps<TextBaseProps>>(
-  ({ $variant = 'bodySmall', $color = Colors.white }) => {
+  ({ $variant = 'bodySmall', $color = DeprecatedColors.white }) => {
     const { fontFamily, fontSize, fontWeight, lineHeight } = typography[$variant];
     return `
       --color: ${$color};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts
index fe42f71f4e..805646819e 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts
@@ -1,4 +1,4 @@
-export enum ColorTokens {
+export enum DeprecatedColorTokens {
   darkerBlue = 'rgba(25, 38, 56, 0.95)',
   darkBlue = 'rgb(25, 46, 69)',
   blue = 'rgb(41, 77, 115)',
diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts
index 50808598f4..798d8d1df2 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts
@@ -1,39 +1,39 @@
-import { ColorTokens } from '../tokens';
+import { DeprecatedColorTokens } from '../tokens';
 
-export const colors = {
-  '--color-darker-blue': ColorTokens.darkerBlue,
-  '--color-dark-blue': ColorTokens.darkBlue,
-  '--color-blue': ColorTokens.blue,
-  '--color-dark-green': ColorTokens.darkGreen,
-  '--color-green': ColorTokens.green,
-  '--color-red': ColorTokens.red,
-  '--color-darkYellow': ColorTokens.darkYellow,
-  '--color-yellow': ColorTokens.yellow,
-  '--color-black': ColorTokens.black,
-  '--color-white': ColorTokens.white,
-  '--color-white-90': ColorTokens.white90,
-  '--color-white-80': ColorTokens.white80,
-  '--color-white-60': ColorTokens.white60,
-  '--color-white-50': ColorTokens.white50,
-  '--color-white-40': ColorTokens.white40,
-  '--color-white-20': ColorTokens.white20,
-  '--color-white-10': ColorTokens.white10,
-  '--color-blue10': ColorTokens.blue10,
-  '--color-blue-20': ColorTokens.blue20,
-  '--color-blue-40': ColorTokens.blue40,
-  '--color-blue-50': ColorTokens.blue50,
-  '--color-blue-60': ColorTokens.blue60,
-  '--color-blue-80': ColorTokens.blue80,
-  '--color-red-95': ColorTokens.red95,
-  '--color-red-80': ColorTokens.red80,
-  '--color-red-60': ColorTokens.red60,
-  '--color-red-45': ColorTokens.red45,
-  '--color-red-40': ColorTokens.red40,
-  '--color-green-90': ColorTokens.green90,
-  '--color-green-40': ColorTokens.green40,
+export const deprecatedColors = {
+  '--color-darker-blue': DeprecatedColorTokens.darkerBlue,
+  '--color-dark-blue': DeprecatedColorTokens.darkBlue,
+  '--color-blue': DeprecatedColorTokens.blue,
+  '--color-dark-green': DeprecatedColorTokens.darkGreen,
+  '--color-green': DeprecatedColorTokens.green,
+  '--color-red': DeprecatedColorTokens.red,
+  '--color-darkYellow': DeprecatedColorTokens.darkYellow,
+  '--color-yellow': DeprecatedColorTokens.yellow,
+  '--color-black': DeprecatedColorTokens.black,
+  '--color-white': DeprecatedColorTokens.white,
+  '--color-white-90': DeprecatedColorTokens.white90,
+  '--color-white-80': DeprecatedColorTokens.white80,
+  '--color-white-60': DeprecatedColorTokens.white60,
+  '--color-white-50': DeprecatedColorTokens.white50,
+  '--color-white-40': DeprecatedColorTokens.white40,
+  '--color-white-20': DeprecatedColorTokens.white20,
+  '--color-white-10': DeprecatedColorTokens.white10,
+  '--color-blue10': DeprecatedColorTokens.blue10,
+  '--color-blue-20': DeprecatedColorTokens.blue20,
+  '--color-blue-40': DeprecatedColorTokens.blue40,
+  '--color-blue-50': DeprecatedColorTokens.blue50,
+  '--color-blue-60': DeprecatedColorTokens.blue60,
+  '--color-blue-80': DeprecatedColorTokens.blue80,
+  '--color-red-95': DeprecatedColorTokens.red95,
+  '--color-red-80': DeprecatedColorTokens.red80,
+  '--color-red-60': DeprecatedColorTokens.red60,
+  '--color-red-45': DeprecatedColorTokens.red45,
+  '--color-red-40': DeprecatedColorTokens.red40,
+  '--color-green-90': DeprecatedColorTokens.green90,
+  '--color-green-40': DeprecatedColorTokens.green40,
 };
 
-export enum Colors {
+export enum DeprecatedColors {
   darkerBlue = 'var(--color-darker-blue)',
   darkBlue = 'var(--color-dark-blue)',
   blue = 'var(--color-blue)',
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 bb24049b66..6e995758cd 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/renderer/lib/foundations';
+import { deprecatedColors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -99,16 +99,19 @@ 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['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const automaticButton = page.getByText('Automatic');
   await automaticButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).not.toHaveCSS('background-color', colors['--color-green']);
+  await expect(customBridgeButton).not.toHaveCSS(
+    'background-color',
+    deprecatedColors['--color-green'],
+  );
 
   await customBridgeButton.click();
   await page.getByText(/^Entry$/).click();
-  await expect(customBridgeButton).toHaveCSS('background-color', colors['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
 });
 
 test('App should edit custom bridge', async () => {
@@ -135,7 +138,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['--color-green']);
+  await expect(customBridgeButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
 });
 
 test('App should delete custom bridge', async () => {
@@ -155,5 +158,8 @@ 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['--color-green']);
+  await expect(customBridgeButton).not.toHaveCSS(
+    'background-color',
+    deprecatedColors['--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 17449a6318..5de49c5da7 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/renderer/lib/foundations';
+import { deprecatedColors } from '../../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../../src/renderer/lib/routes';
 import { TestUtils } from '../../utils';
 import { startInstalledApp } from '../installed-utils';
@@ -36,7 +36,7 @@ test('App should have automatic obfuscation', async () => {
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const automatic = page.getByTestId('automatic-obfuscation');
-  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--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 () => {
   await util.waitForRoute(RoutePath.shadowsocks);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const customInput = page.locator('input[type="text"]');
   await customInput.click();
@@ -57,14 +57,14 @@ 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['--color-green']);
+  await expect(customItem).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const shadowsocksItem = page.locator('button', { hasText: 'Shadowsocks' });
   await shadowsocksItem.click();
-  await expect(shadowsocksItem).toHaveCSS('background-color', colors['--color-green']);
+  await expect(shadowsocksItem).toHaveCSS('background-color', deprecatedColors['--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 () => {
   await util.waitForRoute(RoutePath.shadowsocks);
 
   const customItem = page.locator('div[role="option"]', { hasText: 'Custom' });
-  await expect(customItem).toHaveCSS('background-color', colors['--color-green']);
+  await expect(customItem).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
@@ -87,19 +87,19 @@ test('App should set obfuscation to UDP-over-TCP with port', async () => {
   await util.waitForRoute(RoutePath.udpOverTcp);
 
   const automatic = page.locator('button', { hasText: 'Automatic' });
-  await expect(automatic).toHaveCSS('background-color', colors['--color-green']);
+  await expect(automatic).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const portButton = page.locator('button', { hasText: UDPOVERTCP_PORT });
   await portButton.click();
 
-  await expect(portButton).toHaveCSS('background-color', colors['--color-green']);
+  await expect(portButton).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   await page.click('button[aria-label="Back"]');
   await util.waitForRoute(RoutePath.wireguardSettings);
 
   const udpOverTcpItem = page.locator('button', { hasText: 'UDP-over-TCP' });
   await udpOverTcpItem.click();
-  await expect(udpOverTcpItem).toHaveCSS('background-color', colors['--color-green']);
+  await expect(udpOverTcpItem).toHaveCSS('background-color', deprecatedColors['--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 bda3237e1a..901338ead6 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/renderer/lib/foundations';
+import { deprecatedColors } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import { IAccountData } from '../../../src/shared/daemon-rpc-types';
 import { getBackgroundColor } from '../utils';
@@ -28,11 +28,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['--color-green']);
+  expect(await getBackgroundColor(buyMoreButton)).toBe(deprecatedColors['--color-green']);
 
   const redeemVoucherButton = page.locator('button:has-text("Redeem voucher")');
   await expect(redeemVoucherButton).toBeVisible();
-  expect(await getBackgroundColor(redeemVoucherButton)).toBe(colors['--color-green']);
+  expect(await getBackgroundColor(redeemVoucherButton)).toBe(deprecatedColors['--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 f8e0ad8014..3626465cee 100644
--- a/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
+++ b/desktop/packages/mullvad-vpn/test/e2e/mocked/notifications.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
 import { getDefaultSettings } from '../../../src/main/default-settings';
-import { colors } from '../../../src/renderer/lib/foundations';
+import { deprecatedColors } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import {
   Constraint,
@@ -44,7 +44,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['--color-yellow']);
+  expect(indicatorColor).toBe(deprecatedColors['--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 895db6f4e3..529c8e09d9 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
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { Page } from 'playwright';
 
 import { getDefaultSettings } from '../../../src/main/default-settings';
-import { colors } from '../../../src/renderer/lib/foundations';
+import { deprecatedColors } from '../../../src/renderer/lib/foundations';
 import { RoutePath } from '../../../src/renderer/lib/routes';
 import {
   IRelayList,
@@ -93,7 +93,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['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -102,7 +102,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['--color-green']);
+  await expect(exitTab).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).toBeVisible();
@@ -123,7 +123,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['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', deprecatedColors['--color-green']);
 
   const sweden = page.getByText('Sweden');
   await expect(sweden).not.toBeVisible();
@@ -144,7 +144,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['--color-green']);
+  await expect(entryTab).toHaveCSS('background-color', deprecatedColors['--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 bcae99dc5a..99d9b3fe3d 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,22 @@
 import { expect } from '@playwright/test';
 import { Page } from 'playwright';
 
-import { colors } from '../../../src/renderer/lib/foundations';
+import { deprecatedColors } from '../../../src/renderer/lib/foundations';
 import { anyOf } from '../utils';
 
-const DISCONNECTED_COLOR = colors['--color-red'];
-const CONNECTED_COLOR = colors['--color-green'];
-const WHITE_COLOR = colors['--color-white'];
+const DISCONNECTED_COLOR = deprecatedColors['--color-red'];
+const CONNECTED_COLOR = deprecatedColors['--color-green'];
+const WHITE_COLOR = deprecatedColors['--color-white'];
 
-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 DISCONNECTED_BUTTON_COLOR = anyOf(
+  deprecatedColors['--color-red'],
+  deprecatedColors['--color-red-80'],
+);
+const DISCONNECTING_BUTTON_COLOR = anyOf(deprecatedColors['--color-green-40']);
+const CONNECTED_BUTTON_COLOR = anyOf(
+  deprecatedColors['--color-green'],
+  deprecatedColors['--color-green-90'],
+);
 
 const getLabel = (page: Page) => page.locator('span[role="status"]');
 const getHeader = (page: Page) => page.locator('header');