diff --git a/apps/cowswap-frontend/src/common/constants/theme.ts b/apps/cowswap-frontend/src/common/constants/theme.ts
index 3db5151bd0..ab8d856215 100644
--- a/apps/cowswap-frontend/src/common/constants/theme.ts
+++ b/apps/cowswap-frontend/src/common/constants/theme.ts
@@ -8,13 +8,14 @@ export enum UI {
   COLOR_PAPER_DARKER = '--cow-color-paper-darker',
   COLOR_PAPER_DARKEST = '--cow-color-paper-darkest',
 
-  COLOR_PRIMARY_TEXT = '--cow-color-primary-text',
-  COLOR_PRIMARY_TEXT_OPACITY_70 = '--cow-color-primary-text-opacity-70',
-  COLOR_PRIMARY_TEXT_OPACITY_25 = '--cow-color-primary-text-opacity-25',
-  COLOR_PRIMARY_TEXT_OPACITY_10 = '--cow-color-primary-text-opacity-10',
+  COLOR_TEXT = '--cow-color-text',
+  COLOR_TEXT_OPACITY_70 = '--cow-color-text-opacity-70',
+  COLOR_TEXT_OPACITY_25 = '--cow-color-text-opacity-25',
+  COLOR_TEXT_OPACITY_10 = '--cow-color-text-opacity-10',
 
   COLOR_SECONDARY_TEXT = '--cow-color-secondary-text',
   COLOR_DISABLED_TEXT = '--cow-color-disabled-text',
+  COLOR_BUTTON_TEXT = '--cow-color-button-text',
 
   COLOR_WARNING = '--cow-color-warning',
   COLOR_WARNING_BG = '--cow-color-warning-bg',
diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModal.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModal.tsx
index 159bcfd417..18e32ea799 100644
--- a/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModal.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModal.tsx
@@ -21,7 +21,7 @@ const Description = styled.p`
 `
 
 const Warning = styled.strong`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 export interface ConfirmationModalProps {
diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModalHeader.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModalHeader.tsx
index 6a39c75d22..80d2879ce1 100644
--- a/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModalHeader.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ConfirmationModal/ConfirmationModalHeader.tsx
@@ -12,7 +12,7 @@ const Container = styled.header`
   padding: 0 0 16px;
   margin: 0 0 24px;
   border-bottom: 1px solid ${({ theme }) => theme.grey1};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 const Title = styled.b`
@@ -32,7 +32,7 @@ const Close = styled(CloseIcon)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
index 5e56d6f356..9618640ded 100644
--- a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
@@ -148,7 +148,7 @@ export const ButtonCustom = styled.button`
   border-radius: 16px;
   min-height: 52px;
   border: 1px solid ${({ theme }) => theme.border2};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: transparent;
   outline: 0;
   padding: 8px 16px;
@@ -240,7 +240,7 @@ export const StepsIconWrapper = styled.div`
     height: 100%;
     width: 100%;
     padding: 18px;
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 
   @keyframes spin {
@@ -298,7 +298,7 @@ export const StepsWrapper = styled.div`
     flex: 1 1 auto;
     height: 2px;
     border: 0;
-    background: var(${UI.COLOR_PRIMARY_TEXT});
+    background: var(${UI.COLOR_TEXT});
     margin: auto;
     position: absolute;
     width: 100%;
@@ -403,7 +403,7 @@ export const CompareItem = styled.div<{ highlight?: boolean; recommended?: boole
   font-size: 13px;
   background: ${({ theme, highlight }) =>
     highlight ? (theme.darkMode ? transparentize(0.8, theme.text3) : transparentize(0.9, theme.text3)) : theme.bg1};
-  border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_PRIMARY_TEXT})`))};
+  border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_TEXT})`))};
   position: relative;
 
   &::before {
@@ -439,7 +439,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
   padding: 0;
   list-style: none;
   font-size: inherit;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   gap: 6px;
   display: flex;
   flex-flow: column wrap;
@@ -477,7 +477,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
       listIconAlert &&
       css`
         > path {
-          fill: ${transparentize(0.6, theme.primaryText)};
+          fill: ${transparentize(0.6, theme.text)};
         }
       `}
   }
@@ -502,7 +502,7 @@ export const ApproveFooter = styled.div`
     padding: 0;
     list-style: none;
     font-size: inherit;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
     gap: 6px;
     display: flex;
     flex-flow: column wrap;
diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx
index 5ca0b5c4c3..7aea06b34a 100644
--- a/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx
@@ -19,7 +19,7 @@ const Input = styled.input`
   padding: 10px;
   border-radius: 4px;
   background: ${({ theme }) => theme.bg3};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   outline: none;
   font-size: 15px;
 
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx
index b6460e1a46..89bd7e6631 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx
@@ -43,8 +43,8 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean; border?: boolean
   transform-origin: center right;
   transition: transform 0.25s;
   border: ${({ border, theme }) => (border ? `1px solid ${theme.grey1}` : '0')};
-  box-shadow: 0px 0px 0px 3px ${({ theme }) => theme.bg1};
-  background: var(${UI.COLOR_GREY});
+  box-shadow: 0 0 0 3px ${({ theme }) => theme.paper};
+  background: var(${UI.COLOR_PAPER_DARKER});
   border-radius: 8px;
   width: var(--size);
   margin: auto;
@@ -59,7 +59,7 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean; border?: boolean
 export const ArrowDownIcon = styled(ArrowDown)`
   display: block;
   margin: auto;
-  stroke: var(${UI.COLOR_PRIMARY_TEXT});
+  stroke: var(${UI.COLOR_TEXT});
   stroke-width: 3px;
   padding: 0;
   height: 100%;
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx
index 1323f2cbd3..8c09de1166 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/styled.tsx
@@ -40,7 +40,7 @@ export const CurrencyInputBox = styled.div`
   margin: 0;
   font-weight: 400;
   font-size: 13px;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     gap: 8px;
@@ -62,7 +62,7 @@ export const CurrencyTopLabel = styled.div`
   font-size: 13px;
   font-weight: 400;
   margin: auto 0;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
 `
 
 export const NumericalInput = styled(Input)<{ $loading: boolean }>`
@@ -73,10 +73,10 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
   background: none;
   font-size: 28px;
   font-weight: 500;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   &::placeholder {
-    color: ${({ theme }) => transparentize(0.3, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.3, theme.text)};
   }
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -89,7 +89,7 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
 export const TokenAmountStyled = styled(TokenAmount)`
   font-size: 28px;
   font-weight: 500;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     font-size: 26px;
diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
index 23e742265a..2b17d01fd3 100644
--- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
@@ -14,11 +14,9 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe
   border: ${({ theme }) => (theme.darkMode ? `1px solid ${transparentize(0.5, theme.grey1)}` : 0)};
   outline: none;
   background-color: ${({ $stubbed, theme }) => ($stubbed ? lighten(0.1, theme.primary) : `var(${UI.COLOR_PAPER})`)};
-  color: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_PRIMARY_TEXT})` : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ $stubbed }) => ($stubbed ? `var(${UI.COLOR_TEXT})` : `var(${UI.COLOR_TEXT})`)};
   box-shadow: ${({ theme }) =>
-    theme.darkMode
-      ? `0px 4px 8px ${transparentize(0.32, theme.black)}`
-      : `0px 4px 8px ${`var(${UI.COLOR_PRIMARY_TEXT})`}`};
+    theme.darkMode ? `0px 4px 8px ${transparentize(0.32, theme.black)}` : `0px 4px 8px ${`var(${UI.COLOR_TEXT})`}`};
   opacity: ${({ isLoading }) => (isLoading ? 0.6 : 1)};
   pointer-events: ${({ readonlyMode }) => (readonlyMode ? 'none' : '')};
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
@@ -41,7 +39,7 @@ export const ArrowDown = styled(DropDown)<{ $stubbed?: boolean }>`
   min-height: 7px;
 
   > path {
-    stroke: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+    stroke: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_TEXT})`)};
     stroke-width: 2px;
   }
 
@@ -54,7 +52,7 @@ export const CurrencySymbol = styled.div<{ $stubbed: boolean }>`
   font-size: 19px;
   font-weight: 500;
   text-align: left;
