diff --git a/web/packages/design/src/Alert/Alert.jsx b/web/packages/design/src/Alert/Alert.jsx
index de5d8197359f4..e5211b8e34caf 100644
--- a/web/packages/design/src/Alert/Alert.jsx
+++ b/web/packages/design/src/Alert/Alert.jsx
@@ -36,7 +36,7 @@ const kind = props => {
       };
     case 'warning':
       return {
-        background: theme.colors.warning,
+        background: theme.colors.warning.main,
         color: theme.colors.text.contrast,
       };
     case 'success':
diff --git a/web/packages/design/src/Alert/Alert.test.js b/web/packages/design/src/Alert/Alert.test.js
index e7a37237638ec..cf00034ef6a84 100644
--- a/web/packages/design/src/Alert/Alert.test.js
+++ b/web/packages/design/src/Alert/Alert.test.js
@@ -35,10 +35,10 @@ describe('design/Alert', () => {
     });
   });
 
-  test('"kind" warning renders bg == theme.colors.warning', () => {
+  test('"kind" warning renders bg == theme.colors.warning.main', () => {
     const { container } = render(<Warning />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.warning,
+      background: theme.colors.warning.main,
     });
   });
 
diff --git a/web/packages/design/src/Button/Button.test.js b/web/packages/design/src/Button/Button.test.js
index 1d2adf3331c8d..4ebffc4d49b7a 100644
--- a/web/packages/design/src/Button/Button.test.js
+++ b/web/packages/design/src/Button/Button.test.js
@@ -25,14 +25,14 @@ describe('design/Button', () => {
     const { container } = render(<Button />);
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.brand.main,
+      background: theme.colors.brand,
     });
   });
 
