diff --git a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
index 432c85858af60..9edf5ff154e5b 100644
--- a/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
+++ b/frontend/src/lib/components/DateFilter/RollingDateRangeFilter.scss
@@ -12,7 +12,7 @@
     transition: background 0.3s ease;
 
     &:hover {
-        background-color: var(--mid);
+        background-color: var(--bg-3000);
     }
 
     input::-webkit-outer-spin-button,
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
index abc3ea434c470..a03bd65c54b8e 100644
--- a/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
+++ b/frontend/src/lib/components/DefinitionPopover/DefinitionPopover.scss
@@ -102,7 +102,7 @@
     }
 
     .DefinitionPopover {
-        background-color: var(--side);
+        background-color: var(--bg-3000);
 
         .DefinitionPopover__label {
             align-items: flex-start;
diff --git a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
index f251369c64732..de33f34fbcc25 100644
--- a/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
+++ b/frontend/src/lib/components/PayGateMini/PayGateMini.tsx
@@ -157,7 +157,7 @@ function PayGateContent({
         <div
             className={clsx(
                 className,
-                background && 'bg-side border border-border',
+                background && 'bg-bg-3000 border border-border',
                 'PayGateMini rounded flex flex-col items-center p-4 text-center'
             )}
         >
@@ -203,7 +203,7 @@ const renderUsageLimitMessage = (
                     </Tooltip>
                     .
                 </p>
-                <p className="border border-border bg-side rounded p-4">
+                <p className="border border-border bg-bg-3000 rounded p-4">
                     <b>Your current plan limit:</b>{' '}
                     <span>
                         {featureAvailableOnOrg.limit} {featureAvailableOnOrg.unit}
@@ -262,7 +262,7 @@ const renderGateVariantMessage = (
 
 const GrandfatheredMessage = (): JSX.Element => {
     return (
-        <div className="flex gap-x-2 bg-side p-4 rounded text-left mb-4">
+        <div className="flex gap-x-2 bg-bg-3000 p-4 rounded text-left mb-4">
             <IconInfo className="text-muted text-2xl" />
             <p className="text-muted mb-0">
                 Your plan does not include this feature, but previously set settings may remain. Please upgrade your
diff --git a/frontend/src/lib/components/Sharing/SharingModal.scss b/frontend/src/lib/components/Sharing/SharingModal.scss
index fc7ad30d53ae9..5a951374a0018 100644
--- a/frontend/src/lib/components/Sharing/SharingModal.scss
+++ b/frontend/src/lib/components/Sharing/SharingModal.scss
@@ -1,4 +1,4 @@
 .SharingPreview {
     padding: 0.5rem;
-    background-color: var(--mid);
+    background-color: var(--bg-3000);
 }
diff --git a/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx b/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx
index f977f943754e7..4956230ddb114 100644
--- a/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx
+++ b/frontend/src/lib/components/TimeSensitiveAuthentication/TimeSensitiveAuthentication.tsx
@@ -119,7 +119,7 @@ export function TimeSensitiveAuthenticationArea({ children }: { children: JSX.El
     }, [])
 
     return timeSensitiveAuthenticationRequired ? (
-        <div className="flex-1 bg-side border border-border rounded flex flex-col items-center p-6 text-center w-full">
+        <div className="flex-1 bg-bg-3000 border border-border rounded flex flex-col items-center p-6 text-center w-full">
             <h2>Re-authentication required</h2>
 
             <p>For security purposes, this area requires that you re-authenticate</p>
diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
index e67b7821ad30c..f0b4ef7986395 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.stories.tsx
@@ -100,7 +100,9 @@ NestedMenu.args = {
                     ],
                 },
             ],
-            footer: <div className="flex items-center h-10 px-2 rounded bg-mid text-muted">I am a custom footer!</div>,
+            footer: (
+                <div className="flex items-center h-10 px-2 rounded bg-bg-3000 text-muted">I am a custom footer!</div>
+            ),
         },
         {
             items: [
diff --git a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
index 0d5661f54ea71..73cea38b9ba47 100644
--- a/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
+++ b/frontend/src/lib/lemon-ui/LemonRow/LemonRow.scss
@@ -43,7 +43,7 @@
     }
 
     &.LemonRow--status-muted {
-        background: var(--side);
+        background: var(--bg-3000);
     }
 
     &.LemonRow--disabled {
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
index 20a8dd75435a1..d68bc0a3098b4 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx
@@ -62,7 +62,7 @@ SectionedOptions.args = {
             ),
             options: [{ value: 'tomato', label: 'Tomato??', disabled: true }],
             footer: (
-                <div className="bg-side rounded p-2">
+                <div className="bg-bg-3000 rounded p-2">
                     <p className="text-muted max-w-60">
                         I am a custom footer! <br />
                         This might be a good time to tell you about our premium features...
diff --git a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
index debdb46ec27f9..5c225d0f5f8de 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
+++ b/frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss
@@ -146,7 +146,7 @@
 
             &.LemonTable__expansion {
                 position: relative;
-                background: var(--side);
+                background: var(--bg-3000);
 
                 > td {
                     // Disable padding inside the expansion for better tailored placement of contents
diff --git a/frontend/src/queries/QueryEditor/QueryEditor.tsx b/frontend/src/queries/QueryEditor/QueryEditor.tsx
index 88026a6c7262c..9b82fba450ef9 100644
--- a/frontend/src/queries/QueryEditor/QueryEditor.tsx
+++ b/frontend/src/queries/QueryEditor/QueryEditor.tsx
@@ -57,7 +57,7 @@ export function QueryEditor(props: QueryEditorProps): JSX.Element {
             <div
                 data-attr="query-editor"
                 className={clsx(
-                    'flex flex-col p-2 bg-mid space-y-2 resize-y overflow-auto h-80 rounded',
+                    'flex flex-col p-2 bg-bg-3000 space-y-2 resize-y overflow-auto h-80 rounded',
                     props.className
                 )}
             >
diff --git a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
index 7033d5e929863..80cc09efab61a 100644
--- a/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
+++ b/frontend/src/queries/nodes/DataTable/ColumnConfigurator/ColumnConfigurator.scss
@@ -4,7 +4,7 @@
         column-gap: 1rem;
         width: 700px;
         padding: 0.5rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border-radius: var(--radius);
 
         @media (max-width: 960px) {
diff --git a/frontend/src/queries/nodes/DataTable/DataTable.scss b/frontend/src/queries/nodes/DataTable/DataTable.scss
index ae0f574e2a5f1..389eab98dab9a 100644
--- a/frontend/src/queries/nodes/DataTable/DataTable.scss
+++ b/frontend/src/queries/nodes/DataTable/DataTable.scss
@@ -13,7 +13,7 @@
         font-weight: 600;
         color: var(--muted);
         text-align: center;
-        background-color: var(--mid);
+        background-color: var(--bg-3000);
     }
 
     @keyframes DataTable__highlight {
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
index 2d3ef56c69272..598420f8ba892 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect.tsx
@@ -73,7 +73,7 @@ const SelectOption = ({ title, description, value, selectedValue }: SelectOption
     <div className="flex p-1 items-center">
         <div
             className={`flex shrink-0 font-bold w-10 h-10 mr-3 justify-center items-center rounded text-xs ${
-                value === selectedValue ? 'bg-primary text-white' : 'bg-mid text-primary-alt'
+                value === selectedValue ? 'bg-primary text-white' : 'bg-bg-3000 text-primary-alt'
             }`}
         >
             {value}
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
index 8eface52ec75f..e49053efb0ffc 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,7 +1,7 @@
 .PropertyGroupFilters {
     .property-group {
         padding: 0.5rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border-width: 1px;
         border-radius: var(--radius);
     }
diff --git a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
index 2d3485930e1a5..26ea6aca9d119 100644
--- a/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
+++ b/frontend/src/scenes/PreflightCheck/PreflightCheck.scss
@@ -67,8 +67,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: var(--side);
-        border: 2px solid var(--mid);
+        background-color: var(--bg-3000);
+        border: 2px solid var(--bg-3000);
 
         p {
             margin-bottom: 0;
diff --git a/frontend/src/scenes/apps/ErrorDetailsModal.tsx b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
index 5e9e373f6f3ce..59d8d3521eead 100644
--- a/frontend/src/scenes/apps/ErrorDetailsModal.tsx
+++ b/frontend/src/scenes/apps/ErrorDetailsModal.tsx
@@ -102,13 +102,13 @@ function CollapsibleSection(props: {
     const [isExpanded, setIsExpanded] = useState(props.defaultIsExpanded)
 
     return (
-        <div className="bg-mid border rounded">
+        <div className="bg-bg-3000 border rounded">
             <LemonButton
                 fullWidth
                 onClick={() => setIsExpanded(!isExpanded)}
                 sideIcon={isExpanded ? <IconCollapse /> : <IconExpand />}
                 title={isExpanded ? 'Show less' : 'Show more'}
-                className="bg-mid"
+                className="bg-bg-3000"
             >
                 {props.title}
             </LemonButton>
diff --git a/frontend/src/scenes/billing/BillingProduct.tsx b/frontend/src/scenes/billing/BillingProduct.tsx
index 215ddcd1efe84..7d48c0c2e079d 100644
--- a/frontend/src/scenes/billing/BillingProduct.tsx
+++ b/frontend/src/scenes/billing/BillingProduct.tsx
@@ -94,7 +94,7 @@ export const BillingProduct = ({ product }: { product: BillingProductV2Type }):
             ref={ref}
         >
             <div className="border border-border rounded w-full bg-bg-light" ref={productRef}>
-                <div className="border-b border-border rounded-t bg-mid p-4">
+                <div className="border-b border-border rounded-t bg-bg-3000 p-4">
                     <div className="flex gap-4 items-center justify-between">
                         {getProductIcon(product.name, product.icon_key, 'text-2xl')}
                         <div>
diff --git a/frontend/src/scenes/billing/BillingProductAddon.tsx b/frontend/src/scenes/billing/BillingProductAddon.tsx
index 57a9c2edb2803..7456c4baedee1 100644
--- a/frontend/src/scenes/billing/BillingProductAddon.tsx
+++ b/frontend/src/scenes/billing/BillingProductAddon.tsx
@@ -70,7 +70,7 @@ export const BillingProductAddon = ({ addon }: { addon: BillingProductV2AddonTyp
         addon.plans?.find((plan) => plan.plan_key === 'addon-20240404-og-customers')
 
     return (
-        <div className="bg-side rounded p-6 flex flex-col" ref={productRef}>
+        <div className="bg-bg-3000 rounded p-6 flex flex-col" ref={productRef}>
             <div className="flex justify-between gap-x-4">
                 <div className="flex gap-x-4">
                     <div className="w-8">{getProductIcon(addon.name, addon.icon_key, 'text-2xl')}</div>
diff --git a/frontend/src/scenes/billing/PlanComparison.tsx b/frontend/src/scenes/billing/PlanComparison.tsx
index 61ce6803d5951..42c627495c64e 100644
--- a/frontend/src/scenes/billing/PlanComparison.tsx
+++ b/frontend/src/scenes/billing/PlanComparison.tsx
@@ -401,7 +401,7 @@ export const PlanComparison = ({
                                         <tr>
                                             <th
                                                 colSpan={3}
-                                                className="PlanTable__th__section bg-side justify-left rounded text-left mb-2"
+                                                className="PlanTable__th__section bg-bg-3000 justify-left rounded text-left mb-2"
                                             >
                                                 <div className="flex items-center gap-x-2 my-2">
                                                     {getProductIcon(
diff --git a/frontend/src/scenes/cohorts/Cohorts.scss b/frontend/src/scenes/cohorts/Cohorts.scss
index 82992a1e15f7f..3d6cc05cb56c3 100644
--- a/frontend/src/scenes/cohorts/Cohorts.scss
+++ b/frontend/src/scenes/cohorts/Cohorts.scss
@@ -6,7 +6,7 @@
 .cohort-recalculating {
     padding: 0.5rem 1rem;
     margin-top: 1rem;
-    background-color: var(--mid);
+    background-color: var(--bg-3000);
     border-radius: var(--radius);
 
     .ant-spin-spinning {
diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index 5df078a37bece..0631a78f6a78b 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -147,7 +147,7 @@
         min-height: 320px;
         margin-top: 1rem;
         font-size: 24px;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
         border: 1px solid var(--border);
     }
 
diff --git a/frontend/src/scenes/groups/GroupsIntroduction.tsx b/frontend/src/scenes/groups/GroupsIntroduction.tsx
index 385bdc8a0cd2b..c2649df38bde7 100644
--- a/frontend/src/scenes/groups/GroupsIntroduction.tsx
+++ b/frontend/src/scenes/groups/GroupsIntroduction.tsx
@@ -32,7 +32,7 @@ export function GroupsIntroduction(): JSX.Element {
 
 export function GroupIntroductionFooter({ needsUpgrade }: { needsUpgrade: boolean }): JSX.Element {
     return (
-        <div className="text-sm bg-mid rounded p-2 max-w-60">
+        <div className="text-sm bg-bg-3000 rounded p-2 max-w-60">
             {needsUpgrade ? (
                 <>
                     Track usage of groups of users with Group&nbsp;Analytics.{' '}
diff --git a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
index 21f4b69d4d940..9e3b25bc2bddc 100644
--- a/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
+++ b/frontend/src/scenes/insights/EmptyStates/EmptyStates.tsx
@@ -142,7 +142,7 @@ export function InsightLoadingStateWithLoadingBar({
                         </>
                     )}
                 </p>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>
@@ -190,7 +190,7 @@ export function InsightLoadingState({
             <Animation type={AnimationType.LaptopHog} />
             <div className="empty-state-inner">
                 <p className="mx-auto text-center">Crunching through hogloads of data...</p>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>
@@ -231,7 +231,7 @@ export function InsightTimeoutState({ queryId }: { queryId?: string | null }): J
                     </div>
                     <h2 className="text-xl leading-tight mb-6">Your query took too long to complete</h2>
                 </>
-                <div className="p-4 rounded bg-mid flex gap-x-2 max-w-120">
+                <div className="p-4 rounded bg-bg-3000 flex gap-x-2 max-w-120">
                     <div className="flex">
                         <IconInfo className="w-4 h-4" />
                     </div>
diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
index 6c5b3dea1d24a..7525560c3168b 100644
--- a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
+++ b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilter.scss
@@ -29,7 +29,7 @@
 
         .ActionFilterRow-filters {
             padding: 0.5rem;
-            background-color: var(--side);
+            background-color: var(--bg-3000);
             border-bottom: 1px solid var(--border);
         }
     }
diff --git a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
index cb20c81271fb2..3a02cb817e0a6 100644
--- a/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
+++ b/frontend/src/scenes/insights/views/Funnels/CorrelationMatrix.scss
@@ -35,7 +35,7 @@
             font-weight: bold;
             color: var(--muted);
             text-transform: uppercase;
-            background-color: var(--mid);
+            background-color: var(--bg-3000);
         }
 
         tbody {
diff --git a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
index 9b51b5be558c2..4d6f24aa4af18 100644
--- a/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
+++ b/frontend/src/scenes/notebooks/Nodes/NotebookNodePersonFeed/Session.tsx
@@ -52,7 +52,7 @@ export const Session = ({ session }: SessionProps): JSX.Element => {
     }
 
     return (
-        <div className="flex flex-col rounded bg-side border overflow-hidden mb-3" title={session.sessionId}>
+        <div className="flex flex-col rounded bg-bg-3000 border overflow-hidden mb-3" title={session.sessionId}>
             <div className="flex items-center justify-between bg-bg-light p-0.5 pr-2 text-xs">
                 <div className="flex items-center">
                     <LemonButton
diff --git a/frontend/src/scenes/notebooks/Notebook/Notebook.scss b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
index 3b918abb8461a..2bc1566e98119 100644
--- a/frontend/src/scenes/notebooks/Notebook/Notebook.scss
+++ b/frontend/src/scenes/notebooks/Notebook/Notebook.scss
@@ -128,7 +128,7 @@
             border-radius: var(--radius);
 
             &:hover {
-                background-color: var(--side);
+                background-color: var(--bg-3000);
             }
 
             & svg {
diff --git a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
index cab839a5e73c8..26b56bc771541 100644
--- a/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
+++ b/frontend/src/scenes/pipeline/PipelineNodeMetrics.tsx
@@ -353,13 +353,13 @@ function CollapsibleSection(props: {
     const [isExpanded, setIsExpanded] = useState(props.defaultIsExpanded)
 
     return (
-        <div className="bg-mid border rounded">
+        <div className="bg-bg-3000 border rounded">
             <LemonButton
                 fullWidth
                 onClick={() => setIsExpanded(!isExpanded)}
                 sideIcon={isExpanded ? <IconCollapse /> : <IconExpand />}
                 title={isExpanded ? 'Show less' : 'Show more'}
-                className="bg-mid"
+                className="bg-bg-3000"
             >
                 {props.title}
             </LemonButton>
diff --git a/frontend/src/scenes/products/Products.tsx b/frontend/src/scenes/products/Products.tsx
index 14007067a4a49..ed3ef4d1f63f9 100644
--- a/frontend/src/scenes/products/Products.tsx
+++ b/frontend/src/scenes/products/Products.tsx
@@ -88,7 +88,7 @@ export function Products(): JSX.Element {
     const { isFirstProductOnboarding } = useValues(onboardingLogic)
 
     return (
-        <div className="flex flex-col flex-1 w-full px-6 items-center justify-center bg-mid h-[calc(100vh-var(--breadcrumbs-height-full)-2*var(--scene-padding))]">
+        <div className="flex flex-col flex-1 w-full px-6 items-center justify-center bg-bg-3000 h-[calc(100vh-var(--breadcrumbs-height-full)-2*var(--scene-padding))]">
             <div className="mb-8">
                 {isFirstProductOnboarding ? (
                     <h2 className="text-center text-4xl">Where do you want to start?</h2>
diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.scss b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
index c18c105f2dee7..b338e74e04da0 100644
--- a/frontend/src/scenes/project-homepage/ProjectHomepage.scss
+++ b/frontend/src/scenes/project-homepage/ProjectHomepage.scss
@@ -46,6 +46,6 @@
         justify-content: center;
         width: 100%;
         padding: 4rem;
-        background-color: var(--side);
+        background-color: var(--bg-3000);
     }
 }
diff --git a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
index e45fbc05a3340..eacb352844e8c 100644
--- a/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
+++ b/frontend/src/scenes/session-recordings/player/PlayerMeta.scss
@@ -8,7 +8,7 @@
     .PlayerMetaPersonProperties {
         padding: 0.5rem;
         overflow: auto;
-        background: var(--side);
+        background: var(--bg-3000);
         border-bottom: 1px solid transparent;
     }
 
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
index 3b261aa18fb7a..b023163e9fa9f 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
@@ -108,7 +108,7 @@ export function PlayerInspectorControls({
     }
 
     return (
-        <div className="bg-side border-b pb-2">
+        <div className="bg-bg-3000 border-b pb-2">
             <div className="flex justify-between flex-nowrap">
                 <div className="w-2.5 mb-2 border-b shrink-0" />
                 <TabButtons tabs={tabs} logicProps={logicProps} />
diff --git a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
index f7698153526c2..8575d5ebbfc16 100644
--- a/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
+++ b/frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorList.tsx
@@ -184,7 +184,7 @@ export function PlayerInspectorList(): JSX.Element {
     }
 
     return (
-        <div className="flex flex-col bg-side flex-1 overflow-hidden relative">
+        <div className="flex flex-col bg-bg-3000 flex-1 overflow-hidden relative">
             {!snapshotsLoaded ? (
                 <div className="p-16 text-center text-muted-alt">Data will be shown once playback starts</div>
             ) : items.length ? (
@@ -219,7 +219,7 @@ export function PlayerInspectorList(): JSX.Element {
                         )}
                     </AutoSizer>
                     {syncScrollPaused && (
-                        <div className="absolute bottom-2 left-1/2 translate-x-[-50%] bg-side">
+                        <div className="absolute bottom-2 left-1/2 translate-x-[-50%] bg-bg-3000">
                             <LemonButton
                                 type="secondary"
                                 onClick={() => {
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
index 17ae678e31792..95d80a623be5c 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylist.tsx
@@ -241,7 +241,7 @@ function RecordingsLists(): JSX.Element {
 
             <div className={clsx('overflow-y-auto')} onScroll={handleScroll} ref={contentRef}>
                 {!notebookNode && showFilters ? (
-                    <div className="bg-side border-b">
+                    <div className="bg-bg-3000 border-b">
                         <SessionRecordingsFilters
                             advancedFilters={advancedFilters}
                             simpleFilters={simpleFilters}
diff --git a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
index 7f1e25df34b84..be48802d9c7c4 100644
--- a/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
+++ b/frontend/src/scenes/session-recordings/playlist/SessionRecordingsPlaylistSettings.tsx
@@ -12,7 +12,7 @@ export function SessionRecordingsPlaylistSettings(): JSX.Element {
     const { orderBy } = useValues(sessionRecordingsPlaylistLogic)
 
     return (
-        <div className="relative flex flex-col gap-2 p-3 bg-side border-b">
+        <div className="relative flex flex-col gap-2 p-3 bg-bg-3000 border-b">
             <Tooltip
                 title={
                     <div className="text-center">
diff --git a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
index 31c557daa6bce..cd1985d031832 100644
--- a/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
+++ b/frontend/src/scenes/trends/persons-modal/PersonsModal.tsx
@@ -383,7 +383,7 @@ export function ActorRow({ actor, onOpenRecording, propertiesTimelineFilter }: A
             </div>
 
             {expanded ? (
-                <div className="PersonsModal__tabs bg-side border-t rounded-b">
+                <div className="PersonsModal__tabs bg-bg-3000 border-t rounded-b">
                     <LemonTabs
                         activeKey={tab}
                         onChange={setTab}
diff --git a/frontend/src/styles/antd.less b/frontend/src/styles/antd.less
index 0cc37188c5143..4dbcc0057a8df 100644
--- a/frontend/src/styles/antd.less
+++ b/frontend/src/styles/antd.less
@@ -21,7 +21,7 @@ with SASS, leading to duplicated config. When changing any variable here, please
 @layout-body-background: var(--bg-light);
 @font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-@table-expanded-row-bg: var(--side);
+@table-expanded-row-bg: var(--bg-3000);
 
 .hide-gte-lg {
     display: none !important;
diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
index 8108bf20af138..c733655097c04 100644
--- a/frontend/src/styles/vars.scss
+++ b/frontend/src/styles/vars.scss
@@ -389,8 +389,6 @@ $_lifecycle_dormant: map.get($colors, 'danger');
     --primary-alt: var(--text-3000);
     --border: var(--border-3000);
     --border-bold: var(--border-bold-3000);
-    --mid: var(--bg-3000);
-    --side: var(--bg-3000);
     --primary-alt-highlight: var(--primary-alt-highlight-3000);
     --data-color-1: #1d4aff;
     --data-color-1-hover: #1a3cf6;