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.jsx b/web/packages/design/src/Button/Button.test.jsx
index 6b9d78c31dd3c..1d2adf3331c8d 100644
--- a/web/packages/design/src/Button/Button.test.jsx
+++ b/web/packages/design/src/Button/Button.test.jsx
@@ -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.jsx b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.jsx
index fe6b863aa3990..8e41d95309a4e 100644
--- a/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.jsx
+++ b/web/packages/design/src/ButtonOutlined/ButtonOutlined.test.jsx
@@ -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.jsx.snap b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
index ae8ebe69b73a3..d9384ce1917b3 100644
--- a/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
+++ b/web/packages/design/src/CardError/__snapshots__/CardError.story.test.jsx.snap
@@ -51,7 +51,7 @@ exports[`rendering of Error Cards 1`] = `
 
 <div
   class="c0"
-  color="text.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 8f6b50838eb66..e187c5623183a 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 777570483cb51..c86a0d17793d8 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.jsx b/web/packages/design/src/Label/Label.test.jsx
index 3f2fb292e950f..6dfd230699f94 100644
--- a/web/packages/design/src/Label/Label.test.jsx
+++ b/web/packages/design/src/Label/Label.test.jsx
@@ -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.jsx b/web/packages/design/src/LabelState/LabelState.test.jsx
index 1d1a1833b76c7..b99728e27517d 100644
--- a/web/packages/design/src/LabelState/LabelState.test.jsx
+++ b/web/packages/design/src/LabelState/LabelState.test.jsx
@@ -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/RadioGroup/RadioGroup.tsx b/web/packages/design/src/RadioGroup/RadioGroup.tsx
index 712df13b8232e..9bab910f16ae6 100644
--- a/web/packages/design/src/RadioGroup/RadioGroup.tsx
+++ b/web/packages/design/src/RadioGroup/RadioGroup.tsx
@@ -92,7 +92,7 @@ function Radio(props: RadioProps) {
         autoFocus={props.autoFocus}
         css={`
           margin: 0 ${props => props.theme.space[2]}px 0 0;
-          accent-color: ${props => props.theme.colors.accent};
+          accent-color: ${props => props.theme.colors.brand.accent};
           cursor: inherit;
         `}
         type="radio"
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 a02cbe416a146..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.darker};
+    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.jsx b/web/packages/design/src/ThemeProvider/index.jsx
index 2ecdafc3e553b..dfb589b4298ea 100644
--- a/web/packages/design/src/ThemeProvider/index.jsx
+++ b/web/packages/design/src/ThemeProvider/index.jsx
@@ -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/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 d2a72e0195193..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,27 +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: {
-    darker: '#0C143D',
-    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: {
@@ -63,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 ea2c730ab870d..844e4081256dd 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 f8eb171b81e96..a3ad6cd25d472 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/Notification/Notification.tsx b/web/packages/shared/components/Notification/Notification.tsx
index 3c8508f3ec03d..89e4d5b7430d2 100644
--- a/web/packages/shared/components/Notification/Notification.tsx
+++ b/web/packages/shared/components/Notification/Notification.tsx
@@ -232,7 +232,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;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
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 b8eb57c01c9d0..5003ad4141a2a 100644
--- a/web/packages/shared/components/Select/DarkStyledSelect.tsx
+++ b/web/packages/shared/components/Select/DarkStyledSelect.tsx
@@ -38,11 +38,11 @@ const StyledDarkSelect = styled(StyledSelect)(
     border-color: rgba(255, 255, 255, 0.24);
     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;
       }
@@ -57,7 +57,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;
@@ -86,7 +86,7 @@ const StyledDarkSelect = styled(StyledSelect)(
     border-top-right-radius: 0;
   }
   .react-select__multi-value {
-    background-color: ${theme.colors.primary.dark};
+    background-color: ${theme.colors.levels.sunkenSecondary};
     border: 1px solid ${theme.colors.text.placeholder};
   }
   .react-select__multi-value__label {
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 6e37157755401..0aaabd3c18da0 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 baed4418410c0..accda56dd71c6 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/__snapshots__/Apps.story.test.tsx.snap b/web/packages/teleport/src/Apps/__snapshots__/Apps.story.test.tsx.snap
index 59fe020c704d2..cc4358309e066 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
@@ -880,7 +880,7 @@ exports[`failed state 1`] = `
         >
           <div
             class="c20"
-            color="primary.contrastText"
+            color="text.contrast"
             style="text-transform: uppercase;"
           >
             Showing 
@@ -1901,7 +1901,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 e833262a6b279..c59ede0981615 100644
--- a/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
+++ b/web/packages/teleport/src/Audit/EventList/EventTypeCell.tsx
@@ -265,7 +265,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 ec979abd33311..9c303e8978ea3 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 
@@ -7693,7 +7693,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 b952b27903a10..50159f7c20015 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
@@ -93,6 +93,7 @@ exports[`render clusters 1`] = `
   margin: 1px 0;
   vertical-align: middle;
   background-color: #512FC9;
+  color: #FFFFFF;
 }
 
 .c7 {
@@ -357,7 +358,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 46222ef2605e4..66a7346411b8a 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
@@ -926,7 +926,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 6e8e87701c2ed..7ac4124b3462d 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
@@ -806,7 +806,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1571,7 +1571,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/DesktopSession/WarningDropdown.tsx b/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
index 2730b38c99ba2..2f60570b77037 100644
--- a/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
+++ b/web/packages/teleport/src/DesktopSession/WarningDropdown.tsx
@@ -118,7 +118,7 @@ const StyledCard = styled(Card)`
   position: absolute;
   right: 0;
   top: ${({ theme }) => theme.fontSizes[7] + 'px'};
