From f8475767a451ada9578d2fe27c08a853e7d4f19d Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 10:42:16 -0500
Subject: [PATCH 01/10] update run summary colors

---
 app/src/organisms/RunPreview/index.tsx       | 10 +++-------
 app/src/organisms/RunProgressMeter/index.tsx |  2 +-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx
index c26e3b5c8b3..5ec47bac81e 100644
--- a/app/src/organisms/RunPreview/index.tsx
+++ b/app/src/organisms/RunPreview/index.tsx
@@ -95,9 +95,8 @@ export const RunPreviewComponent = (
       >
         {(command, index) => {
           const isCurrent = index === currentRunCommandIndex
-          const borderColor = isCurrent ? COLORS.blue50 : COLORS.transparent
           const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey10
-          const contentColor = isCurrent ? COLORS.blue60 : COLORS.grey50
+          const iconColor = isCurrent ? COLORS.blue60 : COLORS.grey50
           return (
             <Flex
               key={command.id}
@@ -114,9 +113,6 @@ export const RunPreviewComponent = (
                 flexDirection={DIRECTION_COLUMN}
                 gridGap={SPACING.spacing4}
                 width="100%"
-                border={`solid 1px ${
-                  index === jumpedIndex ? COLORS.purple40 : borderColor
-                }`}
                 backgroundColor={
                   index === jumpedIndex ? '#F5E3FF' : backgroundColor
                 }
@@ -129,12 +125,12 @@ export const RunPreviewComponent = (
                 `}
               >
                 <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing8}>
-                  <CommandIcon command={command} color={contentColor} />
+                  <CommandIcon command={command} color={iconColor} />
                   <CommandText
                     command={command}
                     robotSideAnalysis={robotSideAnalysis}
                     robotType={robotType}
-                    color={contentColor}
+                    color={COLORS.black90}
                   />
                 </Flex>
               </Flex>
diff --git a/app/src/organisms/RunProgressMeter/index.tsx b/app/src/organisms/RunProgressMeter/index.tsx
index cc54fb5562f..573adb5ecd1 100644
--- a/app/src/organisms/RunProgressMeter/index.tsx
+++ b/app/src/organisms/RunProgressMeter/index.tsx
@@ -259,7 +259,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
             `}
             innerStyles={css`
               height: 0.375rem;
-              background-color: ${COLORS.grey50};
+              background-color: ${COLORS.grey60};
               border-radius: ${BORDERS.radiusSoftCorners};
             `}
           >

From d19e43c98e234dc9636325e8f70bedfd0fe18663 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 10:42:28 -0500
Subject: [PATCH 02/10] update ProtocolList hover state

---
 app/src/organisms/ProtocolsLanding/ProtocolList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
index e50032fa217..fabd2e9d26c 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
@@ -42,7 +42,7 @@ const SORT_BY_BUTTON_STYLE = css`
   background-color: ${COLORS.transparent};
   cursor: pointer;
   &:hover {
-    background-color: ${COLORS.grey60};
+    background-color: ${COLORS.grey30};
   }
   &:active,
   &:focus {

From 743c24b53e7728ac87ffc6abc375cfb467f8a7f9 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 10:54:25 -0500
Subject: [PATCH 03/10] update protocol setup colors

---
 app/src/organisms/RunPreview/index.tsx           | 2 +-
 app/src/organisms/RunProgressMeter/index.tsx     | 6 +++++-
 components/src/atoms/buttons/SecondaryButton.tsx | 6 +++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/src/organisms/RunPreview/index.tsx b/app/src/organisms/RunPreview/index.tsx
index 5ec47bac81e..605db840cc9 100644
--- a/app/src/organisms/RunPreview/index.tsx
+++ b/app/src/organisms/RunPreview/index.tsx
@@ -95,7 +95,7 @@ export const RunPreviewComponent = (
       >
         {(command, index) => {
           const isCurrent = index === currentRunCommandIndex
-          const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey10
+          const backgroundColor = isCurrent ? COLORS.blue30 : COLORS.grey20
           const iconColor = isCurrent ? COLORS.blue60 : COLORS.grey50
           return (
             <Flex
diff --git a/app/src/organisms/RunProgressMeter/index.tsx b/app/src/organisms/RunProgressMeter/index.tsx
index 573adb5ecd1..33e361acba9 100644
--- a/app/src/organisms/RunProgressMeter/index.tsx
+++ b/app/src/organisms/RunProgressMeter/index.tsx
@@ -230,7 +230,11 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element {
             textTransform={TYPOGRAPHY.textTransformCapitalize}
             onClick={onDownloadClick}
           >
-            <Flex gridGap={SPACING.spacing2} alignItems={ALIGN_CENTER}>
+            <Flex
+              gridGap={SPACING.spacing2}
+              alignItems={ALIGN_CENTER}
+              color={COLORS.grey60}
+            >
               <Icon name="download" size={SIZE_1} />
               {t('download_run_log')}
             </Flex>
diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx
index 5b624e60363..00e456ba100 100644
--- a/components/src/atoms/buttons/SecondaryButton.tsx
+++ b/components/src/atoms/buttons/SecondaryButton.tsx
@@ -13,7 +13,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
 })<SecondaryButtonProps>`
   appearance: none;
   cursor: pointer;
-  color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue50)};
+  color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue50)};
   border: ${BORDERS.lineBorder};
   border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')};
   border-radius: ${BORDERS.radiusSoftCorners};
@@ -28,7 +28,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
   }
 
   &:hover {
-    color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue60)};
+    color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue60)};
     border-color: ${props =>
       props.isDangerous ? COLORS.red50 : COLORS.blue55};
     box-shadow: 0 0 0;
