diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx
index e0a161be0..baf32284a 100644
--- a/dapp/src/components/AcrePointsClaimModal.tsx
+++ b/dapp/src/components/AcrePointsClaimModal.tsx
@@ -66,7 +66,7 @@ function AcrePointsClaimModalBase({
           prefix="+"
           suffix=" PTS"
           animateMode="whileInView"
-          color="brand.400"
+          color="acre.50"
         />,
       ],
       [
@@ -75,7 +75,7 @@ function AcrePointsClaimModalBase({
           value={formattedTotalAmount}
           suffix=" PTS"
           animateMode="whileInView"
-          indicationColor="brand.400"
+          indicationColor="acre.50"
         />,
       ],
       // TODO: Uncomment when the leaderboard feature is ready
@@ -85,7 +85,7 @@ function AcrePointsClaimModalBase({
       //     value={rankPositionDifference}
       //     prefix={rankPositionDifference > 0 ? "+" : "-"}
       //     animateMode="whileInView"
-      //     color={rankPositionDifference > 0 ? "green.500" : "red.500"}
+      //     color={rankPositionDifference > 0 ? "green.50" : "red.50"}
       //   />,
       // ],
       // [
@@ -94,7 +94,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 557271185..e102b384f 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="sm"
       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 13381c6bc..7c1492482 100644
--- a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
+++ b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -10,16 +10,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",
   },
 }
 
@@ -27,8 +27,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 = {
@@ -52,7 +52,7 @@ export default function ConnectWalletStatusLabel({
         </Text>
       </HStack>
       {isError && (
-        <HStack color="red.400" textAlign="start">
+        <HStack color="red.50" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
           <Text size="md">Rejected by user</Text>
         </HStack>
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
index c0c874c46..a47a922a4 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 />}
           >
-            <Text size="md" color="brand.400">
+            <Text size="md" color="acre.50">
               {addressUtils.truncateAddress(address)}
             </Text>
           </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" />
-          <Text size="md" color="brand.400">
+          <Icon as={BitcoinIcon} boxSize={6} color="acre.50" />
+          <Text size="md" color="acre.50">
             {addressUtils.truncateAddress(address)}
           </Text>
         </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 9cb167eff..960c38731 100644
--- a/dapp/src/components/MezoBeehiveModal.tsx
+++ b/dapp/src/components/MezoBeehiveModal.tsx
@@ -37,7 +37,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} />
@@ -65,8 +65,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"
@@ -86,7 +86,7 @@ function MezoBeehiveModalBase() {
             }}
           >
             <CardHeader as={HStack}>
-              <Icon as={IconChartPieFilled} color="brand.400" boxSize={5} />
+              <Icon as={IconChartPieFilled} color="acre.50" boxSize={5} />
             </CardHeader>
 
             <CardBody>
@@ -102,7 +102,7 @@ function MezoBeehiveModalBase() {
             <CardBody
               as={HStack}
               spacing={6}
-              color="grey.700"
+              color="text.primary"
               textAlign="start"
             >
               <MezoSignIcon
@@ -122,7 +122,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 63a724f34..85c6b8717 100644
--- a/dapp/src/components/MobileModeBanner/index.tsx
+++ b/dapp/src/components/MobileModeBanner/index.tsx
@@ -44,14 +44,14 @@ function MobileModeBanner(props: MobileModeBannerProps) {
       maxH="100vh"
       {...restProps}
     >
-      <Flex align="center" justify="center" p={4} bg="grey.700">
+      <Flex align="center" justify="center" p={4} bg="brown.100">
         <Text
           size="md"
-          color="gold.300"
+          color="surface.4"
           textAlign="center"
           whiteSpace="break-spaces"
         >
-          Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
+          Acre App is <LiveTag color="acre.50" gap={1} px={1} py={0} /> on
           desktop!
         </Text>
 
@@ -67,7 +67,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
               />
             }
             iconSpacing={0}
-            color="brand.400"
+            color="acre.50"
             p={0}
             h="auto"
             ml={2}
@@ -88,8 +88,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 d5391a41d..babaeac45 100644
--- a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
+++ b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx
@@ -15,9 +15,9 @@ export default function ActionDurationEstimation({
   )
 
   return (
-    <Text size="md" mt={4} color="grey.400">
+    <Text size="md" mt={4} color="text.tertiary">
       Estimated duration&nbsp;
-      <Text size="md" as="span" color="grey.500">
+      <Text size="md" as="span">
         ~ {activitiesUtils.getEstimatedDuration(amount, type)}
       </Text>
     </Text>
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
index b78a467a9..8a34749ca 100644
--- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
+++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx
@@ -80,15 +80,15 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 px={3}
                 py={1}
                 rounded="sm"
-                bg="gold.300"
-                _hover={{ bg: "gold.200" }}
+                bg="surface.4"
+                _hover={{ bg: "surface.3" }}
               >
                 <HStack spacing={1}>
                   <Text size="md">{selectedTierItem.label}</Text>
                   <Icon
                     as={IconChevronDown}
                     boxSize={4}
-                    color="brand.400"
+                    color="acre.50"
                     zIndex={2}
                     rotate={isOpen ? 180 : 0}
                     transform="auto"
@@ -101,7 +101,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 minW={0}
                 rounded="sm"
                 shadow="none"
-                bg="gold.300"
+                bg="surface.4"
                 border="none"
                 overflow="hidden"
                 motionProps={{
@@ -114,9 +114,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
                     px={3}
                     py={1}
                     rounded="sm"
-                    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 5b591f81d..f16698d92 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">
@@ -86,7 +86,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 />
@@ -98,8 +98,8 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) {
           Retry transaction
         </Button>
         <HStack>
-          <Icon as={IconShieldCheckFilled} boxSize={5} color="gold.700" />
-          <Text size="sm" color="grey.700">
+          <Icon as={IconShieldCheckFilled} boxSize={5} color="acre.50" />
+          <Text size="sm" color="text.primary">
             Your funds are secure.
           </Text>
         </HStack>
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx
index 9b79f6913..0d3ec6909 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>
         <Text size="md">
@@ -59,7 +59,7 @@ export default function ServerErrorModal({
         px={8}
         flexDirection="row"
         justifyContent="space-between"
-        bgColor="gold.200"
+        bgColor="surface.3"
         borderRadius="md"
       >
         <Flex flexDirection="column">
@@ -70,14 +70,14 @@ export default function ServerErrorModal({
             {/* TODO: ADD a tooltip */}
             {/* <TooltipIcon label="Tooltip text" placement="top" /> */}
           </HStack>
-          <Text size="md" color="red.400">
+          <Text size="md" color="red.50">
             Partial Outage
           </Text>
         </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 39e0a638c..6db59cbfa 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={Text}
         size="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 />
 
-        <Text size="md" color="grey.600" px={1}>
+        <Text size="md" 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 7b519abd8..b2d13886e 100644
--- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
+++ b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx
@@ -22,7 +22,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 e766f31df..c1e1cc7a7 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>
 
         <Text size="md">Are you sure you want to cancel?</Text>
diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx
index d4277769e..fbca0d16a 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}>
-                <Text size="sm" color="grey.600" fontWeight="semibold">
+                <Text size="sm" color="text.primary" fontWeight="semibold">
                   View on Mempool
                 </Text>
-                <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 42cd453a1..ba798837e 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 31402966b..22990aef3 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 e04a6f7d9..c4a5ed28e 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}>
-          <Text size="sm" mb={{ base: 4, md: 12 }} color="neutral.70">
+          <Text size="sm" mb={{ base: 4, md: 12 }} color="text.tertiary">
             Welcome to Acre,
           </Text>
           {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 a533d74b0..03dc4f964 100644
--- a/dapp/src/components/shared/FeesDetails/index.tsx
+++ b/dapp/src/components/shared/FeesDetails/index.tsx
@@ -29,14 +29,14 @@ function FeesDetailsItem({
           display="flex"
           alignItems="center"
           fontWeight="semibold"
-          color="grey.700"
+          color="text.primary"
         >
           {label}
         </Text>
         {tooltip}
       </HStack>
       {value ? (
-        <Text size="md" color="grey.700">
+        <Text size="md" color="text.primary">
           {value}
         </Text>
       ) : (
diff --git a/dapp/src/components/shared/LiveTag.tsx b/dapp/src/components/shared/LiveTag.tsx
index 72ff17ac0..e60db25b0 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="lg"
-      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 6bd93dd6c..f3da01e50 100644
--- a/dapp/src/components/shared/TransactionDetails/index.tsx
+++ b/dapp/src/components/shared/TransactionDetails/index.tsx
@@ -20,11 +20,11 @@ function TransactionDetailsItem({
       alignItems="center"
       {...listItemProps}
     >
-      <Text size="md" fontWeight="semibold" color="grey.700">
+      <Text size="md" fontWeight="semibold" color="text.primary">
         {label}
       </Text>
       {value ? (
-        <Text size="md" color="grey.700">
+        <Text size="md" color="text.primary">
           {value}
         </Text>
       ) : (
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
index ef3281fa5..a482879ab 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/AcrePointsLabel.tsx
@@ -5,10 +5,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()
@@ -23,7 +19,7 @@ export function NextDropTimestampLabel() {
 
   return (
     <HStack spacing={0}>
-      <Text size="md" color={COLOR_TEXT_LIGHT_TERTIARY} textAlign="center">
+      <Text size="md" color="text.tertiary" textAlign="center">
         Next drop in
       </Text>
       <Countdown
@@ -31,7 +27,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 24cb299ed..fa7cbbc8e 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="sm" bg="gold.100">
+    <VStack px={4} py={5} spacing={0} rounded="sm" bg="surface.2">
       {children}
     </VStack>
   )
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
index 30de105bd..1d2a492fc 100644
--- a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
+++ b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx
@@ -9,10 +9,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()
@@ -32,9 +28,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"
     >
@@ -49,7 +45,7 @@ function CalculationInProgressLabel() {
   return (
     <VStack spacing={4}>
       {!data?.claimableBalance && (
-        <Text size="md" color="grey.500">
+        <Text size="md" color="text.tertiary">
           Please wait...
         </Text>
       )}
diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/index.tsx
index 6e3747c76..2b68d4ca9 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">
-        <Text size="md" color="grey.700">
+        <Text size="md" color="text.primary">
           {isConnected ? "Your" : "Total"} Acre points
         </Text>
 
diff --git a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx
index 4b8fcbe31..83dde6ddb 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"
+              />
               <Text
                 size="sm"
                 textTransform="uppercase"
@@ -50,10 +60,10 @@ export default function AcrePointsTemplateCard(props: CardProps) {
                 Coming soon
               </Text>
             </Tag>
-            <Text size="lg" color="grey.700" fontWeight="semibold">
+            <Text size="lg" color="text.primary" fontWeight="semibold">
               Acre Points will be live soon!
             </Text>
-            <Text size="md" color="grey.500">
+            <Text size="md" color="text.tertiary" fontWeight="medium">
               Stake now to secure your spot
             </Text>
             {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */}
@@ -62,10 +72,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 b2770dcd6..4f828721d 100644
--- a/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
+++ b/dapp/src/pages/DashboardPage/AcreTVLMessage.tsx
@@ -18,13 +18,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}>
-          <Text size="md" fontWeight="semibold" color="grey.700">
+          <Text size="md" fontWeight="semibold" color="text.primary">
             Deposit cap reached!
           </Text>
           <Text size="md">Stay tuned for the next deposit cycle.</Text>
@@ -36,7 +36,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>
         </Text>
diff --git a/dapp/src/pages/DashboardPage/BeehiveCard.tsx b/dapp/src/pages/DashboardPage/BeehiveCard.tsx
index 9147d9789..604242a0b 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="sm">
+          <Box px={4} py={3} bg="surface.2" borderRadius="sm">
             <Text size="sm">
               <Highlight query="Mezo" styles={{ color: "mezo" }}>
                 Total collected mats from Mezo
@@ -53,7 +53,7 @@ export default function BeehiveCard(props: CardProps) {
               />
             </Text>
             {data && (
-              <Text size="2xl" fontWeight="semibold" color="grey.700">
+              <Text size="2xl" fontWeight="semibold" color="text.primary">
                 {numbersUtils.numberToLocaleString(data.totalMats)}
               </Text>
             )}
diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx
index ed48fd297..d3fa12607 100644
--- a/dapp/src/pages/DashboardPage/PositionDetails.tsx
+++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx
@@ -77,11 +77,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 f2cf58ae2..76f80c290 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx
@@ -30,7 +30,7 @@ export default function TransactionTable() {
             <Card
               key={activity.id}
               role="group"
-              bg="gold.100"
+              bg="surface.2"
               p={4}
               borderRadius="sm"
             >
@@ -39,7 +39,7 @@ export default function TransactionTable() {
                   <Flex justifyContent="space-between">
                     <Text
                       size="sm"
-                      color="grey.700"
+                      color="text.primary"
                       flex={1}
                       fontWeight="semibold"
                       textTransform="capitalize"
@@ -47,7 +47,7 @@ export default function TransactionTable() {
                       {activity.type}
                     </Text>
                     <CurrencyBalance
-                      color="grey.700"
+                      color="text.primary"
                       size="sm"
                       fontWeight="bold"
                       amount={activity.amount}
@@ -57,7 +57,7 @@ export default function TransactionTable() {
                     />
                   </Flex>
                   <Flex justifyContent="space-between">
-                    <Text size="sm" color="grey.500" flex={1}>
+                    <Text size="sm" color="text.tertiary" flex={1}>
                       {timeUtils.displayBlockTimestamp(
                         activitiesUtils.getActivityTimestamp(activity),
                       )}
@@ -67,9 +67,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}
@@ -78,7 +78,7 @@ export default function TransactionTable() {
                           <Text size="sm">Details</Text>
                           <Icon
                             as={IconArrowUpRight}
-                            color="brand.400"
+                            color="acre.50"
                             boxSize={4}
                           />
                         </HStack>
@@ -111,7 +111,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 bde50534f..e6bd8e532 100644
--- a/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
+++ b/dapp/src/pages/DashboardPage/TransactionHistory/index.tsx
@@ -22,7 +22,7 @@ function TransactionHistoryContent() {
     return (
       <VStack w="100%">
         <Image src={emptyState} alt="Stack of paper with magnifying glass" />,
-        <Text size="md" color="grey.400">
+        <Text size="md" color="text.tertiary">
           You have no transactions yet!
         </Text>
       </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 afd239834..431748403 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 b54223d90..20f940f2c 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 b70116d11..b3ed3a54c 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: "md",
   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 9c4ebec0e..906151a51 100644
--- a/dapp/src/theme/modalTheme.ts
+++ b/dapp/src/theme/modalTheme.ts
@@ -14,7 +14,7 @@ const baseStyleDialog = defineStyle({
   boxShadow: "none",
   borderRadius: "md",
   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 deba599ae..7d944303f 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 b29689dda..e2fcc599d 100644
--- a/dapp/src/theme/skeletonTheme.ts
+++ b/dapp/src/theme/skeletonTheme.ts
@@ -7,12 +7,12 @@ const baseStyle = defineStyle({
   borderRadius: "sm",
 
   _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 859bdf593..21ddc43f9 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) => ({