-  background-color: ${({ theme }) => theme.colors.primary.main};
+  background-color: ${({ theme }) => theme.colors.levels.surfaceSecondary};
 `;
 
 const StyledRelative = styled.div`
diff --git a/web/packages/teleport/src/Discover/Navigation/StepItem.tsx b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
index 9a788997f3b63..bcb791bbd6c2e 100644
--- a/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
+++ b/web/packages/teleport/src/Discover/Navigation/StepItem.tsx
@@ -137,21 +137,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: '✓';
@@ -169,7 +169,7 @@ const StepsContainer = styled.div<{ active: boolean }>`
     position: absolute;
     content: '';
     width: 16px;
-    background: #222c59;
+    background: ${({ theme }) => theme.colors.brand.main};
     height: 1px;
     top: 50%;
     transform: translate(0, -50%);
diff --git a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
index 41b8c17863f55..fc58a29a7ad28 100644
--- a/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
+++ b/web/packages/teleport/src/Discover/SelectResource/SelectResource.tsx
@@ -406,7 +406,7 @@ const InputWrapper = styled.div`
   &:hover,
   &:focus,
   &:active {
-    background: ${props => props.theme.colors.primary.main};
+    background: ${props => props.theme.colors.levels.surfaceSecondary};
   }
 `;
 
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/Kubes/__snapshots__/Kubes.story.test.tsx.snap b/web/packages/teleport/src/Kubes/__snapshots__/Kubes.story.test.tsx.snap
index 85082af40cec4..dbc20c1749a88 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
@@ -806,7 +806,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1528,7 +1528,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 ebe601ada9110..2448ed39252d8 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/Navigation/Navigation.tsx b/web/packages/teleport/src/Navigation/Navigation.tsx
index 24df10e1a1da8..37f789ad4f95e 100644
--- a/web/packages/teleport/src/Navigation/Navigation.tsx
+++ b/web/packages/teleport/src/Navigation/Navigation.tsx
@@ -48,7 +48,7 @@ const NavigationLogo = styled.div`
 `;
 
 const NavigationContainer = styled.div`
-  background: ${p => p.theme.colors.primary.light};
+  background: ${p => p.theme.colors.levels.surface};
   width: var(--sidebar-width);
   overflow: hidden;
   position: relative;
diff --git a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
index 86f7059b1cb86..982631672e082 100644
--- a/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
+++ b/web/packages/teleport/src/Navigation/NavigationSwitcher.tsx
@@ -60,7 +60,7 @@ const Dropdown = styled.div<OpenProps>`
   top: 46px;
   left: 0;
   overflow: hidden;
-  background: #3e4b7e;
+  background: ${({ theme }) => theme.colors.levels.popout};
   border-radius: 4px;
   z-index: 99;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45);
@@ -86,7 +86,7 @@ const DropdownItem = styled.div<ActiveProps & OpenProps>`
   &:hover,
   &:focus {
     outline: none;
-    background: #535c8a;
+    background: ${({ theme }) => theme.colors.levels.popoutHighlighted};
   }
 `;
 
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 82435aa90aa48..fdbeb96112cfd 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
@@ -816,7 +816,7 @@ exports[`failed 1`] = `
       >
         <div
           class="c20"
-          color="primary.contrastText"
+          color="text.contrast"
           style="text-transform: uppercase;"
         >
           Showing 
@@ -1840,7 +1840,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 03ded1a5c30d4..55f37967c62b9 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 4db11a6454c46..1874f9079fa53 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/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 cc39f66310d91..0bfd713bb94f2 100644
--- a/web/packages/teleport/src/TopBar/TopBar.tsx
+++ b/web/packages/teleport/src/TopBar/TopBar.tsx
@@ -96,5 +96,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 8526d963ed6a0..40cf43859a07e 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
@@ -415,7 +415,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 040f45131c3fe..f7cc2d9dd1e31 100644
--- a/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
+++ b/web/packages/teleport/src/Welcome/NewCredentials/NewMfaDevice.tsx
@@ -138,7 +138,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 9f9ce38253001..c9186f7991dfa 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
@@ -372,7 +372,7 @@ exports[`story.MfaDeviceError 1`] = `
           <input
             autocomplete="off"
             class="c21"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -392,7 +392,7 @@ exports[`story.MfaDeviceError 1`] = `
           <input
             autocomplete="one-time-code"
             class="c21"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="numeric"
             placeholder="123 456"
             type="text"
