diff --git a/src/App.js b/src/App.js
index f09316e2..c7d2cdcd 100644
--- a/src/App.js
+++ b/src/App.js
@@ -32,19 +32,19 @@ const useStyles = makeStyles((theme) => {
       },
 
       '&.notistack-MuiContent-success': {
-        background: theme.custom.colors.fountainBlue,
-        boxShadow: theme.custom.shadows.grayBottomRight,
+        background: theme.custom.colors.blue100,
+        boxShadow: theme.custom.shadows.greyBottomRight,
       },
       '&.notistack-MuiContent-error': {
-        background: theme.custom.colors.lividBrown,
+        background: theme.custom.colors.purple50,
         boxShadow: theme.custom.shadows.lightGray,
       },
       '&.notistack-MuiContent-warning': {
-        background: theme.custom.colors.whiteAlmost,
-        border: `2px solid ${theme.custom.colors.deepBlush}`,
+        background: theme.custom.colors.white,
+        border: `2px solid ${theme.custom.colors.pink300}`,
         borderRadius: '8px',
         boxShadow: theme.custom.shadows.lightGray,
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
         textAlign: 'center',
         '& div': {
           paddingLeft: '0px',
diff --git a/src/components/ActivityStreamItem.js b/src/components/ActivityStreamItem.js
index 28a9d79e..39896c11 100644
--- a/src/components/ActivityStreamItem.js
+++ b/src/components/ActivityStreamItem.js
@@ -32,16 +32,16 @@ const useStyles = makeStyles((theme) => ({
   cardContainer: {
     boxShadow: theme.custom.shadows.navigationFloating,
     '&:hover': {
-      background: theme.custom.colors.blackSqueeze,
+      background: theme.custom.colors.blue600,
 
       '& .MuiCardHeader-root': {
-        background: theme.custom.colors.blackSqueeze,
+        background: theme.custom.colors.blue600,
       },
     },
   },
   cardHeader: {
     cursor: 'pointer',
-    background: theme.custom.colors.whiteAlmost,
+    background: theme.custom.colors.white,
   },
   cardHeaderUnseen: {
     position: 'relative',
@@ -54,7 +54,7 @@ const useStyles = makeStyles((theme) => ({
       borderRadius: '50%',
       width: '13px',
       height: '13px',
-      background: theme.custom.gradients.purple,
+      background: theme.custom.gradients.pinkToPurple,
     },
   },
   cardHeaderAction: {
@@ -65,7 +65,7 @@ const useStyles = makeStyles((theme) => ({
   cardContent: {
     padding: '15px 0 15px',
     margin: '5px 15px 0 15px',
-    borderTop: `1px solid ${theme.custom.colors.oldLavender}`,
+    borderTop: `1px solid ${theme.custom.colors.purple200}`,
     ' &.MuiCardContent-root': {
       paddingBottom: `${theme.spacing(1.5)}`,
     },
diff --git a/src/components/AppNote.js b/src/components/AppNote.js
index 9fc026d1..77610d13 100644
--- a/src/components/AppNote.js
+++ b/src/components/AppNote.js
@@ -7,8 +7,8 @@ import theme, { colors } from '../styles/theme';
 
 import HumbleAlert from '~/components/HumbleAlert';
 
-const DEFAULT_ALERT_COLOR = theme.custom.colors.fountainBlue;
-const DEFAULT_ICON_COLOR = colors.whiteAlmost;
+const DEFAULT_ALERT_COLOR = theme.custom.colors.blue100;
+const DEFAULT_ICON_COLOR = colors.white;
 const DEFAULT_ICON = 'IconBrowser';
 
 const useStyles = makeStyles(() => ({
diff --git a/src/components/Avatar.js b/src/components/Avatar.js
index afdd7c13..85eb94cd 100644
--- a/src/components/Avatar.js
+++ b/src/components/Avatar.js
@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
   },
   circleGrey: {
     background: theme.custom.colors.greyHover,
-    border: `2px solid ${theme.custom.colors.fountainBlue}`,
+    border: `2px solid ${theme.custom.colors.blue100}`,
     position: 'absolute',
     left: '-1px',
     top: '-1px',
diff --git a/src/components/BackgroundCurved.js b/src/components/BackgroundCurved.js
index e2b18670..7bded21d 100644
--- a/src/components/BackgroundCurved.js
+++ b/src/components/BackgroundCurved.js
@@ -23,14 +23,14 @@ const useStyles = makeStyles((theme) => {
         ) {
           switch (props.gradient) {
             case 'turquoise':
-              return theme.custom.gradients.greenBlue;
+              return theme.custom.gradients.greenBlueCurved;
             case 'violet':
               return theme.custom.gradients.violetCurved;
           }
         } else {
           switch (props.gradient) {
             case 'turquoise':
-              return theme.custom.gradients.greenBlue;
+              return theme.custom.gradients.greenBlueCurved;
             case 'violet':
               return theme.custom.gradients.violetCurved;
           }
diff --git a/src/components/BadgeTab.js b/src/components/BadgeTab.js
index 74d5ba38..0de0b5bc 100644
--- a/src/components/BadgeTab.js
+++ b/src/components/BadgeTab.js
@@ -7,11 +7,11 @@ import React from 'react';
 const useStyles = makeStyles((theme) => ({
   iconActive: {
     '& path': {
-      fill: theme.custom.colors.violet,
+      fill: theme.custom.colors.purple100,
     },
   },
   badgeContainer: {
-    backgroundColor: theme.custom.colors.fountainBlue,
+    backgroundColor: theme.custom.colors.blue100,
     right: '-9px',
   },
 }));
diff --git a/src/components/BalanceDisplay.js b/src/components/BalanceDisplay.js
index 221798ec..537387a3 100644
--- a/src/components/BalanceDisplay.js
+++ b/src/components/BalanceDisplay.js
@@ -30,10 +30,11 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(0.5),
     fontSize: '2.3rem',
   },
-  balanceUnderline: {
+  balanceHover: {
     '&:hover': {
       textDecoration: 'underline',
-      textDecorationColor: theme.custom.colors.violet,
+      textDecorationColor: theme.custom.colors.purple100,
+      textShadow: theme.custom.shadows.grey,
     },
   },
 }));
@@ -66,7 +67,7 @@ const BalanceDisplay = ({ underlineAtHover = true }) => {
           <CircularProgress />
         ) : (
           <Typography
-            className={underlineAtHover && classes.balanceUnderline}
+            className={underlineAtHover ? classes.balanceHover : ''}
             variant="balance1"
           >
             <Link to={TOKENS_PATH}>
diff --git a/src/components/Button.js b/src/components/Button.js
index 4297debe..00467e37 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -14,32 +14,32 @@ const useStyles = makeStyles((theme) => ({
     textTransform: 'none',
     borderRadius: 30,
     zIndex: theme.zIndex.layer2,
-    background: theme.custom.gradients.purple,
-    color: theme.palette.common.white,
+    background: theme.custom.gradients.pinkToPurple,
+    color: theme.custom.colors.white,
     height: '40px',
     '&:hover': {
-      background: theme.custom.gradients.purpleHover,
+      background: theme.custom.gradients.lightPinkToPurple,
     },
     '&.Mui-disabled': {
-      background: theme.custom.colors.lola,
+      background: theme.custom.colors.purple500,
       borderRadius: '30px',
-      color: theme.custom.colors.lily,
+      color: theme.custom.colors.purple400,
       'pointer-events': 'visible',
 
       '&:hover': {
-        background: theme.custom.colors.lola,
+        background: theme.custom.colors.purple500,
       },
     },
   },
   buttonOutline: {
     color: theme.palette.primary.main,
-    background: `linear-gradient(${theme.custom.colors.whiteAlmost}, ${theme.custom.colors.whiteAlmost}) padding-box,
+    background: `linear-gradient(${theme.custom.colors.white}, ${theme.custom.colors.white}) padding-box,
     ${theme.custom.gradients.pinkToPurple} border-box`,
     position: 'relative',
     border: '1px solid transparent',
     borderRadius: '30px',
     '&:hover': {
-      background: `linear-gradient(${theme.custom.colors.whiteAlmost}, ${theme.custom.colors.whiteAlmost}) padding-box,
+      background: `linear-gradient(${theme.custom.colors.white}, ${theme.custom.colors.white}) padding-box,
       ${theme.custom.gradients.lightPinkToPurple} border-box`,
       '& .MuiTouchRipple-root': {
         background: theme.custom.gradients.lightPinkToPurple,
@@ -50,12 +50,12 @@ const useStyles = makeStyles((theme) => ({
       },
     },
     '&.Mui-disabled': {
-      background: theme.custom.colors.whiteAlmost,
-      borderColor: theme.custom.colors.lola,
+      background: theme.custom.colors.white,
+      borderColor: theme.custom.colors.purple500,
       '& .MuiTouchRipple-root': {
         background: 'none',
-        color: theme.custom.colors.lola,
-        '-webkit-text-fill-color': theme.custom.colors.lola,
+        color: theme.custom.colors.purple500,
+        '-webkit-text-fill-color': theme.custom.colors.purple500,
         textFillColor: 'transparent',
       },
     },
@@ -87,7 +87,7 @@ const useStyles = makeStyles((theme) => ({
   },
   buttonText: {
     border: 0,
-    background: theme.custom.gradients.purple,
+    background: theme.custom.gradients.pinkToPurple,
     color: 'transparent',
     '-webkit-background-clip': 'text',
     '-webkit-text-fill-color': 'transparent',
@@ -102,10 +102,9 @@ const useStyles = makeStyles((theme) => ({
     },
     '&.Mui-disabled': {
       background: 'transparent',
-      color: theme.custom.colors.lily,
-      '-webkit-text-fill-color': theme.custom.colors.lily,
-      textFillColor: theme.custom.colors.lily,
-
+      color: theme.custom.colors.purple400,
+      '-webkit-text-fill-color': theme.custom.colors.purple400,
+      textFillColor: theme.custom.colors.purple400,
       '&:hover': {
         cursor: 'not-allowed',
         'pointer-events': 'visible',
diff --git a/src/components/ButtonAction.js b/src/components/ButtonAction.js
index dad35946..9de38db2 100644
--- a/src/components/ButtonAction.js
+++ b/src/components/ButtonAction.js
@@ -18,10 +18,10 @@ const useStyles = makeStyles((theme) => ({
 
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.cannonPink,
+        stopColor: theme.custom.colors.pinkHoverLight,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.cranberry,
+        stopColor: theme.custom.colors.pink200,
       },
     },
   },
@@ -41,17 +41,17 @@ const useStyles = makeStyles((theme) => ({
   },
   buttonDisabled: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.lola,
+        stopColor: theme.custom.colors.purple500,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.lola,
+        stopColor: theme.custom.colors.purple500,
       },
     },
   },
diff --git a/src/components/ButtonDouble.js b/src/components/ButtonDouble.js
index 56dbaa2f..4b1dd010 100644
--- a/src/components/ButtonDouble.js
+++ b/src/components/ButtonDouble.js
@@ -33,9 +33,9 @@ const useStyles = makeStyles((theme) => ({
   },
 
   buttonGradientOpposite: {
-    background: theme.custom.gradients.purpleOpposite,
+    background: theme.custom.gradients.purpleToPink,
     '&:hover': {
-      background: theme.custom.gradients.purpleOppositeHover,
+      background: theme.custom.gradients.purpleToLightPink,
     },
   },
 }));
diff --git a/src/components/ButtonIcon.js b/src/components/ButtonIcon.js
index eecc0728..422e42a0 100644
--- a/src/components/ButtonIcon.js
+++ b/src/components/ButtonIcon.js
@@ -11,14 +11,14 @@ const useStyles = makeStyles((theme) => ({
   button: {
     fontWeight: fontWeightRegular,
     fontSize: fontSizeSmaller,
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
     textTransform: 'none',
     '&:hover': {
       background: 'transparent',
-      color: theme.custom.colors.purple,
+      color: theme.custom.colors.pink100,
 
       '& path': {
-        fill: theme.custom.colors.purple,
+        fill: theme.custom.colors.pink100,
       },
     },
   },
diff --git a/src/components/ButtonSend.js b/src/components/ButtonSend.js
index 4fef1d8c..606ddf47 100644
--- a/src/components/ButtonSend.js
+++ b/src/components/ButtonSend.js
@@ -10,7 +10,7 @@ import { IconSend } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
   buttonActionSendIcon: {
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     left: -2,
     position: 'relative',
     top: 1,
diff --git a/src/components/ButtonTrust.js b/src/components/ButtonTrust.js
index cc05490c..b5bf2975 100644
--- a/src/components/ButtonTrust.js
+++ b/src/components/ButtonTrust.js
@@ -15,63 +15,63 @@ import {
 const useStyles = makeStyles((theme) => ({
   trustButton: {
     background: 'transparent',
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     padding: '0',
   },
   trustButtonNoTrust: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.purpleDark,
+      stopColor: theme.custom.gradients.pinkToPurple,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.purple,
+      stopColor: theme.custom.colors.pink100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.cannonPink,
+        stopColor: theme.custom.colors.pinkHoverLight,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.cranberry,
+        stopColor: theme.custom.colors.pink200,
       },
     },
   },
   trustButtonOneWay: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.violet,
+      stopColor: theme.custom.colors.purple100,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.violet,
+      stopColor: theme.custom.colors.purple100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.oldLavender,
+        stopColor: theme.custom.colors.purple200,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.oldLavender,
+        stopColor: theme.custom.colors.purple200,
       },
     },
   },
   trustButtonMutualTrust: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.fountainBlue,
+      stopColor: theme.custom.colors.blue100,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.fountainBlue,
+      stopColor: theme.custom.colors.blue100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.fountainBlueLighter,
+        stopColor: theme.custom.colors.blue200,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.fountainBlueLighter,
+        stopColor: theme.custom.colors.blue200,
       },
     },
   },
   trustButtonDisabled: {
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.lola,
+      stopColor: theme.custom.colors.purple500,
     },
   },
   trustButtonContainer: {
diff --git a/src/components/ButtonWobbly.js b/src/components/ButtonWobbly.js
index f3d555ba..14843e27 100644
--- a/src/components/ButtonWobbly.js
+++ b/src/components/ButtonWobbly.js
@@ -10,25 +10,25 @@ import { IconWobblyCircle, iconSelector } from '~/styles/icons';
 const useStyles = makeStyles((theme) => ({
   buttonWobbly: {
     background: 'transparent',
-    color: theme.palette.common.whiteAlmost,
+    color: theme.palette.common.white,
     padding: '0',
     '& stop:first-of-type': {
-      stopColor: theme.custom.colors.purpleDark,
+      stopColor: theme.custom.gradients.pinkToPurple,
     },
     '& stop:last-of-type': {
-      stopColor: theme.custom.colors.purple,
+      stopColor: theme.custom.colors.pink100,
     },
     '&:hover': {
       '& stop:first-of-type': {
-        stopColor: theme.custom.colors.cannonPink,
+        stopColor: theme.custom.colors.pinkHoverLight,
       },
       '& stop:last-of-type': {
-        stopColor: theme.custom.colors.cranberry,
+        stopColor: theme.custom.colors.pink200,
       },
     },
   },
   buttonWobblyDisabled: {
-    background: theme.custom.gradients.gray,
+    background: theme.custom.gradients.grey,
   },
   buttonWobblyContainer: {
     width: '55px',
@@ -42,7 +42,7 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative',
     left: 1,
     fontSize: '2.4rem',
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
   },
   buttonWobblyIconBackground: {
     width: '55px',
diff --git a/src/components/DateInput.js b/src/components/DateInput.js
index 413e0ecc..652518a3 100644
--- a/src/components/DateInput.js
+++ b/src/components/DateInput.js
@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme) => ({
     '& fieldset': {
       '&.MuiOutlinedInput-notchedOutline': {
         borderRadius: '25px',
-        borderColor: theme.custom.colors.violet,
+        borderColor: theme.custom.colors.purple100,
         '& legend span': {
           display: 'none',
         },
@@ -18,11 +18,11 @@ const useStyles = makeStyles((theme) => ({
 
     '& input.MuiInputBase-input': {
       padding: '11.5px 14px',
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
     },
 
     '& label.MuiFormLabel-root': {
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
       fontSize: fontSizeSmaller,
       transform: 'translate(28px, -6px)',
       background: theme.custom.colors.white,
@@ -32,14 +32,14 @@ const useStyles = makeStyles((theme) => ({
       borderRadius: '10px',
 
       '&:has(+ .MuiOutlinedInput-root:hover)': {
-        background: theme.custom.colors.cornflowerBlue,
+        background: theme.custom.purple600,
       },
 
       '&.Mui-error': {
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
 
         '&:has(+ .MuiOutlinedInput-root:hover)': {
-          background: theme.custom.colors.wepeep,
+          background: theme.custom.colors.pink600,
         },
 
         '&:hover': {
@@ -57,7 +57,7 @@ const useStyles = makeStyles((theme) => ({
 
       '&:hover': {
         '& input.MuiInputBase-input': {
-          background: theme.custom.colors.cornflowerBlue,
+          background: theme.custom.purple600,
         },
       },
     },
@@ -68,14 +68,14 @@ const useStyles = makeStyles((theme) => ({
     },
 
     '& .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused': {
-      border: `3px solid ${theme.custom.colors.lola}`,
+      border: `3px solid ${theme.custom.colors.purple500}`,
 
       '& fieldset.MuiOutlinedInput-notchedOutline': {
-        borderColor: theme.custom.colors.violet,
+        borderColor: theme.custom.colors.purple100,
       },
 
       '& label.MuiFormLabel-root': {
-        background: theme.custom.colors.lola,
+        background: theme.custom.colors.purple500,
       },
     },
 
@@ -83,41 +83,41 @@ const useStyles = makeStyles((theme) => ({
       right: '2px',
 
       '&:hover': {
-        background: theme.custom.colors.cornflowerBlue,
+        background: theme.custom.purple600,
       },
     },
     '& .Mui-error': {
       '& .MuiOutlinedInput-notchedOutline': {
-        borderColor: theme.custom.colors.purple,
+        borderColor: theme.custom.colors.pink100,
         borderWidth: '2px',
       },
 
       '& button.MuiButtonBase-root.MuiIconButton-root': {
         '&:hover': {
-          background: theme.custom.colors.wepeep,
+          background: theme.custom.colors.pink600,
         },
       },
 
       '&.MuiInputBase-root': {
         '&:hover': {
           '& input.MuiInputBase-input': {
-            background: theme.custom.colors.wepeep,
+            background: theme.custom.colors.pink600,
           },
 
           '& +.MuiFormHelperText-root.Mui-error': {
-            background: theme.custom.colors.wepeep,
+            background: theme.custom.colors.pink600,
           },
         },
 
         '&.MuiOutlinedInput-root.Mui-focused': {
-          border: `3px solid ${theme.custom.colors.wepeep}`,
+          border: `3px solid ${theme.custom.colors.pink600}`,
 
           '& fieldset.MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.custom.colors.purple,
+            borderColor: theme.custom.colors.pink100,
           },
 
           '& label.MuiFormLabel-root': {
-            background: theme.custom.colors.wepeep,
+            background: theme.custom.colors.pink600,
           },
         },
       },
@@ -130,7 +130,7 @@ const useStyles = makeStyles((theme) => ({
         background: theme.custom.colors.white,
         lineHeight: '10px',
         borderRadius: '10px',
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
       },
     },
 
diff --git a/src/components/DialogExportStatement.js b/src/components/DialogExportStatement.js
index 7584ba38..989ae8ec 100644
--- a/src/components/DialogExportStatement.js
+++ b/src/components/DialogExportStatement.js
@@ -61,7 +61,7 @@ const useStyles = makeStyles((theme) => ({
     margin: '16px 0 42px',
   },
   lineLightGrey: {
-    stroke: theme.custom.colors.lily,
+    stroke: theme.custom.colors.purple400,
     margin: '29px 0 42px',
   },
   helperDate: {
diff --git a/src/components/DialogInfo.js b/src/components/DialogInfo.js
index cc8e0f93..7a0a65db 100644
--- a/src/components/DialogInfo.js
+++ b/src/components/DialogInfo.js
@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
   dialogContainer: {
     '& .MuiDialog-paper': {
       borderRadius: '10px',
-      boxShadow: theme.custom.shadows.gray,
+      boxShadow: theme.custom.shadows.grey,
       textAlign: 'center',
     },
     '& .MuiBackdrop-root': {
diff --git a/src/components/DialogPurple.js b/src/components/DialogPurple.js
index eee64a37..f9d898d9 100644
--- a/src/components/DialogPurple.js
+++ b/src/components/DialogPurple.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
 
 const useTitleStyles = makeStyles((theme) => ({
   root: {
-    color: theme.custom.colors.grayLightest,
+    color: theme.custom.colors.white,
   },
 }));
 
diff --git a/src/components/DialogSendConfirm.js b/src/components/DialogSendConfirm.js
index f5286e83..2d342acb 100644
--- a/src/components/DialogSendConfirm.js
+++ b/src/components/DialogSendConfirm.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles((theme) => ({
     wordWrap: 'break-word',
   },
   sendIcon: {
-    color: theme.custom.colors.disco,
+    color: theme.custom.colors.pink50,
     fontSize: 'inherit',
   },
   iconContainer: {
diff --git a/src/components/Finder.js b/src/components/Finder.js
index 583db8d7..b8f35827 100644
--- a/src/components/Finder.js
+++ b/src/components/Finder.js
@@ -66,7 +66,7 @@ const useStyles = makeStyles((theme) => ({
   noSearchResultContainer: {
     marginTop: '80px',
     '& p': {
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
     },
   },
   noSearchResultIconContainer: {
diff --git a/src/components/HumbleAlert.js b/src/components/HumbleAlert.js
index 90c2ce89..343e6a36 100644
--- a/src/components/HumbleAlert.js
+++ b/src/components/HumbleAlert.js
@@ -9,21 +9,21 @@ const useStyles = makeStyles((theme) => {
   return {
     alert: {
       backgroundColor: ({ color }) => color,
-      boxShadow: theme.custom.gradients.grayAlert,
+      boxShadow: theme.custom.gradients.greyAlert,
       borderRadius: '8px',
       display: 'flex',
       alignItems: 'center',
       '& .MuiAlert-icon': {
         marginRight: '20px',
         '& svg': {
-          color: theme.custom.colors.whiteAlmost,
+          color: theme.custom.colors.white,
         },
       },
     },
     alertHtmlChildren: {
       '& a': {
         textDecoration: 'none',
-        color: theme.custom.colors.blueRibbon,
+        color: theme.custom.colors.white,
         '&:hover': {
           textDecoration: 'underline',
         },
diff --git a/src/components/ImageCapture.js b/src/components/ImageCapture.js
index 30255786..4b919ba5 100644
--- a/src/components/ImageCapture.js
+++ b/src/components/ImageCapture.js
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'none',
   },
   loadingMask: {
-    background: theme.custom.colors.cornflowerBlue,
+    background: theme.custom.colors.purple600,
     opacity: 0.5,
     position: 'relative',
   },
diff --git a/src/components/Input.js b/src/components/Input.js
index aefda679..288733d0 100644
--- a/src/components/Input.js
+++ b/src/components/Input.js
@@ -16,14 +16,14 @@ import { fontSizeSmaller } from '~/styles/fonts';
 const useStyles = makeStyles((theme) => {
   const textColor = (isOrganization) => {
     return isOrganization
-      ? theme.custom.colors.violet
-      : theme.custom.colors.fountainBlue;
+      ? theme.custom.colors.purple100
+      : theme.custom.colors.blue100;
   };
 
   const backgroundColor = (isOrganization) => {
     return isOrganization
-      ? theme.custom.colors.cornflowerBlue
-      : theme.custom.colors.blackSqueeze;
+      ? theme.custom.colors.purple600
+      : theme.custom.colors.blue600;
   };
 
   return {
@@ -46,7 +46,7 @@ const useStyles = makeStyles((theme) => {
       },
 
       '&.Mui-focused.Mui-error': {
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
       },
 
       '&:has(+ .MuiOutlinedInput-root:hover)': {
@@ -54,13 +54,13 @@ const useStyles = makeStyles((theme) => {
       },
 
       '&:has(+ .MuiOutlinedInput-root.Mui-error:hover)': {
-        background: theme.custom.colors.wepeep,
+        background: theme.custom.colors.pink500,
       },
     },
 
     inputLabelError: {
       '&.Mui-error': {
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
       },
     },
 
@@ -78,7 +78,7 @@ const useStyles = makeStyles((theme) => {
     outlinedInput: {
       padding: '11.5px 14px',
       borderRadius: '25px',
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
     },
 
     outlinedInputRoot: {
@@ -97,16 +97,16 @@ const useStyles = makeStyles((theme) => {
 
         '&.Mui-error': {
           '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: theme.custom.colors.purple,
+            borderColor: theme.custom.colors.pink100,
           },
 
           '& .MuiOutlinedInput-input': {
-            background: theme.custom.colors.wepeep,
+            background: theme.custom.colors.pink500,
           },
         },
 
         '& +.MuiFormHelperText-root.Mui-error': {
-          background: theme.custom.colors.wepeep,
+          background: theme.custom.colors.pink500,
         },
       },
 
@@ -116,7 +116,7 @@ const useStyles = makeStyles((theme) => {
       },
 
       '& +.MuiFormHelperText-root.Mui-error': {
-        color: theme.custom.colors.purple,
+        color: theme.custom.colors.pink100,
       },
 
       '& .MuiSvgIcon-root': {
@@ -129,7 +129,7 @@ const useStyles = makeStyles((theme) => {
 
       '&.Mui-error': {
         '& fieldset.MuiOutlinedInput-notchedOutline': {
-          borderColor: theme.custom.colors.purple,
+          borderColor: theme.custom.colors.pink100,
         },
       },
     },
@@ -137,18 +137,18 @@ const useStyles = makeStyles((theme) => {
     outlinedInputFocused: {
       border: (isOrganization) =>
         isOrganization
-          ? `3px solid ${theme.custom.colors.lola} `
-          : `3px solid ${theme.custom.colors.swansDown}`,
+          ? `3px solid ${theme.custom.colors.purple500} `
+          : `3px solid ${theme.custom.colors.blue500}`,
       borderColor: (isOrganization) =>
         isOrganization
-          ? theme.custom.colors.lola
-          : theme.custom.colors.swansDown,
+          ? theme.custom.colors.purple500
+          : theme.custom.colors.blue500,
 
       '& .MuiOutlinedInput-notchedOutline': {
         borderColor: (isOrganization) =>
           isOrganization
-            ? `${theme.custom.colors.violet} !important`
-            : `${theme.custom.colors.fountainBlue} !important`, // should work without important but doesn't...
+            ? `${theme.custom.colors.purple100} !important`
+            : `${theme.custom.colors.blue100} !important`, // should work without important but doesn't...
         borderWidth: '2px',
       },
     },
@@ -157,17 +157,17 @@ const useStyles = makeStyles((theme) => {
       borderColor: 'transparent',
 
       '&.Mui-focused': {
-        border: `3px solid ${theme.custom.colors.wepeep}`,
-        borderColor: theme.custom.colors.wepeep,
+        border: `3px solid ${theme.custom.colors.pink500}`,
+        borderColor: theme.custom.colors.pink500,
 
         '& .MuiOutlinedInput-notchedOutline': {
-          borderColor: `${theme.custom.colors.purple} !important`, // should work without important but doesn't...
+          borderColor: `${theme.custom.colors.pink100} !important`, // should work without important but doesn't...
           borderWidth: '2px',
         },
       },
 
       '& .MuiOutlinedInput-notchedOutline': {
-        borderColor: theme.custom.colors.purple,
+        borderColor: theme.custom.colors.pink100,
         borderWidth: '2px',
       },
     },
diff --git a/src/components/LocaleSelector.js b/src/components/LocaleSelector.js
index 27b8975e..88291917 100644
--- a/src/components/LocaleSelector.js
+++ b/src/components/LocaleSelector.js
@@ -10,19 +10,19 @@ import { fontSizeRegular } from '~/styles/fonts';
 
 const useStyles = makeStyles((theme) => ({
   select: {
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
   },
   selectInverted: {
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
   },
   selectIcon: {
     fill: theme.palette.primary.contrastText,
   },
   selectIconInverted: {
-    fill: theme.custom.colors.violet,
+    fill: theme.custom.colors.purple100,
   },
   selectInput: {
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     padding: theme.spacing(1),
     backgroundColor: 'transparent',
     borderRadius: theme.shape.borderRadius,
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectInputInverted: {
     border: 0,
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
   },
 }));
 
diff --git a/src/components/Mnemonic.js b/src/components/Mnemonic.js
index 80673a38..415194a0 100644
--- a/src/components/Mnemonic.js
+++ b/src/components/Mnemonic.js
@@ -11,10 +11,10 @@ const useStyles = makeStyles((theme) => ({
     padding: '0 0 0 10px',
   },
   seedItem: {
-    background: theme.custom.colors.grayLightest,
+    background: theme.custom.colors.white,
     borderRadius: 4,
     border: '1px solid rgba(0, 0, 0, 0.1)',
-    boxShadow: theme.custom.shadows.gray,
+    boxShadow: theme.custom.shadows.grey,
     display: 'inline-block',
     marginBottom: 6,
     marginLeft: 22,
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index d6aea925..fe988434 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
   },
   navigationFooter: {
     padding: theme.spacing(3),
-    background: theme.custom.gradients.purple,
+    background: theme.custom.gradients.pinkToPurple,
   },
   navigationLink: {
     width: '100%',
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
     paddingLeft: theme.spacing(3),
     justifyContent: 'flex-start',
     textTransform: 'none',
-    color: theme.custom.colors.mineShaft,
+    color: theme.custom.colors.grey50,
   },
   navigationProfileLink: {
     textDecoration: 'none',
diff --git a/src/components/NavigationFloating.js b/src/components/NavigationFloating.js
index 053f2de8..24046663 100644
--- a/src/components/NavigationFloating.js
+++ b/src/components/NavigationFloating.js
@@ -21,25 +21,25 @@ const useStyles = makeStyles((theme) => {
   const backgroundTheme = (props) => {
     switch (props?.color) {
       case 'turquoise':
-        return theme.custom.colors.fountainBlue;
-      case 'violet':
-        return theme.custom.colors.violet;
+        return theme.custom.colors.blue100;
+      case 'purple100':
+        return theme.custom.colors.purple100;
       case 'white':
-        return theme.custom.colors.whiteAlmost;
+        return theme.custom.colors.white;
       default:
-        return theme.custom.colors.fountainBlue;
+        return theme.custom.colors.blue100;
     }
   };
   const backgroundHoverTheme = (props) => {
     switch (props?.color) {
       case 'turquoise':
-        return theme.custom.colors.fountainBlueLighter;
+        return theme.custom.colors.blue200;
       case 'violet':
-        return theme.custom.colors.oldLavender;
+        return theme.custom.colors.purple200;
       case 'white':
-        return theme.custom.colors.whiteAlmost;
+        return theme.custom.colors.white;
       default:
-        return theme.custom.colors.fountainBlue;
+        return theme.custom.colors.blue100;
     }
   };
 
@@ -98,8 +98,8 @@ const useStyles = makeStyles((theme) => {
         '& .MuiFab-label': {
           color: (props) =>
             props?.color === 'white'
-              ? theme.custom.colors.fountainBlueLighter
-              : theme.custom.colors.whiteAlmost,
+              ? theme.custom.colors.blue200
+              : theme.custom.colors.white,
         },
         '& stop': {
           stopColor: backgroundHoverTheme,
@@ -108,8 +108,8 @@ const useStyles = makeStyles((theme) => {
       '& .MuiFab-label': {
         color: (props) =>
           props?.color === 'white'
-            ? theme.custom.colors.fountainBlue
-            : theme.custom.colors.whiteAlmost,
+            ? theme.custom.colors.blue100
+            : theme.custom.colors.white,
       },
     },
 
diff --git a/src/components/NewsFeed.js b/src/components/NewsFeed.js
index 80006f38..d344ddb9 100644
--- a/src/components/NewsFeed.js
+++ b/src/components/NewsFeed.js
@@ -22,16 +22,16 @@ import { IconCloseOutline } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
   newsItemContainer: {
-    boxShadow: theme.custom.shadows.grayAround,
+    boxShadow: theme.custom.shadows.greyAround,
     borderRadius: '5px',
-    background: theme.custom.colors.whiteAlmost,
+    background: theme.custom.colors.white,
     padding: '16px',
     gap: '18px',
     marginBottom: '12px',
     cursor: 'pointer',
 
     '&:hover': {
-      background: theme.custom.colors.blackSqueeze,
+      background: theme.custom.colors.blue600,
     },
   },
   newsItemHeader: {
@@ -42,15 +42,15 @@ const useStyles = makeStyles((theme) => ({
   newsItemContentContainer: {
     paddingTop: '16px',
   },
-  divider: { backgroundColor: theme.custom.colors.oldLavender },
+  divider: { backgroundColor: theme.custom.colors.purple200 },
   content: {
     paddingTop: '16px',
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
     '& p:last-of-type': {
       display: 'inline',
     },
     '& a': {
-      color: theme.custom.colors.purple,
+      color: theme.custom.colors.pink100,
       textDecoration: 'none',
     },
   },
@@ -68,19 +68,19 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   title: {
-    color: theme.custom.colors.violet,
+    color: theme.custom.colors.purple100,
     display: 'block',
     fontWeight: '500',
   },
   date: {
-    color: theme.custom.colors.oldLavender,
+    color: theme.custom.colors.purple200,
     fontSize: '12px',
   },
   cardContentCloseIcon: {
-    color: theme.custom.colors.oldLavender,
+    color: theme.custom.colors.purple200,
 
     '&:hover': {
-      color: theme.custom.colors.mountbattenPink,
+      color: theme.custom.colors.purple300,
       backgroundColor: 'transparent',
     },
   },
diff --git a/src/components/Notifications.js b/src/components/Notifications.js
index 55f3300c..45959213 100644
--- a/src/components/Notifications.js
+++ b/src/components/Notifications.js
@@ -55,14 +55,14 @@ const useStyles = makeStyles((theme) => ({
   isSpecial: {
     '& .MuiSvgIcon-root': {
       '& path': {
-        fill: theme.custom.colors.violet,
+        fill: theme.custom.colors.purple100,
       },
     },
     '&:hover': {
-      background: theme.custom.colors.whiteAlmost,
+      background: theme.custom.colors.white,
       '& .MuiSvgIcon-root': {
         '& path': {
-          fill: theme.custom.colors.oldLavender,
+          fill: theme.custom.colors.purple200,
         },
       },
     },
diff --git a/src/components/Popover.js b/src/components/Popover.js
index 143d4720..a996245f 100644
--- a/src/components/Popover.js
+++ b/src/components/Popover.js
@@ -7,7 +7,7 @@ import React from 'react';
 const useStyles = makeStyles((theme) => ({
   popOverContainer: {
     padding: '32px 32px 30px',
-    background: theme.custom.colors.whiteAlmost,
+    background: theme.custom.colors.white,
     borderRadius: '20px',
     boxShadow: theme.custom.shadows.navigationFloating,
   },
diff --git a/src/components/ProfileMini.js b/src/components/ProfileMini.js
index 8d4221f5..e5ca961c 100644
--- a/src/components/ProfileMini.js
+++ b/src/components/ProfileMini.js
@@ -32,10 +32,10 @@ const useStyles = makeStyles((theme) => ({
   cardContainer: {
     boxShadow: theme.custom.shadows.navigationFloating,
     '&:hover': {
-      background: theme.custom.colors.blackSqueeze,
+      background: theme.custom.colors.blue600,
 
       '& .MuiCardHeader-root': {
-        background: theme.custom.colors.blackSqueeze,
+        background: theme.custom.colors.blue600,
       },
     },
   },
@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: '50%',
   },
   cardActionIcon: {
-    color: theme.custom.colors.disco,
+    color: theme.custom.colors.pink50,
     fontSize: 16,
 
     '& path': {
@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({
   },
   mutualFriendsIcon: {
     fontSize: '10px',
-    color: theme.custom.colors.mountbattenPink,
+    color: theme.custom.colors.purple300,
     position: 'relative',
     top: '1px',
   },
diff --git a/src/components/StepperHorizontal.js b/src/components/StepperHorizontal.js
index 27b754ab..26d48edc 100644
--- a/src/components/StepperHorizontal.js
+++ b/src/components/StepperHorizontal.js
@@ -15,8 +15,8 @@ import {
 const useStyles = makeStyles((theme) => {
   const colorTheme = (isOrganization) =>
     isOrganization
-      ? theme.custom.colors.violet
-      : theme.custom.colors.fountainBlue;
+      ? theme.custom.colors.purple100
+      : theme.custom.colors.blue100;
   return {
     stepper: {
       padding: '24px',
@@ -61,12 +61,12 @@ const useStyles = makeStyles((theme) => {
         fontWeight: '500',
         fontSize: '1.3rem',
         borderRadius: '100%',
-        border: `2px solid ${theme.custom.colors.grayDark}`,
+        border: `2px solid ${theme.custom.colors.grey400}`,
         [theme.breakpoints.up('md')]: {
           fontSize: '1.8rem',
         },
         '& .MuiStepIcon-text': {
-          fill: theme.custom.colors.grayDark,
+          fill: theme.custom.colors.grey400,
         },
 
         '&.Mui-completed, &.Mui-active': {
@@ -82,7 +82,7 @@ const useStyles = makeStyles((theme) => {
       '& .MuiStepLabel-label.MuiStepLabel-alternativeLabel': {
         fontSize: fontSizeSmallest,
         fontWeight: fontWeightRegular,
-        color: theme.custom.colors.grayDark,
+        color: theme.custom.colors.grey400,
         marginTop: '8px',
         [theme.breakpoints.up('md')]: {
           fontSize: fontSizeSmaller,
diff --git a/src/components/TabNavigation.js b/src/components/TabNavigation.js
index 3aa0fa51..fb0ec9cb 100644
--- a/src/components/TabNavigation.js
+++ b/src/components/TabNavigation.js
@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
   tabs: {
     marginBottom: '43px',
     '& .MuiTabs-indicator': {
-      backgroundColor: theme.custom.colors.fountainBlue,
+      backgroundColor: theme.custom.colors.blue100,
       height: '1px',
     },
   },
diff --git a/src/components/TabNavigationAction.js b/src/components/TabNavigationAction.js
index e3b9f88c..141bd02a 100644
--- a/src/components/TabNavigationAction.js
+++ b/src/components/TabNavigationAction.js
@@ -13,29 +13,29 @@ const useStyles = makeStyles((theme) => ({
     position: 'relative',
     fontWeight: theme.typography.fontWeightRegular,
     fontSize: fontSizeSmaller,
-    color: theme.custom.colors.lily,
+    color: theme.custom.colors.purple400,
     borderBottom: '1px solid transparent',
     '& g, & path': {
-      fill: theme.custom.colors.lily,
+      fill: theme.custom.colors.purple400,
     },
     '&:hover': {
-      borderBottom: `1px solid ${theme.custom.colors.oldLavender}`,
-      color: theme.custom.colors.oldLavender,
+      borderBottom: `1px solid ${theme.custom.colors.purple200}`,
+      color: theme.custom.colors.purple200,
       '& g, & path': {
-        fill: theme.custom.colors.oldLavender,
+        fill: theme.custom.colors.purple200,
       },
     },
     '&.Mui-selected': {
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
       '& g, & path': {
-        fill: theme.custom.colors.violet,
+        fill: theme.custom.colors.purple100,
       },
       '&:hover': {
         '& .MuiTab-wrapper': {
-          color: theme.custom.colors.violet,
+          color: theme.custom.colors.purple100,
         },
         '& g, & path': {
-          fill: theme.custom.colors.violet,
+          fill: theme.custom.colors.purple100,
         },
       },
     },
@@ -57,8 +57,8 @@ const useStyles = makeStyles((theme) => ({
   },
   itemsCounterContainer: {
     position: 'absolute',
-    background: theme.custom.colors.fountainBlue,
-    color: theme.custom.colors.whiteAlmost,
+    background: theme.custom.colors.blue200,
+    color: theme.custom.colors.white,
     top: '3px',
     left: '48px',
     borderRadius: '50%',
diff --git a/src/components/TransferInfoCard.js b/src/components/TransferInfoCard.js
index b6d56194..3f6254f7 100644
--- a/src/components/TransferInfoCard.js
+++ b/src/components/TransferInfoCard.js
@@ -17,7 +17,7 @@ import { fontSizeSmaller } from '~/styles/fonts';
 
 const useStyles = makeStyles((theme) => ({
   cardContainer: {
-    boxShadow: theme.custom.shadows.gray,
+    boxShadow: theme.custom.shadows.grey,
   },
   cardHeader: {
     padding: theme.spacing(1),
diff --git a/src/components/TransferInput.js b/src/components/TransferInput.js
index 9ea34aab..eab585c8 100644
--- a/src/components/TransferInput.js
+++ b/src/components/TransferInput.js
@@ -7,11 +7,11 @@ const useStyles = makeStyles((theme) => ({
   input: {
     padding: theme.spacing(2),
     height: 66,
-    boxShadow: theme.custom.shadows.grayUp,
-    color: theme.custom.colors.violet,
+    boxShadow: theme.custom.shadows.greyUp,
+    color: theme.custom.colors.purple100,
 
     '& .MuiSvgIcon-root': {
-      fill: theme.custom.colors.violet,
+      fill: theme.custom.colors.purple100,
     },
   },
   inputLabel: {
@@ -20,11 +20,11 @@ const useStyles = makeStyles((theme) => ({
   },
   inputError: {
     '&.Mui-error': {
-      color: theme.custom.colors.disco,
+      color: theme.custom.colors.pink50,
     },
   },
   inputAmountError: {
-    color: theme.custom.colors.disco,
+    color: theme.custom.colors.pink50,
   },
 }));
 
diff --git a/src/components/TutorialOrganization.js b/src/components/TutorialOrganization.js
index fd7fa709..87d0d28b 100644
--- a/src/components/TutorialOrganization.js
+++ b/src/components/TutorialOrganization.js
@@ -14,7 +14,7 @@ import { IconBack, IconClose } from '~/styles/icons';
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
-    background: theme.custom.gradients.violetTutorial,
+    background: theme.custom.gradients.violetCurved,
   },
   background: {
     position: 'absolute',
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
   },
   btnContainer: {
     '& svg': {
-      color: theme.custom.colors.violet,
+      color: theme.custom.colors.purple100,
     },
   },
   slideContainer: {
diff --git a/src/components/TutorialSteps.js b/src/components/TutorialSteps.js
deleted file mode 100644
index fd0e8ffe..00000000
--- a/src/components/TutorialSteps.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-
-import styles from '~/styles/variables';
-
-const TutorialSteps = (props) => {
-  return (
-    <TutorialStepsStyle>
-      <TutorialStepsItems current={props.current} total={props.total} />
-    </TutorialStepsStyle>
-  );
-};
-
-const TutorialStepsItems = (props) => {
-  return new Array(props.total).fill(0).map((item, index) => {
-    return (
-      <TutorialStepsItemStyle isCurrent={props.current === index} key={index} />
-    );
-  });
-};
-
-TutorialSteps.propTypes = {
-  current: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired,
-};
-
-TutorialStepsItems.propTypes = {
-  current: PropTypes.number.isRequired,
-  total: PropTypes.number.isRequired,
-};
-
-const TutorialStepsStyle = styled.ul`
-  display: flex;
-`;
-
-const TutorialStepsItemStyle = styled.li`
-  width: 1rem;
-  height: 1rem;
-
-  margin: 0.5rem;
-
-  border-radius: 50%;
-
-  background-color: ${(props) => {
-    return props.isCurrent
-      ? styles.monochrome.black
-      : styles.monochrome.grayLight;
-  }};
-`;
-
-export default TutorialSteps;
diff --git a/src/components/UploadFromCamera.js b/src/components/UploadFromCamera.js
index c8eac661..5e17dc15 100644
--- a/src/components/UploadFromCamera.js
+++ b/src/components/UploadFromCamera.js
@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme) => ({
     margin: '0 auto',
   },
   loadingMask: {
-    background: theme.custom.colors.cornflowerBlue,
+    background: theme.custom.colors.purple600,
     opacity: 0.5,
     position: 'relative',
   },
diff --git a/src/components/ValidationStatus.js b/src/components/ValidationStatus.js
index 088e9c39..309abc74 100644
--- a/src/components/ValidationStatus.js
+++ b/src/components/ValidationStatus.js
@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
   stepAvatarChecked: {
     background: theme.custom.gradients.turquoise,
     border: 0,
-    color: theme.palette.common.white,
+    color: theme.custom.colors.white,
   },
 }));
 
diff --git a/src/styles/theme.js b/src/styles/theme.js
index 299a743c..24f7551b 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -22,22 +22,50 @@ import {
   notoSansMedium,
 } from '~/styles/fonts';
 
-const monochrome = {
-  black: '#000',
-  gray: '#ccc',
-  grayDark: '#999',
-  grayDarker: '#666',
-  grayDarkest: '#333',
-  grayLight: '#e6e6e6',
-  grayLighter: '#f2f2f2',
-  grayLightest: '#fafafa',
-  grayLightHover: '#d9d9d9',
-  whiteAlmost: '#fffcfe',
-  white: '#fff',
+const foundation = {
+  //blue50: '#3A8E92',
+  blue100: '#48B2B7',
+  blue200: '#6CC1C5',
+  //blue300: '#8ED7DA',
+  //blue400: '#B6E0E2',
+  blue500: '#DAF0F1',
+  blue600: '#EDF7F8',
+  grey50: '#2F2B2E', // blackish,
+  grey100: '#585558',
+  //grey200: '#828082',
+  grey400: '#ACAAAC',
+  grey600: '#D9D9D9',
+  pink50: '#A31852',
+  pink100: '#CC1E66', //grad
+  pink200: '#D64B85',
+  pink300: '#E078A3',
+  //pink400: '#EBA5C2',
+  pink500: '#F5D2E1',
+  pink600: '#FAE9F0',
+  purple50: '#482645',
+  purple100: '#5A2F56', // grad
+  purple200: '#7B5978',
+  purple300: '#9C8299',
+  purple400: '#BDACBB',
+  purple500: '#DED5DD',
+  purple600: '#EFEAEF',
+  white: '#FFFCFE',
+  errorYellow: '#FFC834',
+  successGreen: '#05BF93',
 };
 
+const gradientBase = {
+  pinkDark: '#660F33',
+  pinkHoverLight: '#853F5C',
+  purpleLightGrad: '#A75183',
+  springGreen: '#06FC9D',
+  green: '#45e6af',
+  turquoise: '#47cccb',
+};
+
+// should be cleaned up and use the grey palette
 const rgba = {
-  doveGray: 'rgb(107, 101, 101,0.5)',
+  doveGray: 'rgba(107, 101, 101, 0.5)',
   dialogGray: 'rgba(0, 0, 0, 0.25)',
   greyHover: 'rgba(222, 213, 221, 0.8)',
   lightGrey: 'rgba(0, 0, 0, 0.04)',
@@ -45,73 +73,37 @@ const rgba = {
 };
 
 export const colors = {
-  ...monochrome,
+  ...foundation,
+  ...gradientBase,
   ...rgba,
-  red: '#cc0000',
-  green: '#45e6af',
-  blue: '#3ce6e1',
-  orange: '#faad26',
-  orangeDark: '#f14d48',
-  purpleLight: '#f5dbda',
-  purple: '#cc1e66',
-  purpleDark: '#660f33',
-  disco: '#A31852',
-  turquoise: '#47cccb',
-  turquoiseDark: '#369998',
-  jaggedIce: '#C8E8EA',
-  fountainBlue: '#48B2B7',
-  fountainBlueLighter: '#6CC1C5',
-  springGreen: '#06FC9D',
-  pizazz: '#FF8E00',
-  ceriseRed: '#D12D5F',
-  pink: '#D22E60',
-  blueRibbon: '#2B44FF',
-  violet: '#5A2F56',
-  tapestry: '#A75183',
-  deepBlush: '#E078A3',
-  greyHover: 'rgba(222, 213, 221, 0.8)',
-  swansDown: '#DAF0F1',
-  blackSqueeze: '#EDF7F8',
-  wepeep: '#FAE9F0',
-  lola: '#DED5DD',
-  cornflowerBlue: '#efeaef80',
-  lily: '#BDACBB',
-  mineShaft: '#212121',
-  oldLavender: '#7B5978',
-  cannonPink: '#853F5C',
-  cranberry: '#D64B85',
-  lividBrown: '#482645',
-  mountbattenPink: '#9C8299',
 };
 
 const gradients = {
-  blueGreen: `linear-gradient(${colors.fountainBlue}, ${colors.springGreen}) padding-box, linear-gradient(to bottom, ${colors.fountainBlue}, ${colors.springGreen}) border-box`,
-  gray: `linear-gradient(280deg, ${colors.grayDark} 0%, ${colors.gray} 100%)`,
-  grayDark:
-    'linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(284.04deg, rgba(0, 0, 0, 0.49) 0%, rgba(0, 0, 0, 0.12) 100%);',
-  grayAlert: '1px 1px 4px rgba(204, 30, 102, 0.25)',
-  purple: `linear-gradient(280deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
-  purpleOpposite: `linear-gradient(104.04deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
-  purpleHover: `linear-gradient(284.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
-  purpleOppositeHover: `linear-gradient(104.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
-  pinkToPurple: `linear-gradient(284.04deg, ${colors.purpleDark} 0%, ${colors.purple} 100%)`,
-  lightPinkToPurple: `linear-gradient(284.04deg, ${colors.cannonPink} 0%, ${colors.cranberry} 100%)`,
-  greenBlue: `linear-gradient(180deg, ${colors.fountainBlue} 0%, ${colors.springGreen} 100%)`,
-  greenBlueHeader: `linear-gradient(207.4deg, ${colors.fountainBlue} 36.45%, ${colors.springGreen} 155.65%)`,
-  pinkShade: `linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, ${colors.pink} 145%)`,
-  violetCurved: `linear-gradient(180deg, ${colors.tapestry} 0%, ${colors.violet} 33.2%)`,
-  violetHeader: `linear-gradient(207.4deg, ${colors.tapestry} 36.45%, ${colors.violet} 155.65%)`,
-  violetTutorial: `linear-gradient(180deg, ${colors.tapestry} 0%, ${colors.violet} 100%)`,
+  // Grey
+  grey: `linear-gradient(280deg, ${colors.grey400} 0%, ${colors.grey600} 100%)`,
+  greyAlert: '1px 1px 4px rgba(204, 30, 102, 0.25)',
+  // Button gradients
+  pinkToPurple: `linear-gradient(284.04deg, ${colors.pinkDark} 0%, ${colors.pink100} 100%)`,
+  purpleToPink: `linear-gradient(104.04deg, ${colors.pinkDark} 0%, ${colors.pink100} 100%)`,
+  purpleToLightPink: `linear-gradient(104.04deg, ${colors.pinkHoverLight} 0%, ${colors.pink200} 100%)`,
+  lightPinkToPurple: `linear-gradient(284.04deg, ${colors.pinkHoverLight} 0%, ${colors.pink200} 100%)`,
+  // Headers
+  greenBlueCurved: `linear-gradient(180deg, ${colors.blue100} 0%, ${colors.springGreen} 50%)`,
+  greenBlueHeader: `linear-gradient(180deg, ${colors.blue100} 20%, ${colors.springGreen} 150%)`,
+  violetCurved: `linear-gradient(180deg, ${colors.purple100} 0%, ${colors.purpleLightGrad} 33.2%)`,
+  violetHeader: `linear-gradient(180deg, ${colors.purple100} 20%, ${colors.purpleLightGrad} 100%)`,
+  // Other
+  pinkShade: `linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, ${colors.pink100} 145%)`,
   turquoise: `linear-gradient(0deg, ${colors.green} 0%, ${colors.turquoise} 100%)`,
 };
 
 const shadows = {
-  gray: '0px 4px 4px rgba(0, 0, 0, 0.25)',
-  grayUp: 'inset 0px 4px 4px rgba(0, 0, 0, 0.25)',
+  grey: '0px 4px 4px rgba(0, 0, 0, 0.25)',
+  greyUp: 'inset 0px 4px 4px rgba(0, 0, 0, 0.25)',
   navigationFloating: '0px 0px 4px rgba(45, 24, 43, 0.25)',
   lightGray: '0px 0px 4px rgba(204, 30, 102, 0.1)', //special, warning, error, notifications
-  grayBottomRight: ' 1px 1px 4px rgba(204, 30, 102, 0.25)', //success notification
-  grayAround: '0px 0px 4px rgba(45, 24, 43, 0.25)',
+  greyBottomRight: ' 1px 1px 4px rgba(204, 30, 102, 0.25)', //success notification
+  greyAround: '0px 0px 4px rgba(45, 24, 43, 0.25)',
 };
 
 const fontFamily = `"${fontFamilyNotoSans}"`;
@@ -129,9 +121,9 @@ const body4Styles = {
   fontWeight: fontWeightRegular,
   fontSize: fontSizeSmall,
   lineHeight: '19px',
-  color: colors.violet,
+  color: colors.purple100,
   '&.body4_white': {
-    color: colors.whiteAlmost,
+    color: colors.white,
   },
   '&.body4_gradient_purple': {
     background: gradients.lightPinkToPurple,
@@ -144,7 +136,7 @@ const body5Styles = {
   fontWeight: fontWeightMediumBold,
   fontSize: fontSizeSmall,
   lineHeight: '19px',
-  color: colors.violet,
+  color: colors.purple100,
 };
 
 export default createTheme({
@@ -160,21 +152,21 @@ export default createTheme({
   },
   palette: {
     icons: {
-      dark: colors.violet,
-      light: colors.whiteAlmost,
-      lightHover: colors.grayLightHover,
+      dark: colors.purple100,
+      light: colors.white,
+      lightHover: colors.grey600,
     },
     primary: {
-      main: colors.purple,
-      dark: colors.purpleDark,
-      contrastText: colors.whiteAlmost,
+      main: colors.pink100,
+      dark: colors.pinkDark,
+      contrastText: colors.white,
     },
     secondary: {
       main: colors.turquoise,
-      dark: colors.turquoiseDark,
+      // dark: colors.blue50,
     },
     background: {
-      default: colors.whiteAlmost,
+      default: colors.white,
     },
   },
   typography: {
@@ -184,11 +176,11 @@ export default createTheme({
       lineHeight: '25px',
       fontSize: fontSizeLargest,
       '&.h1_blue': {
-        color: colors.fountainBlue,
+        color: colors.blue200,
         fontWeight: fontWeightRegular,
       },
       '&.h1_violet': {
-        color: colors.violet,
+        color: colors.purple100,
         fontWeight: fontWeightRegular,
       },
       '&.MuiTypography-gutterBottom': {
@@ -199,37 +191,37 @@ export default createTheme({
       fontWeight: fontWeightMedium,
       fontSize: fontSizeLarger,
       lineHeight: '160%',
-      color: colors.violet,
+      color: colors.purple100,
     },
     h3: {
       fontWeight: fontWeightRegular,
       fontSize: fontSizeLarger,
       lineHeight: '140%',
-      color: colors.violet,
+      color: colors.purple100,
     },
     h4: {
       fontWeight: fontWeightMedium,
       fontSize: fontSizeLarge,
       lineHeight: '22px',
-      color: colors.violet,
+      color: colors.purple100,
       '&.h4_link_white': {
         lineHeight: '25px',
-        color: colors.whiteAlmost,
+        color: colors.white,
       },
     },
     h5: {
       fontWeight: fontWeightMedium,
       fontSize: fontSizeRegular,
       lineHeight: '22px',
-      color: colors.violet,
+      color: colors.purple100,
     },
     body1: {
       fontSize: fontSizeRegular,
       fontWeight: fontWeightRegular,
       lineHeight: '140%',
-      color: colors.violet,
+      color: colors.purple100,
       '&.body1_white': {
-        color: colors.whiteAlmost,
+        color: colors.white,
         fontWeight: fontWeightMedium,
       },
     },
@@ -237,21 +229,21 @@ export default createTheme({
       fontWeight: fontWeightBold,
       fontSize: fontSizeRegular,
       lineHeight: '120%',
-      color: colors.violet,
+      color: colors.purple100,
     },
     body3: {
       fontWeight: fontWeightMediumBold,
       fontSize: fontSizeRegular,
       lineHeight: '22px',
-      color: colors.whiteAlmost,
+      color: colors.white,
       '&.body3_link': {
         textDecorationLine: 'underline',
         '&:hover': {
-          color: colors.mountbattenPink,
+          color: colors.purple300,
         },
       },
       '&.body3_link_violet': {
-        color: colors.violet,
+        color: colors.purple100,
       },
       '&.body3_link_gradient': {
         lineHeight: '120%',
@@ -260,7 +252,7 @@ export default createTheme({
         textFillColor: 'transparent',
         textDecorationLine: 'none',
         '&:hover': {
-          background: gradients.purpleOppositeHover,
+          background: gradients.purpleToLightPink,
           backgroundClip: 'text',
           textFillColor: 'transparent',
         },
@@ -276,7 +268,7 @@ export default createTheme({
         backgroundClip: 'text',
         textFillColor: 'transparent',
         '&:hover': {
-          background: gradients.purpleOppositeHover,
+          background: gradients.purpleToLightPink,
           backgroundClip: 'text',
           textFillColor: 'transparent',
         },
@@ -286,33 +278,33 @@ export default createTheme({
       fontWeight: fontWeightRegular,
       fontSize: fontSizeSmaller,
       lineHeight: '16px',
-      color: colors.violet,
+      color: colors.purple100,
       '&.body6_monochrome': {
-        color: colors.violet,
+        color: colors.purple100,
         opacity: 0.6,
       },
       '&.body6_pink': {
-        color: colors.disco,
+        color: colors.pink50,
       },
       '&.body6_white': {
-        color: colors.whiteAlmost,
+        color: colors.white,
         fontWeight: fontWeightMedium,
       },
       '&.body6_grey': {
-        color: colors.grayDarker,
+        color: colors.grey100,
       },
     },
     body7: {
       fontWeight: fontWeightRegular,
       fontSize: fontSizeSmaller,
       lineHeight: '140%',
-      color: colors.violet,
+      color: colors.purple100,
     },
     body8: {
       fontWeight: fontWeightRegular,
       fontSize: fontSizeSmallest,
       lineHeight: '14px',
-      color: colors.oldLavender,
+      color: colors.purple200,
     },
     balance1: {
       fontWeight: fontWeightRegular,
@@ -320,9 +312,9 @@ export default createTheme({
       lineHeight: '65px',
       background: gradients.violetCurved,
       backgroundClip: 'text',
-      textFillColor: 'transparent',
+      textFillColor: colors.purple100,
       '& svg': {
-        fill: colors.violet,
+        fill: colors.purple100,
       },
       '& a': {
         textDecoration: 'none',
@@ -339,7 +331,7 @@ export default createTheme({
       '& a': {
         ...body5Styles,
         textDecoration: 'none',
-        color: colors.purple,
+        color: colors.pink100,
       },
     },
     components: {
diff --git a/src/views/Error.js b/src/views/Error.js
index e256e49a..74802632 100644
--- a/src/views/Error.js
+++ b/src/views/Error.js
@@ -39,9 +39,9 @@ const CriticalError = () => {
         {app.errorMessage && (
           <Box my={2} style={{ wordBreak: 'break-word' }}>
             <HumbleAlert
-              color={colors.fountainBlue}
+              color={colors.blue100}
               icon="IconTriangleWarning"
-              iconColor={colors.whiteAlmost}
+              iconColor={colors.white}
             >
               <Typography
                 classes={{ root: 'body1_white' }}
diff --git a/src/views/Onboarding.js b/src/views/Onboarding.js
index 818f79ef..7d689b0d 100644
--- a/src/views/Onboarding.js
+++ b/src/views/Onboarding.js
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
       height: '4px',
       borderRadius: '50%',
       left: 0,
-      background: theme.custom.colors.black,
+      background: theme.custom.colors.grey50,
     },
     '&::marker': {
       display: 'none',
@@ -63,7 +63,7 @@ const useStyles = makeStyles((theme) => ({
   },
   CheckboxesContainer: {
     '& a': {
-      color: theme.custom.colors.blueRibbon,
+      color: theme.custom.colors.purple100,
     },
   },
   dialogContentContainer: {
diff --git a/src/views/OnboardingOrganization.js b/src/views/OnboardingOrganization.js
index cc609121..73e85cb1 100644
--- a/src/views/OnboardingOrganization.js
+++ b/src/views/OnboardingOrganization.js
@@ -45,7 +45,7 @@ const useStyles = makeStyles((theme) => ({
   organizationStepPrefundContainer: moveUpFront(theme),
   CheckboxesContainer: {
     '& a': {
-      color: theme.custom.colors.blueRibbon,
+      color: theme.custom.colors.purple100,
     },
   },
 }));
diff --git a/src/views/OrganizationMembers.js b/src/views/OrganizationMembers.js
index 3a2f13bd..06b884d5 100644
--- a/src/views/OrganizationMembers.js
+++ b/src/views/OrganizationMembers.js
@@ -63,14 +63,14 @@ const useStyles = makeStyles((theme) => ({
     position: 'fixed',
     bottom: theme.spacing(2.25),
     right: theme.spacing(2.25),
-    background: theme.custom.gradients.purple,
+    background: theme.custom.gradients.pinkToPurple,
   },
   buttonActionTrustIcon: {
-    color: theme.custom.colors.whiteAlmost,
+    color: theme.custom.colors.white,
     position: 'relative',
   },
   paragraph: {
-    color: theme.custom.colors.grayLightest,
+    color: theme.custom.colors.white,
   },
 }));
 
diff --git a/src/views/Profile.js b/src/views/Profile.js
index e51349a5..f82b0503 100644
--- a/src/views/Profile.js
+++ b/src/views/Profile.js
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({
   },
   iconActive: {
     '& path': {
-      fill: theme.custom.colors.violet,
+      fill: theme.custom.colors.purple100,
     },
   },
 }));
diff --git a/src/views/Validation.js b/src/views/Validation.js
index 76b56100..d51055c7 100644
--- a/src/views/Validation.js
+++ b/src/views/Validation.js
@@ -149,9 +149,9 @@ const Validation = () => {
       <Footer>
         <AppNote messageVersion="validation" />
         <HumbleAlert
-          color={colors.fountainBlue}
+          color={colors.blue100}
           icon="IconBrowser"
-          iconColor={colors.whiteAlmost}
+          iconColor={colors.white}
         >
           <Typography classes={{ root: 'body4_white' }} variant="body4">
             {translate('Validation.bodyDoNotReset')}
diff --git a/src/views/ValidationLock.js b/src/views/ValidationLock.js
index 8c275c70..73df3425 100644
--- a/src/views/ValidationLock.js
+++ b/src/views/ValidationLock.js
@@ -34,9 +34,9 @@ const ValidationLock = () => {
         <Box className={classes.boxInfoContainer}>
           <AppNote messageVersion="validation" />
           <HumbleAlert
-            color={colors.fountainBlue}
+            color={colors.blue100}
             icon="IconBrowser"
-            iconColor={colors.whiteAlmost}
+            iconColor={colors.white}
             parseHtml
           >
             {translate('ValidationLock.bodyThisMayTakeMinutes')}
diff --git a/src/views/Welcome.js b/src/views/Welcome.js
index 84f229a1..479ee364 100644
--- a/src/views/Welcome.js
+++ b/src/views/Welcome.js
@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: '16px',
     marginRight: '16px',
     height: '40px',
-    backgroundColor: theme.custom.colors.black,
+    backgroundColor: theme.custom.colors.grey50,
   },
   linkContainer: {
     display: 'flex',