-  color: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ $stubbed, theme }) => ($stubbed ? theme.white : `var(${UI.COLOR_TEXT})`)};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     font-size: 16px;
diff --git a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx
index 511d9f236b..b2345072eb 100644
--- a/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/ExpertModeModal/index.tsx
@@ -23,7 +23,7 @@ const ModalContentWrapper = styled.div`
   }
 
   > p > strong {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
@@ -34,7 +34,7 @@ const Header = styled.div`
   padding: 0 0 16px;
   margin: 0 0 24px;
   border-bottom: 1px solid ${({ theme }) => theme.grey1};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   > b {
     font-size: 21px;
@@ -54,7 +54,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/common/pure/FiatValue/index.tsx b/apps/cowswap-frontend/src/common/pure/FiatValue/index.tsx
index 4ff9f9651f..f9813ea9dc 100644
--- a/apps/cowswap-frontend/src/common/pure/FiatValue/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/FiatValue/index.tsx
@@ -13,7 +13,7 @@ import { PriceImpactIndicator } from '../PriceImpactIndicator'
 const FiatValueWrapper = styled.div<{ hasValue$: boolean }>`
   display: inline-block;
   font-size: 14px;
-  color: ${({ theme, hasValue$ }) => (hasValue$ ? `var(${UI.COLOR_PRIMARY_TEXT})` : theme.text4)};
+  color: ${({ theme, hasValue$ }) => (hasValue$ ? `var(${UI.COLOR_TEXT})` : theme.text4)};
 `
 
 export function FiatValue({
diff --git a/apps/cowswap-frontend/src/common/pure/Icon/index.tsx b/apps/cowswap-frontend/src/common/pure/Icon/index.tsx
index 2b1ec278b1..36d48b56aa 100644
--- a/apps/cowswap-frontend/src/common/pure/Icon/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/Icon/index.tsx
@@ -57,7 +57,7 @@ const Wrapper = styled.div<Omit<IconProps, 'image'>>`
   }
 
   > svg > path {
-    fill: ${({ color = UI.COLOR_TEXT1 }) => `var(${color})`};
+    fill: ${({ color = UI.COLOR_TEXT }) => `var(${color})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/common/pure/Modal/index.tsx b/apps/cowswap-frontend/src/common/pure/Modal/index.tsx
index 99c9671ba1..bc448bc979 100644
--- a/apps/cowswap-frontend/src/common/pure/Modal/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/Modal/index.tsx
@@ -97,7 +97,7 @@ export const CowModal = styled(Modal)<{
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
 
   > [data-reach-dialog-content] {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     width: 100%;
     max-width: ${({ maxWidth = 500 }) => `${maxWidth}px`};
     border: ${({ border = 'inherit' }) => `${border}`};
diff --git a/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx b/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
index d147c96752..abaf614976 100644
--- a/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/Modal/styled.tsx
@@ -29,7 +29,7 @@ export const CloseIcon = styled.div`
 
 export const HoverText = styled.div`
   text-decoration: none;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   display: flex;
   align-items: center;
 
diff --git a/apps/cowswap-frontend/src/common/pure/NetworksList/styled.tsx b/apps/cowswap-frontend/src/common/pure/NetworksList/styled.tsx
index c361784566..159c26168b 100644
--- a/apps/cowswap-frontend/src/common/pure/NetworksList/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/NetworksList/styled.tsx
@@ -19,7 +19,7 @@ export const ActiveRowLinkList = styled.div`
 
   & > a {
     align-items: center;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     display: flex;
     flex-direction: row;
     font-size: 14px;
@@ -51,11 +51,11 @@ export const FlyoutRow = styled.div<{ active: boolean }>`
   padding: 6px 8px;
   text-align: left;
   width: 100%;
-  color: ${({ active, theme }) => (active ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ active, theme }) => (active ? theme.white : `var(${UI.COLOR_TEXT})`)};
 
   &:hover {
     color: ${({ theme, active }) => !active && theme.text1};
-    background: ${({ theme, active }) => !active && transparentize(0.9, theme.primaryText)};
+    background: ${({ theme, active }) => !active && transparentize(0.9, theme.text)};
   }
 
   transition: background 0.13s ease-in-out;
diff --git a/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/RateTooltipHeader.tsx b/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/RateTooltipHeader.tsx
index 431504aa1c..56e6d2b015 100644
--- a/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/RateTooltipHeader.tsx
+++ b/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/RateTooltipHeader.tsx
@@ -18,7 +18,7 @@ const Content = styled.div`
     line-height: 1.5;
     padding: 0;
     margin: 0;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   > h3 {
diff --git a/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/index.tsx b/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/index.tsx
index 755f28f892..f79e9ef524 100644
--- a/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/OrderExecutionStatusList/index.tsx
@@ -55,7 +55,7 @@ export const ExecuteIndicator = styled.div<{ status?: OrderExecutionStatus }>`
         return theme.text3
       case 'notClose':
       default:
-        return transparentize(0.5, `var(${UI.COLOR_PRIMARY_TEXT})`)
+        return transparentize(0.5, `var(${UI.COLOR_TEXT})`)
     }
   }};
 `
diff --git a/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx b/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx
index 185f753d60..1a36f6f25a 100644
--- a/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/PriceImpactIndicator/index.tsx
@@ -17,7 +17,7 @@ function getPriceImpactColor(theme: DefaultTheme, priceImpact: Percent): string
   const severity = warningSeverity(priceImpact)
 
   if (severity === -1) return theme.success
-  if (severity < 1) return theme.primaryText
+  if (severity < 1) return theme.text
   if (severity < 3) return theme.danger
 
   return theme.danger
diff --git a/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx b/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
index dbaef5c6b8..1891f5b372 100644
--- a/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/RateInfo/index.tsx
@@ -55,18 +55,18 @@ const RateLabel = styled.div`
   gap: 5px;
   text-align: left;
   transition: color 0.15s ease-in-out;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
 
   &:hover {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
 const InvertIcon = styled.div`
   --size: 17px;
   cursor: pointer;
-  background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
+  color: ${`var(${UI.COLOR_TEXT})`};
   width: var(--size);
   height: var(--size);
   min-width: var(--size);
@@ -107,7 +107,7 @@ export const RateWrapper = styled.button`
 `
 
 export const FiatRate = styled.span`
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
   font-weight: 400;
   text-align: right;
 `
diff --git a/apps/cowswap-frontend/src/common/pure/Stepper/index.tsx b/apps/cowswap-frontend/src/common/pure/Stepper/index.tsx
index e160560931..ddb731d71d 100644
--- a/apps/cowswap-frontend/src/common/pure/Stepper/index.tsx
+++ b/apps/cowswap-frontend/src/common/pure/Stepper/index.tsx
@@ -22,16 +22,16 @@ interface StepStyles {
 }
 
 const stateStyles: Record<StepState, StepStyles> = {
-  active: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_TEXT1 },
-  finished: { dotBackground: UI.COLOR_LINK_OPACITY_10, dotColor: UI.COLOR_LINK, labelColor: UI.COLOR_TEXT1 },
+  active: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_TEXT },
+  finished: { dotBackground: UI.COLOR_LINK_OPACITY_10, dotColor: UI.COLOR_LINK, labelColor: UI.COLOR_TEXT },
   disabled: {
-    dotBackground: UI.COLOR_TEXT1_OPACITY_25,
-    dotColor: UI.COLOR_TEXT1_OPACITY_25,
-    labelColor: UI.COLOR_TEXT1_OPACITY_25,
+    dotBackground: UI.COLOR_TEXT_OPACITY_25,
+    dotColor: UI.COLOR_TEXT_OPACITY_25,
+    labelColor: UI.COLOR_TEXT_OPACITY_25,
   },
   error: { dotBackground: UI.COLOR_DANGER_BG, dotColor: UI.COLOR_DANGER, labelColor: UI.COLOR_DANGER },
   loading: { dotBackground: UI.COLOR_LINK, dotColor: UI.COLOR_PAPER, labelColor: UI.COLOR_LINK },
-  open: { dotBackground: UI.COLOR_TEXT1_OPACITY_10, dotColor: UI.COLOR_TEXT2, labelColor: UI.COLOR_TEXT2 },
+  open: { dotBackground: UI.COLOR_TEXT_OPACITY_10, dotColor: UI.COLOR_TEXT2, labelColor: UI.COLOR_TEXT2 },
 }
 
 const Step = styled.div<StepProps>`
@@ -90,7 +90,7 @@ const Step = styled.div<StepProps>`
         ? `var(${stateStyles['error'].dotBackground})`
         : stepState === 'finished'
         ? `var(${stateStyles['finished'].dotBackground})`
-        : `var(${UI.COLOR_TEXT1_OPACITY_25})`};
+        : `var(${UI.COLOR_TEXT_OPACITY_25})`};
     border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   }
 
diff --git a/apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/styled.tsx b/apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/styled.tsx
index 66f7c0d2f2..0ea20cabea 100644
--- a/apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/styled.tsx
+++ b/apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/styled.tsx
@@ -13,7 +13,7 @@ export const ButtonCustom = styled.button`
   border-radius: 16px;
   min-height: 52px;
   border: 1px solid ${({ theme }) => theme.border2};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: transparent;
   outline: 0;
   padding: 8px 16px;
diff --git a/apps/cowswap-frontend/src/legacy/components/AddressInputPanel/index.tsx b/apps/cowswap-frontend/src/legacy/components/AddressInputPanel/index.tsx
index 673904eec3..b219901e64 100644
--- a/apps/cowswap-frontend/src/legacy/components/AddressInputPanel/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/AddressInputPanel/index.tsx
@@ -45,7 +45,7 @@ const Input = styled.input<{ error?: boolean }>`
   flex: 1 1 auto;
   background: none;
   transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.red1 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ error, theme }) => (error ? theme.red1 : `var(${UI.COLOR_TEXT})`)};
   overflow: hidden;
   text-overflow: ellipsis;
   font-weight: 500;
diff --git a/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx b/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx
index 582c8cdfd4..e664cc6e1b 100644
--- a/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx
@@ -12,7 +12,7 @@ import { useCombinedBalance } from '../../hooks/useCombinedBalance'
 
 export const Wrapper = styled.div<{ isLoading: boolean }>`
   background-color: transparent;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 6px 12px;
   border: 2px solid transparent;
   font-weight: 500;
@@ -36,7 +36,7 @@ export const Wrapper = styled.div<{ isLoading: boolean }>`
   `};
 
   &:hover {
-    border: 2px solid ${({ theme }) => transparentize(0.7, theme.primaryText)};
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text)};
   }
 
   ${({ theme, isLoading }) =>
diff --git a/apps/cowswap-frontend/src/legacy/components/CowSubsidyModal/SubsidyTable.tsx b/apps/cowswap-frontend/src/legacy/components/CowSubsidyModal/SubsidyTable.tsx
index f57addc1ab..5d2f0ce4d4 100644
--- a/apps/cowswap-frontend/src/legacy/components/CowSubsidyModal/SubsidyTable.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/CowSubsidyModal/SubsidyTable.tsx
@@ -50,8 +50,8 @@ const SubsidyTr = styled.tr<{ selected?: boolean; darkMode?: boolean }>`
   }
 
   &:hover > td {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
-    background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+    color: ${`var(${UI.COLOR_TEXT})`};
+    background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
   }
 
   > th {
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
index 6adfe3680e..8074baad02 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx
@@ -43,7 +43,7 @@ export const Wrapper = styled.div<{ active: boolean }>`
   }
 
   &:hover {
-    border: 2px solid ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    border: 2px solid ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx
index 56ff801e5b..99653f41f7 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx
@@ -12,7 +12,7 @@ const Wrapper = styled.div<{ isMobileMenuOpen: boolean; height?: number; width?:
   height: ${({ height = 18 }) => `${height}px`};
 
   span {
-    background-color: var(${UI.COLOR_PRIMARY_TEXT});
+    background-color: ${`var(${UI.COLOR_TEXT})`};
     border-radius: 3px;
     height: ${({ lineSize = 2 }) => `${lineSize}px`};
     position: absolute;
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/NetworkSelector/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/NetworkSelector/index.tsx
index d29a5f93ae..da2d1ba17f 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/NetworkSelector/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/NetworkSelector/index.tsx
@@ -20,7 +20,7 @@ import { useOnSelectNetwork } from 'common/hooks/useOnSelectNetwork'
 import { NetworksList } from 'common/pure/NetworksList'
 
 const FlyoutHeader = styled.div`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-weight: 400;
 `
 
@@ -80,7 +80,7 @@ const SelectorLabel = styled.div`
 `
 const SelectorControls = styled.div<{ isChainIdUnsupported: boolean }>`
   align-items: center;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   display: flex;
   font-weight: 500;
   justify-content: space-between;
@@ -103,7 +103,7 @@ const SelectorControls = styled.div<{ isChainIdUnsupported: boolean }>`
   }
 
   &:hover {
-    border: 2px solid ${({ theme }) => transparentize(0.7, theme.primaryText)};
+    border: 2px solid ${({ theme }) => transparentize(0.7, theme.text)};
   }
 
   ${({ isChainIdUnsupported, theme }) =>
@@ -118,6 +118,7 @@ const SelectorLogo = styled.img<{ interactive?: boolean }>`
   width: 24px;
   height: 24px;
   margin-right: ${({ interactive }) => (interactive ? 8 : 0)}px;
+
   @media screen and (min-width: ${MEDIA_WIDTHS.upToSmall}px) {
     margin-right: 8px;
   }
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/Polling.tsx b/apps/cowswap-frontend/src/legacy/components/Header/Polling.tsx
index 3da01ecc8e..56b47d3c4c 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/Polling.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/Polling.tsx
@@ -101,7 +101,7 @@ export const Spinner = styled.div<{ warning: boolean }>`
 
 const Wrapper = styled.div`
   ${StyledPolling} {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     position: relative;
     margin: 0;
     padding: 0;
@@ -111,7 +111,7 @@ const Wrapper = styled.div`
     opacity: 1;
 
     a {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
       opacity: 0.5;
       transition: opacity 0.3s ease-in-out;
       text-decoration: none;
@@ -128,7 +128,7 @@ const Wrapper = styled.div`
 
     ${StyledPollingNumber} > a {
       opacity: 1;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
 
       &:hover {
         opacity: 1;
@@ -139,7 +139,7 @@ const Wrapper = styled.div`
 
   ${StyledGasDot},
   ${StyledPollingDot} {
-    background: var(${UI.COLOR_PRIMARY_TEXT});
+    background: var(${UI.COLOR_TEXT});
   }
 
   ${StyledPollingDot} {
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
index b14a97dea6..9d3637a402 100644
--- a/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Header/styled.tsx
@@ -66,12 +66,12 @@ export const StyledNavLinkUni = styled(NavLink)`
   &.${activeClassName} {
     border-radius: 12px;
     font-weight: 600;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   :hover,
   :focus {
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
@@ -100,7 +100,7 @@ export const StyledMenuButton = styled.button`
     margin-top: 2px;
   }
   > * {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
@@ -150,7 +150,7 @@ export const HeaderElementUni = styled.div`
 
 export const StyledNavLink = styled(StyledNavLinkUni)`
   transition: color 0.15s ease-in-out;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   &:first-of-type {
     margin: 0 12px 0 0;
@@ -158,7 +158,7 @@ export const StyledNavLink = styled(StyledNavLinkUni)`
 
   &:hover,
   &:focus {
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
@@ -248,7 +248,7 @@ export const HeaderModWrapper = styled(HeaderMod)``
 export const Title = styled(TitleMod)<{ isMobileMenuOpen: boolean }>`
   margin: 0;
   text-decoration: none;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
     ${
@@ -288,8 +288,8 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
       font-weight: 600;
       font-size: 17px;
       padding: 28px 10px;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
-      border-bottom: 1px solid ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+      color: ${`var(${UI.COLOR_TEXT})`};
+      border-bottom: 1px solid ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
     `}
 
     > svg > path {
@@ -298,15 +298,15 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     }
 
     &:hover {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
-      background: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+      color: ${`var(${UI.COLOR_TEXT})`};
+      background: ${`var(${UI.COLOR_TEXT})`};
 
       ${({ theme }) => theme.mediaWidth.upToLarge`
         background: transparent;
       `};
 
       > svg > path {
-        fill: var(${UI.COLOR_PRIMARY_TEXT});
+        fill: var(${UI.COLOR_TEXT});
       }
     }
 
@@ -321,7 +321,7 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
     }
 
     &.ACTIVE {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
       font-weight: 600;
     }
   }
@@ -403,11 +403,11 @@ export const TwitterLink = styled(StyledMenuButton)`
   }
 
   > a > svg > path {
-    fill: var(${UI.COLOR_PRIMARY_TEXT});
+    fill: var(${UI.COLOR_TEXT});
   }
 
   > a:hover > svg > path {
-    fill: var(${UI.COLOR_PRIMARY_TEXT});
+    fill: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/HoverInlineText/index.tsx b/apps/cowswap-frontend/src/legacy/components/HoverInlineText/index.tsx
index 9c981feead..92cab5de49 100644
--- a/apps/cowswap-frontend/src/legacy/components/HoverInlineText/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/HoverInlineText/index.tsx
@@ -12,7 +12,7 @@ export const TextWrapper = styled.span<{
   textColor?: string
 }>`
   margin-left: ${({ margin }) => margin && '4px'};
-  color: ${({ theme, link, textColor }) => (link ? theme.blue1 : textColor ?? `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ theme, link, textColor }) => (link ? theme.blue1 : textColor ?? `var(${UI.COLOR_TEXT})`)};
   font-size: ${({ fontSize }) => fontSize ?? 'inherit'};
 
   @media screen and (max-width: 600px) {
diff --git a/apps/cowswap-frontend/src/legacy/components/InfoIcon/index.tsx b/apps/cowswap-frontend/src/legacy/components/InfoIcon/index.tsx
index e899be2743..208a9271ec 100644
--- a/apps/cowswap-frontend/src/legacy/components/InfoIcon/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/InfoIcon/index.tsx
@@ -12,7 +12,7 @@ const StyledIcon = styled.div`
 
   > svg {
     opacity: 0.5;
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
     line-height: 0;
     vertical-align: middle;
     transition: opacity 0.2s ease-in-out;
diff --git a/apps/cowswap-frontend/src/legacy/components/MenuDropdown/styled.ts b/apps/cowswap-frontend/src/legacy/components/MenuDropdown/styled.ts
index 43d5619e17..72c58e22c0 100644
--- a/apps/cowswap-frontend/src/legacy/components/MenuDropdown/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/MenuDropdown/styled.ts
@@ -109,7 +109,7 @@ export const MenuSection = styled.div`
     font-weight: 500;
     margin: 0;
     padding: 0;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     opacity: 0.8;
     transition: opacity 0.15s ease-in-out;
 
@@ -120,11 +120,11 @@ export const MenuSection = styled.div`
       max-height: 21px;
       margin: 0 7px 0 0;
       object-fit: contain;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
 
     > svg > path {
-      fill: var(${UI.COLOR_PRIMARY_TEXT});
+      fill: var(${UI.COLOR_TEXT});
     }
 
     &:hover {
diff --git a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx b/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx
index 205ff4a047..77c23e8b16 100644
--- a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/NetworkAlert/NetworkAlert.tsx
@@ -87,8 +87,8 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole
 
     ${BodyText},
     ${StyledArrowUpRight} {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
-      stroke: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
+      stroke: var(${UI.COLOR_TEXT});
       transform: rotate(0);
     }
 
diff --git a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/styles.ts b/apps/cowswap-frontend/src/legacy/components/NetworkAlert/styles.ts
index 20c6314cac..c8a143fcfb 100644
--- a/apps/cowswap-frontend/src/legacy/components/NetworkAlert/styles.ts
+++ b/apps/cowswap-frontend/src/legacy/components/NetworkAlert/styles.ts
@@ -5,6 +5,6 @@ import styled from 'styled-components/macro'
 import { UI } from 'common/constants/theme'
 
 export const ReadMoreLink = styled(ExternalLink)`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   text-decoration: underline;
 `
diff --git a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx
index be371605a7..d1b30adc89 100644
--- a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx
@@ -8,7 +8,7 @@ import { UI } from 'common/constants/theme'
 import { autofocus } from 'common/utils/autofocus'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
-  color: ${({ error, theme }) => (error ? theme.red1 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ error, theme }) => (error ? theme.red1 : `var(${UI.COLOR_TEXT})`)};
   width: 0;
   position: relative;
   font-weight: 500;
diff --git a/apps/cowswap-frontend/src/legacy/components/OrderProgressBar/styled.ts b/apps/cowswap-frontend/src/legacy/components/OrderProgressBar/styled.ts
index 76e35a3392..32ccca95bd 100644
--- a/apps/cowswap-frontend/src/legacy/components/OrderProgressBar/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/OrderProgressBar/styled.ts
@@ -18,7 +18,7 @@ export const ProgressBarWrapper = animated(styled.div`
   flex-flow: column wrap;
   border-radius: 12px;
   padding: 20px 20px 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background-color: var(${UI.COLOR_GREY});
   transition: height 0.2s ease;
 
@@ -207,7 +207,7 @@ export const StatusWrapper = styled.div`
 
 export const StatusMsg = styled.p`
   font-size: 0.85rem;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   margin: 0;
   ${({ theme }) => theme.mediaWidth.upToSmall`
     font-size: 0.835rem;
@@ -219,7 +219,7 @@ export const StatusMsg = styled.p`
 `
 
 export const StyledCoWLink = styled(ExternalLink)`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   text-decoration: underline;
   opacity: 1 !important;
 
diff --git a/apps/cowswap-frontend/src/legacy/components/QuestionHelper/index.tsx b/apps/cowswap-frontend/src/legacy/components/QuestionHelper/index.tsx
index 348fcbf80d..edeb66af52 100644
--- a/apps/cowswap-frontend/src/legacy/components/QuestionHelper/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/QuestionHelper/index.tsx
@@ -26,7 +26,7 @@ export const QuestionWrapper = styled.div`
   background-color: transparent;
 
   > svg > path {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
index 43c891bd75..9e0ea49c7b 100644
--- a/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Settings/index.tsx
@@ -14,7 +14,7 @@ const Settings = styled(SettingsMod)`
     box-shadow: ${({ theme }) => theme.boxShadow2};
     border: 1px solid ${({ theme }) => transparentize(0.95, theme.white)};
     background-color: var(${UI.COLOR_PAPER});
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     padding: 0;
     margin: 0;
     top: 36px;
@@ -24,7 +24,7 @@ const Settings = styled(SettingsMod)`
 
   ${RowFixed} {
     > div {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
       opacity: 0.85;
     }
   }
@@ -43,7 +43,7 @@ const Settings = styled(SettingsMod)`
     &:focus {
       cursor: pointer;
       outline: none;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
 
     svg {
@@ -58,7 +58,7 @@ const Settings = styled(SettingsMod)`
 
     &:hover svg > path,
     &:hover svg > circle {
-      stroke: var(${UI.COLOR_PRIMARY_TEXT});
+      stroke: var(${UI.COLOR_TEXT});
     }
   }
 
@@ -69,7 +69,7 @@ const Settings = styled(SettingsMod)`
 
     > path,
     > circle {
-      stroke: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+      stroke: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
       transition: stroke 0.3s ease-in-out;
     }
   }
diff --git a/apps/cowswap-frontend/src/legacy/components/SideMenu/index.tsx b/apps/cowswap-frontend/src/legacy/components/SideMenu/index.tsx
index 751809c0d5..73ce1c7a59 100644
--- a/apps/cowswap-frontend/src/legacy/components/SideMenu/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/SideMenu/index.tsx
@@ -10,7 +10,7 @@ export const SideMenu = styled.div<{ isAccountPage?: boolean }>`
   font-weight: 500;
   line-height: 1;
   margin: 0 24px 0 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   height: max-content;
   position: sticky;
   top: 0;
@@ -32,7 +32,7 @@ export const SideMenu = styled.div<{ isAccountPage?: boolean }>`
     font-size: inherit;
 
     ${({ theme, isAccountPage }) => theme.mediaWidth[isAccountPage ? 'upToMedium' : 'upToSmall']`
-    background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+    background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
     border-radius: 16px;
     padding: 12px;
     margin: 0 0 24px;
@@ -67,7 +67,7 @@ export const SideMenu = styled.div<{ isAccountPage?: boolean }>`
       font-weight: 600;
 
       ${({ theme, isAccountPage }) => theme.mediaWidth[isAccountPage ? 'upToMedium' : 'upToSmall']`
-        background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+        background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
         border-radius: 16px;
       `}
     }
diff --git a/apps/cowswap-frontend/src/legacy/components/Stepper/index.tsx b/apps/cowswap-frontend/src/legacy/components/Stepper/index.tsx
index 7421b97320..0f888a0dc2 100644
--- a/apps/cowswap-frontend/src/legacy/components/Stepper/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Stepper/index.tsx
@@ -69,7 +69,7 @@ export const Step = styled.div<{
     font-size: 100%;
     position: relative;
     color: ${({ isActiveStep, completedStep, theme }) =>
-      completedStep ? theme.black : isActiveStep ? theme.black : transparentize(0.4, theme.primaryText)};
+      completedStep ? theme.black : isActiveStep ? theme.black : transparentize(0.4, theme.text)};
     background: ${({ isActiveStep, completedStep, theme, circleSize }) =>
       completedStep
         ? `url(${CheckCircle}) no-repeat center/${circleSize ? `${circleSize}px` : 'var(--circleSize)'}`
@@ -87,10 +87,10 @@ export const Step = styled.div<{
   > b {
     color: ${({ isActiveStep, completedStep, theme }) =>
       completedStep
-        ? `var(${UI.COLOR_TEXT1})`
+        ? `var(${UI.COLOR_TEXT})`
         : isActiveStep
-        ? `var(${UI.COLOR_TEXT1})`
-        : transparentize(0.4, theme.primaryText)};
+        ? `var(${UI.COLOR_TEXT})`
+        : transparentize(0.4, theme.text)};
     font-weight: ${({ isActiveStep, completedStep }) => (completedStep ? '300' : isActiveStep ? 'bold' : '300')};
     text-align: center;
 
@@ -103,10 +103,10 @@ export const Step = styled.div<{
     font-style: normal;
     color: ${({ isActiveStep, completedStep, theme }) =>
       completedStep
-        ? transparentize(0.2, `var(${UI.COLOR_PRIMARY_TEXT})`)
+        ? transparentize(0.2, `var(${UI.COLOR_TEXT})`)
         : isActiveStep
-        ? transparentize(0.2, `var(${UI.COLOR_PRIMARY_TEXT})`)
-        : transparentize(0.4, theme.primaryText)};
+        ? transparentize(0.2, `var(${UI.COLOR_TEXT})`)
+        : transparentize(0.4, theme.text)};
     font-size: 12px;
     margin: 6px 0 0;
     padding: 0 24px;
diff --git a/apps/cowswap-frontend/src/legacy/components/SwapWarnings/index.tsx b/apps/cowswap-frontend/src/legacy/components/SwapWarnings/index.tsx
index d74b73990f..5efbe8e6db 100644
--- a/apps/cowswap-frontend/src/legacy/components/SwapWarnings/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/SwapWarnings/index.tsx
@@ -54,7 +54,7 @@ const WarningContainer = styled(AuxInformationContainer).attrs((props) => ({
       : LOW_TIER_FEE
       ? theme.alert
       : theme.info};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: ${({ padding = '16px' }) => padding};
   width: ${({ width = '100%' }) => width};
   border-radius: 16px;
diff --git a/apps/cowswap-frontend/src/legacy/components/Toggle/index.tsx b/apps/cowswap-frontend/src/legacy/components/Toggle/index.tsx
index 3acb1ad779..627d804808 100644
--- a/apps/cowswap-frontend/src/legacy/components/Toggle/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Toggle/index.tsx
@@ -67,14 +67,14 @@ const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`
   width: fit-content;
 
   ${ToggleElement} {
-    color: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`)};
+    color: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_TEXT_OPACITY_25})`)};
     border: none;
     transition: background 0.2s ease-in-out;
-    background: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`)};
+    background: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_TEXT_OPACITY_25})`)};
 
     &:hover {
-      color: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
-      background: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+      color: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_TEXT})`)};
+      background: ${({ theme, isActive }) => (isActive ? theme.white : `var(${UI.COLOR_TEXT})`)};
     }
   }
 
