diff --git a/config.js b/config.js
index 9ac56da9bb..9afd4b661e 100644
--- a/config.js
+++ b/config.js
@@ -1277,7 +1277,6 @@ var config = {
                 ui03: "violet",
                 ui04: "magenta",
                 ui05: "blueviolet",
-                field02Hover: 'red',
                 action01: 'green',
                 action01Hover: 'lightgreen',
                 disabled01: 'beige',
diff --git a/react/features/base/dialog/components/native/styles.js b/react/features/base/dialog/components/native/styles.js
index 44906b5fdc..ab67e95249 100644
--- a/react/features/base/dialog/components/native/styles.js
+++ b/react/features/base/dialog/components/native/styles.js
@@ -113,7 +113,7 @@ export const bottomSheetStyles = {
         /**
          * Additional style that is not directly used as a style object.
          */
-        underlayColor: BaseTheme.palette.underlay01
+        underlayColor: BaseTheme.palette.ui04
     },
 
     /**
@@ -136,17 +136,17 @@ export const bottomSheetStyles = {
      * Bottom sheet's background color with footer.
      */
     sheetFooter: {
-        backgroundColor: BaseTheme.palette.bottomSheet
+        backgroundColor: BaseTheme.palette.ui01
     }
 };
 
 export default {
     dialogButton: {
-        ...BaseTheme.typography.labelButton
+        ...BaseTheme.typography.bodyLongBold
     },
 
     destructiveDialogButton: {
-        ...BaseTheme.typography.labelButton,
+        ...BaseTheme.typography.bodyLongBold,
         color: BaseTheme.palette.actionDanger
     }
 };
@@ -258,7 +258,7 @@ ColorSchemeRegistry.register('Dialog', {
     },
 
     topBorderContainer: {
-        borderTopColor: BaseTheme.palette.dividerColor,
+        borderTopColor: BaseTheme.palette.ui07,
         borderTopWidth: 1
     }
 });
diff --git a/react/features/base/ui/Tokens.ts b/react/features/base/ui/Tokens.ts
index 4b62e43ef8..a7b366cc59 100644
--- a/react/features/base/ui/Tokens.ts
+++ b/react/features/base/ui/Tokens.ts
@@ -42,21 +42,7 @@ export const colors = {
     support06: '#6A50D3',
     support07: '#4380E2',
     support08: '#00A8B3',
-    support09: '#2AA076',
-
-    // The following tokens are not in the Design System and they should be removed
-    // after we replace them in the components.
-    primary10: '#17A0DB',
-    primary11: '#1081B2',
-    surface00: '#111111',
-    surface12: '#AAAAAA',
-    surface13: '#495258',
-    surface14: '#555555',
-    surface15: '#474747',
-    surface16: '#131519',
-    surface17: '#161618',
-    warning07: '#FFD740',
-    disabled01: '#00000040'
+    support09: '#2AA076'
 };
 
 // Mapping between the token used and the color
@@ -170,48 +156,7 @@ export const colorMap = {
     support06: 'support06',
     support07: 'support07',
     support08: 'support08',
-    support09: 'support09',
-
-    // The following mappings are not in the Design System and they should be removed
-    // after we replace them in the components.
-    ui00: 'surface00',
-    ui12: 'surface11',
-    ui13: 'surface14',
-    ui14: 'surface15',
-    ui15: 'surface12',
-    ui16: 'surface16',
-    action04: 'primary11',
-    action03Focus: 'surface07',
-    action03Disabled: 'transparent',
-    actionDisabled: 'surface09',
-    icon05: 'surface04',
-    text05: 'surface06',
-    text06: 'surface03',
-    text07Info: 'surface02',
-    screen01Header: 'primary10',
-    screen02Header: 'surface17',
-    underlay01: 'surface13',
-    bottomSheet: 'surface00',
-    dividerColor: 'surface12',
-    indicatorColor: 'surface12',
-    section01: 'surface10',
-    border01: 'surface08',
-    border02: 'surface06',
-    border03: 'surface04',
-    border05: 'surface07',
-    borderError: 'error06',
-    warning03: 'warning07',
-    tab01Disabled: 'disabled01',
-    switch01Enabled: 'success04',
-    switch01Disabled: 'surface06',
-    video01Disabled: 'disabled01',
-    field01Hover: 'surface03',
-    field01Focus: 'primary05',
-    field01Disabled: 'surface05',
-    field02: 'surface11',
-    field02Hover: 'primary09',
-    field02Focus: 'primary05',
-    field02Disabled: 'surface06'
+    support09: 'support09'
 };
 
 
