diff --git a/app/client/components/DetailView.css b/app/client/components/DetailView.css
index 45d9cdbe90..41d6a4216c 100644
--- a/app/client/components/DetailView.css
+++ b/app/client/components/DetailView.css
@@ -9,7 +9,7 @@
   left: 0;
   width: 100%;
 
-  background: var(--grist-theme-page-panels-main-panel-bg, white);
+  background: var(--grist-main-panel-bg, white);
   z-index: 1;
   margin-top: -6px;
 }
diff --git a/app/client/components/Forms/Paragraph.ts b/app/client/components/Forms/Paragraph.ts
index 44ac132127..06fe576815 100644
--- a/app/client/components/Forms/Paragraph.ts
+++ b/app/client/components/Forms/Paragraph.ts
@@ -3,7 +3,7 @@ import {buildEditor} from 'app/client/components/Forms/Editor';
 import {BoxModel} from 'app/client/components/Forms/Model';
 import * as css from 'app/client/components/Forms/styles';
 import {textarea} from 'app/client/ui/inputs';
-import {theme} from 'app/client/ui2018/cssVars';
+import {designTokens, theme} from 'app/client/ui2018/cssVars';
 import {not} from 'app/common/gutil';
 import {Computed, dom, Observable, styled} from 'grainjs';
 import {v4 as uuidv4} from 'uuid';
@@ -70,7 +70,7 @@ export function Paragraph(text: string, alignment?: 'left'|'right'|'center'): Fo
 
 const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 0px;
   width: 100%;
   padding: 3px 6px;
diff --git a/app/client/components/Forms/styles.ts b/app/client/components/Forms/styles.ts
index 2bc6d76cda..4b9ffe2756 100644
--- a/app/client/components/Forms/styles.ts
+++ b/app/client/components/Forms/styles.ts
@@ -3,7 +3,7 @@ import {textarea} from 'app/client/ui/inputs';
 import {sanitizeHTML} from 'app/client/ui/sanitizeHTML';
 import {basicButton, basicButtonLink, primaryButtonLink, textButton} from 'app/client/ui2018/buttons';
 import {cssLabel} from 'app/client/ui2018/checkbox';
-import {colors, theme} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {numericSpinner} from 'app/client/widgets/NumericSpinner';
 import {BindableValue, dom, DomElementArg, IDomArgs, Observable, styled, subscribeBindable} from 'grainjs';