diff --git a/apps/cowswap-frontend/src/legacy/components/Tokens/FavouriteTokenButton.tsx b/apps/cowswap-frontend/src/legacy/components/Tokens/FavouriteTokenButton.tsx
index 1c73aa680d..dc4130d944 100644
--- a/apps/cowswap-frontend/src/legacy/components/Tokens/FavouriteTokenButton.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Tokens/FavouriteTokenButton.tsx
@@ -40,7 +40,7 @@ export default function FavouriteTokenButton({ tokenData }: FavouriteTokenButton
   return (
     <StyledButtonStar
       stroke={theme.text1}
-      fill={isFavouriteToken ? `var(${UI.COLOR_TEXT1})` : undefined}
+      fill={isFavouriteToken ? `var(${UI.COLOR_TEXT})` : undefined}
       onClick={handleFavouriteToken}
     />
   )
diff --git a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
index f797091f64..9c46869545 100644
--- a/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/Tokens/styled.ts
@@ -31,7 +31,7 @@ export const LinkWrapper = styled(Link)`
 
 export const ResponsiveLogo = styled(TokenLogo)`
   background: var(${UI.COLOR_PAPER});
-  color: var(${UI.COLOR_TEXT1}) !important; // TODO: prevent styles override
+  color: var(${UI.COLOR_TEXT}) !important; // TODO: prevent styles override
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     width: 21px;
@@ -45,7 +45,7 @@ export const Label = styled.div<{ end?: number }>`
   font-size: inherit;
   font-weight: 400;
   justify-content: ${({ end }) => (end ? 'flex-end' : 'flex-start')};
-  color: ${({ theme }) => transparentize(0.1, theme.primaryText)};
+  color: ${({ theme }) => transparentize(0.1, theme.text)};
   align-items: center;
   font-variant-numeric: tabular-nums;
   word-break: break-all;
@@ -116,7 +116,7 @@ export const ArrowButton = styled.button`
 `
 
 export const Arrow = styled.div<{ faded: boolean }>`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   opacity: ${(props) => (props.faded ? 0.3 : 1)};
   padding: 0 10px;
   user-select: none;
@@ -198,11 +198,11 @@ export const Cell = styled.div`
     transition: text-decoration-color 0.2s ease-in-out;
     overflow: hidden;
     display: flex;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
 
     &:hover {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
-      text-decoration-color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
+      text-decoration-color: ${`var(${UI.COLOR_TEXT})`};
     }
   }
 `
@@ -213,7 +213,7 @@ export const IndexNumber = styled.span`
 `
 
 export const BalanceValue = styled.span<{ hasBalance: boolean }>`
-  color: ${({ hasBalance, theme }) => (hasBalance ? `var(${UI.COLOR_TEXT1})` : transparentize(0.3, `var(${UI.COLOR_PRIMARY_TEXT})`)
+  color: ${({ hasBalance, theme }) => (hasBalance ? `var(${UI.COLOR_TEXT})` : transparentize(0.3, `var(${UI.COLOR_TEXT})`)
   font-weight: 500;
   font-size: 14px;
   white-space: nowrap;
@@ -247,7 +247,7 @@ export const TableButton = styled(BaseButton)<{ color?: string; outlined?: boole
     max-height: 100%;
 
     > path {
-      fill: var(${UI.COLOR_PRIMARY_TEXT});
+      fill: var(${UI.COLOR_TEXT});
     }
   }
 
@@ -366,7 +366,7 @@ export const FiatValue = styled.div`
 `
 
 export const InfoCircle = styled(HelpCircle)`
-  stroke: var(${UI.COLOR_PRIMARY_TEXT});
+  stroke: var(${UI.COLOR_TEXT});
   width: 15px;
   height: 15px;
   margin-left: 5px;
diff --git a/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts b/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
index 4af630fb8d..a3c0e7c29c 100644
--- a/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/TransactionConfirmationModal/styled.ts
@@ -158,7 +158,7 @@ export const ButtonCustom = styled.button`
   border-radius: 16px;
   min-height: 52px;
   border: 1px solid ${({ theme }) => theme.border2};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: transparent;
   outline: 0;
   padding: 8px 16px;
@@ -250,7 +250,7 @@ export const StepsIconWrapper = styled.div`
     height: 100%;
     width: 100%;
     padding: 18px;
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 
   @keyframes spin {
@@ -308,7 +308,7 @@ export const StepsWrapper = styled.div`
     flex: 1 1 auto;
     height: 2px;
     border: 0;
-    background: var(${UI.COLOR_PRIMARY_TEXT});
+    background: var(${UI.COLOR_TEXT});
     margin: auto;
     position: absolute;
     width: 100%;
@@ -413,7 +413,7 @@ export const CompareItem = styled.div<{ highlight?: boolean; recommended?: boole
   font-size: 13px;
   background: ${({ theme, highlight }) =>
     highlight ? (theme.darkMode ? transparentize(0.8, theme.text3) : transparentize(0.9, theme.text3)) : theme.bg1};
-  border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_PRIMARY_TEXT})`))};
+  border: 1px solid ${({ highlight }) => (highlight ? 'none' : transparentize(0.8, `var(${UI.COLOR_TEXT})`))};
   position: relative;
 
   &::before {
@@ -449,7 +449,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
   padding: 0;
   list-style: none;
   font-size: inherit;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   gap: 6px;
   display: flex;
   flex-flow: column wrap;
@@ -487,7 +487,7 @@ export const ItemList = styled.div<{ listIconAlert?: boolean }>`
       listIconAlert &&
       css`
         > path {
-          fill: ${transparentize(0.6, theme.primaryText)};
+          fill: ${transparentize(0.6, theme.text)};
         }
       `}
   }
@@ -512,7 +512,7 @@ export const ApproveFooter = styled.div`
     padding: 0;
     list-style: none;
     font-size: inherit;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
     gap: 6px;
     display: flex;
     flex-flow: column wrap;
diff --git a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/TransactionSettingsMod.tsx b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/TransactionSettingsMod.tsx
index c491a87d47..94345e3d39 100644
--- a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/TransactionSettingsMod.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/TransactionSettingsMod.tsx
@@ -16,6 +16,7 @@ import {
 } from '@cowprotocol/common-const'
 import { getWrappedToken } from '@cowprotocol/common-utils'
 import { RowBetween, RowFixed } from '@cowprotocol/ui'
+import { FancyButton } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Percent } from '@uniswap/sdk-core'
 
@@ -48,29 +49,9 @@ enum DeadlineError {
   InvalidInput = 'InvalidInput',
 }
 
-export const FancyButton = styled.button`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
-  align-items: center;
-  height: 2rem;
-  border-radius: 36px;
-  font-size: 1rem;
-  width: auto;
-  min-width: 3.5rem;
-  /* border: 1px solid ${({ theme }) => theme.bg3}; */
-  border: 0; // mod
-  outline: none;
-  /* background: var(${UI.COLOR_PAPER}); */
-  background: var(${UI.COLOR_PRIMARY}); // mod
-  :hover {
-    /* border: 1px solid ${({ theme }) => theme.bg4}; */
-  }
-  :focus {
-    /* border: 1px solid ${({ theme }) => theme.primary1}; */
-  }
-`
-
 const Option = styled(FancyButton)<{ active: boolean }>`
   margin-right: 8px;
+
   :hover {
     cursor: pointer;
   }
@@ -79,8 +60,6 @@ const Option = styled(FancyButton)<{ active: boolean }>`
     border: none;
     pointer-events: none;
   }
-  background-color: ${({ active, theme }) => (active ? `var(${UI.COLOR_PRIMARY})` : theme.grey1)}; // MOD
-  color: ${({ active }) => (active ? `var(${UI.COLOR_PRIMARY_TEXT})` : `var(${UI.COLOR_PRIMARY_TEXT})`)}; // MOD
 `
 
 export const Input = styled.input`