@@ -339,30 +284,6 @@ export const typography = {
         lineHeight: 26,
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
-    },
-
-
-    // These styles are no longer part of the Design System.
-    // They should be replaced and removed.
-    heading7: {
-        fontSize: 14,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
-    },
-
-    labelButton: {
-        fontSize: 14,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
-    },
-
-    labelButtonLarge: {
-        fontSize: 16,
-        lineHeight: 24,
-        fontWeight: font.weightSemiBold,
-        letterSpacing: 0
     }
 };
 
diff --git a/react/features/base/ui/components/native/Switch.tsx b/react/features/base/ui/components/native/Switch.tsx
index 636d78bf9e..ca217eb116 100644
--- a/react/features/base/ui/components/native/Switch.tsx
+++ b/react/features/base/ui/components/native/Switch.tsx
@@ -41,6 +41,7 @@ const Switch = ({
 }: IProps) => (
     <NativeSwitch
         disabled = { disabled }
+        ios_backgroundColor = { DISABLED_TRACK_COLOR }
         onValueChange = { onChange }
         style = { style }
         thumbColor = { thumbColor }
diff --git a/react/features/base/ui/components/native/buttonStyles.ts b/react/features/base/ui/components/native/buttonStyles.ts
index ec9fa9d05e..4a5720f894 100644
--- a/react/features/base/ui/components/native/buttonStyles.ts
+++ b/react/features/base/ui/components/native/buttonStyles.ts
@@ -35,7 +35,7 @@ export default {
 
     buttonDisabled: {
         ...button,
-        backgroundColor: BaseTheme.palette.actionDisabled
+        backgroundColor: BaseTheme.palette.ui08
     },
 
     buttonLabelPrimary: {
diff --git a/react/features/base/ui/components/native/switchStyles.ts b/react/features/base/ui/components/native/switchStyles.ts
index ddf85b8c6f..6cded525c4 100644
--- a/react/features/base/ui/components/native/switchStyles.ts
+++ b/react/features/base/ui/components/native/switchStyles.ts
@@ -1,5 +1,5 @@
 import BaseTheme from '../BaseTheme.native';
 
 export const ENABLED_TRACK_COLOR = BaseTheme.palette.action01;
-export const DISABLED_TRACK_COLOR = BaseTheme.palette.switch01Disabled;
+export const DISABLED_TRACK_COLOR = BaseTheme.palette.ui05;
 export const THUMB_COLOR = BaseTheme.palette.icon01;
diff --git a/react/features/conference/components/native/carmode/AudioIcon.tsx b/react/features/conference/components/native/carmode/AudioIcon.tsx
index 2e146f6df2..80bfd747f3 100644
--- a/react/features/conference/components/native/carmode/AudioIcon.tsx
+++ b/react/features/conference/components/native/carmode/AudioIcon.tsx
@@ -11,7 +11,7 @@ import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
  *
  */
 const AudioIcon = (): JSX.Element => (<Icon
-    color = { BaseTheme.palette.text06 }
+    color = { BaseTheme.palette.ui02 }
     size = { 20 }
     src = { IconVolumeUp } />);
 
diff --git a/react/features/display-name/components/native/styles.js b/react/features/display-name/components/native/styles.js
index 5533990130..c467854565 100644
--- a/react/features/display-name/components/native/styles.js
+++ b/react/features/display-name/components/native/styles.js
@@ -5,7 +5,7 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 export default {
     displayNameBackdrop: {
         alignSelf: 'center',
-        backgroundColor: BaseTheme.palette.ui16,
+        backgroundColor: BaseTheme.palette.ui01,
         borderRadius: BaseTheme.shape.borderRadius,
         paddingHorizontal: BaseTheme.spacing[3],
         paddingVertical: BaseTheme.spacing[1]
diff --git a/react/features/etherpad/components/native/styles.js b/react/features/etherpad/components/native/styles.js
index a93e09c5e7..ef6f230760 100644
--- a/react/features/etherpad/components/native/styles.js
+++ b/react/features/etherpad/components/native/styles.js
@@ -3,18 +3,18 @@
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 
-export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
+export const INDICATOR_COLOR = BaseTheme.palette.ui07;
 
 export default {
     indicatorWrapper: {
         alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
         height: '100%',
         justifyContent: 'center'
     },
 
     sharedDocContainer: {
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
         flex: 1,
         paddingRight: BaseTheme.spacing[3]
     },
@@ -24,6 +24,6 @@ export default {
     },
 
     webView: {
-        backgroundColor: BaseTheme.palette.ui12
+        backgroundColor: BaseTheme.palette.ui10
     }
 };
diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js
index 849b1252e4..31323d8b19 100644
--- a/react/features/filmstrip/components/native/styles.js
+++ b/react/features/filmstrip/components/native/styles.js
@@ -105,7 +105,7 @@ export default {
     thumbnail: {
         alignItems: 'stretch',
         backgroundColor: BaseTheme.palette.ui02,
-        borderColor: BaseTheme.palette.border03,
+        borderColor: BaseTheme.palette.ui03,
         borderRadius: BaseTheme.shape.borderRadius,
         borderStyle: 'solid',
         borderWidth: 1,
diff --git a/react/features/invite/components/add-people-dialog/native/styles.js b/react/features/invite/components/add-people-dialog/native/styles.js
index d02df370b7..cf36fb11f5 100644
--- a/react/features/invite/components/add-people-dialog/native/styles.js
+++ b/react/features/invite/components/add-people-dialog/native/styles.js
@@ -29,7 +29,7 @@ export default {
     bottomBar: {
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: BaseTheme.palette.screen02Header,
+        backgroundColor: BaseTheme.palette.ui01,
         height: BaseTheme.spacing[10]
     },
 
@@ -93,7 +93,7 @@ export default {
     },
 
     separator: {
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        borderBottomColor: BaseTheme.palette.ui07,
         borderBottomWidth: 1,
         marginLeft: 85
     },
diff --git a/react/features/invite/components/dial-in-summary/native/styles.js b/react/features/invite/components/dial-in-summary/native/styles.js
index 9e30f66cd8..240d215ade 100644
--- a/react/features/invite/components/dial-in-summary/native/styles.js
+++ b/react/features/invite/components/dial-in-summary/native/styles.js
@@ -2,9 +2,9 @@
 
 import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 
-export const INDICATOR_COLOR = BaseTheme.palette.indicatorColor;
+export const INDICATOR_COLOR = BaseTheme.palette.ui07;
 
-const WV_BACKGROUND = BaseTheme.palette.ui14;
+const WV_BACKGROUND = BaseTheme.palette.ui03;
 
 export default {
 
@@ -15,7 +15,7 @@ export default {
 
     indicatorWrapper: {
         alignItems: 'center',
-        backgroundColor: BaseTheme.palette.ui12,
+        backgroundColor: BaseTheme.palette.ui10,
         height: '100%',
         justifyContent: 'center'
     },
diff --git a/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js b/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js
index f65d871725..2057061b6e 100644
--- a/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js
+++ b/react/features/mobile/audio-mode/components/AudioRoutePickerDialog.js
@@ -251,7 +251,7 @@ class AudioRoutePickerDialog extends Component<Props, State> {
                 key = { device.type }
                 onPress = { this._onSelectDeviceFn(device) }
                 style = { speakerDeviceIsNotSelected && borderRadiusHighlightStyles }
-                underlayColor = { BaseTheme.palette.underlay01 } >
+                underlayColor = { BaseTheme.palette.ui04 } >
                 <View style = { styles.deviceRow } >
                     <Icon
                         src = { icon }
diff --git a/react/features/mobile/navigation/screenOptions.js b/react/features/mobile/navigation/screenOptions.js
index 12f9036a3b..9ec626360c 100644
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@@ -43,7 +43,7 @@ export const welcomeScreenOptions = {
     gestureEnabled: false,
     headerShown: true,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
@@ -65,7 +65,7 @@ export const chatTabBarOptions = {
     },
     tabBarStyle: {
         backgroundColor: BaseTheme.palette.ui01,
-        borderBottomColor: BaseTheme.palette.border05,
+        borderBottomColor: BaseTheme.palette.ui06,
         borderBottomWidth: 0.4
     }
 };
@@ -79,7 +79,7 @@ export const presentationScreenOptions = {
     headerLeft: () => screenHeaderCloseButton(goBack),
     headerStatusBarHeight: 0,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
@@ -184,7 +184,7 @@ export const connectingScreenOptions = {
 export const preJoinScreenOptions = {
     gestureEnabled: false,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen02Header
+        backgroundColor: BaseTheme.palette.ui01
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
diff --git a/react/features/notifications/components/native/styles.js b/react/features/notifications/components/native/styles.js
index 015ab6f9f3..91b4f04d8c 100644
--- a/react/features/notifications/components/native/styles.js
+++ b/react/features/notifications/components/native/styles.js
@@ -10,7 +10,7 @@ const contentColumn = {
 
 const notification = {
     display: 'flex',
-    backgroundColor: BaseTheme.palette.ui12,
+    backgroundColor: BaseTheme.palette.ui10,
     borderRadius: BaseTheme.shape.borderRadius,
     borderLeftColor: BaseTheme.palette.link01Active,
     borderLeftWidth: 4,
diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
index cdce555be3..72089b1b1b 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
+++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
@@ -88,8 +88,8 @@ const useStyles = makeStyles()(theme => {
         roomName: {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap', // @ts-ignore
-            ...withPixelLineHeight(theme.typography.labelButton),
+            whiteSpace: 'nowrap',
+            ...withPixelLineHeight(theme.typography.bodyLongBold),
             padding: '12px 0'
         },
 
diff --git a/react/features/participants-pane/components/native/styles.js b/react/features/participants-pane/components/native/styles.js
index 54f3bf6e93..3dd6cb5979 100644
--- a/react/features/participants-pane/components/native/styles.js
+++ b/react/features/participants-pane/components/native/styles.js
@@ -85,7 +85,7 @@ export default {
 
     participantContent: {
         alignItems: 'center',
-        borderBottomColor: BaseTheme.palette.field01Hover,
+        borderBottomColor: BaseTheme.palette.ui02,
         borderBottomWidth: 2.4,
         display: 'flex',
         flexDirection: 'row',
@@ -247,8 +247,8 @@ export default {
 
     contextMenuItemSectionAvatar: {
         alignItems: 'center',
-        backgroundColor: BaseTheme.palette.bottomSheet,
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        backgroundColor: BaseTheme.palette.ui01,
+        borderBottomColor: BaseTheme.palette.ui07,
         borderBottomWidth: 1,
         borderTopLeftRadius: BaseTheme.spacing[3],
         borderTopRightRadius: BaseTheme.spacing[3],
@@ -276,7 +276,7 @@ export default {
     },
 
     divider: {
-        backgroundColor: BaseTheme.palette.dividerColor
+        backgroundColor: BaseTheme.palette.ui07
     },
 
     inputContainer: {
diff --git a/react/features/participants-pane/components/web/LobbyParticipants.tsx b/react/features/participants-pane/components/web/LobbyParticipants.tsx
index 67622ade49..10169ce5b0 100644
--- a/react/features/participants-pane/components/web/LobbyParticipants.tsx
+++ b/react/features/participants-pane/components/web/LobbyParticipants.tsx
@@ -49,8 +49,7 @@ const useStyles = makeStyles()(theme => {
             justifyContent: 'space-between'
         },
         heading: {
-            // @ts-ignore
-            ...withPixelLineHeight(theme.typography.heading7),
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
             color: theme.palette.text02
         },
         link: {
diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx
index 7722c159d4..69495f799b 100644
--- a/react/features/participants-pane/components/web/MeetingParticipants.tsx
+++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx
@@ -34,14 +34,11 @@ const useStyles = makeStyles()(theme => {
         },
         heading: {
             color: theme.palette.text02,
-
-            // @ts-ignore
-            ...withPixelLineHeight(theme.typography.labelButton),
+            ...withPixelLineHeight(theme.typography.bodyShortBold),
             margin: `8px 0 ${participantsPaneTheme.panePadding}px`,
 
             [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                // @ts-ignore
-                ...withPixelLineHeight(theme.typography.labelButtonLarge)
+                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
             }
         },
 
diff --git a/react/features/polls/components/native/styles.js b/react/features/polls/components/native/styles.js
index 85af71c674..c7c4002215 100644
--- a/react/features/polls/components/native/styles.js
+++ b/react/features/polls/components/native/styles.js
@@ -40,7 +40,7 @@ export const dialogStyles = createStyleSheet({
 
     field: {
         borderWidth: 1,
-        borderColor: BaseTheme.palette.border05,
+        borderColor: BaseTheme.palette.ui06,
         borderRadius: BaseTheme.shape.borderRadius,
         color: BaseTheme.palette.text01,
         fontSize: 14,
@@ -131,7 +131,7 @@ export const chatStyles = createStyleSheet({
 
     pollItemContainer: {
         backgroundColor: BaseTheme.palette.uiBackground,
-        borderColor: BaseTheme.palette.border05,
+        borderColor: BaseTheme.palette.ui06,
         borderRadius: BaseTheme.shape.borderRadius,
         boxShadow: BaseTheme.shape.boxShadow,
         borderWidth: 1,
diff --git a/react/features/recording/components/LiveStream/native/styles.js b/react/features/recording/components/LiveStream/native/styles.js
index f61aded6f8..d918461788 100644
--- a/react/features/recording/components/LiveStream/native/styles.js
+++ b/react/features/recording/components/LiveStream/native/styles.js
@@ -11,7 +11,7 @@ export const ACTIVE_OPACITY = 0.3;
 /**
  * Underlay of the TouchableHighlight.
  */
-export const TOUCHABLE_UNDERLAY = BaseTheme.palette.action03Focus;
+export const TOUCHABLE_UNDERLAY = BaseTheme.palette.ui06;
 
 /**
  * The styles of the React {@code Components} of LiveStream.
@@ -116,14 +116,14 @@ export default createStyleSheet({
      * Additional style for the selected item.
      */
     streamKeyPickerItemHighlight: {
-        backgroundColor: BaseTheme.palette.ui13
+        backgroundColor: BaseTheme.palette.ui04
     },
 
     /**
      * Overall wrapper for the picker.
      */
     streamKeyPickerWrapper: {
-        borderColor: BaseTheme.palette.dividerColor,
+        borderColor: BaseTheme.palette.ui07,
         borderRadius: 3,
         borderWidth: 1,
         flexDirection: 'column'
diff --git a/react/features/recording/components/Recording/styles.native.js b/react/features/recording/components/Recording/styles.native.js
index 2a78d2fd43..00491a657e 100644
--- a/react/features/recording/components/Recording/styles.native.js
+++ b/react/features/recording/components/Recording/styles.native.js
@@ -9,7 +9,7 @@ export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
 export const ICON_INFO = require('../../../../../images/icon-info.png');
 export const ICON_USERS = require('../../../../../images/icon-users.png');
 export const LOCAL_RECORDING = require('../../../../../images/downloadLocalRecording.png');
-export const TRACK_COLOR = BaseTheme.palette.ui15;
+export const TRACK_COLOR = BaseTheme.palette.ui07;
 
 
 // XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
@@ -60,7 +60,7 @@ export default {
         marginRight: 12
     },
     highlightButton: {
-        backgroundColor: BaseTheme.palette.section01,
+        backgroundColor: BaseTheme.palette.ui09,
         flexDirection: 'row',
         alignItems: 'center',
         marginLeft: BaseTheme.spacing[0],
@@ -125,7 +125,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
 
     headerInfo: {
         ...header,
-        backgroundColor: BaseTheme.palette.warning03,
+        backgroundColor: BaseTheme.palette.warning02,
         marginBottom: BaseTheme.spacing[4],
         paddingHorizontal: BaseTheme.spacing[3]
     },
@@ -147,7 +147,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
     },
 
     switch: {
-        color: BaseTheme.palette.ui12
+        color: BaseTheme.palette.ui10
     },
 
     title: {
@@ -156,7 +156,7 @@ ColorSchemeRegistry.register('StartRecordingDialogContent', {
 
     titleInfo: {
         ...title,
-        color: BaseTheme.palette.text07Info
+        color: BaseTheme.palette.ui01
     },
 
     text: {
diff --git a/react/features/recording/components/Recording/web/HighlightButton.tsx b/react/features/recording/components/Recording/web/HighlightButton.tsx
index 5ee00291d2..8138f7617b 100644
--- a/react/features/recording/components/Recording/web/HighlightButton.tsx
+++ b/react/features/recording/components/Recording/web/HighlightButton.tsx
@@ -62,11 +62,11 @@ const styles = (theme: Theme) => {
         disabled: {
             background: theme.palette.text02
         },
-        regular: { // @ts-ignore
-            background: theme.palette.field02
+        regular: {
+            background: theme.palette.ui10
         },
-        highlightNotification: { // @ts-ignore
-            backgroundColor: theme.palette.field02,
+        highlightNotification: {
+            backgroundColor: theme.palette.ui10,
             borderRadius: '6px',
             boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
             boxSizing: 'border-box' as const,
@@ -79,8 +79,8 @@ const styles = (theme: Theme) => {
             top: '32px',
             width: 320
         },
-        highlightNotificationButton: { // @ts-ignore
-            color: theme.palette.field01Focus,
+        highlightNotificationButton: {
+            color: theme.palette.action01,
             cursor: 'pointer',
             fontWeight: '600',
             marginTop: '8px'
diff --git a/react/features/salesforce/components/native/styles.js b/react/features/salesforce/components/native/styles.js
index ab05c96ef7..bb3908db88 100644
--- a/react/features/salesforce/components/native/styles.js
+++ b/react/features/salesforce/components/native/styles.js
@@ -83,7 +83,7 @@ export default {
         padding: BaseTheme.spacing[3]
     },
     addNote: {
-        color: BaseTheme.palette.field02,
+        color: BaseTheme.palette.text01,
         margin: BaseTheme.spacing[3]
     },
     notes: {
@@ -92,7 +92,7 @@ export default {
         borderColor: BaseTheme.palette.ui05,
         borderRadius: BaseTheme.shape.borderRadius,
         borderWidth: 1,
-        color: BaseTheme.palette.field02,
+        color: BaseTheme.palette.text01,
         lineHeight: 18,
         marginHorizontal: BaseTheme.spacing[3],
         marginVertical: BaseTheme.spacing[2],
diff --git a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx
index d748f12095..caba922e9e 100644
--- a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx
+++ b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx
@@ -116,9 +116,7 @@ const useStyles = makeStyles()(theme => {
             border: '1px solid',
             borderColor: theme.palette.ui05,
             backgroundColor: theme.palette.field01,
-
-            // @ts-ignore
-            color: theme.palette.field02,
+            color: theme.palette.text01,
             borderRadius: theme.shape.borderRadius,
             padding: '10px 16px'
         }
diff --git a/react/features/security/components/security-dialog/native/styles.js b/react/features/security/components/security-dialog/native/styles.js
index 41d374e911..7bae0abc3d 100644
--- a/react/features/security/components/security-dialog/native/styles.js
+++ b/react/features/security/components/security-dialog/native/styles.js
@@ -17,7 +17,7 @@ export default {
     },
 
     lobbyModeContainer: {
-        borderBottomColor: BaseTheme.palette.border01,
+        borderBottomColor: BaseTheme.palette.ui07,
         borderBottomWidth: 1,
         marginTop: BaseTheme.spacing[4]
     },
diff --git a/react/features/toolbox/components/native/styles.js b/react/features/toolbox/components/native/styles.js
index 1ac02382eb..deeb7dbd36 100644
--- a/react/features/toolbox/components/native/styles.js
+++ b/react/features/toolbox/components/native/styles.js
@@ -66,7 +66,7 @@ const reactionMenu = {
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: BaseTheme.palette.bottomSheet,
+    backgroundColor: BaseTheme.palette.ui01,
     padding: BaseTheme.spacing[3]
 };
 
@@ -129,7 +129,7 @@ ColorSchemeRegistry.register('Toolbox', {
     },
 
     backgroundToggle: {
-        backgroundColor: BaseTheme.palette.ui13
+        backgroundColor: BaseTheme.palette.ui04
     },
 
     hangupMenuContainer: {
@@ -149,7 +149,7 @@ ColorSchemeRegistry.register('Toolbox', {
             ...toolbarButton,
             backgroundColor: schemeColor('hangup')
         },
-        underlayColor: BaseTheme.palette.underlay01
+        underlayColor: BaseTheme.palette.ui04
     },
 
     reactionDialog: {
@@ -177,7 +177,7 @@ ColorSchemeRegistry.register('Toolbox', {
     reactionButton: {
         gifButton,
         style: reactionButton,
-        underlayColor: BaseTheme.palette.ui13,
+        underlayColor: BaseTheme.palette.ui04,
         emoji: reactionEmoji
     },
 
diff --git a/react/features/video-menu/components/native/VolumeSlider.js b/react/features/video-menu/components/native/VolumeSlider.js
index 8c11877171..04662aac7a 100644
--- a/react/features/video-menu/components/native/VolumeSlider.js
+++ b/react/features/video-menu/components/native/VolumeSlider.js
@@ -104,13 +104,13 @@ class VolumeSlider extends PureComponent<Props, State> {
                     size = { 24 }
                     src = { IconVolumeUp } />
                 <Slider
-                    maximumTrackTintColor = { palette.field02 }
+                    maximumTrackTintColor = { palette.ui10 }
                     maximumValue = { VOLUME_SLIDER_SCALE }
                     minimumTrackTintColor = { palette.action01 }
                     minimumValue = { 0 }
                     onValueChange = { onVolumeChange }
                     style = { styles.sliderContainer }
-                    thumbTintColor = { palette.field02 }
+                    thumbTintColor = { palette.ui10 }
                     value = { volumeLevel } />
             </View>
 
diff --git a/react/features/video-menu/components/native/styles.js b/react/features/video-menu/components/native/styles.js
index 3cd77e68fe..2875921ae0 100644
--- a/react/features/video-menu/components/native/styles.js
+++ b/react/features/video-menu/components/native/styles.js
@@ -11,7 +11,7 @@ import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 export default createStyleSheet({
     participantNameContainer: {
         alignItems: 'center',
-        borderBottomColor: BaseTheme.palette.dividerColor,
+        borderBottomColor: BaseTheme.palette.ui07,
         borderBottomWidth: 0.4,
         borderTopLeftRadius: 16,
         borderTopRightRadius: 16,
@@ -66,11 +66,11 @@ export default createStyleSheet({
     },
 
     divider: {
-        backgroundColor: BaseTheme.palette.dividerColor
+        backgroundColor: BaseTheme.palette.ui07
     },
 
     dividerDialog: {
-        backgroundColor: BaseTheme.palette.dividerColor,
+        backgroundColor: BaseTheme.palette.ui07,
         marginBottom: BaseTheme.spacing[3]
     },
 
diff --git a/react/features/video-quality/components/Slider.web.tsx b/react/features/video-quality/components/Slider.web.tsx
index a4b23f1682..5a91cfe912 100644
--- a/react/features/video-quality/components/Slider.web.tsx
+++ b/react/features/video-quality/components/Slider.web.tsx
@@ -51,8 +51,8 @@ const useStyles = makeStyles()(theme => {
         width: 24
     };
 
-    const focused = { // @ts-ignore
-        outline: `1px solid ${theme.palette.action03Focus}`
+    const focused = {
+        outline: `1px solid ${theme.palette.ui06}`
     };
 
     return {
diff --git a/react/features/welcome/components/styles.js b/react/features/welcome/components/styles.js
index 83289f0275..c897119bb8 100644
--- a/react/features/welcome/components/styles.js
+++ b/react/features/welcome/components/styles.js
@@ -135,7 +135,7 @@ export default {
      */
     reducedUIContainer: {
         alignItems: 'center',
-        backgroundColor: BaseTheme.palette.screen01Header,
+        backgroundColor: BaseTheme.palette.link01,
         flex: 1,
         justifyContent: 'center'
     },
@@ -166,7 +166,7 @@ export default {
      */
     textInput: {
         backgroundColor: 'transparent',
-        borderColor: BaseTheme.palette.field02,
+        borderColor: BaseTheme.palette.ui10,
         borderRadius: 4,
         borderWidth: 1,
         color: TEXT_COLOR,
@@ -193,13 +193,13 @@ export default {
     },
 
     insecureRoomNameWarningIcon: {
-        color: BaseTheme.palette.warning03,
+        color: BaseTheme.palette.warning02,
         fontSize: 24,
         marginRight: 10
     },
 
     insecureRoomNameWarningText: {
-        color: BaseTheme.palette.warning03,
+        color: BaseTheme.palette.warning02,
         flex: 1
     },
 
diff --git a/react/features/welcome/constants.tsx b/react/features/welcome/constants.tsx
index 84613dfe82..46f60622e3 100644
--- a/react/features/welcome/constants.tsx
+++ b/react/features/welcome/constants.tsx
@@ -16,8 +16,8 @@ export const tabBarOptions = {
     tabBarLabelStyle: {
         fontSize: 12
     },
-    tabBarStyle: { // @ts-ignore
-        backgroundColor: BaseTheme.palette.screen02Header
+    tabBarStyle: {
+        backgroundColor: BaseTheme.palette.ui01
     }
 };
 
diff --git a/resources/custom-theme/custom-theme.json b/resources/custom-theme/custom-theme.json
index a96bcf3793..a5e22c9a2d 100644
--- a/resources/custom-theme/custom-theme.json
+++ b/resources/custom-theme/custom-theme.json
@@ -16,7 +16,6 @@
       "ui04": "#525252",
       "ui05": "#666",
       "action01": "#0056E0",
-      "screen01Header": "#17A0DB",
       "action01Hover": "#246FE5",
       "action01Active": "#0045B3",
       "disabled01": "#00225A",
@@ -26,8 +25,6 @@
       "action03": "transparent",
       "action03Hover": "#525252",
       "action03Active": "#292929",
-      "action03Focus": "#858585",
-      "action03Disabled": "transparent",
       "actionDanger": "#CB2233",
       "actionDangerHover": "#E04757",
       "actionDangerActive": "#A21B29",
@@ -42,17 +39,6 @@
       "icon03": "#858585",
       "iconError": "#E04757",
       "field01": "#040404",
-      "field01Hover": "#292929",
-      "field01Focus": "#0056E0",
-      "field01Disabled": "#525252",
-      "field02": "#FFF",
-      "dividerColor": "#AAAAAA",
-      "field02Hover": "#CCDDF9",
-      "field02Focus": "#0056E0",
-      "field02Disabled": "#666",
-      "section01": "#E0E0E0",
-      "border01": "#A3A3A3",
-      "borderError": "#E04757",
       "link01": "#669AEC",
       "link01Hover": "#99BBF3",
       "link01Active": "#246FE5",
@@ -87,18 +73,6 @@
          "fontWeight": "600",
          "letterSpacing": 0.16
       },
-      "labelButton": {
-         "fontSize": 14,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
-      },
-      "labelButtonLarge": {
-         "fontSize": 16,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
-      },
       "bodyShortRegular": {
          "fontSize": 14,
          "lineHeight": 18,
@@ -170,12 +144,6 @@
          "lineHeight": 26,
          "fontWeight": "600",
          "letterSpacing": 0
-      },
-      "heading7": {
-         "fontSize": 14,
-         "lineHeight": 24,
-         "fontWeight": "600",
-         "letterSpacing": 0
       }
    },
    "shape": {