@@ -45,7 +45,7 @@ export const SecondaryButton = styled.button.withConfig<SecondaryButtonProps>({
     box-shadow: none;
     color: ${props => (props.isDangerous ? COLORS.red60 : COLORS.blue55)};
     border-color: ${props =>
-      props.isDangerous ? COLORS.red50 : COLORS.blue55};
+      props.isDangerous ? COLORS.red60 : COLORS.blue55};
   }
 
   &:disabled,

From 595a04b5acd9a265617188d69d8fb870e8ec53a5 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 11:06:30 -0500
Subject: [PATCH 04/10] update protocoldetail page colors

---
 .../ProtocolDetails/ProtocolLiquidsDetails.tsx       |  2 +-
 .../ProtocolDetails/RobotConfigurationDetails.tsx    |  4 ++--
 app/src/organisms/ProtocolDetails/index.tsx          | 12 ++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
index d467ca90c0a..ee0a2bca0b3 100644
--- a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
+++ b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
@@ -74,7 +74,7 @@ export const ProtocolLiquidsDetails = (
           flexDirection={DIRECTION_COLUMN}
         >
           <Icon
-            color={COLORS.grey30}
+            color={COLORS.grey50}
             alignSelf={ALIGN_CENTER}
             size="1.25rem"
             name="ot-alert"
diff --git a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
index dfab6997677..995977e6290 100644
--- a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
+++ b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx
@@ -155,7 +155,7 @@ export const RobotConfigurationDetails = (
                     moduleType={getModuleType(module.params.model)}
                     marginRight={SPACING.spacing4}
                     alignSelf={ALIGN_CENTER}
-                    color={COLORS.grey60}
+                    color={COLORS.grey50}
                     height={SIZE_1}
                     minWidth={SIZE_1}
                     minHeight={SIZE_1}
@@ -208,7 +208,7 @@ export const RobotConfigurationDetailsItem = (
         flex="0 0 auto"
         fontWeight={TYPOGRAPHY.fontWeightSemiBold}
         marginRight={SPACING.spacing16}
-        color={COLORS.grey50}
+        color={COLORS.grey60}
         textTransform={TYPOGRAPHY.textTransformCapitalize}
         width="4.625rem"
       >
diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
index b7ecd353f6d..51cd618f7de 100644
--- a/app/src/organisms/ProtocolDetails/index.tsx
+++ b/app/src/organisms/ProtocolDetails/index.tsx
@@ -425,7 +425,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_creationMethod"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('creation_method')}
                   </StyledText>
                   <StyledText as="p">
@@ -438,7 +438,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastUpdated"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('last_updated')}
                   </StyledText>
                   <StyledText as="p">
@@ -451,7 +451,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_lastAnalyzed"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('last_analyzed')}
                   </StyledText>
                   <StyledText as="p">
@@ -481,7 +481,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_author"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('org_or_author')}
                   </StyledText>
                   <StyledText
@@ -498,7 +498,7 @@ export function ProtocolDetails(
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_description"
                 >
-                  <StyledText as="h6" color={COLORS.grey50}>
+                  <StyledText as="h6" color={COLORS.grey60}>
                     {t('description')}
                   </StyledText>
                   {analysisStatus === 'loading' ? (
@@ -567,7 +567,7 @@ export function ProtocolDetails(
                     color={
                       analysisStatus !== 'complete'
                         ? COLORS.grey40
-                        : COLORS.grey50
+                        : COLORS.grey60
                     }
                   />
                 </Btn>

From 7592191a598349870875a0d17698686ca4f4efc2 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 12:03:41 -0500
Subject: [PATCH 05/10] update protocols page colors

---
 .../ProtocolsLanding/ProtocolCard.tsx         | 22 +++++++++++++++----
 .../ProtocolsLanding/ProtocolList.tsx         |  2 +-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
index 24515106f6c..ab37ec6c37f 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -168,8 +168,22 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
       >
         {
           {
-            missing: <Icon name="ot-spinner" spin size={SIZE_3} />,
-            loading: <Icon name="ot-spinner" spin size={SIZE_3} />,
+            missing: (
+              <Icon
+                name="ot-spinner"
+                color={COLORS.grey60}
+                spin
+                size={SIZE_3}
+              />
+            ),
+            loading: (
+              <Icon
+                name="ot-spinner"
+                color={COLORS.grey60}
+                spin
+                size={SIZE_3}
+              />
+            ),
             error: <Box size="6rem" backgroundColor={COLORS.grey30} />,
             stale: <Box size="6rem" backgroundColor={COLORS.grey30} />,
             complete:
@@ -208,7 +222,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
         </Flex>
         {/* data section */}
         {analysisStatus === 'loading' ? (
-          <StyledText as="p" flex="1" color={COLORS.grey50}>
+          <StyledText as="p" flex="1" color={COLORS.grey60}>
             {t('loading_data')}
           </StyledText>
         ) : (
@@ -303,7 +317,7 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element {
               justifyContent={JUSTIFY_FLEX_END}
               data-testid={`ProtocolCard_date_${protocolDisplayName}`}
             >
-              <StyledText as="label" color={COLORS.grey50}>
+              <StyledText as="label" color={COLORS.grey60}>
                 {`${t('updated')} ${format(
                   new Date(modified),
                   'M/d/yy HH:mm'
diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
index fabd2e9d26c..e765086c29e 100644
--- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
+++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx
@@ -161,7 +161,7 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null {
             <StyledText
               as="p"
               fontWeight={TYPOGRAPHY.fontWeightSemiBold}
-              color={COLORS.grey50}
+              color={COLORS.grey60}
             >
               {t('shared:sort_by')}
             </StyledText>

From fcb58473e46dd9062f8d21ab5385a96288c33282 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 13:29:14 -0500
Subject: [PATCH 06/10] update drop tip unselected border states

---
 app/src/organisms/DropTipWizard/BeforeBeginning.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
index bfc44c5cd06..8fe2d7970cd 100644
--- a/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
+++ b/app/src/organisms/DropTipWizard/BeforeBeginning.tsx
@@ -186,7 +186,7 @@ export const BeforeBeginning = (
 
 const UNSELECTED_OPTIONS_STYLE = css`
   background-color: ${COLORS.white};
-  border: 1px solid ${COLORS.grey20};
+  border: 1px solid ${COLORS.grey30};
   border-radius: ${BORDERS.radiusSoftCorners};
   height: 12.5625rem;
   width: 14.5625rem;
@@ -197,7 +197,7 @@ const UNSELECTED_OPTIONS_STYLE = css`
   grid-gap: ${SPACING.spacing8};
 
   &:hover {
-    border: 1px solid ${COLORS.grey30};
+    border: 1px solid ${COLORS.grey35};
   }
 
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {

From e6645f95ce381e2f5ff2d7c2cba253452776add9 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 15:14:34 -0500
Subject: [PATCH 07/10] mel feedback

---
 app/src/atoms/InstrumentContainer/index.tsx  | 2 +-
 app/src/atoms/buttons/ToggleButton.tsx       | 4 ++--
 app/src/organisms/TaskList/index.tsx         | 6 +++++-
 components/src/helix-design-system/colors.ts | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx
index 857411c3c72..0effcea81bb 100644
--- a/app/src/atoms/InstrumentContainer/index.tsx
+++ b/app/src/atoms/InstrumentContainer/index.tsx
@@ -16,7 +16,7 @@ export const InstrumentContainer = (
 
   return (
     <Flex
-      backgroundColor={COLORS.grey20}
+      backgroundColor={`${COLORS.black90}${COLORS.opacity20HexCode}`}
       borderRadius={BORDERS.radiusSoftCorners}
       paddingX={SPACING.spacing8}
       paddingY={SPACING.spacing2}
diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
index 136da9c6a87..203336ebf14 100644
--- a/app/src/atoms/buttons/ToggleButton.tsx
+++ b/app/src/atoms/buttons/ToggleButton.tsx
@@ -6,7 +6,7 @@ import { Btn, Icon, COLORS, SIZE_1, SIZE_2 } from '@opentrons/components'
 import type { StyleProps } from '@opentrons/components'
 
 const TOGGLE_DISABLED_STYLES = css`
-  color: ${COLORS.grey60};
+  color: ${COLORS.grey50};
 
   &:hover {
     color: ${COLORS.grey55};
@@ -17,7 +17,7 @@ const TOGGLE_DISABLED_STYLES = css`
   }
 
   &:disabled {
-    color: ${COLORS.grey40};
+    color: ${COLORS.grey30};
   }
 `
 
diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx
index 3cfd0225d43..9f2351330a6 100644
--- a/app/src/organisms/TaskList/index.tsx
+++ b/app/src/organisms/TaskList/index.tsx
@@ -218,7 +218,11 @@ function SubTask({
       backgroundColor={isActiveSubTask ? COLORS.blue10 : COLORS.white}
       justifyContent={JUSTIFY_SPACE_BETWEEN}
       padding={SPACING.spacing16}
-      border={isActiveSubTask ? BORDERS.activeLineBorder : TASK_CONNECTOR_STYLE}
+      border={
+        isActiveSubTask
+          ? BORDERS.activeLineBorder
+          : `1px solid ${COLORS.grey30}`
+      }
       borderRadius={BORDERS.radiusSoftCorners}
       gridGap={SPACING.spacing24}
       width="100%"
diff --git a/components/src/helix-design-system/colors.ts b/components/src/helix-design-system/colors.ts
index c03b646af83..342d32f9273 100644
--- a/components/src/helix-design-system/colors.ts
+++ b/components/src/helix-design-system/colors.ts
@@ -59,7 +59,7 @@ export const blue10 = '#F1F8FF'
  * grey
  */
 export const grey60 = '#4A4C4E'
-export const grey55 = '#737578'
+export const grey55 = '#626467'
 export const grey50 = '#737578'
 export const grey40 = '#B7B8B9'
 export const grey35 = '#CBCCCC'

From 46243baa59b10655c04539c51bbec697b45e590b Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 16:47:14 -0500
Subject: [PATCH 08/10] update toggle states

---
 app/src/atoms/buttons/ToggleButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/atoms/buttons/ToggleButton.tsx b/app/src/atoms/buttons/ToggleButton.tsx
index 203336ebf14..5299e332845 100644
--- a/app/src/atoms/buttons/ToggleButton.tsx
+++ b/app/src/atoms/buttons/ToggleButton.tsx
@@ -33,7 +33,7 @@ const TOGGLE_ENABLED_STYLES = css`
   }
 
   &:disabled {
-    color: ${COLORS.grey40};
+    color: ${COLORS.grey30};
   }
 `
 

From 3acc39c027a6f4c8f3ca1085ba07f27c0b10f7b8 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 17:48:16 -0500
Subject: [PATCH 09/10] update liquid card item border to grey30 on hover

---
 .../Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
index 29b6e54737b..1fe0a486b09 100644
--- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx
@@ -120,7 +120,7 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element {
     border: 1px solid ${COLORS.white};
     &:hover {
       cursor: pointer;
-      ${BORDERS.cardOutlineBorder}
+      border: 1px solid ${COLORS.grey30};
     }
   `
   const handleSetOpenItem = (): void => {

From f5e7c36c337e4999e2e59811cc5725ad4c2d1613 Mon Sep 17 00:00:00 2001
From: Jamey Huffnagle <jamey.huffnagle@opentrons.com>
Date: Wed, 21 Feb 2024 17:53:25 -0500
Subject: [PATCH 10/10] test fix

---
 app/src/atoms/buttons/__tests__/ToggleButton.test.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
index 2139edfa873..5cfc9ba383a 100644
--- a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
+++ b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -57,7 +57,7 @@ describe('ToggleButton', () => {
     props.disabled = true
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyleRule('color', `${String(COLORS.grey40)}`, {
+    expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, {
       modifier: ':disabled',
     })
   })
@@ -73,7 +73,7 @@ describe('ToggleButton', () => {
     props.toggledOn = false
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyle(`color: ${String(COLORS.grey60)}`)
+    expect(button).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     expect(button).toHaveStyle(`height: ${String(SIZE_2)}`)
     expect(button).toHaveStyle(`width: ${String(SIZE_2)}`)
     expect(button).toHaveAttribute('aria-checked', 'false')
@@ -106,7 +106,7 @@ describe('ToggleButton', () => {
     props.disabled = true
     const { getByLabelText } = render(props)
     const button = getByLabelText('toggle button')
-    expect(button).toHaveStyleRule('color', `${String(COLORS.grey40)}`, {
+    expect(button).toHaveStyleRule('color', `${String(COLORS.grey30)}`, {
       modifier: ':disabled',
     })
   })