diff --git a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
index e55dd313b7..abb1818f39 100644
--- a/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/FileComponent/FileComponent.tsx
@@ -31,14 +31,14 @@ const FileComponentStyled = styled('div')(({ theme }) => ({
   padding: '16px',
   backgroundColor: theme.palette.colors.white,
   borderRadius: '8px',
-  border: `1px solid ${theme.palette.colors.veryLightGray}`,
+  border: `1px solid ${theme.palette.colors.border01}`,
 
   [`& .${classes.icon}`]: {
     minWidth: '40px',
     width: '40px',
     height: '40px',
     borderRadius: '8px',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
index 15f9f60c44..bbf25e41f2 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadedImagePlaceholder/UploadedImagePlaceholder.tsx
@@ -18,7 +18,7 @@ const classes = {
   icon: `${PREFIX}icon`,
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')(({ theme }) => ({
   maxWidth: '400px',
   height: '100%',
 
@@ -29,7 +29,7 @@ const Root = styled('div')(() => ({
     alignItems: 'center',
     minWidth: '50px',
     minHeight: '50px',
-    backgroundColor: '#e0e0e0',
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.placeholderIcon}`]: {
@@ -41,7 +41,7 @@ const Root = styled('div')(() => ({
     width: '40px',
     height: '40px',
     borderRadius: '8px',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
index efc5d8de0b..54ef0f18da 100644
--- a/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
+++ b/packages/desktop/src/renderer/components/Channel/File/UploadingPreview.tsx
@@ -22,7 +22,7 @@ const classes = {
   tooltip: `${PREFIX}tooltip`,
 }
 
-const StyledFilePreviewComponent = styled('div')(() => ({
+const StyledFilePreviewComponent = styled('div')(({ theme }) => ({
   display: 'inline-block',
   float: 'left',
   cursor: 'pointer',
@@ -49,7 +49,7 @@ const StyledFilePreviewComponent = styled('div')(() => ({
     width: '64px',
     height: '64px',
     borderRadius: '15%',
-    backgroundColor: '#F0F0F0',
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
index 5078d29005..05aa046e87 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/ContextMenu.component.tsx
@@ -10,6 +10,8 @@ import Icon from '../ui/Icon/Icon'
 import arrowLeft from '../../static/images/arrowLeft.svg'
 import arrowRightShort from '../../static/images/arrowRightShort.svg'
 
+import theme from '../../theme'
+
 export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handleBack, title, children }) => {
   const ref = useRef<HTMLDivElement>(null)
 
@@ -50,8 +52,8 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'flex-start',
-          backgroundColor: '#ffffff',
-          boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.25)',
+          backgroundColor: theme.palette.background.default,
+          boxShadow: theme.shadows[1],
           maxWidth: '375px',
           pointerEvents: 'auto',
         }}
@@ -65,7 +67,7 @@ export const ContextMenu: FC<ContextMenuProps> = ({ visible, handleClose, handle
             textAlign: 'center',
             height: 60,
             width: '100%',
-            borderBottom: '1px solid #F0F0F0',
+            borderBottom: `1px solid ${theme.palette.colors.border01}`,
           }}
         >
           <Grid
@@ -101,7 +103,7 @@ export const ContextMenuHint: FC<ContextMenuHintProps> = ({ hint }) => {
         width: '100%',
         padding: 16,
         borderTopWidth: 1,
-        borderColor: '#F0F0F0',
+        borderColor: theme.palette.colors.border01,
       }}
     >
       <Typography fontSize={14} fontWeight={'normal'}>
@@ -136,7 +138,7 @@ export const ContextMenuItem: FC<ContextMenuItemProps> = ({ title, action }) =>
         padding: '11px 16px',
         width: '100%',
         cursor: 'pointer',
-        borderBottom: '1px solid #F0F0F0',
+        borderBottom: `1px solid ${theme.palette.colors.border01}`,
       }}
       onClick={action}
       data-testid={`contextMenuItem${title}`}
diff --git a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
index 2e02ff2dbd..31ab730701 100644
--- a/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
+++ b/packages/desktop/src/renderer/components/ContextMenu/menus/UserProfileContextMenu.container.tsx
@@ -26,7 +26,7 @@ const classes = {
   editPhotoButton: `${PREFIX}editPhotoButton`,
 }
 
-const StyledContextMenuContent = styled(Grid)(() => ({
+const StyledContextMenuContent = styled(Grid)(({ theme }) => ({
   zIndex: 9002,
   flex: 1,
 
@@ -67,10 +67,10 @@ const StyledContextMenuContent = styled(Grid)(() => ({
 
   [`& .${classes.editUsernameField}`]: {
     color: '#33333380',
-    background: '#F0F0F0',
+    background: theme.palette.background.paper,
     margin: '0px 16px',
     padding: '16px',
-    border: '1px solid #B3B3B3',
+    border: `1px solid ${theme.palette.colors.border02}`,
     borderRadius: '8px',
     fontSize: '14px',
     fontWeight: '400',
@@ -81,7 +81,7 @@ const StyledContextMenuContent = styled(Grid)(() => ({
     background: 'inherit',
     padding: '6px 12px',
     borderRadius: '16px',
-    border: '1px solid #B3B3B3',
+    border: `1px solid ${theme.palette.colors.border02}`,
     fontSize: '14px',
     fontWeight: '400',
     textTransform: 'none',
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
index bdcb919c9b..44aa1f233f 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/JoiningPanelComponent.tsx
@@ -62,7 +62,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
     color: theme.palette.colors.black30,
   },
   [`& .${classes.progressBar}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     width: '300px',
     height: '4px',
     position: 'relative',
diff --git a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
index b86951ced2..e1cee21c83 100644
--- a/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
+++ b/packages/desktop/src/renderer/components/LoadingPanel/StartingPanelComponent.tsx
@@ -45,7 +45,7 @@ const StyledGrid = styled(Grid)(({ theme, width }) => ({
     color: theme.palette.colors.black30,
   },
   [`& .${classes.progressBar}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     width: '300px',
     height: '4px',
     position: 'relative',
diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
index 66999b1c9b..c9f1b38fc8 100644
--- a/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
+++ b/packages/desktop/src/renderer/components/SearchModal/SearchModelComponent.tsx
@@ -40,8 +40,8 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
     height: '100%',
   },
   [`& .${classes.modalContainer}`]: {
-    backgroundColor: '#FFFFFF',
-    boxShadow: '0px 2px 25px rgba(0, 0, 0, 0.2)',
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[4],
     borderRadius: '8px',
     width: '60%',
     overflow: 'hidden',
@@ -68,7 +68,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.line}`]: {
     width: '100%',
     height: '1px',
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
   },
   [`& .${classes.channel}`]: {},
   [`& .${classes.channelWrapper}`]: {
diff --git a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
index fbe4b1b6ed..04e09ff3be 100644
--- a/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
+++ b/packages/desktop/src/renderer/components/Settings/SettingsComponent.tsx
@@ -31,8 +31,8 @@ const StyledTabsWrapper = styled(Grid)(() => ({
 }))
 
 const StyledAppBar = styled(AppBar, { label: 'xxxxx' })(({ theme }) => ({
-  backgroundColor: '#fff',
-  boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.0)',
+  backgroundColor: theme.palette.background.default,
+  boxShadow: theme.shadows[3],
 
   [`& .${classes.leaveComunity}`]: {
     opacity: '1',
diff --git a/packages/desktop/src/renderer/components/Titlebar.tsx b/packages/desktop/src/renderer/components/Titlebar.tsx
index 66e4b680c6..da6b6caaf8 100644
--- a/packages/desktop/src/renderer/components/Titlebar.tsx
+++ b/packages/desktop/src/renderer/components/Titlebar.tsx
@@ -1,10 +1,11 @@
 import { Titlebar, Color } from 'custom-electron-titlebar'
+import theme from '../theme'
 
 export const addTitlebar = () => {
   setTimeout(() => {
     // eslint-disable-next-line
     const titlebar = new Titlebar({
-      backgroundColor: Color.fromHex('#521c74'),
+      backgroundColor: Color.fromHex(theme.palette.primary.main),
       overflow: 'hidden',
     })
   }, 0)
diff --git a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
index a86644a198..14f7a7552d 100644
--- a/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
+++ b/packages/desktop/src/renderer/components/ui/ErrorModal/ErrorModalComponent.tsx
@@ -54,7 +54,7 @@ const StyledModalContent = styled(Grid)(({ theme }) => ({
   [`& .${classes.textfield}`]: {},
 
   [`& .${classes.cssDisabled}`]: {
-    backgroundColor: theme.palette.colors.inputGray,
+    backgroundColor: theme.palette.background.paper,
     color: theme.palette.colors.red,
   },
 
diff --git a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
index 6a0b4e924c..a1480dc917 100644
--- a/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
+++ b/packages/desktop/src/renderer/components/ui/Modal/Modal.tsx
@@ -72,7 +72,7 @@ const StyledMaterialModal = styled(StyledMaterialModalWithProps)(({ theme, zInde
   },
 
   [`& .${classes.headerBorder}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.contentGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border03}`,
   },
 
   [`& .${classes.actions}`]: {
diff --git a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
index 2fec9632fb..ddc6f5c1d6 100644
--- a/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
+++ b/packages/desktop/src/renderer/components/ui/OpenlinkModal/OpenlinkModal.tsx
@@ -16,6 +16,8 @@ import Icon from '../Icon/Icon'
 import exclamationMark from '../../../static/images/exclamationMark.svg'
 import Modal from '../Modal/Modal'
 
+import theme from '../../../theme'
+
 const PREFIX = 'OpenlinkModal'
 
 const classes = {
@@ -201,7 +203,7 @@ export const OpenlinkModal: React.FC<OpenLinkModalProps> = ({
                   <Grid item xs>
                     <a
                       style={{
-                        color: '#67BFD3',
+                        color: theme.palette.colors.lushSky,
                         textDecoration: 'none',
                         wordBreak: 'break-all',
                       }}
diff --git a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
index d3c128e089..d451e4ddf9 100644
--- a/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
+++ b/packages/desktop/src/renderer/components/ui/QuitApp/QuitAppDialog.tsx
@@ -28,11 +28,11 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
   },
 
   [`& .${classes.dialogContent}`]: {
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.buttonNo}`]: {
-    borderRight: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderRight: `1px solid ${theme.palette.colors.border01}`,
     cursor: 'pointer',
     padding: 10,
   },
diff --git a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
index dcb917480a..4627e2ba1e 100644
--- a/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
+++ b/packages/desktop/src/renderer/components/ui/Spinner/SpinnerLoader.tsx
@@ -16,7 +16,7 @@ const classes = {
 const StyledGrid = styled(Grid)(({ theme }) => ({
   [`& .${classes.message}`]: {
     marginTop: theme.spacing(2),
-    color: theme.palette.primary.main,
+    color: theme.palette.colors.mediumGray,
   },
 
   [`& .${classes.spinner}`]: (props: any) => ({
diff --git a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
index d2e8792d38..cb3913da05 100644
--- a/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
+++ b/packages/desktop/src/renderer/components/widgets/MessagesDivider.tsx
@@ -19,7 +19,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
 
   [`& .${classes.divider}`]: {
     height: 1,
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.colors.border01,
   },
 
   [`& .${classes.titleDiv}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
index 0f92ddfe6b..ecf542f346 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/BasicMessage.tsx
@@ -97,7 +97,7 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
     marginRight: 10,
     marginBottom: 4,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
index 0d065ecd10..608dce53cb 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelHeader.tsx
@@ -36,7 +36,7 @@ const Root = styled('div')(({ theme }) => ({
     height: '75px',
     paddingLeft: 20,
     paddingRight: 24,
-    borderBottom: `1px solid ${theme.palette.colors.veryLightGray}`,
+    borderBottom: `1px solid ${theme.palette.colors.border01}`,
   },
 
   [`& .${classes.title}`]: {
@@ -92,7 +92,7 @@ const Root = styled('div')(({ theme }) => ({
     top: 75,
     padding: '12px 25px 12px 20px',
     backgroundColor: theme.palette.colors.white,
-    boxShadow: `0px 1px 0px ${theme.palette.colors.veryLightGray}`,
+    boxShadow: theme.shadows[2],
   },
 
   [`&.${classes.wrapper}`]: {},
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
index 7f5d2d2aac..88dbcbb14c 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.tsx
@@ -45,12 +45,12 @@ const maxHeight = 300
 
 const StyledChannelInput = styled(Grid)(({ theme }) => ({
   [`&.${classes.root}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
   [`& .${classes.rootContent}`]: {
-    background: '#fff',
+    background: theme.palette.background.default,
     height: '100%',
     width: '100%',
   },
@@ -86,7 +86,7 @@ const StyledChannelInput = styled(Grid)(({ theme }) => ({
     paddingRight: '60px',
   },
   [`& .${classes.textfield}`]: {
-    border: `1px solid ${theme.palette.colors.veryLightGray}`,
+    border: `1px solid ${theme.palette.colors.border01}`,
     maxHeight: maxHeight,
     overflowY: 'auto',
     borderRadius: 4,
diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
index 7d97ae2030..ccfe988c84 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/MentionElement.tsx
@@ -28,7 +28,7 @@ const StyledGrid = styled(Grid)(({ theme }) => ({
     maxHeight: 18,
     maxWidth: 18,
     borderRadius: 4,
-    backgroundColor: theme.palette.colors.grayBackgroud,
+    backgroundColor: theme.palette.background.paper,
   },
 
   [`& .${classes.alignAvatar}`]: {
diff --git a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
index 93dc4c4a49..17d78c3570 100644
--- a/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
+++ b/packages/desktop/src/renderer/components/widgets/channels/TextMessage.tsx
@@ -50,12 +50,12 @@ const StyledTypography = styled(Typography)(() => ({
   },
 
   [`& .${classes.code}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
   [`& .${classes.pre}`]: {
-    backgroundColor: theme.palette.colors.veryLightGray,
+    backgroundColor: theme.palette.background.paper,
     padding: '.25em',
   },
 
@@ -90,7 +90,7 @@ const StyledTypography = styled(Typography)(() => ({
   [`& .${classes.tableHeaderCell}`]: {
     borderBottom: 'solid',
     borderBottomWidth: 1,
-    borderColor: theme.palette.colors.veryLightGray,
+    borderColor: theme.palette.colors.border01,
     textAlign: 'center',
   },
 
diff --git a/packages/desktop/src/renderer/theme.ts b/packages/desktop/src/renderer/theme.ts
index 46bcafd117..e58747960f 100644
--- a/packages/desktop/src/renderer/theme.ts
+++ b/packages/desktop/src/renderer/theme.ts
@@ -62,53 +62,61 @@ export default createTheme({
     },
   },
   palette: {
+    // type: 'light', // Currently commented out because of type errors
+    background: {
+      // Background colors (white-ish for light theme, black-ish for dark)
+      default: '#ffffff',
+      paper: '#F0F0F0',
+    },
+    // text: {}, // font colors (black-ish for light theme, white-ish for dark)
     primary: {
-      light: '#e9e9e9',
-      main: '#8d8d8d',
-      dark: '#4a4a4a',
+      // Primary Quiet brand purple
+      main: '#521C74',
+      dark: '#461863',
+    },
+    secondary: {
+      // Secondary Quiet brand red (TODO: Make sure this is Secondary, not error/warning)
+      main: '#E42656',
+      dark: '#C41743',
     },
+    // TO BE ADDED IF NEEDED: Success, Warning, Error, Neutral
     colors: {
-      contentGray: '#D2D2D2',
-      titleGray: '#555555',
+      // Misc colors. For primary / secondary brand, text, and background colors, use those objects
+      mediumGray: '#8d8d8d',
       white: '#FFFFFF',
       blue: '#2196f3',
-      purple: '#521C74',
-      darkPurple: '#4d1a6d',
+      purple: '#521C74', // To be replaced with theme.palette.primary.main
+      darkPurple: '#4d1a6d', // To be replaced with theme.palette.primary.dark?
       gray: '#e7e7e7',
-      inputGray: '#E0E0E0',
-      black: '#333333',
-      trueBlack: '#000000',
-      quietBlue: '#521c74',
-      captionPurple: '#9B60A5',
+      trueBlack: '#000000', // To be replaced with text color and border color
+      quietBlue: '#521c74', // To be replaced with theme.palette.primary.main
       darkGray: '#7F7F7F',
       gray03: '#F7F7F7',
-      gray40: '#999999',
       lushSky: '#67BFD3',
       lushSky12: '#EDF7FA',
-      lightGray: '#B2B2B2',
-      veryLightGray: '#F0F0F0',
-      green: '#4CBB17',
-      greenDark: '#9BD174',
-      red: '#FF0000',
-      hotRed: '#E42656',
-      hotPink: '#E42656',
-      linkBlue: '#59c0d5',
-      buttonGray: '#E3E3E3',
-      black30: '#4C4C4C',
-      gray30: '#FAFAFA',
-      grayBackgroud: '#F3F0F6',
-      gray50: '#B3B3B3',
-      error: '#D13135',
-      logsDark: '#252526',
-      logsActiveDark: '#1E1E1E',
-      logsInactiveDark: '#2D2D2D',
-      logsTitleGray: '#D4D4D4',
-      logsTabWhite: '#A9A9A9',
-      logsScrollBar: '#3D3D3D',
-      logsScrollBarThumb: ' #787878',
-      yellow: '#E6BB46',
+      lightGray: '#B2B2B2', // To be replaced with gray30
+      border01: '#F0F0F0',
+      border02: '#B3B3B3',
+      border03: '#D2D2D2',
+      red: '#FF0000', // Replace with D13135 ?
+      hotRed: '#E42656', // Replaced by theme.palette.secondary.main
+      hotPink: '#E42656', // Replaced by theme.palette.secondary.main
+      linkBlue: '#59c0d5', // Used in a variety of places - likely wants to be split / consolidated
+      black30: '#4C4C4C', // Rename to gray70
+      gray30: '#FAFAFA', // Unused and not aligned with Figma
+      gray40: '#999999',
+      gray50: '#7F7F7F',
+      error: '#D13135', // Need to align with Figma
     },
   },
+  //@ts-ignore MUI types expect 25 shadows - see: https://github.com/mui/material-ui/issues/28820
+  shadows: [
+    'none',
+    '0px 0px 4px rgba(0, 0, 0, 0.25)',
+    '0px 1px 0px #F0F0F0',
+    '0px 1px 3px rgba(0, 0, 0, 0.0)',
+    '0px 2px 25px rgba(0, 0, 0, 0.2)',
+  ],
   components: {
     // Body font size changed in mui v5: https://mui.com/material-ui/migration/v5-component-changes/#update-body-font-size
     MuiCssBaseline: {