-  test('"kind" primary renders bg == theme.colors.brand.main', () => {
+  test('"kind" primary renders bg == theme.colors.brand', () => {
     const { container } = render(<ButtonPrimary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.brand.main,
+      background: theme.colors.brand,
     });
   });
 
diff --git a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
index 8e41d95309a4e..74a4a5f147e4e 100644
--- a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
+++ b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
@@ -26,7 +26,7 @@ describe('design/ButtonOutlined', () => {
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle('font-size: 12px');
     expect(container.firstChild).toHaveStyle({
-      'border-color': theme.colors.text.primary,
+      'border-color': theme.colors.text.main,
     });
   });
 
@@ -48,7 +48,7 @@ describe('design/ButtonOutlined', () => {
   it('respects "kind" primary prop', () => {
     const { container } = render(<ButtonOutlined kind="primary" />);
     expect(container.firstChild).toHaveStyle({
-      'border-color': theme.colors.brand.main,
+      'border-color': theme.colors.brand,
     });
   });
 });
diff --git a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap
index d9384ce1917b3..5939b5d662f9b 100644
--- a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap
+++ b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.js.snap
@@ -32,7 +32,7 @@ exports[`rendering of Error Cards 1`] = `
   margin-bottom: 40px;
   padding: 32px;
   width: 540px;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px rgba(0,0,0,0.24);
   border-radius: 8px;
diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
index afe15be0af377..65d8b7aa317f8 100644
--- a/web/packages/design/src/Checkbox/Checkbox.tsx
+++ b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -34,7 +34,7 @@ export const CheckboxWrapper = styled(Flex)`
 
 export const CheckboxInput = styled.input`
   margin-right: 10px;
-  accent-color: ${props => props.theme.colors.brand.main};
+  accent-color: ${props => props.theme.colors.brand};
 
   &:hover {
     cursor: pointer;
diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
index 05fd2d8b8085a..92b0c10ddc2f0 100644
--- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
+++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -83,16 +83,16 @@ const StyledInput = styled.input`
 
 function fromTheme(props) {
   return {
-    color: props.theme.colors.text.primary,
+    color: props.theme.colors.text.main,
     background: props.theme.colors.levels.sunkenSecondary,
 
     '&: hover, &:focus, &:active': {
       background: props.theme.colors.levels.surfaceSecondary,
       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/design/src/DataTable/Table.tsx b/web/packages/design/src/DataTable/Table.tsx
index 0e06dfa8c37c3..f6a1eb20c1431 100644
--- a/web/packages/design/src/DataTable/Table.tsx
+++ b/web/packages/design/src/DataTable/Table.tsx
@@ -331,7 +331,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 e22b5d2d8c5c5..0e72f9c53e2b5 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.surfaceSecondary};
-  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/Label/Label.jsx b/web/packages/design/src/Label/Label.jsx
index c86a0d17793d8..fdf9c2a0aeb83 100644
--- a/web/packages/design/src/Label/Label.jsx
+++ b/web/packages/design/src/Label/Label.jsx
@@ -25,13 +25,13 @@ const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
       backgroundColor: theme.colors.levels.sunkenSecondary,
-      color: theme.colors.text.primary,
+      color: theme.colors.text.main,
     };
   }
 
   if (kind === 'warning') {
     return {
-      backgroundColor: theme.colors.warning,
+      backgroundColor: theme.colors.warning.main,
       color: theme.colors.text.contrast,
     };
   }
@@ -52,7 +52,7 @@ const kind = ({ kind, theme }) => {
 
   // default is primary
   return {
-    backgroundColor: theme.colors.brand.main,
+    backgroundColor: theme.colors.brand,
     color: theme.colors.text.contrast,
   };
 };
diff --git a/web/packages/design/src/Label/Label.test.js b/web/packages/design/src/Label/Label.test.js
index 6dfd230699f94..163de4458d932 100644
--- a/web/packages/design/src/Label/Label.test.js
+++ b/web/packages/design/src/Label/Label.test.js
@@ -22,9 +22,9 @@ import Label, { Primary, Secondary, Warning, Danger } from './Label';
 
 describe('design/Label', () => {
   const colors = [
-    theme.colors.brand.main,
+    theme.colors.brand,
     theme.colors.levels.sunkenSecondary,
-    theme.colors.warning,
+    theme.colors.warning.main,
     theme.colors.danger,
   ];
 
diff --git a/web/packages/design/src/LabelState/LabelState.jsx b/web/packages/design/src/LabelState/LabelState.jsx
index 3442c6b67f49e..5f4c54d456b9c 100644
--- a/web/packages/design/src/LabelState/LabelState.jsx
+++ b/web/packages/design/src/LabelState/LabelState.jsx
@@ -23,17 +23,17 @@ import { fade } from 'design/theme/utils/colorManipulator';
 const kinds = ({ theme, kind, shadow }) => {
   // default is primary
   const styles = {
-    background: theme.colors.brand.main,
+    background: theme.colors.brand,
     color: theme.colors.text.contrast,
   };
 
   if (kind === 'secondary') {
     styles.background = theme.colors.levels.sunkenSecondary;
-    styles.color = theme.colors.text.primary;
+    styles.color = theme.colors.text.main;
   }
 
   if (kind === 'warning') {
-    styles.background = theme.colors.warning;
+    styles.background = theme.colors.warning.main;
     styles.color = theme.colors.text.contrast;
   }
 
diff --git a/web/packages/design/src/LabelState/LabelState.test.js b/web/packages/design/src/LabelState/LabelState.test.js
index b99728e27517d..e0844577e4696 100644
--- a/web/packages/design/src/LabelState/LabelState.test.js
+++ b/web/packages/design/src/LabelState/LabelState.test.js
@@ -26,9 +26,9 @@ import LabelState, {
 } from './LabelState';
 
 const colors = {
-  primary: theme.colors.brand.main,
+  primary: theme.colors.brand,
   info: theme.colors.levels.sunkenSecondary,
-  warning: theme.colors.warning,
+  warning: theme.colors.warning.main,
   danger: theme.colors.danger,
   success: theme.colors.success,
 };
diff --git a/web/packages/design/src/RadioGroup/RadioGroup.tsx b/web/packages/design/src/RadioGroup/RadioGroup.tsx
index 9bab910f16ae6..a0de6d4fa66c1 100644
--- a/web/packages/design/src/RadioGroup/RadioGroup.tsx
+++ b/web/packages/design/src/RadioGroup/RadioGroup.tsx
@@ -92,7 +92,7 @@ function Radio(props: RadioProps) {
         autoFocus={props.autoFocus}
         css={`
           margin: 0 ${props => props.theme.space[2]}px 0 0;
-          accent-color: ${props => props.theme.colors.brand.accent};
+          accent-color: ${props => props.theme.colors.brandAccent};
           cursor: inherit;
         `}
         type="radio"
diff --git a/web/packages/design/src/SideNav/SideNavItem.jsx b/web/packages/design/src/SideNav/SideNavItem.jsx
index 0d85be530343e..37bad5fb996a6 100644
--- a/web/packages/design/src/SideNav/SideNavItem.jsx
+++ b/web/packages/design/src/SideNav/SideNavItem.jsx
@@ -23,11 +23,11 @@ import Flex from './../Flex';
 const fromTheme = ({ theme = defaultTheme }) => {
   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.accent,
+      borderLeftColor: theme.colors.brandAccent,
       background: theme.colors.levels.elevated,
       color: theme.colors.text.contrast,
     },
@@ -57,7 +57,7 @@ SideNavItem.defaultProps = {
   pl: 9,
   pr: 5,
   bg: 'levels.surfaceSecondary',
-  color: 'text.primary',
+  color: 'text.main',
   theme: defaultTheme,
 };
 
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.tsx b/web/packages/design/src/SlideTabs/SlideTabs.tsx
index 446fc78a0d90b..c46b06a7872d4 100644
--- a/web/packages/design/src/SlideTabs/SlideTabs.tsx
+++ b/web/packages/design/src/SlideTabs/SlideTabs.tsx
@@ -100,7 +100,7 @@ const TabInput = styled.input`
 `;
 
 const TabSlider = styled.div`
-  background-color: ${({ theme }) => theme.colors.brand.main};
+  background-color: ${({ theme }) => theme.colors.brand};
   border-radius: ${props => (props.appearance === 'square' ? '8px' : '60px')};
   box-shadow: 0px 2px 6px rgba(12, 12, 14, 0.1);
   height: ${props => (props.size === 'xlarge' ? '56px' : '40px')};
diff --git a/web/packages/design/src/TopNav/TopNavItem.jsx b/web/packages/design/src/TopNav/TopNavItem.jsx
index 7d90c3be1741e..3d31ecc22139b 100644
--- a/web/packages/design/src/TopNav/TopNavItem.jsx
+++ b/web/packages/design/src/TopNav/TopNavItem.jsx
@@ -51,7 +51,7 @@ const TopNavItem = styled.button`
   }
 
   &.active:after {
-    background-color: ${props => props.theme.colors.brand.accent};
+    background-color: ${props => props.theme.colors.brandAccent};
     content: '';
     position: absolute;
     bottom: 0;
diff --git a/web/packages/design/src/theme/theme.ts b/web/packages/design/src/theme/theme.ts
index da9e58f721221..ee9cffe016faa 100644
--- a/web/packages/design/src/theme/theme.ts
+++ b/web/packages/design/src/theme/theme.ts
@@ -41,41 +41,51 @@ const colors = {
 
   `...Secondary` colours are used to differentiate different colors that represent the same depth.
 
+  Fields marked with "Not in v13+" are color fields that are not included in the themes released in v13 and onwards.
+  Fields marked with "Only in use in v13+" are color fields that are not used by any components in this version, but are included here in order to make
+  backporting components from later versions easier.
+
   For more information on this concept: https://m3.material.io/styles/elevation/applying-elevation
  */
   levels: {
     sunken: '#0C143D',
-    sunkenSecondary: '#111B48',
+    sunkenSecondary: '#111B48', // Not in v13+.
 
     surface: '#222C59',
-    surfaceSecondary: '#1C254D',
+    surfaceSecondary: '#1C254D', // Not in v13+.
 
     elevated: '#2C3A73',
 
     popout: '#3E4B7E',
-    popoutHighlighted: '#535c8a',
+    popoutHighlighted: '#535c8a', // Not in v13+.
   },
 
-  brand: {
-    main: '#512FC9',
-    accent: '#651FFF',
-    secondaryAccent: '#354AA4',
-  },
+  // Spot backgrounds are used as highlights, for example
+  // to indicate a hover or active state for an item in a menu.
+  spotBackground: [
+    'rgba(255,255,255,0.07)',
+    'rgba(255,255,255,0.13)',
+    'rgba(255,255,255,0.18)',
+  ], // Only in use in v13+.
+
+  brand: '#512FC9',
+  brandAccent: '#651FFF', // Not in v13+.
+  brandSecondaryAccent: '#354AA4', // Not in v13+.
 
   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: 'rgba(255,255,255,0.87)',
+    // 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: '#324148',
+    primaryInverse: '#000000',
+    // For maximum contrast.
+    contrast: '#FFFFFF', // Not in v13+.
   },
 
   buttons: {
@@ -84,6 +94,7 @@ const colors = {
     bgDisabled: 'rgba(255, 255, 255, 0.12)',
 
     primary: {
+      text: '#FFFFFF', // Only in use in v13+.
       default: '#512FC9',
       hover: '#651FFF',
       active: '#354AA4',
@@ -92,6 +103,7 @@ const colors = {
     secondary: {
       default: '#222C59',
       hover: '#2C3A73',
+      active: '#2C3A73',
     },
 
     border: {
@@ -99,13 +111,17 @@ const colors = {
       hover: '#2C3A73',
       border: '#1C254D',
       borderHover: 'rgba(255, 255, 255, 0.1)',
+      active: '#2C3A73', // Only in use in v13+.
     },
 
     warning: {
       default: '#d50000',
       hover: '#ff1744',
+      text: '#000000', // Only in use in v13+.
+      active: '#ff1744', // Only in use in v13+.
     },
 
+    // Not in v13+.
     outlinedPrimary: {
       text: '#651FFF',
       border: '#512FC9',
@@ -113,6 +129,7 @@ const colors = {
       borderActive: '#354AA4',
     },
 
+    // Not in v13+.
     outlinedDefault: {
       text: 'rgba(255,255,255,0.87)',
       textHover: '#FFFFFF',
@@ -124,6 +141,13 @@ const colors = {
       default: '#2e3860',
       hover: '#414b70',
     },
+
+    // Only in use in v13+.
+    link: {
+      default: '#009EFF',
+      hover: '#33B1FF',
+      active: '#66C5FF',
+    },
   },
 
   progressBarColor: '#00BFA5',
@@ -139,6 +163,14 @@ const colors = {
     light: red['A200'],
     dark: red['A700'],
     main: red['A400'],
+    hover: red['A200'], // Only in use in v13+.
+    active: red['A100'], // Only in use in v13+.
+  },
+
+  warning: {
+    main: orange['A400'],
+    hover: orange['A200'], // Only in use in v13+.
+    active: orange['A100'], // Only in use in v13+.
   },
 
   action: {
@@ -157,7 +189,6 @@ const colors = {
   highlight: yellow[50],
   disabled: blueGrey[500],
   info: lightBlue[600],
-  warning: orange.A400,
   success: teal.A700,
 };
 
@@ -172,6 +203,7 @@ const borders = [
 ];
 
 const theme = {
+  name: 'dark',
   colors,
   typography,
   font: fonts.sansSerif,
@@ -183,6 +215,11 @@ const theme = {
   radii: [0, 2, 4, 8, 16, 9999, '100%'],
   regular: fontWeights.regular,
   bold: fontWeights.bold,
+  boxShadow: [
+    '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12)',
+    '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
+    '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)',
+  ],
   // disabled media queries for styled-system
   breakpoints: [],
 };
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 c101054c07360..5bd40ecf84372 100644
--- a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
+++ b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`snapshot tests 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
   border: 2px solid #ff1744;
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 5c8eb3019b198..80d83fdd6e90b 100644
--- a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
+++ b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -437,7 +437,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
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 03d5d258e94a4..1855011b69416 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}
@@ -146,7 +146,7 @@ function getLoginItemListContent(
         <Indicator
           css={({ theme }) => `
             align-self: center;
-            color: ${theme.colors.brand.secondaryAccent}
+            color: ${theme.colors.text.main}
           `}
         />
       );
diff --git a/web/packages/shared/components/Notification/Notification.story.tsx b/web/packages/shared/components/Notification/Notification.story.tsx
index 99be6eebed337..343e77c0eb811 100644
--- a/web/packages/shared/components/Notification/Notification.story.tsx
+++ b/web/packages/shared/components/Notification/Notification.story.tsx
@@ -59,7 +59,7 @@ export const Notifications = () => {
             },
           }}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -100,7 +100,7 @@ export const Notifications = () => {
             content: 'Multiline warning without title. ' + loremIpsum,
           }}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -138,7 +138,7 @@ export const Notifications = () => {
             content: 'Warning without title',
           }}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -189,7 +189,7 @@ export const Notifications = () => {
             },
           }}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -238,7 +238,7 @@ export const Notifications = () => {
             },
           }}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           onRemove={() => {}}
           isAutoRemovable={false}
         />
@@ -309,7 +309,7 @@ export const AutoRemovable = () => {
           }}
           onRemove={() => setShowWarning(false)}
           Icon={Warning}
-          getColor={theme => theme.colors.warning}
+          getColor={theme => theme.colors.warning.main}
           isAutoRemovable={true}
           autoRemoveDurationMs={5000}
         />
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/Select/DarkStyledSelect.tsx b/web/packages/shared/components/Select/DarkStyledSelect.tsx
index 5003ad4141a2a..9326e305ba266 100644
--- a/web/packages/shared/components/Select/DarkStyledSelect.tsx
+++ b/web/packages/shared/components/Select/DarkStyledSelect.tsx
@@ -29,14 +29,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};
     }
@@ -73,10 +73,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;
@@ -87,17 +87,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/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
index f707322cd03be..b026cdbcf0986 100644
--- a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
@@ -167,7 +167,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 f957f96d057e6..1bf2316513d70 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
@@ -120,7 +120,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -366,7 +366,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>
@@ -713,7 +713,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -959,7 +959,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>
@@ -1313,7 +1313,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -1386,7 +1386,7 @@ 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);
 }
 
 .c8 {
@@ -1578,7 +1578,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>
@@ -1609,7 +1609,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 e308b86a156ae..1edb21ea9208a 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
@@ -278,7 +278,7 @@ exports[`render device dashboard 1`] = `
 }
 
 .c6::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -798,7 +798,7 @@ exports[`render failed state for creating restricted privilege token 1`] = `
 }
 
 .c7::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 ab68434631094..2510211baf138 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={() => ({
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 99cedc344b7a2..e917ed70a6d4f 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
@@ -386,7 +386,7 @@ exports[`failed state 1`] = `
   display: inline-block;
   transition: color 0.3s;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -725,7 +725,7 @@ exports[`failed state 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1180,7 +1180,7 @@ exports[`failed state 1`] = `
               LAUNCH
               <span
                 class="c17 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -1401,7 +1401,7 @@ exports[`loaded state 1`] = `
   display: inline-block;
   transition: color 0.3s;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -1740,7 +1740,7 @@ exports[`loaded state 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -2201,7 +2201,7 @@ exports[`loaded state 1`] = `
               LAUNCH
               <span
                 class="c17 c31 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -2394,7 +2394,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 c59ede0981615..b6093abcde2cb 100644
--- a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
+++ b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
@@ -265,8 +265,8 @@ export default function renderTypeCell(event: Event, clusterId: string) {
 const StyledCliIcon = styled(Icons.Cli)(
   props => `
   background: ${props.theme.colors.dark};
-  border: 2px solid ${props.theme.colors.brand.accent};
-  color: ${props.theme.colors.text.primary};
+  border: 2px solid ${props.theme.colors.brandAccent};
+  color: ${props.theme.colors.text.main};
   cursor: pointer;
   display: flex;
   align-items: center;
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 76f765a7d5c77..bffc07a7a5a8c 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
@@ -284,7 +284,7 @@ exports[`list of all events 1`] = `
 }
 
 .c2::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -7526,7 +7526,7 @@ exports[`loaded audit log screen 1`] = `
   min-height: 34px;
   height: 34px;
   border-color: rgba(255,255,255,0.24);
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c3 .react-select__control:focus,
@@ -7579,7 +7579,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c3 .react-select__placeholder {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c3 .react-select__option {
@@ -7593,7 +7593,7 @@ exports[`loaded audit log screen 1`] = `
 
 .c3 .react-select__multi-value {
   background-color: #111B48;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
 }
 
 .c3 .react-select__multi-value__label {
@@ -7604,7 +7604,7 @@ exports[`loaded audit log screen 1`] = `
 .c3 .react-select--is-disabled .react-select__single-value,
 .c3 .react-select--is-disabled .react-select__placeholder,
 .c3 .react-select--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c1 {
@@ -7807,7 +7807,7 @@ exports[`loaded audit log screen 1`] = `
 }
 
 .c7::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/AuthConnectors/AuthConnectors.tsx b/web/packages/teleport/src/AuthConnectors/AuthConnectors.tsx
index aa021c73370f9..a552991d66fd9 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>
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/Clusters/__snapshots__/Clusters.story.test.tsx.snap b/web/packages/teleport/src/Clusters/__snapshots__/Clusters.story.test.tsx.snap
index 412ea4c315051..3957540523c6f 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
@@ -68,7 +68,7 @@ exports[`render clusters 1`] = `
   transition: color 0.3s;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -314,7 +314,7 @@ exports[`render clusters 1`] = `
 }
 
 .c5::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -453,7 +453,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -477,7 +477,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -501,7 +501,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -525,7 +525,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -549,7 +549,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -573,7 +573,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -597,7 +597,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -621,7 +621,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -645,7 +645,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -669,7 +669,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -693,7 +693,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -717,7 +717,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -741,7 +741,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -765,7 +765,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -789,7 +789,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -813,7 +813,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -837,7 +837,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -861,7 +861,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -885,7 +885,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -909,7 +909,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -933,7 +933,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -957,7 +957,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -981,7 +981,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1005,7 +1005,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1029,7 +1029,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1053,7 +1053,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1077,7 +1077,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1101,7 +1101,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1125,7 +1125,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1149,7 +1149,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1173,7 +1173,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1197,7 +1197,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1221,7 +1221,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1245,7 +1245,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1269,7 +1269,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1293,7 +1293,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1317,7 +1317,7 @@ exports[`render clusters 1`] = `
             OPTIONS
             <span
               class="c12 c19 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 dd93c69587c1e..91684f14d3096 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
@@ -73,7 +73,7 @@ exports[`render DocumentNodes 1`] = `
   transition: color 0.3s;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -352,7 +352,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c16::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -466,7 +466,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c10::placeholder {
   opacity: 1;
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -637,7 +637,7 @@ exports[`render DocumentNodes 1`] = `
   min-height: 34px;
   height: 34px;
   border-color: rgba(255,255,255,0.24);
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 .react-select__control:focus,
@@ -690,7 +690,7 @@ exports[`render DocumentNodes 1`] = `
 }
 
 .c6 .react-select__placeholder {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c6 .react-select__option {
@@ -704,7 +704,7 @@ exports[`render DocumentNodes 1`] = `
 
 .c6 .react-select__multi-value {
   background-color: #01172C;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
 }
 
 .c6 .react-select__multi-value__label {
@@ -715,7 +715,7 @@ exports[`render DocumentNodes 1`] = `
 .c6 .react-select--is-disabled .react-select__single-value,
 .c6 .react-select--is-disabled .react-select__placeholder,
 .c6 .react-select--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c6 .react-select-container {
@@ -857,7 +857,7 @@ exports[`render DocumentNodes 1`] = `
           </div>
           <input
             class="c10"
-            color="text.primary"
+            color="text.main"
             placeholder="login@host:port"
           />
         </div>
@@ -1013,7 +1013,7 @@ exports[`render DocumentNodes 1`] = `
                 CONNECT
                 <span
                   class="c24 c32 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -1055,7 +1055,7 @@ exports[`render DocumentNodes 1`] = `
                 CONNECT
                 <span
                   class="c24 c32 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -1102,7 +1102,7 @@ exports[`render DocumentNodes 1`] = `
                 CONNECT
                 <span
                   class="c24 c32 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -1149,7 +1149,7 @@ exports[`render DocumentNodes 1`] = `
                 CONNECT
                 <span
                   class="c24 c32 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
@@ -1215,7 +1215,7 @@ exports[`render DocumentNodes 1`] = `
                 CONNECT
                 <span
                   class="c24 c32 icon icon-caret-down "
-                  color="text.secondary"
+                  color="text.slightlyMuted"
                   font-size="2"
                 />
               </button>
diff --git a/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx b/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
index 4b21d4f44a2a6..5838a7a042fe8 100644
--- a/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
+++ b/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
@@ -104,11 +104,11 @@ const StyledUsers = styled.div`
   justify-content: center;
   margin-right: 3px;
   background-color: ${props =>
-    props.active ? theme.colors.brand.accent : theme.colors.grey[900]};
+    props.active ? theme.colors.brandAccent : theme.colors.grey[900]};
 `;
 
 const StyledAvatar = styled.div`
-  background: ${props => props.theme.colors.brand.accent};
+  background: ${props => props.theme.colors.brandAccent};
   color: ${props => props.theme.colors.light};
   border-radius: 50%;
   display: flex;
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 e82f60faf72a8..babbfc5c7745a 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
@@ -146,7 +146,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;
@@ -168,7 +168,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 2c6ee897109f5..d14dd6cd6004d 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
@@ -233,7 +233,7 @@ exports[`render dialog with instructions to connect to database 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Connect To Database
         </div>
@@ -611,7 +611,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 afb5d98b10289..d3e9e28282c5a 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
@@ -656,7 +656,7 @@ exports[`failed 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1415,7 +1415,7 @@ exports[`open source loaded 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1882,7 +1882,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 d59f987ddf7a7..b693f207d65b4 100644
--- a/web/packages/teleport/src/DesktopSession/TopBar.tsx
+++ b/web/packages/teleport/src/DesktopSession/TopBar.tsx
@@ -40,7 +40,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,
     };
   };
 
@@ -52,7 +52,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 2f60570b77037..da486745da7ad 100644
--- a/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
+++ b/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
@@ -81,7 +81,7 @@ export function WarningDropdown({ warnings, onRemoveWarning }: Props) {
                 item={warning}
                 onRemove={() => onRemoveWarning(warning.id)}
                 Icon={Warning}
-                getColor={theme => theme.colors.warning}
+                getColor={theme => theme.colors.warning.main}
                 isAutoRemovable={false}
               />
             ))}
@@ -103,7 +103,7 @@ const StyledButton = styled(Button)`
   height: ${({ theme }) => theme.fontSizes[7] + 'px'};
   background-color: ${props =>
     props.hasWarnings
-      ? props.theme.colors.warning
+      ? props.theme.colors.warning.main
       : props.theme.colors.action.disabled};
   &:hover,
   &:focus {
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 f753cea4c3b01..8c6585bbd8426 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
@@ -187,7 +187,7 @@ exports[`another session active 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Another Session Is Active
         </div>
@@ -304,7 +304,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 {
@@ -413,7 +413,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>
@@ -426,13 +426,13 @@ exports[`connected settings false 1`] = `
           <span
             class="c5 c6 icon icon-folder-shared c7"
             color="light"
-            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"
             color="light"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Clipboard Sharing Disabled"
           />
           <div
@@ -461,7 +461,7 @@ exports[`connected settings false 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -566,7 +566,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 {
@@ -675,7 +675,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>
@@ -723,7 +723,7 @@ exports[`connected settings true 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -906,7 +906,7 @@ exports[`connection error 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1030,7 +1030,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 {
@@ -1145,7 +1145,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>
@@ -1158,13 +1158,13 @@ exports[`disconnected 1`] = `
           <span
             class="c5 c6 icon icon-folder-shared c7"
             color="light"
-            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"
             color="light"
-            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;"
           >
@@ -1385,7 +1385,7 @@ exports[`fetch error 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1581,7 +1581,7 @@ exports[`invalid processing 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -1705,7 +1705,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 {
@@ -1814,7 +1814,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>
@@ -1827,7 +1827,7 @@ exports[`processing 1`] = `
           <span
             class="c5 c6 icon icon-folder-shared c7"
             color="light"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
@@ -1862,7 +1862,7 @@ exports[`processing 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -1976,7 +1976,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 {
@@ -2085,7 +2085,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>
@@ -2098,7 +2098,7 @@ exports[`tdp processing 1`] = `
           <span
             class="c5 c6 icon icon-folder-shared c7"
             color="light"
-            style="color: rgba(255, 255, 255, 0.56);"
+            style="color: rgba(255, 255, 255, 0.72);"
             title="Directory Sharing Disabled"
           />
           <span
@@ -2133,7 +2133,7 @@ exports[`tdp processing 1`] = `
         >
           <button
             class="c15"
-            color="text.secondary"
+            color="text.slightlyMuted"
             data-testid="button"
             style="font-size: 20px;"
           >
@@ -2319,7 +2319,7 @@ exports[`unintended disconnect 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Error
         </div>
@@ -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/Navigation/StepItem.tsx b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
index bcb791bbd6c2e..b8a32c4a75d5f 100644
--- a/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
+++ b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
@@ -137,8 +137,8 @@ const Bullet = styled.span`
 `;
 
 const ActiveBullet = styled(Bullet)`
-  border-color: ${props => props.theme.colors.brand.main};
-  background: ${props => props.theme.colors.brand.main};
+  border-color: ${props => props.theme.colors.brand};
+  background: ${props => props.theme.colors.brand};
 
   :before {
     content: '';
@@ -150,8 +150,8 @@ const ActiveBullet = styled(Bullet)`
 `;
 
 const CheckedBullet = styled(Bullet)`
-  border-color: ${props => props.theme.colors.brand.main};
-  background: ${props => props.theme.colors.brand.main};
+  border-color: ${props => props.theme.colors.brand};
+  background: ${props => props.theme.colors.brand};
 
   :before {
     content: '✓';
@@ -161,7 +161,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;
 
@@ -169,7 +169,7 @@ const StepsContainer = styled.div<{ active: boolean }>`
     position: absolute;
     content: '';
     width: 16px;
-    background: ${({ theme }) => theme.colors.brand.main};
+    background: ${({ theme }) => theme.colors.brand};
     height: 1px;
     top: 50%;
     transform: translate(0, -50%);
diff --git a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
index 42d1d22882a29..b750afbb7def1 100644
--- a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
+++ b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
@@ -421,7 +421,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.contrast};
   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 2e087b8e3eee4..83056a168e335 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
@@ -201,7 +201,7 @@ exports[`render with URL loc state set to "server" 1`] = `
   height: 100%;
   width: 100%;
   transition: all 0.2s;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: transparent;
   margin-right: 16px;
   margin-bottom: 8px;
@@ -803,7 +803,7 @@ exports[`render with all access 1`] = `
   height: 100%;
   width: 100%;
   transition: all 0.2s;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: transparent;
   margin-right: 16px;
   margin-bottom: 8px;
@@ -2421,7 +2421,7 @@ exports[`render with no access 1`] = `
   height: 100%;
   width: 100%;
   transition: all 0.2s;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: transparent;
   margin-right: 16px;
   margin-bottom: 8px;
@@ -4179,7 +4179,7 @@ exports[`render with partial access 1`] = `
   height: 100%;
   width: 100%;
   transition: all 0.2s;
-  color: rgba(255,255,255,0.87);
+  color: #FFFFFF;
   background: transparent;
   margin-right: 16px;
   margin-bottom: 8px;
diff --git a/web/packages/teleport/src/Discover/Shared/HintBox.tsx b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
index cc9588ac002e9..f85ef76ff7f4c 100644
--- a/web/packages/teleport/src/Discover/Shared/HintBox.tsx
+++ b/web/packages/teleport/src/Discover/Shared/HintBox.tsx
@@ -28,7 +28,7 @@ const HintBoxContainer = styled(Box)`
   background-color: rgba(255, 255, 255, 0.05);
   padding: ${props => `${props.theme.space[3]}px`};
   border-radius: ${props => `${props.theme.space[2]}px`};
-  border: 2px solid ${props => props.theme.colors.warning}; ;
+  border: 2px solid ${props => props.theme.colors.warning.main}; ;
 `;
 
 export const WaitingInfo = styled(Box)`
diff --git a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
index 12e057eb16e1a..2022091ea24c9 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 = {
   },
   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/IntegrationList.tsx b/web/packages/teleport/src/Integrations/IntegrationList.tsx
index db28ab36b9a26..097b3811b19c9 100644
--- a/web/packages/teleport/src/Integrations/IntegrationList.tsx
+++ b/web/packages/teleport/src/Integrations/IntegrationList.tsx
@@ -155,7 +155,7 @@ const StatusLight = styled(Box)`
       return theme.colors.error.light;
     }
     if (status === Status.Warning) {
-      return theme.colors.warning;
+      return theme.colors.warning.main;
     }
     return theme.colors.grey[300]; // Unknown
   }};
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 f6143f870541f..5ee77f328f7b0 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
@@ -228,7 +228,7 @@ exports[`kube connect dialogue local 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             connect to kubernetes cluster
           </div>
@@ -628,7 +628,7 @@ exports[`kube connect dialogue local with requestId 1`] = `
         >
           <div
             class="c5"
-            color="text.primary"
+            color="text.main"
           >
             connect to kubernetes cluster
           </div>
@@ -1057,7 +1057,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 cb4106a36d358..1d17081f3dbb7 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
@@ -616,7 +616,7 @@ exports[`failed 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1332,7 +1332,7 @@ exports[`loaded 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1796,7 +1796,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/Login/__snapshots__/LoginFailed.test.tsx.snap b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
index e61be642cc16f..a9c07113c27b1 100644
--- a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
+++ b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`callback error message 1`] = `
   margin-bottom: 40px;
   padding: 32px;
   width: 540px;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px rgba(0,0,0,0.24);
   border-radius: 8px;
@@ -142,7 +142,7 @@ exports[`default error message 1`] = `
   margin-bottom: 40px;
   padding: 32px;
   width: 540px;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   box-shadow: 0 4px 16px rgba(0,0,0,0.24);
   border-radius: 8px;
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 8516c2dd044d6..35f62cf9ba754 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
@@ -380,7 +380,7 @@ exports[`failed 1`] = `
   transition: color 0.3s;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -666,7 +666,7 @@ exports[`failed 1`] = `
 }
 
 .c9::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -903,7 +903,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -945,7 +945,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -987,7 +987,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1029,7 +1029,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1071,7 +1071,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1118,7 +1118,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1165,7 +1165,7 @@ exports[`failed 1`] = `
             CONNECT
             <span
               class="c17 c25 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1321,7 +1321,7 @@ exports[`loaded 1`] = `
   transition: color 0.3s;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -1473,7 +1473,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;
 }
 
@@ -1665,7 +1665,7 @@ exports[`loaded 1`] = `
 }
 
 .c12::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1756,7 +1756,7 @@ exports[`loaded 1`] = `
         </div>
         <input
           class="c6"
-          color="text.primary"
+          color="text.main"
           placeholder="login@host:port"
         />
       </div>
@@ -1927,7 +1927,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -1969,7 +1969,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2011,7 +2011,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2053,7 +2053,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2095,7 +2095,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2142,7 +2142,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2189,7 +2189,7 @@ exports[`loaded 1`] = `
             CONNECT
             <span
               class="c20 c28 icon icon-caret-down "
-              color="text.secondary"
+              color="text.slightlyMuted"
               font-size="2"
             />
           </button>
@@ -2323,7 +2323,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 a5f5ff5a8f6aa..af0bfe2b3b8d7 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} />
   );
 };
 
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 55f37967c62b9..b029258514075 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
@@ -265,7 +265,7 @@ exports[`rendering of Session Recordings 1`] = `
   min-height: 34px;
   height: 34px;
   border-color: rgba(255,255,255,0.24);
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c3 .react-select__control:focus,
@@ -318,7 +318,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c3 .react-select__placeholder {
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
 }
 
 .c3 .react-select__option {
@@ -332,7 +332,7 @@ exports[`rendering of Session Recordings 1`] = `
 
 .c3 .react-select__multi-value {
   background-color: #111B48;
-  border: 1px solid rgba(255,255,255,0.24);
+  border: 1px solid rgba(255,255,255,0.54);
 }
 
 .c3 .react-select__multi-value__label {
@@ -343,7 +343,7 @@ exports[`rendering of Session Recordings 1`] = `
 .c3 .react-select--is-disabled .react-select__single-value,
 .c3 .react-select--is-disabled .react-select__placeholder,
 .c3 .react-select--is-disabled .react-select__indicator {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
 }
 
 .c1 {
@@ -546,7 +546,7 @@ exports[`rendering of Session Recordings 1`] = `
 }
 
 .c7::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/Roles/Roles.tsx b/web/packages/teleport/src/Roles/Roles.tsx
index b55e75c1eb5a0..2b6215b7af496 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>
diff --git a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
index a2dfa62bfffa5..7eb75d7746a53 100644
--- a/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
+++ b/web/packages/teleport/src/Sessions/SessionList/SessionJoinBtn.tsx
@@ -81,7 +81,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>
       <InternalJoinMenu anchorEl={anchorEl} handleClose={handleClose}>
         {children}
@@ -108,7 +108,7 @@ function LockedFeatureJoinMenu({ modes }: LockedFeatureJoinMenu) {
     <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>
       <LockedFeatureInternalJoinMenu
         anchorEl={anchorEl}
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 c9685f3b72319..f81dc3d831fd1 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
@@ -81,7 +81,7 @@ exports[`loaded 1`] = `
   display: inline-block;
   transition: color 0.3s;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -315,7 +315,7 @@ exports[`loaded 1`] = `
 }
 
 .c5::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -516,7 +516,7 @@ exports[`loaded 1`] = `
               Join
               <span
                 class="c12 c20 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -734,7 +734,7 @@ exports[`loaded with CTA 1`] = `
   display: inline-block;
   transition: color 0.3s;
   margin-left: 4px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -989,7 +989,7 @@ exports[`loaded with CTA 1`] = `
 }
 
 .c12::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -1210,7 +1210,7 @@ exports[`loaded with CTA 1`] = `
               Join
               <span
                 class="c7 c25 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
diff --git a/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx b/web/packages/teleport/src/TopBar/ClusterSelector/ClusterSelector.tsx
index 46f170d9f8318..541b9b257094d 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, DarkStyledSelect } 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>
diff --git a/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx b/web/packages/teleport/src/TrustedClusters/TrustedClusters.tsx
index 600ce33b55141..697a6053786f5 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>
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 e29ac35406073..b7a421bd31753 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
@@ -197,7 +197,7 @@ exports[`confirm state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Delete User?
         </div>
@@ -456,7 +456,7 @@ exports[`failed state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Delete User?
         </div>
@@ -700,7 +700,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 501fca905e643..5f996fb07c457 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
@@ -223,7 +223,7 @@ exports[`failed state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Reset User Authentication?
         </div>
@@ -472,7 +472,7 @@ exports[`processing state 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Reset User Authentication?
         </div>
@@ -731,7 +731,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 1b04d83d9f7cd..2cce138ebc74b 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
@@ -217,7 +217,7 @@ exports[`reset link dialog 1`] = `
       >
         <div
           class="c5"
-          color="text.primary"
+          color="text.main"
         >
           Share Link
         </div>
@@ -490,7 +490,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 fa6a80b0c1c0d..cb51d60920e98 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
@@ -114,7 +114,7 @@ exports[`success state 1`] = `
   transition: color 0.3s;
   margin-left: 8px;
   margin-right: -8px;
-  color: rgba(255,255,255,0.56);
+  color: rgba(255,255,255,0.72);
   font-size: 14px;
 }
 
@@ -367,7 +367,7 @@ exports[`success state 1`] = `
 }
 
 .c6::placeholder {
-  color: rgba(255,255,255,0.24);
+  color: rgba(255,255,255,0.54);
   font-size: 12px;
 }
 
@@ -534,7 +534,7 @@ exports[`success state 1`] = `
               OPTIONS
               <span
                 class="c13 c20 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -572,7 +572,7 @@ exports[`success state 1`] = `
               OPTIONS
               <span
                 class="c13 c20 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
@@ -616,7 +616,7 @@ exports[`success state 1`] = `
               OPTIONS
               <span
                 class="c13 c20 icon icon-caret-down "
-                color="text.secondary"
+                color="text.slightlyMuted"
                 font-size="2"
               />
             </button>
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
index f7cc2d9dd1e31..665bf2f19cfd7 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
@@ -111,7 +111,7 @@ export function NewMfaDevice(props: Props) {
               style={{ cursor: 'pointer' }}
             />
             <Box>
-              <Text color="text.secondary">Step 2 of 2</Text>
+              <Text color="text.slightlyMuted">Step 2 of 2</Text>
               <Text typography="h4" color="light" bold>
                 Set Two-Factor Device
               </Text>
@@ -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 a335a34ec6d29..f1622d058a996 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewPassword.tsx
@@ -76,7 +76,7 @@ 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>}
+          {mfaEnabled && <Text color="text.slightlyMuted">Step 1 of 2</Text>}
           <Text typography="h4" bold mb={3} color="light">
             Set A Password
           </Text>
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 84d13d5526995..a7efe4ac5167c 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
@@ -127,7 +127,7 @@ exports[`story.MfaDeviceError 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -177,7 +177,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 {
@@ -208,7 +208,7 @@ 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;
 }
 
@@ -282,7 +282,7 @@ exports[`story.MfaDeviceError 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
@@ -340,7 +340,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
@@ -512,7 +512,7 @@ exports[`story.MfaDeviceOn 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -554,7 +554,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 {
@@ -584,7 +584,7 @@ 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;
 }
 
@@ -654,7 +654,7 @@ exports[`story.MfaDeviceOn 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
@@ -719,7 +719,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.
@@ -867,7 +867,7 @@ exports[`story.MfaDeviceOtp 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -917,7 +917,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 {
@@ -948,7 +948,7 @@ 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;
 }
 
@@ -1022,7 +1022,7 @@ exports[`story.MfaDeviceOtp 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
@@ -1074,7 +1074,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
@@ -1246,7 +1246,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -1288,7 +1288,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 {
@@ -1318,7 +1318,7 @@ 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;
 }
 
@@ -1388,7 +1388,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
       >
         <div
           class="c5"
-          color="text.secondary"
+          color="text.slightlyMuted"
         >
           Step 2 of 2
         </div>
@@ -1440,7 +1440,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`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -1929,7 +1929,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
diff --git a/web/packages/teleport/src/components/BannerList/Banner.tsx b/web/packages/teleport/src/components/BannerList/Banner.tsx
index 6656fc6c3e108..1ba13ff2523d5 100644
--- a/web/packages/teleport/src/components/BannerList/Banner.tsx
+++ b/web/packages/teleport/src/components/BannerList/Banner.tsx
@@ -55,8 +55,17 @@ export function Banner({
     }
   };
 
+  let backgroundColor;
+  if (severity === 'danger') {
+    backgroundColor = 'danger';
+  } else if (severity === 'warning') {
+    backgroundColor = 'warning.main';
+  } else {
+    backgroundColor = 'info';
+  }
+
   return (
-    <Box bg={severity} p={1} pl={2}>
+    <Box bg={backgroundColor} p={1} pl={2}>
       <Flex alignItems="center">
         {icon}
         {isValidTeleportLink(link) ? (
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 4e7e9b83f5124..ac8349022fb0b 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/EventRangePicker.tsx b/web/packages/teleport/src/components/EventRangePicker/EventRangePicker.tsx
index fa5def4ce0fe1..b35c5f31f1ca8 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 d47e9bce60e5e..36497ef55c0b9 100644
--- a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
+++ b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
@@ -175,7 +175,7 @@ const Passwordless = ({
             <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 prompt from your browser
               </Text>
             </Box>
@@ -470,7 +470,7 @@ const Divider = () => (
     justifyContent="center"
     flexDirection="column"
     borderBottom={1}
-    borderColor="text.placeholder"
+    borderColor="text.muted"
     mx={5}
     mt={5}
     mb={2}
@@ -482,7 +482,7 @@ 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.text.muted};
 
   &:hover,
   &:active,
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 b3a8337efbdf9..19385779ffc3b 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
@@ -88,7 +88,7 @@ exports[`auth2faType: off 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -365,7 +365,7 @@ exports[`auth2faType: optional rendering 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -809,7 +809,7 @@ exports[`auth2faType: otp rendering 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -1267,7 +1267,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -1778,7 +1778,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
@@ -2335,7 +2335,7 @@ exports[`server error rendering 1`] = `
   padding: 0 16px;
   outline: none;
   width: 100%;
-  color: #324148;
+  color: #000000;
   background-color: #FFFFFF;
   margin-top: 4px;
 }
diff --git a/web/packages/teleport/src/components/InputSearch/InputSearch.jsx b/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
index 5a3b28f912c61..4441fe121d878 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 603e109a2c7e4..692f4d909f0c1 100644
--- a/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
+++ b/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
@@ -225,7 +225,7 @@ const AddLabelContainer = styled.div`
 const AddLabelInput = styled.input`
   background: #182250;
   border-radius: 52px;
-  border: 1.5px solid ${({ theme }) => theme.colors.brand.main};
+  border: 1.5px solid ${({ theme }) => theme.colors.brand};
   color: white;
   height: 40px;
   padding: 0 12px;
diff --git a/web/packages/teleport/src/components/Layout/Layout.jsx b/web/packages/teleport/src/components/Layout/Layout.jsx
index 340b900f517d2..8b4957f046b1c 100644
--- a/web/packages/teleport/src/components/Layout/Layout.jsx
+++ b/web/packages/teleport/src/components/Layout/Layout.jsx
@@ -90,7 +90,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;
@@ -111,7 +111,7 @@ const TabItem = styled.button`
   }
 
   &.active:after {
-    background-color: ${props => props.theme.colors.brand.accent};
+    background-color: ${props => props.theme.colors.brandAccent};
     content: '';
     position: absolute;
     bottom: 0;
diff --git a/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx b/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
index 77be3757a33be..8984c14fd05aa 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}
@@ -118,7 +118,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 3fc55f00f2fe1..4e27e3ea8ae34 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 83c424aa16fb5..4b0bf2e7a0ff4 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
@@ -147,7 +147,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;
 }
 
@@ -320,13 +320,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
@@ -565,7 +565,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;
 }
 
@@ -738,13 +738,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 8b1249879f1fd..8ae194e73c43c 100644
--- a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
+++ b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
@@ -155,7 +155,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>
@@ -164,7 +164,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>
@@ -174,7 +174,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 24fa37e180218..4c0db6bb23b80 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
@@ -217,7 +217,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 {
@@ -403,7 +403,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>
@@ -418,7 +418,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>
@@ -645,7 +645,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 {
@@ -831,7 +831,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>
@@ -846,7 +846,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>
@@ -861,7 +861,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/SelectFilters/SelectFilters.tsx b/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
index b6e49c83ce065..2e7bfd50414cc 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.sunkenSecondary};
   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/TabIcon/TabIcon.tsx b/web/packages/teleport/src/components/TabIcon/TabIcon.tsx
index 660076ad0933f..b42a94461523f 100644
--- a/web/packages/teleport/src/components/TabIcon/TabIcon.tsx
+++ b/web/packages/teleport/src/components/TabIcon/TabIcon.tsx
@@ -52,6 +52,6 @@ const StyledTab = styled(Text)`
     active &&
     `
     font-weight: 500;
-    border-bottom: 4px solid ${theme.colors.brand.accent};
+    border-bottom: 4px solid ${theme.colors.brandAccent};
   `}
 `;
diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
index 1dd2c6ea2452f..9550a63d25345 100644
--- a/web/packages/teleport/src/components/Toggle/Toggle.tsx
+++ b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -70,7 +70,7 @@ const StyledSlider = styled.div`
     width: 16px;
     height: 16px;
     border-radius: 16px;
-    background: ${props => props.theme.colors.brand.accent};
+    background: ${props => props.theme.colors.brandAccent};
   }
 `;
 
@@ -80,7 +80,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })`
   cursor: inherit;
 
   &:checked + ${StyledSlider} {
-    background: ${props => props.theme.colors.brand.main};
+    background: ${props => props.theme.colors.brand};
 
     &:before {
       transform: translate(16px, -50%);
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 2489e11c48be9..d3212dd495095 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,7 @@ export const FormPasswordless = ({
       px={3}
       border={1}
       borderRadius={2}
-      borderColor="text.placeholder"
+      borderColor="text.muted"
       width="100%"
       onClick={onLoginWithPasswordless}
       disabled={loginAttempt.status === 'processing'}
@@ -42,7 +42,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,7 +56,7 @@ 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.text.muted};
 
   &:hover,
   &:active,
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..b2203b6d2e08a 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',
@@ -55,7 +55,7 @@ const Input = styled.input(props => {
     },
     '::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 7421eb9b902c6..8bbb530d69d60 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
@@ -22,22 +22,22 @@ 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 {
-      border-color: ${props => props.theme.colors.brand.main};
+      border-color: ${props => props.theme.colors.brand};
     }
   }
 `;
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 2d46400a581fb..6360f822d9037 100644
--- a/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
+++ b/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
@@ -204,7 +204,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`,
@@ -212,17 +212,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,
       borderColor: theme.colors.light,
     },
     '&:focus': {
-      borderColor: theme.colors.brand.main,
+      borderColor: theme.colors.brand,
       backgroundColor: theme.colors.levels.sunken,
       '::placeholder': {
-        color: theme.colors.text.placeholder,
+        color: theme.colors.text.muted,
       },
     },
 
@@ -238,7 +238,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..b55ab2bbec928 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>
   );
 }
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 e986d7e0faad4..efe8583f2f647 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackFormFields.tsx
@@ -88,7 +88,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>
@@ -104,7 +104,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..866e109c53a3f 100644
--- a/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
@@ -98,7 +98,7 @@ 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%',
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 3133c9fc8f29a..c47b72c8dc882 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
@@ -30,45 +30,48 @@ import typography, { fontSizes, fontWeights } from 'design/theme/typography';
 const space = [0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80];
 const contrastThreshold = 3;
 
+/*
+  Fields marked with "Not in v13+" are color fields that are not included in the themes released in v13 and onwards.
+  Fields marked with "Only in use in v13+" are color fields that are not used by any components in this version, but are included here in order to make
+  backporting components from later versions easier.
+*/
 const colors = {
   levels: {
     sunken: '#0C143D',
-    sunkenSecondary: '#131B43',
+    sunkenSecondary: '#131B43', // Not in v13+.
 
     surface: '#222C59',
-    surfaceSecondary: '#182047',
+    surfaceSecondary: '#182047', // Not in v13+.
 
     elevated: '#2D3761',
   },
 
-  brand: {
-    main: '#512FC9',
-    accent: '#651FFF',
-    secondaryAccent: '#354AA4',
-  },
-
-  // missing
-  inverse: '#B0BEC5',
-  progressBarColor: '#00BFA5',
-
-  dark: '#000000',
+  // Spot backgrounds are used as highlights, for example
+  // to indicate a hover or active state for an item in a menu.
+  spotBackground: [
+    'rgba(255,255,255,0.07)',
+    'rgba(255,255,255,0.13)',
+    'rgba(255,255,255,0.18)',
+  ], // Only in use in v13+.
 
-  light: '#FFFFFF',
+  brand: '#512FC9',
+  brandAccent: '#651FFF', // Not in v13+.
+  brandSecondaryAccent: '#354AA4', // Not in v13+.
 
   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: 'rgba(255,255,255,0.87)',
+    // 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: '#324148',
+    primaryInverse: '#000000',
+    // For maximum contrast.
+    contrast: '#FFFFFF', // Not in v13+.
   },
 
   buttons: {
@@ -77,6 +80,7 @@ const colors = {
     bgDisabled: 'rgba(255, 255, 255, 0.12)',
 
     primary: {
+      text: '#FFFFFF', // Only in use in v13+.
       default: '#512FC9',
       hover: '#651FFF',
       active: '#354AA4',
@@ -84,21 +88,26 @@ const colors = {
 
     secondary: {
       default: '#222C59',
-      hover: '#2D3761',
+      hover: '#2C3A73',
+      active: '#2C3A73',
     },
 
     border: {
-      default: '#2D3761',
-      hover: '#2D3761',
-      border: '#182047',
+      default: '#2C3A73',
+      hover: '#2C3A73',
+      border: '#1C254D',
       borderHover: 'rgba(255, 255, 255, 0.1)',
+      active: '#2C3A73', // Only in use in v13+.
     },
 
     warning: {
       default: '#d50000',
       hover: '#ff1744',
+      text: '#000000', // Only in use in v13+.
+      active: '#ff1744', // Only in use in v13+.
     },
 
+    // Not in v13+.
     outlinedPrimary: {
       text: '#651FFF',
       border: '#512FC9',
@@ -106,6 +115,7 @@ const colors = {
       borderActive: '#354AA4',
     },
 
+    // Not in v13+.
     outlinedDefault: {
       text: 'rgba(255,255,255,0.87)',
       textHover: '#FFFFFF',
@@ -117,8 +127,20 @@ const colors = {
       default: '#2e3860',
       hover: '#414b70',
     },
+
+    // Only in use in v13+.
+    link: {
+      default: '#009EFF',
+      hover: '#33B1FF',
+      active: '#66C5FF',
+    },
   },
 
+  progressBarColor: '#00BFA5',
+
+  dark: '#000000',
+  light: '#FFFFFF',
+
   grey: {
     ...blueGrey,
   },
@@ -127,6 +149,14 @@ const colors = {
     light: red['A200'],
     dark: red['A700'],
     main: red['A400'],
+    hover: red['A200'], // Only in use in v13+.
+    active: red['A100'], // Only in use in v13+.
+  },
+
+  warning: {
+    main: orange['A400'],
+    hover: orange['A200'], // Only in use in v13+.
+    active: orange['A100'], // Only in use in v13+.
   },
 
   action: {
@@ -145,7 +175,6 @@ const colors = {
   highlight: yellow[50],
   disabled: blueGrey[500],
   info: lightBlue[600],
-  warning: orange.A400,
   success: teal.A700,
 };
 
@@ -162,6 +191,7 @@ const borders = [
 const sansSerif = 'system-ui';
 
 const theme = {
+  name: 'dark',
   colors,
   typography,
   font: sansSerif,
@@ -176,6 +206,11 @@ const theme = {
   radii: [0, 2, 4, 8, 16, 9999, '100%'],
   regular: fontWeights.regular,
   bold: fontWeights.bold,
+  boxShadow: [
+    '0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12)',
+    '0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)',
+    '0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)',
+  ],
   // disabled media queries for styled-system
   breakpoints: [],
 };
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
index 2122b7302f137..06bbd78037fdb 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClusterSelector/ClusterSelector.tsx
@@ -84,7 +84,7 @@ const Container = styled.button`
   ${props => {
     if (props.isOpened) {
       return {
-        borderColor: props.theme.colors.brand.main,
+        borderColor: props.theme.colors.brand,
         opacity: 1,
       };
     }
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 2360b21cb65a1..36c87560b997e 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
@@ -80,21 +80,21 @@ const StyledListItem = styled(ListItem)`
 `;
 
 const InvertedLabel = styled(Label)`
-  color: ${props => props.theme.colors.brand.main};
+  color: ${props => props.theme.colors.brand};
   background-color: ${props => props.theme.colors.text.contrast};
 `;
 
 function getBackgroundColor(props) {
   if (props.isSelected) {
     if (props.isActive) {
-      return props.theme.colors.brand.accent;
+      return props.theme.colors.brandAccent;
     }
-    return props.theme.colors.brand.main;
+    return props.theme.colors.brand;
   }
 }
 
 function getHoverBackgroundColor(props) {
   if (props.isSelected) {
-    return props.theme.colors.brand.accent;
+    return props.theme.colors.brandAccent;
   }
 }
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/Identity/IdentitySelector/UserIcon.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/UserIcon.tsx
index 7ee4019b94ff0..a3a7b229bea16 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/UserIcon.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/UserIcon.tsx
@@ -28,7 +28,7 @@ export function UserIcon(props: UserIconProps) {
 const Circle = styled.span`
   border-radius: 50%;
   color: ${props => props.theme.colors.light};
-  background: ${props => props.theme.colors.brand.main};
+  background: ${props => props.theme.colors.brand};
   height: 24px;
   width: 24px;
   display: flex;
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 37d4b1e75ba36..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,14 +90,14 @@ 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 {
-    border-color: ${props => props.theme.colors.brand.main};
+    border-color: ${props => props.theme.colors.brand};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/components/ListItem.tsx b/web/packages/teleterm/src/ui/components/ListItem.tsx
index e532a1c619093..a6c28180b0162 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;
diff --git a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
index 6f7557c39224d..da6411a02ff65 100644
--- a/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
+++ b/web/packages/teleterm/src/ui/components/Notifcations/Notifications.tsx
@@ -38,7 +38,7 @@ const notificationConfig: Record<
   },
   warn: {
     Icon: Warning,
-    getColor: theme => theme.colors.warning,
+    getColor: theme => theme.colors.warning.main,
     isAutoRemovable: true,
   },
   info: {
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,
     },
   };
 }