diff --git a/web/packages/design/src/Alert/Alert.jsx b/web/packages/design/src/Alert/Alert.jsx
index 1028e6b36598a..de5d8197359f4 100644
--- a/web/packages/design/src/Alert/Alert.jsx
+++ b/web/packages/design/src/Alert/Alert.jsx
@@ -27,27 +27,27 @@ const kind = props => {
     case 'danger':
       return {
         background: theme.colors.danger,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'info':
       return {
         background: theme.colors.info,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'warning':
       return {
         background: theme.colors.warning,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     case 'success':
       return {
         background: theme.colors.success,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
     default:
       return {
         background: theme.colors.danger,
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
       };
   }
 };
diff --git a/web/packages/design/src/Button/Button.jsx b/web/packages/design/src/Button/Button.jsx
index 711e3e831afab..83a2c9d1a9fba 100644
--- a/web/packages/design/src/Button/Button.jsx
+++ b/web/packages/design/src/Button/Button.jsx
@@ -58,10 +58,10 @@ const themedStyles = props => {
   const { kind } = props;
 
   const style = {
-    color: colors.text.primary,
+    color: colors.buttons.text,
     '&:disabled': {
-      background: kind === 'text' ? 'none' : colors.action.disabledBackground,
-      color: colors.action.disabled,
+      background: kind === 'text' ? 'none' : colors.buttons.bgDisabled,
+      color: colors.buttons.textDisabled,
     },
   };
 
@@ -81,19 +81,19 @@ export const kinds = props => {
   switch (kind) {
     case 'secondary':
       return {
-        background: theme.colors.primary.light,
+        background: theme.colors.buttons.secondary.default,
         '&:hover, &:focus': {
-          background: theme.colors.primary.lighter,
+          background: theme.colors.buttons.secondary.hover,
         },
       };
     case 'border':
       return {
-        background: theme.colors.primary.lighter,
-        border: '1px solid ' + theme.colors.primary.main,
+        background: theme.colors.buttons.border.default,
+        border: '1px solid ' + theme.colors.buttons.border.border,
         opacity: '.87',
         '&:hover, &:focus': {
-          background: theme.colors.primary.lighter,
-          border: '1px solid ' + theme.colors.action.hover,
+          background: theme.colors.buttons.border.hover,
+          border: '1px solid ' + theme.colors.buttons.border.borderHover,
           opacity: 1,
         },
         '&:active': {
@@ -102,9 +102,9 @@ export const kinds = props => {
       };
     case 'warning':
       return {
-        background: theme.colors.error.dark,
+        background: theme.colors.buttons.warning.default,
         '&:hover, &:focus': {
-          background: theme.colors.error.main,
+          background: theme.colors.buttons.warning.hover,
         },
       };
     case 'text':
@@ -119,12 +119,12 @@ export const kinds = props => {
     case 'primary':
     default:
       return {
-        background: theme.colors.secondary.main,
+        background: theme.colors.buttons.primary.default,
         '&:hover, &:focus': {
-          background: theme.colors.secondary.light,
+          background: theme.colors.buttons.primary.hover,
         },
         '&:active': {
-          background: theme.colors.secondary.dark,
+          background: theme.colors.buttons.primary.active,
         },
       };
   }
diff --git a/web/packages/design/src/Button/Button.test.js b/web/packages/design/src/Button/Button.test.js
index 6b9d78c31dd3c..1d2adf3331c8d 100644
--- a/web/packages/design/src/Button/Button.test.js
+++ b/web/packages/design/src/Button/Button.test.js
@@ -25,21 +25,21 @@ describe('design/Button', () => {
     const { container } = render(<Button />);
     expect(container.firstChild.nodeName).toBe('BUTTON');
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.secondary.main,
+      background: theme.colors.brand.main,
     });
   });
 
-  test('"kind" primary renders bg == theme.colors.secondary.main', () => {
+  test('"kind" primary renders bg == theme.colors.brand.main', () => {
     const { container } = render(<ButtonPrimary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.secondary.main,
+      background: theme.colors.brand.main,
     });
   });
 
-  test('"kind" secondary renders bg == theme.colors.primary.light', () => {
+  test('"kind" secondary renders bg == theme.colors.levels.surface', () => {
     const { container } = render(<ButtonSecondary />);
     expect(container.firstChild).toHaveStyle({
-      background: theme.colors.primary.light,
+      background: theme.colors.levels.surface,
     });
   });
 
diff --git a/web/packages/design/src/ButtonLink/ButtonLink.jsx b/web/packages/design/src/ButtonLink/ButtonLink.jsx
index 98e8c42069732..0cdcf691ed5f9 100644
--- a/web/packages/design/src/ButtonLink/ButtonLink.jsx
+++ b/web/packages/design/src/ButtonLink/ButtonLink.jsx
@@ -46,7 +46,7 @@ const StyledButtonLink = styled.a`
 
   &:hover,
   &:focus {
-    background: ${({ theme }) => theme.colors.primary.light};
+    background: ${({ theme }) => theme.colors.levels.surface};
   }
 `;
 
diff --git a/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx b/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx
index 10283706f2905..20ef54cf9896e 100644
--- a/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx
+++ b/web/packages/design/src/ButtonOutlined/ButtonOutlined.jsx
@@ -57,7 +57,7 @@ const size = props => {
 const themedStyles = props => {
   const { colors } = props.theme;
   const style = {
-    color: colors.secondary.contrastText,
+    color: colors.text.contrast,
     '&:disabled': {
       background: colors.action.disabledBackground,
       color: colors.action.disabled,
@@ -79,22 +79,22 @@ const kinds = props => {
   switch (kind) {
     case 'primary':
       return {
-        borderColor: theme.colors.secondary.main,
-        color: theme.colors.secondary.light,
+        borderColor: theme.colors.buttons.outlinedPrimary.border,
+        color: theme.colors.buttons.outlinedPrimary.text,
         '&:hover, &:focus': {
-          borderColor: theme.colors.secondary.light,
+          borderColor: theme.colors.buttons.outlinedPrimary.borderHover,
         },
         '&:active': {
-          borderColor: theme.colors.secondary.dark,
+          borderColor: theme.colors.buttons.outlinedPrimary.borderActive,
         },
       };
     default:
       return {
-        borderColor: theme.colors.text.primary,
-        color: theme.colors.text.primary,
+        borderColor: theme.colors.buttons.outlinedDefault.border,
+        color: theme.colors.buttons.outlinedDefault.text,
         '&:hover, &:focus': {
-          borderColor: theme.colors.light,
-          color: theme.colors.light,
+          borderColor: theme.colors.buttons.outlinedDefault.borderHover,
+          color: theme.colors.buttons.outlinedDefault.textHover,
         },
       };
   }
diff --git a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
index fe6b863aa3990..8e41d95309a4e 100644
--- a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
+++ b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.js
@@ -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.secondary.main,
+      'border-color': theme.colors.brand.main,
     });
   });
 });
diff --git a/web/packages/design/src/Card/Card.jsx b/web/packages/design/src/Card/Card.jsx
index 650ac2a24ce8f..dfaf9cc7d6613 100644
--- a/web/packages/design/src/Card/Card.jsx
+++ b/web/packages/design/src/Card/Card.jsx
@@ -26,7 +26,7 @@ const Card = styled(Box)`
 
 Card.defaultProps = {
   theme: theme,
-  bg: 'primary.light',
+  bg: 'levels.surface',
 };
 
 Card.displayName = 'Card';
diff --git a/web/packages/design/src/CardError/CardError.jsx b/web/packages/design/src/CardError/CardError.jsx
index 3debab702584f..d643d62e56abe 100644
--- a/web/packages/design/src/CardError/CardError.jsx
+++ b/web/packages/design/src/CardError/CardError.jsx
@@ -23,7 +23,7 @@ import { Text, Alert, Card } from 'design';
 export default function CardError(props) {
   return (
     <Card
-      color="text.onLight"
+      color="text.primaryInverse"
       bg="light"
       width="540px"
       mx="auto"
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 ae8ebe69b73a3..d9384ce1917b3 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
@@ -51,7 +51,7 @@ exports[`rendering of Error Cards 1`] = `
 
 <div
   class="c0"
-  color="text.onLight"
+  color="text.primaryInverse"
   width="540px"
 >
   <div
diff --git a/web/packages/design/src/Checkbox/Checkbox.tsx b/web/packages/design/src/Checkbox/Checkbox.tsx
index f3b3993e682b7..afe15be0af377 100644
--- a/web/packages/design/src/Checkbox/Checkbox.tsx
+++ b/web/packages/design/src/Checkbox/Checkbox.tsx
@@ -23,7 +23,7 @@ export const CheckboxWrapper = styled(Flex)`
   margin-bottom: 4px;
   width: 300px;
   align-items: center;
-  border: 1px solid ${props => props.theme.colors.primary.light};
+  border: 1px solid ${props => props.theme.colors.levels.surface};
   border-radius: 8px;
 
   &.disabled {
@@ -34,7 +34,7 @@ export const CheckboxWrapper = styled(Flex)`
 
 export const CheckboxInput = styled.input`
   margin-right: 10px;
-  accent-color: ${props => props.theme.colors.secondary.main};
+  accent-color: ${props => props.theme.colors.brand.main};
 
   &:hover {
     cursor: pointer;
diff --git a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
index 199aa45f1ff8a..05fd2d8b8085a 100644
--- a/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
+++ b/web/packages/design/src/DataTable/InputSearch/InputSearch.tsx
@@ -52,7 +52,7 @@ const ChildWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${props => props.theme.colors.primary.lighter};
+  background: ${props => props.theme.colors.levels.elevated};
   border-radius: 200px;
 `;
 
@@ -63,7 +63,7 @@ const Wrapper = styled.div`
   width: 100%;
   border-radius: 200px;
   height: 32px;
-  background: ${props => props.theme.colors.primary.dark};
+  background: ${props => props.theme.colors.levels.sunkenSecondary};
 `;
 
 const StyledInput = styled.input`
@@ -84,10 +84,10 @@ const StyledInput = styled.input`
 function fromTheme(props) {
   return {
     color: props.theme.colors.text.primary,
-    background: props.theme.colors.primary.dark,
+    background: props.theme.colors.levels.sunkenSecondary,
 
     '&: hover, &:focus, &:active': {
-      background: props.theme.colors.primary.main,
+      background: props.theme.colors.levels.surfaceSecondary,
       boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, .24)',
       color: props.theme.colors.text.primary,
     },
diff --git a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
index a5447f5656263..9d0b7961bdf0a 100644
--- a/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
+++ b/web/packages/design/src/DataTable/Pager/ClientSidePager/ClientSidePager.tsx
@@ -76,7 +76,7 @@ export function PageIndicatorText({
   return (
     <Text
       typography="body2"
-      color="primary.contrastText"
+      color="text.contrast"
       mr={1}
       style={{ whiteSpace: 'nowrap', textTransform: 'uppercase' }}
     >
diff --git a/web/packages/design/src/DataTable/StyledTable.tsx b/web/packages/design/src/DataTable/StyledTable.tsx
index faa588abc1e68..31aa2843e104e 100644
--- a/web/packages/design/src/DataTable/StyledTable.tsx
+++ b/web/packages/design/src/DataTable/StyledTable.tsx
@@ -23,7 +23,7 @@ import Icon from '../Icon';
 
 export const StyledTable = styled.table(
   props => `
-  background: ${props.theme.colors.primary.light};
+  background: ${props.theme.colors.levels.surface};
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
   border-collapse: collapse;
   border-spacing: 0;
@@ -52,8 +52,8 @@ export const StyledTable = styled.table(
   }
 
   & > thead > tr > th {
-    background: ${props.theme.colors.primary.dark};
-    color: ${props.theme.colors.primary.contrastText};
+    background: ${props.theme.colors.levels.sunkenSecondary};
+    color: ${props.theme.colors.text.contrast};
     cursor: pointer;
     font-size: 10px;
     font-weight: 400;
@@ -77,11 +77,11 @@ export const StyledTable = styled.table(
   }
 
   tbody tr {
-    border-bottom: 1px solid ${props.theme.colors.primary.main};
+    border-bottom: 1px solid ${props.theme.colors.levels.surfaceSecondary};
   }
 
   tbody tr:hover {
-    background-color: ${darken(props.theme.colors.primary.lighter, 0.14)};
+    background-color: ${darken(props.theme.colors.levels.elevated, 0.14)};
   }
 
   `,
@@ -96,13 +96,13 @@ export const StyledPanel = styled.nav`
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   ${borderRadius}
 `;
 
 export const StyledEmptyIndicator = styled.div(
   props => `
-  background: ${props.theme.colors.primary.main};
+  background: ${props.theme.colors.levels.surfaceSecondary};
   border-radius: 4px;
   box-sizing: border-box;
   margin: 48px auto;
diff --git a/web/packages/design/src/Dialog/Dialog.jsx b/web/packages/design/src/Dialog/Dialog.jsx
index 2e2ee60505bd1..e22b5d2d8c5c5 100644
--- a/web/packages/design/src/Dialog/Dialog.jsx
+++ b/web/packages/design/src/Dialog/Dialog.jsx
@@ -61,7 +61,7 @@ const ModalBox = styled.div`
 const DialogBox = styled.div`
   padding: 32px;
   padding-top: 24px;
-  background: ${props => props.theme.colors.primary.main};
+  background: ${props => props.theme.colors.levels.surfaceSecondary};
   color: ${props => props.theme.colors.text.primary};
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.24);
diff --git a/web/packages/design/src/Input/Input.jsx b/web/packages/design/src/Input/Input.jsx
index 407f7d11be60f..00051df731c5d 100644
--- a/web/packages/design/src/Input/Input.jsx
+++ b/web/packages/design/src/Input/Input.jsx
@@ -70,7 +70,7 @@ Input.propTypes = {
 
 Input.defaultProps = {
   bg: 'light',
-  color: 'text.onLight',
+  color: 'text.primaryInverse',
 };
 
 export default Input;
diff --git a/web/packages/design/src/Label/Label.jsx b/web/packages/design/src/Label/Label.jsx
index ab67122ba603c..a26acdb274ba0 100644
--- a/web/packages/design/src/Label/Label.jsx
+++ b/web/packages/design/src/Label/Label.jsx
@@ -24,7 +24,7 @@ import { space } from 'design/system';
 const kind = ({ kind, theme }) => {
   if (kind === 'secondary') {
     return {
-      backgroundColor: theme.colors.primary.dark,
+      backgroundColor: theme.colors.levels.sunkenSecondary,
       color: theme.colors.text.primary,
     };
   }
@@ -32,28 +32,28 @@ const kind = ({ kind, theme }) => {
   if (kind === 'warning') {
     return {
       backgroundColor: theme.colors.warning,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   if (kind === 'danger') {
     return {
       backgroundColor: theme.colors.danger,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   if (kind === 'success') {
     return {
       backgroundColor: theme.colors.success,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     };
   }
 
   // default is primary
   return {
-    backgroundColor: theme.colors.secondary.main,
-    color: theme.colors.text.secondary.contrastText,
+    backgroundColor: theme.colors.brand.main,
+    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 3f2fb292e950f..6dfd230699f94 100644
--- a/web/packages/design/src/Label/Label.test.js
+++ b/web/packages/design/src/Label/Label.test.js
@@ -22,8 +22,8 @@ import Label, { Primary, Secondary, Warning, Danger } from './Label';
 
 describe('design/Label', () => {
   const colors = [
-    theme.colors.secondary.main,
-    theme.colors.primary.dark,
+    theme.colors.brand.main,
+    theme.colors.levels.sunkenSecondary,
     theme.colors.warning,
     theme.colors.danger,
   ];
diff --git a/web/packages/design/src/LabelState/LabelState.jsx b/web/packages/design/src/LabelState/LabelState.jsx
index fea7bce541152..3442c6b67f49e 100644
--- a/web/packages/design/src/LabelState/LabelState.jsx
+++ b/web/packages/design/src/LabelState/LabelState.jsx
@@ -23,28 +23,28 @@ import { fade } from 'design/theme/utils/colorManipulator';
 const kinds = ({ theme, kind, shadow }) => {
   // default is primary
   const styles = {
-    background: theme.colors.secondary.main,
-    color: theme.colors.text.secondary.contrastText,
+    background: theme.colors.brand.main,
+    color: theme.colors.text.contrast,
   };
 
   if (kind === 'secondary') {
-    styles.background = theme.colors.primary.dark;
+    styles.background = theme.colors.levels.sunkenSecondary;
     styles.color = theme.colors.text.primary;
   }
 
   if (kind === 'warning') {
     styles.background = theme.colors.warning;
-    styles.color = theme.colors.primary.contrastText;
+    styles.color = theme.colors.text.contrast;
   }
 
   if (kind === 'danger') {
     styles.background = theme.colors.danger;
-    styles.color = theme.colors.primary.contrastText;
+    styles.color = theme.colors.text.contrast;
   }
 
   if (kind === 'success') {
     styles.background = theme.colors.success;
-    styles.color = theme.colors.primary.contrastText;
+    styles.color = theme.colors.text.contrast;
   }
 
   if (shadow) {
diff --git a/web/packages/design/src/LabelState/LabelState.test.js b/web/packages/design/src/LabelState/LabelState.test.js
index 1d1a1833b76c7..b99728e27517d 100644
--- a/web/packages/design/src/LabelState/LabelState.test.js
+++ b/web/packages/design/src/LabelState/LabelState.test.js
@@ -26,8 +26,8 @@ import LabelState, {
 } from './LabelState';
 
 const colors = {
-  primary: theme.colors.secondary.main,
-  info: theme.colors.primary.dark,
+  primary: theme.colors.brand.main,
+  info: theme.colors.levels.sunkenSecondary,
   warning: theme.colors.warning,
   danger: theme.colors.danger,
   success: theme.colors.success,
diff --git a/web/packages/design/src/SideNav/SideNav.jsx b/web/packages/design/src/SideNav/SideNav.jsx
index 8f18426fe8af8..3f4911109f626 100644
--- a/web/packages/design/src/SideNav/SideNav.jsx
+++ b/web/packages/design/src/SideNav/SideNav.jsx
@@ -17,8 +17,8 @@ limitations under the License.
 import styled from 'styled-components';
 
 const SideNav = styled.nav`
-  background: ${props => props.theme.colors.primary.light};
-  border-right: 1px solid ${props => props.theme.colors.primary.dark};
+  background: ${props => props.theme.colors.levels.surface};
+  border-right: 1px solid ${props => props.theme.colors.levels.sunkenSecondary};
   min-width: 240px;
   width: 240px;
   overflow: auto;
diff --git a/web/packages/design/src/SideNav/SideNavItem.jsx b/web/packages/design/src/SideNav/SideNavItem.jsx
index 9e0799667f39d..0d85be530343e 100644
--- a/web/packages/design/src/SideNav/SideNavItem.jsx
+++ b/web/packages/design/src/SideNav/SideNavItem.jsx
@@ -22,18 +22,18 @@ import Flex from './../Flex';
 
 const fromTheme = ({ theme = defaultTheme }) => {
   return {
-    background: theme.colors.primary.light,
+    background: theme.colors.levels.surface,
     color: theme.colors.text.secondary,
     fontSize: theme.fontSizes[1],
     fontWeight: theme.bold,
     '&:active, &.active': {
-      borderLeftColor: theme.colors.accent,
-      background: theme.colors.primary.lighter,
-      color: theme.colors.primary.contrastText,
+      borderLeftColor: theme.colors.brand.accent,
+      background: theme.colors.levels.elevated,
+      color: theme.colors.text.contrast,
     },
     '&:hover, &:focus': {
-      background: theme.colors.primary.lighter,
-      color: theme.colors.primary.contrastText,
+      background: theme.colors.levels.elevated,
+      color: theme.colors.text.contrast,
     },
   };
 };
@@ -56,7 +56,7 @@ SideNavItem.displayName = 'SideNavItem';
 SideNavItem.defaultProps = {
   pl: 9,
   pr: 5,
-  bg: 'primary.main',
+  bg: 'levels.surfaceSecondary',
   color: 'text.primary',
   theme: defaultTheme,
 };
diff --git a/web/packages/design/src/SlideTabs/SlideTabs.tsx b/web/packages/design/src/SlideTabs/SlideTabs.tsx
index b6c04b997eb15..446fc78a0d90b 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: #512fc9;
+  background-color: ${({ theme }) => theme.colors.brand.main};
   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/SlideTabs/__snapshots__/SlideTabs.test.tsx.snap b/web/packages/design/src/SlideTabs/__snapshots__/SlideTabs.test.tsx.snap
index 9c01acc9e175a..7ab1e8a17083a 100644
--- a/web/packages/design/src/SlideTabs/__snapshots__/SlideTabs.test.tsx.snap
+++ b/web/packages/design/src/SlideTabs/__snapshots__/SlideTabs.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`design/SlideTabs supports a round medium size 1`] = `
 }
 
 .c4 {
-  background-color: #512fc9;
+  background-color: #512FC9;
   border-radius: 60px;
   box-shadow: 0px 2px 6px rgba(12,12,14,0.1);
   height: 40px;
@@ -114,7 +114,7 @@ exports[`design/SlideTabs supports a round xlarge appearance 1`] = `
 }
 
 .c4 {
-  background-color: #512fc9;
+  background-color: #512FC9;
   border-radius: 60px;
   box-shadow: 0px 2px 6px rgba(12,12,14,0.1);
   height: 56px;
@@ -209,7 +209,7 @@ exports[`design/SlideTabs supports a square medium size 1`] = `
 }
 
 .c4 {
-  background-color: #512fc9;
+  background-color: #512FC9;
   border-radius: 8px;
   box-shadow: 0px 2px 6px rgba(12,12,14,0.1);
   height: 40px;
@@ -304,7 +304,7 @@ exports[`design/SlideTabs supports a square xlarge appearance (default) 1`] = `
 }
 
 .c4 {
-  background-color: #512fc9;
+  background-color: #512FC9;
   border-radius: 8px;
   box-shadow: 0px 2px 6px rgba(12,12,14,0.1);
   height: 56px;
@@ -399,7 +399,7 @@ exports[`design/SlideTabs supports passing in a selected index 1`] = `
 }
 
 .c4 {
-  background-color: #512fc9;
+  background-color: #512FC9;
   border-radius: 8px;
   box-shadow: 0px 2px 6px rgba(12,12,14,0.1);
   height: 56px;
diff --git a/web/packages/design/src/StepSlider/StepSlider.story.tsx b/web/packages/design/src/StepSlider/StepSlider.story.tsx
index 8f59ff1dc3f81..753b477384402 100644
--- a/web/packages/design/src/StepSlider/StepSlider.story.tsx
+++ b/web/packages/design/src/StepSlider/StepSlider.story.tsx
@@ -27,7 +27,7 @@ export default {
 const singleFlow = { default: [Body1, Body2] };
 export const SingleStaticFlow = () => {
   return (
-    <Card bg="primary.light" my="5" mx="auto" width={464}>
+    <Card bg="levels.surface" my="5" mx="auto" width={464}>
       <Text typography="h3" pt={5} textAlign="center" color="light">
         Static Title
       </Text>
@@ -61,7 +61,7 @@ export const MultiCardFlow = () => {
   }
 
   return (
-    <Card as="form" bg="primary.light" mx="auto" width={464}>
+    <Card as="form" bg="levels.surface" mx="auto" width={464}>
       <StepSlider<typeof multiflows>
         flows={multiflows}
         currFlow={flow}
diff --git a/web/packages/design/src/ThemeProvider/globals.js b/web/packages/design/src/ThemeProvider/globals.js
index ae6745fde7889..8f045c0221e0f 100644
--- a/web/packages/design/src/ThemeProvider/globals.js
+++ b/web/packages/design/src/ThemeProvider/globals.js
@@ -26,7 +26,7 @@ const GlobalStyle = createGlobalStyle`
 
   body {
     margin: 0;
-    background-color: ${props => props.theme.colors.primary.dark};
+    background-color: ${props => props.theme.colors.levels.sunken};
     color: ${props => props.theme.colors.light};
     padding: 0;
   }
diff --git a/web/packages/design/src/ThemeProvider/index.js b/web/packages/design/src/ThemeProvider/index.js
index 2ecdafc3e553b..dfb589b4298ea 100644
--- a/web/packages/design/src/ThemeProvider/index.js
+++ b/web/packages/design/src/ThemeProvider/index.js
@@ -20,8 +20,9 @@ import {
   StyleSheetManager,
 } from 'styled-components';
 
+import theme from '../theme';
+
 import { GlobalStyle } from './globals';
-import theme from './../theme';
 
 const ThemeProvider = props => (
   <StyledThemeProvider theme={props.theme || theme}>
diff --git a/web/packages/design/src/TopNav/TopNav.jsx b/web/packages/design/src/TopNav/TopNav.jsx
index b5d562c152676..81bc422216663 100644
--- a/web/packages/design/src/TopNav/TopNav.jsx
+++ b/web/packages/design/src/TopNav/TopNav.jsx
@@ -23,7 +23,7 @@ export default function TopNav(props) {
     <Flex
       flex="0 0 auto"
       as="nav"
-      bg="primary.main"
+      bg="levels.surfaceSecondary"
       flexDirection="row"
       alignItems="center"
       {...props}
diff --git a/web/packages/design/src/TopNav/TopNavItem.jsx b/web/packages/design/src/TopNav/TopNavItem.jsx
index 678a6ca8440f7..7d90c3be1741e 100644
--- a/web/packages/design/src/TopNav/TopNavItem.jsx
+++ b/web/packages/design/src/TopNav/TopNavItem.jsx
@@ -41,17 +41,17 @@ const TopNavItem = styled.button`
   &:hover {
     background: ${props =>
       props.active
-        ? props.theme.colors.primary.light
+        ? props.theme.colors.levels.surface
         : 'rgba(255, 255, 255, .06)'};
   }
 
   &.active {
-    background: ${props => props.theme.colors.primary.light};
+    background: ${props => props.theme.colors.levels.surface};
     color: ${props => props.theme.colors.light};
   }
 
   &.active:after {
-    background-color: ${props => props.theme.colors.accent};
+    background-color: ${props => props.theme.colors.brand.accent};
     content: '';
     position: absolute;
     bottom: 0;
diff --git a/web/packages/design/src/TopNav/TopNavUserMenu/TopNavUserMenu.jsx b/web/packages/design/src/TopNav/TopNavUserMenu/TopNavUserMenu.jsx
index 49b8b0062e303..953935821fd55 100644
--- a/web/packages/design/src/TopNav/TopNavUserMenu/TopNavUserMenu.jsx
+++ b/web/packages/design/src/TopNav/TopNavUserMenu/TopNavUserMenu.jsx
@@ -88,7 +88,7 @@ class TopNavUserMenu extends React.Component {
 
 const StyledAvatar = styled.div`
   align-items: center;
-  background: ${props => props.theme.colors.accent};
+  background: ${props => props.theme.colors.brand.accent};
   border-radius: 50%;
   display: flex;
   font-size: 14px;
diff --git a/web/packages/design/src/labels.story.jsx b/web/packages/design/src/labels.story.jsx
index 9569aa18282df..00de3b5e3e727 100644
--- a/web/packages/design/src/labels.story.jsx
+++ b/web/packages/design/src/labels.story.jsx
@@ -28,7 +28,7 @@ export const Labels = () => (
   <>
     <Flex
       height="100px"
-      bg="primary.main"
+      bg="levels.surfaceSecondary"
       justifyContent="center"
       alignItems="center"
     >
@@ -45,7 +45,7 @@ export const Labels = () => (
     </Flex>
     <Flex
       height="100px"
-      bg="primary.main"
+      bg="levels.surfaceSecondary"
       justifyContent="center"
       alignItems="center"
     >
@@ -64,7 +64,7 @@ export const Labels = () => (
     </Flex>
     <Flex
       height="100px"
-      bg="primary.main"
+      bg="levels.surfaceSecondary"
       justifyContent="center"
       alignItems="center"
     >
diff --git a/web/packages/design/src/theme/index.js b/web/packages/design/src/theme/index.ts
similarity index 100%
rename from web/packages/design/src/theme/index.js
rename to web/packages/design/src/theme/index.ts
diff --git a/web/packages/design/src/theme/theme.js b/web/packages/design/src/theme/theme.ts
similarity index 56%
rename from web/packages/design/src/theme/theme.js
rename to web/packages/design/src/theme/theme.ts
index 705479f316e39..da9e58f721221 100644
--- a/web/packages/design/src/theme/theme.js
+++ b/web/packages/design/src/theme/theme.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Gravitational, Inc.
+Copyright 2023 Gravitational, Inc.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -31,26 +31,35 @@ const space = [0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80];
 const contrastThreshold = 3;
 
 const colors = {
-  accent: '#651FFF',
-  progressBarColor: '#00BFA5',
+  /*
+  Colors in `levels` are used to reflect the perceived depth of elements in the UI.
+  The further back an element is, the more "sunken" it is, and the more forwards it is, the more "elevated" it is (think CSS z-index).
 
-  dark: '#000',
+  A `sunken` colour would be used to represent something like the background of the app.
+  While `surface` would be the color of the primary surface where most content is located (such as tables).
+  Any colors more "elevated" than that would be used for things such as popovers, menus, and dialogs.
 
-  light: '#FFFFFF',
+  `...Secondary` colours are used to differentiate different colors that represent the same depth.
+
+  For more information on this concept: https://m3.material.io/styles/elevation/applying-elevation
+ */
+  levels: {
+    sunken: '#0C143D',
+    sunkenSecondary: '#111B48',
 
-  primary: {
-    main: '#1C254D',
-    light: '#222C59',
-    lighter: '#2C3A73',
-    dark: '#111B48',
-    contrastText: '#FFFFFF',
+    surface: '#222C59',
+    surfaceSecondary: '#1C254D',
+
+    elevated: '#2C3A73',
+
+    popout: '#3E4B7E',
+    popoutHighlighted: '#535c8a',
   },
 
-  secondary: {
+  brand: {
     main: '#512FC9',
-    light: '#651FFF',
-    dark: '#354AA4',
-    contrastText: '#FFFFFF',
+    accent: '#651FFF',
+    secondaryAccent: '#354AA4',
   },
 
   text: {
@@ -62,14 +71,66 @@ const colors = {
     placeholder: 'rgba(255, 255, 255, 0.24)',
     // Disabled text have even lower visual prominence.
     disabled: 'rgba(0, 0, 0, 0.24)',
-    // Text hints.
-    hint: 'rgba(0, 0, 0, 0.24)',
-    // On light backgrounds
-    onLight: '#324148',
-    // On dark backgrounds
-    onDark: 'rgba(255, 255, 255, 0.87)',
+    // For maximum contrast.
+    contrast: '#FFFFFF',
+    // 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',
   },
 
+  buttons: {
+    text: 'rgba(255,255,255,0.87)',
+    textDisabled: 'rgba(255, 255, 255, 0.3)',
+    bgDisabled: 'rgba(255, 255, 255, 0.12)',
+
+    primary: {
+      default: '#512FC9',
+      hover: '#651FFF',
+      active: '#354AA4',
+    },
+
+    secondary: {
+      default: '#222C59',
+      hover: '#2C3A73',
+    },
+
+    border: {
+      default: '#2C3A73',
+      hover: '#2C3A73',
+      border: '#1C254D',
+      borderHover: 'rgba(255, 255, 255, 0.1)',
+    },
+
+    warning: {
+      default: '#d50000',
+      hover: '#ff1744',
+    },
+
+    outlinedPrimary: {
+      text: '#651FFF',
+      border: '#512FC9',
+      borderHover: '#651FFF',
+      borderActive: '#354AA4',
+    },
+
+    outlinedDefault: {
+      text: 'rgba(255,255,255,0.87)',
+      textHover: '#FFFFFF',
+      border: 'rgba(255,255,255,0.87)',
+      borderHover: '#FFFFFF',
+    },
+
+    trashButton: {
+      default: '#2e3860',
+      hover: '#414b70',
+    },
+  },
+
+  progressBarColor: '#00BFA5',
+
+  dark: '#000000',
+  light: '#FFFFFF',
+
   grey: {
     ...blueGrey,
   },
diff --git a/web/packages/design/src/theme/typography.story.js b/web/packages/design/src/theme/typography.story.js
index 22d6e7ba212d0..c62c60a33904d 100644
--- a/web/packages/design/src/theme/typography.story.js
+++ b/web/packages/design/src/theme/typography.story.js
@@ -31,7 +31,7 @@ export const Typography = () => (
 );
 
 const Specs = () => (
-  <Box bg="primary.light" p={2} textAlign="left">
+  <Box bg="levels.surface" p={2} textAlign="left">
     <Text typography="h2" mb={3}>
       Specs
     </Text>
@@ -158,7 +158,7 @@ const Specs = () => (
 );
 
 const Example = () => (
-  <Box bg="primary.light" p={2} width="600px" mt={5} textAlign="left">
+  <Box bg="levels.surface" p={2} width="600px" mt={5} textAlign="left">
     <Text typography="h2" mb={3}>
       Examples
     </Text>
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 364409a3a954b..d5d963834e7cc 100644
--- a/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
+++ b/web/packages/shared/components/FieldInput/__snapshots__/FieldInput.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`snapshot tests 1`] = `
       <input
         autocomplete="off"
         class="c3"
-        color="text.onLight"
+        color="text.primaryInverse"
         inputmode="text"
         type="text"
         value="value"
@@ -117,7 +117,7 @@ exports[`snapshot tests 1`] = `
       <input
         autocomplete="off"
         class="c3"
-        color="text.onLight"
+        color="text.primaryInverse"
         inputmode="text"
         placeholder="placeholder"
         type="text"
@@ -150,7 +150,7 @@ exports[`snapshot tests 1`] = `
       <input
         autocomplete="off"
         class="c3"
-        color="text.onLight"
+        color="text.primaryInverse"
         inputmode="text"
         placeholder="placeholder"
         type="text"
@@ -189,7 +189,7 @@ exports[`snapshot tests 1`] = `
       <input
         autocomplete="off"
         class="c3"
-        color="text.onLight"
+        color="text.primaryInverse"
         inputmode="text"
         placeholder="placeholder"
         type="text"
@@ -203,7 +203,7 @@ exports[`snapshot tests 1`] = `
     <input
       autocomplete="off"
       class="c3"
-      color="text.onLight"
+      color="text.primaryInverse"
       inputmode="text"
       placeholder="without label"
       type="text"
diff --git a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
index 75e334d50394d..8deb3ca2c5503 100644
--- a/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
+++ b/web/packages/shared/components/FileTransfer/FileTransferStateless/FileTransferStateless.tsx
@@ -91,7 +91,7 @@ function ButtonClose(props: { onClick(): void }) {
 
 const Container = styled.div`
   background: ${props =>
-    props.backgroundColor || props.theme.colors.primary.light};
+    props.backgroundColor || props.theme.colors.levels.surface};
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
   border-radius: ${props => props.theme.radii[2]}px;
diff --git a/web/packages/shared/components/FormPassword/FormPassword.tsx b/web/packages/shared/components/FormPassword/FormPassword.tsx
index 4959fdf2c78ff..ff1bd09eb3807 100644
--- a/web/packages/shared/components/FormPassword/FormPassword.tsx
+++ b/web/packages/shared/components/FormPassword/FormPassword.tsx
@@ -107,7 +107,7 @@ function FormPassword(props: Props) {
   return (
     <Validation>
       {({ validator }) => (
-        <Card as="form" bg="primary.light" width="456px" p="6">
+        <Card as="form" bg="levels.surface" width="456px" p="6">
           <Status attempt={attempt} />
           <FieldInput
             rule={requiredField('Current Password is required')}
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 60851ae9f308f..5c8eb3019b198 100644
--- a/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
+++ b/web/packages/shared/components/FormPassword/__snapshots__/FormPassword.test.tsx.snap
@@ -219,7 +219,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="Password"
           type="password"
@@ -316,7 +316,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="New Password"
           type="password"
@@ -335,7 +335,7 @@ exports[`auth2faType "on" should render form with hardware key as first option i
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="Confirm Password"
           type="password"
@@ -572,7 +572,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="Password"
           type="password"
@@ -669,7 +669,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="New Password"
           type="password"
@@ -688,7 +688,7 @@ exports[`auth2faType "optional" should render form with hardware key as first op
         <input
           autocomplete="off"
           class="c3"
-          color="text.onLight"
+          color="text.primaryInverse"
           inputmode="text"
           placeholder="Confirm Password"
           type="password"
diff --git a/web/packages/shared/components/MenuLogin/MenuLogin.story.tsx b/web/packages/shared/components/MenuLogin/MenuLogin.story.tsx
index 40578715fe23e..a0a4220998ea6 100644
--- a/web/packages/shared/components/MenuLogin/MenuLogin.story.tsx
+++ b/web/packages/shared/components/MenuLogin/MenuLogin.story.tsx
@@ -32,7 +32,7 @@ export function MenuLoginExamples() {
       height="100px"
       alignItems="center"
       justifyContent="space-around"
-      bg="primary.light"
+      bg="levels.surface"
     >
       <MenuLogin
         getLoginItems={() => []}
diff --git a/web/packages/shared/components/MenuLogin/MenuLogin.tsx b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
index 646d15688ce68..03d5d258e94a4 100644
--- a/web/packages/shared/components/MenuLogin/MenuLogin.tsx
+++ b/web/packages/shared/components/MenuLogin/MenuLogin.tsx
@@ -146,7 +146,7 @@ function getLoginItemListContent(
         <Indicator
           css={({ theme }) => `
             align-self: center;
-            color: ${theme.colors.secondary.dark}
+            color: ${theme.colors.brand.secondaryAccent}
           `}
         />
       );
diff --git a/web/packages/shared/components/Search/SearchPanel.tsx b/web/packages/shared/components/Search/SearchPanel.tsx
index 267e856eec19a..65f5ee7610e74 100644
--- a/web/packages/shared/components/Search/SearchPanel.tsx
+++ b/web/packages/shared/components/Search/SearchPanel.tsx
@@ -139,7 +139,7 @@ export function PageIndicatorText({
   return (
     <Text
       typography="body2"
-      color="primary.contrastText"
+      color="text.contrast"
       style={{ textTransform: 'uppercase' }}
       mr={1}
     >
diff --git a/web/packages/shared/components/Select/DarkStyledSelect.tsx b/web/packages/shared/components/Select/DarkStyledSelect.tsx
index caf147144f15a..e1888cefcbd89 100644
--- a/web/packages/shared/components/Select/DarkStyledSelect.tsx
+++ b/web/packages/shared/components/Select/DarkStyledSelect.tsx
@@ -42,12 +42,12 @@ const StyledDarkSelect = styled(StyledSelect)(
     color: ${theme.colors.text.secondary};
 
     &:focus, &:active {
-      background-color: ${theme.colors.primary.lighter};
+      background-color: ${theme.colors.levels.elevated};
     }
 
     &:hover {
       border-color: rgba(255, 255, 255, 0.24);
-      background-color: ${theme.colors.primary.lighter};
+      background-color: ${theme.colors.levels.elevated};
       .react-select__dropdown-indicator {
         color: #666;
       }
@@ -64,7 +64,7 @@ const StyledDarkSelect = styled(StyledSelect)(
   }
 
   .react-select__control--menu-is-open {
-    background-color: ${theme.colors.primary.lighter};
+    background-color: ${theme.colors.levels.elevated};
     border-color: transparent;
     border-radius: 4px;
     border-style: solid;
@@ -99,7 +99,7 @@ const StyledDarkSelect = styled(StyledSelect)(
   }
 
   .react-select__multi-value {
-    background-color: ${theme.colors.primary.dark};
+    background-color: ${theme.colors.levels.sunkenSecondary};
     border: 1px solid ${theme.colors.text.placeholder};
   }
 
diff --git a/web/packages/shared/components/SplitPane/SplitPane.jsx b/web/packages/shared/components/SplitPane/SplitPane.jsx
index 85beeac718800..754c196add7e3 100644
--- a/web/packages/shared/components/SplitPane/SplitPane.jsx
+++ b/web/packages/shared/components/SplitPane/SplitPane.jsx
@@ -45,7 +45,9 @@ export default function SplitPane({
           {children[0]}
         </PaneSide>
       )}
-      {hasTwoSides && <Holder bg="primary.main" onMouseDown={onMouseDown} />}
+      {hasTwoSides && (
+        <Holder bg="levels.surfaceSecondary" onMouseDown={onMouseDown} />
+      )}
       {hasSecondSide && <Flex flex="1 1 0%">{children[1]}</Flex>}
     </Pane>
   );
diff --git a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
index 93813ab32a80c..f707322cd03be 100644
--- a/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
+++ b/web/packages/teleport/src/Account/ManageDevices/AddDevice/AddDevice.tsx
@@ -137,7 +137,7 @@ export function AddDevice({
                 flexDirection="column"
                 justifyContent="center"
                 alignItems="center"
-                bg="primary.light"
+                bg="levels.surface"
                 borderRadius={8}
                 height="256px"
                 p={3}
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 559514e99aa37..f957f96d057e6 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
@@ -536,7 +536,7 @@ exports[`render dialog to add a new mfa device with webauthn as preferred type 1
               <input
                 autocomplete="off"
                 class="c17"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Name"
                 type="text"
@@ -1136,7 +1136,7 @@ exports[`render failed state for dialog to add a new mfa device 1`] = `
               <input
                 autocomplete="off"
                 class="c18"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Name"
                 type="text"
@@ -1706,7 +1706,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
                 <input
                   autocomplete="one-time-code"
                   class="c19"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="numeric"
                   placeholder="123 456"
                   type="text"
@@ -1727,7 +1727,7 @@ exports[`render failed state for fetching QR Code for dialog to add a new mfa de
               <input
                 autocomplete="off"
                 class="c19"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Name"
                 type="text"
diff --git a/web/packages/teleport/src/Apps/AddApp/__snapshots__/AddApp.story.test.tsx.snap b/web/packages/teleport/src/Apps/AddApp/__snapshots__/AddApp.story.test.tsx.snap
index 0adf9a8c7ab67..96d8a91843dcb 100644
--- a/web/packages/teleport/src/Apps/AddApp/__snapshots__/AddApp.story.test.tsx.snap
+++ b/web/packages/teleport/src/Apps/AddApp/__snapshots__/AddApp.story.test.tsx.snap
@@ -300,7 +300,7 @@ exports[`render automatic tab 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="jenkins"
                   type="text"
@@ -320,7 +320,7 @@ exports[`render automatic tab 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="https://localhost:4000"
                   type="text"
@@ -664,7 +664,7 @@ exports[`render automatic tab on created state 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="jenkins"
                   type="text"
@@ -684,7 +684,7 @@ exports[`render automatic tab on created state 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="https://localhost:4000"
                   type="text"
@@ -1049,7 +1049,7 @@ exports[`render failed automatic tab 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="jenkins"
                   type="text"
@@ -1069,7 +1069,7 @@ exports[`render failed automatic tab 1`] = `
                 <input
                   autocomplete="off"
                   class="c11"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="https://localhost:4000"
                   type="text"
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 27d72ca4f26bb..b03f2aaae8b93 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
@@ -877,7 +877,7 @@ exports[`failed state 1`] = `
         >
           <div
             class="c20"
-            color="primary.contrastText"
+            color="text.contrast"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1875,7 +1875,7 @@ exports[`loaded state 1`] = `
         >
           <div
             class="c20"
-            color="primary.contrastText"
+            color="text.contrast"
             style="text-transform: uppercase;"
           >
             Showing 
diff --git a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
index 66b9613fb004f..d78924f5c2161 100644
--- a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
+++ b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
@@ -248,7 +248,7 @@ 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.accent};
+  border: 2px solid ${props.theme.colors.brand.accent};
   color: ${props.theme.colors.text.primary};
   cursor: pointer;
   display: flex;
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 1e33163ac4b0c..09d0a8bb1daba 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
@@ -289,7 +289,7 @@ exports[`list of all events 1`] = `
 }
 
 .c17 {
-  background: #000;
+  background: #000000;
   border: 2px solid #651FFF;
   color: rgba(255,255,255,0.87);
   cursor: pointer;
@@ -350,7 +350,7 @@ exports[`list of all events 1`] = `
       >
         <div
           class="c6"
-          color="primary.contrastText"
+          color="text.contrast"
           style="white-space: nowrap; text-transform: uppercase;"
         >
           Showing 
@@ -6768,7 +6768,7 @@ exports[`loaded audit log screen 1`] = `
       >
         <div
           class="c11"
-          color="primary.contrastText"
+          color="text.contrast"
           style="white-space: nowrap; text-transform: uppercase;"
         >
           Showing 
diff --git a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
index e11c1eb6c8b49..3d53dfd35830e 100644
--- a/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
+++ b/web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx
@@ -61,7 +61,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) {
       flexDirection="column"
       alignItems="center"
       justifyContent="center"
-      bg="primary.light"
+      bg="levels.surface"
       px="5"
       pt="2"
       pb="5"
diff --git a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
index 5693086c7c4b8..ebf7ba73ae3f4 100644
--- a/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
+++ b/web/packages/teleport/src/AuthConnectors/DeleteConnectorDialog/DeleteConnectorDialog.tsx
@@ -49,7 +49,7 @@ export default function DeleteConnectorDialog(props: Props) {
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete connector{' '}
-          <Text as="span" bold color="primary.contrastText">
+          <Text as="span" bold color="text.contrast">
             {name}
           </Text>
           ?
diff --git a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
index 612cba9e17bc8..6e56bf6bfb8ce 100644
--- a/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
+++ b/web/packages/teleport/src/AuthConnectors/EmptyList/EmptyList.tsx
@@ -26,7 +26,7 @@ export default function EmptyList({ onCreate }: Props) {
       <Icons.Github
         style={{ textAlign: 'center' }}
         fontSize="150px"
-        color="primary.lighter"
+        color="levels.elevated"
         mr={5}
       />
       <Box>
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 092d24ee349f4..773781daae7dc 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
@@ -84,6 +84,7 @@ exports[`render clusters 1`] = `
   font-weight: 500;
   padding: 0 8px;
   background-color: #512FC9;
+  color: #FFFFFF;
 }
 
 .c9 {
@@ -359,7 +360,7 @@ exports[`render clusters 1`] = `
       >
         <div
           class="c9"
-          color="primary.contrastText"
+          color="text.contrast"
           style="white-space: nowrap; text-transform: uppercase;"
         >
           Showing 
diff --git a/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx b/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx
index 511925d488cc7..71a353798b7a9 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx
+++ b/web/packages/teleport/src/Console/DocumentNodes/ClusterSelector/ClusterSelector.tsx
@@ -107,7 +107,7 @@ type Option = { value: string; label: string };
 const StyledSelect = styled(DarkStyledSelect)(
   ({ theme }) => `
   .react-select-container {
-    background: ${theme.colors.primary.light};
+    background: ${theme.colors.levels.surface};
   }
 
   .react-select__single-value {
diff --git a/web/packages/teleport/src/Console/DocumentNodes/ThemeProvider.tsx b/web/packages/teleport/src/Console/DocumentNodes/ThemeProvider.tsx
index 0ebe47377302f..072e83604cf39 100644
--- a/web/packages/teleport/src/Console/DocumentNodes/ThemeProvider.tsx
+++ b/web/packages/teleport/src/Console/DocumentNodes/ThemeProvider.tsx
@@ -24,9 +24,13 @@ const customTheme = {
   ...theme,
   colors: {
     ...theme.colors,
-    primary: {
-      ...theme.colors.primary,
-      ...colors.primary,
+    levels: {
+      ...theme.colors.levels,
+      ...colors.levels,
+    },
+    buttons: {
+      ...theme.colors.buttons,
+      ...colors.buttons,
     },
   },
 };
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 5cc620bb20130..4d4a267767c53 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
@@ -923,7 +923,7 @@ exports[`render DocumentNodes 1`] = `
           >
             <div
               class="c27"
-              color="primary.contrastText"
+              color="text.contrast"
               style="text-transform: uppercase;"
             >
               Showing 
diff --git a/web/packages/teleport/src/Console/DocumentSsh/DocumentSsh.tsx b/web/packages/teleport/src/Console/DocumentSsh/DocumentSsh.tsx
index 262cb97c5dd71..0a95b7c665132 100644
--- a/web/packages/teleport/src/Console/DocumentSsh/DocumentSsh.tsx
+++ b/web/packages/teleport/src/Console/DocumentSsh/DocumentSsh.tsx
@@ -83,7 +83,7 @@ export default function DocumentSsh({ doc, visible }: PropTypes) {
               : null
           }
           afterClose={handleCloseFileTransfer}
-          backgroundColor={colors.primary.light}
+          backgroundColor={colors.levels.surface}
           transferHandlers={{
             getDownloader: async (location, abortController) => {
               const url = await getScpUrl({
diff --git a/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx b/web/packages/teleport/src/Console/Tabs/JoinedUsers/JoinedUsers.jsx
index 4504a11b7d8b9..4b21d4f44a2a6 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.accent : theme.colors.grey[900]};
+    props.active ? theme.colors.brand.accent : theme.colors.grey[900]};
 `;
 
 const StyledAvatar = styled.div`
-  background: ${props => props.theme.colors.accent};
+  background: ${props => props.theme.colors.brand.accent};
   color: ${props => props.theme.colors.light};
   border-radius: 50%;
   display: flex;
diff --git a/web/packages/teleport/src/Console/Tabs/TabItem.tsx b/web/packages/teleport/src/Console/Tabs/TabItem.tsx
index bb4425aefb714..24cddcc221aa8 100644
--- a/web/packages/teleport/src/Console/Tabs/TabItem.tsx
+++ b/web/packages/teleport/src/Console/Tabs/TabItem.tsx
@@ -53,7 +53,7 @@ function fromProps({ theme, active }) {
     border: 'none',
     borderRight: `1px solid ${theme.colors.bgTerminal}`,
     '&:hover, &:focus': {
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
       transition: 'color .3s',
     },
   };
@@ -62,7 +62,7 @@ function fromProps({ theme, active }) {
     styles = {
       ...styles,
       backgroundColor: theme.colors.bgTerminal,
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
       fontWeight: 'bold',
       transition: 'none',
     };
diff --git a/web/packages/teleport/src/Console/colors.ts b/web/packages/teleport/src/Console/colors.ts
index 08eb8058c75d5..1b23dbb371c1a 100644
--- a/web/packages/teleport/src/Console/colors.ts
+++ b/web/packages/teleport/src/Console/colors.ts
@@ -27,11 +27,19 @@ export const colors = {
   terminal: '#28FE14',
   terminalDark: '#01172C',
   bgTerminal: '#010B1C',
-  primary: {
-    light: '#03203C',
-    lighter: '#092F52',
-    dark: '#01172C',
-    main: '#010B1C',
+  levels: {
+    surface: '#03203C',
+    elevated: '#092F52',
+    sunkenSecondary: '#01172C',
+    surfaceSecondary: '#010B1C',
+  },
+  buttons: {
+    border: {
+      default: '#092F52',
+      hover: '#092F52',
+      border: '#010B1C',
+      borderHover: 'rgba(255, 255, 255, 0.1)',
+    },
   },
   text: '#263238',
   success: '#00BFA5',
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 0b1834dfa4550..23cbd8c197c50 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
@@ -803,7 +803,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1553,7 +1553,7 @@ exports[`open source loaded 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
diff --git a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
index 8d0044def7e28..12e057eb16e1a 100644
--- a/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
+++ b/web/packages/teleport/src/Discover/Shared/SelectCreatable/SelectCreatable.tsx
@@ -24,22 +24,26 @@ const styles = {
   },
   multiValueLabel: (base, state) => {
     if (state.data.isFixed) {
-      return { ...base, color: theme.colors.text.onDark, paddingRight: 6 };
+      return { ...base, color: theme.colors.text.primary, paddingRight: 6 };
     }
 
     if (state.isDisabled) {
       return { ...base, paddingRight: 6 };
     }
 
-    return { ...base, color: theme.colors.text.onLight };
+    return { ...base, color: theme.colors.text.primaryInverse };
   },
   multiValueRemove: (base, state) => {
     return state.data.isFixed || state.isDisabled
       ? { ...base, display: 'none' }
-      : { ...base, cursor: 'pointer', color: theme.colors.text.onLight };
+      : {
+          ...base,
+          cursor: 'pointer',
+          color: theme.colors.text.primaryInverse,
+        };
   },
   menuList: base => {
-    return { ...base, color: theme.colors.text.onLight };
+    return { ...base, color: theme.colors.text.primaryInverse };
   },
 };
 
diff --git a/web/packages/teleport/src/Discover/Shared/Text.tsx b/web/packages/teleport/src/Discover/Shared/Text.tsx
index cec3c5fc3815b..26a100a21cac3 100644
--- a/web/packages/teleport/src/Discover/Shared/Text.tsx
+++ b/web/packages/teleport/src/Discover/Shared/Text.tsx
@@ -31,6 +31,6 @@ export const TextBox = styled(Box)`
   width: 100%;
   margin-top: 32px;
   border-radius: 8px;
-  background-color: ${p => p.theme.colors.primary.light};
+  background-color: ${p => p.theme.colors.levels.surface};
   padding: 24px;
 `;
diff --git a/web/packages/teleport/src/Discover/Sidebar/Sidebar.tsx b/web/packages/teleport/src/Discover/Sidebar/Sidebar.tsx
index 8df5960bef911..f89479b56a0be 100644
--- a/web/packages/teleport/src/Discover/Sidebar/Sidebar.tsx
+++ b/web/packages/teleport/src/Discover/Sidebar/Sidebar.tsx
@@ -64,7 +64,7 @@ export function Sidebar(props: SidebarProps) {
               borderRadius={5}
               alignItems="center"
               justifyContent="center"
-              bg="secondary.main"
+              bg="brand.main"
               height="30px"
               width="30px"
               mr={2}
diff --git a/web/packages/teleport/src/Discover/Sidebar/StepItem.tsx b/web/packages/teleport/src/Discover/Sidebar/StepItem.tsx
index 2b96142ab9c92..99ba94a9c6a60 100644
--- a/web/packages/teleport/src/Discover/Sidebar/StepItem.tsx
+++ b/web/packages/teleport/src/Discover/Sidebar/StepItem.tsx
@@ -93,21 +93,21 @@ const Bullet = styled.span`
 `;
 
 const ActiveBullet = styled(Bullet)`
-  border-color: ${props => props.theme.colors.secondary.main};
-  background: ${props => props.theme.colors.secondary.main};
+  border-color: ${props => props.theme.colors.brand.main};
+  background: ${props => props.theme.colors.brand.main};
 
   :before {
     content: '';
     height: 8px;
     width: 8px;
     border-radius: 50%;
-    border: 2px solid ${props => props.theme.colors.primary.main};
+    border: 2px solid ${props => props.theme.colors.levels.surfaceSecondary};
   }
 `;
 
 const CheckedBullet = styled(Bullet)`
-  border-color: ${props => props.theme.colors.secondary.main};
-  background: ${props => props.theme.colors.secondary.main};
+  border-color: ${props => props.theme.colors.brand.main};
+  background: ${props => props.theme.colors.brand.main};
 
   :before {
     content: '✓';
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 2a01eb431a8b7..0480d8f14ee4a 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
@@ -803,7 +803,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1510,7 +1510,7 @@ exports[`loaded 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
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 df65a25706e06..e61be642cc16f 100644
--- a/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
+++ b/web/packages/teleport/src/Login/__snapshots__/LoginFailed.test.tsx.snap
@@ -81,7 +81,7 @@ exports[`callback error message 1`] = `
   />
   <div
     class="c1"
-    color="text.onLight"
+    color="text.primaryInverse"
     width="540px"
   >
     <div
@@ -191,7 +191,7 @@ exports[`default error message 1`] = `
   />
   <div
     class="c1"
-    color="text.onLight"
+    color="text.primaryInverse"
     width="540px"
   >
     <div
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 1b6468aba428b..21a8fd30c22f7 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
@@ -813,7 +813,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1806,7 +1806,7 @@ exports[`loaded 1`] = `
       >
         <div
           class="c23"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
diff --git a/web/packages/teleport/src/Player/Player.tsx b/web/packages/teleport/src/Player/Player.tsx
index 0435956ae06f9..8ef74eaa3266a 100644
--- a/web/packages/teleport/src/Player/Player.tsx
+++ b/web/packages/teleport/src/Player/Player.tsx
@@ -85,7 +85,7 @@ export default function Player() {
 
   return (
     <StyledPlayer>
-      <Flex bg={colors.primary.light} height="38px">
+      <Flex bg={colors.levels.surface} height="38px">
         <Tabs flex="1 0">
           <TabItem title="Session Player" />
         </Tabs>
diff --git a/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx b/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
index a814cf4ae2b53..a5f5ff5a8f6aa 100644
--- a/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
+++ b/web/packages/teleport/src/Player/PlayerTabs/PlayerTabs.tsx
@@ -43,12 +43,12 @@ const StyledTabItem = styled(Box)`
   &:hover,
   &.active,
   &:focus {
-    color: ${props => props.theme.colors.primary.contrastText};
+    color: ${props => props.theme.colors.text.contrast};
   }
 
   ${({ theme }) => ({
     backgroundColor: theme.colors.bgTerminal,
-    color: theme.colors.primary.contrastText,
+    color: theme.colors.text.contrast,
     fontWeight: 'bold',
     transition: 'none',
   })}
@@ -58,7 +58,7 @@ const StyledTabItem = styled(Box)`
       border: 'none',
       borderRight: `1px solid ${theme.colors.bgTerminal}`,
       '&:hover, &:focus': {
-        color: theme.colors.primary.contrastText,
+        color: theme.colors.text.contrast,
         transition: 'color .3s',
       },
     };
diff --git a/web/packages/teleport/src/PlayerNext/PlayerNext.jsx b/web/packages/teleport/src/PlayerNext/PlayerNext.jsx
index 1b608840385d4..c208daf5e7afc 100644
--- a/web/packages/teleport/src/PlayerNext/PlayerNext.jsx
+++ b/web/packages/teleport/src/PlayerNext/PlayerNext.jsx
@@ -112,7 +112,8 @@ export function PlayerNext(props) {
 }
 
 const ToolBar = styled(Flex)`
-  border-bottom: 1px solid ${({ theme }) => theme.colors.primary.main};
+  border-bottom: 1px solid
+    ${({ theme }) => theme.colors.levels.surfaceSecondary};
 `;
 
 const StatusBox = props => (
diff --git a/web/packages/teleport/src/PlayerNext/SwitchMode/SwitchMode.jsx b/web/packages/teleport/src/PlayerNext/SwitchMode/SwitchMode.jsx
index 957bb6ebf749a..75da934fe0d4c 100644
--- a/web/packages/teleport/src/PlayerNext/SwitchMode/SwitchMode.jsx
+++ b/web/packages/teleport/src/PlayerNext/SwitchMode/SwitchMode.jsx
@@ -92,7 +92,7 @@ const StyledButton = styled.button`
   ${Icon} {
     font-size: 14px;
     color: ${({ theme, active }) => {
-      return active ? theme.colors.primary.dark : '';
+      return active ? theme.colors.levels.sunkenSecondary : '';
     }};
   }
 
@@ -108,7 +108,7 @@ const StyledButton = styled.button`
     border-top-right-radius: 0px;
     border-right: 1px solid;
     border-left: 1px solid;
-    border-color: ${({ theme }) => theme.colors.primary.main};
+    border-color: ${({ theme }) => theme.colors.levels.surfaceSecondary};
   }
 
   :nth-child(3) {
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 3c1383a2aafa2..5b17587795a74 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
@@ -645,7 +645,7 @@ exports[`rendering of Session Recordings 1`] = `
         >
           <div
             class="c11"
-            color="primary.contrastText"
+            color="text.contrast"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
diff --git a/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx b/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
index c6aabe5c2377d..33813fab529e3 100644
--- a/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
+++ b/web/packages/teleport/src/Roles/DeleteRole/DeleteRole.tsx
@@ -44,7 +44,7 @@ export default function DeleteRoleDialog(props: Props) {
         {attempt.status === 'failed' && <Alert children={attempt.statusText} />}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete role{' '}
-          <Text as="span" bold color="primary.contrastText">
+          <Text as="span" bold color="text.contrast">
             {name}
           </Text>{' '}
           ?
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 ce54c64803855..c8e7d4fca50c5 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
@@ -358,7 +358,7 @@ exports[`loaded 1`] = `
       >
         <div
           class="c9"
-          color="primary.contrastText"
+          color="text.contrast"
           style="white-space: nowrap; text-transform: uppercase;"
         >
           Showing 
diff --git a/web/packages/teleport/src/SideNav/SideNav.tsx b/web/packages/teleport/src/SideNav/SideNav.tsx
index ee21d63fad650..569255f2d6cad 100644
--- a/web/packages/teleport/src/SideNav/SideNav.tsx
+++ b/web/packages/teleport/src/SideNav/SideNav.tsx
@@ -76,15 +76,15 @@ const LogoItem = styled(Flex)(
   text-decoration: none;
   width: 100%;
   &:hover {
-    background ${props.theme.colors.primary.lighter};
-    color ${props.theme.colors.primary.contrastText};
+    background ${props.theme.colors.levels.elevated};
+    color ${props.theme.colors.text.contrast};
   }
 `
 );
 
 export const Nav = styled.nav`
-  background: ${props => props.theme.colors.primary.light};
-  border-right: 1px solid ${props => props.theme.colors.primary.dark};
+  background: ${props => props.theme.colors.levels.surface};
+  border-right: 1px solid ${props => props.theme.colors.levels.sunkenSecondary};
   overflow: auto;
   height: 100%;
   display: flex;
diff --git a/web/packages/teleport/src/SideNav/SideNavItem.tsx b/web/packages/teleport/src/SideNav/SideNavItem.tsx
index dc01e74c8d54c..74b342615e300 100644
--- a/web/packages/teleport/src/SideNav/SideNavItem.tsx
+++ b/web/packages/teleport/src/SideNav/SideNavItem.tsx
@@ -26,26 +26,26 @@ const fromTheme = ({ $nested = false, theme = defaultTheme }) => {
     fontFamily: theme.font,
     paddingLeft: theme.space[9] + 'px',
     paddingRight: theme.space[5] + 'px',
-    background: theme.colors.primary.light,
+    background: theme.colors.levels.surface,
     color: theme.colors.text.secondary,
     minHeight: '56px',
 
     '&:active, &.active': {
-      borderLeftColor: $nested ? 'none' : theme.colors.accent,
-      background: theme.colors.primary.lighter,
-      color: theme.colors.primary.contrastText,
+      borderLeftColor: $nested ? 'none' : theme.colors.brand.accent,
+      background: theme.colors.levels.elevated,
+      color: theme.colors.text.contrast,
       fontWeight: theme.bold,
 
       '.marker': {
-        background: theme.colors.secondary.light,
+        background: theme.colors.brand.accent,
       },
     },
 
     '&:hover': {
-      background: theme.colors.primary.lighter,
+      background: theme.colors.levels.elevated,
     },
     '&:focus, &:hover': {
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     },
   };
 
diff --git a/web/packages/teleport/src/SideNav/SideNavItemGroup.tsx b/web/packages/teleport/src/SideNav/SideNavItemGroup.tsx
index 01b1512db9d9b..ade377b06ec4f 100644
--- a/web/packages/teleport/src/SideNav/SideNavItemGroup.tsx
+++ b/web/packages/teleport/src/SideNav/SideNavItemGroup.tsx
@@ -105,24 +105,24 @@ const fromTheme = ({ theme }) => {
     fontFamily: theme.font,
     paddingLeft: theme.space[9] + 'px',
     paddingRight: theme.space[5] + 'px',
-    background: theme.colors.primary.light,
+    background: theme.colors.levels.surface,
     color: theme.colors.text.secondary,
 
     '&.active': {
-      borderLeftColor: theme.colors.accent,
-      background: theme.colors.primary.lighter,
-      color: theme.colors.primary.contrastText,
+      borderLeftColor: theme.colors.brand.accent,
+      background: theme.colors.levels.elevated,
+      color: theme.colors.text.contrast,
       '.marker': {
-        background: theme.colors.secondary.light,
+        background: theme.colors.brand.accent,
       },
     },
 
     '&:hover': {
-      background: theme.colors.primary.lighter,
+      background: theme.colors.levels.elevated,
     },
 
     '&:hover, &:focus': {
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
     },
 
     minHeight: '56px',
@@ -131,7 +131,7 @@ const fromTheme = ({ theme }) => {
 
 const StyledChildrenContainer = styled.div`
   background: ${props =>
-    `linefar-gradient(140deg, ${props.theme.colors.primary.lighter}, ${props.theme.colors.primary.light});`};
+    `linefar-gradient(140deg, ${props.theme.colors.levels.elevated}, ${props.theme.colors.levels.surface});`};
 `;
 
 const StyledMarker = styled.div`
diff --git a/web/packages/teleport/src/Support/Support.tsx b/web/packages/teleport/src/Support/Support.tsx
index bdc8d056c8171..25ef72a7c8de6 100644
--- a/web/packages/teleport/src/Support/Support.tsx
+++ b/web/packages/teleport/src/Support/Support.tsx
@@ -130,7 +130,7 @@ export const DataContainer: React.FC<{ title: string }> = ({
 }) => (
   <Box
     border="1px solid"
-    borderColor="primary.light"
+    borderColor="levels.surface"
     mt={4}
     borderRadius={3}
     px={5}
@@ -202,7 +202,7 @@ const StyledSupportLink = styled.a.attrs({
   transition: all 0.3s;
   ${props => props.theme.typography.body2}
   &:hover, &:focus {
-    background: ${props => props.theme.colors.primary.lighter};
+    background: ${props => props.theme.colors.levels.elevated};
   }
 `;
 
@@ -219,7 +219,7 @@ const Header = ({ title = '', icon = null }) => (
   <Flex
     alignItems="center"
     borderBottom="1px solid"
-    borderColor="primary.dark"
+    borderColor="levels.sunkenSecondary"
     mb={3}
     width={210}
     mt={4}
diff --git a/web/packages/teleport/src/TopBar/TopBar.tsx b/web/packages/teleport/src/TopBar/TopBar.tsx
index 3a76e4c32fa55..eface04450258 100644
--- a/web/packages/teleport/src/TopBar/TopBar.tsx
+++ b/web/packages/teleport/src/TopBar/TopBar.tsx
@@ -77,5 +77,6 @@ export const TopBarContainer = styled(TopNav)`
   padding-left: ${({ theme }) => `${theme.space[6]}px`};
   overflow-y: initial;
   flex-shrink: 0;
-  border-bottom: 1px solid ${({ theme }) => theme.colors.primary.main};
+  border-bottom: 1px solid
+    ${({ theme }) => theme.colors.levels.surfaceSecondary};
 `;
diff --git a/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx b/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
index 567733de90927..d08743b15a69b 100644
--- a/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
+++ b/web/packages/teleport/src/TrustedClusters/DeleteTrust/DeleteTrust.tsx
@@ -43,7 +43,7 @@ export default function DeleteTrustedClusterDialog(props: Props) {
         {attempt.isFailed && <Alerts.Danger>{attempt.message}</Alerts.Danger>}
         <Text typography="paragraph" mb="6">
           Are you sure you want to delete trusted cluster{' '}
-          <Text as="span" bold color="primary.contrastText">
+          <Text as="span" bold color="text.contrast">
             {name}
           </Text>
           ?
diff --git a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
index 01f9f8b01cc40..7d0b02780aaa8 100644
--- a/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
+++ b/web/packages/teleport/src/TrustedClusters/TrustedList/TrustedListItem.tsx
@@ -36,7 +36,7 @@ export default function TrustedListItem(props: Props) {
       flexDirection="column"
       alignItems="center"
       justifyContent="center"
-      bg="primary.light"
+      bg="levels.surface"
       px="5"
       pt="4"
       pb="5"
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 67adf08693812..40b0541580070 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
@@ -412,7 +412,7 @@ exports[`success state 1`] = `
         >
           <div
             class="c10"
-            color="primary.contrastText"
+            color="text.contrast"
             style="white-space: nowrap; text-transform: uppercase;"
           >
             Showing 
diff --git a/web/packages/teleport/src/Welcome/CardWelcome.tsx b/web/packages/teleport/src/Welcome/CardWelcome.tsx
index da9e9e5795099..2f08cec69aeee 100644
--- a/web/packages/teleport/src/Welcome/CardWelcome.tsx
+++ b/web/packages/teleport/src/Welcome/CardWelcome.tsx
@@ -19,7 +19,7 @@ import { Card, Box, Text, ButtonPrimary } from 'design';
 
 export function CardWelcome({ title, subTitle, btnText, onClick }: Props) {
   return (
-    <Card bg="primary.light" my={6} mx="auto" width="464px">
+    <Card bg="levels.surface" my={6} mx="auto" width="464px">
       <Box p={6}>
         <Text typography="h2" mb={3} textAlign="center" color="light">
           {title}
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx b/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
index 00f12a8846eac..d1712b113f7ba 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/Expired.tsx
@@ -23,7 +23,14 @@ export function Expired({ resetMode = false }) {
   const paraCodeTxt = resetMode ? 'reset' : 'invite';
 
   return (
-    <Card width="540px" color="text.onLight" p={6} bg="light" mt={6} mx="auto">
+    <Card
+      width="540px"
+      color="text.primaryInverse"
+      p={6}
+      bg="light"
+      mt={6}
+      mx="auto"
+    >
       <Text typography="h1" textAlign="center" fontSize={8} color="text" mb={3}>
         {titleCodeTxt} Code Expired
       </Text>
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.story.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.story.tsx
index 4b1fa486d186f..c54a95789f2d7 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.story.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.story.tsx
@@ -155,7 +155,7 @@ export const SuccessAndPrivateKeyEnabledReset = () => (
 
 function CardWrapper({ children }) {
   return (
-    <Card as="form" bg="primary.light" my={5} mx="auto" width={464}>
+    <Card as="form" bg="levels.surface" my={5} mx="auto" width={464}>
       {children}
     </Card>
   );
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx
index 8740575da1ae0..4d4f6a8c2e456 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewCredentials.tsx
@@ -119,7 +119,7 @@ export function NewCredentials(props: State & Props) {
   }
 
   return (
-    <Card as="form" bg="primary.light" my={5} mx="auto" width={464}>
+    <Card as="form" bg="levels.surface" my={5} mx="auto" width={464}>
       <StepSlider<typeof loginFlows>
         flows={loginFlows}
         currFlow={flow}
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
index 86b49d0b0c733..14aef5cbf65c5 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
@@ -143,7 +143,7 @@ export function NewMfaDevice(props: Props) {
             justifyContent="center"
             alignItems="center"
             borderRadius={8}
-            bg={mfaType?.value === 'optional' ? 'primary.lighter' : ''}
+            bg={mfaType?.value === 'optional' ? 'levels.elevated' : ''}
             height={mfaType?.value === 'optional' ? '340px' : '240px'}
             px={3}
           >
diff --git a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
index 1e383798b378c..dd1b4d4f8cbd1 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/Success.tsx
@@ -47,7 +47,7 @@ export function RegisterSuccess({
     <Card
       width="540px"
       p={6}
-      bg="primary.light"
+      bg="levels.surface"
       mt={6}
       mx="auto"
       textAlign="center"
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 b02ec46c479d5..854641541c4f9 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
@@ -363,7 +363,7 @@ exports[`story.MfaDeviceError 1`] = `
           <input
             autocomplete="off"
             class="c19"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -383,7 +383,7 @@ exports[`story.MfaDeviceError 1`] = `
           <input
             autocomplete="one-time-code"
             class="c19"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="numeric"
             placeholder="123 456"
             type="text"
@@ -720,7 +720,7 @@ exports[`story.MfaDeviceOn 1`] = `
           <input
             autocomplete="off"
             class="c16"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1076,7 +1076,7 @@ exports[`story.MfaDeviceOtp 1`] = `
           <input
             autocomplete="off"
             class="c18"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1096,7 +1096,7 @@ exports[`story.MfaDeviceOtp 1`] = `
           <input
             autocomplete="one-time-code"
             class="c18"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="numeric"
             placeholder="123 456"
             type="text"
@@ -1423,7 +1423,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
           <input
             autocomplete="off"
             class="c16"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1673,7 +1673,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               readonly=""
               type="text"
@@ -1692,7 +1692,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               placeholder="Password"
               type="password"
@@ -1711,7 +1711,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               placeholder="Confirm Password"
               type="password"
@@ -2015,7 +2015,7 @@ exports[`story.PrimaryPasswordlessError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               placeholder="Name"
               type="text"
diff --git a/web/packages/teleport/src/components/ButtonOptions/ButtonOptions.tsx b/web/packages/teleport/src/components/ButtonOptions/ButtonOptions.tsx
index 91c6e3a051067..486248fbd6741 100644
--- a/web/packages/teleport/src/components/ButtonOptions/ButtonOptions.tsx
+++ b/web/packages/teleport/src/components/ButtonOptions/ButtonOptions.tsx
@@ -71,7 +71,7 @@ export default class ButtonOptions extends React.Component<Props, State> {
             ml={2}
             style={{ position: 'absolute', top: '6px', right: '16px' }}
             fontSize="3"
-            color="primary.lighter"
+            color="levels.elevated"
           />
         </StyledButton>
         <Menu
@@ -119,7 +119,7 @@ const menuListCss = () => `
 `;
 
 const StyledButton = styled(ButtonOutlined)`
-  border-color: ${props => props.theme.colors.primary.lighter};
+  border-color: ${props => props.theme.colors.levels.elevated};
   height: 32px;
   padding: 0 40px 0 24px;
   width: auto;
diff --git a/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx b/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
index 9ece4dbbffb53..91113ca40dd0b 100644
--- a/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
+++ b/web/packages/teleport/src/components/CardEmpty/CardEmpty.jsx
@@ -21,7 +21,7 @@ export default function CardEmpty(props) {
   const { title, children, ...styles } = props;
   return (
     <Box
-      bg="primary.light"
+      bg="levels.surface"
       p="4"
       width="100%"
       m="0 auto"
diff --git a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
index 23937fab7bb16..d47e9bce60e5e 100644
--- a/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
+++ b/web/packages/teleport/src/components/FormLogin/FormLogin.tsx
@@ -74,7 +74,7 @@ export default function LoginForm(props: Props) {
   // and display sso providers if any.
   if (!isLocalAuthEnabled && ssoEnabled) {
     return (
-      <Card bg="primary.light" my="5" mx="auto" width="464px" pb={4}>
+      <Card bg="levels.surface" my="5" mx="auto" width="464px" pb={4}>
         <Text typography="h3" pt={4} textAlign="center" color="light">
           {title}
         </Text>
@@ -90,7 +90,7 @@ export default function LoginForm(props: Props) {
 
   if (!isLocalAuthEnabled) {
     return (
-      <Card bg="primary.light" my="5" mx="auto" width="464px" px={5} pb={4}>
+      <Card bg="levels.surface" my="5" mx="auto" width="464px" px={5} pb={4}>
         <Text typography="h3" pt={4} textAlign="center" color="light">
           {title}
         </Text>
@@ -105,7 +105,7 @@ export default function LoginForm(props: Props) {
 
   // Everything below requires local auth to be enabled.
   return (
-    <Card bg="primary.light" my="5" mx="auto" width={464} pb={4}>
+    <Card bg="levels.surface" my="5" mx="auto" width={464} pb={4}>
       <Text typography="h3" pt={4} textAlign="center" color="light">
         {title}
       </Text>
@@ -498,7 +498,7 @@ const StyledPaswordlessBtn = styled(ButtonText)`
 `;
 
 const StyledOr = styled.div`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   display: flex;
   align-items: center;
   font-size: 10px;
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 ffdefef1dd1d2..b3a8337efbdf9 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
@@ -222,7 +222,7 @@ exports[`auth2faType: off 1`] = `
               <input
                 autocomplete="off"
                 class="c7"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -245,7 +245,7 @@ exports[`auth2faType: off 1`] = `
                 <input
                   autocomplete="off"
                   class="c7"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
@@ -586,7 +586,7 @@ exports[`auth2faType: optional rendering 1`] = `
               <input
                 autocomplete="off"
                 class="c7"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -609,7 +609,7 @@ exports[`auth2faType: optional rendering 1`] = `
                 <input
                   autocomplete="off"
                   class="c7"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
@@ -1030,7 +1030,7 @@ exports[`auth2faType: otp rendering 1`] = `
               <input
                 autocomplete="off"
                 class="c7"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -1053,7 +1053,7 @@ exports[`auth2faType: otp rendering 1`] = `
                 <input
                   autocomplete="off"
                   class="c7"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
@@ -1146,7 +1146,7 @@ exports[`auth2faType: otp rendering 1`] = `
                   <input
                     autocomplete="one-time-code"
                     class="c7"
-                    color="text.onLight"
+                    color="text.primaryInverse"
                     inputmode="numeric"
                     placeholder="123 456"
                     type="text"
@@ -1488,7 +1488,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
               <input
                 autocomplete="off"
                 class="c7"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -1511,7 +1511,7 @@ exports[`auth2faType: webauthn rendering 1`] = `
                 <input
                   autocomplete="off"
                   class="c7"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
@@ -1999,7 +1999,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
               <input
                 autocomplete="off"
                 class="c7"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -2022,7 +2022,7 @@ exports[`cloud auth2faType: on rendering 1`] = `
                 <input
                   autocomplete="off"
                   class="c7"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
@@ -2475,7 +2475,7 @@ exports[`server error rendering 1`] = `
               <input
                 autocomplete="off"
                 class="c8"
-                color="text.onLight"
+                color="text.primaryInverse"
                 inputmode="text"
                 placeholder="Username"
                 type="text"
@@ -2498,7 +2498,7 @@ exports[`server error rendering 1`] = `
                 <input
                   autocomplete="off"
                   class="c8"
-                  color="text.onLight"
+                  color="text.primaryInverse"
                   inputmode="text"
                   placeholder="Password"
                   type="password"
diff --git a/web/packages/teleport/src/components/InputSearch/InputSearch.jsx b/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
index d28520e9e5da6..5a3b28f912c61 100644
--- a/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
+++ b/web/packages/teleport/src/components/InputSearch/InputSearch.jsx
@@ -67,13 +67,13 @@ class InputSearch extends React.Component {
 
 function fromTheme(props) {
   return {
-    background: props.theme.colors.primary.dark,
+    background: props.theme.colors.levels.sunkenSecondary,
 
     '&:hover': {
-      background: props.theme.colors.primary.lighter,
+      background: props.theme.colors.levels.elevated,
     },
     '&:focus, &:active': {
-      background: props.theme.colors.primary.lighter,
+      background: props.theme.colors.levels.elevated,
       boxShadow: 'inset 0 2px 4px rgba(0, 0, 0, .24)',
       color: props.theme.colors.text.primary,
     },
diff --git a/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx b/web/packages/teleport/src/components/LabelSelector/LabelSelector.tsx
index 197e2d940af74..603e109a2c7e4 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 #512fc9;
+  border: 1.5px solid ${({ theme }) => theme.colors.brand.main};
   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 cb07bc5c47eec..340b900f517d2 100644
--- a/web/packages/teleport/src/components/Layout/Layout.jsx
+++ b/web/packages/teleport/src/components/Layout/Layout.jsx
@@ -23,7 +23,8 @@ import defaultTheme from 'design/theme';
  */
 const FeatureHeader = styled(Flex)`
   flex-shrink: 0;
-  border-bottom: 1px solid ${props => props.theme.colors.primary.main};
+  border-bottom: 1px solid
+    ${props => props.theme.colors.levels.surfaceSecondary};
   height: 56px;
   margin-left: -40px;
   margin-right: -40px;
@@ -101,7 +102,7 @@ const TabItem = styled.button`
   &:hover {
     background: ${props =>
       props.active
-        ? props.theme.colors.primary.light
+        ? props.theme.colors.levels.surface
         : 'rgba(255, 255, 255, .06)'};
   }
 
@@ -110,7 +111,7 @@ const TabItem = styled.button`
   }
 
   &.active:after {
-    background-color: ${props => props.theme.colors.accent};
+    background-color: ${props => props.theme.colors.brand.accent};
     content: '';
     position: absolute;
     bottom: 0;
diff --git a/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx b/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
index ef65f0095ff8a..4f3af62b15142 100644
--- a/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
+++ b/web/packages/teleport/src/components/MfaDeviceList/RemoveDialog/RemoveDialog.tsx
@@ -40,7 +40,7 @@ export default function RemoveDialog(props: Props) {
         )}
         <Text typography="paragraph" mb="6">
           Are you sure you want to remove device{' '}
-          <Text as="span" bold color="primary.contrastText">
+          <Text as="span" bold color="text.contrast">
             {name}
           </Text>{' '}
           ?
diff --git a/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx b/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
index 3f9add2c62edc..f891993875459 100644
--- a/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
+++ b/web/packages/teleport/src/components/PrivateKeyPolicy/PrivateKeyPolicy.tsx
@@ -49,7 +49,7 @@ export const PrivateKeyLoginDisabledCard = ({
   // lost password or two-factor device.
   onRecover?: (isRecoverPassword: boolean) => void;
 }) => (
-  <Card bg="primary.light" my="5" mx="auto" width="464px" px={5} pb={4}>
+  <Card bg="levels.surface" my="5" mx="auto" width="464px" px={5} pb={4}>
     <Text typography="h3" pt={4} textAlign="center" color="light">
       {title}
     </Text>
diff --git a/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx b/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
index aa72eeb7f5c50..77be3757a33be 100644
--- a/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
+++ b/web/packages/teleport/src/components/QuickLaunch/QuickLaunch.jsx
@@ -52,7 +52,7 @@ export default function FieldInputSsh({
     <StyledBox {...boxProps} hasError={hasError}>
       <StyledLabel>SSH:</StyledLabel>
       <StyledInput
-        bg="primary.light"
+        bg="levels.surface"
         color="text.primary"
         placeholder="login@host:port"
         autoFocus={autoFocus}
@@ -124,7 +124,7 @@ const StyledInput = styled.input`
 
   &:hover,
   &:focus {
-    background: ${props => props.theme.colors.primary.lighter};
+    background: ${props => props.theme.colors.levels.elevated};
   }
 
   ${color} ${space} ${width} ${height};
diff --git a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
index 55659f03f8c96..8b1249879f1fd 100644
--- a/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
+++ b/web/packages/teleport/src/components/RecoveryCodes/RecoveryCodes.tsx
@@ -85,7 +85,7 @@ export default function RecoveryCodesDialog({
       >
         <Flex
           flex={4}
-          bg="primary.light"
+          bg="levels.surface"
           minWidth="584px"
           flexDirection="column"
           p={5}
@@ -108,7 +108,7 @@ export default function RecoveryCodesDialog({
               Recovery Codes ({recoveryCodes?.codes.length} Total)
             </Text>
             <Flex
-              bg="primary.dark"
+              bg="levels.sunkenSecondary"
               p={2}
               pb={4}
               pl={3}
@@ -146,7 +146,7 @@ export default function RecoveryCodesDialog({
         </Flex>
         <Flex
           flex={2}
-          bg="primary.main"
+          bg="levels.surfaceSecondary"
           minWidth="384px"
           flexDirection="column"
           p={5}
diff --git a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
index a2c26b63f90d8..0e076bb9f39be 100644
--- a/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
+++ b/web/packages/teleport/src/components/ResourceEditor/ResourceEditor.jsx
@@ -86,7 +86,7 @@ export default function ResourceEditor(props) {
           </DialogHeader>
           {attempt.isFailed && <Alerts.Danger>{attempt.message}</Alerts.Danger>}
           {!isNew && (
-            <Text mb="2" typography="h4" color="primary.contrastText">
+            <Text mb="2" typography="h4" color="text.contrast">
               {name}
             </Text>
           )}
@@ -117,7 +117,7 @@ export default function ResourceEditor(props) {
             height="100%"
             width="300px"
             p={5}
-            bg="primary.light"
+            bg="levels.surface"
           >
             <Box>
               <DialogTitle typography="body1" bold>
diff --git a/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx b/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
index 737140cb3d6af..b6e49c83ce065 100644
--- a/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
+++ b/web/packages/teleport/src/components/SelectFilters/SelectFilters.tsx
@@ -250,7 +250,7 @@ function Label({
   return (
     <StyledLabel onClick={() => onClick(name)}>
       <span title={name}>{name}</span>
-      <ButtonIcon size={0} ml="1" bg="primary.light">
+      <ButtonIcon size={0} ml="1" bg="levels.surface">
         <Close />
       </ButtonIcon>
     </StyledLabel>
@@ -281,14 +281,14 @@ const ActionButton = styled(ButtonBorder)`
 
 const AddButton = styled(ButtonBorder)`
   line-height: normal;
-  background-color: ${props => props.theme.colors.primary.dark};
+  background-color: ${props => props.theme.colors.levels.sunkenSecondary};
   font-weight: normal;
   border: 1px solid rgba(255, 255, 255, 0.24);
   color: #fff;
 
   &:hover,
   &:focus {
-    background: ${props => props.theme.colors.primary.lighter};
+    background: ${props => props.theme.colors.levels.elevated};
   }
 `;
 
@@ -348,13 +348,13 @@ const StyledLabel = styled.div`
   border: 1px solid rgba(255, 255, 255, 0.24);
   border-radius: 4px;
   color: ${({ theme }) => theme.colors.text.primary};
-  background-color: ${props => props.theme.colors.primary.dark};
+  background-color: ${props => props.theme.colors.levels.sunkenSecondary};
   font-weight: regular;
   font-size: 12px;
 
   &:hover,
   &:focus {
-    background: ${props => props.theme.colors.primary.lighter};
+    background: ${props => props.theme.colors.levels.elevated};
   }
 
   > span {
diff --git a/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.js b/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.js
index c241aa0b88033..cd4ee4e4a98c6 100644
--- a/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.js
+++ b/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.js
@@ -75,7 +75,7 @@ const PopoverContent = styled(Box)`
   height: fit-content;
   width: fit-content;
   max-width: 536px;
-  background: ${props => props.theme.colors.primary.lighter};
+  background: ${props => props.theme.colors.levels.elevated};
 `;
 
 const TooltipButton = ({ setRef, ...props }) => {
diff --git a/web/packages/teleport/src/components/TabIcon/TabIcon.tsx b/web/packages/teleport/src/components/TabIcon/TabIcon.tsx
index 237284dc5f473..660076ad0933f 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.accent};
+    border-bottom: 4px solid ${theme.colors.brand.accent};
   `}
 `;
diff --git a/web/packages/teleport/src/components/Toggle/Toggle.tsx b/web/packages/teleport/src/components/Toggle/Toggle.tsx
index 3ede147702b74..1dd2c6ea2452f 100644
--- a/web/packages/teleport/src/components/Toggle/Toggle.tsx
+++ b/web/packages/teleport/src/components/Toggle/Toggle.tsx
@@ -58,7 +58,7 @@ const StyledSlider = styled.div`
   width: 32px;
   height: 12px;
   border-radius: 12px;
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   cursor: inherit;
   flex-shrink: 0;
 
@@ -70,7 +70,7 @@ const StyledSlider = styled.div`
     width: 16px;
     height: 16px;
     border-radius: 16px;
-    background: ${props => props.theme.colors.secondary.light};
+    background: ${props => props.theme.colors.brand.accent};
   }
 `;
 
@@ -80,7 +80,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })`
   cursor: inherit;
 
   &:checked + ${StyledSlider} {
-    background: ${props => props.theme.colors.secondary.main};
+    background: ${props => props.theme.colors.brand.main};
 
     &:before {
       transform: translate(16px, -50%);
@@ -88,7 +88,7 @@ const StyledInput = styled.input.attrs({ type: 'checkbox' })`
   }
 
   &:disabled + ${StyledSlider} {
-    background: ${props => props.theme.colors.primary.light};
+    background: ${props => props.theme.colors.levels.surface};
 
     &:before {
       background: ${props => props.theme.colors.grey[700]};
diff --git a/web/packages/teleterm/src/mainProcess/windowsManager.ts b/web/packages/teleterm/src/mainProcess/windowsManager.ts
index b4087df8193b3..23fce250bebe8 100644
--- a/web/packages/teleterm/src/mainProcess/windowsManager.ts
+++ b/web/packages/teleterm/src/mainProcess/windowsManager.ts
@@ -53,7 +53,7 @@ export class WindowsManager {
       y: windowState.y,
       width: windowState.width,
       height: windowState.height,
-      backgroundColor: theme.colors.primary.darker,
+      backgroundColor: theme.colors.levels.sunken,
       minWidth: 400,
       minHeight: 300,
       autoHideMenuBar: true,
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx
index c11e393876788..bb6365ee9e0b1 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.story.tsx
@@ -315,8 +315,8 @@ const TestContainer: React.FC = ({ children }) => (
     <Box
       css={`
         width: 450px;
-        border: 1px solid ${props => props.theme.colors.primary.lighter};
-        background: ${props => props.theme.colors.primary.main};
+        border: 1px solid ${props => props.theme.colors.levels.elevated};
+        background: ${props => props.theme.colors.levels.surfaceSecondary};
       `}
     >
       {children}
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 306f18e69d884..7691709c34a92 100644
--- a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx
+++ b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLogin.tsx
@@ -243,7 +243,7 @@ const FlexBordered = props => (
 );
 
 const StyledOr = styled.div`
-  background: ${props => props.theme.colors.primary.main};
+  background: ${props => props.theme.colors.levels.surfaceSecondary};
   display: flex;
   align-items: center;
   font-size: 10px;
diff --git a/web/packages/teleterm/src/ui/Document/Document.tsx b/web/packages/teleterm/src/ui/Document/Document.tsx
index b12cba45a6acc..387f3b60c1b3c 100644
--- a/web/packages/teleterm/src/ui/Document/Document.tsx
+++ b/web/packages/teleterm/src/ui/Document/Document.tsx
@@ -45,7 +45,7 @@ const Document: React.FC<{
       tabIndex={visible ? 0 : -1}
       flex="1"
       ref={ref}
-      bg="primary.darker"
+      bg="levels.sunken"
       onContextMenu={handleContextMenu}
       style={{
         overflow: 'auto',
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
index a14af9870330c..a24197319c5ad 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterNavButton/ClusterNavButton.tsx
@@ -65,7 +65,7 @@ const StyledNavButton = styled.button(props => {
     borderRadius: '4px',
 
     '&:hover, &:focus': {
-      background: props.theme.colors.primary.main,
+      background: props.theme.colors.levels.surfaceSecondary,
     },
     ...space(props),
     ...width(props),
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
index 5416aad0e08b8..9db626673a850 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/ClusterSearch.tsx
@@ -38,7 +38,7 @@ export default function ClusterSearch(props: Props) {
 const Input = styled.input(props => {
   const { theme } = props;
   return {
-    background: theme.colors.primary.main,
+    background: theme.colors.levels.surfaceSecondary,
     boxSizing: 'border-box',
     color: theme.colors.text.primary,
     width: '100%',
@@ -49,8 +49,8 @@ const Input = styled.input(props => {
     border: '1px solid transparent',
     padding: '2px 12px',
     '&:hover, &:focus': {
-      color: theme.colors.primary.contrastText,
-      borderColor: theme.colors.primary.lighter,
+      color: theme.colors.text.contrast,
+      borderColor: theme.colors.levels.elevated,
       opacity: 1,
     },
     '::placeholder': {
diff --git a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
index f6b402945054b..695164e927927 100644
--- a/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
+++ b/web/packages/teleterm/src/ui/DocumentCluster/ClusterResources/MenuLoginTheme.tsx
@@ -23,15 +23,11 @@ const menuLoginTheme = {
   ...theme,
   colors: {
     ...theme.colors,
-    subtle: theme.colors.primary.lighter,
-    light: theme.colors.primary.light,
-    primary: {
-      ...theme.colors.primary,
-      lighter: theme.colors.primary.lighter,
-    },
-    secondary: {
-      ...theme.colors.secondary,
-      dark: theme.colors.text.primary,
+    subtle: theme.colors.levels.elevated,
+    light: theme.colors.levels.surface,
+    levels: {
+      ...theme.colors.levels,
+      sunkenSecondary: theme.colors.text.primary,
     },
     grey: {
       [50]: 'rgba(255,255,255,0.05)',
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
index ae0d2eb87b515..098bd4611a501 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/CliCommand.tsx
@@ -45,7 +45,7 @@ export function CliCommand({ cliCommand, onRun, isLoading }: CliCommandProps) {
       alignItems="center"
       justifyContent="space-between"
       borderRadius={2}
-      bg="primary.dark"
+      bg="levels.sunkenSecondary"
       mb={2}
     >
       <Flex
diff --git a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
index 75d4564f98cc0..7421eb9b902c6 100644
--- a/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
+++ b/web/packages/teleterm/src/ui/DocumentGateway/common.tsx
@@ -37,7 +37,7 @@ export const ConfigFieldInput: typeof FieldInput = styled(FieldInput)`
     }
 
     &:focus {
-      border-color: ${props => props.theme.colors.secondary.main};
+      border-color: ${props => props.theme.colors.brand.main};
     }
   }
 `;
diff --git a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx
index 34167f3f72a66..7345d74449234 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx
@@ -84,5 +84,5 @@ type Props = {
 const StyledXterm = styled(Box)`
   height: 100%;
   width: 100%;
-  background-color: ${props => props.theme.colors.primary.darker};
+  background-color: ${props => props.theme.colors.levels.sunken};
 `;
diff --git a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
index 8685095084fc3..41c9ace0b9d62 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
@@ -54,7 +54,7 @@ export default class TtyTerminal {
       fontFamily: this.options.fontFamily,
       scrollback: 5000,
       theme: {
-        background: theme.colors.primary.darker,
+        background: theme.colors.levels.sunken,
       },
       windowOptions: {
         setWinSizeChars: true,
diff --git a/web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx b/web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx
index c62150a70bbab..3ee9c1ff035c2 100644
--- a/web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx
+++ b/web/packages/teleterm/src/ui/Documents/KeyboardShortcutsPanel.tsx
@@ -72,7 +72,12 @@ function Entry(props: { title: string; shortcut: string }) {
       <Text textAlign="right" color="light" typography="subtitle1" py="4px">
         {props.title}
       </Text>
-      <MonoText bg="primary.main" textAlign="left" px="12px" py="4px">
+      <MonoText
+        bg="levels.surfaceSecondary"
+        textAlign="left"
+        px="12px"
+        py="4px"
+      >
         {props.shortcut}
       </MonoText>
     </>
diff --git a/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx b/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
index 886c2186e4cb0..2d46400a581fb 100644
--- a/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
+++ b/web/packages/teleterm/src/ui/QuickInput/QuickInput.tsx
@@ -215,12 +215,12 @@ const Input = styled.input(props => {
       color: theme.colors.text.secondary,
     },
     '&:hover, &:focus': {
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
       borderColor: theme.colors.light,
     },
     '&:focus': {
-      borderColor: theme.colors.secondary.main,
-      backgroundColor: theme.colors.primary.darker,
+      borderColor: theme.colors.brand.main,
+      backgroundColor: theme.colors.levels.sunken,
       '::placeholder': {
         color: theme.colors.text.placeholder,
       },
@@ -239,7 +239,7 @@ const Shortcut = styled(Box)`
   top: 12px;
   padding: 2px 3px;
   color: ${({ theme }) => theme.colors.text.secondary};
-  background-color: ${({ theme }) => theme.colors.primary.light};
+  background-color: ${({ theme }) => theme.colors.levels.surface};
   line-height: 12px;
   font-size: 12px;
   border-radius: 2px;
diff --git a/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx b/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
index 936488a390376..93f281df044f3 100644
--- a/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
+++ b/web/packages/teleterm/src/ui/QuickInput/QuickInputList/QuickInputList.tsx
@@ -161,23 +161,22 @@ const StyledItem = styled.div(({ theme, $active }) => {
   return {
     '&:hover, &:focus': {
       cursor: 'pointer',
-      background: theme.colors.primary.lighter,
+      background: theme.colors.levels.elevated,
     },
 
-    borderBottom: `2px solid ${theme.colors.primary.placeholder}`,
     padding: '2px 8px',
-    color: theme.colors.primary.contrastText,
+    color: theme.colors.text.contrast,
     background: $active
-      ? theme.colors.primary.main
-      : theme.colors.primary.darker,
+      ? theme.colors.levels.surfaceSecondary
+      : theme.colors.levels.sunken,
   };
 });
 
 const StyledGlobalSearchResults = styled.div(({ theme, position }) => {
   return {
     boxShadow: '8px 8px 18px rgb(0 0 0)',
-    color: theme.colors.primary.contrastText,
-    background: theme.colors.primary.light,
+    color: theme.colors.text.contrast,
+    background: theme.colors.levels.surface,
     boxSizing: 'border-box',
     marginTop: '42px',
     left: position ? position + 'px' : 0,
diff --git a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
index b3743d909dfac..c62b249c90dbf 100644
--- a/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/ShareFeedback/ShareFeedbackForm.tsx
@@ -42,7 +42,7 @@ export function ShareFeedbackForm(props: ShareFeedbackProps) {
     props.submitFeedbackAttempt.status === 'processing';
 
   return (
-    <Flex bg="primary.main" p={3} borderRadius={3} maxWidth="370px">
+    <Flex bg="levels.surfaceSecondary" p={3} borderRadius={3} maxWidth="370px">
       <Validation>
         {({ validator }) => (
           <Flex
diff --git a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
index c1822ea678b16..aca1496336d1b 100644
--- a/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
+++ b/web/packages/teleterm/src/ui/StatusBar/StatusBar.tsx
@@ -31,7 +31,7 @@ export function StatusBar() {
       width="100%"
       height="28px"
       css={`
-        border-top: 1px solid ${props => props.theme.colors.primary.light};
+        border-top: 1px solid ${props => props.theme.colors.levels.surface};
       `}
       alignItems="center"
       justifyContent="space-between"
diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
index 90770cdd08af5..271cdaa6dbfaa 100644
--- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/ClusterConnectPanel.tsx
@@ -60,7 +60,7 @@ export function ClusterConnectPanel() {
 }
 
 const ScrollingContainer = styled(Flex)`
-  background: ${props => props.theme.colors.primary.darker};
+  background: ${props => props.theme.colors.levels.sunken};
   width: 100%;
   overflow: auto;
 `;
diff --git a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
index 746343acd2199..b783de6969224 100644
--- a/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
+++ b/web/packages/teleterm/src/ui/TabHost/ClusterConnectPanel/RecentClusters.tsx
@@ -47,7 +47,7 @@ export function RecentClusters() {
   }
 
   return (
-    <Card p={3} maxWidth="480px" bg="primary.main" m="auto">
+    <Card p={3} maxWidth="480px" bg="levels.surfaceSecondary" m="auto">
       <Text bold fontSize={3} mb={1} color="light">
         Recent clusters
       </Text>
diff --git a/web/packages/teleterm/src/ui/Tabs/TabItem.tsx b/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
index e1970793bd34f..935c644c7ae58 100644
--- a/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/TabItem.tsx
@@ -105,15 +105,15 @@ const StyledTabItem = styled.div(({ theme, active, dragging, canDrag }) => {
     border: 'none',
     borderRadius: '8px 8px 0 0',
     '&:hover, &:focus': {
-      color: theme.colors.primary.contrastText,
+      color: theme.colors.text.contrast,
       transition: 'color .3s',
     },
     position: 'relative',
   };
 
   if (active) {
-    styles['backgroundColor'] = theme.colors.primary.darker;
-    styles['color'] = theme.colors.secondary.contrastText;
+    styles['backgroundColor'] = theme.colors.levels.sunken;
+    styles['color'] = theme.colors.text.contrast;
     styles['transition'] = 'none';
   }
 
diff --git a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
index 400fb3d67813b..99e27c9659f82 100644
--- a/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
+++ b/web/packages/teleterm/src/ui/Tabs/Tabs.tsx
@@ -117,7 +117,7 @@ const Separator = styled.div`
 `;
 
 const StyledTabs = styled(Box)`
-  background-color: ${props => props.theme.colors.primary.main};
+  background-color: ${props => props.theme.colors.levels.surfaceSecondary};
   min-height: 32px;
   border-radius: 4px;
   display: flex;
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/globals.ts b/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
index a9156954914ec..2769f7ece03a5 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/globals.ts
@@ -26,7 +26,7 @@ const GlobalStyle = createGlobalStyle`
 
   body {
     margin: 0;
-    background-color: ${props => props.theme.colors.primary.darker};
+    background-color: ${props => props.theme.colors.levels.sunken};
     color: ${props => props.theme.colors.light};
     padding: 0;
   }
diff --git a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
index 2feed3ae1d6a2..a2ffba52c066b 100644
--- a/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
+++ b/web/packages/teleterm/src/ui/ThemeProvider/theme.ts
@@ -31,32 +31,30 @@ const space = [0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80];
 const contrastThreshold = 3;
 
 const colors = {
-  // missing
-  inverse: '#B0BEC5',
-  progressBarColor: '#00BFA5',
-
-  accent: '#651FFF',
+  levels: {
+    sunken: '#0C143D',
+    sunkenSecondary: '#131B43',
 
-  dark: '#000',
+    surface: '#222C59',
+    surfaceSecondary: '#182047',
 
-  light: '#FFFFFF',
-
-  primary: {
-    darker: '#0C143D',
-    dark: '#131B43',
-    main: '#182047',
-    light: '#222C59',
-    lighter: '#2D3761',
-    contrastText: '#FFFFFF',
+    elevated: '#2D3761',
   },
 
-  secondary: {
+  brand: {
     main: '#512FC9',
-    light: '#651FFF',
-    dark: '#354AA4',
-    contrastText: '#FFFFFF',
+    accent: '#651FFF',
+    secondaryAccent: '#354AA4',
   },
 
+  // missing
+  inverse: '#B0BEC5',
+  progressBarColor: '#00BFA5',
+
+  dark: '#000000',
+
+  light: '#FFFFFF',
+
   text: {
     // The most important text.
     primary: 'rgba(255,255,255,0.87)',
@@ -66,12 +64,59 @@ const colors = {
     placeholder: 'rgba(255, 255, 255, 0.24)',
     // Disabled text have even lower visual prominence.
     disabled: 'rgba(0, 0, 0, 0.24)',
-    // Text hints.
-    hint: 'rgba(0, 0, 0, 0.24)',
-    // On light backgrounds
-    onLight: '#324148',
-    // On dark backgrounds
-    onDark: 'rgba(255, 255, 255, 0.87)',
+    // For maximum contrast.
+    contrast: '#FFFFFF',
+    // 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',
+  },
+
+  buttons: {
+    text: 'rgba(255,255,255,0.87)',
+    textDisabled: 'rgba(255, 255, 255, 0.3)',
+    bgDisabled: 'rgba(255, 255, 255, 0.12)',
+
+    primary: {
+      default: '#512FC9',
+      hover: '#651FFF',
+      active: '#354AA4',
+    },
+
+    secondary: {
+      default: '#222C59',
+      hover: '#2D3761',
+    },
+
+    border: {
+      default: '#2D3761',
+      hover: '#2D3761',
+      border: '#182047',
+      borderHover: 'rgba(255, 255, 255, 0.1)',
+    },
+
+    warning: {
+      default: '#d50000',
+      hover: '#ff1744',
+    },
+
+    outlinedPrimary: {
+      text: '#651FFF',
+      border: '#512FC9',
+      borderHover: '#651FFF',
+      borderActive: '#354AA4',
+    },
+
+    outlinedDefault: {
+      text: 'rgba(255,255,255,0.87)',
+      textHover: '#FFFFFF',
+      border: 'rgba(255,255,255,0.87)',
+      borderHover: '#FFFFFF',
+    },
+
+    trashButton: {
+      default: '#2e3860',
+      hover: '#414b70',
+    },
   },
 
   grey: {
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 66f2bfd635e75..70d70a4149bdf 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.secondary.main,
+        borderColor: props.theme.colors.brand.main,
         opacity: 1,
       };
     }
diff --git a/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx b/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx
index a96ef8af48d91..b852429dac0c4 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx
@@ -102,5 +102,5 @@ export function Clusters() {
 }
 
 const Container = styled(Box)`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
 `;
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 7a9a081c60330..2360b21cb65a1 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
@@ -80,27 +80,21 @@ const StyledListItem = styled(ListItem)`
 `;
 
 const InvertedLabel = styled(Label)`
-  color: ${props => props.theme.colors.secondary.main};
-  background-color: ${props => props.theme.colors.secondary.contrastText};
+  color: ${props => props.theme.colors.brand.main};
+  background-color: ${props => props.theme.colors.text.contrast};
 `;
 
 function getBackgroundColor(props) {
   if (props.isSelected) {
     if (props.isActive) {
-      return props.theme.colors.secondary.light;
+      return props.theme.colors.brand.accent;
     }
-    return props.theme.colors.secondary.main;
-  }
-  if (props.isActive) {
-    return props.theme.colors.secondary.lighter;
+    return props.theme.colors.brand.main;
   }
 }
 
 function getHoverBackgroundColor(props) {
   if (props.isSelected) {
-    return props.theme.colors.secondary.light;
-  }
-  if (props.isActive) {
-    return props.theme.colors.secondary.lighter;
+    return props.theme.colors.brand.accent;
   }
 }
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
index 28ce96225ab8e..444208bd3a6d9 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
@@ -85,5 +85,5 @@ export function Connections() {
 }
 
 const Container = styled(Box)`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
index c1cd24bacbd8b..2e11b493ba71c 100644
--- a/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Connections/ConnectionsIcon/ConnectionsIcon.tsx
@@ -57,7 +57,7 @@ const Container = styled.div`
 `;
 
 const StyledButton = styled(Button)`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   padding: 9px;
   width: 30px;
   height: 30px;
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
index 80722fdd1071a..babb5d2ef8cd0 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
@@ -162,5 +162,5 @@ export const Identity = React.forwardRef<IdentityHandler, IdentityProps>(
 );
 
 const Container = styled(Box)`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
index a21b982643ccf..ba5320bcadd0b 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
@@ -100,6 +100,6 @@ const focusGrabber = (
 );
 
 const Separator = styled.div`
-  background: ${props => props.theme.colors.primary.lighter};
+  background: ${props => props.theme.colors.levels.elevated};
   height: 1px;
 `;
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 bca173076c5ee..7ee4019b94ff0 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.secondary.main};
+  background: ${props => props.theme.colors.brand.main};
   height: 24px;
   width: 24px;
   display: flex;
diff --git a/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationItem.tsx b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationItem.tsx
index 10ebd0f2d8815..3d89b73f083e8 100644
--- a/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationItem.tsx
@@ -39,7 +39,7 @@ const ListItem = styled(Flex)`
   justify-content: start;
   cursor: pointer;
   &:hover {
-    background: ${props => props.theme.colors.primary.lighter};
+    background: ${props => props.theme.colors.levels.elevated};
   }
 `;
 
@@ -47,7 +47,7 @@ const IconBox = styled(Box)`
   display: flex;
   align-items: center;
   border-radius: 4px;
-  background-color: ${props => props.theme.colors.primary.lighter};
+  background-color: ${props => props.theme.colors.levels.elevated};
 `;
 
 type NavigationItemProps = {
diff --git a/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
index 18fdb23939986..a2e9c089821e6 100644
--- a/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
@@ -121,5 +121,5 @@ export function NavigationMenu() {
 }
 
 const MenuContainer = styled(Box)`
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/TopBar.tsx b/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
index 15a6e6697de18..383ada9fa3a5d 100644
--- a/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
@@ -44,7 +44,7 @@ export function TopBar() {
 }
 
 const Grid = styled.div`
-  background: ${props => props.theme.colors.primary.main};
+  background: ${props => props.theme.colors.levels.surfaceSecondary};
   display: grid;
   grid-template-columns: 1fr minmax(0, 700px) 1fr;
   width: 100%;
diff --git a/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx b/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
index 69de2d445272e..494df8ba22bf4 100644
--- a/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/TopBarButton.tsx
@@ -34,6 +34,6 @@ export const TopBarButton = styled.button`
       : 'transparent'};
 
   &:hover {
-    background: ${props => props.theme.colors.primary.light};
+    background: ${props => props.theme.colors.levels.surface};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx b/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
index 9f0c6365114bc..37d4b1e75ba36 100644
--- a/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
+++ b/web/packages/teleterm/src/ui/components/FilterableList/FilterableList.tsx
@@ -98,6 +98,6 @@ const DarkInput = styled(Input)`
   }
 
   &:focus {
-    border-color: ${props => props.theme.colors.secondary.main};
+    border-color: ${props => props.theme.colors.brand.main};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/components/ListItem.tsx b/web/packages/teleterm/src/ui/components/ListItem.tsx
index 4c3e17088609a..e532a1c619093 100644
--- a/web/packages/teleterm/src/ui/components/ListItem.tsx
+++ b/web/packages/teleterm/src/ui/components/ListItem.tsx
@@ -40,6 +40,6 @@ export const ListItem = styled.li`
   &:focus,
   &:hover {
     background: rgba(255, 255, 255, 0.05);
-    color: ${props => props.theme.colors.primary.contrastText};
+    color: ${props => props.theme.colors.text.contrast};
   }
 `;
diff --git a/web/packages/teleterm/src/ui/components/Notifcations/Notification.tsx b/web/packages/teleterm/src/ui/components/Notifcations/Notification.tsx
index ce9220728146e..eac8ba6a47d70 100644
--- a/web/packages/teleterm/src/ui/components/Notifcations/Notification.tsx
+++ b/web/packages/teleterm/src/ui/components/Notifcations/Notification.tsx
@@ -198,7 +198,7 @@ const shortTextCss = css`
 const Container = styled(Flex)`
   flex-direction: row;
   justify-content: space-between;
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
   min-height: 40px;
   width: 320px;
   margin-bottom: 12px;
diff --git a/web/packages/teleterm/src/ui/components/Table.tsx b/web/packages/teleterm/src/ui/components/Table.tsx
index 3eb9602a71833..f04c75812fdad 100644
--- a/web/packages/teleterm/src/ui/components/Table.tsx
+++ b/web/packages/teleterm/src/ui/components/Table.tsx
@@ -36,9 +36,9 @@ function getTableTheme(theme) {
       primary: {
         ...theme.colors.primary,
         dark: 'rgba(255, 255, 255, 0.05)',
-        light: theme.colors.primary.dark,
-        lighter: theme.colors.primary.light,
-        main: theme.colors.primary.darker,
+        light: theme.colors.levels.sunkenSecondary,
+        lighter: theme.colors.levels.surface,
+        main: theme.colors.levels.sunken,
       },
       link: theme.colors.text.primary,
     },