diff --git a/packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md b/packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md
new file mode 100644
index 00000000000..6cbf2765331
--- /dev/null
+++ b/packages/manager/.changeset/pr-11241-tech-stories-1731391925729.md
@@ -0,0 +1,5 @@
+---
+'@linode/manager': Tech Stories
+---
+
+Replace one-off hardcoded color values with color tokens pt3 ([#11241](https://github.com/linode/manager/pull/11241))
diff --git a/packages/manager/src/assets/icons/monitor-disabled.svg b/packages/manager/src/assets/icons/monitor-disabled.svg
index 2f730c7a332..7be1239b37c 100644
--- a/packages/manager/src/assets/icons/monitor-disabled.svg
+++ b/packages/manager/src/assets/icons/monitor-disabled.svg
@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
   <g fill="none" fill-rule="evenodd">
-    <circle cx="32" cy="32" r="32" fill="#E3E5E8"/>
+    <circle cx="32" cy="32" r="32" fill="#E5E5EA"/>
     <rect width="4" height="35" x="16" y="-14.501" fill="#FFF" rx="2" transform="rotate(90 10.5 24.499)"/>
   </g>
 </svg>
diff --git a/packages/manager/src/assets/icons/toggleOff.svg b/packages/manager/src/assets/icons/toggleOff.svg
index 79a13065668..433629a5f01 100644
--- a/packages/manager/src/assets/icons/toggleOff.svg
+++ b/packages/manager/src/assets/icons/toggleOff.svg
@@ -6,7 +6,7 @@
   class="icon"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
-  <g stroke="none" stroke-width="0" fill="#C9CACB" fill-rule="evenodd">
+  <g stroke="none" stroke-width="0" fill="#C2C2CA" fill-rule="evenodd">
     <rect class="square" x="0" y="0" width="16" height="16" rx="1"></rect>
   </g>
 </svg>
\ No newline at end of file
diff --git a/packages/manager/src/components/AreaChart/AreaChart.tsx b/packages/manager/src/components/AreaChart/AreaChart.tsx
index 70dcabf72b4..ff43f4793ef 100644
--- a/packages/manager/src/components/AreaChart/AreaChart.tsx
+++ b/packages/manager/src/components/AreaChart/AreaChart.tsx
@@ -241,10 +241,10 @@ export const AreaChart = (props: AreaChartProps) => {
           <YAxis stroke={theme.color.label} tickFormatter={humanizeLargeData} />
           <Tooltip
             contentStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
             }}
             itemStyle={{
-              color: '#606469',
+              color: theme.tokens.color.Neutrals[70],
               fontFamily: theme.font.bold,
             }}
             content={<CustomTooltip />}
diff --git a/packages/manager/src/components/Checkbox.tsx b/packages/manager/src/components/Checkbox.tsx
index 036779e0a61..bb7820f3769 100644
--- a/packages/manager/src/components/Checkbox.tsx
+++ b/packages/manager/src/components/Checkbox.tsx
@@ -78,7 +78,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
   '&:hover': {
     color: theme.palette.primary.main,
   },
-  color: '#ccc',
+  color: theme.tokens.color.Neutrals[40],
   transition: theme.transitions.create(['color']),
   ...(props.checked && {
     color: theme.palette.primary.main,
@@ -88,7 +88,7 @@ const StyledCheckbox = styled(_Checkbox)(({ theme, ...props }) => ({
       fill: `${theme.bg.main}`,
       opacity: 0.5,
     },
-    color: '#ccc !important',
+    color: `${theme.tokens.color.Neutrals[40]} !important`,
     fill: `${theme.bg.main} !important`,
     pointerEvents: 'none',
   }),
diff --git a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
index fc03b58f186..7d3f057975f 100644
--- a/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
+++ b/packages/manager/src/components/CopyableTextField/CopyableTextField.tsx
@@ -60,7 +60,10 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
   '.removeDisabledStyles': {
     '& .MuiInput-input': {
       WebkitTextFillColor: 'unset !important',
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       color:
         theme.name === 'light'
           ? `${theme.palette.text.primary} !important`
@@ -68,7 +71,10 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
       opacity: theme.name === 'dark' ? 0.5 : 0.8,
     },
     '&& .MuiInput-root': {
-      borderColor: theme.name === 'light' ? '#ccc' : '#222',
+      borderColor:
+        theme.name === 'light'
+          ? theme.tokens.color.Neutrals[40]
+          : theme.tokens.color.Neutrals.Black,
       opacity: 1,
     },
   },
diff --git a/packages/manager/src/components/Dialog/Dialog.tsx b/packages/manager/src/components/Dialog/Dialog.tsx
index fbbb76cfaa1..1504ef243ce 100644
--- a/packages/manager/src/components/Dialog/Dialog.tsx
+++ b/packages/manager/src/components/Dialog/Dialog.tsx
@@ -115,10 +115,10 @@ const StyledDialog = styled(_Dialog, {
   },
 }));
 
-const StyledHr = styled('hr')({
-  backgroundColor: '#e3e5e8',
+const StyledHr = styled('hr', { label: 'StyledHr' })(({ theme }) => ({
+  backgroundColor: theme.tokens.color.Neutrals[20],
   border: 'none',
   height: 1,
   margin: '-2em 8px 0px 8px',
   width: '100%',
-});
+}));
diff --git a/packages/manager/src/components/EnhancedSelect/Select.styles.ts b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
index def55c13e51..3d1b2d4260f 100644
--- a/packages/manager/src/components/EnhancedSelect/Select.styles.ts
+++ b/packages/manager/src/components/EnhancedSelect/Select.styles.ts
@@ -86,7 +86,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '& .react-select__control': {
       '&:hover': {
-        border: `1px dotted #ccc`,
+        border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
         cursor: 'text',
       },
       '&--is-focused, &--is-focused:hover': {
@@ -136,7 +136,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
         width: 8,
       },
       '&::-webkit-scrollbar-thumb': {
-        backgroundColor: '#ccc',
+        backgroundColor: theme.tokens.color.Neutrals[40],
         borderRadius: 8,
       },
       backgroundColor: theme.bg.white,
@@ -290,7 +290,7 @@ export const reactSelectStyles = (theme: Theme) => ({
   control: (base: any) => ({
     ...base,
     '&:hover': {
-      border: `1px dotted #ccc`,
+      border: `1px dotted ${theme.tokens.color.Neutrals[40]}`,
       cursor: 'text',
     },
     '&--is-focused, &--is-focused:hover': {
@@ -349,7 +349,7 @@ export const reactSelectStyles = (theme: Theme) => ({
       width: 8,
     },
     '&::-webkit-scrollbar-thumb': {
-      backgroundColor: '#ccc',
+      backgroundColor: theme.tokens.color.Neutrals[40],
       borderRadius: 8,
     },
     backgroundColor: theme.bg.white,
diff --git a/packages/manager/src/components/LineGraph/LineGraph.tsx b/packages/manager/src/components/LineGraph/LineGraph.tsx
index cde35ce4004..745e6a27af1 100644
--- a/packages/manager/src/components/LineGraph/LineGraph.tsx
+++ b/packages/manager/src/components/LineGraph/LineGraph.tsx
@@ -284,7 +284,7 @@ export const LineGraph = (props: LineGraphProps) => {
         intersect: false,
         mode: 'index',
         position: 'nearest',
-        titleFontColor: '#606469',
+        titleFontColor: theme.tokens.color.Neutrals[70],
         xPadding: 8,
         yPadding: 10,
       },
diff --git a/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx b/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
index 5eb0b75f3b0..d64a2d4e88b 100644
--- a/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
+++ b/packages/manager/src/components/PasswordInput/StrengthIndicator.tsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     '&[class*="strength-"]': {
       backgroundColor: theme.palette.primary.main,
     },
-    backgroundColor: '#C9CACB',
+    backgroundColor: theme.tokens.color.Neutrals[40],
     height: '4px',
     transition: 'background-color .5s ease-in-out',
   },
diff --git a/packages/manager/src/components/Placeholder/Placeholder.tsx b/packages/manager/src/components/Placeholder/Placeholder.tsx
index 891cc6dddf6..25662fe8936 100644
--- a/packages/manager/src/components/Placeholder/Placeholder.tsx
+++ b/packages/manager/src/components/Placeholder/Placeholder.tsx
@@ -218,12 +218,20 @@ const StyledButtonWrapper = styled('div')(({ theme }) => ({
 const StyledLinksSection = styled('div')<
   Pick<PlaceholderProps, 'showTransferDisplay'>
 >(({ theme, ...props }) => ({
-  borderTop: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+  borderTop: `1px solid ${
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[20]
+      : theme.tokens.color.Neutrals[100]
+  }`,
   gridArea: 'links',
   paddingTop: '38px',
 
   ...(props.showTransferDisplay && {
-    borderBottom: `1px solid ${theme.name === 'light' ? '#e3e5e8' : '#2e3238'}`,
+    borderBottom: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[20]
+        : theme.tokens.color.Neutrals[100]
+    }`,
     paddingBottom: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       paddingBottom: theme.spacing(4),
diff --git a/packages/manager/src/components/Tag/Tag.styles.ts b/packages/manager/src/components/Tag/Tag.styles.ts
index 77a491cc8cb..b9c8cef2b11 100644
--- a/packages/manager/src/components/Tag/Tag.styles.ts
+++ b/packages/manager/src/components/Tag/Tag.styles.ts
@@ -92,7 +92,9 @@ export const StyledDeleteButton = styled(StyledLinkButton, {
   },
   borderBottomRightRadius: 3,
   borderLeft: `1px solid ${
-    theme.name === 'light' ? theme.tokens.color.Neutrals.White : '#2e3238'
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals.White
+      : theme.tokens.color.Neutrals[100]
   }`,
   borderRadius: theme.tokens.borderRadius.None,
   borderTopRightRadius: 3,
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
index a61db9661f8..582873cb1a6 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.style.ts
@@ -19,7 +19,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
@@ -27,7 +27,7 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,
@@ -47,7 +47,11 @@ export const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.tokens.interaction.Background.Secondary,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
+    }`,
     padding: `${theme.spacing(1)} 15px`,
   },
   copyToolTip: {
diff --git a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
index 2f9288bddd3..849f5924418 100644
--- a/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
+++ b/packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/legacy/DatabaseSummaryConnectionDetailsLegacy.tsx
@@ -36,7 +36,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
     },
     '&[disabled]': {
       '& g': {
-        stroke: '#cdd0d5',
+        stroke: theme.tokens.color.Neutrals[30],
       },
       '&:hover': {
         backgroundColor: 'inherit',
@@ -44,7 +44,7 @@ const useStyles = makeStyles()((theme: Theme) => ({
       },
       // Override disabled background color defined for dark mode
       backgroundColor: 'transparent',
-      color: '#cdd0d5',
+      color: theme.tokens.color.Neutrals[30],
       cursor: 'default',
     },
     color: theme.palette.primary.main,
@@ -64,7 +64,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
       fontFamily: theme.font.bold,
     },
     background: theme.bg.bgAccessRowTransparentGradient,
-    border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+    border: `1px solid ${
+      theme.name === 'light'
+        ? theme.tokens.color.Neutrals[40]
+        : theme.tokens.color.Neutrals.Black
+    }`,
     padding: '8px 15px',
   },
   copyToolTip: {
diff --git a/packages/manager/src/features/Events/FormattedEventMessage.tsx b/packages/manager/src/features/Events/FormattedEventMessage.tsx
index 6a0677a7d75..f378c933be1 100644
--- a/packages/manager/src/features/Events/FormattedEventMessage.tsx
+++ b/packages/manager/src/features/Events/FormattedEventMessage.tsx
@@ -58,7 +58,10 @@ const formatMessage = (message: string): JSX.Element => {
 };
 
 const StyledPre = styled('pre')(({ theme }) => ({
-  backgroundColor: theme.name === 'dark' ? '#222' : '#f4f4f4',
+  backgroundColor:
+    theme.name === 'dark'
+      ? theme.tokens.color.Neutrals.Black
+      : theme.tokens.color.Neutrals[5],
   borderRadius: 4,
   display: 'inline',
   fontSize: '0.75rem',
diff --git a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
index 7229f67a0fd..5591b4c05f1 100644
--- a/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
+++ b/packages/manager/src/features/ObjectStorage/AccessKeyLanding/HostNamesList.tsx
@@ -27,7 +27,11 @@ export const HostNamesList = ({ objectStorageKey }: Props) => {
       <StyledBoxShadowWrapper
         sx={(theme) => ({
           backgroundColor: theme.bg.main,
-          border: `1px solid ${theme.name === 'light' ? '#ccc' : '#222'}`,
+          border: `1px solid ${
+            theme.name === 'light'
+              ? theme.tokens.color.Neutrals[40]
+              : theme.tokens.color.Neutrals.Black
+          }`,
           minHeight: '34px',
         })}
         displayShadow={currentListHeight > maxHeight}
diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
index cd5b9f75a26..d017870775b 100644
--- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
+++ b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.styles.ts
@@ -21,7 +21,10 @@ export const StyledPhoneNumberTitle = styled(Typography, {
 export const StyledLabel = styled(Typography, {
   label: 'StyledLabel',
 })(({ theme }) => ({
-  color: theme.name === 'light' ? '#555' : '#c9cacb',
+  color:
+    theme.name === 'light'
+      ? theme.tokens.color.Neutrals[80]
+      : theme.tokens.color.Neutrals[40],
   fontSize: '.875rem',
   lineHeight: '1',
   marginBottom: '8px',
@@ -34,7 +37,10 @@ export const StyledInputContainer = styled(Box, {
   shouldForwardProp: omittedProps(['isPhoneInputFocused']),
 })<{ isPhoneInputFocused: boolean }>(({ isPhoneInputFocused, theme }) => ({
   backgroundColor: theme.name === 'dark' ? '#343438' : undefined,
-  border: theme.name === 'light' ? '1px solid #ccc' : '1px solid #222',
+  border:
+    theme.name === 'light'
+      ? `1px solid ${theme.tokens.color.Neutrals[40]}`
+      : `1px solid ${theme.tokens.color.Neutrals.Black}`,
   transition: 'border-color 225ms ease-in-out',
   width: 'fit-content',
   ...(isPhoneInputFocused &&
@@ -45,7 +51,7 @@ export const StyledInputContainer = styled(Box, {
         }
       : {
           borderColor: '#3683dc',
-          boxShadow: '0 0 2px 1px #222',
+          boxShadow: `0 0 2px 1px ${theme.tokens.color.Neutrals.Black}`,
         })),
 }));
 
diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
index 063ca7d533c..86b74c64b6b 100644
--- a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
+++ b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
@@ -88,7 +88,9 @@ export const NotificationMenu = () => {
         <IconButton
           sx={(theme) => ({
             ...topMenuIconButtonSx(theme),
-            color: notificationContext.menuOpen ? '#606469' : '#c9c7c7',
+            color: notificationContext.menuOpen
+              ? theme.tokens.color.Neutrals[70]
+              : theme.tokens.color.Neutrals[40],
           })}
           aria-describedby={id}
           aria-haspopup="true"
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
index f23d19daff8..d53c91af154 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.styles.ts
@@ -16,7 +16,7 @@ export const StyledIconButton = styled(IconButton, {
   },
   backgroundColor: 'inherit',
   border: 'none',
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   cursor: 'pointer',
   padding: theme.spacing(),
   position: 'relative',
diff --git a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
index b6a53bb8130..18bf5642e0b 100644
--- a/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
+++ b/packages/manager/src/features/TopMenu/SearchBar/SearchBar.tsx
@@ -323,8 +323,11 @@ const SearchBar = (props: SearchProps) => {
       </StyledIconButton>
       <StyledSearchBarWrapperDiv className={searchActive ? 'active' : ''}>
         <Search
+          sx={(theme) => ({
+            color: theme.tokens.color.Neutrals[40],
+            fontSize: '2rem',
+          })}
           data-qa-search-icon
-          sx={{ color: '#c9cacb', fontSize: '2rem' }}
         />
         <label className="visually-hidden" htmlFor="main-search">
           Main search
diff --git a/packages/manager/src/features/TopMenu/TopMenu.tsx b/packages/manager/src/features/TopMenu/TopMenu.tsx
index 00802f82ebb..32d23d5fc3f 100644
--- a/packages/manager/src/features/TopMenu/TopMenu.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenu.tsx
@@ -39,7 +39,11 @@ export const TopMenu = React.memo((props: TopMenuProps) => {
   return (
     <React.Fragment>
       {loggedInAsCustomer && (
-        <Box bgcolor="pink" padding="1em" textAlign="center">
+        <Box
+          bgcolor={(theme) => theme.tokens.color.Pink[40]}
+          padding="1em"
+          textAlign="center"
+        >
           <Typography
             color={(theme) => theme.tokens.color.Neutrals.Black}
             fontSize="1.2em"
diff --git a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
index 43bff6c2967..22afe494a88 100644
--- a/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
+++ b/packages/manager/src/features/TopMenu/TopMenuTooltip.tsx
@@ -24,9 +24,9 @@ export const TopMenuTooltip = React.memo(({ children, title }: Props) => {
 
 export const topMenuIconButtonSx = (theme: Theme) => ({
   '&:hover, &:focus': {
-    color: '#606469',
+    color: theme.tokens.color.Neutrals[70],
   },
-  color: '#c9c7c7',
+  color: theme.tokens.color.Neutrals[40],
   height: `50px`,
   [theme.breakpoints.down('sm')]: {
     padding: 1,
diff --git a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
index 7ad661fdc8e..4ee1b13ba4f 100644
--- a/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
+++ b/packages/manager/src/features/TopMenu/UserMenu/UserMenu.tsx
@@ -181,7 +181,9 @@ export const UserMenu = React.memo(() => {
     return matchesSmDown ? undefined : open ? (
       <KeyboardArrowUp sx={sx} />
     ) : (
-      <KeyboardArrowDown sx={{ color: '#9ea4ae', ...sx }} />
+      <KeyboardArrowDown
+        sx={(theme) => ({ color: theme.tokens.color.Neutrals[50], ...sx })}
+      />
     );
   };
 
@@ -288,7 +290,7 @@ export const UserMenu = React.memo(() => {
           )}
           <Box>
             <Heading>My Profile</Heading>
-            <Divider color="#9ea4ae" />
+            <Divider />
             <Grid columnSpacing={2} container rowSpacing={1}>
               <Grid container direction="column" wrap="nowrap" xs={6}>
                 {profileLinks.slice(0, 4).map(renderLink)}
@@ -301,7 +303,7 @@ export const UserMenu = React.memo(() => {
           {hasAccountAccess && (
             <Box>
               <Heading>Account</Heading>
-              <Divider color="#9ea4ae" />
+              <Divider />
               <Stack mt={1} spacing={1.5}>
                 {accountLinks.map((menuLink) =>
                   menuLink.hide ? null : (
diff --git a/packages/ui/src/components/Notice/Notice.styles.ts b/packages/ui/src/components/Notice/Notice.styles.ts
index 440ca58a017..1e6b45ca9d3 100644
--- a/packages/ui/src/components/Notice/Notice.styles.ts
+++ b/packages/ui/src/components/Notice/Notice.styles.ts
@@ -77,7 +77,7 @@ export const useStyles = makeStyles<
   },
   warning: {
     [`& .${classes.icon}`]: {
-      color: '#555',
+      color: theme.tokens.color.Neutrals[80],
     },
     [`&.${classes.important}`]: {
       borderLeftWidth: 32,
diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
index 1bc3375a7ae..78381da15ab 100644
--- a/packages/ui/src/foundations/themes/light.ts
+++ b/packages/ui/src/foundations/themes/light.ts
@@ -485,7 +485,7 @@ export const lightTheme: ThemeOptions = {
             color: Button.Secondary.Hover.Text,
           },
           '&[aria-disabled="true"]': {
-            color: '#c9cacb',
+            color: Color.Neutrals[40],
           },
           backgroundColor: 'transparent',
           color: Button.Secondary.Default.Text,
@@ -832,7 +832,7 @@ export const lightTheme: ThemeOptions = {
             fontSize: 18,
           },
           '&.Mui-disabled': {
-            backgroundColor: '#f4f4f4',
+            backgroundColor: Color.Neutrals[5],
             borderColor: Color.Neutrals[40],
             color: 'rgba(0, 0, 0, 0.75)',
             input: {