@@ -741,7 +741,7 @@ exports[`story.MfaDeviceOn 1`] = `
           <input
             autocomplete="off"
             class="c18"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1106,7 +1106,7 @@ exports[`story.MfaDeviceOtp 1`] = `
           <input
             autocomplete="off"
             class="c20"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1126,7 +1126,7 @@ exports[`story.MfaDeviceOtp 1`] = `
           <input
             autocomplete="one-time-code"
             class="c20"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="numeric"
             placeholder="123 456"
             type="text"
@@ -1462,7 +1462,7 @@ exports[`story.MfaDeviceWebauthn 1`] = `
           <input
             autocomplete="off"
             class="c18"
-            color="text.onLight"
+            color="text.primaryInverse"
             inputmode="text"
             placeholder="Name"
             type="text"
@@ -1712,7 +1712,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               readonly=""
               type="text"
@@ -1731,7 +1731,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               placeholder="Password"
               type="password"
@@ -1750,7 +1750,7 @@ exports[`story.PasswordOnlyError 1`] = `
             <input
               autocomplete="off"
               class="c8"
-              color="text.onLight"
+              color="text.primaryInverse"
               inputmode="text"
               placeholder="Confirm Password"
               type="password"
@@ -2054,7 +2054,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 12d6fbf40f61c..cd8f1d8286ccb 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.jsx b/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.jsx
index c241aa0b88033..cd4ee4e4a98c6 100644
--- a/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.jsx
+++ b/web/packages/teleport/src/components/ServersideSearchPanel/Tooltip/Tooltip.jsx
@@ -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/teleport/src/components/UserMenuNav/UserMenuNav.tsx b/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
index cf77a09515b9e..851fe5e7ef496 100644
--- a/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
+++ b/web/packages/teleport/src/components/UserMenuNav/UserMenuNav.tsx
@@ -95,7 +95,7 @@ const Dropdown = styled.div<OpenProps>`
   display: flex;
   flex-direction: column;
   padding: 10px 15px;
-  background: #222c59;
+  background: ${({ theme }) => theme.colors.levels.surface};
   box-shadow: 0 2px 4px rgba(12, 12, 14, 0.9);
   border-radius: 5px;
   width: 265px;
diff --git a/web/packages/teleterm/src/mainProcess/windowsManager.ts b/web/packages/teleterm/src/mainProcess/windowsManager.ts
index 02b2df3e81a4c..934a0530c001f 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,
       show: false,
diff --git a/web/packages/teleterm/src/ui/AppInitializer.tsx b/web/packages/teleterm/src/ui/AppInitializer.tsx
index 9ac126bbfeb92..84339c25a11f7 100644
--- a/web/packages/teleterm/src/ui/AppInitializer.tsx
+++ b/web/packages/teleterm/src/ui/AppInitializer.tsx
@@ -63,5 +63,5 @@ const Centered = styled.div`
   justify-content: center;
   align-items: center;
   z-index: 2; // renders the overlay above ConnectionsIconStatusIndicator
-  background: ${props => props.theme.colors.primary.darker};
+  background: ${props => props.theme.colors.levels.sunken};
 `;
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 d6350fb927a6e..38eb2c415834f 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/Terminal.tsx
@@ -94,5 +94,5 @@ export function Terminal(props: TerminalProps) {
 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 b4b8a13c9931d..1564514d1a770 100644
--- a/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
+++ b/web/packages/teleterm/src/ui/DocumentTerminal/Terminal/ctrl.ts
@@ -61,7 +61,7 @@ export default class TtyTerminal {
       fontSize: this.options.fontSize,
       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 89643c732c28f..79d79b9d80b37 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; accelerator: 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.accelerator}
       </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 7be2ca80023ec..3133c9fc8f29a 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 4342cd61bfa11..2122b7302f137 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 e39d0b07fede1..7c6c3a0ee5f32 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/Clusters.tsx
@@ -101,5 +101,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..7a11ea99889dc 100644
--- a/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Clusters/ClustersFilterableList/ClusterItem.tsx
@@ -80,16 +80,16 @@ 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;
+    return props.theme.colors.brand.main;
   }
   if (props.isActive) {
     return props.theme.colors.secondary.lighter;
@@ -98,7 +98,7 @@ function getBackgroundColor(props) {
 
 function getHoverBackgroundColor(props) {
   if (props.isSelected) {
-    return props.theme.colors.secondary.light;
+    return props.theme.colors.brand.accent;
   }
   if (props.isActive) {
     return props.theme.colors.secondary.lighter;
diff --git a/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx b/web/packages/teleterm/src/ui/TopBar/Connections/Connections.tsx
index 73fd1007a0a11..8565d4f9e1a1d 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 cdae59d4a4ee0..fdf0a87149632 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 831a87ea699c7..5c6a8eb76061a 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/NavigationMenu.tsx b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
index 1c641e691253c..f6cb70419f47f 100644
--- a/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/NavigationMenu/NavigationMenu.tsx
@@ -145,10 +145,10 @@ const Menu = styled.menu`
   display: flex;
   flex-direction: column;
   min-width: 280px;
-  background: ${props => props.theme.colors.primary.light};
+  background: ${props => props.theme.colors.levels.surface};
 `;
 
 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/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/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,
     },