@@ -92,7 +71,7 @@ export const Input = styled.input`
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;
   }
-  color: ${({ theme, color }) => (color === 'red' ? theme.red1 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ theme, color }) => (color === 'red' ? theme.red1 : `var(${UI.COLOR_TEXT})`)};
   text-align: right;
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx
index 5d0e2283e2..33f10d13ec 100644
--- a/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/TransactionSettings/index.tsx
@@ -29,13 +29,13 @@ const Wrapper = styled.div`
 
     > div > input::placeholder {
       opacity: 0.5;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
   }
 
   ${RowFixed} {
     > div {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
       opacity: 0.85;
     }
 
@@ -51,7 +51,7 @@ const Wrapper = styled.div`
     > button > input::placeholder {
       background: transparent;
       opacity: 0.5;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
   }
 `
diff --git a/apps/cowswap-frontend/src/legacy/components/Version/index.tsx b/apps/cowswap-frontend/src/legacy/components/Version/index.tsx
index 4189c57cba..eaf1052aab 100644
--- a/apps/cowswap-frontend/src/legacy/components/Version/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/Version/index.tsx
@@ -66,7 +66,7 @@ const StyledPolling = styled.div`
   flex-flow: column nowrap;
   align-items: flex-start;
   padding: 16px 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   gap: 10px;
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalFooter/index.tsx b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalFooter/index.tsx
index d0cd8394c7..9f19a6ffd9 100644
--- a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalFooter/index.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalFooter/index.tsx
@@ -13,7 +13,7 @@ import { UI } from 'common/constants/theme'
 const Wrapper = styled.div`
   ${RowBetween} > div,
   ${RowFixed} > div {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/styled.ts b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/styled.ts
index 2b2f0585ae..fe89a4a65b 100644
--- a/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/styled.ts
+++ b/apps/cowswap-frontend/src/legacy/components/swap/SwapModalHeader/styled.ts
@@ -36,7 +36,7 @@ export const Wrapper = styled.div`
   }
 
   svg {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/legacy/components/swap/styleds.tsx b/apps/cowswap-frontend/src/legacy/components/swap/styleds.tsx
index e2c08ff5e5..05494c4124 100644
--- a/apps/cowswap-frontend/src/legacy/components/swap/styleds.tsx
+++ b/apps/cowswap-frontend/src/legacy/components/swap/styleds.tsx
@@ -154,7 +154,7 @@ export function SwapCallbackError({ error, handleClose, showClose, ...styleProps
 
 export const SwapShowAcceptChanges = styled(AutoColumn)`
   background-color: ${({ theme }) => transparentize(0.95, theme.primary3)};
-  color: ${({ theme }) => theme.primaryText1};
+  color: ${({ theme }) => theme.text1};
   padding: 0.5rem;
   border-radius: 12px;
   margin-top: 8px;
diff --git a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
index 7c6f653202..5fb71f943d 100644
--- a/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx
@@ -2,7 +2,8 @@ import Cursor1 from '@cowprotocol/assets/cow-swap/cursor1.gif'
 import Cursor2 from '@cowprotocol/assets/cow-swap/cursor2.gif'
 import Cursor3 from '@cowprotocol/assets/cow-swap/cursor3.gif'
 import Cursor4 from '@cowprotocol/assets/cow-swap/cursor4.gif'
-import { ButtonSize } from '@cowprotocol/ui'
+import { UI, ButtonSize } from '@cowprotocol/ui'
+import { getContrastText, resolveCssVar } from '@cowprotocol/ui-utils'
 
 import { transparentize, lighten, darken } from 'polished'
 import { createGlobalStyle, css } from 'styled-components/macro'
@@ -10,8 +11,6 @@ import { createGlobalStyle, css } from 'styled-components/macro'
 import { colorsUniswap } from 'legacy/theme/colorsUniswap'
 import { Colors } from 'legacy/theme/styled'
 
-import { UI } from 'common/constants/theme'
-
 // TODO: This shouldn't be in the base theme
 // Modal override items
 // import { HeaderText } from 'legacy/components/WalletModal/Option'
@@ -22,11 +21,12 @@ export function colors(darkMode: boolean): Colors {
 
     // V3 colors ======================
     primary: darkMode ? '#0d5ed9' : '#052B65',
+
     secondary: darkMode ? '#0d5ed9' : '#052B65',
     background: darkMode ? '#07162D' : '#ECF1F8',
     paper: darkMode ? '#07162D' : '#ECF1F8',
 
-    primaryText: darkMode ? '#CAE9FF' : '#052B65',
+    text: darkMode ? '#CAE9FF' : '#052B65',
     secondaryText: darkMode ? '#86B2DC' : '#506B93',
     disabledText: darkMode ? '#86B2DC' : '#506B93',
 
@@ -83,9 +83,6 @@ export function colors(darkMode: boolean): Colors {
     // ****** specialty colors ******
     advancedBG: darkMode ? '#163861' : '#d5e8f0',
 
-    // ****** color text ******
-    primaryText1: darkMode ? '#021E34' : '#000000',
-
     // ****** secondary colors ******
     secondary1: darkMode ? '#2172E5' : '#8958FF',
     secondary3: darkMode ? '#17000b26' : 'rgba(137,88,255,0.6)',
@@ -177,7 +174,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
     textShadow1: `
       ${
         darkMode
-          ? `0px 0px 26px ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`}, 0px 0px 28px ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`}`
+          ? `0px 0px 26px ${`var(${UI.COLOR_TEXT_OPACITY_10})`}, 0px 0px 28px ${`var(${UI.COLOR_TEXT_OPACITY_25})`}`
           : 'none'
       }
     `,
@@ -196,7 +193,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
       bg1: darkMode
         ? 'linear-gradient(90deg, #0852C5 0%, #1970F8 100%), linear-gradient(0deg, #0852C5, #0852C5), #0F5BD0;'
         : '#052B65',
-      text1: darkMode ? `var(${UI.COLOR_PRIMARY_TEXT})` : '#FFFFFF',
+      text1: darkMode ? `var(${UI.COLOR_TEXT})` : '#FFFFFF',
     },
     util: {
       invertImageForDarkMode: darkMode ? 'filter: invert(1) grayscale(1);' : null,
@@ -284,8 +281,8 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
       border: 'none',
       menuFlyout: {
         background: 'transparent',
-        color: darkMode ? `var(${UI.COLOR_PRIMARY_TEXT})` : colorsTheme.text2,
-        colorHover: darkMode ? `var(${UI.COLOR_PRIMARY_TEXT})` : colorsTheme.text2,
+        color: darkMode ? `var(${UI.COLOR_TEXT})` : colorsTheme.text2,
+        colorHover: darkMode ? `var(${UI.COLOR_TEXT})` : colorsTheme.text2,
         colorHoverBg: darkMode ? colorsTheme.black : colorsTheme.disabled,
         closeButtonBg: darkMode ? colorsTheme.white : colorsTheme.disabled,
         closeButtonColor: colorsTheme.black,
@@ -320,7 +317,7 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
     buttonOutlined: {
       background: css`
         background: ${colorsTheme.bg1};
-        color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+        color: ${`var(${UI.COLOR_TEXT})`};
       `,
       fontWeight: '800',
       border: `4px solid ${colorsTheme.black}`,
@@ -335,26 +332,26 @@ export function themeVariables(darkMode: boolean, colorsTheme: Colors) {
     },
     currencyInput: {
       background: `${darkMode ? colorsTheme.blueShade : colorsTheme.white}`,
-      color: `var(${UI.COLOR_PRIMARY_TEXT})`,
+      color: `var(${UI.COLOR_TEXT})`,
       border: `2px solid ${darkMode ? colorsTheme.blueShade2 : colorsTheme.disabled}`,
     },
     buttonCurrencySelect: {
       background: colorsTheme.bg1,
       border: `0`,
       boxShadow: `0px 4px 8px rgba(0, 0, 0, 0.06);`,
-      color: `var(${UI.COLOR_PRIMARY_TEXT})`,
-      colorSelected: `var(${UI.COLOR_PRIMARY_TEXT})`,
+      color: `var(${UI.COLOR_TEXT})`,
+      colorSelected: `var(${UI.COLOR_TEXT})`,
     },
     bgLinearGradient: css`
       background-image: linear-gradient(270deg, ${colorsTheme.purple} 30%, ${colorsTheme.blue1} 70%);
     `,
-    footerColor: darkMode ? `var(${UI.COLOR_PRIMARY_TEXT})` : colorsTheme.greenShade,
+    footerColor: darkMode ? `var(${UI.COLOR_TEXT})` : colorsTheme.greenShade,
     networkCard: {
       background: 'rgb(255 120 74 / 60%)',
       text: colorsTheme.black,
     },
     wallet: {
-      color: `var(${UI.COLOR_PRIMARY_TEXT})`,
+      color: `var(${UI.COLOR_TEXT})`,
       background: darkMode ? colorsTheme.bg3 : colorsTheme.bg1,
     },
   }
@@ -404,22 +401,32 @@ export const UniThemedGlobalStyle = css`
   :root {
     // V3
     ${UI.COLOR_PRIMARY}: ${({ theme }) => theme.primary};
-    ${UI.COLOR_SECONDARY}: ${({ theme }) => theme.secondary};
+    ${UI.COLOR_PRIMARY_LIGHTER}: ${({ theme }) =>
+      theme.darkMode ? lighten(0.1, theme.primary) : lighten(0.2, theme.primary)};
+    ${UI.COLOR_PRIMARY_DARKER}: ${({ theme }) =>
+      theme.darkMode ? darken(0.1, theme.primary) : darken(0.05, theme.primary)};
+
+    ${UI.COLOR_SECONDARY}: ${({ theme }) => theme.primary}; // for now we use the same color as primary
 
     ${UI.COLOR_BACKGROUND}: ${({ theme }) => theme.background};
     ${UI.COLOR_PAPER}: ${({ theme }) => theme.paper};
-    ${UI.COLOR_PAPER_DARKER}: ${({ theme }) =>
-      theme.darkMode ? `color-mix(in srgb, ${theme.paper}, #000 40%)` : `color-mix(in srgb, ${theme.paper}, #000 5%)`};
-    ${UI.COLOR_PAPER_DARKEST}: ${({ theme }) => `color-mix(in srgb, ${theme.paper}, #000000 15%)`};
+    ${UI.COLOR_PAPER_DARKER}: ${({ theme }) => (theme.darkMode ? darken(0.1, theme.paper) : darken(0.05, theme.paper))};
+    ${UI.COLOR_PAPER_DARKEST}: ${({ theme }) =>
+      theme.darkMode ? darken(0.15, theme.paper) : darken(0.05, theme.paper)};
 
-    ${UI.COLOR_PRIMARY_TEXT}: ${({ theme }) => theme.primaryText};
-    ${UI.COLOR_PRIMARY_TEXT_OPACITY_70}: ${({ theme }) => transparentize(0.3, theme.primaryText)};
-    ${UI.COLOR_PRIMARY_TEXT_OPACITY_25}: ${({ theme }) => transparentize(0.75, theme.primaryText)};
-    ${UI.COLOR_PRIMARY_TEXT_OPACITY_10}: ${({ theme }) => transparentize(0.9, theme.primaryText)};
+    ${UI.COLOR_TEXT}: ${({ theme }) => theme.text};
+    ${UI.COLOR_TEXT_OPACITY_70}: ${({ theme }) => transparentize(0.3, theme.text)};
+    ${UI.COLOR_TEXT_OPACITY_25}: ${({ theme }) => transparentize(0.75, theme.text)};
+    ${UI.COLOR_TEXT_OPACITY_10}: ${({ theme }) => transparentize(0.9, theme.text)};
+    ${UI.COLOR_SECONDARY_TEXT}: ${({ theme }) =>
+      theme.darkMode ? transparentize(0.4, theme.text) : transparentize(0.3, theme.text)};
 
-    ${UI.COLOR_SECONDARY_TEXT}: ${({ theme }) => theme.secondaryText};
     ${UI.COLOR_DISABLED_TEXT}: ${({ theme }) => theme.disabledText};
 
+    ${UI.COLOR_BUTTON_TEXT}: ${({ theme }) => getContrastText(theme.primary, theme.text)};
+    ${UI.COLOR_BUTTON_TEXT_DISABLED}: ${({ theme }) =>
+      getContrastText(theme.primary, resolveCssVar(UI.COLOR_PAPER_DARKER))};
+
     ${UI.COLOR_WARNING}: ${({ theme }) => theme.warning};
     ${UI.COLOR_WARNING_BG}: ${({ theme }) => theme.warning};
     ${UI.COLOR_WARNING_TEXT}: ${({ theme }) => theme.warningText};
@@ -451,7 +458,7 @@ export const UniThemedGlobalStyle = css`
     // Base
     ${UI.COLOR_BORDER}: var(${UI.COLOR_GREY});
     ${UI.COLOR_CONTAINER_BG_02}: ${UI.COLOR_PAPER};
-    ${UI.MODAL_BACKDROP}: var(${UI.COLOR_PRIMARY_TEXT});
+    ${UI.MODAL_BACKDROP}: var(${UI.COLOR_TEXT});
     ${UI.BORDER_RADIUS_NORMAL}: 24px;
     ${UI.PADDING_NORMAL}: 24px;
     ${UI.BOX_SHADOW_NORMAL}: 0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d;
@@ -461,7 +468,7 @@ export const UniThemedGlobalStyle = css`
     ${UI.ICON_SIZE_NORMAL}: 20px;
     ${UI.ICON_SIZE_SMALL}: 16px;
     ${UI.ICON_SIZE_XSMALL}: 14px;
-    ${UI.ICON_COLOR_NORMAL}: ${({ theme }) => theme.primaryText};
+    ${UI.ICON_COLOR_NORMAL}: ${({ theme }) => theme.text};
 
     // [STATE] Information (light blue)
     ${UI.COLOR_INFO}: var(${UI.COLOR_LIGHT_BLUE});
@@ -471,7 +478,7 @@ export const UniThemedGlobalStyle = css`
       theme.darkMode ? lighten(0.2, theme.information) : darken(0.2, theme.information)};
 
     // [STATE] Alert (yellow)
-    ${UI.COLOR_ALERT}: var(${UI.COLOR_YELLOW});
+    ${UI.COLOR_ALERT}: ${`var(${UI.COLOR_YELLOW})`};
     ${UI.COLOR_ALERT_BG}: ${({ theme }) =>
       theme.darkMode ? transparentize(0.9, theme.alert) : transparentize(0.85, theme.alert)};
     ${UI.COLOR_ALERT_TEXT}: ${({ theme }) => (theme.darkMode ? lighten(0.2, theme.alert) : darken(0.2, theme.alert))};
@@ -484,19 +491,17 @@ export const UniThemedGlobalStyle = css`
       theme.darkMode ? lighten(0.2, theme.success) : darken(0.1, theme.success)};
 
     // [STATE] Danger (red)
-    ${UI.COLOR_DANGER}: var(${UI.COLOR_RED});
+    ${UI.COLOR_DANGER}: ${`var(${UI.COLOR_RED})`};
     ${UI.COLOR_DANGER_BG}: ${({ theme }) =>
       theme.darkMode ? transparentize(0.9, theme.danger) : transparentize(0.85, theme.danger)};
     ${UI.COLOR_DANGER_TEXT}: ${({ theme }) =>
       theme.darkMode ? lighten(0.2, theme.danger) : darken(0.2, theme.danger)};
 
     // Text
-    ${UI.COLOR_TEXT1}: ${UI.COLOR_PRIMARY_TEXT};
-    ${UI.COLOR_TEXT1_INACTIVE}: ${({ theme }) => transparentize(0.4, theme.primaryText)};
-    ${UI.COLOR_TEXT1_OPACITY_25}: ${({ theme }) => transparentize(0.75, theme.primaryText)};
-    ${UI.COLOR_TEXT1_OPACITY_10}: ${({ theme }) => transparentize(0.9, theme.primaryText)};
-    ${UI.COLOR_TEXT2}: ${({ theme }) => transparentize(0.3, theme.primaryText)};
-    ${UI.COLOR_LINK}: ${({ theme }) => theme.text3};
+    ${UI.COLOR_TEXT_OPACITY_25}: ${({ theme }) => transparentize(0.75, theme.text)};
+    ${UI.COLOR_TEXT_OPACITY_10}: ${({ theme }) => transparentize(0.9, theme.text)};
+    ${UI.COLOR_TEXT2}: ${({ theme }) => transparentize(0.3, theme.text)};
+    ${UI.COLOR_LINK}: ${`var(${UI.COLOR_PRIMARY})`};
     ${UI.COLOR_LINK_OPACITY_10}: ${({ theme }) => transparentize(0.9, theme.text3)};
 
     // Font Weights & Sizes
@@ -513,8 +518,9 @@ export const UniThemedGlobalStyle = css`
   }
 
   html {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
+
   body {
     min-height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'auto' : '100vh')};
     scrollbar-color: ${({ theme }) => theme.colorScrollbar};
diff --git a/apps/cowswap-frontend/src/legacy/theme/colorsUniswap.ts b/apps/cowswap-frontend/src/legacy/theme/colorsUniswap.ts
index 73f29005ac..ceda51b8f0 100644
--- a/apps/cowswap-frontend/src/legacy/theme/colorsUniswap.ts
+++ b/apps/cowswap-frontend/src/legacy/theme/colorsUniswap.ts
@@ -39,7 +39,7 @@ export function colorsUniswap(darkMode: boolean): Colors {
     primary5: darkMode ? '#153d6f70' : '#FDEAF1',
 
     // color text
-    primaryText1: darkMode ? '#5090ea' : '#D50066',
+    text1: darkMode ? '#5090ea' : '#D50066',
 
     // secondary colors
     secondary1: darkMode ? '#2172E5' : '#E8006F',
diff --git a/apps/cowswap-frontend/src/legacy/theme/components.tsx b/apps/cowswap-frontend/src/legacy/theme/components.tsx
index 9757a46a82..7f36e5582f 100644
--- a/apps/cowswap-frontend/src/legacy/theme/components.tsx
+++ b/apps/cowswap-frontend/src/legacy/theme/components.tsx
@@ -140,7 +140,7 @@ export const Spinner = styled.img`
 `
 
 const BackArrowLink = styled(StyledInternalLink)`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 export function BackArrow({ to }: { to: string }) {
   return (
diff --git a/apps/cowswap-frontend/src/legacy/theme/mapWidgetTheme.ts b/apps/cowswap-frontend/src/legacy/theme/mapWidgetTheme.ts
index 386524c93c..1a72296d64 100644
--- a/apps/cowswap-frontend/src/legacy/theme/mapWidgetTheme.ts
+++ b/apps/cowswap-frontend/src/legacy/theme/mapWidgetTheme.ts
@@ -21,7 +21,7 @@ export function mapWidgetTheme(
     secondary: widgetTheme.secondary,
     background: widgetTheme.background,
     paper: widgetTheme.paper,
-    primaryText: widgetTheme.primaryText,
+    text: widgetTheme.text,
     warning: widgetTheme.warning,
     success: widgetTheme.success,
     info: widgetTheme.info,
diff --git a/apps/cowswap-frontend/src/legacy/theme/styled.d.ts b/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
index f309cac67d..00a2a6b4d7 100644
--- a/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
+++ b/apps/cowswap-frontend/src/legacy/theme/styled.d.ts
@@ -11,7 +11,7 @@ interface ColorsUniswap {
   background: Color
   paper: Color
 
-  primaryText: Color
+  text: Color
   secondaryText: Color
   disabledText: Color
 
@@ -52,7 +52,7 @@ interface ColorsUniswap {
   primary4: Color
   primary5: Color
 
-  primaryText1: Color
+  text1: Color
 
   // pinks
   secondary1: Color
diff --git a/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/SurplusCard.tsx b/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/SurplusCard.tsx
index 75d8509823..143d9ac410 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/SurplusCard.tsx
+++ b/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/SurplusCard.tsx
@@ -87,11 +87,11 @@ export function SurplusCard() {
       text-align: center;
       justify-content: center;
       align-items: center;
-      color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+      color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
     }
 
     ${InfoCard} > div > span > p {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
 
     ${InfoCard} > div > span > b {
@@ -112,7 +112,7 @@ export function SurplusCard() {
       font-size: 15px;
       font-weight: 500;
       line-height: 1.1;
-      color: ${({ theme }) => transparentize(0.5, theme.primaryText)};
+      color: ${({ theme }) => transparentize(0.5, theme.text)};
       margin: 3px auto 0;
     }
 
diff --git a/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/styled.ts b/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/styled.ts
index ab7f916c65..0a60516f53 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/styled.ts
+++ b/apps/cowswap-frontend/src/modules/account/containers/AccountDetails/styled.ts
@@ -130,7 +130,7 @@ export const WalletNameAddress = styled.div`
 export const Wrapper = styled.div`
   display: block;
   width: 100%;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 0;
   height: 100%;
   margin: 0 24px;
@@ -144,7 +144,7 @@ export const Wrapper = styled.div`
   ${AddressLink},
   ${CopyIcon},
   ${WalletAction} {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     opacity: 0.85;
     transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
     margin: auto;
@@ -171,7 +171,7 @@ export const Wrapper = styled.div`
     margin: 0 0 0 8px;
     align-self: center;
     font-size: 21px;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   ${WalletName} {
@@ -293,7 +293,7 @@ export const AccountSection = styled.div`
 export const AccountGroupingRow = styled.div`
   justify-content: space-between;
   align-items: center;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   div {
     ${({ theme }) => theme.flexRowNoWrap}
@@ -315,7 +315,7 @@ export const AccountGroupingRow = styled.div`
 
 export const NoActivityMessage = styled.p`
   font-size: 14px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   width: 100%;
   padding: 24px 0 0;
   text-align: center;
@@ -332,7 +332,7 @@ export const LowerSection = styled.div`
 
   > span {
     display: flex;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     justify-content: space-between;
     padding: 0 0 12px;
 
@@ -370,7 +370,7 @@ export const LowerSection = styled.div`
   }
 
   > span > ${StyledLink} {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     text-decoration: underline;
     font-size: 14px;
 
@@ -452,7 +452,7 @@ const NetworkCardUni = styled(YellowCard)`
 
 export const NetworkCard = styled(NetworkCardUni)`
   background-color: var(${UI.COLOR_PAPER});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 6px 8px;
   font-size: 13px;
   margin: 0;
@@ -531,11 +531,11 @@ export const SurplusCardWrapper = styled.div`
     text-align: center;
     justify-content: center;
     align-items: center;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   ${InfoCard} > div > span > p {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   ${InfoCard} > div > span > b {
@@ -556,7 +556,7 @@ export const SurplusCardWrapper = styled.div`
     font-size: 15px;
     font-weight: 500;
     line-height: 1.1;
-    color: ${({ theme }) => transparentize(0.5, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.5, theme.text)};
     margin: 3px auto 0;
   }
 
@@ -587,7 +587,7 @@ export const WalletIconWrapper = styled.div`
   }
 
   > svg > path {
-    --color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     fill: var(--color);
     stroke: var(--color);
     stroke-width: 0.5px;
@@ -610,7 +610,7 @@ export const WalletSelector = styled.div<WalletSelectorProps>`
     isHardWareWallet &&
     `
     cursor: pointer;
-    border: 1px solid var(${UI.COLOR_TEXT1_OPACITY_25});
+    border: 1px solid var(${UI.COLOR_TEXT_OPACITY_25});
     background: transparent;
     padding: 6px 10px;
 
@@ -621,14 +621,14 @@ export const WalletSelector = styled.div<WalletSelectorProps>`
       height: 0;
       border-left: 4px solid transparent;
       border-right: 4px solid transparent;
-      border-top: 4px solid var(${UI.COLOR_PRIMARY_TEXT});
+      border-top: 4px solid var(${UI.COLOR_TEXT});
       margin-left: 8px;
       opacity: 0.5;
       transition: opacity 0.2s ease-in-out;
     }
 
     &:hover {
-      background: var(${UI.COLOR_TEXT1_OPACITY_25});
+      background: var(${UI.COLOR_TEXT_OPACITY_25});
     }
 
     &:hover::after {
diff --git a/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx b/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
index eceef3d0f2..039ebaea7a 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
+++ b/apps/cowswap-frontend/src/modules/account/containers/OrdersPanel/index.tsx
@@ -69,7 +69,7 @@ const Header = styled.div`
   padding: 20px 30px;
   align-items: center;
   transition: opacity 0.2s ease-in-out;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: var(${UI.COLOR_PAPER});
   position: sticky;
   top: 0;
@@ -105,7 +105,7 @@ const Header = styled.div`
 const CloseIcon = styled(Close)`
   opacity: 0.6;
   transition: opacity 0.3s ease-in-out;
-  stroke: var(${UI.COLOR_PRIMARY_TEXT});
+  stroke: var(${UI.COLOR_TEXT});
   width: 24px;
   height: 24px;
 
diff --git a/apps/cowswap-frontend/src/modules/account/containers/Transaction/styled.ts b/apps/cowswap-frontend/src/modules/account/containers/Transaction/styled.ts
index e7ca31c231..f3f9bc02c4 100644
--- a/apps/cowswap-frontend/src/modules/account/containers/Transaction/styled.ts
+++ b/apps/cowswap-frontend/src/modules/account/containers/Transaction/styled.ts
@@ -17,7 +17,7 @@ export const TransactionWrapper = styled.div`
   font-size: initial;
   display: flex;
   padding: 0;
-  border: 1px solid ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+  border: 1px solid ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
   position: relative;
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -89,7 +89,7 @@ export const Summary = styled.div`
   padding: 22px;
   grid-template-rows: 1fr;
   grid-template-columns: 80px auto min-content;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
     display: flex;
@@ -153,7 +153,7 @@ export const SummaryInner = styled.div`
   }
 
   > a {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     text-decoration: underline;
     font-size: 14px;
 
@@ -346,12 +346,12 @@ export const StatusLabelBelow = styled.div<{ isCancelling?: boolean }>`
   font-size: 12px;
   line-height: 1.1;
   margin: 7px auto 0;
-  color: ${({ isCancelling }) => (isCancelling ? `var(${UI.COLOR_TEXT1})` : 'inherit')};
+  color: ${({ isCancelling }) => (isCancelling ? `var(${UI.COLOR_TEXT})` : 'inherit')};
 
   > ${LinkStyledButton} {
     margin: 2px 0;
     opacity: 1;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
@@ -405,7 +405,7 @@ export const TransactionInnerDetail = styled.div`
   flex-flow: column wrap;
   border-radius: 12px;
   padding: 20px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   margin: 24px auto 0 0;
   border: 1px solid ${({ theme }) => theme.card.border};
 
diff --git a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
index b3a62c02fa..8527a6522f 100644
--- a/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
+++ b/apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts
@@ -18,7 +18,7 @@ const badgeColors: Record<BadgeType, string> = {
   alert: `var(${UI.COLOR_ALERT_TEXT})`,
   alert2: `var(${UI.COLOR_ALERT_TEXT})`,
   success: `var(${UI.COLOR_SUCCESS_TEXT})`,
-  default: `var(${UI.COLOR_TEXT1_INACTIVE})`, // text only
+  default: `var(${UI.COLOR_TEXT_INACTIVE})`, // text only
 }
 
 export const Badge = styled.div<{ type?: BadgeType }>`
@@ -50,7 +50,7 @@ export const Link = styled(NavLink)`
   align-items: center;
   justify-content: center;
   text-decoration: none;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   gap: 4px;
   font-weight: inherit;
   line-height: 1;
@@ -61,12 +61,12 @@ export const Link = styled(NavLink)`
     text-decoration: none;
 
     > svg > path {
-      fill: var(${UI.COLOR_PRIMARY_TEXT});
+      fill: var(${UI.COLOR_TEXT});
     }
   }
 
   > svg > path {
-    fill: var(${UI.COLOR_PRIMARY_TEXT});
+    fill: var(${UI.COLOR_TEXT});
   }
 `
 
@@ -109,7 +109,7 @@ export const MenuItem = styled.div<{ isActive?: boolean; isDropdownVisible: bool
         background: var(${UI.COLOR_PAPER_DARKER});
 
         ${Link} {
-          color: var(${UI.COLOR_PRIMARY_TEXT});
+          color: ${`var(${UI.COLOR_TEXT})`};
         }
 
         ${Link} > ${Badge} {
diff --git a/apps/cowswap-frontend/src/modules/application/pure/Page/index.tsx b/apps/cowswap-frontend/src/modules/application/pure/Page/index.tsx
index 539bc07793..d5801b2999 100644
--- a/apps/cowswap-frontend/src/modules/application/pure/Page/index.tsx
+++ b/apps/cowswap-frontend/src/modules/application/pure/Page/index.tsx
@@ -18,7 +18,7 @@ export const PageWrapper = styled(Widget)`
 export const Title = styled.h1`
   font-size: 32px;
   margin: 24px 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   text-shadow: ${({ theme }) => theme.textShadow1};
   font-weight: 500;
 
diff --git a/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx b/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx
index df2a4c6930..7101a7e22c 100644
--- a/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/fortune/containers/FortuneWidget/index.tsx
@@ -206,7 +206,7 @@ const FortuneText = styled.h3`
   font-weight: 700;
   text-align: center;
   position: relative;
-  color: ${({ theme }) => (theme.darkMode ? theme.bg1 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ theme }) => (theme.darkMode ? theme.bg1 : `var(${UI.COLOR_TEXT})`)};
   background: ${({ theme }) => theme.white};
 
   // small device
@@ -228,7 +228,7 @@ const FortuneText = styled.h3`
 
   &:before,
   &:after {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     font-size: 100px;
     position: absolute;
     z-index: 1;
@@ -244,7 +244,7 @@ const FortuneContent = styled.div`
   align-items: center;
   width: 100%;
   max-width: 500px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 const StyledExternalLink = styled(ExternalLink)`
@@ -284,7 +284,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts b/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts
index 2a926c2e21..61b3c01c81 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts
+++ b/apps/cowswap-frontend/src/modules/limitOrders/containers/RateInput/styled.ts
@@ -28,12 +28,12 @@ export const Header = styled.div`
   font-size: 13px;
   font-weight: 500;
   width: 100%;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
 `
 
 export const MarketPriceButton = styled.button`
   background: var(${UI.COLOR_PAPER});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   white-space: nowrap;
   border: none;
   font-weight: 500;
@@ -65,7 +65,7 @@ export const NumericalInput = styled(Input)<{ $loading: boolean }>`
   text-align: left;
 
   &::placeholder {
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 `
 
@@ -84,7 +84,7 @@ export const ActiveCurrency = styled.button`
 `
 
 export const ActiveSymbol = styled.span`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: 13px;
   font-weight: 500;
   text-align: right;
@@ -94,7 +94,7 @@ export const ActiveSymbol = styled.span`
 export const ActiveIcon = styled.div`
   --size: 20px;
   background-color: var(${UI.COLOR_PAPER});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   width: var(--size);
   min-width: var(--size);
   height: var(--size);
@@ -127,7 +127,7 @@ export const EstimatedRate = styled.div`
     flex-flow: row nowrap;
     font-weight: normal;
     text-align: left;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   // TODO: Make the question helper icon transparent through a prop instead
@@ -142,6 +142,6 @@ export const EstimatedRate = styled.div`
 
   > span > i {
     font-style: normal;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/DeadlineSelector/styled.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/DeadlineSelector/styled.tsx
index 35ec6272e7..af37b53961 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/DeadlineSelector/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/DeadlineSelector/styled.tsx
@@ -36,11 +36,11 @@ export const Label = styled.span`
   font-size: 13px;
   font-weight: 500;
   width: 100%;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
 `
 
 export const Current = styled(MenuButton)<{ $custom?: boolean }>`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: ${({ $custom }) => ($custom ? '12px' : '100%')};
   letter-spacing: ${({ $custom }) => ($custom ? '-0.3px' : '0')};
   font-weight: 500;
@@ -90,7 +90,7 @@ export const ListWrapper = styled(MenuList)`
 `
 
 export const ListItem = styled(MenuItem)`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: none;
   border: 0;
   outline: none;
@@ -112,8 +112,8 @@ export const CustomInput = styled.input`
   font-size: 21px;
   border-radius: 8px;
   width: 100%;
-  border: 1px solid ${({ theme }) => transparentize(0.7, theme.primaryText)};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  border: 1px solid ${({ theme }) => transparentize(0.7, theme.text)};
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 4px 8px;
   outline: 0;
   background: var(${UI.COLOR_PAPER});
@@ -123,11 +123,11 @@ export const CustomInput = styled.input`
   }
 
   &::-webkit-datetime-edit {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &::-webkit-datetime-edit[disabled] {
-    color: ${({ theme }) => transparentize(0.7, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.7, theme.text)};
   }
 `
 
@@ -195,6 +195,6 @@ export const CloseIcon = styled(X)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/ExecutionPriceTooltip/styled.ts b/apps/cowswap-frontend/src/modules/limitOrders/pure/ExecutionPriceTooltip/styled.ts
index 3874266809..6ccc18f589 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/ExecutionPriceTooltip/styled.ts
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/ExecutionPriceTooltip/styled.ts
@@ -8,7 +8,7 @@ export const FeeTooltipWrapper = styled.div`
   flex-flow: column wrap;
   align-items: center;
   justify-content: center;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 export const FeeItem = styled.div<{ highlighted?: boolean; borderTop?: boolean }>`
@@ -21,13 +21,13 @@ export const FeeItem = styled.div<{ highlighted?: boolean; borderTop?: boolean }
   border-radius: ${({ highlighted }) => (highlighted ? '10px' : '0')};
   background: ${({ theme, highlighted }) => (highlighted ? theme.bg1 : 'transparent')};
   border-top: ${({ theme, borderTop }) =>
-    borderTop ? `1px solid ${transparentize(0.9, `var(${UI.COLOR_PRIMARY_TEXT})`)}` : 'none'};
+    borderTop ? `1px solid ${transparentize(0.9, `var(${UI.COLOR_TEXT})`)}` : 'none'};
   gap: 4px;
 
   > i {
     font-size: 12px;
     font-style: normal;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
     max-width: 60%;
     min-width: 50%;
     font-weight: 300;
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/InfoBanner/styled.ts b/apps/cowswap-frontend/src/modules/limitOrders/pure/InfoBanner/styled.ts
index bb45ac0881..50049d4d84 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/InfoBanner/styled.ts
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/InfoBanner/styled.ts
@@ -31,12 +31,12 @@ export const InfoPopup = styled.div`
     height: 100%;
 
     > path {
-      fill: ${({ theme }) => transparentize(0.5, theme.primaryText)};
+      fill: ${({ theme }) => transparentize(0.5, theme.text)};
     }
   }
 
   .content > a {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     text-decoration: underline;
 
     &::after {
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx
index 27f610bff3..fe1f651ca8 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/index.tsx
@@ -30,7 +30,7 @@ import * as styledEl from './styled'
 const Wrapper = styled.div`
   font-size: 13px;
   font-weight: 400;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 8px;
 `
 
@@ -38,7 +38,7 @@ const ArrowDownRight = styled.div`
   display: flex;
   opacity: 0.3;
   margin: 0 3px 0 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 export interface LimitOrdersDetailsProps {
   rateInfoParams: RateInfoParams
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/styled.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/styled.tsx
index 262b100a85..94e2569b0a 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/LimitOrdersDetails/styled.tsx
@@ -42,7 +42,7 @@ export const DetailsRow = styled.div`
 export const StyledRateInfo = styled(RateInfo)`
   font-size: 13px;
   font-weight: 400;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   min-height: 24px;
   gap: 3px;
 `
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/styled.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/styled.tsx
index a8e868378e..1267c413cc 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/OrderType/styled.tsx
@@ -10,7 +10,7 @@ export const Wrapper = styled.div`
 `
 
 export const LabelText = styled.span`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   transition: color 0.15s ease-in-out;
 `
 
@@ -21,7 +21,7 @@ export const StyledSVG = styled(SVG)`
   height: var(--size);
 
   > path {
-    fill: var(${UI.COLOR_PRIMARY_TEXT});
+    fill: var(${UI.COLOR_TEXT});
     transition: fill 0.15s ease-in-out;
   }
 
@@ -69,7 +69,7 @@ export const StyledMenuList = styled(MenuList)`
 
 export const StyledMenuItem = styled(MenuItem)`
   padding: 6px 12px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: 13px;
   cursor: pointer;
   border-radius: 8px;
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactIndicator/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactIndicator/index.tsx
index b91dec12ad..aede3b3e1b 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactIndicator/index.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactIndicator/index.tsx
@@ -22,7 +22,7 @@ const PercentBox = styled.span<{ isPositive: boolean; isTooLowRate: boolean }>`
   align-items: center;
   gap: 2px;
   color: ${({ isPositive, isTooLowRate }) =>
-    isPositive ? `var(${UI.COLOR_SUCCESS})` : isTooLowRate ? `var(${UI.COLOR_DANGER})` : `var(${UI.COLOR_TEXT1})`};
+    isPositive ? `var(${UI.COLOR_SUCCESS})` : isTooLowRate ? `var(${UI.COLOR_DANGER})` : `var(${UI.COLOR_TEXT})`};
 `
 const ImpactTooltip = styled.span`
   display: block;
diff --git a/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactWarning/index.tsx b/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactWarning/index.tsx
index 03d9319aa2..88ca42e19a 100644
--- a/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactWarning/index.tsx
+++ b/apps/cowswap-frontend/src/modules/limitOrders/pure/RateImpactWarning/index.tsx
@@ -42,7 +42,7 @@ const ReadMoreLink = styled.a`
   text-decoration: underline;
 
   &:hover {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/containers/MultipleCancellationMenu/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/containers/MultipleCancellationMenu/index.tsx
index b8ff321e3d..f21d84ce79 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/containers/MultipleCancellationMenu/index.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/containers/MultipleCancellationMenu/index.tsx
@@ -62,7 +62,7 @@ const ActionButton = styled.button`
 
 const TextButton = styled.button`
   display: inline-block;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: 13px;
   padding: 5px 10px;
   cursor: pointer;
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/OrderContextMenu.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/OrderContextMenu.tsx
index d7a9ec2b08..dd70b63450 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/OrderContextMenu.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/OrderContextMenu.tsx
@@ -24,7 +24,7 @@ export const ContextMenuButton = styled(MenuButton)`
   }
 
   &:hover {
-    outline: 1px solid ${({ theme }) => transparentize(0.8, theme.primaryText)};
+    outline: 1px solid ${({ theme }) => transparentize(0.8, theme.text)};
   }
 `
 export const ContextMenuList = styled(MenuList)`
@@ -49,7 +49,7 @@ export const ContextMenuItem = styled(MenuItem)<{ $red?: boolean }>`
   align-items: center;
   font-size: 15px;
   font-weight: 500;
-  color: ${({ theme, $red }) => ($red ? `var(${UI.COLOR_DANGER})` : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ theme, $red }) => ($red ? `var(${UI.COLOR_DANGER})` : `var(${UI.COLOR_TEXT})`)};
 
   &:hover {
     background: ${({ theme }) => transparentize(0.8, theme.text3)};
@@ -70,7 +70,7 @@ export function OrderContextMenu({ openReceipt, activityUrl, showCancellationMod
   return (
     <Menu>
       <ContextMenuButton>
-        <MoreVertical color={transparentize(0.5, `var(${UI.COLOR_PRIMARY_TEXT})`)} />
+        <MoreVertical color={transparentize(0.5, `var(${UI.COLOR_TEXT})`)} />
       </ContextMenuButton>
       <ContextMenuList>
         <ContextMenuItem onSelect={openReceipt}>
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
index cbcc1c97ad..f5457ba27c 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx
@@ -93,7 +93,7 @@ export const AmountItem = styled.div`
   }
 
   > span > span {
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 `
 
@@ -206,7 +206,7 @@ export const ProgressBar = styled.div<{ value: number }>`
   margin: 0;
   height: 5px;
   width: 100%;
-  background: ${({ theme }) => (theme.darkMode ? theme.bg1 : transparentize(0.92, theme.primaryText))};
+  background: ${({ theme }) => (theme.darkMode ? theme.bg1 : transparentize(0.92, theme.text))};
   border-radius: 6px;
 
   &::before {
@@ -245,7 +245,7 @@ export const ToggleExpandButton = styled.div<{ isCollapsed?: boolean }>`
   background-size: 200% 100%;
   background-position: 100% 0;
 
-  border: 1px solid ${({ theme }) => transparentize(0.8, theme.primaryText)};
+  border: 1px solid ${({ theme }) => transparentize(0.8, theme.text)};
   padding: 0 6px 0 10px;
   cursor: pointer;
   transition: background 0.5s ease-in-out;
@@ -298,7 +298,7 @@ export const ToggleExpandButton = styled.div<{ isCollapsed?: boolean }>`
     margin: 0 0 0 6px;
     cursor: pointer;
     outline: none;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     transition: color 0.2s ease-out;
     position: relative;
     height: var(--height);
@@ -309,7 +309,7 @@ export const ToggleExpandButton = styled.div<{ isCollapsed?: boolean }>`
     min-height: var(--size);
     line-height: 1;
     background: transparent;
-    border: 1px solid ${({ theme }) => transparentize(0.8, theme.primaryText)};
+    border: 1px solid ${({ theme }) => transparentize(0.8, theme.text)};
     border-radius: 6px;
     user-select: none;
   }
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx
index fe398c5506..6a6e6640bc 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTable.tsx
@@ -151,7 +151,7 @@ const StyledCloseIcon = styled(X)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
@@ -179,7 +179,7 @@ const OrdersExplainerBanner = styled.div`
     gap: 12px;
 
     > svg > path {
-      fill: ${({ theme }) => transparentize(0.5, theme.primaryText)};
+      fill: ${({ theme }) => transparentize(0.5, theme.text)};
     }
 
     > b {
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTablePagination.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTablePagination.tsx
index 83b3bed7c3..3b6eab717b 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTablePagination.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTablePagination.tsx
@@ -30,7 +30,7 @@ const PaginationBox = styled.div`
 
 const pageButtonStyles = css<{ $active?: boolean }>`
   background: ${({ theme, $active }) => ($active ? transparentize(0.9, theme.text3) : 'transparent')};
-  color: ${({ $active }) => ($active ? `var(${UI.COLOR_TEXT1})` : `var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`)};
+  color: ${({ $active }) => ($active ? `var(${UI.COLOR_TEXT})` : `var(${UI.COLOR_TEXT_OPACITY_25})`)};
   border: 0;
   outline: 0;
   padding: 5px 10px;
@@ -42,7 +42,7 @@ const pageButtonStyles = css<{ $active?: boolean }>`
 
   &:hover {
     background: var(${UI.COLOR_PAPER});
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTabs.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTabs.tsx
index 530ee2a993..44b379884f 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTabs.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrdersTabs.tsx
@@ -26,8 +26,7 @@ const Tabs = styled.div`
 const TabButton = styled(Link)<{ active: string }>`
   display: inline-block;
   background: ${({ theme, active }) => (active === 'true' ? transparentize(0.88, theme.text3) : 'transparent')};
-  color: ${({ theme, active }) =>
-    active === 'true' ? `var(${UI.COLOR_TEXT1})` : transparentize(0.2, theme.primaryText)};
+  color: ${({ theme, active }) => (active === 'true' ? `var(${UI.COLOR_TEXT})` : transparentize(0.2, theme.text))};
   font-weight: ${({ active }) => (active === 'true' ? '600' : '400')};
   text-decoration: none;
   font-size: 13px;
@@ -43,7 +42,7 @@ const TabButton = styled(Link)<{ active: string }>`
 
   &:hover {
     background: var(${UI.COLOR_PAPER});
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx
index 46dbb5a270..027476a1b0 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/TableGroup.tsx
@@ -23,7 +23,7 @@ import { OrderTableGroup } from '../../utils/orderTableGroupUtils'
 const GroupBox = styled.div``
 
 const Pagination = styled(OrdersTablePagination)`
-  background: ${({ theme }) => transparentize(0.91, theme.primaryText)};
+  background: ${({ theme }) => transparentize(0.91, theme.text)};
   margin: 0;
   padding: 10px 0;
 `
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
index b674383c01..6c84956f5c 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -70,7 +70,7 @@ const Content = styled.div`
 
     > svg {
       padding: 28px;
-      fill: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+      fill: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
     }
   }
 
@@ -88,7 +88,7 @@ const Content = styled.div`
     margin: 0 auto 21px;
     font-weight: 400;
     text-align: center;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 `
 
diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx
index f0ebdf6081..de2bce451b 100644
--- a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/styled.tsx
@@ -35,8 +35,7 @@ export const TableHeader = styled.div<{ isOpenOrdersTab: boolean; isRowSelectabl
 `
 
 export const TableRow = styled(TableHeader)<{ isChildOrder?: boolean }>`
-  background: ${({ isChildOrder }) =>
-    isChildOrder ? transparentize(0.91, `var(${UI.COLOR_PRIMARY_TEXT})`) : 'transparent'};
+  background: ${({ isChildOrder }) => (isChildOrder ? transparentize(0.91, `var(${UI.COLOR_TEXT})`) : 'transparent')};
   transition: background 0.15s ease-in-out;
   display: grid;
 
@@ -49,7 +48,7 @@ export const TableRow = styled(TableHeader)<{ isChildOrder?: boolean }>`
 
     &::before {
       display: ${({ isChildOrder }) => (isChildOrder ? 'inline-block' : 'none')};
-      color: ${({ theme }) => transparentize(0.5, theme.primaryText)};
+      color: ${({ theme }) => transparentize(0.5, theme.text)};
       content: '↳';
       text-decoration: none !important;
     }
@@ -113,14 +112,14 @@ export const TableRowCheckbox = styled.input`
   width: var(--checkboxSize);
   height: var(--checkboxSize);
   background: transparent;
-  border: 2px solid ${({ theme }) => transparentize(0.5, theme.primaryText)};
+  border: 2px solid ${({ theme }) => transparentize(0.5, theme.text)};
   border-radius: var(--checkBoxBorderRadius);
   appearance: none;
   margin: 0;
   outline: 0;
 
   &:checked {
-    background-color: var(${UI.COLOR_PRIMARY_TEXT});
+    background-color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &:checked + ${CheckboxCheckmark}::after {
@@ -128,7 +127,7 @@ export const TableRowCheckbox = styled.input`
   }
 
   &:indeterminate {
-    border-color: var(${UI.COLOR_PRIMARY_TEXT});
+    border-color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &:indeterminate + ${CheckboxCheckmark}::after {
@@ -159,6 +158,6 @@ export const TableRowCheckboxWrapper = styled.label`
   cursor: pointer;
 
   &:hover > ${TableRowCheckbox}:not(:checked):not([disabled]) {
-    background: ${({ theme }) => transparentize(0.85, theme.primaryText)};
+    background: ${({ theme }) => transparentize(0.85, theme.text)};
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/swap/containers/FeesDiscount/index.tsx b/apps/cowswap-frontend/src/modules/swap/containers/FeesDiscount/index.tsx
index a5930e9351..156dcfc4eb 100644
--- a/apps/cowswap-frontend/src/modules/swap/containers/FeesDiscount/index.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/containers/FeesDiscount/index.tsx
@@ -21,7 +21,7 @@ const DarkSpan = styled.span`
   padding: 2px 8px;
   background: var(${UI.COLOR_GREY});
   border-radius: 5px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 
   &:hover {
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowBanner/styleds.ts b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowBanner/styleds.ts
index 0fd349b005..54703053b8 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowBanner/styleds.ts
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowBanner/styleds.ts
@@ -38,16 +38,16 @@ export const ClosedBannerWrapper = styled.div`
     cursor: pointer;
 
     > path {
-      fill: var(${UI.COLOR_PRIMARY_TEXT});
+      fill: var(${UI.COLOR_TEXT});
     }
   }
 
   > svg:last-child {
-    stroke: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    stroke: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   &:hover > svg:last-child {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
@@ -66,7 +66,7 @@ export const BannerInnerWrapper = styled.div`
 
   > p,
   ul {
-    color: ${({ theme }) => transparentize(0.15, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.15, theme.text)};
     line-height: 1.5;
   }
 
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalTopContent.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalTopContent.tsx
index 142b70fdda..7e052e1ed4 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalTopContent.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowModalContent/EthFlowModalTopContent.tsx
@@ -11,7 +11,7 @@ const ModalMessage = styled.div`
   flex-flow: row wrap;
   padding: 16px 0 0;
   width: 100%;
-  color: ${({ theme }) => transparentize(0.15, theme.primaryText)};
+  color: ${({ theme }) => transparentize(0.15, theme.text)};
   font-size: 14px;
   line-height: 1.3;
 
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx
index d86f198ac1..af1faa5cd9 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/StatusIcon.tsx
@@ -32,7 +32,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
       ? 'none'
       : status === 'success'
       ? 'none'
-      : `2px solid ${transparentize(0.9, `var(${UI.COLOR_PRIMARY_TEXT})`)}`};
+      : `2px solid ${transparentize(0.9, `var(${UI.COLOR_TEXT})`)}`};
   box-shadow: ${({ status, theme }) => (status === 'pending' ? theme.boxShadow3 : 'none')};
   background: ${({ status, theme }) =>
     status === 'pending'
@@ -87,7 +87,7 @@ const StepIcon = styled.div<{ status: StatusIconState }>`
         ? theme.danger
         : status === 'pending'
         ? theme.text3
-        : transparentize(0.4, theme.primaryText)};
+        : transparentize(0.4, theme.text)};
     object-fit: contain;
     width: 24px;
     height: 19px;
@@ -118,12 +118,12 @@ const Label = styled.span<{ status: StatusIconState; crossOut: boolean }>`
     status === 'pending'
       ? theme.text1
       : crossOut
-      ? transparentize(0.8, `var(${UI.COLOR_PRIMARY_TEXT})`)
+      ? transparentize(0.8, `var(${UI.COLOR_TEXT})`)
       : status === 'error'
       ? theme.danger
       : status === 'success'
       ? theme.success
-      : transparentize(0.4, theme.primaryText)};
+      : transparentize(0.4, theme.text)};
   color: var(--color);
   font-weight: ${({ status }) => (status === 'pending' ? '600' : '500')};
   font-size: 14px;
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx
index 39f20227e8..4db5359fb0 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/index.tsx
@@ -96,7 +96,7 @@ export const Progress = styled.div<ProgressProps>`
   height: var(--height);
   position: relative;
   display: flex;
-  background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+  background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
   margin: 28px 0 0;
   border-radius: var(--height);
 
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx
index 838e98d175..2b18abb9fe 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/EthFlowStepper/steps/Step3.tsx
@@ -13,7 +13,7 @@ import { EthFlowStepperProps, SmartOrderStatus } from '..'
 import { Step, StepProps, ExplorerLinkStyled } from '../Step'
 
 const RefundMessage = styled.span`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-weight: 500;
 `
 
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/styled.tsx b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/styled.tsx
index f9a34b5d23..1f76d939d6 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/EthFlow/WrappingPreview/styled.tsx
@@ -44,7 +44,7 @@ export const WrappingPreviewContainer = styled.div`
     }
 
     &:nth-of-type(2) {
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
       background-color: var(${UI.COLOR_GREY});
       border: 1px solid ${({ theme }) => theme.grey1};
       border-radius: 0 16px 16px 0;
@@ -66,7 +66,7 @@ export const WrappingPreviewContainer = styled.div`
     right: 0;
     margin: auto;
     background: var(${UI.COLOR_GREY});
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
     width: 32px;
     height: 32px;
     border-radius: 32px;
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/Row/styled.ts b/apps/cowswap-frontend/src/modules/swap/pure/Row/styled.ts
index b3771a0dab..fdf88251f2 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/Row/styled.ts
+++ b/apps/cowswap-frontend/src/modules/swap/pure/Row/styled.ts
@@ -22,16 +22,16 @@ export const StyledRowBetween = styled(RowBetween)<RowStyleProps>`
   }
 
   ${TextWrapper} {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     font-size: ${({ fontSize = 13 }) => fontSize}px;
     font-weight: ${({ fontWeight = 500 }) => fontWeight};
 
     &:first-child {
-      color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_70})`};
+      color: ${`var(${UI.COLOR_TEXT_OPACITY_70})`};
       font-weight: 400;
 
       &:hover {
-        color: var(${UI.COLOR_PRIMARY_TEXT});
+        color: ${`var(${UI.COLOR_TEXT})`};
       }
     }
 
@@ -46,6 +46,6 @@ export const StyledRowBetween = styled(RowBetween)<RowStyleProps>`
 
   ${StyledMouseoverTooltipContent} {
     background-color: ${({ theme }) => theme.bg3};
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/styled.tsx b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/styled.tsx
index ce5636c0b9..c724edcf4d 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/TradeRates/styled.tsx
@@ -16,7 +16,7 @@ export const Row = styled.div`
   justify-content: space-between;
   font-size: 13px;
   font-weight: 400;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   min-height: 24px;
   gap: 3px;
 
@@ -30,11 +30,11 @@ export const Row = styled.div`
     }
 
     &:first-child > span {
-      color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+      color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
       transition: color 0.15s ease-in-out;
 
       &:hover {
-        color: var(${UI.COLOR_PRIMARY_TEXT});
+        color: ${`var(${UI.COLOR_TEXT})`};
       }
     }
 
@@ -65,7 +65,7 @@ export const Discount = styled.span`
   cursor: pointer;
   padding: 2px 8px;
   background: var(${UI.COLOR_GREY});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   border-radius: 5px;
   font-weight: 400;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
diff --git a/apps/cowswap-frontend/src/modules/swap/pure/styled.tsx b/apps/cowswap-frontend/src/modules/swap/pure/styled.tsx
index 74491b9ba5..eefdd8ec3b 100644
--- a/apps/cowswap-frontend/src/modules/swap/pure/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/swap/pure/styled.tsx
@@ -33,12 +33,12 @@ export const BottomGrouping = styled.div`
 `
 export const LightGreyText = styled.span`
   font-weight: 400;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
 `
 
 export const StyledInfoIcon = styled(Info)`
   opacity: 0.5;
-  stroke: var(${UI.COLOR_PRIMARY_TEXT});
+  stroke: var(${UI.COLOR_TEXT});
   line-height: 0;
   vertical-align: middle;
   transition: opacity 0.2s ease-in-out;
diff --git a/apps/cowswap-frontend/src/modules/tokensList/containers/ManageListsAndTokens/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/containers/ManageListsAndTokens/styled.ts
index 82c53eff12..b16f81e0bc 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/containers/ManageListsAndTokens/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/containers/ManageListsAndTokens/styled.ts
@@ -34,7 +34,7 @@ export const InputError = styled.div`
 export const Tab = styled.button<{ active$: boolean }>`
   ${blankButtonMixin};
 
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   opacity: ${({ active$ }) => (active$ ? 1 : 0.5)};
   padding: 10px;
   font-size: 16px;
@@ -58,16 +58,16 @@ export const PrimaryInput = styled.input`
   font-size: 18px;
   border-radius: 20px;
   padding: 16px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   outline: none;
 
   ::placeholder {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &:focus {
     ::placeholder {
-      color: ${({ theme }) => transparentize(0.7, theme.primaryText)};
+      color: ${({ theme }) => transparentize(0.7, theme.text)};
     }
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/styled.ts
index 67703469c6..2b5036fa47 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/FavouriteTokensList/styled.ts
@@ -36,7 +36,7 @@ export const TokensItem = styled.button`
   outline: none;
   padding: 6px 10px;
   border-radius: 10px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   border: 1px solid var(${UI.COLOR_GREY});
   font-weight: 500;
   font-size: 16px;
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/ListItem/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/ListItem/styled.ts
index 6a71ab8e6a..1e2bac06fe 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/ListItem/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/ListItem/styled.ts
@@ -21,7 +21,7 @@ export const SettingsButton = styled(MenuButton)`
   ${blankButtonMixin}
 
   > svg {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
 
     &:hover {
       color: var(${UI.COLOR_SECONDARY_TEXT});
@@ -55,7 +55,7 @@ export const SettingsAction = styled.div`
 `
 
 export const ListVersion = styled.div`
-  color: var(${UI.COLOR_TEXT1_INACTIVE});
+  color: var(${UI.COLOR_TEXT_INACTIVE});
   border-bottom: 1px solid var(${UI.COLOR_GREY});
   padding: 0 5px 10px 5px;
 `
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/styled.ts
index 8531991f14..1382b123f0 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/styled.ts
@@ -44,14 +44,14 @@ export const SearchInput = styled.input`
   white-space: nowrap;
   outline: none;
   background: var(${UI.COLOR_GREY});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   border: 1px solid var(${UI.COLOR_BORDER});
   appearance: none;
   font-size: 16px;
   border-radius: 12px;
 
   ::placeholder {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     opacity: 0.7;
   }
 
@@ -77,7 +77,7 @@ export const ActionButton = styled.button`
   margin: 0;
   font-size: 16px;
   font-weight: 500;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 
   &:hover {
     opacity: 0.7;
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListItem/styled.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListItem/styled.ts
index bc6681c8ec..938fb2d294 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListItem/styled.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenListItem/styled.ts
@@ -16,7 +16,7 @@ export const TokenItem = styled.button<{ $isVirtual?: boolean }>`
   background: none;
   border: 0;
   outline: none;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   cursor: pointer;
   font-size: 16px;
   padding: 10px 20px;
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/styled.tsx b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/styled.tsx
index a503fa3193..30b2a091eb 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/TokenTags/styled.tsx
@@ -22,7 +22,7 @@ export const Tag = styled.div<{ tag?: { id: string } }>`
       ? `var(${UI.COLOR_DANGER_TEXT})`
       : tag?.id === '1'
       ? `var(${UI.COLOR_SUCCESS_TEXT})`
-      : `var(${UI.COLOR_TEXT1})`};
+      : `var(${UI.COLOR_TEXT})`};
   font-size: 12px;
   font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
   border-radius: 4px;
diff --git a/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts b/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts
index c7e5e9a15f..56a9677778 100644
--- a/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts
+++ b/apps/cowswap-frontend/src/modules/tokensList/pure/commonElements.ts
@@ -19,7 +19,7 @@ export const IconButton = styled.button`
   ${blankButtonMixin}
 
   > svg {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
 
     &:hover {
       color: var(${UI.COLOR_SECONDARY_TEXT});
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/ConfirmDetailsItem/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/ConfirmDetailsItem/styled.ts
index be36dcfff2..feefc59e6b 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/ConfirmDetailsItem/styled.ts
+++ b/apps/cowswap-frontend/src/modules/trade/pure/ConfirmDetailsItem/styled.ts
@@ -17,7 +17,7 @@ export const Wrapper = styled.div`
 
   > svg:first-child {
     margin: 0 4px 0 0;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     opacity: 0.5;
   }
 
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts
index ee6afcdc9c..d584826785 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts
+++ b/apps/cowswap-frontend/src/modules/trade/pure/Settings/styled.ts
@@ -8,7 +8,7 @@ import { UI } from 'common/constants/theme'
 export const SettingsTitle = styled.h3`
   font-weight: 600;
   font-size: 14px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   margin: 0 0 12px 0;
 `
 
@@ -19,7 +19,7 @@ export const SettingsContainer = styled.div`
   box-shadow: ${({ theme }) => theme.boxShadow2};
   border: 1px solid ${({ theme }) => transparentize(0.95, theme.white)};
   background: var(${UI.COLOR_PAPER});
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 export const SettingsBoxWrapper = styled.div<{ disabled: boolean }>`
@@ -39,7 +39,7 @@ export const SettingsBoxTitle = styled.div`
   display: flex;
   align-items: center;
   font-weight: 400;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: 14px;
   opacity: 0.85;
   margin-right: 2rem;
@@ -113,11 +113,11 @@ export const SettingsIcon = styled(SettingsIconRaw)`
   > path,
   > circle {
     transition: stroke 0.3s ease-in-out;
-    stroke: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    stroke: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   &:hover > path,
   &:hover > circle {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/styled.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/styled.tsx
index 6655e97d10..34de0351e8 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/pure/TradeNumberInput/styled.tsx
@@ -49,7 +49,7 @@ export const ArrowsWrapper = styled.div`
 
     &:hover {
       > span > svg > path {
-        fill: var(${UI.COLOR_PRIMARY_TEXT});
+        fill: var(${UI.COLOR_TEXT});
       }
     }
   }
@@ -65,7 +65,7 @@ export const ArrowsWrapper = styled.div`
   }
 
   > span > span > svg > path {
-    fill: ${({ theme }) => transparentize(0.7, theme.primaryText)};
+    fill: ${({ theme }) => transparentize(0.7, theme.text)};
     transition: fill 0.2s linear;
   }
 
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradeSelect/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradeSelect/index.tsx
index fc174ab731..1f40b49411 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/TradeSelect/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/pure/TradeSelect/index.tsx
@@ -46,16 +46,16 @@ const StyledMenuButton = styled(MenuButton)`
   cursor: pointer;
   width: 100%;
   justify-content: space-between;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 const StyledMenuItem = styled(MenuItem)`
   cursor: pointer;
   font-size: 14px;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
 
   &:hover {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &:not(:last-child) {
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/TradeWidgetField/styled.tsx b/apps/cowswap-frontend/src/modules/trade/pure/TradeWidgetField/styled.tsx
index 26fef953d6..03b84a1983 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/TradeWidgetField/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/pure/TradeWidgetField/styled.tsx
@@ -7,7 +7,7 @@ import { UI } from 'common/constants/theme'
 import { NumericalInput } from '../TradeNumberInput/styled'
 
 export const TradeWidgetFieldLabel = styled.span`
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   display: flex;
   align-items: center;
   font-size: 13px;
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts b/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts
index 03a449f362..11241b1f18 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts
+++ b/apps/cowswap-frontend/src/modules/trade/pure/UnlockWidgetScreen/styled.ts
@@ -12,14 +12,14 @@ export const Container = styled.div`
 export const TitleSection = styled.div`
   text-align: center;
   font-size: 20px;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   margin: 24px auto 42px;
 
   > h3 {
     font-weight: 400;
     font-size: inherit;
     margin: 0 0 4px;
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   }
 
   > strong {
diff --git a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormBlankButton/index.tsx b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormBlankButton/index.tsx
index d1215470a5..021f0fb80a 100644
--- a/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormBlankButton/index.tsx
+++ b/apps/cowswap-frontend/src/modules/tradeFormValidation/pure/TradeFormBlankButton/index.tsx
@@ -30,7 +30,7 @@ const ActionButton = styled.button<{ hasLongText$: boolean }>`
 
   &:disabled {
     background-color: var(${UI.COLOR_GREY});
-    color: ${({ theme }) => transparentize(0.4, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.4, theme.text)};
     background-image: none;
     border: 0;
     cursor: auto;
diff --git a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx
index 63eb571d9a..8b2084b908 100644
--- a/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx
+++ b/apps/cowswap-frontend/src/modules/twap/containers/TwapFormWidget/tooltips.tsx
@@ -14,7 +14,7 @@ const IconImage = styled.div`
 
   > svg {
     opacity: 0.5;
-    fill: var(${UI.COLOR_PRIMARY_TEXT});
+    fill: var(${UI.COLOR_TEXT});
     margin: 0 3px 0 0;
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/twap/pure/AmountParts/styled.tsx b/apps/cowswap-frontend/src/modules/twap/pure/AmountParts/styled.tsx
index f9aa11c403..9032fb5379 100644
--- a/apps/cowswap-frontend/src/modules/twap/pure/AmountParts/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/twap/pure/AmountParts/styled.tsx
@@ -57,6 +57,6 @@ export const Amount = styled(TokenAmount)`
 `
 
 export const Fiat = styled(FiatAmount)`
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   font-size: 13px;
 `
diff --git a/apps/cowswap-frontend/src/modules/twap/pure/CustomDeadlineSelector/styled.tsx b/apps/cowswap-frontend/src/modules/twap/pure/CustomDeadlineSelector/styled.tsx
index 344e14d229..5f9f7ed531 100644
--- a/apps/cowswap-frontend/src/modules/twap/pure/CustomDeadlineSelector/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/twap/pure/CustomDeadlineSelector/styled.tsx
@@ -72,18 +72,18 @@ export const CloseIcon = styled(X)`
   }
 
   > line {
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
   }
 `
 
 export const CancelButton = styled(ButtonSecondary)`
   background: transparent;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   border: 1px solid ${({ theme }) => theme.text1};
 
   :hover {
     background: transparent;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     border: 1px solid ${({ theme }) => theme.text1};
   }
 `
diff --git a/apps/cowswap-frontend/src/modules/wallet/containers/AccountSelectorModal/styled.tsx b/apps/cowswap-frontend/src/modules/wallet/containers/AccountSelectorModal/styled.tsx
index 18fbd21277..3668c6e1fd 100644
--- a/apps/cowswap-frontend/src/modules/wallet/containers/AccountSelectorModal/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/containers/AccountSelectorModal/styled.tsx
@@ -7,7 +7,7 @@ import { UI } from 'common/constants/theme'
 export const CloseIcon = styled(Close)`
   opacity: 0.6;
   transition: opacity 0.3s ease-in-out;
-  stroke: var(${UI.COLOR_PRIMARY_TEXT});
+  stroke: var(${UI.COLOR_TEXT});
   width: 24px;
   height: 24px;
   cursor: pointer;
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/AddToMetamask/index.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/AddToMetamask/index.tsx
index b260365a9a..87c1e963e0 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/AddToMetamask/index.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/AddToMetamask/index.tsx
@@ -18,7 +18,7 @@ export const ButtonCustom = styled.button`
   border-radius: 16px;
   min-height: 52px;
   border: 1px solid ${({ theme }) => theme.border2};
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT})`};
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: transparent;
   outline: 0;
   padding: 8px 16px;
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/WalletModal/styled.tsx b/apps/cowswap-frontend/src/modules/wallet/pure/WalletModal/styled.tsx
index 463acd1a67..b08fc92410 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/WalletModal/styled.tsx
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/WalletModal/styled.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components/macro'
 import { UI } from 'common/constants/theme'
 
 export const TermsWrapper = styled.div`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
 `
 
 export const Blurb = styled.div`
@@ -42,15 +42,18 @@ export const Wrapper = styled.div`
 
 export const UpperSection = styled.div`
   position: relative;
+
   h5 {
     margin: 0;
     margin-bottom: 0.5rem;
     font-size: 1rem;
     font-weight: 400;
   }
+
   h5:last-child {
     margin-bottom: 0px;
   }
+
   h4 {
     margin-top: 0;
     font-weight: 500;
@@ -61,6 +64,7 @@ export const OptionGrid = styled.div`
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(4, 1fr);
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     grid-template-columns: repeat(3, 1fr);
   `};
@@ -88,7 +92,7 @@ export const IconWrapper = styled.div`
   }
 
   > svg > path {
-    --color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     fill: var(--color);
     stroke: var(--color);
   }
diff --git a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
index ccdd9fba18..71cc052317 100644
--- a/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
+++ b/apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/styled.ts
@@ -29,11 +29,11 @@ export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
     css`
       margin: 0;
       padding: 6px 12px;
-      background: transparent;
       border: 0;
       font-size: 14px;
-      font-weight: var(${UI.FONT_WEIGHT_MEDIUM});
-      color: var(${UI.COLOR_PRIMARY_TEXT}) !important;
+      font-weight: ${`var(${UI.FONT_WEIGHT_MEDIUM})`};
+      background: transparent;
+      color: ${`var(${UI.COLOR_TEXT}) !important`};
       transition: all 0.2s ease-in-out;
       opacity: 0.7;
 
@@ -41,7 +41,7 @@ export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
       &:active,
       &:focus {
         opacity: 1 !important;
-        background: var(${UI.COLOR_PAPER_DARKER}) !important;
+        background: ${`var(${UI.COLOR_PAPER_DARKER}) !important`};
       }
 
       > svg {
@@ -52,7 +52,7 @@ export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
       }
 
       > svg > path {
-        fill: var(${UI.COLOR_PRIMARY_TEXT});
+        fill: var(${UI.COLOR_TEXT});
       }
     `}
 `
@@ -60,12 +60,12 @@ export const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
 export const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean; clickDisabled?: boolean }>`
   background-color: var(${UI.COLOR_GREY});
   border: 1px solid transparent;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-weight: 500;
 
   &:hover {
     background-color: var(${UI.COLOR_GREY});
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   ${({ clickDisabled }) =>
@@ -95,7 +95,7 @@ export const NetworkIcon = styled(Activity)`
 `
 
 export const Wrapper = styled.div`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'initial' : '40px')};
   display: flex;
   padding: 0;
diff --git a/apps/cowswap-frontend/src/pages/Account/Tokens/styled.ts b/apps/cowswap-frontend/src/pages/Account/Tokens/styled.ts
index 9ba7aad379..67e845b674 100644
--- a/apps/cowswap-frontend/src/pages/Account/Tokens/styled.ts
+++ b/apps/cowswap-frontend/src/pages/Account/Tokens/styled.ts
@@ -17,7 +17,7 @@ export const MenuButton = styled.button`
   outline: none;
   border: none;
   cursor: pointer;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   background: var(${UI.COLOR_PAPER});
   height: 44px;
   border-radius: 21px;
@@ -52,7 +52,7 @@ export const Menu = styled.div`
 export const MenuItem = styled.div<{ active: boolean }>`
   transition: background 0.2s ease-in;
   background-color: ${({ active, theme }) => (active ? theme.grey1 : 'transparent')};
-  color: ${({ active, theme }) => (active ? theme.text2 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+  color: ${({ active, theme }) => (active ? theme.text2 : `var(${UI.COLOR_TEXT})`)};
   justify-content: space-between;
   border-radius: 8px;
   padding: 0.4rem 0.8rem;
@@ -88,7 +88,7 @@ export const AccountPageWrapper = styled.div`
 `
 
 export const MainText = styled(ThemedText.Main)`
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   font-size: 14px;
 `
 
@@ -174,16 +174,16 @@ export const SearchInputFormatter = styled(Column)`
     border: none;
     transition: background 0.3s ease-in-out;
     background: var(${UI.COLOR_PAPER});
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   > input::placeholder {
     font-size: 16px;
-    color: ${({ theme }) => transparentize(0.4, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.4, theme.text)};
   }
 
   > input:focus::placeholder {
-    color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+    color: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
   }
 `
 
@@ -215,11 +215,11 @@ export const TokenSearchInput = styled.input`
 
   &::placeholder {
     font-size: 14px !important;
-    color: ${({ theme }) => transparentize(0.5, theme.darkMode ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+    color: ${({ theme }) => transparentize(0.5, theme.darkMode ? theme.white : `var(${UI.COLOR_TEXT})`)};
   }
 
   &:focus::placeholder {
-    color: ${({ theme }) => transparentize(0.3, theme.darkMode ? theme.white : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+    color: ${({ theme }) => transparentize(0.3, theme.darkMode ? theme.white : `var(${UI.COLOR_TEXT})`)};
   }
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
diff --git a/apps/cowswap-frontend/src/pages/Account/styled.tsx b/apps/cowswap-frontend/src/pages/Account/styled.tsx
index 93b65e51b2..55665752e0 100644
--- a/apps/cowswap-frontend/src/pages/Account/styled.tsx
+++ b/apps/cowswap-frontend/src/pages/Account/styled.tsx
@@ -63,7 +63,7 @@ const linkMixin = css`
   margin: 0;
   padding: 0;
   line-height: 1;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
   display: flex;
   align-items: center;
   text-decoration: underline;
@@ -372,7 +372,7 @@ export const BalanceDisplay = styled.div<{ titleSize?: number; altColor?: boolea
   gap: 3px 12px;
   width: 100%;
   font-size: 14px;
-  color: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_25})`};
+  color: ${`var(${UI.COLOR_TEXT_OPACITY_25})`};
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
     gap: 12px;
@@ -414,7 +414,7 @@ export const BalanceDisplay = styled.div<{ titleSize?: number; altColor?: boolea
     display: flex;
     align-items: center;
     gap: 0 6px;
-    color: ${({ theme, altColor }) => (altColor ? theme.text3 : `var(${UI.COLOR_PRIMARY_TEXT})`)};
+    color: ${({ theme, altColor }) => (altColor ? theme.text3 : `var(${UI.COLOR_TEXT})`)};
     font-size: ${({ titleSize }) => (titleSize ? `${titleSize}px` : '21px')};
 
     ${({ theme }) => theme.mediaWidth.upToMedium`
diff --git a/apps/cowswap-frontend/src/pages/Claim/styled.ts b/apps/cowswap-frontend/src/pages/Claim/styled.ts
index b06193d483..0fb19ebf7c 100644
--- a/apps/cowswap-frontend/src/pages/Claim/styled.ts
+++ b/apps/cowswap-frontend/src/pages/Claim/styled.ts
@@ -22,7 +22,7 @@ export const InnerPageWrapper = styled.div`
   --border-radius-small: 16px;
   display: flex;
   flex-flow: column wrap;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   padding: 30px;
   border: none;
   box-shadow: ${({ theme }) => theme.boxShadow1};
@@ -204,7 +204,7 @@ export const IntroDescription = styled.div<{ center?: boolean }>`
   }
 
   > p > i {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     font-weight: 600;
     font-style: normal;
   }
@@ -434,7 +434,7 @@ export const ClaimTable = styled.div`
     text-align: left;
     font-weight: normal;
     font-size: 15px;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     position: relative;
   }
 
@@ -445,7 +445,7 @@ export const ClaimTable = styled.div`
   td {
     display: flex;
     align-items: center;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     word-break: break-word;
     background: ${({ theme }) => theme.blueShade3};
   }
@@ -502,13 +502,13 @@ export const ClaimTable = styled.div`
     `};
 
     > span {
-      color: ${({ theme }) => transparentize(0.1, theme.primaryText)};
+      color: ${({ theme }) => transparentize(0.1, theme.text)};
       font-weight: 300;
     }
 
     > span > b {
       font-weight: 500;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
     }
   }
 
@@ -659,7 +659,7 @@ export const ClaimTotal = styled.div`
 export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
   width: 100%;
   padding: 24px 24px 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   position: relative;
   display: flex;
   flex-direction: column;
@@ -677,7 +677,7 @@ export const ConfirmOrLoadingWrapper = styled.div<{ activeBG: boolean }>`
     line-height: 1.2;
     text-align: center;
     margin: 0 0 12px;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
       font-size: 26px;
@@ -787,7 +787,7 @@ export const InputField = styled.div`
   padding: 18px 18px 18px 36px;
   border-radius: var(--border-radius);
   border: ${({ theme }) => theme.currencyInput?.border};
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   display: flex;
   flex-flow: row wrap;
   background: ${({ theme }) => theme.currencyInput?.background};
@@ -799,7 +799,7 @@ export const InputField = styled.div`
     border: 0;
     font-size: 24px;
     outline: 0;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     width: 100%;
   }
 
@@ -846,7 +846,7 @@ export const InputField = styled.div`
     padding: 0;
     font-size: 22px;
     font-weight: 600;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   > span {
@@ -968,7 +968,7 @@ export const TopNav = styled.div`
 
   ${ButtonSecondary} {
     margin: 0;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     font-size: 15px;
     width: auto;
   }
@@ -1205,7 +1205,7 @@ export const UnderlineButton = styled.button`
   }
 
   &:hover {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 
   &:disabled {
@@ -1265,7 +1265,7 @@ export const InvestInput = styled.span<{ disabled: boolean }>`
     bottom: 0;
     margin: auto;
     font-weight: normal;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     background: ${({ theme }) => theme.bg5};
     border-radius: 12px;
     padding: 0 12px;
@@ -1278,7 +1278,7 @@ export const InvestInput = styled.span<{ disabled: boolean }>`
   }
 
   > div > label > input {
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     border: none;
     padding: 12px 70px 0 0;
     font-size: 26px;
@@ -1383,7 +1383,7 @@ export const InvestAvailableBar = styled.div<{ percentage?: number }>`
     content: ${({ percentage }) => (percentage ? `'${percentage}%'` : '0%')};
     display: block;
     font-size: 12px;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
     z-index: 1;
     height: 100%;
     width: ${({ percentage }) => (percentage ? `${percentage}%` : '0%')};
@@ -1410,7 +1410,7 @@ export const InvestSummary = styled.div`
     display: flex;
     flex-flow: column wrap;
     margin: 0 0 18px;
-    color: ${({ theme }) => transparentize(0.1, theme.primaryText)};
+    color: ${({ theme }) => transparentize(0.1, theme.text)};
     gap: 4px;
   }
 
@@ -1432,7 +1432,7 @@ export const InvestSummary = styled.div`
 
   > span > b {
     font-weight: 600;
-    color: var(${UI.COLOR_PRIMARY_TEXT});
+    color: ${`var(${UI.COLOR_TEXT})`};
   }
 `
 
@@ -1539,7 +1539,7 @@ export const AccountClaimSummary = styled.div`
     }
 
     > svg > path {
-      fill: var(${UI.COLOR_PRIMARY_TEXT});
+      fill: var(${UI.COLOR_TEXT});
     }
   }
 `
@@ -1596,7 +1596,7 @@ export const CowSpinner = styled.div`
     height: 94%;
     width: 94%;
     padding: 0;
-    stroke: var(${UI.COLOR_PRIMARY_TEXT});
+    stroke: var(${UI.COLOR_TEXT});
     border-radius: var(--circle-size);
     z-index: 1;
   }
diff --git a/apps/cowswap-frontend/src/pages/CookiePolicy/index.tsx b/apps/cowswap-frontend/src/pages/CookiePolicy/index.tsx
index 5e6266ccf4..1757d1cc95 100644
--- a/apps/cowswap-frontend/src/pages/CookiePolicy/index.tsx
+++ b/apps/cowswap-frontend/src/pages/CookiePolicy/index.tsx
@@ -22,7 +22,7 @@ const Wrapper = styled(MarkdownPage)`
       width: 100%;
       min-width: 800px;
       border-spacing: 1px;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
 
       > thead {
         background: ${({ theme }) => theme.bg3};
diff --git a/apps/cowswap-frontend/src/pages/Faq/styled.tsx b/apps/cowswap-frontend/src/pages/Faq/styled.tsx
index f775cad39e..118539385b 100644
--- a/apps/cowswap-frontend/src/pages/Faq/styled.tsx
+++ b/apps/cowswap-frontend/src/pages/Faq/styled.tsx
@@ -38,7 +38,7 @@ export const Wrapper = styled.div`
     > table {
       width: 100%;
       border-spacing: 1px;
-      color: var(${UI.COLOR_PRIMARY_TEXT});
+      color: ${`var(${UI.COLOR_TEXT})`};
 
       > thead {
         background: ${({ theme }) => theme.bg3};
@@ -123,7 +123,7 @@ export const Menu = styled.div`
   font-weight: bold;
   line-height: 1;
   margin: 0 24px 0 0;
-  color: var(${UI.COLOR_PRIMARY_TEXT});
+  color: ${`var(${UI.COLOR_TEXT})`};
   height: max-content;
   position: sticky;
   top: 0;
@@ -145,7 +145,7 @@ export const Menu = styled.div`
     font-size: inherit;
 
     ${({ theme }) => theme.mediaWidth.upToSmall`
-      background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+      background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
       border-radius: 16px;
       padding: 12px;
     `}
@@ -177,7 +177,7 @@ export const Menu = styled.div`
 
     &.active {
       ${({ theme }) => theme.mediaWidth.upToSmall`
-        background: ${`var(${UI.COLOR_PRIMARY_TEXT_OPACITY_10})`};
+        background: ${`var(${UI.COLOR_TEXT_OPACITY_10})`};
         border-radius: 16px;
       `}
     }
diff --git a/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx b/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx
index d6c3ebc51d..3c39ab9f7f 100644
--- a/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx
+++ b/apps/cowswap-frontend/src/pages/error/AnySwapAffectedUsers/index.tsx
@@ -46,7 +46,7 @@ const Container = styled.div`
   ${ButtonPrimary} {
     width: 196px;
     padding: 9px;
-    color: ${({ theme }) => theme.primaryText1};
+    color: ${({ theme }) => theme.text1};
 
     &:hover {
     }
diff --git a/apps/widget-configurator/src/app/configurator/consts.ts b/apps/widget-configurator/src/app/configurator/consts.ts
index 92fb540fac..fdbf45b530 100644
--- a/apps/widget-configurator/src/app/configurator/consts.ts
+++ b/apps/widget-configurator/src/app/configurator/consts.ts
@@ -6,10 +6,9 @@ export const TRADE_MODES = [TradeType.SWAP, TradeType.LIMIT, TradeType.ADVANCED]
 // This wayit can be consumed by both the configurator and the widget.
 export const DEFAULT_LIGHT_PALETTE = {
   primary: '#052b65',
-  secondary: '#f50057',
   background: '#ffffff',
   paper: '#ffffff',
-  primaryText: '#052B65',
+  text: '#052B65',
   danger: '#D41300',
   warning: '#DB971E',
   info: '#CAE9FF',
@@ -18,10 +17,9 @@ export const DEFAULT_LIGHT_PALETTE = {
 
 export const DEFAULT_DARK_PALETTE = {
   primary: '#0d5ed9',
-  secondary: '#f50057',
   background: '#303030',
   paper: '#0c264b',
-  primaryText: '#CAE9FF',
+  text: '#CAE9FF',
   danger: '#f44336',
   warning: '#ff9800',
   info: '#2196f3',
diff --git a/apps/widget-configurator/src/app/configurator/controls/PaletteControl.tsx b/apps/widget-configurator/src/app/configurator/controls/PaletteControl.tsx
index 3544f6f26c..9f0f3d6cf8 100644
--- a/apps/widget-configurator/src/app/configurator/controls/PaletteControl.tsx
+++ b/apps/widget-configurator/src/app/configurator/controls/PaletteControl.tsx
@@ -51,9 +51,10 @@ export function PaletteControl({
     )
   }
 
-  const otherColorKeys = Object.keys(colorPalette).filter((key) => key !== 'primary' && key !== 'secondary') as Array<
-    keyof ColorPalette
-  >
+  const visibleColorKeys: Array<keyof ColorPalette> = ['primary', 'paper', 'text']
+  const otherColorKeys = Object.keys(colorPalette).filter(
+    (key): key is keyof ColorPalette => !visibleColorKeys.includes(key as keyof ColorPalette)
+  )
 
   const [expanded, setExpanded] = React.useState(false)
 
@@ -61,8 +62,7 @@ export function PaletteControl({
 
   return (
     <FormControl sx={{ width: '100%', gap: '1.6rem' }}>
-      {renderColorInput('primary')}
-      {renderColorInput('secondary')}
+      {visibleColorKeys.map((key) => renderColorInput(key))}
 
       <Collapse in={expanded}>
         <FormControl sx={{ width: '100%', gap: '1.6rem' }}>
diff --git a/apps/widget-configurator/src/app/configurator/hooks/useColorPalette.ts b/apps/widget-configurator/src/app/configurator/hooks/useColorPalette.ts
index afcff924fc..edc718b53a 100644
--- a/apps/widget-configurator/src/app/configurator/hooks/useColorPalette.ts
+++ b/apps/widget-configurator/src/app/configurator/hooks/useColorPalette.ts
@@ -5,16 +5,7 @@ import debounce from 'lodash/debounce'
 
 import { DEFAULT_LIGHT_PALETTE, DEFAULT_DARK_PALETTE } from '../consts'
 
-type ColorKeys =
-  | 'primary'
-  | 'secondary'
-  | 'background'
-  | 'paper'
-  | 'primaryText'
-  | 'danger'
-  | 'warning'
-  | 'info'
-  | 'success'
+type ColorKeys = 'primary' | 'background' | 'paper' | 'text' | 'danger' | 'warning' | 'info' | 'success'
 
 export type ColorPalette = {
   [key in ColorKeys]: string
diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
index 7010f99e50..1632f9857d 100644
--- a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
+++ b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
@@ -53,10 +53,9 @@ export function useWidgetParamsAndSettings(
       theme: {
         baseTheme: theme,
         primary: themeColors.primary,
-        secondary: themeColors.secondary,
         background: themeColors.background,
         paper: themeColors.paper,
-        primaryText: themeColors.primaryText,
+        text: themeColors.text,
         danger: themeColors.danger,
         warning: themeColors.warning,
         info: themeColors.info,
diff --git a/libs/ui-utils/src/index.ts b/libs/ui-utils/src/index.ts
index 800f1d6d63..4cb2e5451e 100644
--- a/libs/ui-utils/src/index.ts
+++ b/libs/ui-utils/src/index.ts
@@ -1 +1,2 @@
 export * from './lib/return5'
+export * from './lib/getContrastTextColor'
diff --git a/libs/ui-utils/src/lib/getContrastTextColor.ts b/libs/ui-utils/src/lib/getContrastTextColor.ts
new file mode 100644
index 0000000000..a0fc33d312
--- /dev/null
+++ b/libs/ui-utils/src/lib/getContrastTextColor.ts
@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+// Utility functions for color manipulation
+function clamp(value: number, min = 0, max = 1): number {
+  return Math.min(Math.max(min, value), max)
+}
+
+function intToHex(int: number): string {
+  const hex = int.toString(16)
+  return hex.length === 1 ? `0${hex}` : hex
+}
+
+function hexToRgb(color: string): string {
+  color = color.slice(1)
+  const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g')
+  const matchResult = color.match(re)
+
+  if (!matchResult) {
+    return ''
+  }
+
+  const colors = matchResult as RegExpMatchArray
+
+  let processedColors
+  if (colors[0].length === 1) {
+    processedColors = colors.map((n) => n + n)
+  } else {
+    processedColors = colors
+  }
+
+  return `rgb${processedColors.length === 4 ? 'a' : ''}(${processedColors
+    .map((n, index) => {
+      return index < 3 ? parseInt(n, 16) : Math.round((parseInt(n, 16) / 255) * 1000) / 1000
+    })
+    .join(', ')})`
+}
+
+function decomposeColor(color: string): { type: string; values: number[]; colorSpace?: string } {
+  if (color.charAt(0) === '#') {
+    return decomposeColor(hexToRgb(color))
+  }
+
+  const marker = color.indexOf('(')
+  const type = color.substring(0, marker)
+  const valuesString = color.substring(marker + 1, color.length - 1).split(',')
+
+  const values = valuesString.map((value) => parseFloat(value))
+
+  return { type, values }
+}
+
+function recomposeColor(color: { type: string; values: number[]; colorSpace?: string }): string {
+  const { type, values } = color
+  const recomposed = values.map((n, i) => (type.indexOf('rgb') !== -1 && i < 3 ? parseInt(n.toString(), 10) : n))
+
+  return `${type}(${recomposed.join(', ')})`
+}
+
+function rgbToHex(color: string): string {
+  const { values } = decomposeColor(color)
+  return `#${values.map((n, i) => intToHex(i === 3 ? Math.round(255 * n) : n)).join('')}`
+}
+
+function hslToRgb(color: string): string {
+  const { values } = decomposeColor(color)
+  const h = values[0]
+  const s = values[1] / 100
+  const l = values[2] / 100
+  const a = s * Math.min(l, 1 - l)
+  const f = (n: number, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)
+
+  let type = 'rgb'
+  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)]
+
+  if (color.includes('hsla')) {
+    type += 'a'
+    rgb.push(values[3])
+  }
+
+  return recomposeColor({ type, values: rgb })
+}
+
+function getLuminance(color: string): number {
+  let { values } = decomposeColor(color)
+
+  values = values.map((val) => {
+    val /= 255 // normalized
+    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4
+  })
+
+  return 0.2126 * values[0] + 0.7152 * values[1] + 0.0722 * values[2]
+}
+
+function getContrastRatio(foreground: string, background: string): number {
+  const lumA = getLuminance(foreground)
+  const lumB = getLuminance(background)
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05)
+}
+
+function alpha(color: string, value: number): string {
+  const decomposedColor = decomposeColor(color)
+  value = clamp(value)
+
+  if (decomposedColor.type === 'rgb' || decomposedColor.type === 'hsl') {
+    decomposedColor.type += 'a'
+  }
+  decomposedColor.values[3] = value
+
+  return recomposeColor(decomposedColor)
+}
+
+function darken(color: string, coefficient: number): string {
+  const decomposedColor = decomposeColor(color)
+  coefficient = clamp(coefficient)
+
+  if (decomposedColor.type.indexOf('hsl') !== -1) {
+    decomposedColor.values[2] *= 1 - coefficient
+  } else if (decomposedColor.type.indexOf('rgb') !== -1) {
+    for (let i = 0; i < 3; i += 1) {
+      decomposedColor.values[i] *= 1 - coefficient
+    }
+  }
+
+  return recomposeColor(decomposedColor)
+}
+
+function lighten(color: string, coefficient: number): string {
+  const decomposedColor = decomposeColor(color)
+  coefficient = clamp(coefficient)
+
+  if (decomposedColor.type.indexOf('hsl') !== -1) {
+    decomposedColor.values[2] += (100 - decomposedColor.values[2]) * coefficient
+  } else if (decomposedColor.type.indexOf('rgb') !== -1) {
+    for (let i = 0; i < 3; i += 1) {
+      decomposedColor.values[i] += (255 - decomposedColor.values[i]) * coefficient
+    }
+  }
+
+  return recomposeColor(decomposedColor)
+}
+
+function emphasize(color: string, coefficient = 0.15): string {
+  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient)
+}
+
+export function resolveCssVar(cssVarName: string): string {
+  // Assuming the CSS variable is set on the :root element
+  const style = getComputedStyle(document.documentElement)
+
+  console.log('resolveCssVar', cssVarName, style.getPropertyValue(cssVarName).trim())
+
+  return style.getPropertyValue(cssVarName).trim()
+}
+
+function getContrastText(background: string, preferredTextColor: string | (() => string)): string {
+  const contrastThreshold = 4.5 // WCAG recommended contrast ratio
+  const darkTextPrimary = '#000000' // Dark text color
+  const lightTextPrimary = '#FFFFFF' // Light text color
+
+  console.log('getContrastText', background, preferredTextColor)
+
+  const resolvedPreferredTextColor =
+    typeof preferredTextColor === 'function' ? preferredTextColor() : preferredTextColor
+
+  // Check contrast for preferred text color
+  if (getContrastRatio(background, resolvedPreferredTextColor) >= contrastThreshold) {
+    return resolvedPreferredTextColor
+  }
+
+  // Fallback to black or white
+  const contrastText =
+    getContrastRatio(background, darkTextPrimary) >= contrastThreshold ? darkTextPrimary : lightTextPrimary
+
+  // Warning for low contrast in non-production environments
+  if (process.env['NODE_ENV'] !== 'production') {
+    const contrast = getContrastRatio(background, contrastText)
+    if (contrast < 3) {
+      console.error(
+        `The contrast ratio of ${contrast}:1 for ${contrastText} on ${background} ` +
+          'falls below the WCAG recommended absolute minimum contrast ratio of 3:1. ' +
+          'https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast'
+      )
+    }
+  }
+
+  return contrastText
+}
+
+// Export all functions
+export {
+  clamp,
+  intToHex,
+  hexToRgb,
+  decomposeColor,
+  recomposeColor,
+  rgbToHex,
+  hslToRgb,
+  getContrastText,
+  getLuminance,
+  getContrastRatio,
+  alpha,
+  darken,
+  lighten,
+  emphasize,
+}
diff --git a/libs/ui/src/enum.ts b/libs/ui/src/enum.ts
index 2338f646d6..dcc0407595 100644
--- a/libs/ui/src/enum.ts
+++ b/libs/ui/src/enum.ts
@@ -3,3 +3,100 @@ export enum ButtonSize {
   DEFAULT,
   BIG,
 }
+
+export enum UI {
+  // V3
+  COLOR_PRIMARY = '--cow-color-primary',
+  COLOR_PRIMARY_LIGHTER = '--cow-color-primary-lighter',
+  COLOR_PRIMARY_DARKER = '--cow-color-primary-darker',
+
+  COLOR_SECONDARY = '--cow-color-secondary',
+
+  COLOR_BACKGROUND = '--cow-color-background',
+  COLOR_PAPER = '--cow-color-paper',
+  COLOR_PAPER_DARKER = '--cow-color-paper-darker',
+  COLOR_PAPER_DARKEST = '--cow-color-paper-darkest',
+
+  COLOR_TEXT = '--cow-color-text',
+  COLOR_TEXT_OPACITY_70 = '--cow-color-text-opacity-70',
+  COLOR_TEXT_OPACITY_25 = '--cow-color-text-opacity-25',
+  COLOR_TEXT_OPACITY_10 = '--cow-color-text-opacity-10',
+
+  COLOR_SECONDARY_TEXT = '--cow-color-secondary-text',
+  COLOR_DISABLED_TEXT = '--cow-color-disabled-text',
+  COLOR_BUTTON_TEXT = '--cow-color-button-text',
+  COLOR_BUTTON_TEXT_DISABLED = '--cow-color-button-text-disabled',
+
+  COLOR_WARNING = '--cow-color-warning',
+  COLOR_WARNING_BG = '--cow-color-warning-bg',
+  COLOR_WARNING_TEXT = '--cow-color-warning-text',
+
+  COLOR_SUCCESS = '--cow-color-success',
+  COLOR_SUCCESS_BG = '--cow-color-success-bg',
+  COLOR_SUCCESS_TEXT = '--cow-color-success-text',
+
+  COLOR_INFO = '--cow-color-info',
+  COLOR_INFO_BG = '--cow-color-info-bg',
+  COLOR_INFO_TEXT = '--cow-color-info-text',
+
+  COLOR_ALERT = '--cow-color-alert',
+  COLOR_ALERT_BG = '--cow-color-alert-bg',
+  COLOR_ALERT_TEXT = '--cow-color-alert-text',
+
+  COLOR_DANGER = '--cow-color-danger',
+  COLOR_DANGER_BG = '--cow-color-danger-bg',
+  COLOR_DANGER_TEXT = '--cow-color-danger-text',
+
+  // ================================================================================
+
+  // Colors
+  COLOR_WHITE = '--cow-color-white',
+  COLOR_BLUE = '--cow-color-blue',
+  COLOR_GREY = '--cow-color-grey',
+  COLOR_LIGHT_BLUE = '--cow-color-lightBlue',
+  COLOR_LIGHT_BLUE_OPACITY_90 = '--cow-color-lightBlue-opacity-90',
+  COLOR_LIGHT_BLUE_OPACITY_80 = '--cow-color-lightBlue-opacity-80',
+  COLOR_YELLOW = '--cow-color-yellow',
+  COLOR_YELLOW_LIGHT = '--cow-color-yellow-light',
+  COLOR_GREEN = '--cow-color-green',
+  COLOR_RED = '--cow-color-red',
+
+  // Elements
+  COLOR_BORDER = '--cow-color-border',
+  COLOR_CONTAINER_BG_01 = '--cow-container-bg-01',
+  COLOR_CONTAINER_BG_02 = '--cow-container-bg-02',
+
+  // Misc
+  MODAL_BACKDROP = '--cow-modal-backdrop',
+  BORDER_RADIUS_NORMAL = '--cow-border-radius-normal',
+  PADDING_NORMAL = '--cow-padding-normal',
+  BOX_SHADOW_NORMAL = '--cow-box-shadow-normal',
+
+  // Icons
+  ICON_SIZE_NORMAL = '--cow-icon-size-normal',
+  ICON_SIZE_SMALL = '--cow-icon-size-small',
+  ICON_SIZE_XSMALL = '--cow-icon-size-xsmall',
+  ICON_SIZE_LARGE = '--cow-icon-size-large',
+  ICON_COLOR_NORMAL = '--cow-icon-color-normal',
+
+  // States
+
+  // Text
+  COLOR_TEXT1 = '--cow-color-text1',
+  COLOR_TEXT1_INACTIVE = '--cow-color-text1-inactive',
+  COLOR_TEXT1_OPACITY_25 = '--cow-color-text1-opacity-25',
+  COLOR_TEXT1_OPACITY_10 = '--cow-color-text1-opacity-10',
+  COLOR_TEXT2 = '--cow-color-text2',
+  COLOR_LINK = '--cow-color-link',
+  COLOR_LINK_OPACITY_10 = '--cow-color-link-opacity-10',
+  FONT_WEIGHT_NORMAL = '--cow-font-weight-normal',
+  FONT_WEIGHT_MEDIUM = '--cow-font-weight-medium',
+  FONT_WEIGHT_BOLD = '--cow-font-weight-bold',
+  FONT_SIZE_SMALLER = '--cow-font-size-smaller',
+  FONT_SIZE_SMALL = '--cow-font-size-small',
+  FONT_SIZE_NORMAL = '--cow-font-size-normal',
+  FONT_SIZE_MEDIUM = '--cow-font-size-medium',
+  FONT_SIZE_LARGE = '--cow-font-size-large',
+  FONT_SIZE_LARGER = '--cow-font-size-larger',
+  FONT_SIZE_LARGEST = '--cow-font-size-largest',
+}
diff --git a/libs/ui/src/pure/Button/ButtonMod.tsx b/libs/ui/src/pure/Button/ButtonMod.tsx
index 6f9bdb2260..5095adc127 100644
--- a/libs/ui/src/pure/Button/ButtonMod.tsx
+++ b/libs/ui/src/pure/Button/ButtonMod.tsx
@@ -58,7 +58,7 @@ export const ButtonPrimary = styled(BaseButton)`
   &:focus,
   &:hover,
   &:active {
-    color: ${({ theme }) => theme.primaryText1};
+    color: ${({ theme }) => theme.text1};
   }
   &:disabled {
     background-color: ${({ theme, altDisabledStyle, disabled }) =>
@@ -74,7 +74,7 @@ export const ButtonPrimary = styled(BaseButton)`
 
 export const ButtonLight = styled(BaseButton)`
   background-color: ${({ theme }) => theme.primary5};
-  color: ${({ theme }) => theme.primaryText1};
+  color: ${({ theme }) => theme.text1};
   font-size: 16px;
   // font-weight: 500;
   &:focus {
diff --git a/libs/ui/src/pure/Button/index.tsx b/libs/ui/src/pure/Button/index.tsx
index d6c0790aa0..7125785d64 100644
--- a/libs/ui/src/pure/Button/index.tsx
+++ b/libs/ui/src/pure/Button/index.tsx
@@ -5,6 +5,8 @@ import { ChevronDown, Star } from 'react-feather'
 import { ButtonProps } from 'rebass/styled-components'
 import styled from 'styled-components'
 
+import { UI } from '@cowprotocol/ui'
+
 import { RowBetween } from '../Row'
 import { ButtonSize } from '../../enum'
 
@@ -22,18 +24,13 @@ export * from './ButtonMod'
 
 export const ButtonPrimary = styled(ButtonPrimaryMod)`
   // CSS overrides
-  background: ${({ theme }) => theme.primary};
+  background: ${`var(${UI.COLOR_PRIMARY})`};
+  color: ${`var(${UI.COLOR_BUTTON_TEXT})`};
   font-size: 18px;
   font-weight: 600;
   border: none;
   box-shadow: none;
   border-radius: 16px;
-  /* color: ${({ theme }) => theme.primaryText}; */
-  color: ${({ theme }) =>
-    theme.darkMode
-      ? `color-mix(in srgb, ${theme.primaryText}, #fff 40%)`
-      : `color-mix(in srgb, ${theme.primaryText}, #fff 5%)`};
-
   position: relative;
   min-height: 58px;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
@@ -45,16 +42,16 @@ export const ButtonPrimary = styled(ButtonPrimaryMod)`
   &:active {
     box-shadow: none;
     transform: none;
-    color: ${({ theme }) => theme.white};
+    color: ${`var(${UI.COLOR_BUTTON_TEXT})`};
   }
 
   &:hover {
-    background: ${({ theme }) => lighten(0.08, theme.bg2)};
+    background: ${`var(${UI.COLOR_PRIMARY_LIGHTER})`};
   }
 
   &:disabled {
-    background-color: var(--cow-color-grey);
-    color: ${({ theme }) => transparentize(0.4, theme.text1)};
+    background-color: ${`var(${UI.COLOR_PAPER})`};
+    color: ${`var(${UI.COLOR_BUTTON_TEXT_DISABLED})`};
     background-image: none;
     border: 0;
     cursor: auto;
@@ -66,7 +63,7 @@ export const ButtonPrimary = styled(ButtonPrimaryMod)`
 export const ButtonLight = styled(ButtonPrimary)`
   // CSS override
   ${({ theme }) => theme.buttonLight.background}
-  color: ${({ theme }) => theme.primaryText1};
+  color: ${({ theme }) => theme.text1};
   font-size: ${({ theme }) => theme.buttonLight.fontSize};
   font-weight: ${({ theme }) => theme.buttonLight.fontWeight};
   border: ${({ theme }) => theme.buttonLight.border};
@@ -99,7 +96,7 @@ export const ButtonLight = styled(ButtonPrimary)`
     opacity: 0.4;
     cursor: auto;
     animation: none;
-    color: ${({ theme }) => theme.primaryText1};
+    color: ${({ theme }) => theme.text1};
 
     &:hover {
       cursor: auto;
@@ -201,6 +198,25 @@ export const ButtonEmpty = styled(ButtonEmptyMod)`
   // CSS overrides
 `
 
+export const FancyButton = styled.button`
+  background: ${`var(${UI.COLOR_PRIMARY})`};
+  color: ${`var(${UI.COLOR_BUTTON_TEXT})`};
+  align-items: center;
+  height: 2rem;
+  border-radius: 36px;
+  font-size: 1rem;
+  width: auto;
+  min-width: 3.5rem;
+  border: 0;
+  outline: none;
+
+  :hover {
+  }
+  :focus {
+    /* border: 1px solid ${({ theme }) => theme.primary1}; */
+  }
+`
+
 const HoverIcon = styled.div`
   display: flex;
   justify-content: center;
diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts
index 416cde0321..cdfa54fcfb 100644
--- a/libs/widget-lib/src/types.ts
+++ b/libs/widget-lib/src/types.ts
@@ -62,10 +62,9 @@ export enum TradeType {
 export interface CowSwapWidgetPalette {
   baseTheme: CowSwapTheme
   primary: string
-  secondary: string
   background: string
   paper: string
-  primaryText: string
+  text: string
   danger: string
   warning: string
   info: string