diff --git a/src/ActionList/Header.tsx b/src/ActionList/Header.tsx
index 9d5b2b2bec7..9c2ee80d91b 100644
--- a/src/ActionList/Header.tsx
+++ b/src/ActionList/Header.tsx
@@ -37,7 +37,7 @@ export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxPro
   padding: 6px ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 
   ${({variant}) =>
     variant === 'filled' &&
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 9103aa88e68..c5cc8af80ea 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -158,14 +158,14 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
       return {
         color: get('colors.danger.fg'),
         iconColor: get('colors.danger.fg'),
-        annotationColor: get('colors.primer.fg.disabled'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
     default:
       return {
         color: get('colors.fg.default'),
-        iconColor: get('colors.primer.fg.disabled'),
-        annotationColor: get('colors.primer.fg.disabled'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
   }
@@ -315,7 +315,7 @@ const TrailingContent = styled(ColoredVisualContainer)`
 `
 
 const DescriptionContainer = styled.span`
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   font-size: ${get('fontSizes.0')};
   // TODO: When rem-based spacing on a 4px scale lands, replace
   // hardcoded '16px' with '${get('lh-12')}'.
diff --git a/src/BranchName.tsx b/src/BranchName.tsx
index b4c8e252d4d..9fbeca0e651 100644
--- a/src/BranchName.tsx
+++ b/src/BranchName.tsx
@@ -8,7 +8,7 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
   ${COMMON};
diff --git a/src/Breadcrumbs.tsx b/src/Breadcrumbs.tsx
index 9b8f7acb467..1a2640aa8fc 100644
--- a/src/Breadcrumbs.tsx
+++ b/src/Breadcrumbs.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.li`
   &::after {
     padding-right: 0.5em;
     padding-left: 0.5em;
-    color: ${get('colors.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     font-size: ${get('fontSizes.1')};
     content: '/';
   }
diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
index ee1ea1cdefd..690ec4927f4 100644
--- a/src/Button/ButtonClose.tsx
+++ b/src/Button/ButtonClose.tsx
@@ -14,7 +14,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   outline: none;
   cursor: pointer;
   border-radius: ${get('radii.2')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};
diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
index 0e3c39c28d3..38a231c67cc 100644
--- a/src/Button/ButtonTableList.tsx
+++ b/src/Button/ButtonTableList.tsx
@@ -31,11 +31,13 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   }
 
   &:disabled {
-    &,
-    &:hover {
-      color: rgba(${get('colors.primer.fg.disabled')}, 0.5);
-      cursor: default;
-    }
+    color: rgba(${get('colors.primer.fg.disabled')}, 0.5);
+    cursor: default;
+  }
+
+  &:hover {
+    color: rgba(${get('colors.fg.muted')}, 0.5);
+    cursor: default;
   }
 
   &:after {
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
index 7576023e197..6b5f9e04e53 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/src/Dialog/ConfirmationDialog.tsx
@@ -65,7 +65,7 @@ const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialog
 const StyledConfirmationBody = styled(Box)`
   font-size: ${get('fontSizes.1')};
   padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   flex-grow: 1;
 `
 const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 4068e08e29b..e94def002b3 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -322,7 +322,7 @@ const Title = styled(Box)`
 const Subtitle = styled(Box)`
   font-size: ${get('fontSizes.0')};
   margin-top: ${get('space.1')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
 `
 const Body = styled(Box)`
   flex-grow: 1;
@@ -386,7 +386,7 @@ const DialogCloseButton = styled(Button)`
   background: transparent;
   border: 0;
   vertical-align: middle;
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   padding: ${get('space.2')};
   align-self: flex-start;
   line-height: normal;
diff --git a/src/FilterList.tsx b/src/FilterList.tsx
index ccf0f15acaa..463f0fabddc 100644
--- a/src/FilterList.tsx
+++ b/src/FilterList.tsx
@@ -33,7 +33,7 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
   overflow: hidden;
   font-size: ${get('fontSizes.1')};
-  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.primer.fg.disabled'))};
+  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))};
   background-color: ${props => (props.selected ? get('colors.accent.emphasis') : '')}!important;
   text-decoration: none;
   text-overflow: ellipsis;
diff --git a/src/Label.tsx b/src/Label.tsx
index 507f4622c50..04816a5e3c0 100644
--- a/src/Label.tsx
+++ b/src/Label.tsx
@@ -7,7 +7,7 @@ import {ComponentProps} from './utils/types'
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
   margin-bottom: -1px; // offsets the 1px border
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
   box-shadow: none;
   ${borderColor};
diff --git a/src/Link.tsx b/src/Link.tsx
index 9e42191db21..a382b445527 100644
--- a/src/Link.tsx
+++ b/src/Link.tsx
@@ -20,7 +20,7 @@ const hoverColor = system({
 })
 
 const Link = styled.a<StyledLinkProps>`
-  color: ${props => (props.muted ? get('colors.primer.fg.disabled')(props) : get('colors.accent.fg')(props))};
+  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
   &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
diff --git a/src/SelectMenu/SelectMenuDivider.tsx b/src/SelectMenu/SelectMenuDivider.tsx
index ff667b1a7ae..069134b7de9 100644
--- a/src/SelectMenu/SelectMenuDivider.tsx
+++ b/src/SelectMenu/SelectMenuDivider.tsx
@@ -8,7 +8,7 @@ const dividerStyles = css`
   margin: 0;
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   background-color: ${get('colors.canvas.subtle')};
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 `
diff --git a/src/SelectMenu/SelectMenuFooter.tsx b/src/SelectMenu/SelectMenuFooter.tsx
index 7656c1c8103..3aa5b1dd350 100644
--- a/src/SelectMenu/SelectMenuFooter.tsx
+++ b/src/SelectMenu/SelectMenuFooter.tsx
@@ -7,7 +7,7 @@ const footerStyles = css`
   margin-top: -1px;
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   text-align: center;
   border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 
diff --git a/src/SelectMenu/SelectMenuItem.tsx b/src/SelectMenu/SelectMenuItem.tsx
index 26bc219f964..bd192cded43 100644
--- a/src/SelectMenu/SelectMenuItem.tsx
+++ b/src/SelectMenu/SelectMenuItem.tsx
@@ -17,7 +17,7 @@ export const listItemStyles = css`
   background-color: ${get('colors.canvas.overlay')};
   border: 0;
   border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   text-decoration: none;
   font-size: ${get('fontSizes.0')};
   font-family: inherit; // needed if user uses a "button" tag
diff --git a/src/SelectMenu/SelectMenuTab.tsx b/src/SelectMenu/SelectMenuTab.tsx
index a16fc41ad83..f986d234eaf 100644
--- a/src/SelectMenu/SelectMenuTab.tsx
+++ b/src/SelectMenu/SelectMenuTab.tsx
@@ -11,7 +11,7 @@ const tabStyles = css`
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: 500;
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   text-align: center;
   background-color: transparent;
   border: 0;
diff --git a/src/SubNav.tsx b/src/SubNav.tsx
index 7751da94cbb..e0f0a889c80 100644
--- a/src/SubNav.tsx
+++ b/src/SubNav.tsx
@@ -104,7 +104,7 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
     transition: 0.2s ease;
 
     .SubNav-octicon {
-      color: ${get('colors.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
     }
   }
 
diff --git a/src/Timeline.tsx b/src/Timeline.tsx
index 810d53b2836..20ae97b66ae 100644
--- a/src/Timeline.tsx
+++ b/src/Timeline.tsx
@@ -58,7 +58,7 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
         height: 16px;
         margin-top: ${get('space.2')};
         margin-bottom: ${get('space.2')};
-        color: ${get('colors.primer.fg.disabled')};
+        color: ${get('colors.fg.muted')};
         background-color: ${get('colors.canvas.default')};
         border: 0;
       }
@@ -102,7 +102,7 @@ const TimelineBody = styled(Box)`
   min-width: 0;
   max-width: 100%;
   margin-top: ${get('space.1')};
-  color: ${get('colors.primer.fg.disabled')};
+  color: ${get('colors.fg.muted')};
   flex: auto;
   font-size: ${get('fontSizes.1')};
   ${sx};
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index adbacd18947..e4a010057ae 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -25,7 +25,7 @@ const DefaultTokenStyled = styled(TokenBase)<TokenProps & {isTokenInteractive: b
   border-color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.border.subtle'))};
   border-style: solid;
   border-width: ${tokenBorderWidthPx}px;
-  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.primer.fg.disabled'))};
+  color: ${props => (props.isSelected ? get('colors.fg.default') : get('colors.fg.muted'))};
   max-width: 100%;
   padding-right: ${props => (!props.hideRemoveButton ? 0 : undefined)};
   position: relative;
diff --git a/src/UnderlineNav.tsx b/src/UnderlineNav.tsx
index a3f7ab13aca..e2cf2406e7e 100644
--- a/src/UnderlineNav.tsx
+++ b/src/UnderlineNav.tsx
@@ -87,7 +87,7 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {
-      color: ${get('colors.primer.fg.disabled')};
+      color: ${get('colors.fg.muted')};
     }
   }
 
diff --git a/src/_TextInputWrapper.tsx b/src/_TextInputWrapper.tsx
index 0a24f1f8671..8173529b7c1 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/_TextInputWrapper.tsx
@@ -60,7 +60,7 @@ const TextInputWrapper = styled.span<StyledWrapperProps>`
 
   .TextInput-icon {
     align-self: center;
-    color: ${get('colors.primer.fg.disabled')};
+    color: ${get('colors.fg.muted')};
     margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index b0028d12e75..c24b72cd80b 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -43,7 +43,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -155,7 +155,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -302,7 +302,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -476,7 +476,7 @@ Array [
 }
 
 .c10 svg {
-  fill: #8c959f;
+  fill: #57606a;
   font-size: 12px;
 }
 
@@ -1047,7 +1047,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1715,7 +1715,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -2383,7 +2383,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -3344,7 +3344,7 @@ Array [
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
diff --git a/src/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/__tests__/__snapshots__/BranchName.test.tsx.snap
index 5afe144a976..031c9fe2ec4 100644
--- a/src/__tests__/__snapshots__/BranchName.test.tsx.snap
+++ b/src/__tests__/__snapshots__/BranchName.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #8c959f;
+  color: #57606a;
   background-color: #ddf4ff;
   border-radius: 6px;
 }
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 5cb3fc969ed..cf49d83fb81 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -817,12 +817,16 @@ exports[`ButtonTableList renders consistently 1`] = `
   text-decoration: underline;
 }
 
-.c0:disabled,
-.c0:disabled:hover {
+.c0:disabled {
   color: rgba(#8c959f,0.5);
   cursor: default;
 }
 
+.c0:hover {
+  color: rgba(#57606a,0.5);
+  cursor: default;
+}
+
 .c0:after {
   display: inline-block;
   margin-left: 4px;
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 25d3d332156..4add54b6e7e 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -68,7 +68,7 @@ Array [
   outline: none;
   cursor: pointer;
   border-radius: 6px;
-  color: #8c959f;
+  color: #57606a;
   position: absolute;
   top: 16px;
   right: 16px;
diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
index 2af556c35de..e8ebaa3f24c 100644
--- a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #8c959f;
+  color: #57606a;
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/src/__tests__/__snapshots__/Label.test.tsx.snap b/src/__tests__/__snapshots__/Label.test.tsx.snap
index 371ea612d40..ef01bc63d37 100644
--- a/src/__tests__/__snapshots__/Label.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Label.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Label respects the "outline" prop 1`] = `
   background-color: #6e7781;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #8c959f;
+  color: #57606a;
   border: 1px solid #d0d7de;
   box-shadow: none;
   background-color: #6e7781;
diff --git a/src/__tests__/__snapshots__/Link.test.tsx.snap b/src/__tests__/__snapshots__/Link.test.tsx.snap
index 747538e558a..e1e15666d1c 100644
--- a/src/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Link.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`Link renders consistently 1`] = `
 
 exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
 .c0 {
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #ffffff;
@@ -143,7 +143,7 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 exports[`Link respectes the "muted" prop 1`] = `
 .c0 {
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
index 70b15337bf4..99460543226 100644
--- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -72,7 +72,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin: 0;
   font-size: 12px;
   font-weight: 600;
-  color: #8c959f;
+  color: #57606a;
   background-color: #f6f8fa;
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
@@ -81,7 +81,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
-  color: #8c959f;
+  color: #57606a;
   text-align: center;
   border-top: 1px solid hsla(210,18%,87%,1);
 }
@@ -102,7 +102,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   background-color: #ffffff;
   border: 0;
   border-bottom: 1px solid hsla(210,18%,87%,1);
-  color: #8c959f;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 12px;
diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 284cc309e58..3abfd7e8c0d 100644
--- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -114,7 +114,7 @@ exports[`SubNav.Link renders consistently 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -179,7 +179,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 02648051102..6e14882d718 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -115,7 +115,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -186,7 +186,7 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -261,7 +261,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -339,7 +339,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -410,7 +410,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index 7053552688f..592bcd6d5a5 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -68,7 +68,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -171,7 +171,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -306,7 +306,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -768,7 +768,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -903,7 +903,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -1365,7 +1365,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -1500,7 +1500,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -1962,7 +1962,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -2097,7 +2097,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -2559,7 +2559,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -2694,7 +2694,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -3157,7 +3157,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -3292,7 +3292,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -3754,7 +3754,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -3839,7 +3839,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   position: relative;
 }
@@ -4068,7 +4068,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -4203,7 +4203,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -4665,7 +4665,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -5267,7 +5267,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #8c959f;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
diff --git a/src/__tests__/__snapshots__/Timeline.test.tsx.snap b/src/__tests__/__snapshots__/Timeline.test.tsx.snap
index 5034f34736f..0d5bc6c3cb6 100644
--- a/src/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   height: 16px;
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #8c959f;
+  color: #57606a;
   background-color: #ffffff;
   border: 0;
 }
diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap
index 1992961e391..03e2d83263d 100644
--- a/src/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Token.test.tsx.snap
@@ -127,7 +127,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -335,7 +335,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -543,7 +543,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -751,7 +751,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -900,7 +900,7 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   position: relative;
 }
@@ -1171,7 +1171,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -2024,7 +2024,7 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   position: relative;
 }
@@ -2798,7 +2798,7 @@ exports[`Token components Token renders all sizes 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -2964,7 +2964,7 @@ exports[`Token components Token renders all sizes 2`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -3130,7 +3130,7 @@ exports[`Token components Token renders all sizes 3`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -3296,7 +3296,7 @@ exports[`Token components Token renders all sizes 4`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
@@ -3414,7 +3414,7 @@ exports[`Token components Token renders consistently 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   position: relative;
 }
@@ -3584,7 +3584,7 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   position: relative;
 }
@@ -3736,7 +3736,7 @@ exports[`Token components Token renders with a remove button 1`] = `
   border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #8c959f;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   position: relative;
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
index ff6cc4d131e..48067ec4fff 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -69,7 +69,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -111,7 +111,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #8c959f;
+  color: #57606a;
 }
 
 .c0.selected {