diff --git a/e b/e
index 9d13efd7e3a34..7b0d38ba9483a 160000
--- a/e
+++ b/e
@@ -1 +1 @@
-Subproject commit 9d13efd7e3a341a7ef092046bc54dd32f1ccd4ea
+Subproject commit 7b0d38ba9483ab2194d6a76c09dc4ce3a4f59954
diff --git a/web/packages/design/src/Button/Button.jsx b/web/packages/design/src/Button/Button.jsx
index ff18e8b7c3707..f08e7c1e41c72 100644
--- a/web/packages/design/src/Button/Button.jsx
+++ b/web/packages/design/src/Button/Button.jsx
@@ -96,7 +96,6 @@ export const kinds = props => {
         border: '1px solid ' + theme.colors.buttons.border.border,
         '&:hover, &:focus': {
           background: theme.colors.buttons.border.hover,
-          border: '1px solid ' + theme.colors.buttons.border.borderHover,
         },
         '&:active': {
           background: theme.colors.buttons.border.active,
diff --git a/web/packages/design/src/CardError/CardError.jsx b/web/packages/design/src/CardError/CardError.jsx
index 6af6b8c019fac..995e315a9b826 100644
--- a/web/packages/design/src/CardError/CardError.jsx
+++ b/web/packages/design/src/CardError/CardError.jsx
@@ -23,7 +23,7 @@ import { Text, Alert, Card } from 'design';
 export default function CardError(props) {
   return (
     <Card
-      color="text.primary"
+      color="text.main"
       bg="levels.elevated"
       width="540px"
       mx="auto"
diff --git a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
index 8a6c1c0475d95..a0dbbaad67b70 100644
--- a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
+++ b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
@@ -51,7 +51,7 @@ exports[`rendering of Error Cards 1`] = `
 
 <div
   class="c0"
-  color="text.primary"
+  color="text.main"
   width="540px"
 >
   <div
diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
index 9e2399974f0f9..bbe48ab84e69a 100644
--- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
+++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -111,21 +111,21 @@ const StyledInput = styled.input`
 
 function fromTheme(props) {
   return {
-    color: props.theme.colors.text.primary,
+    color: props.theme.colors.text.main,
     background:
       props.theme.name === 'dark'
         ? props.theme.colors.levels.sunken
         : props.theme.colors.levels.deep,
 
     '&:hover, &:focus, &:active': {
-      color: props.theme.colors.text.primary,
+      color: props.theme.colors.text.main,
       background:
         props.theme.name === 'dark'
           ? props.theme.colors.spotBackground[0]
           : props.theme.colors.levels.sunken,
     },
     '&::placeholder': {
-      color: props.theme.colors.text.placeholder,
+      color: props.theme.colors.text.muted,
       fontSize: props.theme.fontSizes[1],
     },
   };
diff --git a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
index 4d6742474d517..60e0674ef27c7 100644
--- a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
+++ b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
@@ -76,7 +76,7 @@ export function PageIndicatorText({
   return (
     <Text
       typography="body2"
-      color="text.primary"
+      color="text.main"
       mr={1}
       style={{ whiteSpace: 'nowrap', textTransform: 'uppercase' }}
     >
diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
index 63b55de830364..f69cf2bd8709c 100644
--- a/web/packages/design/src/DataTable/StyledTable.tsx
+++ b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -51,7 +51,7 @@ export const StyledTable = styled.table(
 
   & > thead > tr > th {
     background: ${props.theme.colors.spotBackground[0]};
-    color: ${props.theme.colors.text.primary};
+    color: ${props.theme.colors.text.main};
     cursor: pointer;
     font-size: 10px;
     font-weight: 400;
@@ -70,7 +70,7 @@ export const StyledTable = styled.table(
   }
 
   & > tbody > tr > td {
-    color: ${props.theme.colors.text.primary};
+    color: ${props.theme.colors.text.main};
     line-height: 16px;
   }
 
diff --git a/web/packages/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
index 3a7af0141a0f5..4ffc65660c086 100644
--- a/web/packages/design/src/DataTable/Table.tsx
+++ b/web/packages/design/src/DataTable/Table.tsx
@@ -337,7 +337,7 @@ const EmptyIndicator = ({
         <Text
           typography="paragraph"
           m="4"
-          color="text.primary"
+          color="text.main"
           style={{
             display: 'flex',
             alignItems: 'center',
diff --git a/web/packages/design/src/Dialog/Dialog.jsx b/web/packages/design/src/Dialog/Dialog.jsx
index 37e317d3e13e4..1d84f243846d7 100644
--- a/web/packages/design/src/Dialog/Dialog.jsx
+++ b/web/packages/design/src/Dialog/Dialog.jsx
@@ -62,7 +62,7 @@ const DialogBox = styled.div`
   padding: 32px;
   padding-top: 24px;
   background: ${props => props.theme.colors.levels.surface};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
   display: flex;
diff --git a/web/packages/design/src/Dialog/DialogTitle.jsx b/web/packages/design/src/Dialog/DialogTitle.jsx
index d1cf0ac132ad3..dd179ad678950 100644
--- a/web/packages/design/src/Dialog/DialogTitle.jsx
+++ b/web/packages/design/src/Dialog/DialogTitle.jsx
@@ -19,5 +19,5 @@ import React from 'react';
 import Text from './../Text';
 
 export default function DialogTitle(props) {
-  return <Text typography="h3" color="text.primary" caps {...props} />;
+  return <Text typography="h3" color="text.main" caps {...props} />;
 }
diff --git a/web/packages/design/src/Icon/Icon.jsx b/web/packages/design/src/Icon/Icon.jsx
index 81814a593f9d1..b9bd3a02fed32 100644
--- a/web/packages/design/src/Icon/Icon.jsx
+++ b/web/packages/design/src/Icon/Icon.jsx
@@ -22,7 +22,7 @@ import '../assets/icomoon/style.css';
 const Icon = styled.span`
   display: inline-block;
   transition: color 0.3s;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   ${space} ${width} ${color} ${fontSize} ${lineHeight};
 `;
 
diff --git a/web/packages/design/src/Input/Input.jsx b/web/packages/design/src/Input/Input.jsx
index 07e8c4126e5bb..77b05f0134dee 100644
--- a/web/packages/design/src/Input/Input.jsx
+++ b/web/packages/design/src/Input/Input.jsx
@@ -34,7 +34,7 @@ function error({ hasError, theme }) {
 
 const Input = styled.input`
   appearance: none;
-  border: 1px solid ${props => props.theme.colors.text.placeholder};
+  border: 1px solid ${props => props.theme.colors.text.muted};
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -44,12 +44,12 @@ const Input = styled.input`
   outline: none;
   width: 100%;
   background: ${props => props.theme.colors.levels.surface};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
 
   &:hover,
   &:focus,
   &:active {
-    border: 1px solid ${props => props.theme.colors.text.secondary};
+    border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   }
 
   ::-ms-clear {
@@ -57,7 +57,7 @@ const Input = styled.input`
   }
 
   ::placeholder {
-    color: ${props => props.theme.colors.text.placeholder};
+    color: ${props => props.theme.colors.text.muted};
   }
 
   :read-only {
diff --git a/web/packages/design/src/Label/Label.jsx b/web/packages/design/src/Label/Label.jsx
index 313a82d83e9d7..a1f6d87888f9f 100644
--- a/web/packages/design/src/Label/Label.jsx
+++ b/web/packages/design/src/Label/Label.jsx
@@ -25,7 +25,7 @@ const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
       backgroundColor: theme.colors.spotBackground[0],
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
       fontWeight: 400,
     };
   }
diff --git a/web/packages/design/src/LabelInput/LabelInput.jsx b/web/packages/design/src/LabelInput/LabelInput.jsx
index 0624318d7db29..984a2e491c760 100644
--- a/web/packages/design/src/LabelInput/LabelInput.jsx
+++ b/web/packages/design/src/LabelInput/LabelInput.jsx
@@ -23,7 +23,7 @@ const LabelInput = styled.label`
   color: ${props =>
     props.hasError
       ? props.theme.colors.error.main
-      : props.theme.colors.text.primary};
+      : props.theme.colors.text.main};
   display: block;
   font-size: 11px;
   font-weight: 500;
diff --git a/web/packages/design/src/LabelState/LabelState.jsx b/web/packages/design/src/LabelState/LabelState.jsx
index c100a602a3f7c..46d83d59513e0 100644
--- a/web/packages/design/src/LabelState/LabelState.jsx
+++ b/web/packages/design/src/LabelState/LabelState.jsx
@@ -29,7 +29,7 @@ const kinds = ({ theme, kind, shadow }) => {
 
   if (kind === 'secondary') {
     styles.background = theme.colors.spotBackground[0];
-    styles.color = theme.colors.text.primary;
+    styles.color = theme.colors.text.main;
   }
 
   if (kind === 'warning') {
diff --git a/web/packages/design/src/Menu/MenuItem.jsx b/web/packages/design/src/Menu/MenuItem.jsx
index 828a4c61f801e..e7d6cbe523573 100644
--- a/web/packages/design/src/Menu/MenuItem.jsx
+++ b/web/packages/design/src/Menu/MenuItem.jsx
@@ -35,7 +35,7 @@ const fromTheme = props => {
     fontWeight: values.theme.regular,
 
     '&:hover, &:focus': {
-      color: values.theme.colors.text.primary,
+      color: values.theme.colors.text.main,
       background: values.theme.colors.spotBackground[0],
     },
     '&:active': {
@@ -55,7 +55,7 @@ const MenuItem = styled.div`
   overflow: hidden;
   text-decoration: none;
   white-space: nowrap;
-  color: ${props => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.slightlyMuted};
 
   &:hover,
   &:focus {
diff --git a/web/packages/design/src/Menu/MenuItemIcon.jsx b/web/packages/design/src/Menu/MenuItemIcon.jsx
index bedf8d1f10aba..84b7e1799272f 100644
--- a/web/packages/design/src/Menu/MenuItemIcon.jsx
+++ b/web/packages/design/src/Menu/MenuItemIcon.jsx
@@ -21,7 +21,7 @@ import Icon from './../Icon';
 const MenuItemIcon = styled(Icon)`
   &:hover,
   &:focus {
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
   }
 `;
 
diff --git a/web/packages/design/src/SVGIcon/SVGIcon.tsx b/web/packages/design/src/SVGIcon/SVGIcon.tsx
index 731fa4377e48d..10edc11669bc6 100644
--- a/web/packages/design/src/SVGIcon/SVGIcon.tsx
+++ b/web/packages/design/src/SVGIcon/SVGIcon.tsx
@@ -33,7 +33,7 @@ export function SVGIcon({
       xmlns="http://www.w3.org/2000/svg"
       width={width || size}
       height={height || size}
-      fill={fill || theme.colors.text.primary}
+      fill={fill || theme.colors.text.main}
     >
       {children}
     </svg>
diff --git a/web/packages/design/src/SideNav/SideNavItem.jsx b/web/packages/design/src/SideNav/SideNavItem.jsx
index c39baefd1a23b..150221ce46979 100644
--- a/web/packages/design/src/SideNav/SideNavItem.jsx
+++ b/web/packages/design/src/SideNav/SideNavItem.jsx
@@ -22,17 +22,17 @@ import Flex from './../Flex';
 const fromTheme = ({ theme }) => {
   return {
     background: theme.colors.levels.surface,
-    color: theme.colors.text.secondary,
+    color: theme.colors.text.slightlyMuted,
     fontSize: theme.fontSizes[1],
     fontWeight: theme.bold,
     '&:active, &.active': {
       borderLeftColor: theme.colors.brand,
       background: theme.colors.levels.elevated,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     },
     '&:hover, &:focus': {
       background: theme.colors.levels.elevated,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     },
   };
 };
@@ -56,7 +56,7 @@ SideNavItem.defaultProps = {
   pl: 9,
   pr: 5,
   bg: 'levels.surfaceSecondary',
-  color: 'text.primary',
+  color: 'text.main',
 };
 
 export default SideNavItem;
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.tsx b/web/packages/design/src/SlideTabs/SlideTabs.tsx
index d3e289f47ee62..c659ce86524c4 100644
--- a/web/packages/design/src/SlideTabs/SlideTabs.tsx
+++ b/web/packages/design/src/SlideTabs/SlideTabs.tsx
@@ -121,7 +121,7 @@ const TabNav = styled.nav`
   display: flex;
   height: ${props => (props.size === 'xlarge' ? '80px' : '47px')};
   justify-content: space-around;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   .selected {
     color: ${props => props.theme.colors.text.primaryInverse};
     transition: color 0.2s ease-in 0s;
diff --git a/web/packages/design/src/StepSlider/StepSlider.story.tsx b/web/packages/design/src/StepSlider/StepSlider.story.tsx
index 38a02681914d6..8d2b19673b26a 100644
--- a/web/packages/design/src/StepSlider/StepSlider.story.tsx
+++ b/web/packages/design/src/StepSlider/StepSlider.story.tsx
@@ -28,7 +28,7 @@ const singleFlow = { default: [Body1, Body2] };
 export const SingleStaticFlow = () => {
   return (
     <Card bg="levels.surface" my="5" mx="auto" width={464}>
-      <Text typography="h3" pt={5} textAlign="center" color="text.primary">
+      <Text typography="h3" pt={5} textAlign="center" color="text.main">
         Static Title
       </Text>
       <StepSlider<typeof singleFlow>
@@ -76,7 +76,7 @@ export const MultiCardFlow = () => {
 function MainStep1({ next, refCallback, changeFlow }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-primary1">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         First Step
       </Text>
       <Text mb={3}>
@@ -111,7 +111,7 @@ function MainStep1({ next, refCallback, changeFlow }: ViewProps) {
 function MainStep2({ next, prev, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-primary2">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Second Step
       </Text>
       <Text mb={3}>
@@ -164,7 +164,7 @@ function MainStep2({ next, prev, refCallback }: ViewProps) {
 function OtherStep1({ changeFlow, next: onNext, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-secondary1">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Some Other Flow Title
       </Text>
       <Text mb={3}>
@@ -201,7 +201,7 @@ function OtherStep1({ changeFlow, next: onNext, refCallback }: ViewProps) {
 function FinalStep({ prev, refCallback }: ViewProps) {
   return (
     <Box p="6" ref={refCallback} data-testid="multi-final">
-      <Text typography="h2" mb={3} textAlign="center" color="text.primary" bold>
+      <Text typography="h2" mb={3} textAlign="center" color="text.main" bold>
         Done Step
       </Text>
       <Text mb={3}>
diff --git a/web/packages/design/src/ThemeProvider/globals.js b/web/packages/design/src/ThemeProvider/globals.js
index 60c44708b67e5..d8e000ccdcd51 100644
--- a/web/packages/design/src/ThemeProvider/globals.js
+++ b/web/packages/design/src/ThemeProvider/globals.js
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     margin: 0;
     background-color: ${props => props.theme.colors.levels.sunken};
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
     padding: 0;
   }
 
diff --git a/web/packages/design/src/theme/darkTheme.ts b/web/packages/design/src/theme/darkTheme.ts
index a5cd0bfa92d58..ee6b4f3bdd73e 100644
--- a/web/packages/design/src/theme/darkTheme.ts
+++ b/web/packages/design/src/theme/darkTheme.ts
@@ -58,20 +58,20 @@ const colors = {
 
   text: {
     // The most important text.
-    primary: '#FFFFFF',
-    // Secondary text.
-    secondary: 'rgba(255, 255, 255, 0.56)',
-    // Placeholder text for forms.
-    placeholder: 'rgba(255, 255, 255, 0.24)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(255, 255, 255, 0.18)',
+    main: '#FFFFFF',
+    // Slightly muted text.
+    slightlyMuted: 'rgba(255, 255, 255, 0.72)',
+    // Muted text. Also used as placeholder text in forms.
+    muted: 'rgba(255, 255, 255, 0.54)',
+    // Disabled text.
+    disabled: 'rgba(255, 255, 255, 0.36)',
     // For text on  a background that is on a color opposite to the theme. For dark theme,
     // this would mean text that is on a light background.
     primaryInverse: '#000000',
   },
 
   buttons: {
-    text: 'rgba(255,255,255,0.87)',
+    text: '#FFFFFF',
     textDisabled: 'rgba(255, 255, 255, 0.3)',
     bgDisabled: 'rgba(255, 255, 255, 0.12)',
 
diff --git a/web/packages/design/src/theme/lightTheme.ts b/web/packages/design/src/theme/lightTheme.ts
index 58d01c15bd9c2..c238d23d78fc6 100644
--- a/web/packages/design/src/theme/lightTheme.ts
+++ b/web/packages/design/src/theme/lightTheme.ts
@@ -54,13 +54,13 @@ const colors = {
 
   text: {
     // The most important text.
-    primary: '#000000',
-    // Secondary text.
-    secondary: 'rgba(0,0,0,0.56)',
-    // Placeholder text for forms.
-    placeholder: 'rgba(0,0,0,0.24)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0,0,0,0.18)',
+    main: '#000000',
+    // Slightly muted text.
+    slightlyMuted: 'rgba(0,0,0,0.72)',
+    // Muted text. Also used as placeholder text in forms.
+    muted: 'rgba(0,0,0,0.54)',
+    // Disabled text.
+    disabled: 'rgba(0,0,0,0.36)',
     // For text on  a background that is on a color opposite to the theme. For dark theme,
     // this would mean text that is on a light background.
     primaryInverse: '#FFFFFF',
diff --git a/web/packages/design/src/theme/themeColors.story.js b/web/packages/design/src/theme/themeColors.story.js
index 4947202d96cf8..2037ffe2e15db 100644
--- a/web/packages/design/src/theme/themeColors.story.js
+++ b/web/packages/design/src/theme/themeColors.story.js
@@ -157,82 +157,85 @@ const ColorsComponent = () => {
         <Flex width="fit-content" flexDirection="row">
           <Flex
             flexDirection="column"
-            border={`1px solid ${theme.colors.text.placeholder}`}
+            border={`1px solid ${theme.colors.text.muted}`}
             bg={theme.colors.levels.surface}
             py={3}
             px={3}
             mr={3}
           >
-            <Text>theme.colors.text.primary</Text>
-            <Text typography="h1" color={theme.colors.text.primary}>
+            <Text>theme.colors.text.main</Text>
+            <Text typography="h1" color={theme.colors.text.main}>
               Primary
             </Text>
-            <Text typography="h2" color={theme.colors.text.primary}>
+            <Text typography="h2" color={theme.colors.text.main}>
               Primary
             </Text>
-            <Text typography="h3" color={theme.colors.text.primary}>
+            <Text typography="h3" color={theme.colors.text.main}>
               Primary
             </Text>
-            <Text typography="h4" color={theme.colors.text.primary}>
+            <Text typography="h4" color={theme.colors.text.main}>
               Primary
             </Text>
-            <Text typography="paragraph" color={theme.colors.text.primary}>
+            <Text typography="paragraph" color={theme.colors.text.main}>
               Primary
             </Text>
           </Flex>
           <Flex
             flexDirection="column"
-            border={`1px solid ${theme.colors.text.placeholder}`}
+            border={`1px solid ${theme.colors.text.muted}`}
             bg={theme.colors.levels.surface}
             py={3}
             px={3}
             mr={3}
           >
-            <Text>theme.colors.text.secondary</Text>
-            <Text typography="h1" color={theme.colors.text.secondary}>
+            <Text>theme.colors.text.slightlyMuted</Text>
+            <Text typography="h1" color={theme.colors.text.slightlyMuted}>
               Secondary
             </Text>
-            <Text typography="h2" color={theme.colors.text.secondary}>
+            <Text typography="h2" color={theme.colors.text.slightlyMuted}>
               Secondary
             </Text>
-            <Text typography="h3" color={theme.colors.text.secondary}>
+            <Text typography="h3" color={theme.colors.text.slightlyMuted}>
               Secondary
             </Text>
-            <Text typography="h4" color={theme.colors.text.secondary}>
+            <Text typography="h4" color={theme.colors.text.slightlyMuted}>
               Secondary
             </Text>
-            <Text typography="paragraph" color={theme.colors.text.secondary}>
+            <Text
+              typography="paragraph"
+              color={theme.colors.text.slightlyMuted}
+            >
               Secondary
             </Text>
           </Flex>
           <Flex
             flexDirection="column"
-            border={`1px solid ${theme.colors.text.placeholder}`}
+            border={`1px solid ${theme.colors.text.muted}`}
             bg={theme.colors.levels.surface}
             py={3}
             px={3}
             mr={3}
           >
-            <Text>theme.colors.text.placeholder</Text>
-            <Text typography="h1" color={theme.colors.text.placeholder}>
+            <Text>theme.colors.text.muted</Text>
+            <Text typography="h1" color={theme.colors.text.muted}>
               Placeholder
             </Text>
-            <Text typography="h2" color={theme.colors.text.placeholder}>
+            <Text typography="h2" color={theme.colors.text.muted}>
               Placeholder
             </Text>
-            <Text typography="h3" color={theme.colors.text.placeholder}>
+            <Text typography="h3" color={theme.colors.text.muted}>
               Placeholder
             </Text>
-            <Text typography="h4" color={theme.colors.text.placeholder}>
+            <Text typography="h4" color={theme.colors.text.muted}>
               Placeholder
             </Text>
-            <Text typography="paragraph" color={theme.colors.text.placeholder}>
+            <Text typography="paragraph" color={theme.colors.text.muted}>
               Placeholder
             </Text>
           </Flex>
           <Flex
             flexDirection="column"
-            border={`1px solid ${theme.colors.text.placeholder}`}
+            border={`1px solid ${theme.colors.text.muted}`}
             bg={theme.colors.levels.surface}
             py={3}
             px={3}
@@ -257,8 +260,8 @@ const ColorsComponent = () => {
           </Flex>
           <Flex
             flexDirection="column"
-            border={`1px solid ${theme.colors.text.placeholder}`}
-            bg={theme.colors.text.primary}
+            border={`1px solid ${theme.colors.text.muted}`}
+            bg={theme.colors.text.main}
             py={3}
             px={3}
             mr={3}
@@ -301,7 +304,7 @@ function ColorsBox({ colors, themeType = null, ...styles }) {
       <Flex flexWrap="wrap" key={key} width="260px" mb={3}>
         <Box
           css={`
-            color: ${props => props.theme.colors.text.secondary};
+            color: ${props => props.theme.colors.text.slightlyMuted};
           `}
         >
           {fullPath}
@@ -332,7 +335,7 @@ function SingleColorBox({ color, path, ...styles }) {
     <Flex flexWrap="wrap" key={path} width="260px" mb={3}>
       <Box
         css={`
-          color: ${props => props.theme.colors.text.secondary};
+          color: ${props => props.theme.colors.text.slightlyMuted};
         `}
       >
         {path}
diff --git a/web/packages/shared/components/Editor/Editor.tsx b/web/packages/shared/components/Editor/Editor.tsx
index 166ed7efcaed8..cc23ab95728ba 100644
--- a/web/packages/shared/components/Editor/Editor.tsx
+++ b/web/packages/shared/components/Editor/Editor.tsx
@@ -315,6 +315,7 @@ const LineNumber = styled.div<LineNumberProps>`
 
 const Code = styled.div`
   width: 100%;
+  color: white;
 `;
 
 const ActiveLine = styled.div`
diff --git a/web/packages/shared/components/Editor/Tabs.tsx b/web/packages/shared/components/Editor/Tabs.tsx
index 204e74217b8df..dffe92e448b13 100644
--- a/web/packages/shared/components/Editor/Tabs.tsx
+++ b/web/packages/shared/components/Editor/Tabs.tsx
@@ -33,7 +33,7 @@ export function Tabs(props: TabsProps) {
       onClick={() => props.onSelect(index)}
     >
       <TabIcon>
-        <Icons.Code />
+        <Icons.Code color="white" />
       </TabIcon>
       {name}
     </Tab>
@@ -52,6 +52,7 @@ export const Tab = styled.div<{ active: boolean }>`
   padding: 8px 20px 10px 15px;
   cursor: pointer;
   position: relative;
+  color: white;
 
   &:after {
     content: '';
diff --git a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
index fedcc22244d3f..18570bdfbab1c 100644
--- a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
+++ b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`snapshot tests 1`] = `
 
 .c3 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -40,7 +40,7 @@ exports[`snapshot tests 1`] = `
 .c3:hover,
 .c3:focus,
 .c3:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c3::-ms-clear {
@@ -48,7 +48,7 @@ exports[`snapshot tests 1`] = `
 }
 
 .c3::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c3:read-only {
@@ -56,8 +56,8 @@ exports[`snapshot tests 1`] = `
 }
 
 .c3:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c3:hover,
diff --git a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
index d0110bb51e49c..148c50f354eed 100644
--- a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
+++ b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 
 .c3 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -88,7 +88,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 .c3:hover,
 .c3:focus,
 .c3:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c3::-ms-clear {
@@ -96,7 +96,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c3::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c3:read-only {
@@ -104,8 +104,8 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c3:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c2 {
@@ -151,20 +151,20 @@ exports[`auth2faType "on" should render form with hardware key as first option i
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c8 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8 .react-select__control:hover,
 .c8 .react-select__control:focus,
 .c8 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -185,7 +185,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c8 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -199,7 +199,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c8 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8 .react-select__multi-value {
@@ -245,7 +245,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 }
 
 .c8 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c8 .react-select__clear-indicator:hover,
@@ -279,20 +279,20 @@ exports[`auth2faType "on" should render form with hardware key as first option i
 
 .c8 .react-select--is-disabled,
 .c8 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c8 .react-select--is-disabled .react-select__single-value,
 .c8 .react-select__control--is-disabled .react-select__single-value,
 .c8 .react-select--is-disabled .react-select__placeholder,
 .c8 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c8 .react-select--is-disabled .react-select__indicator,
 .c8 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div>
@@ -513,7 +513,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 
 .c3 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -530,7 +530,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 .c3:hover,
 .c3:focus,
 .c3:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c3::-ms-clear {
@@ -538,7 +538,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c3::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c3:read-only {
@@ -546,8 +546,8 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c3:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c2 {
@@ -593,20 +593,20 @@ exports[`auth2faType "optional" should render form with hardware key as first op
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c8 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8 .react-select__control:hover,
 .c8 .react-select__control:focus,
 .c8 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -627,7 +627,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c8 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -641,7 +641,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c8 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8 .react-select__multi-value {
@@ -687,7 +687,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 }
 
 .c8 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c8 .react-select__clear-indicator:hover,
@@ -721,20 +721,20 @@ exports[`auth2faType "optional" should render form with hardware key as first op
 
 .c8 .react-select--is-disabled,
 .c8 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c8 .react-select--is-disabled .react-select__single-value,
 .c8 .react-select__control--is-disabled .react-select__single-value,
 .c8 .react-select--is-disabled .react-select__placeholder,
 .c8 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c8 .react-select--is-disabled .react-select__indicator,
 .c8 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div>
diff --git a/web/packages/shared/components/MenuAction/MenuActionButton.tsx b/web/packages/shared/components/MenuAction/MenuActionButton.tsx
index fcaa5eb511558..beb114348ab4b 100644
--- a/web/packages/shared/components/MenuAction/MenuActionButton.tsx
+++ b/web/packages/shared/components/MenuAction/MenuActionButton.tsx
@@ -55,7 +55,7 @@ export default class MenuActionIcon extends React.Component<Props> {
           {...buttonProps}
         >
           OPTIONS
-          <CarrotDown ml={2} mr={-2} fontSize="2" color="text.secondary" />
+          <CarrotDown ml={2} mr={-2} fontSize="2" color="text.slightlyMuted" />
         </ButtonBorder>
         <Menu
           getContentAnchorEl={null}
diff --git a/web/packages/shared/components/MenuLogin/MenuLogin.tsx b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
index b6e8193fec6e0..01b76c67e9368 100644
--- a/web/packages/shared/components/MenuLogin/MenuLogin.tsx
+++ b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
@@ -81,7 +81,7 @@ export const MenuLogin = React.forwardRef<MenuLoginHandle, MenuLoginProps>(
           onClick={onOpen}
         >
           CONNECT
-          <CarrotDown ml={2} mr={-2} fontSize="2" color="text.secondary" />
+          <CarrotDown ml={2} mr={-2} fontSize="2" color="text.slightlyMuted" />
         </ButtonBorder>
         <Menu
           anchorOrigin={anchorOrigin}
@@ -144,9 +144,8 @@ function getLoginItemListContent(
     case 'processing':
       return (
         <Indicator
-          css={({ theme }) => `
+          css={`
             align-self: center;
-            color: ${theme.colors.brand}
           `}
         />
       );
@@ -185,7 +184,7 @@ const StyledButton = styled.button`
 
 const StyledMenuItem = styled(MenuItem)(
   ({ theme }) => `
-  color: ${theme.colors.text.secondary};
+  color: ${theme.colors.text.slightlyMuted};
   background: transparent;
   font-size: 12px;
   border-bottom: 1px solid ${theme.colors.spotBackground[0]};
@@ -201,20 +200,20 @@ const StyledMenuItem = styled(MenuItem)(
 const Input = styled.input(
   ({ theme }) => `
   background: transparent;
-  border: 1px solid ${theme.colors.text.placeholder};
+  border: 1px solid ${theme.colors.text.muted};
   border-radius: 4px;
   box-sizing: border-box;
-  color: ${theme.colors.text.primary};
+  color: ${theme.colors.text.main};
   height: 32px;
   outline: none;
 
   &:focus, &:hover {
-    border 1px solid ${theme.colors.text.secondary};
+    border 1px solid ${theme.colors.text.slightlyMuted};
     outline: none;
   }
 
   ::placeholder {
-    color: ${theme.colors.text.placeholder};
+    color: ${theme.colors.text.muted};
   }
 `,
   space
diff --git a/web/packages/shared/components/Notification/Notification.tsx b/web/packages/shared/components/Notification/Notification.tsx
index 89e4d5b7430d2..3555a27db43be 100644
--- a/web/packages/shared/components/Notification/Notification.tsx
+++ b/web/packages/shared/components/Notification/Notification.tsx
@@ -172,7 +172,7 @@ function getRenderedContent(
         <Text
           fontSize={13}
           lineHeight={20}
-          color="text.secondary"
+          color="text.slightlyMuted"
           css={longerTextCss}
         >
           {content.list && <List items={content.list} />}
@@ -236,7 +236,7 @@ const Container = styled(Flex)`
   min-height: 40px;
   width: 320px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   border-radius: 4px;
   cursor: pointer;
 `;
diff --git a/web/packages/shared/components/Search/SearchPanel.tsx b/web/packages/shared/components/Search/SearchPanel.tsx
index 65f5ee7610e74..db328fe8def7d 100644
--- a/web/packages/shared/components/Search/SearchPanel.tsx
+++ b/web/packages/shared/components/Search/SearchPanel.tsx
@@ -139,7 +139,7 @@ export function PageIndicatorText({
   return (
     <Text
       typography="body2"
-      color="text.contrast"
+      color="text.main"
       style={{ textTransform: 'uppercase' }}
       mr={1}
     >
diff --git a/web/packages/shared/components/Select/DarkStyledSelect.tsx b/web/packages/shared/components/Select/DarkStyledSelect.tsx
index 4103897aadd15..adf6443608149 100644
--- a/web/packages/shared/components/Select/DarkStyledSelect.tsx
+++ b/web/packages/shared/components/Select/DarkStyledSelect.tsx
@@ -26,14 +26,14 @@ const StyledDarkSelect = styled(StyledSelect)(
     padding: 0 8px;
   }
   .react-select__single-value {
-    color: ${theme.colors.text.primary}
+    color: ${theme.colors.text.main}
   }
   
   .react-select__control {
     min-height: 34px;
     height: 34px;
     border-color: rgba(255, 255, 255, 0.24);
-    color: ${theme.colors.text.secondary};
+    color: ${theme.colors.text.slightlyMuted};
     &:focus, &:active {
       background-color: ${theme.colors.levels.elevated};
     }
@@ -41,15 +41,15 @@ const StyledDarkSelect = styled(StyledSelect)(
       border-color: rgba(255, 255, 255, 0.24);
       background-color: ${theme.colors.levels.elevated};
       .react-select__dropdown-indicator {
-        color: ${theme.colors.text.primary};
+        color: ${theme.colors.text.main};
       }
     }
     .react-select__indicator,
     .react-select__dropdown-indicator {
       padding: 4px 8px;
-      color: ${theme.colors.text.primary};
+      color: ${theme.colors.text.main};
       &:hover {
-        color: ${theme.colors.text.primary};
+        color: ${theme.colors.text.main};
       }
     }
   }
@@ -70,10 +70,10 @@ const StyledDarkSelect = styled(StyledSelect)(
     }
   }
   .react-select__input {
-    color: ${theme.colors.text.primary}
+    color: ${theme.colors.text.main}
   }
   .react-select__placeholder {
-    color: ${theme.colors.text.secondary}
+    color: ${theme.colors.text.slightlyMuted}
   }
   .react-select__option {
     padding: 4px 12px;
@@ -84,17 +84,17 @@ const StyledDarkSelect = styled(StyledSelect)(
   }
   .react-select__multi-value {
     background-color: ${theme.colors.levels.sunkenSecondary};
-    border: 1px solid ${theme.colors.text.placeholder};
+    border: 1px solid ${theme.colors.text.muted};
   }
   .react-select__multi-value__label {
-    color: ${theme.colors.text.primary};
+    color: ${theme.colors.text.main};
     padding: 0 6px;
   }
   .react-select--is-disabled {
     .react-select__single-value,
     .react-select__placeholder,
     .react-select__indicator {
-      color: ${theme.colors.text.placeholder};
+      color: ${theme.colors.text.muted};
     }
   }
 `
diff --git a/web/packages/shared/components/Select/Select.tsx b/web/packages/shared/components/Select/Select.tsx
index 7b97dacc8fc16..65541b19bf2b5 100644
--- a/web/packages/shared/components/Select/Select.tsx
+++ b/web/packages/shared/components/Select/Select.tsx
@@ -66,7 +66,7 @@ export const StyledSelect = styled.div`
     font-size: 14px;
     outline: none;
     width: 100%;
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
     background-color: transparent;
     margin-bottom: 0px;
     border-radius: 4px;
@@ -76,7 +76,7 @@ export const StyledSelect = styled.div`
     outline: none;
     min-height: 40px;
     height: fit-content;
-    border: 1px solid ${props => props.theme.colors.text.placeholder};
+    border: 1px solid ${props => props.theme.colors.text.muted};
     border-radius: 4px;
     background-color: transparent;
     box-shadow: none;
@@ -91,18 +91,18 @@ export const StyledSelect = styled.div`
     }}
 
     .react-select__dropdown-indicator {
-      color: ${props => props.theme.colors.text.placeholder};
+      color: ${props => props.theme.colors.text.muted};
     }
 
     &:hover,
     &:focus,
     &:active {
-      border: 1px solid ${props => props.theme.colors.text.secondary};
+      border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
       background-color: ${props => props.theme.colors.spotBackground[0]};
       cursor: pointer;
 
       .react-select__dropdown-indicator {
-        color: ${props => props.theme.colors.text.primary};
+        color: ${props => props.theme.colors.text.main};
       }
     }
 
@@ -111,37 +111,37 @@ export const StyledSelect = styled.div`
       &:hover,
       &:focus,
       &:active {
-        color: ${props => props.theme.colors.text.primary};
+        color: ${props => props.theme.colors.text.main};
       }
     }
   }
 
   .react-select__control--is-focused {
-    border-color: ${props => props.theme.colors.text.secondary};
+    border-color: ${props => props.theme.colors.text.slightlyMuted};
     background-color: ${props => props.theme.colors.spotBackground[0]};
     cursor: pointer;
 
     .react-select__dropdown-indicator {
-      color: ${props => props.theme.colors.text.primary};
+      color: ${props => props.theme.colors.text.main};
     }
   }
 
   .react-select__single-value {
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
   }
 
   .react-select__placeholder {
-    color: ${props => props.theme.colors.text.placeholder};
+    color: ${props => props.theme.colors.text.muted};
   }
 
   .react-select__multi-value {
     background-color: ${props => props.theme.colors.spotBackground[1]};
     .react-select__multi-value__label {
-      color: ${props => props.theme.colors.text.primary};
+      color: ${props => props.theme.colors.text.main};
       padding: 0 6px;
     }
     .react-select__multi-value__remove {
-      color: ${props => props.theme.colors.text.primary};
+      color: ${props => props.theme.colors.text.main};
       &:hover {
         background-color: ${props => props.theme.colors.spotBackground[0]};
         color: ${props => props.theme.colors.error.main};
@@ -175,7 +175,7 @@ export const StyledSelect = styled.div`
   }
 
   .react-select__clear-indicator {
-    color: ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.slightlyMuted};
     &:hover,
     &:focus {
       background-color: ${props => props.theme.colors.spotBackground[0]};
diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
index afcaa2e1e29ab..41accdd8f980c 100644
--- a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
@@ -169,7 +169,7 @@ export function AddDevice({
                     <Text fontSize={1} textAlign="center" mt={2}>
                       Scan the QR Code with any authenticator app and enter the
                       generated code.{' '}
-                      <Text color="text.secondary">
+                      <Text color="text.slightlyMuted">
                         We recommend{' '}
                         <Link
                           href="https://authy.com/download/"
diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/__snapshots__/AddDevice.story.test.tsx.snap b/web/packages/teleport/src/Account/ManageDevices/AddDevice/__snapshots__/AddDevice.story.test.tsx.snap
index b9c727145bc87..4b635969b94b7 100644
--- a/web/packages/teleport/src/Account/ManageDevices/AddDevice/__snapshots__/AddDevice.story.test.tsx.snap
+++ b/web/packages/teleport/src/Account/ManageDevices/AddDevice/__snapshots__/AddDevice.story.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -126,7 +126,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 
 .c17 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -143,7 +143,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 .c17:hover,
 .c17:focus,
 .c17:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c17::-ms-clear {
@@ -151,7 +151,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 }
 
 .c17::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c17:read-only {
@@ -159,8 +159,8 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 }
 
 .c17:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c12 {
@@ -279,20 +279,20 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c13 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c13 .react-select__control:hover,
 .c13 .react-select__control:focus,
 .c13 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -313,7 +313,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 }
 
 .c13 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -327,7 +327,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 }
 
 .c13 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c13 .react-select__multi-value {
@@ -373,7 +373,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 }
 
 .c13 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c13 .react-select__clear-indicator:hover,
@@ -407,20 +407,20 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
 
 .c13 .react-select--is-disabled,
 .c13 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c13 .react-select--is-disabled .react-select__single-value,
 .c13 .react-select__control--is-disabled .react-select__single-value,
 .c13 .react-select--is-disabled .react-select__placeholder,
 .c13 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c13 .react-select--is-disabled .react-select__indicator,
 .c13 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c7 {
@@ -459,7 +459,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Add New Two-Factor Device
           </div>
@@ -768,7 +768,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -811,7 +811,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 
 .c18 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -828,7 +828,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 .c18:hover,
 .c18:focus,
 .c18:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c18::-ms-clear {
@@ -836,7 +836,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 }
 
 .c18::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c18:read-only {
@@ -844,8 +844,8 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 }
 
 .c18:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c13 {
@@ -964,20 +964,20 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c14 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c14 .react-select__control:hover,
 .c14 .react-select__control:focus,
 .c14 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -998,7 +998,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 }
 
 .c14 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1012,7 +1012,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 }
 
 .c14 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c14 .react-select__multi-value {
@@ -1058,7 +1058,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 }
 
 .c14 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c14 .react-select__clear-indicator:hover,
@@ -1092,20 +1092,20 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
 
 .c14 .react-select--is-disabled,
 .c14 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c14 .react-select--is-disabled .react-select__single-value,
 .c14 .react-select__control--is-disabled .react-select__single-value,
 .c14 .react-select--is-disabled .react-select__placeholder,
 .c14 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c14 .react-select--is-disabled .react-select__indicator,
 .c14 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c8 {
@@ -1144,7 +1144,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Add New Two-Factor Device
           </div>
@@ -1460,7 +1460,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -1507,12 +1507,12 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c19 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1529,7 +1529,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 .c19:hover,
 .c19:focus,
 .c19:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c19::-ms-clear {
@@ -1537,7 +1537,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 }
 
 .c19::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c19:read-only {
@@ -1545,8 +1545,8 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 }
 
 .c19:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c15 {
@@ -1675,20 +1675,20 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c16 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c16 .react-select__control:hover,
 .c16 .react-select__control:focus,
 .c16 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1709,7 +1709,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 }
 
 .c16 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1723,7 +1723,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 }
 
 .c16 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c16 .react-select__multi-value {
@@ -1769,7 +1769,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 }
 
 .c16 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c16 .react-select__clear-indicator:hover,
@@ -1803,20 +1803,20 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
 
 .c16 .react-select--is-disabled,
 .c16 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c16 .react-select--is-disabled .react-select__single-value,
 .c16 .react-select__control--is-disabled .react-select__single-value,
 .c16 .react-select--is-disabled .react-select__placeholder,
 .c16 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c16 .react-select--is-disabled .react-select__indicator,
 .c16 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c8 {
@@ -1855,7 +1855,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Add New Two-Factor Device
           </div>
@@ -1886,7 +1886,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
                
               <div
                 class="c11"
-                color="text.secondary"
+                color="text.slightlyMuted"
               >
                 We recommend
                  
diff --git a/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap b/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
index d4f5e7513af91..c0c2b37b9a677 100644
--- a/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
+++ b/web/packages/teleport/src/Account/ManageDevices/__snapshots__/ManageDevices.story.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`render device dashboard 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -72,7 +72,6 @@ exports[`render device dashboard 1`] = `
 .c16:hover,
 .c16:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c16:active {
@@ -292,7 +291,7 @@ exports[`render device dashboard 1`] = `
 }
 
 .c8::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -605,7 +604,7 @@ exports[`render failed state for creating restricted privilege token 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -616,7 +615,6 @@ exports[`render failed state for creating restricted privilege token 1`] = `
 .c17:hover,
 .c17:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c17:active {
@@ -836,7 +834,7 @@ exports[`render failed state for creating restricted privilege token 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
diff --git a/web/packages/teleport/src/Apps/AppList/AwsLaunchButton/AwsLaunchButton.tsx b/web/packages/teleport/src/Apps/AppList/AwsLaunchButton/AwsLaunchButton.tsx
index 8b3b023c05560..7266e3284f607 100644
--- a/web/packages/teleport/src/Apps/AppList/AwsLaunchButton/AwsLaunchButton.tsx
+++ b/web/packages/teleport/src/Apps/AppList/AwsLaunchButton/AwsLaunchButton.tsx
@@ -51,7 +51,7 @@ export default class AwsLaunchButton extends React.Component<Props> {
           onClick={this.onOpen}
         >
           LAUNCH
-          <CarrotDown ml={1} fontSize={2} color="text.secondary" />
+          <CarrotDown ml={1} fontSize={2} color="text.slightlyMuted" />
         </ButtonBorder>
         <Menu
           menuListCss={() => ({
@@ -122,7 +122,7 @@ function RoleItemList({
         fontSize="11px"
         mb="2"
         css={`
-          color: ${props => props.theme.colors.text.primary};
+          color: ${props => props.theme.colors.text.main};
           background: ${props => props.theme.colors.spotBackground[2]};
         `}
       >
@@ -148,13 +148,13 @@ type Props = {
 
 const StyledMenuItem = styled(MenuItem)(
   ({ theme }) => `
-  color: ${theme.colors.text.secondary};
+  color: ${theme.colors.text.slightlyMuted};
   font-size: 12px;
   border-bottom: 1px solid ${theme.colors.spotBackground[0]};
   min-height: 32px;
   &:hover {
     background: ${theme.colors.spotBackground[0]};
-    color: ${theme.colors.text.primary};
+    color: ${theme.colors.text.main};
   }
 
   :last-child {
diff --git a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
index a38334a6349af..6919ccaf44615 100644
--- a/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
+++ b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`empty state for enterprise, can create 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   min-height: 32px;
@@ -100,7 +100,6 @@ exports[`empty state for enterprise, can create 1`] = `
 .c12:hover,
 .c12:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c12:active {
@@ -318,7 +317,7 @@ exports[`failed state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -330,7 +329,6 @@ exports[`failed state 1`] = `
 .c30:hover,
 .c30:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c30:active {
@@ -361,7 +359,7 @@ exports[`failed state 1`] = `
   transition: color 0.3s;
   color: #FFFFFF;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -389,7 +387,7 @@ exports[`failed state 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c27 {
@@ -714,7 +712,7 @@ exports[`failed state 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -879,7 +877,7 @@ exports[`failed state 1`] = `
           >
             <div
               class="c23"
-              color="text.contrast"
+              color="text.main"
               style="text-transform: uppercase;"
             >
               Showing 
@@ -1179,7 +1177,7 @@ exports[`failed state 1`] = `
                 LAUNCH
                 <span
                   class="c20 c34 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -1350,7 +1348,7 @@ exports[`loaded state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -1362,7 +1360,6 @@ exports[`loaded state 1`] = `
 .c30:hover,
 .c30:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c30:active {
@@ -1393,7 +1390,7 @@ exports[`loaded state 1`] = `
   transition: color 0.3s;
   color: #FFFFFF;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -1421,7 +1418,7 @@ exports[`loaded state 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c27 {
@@ -1746,7 +1743,7 @@ exports[`loaded state 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1917,7 +1914,7 @@ exports[`loaded state 1`] = `
           >
             <div
               class="c23"
-              color="text.contrast"
+              color="text.main"
               style="text-transform: uppercase;"
             >
               Showing 
@@ -2217,7 +2214,7 @@ exports[`loaded state 1`] = `
                 LAUNCH
                 <span
                   class="c20 c34 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -2410,7 +2407,7 @@ exports[`readonly empty state 1`] = `
     </div>
     <div
       class="c3"
-      color="text.primary"
+      color="text.main"
     >
       <div
         class="c4"
diff --git a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
index d56d54099e3b9..e8999e75db254 100644
--- a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
+++ b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
@@ -270,7 +270,7 @@ const StyledCliIcon = styled(Icons.Cli)(
   props => `
   background: ${props.theme.colors.levels.deep};
   border: 2px solid ${props.theme.colors.brand};
-  color: ${props.theme.colors.text.secondary};
+  color: ${props.theme.colors.text.slightlyMuted};
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -285,7 +285,7 @@ const StyledCliIcon = styled(Icons.Cli)(
   &:active,
   &:focus {
     background: ${props.theme.colors.levels.sunken};
-    color: ${props.theme.colors.text.primary};
+    color: ${props.theme.colors.text.main};
   }
 
   &:active {
diff --git a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
index 3538dde2f2758..13158e94c8b00 100644
--- a/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
+++ b/web/packages/teleport/src/Audit/__snapshots__/Audit.story.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`list of all events 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -32,7 +32,6 @@ exports[`list of all events 1`] = `
 .c19:hover,
 .c19:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c19:active {
@@ -233,7 +232,7 @@ exports[`list of all events 1`] = `
 }
 
 .c10:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: wait;
 }
 
@@ -299,14 +298,14 @@ exports[`list of all events 1`] = `
 }
 
 .c4::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
 .c20 {
   background: #000000;
   border: 2px solid #9F85FF;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -376,7 +375,7 @@ exports[`list of all events 1`] = `
         >
           <div
             class="c9"
-            color="text.primary"
+            color="text.main"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
@@ -7014,7 +7013,7 @@ exports[`loaded audit log screen 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -7026,7 +7025,6 @@ exports[`loaded audit log screen 1`] = `
 .c23:hover,
 .c23:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c23:active {
@@ -7107,20 +7105,20 @@ exports[`loaded audit log screen 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c4 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c4 .react-select__control:hover,
 .c4 .react-select__control:focus,
 .c4 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -7141,7 +7139,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c4 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -7155,7 +7153,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c4 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c4 .react-select__multi-value {
@@ -7201,7 +7199,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c4 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c4 .react-select__clear-indicator:hover,
@@ -7235,20 +7233,20 @@ exports[`loaded audit log screen 1`] = `
 
 .c4 .react-select--is-disabled,
 .c4 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c4 .react-select--is-disabled .react-select__single-value,
 .c4 .react-select__control--is-disabled .react-select__single-value,
 .c4 .react-select--is-disabled .react-select__placeholder,
 .c4 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c4 .react-select--is-disabled .react-select__indicator,
 .c4 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c1 {
@@ -7471,7 +7469,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -7590,7 +7588,7 @@ exports[`loaded audit log screen 1`] = `
         >
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
diff --git a/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
index 3c9ff45b00ef8..c9b013a818d33 100644
--- a/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
+++ b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
@@ -85,7 +85,7 @@ export function AuthConnectors(props: State) {
               <Box
                 ml="4"
                 width="240px"
-                color="text.primary"
+                color="text.main"
                 style={{ flexShrink: 0 }}
               >
                 <Text typography="h6" mb={3} caps>
@@ -100,7 +100,7 @@ export function AuthConnectors(props: State) {
                 <Text typography="subtitle1" mb={2}>
                   Please{' '}
                   <Link
-                    color="text.primary"
+                    color="text.main"
                     // We have two version of this component.
                     // This OSS version and an enterprise version.
                     href="https://goteleport.com/docs/setup/admin/github-sso/"
diff --git a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
index 3d53dfd35830e..832b41ed22695 100644
--- a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
+++ b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
@@ -84,7 +84,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) {
         <Icons.Github
           style={{ textAlign: 'center' }}
           fontSize="50px"
-          color="text.primary"
+          color="text.main"
           mb={3}
           mt={3}
         />
diff --git a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
index 321e4b226c919..bd4e52a5abbbc 100644
--- a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
+++ b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
@@ -49,7 +49,7 @@ export default function DeleteConnectorDialog(props: Props) {
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete connector{' '}
-          <Text as="span" bold color="text.primary">
+          <Text as="span" bold color="text.main">
             {name}
           </Text>
           ?
diff --git a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
index 668a2fdf496cf..91f15f5ee46f4 100644
--- a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
+++ b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
@@ -44,7 +44,7 @@ export default function EmptyList({ onCreate }: Props) {
           Open Source Teleport supports only GitHub connectors. Please{' '}
           <Text
             as="a"
-            color="text.primary"
+            color="text.main"
             href="https://goteleport.com/docs/setup/admin/github-sso/"
             target="_blank"
           >
diff --git a/web/packages/teleport/src/Clusters/ClusterList/ClusterList.tsx b/web/packages/teleport/src/Clusters/ClusterList/ClusterList.tsx
index 3c08fe6436cd2..1b222d98418e1 100644
--- a/web/packages/teleport/src/Clusters/ClusterList/ClusterList.tsx
+++ b/web/packages/teleport/src/Clusters/ClusterList/ClusterList.tsx
@@ -99,7 +99,7 @@ function renderActionCell({ clusterId }: Cluster, flags: MenuFlags) {
 
 function renderMenuItem(name: string, url: string) {
   return (
-    <MenuItem as={NavLink} color="text.primary" to={url} key={name}>
+    <MenuItem as={NavLink} color="text.main" to={url} key={name}>
       {name}
     </MenuItem>
   );
diff --git a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
index c663969d1e66f..4267513e2f5ee 100644
--- a/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
+++ b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`render clusters 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -32,7 +32,6 @@ exports[`render clusters 1`] = `
 .c21:hover,
 .c21:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c21:active {
@@ -64,7 +63,7 @@ exports[`render clusters 1`] = `
   color: #FFFFFF;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -330,7 +329,7 @@ exports[`render clusters 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -385,7 +384,7 @@ exports[`render clusters 1`] = `
         >
           <div
             class="c12"
-            color="text.primary"
+            color="text.main"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
@@ -477,7 +476,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -501,7 +500,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -525,7 +524,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -549,7 +548,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -573,7 +572,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -597,7 +596,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -621,7 +620,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -645,7 +644,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -669,7 +668,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -693,7 +692,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -717,7 +716,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -741,7 +740,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -765,7 +764,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -789,7 +788,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -813,7 +812,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -837,7 +836,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -861,7 +860,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -885,7 +884,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -909,7 +908,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -933,7 +932,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -957,7 +956,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -981,7 +980,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1005,7 +1004,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1029,7 +1028,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1053,7 +1052,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1077,7 +1076,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1101,7 +1100,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1125,7 +1124,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1149,7 +1148,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1173,7 +1172,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1197,7 +1196,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1221,7 +1220,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1245,7 +1244,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1269,7 +1268,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1293,7 +1292,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1317,7 +1316,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1341,7 +1340,7 @@ exports[`render clusters 1`] = `
               OPTIONS
               <span
                 class="c15 c22 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
diff --git a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
index cf9e5ee67d47f..8b259d1e6a160 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/DocumentNodes/__snapshots__/DocumentNodes.story.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`render DocumentNodes 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -44,7 +44,6 @@ exports[`render DocumentNodes 1`] = `
 .c33:hover,
 .c33:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c33:active {
@@ -69,7 +68,7 @@ exports[`render DocumentNodes 1`] = `
   color: #FFFFFF;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -97,7 +96,7 @@ exports[`render DocumentNodes 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c5 {
@@ -361,7 +360,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c17::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -476,7 +475,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c9::placeholder {
   opacity: 1;
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -501,20 +500,20 @@ exports[`render DocumentNodes 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c6 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c6 .react-select__control:hover,
 .c6 .react-select__control:focus,
 .c6 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -535,7 +534,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c6 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -549,7 +548,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c6 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c6 .react-select__multi-value {
@@ -595,7 +594,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c6 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 .react-select__clear-indicator:hover,
@@ -629,20 +628,20 @@ exports[`render DocumentNodes 1`] = `
 
 .c6 .react-select--is-disabled,
 .c6 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c6 .react-select--is-disabled .react-select__single-value,
 .c6 .react-select__control--is-disabled .react-select__single-value,
 .c6 .react-select--is-disabled .react-select__placeholder,
 .c6 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c6 .react-select--is-disabled .react-select__indicator,
 .c6 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c2 {
@@ -770,7 +769,7 @@ exports[`render DocumentNodes 1`] = `
           </div>
           <input
             class="c9"
-            color="text.primary"
+            color="text.main"
             placeholder="login@host:port"
           />
         </div>
@@ -849,7 +848,7 @@ exports[`render DocumentNodes 1`] = `
             >
               <div
                 class="c29"
-                color="text.contrast"
+                color="text.main"
                 style="text-transform: uppercase;"
               >
                 Showing 
@@ -935,7 +934,7 @@ exports[`render DocumentNodes 1`] = `
                   CONNECT
                   <span
                     class="c26 c34 icon icon-caret-down "
-                    color="text.secondary"
+                    color="text.slightlyMuted"
                     font-size="2"
                   />
                 </button>
@@ -977,7 +976,7 @@ exports[`render DocumentNodes 1`] = `
                   CONNECT
                   <span
                     class="c26 c34 icon icon-caret-down "
-                    color="text.secondary"
+                    color="text.slightlyMuted"
                     font-size="2"
                   />
                 </button>
@@ -1024,7 +1023,7 @@ exports[`render DocumentNodes 1`] = `
                   CONNECT
                   <span
                     class="c26 c34 icon icon-caret-down "
-                    color="text.secondary"
+                    color="text.slightlyMuted"
                     font-size="2"
                   />
                 </button>
@@ -1071,7 +1070,7 @@ exports[`render DocumentNodes 1`] = `
                   CONNECT
                   <span
                     class="c26 c34 icon icon-caret-down "
-                    color="text.secondary"
+                    color="text.slightlyMuted"
                     font-size="2"
                   />
                 </button>
@@ -1137,7 +1136,7 @@ exports[`render DocumentNodes 1`] = `
                   CONNECT
                   <span
                     class="c26 c34 icon icon-caret-down "
-                    color="text.secondary"
+                    color="text.slightlyMuted"
                     font-size="2"
                   />
                 </button>
diff --git a/web/packages/teleport/src/Console/Tabs/TabItem.tsx b/web/packages/teleport/src/Console/Tabs/TabItem.tsx
index b0c9ac73d77af..9e0096226ad2e 100644
--- a/web/packages/teleport/src/Console/Tabs/TabItem.tsx
+++ b/web/packages/teleport/src/Console/Tabs/TabItem.tsx
@@ -53,7 +53,7 @@ function fromProps({ theme, active }) {
     border: 'none',
     borderRight: `1px solid ${theme.colors.bgTerminal}`,
     '&:hover, &:focus': {
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
       transition: 'color .3s',
     },
   };
@@ -62,7 +62,7 @@ function fromProps({ theme, active }) {
     styles = {
       ...styles,
       backgroundColor: theme.colors.bgTerminal,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
       fontWeight: 'bold',
       transition: 'none',
     };
diff --git a/web/packages/teleport/src/Console/Tabs/Tabs.tsx b/web/packages/teleport/src/Console/Tabs/Tabs.tsx
index 33071aaef0cb3..d10a183a49a13 100644
--- a/web/packages/teleport/src/Console/Tabs/Tabs.tsx
+++ b/web/packages/teleport/src/Console/Tabs/Tabs.tsx
@@ -79,7 +79,7 @@ export function Tabs(props: Props & { parties: stores.Parties }) {
     <StyledTabs
       as="nav"
       typography="h5"
-      color="text.secondary"
+      color="text.slightlyMuted"
       bold
       {...styledProps}
     >
diff --git a/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap b/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
index ed201225f589f..bb87246a1ab16 100644
--- a/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
+++ b/web/packages/teleport/src/Console/Tabs/__snapshots__/Tabs.story.test.tsx.snap
@@ -40,11 +40,11 @@ exports[`render ConsoleTabs 1`] = `
 }
 
 .c9:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c9:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -150,7 +150,7 @@ exports[`render ConsoleTabs 1`] = `
   box-sizing: border-box;
   height: 32px;
   width: 100%;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   background: #01172C;
   min-height: 32px;
   border-radius: 4px;
@@ -172,7 +172,7 @@ exports[`render ConsoleTabs 1`] = `
 >
   <nav
     class="c1"
-    color="text.secondary"
+    color="text.slightlyMuted"
     height="32px"
     width="100%"
   >
diff --git a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
index 90e8bcb0dca22..74629ce6670d0 100644
--- a/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/ConnectDialog/__snapshots__/ConnectDialog.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -232,7 +232,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Connect To Database
         </div>
@@ -453,7 +453,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -612,7 +612,7 @@ exports[`render dialog with instructions to connect to database with requestId 1
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Connect To Database
           </div>
diff --git a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
index b82de5dbc8702..3e19cc661f5ce 100644
--- a/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
+++ b/web/packages/teleport/src/Databases/__snapshots__/Databases.story.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`empty state for enterprise, can create 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   min-height: 32px;
@@ -100,7 +100,6 @@ exports[`empty state for enterprise, can create 1`] = `
 .c12:hover,
 .c12:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c12:active {
@@ -318,7 +317,7 @@ exports[`failed 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -329,7 +328,6 @@ exports[`failed 1`] = `
 .c27:hover,
 .c27:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c27:active {
@@ -372,7 +370,7 @@ exports[`failed 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c6 {
@@ -643,7 +641,7 @@ exports[`failed 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -803,7 +801,7 @@ exports[`failed 1`] = `
         >
           <div
             class="c23"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1088,7 +1086,7 @@ exports[`open source loaded 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -1099,7 +1097,6 @@ exports[`open source loaded 1`] = `
 .c27:hover,
 .c27:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c27:active {
@@ -1142,7 +1139,7 @@ exports[`open source loaded 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c6 {
@@ -1413,7 +1410,7 @@ exports[`open source loaded 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1579,7 +1576,7 @@ exports[`open source loaded 1`] = `
         >
           <div
             class="c23"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1886,7 +1883,7 @@ exports[`readonly empty state 1`] = `
     </div>
     <div
       class="c3"
-      color="text.primary"
+      color="text.main"
     >
       <div
         class="c4"
diff --git a/web/packages/teleport/src/DesktopSession/ActionMenu.tsx b/web/packages/teleport/src/DesktopSession/ActionMenu.tsx
index 9818714d2dcfb..7a50051100c1b 100644
--- a/web/packages/teleport/src/DesktopSession/ActionMenu.tsx
+++ b/web/packages/teleport/src/DesktopSession/ActionMenu.tsx
@@ -28,7 +28,7 @@ export default function ActionMenu(props: Props) {
         buttonIconProps={{
           ml: 4,
           size: 0,
-          color: 'text.secondary',
+          color: 'text.slightlyMuted',
           style: { fontSize: '20px' },
         }}
         menuProps={menuProps}
diff --git a/web/packages/teleport/src/DesktopSession/TopBar.tsx b/web/packages/teleport/src/DesktopSession/TopBar.tsx
index 0faf6395b0795..24c275d657974 100644
--- a/web/packages/teleport/src/DesktopSession/TopBar.tsx
+++ b/web/packages/teleport/src/DesktopSession/TopBar.tsx
@@ -38,7 +38,7 @@ export default function TopBar(props: Props) {
 
   const primaryOnTrue = (b: boolean): any => {
     return {
-      color: b ? theme.colors.text.primary : theme.colors.text.secondary,
+      color: b ? theme.colors.text.main : theme.colors.text.slightlyMuted,
     };
   };
 
@@ -50,7 +50,7 @@ export default function TopBar(props: Props) {
         justifyContent: 'space-between',
       }}
     >
-      <Text px={3} style={{ color: theme.colors.text.secondary }}>
+      <Text px={3} style={{ color: theme.colors.text.slightlyMuted }}>
         {userHost}
       </Text>
 
diff --git a/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx b/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
index 7e76ad1613df1..1ee04563295aa 100644
--- a/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
+++ b/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
@@ -128,8 +128,7 @@ const StyledCard = styled(Card)`
 const StyledNotification = styled(Notification)`
   background: ${({ theme }) => theme.colors.spotBackground[0]};
   ${({ theme }) =>
-    theme.name === 'light' &&
-    `border: 1px solid ${theme.colors.text.placeholder};`}
+    theme.name === 'light' && `border: 1px solid ${theme.colors.text.muted};`}
   box-shadow: none;
 `;
 
diff --git a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
index 6fac2c484f72a..611c7263155b2 100644
--- a/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
+++ b/web/packages/teleport/src/DesktopSession/__snapshots__/DesktopSession.story.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`another session active 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -185,7 +185,7 @@ exports[`another session active 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Another Session Is Active
         </div>
@@ -299,7 +299,7 @@ exports[`connected settings false 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c15 .c5 {
@@ -307,11 +307,11 @@ exports[`connected settings false 1`] = `
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -415,7 +415,7 @@ exports[`connected settings false 1`] = `
     >
       <div
         class="c2"
-        style="color: rgba(255, 255, 255, 0.56);"
+        style="color: rgba(255, 255, 255, 0.72);"
       >
         user@host.com
       </div>
@@ -427,12 +427,12 @@ exports[`connected settings false 1`] = `
         >
           <span
             class="c5 c6 icon icon-folder-shared c7"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
             class="c5 c6 icon icon-clipboard-text c8"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Clipboard Sharing Disabled"
           />
           <div
@@ -460,7 +460,7 @@ exports[`connected settings false 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -561,7 +561,7 @@ exports[`connected settings true 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c15 .c5 {
@@ -569,11 +569,11 @@ exports[`connected settings true 1`] = `
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -677,7 +677,7 @@ exports[`connected settings true 1`] = `
     >
       <div
         class="c2"
-        style="color: rgba(255, 255, 255, 0.56);"
+        style="color: rgba(255, 255, 255, 0.72);"
       >
         user@host.com
       </div>
@@ -722,7 +722,7 @@ exports[`connected settings true 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -760,7 +760,7 @@ exports[`connection error 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -905,7 +905,7 @@ exports[`connection error 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1026,7 +1026,7 @@ exports[`disconnected 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c15 .c5 {
@@ -1034,11 +1034,11 @@ exports[`disconnected 1`] = `
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -1148,7 +1148,7 @@ exports[`disconnected 1`] = `
     >
       <div
         class="c2"
-        style="color: rgba(255, 255, 255, 0.56);"
+        style="color: rgba(255, 255, 255, 0.72);"
       >
         user@host.com
       </div>
@@ -1160,12 +1160,12 @@ exports[`disconnected 1`] = `
         >
           <span
             class="c5 c6 icon icon-folder-shared c7"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
             class="c5 c6 icon icon-clipboard-text c8"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Clipboard Sharing Disabled"
           />
           <div
@@ -1193,7 +1193,7 @@ exports[`disconnected 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -1240,7 +1240,7 @@ exports[`fetch error 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -1385,7 +1385,7 @@ exports[`fetch error 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1437,7 +1437,7 @@ exports[`invalid processing 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -1582,7 +1582,7 @@ exports[`invalid processing 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1703,7 +1703,7 @@ exports[`processing 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c15 .c5 {
@@ -1711,11 +1711,11 @@ exports[`processing 1`] = `
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -1819,7 +1819,7 @@ exports[`processing 1`] = `
     >
       <div
         class="c2"
-        style="color: rgba(255, 255, 255, 0.56);"
+        style="color: rgba(255, 255, 255, 0.72);"
       >
         user@host.com
       </div>
@@ -1831,7 +1831,7 @@ exports[`processing 1`] = `
         >
           <span
             class="c5 c6 icon icon-folder-shared c7"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
@@ -1864,7 +1864,7 @@ exports[`processing 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -1974,7 +1974,7 @@ exports[`tdp processing 1`] = `
   height: 24px;
   width: 24px;
   margin-left: 24px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c15 .c5 {
@@ -1982,11 +1982,11 @@ exports[`tdp processing 1`] = `
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c15:disabled {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
   cursor: default;
 }
 
@@ -2090,7 +2090,7 @@ exports[`tdp processing 1`] = `
     >
       <div
         class="c2"
-        style="color: rgba(255, 255, 255, 0.56);"
+        style="color: rgba(255, 255, 255, 0.72);"
       >
         user@host.com
       </div>
@@ -2102,7 +2102,7 @@ exports[`tdp processing 1`] = `
         >
           <span
             class="c5 c6 icon icon-folder-shared c7"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
@@ -2135,7 +2135,7 @@ exports[`tdp processing 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -2176,7 +2176,7 @@ exports[`unintended disconnect 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 40px;
   font-size: 12px;
@@ -2321,7 +2321,7 @@ exports[`unintended disconnect 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -2416,7 +2416,7 @@ exports[`webauthn prompt 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -2548,7 +2548,7 @@ exports[`webauthn prompt 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Multi-factor authentication
         </div>
diff --git a/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/DiscoverDesktops.tsx b/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/DiscoverDesktops.tsx
index 1b43fbc90f3f5..e227081b082e9 100644
--- a/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/DiscoverDesktops.tsx
+++ b/web/packages/teleport/src/Discover/Desktop/DiscoverDesktops/DiscoverDesktops.tsx
@@ -84,7 +84,7 @@ const ContentBox = styled.div`
 
 const ViewLink = styled(NavLink)`
   background: ${props => props.theme.colors.buttons.link.default};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   border-radius: 5px;
   margin-top: 10px;
   text-decoration: none;
diff --git a/web/packages/teleport/src/Discover/Navigation/StepItem.tsx b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
index c29520b685296..96d243f4ac14f 100644
--- a/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
+++ b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
@@ -164,7 +164,7 @@ const CheckedBullet = styled(Bullet)`
 const StepsContainer = styled.div<{ active: boolean }>`
   display: flex;
   flex-direction: column;
-  color: ${p => (p.active ? 'inherit' : p.theme.colors.text.secondary)};
+  color: ${p => (p.active ? 'inherit' : p.theme.colors.text.slightlyMuted)};
   margin-right: 32px;
   position: relative;
 
diff --git a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
index 0021af82aac04..27b8a534dc78d 100644
--- a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
+++ b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
@@ -166,12 +166,12 @@ export function SelectResource(props: SelectResourceProps) {
                     </Flex>
                     <Box>
                       {pretitle && (
-                        <Text fontSize="12px" color="text.secondary">
+                        <Text fontSize="12px" color="text.slightlyMuted">
                           {pretitle}
                         </Text>
                       )}
                       {r.unguidedLink ? (
-                        <Text bold color="text.primary">
+                        <Text bold color="text.main">
                           {title}
                         </Text>
                       ) : (
@@ -323,7 +323,7 @@ const ResourceCard = styled.div`
 
   border-radius: 8px;
   padding: 12px 12px 12px 12px;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   cursor: pointer;
   height: 48px;
 
@@ -368,7 +368,7 @@ const StyledInput = styled.input`
   height: 100%;
   width: 100%;
   transition: all 0.2s;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   background: transparent;
   margin-right: ${props => props.theme.space[3]}px;
   margin-bottom: ${props => props.theme.space[2]}px;
diff --git a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
index 6f2a7c0466130..41d03345925c3 100644
--- a/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
+++ b/web/packages/teleport/src/Discover/SelectResource/__snapshots__/SelectResource.story.test.tsx.snap
@@ -58,7 +58,7 @@ exports[`render with URL loc state set to "server" 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c18 {
@@ -305,7 +305,7 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -346,7 +346,7 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -387,7 +387,7 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -428,7 +428,7 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -467,7 +467,7 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -506,14 +506,14 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c22"
-            color="text.primary"
+            color="text.main"
           >
             Redshift Serverless
           </div>
@@ -546,14 +546,14 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c22"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -586,14 +586,14 @@ exports[`render with URL loc state set to "server" 1`] = `
         >
           <div
             class="c17"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Microsoft
           </div>
           <div
             class="c22"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -679,7 +679,7 @@ exports[`render with all access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c19 {
@@ -865,7 +865,7 @@ exports[`render with all access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Application
           </div>
@@ -935,7 +935,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Windows Desktop
@@ -976,7 +976,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -1017,7 +1017,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -1058,7 +1058,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -1099,7 +1099,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -1138,7 +1138,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -1179,7 +1179,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -1220,7 +1220,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -1261,7 +1261,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -1302,7 +1302,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -1343,7 +1343,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -1384,7 +1384,7 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -1423,14 +1423,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             DynamoDB
           </div>
@@ -1463,14 +1463,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             ElastiCache & MemoryDB
           </div>
@@ -1503,14 +1503,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Keyspaces (Apache Cassandra)
           </div>
@@ -1543,14 +1543,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redshift PostgreSQL
           </div>
@@ -1583,14 +1583,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redshift Serverless
           </div>
@@ -1623,14 +1623,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cache for Redis
           </div>
@@ -1663,14 +1663,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             PostgreSQL
           </div>
@@ -1703,14 +1703,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MySQL
           </div>
@@ -1743,14 +1743,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -1783,14 +1783,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Microsoft
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -1823,14 +1823,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL MySQL
           </div>
@@ -1863,14 +1863,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL PostgreSQL
           </div>
@@ -1904,7 +1904,7 @@ exports[`render with all access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB Atlas
           </div>
@@ -1937,14 +1937,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cassandra & ScyllaDB
           </div>
@@ -1977,14 +1977,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             CockroachDB
           </div>
@@ -2017,14 +2017,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Elasticsearch
           </div>
@@ -2057,14 +2057,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB
           </div>
@@ -2097,14 +2097,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redis
           </div>
@@ -2137,14 +2137,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redis Cluster
           </div>
@@ -2178,7 +2178,7 @@ exports[`render with all access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Snowflake (Preview)
           </div>
@@ -2211,14 +2211,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             RDS Proxy
           </div>
@@ -2251,14 +2251,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             High Availability
           </div>
@@ -2291,14 +2291,14 @@ exports[`render with all access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Dynamic Registration
           </div>
@@ -2384,7 +2384,7 @@ exports[`render with no access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c19 {
@@ -2575,7 +2575,7 @@ exports[`render with no access 1`] = `
           
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Application
           </div>
@@ -2647,7 +2647,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Windows Desktop
@@ -2689,7 +2689,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -2731,7 +2731,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -2773,7 +2773,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -2815,7 +2815,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -2855,7 +2855,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -2897,7 +2897,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -2939,7 +2939,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -2981,7 +2981,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -3023,7 +3023,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -3065,7 +3065,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -3107,7 +3107,7 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -3151,14 +3151,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             DynamoDB
           </div>
@@ -3196,14 +3196,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             ElastiCache & MemoryDB
           </div>
@@ -3241,14 +3241,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Keyspaces (Apache Cassandra)
           </div>
@@ -3286,14 +3286,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Redshift PostgreSQL
           </div>
@@ -3331,14 +3331,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Redshift Serverless
           </div>
@@ -3376,14 +3376,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Cache for Redis
           </div>
@@ -3421,14 +3421,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             PostgreSQL
           </div>
@@ -3466,14 +3466,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             MySQL
           </div>
@@ -3511,14 +3511,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -3556,14 +3556,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Microsoft
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -3601,14 +3601,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL MySQL
           </div>
@@ -3646,14 +3646,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL PostgreSQL
           </div>
@@ -3692,7 +3692,7 @@ exports[`render with no access 1`] = `
           
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB Atlas
           </div>
@@ -3730,14 +3730,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Cassandra & ScyllaDB
           </div>
@@ -3775,14 +3775,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             CockroachDB
           </div>
@@ -3820,14 +3820,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Elasticsearch
           </div>
@@ -3865,14 +3865,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB
           </div>
@@ -3910,14 +3910,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Redis
           </div>
@@ -3955,14 +3955,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Redis Cluster
           </div>
@@ -4001,7 +4001,7 @@ exports[`render with no access 1`] = `
           
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Snowflake (Preview)
           </div>
@@ -4039,14 +4039,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             RDS Proxy
           </div>
@@ -4084,14 +4084,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             High Availability
           </div>
@@ -4129,14 +4129,14 @@ exports[`render with no access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c14"
-            color="text.primary"
+            color="text.main"
           >
             Dynamic Registration
           </div>
@@ -4222,7 +4222,7 @@ exports[`render with partial access 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c21 {
@@ -4442,7 +4442,7 @@ exports[`render with partial access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Application
           </div>
@@ -4512,7 +4512,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Windows Desktop
@@ -4553,7 +4553,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -4594,7 +4594,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -4635,7 +4635,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -4676,7 +4676,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -4715,7 +4715,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Server
@@ -4757,7 +4757,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -4799,7 +4799,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -4841,7 +4841,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -4883,7 +4883,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
@@ -4925,7 +4925,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -4967,7 +4967,7 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
@@ -5011,14 +5011,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             DynamoDB
           </div>
@@ -5056,14 +5056,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             ElastiCache & MemoryDB
           </div>
@@ -5101,14 +5101,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Keyspaces (Apache Cassandra)
           </div>
@@ -5146,14 +5146,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redshift PostgreSQL
           </div>
@@ -5191,14 +5191,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redshift Serverless
           </div>
@@ -5236,14 +5236,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cache for Redis
           </div>
@@ -5281,14 +5281,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             PostgreSQL
           </div>
@@ -5326,14 +5326,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MySQL
           </div>
@@ -5371,14 +5371,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Azure
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -5416,14 +5416,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Microsoft
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             SQL Server (Preview)
           </div>
@@ -5461,14 +5461,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL MySQL
           </div>
@@ -5506,14 +5506,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Google Cloud Provider (GCP)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cloud SQL PostgreSQL
           </div>
@@ -5552,7 +5552,7 @@ exports[`render with partial access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB Atlas
           </div>
@@ -5590,14 +5590,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Cassandra & ScyllaDB
           </div>
@@ -5635,14 +5635,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             CockroachDB
           </div>
@@ -5680,14 +5680,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Elasticsearch
           </div>
@@ -5725,14 +5725,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             MongoDB
           </div>
@@ -5770,14 +5770,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redis
           </div>
@@ -5815,14 +5815,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Self-Hosted
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Redis Cluster
           </div>
@@ -5861,7 +5861,7 @@ exports[`render with partial access 1`] = `
           
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Snowflake (Preview)
           </div>
@@ -5899,14 +5899,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Amazon Web Services (AWS)
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             RDS Proxy
           </div>
@@ -5944,14 +5944,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             High Availability
           </div>
@@ -5989,14 +5989,14 @@ exports[`render with partial access 1`] = `
         >
           <div
             class="c16"
-            color="text.secondary"
+            color="text.slightlyMuted"
             font-size="12px"
           >
             Database
           </div>
           <div
             class="c13"
-            color="text.primary"
+            color="text.main"
           >
             Dynamic Registration
           </div>
diff --git a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
index 10fb5f613d3ce..142d6921dff49 100644
--- a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
+++ b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
@@ -24,7 +24,7 @@ const styles = theme => ({
   },
   multiValueLabel: (base, state) => {
     if (state.data.isFixed) {
-      return { ...base, color: theme.colors.text.primary, paddingRight: 6 };
+      return { ...base, color: theme.colors.text.main, paddingRight: 6 };
     }
 
     if (state.isDisabled) {
diff --git a/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx b/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx
index 8376e13d6da72..8f315edb20402 100644
--- a/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx
+++ b/web/packages/teleport/src/Integrations/DeleteIntegrationDialog.tsx
@@ -48,7 +48,7 @@ export function DeleteIntegrationDialog(props: Props) {
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete integration{' '}
-          <Text as="span" bold color="text.contrast">
+          <Text as="span" bold color="text.main">
             {props.name}
           </Text>{' '}
           ?
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx
index 2ee9c28f3d306..f13d812ce8437 100644
--- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/Browser.tsx
@@ -97,7 +97,7 @@ export function Browser(props: React.PropsWithChildren<BrowserProps>) {
         <BrowserURLContainer>
           <BrowserURL>
             <BrowserURLIcon>
-              <LockIcon size={12} />
+              <LockIcon fill="white" size={12} />
             </BrowserURLIcon>
             console.aws.amazon.com
           </BrowserURL>
diff --git a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx
index 484424df9cd99..eb4b8d154e388 100644
--- a/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx
+++ b/web/packages/teleport/src/Integrations/Enroll/AwsOidc/browser/BrowserComponents.tsx
@@ -23,6 +23,7 @@ export const BrowserContainer = styled.div`
   border-radius: 5px;
   width: 100%;
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.43);
+  color: white;
 `;
 
 export const BrowserTitleBarContainer = styled.div`
diff --git a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
index bb5df2b5437ac..a12433e05fc30 100644
--- a/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
+++ b/web/packages/teleport/src/Kubes/ConnectDialog/__snapshots__/ConnectDialog.story.test.tsx.snap
@@ -170,7 +170,7 @@ exports[`kube connect dialogue local 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -227,7 +227,7 @@ exports[`kube connect dialogue local 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             connect to kubernetes cluster
           </div>
@@ -573,7 +573,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -630,7 +630,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             connect to kubernetes cluster
           </div>
@@ -1006,7 +1006,7 @@ exports[`kube connect dialogue sso 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -1063,7 +1063,7 @@ exports[`kube connect dialogue sso 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             connect to kubernetes cluster
           </div>
diff --git a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
index dbd698e96dd09..51655335bc836 100644
--- a/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`empty state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   min-height: 32px;
@@ -100,7 +100,6 @@ exports[`empty state 1`] = `
 .c12:hover,
 .c12:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c12:active {
@@ -318,7 +317,7 @@ exports[`failed 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -329,7 +328,6 @@ exports[`failed 1`] = `
 .c27:hover,
 .c27:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c27:active {
@@ -372,7 +370,7 @@ exports[`failed 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c6 {
@@ -603,7 +601,7 @@ exports[`failed 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -803,7 +801,7 @@ exports[`failed 1`] = `
         >
           <div
             class="c23"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1047,7 +1045,7 @@ exports[`loaded 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -1058,7 +1056,6 @@ exports[`loaded 1`] = `
 .c27:hover,
 .c27:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c27:active {
@@ -1101,7 +1098,7 @@ exports[`loaded 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c6 {
@@ -1332,7 +1329,7 @@ exports[`loaded 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1538,7 +1535,7 @@ exports[`loaded 1`] = `
         >
           <div
             class="c23"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1804,7 +1801,7 @@ exports[`readonly empty state 1`] = `
     </div>
     <div
       class="c3"
-      color="text.primary"
+      color="text.main"
     >
       <div
         class="c4"
diff --git a/web/packages/teleport/src/Locks/CreateLock.tsx b/web/packages/teleport/src/Locks/CreateLock.tsx
index 771fe8b388661..df0377b900155 100644
--- a/web/packages/teleport/src/Locks/CreateLock.tsx
+++ b/web/packages/teleport/src/Locks/CreateLock.tsx
@@ -102,7 +102,7 @@ export function CreateLock({
             style={{ cursor: 'pointer' }}
           />
           <Box>
-            <Text typography="h4" color="text.primary" bold>
+            <Text typography="h4" color="text.main" bold>
               Create New Lock
             </Text>
           </Box>
diff --git a/web/packages/teleport/src/Locks/NewLock.tsx b/web/packages/teleport/src/Locks/NewLock.tsx
index f749f3c93c9d8..bff4c4f470f40 100644
--- a/web/packages/teleport/src/Locks/NewLock.tsx
+++ b/web/packages/teleport/src/Locks/NewLock.tsx
@@ -16,7 +16,15 @@ limitations under the License.
 
 import React, { useState } from 'react';
 
-import { Box, ButtonPrimary, ButtonSecondary, Flex, Input, Text } from 'design';
+import {
+  Box,
+  ButtonPrimary,
+  ButtonBorder,
+  ButtonSecondary,
+  Flex,
+  Input,
+  Text,
+} from 'design';
 import { Cell, LabelCell } from 'design/DataTable';
 import Select from 'shared/components/Select';
 import { ArrowBack } from 'design/Icon';
@@ -208,7 +216,7 @@ function TargetList({
       altKey: 'add-btn',
       render: ({ targetValue }) => (
         <Cell align="right">
-          <ButtonPrimary
+          <ButtonBorder
             onClick={onAdd.bind(null, targetValue)}
             data-testid="btn-cell"
             disabled={selectedLockTargets.some(
@@ -217,7 +225,7 @@ function TargetList({
             )}
           >
             + Add
-          </ButtonPrimary>
+          </ButtonBorder>
         </Cell>
       ),
     });
diff --git a/web/packages/teleport/src/Locks/shared.tsx b/web/packages/teleport/src/Locks/shared.tsx
index e7334f9dc88d2..044fffc84ff2a 100644
--- a/web/packages/teleport/src/Locks/shared.tsx
+++ b/web/packages/teleport/src/Locks/shared.tsx
@@ -24,7 +24,11 @@ export const StyledTable = styled(Table)`
     vertical-align: middle;
     padding: 8px;
   }
+  & > thead > tr > th {
+    background: ${props => props.theme.colors.spotBackground[1]};
+  }
   border-radius: 8px;
+  box-shadow: ${props => props.theme.boxShadow[0]};
   overflow: hidden;
 ` as typeof Table;
 
diff --git a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
index b9df25b961a2e..9c8099b2abc59 100644
--- a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
+++ b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`callback error message 1`] = `
   />
   <div
     class="c1"
-    color="text.primary"
+    color="text.main"
     width="540px"
   >
     <div
@@ -191,7 +191,7 @@ exports[`default error message 1`] = `
   />
   <div
     class="c1"
-    color="text.primary"
+    color="text.main"
     width="540px"
   >
     <div
diff --git a/web/packages/teleport/src/Navigation/NavigationItem.tsx b/web/packages/teleport/src/Navigation/NavigationItem.tsx
index 6952603a833de..87097ac9d87c9 100644
--- a/web/packages/teleport/src/Navigation/NavigationItem.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationItem.tsx
@@ -50,7 +50,7 @@ const ExternalLink = styled.a`
 
 const Link = styled(NavLink)`
   ${commonNavigationItemStyles};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
 
   &:focus {
     background: ${props => props.theme.colors.spotBackground[0]};
diff --git a/web/packages/teleport/src/Navigation/NavigationSection.tsx b/web/packages/teleport/src/Navigation/NavigationSection.tsx
index 1fc43d3e9d525..561465a53b9f7 100644
--- a/web/packages/teleport/src/Navigation/NavigationSection.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationSection.tsx
@@ -33,7 +33,7 @@ interface NavigationSectionProps {
 const Title = styled.h3`
   font-size: 13px;
   line-height: 14px;
-  color: ${props => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.slightlyMuted};
   margin-left: 32px;
   transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1),
     opacity 0.15s ease-in;
diff --git a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
index b92254009b0a6..71bb0fe21a7ba 100644
--- a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
@@ -42,7 +42,7 @@ const Container = styled.div`
 `;
 
 const ActiveValue = styled.div<OpenProps>`
-  border: 1px solid ${props => props.theme.colors.text.secondary};
+  border: 1px solid ${props => props.theme.colors.text.slightlyMuted};
   border-radius: 4px;
   padding: 12px 16px;
   width: 190px;
@@ -73,7 +73,7 @@ const Dropdown = styled.div<OpenProps>`
 `;
 
 const DropdownItem = styled.div<ActiveProps & OpenProps>`
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   padding: 12px 16px;
   width: 190px;
   font-weight: ${p => (p.active ? 700 : 400)};
@@ -95,7 +95,7 @@ const Arrow = styled.div<OpenProps>`
   top: 50%;
   right: 16px;
   transform: translate(0, -50%);
-  color: ${props => props.theme.colors.text.primary}
+  color: ${props => props.theme.colors.text.main}
   line-height: 0;
 
   svg {
@@ -103,7 +103,7 @@ const Arrow = styled.div<OpenProps>`
     transition: 0.1s linear transform;
 
     path {
-    fill: ${props => props.theme.colors.text.primary}
+    fill: ${props => props.theme.colors.text.main}
   }
   }
 `;
diff --git a/web/packages/teleport/src/Navigation/common.tsx b/web/packages/teleport/src/Navigation/common.tsx
index e21c1ae7717f6..0db1393eef4ac 100644
--- a/web/packages/teleport/src/Navigation/common.tsx
+++ b/web/packages/teleport/src/Navigation/common.tsx
@@ -57,7 +57,7 @@ export const LinkContent = styled.div<LinkContentProps>`
 export const commonNavigationItemStyles = css`
   display: flex;
   position: relative;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   text-decoration: none;
   user-select: none;
   font-size: 14px;
diff --git a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
index 8dd6acf04bf48..68110ef1b79ef 100644
--- a/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/Nodes/__snapshots__/Nodes.story.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`empty state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   min-height: 32px;
@@ -100,7 +100,6 @@ exports[`empty state 1`] = `
 .c12:hover,
 .c12:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c12:active {
@@ -318,7 +317,7 @@ exports[`failed 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -330,7 +329,6 @@ exports[`failed 1`] = `
 .c27:hover,
 .c27:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c27:active {
@@ -355,7 +353,7 @@ exports[`failed 1`] = `
   color: #FFFFFF;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -383,7 +381,7 @@ exports[`failed 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c6 {
@@ -654,7 +652,7 @@ exports[`failed 1`] = `
 }
 
 .c11::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -814,7 +812,7 @@ exports[`failed 1`] = `
         >
           <div
             class="c23"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -900,7 +898,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -942,7 +940,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -984,7 +982,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1026,7 +1024,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1068,7 +1066,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1115,7 +1113,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1162,7 +1160,7 @@ exports[`failed 1`] = `
               CONNECT
               <span
                 class="c20 c28 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1273,7 +1271,7 @@ exports[`loaded 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -1285,7 +1283,6 @@ exports[`loaded 1`] = `
 .c30:hover,
 .c30:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c30:active {
@@ -1310,7 +1307,7 @@ exports[`loaded 1`] = `
   color: #FFFFFF;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -1338,7 +1335,7 @@ exports[`loaded 1`] = `
   line-height: 16px;
   margin: 0px;
   margin-right: 4px;
-  color: text.contrast;
+  color: #FFFFFF;
 }
 
 .c3 {
@@ -1463,7 +1460,7 @@ exports[`loaded 1`] = `
 
 .c6::placeholder {
   opacity: 1;
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1668,7 +1665,7 @@ exports[`loaded 1`] = `
 }
 
 .c14::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1759,7 +1756,7 @@ exports[`loaded 1`] = `
         </div>
         <input
           class="c6"
-          color="text.primary"
+          color="text.main"
           placeholder="login@host:port"
         />
       </div>
@@ -1853,7 +1850,7 @@ exports[`loaded 1`] = `
         >
           <div
             class="c26"
-            color="text.contrast"
+            color="text.main"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1939,7 +1936,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1981,7 +1978,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2023,7 +2020,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2065,7 +2062,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2107,7 +2104,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2154,7 +2151,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2201,7 +2198,7 @@ exports[`loaded 1`] = `
               CONNECT
               <span
                 class="c23 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2334,7 +2331,7 @@ exports[`readonly empty state 1`] = `
     </div>
     <div
       class="c3"
-      color="text.primary"
+      color="text.main"
     >
       <div
         class="c4"
diff --git a/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx b/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
index 3bdb89c989427..09ec8f149f173 100644
--- a/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
+++ b/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
@@ -21,7 +21,7 @@ import { Flex, Box } from 'design';
 
 const Tabs = props => {
   return (
-    <StyledTabs height="40px" color="text.secondary" as="nav" {...props} />
+    <StyledTabs height="40px" color="text.slightlyMuted" as="nav" {...props} />
   );
 };
 
@@ -43,12 +43,12 @@ const StyledTabItem = styled(Box)`
   &:hover,
   &.active,
   &:focus {
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
   }
 
   ${({ theme }) => ({
     backgroundColor: theme.colors.bgTerminal,
-    color: theme.colors.text.primary,
+    color: theme.colors.text.main,
     fontWeight: 'bold',
     transition: 'none',
   })}
@@ -58,7 +58,7 @@ const StyledTabItem = styled(Box)`
       border: 'none',
       borderRight: `1px solid ${theme.colors.bgTerminal}`,
       '&:hover, &:focus': {
-        color: theme.colors.text.primary,
+        color: theme.colors.text.main,
         transition: 'color .3s',
       },
     };
diff --git a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
index 7c30dd58dba07..177c9392fb5d9 100644
--- a/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
+++ b/web/packages/teleport/src/Recordings/__snapshots__/Recordings.story.test.tsx.snap
@@ -117,20 +117,20 @@ exports[`rendering of Session Recordings 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c4 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c4 .react-select__control:hover,
 .c4 .react-select__control:focus,
 .c4 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -151,7 +151,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c4 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -165,7 +165,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c4 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c4 .react-select__multi-value {
@@ -211,7 +211,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c4 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c4 .react-select__clear-indicator:hover,
@@ -245,20 +245,20 @@ exports[`rendering of Session Recordings 1`] = `
 
 .c4 .react-select--is-disabled,
 .c4 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c4 .react-select--is-disabled .react-select__single-value,
 .c4 .react-select__control--is-disabled .react-select__single-value,
 .c4 .react-select--is-disabled .react-select__placeholder,
 .c4 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c4 .react-select--is-disabled .react-select__indicator,
 .c4 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c1 {
@@ -481,7 +481,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -591,7 +591,7 @@ exports[`rendering of Session Recordings 1`] = `
           >
             <div
               class="c14"
-              color="text.primary"
+              color="text.main"
               style="white-space: nowrap; text-transform: uppercase;"
             >
               Showing 
diff --git a/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx b/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
index 5959503c62ce4..1ccbcea1d87e6 100644
--- a/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
+++ b/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
@@ -44,7 +44,7 @@ export default function DeleteRoleDialog(props: Props) {
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete role{' '}
-          <Text as="span" bold color="text.primary">
+          <Text as="span" bold color="text.main">
             {name}
           </Text>{' '}
           ?
diff --git a/web/packages/teleport/src/Roles/Roles.tsx b/web/packages/teleport/src/Roles/Roles.tsx
index 1c6c14393ca62..24abfa8f6e415 100644
--- a/web/packages/teleport/src/Roles/Roles.tsx
+++ b/web/packages/teleport/src/Roles/Roles.tsx
@@ -86,7 +86,7 @@ export function Roles(props: State) {
           <Box
             ml="auto"
             width="240px"
-            color="text.primary"
+            color="text.main"
             style={{ flexShrink: 0 }}
           >
             <Text typography="h6" mb={3} caps>
@@ -100,7 +100,7 @@ export function Roles(props: State) {
             <Text>
               Learn more in{' '}
               <Link
-                color="text.primary"
+                color="text.main"
                 target="_blank"
                 href="https://goteleport.com/docs/access-controls/guides/role-templates/"
               >
@@ -140,7 +140,7 @@ function Directions() {
     <>
       WARNING Roles are defined using{' '}
       <Link
-        color="text.primary"
+        color="text.main"
         target="_blank"
         href="https://en.wikipedia.org/wiki/YAML"
       >
diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
index 0b5dc230fab9a..b1a8c35b0cffd 100644
--- a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
+++ b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
@@ -52,7 +52,7 @@ export const SessionJoinBtn = ({
           css={`
             text-transform: capitalize;
             text-decoration: none;
-            color: ${props => props.theme.colors.text.secondary};
+            color: ${props => props.theme.colors.text.slightlyMuted};
           `}
         >
           {participantMode}
@@ -77,7 +77,7 @@ function JoinMenu({ children }: { children: React.ReactNode }) {
     <Box textAlign="center" width="80px">
       <ButtonBorder size="small" onClick={handleClickListItem}>
         Join
-        <CarrotDown ml={1} fontSize={2} color="text.secondary" />
+        <CarrotDown ml={1} fontSize={2} color="text.slightlyMuted" />
       </ButtonBorder>
       <Menu
         anchorOrigin={{
@@ -96,7 +96,7 @@ function JoinMenu({ children }: { children: React.ReactNode }) {
           px="2"
           fontSize="11px"
           css={`
-            color: ${props => props.theme.colors.text.primary};
+            color: ${props => props.theme.colors.text.main};
             background: ${props => props.theme.colors.spotBackground[2]};
           `}
         >
diff --git a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
index 243c00e529b77..356d3557ad9b3 100644
--- a/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
+++ b/web/packages/teleport/src/Sessions/__snapshots__/Sessions.story.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`loaded 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -37,7 +37,6 @@ exports[`loaded 1`] = `
 .c22:hover,
 .c22:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c22:active {
@@ -77,7 +76,7 @@ exports[`loaded 1`] = `
   transition: color 0.3s;
   color: #FFFFFF;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -330,7 +329,7 @@ exports[`loaded 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -385,7 +384,7 @@ exports[`loaded 1`] = `
         >
           <div
             class="c12"
-            color="text.primary"
+            color="text.main"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
@@ -535,7 +534,7 @@ exports[`loaded 1`] = `
                 Join
                 <span
                   class="c15 c23 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
diff --git a/web/packages/teleport/src/Support/Support.tsx b/web/packages/teleport/src/Support/Support.tsx
index 0305863d55a31..37965c1f398d5 100644
--- a/web/packages/teleport/src/Support/Support.tsx
+++ b/web/packages/teleport/src/Support/Support.tsx
@@ -192,7 +192,7 @@ const StyledSupportLink = styled.a.attrs({
   rel: 'noreferrer',
 })`
   display: block;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   border-radius: 4px;
   text-decoration: none;
   margin-bottom: 8px;
diff --git a/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx b/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx
index b0ba5097e69ba..e813671b77034 100644
--- a/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx
+++ b/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx
@@ -22,7 +22,7 @@ import { SelectAsync } from 'shared/components/Select';
 
 const ValueContainer = ({ children, ...props }) => (
   <components.ValueContainer {...props}>
-    <Flex alignItems="center" color="text.primary">
+    <Flex alignItems="center" color="text.main">
       <Text typography="h6" fontWeight="regular" mr="2">
         CLUSTER:
       </Text>
@@ -131,20 +131,20 @@ const StyledSelectAsync = styled(SelectAsync)`
     height: 42px;
 
     .react-select__dropdown-indicator {
-      color: ${props => props.theme.colors.text.secondary};
+      color: ${props => props.theme.colors.text.slightlyMuted};
     }
 
     &:focus,
     &:active {
       background: ${props => props.theme.colors.levels.surface};
-      border-color: ${props => props.theme.colors.text.primary};
+      border-color: ${props => props.theme.colors.text.main};
     }
     &:hover {
       background: ${props => props.theme.colors.levels.surface};
-      border-color: ${props => props.theme.colors.text.primary};
+      border-color: ${props => props.theme.colors.text.main};
 
       .react-select__dropdown-indicator {
-        color: ${props => props.theme.colors.text.primary};
+        color: ${props => props.theme.colors.text.main};
       }
     }
   }
@@ -152,18 +152,18 @@ const StyledSelectAsync = styled(SelectAsync)`
   .react-select__indicator,
   .react-select__dropdown-indicator {
     padding: 4px 16px;
-    color: ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.slightlyMuted};
     &:hover {
-      color: ${props => props.theme.colors.text.primary};
+      color: ${props => props.theme.colors.text.main};
     }
   }
 
   .react-select__control--menu-is-open {
     .react-select__indicator,
     .react-select__dropdown-indicator {
-      color: ${props => props.theme.colors.text.primary};
+      color: ${props => props.theme.colors.text.main};
       &:hover {
-        color: ${props => props.theme.colors.text.primary};
+        color: ${props => props.theme.colors.text.main};
       }
     }
   }
diff --git a/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx b/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
index f3d159821798f..bd2e98269407c 100644
--- a/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
+++ b/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
@@ -45,7 +45,7 @@ export default function DeleteTrustedClusterDialog(props: Props) {
         )}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete trusted cluster{' '}
-          <Text as="span" bold color="text.primary">
+          <Text as="span" bold color="text.main">
             {name}
           </Text>
           ?
diff --git a/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx b/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx
index ffa6d1bd6d2a2..9b8ea65bf89c0 100644
--- a/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx
+++ b/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx
@@ -95,7 +95,7 @@ export default function TrustedClusters() {
           <Info
             ml="4"
             width="240px"
-            color="text.primary"
+            color="text.main"
             style={{ flexShrink: 0 }}
           />
         </Flex>
@@ -135,7 +135,7 @@ const Info = props => (
     <Text typography="subtitle1" mb={2}>
       Please{' '}
       <Link
-        color="text.primary"
+        color="text.main"
         href="https://goteleport.com/docs/setup/admin/trustedclusters/"
         target="_blank"
       >
diff --git a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
index 7d0b02780aaa8..cf7582af4c2a5 100644
--- a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
+++ b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
@@ -58,7 +58,7 @@ export default function TrustedListItem(props: Props) {
           my="4"
           style={{ textAlign: 'center' }}
           fontSize="48px"
-          color="text.primary"
+          color="text.main"
         />
         <Text
           typography="p"
diff --git a/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap b/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
index 6cf825afbce18..a17493926b7fe 100644
--- a/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserDelete/__snapshots__/UserDelete.story.test.tsx.snap
@@ -62,7 +62,7 @@ exports[`confirm state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -199,7 +199,7 @@ exports[`confirm state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Delete User?
         </div>
@@ -323,7 +323,7 @@ exports[`failed state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -460,7 +460,7 @@ exports[`failed state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Delete User?
         </div>
@@ -569,7 +569,7 @@ exports[`processing state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -706,7 +706,7 @@ exports[`processing state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Delete User?
         </div>
diff --git a/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap b/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
index 84f4ff995738c..af1800baaf66f 100644
--- a/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserReset/__snapshots__/UserReset.story.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`failed state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -221,7 +221,7 @@ exports[`failed state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Reset User Authentication?
         </div>
@@ -330,7 +330,7 @@ exports[`processing state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -468,7 +468,7 @@ exports[`processing state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Reset User Authentication?
         </div>
@@ -571,7 +571,7 @@ exports[`success state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -726,7 +726,7 @@ exports[`success state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Share Link
         </div>
diff --git a/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap b/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
index 99175efa6d90f..5017a2aa4e357 100644
--- a/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/UserTokenLink/__snapshots__/UserTokenLink.story.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`reset link dialog 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -216,7 +216,7 @@ exports[`reset link dialog 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Share Link
         </div>
@@ -334,7 +334,7 @@ exports[`reset link dialog as invite 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -489,7 +489,7 @@ exports[`reset link dialog as invite 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Share Link
         </div>
diff --git a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
index b894275326a79..3117e427ec014 100644
--- a/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
+++ b/web/packages/teleport/src/Users/__snapshots__/Users.story.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`success state 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0);
   border: 1px solid rgba(255,255,255,0.36);
   font-size: 10px;
@@ -75,7 +75,6 @@ exports[`success state 1`] = `
 .c22:hover,
 .c22:focus {
   background: rgba(255,255,255,0.07);
-  border: 1px solid undefined;
 }
 
 .c22:active {
@@ -107,7 +106,7 @@ exports[`success state 1`] = `
   color: #FFFFFF;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -381,7 +380,7 @@ exports[`success state 1`] = `
 }
 
 .c8::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -440,7 +439,7 @@ exports[`success state 1`] = `
           >
             <div
               class="c13"
-              color="text.primary"
+              color="text.main"
               style="white-space: nowrap; text-transform: uppercase;"
             >
               Showing 
@@ -554,7 +553,7 @@ exports[`success state 1`] = `
                 OPTIONS
                 <span
                   class="c16 c23 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -592,7 +591,7 @@ exports[`success state 1`] = `
                 OPTIONS
                 <span
                   class="c16 c23 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -636,7 +635,7 @@ exports[`success state 1`] = `
                 OPTIONS
                 <span
                   class="c16 c23 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
diff --git a/web/packages/teleport/src/Welcome/CardWelcome.tsx b/web/packages/teleport/src/Welcome/CardWelcome.tsx
index ddbb7c9850793..95dad3554e6c7 100644
--- a/web/packages/teleport/src/Welcome/CardWelcome.tsx
+++ b/web/packages/teleport/src/Welcome/CardWelcome.tsx
@@ -21,7 +21,7 @@ export function CardWelcome({ title, subTitle, btnText, onClick }: Props) {
   return (
     <Card bg="levels.surface" my={6} mx="auto" width="464px">
       <Box p={6}>
-        <Text typography="h2" mb={3} textAlign="center" color="text.primary">
+        <Text typography="h2" mb={3} textAlign="center" color="text.main">
           {title}
         </Text>
         <Text typography="h5" mb={3} textAlign="center">
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx b/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
index df027f4c8bac0..329257d637126 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
@@ -25,7 +25,7 @@ export function Expired({ resetMode = false }) {
   return (
     <Card
       width="540px"
-      color="text.primary"
+      color="text.main"
       p={6}
       bg="levels.elevated"
       mt={6}
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
index db1cc6da2d301..afc7dbca453dc 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
@@ -111,8 +111,8 @@ export function NewMfaDevice(props: Props) {
               style={{ cursor: 'pointer' }}
             />
             <Box>
-              <Text color="text.secondary">Step 2 of 2</Text>
-              <Text typography="h4" color="text.primary" bold>
+              <Text color="text.slightlyMuted">Step 2 of 2</Text>
+              <Text typography="h4" color="text.main" bold>
                 Set Two-Factor Device
               </Text>
             </Box>
@@ -120,7 +120,7 @@ export function NewMfaDevice(props: Props) {
           {submitAttempt.status === 'failed' && (
             <Danger children={submitAttempt.statusText} />
           )}
-          <Text typography="subtitle1" color="text.primary" caps mb={1}>
+          <Text typography="subtitle1" color="text.main" caps mb={1}>
             Two-Factor Method
           </Text>
           <Box mb={1}>
@@ -156,7 +156,7 @@ export function NewMfaDevice(props: Props) {
                   fontSize={1}
                   textAlign="center"
                   mt={2}
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                 >
                   Scan the QR Code with any authenticator app and enter the
                   generated code. We recommend{' '}
@@ -170,7 +170,11 @@ export function NewMfaDevice(props: Props) {
             {mfaType?.value === 'webauthn' && (
               <>
                 <Image src={imgSrc} width="220px" height="154px" />
-                <Text fontSize={1} color="text.secondary" textAlign="center">
+                <Text
+                  fontSize={1}
+                  color="text.slightlyMuted"
+                  textAlign="center"
+                >
                   We support a wide range of hardware devices including
                   YubiKeys, Touch ID, watches, and more.
                 </Text>
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx
index 3de5c3cc6b02c..68cc70d06ecbd 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx
@@ -76,8 +76,8 @@ export function NewPassword(props: Props) {
     <Validation>
       {({ validator }) => (
         <Box p={5} ref={refCallback} data-testid="password">
-          {mfaEnabled && <Text color="text.secondary">Step 1 of 2</Text>}
-          <Text typography="h4" bold mb={3} color="text.primary">
+          {mfaEnabled && <Text color="text.slightlyMuted">Step 1 of 2</Text>}
+          <Text typography="h4" bold mb={3} color="text.main">
             Set A Password
           </Text>
           {submitAttempt.status === 'failed' && (
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewPasswordlessDevice.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewPasswordlessDevice.tsx
index bc511987d7c1d..e911ac11c6315 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewPasswordlessDevice.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewPasswordlessDevice.tsx
@@ -73,7 +73,7 @@ export function NewPasswordlessDevice(props: Props & SliderProps) {
     <Validation>
       {({ validator }) => (
         <Box px={5} pb={4} pt={5} ref={refCallback} data-testid="passwordless">
-          <Text typography="h4" mb={3} color="text.primary" bold>
+          <Text typography="h4" mb={3} color="text.main" bold>
             Set A Passwordless Device
           </Text>
           {submitAttempt.status === 'failed' && (
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
index dd1b4d4f8cbd1..ffac2547fd646 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
@@ -63,7 +63,7 @@ export function RegisterSuccess({
       <Flex justifyContent="center" mb={3}>
         <Image src={shieldCheck} width="200px" height="143px" />
       </Flex>
-      <Text fontSize={2} color="text.secondary" mb={4}>
+      <Text fontSize={2} color="text.slightlyMuted" mb={4}>
         Congratulations your {actionTxt} is completed.
         <br />
         Proceed to access your account.
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
index b1664b25e28ed..af713e677012d 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
+++ b/web/packages/teleport/src/Welcome/NewCredentials/__snapshots__/NewCredentials.story.test.tsx.snap
@@ -116,7 +116,7 @@ exports[`story.MfaDeviceError 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 {
@@ -147,13 +147,13 @@ exports[`story.MfaDeviceError 1`] = `
   font-size: 12px;
   margin: 0px;
   margin-top: 8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
 .c21 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -170,7 +170,7 @@ exports[`story.MfaDeviceError 1`] = `
 .c21:hover,
 .c21:focus,
 .c21:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c21::-ms-clear {
@@ -178,7 +178,7 @@ exports[`story.MfaDeviceError 1`] = `
 }
 
 .c21::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c21:read-only {
@@ -186,8 +186,8 @@ exports[`story.MfaDeviceError 1`] = `
 }
 
 .c21:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c20 {
@@ -284,13 +284,13 @@ exports[`story.MfaDeviceError 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
         <div
           class="c6"
-          color="text.primary"
+          color="text.main"
         >
           Set Two-Factor Device
         </div>
@@ -304,7 +304,7 @@ exports[`story.MfaDeviceError 1`] = `
     </div>
     <div
       class="c8"
-      color="text.primary"
+      color="text.main"
     >
       Two-Factor Method
     </div>
@@ -342,7 +342,7 @@ exports[`story.MfaDeviceError 1`] = `
       />
       <div
         class="c16"
-        color="text.secondary"
+        color="text.slightlyMuted"
         font-size="1"
       >
         Scan the QR Code with any authenticator app and enter the generated code. We recommend
@@ -501,7 +501,7 @@ exports[`story.MfaDeviceOn 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 {
@@ -531,13 +531,13 @@ exports[`story.MfaDeviceOn 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
 .c18 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -554,7 +554,7 @@ exports[`story.MfaDeviceOn 1`] = `
 .c18:hover,
 .c18:focus,
 .c18:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c18::-ms-clear {
@@ -562,7 +562,7 @@ exports[`story.MfaDeviceOn 1`] = `
 }
 
 .c18::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c18:read-only {
@@ -570,8 +570,8 @@ exports[`story.MfaDeviceOn 1`] = `
 }
 
 .c18:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c17 {
@@ -656,13 +656,13 @@ exports[`story.MfaDeviceOn 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
         <div
           class="c6"
-          color="text.primary"
+          color="text.main"
         >
           Set Two-Factor Device
         </div>
@@ -670,7 +670,7 @@ exports[`story.MfaDeviceOn 1`] = `
     </div>
     <div
       class="c7"
-      color="text.primary"
+      color="text.main"
     >
       Two-Factor Method
     </div>
@@ -721,7 +721,7 @@ exports[`story.MfaDeviceOn 1`] = `
       />
       <div
         class="c14"
-        color="text.secondary"
+        color="text.slightlyMuted"
         font-size="1"
       >
         We support a wide range of hardware devices including YubiKeys, Touch ID, watches, and more.
@@ -857,7 +857,7 @@ exports[`story.MfaDeviceOtp 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 {
@@ -888,13 +888,13 @@ exports[`story.MfaDeviceOtp 1`] = `
   font-size: 12px;
   margin: 0px;
   margin-top: 8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
 .c20 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -911,7 +911,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 .c20:hover,
 .c20:focus,
 .c20:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c20::-ms-clear {
@@ -919,7 +919,7 @@ exports[`story.MfaDeviceOtp 1`] = `
 }
 
 .c20::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c20:read-only {
@@ -927,8 +927,8 @@ exports[`story.MfaDeviceOtp 1`] = `
 }
 
 .c20:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c19 {
@@ -1025,13 +1025,13 @@ exports[`story.MfaDeviceOtp 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
         <div
           class="c6"
-          color="text.primary"
+          color="text.main"
         >
           Set Two-Factor Device
         </div>
@@ -1039,7 +1039,7 @@ exports[`story.MfaDeviceOtp 1`] = `
     </div>
     <div
       class="c7"
-      color="text.primary"
+      color="text.main"
     >
       Two-Factor Method
     </div>
@@ -1077,7 +1077,7 @@ exports[`story.MfaDeviceOtp 1`] = `
       />
       <div
         class="c15"
-        color="text.secondary"
+        color="text.slightlyMuted"
         font-size="1"
       >
         Scan the QR Code with any authenticator app and enter the generated code. We recommend
@@ -1236,7 +1236,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 {
@@ -1266,13 +1266,13 @@ exports[`story.MfaDeviceWebauthn 1`] = `
   text-overflow: ellipsis;
   font-size: 12px;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
 .c18 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1289,7 +1289,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 .c18:hover,
 .c18:focus,
 .c18:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c18::-ms-clear {
@@ -1297,7 +1297,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 }
 
 .c18::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c18:read-only {
@@ -1305,8 +1305,8 @@ exports[`story.MfaDeviceWebauthn 1`] = `
 }
 
 .c18:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c17 {
@@ -1391,13 +1391,13 @@ exports[`story.MfaDeviceWebauthn 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
         <div
           class="c6"
-          color="text.primary"
+          color="text.main"
         >
           Set Two-Factor Device
         </div>
@@ -1405,7 +1405,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
     </div>
     <div
       class="c7"
-      color="text.primary"
+      color="text.main"
     >
       Two-Factor Method
     </div>
@@ -1443,7 +1443,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
       />
       <div
         class="c14"
-        color="text.secondary"
+        color="text.slightlyMuted"
         font-size="1"
       >
         We support a wide range of hardware devices including YubiKeys, Touch ID, watches, and more.
@@ -1588,7 +1588,7 @@ exports[`story.PasswordOnlyError 1`] = `
 
 .c8 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1605,7 +1605,7 @@ exports[`story.PasswordOnlyError 1`] = `
 .c8:hover,
 .c8:focus,
 .c8:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c8::-ms-clear {
@@ -1613,7 +1613,7 @@ exports[`story.PasswordOnlyError 1`] = `
 }
 
 .c8::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8:read-only {
@@ -1621,8 +1621,8 @@ exports[`story.PasswordOnlyError 1`] = `
 }
 
 .c8:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c7 {
@@ -1696,7 +1696,7 @@ exports[`story.PasswordOnlyError 1`] = `
       >
         <div
           class="c4"
-          color="text.primary"
+          color="text.main"
         >
           Set A Password
         </div>
@@ -1881,7 +1881,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: none;
   text-transform: none;
   min-height: 32px;
@@ -1926,7 +1926,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 
 .c8 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1943,7 +1943,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 .c8:hover,
 .c8:focus,
 .c8:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c8::-ms-clear {
@@ -1951,7 +1951,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 }
 
 .c8::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8:read-only {
@@ -1959,8 +1959,8 @@ exports[`story.PrimaryPasswordlessError 1`] = `
 }
 
 .c8:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c7 {
@@ -2034,7 +2034,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
       >
         <div
           class="c4"
-          color="text.primary"
+          color="text.main"
         >
           Set A Passwordless Device
         </div>
diff --git a/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx b/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
index 91113ca40dd0b..3f851384bd282 100644
--- a/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
+++ b/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
@@ -27,7 +27,7 @@ export default function CardEmpty(props) {
       m="0 auto"
       maxWidth="600px"
       textAlign="center"
-      color="text.primary"
+      color="text.main"
       style={{ borderRadius: '6px' }}
       {...styles}
     >
diff --git a/web/packages/teleport/src/components/Empty/Empty.tsx b/web/packages/teleport/src/components/Empty/Empty.tsx
index 681f7fa3fdfb7..9e5a5a49215d9 100644
--- a/web/packages/teleport/src/components/Empty/Empty.tsx
+++ b/web/packages/teleport/src/components/Empty/Empty.tsx
@@ -58,7 +58,7 @@ export default function Empty(props: Props) {
         mx="auto"
         maxWidth="664px"
         textAlign="center"
-        color="text.primary"
+        color="text.main"
         borderRadius="12px"
       >
         <Text typography="h2" mb="3">
diff --git a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
index 846c72182e7c5..86a51b99eab87 100644
--- a/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
+++ b/web/packages/teleport/src/components/EventRangePicker/Custom/Custom.jsx
@@ -84,7 +84,7 @@ export default class CustomRange extends React.Component {
     return (
       <StyledDateRange>
         <StyledCloseButton title="Close" onClick={this.props.onClosePicker}>
-          <CloseIcon color="primary" />
+          <CloseIcon color="dark" />
         </StyledCloseButton>
         <DayPicker
           className="Selectable"
diff --git a/web/packages/teleport/src/components/EventRangePicker/EventRangePicker.tsx b/web/packages/teleport/src/components/EventRangePicker/EventRangePicker.tsx
index 457b74544ab5c..49fd4ca2e7495 100644
--- a/web/packages/teleport/src/components/EventRangePicker/EventRangePicker.tsx
+++ b/web/packages/teleport/src/components/EventRangePicker/EventRangePicker.tsx
@@ -85,7 +85,7 @@ const ValueContainer = ({ children, ...props }) => {
   if (isCustom) {
     return (
       <components.ValueContainer {...props}>
-        <Text color="text.primary">
+        <Text color="text.main">
           {`${displayDate(from)} - ${displayDate(to)}`}
         </Text>
         {children}
diff --git a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
index 5ca3cde8c292a..ece7dd9b5eeab 100644
--- a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
+++ b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
@@ -175,7 +175,12 @@ const Passwordless = ({
             <Key mr={3} fontSize={16} />
             <Box>
               <Text typography="h6">Passwordless</Text>
-              <Text fontSize={1} color="text.secondary">
+              <Text
+                fontSize={1}
+                color={
+                  attempt.isProcessing ? 'text.disabled' : 'text.slightlyMuted'
+                }
+              >
                 Follow the prompt from your browser
               </Text>
             </Box>
@@ -472,7 +477,7 @@ const Divider = () => (
     justifyContent="center"
     flexDirection="column"
     borderBottom={1}
-    borderColor="text.placeholder"
+    borderColor="text.muted"
     mx={5}
     mt={5}
     mb={2}
@@ -484,18 +489,21 @@ const Divider = () => (
 const StyledPaswordlessBtn = styled(ButtonText)`
   display: block;
   text-align: left;
-  border: 1px solid ${({ theme }) => theme.colors.text.placeholder};
+  border: 1px solid ${({ theme }) => theme.colors.buttons.border.border};
 
   &:hover,
-  &:active,
   &:focus {
-    border-color: ${({ theme }) => theme.colors.text.secondary};
+    background: ${({ theme }) => theme.colors.buttons.border.hover};
     text-decoration: none;
   }
 
+  &:active {
+    background: ${({ theme }) => theme.colors.buttons.border.active};
+  }
+
   &[disabled] {
     pointer-events: none;
-    opacity: 0.7;
+    background: ${({ theme }) => theme.colors.buttons.bgDisabled};
   }
 `;
 
diff --git a/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap b/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
index 076773040963c..8cd52c997ce4a 100644
--- a/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/FormLogin/__snapshots__/FormLogin.story.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`auth2faType: off 1`] = `
 
 .c7 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -103,7 +103,7 @@ exports[`auth2faType: off 1`] = `
 .c7:hover,
 .c7:focus,
 .c7:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c7::-ms-clear {
@@ -111,7 +111,7 @@ exports[`auth2faType: off 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c7:read-only {
@@ -119,8 +119,8 @@ exports[`auth2faType: off 1`] = `
 }
 
 .c7:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c6 {
@@ -362,7 +362,7 @@ exports[`auth2faType: optional rendering 1`] = `
 
 .c7 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -379,7 +379,7 @@ exports[`auth2faType: optional rendering 1`] = `
 .c7:hover,
 .c7:focus,
 .c7:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c7::-ms-clear {
@@ -387,7 +387,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c7:read-only {
@@ -395,8 +395,8 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c7:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c6 {
@@ -497,20 +497,20 @@ exports[`auth2faType: optional rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c12 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__control:hover,
 .c12 .react-select__control:focus,
 .c12 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -531,7 +531,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c12 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -545,7 +545,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c12 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__multi-value {
@@ -591,7 +591,7 @@ exports[`auth2faType: optional rendering 1`] = `
 }
 
 .c12 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c12 .react-select__clear-indicator:hover,
@@ -625,20 +625,20 @@ exports[`auth2faType: optional rendering 1`] = `
 
 .c12 .react-select--is-disabled,
 .c12 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__single-value,
 .c12 .react-select__control--is-disabled .react-select__single-value,
 .c12 .react-select--is-disabled .react-select__placeholder,
 .c12 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__indicator,
 .c12 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -894,7 +894,7 @@ exports[`auth2faType: otp rendering 1`] = `
 
 .c7 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -911,7 +911,7 @@ exports[`auth2faType: otp rendering 1`] = `
 .c7:hover,
 .c7:focus,
 .c7:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c7::-ms-clear {
@@ -919,7 +919,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c7:read-only {
@@ -927,8 +927,8 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c7:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c6 {
@@ -1029,20 +1029,20 @@ exports[`auth2faType: otp rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c12 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__control:hover,
 .c12 .react-select__control:focus,
 .c12 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1063,7 +1063,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c12 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1077,7 +1077,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c12 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__multi-value {
@@ -1123,7 +1123,7 @@ exports[`auth2faType: otp rendering 1`] = `
 }
 
 .c12 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c12 .react-select__clear-indicator:hover,
@@ -1157,20 +1157,20 @@ exports[`auth2faType: otp rendering 1`] = `
 
 .c12 .react-select--is-disabled,
 .c12 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__single-value,
 .c12 .react-select__control--is-disabled .react-select__single-value,
 .c12 .react-select--is-disabled .react-select__placeholder,
 .c12 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__indicator,
 .c12 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -1439,7 +1439,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 
 .c7 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -1456,7 +1456,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 .c7:hover,
 .c7:focus,
 .c7:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c7::-ms-clear {
@@ -1464,7 +1464,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c7:read-only {
@@ -1472,8 +1472,8 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c7:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c6 {
@@ -1574,20 +1574,20 @@ exports[`auth2faType: webauthn rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c12 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__control:hover,
 .c12 .react-select__control:focus,
 .c12 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1608,7 +1608,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c12 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -1622,7 +1622,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c12 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__multi-value {
@@ -1668,7 +1668,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
 }
 
 .c12 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c12 .react-select__clear-indicator:hover,
@@ -1702,20 +1702,20 @@ exports[`auth2faType: webauthn rendering 1`] = `
 
 .c12 .react-select--is-disabled,
 .c12 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__single-value,
 .c12 .react-select__control--is-disabled .react-select__single-value,
 .c12 .react-select--is-disabled .react-select__placeholder,
 .c12 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__indicator,
 .c12 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -2045,7 +2045,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 
 .c7 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -2062,7 +2062,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 .c7:hover,
 .c7:focus,
 .c7:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c7::-ms-clear {
@@ -2070,7 +2070,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c7::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c7:read-only {
@@ -2078,8 +2078,8 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c7:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c6 {
@@ -2180,20 +2180,20 @@ exports[`cloud auth2faType: on rendering 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c17 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c17 .react-select__control:hover,
 .c17 .react-select__control:focus,
 .c17 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2214,7 +2214,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c17 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -2228,7 +2228,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c17 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c17 .react-select__multi-value {
@@ -2274,7 +2274,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
 }
 
 .c17 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c17 .react-select__clear-indicator:hover,
@@ -2308,20 +2308,20 @@ exports[`cloud auth2faType: on rendering 1`] = `
 
 .c17 .react-select--is-disabled,
 .c17 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c17 .react-select--is-disabled .react-select__single-value,
 .c17 .react-select__control--is-disabled .react-select__single-value,
 .c17 .react-select--is-disabled .react-select__placeholder,
 .c17 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c17 .react-select--is-disabled .react-select__indicator,
 .c17 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -2688,7 +2688,7 @@ exports[`server error rendering 1`] = `
 
 .c8 {
   appearance: none;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   box-sizing: border-box;
   display: block;
@@ -2705,7 +2705,7 @@ exports[`server error rendering 1`] = `
 .c8:hover,
 .c8:focus,
 .c8:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
 }
 
 .c8::-ms-clear {
@@ -2713,7 +2713,7 @@ exports[`server error rendering 1`] = `
 }
 
 .c8::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c8:read-only {
@@ -2721,8 +2721,8 @@ exports[`server error rendering 1`] = `
 }
 
 .c8:disabled {
-  color: rgba(255,255,255,0.18);
-  border-color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border-color: rgba(255,255,255,0.36);
 }
 
 .c7 {
@@ -3238,7 +3238,7 @@ exports[`sso providers rendering 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: none;
   text-transform: none;
   min-height: 32px;
diff --git a/web/packages/teleport/src/components/InputSearch/InputSearch.jsx b/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
index 5f48e4df87e39..cd0e15c97210b 100644
--- a/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
+++ b/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
@@ -53,7 +53,7 @@ class InputSearch extends React.Component {
       <Input
         px="3"
         placeholder="SEARCH..."
-        color="text.primary"
+        color="text.main"
         {...rest}
         autoFocus={autoFocus}
         value={this.state.value}
@@ -75,10 +75,10 @@ function fromTheme(props) {
     '&:focus, &:active': {
       background: props.theme.colors.levels.elevated,
       boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, .24)',
-      color: props.theme.colors.text.primary,
+      color: props.theme.colors.text.main,
     },
     '&::placeholder': {
-      color: props.theme.colors.text.placeholder,
+      color: props.theme.colors.text.muted,
       fontSize: props.theme.fontSizes[1],
     },
   };
diff --git a/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx b/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
index 2abfa779d9016..f19c6e5cf5c93 100644
--- a/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
+++ b/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
@@ -138,7 +138,7 @@ function LabelSelector({ onChange }: LabelSelectorProps) {
         data-testid="label-container"
       >
         {labels.length === 0 && (
-          <Text color="text.placeholder">Click to add new labels.</Text>
+          <Text color="text.muted">Click to add new labels.</Text>
         )}
         {labelList({ labels, onDismiss: handleLabelDismiss })}
       </LabelContainer>
@@ -216,7 +216,7 @@ const AddLabelInput = styled.input`
   background: ${props => props.theme.colors.sunken};
   border-radius: 52px;
   border: 1.5px solid ${({ theme }) => theme.colors.brand};
-  color: ${({ theme }) => theme.colors.text.primary};
+  color: ${({ theme }) => theme.colors.text.main};
   height: 40px;
   padding: 0 12px;
   width: calc(100% - 2rem);
@@ -225,7 +225,7 @@ const AddLabelInput = styled.input`
 const CreateLabel = styled.button`
   background: none;
   border: none;
-  color: ${({ theme }) => theme.colors.text.primary};
+  color: ${({ theme }) => theme.colors.text.main};
   cursor: pointer;
   font-size: 1rem;
   margin-left: 16px;
diff --git a/web/packages/teleport/src/components/Layout/Layout.jsx b/web/packages/teleport/src/components/Layout/Layout.jsx
index 206956dff5efe..c68a481a53599 100644
--- a/web/packages/teleport/src/components/Layout/Layout.jsx
+++ b/web/packages/teleport/src/components/Layout/Layout.jsx
@@ -89,7 +89,7 @@ const AppHorizontalSplit = styled.div`
 `;
 
 const TabItem = styled.button`
-  color: ${props => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.slightlyMuted};
   cursor: pointer;
   display: inline-flex;
   font-size: 14px;
@@ -106,7 +106,7 @@ const TabItem = styled.button`
   }
 
   &.active {
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
   }
 
   &.active:after {
diff --git a/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx b/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
index 1686a8e47a1f0..f1ca78b22bf0d 100644
--- a/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
+++ b/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
@@ -40,7 +40,7 @@ export default function RemoveDialog(props: Props) {
         )}
         <Text typography="paragraph" mb="6">
           Are you sure you want to remove device{' '}
-          <Text as="span" bold color="text.primary">
+          <Text as="span" bold color="text.main">
             {name}
           </Text>{' '}
           ?
diff --git a/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx b/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
index fcf733273430e..729b68d7d6b37 100644
--- a/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
+++ b/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
@@ -50,26 +50,22 @@ export const PrivateKeyLoginDisabledCard = ({
   onRecover?: (isRecoverPassword: boolean) => void;
 }) => (
   <Card bg="levels.surface" my="5" mx="auto" width="464px" px={5} pb={4}>
-    <Text typography="h3" pt={4} textAlign="center" color="text.primary">
+    <Text typography="h3" pt={4} textAlign="center" color="text.main">
       {title}
     </Text>
     <Danger my={5}>Web UI Login Disabled</Danger>
     <Text mb={2} typography="paragraph2">
       This Teleport Cluster requires that user{' '}
-      <Link
-        color="text.primary"
-        href={LINK_HARDWARE_KEY_SUPPORT}
-        target="_blank"
-      >
+      <Link color="text.main" href={LINK_HARDWARE_KEY_SUPPORT} target="_blank">
         private keys
       </Link>{' '}
       be stored on hardware authentication devices. Since these keys are not
       accessible by web browsers, Web UI login has been disabled. Please use{' '}
-      <Link color="text.primary" href={LINK_CONNECT} target="_blank">
+      <Link color="text.main" href={LINK_CONNECT} target="_blank">
         Teleport Connect
       </Link>{' '}
       or{' '}
-      <Link color="text.primary" href={LINK_TSH} target="_blank">
+      <Link color="text.main" href={LINK_TSH} target="_blank">
         tsh
       </Link>{' '}
       to log in.
@@ -121,18 +117,18 @@ export function PrivateKeyAccessRequestDialogue({
         <Text mb={4}>
           This access requires use of hardware backed{' '}
           <Link
-            color="text.primary"
+            color="text.main"
             href={LINK_HARDWARE_KEY_SUPPORT}
             target="_blank"
           >
             private keys
           </Link>{' '}
           which are not supported in the web. Please use{' '}
-          <Link color="text.primary" href={LINK_TSH} target="_blank">
+          <Link color="text.main" href={LINK_TSH} target="_blank">
             tsh
           </Link>{' '}
           to login with the approved request ID or use{' '}
-          <Link color="text.primary" href={LINK_CONNECT} target="_blank">
+          <Link color="text.main" href={LINK_CONNECT} target="_blank">
             Teleport Connect
           </Link>
           .
diff --git a/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx b/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
index dd3abf0f71b17..1673d0e405c35 100644
--- a/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
+++ b/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
@@ -53,7 +53,7 @@ export default function FieldInputSsh({
       <StyledLabel>SSH:</StyledLabel>
       <StyledInput
         bg="levels.surface"
-        color="text.primary"
+        color="text.main"
         placeholder="login@host:port"
         autoFocus={autoFocus}
         onKeyPress={onKeyPress}
@@ -119,7 +119,7 @@ const StyledInput = styled.input`
 
   ::placeholder {
     opacity: 1;
-    color: ${props => props.theme.colors.text.placeholder};
+    color: ${props => props.theme.colors.text.muted};
     font-size: ${props => props.theme.fontSizes[1]}px;
   }
 
diff --git a/web/packages/teleport/src/components/ReAuthenticate/ReAuthenticate.tsx b/web/packages/teleport/src/components/ReAuthenticate/ReAuthenticate.tsx
index b9a38a5ae0acc..0a1ef97856d19 100644
--- a/web/packages/teleport/src/components/ReAuthenticate/ReAuthenticate.tsx
+++ b/web/packages/teleport/src/components/ReAuthenticate/ReAuthenticate.tsx
@@ -79,7 +79,7 @@ export function ReAuthenticate({
           <form>
             <DialogHeader style={{ flexDirection: 'column' }}>
               <DialogTitle>Verify your identity</DialogTitle>
-              <Text textAlign="center" color="text.secondary">
+              <Text textAlign="center" color="text.slightlyMuted">
                 You must verify your identity with one of your existing
                 two-factor devices before {actionText}.
               </Text>
diff --git a/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap b/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
index c6a7e4e5016f4..e3478026972a8 100644
--- a/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/ReAuthenticate/__snapshots__/ReAuthenticate.story.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -135,7 +135,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
@@ -240,20 +240,20 @@ exports[`render failed state for re-authentication dialog 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c12 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__control:hover,
 .c12 .react-select__control:focus,
 .c12 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -274,7 +274,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c12 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -288,7 +288,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c12 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c12 .react-select__multi-value {
@@ -334,7 +334,7 @@ exports[`render failed state for re-authentication dialog 1`] = `
 }
 
 .c12 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c12 .react-select__clear-indicator:hover,
@@ -368,20 +368,20 @@ exports[`render failed state for re-authentication dialog 1`] = `
 
 .c12 .react-select--is-disabled,
 .c12 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__single-value,
 .c12 .react-select__control--is-disabled .react-select__single-value,
 .c12 .react-select--is-disabled .react-select__placeholder,
 .c12 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c12 .react-select--is-disabled .react-select__indicator,
 .c12 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -407,13 +407,13 @@ exports[`render failed state for re-authentication dialog 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Verify your identity
           </div>
           <div
             class="c6"
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             You must verify your identity with one of your existing two-factor devices before 
             performing this action
@@ -603,7 +603,7 @@ exports[`render re-authentication dialog 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -640,7 +640,7 @@ exports[`render re-authentication dialog 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   text-align: center;
 }
 
@@ -745,20 +745,20 @@ exports[`render re-authentication dialog 1`] = `
   outline: none;
   min-height: 40px;
   height: fit-content;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
   border-radius: 4px;
   background-color: transparent;
   box-shadow: none;
 }
 
 .c11 .react-select__control .react-select__dropdown-indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c11 .react-select__control:hover,
 .c11 .react-select__control:focus,
 .c11 .react-select__control:active {
-  border: 1px solid rgba(255,255,255,0.56);
+  border: 1px solid rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -779,7 +779,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c11 .react-select__control--is-focused {
-  border-color: rgba(255,255,255,0.56);
+  border-color: rgba(255,255,255,0.72);
   background-color: rgba(255,255,255,0.07);
   cursor: pointer;
 }
@@ -793,7 +793,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c11 .react-select__placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c11 .react-select__multi-value {
@@ -839,7 +839,7 @@ exports[`render re-authentication dialog 1`] = `
 }
 
 .c11 .react-select__clear-indicator {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c11 .react-select__clear-indicator:hover,
@@ -873,20 +873,20 @@ exports[`render re-authentication dialog 1`] = `
 
 .c11 .react-select--is-disabled,
 .c11 .react-select__control--is-disabled {
-  color: rgba(255,255,255,0.18);
-  border: 1px solid rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
+  border: 1px solid rgba(255,255,255,0.36);
 }
 
 .c11 .react-select--is-disabled .react-select__single-value,
 .c11 .react-select__control--is-disabled .react-select__single-value,
 .c11 .react-select--is-disabled .react-select__placeholder,
 .c11 .react-select__control--is-disabled .react-select__placeholder {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 .c11 .react-select--is-disabled .react-select__indicator,
 .c11 .react-select__control--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.18);
+  color: rgba(255,255,255,0.36);
 }
 
 <div
@@ -912,13 +912,13 @@ exports[`render re-authentication dialog 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             Verify your identity
           </div>
           <div
             class="c6"
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             You must verify your identity with one of your existing two-factor devices before 
             performing this action
diff --git a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
index 8df209b962669..2b8b003065ab8 100644
--- a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
+++ b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
@@ -92,7 +92,7 @@ export default function RecoveryCodesDialog({
           className="print"
         >
           <Box mb={5}>
-            <Text typography="h2" mb={3} color="text.primary">
+            <Text typography="h2" mb={3} color="text.main">
               {title}
             </Text>
             <Text mb={1}>
@@ -157,7 +157,7 @@ export default function RecoveryCodesDialog({
             <Text typography="h4" mb={2}>
               Why do I need these codes?
             </Text>
-            <Text color="text.secondary">
+            <Text color="text.slightlyMuted">
               Use them in the event of losing your password or two-factor
               device.
             </Text>
@@ -166,7 +166,7 @@ export default function RecoveryCodesDialog({
             <Text typography="h4" mb={2}>
               How long do the codes last for?
             </Text>
-            <Text color="text.secondary">
+            <Text color="text.slightlyMuted">
               Recovery codes can only be used once. After recovering your
               account, we will generate a new set of codes for you.
             </Text>
@@ -176,7 +176,7 @@ export default function RecoveryCodesDialog({
               <Text typography="h4" mb={2}>
                 What about my old codes?
               </Text>
-              <Text color="text.secondary">
+              <Text color="text.slightlyMuted">
                 Your old recovery codes are no longer valid, please replace them
                 with these new ones.
               </Text>
diff --git a/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap b/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
index 73972e2f4b1c9..07c265ae43d10 100644
--- a/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/RecoveryCodes/__snapshots__/RecoveryCodes.story.test.tsx.snap
@@ -208,7 +208,7 @@ exports[`render correct dialog after creating a new account 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c1 {
@@ -312,7 +312,7 @@ exports[`render correct dialog after creating a new account 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Backup & Recovery Codes
         </div>
@@ -394,7 +394,7 @@ tele-testword-testword-testword-testword-testword-testword-testword
         </div>
         <div
           class="c20"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Use them in the event of losing your password or two-factor device.
         </div>
@@ -409,7 +409,7 @@ tele-testword-testword-testword-testword-testword-testword-testword
         </div>
         <div
           class="c20"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Recovery codes can only be used once. After recovering your account, we will generate a new set of codes for you.
         </div>
@@ -627,7 +627,7 @@ exports[`render correct dialog after resetting account 1`] = `
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c1 {
@@ -731,7 +731,7 @@ exports[`render correct dialog after resetting account 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           New Backup & Recovery Codes
         </div>
@@ -813,7 +813,7 @@ tele-testword-testword-testword-testword-testword-testword-testword
         </div>
         <div
           class="c20"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Use them in the event of losing your password or two-factor device.
         </div>
@@ -828,7 +828,7 @@ tele-testword-testword-testword-testword-testword-testword-testword
         </div>
         <div
           class="c20"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Recovery codes can only be used once. After recovering your account, we will generate a new set of codes for you.
         </div>
@@ -843,7 +843,7 @@ tele-testword-testword-testword-testword-testword-testword-testword
         </div>
         <div
           class="c20"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Your old recovery codes are no longer valid, please replace them with these new ones.
         </div>
diff --git a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
index 7bc3111f7d2ec..fc35d0de90e2c 100644
--- a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
+++ b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
@@ -86,7 +86,7 @@ export default function ResourceEditor(props) {
           </DialogHeader>
           {attempt.isFailed && <Alerts.Danger>{attempt.message}</Alerts.Danger>}
           {!isNew && (
-            <Text mb="2" typography="h4" color="text.primary">
+            <Text mb="2" typography="h4" color="text.main">
               {name}
             </Text>
           )}
diff --git a/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx b/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
index 09dad94a3512a..e991fba342130 100644
--- a/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
+++ b/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
@@ -347,7 +347,7 @@ const StyledLabel = styled.div`
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.24);
   border-radius: 4px;
-  color: ${({ theme }) => theme.colors.text.primary};
+  color: ${({ theme }) => theme.colors.text.main};
   background-color: ${props => props.theme.colors.levels.sunken};
   font-weight: regular;
   font-size: 12px;
@@ -365,7 +365,7 @@ const StyledLabel = styled.div`
   }
 
   button {
-    color: ${({ theme }) => theme.colors.text.primary};
+    color: ${({ theme }) => theme.colors.text.main};
     border-radius: 0;
     font-size: 14px;
     min-width: 10px;
diff --git a/web/packages/teleport/src/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap b/web/packages/teleport/src/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
index 84f8a541390ea..366b93b263a6c 100644
--- a/web/packages/teleport/src/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
+++ b/web/packages/teleport/src/components/TextSelectCopy/__snapshots__/TextSelectCopyMulti.story.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`render multi bash texts 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -338,7 +338,7 @@ exports[`render multi bash texts with comment 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -649,7 +649,7 @@ exports[`render non bash single text 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -841,7 +841,7 @@ exports[`render single bash text 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
@@ -1038,7 +1038,7 @@ exports[`render single bash text with comment 1`] = `
   text-transform: uppercase;
   transition: all 0.3s;
   -webkit-font-smoothing: antialiased;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: rgba(255,255,255,0.07);
   min-height: 32px;
   font-size: 12px;
diff --git a/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx b/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
index ee44c22cbabf4..38424158be74d 100644
--- a/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
+++ b/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
@@ -53,7 +53,7 @@ const UserInfo = styled.div`
 `;
 
 const Username = styled(Text)`
-  color: ${props => props.theme.colors.text.primary}
+  color: ${props => props.theme.colors.text.main}
   font-size: 14px;
   font-weight: 400;
   padding-right: 40px;
@@ -116,7 +116,7 @@ const Dropdown = styled.div<OpenProps>`
 const DropdownItem = styled.div`
   line-height: 1;
   font-size: 14px;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   cursor: pointer;
   border-radius: 4px;
   margin-bottom: 5px;
@@ -138,7 +138,7 @@ const commonDropdownItemStyles = css`
   align-items: center;
   display: flex;
   padding: 10px 10px;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   text-decoration: none;
   transition: opacity 0.15s ease-in;
 
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx
index 7691709c34a92..785402bdc1885 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx
@@ -229,7 +229,7 @@ const Divider = () => (
     justifyContent="center"
     flexDirection="column"
     borderBottom={1}
-    borderColor="text.placeholder"
+    borderColor="text.muted"
     mx={4}
     mt={4}
     mb={4}
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormPasswordless/FormPasswordless.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormPasswordless/FormPasswordless.tsx
index b3cd032157cf2..0ff651b3a6c4c 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormPasswordless/FormPasswordless.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormPasswordless/FormPasswordless.tsx
@@ -31,7 +31,6 @@ export const FormPasswordless = ({
       px={3}
       border={1}
       borderRadius={2}
-      borderColor="text.placeholder"
       width="100%"
       onClick={onLoginWithPasswordless}
       disabled={loginAttempt.status === 'processing'}
@@ -42,7 +41,7 @@ export const FormPasswordless = ({
           <Key mr={3} fontSize={16} />
           <Box>
             <Text typography="h6">Passwordless</Text>
-            <Text fontSize={1} color="text.secondary">
+            <Text fontSize={1} color="text.slightlyMuted">
               Follow the prompts
             </Text>
           </Box>
@@ -56,17 +55,20 @@ export const FormPasswordless = ({
 const StyledPaswordlessBtn = styled(ButtonText)`
   display: block;
   text-align: left;
-  border: 1px solid ${({ theme }) => theme.colors.text.placeholder};
+  border: 1px solid ${({ theme }) => theme.colors.buttons.border.border};
 
   &:hover,
-  &:active,
   &:focus {
-    border-color: 1px solid ${({ theme }) => theme.colors.text.secondary};
+    background: ${({ theme }) => theme.colors.buttons.border.hover};
     text-decoration: none;
   }
 
+  &:active {
+    background: ${({ theme }) => theme.colors.buttons.border.active};
+  }
+
   &[disabled] {
     pointer-events: none;
-    opacity: 0.7;
+    background: ${({ theme }) => theme.colors.buttons.bgDisabled};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
index 3d156b0e710f6..14c18389b79c4 100644
--- a/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
+++ b/web/packages/teleterm/src/ui/ClusterLogout/ClusterLogout.tsx
@@ -74,13 +74,13 @@ export function ClusterLogout({
             type="button"
             disabled={status === 'processing'}
             onClick={onClose}
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             <Close fontSize={5} />
           </ButtonIcon>
         </DialogHeader>
         <DialogContent mb={4}>
-          <Text color="text.secondary" typography="body1">
+          <Text color="text.slightlyMuted" typography="body1">
             Are you sure you want to log out?
           </Text>
           {status === 'error' && <Alerts.Danger mb={5} children={statusText} />}
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
index a24197319c5ad..b3a3464a6e563 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
@@ -49,7 +49,7 @@ const StyledNavButton = styled.button(props => {
   return {
     color: props.active
       ? props.theme.colors.light
-      : props.theme.colors.text.secondary,
+      : props.theme.colors.text.slightlyMuted,
     cursor: 'pointer',
     display: 'inline-flex',
     fontSize: '14px',
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
index 9db626673a850..67e7ac6c3896a 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
@@ -40,7 +40,7 @@ const Input = styled.input(props => {
   return {
     background: theme.colors.levels.surfaceSecondary,
     boxSizing: 'border-box',
-    color: theme.colors.text.primary,
+    color: theme.colors.text.main,
     width: '100%',
     minHeight: '24px',
     minWidth: '300px',
@@ -49,13 +49,13 @@ const Input = styled.input(props => {
     border: '1px solid transparent',
     padding: '2px 12px',
     '&:hover, &:focus': {
-      color: theme.colors.text.contrast,
+      color: theme.colors.text.main,
       borderColor: theme.colors.levels.elevated,
       opacity: 1,
     },
     '::placeholder': {
       opacity: 1,
-      color: theme.colors.text.secondary,
+      color: theme.colors.text.slightlyMuted,
     },
 
     ...space(props),
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
index 695164e927927..ecfd93df91415 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
@@ -27,14 +27,14 @@ const menuLoginTheme = {
     light: theme.colors.levels.surface,
     levels: {
       ...theme.colors.levels,
-      sunkenSecondary: theme.colors.text.primary,
+      sunkenSecondary: theme.colors.text.main,
     },
     grey: {
       [50]: 'rgba(255,255,255,0.05)',
-      [900]: theme.colors.text.primary,
-      [100]: theme.colors.text.secondary,
+      [900]: theme.colors.text.main,
+      [100]: theme.colors.text.slightlyMuted,
     },
-    link: theme.colors.text.primary,
+    link: theme.colors.text.main,
   },
 };
 
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx b/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
index 17f81128f098b..f2589d5e0b81a 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/DocumentCluster.tsx
@@ -84,9 +84,9 @@ export function Cluster() {
   return (
     <Layout mx="auto" px={5} pt={3} height="100%">
       <Flex justifyContent="space-between">
-        <Text typography="body1" color="text.secondary">
+        <Text typography="body1" color="text.slightlyMuted">
           {`clusters / `}
-          <Text as="span" typography="h6" color="text.primary">
+          <Text as="span" typography="h6" color="text.main">
             {`${clusterCtx.state.clusterName}`}
           </Text>
         </Text>
@@ -104,7 +104,7 @@ function RequiresLogin(props: { clusterUri: string; onLogin(): void }) {
       justifyContent="center"
       alignItems="center"
     >
-      <Text typography="h4" color="text.primary" bold>
+      <Text typography="h4" color="text.main" bold>
         {props.clusterUri}
         <Text as="span" typography="h5">
           {` cluster is offline`}
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
index 098bd4611a501..3d887f13f7bc7 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
@@ -50,7 +50,7 @@ export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
     >
       <Flex
         mr="2"
-        color={shouldDisplayIsLoading ? 'text.secondary' : 'text.primary'}
+        color={shouldDisplayIsLoading ? 'text.slightlyMuted' : 'text.main'}
         width="100%"
         css={`
           overflow: auto;
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/OfflineDocumentGateway.tsx b/web/packages/teleterm/src/ui/DocumentGateway/OfflineDocumentGateway.tsx
index 5047c18753f2b..738352d3b4040 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/OfflineDocumentGateway.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/OfflineDocumentGateway.tsx
@@ -49,7 +49,7 @@ export function OfflineDocumentGateway(props: OfflineDocumentGatewayProps) {
     >
       <Text
         typography="h5"
-        color="text.primary"
+        color="text.main"
         mb={2}
         style={{ position: 'relative' }}
       >
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/OnlineDocumentGateway.tsx b/web/packages/teleterm/src/ui/DocumentGateway/OnlineDocumentGateway.tsx
index 29eb97701a8c7..e69ca1054fba7 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/OnlineDocumentGateway.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/OnlineDocumentGateway.tsx
@@ -78,7 +78,7 @@ export function OnlineDocumentGateway(props: OnlineDocumentGatewayProps) {
   return (
     <Box maxWidth="590px" width="100%" mx="auto" mt="4" px="5">
       <Flex justifyContent="space-between" mb="4" flexWrap="wrap" gap={2}>
-        <Text typography="h3" color="text.secondary">
+        <Text typography="h3" color="text.slightlyMuted">
           Database Connection
         </Text>
         <ButtonSecondary size="small" onClick={props.disconnect}>
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
index e1a2e5acbf058..8bbb530d69d60 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
@@ -22,18 +22,18 @@ export const ConfigFieldInput: typeof FieldInput = styled(FieldInput)`
   input {
     background: inherit;
     border: 1px ${props => props.theme.colors.action.disabledBackground} solid;
-    color: ${props => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.main};
     box-shadow: none;
     font-size: 14px;
     height: 34px;
 
     ::placeholder {
       opacity: 1;
-      color: ${props => props.theme.colors.text.secondary};
+      color: ${props => props.theme.colors.text.slightlyMuted};
     }
 
     &:hover {
-      border-color: ${props => props.theme.colors.text.secondary};
+      border-color: ${props => props.theme.colors.text.slightlyMuted};
     }
 
     &:focus {
diff --git a/web/packages/teleterm/src/ui/DocumentTerminal/DocumentTerminal.tsx b/web/packages/teleterm/src/ui/DocumentTerminal/DocumentTerminal.tsx
index 650b8e7c59ede..3d9a2fce748c4 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/DocumentTerminal.tsx
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/DocumentTerminal.tsx
@@ -145,7 +145,7 @@ function DocumentReconnect(props: {
         alignItems="center"
         mt={100}
       >
-        <Text typography="h5" color="text.primary">
+        <Text typography="h5" color="text.main">
           {message}
         </Text>
         <Flex flexDirection="column" alignItems="center" mx="auto">
diff --git a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
index 48f45608582d6..a373411811102 100644
--- a/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
+++ b/web/packages/teleterm/src/ui/DocumentsReopen/DocumentsReopen.tsx
@@ -56,13 +56,13 @@ export function DocumentsReopen(props: DocumentsReopenProps) {
           <ButtonIcon
             type="button"
             onClick={props.onCancel}
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             <Close fontSize={5} />
           </ButtonIcon>
         </DialogHeader>
         <DialogContent mb={4}>
-          <Text typography="body1" color="text.secondary">
+          <Text typography="body1" color="text.slightlyMuted">
             Do you want to reopen tabs from the previous session?
           </Text>
         </DialogContent>
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
index 270e7fb3e561b..76433b76daf90 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/UsageData/UsageData.tsx
@@ -58,17 +58,17 @@ export function UsageData(props: UsageDataProps) {
           <ButtonIcon
             type="button"
             onClick={props.onCancel}
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             <Close fontSize={5} />
           </ButtonIcon>
         </DialogHeader>
         <DialogContent mb={4}>
-          <Text typography="body1" color="text.secondary">
+          <Text typography="body1" color="text.slightlyMuted">
             Do you agree to Teleport Connect collecting anonymized usage data?
             This will help us improve the product.
           </Text>
-          <Text typography="body1" color="text.secondary">
+          <Text typography="body1" color="text.slightlyMuted">
             To learn more, see{' '}
             <Link
               href="https://goteleport.com/docs/faq/#teleport-connect"
diff --git a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
index d67d4c3c12d27..ec8bae80c58c9 100644
--- a/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
+++ b/web/packages/teleterm/src/ui/ModalsHost/modals/UserJobRole/UserJobRole.tsx
@@ -95,7 +95,7 @@ export function UserJobRole(props: UserJobRoleProps) {
           <ButtonIcon
             type="button"
             onClick={props.onCancel}
-            color="text.secondary"
+            color="text.slightlyMuted"
           >
             <Close fontSize={5} />
           </ButtonIcon>
@@ -140,7 +140,7 @@ const DarkInput = styled(Input)`
   background: inherit;
   border: 1px ${props => props.theme.colors.action.disabledBackground} solid;
   box-shadow: none;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   margin-bottom: 10px;
   font-size: 14px;
   height: 34px;
@@ -148,6 +148,6 @@ const DarkInput = styled(Input)`
 
   ::placeholder {
     opacity: 1;
-    color: ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.slightlyMuted};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx b/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
index 071f9cf19742d..29ce6c9b37618 100644
--- a/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
+++ b/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
@@ -206,7 +206,7 @@ const Input = styled.input(props => {
     flex: '1',
     zIndex: '0',
     boxSizing: 'border-box',
-    color: theme.colors.text.primary,
+    color: theme.colors.text.main,
     width: '100%',
     fontSize: '14px',
     border: `0.5px ${theme.colors.action.disabledBackground} solid`,
@@ -214,17 +214,17 @@ const Input = styled.input(props => {
     outline: 'none',
     padding: props.isOpened ? '2px 8px' : '2px 46px 2px 8px', // wider right margin makes place for a shortcut
     '::placeholder': {
-      color: theme.colors.text.secondary,
+      color: theme.colors.text.slightlyMuted,
     },
     '&:hover, &:focus': {
-      color: theme.colors.text.contrast,
+      color: theme.colors.text.main,
       borderColor: theme.colors.light,
     },
     '&:focus': {
       borderColor: theme.colors.brand,
       backgroundColor: theme.colors.levels.sunken,
       '::placeholder': {
-        color: theme.colors.text.placeholder,
+        color: theme.colors.text.muted,
       },
     },
 
@@ -240,7 +240,7 @@ const Shortcut = styled(Box)`
   right: 12px;
   top: 12px;
   padding: 2px 3px;
-  color: ${({ theme }) => theme.colors.text.secondary};
+  color: ${({ theme }) => theme.colors.text.slightlyMuted};
   background-color: ${({ theme }) => theme.colors.levels.surface};
   line-height: 12px;
   font-size: 12px;
diff --git a/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx b/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
index 93f281df044f3..2ddaaeebdc39f 100644
--- a/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
+++ b/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
@@ -87,7 +87,7 @@ function CmdItem(props: { item: types.SuggestionCmd }) {
       <Box flex="0 0 auto" mr={2}>
         {props.item.data.displayName}
       </Box>
-      <Box color="text.secondary">{props.item.data.description}</Box>
+      <Box color="text.slightlyMuted">{props.item.data.description}</Box>
     </Flex>
   );
 }
@@ -165,7 +165,7 @@ const StyledItem = styled.div(({ theme, $active }) => {
     },
 
     padding: '2px 8px',
-    color: theme.colors.text.contrast,
+    color: theme.colors.text.main,
     background: $active
       ? theme.colors.levels.surfaceSecondary
       : theme.colors.levels.sunken,
@@ -175,7 +175,7 @@ const StyledItem = styled.div(({ theme, $active }) => {
 const StyledGlobalSearchResults = styled.div(({ theme, position }) => {
   return {
     boxShadow: '8px 8px 18px rgb(0 0 0)',
-    color: theme.colors.text.contrast,
+    color: theme.colors.text.main,
     background: theme.colors.levels.surface,
     boxSizing: 'border-box',
     marginTop: '42px',
diff --git a/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx b/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
index 1d59fa62d9291..4c04ad2c52de8 100644
--- a/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
+++ b/web/packages/teleterm/src/ui/Search/ResourceSearchErrors.tsx
@@ -52,18 +52,18 @@ export function ResourceSearchErrors(props: {
         <ButtonIcon
           type="button"
           onClick={props.onCancel}
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           <Close fontSize={5} />
         </ButtonIcon>
       </DialogHeader>
       <DialogContent mb={4}>
-        <Text typography="body1" color="text.secondary">
+        <Text typography="body1" color="text.slightlyMuted">
           <pre
             css={`
               padding: ${props => props.theme.space[2]}px;
               background-color: ${props => props.theme.colors.levels.sunken};
-              color: ${props => props.theme.colors.text.primary};
+              color: ${props => props.theme.colors.text.main};
 
               white-space: pre-wrap;
               max-height: calc(${props => props.theme.space[6]}px * 10);
diff --git a/web/packages/teleterm/src/ui/Search/SearchBar.tsx b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
index dcd0c37c58be5..b035e1db80501 100644
--- a/web/packages/teleterm/src/ui/Search/SearchBar.tsx
+++ b/web/packages/teleterm/src/ui/Search/SearchBar.tsx
@@ -150,7 +150,7 @@ const Input = styled.input`
   padding-inline: ${props => props.theme.space[2]}px;
 
   ::placeholder {
-    color: ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.slightlyMuted};
   }
 `;
 
@@ -159,7 +159,7 @@ const Shortcut = styled(Box).attrs({ p: 1 })`
   right: ${props => props.theme.space[2]}px;
   top: 50%;
   transform: translate(0, -50%);
-  color: ${({ theme }) => theme.colors.text.secondary};
+  color: ${({ theme }) => theme.colors.text.slightlyMuted};
   background-color: ${({ theme }) => theme.colors.levels.surface};
   line-height: 12px;
   font-size: 12px;
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
index b399bff3d2088..58855d16f0c24 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ActionPicker.tsx
@@ -626,7 +626,7 @@ export function NoResultsItem(props: {
 export function TypeToSearchItem() {
   return (
     <NonInteractiveItem>
-      <Text typography="body1" color="text.primary">
+      <Text typography="body1" color="text.main">
         Type something to search.
       </Text>
     </NonInteractiveItem>
@@ -736,7 +736,7 @@ const LabelsFlex = styled(Flex).attrs({ gap: 1 })`
 `;
 
 const ResourceFields = styled(Flex).attrs({ gap: 1 })`
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   font-size: ${props => props.theme.fontSizes[0]}px;
 `;
 
diff --git a/web/packages/teleterm/src/ui/Search/pickers/PickerContainer.ts b/web/packages/teleterm/src/ui/Search/pickers/PickerContainer.ts
index ed34bfc3eb393..a422f42baa0ad 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/PickerContainer.ts
+++ b/web/packages/teleterm/src/ui/Search/pickers/PickerContainer.ts
@@ -23,7 +23,7 @@ export const PickerContainer = styled.div`
   box-sizing: border-box;
   z-index: 1000;
   font-size: 12px;
-  color: ${props => props.theme.colors.text.contrast};
+  color: ${props => props.theme.colors.text.main};
   background: ${props => props.theme.colors.levels.surface};
   box-shadow: 8px 8px 18px rgb(0, 0, 0, 0.56);
   border-radius: ${props => props.theme.radii[2]}px;
diff --git a/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx b/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
index a8d80ed33498d..42f57bb229b3f 100644
--- a/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
+++ b/web/packages/teleterm/src/ui/Search/pickers/ResultList.tsx
@@ -154,7 +154,7 @@ export const NonInteractiveItem = styled.div`
   }
 
   padding: ${props => props.theme.space[2]}px;
-  color: ${props => props.theme.colors.text.contrast};
+  color: ${props => props.theme.colors.text.main};
   background: ${props => props.theme.colors.levels.surface};
 `;
 
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
index c62b249c90dbf..4d761351aa190 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
@@ -56,14 +56,14 @@ export function ShareFeedbackForm(props: ShareFeedbackProps) {
             }}
           >
             <Flex justifyContent="space-between" mb={2}>
-              <Text typography="h4" bold color="text.primary">
+              <Text typography="h4" bold color="text.main">
                 Provide your feedback
               </Text>
               <ButtonIcon
                 type="button"
                 onClick={props.onClose}
                 title="Close"
-                color="text.secondary"
+                color="text.slightlyMuted"
               >
                 <Close fontSize={5} />
               </ButtonIcon>
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
index 0690fc5e7f556..6f4fa9702647f 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -78,16 +78,16 @@ export function ShareFeedbackFormFields({
         textAreaCss={`
         font-size: 14px;
         outline: none;
-        color: ${theme.colors.text.primary};
+        color: ${theme.colors.text.main};
         background: ${theme.colors.levels.surface};
-        border: 1px solid ${theme.colors.text.placeholder};
+        border: 1px solid ${theme.colors.text.muted};
         ::placeholder {
-          color: ${theme.colors.text.placeholder};
+          color: ${theme.colors.text.muted};
         }
         &:hover,
         &:focus,
         &:active {
-          border: 1px solid ${theme.colors.text.secondary};
+          border: 1px solid ${theme.colors.text.slightlyMuted};
         }
         `}
         rule={requiredField('Suggestions are required')}
@@ -103,7 +103,7 @@ export function ShareFeedbackFormFields({
           updateFormField('newsletterEnabled', !formValues.newsletterEnabled);
         }}
       >
-        <Text ml={2} color="text.primary">
+        <Text ml={2} color="text.main">
           Sign me up for the newsletter
         </Text>
       </Toggle>
@@ -119,7 +119,7 @@ export function ShareFeedbackFormFields({
       >
         <Text
           ml={2}
-          color="text.primary"
+          color="text.main"
           css={`
             line-height: 18px;
           `}
diff --git a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
index aca1496336d1b..53975bbde6ca4 100644
--- a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
@@ -39,7 +39,7 @@ export function StatusBar() {
       overflow="hidden"
     >
       <Text
-        color="text.secondary"
+        color="text.slightlyMuted"
         fontSize="14px"
         css={`
           white-space: nowrap;
diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
index 271cdaa6dbfaa..2d5cc104777c6 100644
--- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
@@ -45,7 +45,7 @@ export function ClusterConnectPanel() {
           <Text typography="h3" bold mb={2}>
             Connect a Cluster
           </Text>
-          <Text color="text.secondary" mb={3} textAlign="center">
+          <Text color="text.slightlyMuted" mb={3} textAlign="center">
             Connect an existing Teleport cluster <br /> to start using Teleport
             Connect.
           </Text>
diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
index b783de6969224..323bc5b300d93 100644
--- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
@@ -63,7 +63,7 @@ export function RecentClusters() {
             `}
           >
             <Text
-              color="text.primary"
+              color="text.main"
               mr={2}
               title={cluster.userWithClusterName}
               css={`
diff --git a/web/packages/teleterm/src/ui/Tabs/TabItem.tsx b/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
index 935c644c7ae58..5b0e6a6419b23 100644
--- a/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
@@ -98,14 +98,14 @@ const StyledTabItem = styled.div(({ theme, active, dragging, canDrag }) => {
     flexBasis: '0',
     flexGrow: '1',
     opacity: '1',
-    color: theme.colors.text.secondary,
+    color: theme.colors.text.slightlyMuted,
     alignItems: 'center',
     minWidth: '0',
     height: '100%',
     border: 'none',
     borderRadius: '8px 8px 0 0',
     '&:hover, &:focus': {
-      color: theme.colors.text.contrast,
+      color: theme.colors.text.main,
       transition: 'color .3s',
     },
     position: 'relative',
@@ -113,7 +113,7 @@ const StyledTabItem = styled.div(({ theme, active, dragging, canDrag }) => {
 
   if (active) {
     styles['backgroundColor'] = theme.colors.levels.sunken;
-    styles['color'] = theme.colors.text.contrast;
+    styles['color'] = theme.colors.text.main;
     styles['transition'] = 'none';
   }
 
diff --git a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
index 99e27c9659f82..d9f51825232fe 100644
--- a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
@@ -113,7 +113,7 @@ const Separator = styled.div`
   height: 23px;
   width: 1px;
   margin: 0 1px;
-  background: ${props => props.theme.colors.text.placeholder};
+  background: ${props => props.theme.colors.text.muted};
 `;
 
 const StyledTabs = styled(Box)`
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
index 385ac49d3183d..8bcd34675f64d 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
@@ -56,15 +56,13 @@ const colors = {
 
   text: {
     // The most important text.
-    primary: 'rgba(255,255,255,0.87)',
-    // Secondary text.
-    secondary: 'rgba(255, 255, 255, 0.56)',
-    // Placeholder text for forms.
-    placeholder: 'rgba(255, 255, 255, 0.24)',
-    // Disabled text have even lower visual prominence.
-    disabled: 'rgba(0, 0, 0, 0.24)',
-    // For maximum contrast.
-    contrast: '#FFFFFF',
+    main: '#FFFFFF',
+    // Slightly muted text.
+    slightlyMuted: 'rgba(255, 255, 255, 0.72)',
+    // Muted text. Also used as placeholder text in forms.
+    muted: 'rgba(255, 255, 255, 0.54)',
+    // Disabled text.
+    disabled: 'rgba(255, 255, 255, 0.36)',
     // For text on  a background that is on a color opposite to the theme. For dark theme,
     // this would mean text that is on a light background.
     primaryInverse: '#000000',
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
index 486a19f467584..860c13d0a6127 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
@@ -81,7 +81,7 @@ const StyledListItem = styled(ListItem)`
 
 const InvertedLabel = styled(Label)`
   color: ${props => props.theme.colors.brand};
-  background-color: ${props => props.theme.colors.text.contrast};
+  background-color: ${props => props.theme.colors.text.main};
 `;
 
 function getBackgroundColor(props) {
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClustersFilterableList.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClustersFilterableList.tsx
index 79ff04a32c436..82f100ffced49 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClustersFilterableList.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClustersFilterableList.tsx
@@ -53,7 +53,7 @@ export function ClustersFilterableList(props: ClustersFilterableListProps) {
           )}
         />
       ) : (
-        <Text color="text.placeholder">No Clusters</Text>
+        <Text color="text.muted">No Clusters</Text>
       )}
     </Box>
   );
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/ConfirmClusterChangeDialog.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/ConfirmClusterChangeDialog.tsx
index 278d5593ec016..682a7a8861f03 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ConfirmClusterChangeDialog.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ConfirmClusterChangeDialog.tsx
@@ -45,12 +45,12 @@ export default function ConfirmClusterChangeDialog({
         <Text typography="h5" bold style={{ whiteSpace: 'nowrap' }}>
           Change clusters?
         </Text>
-        <ButtonIcon onClick={onClose} color="text.secondary">
+        <ButtonIcon onClick={onClose} color="text.slightlyMuted">
           <Close fontSize={5} />
         </ButtonIcon>
       </DialogHeader>
       <DialogContent mb={4}>
-        <Text color="text.secondary" typography="body1">
+        <Text color="text.slightlyMuted" typography="body1">
           {changeSelectedClusterWarning}
         </Text>
       </DialogContent>
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
index d74e4bafa5bcd..b6d6925326d78 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionItem.tsx
@@ -89,7 +89,7 @@ export function ConnectionItem(props: ConnectionItemProps) {
           <Text
             typography="body1"
             bold
-            color="text.primary"
+            color="text.main"
             title={props.item.title}
             css={`
               line-height: 16px;
@@ -116,7 +116,7 @@ export function ConnectionItem(props: ConnectionItemProps) {
             </span>
           </Text>
           <Text
-            color="text.secondary"
+            color="text.slightlyMuted"
             typography="body2"
             title={props.item.clusterName}
           >
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
index 7a1632d80fb57..0824ee37721ef 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsFilterableList/ConnectionsFilterableList.tsx
@@ -61,7 +61,7 @@ export function ConnectionsFilterableList(
           )}
         />
       ) : (
-        <Text color="text.placeholder">No Connections</Text>
+        <Text color="text.muted">No Connections</Text>
       )}
     </Box>
   );
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/AddNewClusterItem.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/AddNewClusterItem.tsx
index 0f8575b0a8b88..3ac426392ff00 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/AddNewClusterItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/AddNewClusterItem.tsx
@@ -47,5 +47,5 @@ const StyledListItem = styled(ListItem)`
   border-radius: 0;
   height: 38px;
   justify-content: center;
-  color: ${props => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.slightlyMuted};
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx b/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
index 494df8ba22bf4..d6ba3d66ed228 100644
--- a/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
@@ -22,7 +22,7 @@ export const TopBarButton = styled.button`
   background: inherit;
   cursor: pointer;
   align-items: center;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   flex-direction: row;
   height: 100%;
   border-radius: 4px;
diff --git a/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx b/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
index 2d47f1e6254ae..a09136f39507a 100644
--- a/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
+++ b/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
@@ -82,7 +82,7 @@ const DarkInput = styled(Input)`
   background: inherit;
   border: 1px ${props => props.theme.colors.action.disabledBackground} solid;
   border-radius: 51px;
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   margin-bottom: 10px;
   font-size: 14px;
   height: 34px;
@@ -90,11 +90,11 @@ const DarkInput = styled(Input)`
 
   ::placeholder {
     opacity: 1;
-    color: ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.slightlyMuted};
   }
 
   &:hover {
-    border-color: ${props => props.theme.colors.text.secondary};
+    border-color: ${props => props.theme.colors.text.slightlyMuted};
   }
 
   &:focus {
diff --git a/web/packages/teleterm/src/ui/components/ListItem.tsx b/web/packages/teleterm/src/ui/components/ListItem.tsx
index e532a1c619093..1cb1eaf38cbd4 100644
--- a/web/packages/teleterm/src/ui/components/ListItem.tsx
+++ b/web/packages/teleterm/src/ui/components/ListItem.tsx
@@ -29,7 +29,7 @@ export const ListItem = styled.li`
   padding: 0 16px;
   font-weight: ${props => props.theme.regular};
   font-family: ${props => props.theme.font};
-  color: ${props => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.main};
   height: 34px;
   background: inherit;
   border: none;
@@ -40,6 +40,6 @@ export const ListItem = styled.li`
   &:focus,
   &:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: ${props => props.theme.colors.text.contrast};
+    color: ${props => props.theme.colors.text.main};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/components/Table.tsx b/web/packages/teleterm/src/ui/components/Table.tsx
index f04c75812fdad..0188e478083c5 100644
--- a/web/packages/teleterm/src/ui/components/Table.tsx
+++ b/web/packages/teleterm/src/ui/components/Table.tsx
@@ -40,7 +40,7 @@ function getTableTheme(theme) {
         lighter: theme.colors.levels.surface,
         main: theme.colors.levels.sunken,
       },
-      link: theme.colors.text.primary,
+      link: theme.colors.text.main,
     },
   };
 }