@@ -23,7 +23,7 @@ export const cssFormView = styled('div.flexauto.flexvbox', `
 `);
 
 export const cssFormContainer = styled('div', `
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   color: ${theme.text};
   width: 600px;
   align-self: center;
diff --git a/app/client/components/RawDataPage.ts b/app/client/components/RawDataPage.ts
index ec6e6c0055..a89d530ff4 100644
--- a/app/client/components/RawDataPage.ts
+++ b/app/client/components/RawDataPage.ts
@@ -5,7 +5,7 @@ import {GristDoc} from 'app/client/components/GristDoc';
 import {printViewSection} from 'app/client/components/Printing';
 import {ViewSectionHelper} from 'app/client/components/ViewLayout';
 import {logTelemetryEvent} from 'app/client/lib/telemetry';
-import {mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {Computed, Disposable, dom, fromKo, makeTestId, Observable, styled} from 'grainjs';
 import {reportError} from 'app/client/models/errors';
@@ -151,7 +151,7 @@ export const cssOverlay = styled('div', `
 `);
 
 const cssSectionWrapper = styled('div', `
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   height: 100%;
   display: flex;
   flex-direction: column;
diff --git a/app/client/components/RecordCardPopup.ts b/app/client/components/RecordCardPopup.ts
index 7fc1efac7f..21fcab2987 100644
--- a/app/client/components/RecordCardPopup.ts
+++ b/app/client/components/RecordCardPopup.ts
@@ -5,7 +5,7 @@ import {cssCloseButton, cssOverlay} from 'app/client/components/RawDataPage';
 import {ViewSectionHelper} from 'app/client/components/ViewLayout';
 import {ViewSectionRec} from 'app/client/models/DocModel';
 import {ChangeType, RowList} from 'app/client/models/rowset';
-import {theme} from 'app/client/ui2018/cssVars';
+import {designTokens, theme} from 'app/client/ui2018/cssVars';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {dom, makeTestId, styled} from 'grainjs';
 
@@ -68,7 +68,7 @@ export class RecordCardPopup extends DisposableWithEvents {
 }
 
 const cssSectionWrapper = styled('div', `
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   height: 100%;
   display: flex;
   flex-direction: column;
diff --git a/app/client/components/SelectionSummary.ts b/app/client/components/SelectionSummary.ts
index 23c372466f..7d9c04c88f 100644
--- a/app/client/components/SelectionSummary.ts
+++ b/app/client/components/SelectionSummary.ts
@@ -6,7 +6,7 @@ import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {UserError} from 'app/client/models/errors';
 import {ALL, RowsChanged, SortedRowSet} from "app/client/models/rowset";
 import {showTransientTooltip} from 'app/client/ui/tooltips';
-import {isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {CellValue} from 'app/common/DocActions';
 import {isEmptyList, isListType, isRefListType} from "app/common/gristTypes";
@@ -302,7 +302,7 @@ const cssSummaryPart = styled('div', `
   text-overflow: ellipsis;
   white-space: nowrap;
   /* Set explicit backdrop to improve visibility in raw data views. */
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
 
   &-copyable:hover {
     cursor: pointer;
diff --git a/app/client/components/ViewLayout.ts b/app/client/components/ViewLayout.ts
index f37ac57f46..513f842d16 100644
--- a/app/client/components/ViewLayout.ts
+++ b/app/client/components/ViewLayout.ts
@@ -19,7 +19,7 @@ import {logTelemetryEvent} from 'app/client/lib/telemetry';
 import {ViewRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {reportError} from 'app/client/models/errors';
 import {getTelemetryWidgetTypeFromVS} from 'app/client/ui/widgetTypesMap';
-import {isNarrowScreen, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, isNarrowScreen, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {ISaveModalOptions, saveModal} from 'app/client/ui2018/modals';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
@@ -509,7 +509,7 @@ const cssLayoutWrapper = styled('div', `
   flex-grow: 1;
   @media not print {
     &-active {
-      background: ${theme.mainPanelBg};
+      background: ${designTokens.mainBg};
       height: 100%;
       width: 100%;
       border-radius: 5px;
diff --git a/app/client/ui/AppHeader.ts b/app/client/ui/AppHeader.ts
index f011a7a277..e0f9d4aa48 100644
--- a/app/client/ui/AppHeader.ts
+++ b/app/client/ui/AppHeader.ts
@@ -1,7 +1,7 @@
 import {getWelcomeHomeUrl, urlState} from 'app/client/models/gristUrlState';
 import {getTheme} from 'app/client/ui/CustomThemes';
 import {cssLeftPane} from 'app/client/ui/PagePanels';
-import {colors, theme, vars} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme, vars} from 'app/client/ui2018/cssVars';
 import * as version from 'app/common/version';
 import {menu, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {commonUrls} from 'app/common/gristUrls';
@@ -280,7 +280,7 @@ export function productPill(org: Organization|null, options: {large?: boolean} =
 const cssAppHeader = styled('div._cssAppHeader', `
   width: 100%;
   height: 100%;
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
   padding: 0px;
   padding: 8px;
 
diff --git a/app/client/ui/DescriptionConfig.ts b/app/client/ui/DescriptionConfig.ts
index 23dab8a3da..e357732a54 100644
--- a/app/client/ui/DescriptionConfig.ts
+++ b/app/client/ui/DescriptionConfig.ts
@@ -3,7 +3,7 @@ import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {autoGrow} from 'app/client/ui/forms';
 import {textarea, textInput} from 'app/client/ui/inputs';
 import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
-import {testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme} from 'app/client/ui2018/cssVars';
 import {CursorPos} from 'app/plugin/GristAPI';
 import {dom, DomArg, fromKo, MultiHolder, styled} from 'grainjs';
 
@@ -82,7 +82,7 @@ export function buildTextInput(
 
 const cssTextInput = styled(textInput, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   outline: none;
@@ -101,7 +101,7 @@ const cssTextInput = styled(textInput, `
 
 const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   outline: none;
diff --git a/app/client/ui/FieldConfig.ts b/app/client/ui/FieldConfig.ts
index 5c8af5e087..a0365430ed 100644
--- a/app/client/ui/FieldConfig.ts
+++ b/app/client/ui/FieldConfig.ts
@@ -6,7 +6,7 @@ import {cssBlockedCursor, cssFieldFormula, cssLabel, cssRow} from 'app/client/ui
 import {withInfoTooltip} from 'app/client/ui/tooltips';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
-import {testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {cssIconButton, icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
@@ -509,7 +509,7 @@ const cssEmptySeparator = styled('div', `
 
 const cssInput = styled(textInput, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
 
   &::placeholder {
diff --git a/app/client/ui/HomeIntroCards.ts b/app/client/ui/HomeIntroCards.ts
index b36eed66dc..885fa2278c 100644
--- a/app/client/ui/HomeIntroCards.ts
+++ b/app/client/ui/HomeIntroCards.ts
@@ -4,7 +4,7 @@ import {HomeModel} from 'app/client/models/HomeModel';
 import {newDocMethods} from 'app/client/ui/NewDocMethods';
 import {openVideoTour} from 'app/client/ui/OpenVideoTour';
 import {basicButtonLink, bigPrimaryButton, primaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, theme, vars} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
 import {getGristConfig} from 'app/common/urlUtils';
@@ -263,7 +263,7 @@ const cssTutorialProgressBar = styled('div', `
   margin-top: 4px;
   height: 10px;
   border-radius: 8px;
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   --percent-complete: 0;
 
   &::after {
diff --git a/app/client/ui/OnboardingPage.ts b/app/client/ui/OnboardingPage.ts
index ce2b74251a..3bbfc25377 100644
--- a/app/client/ui/OnboardingPage.ts
+++ b/app/client/ui/OnboardingPage.ts
@@ -7,7 +7,7 @@ import {getUserPrefObs} from 'app/client/models/UserPrefs';
 import {textInput} from 'app/client/ui/inputs';
 import {PlayerState, YouTubePlayer} from 'app/client/ui/YouTubePlayer';
 import {bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, mediaMedium, mediaXSmall, theme} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, mediaMedium, mediaXSmall, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
 import {modal} from 'app/client/ui2018/modals';
@@ -377,7 +377,7 @@ function buildTutorial(_owner: IDisposableOwner, incrementStep: IncrementStep) {
 const cssPageContainer = styled('div', `
   overflow: auto;
   height: 100%;
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
 `);
 
 const cssOnboardingPage = styled('div', `
diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index ba09819a2d..56c02828c2 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -5,7 +5,7 @@ import {urlState} from "app/client/models/gristUrlState";
 import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
 import {hoverTooltip} from 'app/client/ui/tooltips';
 import {transition, TransitionWatcher} from 'app/client/ui/transitions';
-import {cssHideForNarrowScreen, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
+import {cssHideForNarrowScreen, designTokens, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
 import {isNarrowScreenObs} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {
@@ -401,7 +401,7 @@ const cssContentMain = styled(cssHBox, `
 `);
 export const cssLeftPane = styled(cssVBox, `
   position: relative;
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
   width: 48px;
   margin-right: 0px;
   transition: width 0.4s;
@@ -457,7 +457,7 @@ const cssMainPane = styled(cssVBox, `
   position: relative;
   flex: 1 1 0px;
   min-width: 0px;
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   z-index: 1;
   &-left-overlap {
     margin-left: 48px;
@@ -465,7 +465,7 @@ const cssMainPane = styled(cssVBox, `
 `);
 const cssRightPane = styled(cssVBox, `
   position: relative;
-  background-color: ${theme.rightPanelBg};
+  background-color: ${designTokens.panelBg};
   width: 0px;
   margin-left: 0px;
   overflow: hidden;
@@ -522,18 +522,18 @@ const cssHeader = styled('div', `
   }
 `);
 const cssTopHeader = styled(cssHeader, `
-  background-color: ${theme.topHeaderBg};
+  background-color: ${designTokens.mainBg};
 `);
 const cssLeftPaneHeader = styled(cssHeader, `
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
 `);
 const cssRightPaneHeader = styled(cssHeader, `
-  background-color: ${theme.rightPanelBg};
+  background-color: ${designTokens.panelBg};
   border-bottom: 0;
 `);
 const cssBottomFooter = styled ('div', `
   height: ${bottomFooterHeightPx}px;
-  background-color: ${theme.bottomFooterBg};
+  background-color: ${designTokens.mainBg};
   z-index: 20;
   display: flex;
   flex-direction: row;
diff --git a/app/client/ui/RenamePopupStyles.ts b/app/client/ui/RenamePopupStyles.ts
index e658b78671..92a5fa0ffa 100644
--- a/app/client/ui/RenamePopupStyles.ts
+++ b/app/client/ui/RenamePopupStyles.ts
@@ -1,4 +1,4 @@
-import { theme, vars } from 'app/client/ui2018/cssVars';
+import { designTokens, theme, vars } from 'app/client/ui2018/cssVars';
 import {textarea} from 'app/client/ui/inputs';
 import {cssTextInput} from 'app/client/ui2018/editableLabel';
 import {IInputOptions, input, Observable, styled} from 'grainjs';
@@ -53,7 +53,7 @@ export const cssInput = styled((
 
 export const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   padding: 3px 6px;
diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts
index 48030ef2ec..2a61d2d26a 100644
--- a/app/client/ui/RightPanel.ts
+++ b/app/client/ui/RightPanel.ts
@@ -43,7 +43,7 @@ import {getTelemetryWidgetTypeFromVS, getWidgetTypes} from "app/client/ui/widget
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
 import {buttonSelect} from 'app/client/ui2018/buttonSelect';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
-import {testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
@@ -1181,13 +1181,13 @@ const cssIcon = styled(icon, `
 const cssTopBarItem = styled('div', `
   flex: 1 1 0px;
   height: 100%;
-  background-color: ${theme.rightPanelTabBg};
-  border-right: 1px solid ${theme.rightPanelTabBg};
-  border-left: 1px solid ${theme.rightPanelTabBg};
-  border-bottom: 1px solid ${theme.rightPanelTabBorder};
+  background-color: ${designTokens.mainBg};
+  border-right: 1px solid ${designTokens.panelBg};
+  border-left: 1px solid ${designTokens.panelBg};
+  border-bottom: 1px solid ${designTokens.panelBorder};
   font-weight: initial;
-  color: ${theme.rightPanelTabFg};
-  --icon-color: ${theme.rightPanelTabIcon};
+  color: ${designTokens.textLight};
+  --icon-color: ${designTokens.textLight};
   display: flex;
   align-items: center;
   cursor: default;
@@ -1198,20 +1198,20 @@ const cssTopBarItem = styled('div', `
     border-right: 0;
   }
   &-selected {
-    background-color: ${theme.rightPanelTabSelectedBg};
+    background-color: ${designTokens.panelBg};
     font-weight: ${vars.headerControlTextWeight};
-    color: ${theme.rightPanelTabSelectedFg};
-    --icon-color: ${theme.rightPanelTabSelectedIcon};
-    border-bottom-color: ${theme.rightPanelTabSelectedBg};
-    border-left-color: ${theme.rightPanelTabBorder};
-    border-right-color: ${theme.rightPanelTabBorder};
+    color: ${designTokens.panelFg};
+    --icon-color: ${designTokens.primaryBg};
+    border-bottom-color: ${designTokens.panelBg};
+    border-left-color: ${designTokens.panelBorder};
+    border-right-color: ${designTokens.panelBorder};
   }
   &:not(&-selected):hover {
-    background-color: ${theme.rightPanelTabHoverBg};
-    border-left-color: ${theme.rightPanelTabHoverBg};
-    border-right-color: ${theme.rightPanelTabHoverBg};
-    color: ${theme.rightPanelTabHoverFg};
-    --icon-color: ${theme.rightPanelTabIconHover};
+    background-color: ${designTokens.mainBg};
+    border-left-color: ${designTokens.panelBg};
+    border-right-color: ${designTokens.panelBg};
+    color: ${designTokens.panelFg};
+    --icon-color: ${designTokens.panelFg};
   }
 `);
 
diff --git a/app/client/ui/ShareMenu.ts b/app/client/ui/ShareMenu.ts
index 60822bd0c8..b124085480 100644
--- a/app/client/ui/ShareMenu.ts
+++ b/app/client/ui/ShareMenu.ts
@@ -8,7 +8,7 @@ import {sendToDrive} from 'app/client/ui/sendToDrive';
 import {hoverTooltip, withInfoTooltip} from 'app/client/ui/tooltips';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {primaryButton} from 'app/client/ui2018/buttons';
-import {mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuAnnotate, menuDivider, menuIcon, menuItem, menuItemLink, menuItemSubmenu,
         menuText} from 'app/client/ui2018/menus';
@@ -364,7 +364,7 @@ const cssShareAction = styled(primaryButton, `
 const cssShareCircle = styled(cssHoverCircle, `
   z-index: 1;
   background-color: var(--share-btn-bg);
-  border: 1px solid ${theme.topHeaderBg};
+  border: 1px solid ${designTokens.mainBg};
   &:hover, &.weasel-popup-open {
     background-color: ${theme.controlPrimaryHoverBg};
   }
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index 7a976dba2c..d70277ab96 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -102,6 +102,7 @@ export const colors = {
  *
  * 4) Either have component-specific variables listed in `theme` below consume these designTokens, *or* just remove
  * them and make it so that components directly consume the designTokens in their own code.
+ * This example assumes the latter solution with some updated right panel header tabs code and removed `theme` props.
  *
  * Colors listed here default to Grist light theme colors.
  * Contrary to `colors` and `vars`, all tokens here are meant to be overridable by a theme,
@@ -261,11 +262,6 @@ export const theme = {
   pageBackdrop: new CustomProp('theme-page-backdrop', undefined, 'grey'),
 
   /* Page Panels */
-  mainPanelBg: new CustomProp('theme-page-panels-main-panel-bg', undefined, 'white'),
-  leftPanelBg: new CustomProp('theme-page-panels-left-panel-bg', undefined, colors.lightGrey),
-  rightPanelBg: new CustomProp('theme-page-panels-right-panel-bg', undefined, colors.lightGrey),
-  topHeaderBg: new CustomProp('theme-page-panels-top-header-bg', undefined, 'white'),
-  bottomFooterBg: new CustomProp('theme-page-panels-bottom-footer-bg', undefined, 'white'),
   pagePanelsBorder: new CustomProp('theme-page-panels-border', undefined, colors.mediumGrey),
   pagePanelsBorderResizing: new CustomProp('theme-page-panels-border-resizing', undefined,
     colors.lightGreen),
@@ -521,20 +517,6 @@ export const theme = {
     colors.darkGrey),
 
   /* Right Panel */
-  rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, colors.slate),
-  rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, colors.light),
-  rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, colors.slate),
-  rightPanelTabIconHover: new CustomProp('theme-right-panel-tab-icon-hover', undefined,
-    colors.dark),
-  rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, colors.mediumGrey),
-  rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, colors.light),
-  rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, colors.dark),
-  rightPanelTabSelectedFg: new CustomProp('theme-right-panel-tab-selected-fg', undefined,
-    colors.dark),
-  rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
-    colors.lightGrey),
-  rightPanelTabSelectedIcon: new CustomProp('theme-right-panel-tab-selected-icon', undefined,
-    colors.lightGreen),
   rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
     undefined, colors.darkGreen),
   rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen),
diff --git a/app/client/ui2018/search.ts b/app/client/ui2018/search.ts
index a164525d49..ac5b75d602 100644
--- a/app/client/ui2018/search.ts
+++ b/app/client/ui2018/search.ts
@@ -9,7 +9,7 @@ import { SearchModel } from 'app/client/models/SearchModel';
 import { hoverTooltip } from 'app/client/ui/tooltips';
 import { cssHoverCircle, cssTopBarBtn } from 'app/client/ui/TopBarCss';
 import { labeledSquareCheckbox } from 'app/client/ui2018/checkbox';
-import { mediaSmall, theme, vars } from 'app/client/ui2018/cssVars';
+import { designTokens, mediaSmall, theme, vars } from 'app/client/ui2018/cssVars';
 import { icon } from 'app/client/ui2018/icons';
 import { dom, input, styled } from 'grainjs';
 import { noTestId, TestId } from 'grainjs';
@@ -64,7 +64,7 @@ const expandedSearch = styled('div', `
 `);
 
 const searchInput = styled(input, `
-  background-color: ${theme.topHeaderBg};
+  background-color: ${designTokens.mainBg};
   color: ${theme.inputFg};
   outline: none;
   border: none;
@@ -118,7 +118,7 @@ const cssLabel = styled('span', `
 `);
 
 const cssOptions = styled('div', `
-  background: ${theme.topHeaderBg};
+  background: ${designTokens.mainBg};
   position: absolute;
   right: 0;
   top: 48px;
diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts
index 1a6244bdb3..5783c4d9c2 100644
--- a/app/common/ThemePrefs-ti.ts
+++ b/app/common/ThemePrefs-ti.ts
@@ -35,11 +35,6 @@ export const ThemeColors = t.iface([], {
   "text-disabled": "string",
   "page-bg": "string",
   "page-backdrop": "string",
-  "page-panels-main-panel-bg": "string",
-  "page-panels-left-panel-bg": "string",
-  "page-panels-right-panel-bg": "string",
-  "page-panels-top-header-bg": "string",
-  "page-panels-bottom-footer-bg": "string",
   "page-panels-border": "string",
   "page-panels-border-resizing": "string",
   "page-panels-side-panel-opener-fg": "string",
@@ -192,16 +187,6 @@ export const ThemeColors = t.iface([], {
   "left-panel-page-initials-bg": "string",
   "left-panel-page-emoji-fg": "string",
   "left-panel-page-emoji-outline": "string",
-  "right-panel-tab-fg": "string",
-  "right-panel-tab-bg": "string",
-  "right-panel-tab-icon": "string",
-  "right-panel-tab-icon-hover": "string",
-  "right-panel-tab-border": "string",
-  "right-panel-tab-hover-bg": "string",
-  "right-panel-tab-hover-fg": "string",
-  "right-panel-tab-selected-fg": "string",
-  "right-panel-tab-selected-bg": "string",
-  "right-panel-tab-selected-icon": "string",
   "right-panel-tab-button-hover-bg": "string",
   "right-panel-subtab-fg": "string",
   "right-panel-subtab-selected-fg": "string",
diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
index 6a13ef5b5c..a18efe97ea 100644
--- a/app/common/ThemePrefs.ts
+++ b/app/common/ThemePrefs.ts
@@ -42,11 +42,6 @@ interface LegacyThemeVariables {
   'page-backdrop': string;
 
   /* Page Panels */
-  'page-panels-main-panel-bg': string;
-  'page-panels-left-panel-bg': string;
-  'page-panels-right-panel-bg': string;
-  'page-panels-top-header-bg': string;
-  'page-panels-bottom-footer-bg': string;
   'page-panels-border': string;
   'page-panels-border-resizing': string;
   'page-panels-side-panel-opener-fg': string;
@@ -255,16 +250,6 @@ interface LegacyThemeVariables {
   'left-panel-page-emoji-outline': string;
 
   /* Right Panel */
-  'right-panel-tab-fg': string;
-  'right-panel-tab-bg': string;
-  'right-panel-tab-icon': string;
-  'right-panel-tab-icon-hover': string;
-  'right-panel-tab-border': string;
-  'right-panel-tab-hover-bg': string;
-  'right-panel-tab-hover-fg': string;
-  'right-panel-tab-selected-fg': string;
-  'right-panel-tab-selected-bg': string;
-  'right-panel-tab-selected-icon': string;
   'right-panel-tab-button-hover-bg': string;
   'right-panel-subtab-fg': string;
   'right-panel-subtab-selected-fg': string;
diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
index 0e3ebf7638..7a54ab9682 100644
--- a/app/common/themes/GristDark.ts
+++ b/app/common/themes/GristDark.ts
@@ -1,6 +1,12 @@
 import {ThemeColors} from 'app/common/ThemePrefs';
 
 export const GristDark: ThemeColors = {
+  // example of overriding default designTokens instead of specific component ones (used on right panel header tabs)
+  'main-bg': '#32323f',
+  'panel-bg': '#262633',
+  'panel-fg': '#EFEFEF',
+  'panel-border': '#60606D',
+  'text-light': '#A4A4B1',
   legacyVariables: {
     /* Text */
     'text': '#EFEFEF',
@@ -17,11 +23,6 @@ export const GristDark: ThemeColors = {
     'page-backdrop': 'black',
 
     /* Page Panels */
-    'page-panels-main-panel-bg': '#32323F',
-    'page-panels-left-panel-bg': '#262633',
-    'page-panels-right-panel-bg': '#262633',
-    'page-panels-top-header-bg': '#32323F',
-    'page-panels-bottom-footer-bg': '#32323F',
     'page-panels-border': '#60606D',
     'page-panels-border-resizing': '#17B378',
     'page-panels-side-panel-opener-fg': '#A4A4B1',
@@ -230,16 +231,6 @@ export const GristDark: ThemeColors = {
     'left-panel-page-emoji-outline': '#70707D',
 
     /* Right Panel */
-    'right-panel-tab-fg': '#A4A4B1',
-    'right-panel-tab-bg': '#32323f',
-    'right-panel-tab-icon': '#A4A4B1',
-    'right-panel-tab-icon-hover': '#EFEFEF',
-    'right-panel-tab-border': '#60606D',
-    'right-panel-tab-hover-bg': '#32323f',
-    'right-panel-tab-hover-fg': '#EFEFEF',
-    'right-panel-tab-selected-fg': '#EFEFEF',
-    'right-panel-tab-selected-bg': '#262633',
-    'right-panel-tab-selected-icon': '#16B378',
     'right-panel-tab-button-hover-bg': '#0A5438',
     'right-panel-subtab-fg': '#17B378',
     'right-panel-subtab-selected-fg': '#EFEFEF',
diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
index 0f7ff45807..81c33225b2 100644
--- a/app/common/themes/GristLight.ts
+++ b/app/common/themes/GristLight.ts
@@ -17,11 +17,6 @@ export const GristLight: ThemeColors = {
     'page-backdrop': 'grey',
 
     /* Page Panels */
-    'page-panels-main-panel-bg': 'white',
-    'page-panels-left-panel-bg': '#F7F7F7',
-    'page-panels-right-panel-bg': '#F7F7F7',
-    'page-panels-top-header-bg': 'white',
-    'page-panels-bottom-footer-bg': 'white',
     'page-panels-border': 'rgba(217,217,217,0.6)',
     'page-panels-border-resizing': '#16B378',
     'page-panels-side-panel-opener-fg': '#929299',
@@ -230,16 +225,6 @@ export const GristLight: ThemeColors = {
     'left-panel-page-emoji-outline': '#BDBDBD',
 
     /* Right Panel */
-    'right-panel-tab-fg': '#929299',
-    'right-panel-tab-bg': 'white',
-    'right-panel-tab-icon': '#929299',
-    'right-panel-tab-icon-hover': '#262633',
-    'right-panel-tab-border': 'rgba(217,217,217,0.6)',
-    'right-panel-tab-hover-bg': 'white',
-    'right-panel-tab-hover-fg': '#262633',
-    'right-panel-tab-selected-fg': '#262633',
-    'right-panel-tab-selected-bg': '#F7F7F7',
-    'right-panel-tab-selected-icon': '#16B378',
     'right-panel-tab-button-hover-bg': '#009058',
     'right-panel-subtab-fg': '#16B378',
     'right-panel-subtab-selected-fg': '#262633',
@@ -574,7 +559,7 @@ export const GristLight: ThemeColors = {
     'markdown-cell-medium-border': '#D9D9D9',
 
     /* App header */
-    'app-header-bg': 'var(--grist-theme-page-panels-main-panel-bg)',
+    'app-header-bg': 'var(--grist-main-panel-bg)',
     'app-header-border': 'var(--grist-theme-menu-border)',
     'app-header-border-hover': '#B0B0B0',