From 2673faac102503a08bd4f31896127747b4471a9a Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 19 Dec 2024 11:47:05 +0100
Subject: [PATCH] New color palette

DApp has been redesigned and projects use a new color palette. Let's update the color palette in the code. However, let's leave the old palette until we update the base components. This is the simplest solution to avoid complications with new colors.
---
 dapp/src/components/AcrePointsClaimModal.tsx  | 10 +-
 .../ConnectWalletModal/ConnectWalletAlert.tsx |  2 +-
 .../ConnectWalletButton.tsx                   |  4 +-
 .../ConnectWalletStatusLabel.tsx              | 14 +--
 dapp/src/components/Header/ConnectWallet.tsx  | 16 +--
 dapp/src/components/MezoBeehiveModal.tsx      | 12 +--
 .../src/components/MobileModeBanner/index.tsx | 12 +--
 .../ActionDurationEstimation.tsx              |  4 +-
 .../AcrePointsRewardEstimation.tsx            | 14 +--
 .../StakingErrorModal/RetryModal.tsx          | 12 +--
 .../StakingErrorModal/ServerErrorModal.tsx    | 10 +-
 .../NotEnoughFundsModal.tsx                   |  4 +-
 .../FeesTooltip/FeesTooltipItem.tsx           |  2 +-
 .../TransactionModal/ResumeModal.tsx          |  2 +-
 .../TransactionModal/SuccessModal.tsx         |  4 +-
 .../WalletInteractionModal.tsx                |  2 +-
 dapp/src/components/UnexpectedErrorModal.tsx  |  2 +-
 dapp/src/components/WelcomeModal.tsx          |  4 +-
 dapp/src/components/shared/Alert.tsx          | 10 +-
 .../AnimatedNumber/AnimatedNumberColumn.tsx   |  5 +-
 .../FeesDetails/FeesDetailsAmountItem.tsx     |  2 +-
 .../components/shared/FeesDetails/index.tsx   |  4 +-
 dapp/src/components/shared/LiveTag.tsx        |  8 +-
 .../shared/Pagination/PaginationFooter.tsx    |  2 +-
 dapp/src/components/shared/ProgressBar.tsx    |  2 +-
 .../components/shared/TokenBalanceInput.tsx   |  2 +-
 dapp/src/components/shared/TooltipIcon.tsx    |  6 +-
 .../TransactionDetailsAmountItem.tsx          |  2 +-
 .../shared/TransactionDetails/index.tsx       |  4 +-
 .../AcrePointsCard/AcrePointsLabel.tsx        |  8 +-
 .../AcrePointsCard/LabelWrapper.tsx           |  2 +-
 .../AcrePointsCard/UserPointsLabel.tsx        | 12 +--
 .../DashboardPage/AcrePointsCard/index.tsx    |  2 +-
 .../DashboardPage/AcrePointsTemplateCard.tsx  | 22 +++--
 .../pages/DashboardPage/AcreTVLMessage.tsx    |  6 +-
 dapp/src/pages/DashboardPage/BeehiveCard.tsx  |  4 +-
 .../pages/DashboardPage/PositionDetails.tsx   |  4 +-
 .../TransactionHistory/EstimatedDuration.tsx  |  6 +-
 .../TransactionHistory/TransactionTable.tsx   | 16 +--
 .../TransactionHistory/index.tsx              |  2 +-
 dapp/src/theme/acreTVLProgressTheme.ts        |  8 +-
 dapp/src/theme/alertTheme.ts                  |  2 +-
 dapp/src/theme/buttonTheme.ts                 | 44 ++++-----
 dapp/src/theme/cardTheme.ts                   |  2 +-
 dapp/src/theme/footerTheme.ts                 |  6 +-
 dapp/src/theme/formErrorTheme.ts              |  2 +-
 dapp/src/theme/formLabelTheme.ts              |  2 +-
 dapp/src/theme/formTheme.ts                   |  2 +-
 dapp/src/theme/inputTheme.ts                  | 16 +--
 dapp/src/theme/linkTheme.ts                   |  4 +-
 dapp/src/theme/modalTheme.ts                  | 10 +-
 dapp/src/theme/progressTheme.ts               |  6 +-
 dapp/src/theme/skeletonTheme.ts               |  8 +-
 dapp/src/theme/spinnerTheme.ts                | 10 +-
 dapp/src/theme/tagTheme.ts                    |  4 +-
 dapp/src/theme/tokenBalanceInputTheme.ts      |  2 +-
 dapp/src/theme/tooltipTheme.ts                |  6 +-
 dapp/src/theme/utils/colors.ts                | 98 +++++++++++++++++--
 dapp/src/theme/utils/styles.ts                |  4 +-
 59 files changed, 288 insertions(+), 209 deletions(-)

diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
index b7836c318..3cb070a85 100644
--- a/dapp/src/components/AcrePointsClaimModal.tsx
+++ b/dapp/src/components/AcrePointsClaimModal.tsx
@@ -67,7 +67,7 @@ function AcrePointsClaimModalBase({
           prefix="+"
           suffix=" PTS"
           animateMode="whileInView"
-          color="brand.400"
+          color="acre.50"
         />,
       ],
       [
@@ -76,7 +76,7 @@ function AcrePointsClaimModalBase({
           value={formattedTotalAmount}
           suffix=" PTS"
           animateMode="whileInView"
-          indicationColor="brand.400"
+          indicationColor="acre.50"
         />,
       ],
       // TODO: Uncomment when the leaderboard feature is ready
@@ -86,7 +86,7 @@ function AcrePointsClaimModalBase({
       //     value={rankPositionDifference}
       //     prefix={rankPositionDifference > 0 ? "+" : "-"}
       //     animateMode="whileInView"
-      //     color={rankPositionDifference > 0 ? "green.500" : "red.500"}
+      //     color={rankPositionDifference > 0 ? "green.50" : "red.50"}
       //   />,
       // ],
       // [
@@ -95,7 +95,7 @@ function AcrePointsClaimModalBase({
       //     value={estimatedRankPosition}
       //     prefix="#"
       //     animateMode="whileInView"
-      //     indicationColor="brand.400"
+      //     indicationColor="acre.50"
       //   />,
       // ],
     ],
@@ -166,7 +166,7 @@ function AcrePointsClaimModalBase({
                 fontSize={{ base: "5xl", md: "8xl" }}
                 lineHeight="6.25rem" // 100px
                 fontWeight="bold"
-                color="grey.700"
+                color="text.primary"
               >
                 {currentStepValue}
               </Box>
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
index 1315ba487..d91f0201f 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletAlert.tsx
@@ -49,7 +49,7 @@ const CONNECTION_ALERTS: ConnectionAlerts = {
   [ConnectionAlert.Rejected]: {
     title: "Please connect your wallet to start using Acre",
     status: "info",
-    colorScheme: "blue",
+    colorScheme: "oldPalette.blue",
   },
   [ConnectionAlert.NotSupported]: {
     title: "Not supported.",
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
index 7bb69424b..7ca7f2709 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -196,7 +196,7 @@ export default function ConnectWalletButton({
       key={connector.id}
       alignSelf="stretch"
       borderWidth={1}
-      borderColor="gold.300"
+      borderColor="surface.4"
       rounded="lg"
       mb={3}
       _last={{ mb: 0 }}
@@ -252,7 +252,7 @@ export default function ConnectWalletButton({
               pt={4}
               borderTopWidth={1}
               borderStyle="solid"
-              borderColor="gold.300"
+              borderColor="surface.4"
               align="start"
             >
               <Flex direction="column" gap={2} w="full">
diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
index ec1a0e651..61cb950e6 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -11,16 +11,16 @@ import Spinner from "../shared/Spinner"
 
 const statusToLabelProps: Record<Status, { color: string }> = {
   idle: {
-    color: "grey.500",
+    color: "text.tertiary",
   },
   pending: {
-    color: "brand.400",
+    color: "acre.50",
   },
   error: {
-    color: "grey.500",
+    color: "text.tertiary",
   },
   success: {
-    color: "grey.700",
+    color: "text.primary",
   },
 }
 
@@ -28,8 +28,8 @@ const boxSize = 5
 const statusToIcon: Record<Status, React.ReactNode> = {
   idle: <Box boxSize={boxSize} />,
   pending: <Spinner boxSize={boxSize} />,
-  error: <Icon as={IconCircleX} boxSize={boxSize} color="grey.500" />,
-  success: <Icon as={IconCircleCheck} boxSize={boxSize} color="green.500" />,
+  error: <Icon as={IconCircleX} boxSize={boxSize} color="text.tertiary" />,
+  success: <Icon as={IconCircleCheck} boxSize={boxSize} color="green.50" />,
 }
 
 type ConnectWalletStatusLabelProps = {
@@ -51,7 +51,7 @@ export default function ConnectWalletStatusLabel({
         <TextMd {...statusToLabelProps[status]}>{label}</TextMd>
       </HStack>
       {isError && (
-        <HStack color="red.400" textAlign="start">
+        <HStack color="red.50" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
           <TextMd>Rejected by user</TextMd>
         </HStack>
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index d880ebbbb..d6c6c9610 100644
--- a/dapp/src/components/Header/ConnectWallet.tsx
+++ b/dapp/src/components/Header/ConnectWallet.tsx
@@ -68,8 +68,8 @@ export default function ConnectWallet() {
       <Button
         size="lg"
         variant="card"
-        color="grey.700"
-        leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
+        color="text.primary"
+        leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
         onClick={() => handleConnectWallet(false)}
         {...((modalType === MODAL_TYPES.CONNECT_WALLET ||
           isOpenGlobalErrorModal) && {
@@ -115,14 +115,14 @@ export default function ConnectWallet() {
           <MenuButton
             as={Button}
             variant="card"
-            leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
+            leftIcon={<Icon as={BitcoinIcon} boxSize={6} color="acre.50" />}
             rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
           >
-            <TextMd color="brand.400">
+            <TextMd color="acre.50">
               {addressUtils.truncateAddress(address)}
             </TextMd>
           </MenuButton>
-          <MenuList bg="gold.200">
+          <MenuList bg="surface.3">
             {options.map(
               (option) =>
                 option.isSupported && (
@@ -165,8 +165,8 @@ export default function ConnectWallet() {
           }}
           spacing={3}
         >
-          <Icon as={BitcoinIcon} boxSize={6} color="brand.400" />
-          <TextMd color="brand.400">
+          <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
+          <TextMd color="acre.50">
             {addressUtils.truncateAddress(address)}
           </TextMd>
         </HStack>
@@ -178,7 +178,7 @@ export default function ConnectWallet() {
             collapsed: { width: 0 },
           }}
           spacing={1}
-          divider={<StackDivider borderColor="gold.500" />}
+          divider={<StackDivider borderColor="surface.5" />}
         >
           {options.map(
             (option) =>
diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
index c9777c6c8..38a21203f 100644
--- a/dapp/src/components/MezoBeehiveModal.tsx
+++ b/dapp/src/components/MezoBeehiveModal.tsx
@@ -35,7 +35,7 @@ function MezoBeehiveModalBase() {
             mx={-2}
             boxSize="3.75rem" // 60px
             ring={0.5}
-            ringColor="gold.100"
+            ringColor="surface.2"
             rounded="full"
           />
           <MezoSignIcon boxSize={10} rounded="full" zIndex={-1} />
@@ -61,8 +61,8 @@ function MezoBeehiveModalBase() {
         <VStack>
           <Card
             gap={2}
-            bg="grey.700"
-            color="gold.300"
+            bg="brown.100"
+            color="surface.4"
             align="start"
             textAlign="start"
             position="relative"
@@ -82,7 +82,7 @@ function MezoBeehiveModalBase() {
             }}
           >
             <CardHeader as={HStack}>
-              <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
+              <Icon as={IconChartPieFilled} color="acre.50" boxSize={5} />
             </CardHeader>
 
             <CardBody>
@@ -98,7 +98,7 @@ function MezoBeehiveModalBase() {
             <CardBody
               as={HStack}
               spacing={6}
-              color="grey.700"
+              color="text.primary"
               textAlign="start"
             >
               <MezoSignIcon
@@ -118,7 +118,7 @@ function MezoBeehiveModalBase() {
                   variant="link"
                   textDecorationLine="none"
                   rightIcon={
-                    <Icon as={IconArrowUpRight} boxSize={4} color="brand.400" />
+                    <Icon as={IconArrowUpRight} boxSize={4} color="acre.50" />
                   }
                 >
                   More info
diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx
index cfb91fbbc..695875d90 100644
--- a/dapp/src/components/MobileModeBanner/index.tsx
+++ b/dapp/src/components/MobileModeBanner/index.tsx
@@ -44,9 +44,9 @@ function MobileModeBanner(props: MobileModeBannerProps) {
       maxH="100vh"
       {...restProps}
     >
-      <Flex align="center" justify="center" p={4} bg="grey.700">
-        <TextMd color="gold.300" textAlign="center" whiteSpace="break-spaces">
-          Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
+      <Flex align="center" justify="center" p={4} bg="brown.100">
+        <TextMd color="surface.4" textAlign="center" whiteSpace="break-spaces">
+          Acre App is <LiveTag color="acre.50" gap={1} px={1} py={0} /> on
           desktop!
         </TextMd>
 
@@ -62,7 +62,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
               />
             }
             iconSpacing={0}
-            color="brand.400"
+            color="acre.50"
             p={0}
             h="auto"
             ml={2}
@@ -83,8 +83,8 @@ function MobileModeBanner(props: MobileModeBannerProps) {
           >
             <Box
               h="full"
-              bg="grey.700"
-              color="gold.300"
+              bg="brown.100"
+              color="surface.4"
               px={5}
               py={8}
               textAlign="center"
diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
index 6be471b7b..d43d607ff 100644
--- a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
+++ b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
@@ -15,9 +15,9 @@ export default function ActionDurationEstimation({
   )
 
   return (
-    <TextMd mt={4} color="grey.400">
+    <TextMd mt={4} color="text.tertiary">
       Estimated duration&nbsp;
-      <TextMd as="span" color="grey.500">
+      <TextMd as="span">
         ~ {activitiesUtils.getEstimatedDuration(amount, type)}
       </TextMd>
     </TextMd>
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
index a8b318714..b5ef2e4c6 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
@@ -78,15 +78,15 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 px={3}
                 py={1}
                 rounded="2xl"
-                bg="gold.300"
-                _hover={{ bg: "gold.200" }}
+                bg="surface.4"
+                _hover={{ bg: "surface.3" }}
               >
                 <HStack spacing={1}>
                   <TextMd>{selectedTierItem.label}</TextMd>
                   <Icon
                     as={IconChevronDown}
                     boxSize={4}
-                    color="brand.400"
+                    color="acre.50"
                     zIndex={2}
                     rotate={isOpen ? 180 : 0}
                     transform="auto"
@@ -99,7 +99,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 minW={0}
                 rounded="2xl"
                 shadow="none"
-                bg="gold.300"
+                bg="surface.4"
                 border="none"
                 overflow="hidden"
                 motionProps={{
@@ -112,9 +112,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
                     px={3}
                     py={1}
                     rounded="2xl"
-                    bg="gold.300"
-                    _active={{ bg: "gold.200" }}
-                    _hover={{ bg: "gold.200" }}
+                    bg="surface.4"
+                    _active={{ bg: "surface.3" }}
+                    _hover={{ bg: "surface.3" }}
                     key={tierItem.label}
                     onClick={() => setSelectedTierItem(tierItem)}
                     fontWeight="semibold"
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
index f5b84cce0..65605f9b0 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx
@@ -50,15 +50,15 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
 
   return (
     <>
-      <ModalHeader as={Flex} color="red.400" justifyContent="center">
+      <ModalHeader as={Flex} color="red.50" justifyContent="center">
         <Skeleton isLoaded={!isLoading} w="fit-content">
           Oops! There was an error.
         </Skeleton>
       </ModalHeader>
       <ModalBody gap={10} pt={2} pb={6}>
         <Skeleton isLoaded={!isLoading} borderRadius="50%">
-          <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
-            <Icon as={IconX} color="red.400" boxSize={14} strokeWidth={1} />
+          <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.50">
+            <Icon as={IconX} color="red.50" boxSize={14} strokeWidth={1} />
           </IconWrapper>
         </Skeleton>
         <Flex flexDirection="column" alignItems="center">
@@ -84,7 +84,7 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
               h={3}
               aspectRatio={1}
               borderRadius="50%"
-              background={`conic-gradient(var(--chakra-colors-brand-400) ${progressPercent}, transparent 0)`}
+              background={`conic-gradient(var(--chakra-colors-acre-50) ${progressPercent}, transparent 0)`}
               transition="background"
             />
             <Box />
@@ -96,8 +96,8 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
           Retry transaction
         </Button>
         <HStack>
-          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
-          <TextSm color="grey.700">Your funds are secure.</TextSm>
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="acre.50" />
+          <TextSm color="text.primary">Your funds are secure.</TextSm>
         </HStack>
       </ModalFooter>
     </>
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 27056f206..eafd6c9b4 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
@@ -31,11 +31,11 @@ export default function ServerErrorModal({
   return (
     <>
       <ModalCloseButton />
-      <ModalHeader color="red.400" textAlign="center">
+      <ModalHeader color="red.50" textAlign="center">
         We&apos;re currently facing system issues.
       </ModalHeader>
       <ModalBody gap={10} pb={6}>
-        <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.400">
+        <IconWrapper icon={CableWithPlugIcon} boxSize={32} color="red.50">
           <Icon as={IconServerBolt} boxSize={14} strokeWidth={1} />
         </IconWrapper>
         <TextMd>
@@ -59,7 +59,7 @@ export default function ServerErrorModal({
         px={8}
         flexDirection="row"
         justifyContent="space-between"
-        bgColor="gold.200"
+        bgColor="surface.3"
         borderRadius="xl"
       >
         <Flex flexDirection="column">
@@ -68,12 +68,12 @@ export default function ServerErrorModal({
             {/* TODO: ADD a tooltip */}
             {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
-          <TextMd color="red.400">Partial Outage</TextMd>
+          <TextMd color="red.50">Partial Outage</TextMd>
         </Flex>
         <Button
           // TODO: Use a loading button
           isLoading={isLoading}
-          leftIcon={<Icon as={IconReload} boxSize={5} color="brand.400" />}
+          leftIcon={<Icon as={IconReload} boxSize={5} color="acre.50" />}
           variant="outline"
           onClick={retry}
         >
diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx
index f1bab86e9..ca72623eb 100644
--- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx
+++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx
@@ -33,7 +33,7 @@ export default function NotEnoughFundsModal() {
         as={TextXl}
         fontSize="xl"
         textAlign="center"
-        color="red.400"
+        color="red.50"
         fontWeight="bold"
       >
         Not enough funds left for future withdrawals
@@ -41,7 +41,7 @@ export default function NotEnoughFundsModal() {
       <ModalBody>
         <BitcoinsStackErrorIcon />
 
-        <TextMd color="grey.600" px={1}>
+        <TextMd color="text.primary" px={1}>
           After this withdrawal, your balance will fall below the{" "}
           <CurrencyBalance
             amount={minWithdrawAmount}
diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
index 52650b44a..73e497556 100644
--- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
+++ b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
@@ -21,7 +21,7 @@ export default function FeesTooltipItem({
       <CurrencyBalance
         size="sm"
         amount={amount}
-        color="gold.300"
+        color="surface.4"
         fontWeight="semibold"
         desiredDecimals={currencies.DESIRED_DECIMALS_FOR_FEE}
         withRoundUp
diff --git a/dapp/src/components/TransactionModal/ResumeModal.tsx b/dapp/src/components/TransactionModal/ResumeModal.tsx
index 3547673dc..8e9b889dd 100644
--- a/dapp/src/components/TransactionModal/ResumeModal.tsx
+++ b/dapp/src/components/TransactionModal/ResumeModal.tsx
@@ -28,7 +28,7 @@ export default function ResumeModal({ closeModal }: BaseModalProps) {
       <ModalBody textAlign="start" py={6} mx={3} gap={4}>
         <HStack position="relative" justifyContent="center">
           <Spinner size="2xl" variant="filled" />
-          <PauseIcon position="absolute" boxSize={6} color="brand.400" />
+          <PauseIcon position="absolute" boxSize={6} color="acre.50" />
         </HStack>
 
         <TextMd>Are you sure you want to cancel?</TextMd>
diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx
index c910f7914..8b75cb8b4 100644
--- a/dapp/src/components/TransactionModal/SuccessModal.tsx
+++ b/dapp/src/components/TransactionModal/SuccessModal.tsx
@@ -68,10 +68,10 @@ export default function SuccessModal({ type }: SuccessModalProps) {
             /* TODO: Update styles */
             <BlockExplorerLink id={txHash} type="transaction" chain="bitcoin">
               <HStack gap={1}>
-                <TextSm color="grey.600" fontWeight="semibold">
+                <TextSm color="text.primary" fontWeight="semibold">
                   View on Mempool
                 </TextSm>
-                <Icon as={IconArrowUpRight} color="brand.400" boxSize={4} />
+                <Icon as={IconArrowUpRight} color="acre.50" boxSize={4} />
               </HStack>
             </BlockExplorerLink>
           )}
diff --git a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
index 8c3926d1f..6e08081c0 100644
--- a/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
+++ b/dapp/src/components/TransactionModal/WalletInteractionModal.tsx
@@ -72,7 +72,7 @@ export default function WalletInteractionModal({
           {/* TODO: Create correct progress bar */}
           <Progress
             size="sm"
-            bg="gold.200"
+            bg="surface.3"
             isIndeterminate
             {...progressProps}
           />
diff --git a/dapp/src/components/UnexpectedErrorModal.tsx b/dapp/src/components/UnexpectedErrorModal.tsx
index 4ed214df5..55b99895d 100644
--- a/dapp/src/components/UnexpectedErrorModal.tsx
+++ b/dapp/src/components/UnexpectedErrorModal.tsx
@@ -18,7 +18,7 @@ export function UnexpectedErrorModalBase({ withCloseButton }: BaseModalProps) {
   return (
     <>
       {withCloseButton && <ModalCloseButton />}
-      <ModalHeader color="red.400" textAlign="center">
+      <ModalHeader color="red.50" textAlign="center">
         Unexpected error...
       </ModalHeader>
       <ModalBody gap={10} pb={6}>
diff --git a/dapp/src/components/WelcomeModal.tsx b/dapp/src/components/WelcomeModal.tsx
index c5ab40177..208b8902e 100644
--- a/dapp/src/components/WelcomeModal.tsx
+++ b/dapp/src/components/WelcomeModal.tsx
@@ -133,12 +133,12 @@ function WelcomeModalBase({ closeModal }: BaseModalProps) {
     <SimpleGrid columns={2} templateColumns="1fr auto">
       <Box>
         <ModalHeader gap={3} pb={8}>
-          <TextSm mb={{ base: 4, md: 12 }} color="neutral.70">
+          <TextSm mb={{ base: 4, md: 12 }} color="text.tertiary">
             Welcome to Acre,
           </TextSm>
           {activeStepData.title}
         </ModalHeader>
-        <ModalBody textAlign="left" display="block" color="brown.80">
+        <ModalBody textAlign="left" display="block" color="text.secondary">
           {activeStepData.content(embeddedApp)}
         </ModalBody>
         <ModalFooter
diff --git a/dapp/src/components/shared/Alert.tsx b/dapp/src/components/shared/Alert.tsx
index 53f82c406..609129828 100644
--- a/dapp/src/components/shared/Alert.tsx
+++ b/dapp/src/components/shared/Alert.tsx
@@ -22,23 +22,23 @@ import Spinner from "./Spinner"
 const STATUSES = {
   info: {
     icon: IconInfoCircle,
-    colorScheme: "gold",
+    colorScheme: "oldPalette.gold",
   },
   warning: {
     icon: IconExclamationCircle,
-    colorScheme: "orange",
+    colorScheme: "oldPalette.orange",
   },
   success: {
     icon: IconCircleCheck,
-    colorScheme: "green",
+    colorScheme: "oldPalette.green",
   },
   error: {
     icon: IconExclamationCircle,
-    colorScheme: "red",
+    colorScheme: "oldPalette.red",
   },
   loading: {
     icon: Spinner,
-    colorScheme: "brand",
+    colorScheme: "oldPalette.brand",
   },
 }
 
diff --git a/dapp/src/components/shared/AnimatedNumber/AnimatedNumberColumn.tsx b/dapp/src/components/shared/AnimatedNumber/AnimatedNumberColumn.tsx
index 11d67d982..2e6acc97c 100644
--- a/dapp/src/components/shared/AnimatedNumber/AnimatedNumberColumn.tsx
+++ b/dapp/src/components/shared/AnimatedNumber/AnimatedNumberColumn.tsx
@@ -29,10 +29,7 @@ function AnimatedNumberColumn(props: AnimatedNumberColumnProps) {
 
   useEffect(() => setDigitToPosition(digit), [digit, setDigitToPosition])
 
-  const indicationColorValue = useToken(
-    "colors",
-    indicationColor ?? "brand.400",
-  )
+  const indicationColorValue = useToken("colors", indicationColor ?? "acre.50")
 
   return (
     <Box ref={containerRef} position="relative" {...restProps}>
diff --git a/dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx b/dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx
index 20b463e8d..df0560401 100644
--- a/dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx
+++ b/dapp/src/components/shared/FeesDetails/FeesDetailsAmountItem.tsx
@@ -25,7 +25,7 @@ function FeesDetailsAmountItem({
           to={{
             size: "sm",
             fontWeight: "medium",
-            color: "grey.500",
+            color: "text.tertiary",
             ...to,
           }}
         />
diff --git a/dapp/src/components/shared/FeesDetails/index.tsx b/dapp/src/components/shared/FeesDetails/index.tsx
index 033074f95..db9c50915 100644
--- a/dapp/src/components/shared/FeesDetails/index.tsx
+++ b/dapp/src/components/shared/FeesDetails/index.tsx
@@ -29,13 +29,13 @@ function FeesDetailsItem({
           display="flex"
           alignItems="center"
           fontWeight="semibold"
-          color="grey.700"
+          color="text.primary"
         >
           {label}
         </TextMd>
         {tooltip}
       </HStack>
-      {value ? <TextMd color="grey.700">{value}</TextMd> : children}
+      {value ? <TextMd color="text.primary">{value}</TextMd> : children}
     </ListItem>
   )
 }
diff --git a/dapp/src/components/shared/LiveTag.tsx b/dapp/src/components/shared/LiveTag.tsx
index c81e62501..cd137e706 100644
--- a/dapp/src/components/shared/LiveTag.tsx
+++ b/dapp/src/components/shared/LiveTag.tsx
@@ -10,8 +10,8 @@ export default function LiveTag(props: TagProps) {
       px={4}
       py={2}
       rounded="3xl"
-      color="gold.200"
-      bg="grey.700"
+      color="surface.3"
+      bg="brown.100"
       variant="solid"
       fontSize="md"
       lineHeight={5}
@@ -26,7 +26,7 @@ export default function LiveTag(props: TagProps) {
           rounded="full"
           w={2}
           h={2}
-          bg="brand.400"
+          bg="acre.50"
         />
         <MotionBox
           as="span"
@@ -36,7 +36,7 @@ export default function LiveTag(props: TagProps) {
           rounded="full"
           w={2}
           h={2}
-          bg="brand.400"
+          bg="acre.50"
           animate={{ scale: [1, 5.5, 0], opacity: [0.5, 0.1, 0] }}
           transition={{
             duration: 2,
diff --git a/dapp/src/components/shared/Pagination/PaginationFooter.tsx b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
index 580023482..3e38fdf2a 100644
--- a/dapp/src/components/shared/Pagination/PaginationFooter.tsx
+++ b/dapp/src/components/shared/Pagination/PaginationFooter.tsx
@@ -16,7 +16,7 @@ function PaginationFooter(props: PaginationFooterProps) {
       pb={containerPadding}
       mt={-TOP_SPACE}
       pt={TOP_SPACE}
-      bgGradient="linear(to-b, transparent, gold.200 20%)"
+      bgGradient="linear(to-b, transparent, surface.3 20%)"
       zIndex={2}
       {...restProps}
     >
diff --git a/dapp/src/components/shared/ProgressBar.tsx b/dapp/src/components/shared/ProgressBar.tsx
index ca8b52c1d..c93bc2dbf 100644
--- a/dapp/src/components/shared/ProgressBar.tsx
+++ b/dapp/src/components/shared/ProgressBar.tsx
@@ -18,7 +18,7 @@ function ProgressBar(props: ProgressBarProps) {
           position="absolute"
           top="50%"
           left={`${value}%`}
-          color="grey.700"
+          color="text.primary"
           boxSize={3}
           transform="auto"
           translateX="-100%"
diff --git a/dapp/src/components/shared/TokenBalanceInput.tsx b/dapp/src/components/shared/TokenBalanceInput.tsx
index 15cdc7c86..f6e2fab7b 100644
--- a/dapp/src/components/shared/TokenBalanceInput.tsx
+++ b/dapp/src/components/shared/TokenBalanceInput.tsx
@@ -135,7 +135,7 @@ export default function TokenBalanceInput({
               {tokenAmountLabel}
             </Box>
             <CurrencyBalance
-              color={isBalanceExceeded ? "red.400" : "gray.700"}
+              color={isBalanceExceeded ? "red.50" : "text.primary"}
               size={size === "lg" ? "md" : "sm"}
               amount={tokenBalance}
               currency={currency}
diff --git a/dapp/src/components/shared/TooltipIcon.tsx b/dapp/src/components/shared/TooltipIcon.tsx
index 1ef97745f..1c10efa39 100644
--- a/dapp/src/components/shared/TooltipIcon.tsx
+++ b/dapp/src/components/shared/TooltipIcon.tsx
@@ -3,9 +3,6 @@ import { IconInfoCircleFilled, TablerIcon } from "@tabler/icons-react"
 import { Icon, TooltipProps } from "@chakra-ui/react"
 import Tooltip from "./Tooltip"
 
-// TODO: Define in the new color palette
-const ICON_COLOR = "#3A3328"
-
 type TooltipIconProps = Omit<TooltipProps, "children"> & {
   icon?: TablerIcon
 }
@@ -18,8 +15,7 @@ export default function TooltipIcon(props: TooltipIconProps) {
         as={icon ?? IconInfoCircleFilled}
         boxSize="1.125rem" // 18px
         cursor="pointer"
-        color={ICON_COLOR}
-        opacity={0.25}
+        color="brown.30"
       />
     </Tooltip>
   )
diff --git a/dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx b/dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx
index 6b1280a1f..159c49097 100644
--- a/dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx
+++ b/dapp/src/components/shared/TransactionDetails/TransactionDetailsAmountItem.tsx
@@ -22,7 +22,7 @@ function TransactionDetailsAmountItem({
   }
 
   const toProps: TransactionDetailsAmountItemProps["to"] = to
-    ? { size: "sm", fontWeight: "medium", color: "grey.500", ...to }
+    ? { size: "sm", fontWeight: "medium", color: "text.tertiary", ...to }
     : undefined
 
   return (
diff --git a/dapp/src/components/shared/TransactionDetails/index.tsx b/dapp/src/components/shared/TransactionDetails/index.tsx
index bdaf6552c..f271bf203 100644
--- a/dapp/src/components/shared/TransactionDetails/index.tsx
+++ b/dapp/src/components/shared/TransactionDetails/index.tsx
@@ -21,10 +21,10 @@ function TransactionDetailsItem({
       alignItems="center"
       {...listItemProps}
     >
-      <TextMd fontWeight="semibold" color="grey.700">
+      <TextMd fontWeight="semibold" color="text.primary">
         {label}
       </TextMd>
-      {value ? <TextMd color="grey.700">{value}</TextMd> : children}
+      {value ? <TextMd color="text.primary">{value}</TextMd> : children}
     </ListItem>
   )
 }
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
index 62797243c..86f9e26ec 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
@@ -6,10 +6,6 @@ import { logPromiseFailure } from "#/utils"
 import { useAcrePointsData, useUserPointsData } from "#/hooks"
 import LabelWrapper from "./LabelWrapper"
 
-// TODO: Define colors as theme value
-const COLOR_TEXT_LIGHT_PRIMARY = "#1C1A16"
-const COLOR_TEXT_LIGHT_TERTIARY = "#7D6A4B"
-
 export function NextDropTimestampLabel() {
   const { data: acrePointsData, refetch: acrePointsDataRefetch } =
     useAcrePointsData()
@@ -24,7 +20,7 @@ export function NextDropTimestampLabel() {
 
   return (
     <HStack spacing={0}>
-      <TextMd color={COLOR_TEXT_LIGHT_TERTIARY} textAlign="center">
+      <TextMd color="text.tertiary" textAlign="center">
         Next drop in
       </TextMd>
       <Countdown
@@ -32,7 +28,7 @@ export function NextDropTimestampLabel() {
         onCountdownEnd={handleOnCountdownEnd}
         size="md"
         ml={1}
-        color={COLOR_TEXT_LIGHT_PRIMARY}
+        color="text.primary"
       />
     </HStack>
   )
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
index 77ea4c33d..95c3b0b73 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/LabelWrapper.tsx
@@ -3,7 +3,7 @@ import { VStack } from "@chakra-ui/react"
 
 export default function LabelWrapper({ children }: { children: ReactNode }) {
   return (
-    <VStack px={4} py={5} spacing={0} rounded="lg" bg="gold.100">
+    <VStack px={4} py={5} spacing={0} rounded="lg" bg="surface.2">
       {children}
     </VStack>
   )
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
index 66a3eeedc..dd02bd278 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
@@ -10,10 +10,6 @@ import { time } from "#/constants"
 import LabelWrapper from "./LabelWrapper"
 import { NextDropTimestampLabel } from "./AcrePointsLabel"
 
-// TODO: Update `Button` component theme
-const COLOR_BUTTON_LABEL = "#FBF7EC"
-const COLOR_BUTTON_BACKGROUND = "#33A321"
-
 function ClaimableBalanceLabel() {
   const { mutate: claimPoints } = useClaimPoints()
   const { data: userPointsData } = useUserPointsData()
@@ -33,9 +29,9 @@ function ClaimableBalanceLabel() {
       mt={5}
       onClick={debouncedClaimPoints}
       w="full"
-      colorScheme="green"
-      bgColor={COLOR_BUTTON_BACKGROUND}
-      color={COLOR_BUTTON_LABEL}
+      colorScheme="oldPalette.green"
+      bgColor="green.50"
+      color="ivoire.10"
       fontWeight="semibold"
       size="lg"
     >
@@ -50,7 +46,7 @@ function CalculationInProgressLabel() {
   return (
     <VStack spacing={4}>
       {!data?.claimableBalance && (
-        <TextMd color="grey.500">Please wait...</TextMd>
+        <TextMd color="text.tertiary">Please wait...</TextMd>
       )}
       <HStack spacing={0}>
         <Spinner mr={3} size="sm" />
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
index 38619e454..8e67dfbae 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
@@ -33,7 +33,7 @@ export default function AcrePointsCard(props: CardProps) {
   return (
     <Card {...props}>
       <CardHeader mb={2} as={HStack} justify="space-between">
-        <TextMd color="grey.700">
+        <TextMd color="text.primary">
           {isConnected ? "Your" : "Total"} Acre points
         </TextMd>
 
diff --git a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx
index 29065c8ee..053a316cf 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx
@@ -39,8 +39,18 @@ export default function AcrePointsTemplateCard(props: CardProps) {
             pt={16}
             pb="8.5rem" // 136px (156px - y-axis padding)
           >
-            <Tag px={3} py={1} bg="grey.700" color="gold.300" mb={6} border={0}>
-              <TagLeftIcon as={IconPlayerTrackNextFilled} color="brand.300" />
+            <Tag
+              px={3}
+              py={1}
+              bg="brown.100"
+              color="surface.4"
+              mb={6}
+              border={0}
+            >
+              <TagLeftIcon
+                as={IconPlayerTrackNextFilled}
+                color="oldPalette.brand.300"
+              />
               <TextSm
                 textTransform="uppercase"
                 fontWeight="bold"
@@ -49,10 +59,10 @@ export default function AcrePointsTemplateCard(props: CardProps) {
                 Coming soon
               </TextSm>
             </Tag>
-            <TextLg color="grey.700" fontWeight="semibold">
+            <TextLg color="text.primary" fontWeight="semibold">
               Acre Points will be live soon!
             </TextLg>
-            <TextMd color="grey.500" fontWeight="medium">
+            <TextMd color="text.tertiary" fontWeight="medium">
               Stake now to secure your spot
             </TextMd>
             {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */}
@@ -61,10 +71,10 @@ export default function AcrePointsTemplateCard(props: CardProps) {
               href={`${externalHref.DOCS}/acre-points-program`}
               isExternal
               variant="ghost"
-              color="brand.400"
+              color="acre.50"
               iconSpacing={1}
               rightIcon={
-                <Icon as={IconArrowUpRight} boxSize={4} color="brand.400" />
+                <Icon as={IconArrowUpRight} boxSize={4} color="acre.50" />
               }
               mt={4}
             >
diff --git a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
index 5d0fd9649..edbe38cde 100644
--- a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
+++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -19,13 +19,13 @@ export default function AcreTVLMessage(props: AcreTVLMessageProps) {
   }
 
   return (
-    <HStack align="start" spacing={1} color="grey.500" {...props}>
+    <HStack align="start" spacing={1} color="text.tertiary" {...props}>
       <Box color="orange.400" margin="auto">
         <IconBolt fill="currentColor" size={16} />
       </Box>
       {tvl.isCapExceeded ? (
         <VStack align="start" spacing={0}>
-          <TextMd fontWeight="semibold" color="grey.700">
+          <TextMd fontWeight="semibold" color="text.primary">
             Deposit cap reached!
           </TextMd>
           <TextMd>Stay tuned for the next deposit cycle.</TextMd>
@@ -37,7 +37,7 @@ export default function AcreTVLMessage(props: AcreTVLMessageProps) {
             currency="bitcoin"
             shouldBeFormatted={false}
             desiredDecimals={2}
-            color="grey.700"
+            color="text.primary"
           />
           <Box as="span">&nbsp;remaining until deposit cap</Box>
         </TextMd>
diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
index 3fe55468e..fd5814ac2 100644
--- a/dapp/src/pages/DashboardPage/BeehiveCard.tsx
+++ b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
@@ -41,7 +41,7 @@ export default function BeehiveCard(props: CardProps) {
       <CardBody as={VStack}>
         <Image src={beehiveIllustration} boxSize={32} />
         <UserDataSkeleton w="100%" mt={-7}>
-          <Box px={4} py={3} bg="gold.100" borderRadius="lg">
+          <Box px={4} py={3} bg="surface.2" borderRadius="lg">
             <TextSm>
               <Highlight query="Mezo" styles={{ color: "mezo" }}>
                 Total collected mats from Mezo
@@ -53,7 +53,7 @@ export default function BeehiveCard(props: CardProps) {
               />
             </TextSm>
             {data && (
-              <H6 fontWeight="semibold" color="grey.700">
+              <H6 fontWeight="semibold" color="text.primary">
                 {numbersUtils.numberToLocaleString(data.totalMats)}
               </H6>
             )}
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index 8091581ba..214bfb373 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -71,11 +71,11 @@ export default function PositionDetails() {
                 currency: "bitcoin",
                 size: "4xl",
                 letterSpacing: "-0.075rem", // -1.2px
-                color: "grey.700",
+                color: "text.primary",
               }}
               to={{
                 currency: "usd",
-                color: "grey.500",
+                color: "text.tertiary",
                 fontWeight: "medium",
               }}
             />
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
index cc339e6d4..8c2a1bda9 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/EstimatedDuration.tsx
@@ -16,18 +16,18 @@ export default function EstimatedDuration({
       <Tag variant="solid">
         <TagLeftIcon
           as={Spinner}
+          variant="filled"
+          color="acre.50"
           mr={2}
           borderWidth={3}
           boxSize={6}
-          color="gold.400"
-          emptyColor="brand.400"
         />
         <TagLabel>In progress...</TagLabel>
       </Tag>
       <Tag variant="solid">
         <TagLabel display="flex" gap={1}>
           Est. duration
-          <Box as="span" color="brand.400">
+          <Box as="span" color="acre.50">
             {activitiesUtils.getEstimatedDuration(
               activity.amount,
               activity.type,
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
index ce14a3311..b48e34bad 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -28,12 +28,12 @@ export default function TransactionTable() {
       <PaginationPage direction="column" spacing={2} pageSpacing={6}>
         {(pageData: Activity[]) =>
           pageData.map((activity) => (
-            <Card key={activity.id} role="group" bg="gold.100" p={4}>
+            <Card key={activity.id} role="group" bg="surface.2" p={4}>
               <CardBody as={Flex} flexDirection="column" gap={4}>
                 <Flex flexDirection="column">
                   <Flex justifyContent="space-between">
                     <TextSm
-                      color="grey.700"
+                      color="text.primary"
                       flex={1}
                       fontWeight="semibold"
                       textTransform="capitalize"
@@ -41,7 +41,7 @@ export default function TransactionTable() {
                       {activity.type}
                     </TextSm>
                     <CurrencyBalance
-                      color="grey.700"
+                      color="text.primary"
                       size="sm"
                       fontWeight="bold"
                       amount={activity.amount}
@@ -51,7 +51,7 @@ export default function TransactionTable() {
                     />
                   </Flex>
                   <Flex justifyContent="space-between">
-                    <TextSm color="grey.500" flex={1} fontWeight="medium">
+                    <TextSm color="text.tertiary" flex={1} fontWeight="medium">
                       {timeUtils.displayBlockTimestamp(
                         activitiesUtils.getActivityTimestamp(activity),
                       )}
@@ -61,9 +61,9 @@ export default function TransactionTable() {
                         id={activity.txHash}
                         chain="bitcoin"
                         type="transaction"
-                        color="grey.600"
+                        color="text.primary"
                         _groupHover={{
-                          color: "brand.400",
+                          color: "acre.50",
                           textDecoration: "none",
                         }}
                         minW={BLOCK_EXPLORER_CELL_MIN_WIDTH}
@@ -72,7 +72,7 @@ export default function TransactionTable() {
                           <TextSm>Details</TextSm>
                           <Icon
                             as={IconArrowUpRight}
-                            color="brand.400"
+                            color="acre.50"
                             boxSize={4}
                           />
                         </HStack>
@@ -105,7 +105,7 @@ export default function TransactionTable() {
           <PaginationButton mode="next" />
         </HStack>
 
-        <PaginationStatus dataLabel="entries" color="grey.500" />
+        <PaginationStatus dataLabel="entries" color="text.tertiary" />
       </PaginationFooter>
     </Pagination>
   )
diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
index 8ff1bcfc4..a45ad090e 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
@@ -23,7 +23,7 @@ function TransactionHistoryContent() {
     return (
       <VStack w="100%">
         <Image src={emptyState} alt="Stack of paper with magnifying glass" />,
-        <TextMd color="grey.400">You have no transactions yet!</TextMd>
+        <TextMd color="text.tertiary">You have no transactions yet!</TextMd>
       </VStack>
     )
 
diff --git a/dapp/src/theme/acreTVLProgressTheme.ts b/dapp/src/theme/acreTVLProgressTheme.ts
index fda13f990..1f167af57 100644
--- a/dapp/src/theme/acreTVLProgressTheme.ts
+++ b/dapp/src/theme/acreTVLProgressTheme.ts
@@ -14,10 +14,10 @@ const PARTS = [
 
 const containerStyles = defineStyle({
   w: "full",
-  bgColor: "grey.700",
+  bgColor: "brown.100",
   bgGradient:
     "linear(to-r, transparent, rgba(255, 122, 0, 0.2) 10%, rgba(243, 73, 0, 0.25) 20%, transparent 30%)",
-  color: "gold.200",
+  color: "surface.3",
   mask: 'linear-gradient(0, black, black), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MzkuNjI3IiBoZWlnaHQ9IjI4IiBmaWxsPSJub25lIj48cGF0aCBkPSJNNzM5LjYyNyAwYzAgNi42MjctNS4zNyAxMi0xMiAxMkgyOS4yNTRhMTUuOTk2IDE1Ljk5NiAwIDAgMC0xMS4zMTMgNC42ODZsLTYuNjI4IDYuNjI4QzguMzEzIDI2LjMxNSA0LjI0MyAyOCAwIDI4aDczOS42Mjd6IiBzdHlsZT0iZmlsbDojMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDo4O3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZCIvPjwvc3ZnPg==")',
   maskPosition: "100% 100%",
   clipPath: "inset(0 1px 0 0 round 12px)",
@@ -38,8 +38,8 @@ const contentWrapperStyles = defineStyle({
 })
 const valueIconStyles = defineStyle({
   boxSize: 6,
-  color: "brand.400",
-  bg: "gold.200",
+  color: "acre.50",
+  bg: "surface.3",
   rounded: "full",
   gridRowEnd: "span 2",
   transform: "auto",
diff --git a/dapp/src/theme/alertTheme.ts b/dapp/src/theme/alertTheme.ts
index ad63da841..f6d165da9 100644
--- a/dapp/src/theme/alertTheme.ts
+++ b/dapp/src/theme/alertTheme.ts
@@ -47,7 +47,7 @@ const variantSubtle = multiStyleConfig.definePartsStyle(({ colorScheme }) => {
 
 const variantElevated = multiStyleConfig.definePartsStyle(({ colorScheme }) => {
   const backgroundColor = getColorLevel(colorScheme, 200)
-  const foregroundColor = getColorLevel("grey", 700)
+  const foregroundColor = getColorLevel("oldPalette.grey", 700)
 
   return {
     container: {
diff --git a/dapp/src/theme/buttonTheme.ts b/dapp/src/theme/buttonTheme.ts
index 6bd5c08ec..4afbe95c3 100644
--- a/dapp/src/theme/buttonTheme.ts
+++ b/dapp/src/theme/buttonTheme.ts
@@ -10,11 +10,11 @@ const variantCard = defineStyle({
   p: 3,
   pr: 4,
   fontWeight: "semibold",
-  bg: "gold.200",
-  color: "brand.400",
+  bg: "surface.3",
+  color: "acre.50",
 
   _hover: {
-    bg: "gold.400",
+    bg: "surface.3",
     textDecoration: "none",
   },
 })
@@ -43,7 +43,7 @@ const buttonTheme: ComponentSingleStyleConfig = {
       let baseBg = `${colorScheme}.400`
       let hoverBg = `${colorScheme}.500`
 
-      if (colorScheme === "green") {
+      if (colorScheme === "oldPalette.green") {
         baseBg = `${colorScheme}.500`
         hoverBg = `${colorScheme}.600`
       }
@@ -54,7 +54,7 @@ const buttonTheme: ComponentSingleStyleConfig = {
         _hover: {
           bg: hoverBg,
           _disabled: {
-            bg: "grey.400",
+            bg: "oldPalette.grey.400",
           },
         },
         _active: {
@@ -62,23 +62,23 @@ const buttonTheme: ComponentSingleStyleConfig = {
         },
         _loading: {
           _disabled: {
-            background: "gold.300",
+            background: "oldPalette.gold.300",
             opacity: 1,
           },
         },
         _disabled: {
-          bg: "grey.500",
-          color: "gold.200",
+          bg: "oldPalette.grey.500",
+          color: "oldPalette.gold.200",
         },
       }
     },
     outline: ({ colorScheme }: StyleFunctionProps) => {
       const defaultStyles = {
-        color: "grey.700",
-        borderColor: "grey.700",
+        color: "oldPalette.grey.700",
+        borderColor: "oldPalette.grey.700",
 
         _hover: {
-          bg: "opacity.grey.700.05",
+          bg: "oldPalette.opacity.grey.700.05",
         },
         _active: {
           bg: "transparent",
@@ -86,20 +86,20 @@ const buttonTheme: ComponentSingleStyleConfig = {
         _loading: {
           _disabled: {
             borderColor: "white",
-            background: "opacity.white.5",
+            background: "oldPalette.opacity.white.5",
             opacity: 1,
           },
         },
       }
-      if (colorScheme === "gold") {
+      if (colorScheme === "oldPalette.gold") {
         return {
           ...defaultStyles,
-          bg: "gold.100",
+          bg: "oldPalette.gold.100",
           borderColor: "white",
           borderStyle: "solid",
 
           _hover: {
-            borderColor: "grey.500",
+            borderColor: "oldPalette.grey.500",
             bg: "transparent",
           },
         }
@@ -112,7 +112,7 @@ const buttonTheme: ComponentSingleStyleConfig = {
           borderColor: "white",
 
           _hover: {
-            bg: "opacity.black.05",
+            bg: "oldPalette.opacity.black.05",
           },
         }
       }
@@ -130,22 +130,22 @@ const buttonTheme: ComponentSingleStyleConfig = {
     card: variantCard,
     pagination: {
       bg: "white",
-      color: "grey.700",
+      color: "oldPalette.grey.700",
       ring: 0,
       ringInset: "inset",
       ringColor: "white",
 
       _hover: {
-        color: "brand.400",
-        bg: "opacity.white.6",
+        color: "acre.50",
+        bg: "oldPalette.opacity.white.6",
         ring: 1,
       },
       _active: {
         ring: 1,
-        ringColor: "brand.400",
+        ringColor: "acre.50",
       },
       _disabled: {
-        color: "grey.300",
+        color: "oldPalette.grey.300",
         bg: "white",
         opacity: 1,
         pointerEvents: "none",
@@ -160,7 +160,7 @@ const buttonTheme: ComponentSingleStyleConfig = {
     },
   },
   defaultProps: {
-    colorScheme: "brand",
+    colorScheme: "oldPalette.brand",
   },
 }
 
diff --git a/dapp/src/theme/cardTheme.ts b/dapp/src/theme/cardTheme.ts
index f4d0c78e5..132f88e0b 100644
--- a/dapp/src/theme/cardTheme.ts
+++ b/dapp/src/theme/cardTheme.ts
@@ -5,7 +5,7 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
 
 const baseStyleContainer = defineStyle({
   boxShadow: "none",
-  bg: "gold.200",
+  bg: "surface.3",
   borderRadius: "xl",
   p: 5,
 })
diff --git a/dapp/src/theme/footerTheme.ts b/dapp/src/theme/footerTheme.ts
index c92aff846..b305dcffb 100644
--- a/dapp/src/theme/footerTheme.ts
+++ b/dapp/src/theme/footerTheme.ts
@@ -8,8 +8,8 @@ const containerStyles = defineStyle({
   bottom: 0,
   left: 0,
   borderTop: "1px",
-  borderColor: "gold.500",
-  bgColor: "gold.300",
+  borderColor: "surface.5",
+  bgColor: "surface.4",
   zIndex: "footer",
 })
 
@@ -37,7 +37,7 @@ const listStyles = defineStyle({
 
 const linkStyles = defineStyle({
   display: "flex",
-  color: "grey.700",
+  color: "text.primary",
   fontWeight: "medium",
   fontSize: {
     base: "xs",
diff --git a/dapp/src/theme/formErrorTheme.ts b/dapp/src/theme/formErrorTheme.ts
index cac61f15b..709ff0995 100644
--- a/dapp/src/theme/formErrorTheme.ts
+++ b/dapp/src/theme/formErrorTheme.ts
@@ -4,7 +4,7 @@ import { formErrorAnatomy as parts } from "@chakra-ui/anatomy"
 
 const baseStyleText = defineStyle({
   fontWeight: "medium",
-  color: "grey.700",
+  color: "text.primary",
   mt: 4,
   fontSize: "md",
 })
diff --git a/dapp/src/theme/formLabelTheme.ts b/dapp/src/theme/formLabelTheme.ts
index 84ea032ff..a904a10ec 100644
--- a/dapp/src/theme/formLabelTheme.ts
+++ b/dapp/src/theme/formLabelTheme.ts
@@ -2,7 +2,7 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
 
 const baseStyle = defineStyle({
   fontWeight: "semibold",
-  color: "grey.700",
+  color: "text.primary",
 })
 
 const sizeMd = defineStyle({
diff --git a/dapp/src/theme/formTheme.ts b/dapp/src/theme/formTheme.ts
index deb7d01c9..7b30ec3e1 100644
--- a/dapp/src/theme/formTheme.ts
+++ b/dapp/src/theme/formTheme.ts
@@ -6,7 +6,7 @@ const baseStyleHelperText = defineStyle({
   alignItems: "center",
   gap: 1,
   fontWeight: "medium",
-  color: "grey.500",
+  color: "text.tertiary",
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
diff --git a/dapp/src/theme/inputTheme.ts b/dapp/src/theme/inputTheme.ts
index 128d4d418..40e5806a5 100644
--- a/dapp/src/theme/inputTheme.ts
+++ b/dapp/src/theme/inputTheme.ts
@@ -4,30 +4,30 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"
 const variantOutlineField = defineStyle({
   boxShadow: "none !important",
   border: "1px solid",
-  borderColor: "gold.300",
-  color: "grey.700",
+  borderColor: "surface.4",
+  color: "text.primary",
   fontWeight: "bold",
-  bg: "opacity.white.5",
+  bg: "surface.1",
   paddingRight: 20,
   minH: 14,
   // TODO: Set the color correctly without using the chakra variable.
-  caretColor: "var(--chakra-colors-brand-400)",
+  caretColor: "var(--chakra-colors-acre-50)",
 
   _placeholder: {
-    color: "grey.300",
+    color: "brown.30",
     fontWeight: "medium",
   },
 
   _hover: {
-    borderColor: "gold.300",
+    borderColor: "surface.4",
   },
 
   _focus: {
-    borderColor: "gold.300",
+    borderColor: "surface.4",
   },
 
   _invalid: {
-    borderColor: "red.400 !important",
+    borderColor: "red.50 !important",
   },
 })
 
diff --git a/dapp/src/theme/linkTheme.ts b/dapp/src/theme/linkTheme.ts
index bfa57e337..fee384c33 100644
--- a/dapp/src/theme/linkTheme.ts
+++ b/dapp/src/theme/linkTheme.ts
@@ -13,8 +13,8 @@ const containerBaseStyle = defineStyle({
 
 const navigationContainerStyles = defineStyle({
   fontWeight: "medium",
-  color: "grey.700",
-  _activeLink: { color: "brand.400" },
+  color: "text.primary",
+  _activeLink: { color: "acre.50" },
 })
 
 const sizeSm = multiStyleConfig.definePartsStyle({
diff --git a/dapp/src/theme/modalTheme.ts b/dapp/src/theme/modalTheme.ts
index 2a1ecb89a..9244c9e9a 100644
--- a/dapp/src/theme/modalTheme.ts
+++ b/dapp/src/theme/modalTheme.ts
@@ -14,7 +14,7 @@ const baseStyleDialog = defineStyle({
   boxShadow: "none",
   borderRadius: "xl",
   p: { base: 5, sm: 0 },
-  bg: "gold.100",
+  bg: "surface.2",
   border: "none",
 })
 
@@ -23,10 +23,10 @@ const baseCloseButton = defineStyle({
   right: { base: 3, sm: -7 },
   boxSize: { sm: 7 },
   rounded: { sm: "100%" },
-  bg: "opacity.white.5",
+  bg: "oldPalette.opacity.white.5",
 
   _hover: {
-    bg: "opacity.white.5",
+    bg: "oldPalette.opacity.white.5",
   },
 })
 
@@ -48,7 +48,7 @@ const baseStyleHeader = defineStyle({
 
 const baseStyleBody = defineStyle({
   textAlign: "center",
-  color: "grey.600",
+  color: "text.primary",
   display: "flex",
   flexDirection: "column",
   alignItems: "center",
@@ -79,7 +79,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({
 
 const unstyledVariant = multiStyleConfig.definePartsStyle({
   dialog: { bg: "none", borderWidth: 0 },
-  overlay: { bg: "opacity.gold.300.75" },
+  overlay: { bg: "oldPalette.opacity.gold.300.75" },
 })
 
 const variants = {
diff --git a/dapp/src/theme/progressTheme.ts b/dapp/src/theme/progressTheme.ts
index 3b332d23d..80f7905a8 100644
--- a/dapp/src/theme/progressTheme.ts
+++ b/dapp/src/theme/progressTheme.ts
@@ -7,7 +7,7 @@ import { getColorVar } from "@chakra-ui/theme-tools"
 import { keyframes } from "@chakra-ui/react"
 
 const PROGRESS_TRACK_BG_COLOR = "#3A3328"
-const PROGRESS_TRACK_BG_COLOR_PRIMARY = "#FF1822"
+const PROGRESS_TRACK_BG_COLOR_PRIMARY = "red.50"
 const PROGRESS_TRACK_BG_COLOR_SECONDARY = "#FF8A02"
 
 const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
@@ -16,7 +16,7 @@ const trackStyle = defineStyle((props) => {
   const { isIndeterminate, hasStripe } = props
 
   const bgColor = PROGRESS_TRACK_BG_COLOR
-  const stripeColor = getColorVar(props.theme, "grey.700") as string
+  const stripeColor = getColorVar(props.theme, "brown.100") as string
   const stripesAnimation = keyframes`
     from { background-position: 0 0; }
     to { background-position: 17px 0; }
@@ -63,7 +63,7 @@ const indeterminateStyle = defineStyle((props) => {
 })
 
 const baseStyleLabel = defineStyle({
-  color: "gold.200",
+  color: "surface.3",
   display: "flex",
   alignItems: "baseline",
   justifyContent: "space-between",
diff --git a/dapp/src/theme/skeletonTheme.ts b/dapp/src/theme/skeletonTheme.ts
index 1f771222c..1bb65d56e 100644
--- a/dapp/src/theme/skeletonTheme.ts
+++ b/dapp/src/theme/skeletonTheme.ts
@@ -7,12 +7,12 @@ const baseStyle = defineStyle({
   borderRadius: "lg",
 
   _light: {
-    [$startColor.variable]: "colors.gold.300",
-    [$endColor.variable]: "colors.gold.200",
+    [$startColor.variable]: "colors.surface.4",
+    [$endColor.variable]: "colors.surface.3",
   },
   _dark: {
-    [$startColor.variable]: "colors.gold.300",
-    [$endColor.variable]: "colors.gold.200",
+    [$startColor.variable]: "colors.surface.4",
+    [$endColor.variable]: "colors.surface.3",
   },
 })
 
diff --git a/dapp/src/theme/spinnerTheme.ts b/dapp/src/theme/spinnerTheme.ts
index 320fbd80f..f09a22b83 100644
--- a/dapp/src/theme/spinnerTheme.ts
+++ b/dapp/src/theme/spinnerTheme.ts
@@ -1,16 +1,16 @@
 import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
 
 const baseStyle = defineStyle({
-  color: "brand.400",
+  color: "acre.50",
   borderWidth: 2,
-  borderBottomColor: "brand.400",
+  borderBottomColor: "acre.50",
 })
 
 const variantFilled = defineStyle({
   borderWidth: 3,
-  borderTopColor: "gold.400",
-  borderBottomColor: "gold.400",
-  borderLeftColor: "gold.400",
+  borderTopColor: "brown.20",
+  borderBottomColor: "brown.20",
+  borderLeftColor: "brown.20",
 })
 
 const variants = {
diff --git a/dapp/src/theme/tagTheme.ts b/dapp/src/theme/tagTheme.ts
index 454b449d6..f68386b2e 100644
--- a/dapp/src/theme/tagTheme.ts
+++ b/dapp/src/theme/tagTheme.ts
@@ -6,8 +6,8 @@ const multiStyleConfig = createMultiStyleConfigHelpers(parts.keys)
 const baseStyleContainer = defineStyle({
   borderRadius: "full",
   w: "fit-content",
-  color: "grey.700",
-  bg: "gold.200",
+  color: "text.primary",
+  bg: "surface.3",
   paddingX: 4,
   paddingY: 2.5,
   shadow: "none",
diff --git a/dapp/src/theme/tokenBalanceInputTheme.ts b/dapp/src/theme/tokenBalanceInputTheme.ts
index 87141b315..9c646b1eb 100644
--- a/dapp/src/theme/tokenBalanceInputTheme.ts
+++ b/dapp/src/theme/tokenBalanceInputTheme.ts
@@ -14,7 +14,7 @@ const baseStyleBalanceContainer = defineStyle({
 
 const baseStyleBalance = defineStyle({
   fontWeight: "medium",
-  color: "grey.500",
+  color: "text.tertiary",
 })
 
 const multiStyleConfig = createMultiStyleConfigHelpers(PARTS)
diff --git a/dapp/src/theme/tooltipTheme.ts b/dapp/src/theme/tooltipTheme.ts
index 19875d089..4e18708be 100644
--- a/dapp/src/theme/tooltipTheme.ts
+++ b/dapp/src/theme/tooltipTheme.ts
@@ -16,9 +16,9 @@ ChakraTooltip.defaultProps = { ...ChakraTooltip.defaultProps, hasArrow: true }
 const $arrowBg = cssVar("popper-arrow-bg")
 
 const baseStyle = defineStyle({
-  color: "gold.100",
-  bg: "grey.700",
-  [$arrowBg.variable]: "colors.grey.700",
+  color: "surface.2",
+  bg: "brown.100",
+  [$arrowBg.variable]: "brown.100",
 })
 
 const sizeXs = defineStyle({
diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
index 9289da785..a484db32f 100644
--- a/dapp/src/theme/utils/colors.ts
+++ b/dapp/src/theme/utils/colors.ts
@@ -1,4 +1,4 @@
-export default {
+const oldPalette = {
   brand: {
     100: "#FFEDEB",
     200: "#FFC5BF",
@@ -74,15 +74,99 @@ export default {
       15: "rgba(0, 0, 0, 0.15)",
     },
   },
-  neutral: {
-    70: "#7D6A4B",
+}
+
+const primary = {
+  acre: {
+    50: "#F34900",
+    60: "#D54000",
+    70: "#B73700",
+    80: "#7A2500",
   },
-  brown: {
-    80: "#5A4D3A",
+  ink: {
+    50: "#4E01F3",
+    60: "#4601D9",
+    70: "#3B01B7",
+    80: "#27007A",
+  },
+  flower: {
+    30: "#C9A0FF",
+  },
+  ocean: {
+    30: "#D7E9F1",
+  },
+  grass: {
+    30: "#C3E8C3",
+  },
+}
+
+const secondary = {
+  ivoire: {
+    "05": "#FFFDF9",
+    10: "#FBF7EC",
+    20: "#F8EFDA",
+    30: "#F3E4BE",
+    40: "#EDD8A2",
+    50: "#E8CD87",
   },
   orange: {
-    30: "#FF7A00",
-    50: "#FFB76E",
+    10: "#FCE4C9",
+    30: "#FFBC80",
+    50: "#FF7A00",
+  },
+  neutral: { 50: "#A0957F", 60: "#8E8169" },
+  brown: {
+    "05": "rgba(125, 106, 75, 0.05)",
+    10: "rgba(125, 106, 75, 0.10)",
+    20: "rgba(125, 106, 75, 0.15)",
+    30: "rgba(125, 106, 75, 0.25)",
+    40: "#B5AC9B",
+    80: "#554C3F",
+    90: "#38332A",
+    100: "#1D1A15",
+  },
+}
+
+const functional = {
+  green: {
+    10: "#D9F6D5",
+    30: "#A1EA95",
+    50: "#33A321",
+  },
+  yellow: {
+    10: "#F6F1D2",
+    30: "#FFDC80",
+    50: "#FFBA07",
+  },
+  red: {
+    10: "#FFDCDC",
+    30: "#FF8085",
+    50: "#FF1822",
+  },
+  blue: {
+    10: "#CFE0FF",
+    30: "#80ACFE",
+    50: "#0E61FE",
+  },
+}
+
+export default {
+  oldPalette,
+  ...primary,
+  ...secondary,
+  ...functional,
+  text: {
+    primary: secondary.brown["100"],
+    secondary: secondary.brown["80"],
+    tertiary: secondary.neutral["60"],
+  },
+  surface: {
+    1: secondary.ivoire["05"],
+    2: secondary.ivoire["10"],
+    3: secondary.ivoire["20"],
+    4: secondary.ivoire["30"],
+    5: secondary.ivoire["40"],
+    6: secondary.ivoire["50"],
   },
   mezo: "#FF004D",
 }
diff --git a/dapp/src/theme/utils/styles.ts b/dapp/src/theme/utils/styles.ts
index e9dea2f14..4051d67e9 100644
--- a/dapp/src/theme/utils/styles.ts
+++ b/dapp/src/theme/utils/styles.ts
@@ -3,8 +3,8 @@ import { mode } from "@chakra-ui/theme-tools"
 
 const bodyStyle = defineStyle((props: StyleFunctionProps) => ({
   // TODO: Update when the dark theme is ready
-  backgroundColor: mode("gold.300", "gold.300")(props),
-  color: mode("grey.700", "grey.700")(props),
+  backgroundColor: mode("surface.4", "surface.4")(props),
+  color: mode("text.primary", "text.primary")(props),
 }))
 
 const globalStyle = (props: StyleFunctionProps) => ({