diff --git a/scripts/compile-scss.js b/scripts/compile-scss.js
index 23d9360e5a5..c8dcf9b74e7 100755
--- a/scripts/compile-scss.js
+++ b/scripts/compile-scss.js
@@ -26,7 +26,7 @@ const postcssConfigurationWithMinification = {
 async function compileScssFiles(
   sourcePattern,
   destinationDirectory,
-  packageName
+  packageName,
 ) {
   try {
     await mkdir(destinationDirectory);
@@ -134,5 +134,6 @@ if (require.main === module) {
     process.exit(1);
   }
 
-  compileScssFiles(path.join('src', 'theme_*.scss'), 'dist', euiPackageName);
+  compileScssFiles(path.join('src/themes/legacy', 'legacy_*.scss'), 'dist', euiPackageName);
+  compileScssFiles(path.join('src/themes/amsterdam', 'theme_*.scss'), 'dist', euiPackageName);
 }
diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
index 68bc61e8f0c..df3622d28ff 100644
--- a/src-docs/src/components/codesandbox/link.js
+++ b/src-docs/src/components/codesandbox/link.js
@@ -5,6 +5,9 @@ import {
   hasDisplayToggles,
   listExtraDeps,
 } from '../../services';
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
+
+import { ThemeContext } from '../with_theme';
 
 const pkg = require('../../../../package.json');
 
@@ -26,7 +29,6 @@ const getVersion = (packageName) => {
  * 5. Through regex we read the dependencies of both `content` and `display_toggles` and pass that to CS.
  * 6. We pass the files and dependencies as params to CS through a POST call.
  * */
-import { ThemeContext } from '../with_theme';
 
 const displayTogglesRawCode = require('!!raw-loader!../../views/form_controls/display_toggles')
   .default;
@@ -49,11 +51,11 @@ export const CodeSandboxLinkComponent = ({
 }) => {
   let cssFile;
   switch (context.theme) {
-    case 'amsterdam-light':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_light.css';
+    case `${LEGACY_NAME_KEY}_light`:
+      cssFile = '@elastic/eui/dist/eui_legacy_light.css';
       break;
-    case 'amsterdam-dark':
-      cssFile = '@elastic/eui/dist/eui_theme_amsterdam_dark.css';
+    case `${LEGACY_NAME_KEY}_dark`:
+      cssFile = '@elastic/eui/dist/eui_legacy_dark.css';
       break;
     case 'dark':
       cssFile = '@elastic/eui/dist/eui_theme_dark.css';
diff --git a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx
index ff372274bf1..6d3336b46de 100644
--- a/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx
+++ b/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx
@@ -28,13 +28,13 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
 }) => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  let href = 'https://www.figma.com/community/file/809845546262698150';
+  let href = 'https://www.figma.com/community/file/964536385682658129';
   const label = 'EUI Figma Design Library';
 
-  if (isAmsterdam) {
-    href = 'https://www.figma.com/community/file/964536385682658129';
+  if (isLegacy) {
+    href = 'https://www.figma.com/community/file/809845546262698150';
   }
 
   return isMobileSize ? (
@@ -49,7 +49,6 @@ const GuideFigmaLinkComponent: React.FunctionComponent<GuideFigmaLinkProps> = ({
       <EuiHeaderSectionItemButton
         notificationColor="subdued"
         aria-label={label}
-        // @ts-ignore TODO: FIX
         href={href}
       >
         <EuiIcon type={logoFigma} aria-hidden="true" />
diff --git a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx
index 23e93746d4e..db292ed8476 100644
--- a/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx
+++ b/src-docs/src/components/guide_theme_selector/guide_sketch_link.tsx
@@ -31,9 +31,9 @@ const GuideSketchLinkComponent: React.FunctionComponent<GuideSketchLinkProps> =
     'https://github.com/elastic/eui/releases/download/v8.0.0/eui_sketch_8.0.0.zip';
   const label = 'EUI Sketch Library (download)';
 
-  const isAmsterdam = context.theme.includes('amsterdam');
+  const isLegacy = context.theme.includes('legacy');
 
-  if (isAmsterdam) return <></>;
+  if (!isLegacy) return <></>;
 
   return isMobileSize ? (
     <EuiButtonEmpty size="s" flush="both" iconType="logoSketch" href={href}>
diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
index 6b28312b90a..0d474e8bfbb 100644
--- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.tsx
@@ -1,19 +1,23 @@
 /* eslint-disable no-restricted-globals */
 import React, { useState } from 'react';
 
-import { EuiButton } from '../../../../src/components/button';
-import {
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-} from '../../../../src/components/context_menu';
-import { EuiPopover } from '../../../../src/components/popover';
-import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
 import { useIsWithinBreakpoints } from '../../../../src/services/hooks/useIsWithinBreakpoints';
 import { EUI_THEME, EUI_THEMES } from '../../../../src/themes';
 
 import { ThemeContext } from '../with_theme';
 // @ts-ignore Not TS
 import { GuideLocaleSelector } from '../guide_locale_selector';
+import {
+  EuiText,
+  EuiTourStep,
+  EuiPopover,
+  EuiHorizontalRule,
+  EuiButton,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiLink,
+  EuiIcon,
+} from '../../../../src/components';
 
 type GuideThemeSelectorProps = {
   onToggleLocale: () => {};
@@ -31,6 +35,8 @@ export const GuideThemeSelector: React.FunctionComponent<GuideThemeSelectorProps
   );
 };
 
+const STORAGE_KEY = 'legeacy_theme_notification';
+
 // @ts-ignore Context has no type
 const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorProps> = ({
   context,
@@ -39,9 +45,19 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
 }) => {
   const isMobileSize = useIsWithinBreakpoints(['xs', 's']);
   const [isPopoverOpen, setPopover] = useState(false);
+  const [isOpen, setIsOpen] = useState(
+    localStorage.getItem(STORAGE_KEY) !== 'dismissed'
+  );
+
+  const onTourDismiss = () => {
+    setIsOpen(false);
+    localStorage.setItem(STORAGE_KEY, 'dismissed');
+  };
 
   const onButtonClick = () => {
     setPopover(!isPopoverOpen);
+    setIsOpen(false);
+    localStorage.setItem(STORAGE_KEY, 'dismissed');
   };
 
   const closePopover = () => {
@@ -84,27 +100,53 @@ const GuideThemeSelectorComponent: React.FunctionComponent<GuideThemeSelectorPro
   );
 
   return (
-    <EuiPopover
-      id="docsThemeSelector"
-      repositionOnScroll
-      button={button}
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      panelPaddingSize="none"
-      anchorPosition="downRight"
-    >
-      <EuiContextMenuPanel size="s" items={items} />
-      {location.host.includes('803') && (
+    <EuiTourStep
+      content={
+        <EuiText style={{ maxWidth: 320 }}>
+          <p>
+            Amsterdam is now the default theme and the old theme is considered
+            legacy. Our{' '}
+            <EuiLink href="#/guidelines/getting-started#importing-styles">
+              setup instructions
+            </EuiLink>{' '}
+            will sync with the currently selected theme.
+          </p>
+        </EuiText>
+      }
+      isStepOpen={isOpen}
+      onFinish={onTourDismiss}
+      step={1}
+      stepsTotal={1}
+      title={
         <>
-          <EuiHorizontalRule margin="none" />
-          <div style={{ padding: 8 }}>
-            <GuideLocaleSelector
-              onToggleLocale={onToggleLocale}
-              selectedLocale={selectedLocale}
-            />
-          </div>
+          <EuiIcon type="bell" size="s" /> &nbsp; Theming update
         </>
-      )}
-    </EuiPopover>
+      }
+      footerAction={<EuiLink onClick={onTourDismiss}>Got it!</EuiLink>}
+      repositionOnScroll
+    >
+      <EuiPopover
+        id="docsThemeSelector"
+        repositionOnScroll
+        button={button}
+        isOpen={isPopoverOpen}
+        closePopover={closePopover}
+        panelPaddingSize="none"
+        anchorPosition="downRight"
+      >
+        <EuiContextMenuPanel size="s" items={items} />
+        {location.host.includes('803') && (
+          <>
+            <EuiHorizontalRule margin="none" />
+            <div style={{ padding: 8 }}>
+              <GuideLocaleSelector
+                onToggleLocale={onToggleLocale}
+                selectedLocale={selectedLocale}
+              />
+            </div>
+          </>
+        )}
+      </EuiPopover>
+    </EuiTourStep>
   );
 };
diff --git a/src-docs/src/components/with_theme/theme_context.tsx b/src-docs/src/components/with_theme/theme_context.tsx
index 5df045cee42..de73faa2021 100644
--- a/src-docs/src/components/with_theme/theme_context.tsx
+++ b/src-docs/src/components/with_theme/theme_context.tsx
@@ -3,13 +3,11 @@ import { EUI_THEMES, EUI_THEME } from '../../../../src/themes';
 // @ts-ignore importing from a JS file
 import { applyTheme } from '../../services';
 import { EuiThemeProvider } from '../../../../src/services';
-import { EuiThemeAmsterdam } from '../../../../src/themes/eui-amsterdam/theme';
-import { EuiThemeDefault } from '../../../../src/themes/eui/theme';
 
 const THEME_NAMES = EUI_THEMES.map(({ value }) => value);
 
 const defaultState = {
-  theme: THEME_NAMES[2],
+  theme: THEME_NAMES[0],
   changeTheme: (themeValue: EUI_THEME['value']) => {
     applyTheme(themeValue);
   },
@@ -52,9 +50,7 @@ export class ThemeProvider extends React.Component<object, State> {
         }}
       >
         <EuiThemeProvider
-          theme={
-            theme.includes('amsterdam') ? EuiThemeAmsterdam : EuiThemeDefault
-          }
+          theme={EUI_THEMES.find((t) => t.value === theme)?.provider}
           colorMode={theme.includes('light') ? 'light' : 'dark'}
         >
           {children}
diff --git a/src-docs/src/index.js b/src-docs/src/index.js
index 02734e25eea..dfe7d45ad4c 100644
--- a/src-docs/src/index.js
+++ b/src-docs/src/index.js
@@ -11,18 +11,19 @@ import { NotFoundView } from './views/not_found/not_found_view';
 import { registerTheme, ExampleContext } from './services';
 
 import Routes from './routes';
-import themeLight from './theme_light.scss';
-import themeDark from './theme_dark.scss';
-import themeAmsterdamLight from './theme_amsterdam_light.scss';
-import themeAmsterdamDark from './theme_amsterdam_dark.scss';
+import legacyThemeLight from './legacy_light.scss';
+import legacyThemeDark from './legacy_dark.scss';
+import themeAmsterdamLight from './theme_light.scss';
+import themeAmsterdamDark from './theme_dark.scss';
 import { ThemeProvider } from './components/with_theme/theme_context';
 import ScrollToHash from './components/scroll_to_hash';
 import { LinkWrapper } from './views/link_wrapper';
+import { LEGACY_NAME_KEY } from '../../src/themes';
 
-registerTheme('light', [themeLight]);
-registerTheme('dark', [themeDark]);
-registerTheme('amsterdam-light', [themeAmsterdamLight]);
-registerTheme('amsterdam-dark', [themeAmsterdamDark]);
+registerTheme('light', [themeAmsterdamLight]);
+registerTheme('dark', [themeAmsterdamDark]);
+registerTheme(`${LEGACY_NAME_KEY}_light`, [legacyThemeLight]);
+registerTheme(`${LEGACY_NAME_KEY}_dark`, [legacyThemeDark]);
 
 // Set up app
 
diff --git a/src-docs/src/theme_amsterdam_dark.scss b/src-docs/src/legacy_dark.scss
similarity index 54%
rename from src-docs/src/theme_amsterdam_dark.scss
rename to src-docs/src/legacy_dark.scss
index 90a5670c5c1..37c520ddaf8 100644
--- a/src-docs/src/theme_amsterdam_dark.scss
+++ b/src-docs/src/legacy_dark.scss
@@ -1,7 +1,8 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
 
-@import '../../src/theme_amsterdam_dark';
+@import '../../src/themes/legacy/legacy_dark';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';
diff --git a/src-docs/src/theme_amsterdam_light.scss b/src-docs/src/legacy_light.scss
similarity index 54%
rename from src-docs/src/theme_amsterdam_light.scss
rename to src-docs/src/legacy_light.scss
index 87deafd9666..03057af25c6 100644
--- a/src-docs/src/theme_amsterdam_light.scss
+++ b/src-docs/src/legacy_light.scss
@@ -1,7 +1,8 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');
 
-@import '../../src/theme_amsterdam_light';
+@import '../../src/themes/legacy/legacy_light';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';
diff --git a/src-docs/src/services/theme/theme.js b/src-docs/src/services/theme/theme.js
index 04c44ee2246..a3bbf6030c2 100644
--- a/src-docs/src/services/theme/theme.js
+++ b/src-docs/src/services/theme/theme.js
@@ -8,5 +8,5 @@ export function applyTheme(newTheme) {
   Object.keys(themes).forEach((theme) =>
     themes[theme].forEach((cssFile) => cssFile.unuse())
   );
-  themes[newTheme].forEach((cssFile) => cssFile.use());
+  themes[newTheme]?.forEach((cssFile) => cssFile.use());
 }
diff --git a/src-docs/src/theme_dark.scss b/src-docs/src/theme_dark.scss
index 15dd00c3593..44e0626e7ed 100644
--- a/src-docs/src/theme_dark.scss
+++ b/src-docs/src/theme_dark.scss
@@ -1,8 +1,7 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
-@import '../../src/theme_dark';
+@import '../../src/themes/amsterdam/theme_dark';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';
diff --git a/src-docs/src/theme_light.scss b/src-docs/src/theme_light.scss
index b10737d78ae..93c83edf4d5 100644
--- a/src-docs/src/theme_light.scss
+++ b/src-docs/src/theme_light.scss
@@ -1,8 +1,7 @@
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');
+@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');
 
-@import '../../src/theme_light';
+@import '../../src/themes/amsterdam/theme_light';
 @import './components/index';
 @import './services/playground/index';
 @import './views/index';
diff --git a/src-docs/src/views/guidelines/_get_sass_vars.js b/src-docs/src/views/guidelines/_get_sass_vars.js
index 0becaa9f627..00ee4796e4b 100644
--- a/src-docs/src/views/guidelines/_get_sass_vars.js
+++ b/src-docs/src/views/guidelines/_get_sass_vars.js
@@ -1,25 +1,26 @@
 import lightColors from '!!sass-vars-to-js-loader!../../../../src/global_styling/variables/_colors.scss';
-import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui/eui_colors_dark.scss';
-import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
-import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
+import darkColors from '!!sass-vars-to-js-loader!../../../../src/themes/legacy/_colors_dark.scss';
+import lightAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_light.scss';
+import darkAmsterdamColors from '!!sass-vars-to-js-loader!../../../../src/themes/amsterdam/_colors_dark.scss';
 import { useContext } from 'react';
 import { ThemeContext } from '../../components';
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
 
 export const useSassVars = () => {
   const themeContext = useContext(ThemeContext);
   let palette;
   switch (themeContext.theme) {
-    case 'amsterdam-dark':
-      palette = { ...darkColors, ...darkAmsterdamColors };
+    case `${LEGACY_NAME_KEY}_light`:
+      palette = lightColors;
       break;
-    case 'amsterdam-light':
-      palette = { ...lightColors, ...lightAmsterdamColors };
+    case `${LEGACY_NAME_KEY}_dark`:
+      palette = { ...lightColors, ...darkColors };
       break;
     case 'dark':
-      palette = darkColors;
+      palette = { ...lightColors, ...darkColors, ...darkAmsterdamColors };
       break;
     default:
-      palette = lightColors;
+      palette = { ...lightColors, ...lightAmsterdamColors };
       break;
   }
 
diff --git a/src-docs/src/views/guidelines/sass.js b/src-docs/src/views/guidelines/sass.js
index 504ffba2580..56eec8ed2fa 100644
--- a/src-docs/src/views/guidelines/sass.js
+++ b/src-docs/src/views/guidelines/sass.js
@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
+import { LEGACY_NAME_KEY } from '../../../../src';
+
 import { ThemeContext } from '../../components';
 import { Typography } from './sass/typography';
 import { Animation } from './sass/animation';
@@ -56,18 +58,18 @@ const bemExample = `// Use camelCase naming
 const ImportOutsideExample = () => {
   const themeContext = useContext(ThemeContext);
   switch (themeContext.theme) {
-    case 'light':
-      return `@import '@elastic/eui/src/themes/eui/eui_colors_light.scss';
-@import '@elastic/eui/src/themes/eui/eui_globals.scss';`;
+    case `${LEGACY_NAME_KEY}_light`:
+      return `@import '@elastic/eui/src/themes/legacy/_colors_light.scss';
+@import '@elastic/eui/src/themes/legacy/_globals.scss';`;
+    case `${LEGACY_NAME_KEY}_dark`:
+      return `@import '@elastic/eui/src/themes/legacy/_colors_dark.scss';
+@import '@elastic/eui/src/themes/legacy/_globals.scss';`;
     case 'dark':
-      return `@import '@elastic/eui/src/themes/eui/eui_colors_dark.scss';
-@import '@elastic/eui/src/themes/eui/eui_globals.scss';`;
-    case 'amsterdam-dark':
-      return `@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals.scss';`;
+      return `@import '@elastic/eui/src/themes/amsterdam/_colors_dark.scss';
+@import '@elastic/eui/src/themes/amsterdam/_globals.scss';`;
     default:
-      return `@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss';
-@import '@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals.scss';`;
+      return `@import '@elastic/eui/src/themes/amsterdam/_colors_light.scss';
+@import '@elastic/eui/src/themes/amsterdam/_globals.scss';`;
   }
 };
 
diff --git a/src-docs/src/views/guidelines/sass/shadow.tsx b/src-docs/src/views/guidelines/sass/shadow.tsx
index 0dcfffc6984..ded0e3f7896 100644
--- a/src-docs/src/views/guidelines/sass/shadow.tsx
+++ b/src-docs/src/views/guidelines/sass/shadow.tsx
@@ -42,11 +42,11 @@ const MixinLink = () => {
     case 'light':
     case 'dark':
       url =
-        'https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_shadow.scss';
+        'https://github.com/elastic/eui/blob/master/src/themes/amsterdam/global_styling/mixins/_shadow.scss';
       break;
     default:
       url =
-        'https://github.com/elastic/eui/blob/master/src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss';
+        'https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_shadow.scss';
   }
 
   return (
diff --git a/src-docs/src/views/guidelines/sass/typography.tsx b/src-docs/src/views/guidelines/sass/typography.tsx
index 5544b356147..dbd752d8db3 100644
--- a/src-docs/src/views/guidelines/sass/typography.tsx
+++ b/src-docs/src/views/guidelines/sass/typography.tsx
@@ -47,12 +47,12 @@ const ImportFontFamily = () => {
   switch (themeContext.theme) {
     case 'light':
     case 'dark':
-      importString = `@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
-@import url('https://rsms.me/inter/inter-ui.css');`;
-      break;
-    default:
       importString =
         "@import url('https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10,300..700;0,300..700&family=Roboto+Mono:ital,wght@0,400..700;1,400..700&display=swap');";
+      break;
+    default:
+      importString = `@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i,700,700i');
+@import url('https://rsms.me/inter/inter-ui.css');`;
   }
 
   return (
@@ -69,11 +69,11 @@ const VariableLink = () => {
     case 'light':
     case 'dark':
       url =
-        'https://github.com/elastic/eui/blob/master/src/global_styling/variables/_typography.scss';
+        'https://github.com/elastic/eui/blob/master/src/themes/amsterdam/global_styling/variables/_typography.scss';
       break;
     default:
       url =
-        'https://github.com/elastic/eui/blob/master/src/themes/eui-amsterdam/global_styling/variables/_typography.scss';
+        'https://github.com/elastic/eui/blob/master/src/global_styling/variables/_typography.scss';
   }
 
   return <EuiLink href={url}>variables</EuiLink>;
@@ -86,11 +86,11 @@ const MixinLink = () => {
     case 'light':
     case 'dark':
       url =
-        'https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_typography.scss';
+        'https://github.com/elastic/eui/blob/master/src/themes/amsterdam/global_styling/mixins/_typography.scss';
       break;
     default:
       url =
-        'https://github.com/elastic/eui/blob/master/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss';
+        'https://github.com/elastic/eui/blob/master/src/global_styling/mixins/_typography.scss';
   }
 
   return <EuiLink href={url}>mixins</EuiLink>;
@@ -247,7 +247,7 @@ export const Typography = ({}) => {
                   keywords values. When importing the font-family from your
                   service of choice, ensure that you have all 5 weights
                   contained in your import.{' '}
-                  {selectedTheme.includes('amsterdam') ? (
+                  {!selectedTheme.includes('legacy') ? (
                     <>
                       The Amsterdam theme also supports variable font families
                       which can be{' '}
@@ -272,7 +272,7 @@ export const Typography = ({}) => {
 
             <EuiSpacer />
 
-            {selectedTheme.includes('amsterdam') ? (
+            {!selectedTheme.includes('legacy') ? (
               <>
                 <EuiRange
                   fullWidth
diff --git a/src-docs/src/views/panel/panel_shadow.js b/src-docs/src/views/panel/panel_shadow.js
index 80870b00d99..e304fb0f5c1 100644
--- a/src-docs/src/views/panel/panel_shadow.js
+++ b/src-docs/src/views/panel/panel_shadow.js
@@ -5,7 +5,7 @@ import { ThemeContext } from '../../components';
 
 export default () => {
   const themeContext = useContext(ThemeContext);
-  const isAmsterdamTheme = themeContext.theme.includes('amsterdam');
+  const isAmsterdamTheme = !themeContext.theme.includes('legacy');
 
   return (
     <div>
diff --git a/src-docs/src/views/text/_text_scaling.scss b/src-docs/src/views/text/_text_scaling.scss
index 27c04a2862e..07dd2bb3ece 100644
--- a/src-docs/src/views/text/_text_scaling.scss
+++ b/src-docs/src/views/text/_text_scaling.scss
@@ -1,7 +1,7 @@
 // sass-lint:disable no-important
 .guideDemo__textLines {
   background-image: linear-gradient($euiFocusBackgroundColor 1px, transparent 1px);
-  background-size: 100% $euiFontSize / 2;
+  background-size: 100% $euiFontSizeXS;
   background-position-y: -1px;
 
   > * {
@@ -16,7 +16,7 @@
     background-size: 100% $euiFontSizeXS / 2;
   }
 
-  &[class*='amsterdam'] {
-    background-size: 100% 4px;
+  &[class*='legacy'] {
+    background-size: 100% $euiFontSize / 2;
   }
 }
diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js
index bff85665d5d..58506d7ddbb 100644
--- a/src-docs/src/views/text/text_example.js
+++ b/src-docs/src/views/text/text_example.js
@@ -9,6 +9,9 @@ import {
   EuiTextColor,
   EuiTextAlign,
 } from '../../../../src/components';
+
+import { LEGACY_NAME_KEY } from '../../../../src/themes';
+
 import { textConfig, textColorConfig } from './playground';
 
 import Text from './text';
@@ -45,8 +48,8 @@ const LineHeightText = () => {
   const themeContext = useContext(ThemeContext);
   let text;
   switch (themeContext.theme) {
-    case 'light':
-    case 'dark':
+    case `${LEGACY_NAME_KEY}_light`:
+    case `${LEGACY_NAME_KEY}_dark`:
       text = '';
       break;
     default:
diff --git a/src/components/index.scss b/src/components/index.scss
index 02cd5019096..324c8f98d37 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -70,3 +70,6 @@
 @import 'tool_tip/index';
 @import 'tour/index';
 @import 'text/index';
+
+// Packages
+@import '../../packages/index';
diff --git a/src/services/index.ts b/src/services/index.ts
index 6766854dc45..a0d5677f501 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -150,7 +150,6 @@ export {
   getOn,
   mergeDeep,
   setOn,
-  isDefaultTheme,
   Computed,
   ComputedThemeShape,
   EuiThemeColorMode,
diff --git a/src/services/theme/context.ts b/src/services/theme/context.ts
index 50fade58981..4d333d68a57 100644
--- a/src/services/theme/context.ts
+++ b/src/services/theme/context.ts
@@ -13,14 +13,14 @@ import {
   EuiThemeModifications,
   EuiThemeComputed,
 } from './types';
-import { EuiThemeDefault } from '../../themes/eui/theme';
+import { EuiThemeLegacy } from '../../themes/legacy/theme';
 import { DEFAULT_COLOR_MODE, getComputed } from './utils';
 
-export const EuiSystemContext = createContext<EuiThemeSystem>(EuiThemeDefault);
+export const EuiSystemContext = createContext<EuiThemeSystem>(EuiThemeLegacy);
 export const EuiModificationsContext = createContext<EuiThemeModifications>({});
 export const EuiColorModeContext = createContext<EuiThemeColorMode>(
   DEFAULT_COLOR_MODE
 );
 export const EuiThemeContext = createContext<EuiThemeComputed>(
-  getComputed(EuiThemeDefault, {}, DEFAULT_COLOR_MODE)
+  getComputed(EuiThemeLegacy, {}, DEFAULT_COLOR_MODE)
 );
diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts
index eace63910e6..c62d3ad6565 100644
--- a/src/services/theme/index.ts
+++ b/src/services/theme/index.ts
@@ -24,9 +24,6 @@ export {
   mergeDeep,
   setOn,
   Computed,
-  isDefaultTheme,
-  DEFAULT_NAME_KEY,
-  AMSTERDAM_NAME_KEY,
 } from './utils';
 export {
   ComputedThemeShape,
diff --git a/src/services/theme/utils.test.ts b/src/services/theme/utils.test.ts
index b5249e08da1..52bc023cebd 100644
--- a/src/services/theme/utils.test.ts
+++ b/src/services/theme/utils.test.ts
@@ -16,7 +16,6 @@ import {
   getComputed,
   buildTheme,
   mergeDeep,
-  isDefaultTheme,
 } from './utils';
 
 describe('isInverseColorMode', () => {
@@ -277,11 +276,3 @@ describe('mergeDeep', () => {
     ).toEqual({ a: 1, b: { c: { d: 3, e: 5 } } });
   });
 });
-
-describe('isDefaultTheme', () => {
-  it('returns true for the default name', () => {
-    expect(isDefaultTheme('EUI_THEME_DEFAULT')).toBe(true);
-    expect(isDefaultTheme('EUI_THEME_AMSTERDAM')).toBe(false);
-    expect(isDefaultTheme('CUSTOM_DEFAULT')).toBe(false);
-  });
-});
diff --git a/src/services/theme/utils.ts b/src/services/theme/utils.ts
index 1b94495035a..9d905cc69f2 100644
--- a/src/services/theme/utils.ts
+++ b/src/services/theme/utils.ts
@@ -17,8 +17,6 @@ import {
 } from './types';
 
 export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light;
-export const AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM';
-export const DEFAULT_NAME_KEY = 'EUI_THEME_DEFAULT';
 
 /**
  * Returns whether the parameter is an object
@@ -372,7 +370,3 @@ export const mergeDeep = (
 
   return target;
 };
-
-export const isDefaultTheme = (name: string) => {
-  return name === DEFAULT_NAME_KEY;
-};
diff --git a/src/theme_amsterdam_dark.scss b/src/theme_amsterdam_dark.scss
deleted file mode 100644
index 96dbf4a80ed..00000000000
--- a/src/theme_amsterdam_dark.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// These are variable overwrites used only for this theme.
-@import 'themes/eui-amsterdam/eui_amsterdam_colors_dark';
-
-// Global styling
-@import 'themes/eui-amsterdam/global_styling/index';
-
-// Components
-@import 'components/index';
-
-// Packages
-@import '../packages/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/theme_amsterdam_light.scss b/src/theme_amsterdam_light.scss
deleted file mode 100644
index 15f1bb055ce..00000000000
--- a/src/theme_amsterdam_light.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// This is the default theme.
-@import 'themes/eui-amsterdam/eui_amsterdam_colors_light';
-
-// Global styling
-@import 'themes/eui-amsterdam/global_styling/index';
-
-// Components
-@import 'components/index';
-
-// Packages
-@import '../packages/index';
-
-// Component overrides
-// Comes after the component import and overrides via cascade
-@import 'themes/eui-amsterdam/overrides/index';
diff --git a/src/theme_dark.scss b/src/theme_dark.scss
deleted file mode 100644
index aef1a964eae..00000000000
--- a/src/theme_dark.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// These are variable overwrites used only for this theme.
-@import 'themes/eui/eui_colors_dark';
-
-// Global styling
-@import 'global_styling/index';
-
-// Components
-@import 'components/index';
-
-// Packages
-@import '../packages/index';
diff --git a/src/theme_light.scss b/src/theme_light.scss
deleted file mode 100644
index 6fe7a6ea022..00000000000
--- a/src/theme_light.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// This is the default theme.
-@import 'themes/eui/eui_colors_light';
-
-// Global styling
-@import 'global_styling/index';
-
-// Components
-@import 'components/index';
-
-// Packages
-@import '../packages/index';
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss b/src/themes/amsterdam/_colors_dark.scss
similarity index 95%
rename from src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
rename to src/themes/amsterdam/_colors_dark.scss
index ce70734a842..c139419bedd 100644
--- a/src/themes/eui-amsterdam/eui_amsterdam_colors_dark.scss
+++ b/src/themes/amsterdam/_colors_dark.scss
@@ -1,4 +1,4 @@
-@import '../eui/eui_colors_dark.scss';
+@import '../legacy/colors_dark';
 
 // Core
 $euiColorPrimary: #36A2EF;
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss b/src/themes/amsterdam/_colors_light.scss
similarity index 100%
rename from src/themes/eui-amsterdam/eui_amsterdam_colors_light.scss
rename to src/themes/amsterdam/_colors_light.scss
diff --git a/src/themes/eui-amsterdam/eui_amsterdam_globals.scss b/src/themes/amsterdam/_globals.scss
similarity index 100%
rename from src/themes/eui-amsterdam/eui_amsterdam_globals.scss
rename to src/themes/amsterdam/_globals.scss
diff --git a/src/themes/eui-amsterdam/global_styling/functions/_index.scss b/src/themes/amsterdam/global_styling/functions/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/functions/_index.scss
rename to src/themes/amsterdam/global_styling/functions/_index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/functions/_shadows.scss b/src/themes/amsterdam/global_styling/functions/_shadows.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/functions/_shadows.scss
rename to src/themes/amsterdam/global_styling/functions/_shadows.scss
diff --git a/src/themes/eui-amsterdam/global_styling/index.scss b/src/themes/amsterdam/global_styling/index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/index.scss
rename to src/themes/amsterdam/global_styling/index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_button.scss b/src/themes/amsterdam/global_styling/mixins/_button.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_button.scss
rename to src/themes/amsterdam/global_styling/mixins/_button.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_form.scss b/src/themes/amsterdam/global_styling/mixins/_form.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_form.scss
rename to src/themes/amsterdam/global_styling/mixins/_form.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_index.scss b/src/themes/amsterdam/global_styling/mixins/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_index.scss
rename to src/themes/amsterdam/global_styling/mixins/_index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_link.scss b/src/themes/amsterdam/global_styling/mixins/_link.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_link.scss
rename to src/themes/amsterdam/global_styling/mixins/_link.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_panel.scss b/src/themes/amsterdam/global_styling/mixins/_panel.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_panel.scss
rename to src/themes/amsterdam/global_styling/mixins/_panel.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_popover.scss b/src/themes/amsterdam/global_styling/mixins/_popover.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_popover.scss
rename to src/themes/amsterdam/global_styling/mixins/_popover.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_range.scss b/src/themes/amsterdam/global_styling/mixins/_range.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_range.scss
rename to src/themes/amsterdam/global_styling/mixins/_range.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss b/src/themes/amsterdam/global_styling/mixins/_shadow.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_shadow.scss
rename to src/themes/amsterdam/global_styling/mixins/_shadow.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_states.scss b/src/themes/amsterdam/global_styling/mixins/_states.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_states.scss
rename to src/themes/amsterdam/global_styling/mixins/_states.scss
diff --git a/src/themes/eui-amsterdam/global_styling/mixins/_typography.scss b/src/themes/amsterdam/global_styling/mixins/_typography.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/mixins/_typography.scss
rename to src/themes/amsterdam/global_styling/mixins/_typography.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_date_picker.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_days.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_days.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_date_picker_days.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_date_picker_navigation.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss b/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_times.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_date_picker_times.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_date_picker_times.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss b/src/themes/amsterdam/global_styling/react_date_picker/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_index.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_mixins.scss b/src/themes/amsterdam/global_styling/react_date_picker/_mixins.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_mixins.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_mixins.scss
diff --git a/src/themes/eui-amsterdam/global_styling/react_date_picker/_variables.scss b/src/themes/amsterdam/global_styling/react_date_picker/_variables.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/react_date_picker/_variables.scss
rename to src/themes/amsterdam/global_styling/react_date_picker/_variables.scss
diff --git a/src/themes/eui-amsterdam/global_styling/reset/_index.scss b/src/themes/amsterdam/global_styling/reset/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/reset/_index.scss
rename to src/themes/amsterdam/global_styling/reset/_index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/reset/_reset.scss b/src/themes/amsterdam/global_styling/reset/_reset.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/reset/_reset.scss
rename to src/themes/amsterdam/global_styling/reset/_reset.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_borders.scss b/src/themes/amsterdam/global_styling/variables/_borders.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_borders.scss
rename to src/themes/amsterdam/global_styling/variables/_borders.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_borders.ts b/src/themes/amsterdam/global_styling/variables/_borders.ts
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_borders.ts
rename to src/themes/amsterdam/global_styling/variables/_borders.ts
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_buttons.scss b/src/themes/amsterdam/global_styling/variables/_buttons.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_buttons.scss
rename to src/themes/amsterdam/global_styling/variables/_buttons.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_colors.ts b/src/themes/amsterdam/global_styling/variables/_colors.ts
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_colors.ts
rename to src/themes/amsterdam/global_styling/variables/_colors.ts
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_flyout.scss b/src/themes/amsterdam/global_styling/variables/_flyout.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_flyout.scss
rename to src/themes/amsterdam/global_styling/variables/_flyout.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_form.scss b/src/themes/amsterdam/global_styling/variables/_form.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_form.scss
rename to src/themes/amsterdam/global_styling/variables/_form.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_header.scss b/src/themes/amsterdam/global_styling/variables/_header.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_header.scss
rename to src/themes/amsterdam/global_styling/variables/_header.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_index.scss b/src/themes/amsterdam/global_styling/variables/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_index.scss
rename to src/themes/amsterdam/global_styling/variables/_index.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_page.scss b/src/themes/amsterdam/global_styling/variables/_page.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_page.scss
rename to src/themes/amsterdam/global_styling/variables/_page.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_shadows.scss b/src/themes/amsterdam/global_styling/variables/_shadows.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_shadows.scss
rename to src/themes/amsterdam/global_styling/variables/_shadows.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_states.scss b/src/themes/amsterdam/global_styling/variables/_states.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_states.scss
rename to src/themes/amsterdam/global_styling/variables/_states.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_states.ts b/src/themes/amsterdam/global_styling/variables/_states.ts
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_states.ts
rename to src/themes/amsterdam/global_styling/variables/_states.ts
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_steps.scss b/src/themes/amsterdam/global_styling/variables/_steps.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_steps.scss
rename to src/themes/amsterdam/global_styling/variables/_steps.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.scss b/src/themes/amsterdam/global_styling/variables/_typography.scss
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/_typography.scss
rename to src/themes/amsterdam/global_styling/variables/_typography.scss
diff --git a/src/themes/eui-amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts
similarity index 79%
rename from src/themes/eui-amsterdam/global_styling/variables/_typography.ts
rename to src/themes/amsterdam/global_styling/variables/_typography.ts
index ee0c0845ee0..c854b7546c3 100644
--- a/src/themes/eui-amsterdam/global_styling/variables/_typography.ts
+++ b/src/themes/amsterdam/global_styling/variables/_typography.ts
@@ -6,12 +6,15 @@
  * Side Public License, v 1.
  */
 
-import { font } from '../../../../global_styling/variables/_typography';
+import {
+  EuiThemeFont,
+  font,
+} from '../../../../global_styling/variables/_typography';
 
 /**
  * Amsterdam theme just changes the main font from the beta Inter UI to Inter
  */
-export const font_ams = {
+export const font_ams: EuiThemeFont = {
   ...font,
   family: "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif",
 };
diff --git a/src/themes/eui-amsterdam/global_styling/variables/title.ts b/src/themes/amsterdam/global_styling/variables/title.ts
similarity index 100%
rename from src/themes/eui-amsterdam/global_styling/variables/title.ts
rename to src/themes/amsterdam/global_styling/variables/title.ts
diff --git a/src/themes/eui-amsterdam/overrides/_avatar.scss b/src/themes/amsterdam/overrides/_avatar.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_avatar.scss
rename to src/themes/amsterdam/overrides/_avatar.scss
diff --git a/src/themes/eui-amsterdam/overrides/_breadcrumbs.scss b/src/themes/amsterdam/overrides/_breadcrumbs.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_breadcrumbs.scss
rename to src/themes/amsterdam/overrides/_breadcrumbs.scss
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/amsterdam/overrides/_button.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_button.scss
rename to src/themes/amsterdam/overrides/_button.scss
diff --git a/src/themes/eui-amsterdam/overrides/_button_empty.scss b/src/themes/amsterdam/overrides/_button_empty.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_button_empty.scss
rename to src/themes/amsterdam/overrides/_button_empty.scss
diff --git a/src/themes/eui-amsterdam/overrides/_button_group.scss b/src/themes/amsterdam/overrides/_button_group.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_button_group.scss
rename to src/themes/amsterdam/overrides/_button_group.scss
diff --git a/src/themes/eui-amsterdam/overrides/_call_out.scss b/src/themes/amsterdam/overrides/_call_out.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_call_out.scss
rename to src/themes/amsterdam/overrides/_call_out.scss
diff --git a/src/themes/eui-amsterdam/overrides/_card.scss b/src/themes/amsterdam/overrides/_card.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_card.scss
rename to src/themes/amsterdam/overrides/_card.scss
diff --git a/src/themes/eui-amsterdam/overrides/_code_block.scss b/src/themes/amsterdam/overrides/_code_block.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_code_block.scss
rename to src/themes/amsterdam/overrides/_code_block.scss
diff --git a/src/themes/eui-amsterdam/overrides/_color_stops.scss b/src/themes/amsterdam/overrides/_color_stops.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_color_stops.scss
rename to src/themes/amsterdam/overrides/_color_stops.scss
diff --git a/src/themes/eui-amsterdam/overrides/_comment.scss b/src/themes/amsterdam/overrides/_comment.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_comment.scss
rename to src/themes/amsterdam/overrides/_comment.scss
diff --git a/src/themes/eui-amsterdam/overrides/_date_picker.scss b/src/themes/amsterdam/overrides/_date_picker.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_date_picker.scss
rename to src/themes/amsterdam/overrides/_date_picker.scss
diff --git a/src/themes/eui-amsterdam/overrides/_date_popover_button.scss b/src/themes/amsterdam/overrides/_date_popover_button.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_date_popover_button.scss
rename to src/themes/amsterdam/overrides/_date_popover_button.scss
diff --git a/src/themes/eui-amsterdam/overrides/_facet.scss b/src/themes/amsterdam/overrides/_facet.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_facet.scss
rename to src/themes/amsterdam/overrides/_facet.scss
diff --git a/src/themes/eui-amsterdam/overrides/_filter_group.scss b/src/themes/amsterdam/overrides/_filter_group.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_filter_group.scss
rename to src/themes/amsterdam/overrides/_filter_group.scss
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout.scss b/src/themes/amsterdam/overrides/_form_control_layout.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_form_control_layout.scss
rename to src/themes/amsterdam/overrides/_form_control_layout.scss
diff --git a/src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss b/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_form_control_layout_delimited.scss
rename to src/themes/amsterdam/overrides/_form_control_layout_delimited.scss
diff --git a/src/themes/eui-amsterdam/overrides/_form_controls.scss b/src/themes/amsterdam/overrides/_form_controls.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_form_controls.scss
rename to src/themes/amsterdam/overrides/_form_controls.scss
diff --git a/src/themes/eui-amsterdam/overrides/_header.scss b/src/themes/amsterdam/overrides/_header.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_header.scss
rename to src/themes/amsterdam/overrides/_header.scss
diff --git a/src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss b/src/themes/amsterdam/overrides/_header_breadcrumbs.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_header_breadcrumbs.scss
rename to src/themes/amsterdam/overrides/_header_breadcrumbs.scss
diff --git a/src/themes/eui-amsterdam/overrides/_hue.scss b/src/themes/amsterdam/overrides/_hue.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_hue.scss
rename to src/themes/amsterdam/overrides/_hue.scss
diff --git a/src/themes/eui-amsterdam/overrides/_image.scss b/src/themes/amsterdam/overrides/_image.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_image.scss
rename to src/themes/amsterdam/overrides/_image.scss
diff --git a/src/themes/eui-amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_index.scss
rename to src/themes/amsterdam/overrides/_index.scss
diff --git a/src/themes/eui-amsterdam/overrides/_key_pad_menu.scss b/src/themes/amsterdam/overrides/_key_pad_menu.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_key_pad_menu.scss
rename to src/themes/amsterdam/overrides/_key_pad_menu.scss
diff --git a/src/themes/eui-amsterdam/overrides/_list_group_item.scss b/src/themes/amsterdam/overrides/_list_group_item.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_list_group_item.scss
rename to src/themes/amsterdam/overrides/_list_group_item.scss
diff --git a/src/themes/eui-amsterdam/overrides/_mark.scss b/src/themes/amsterdam/overrides/_mark.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_mark.scss
rename to src/themes/amsterdam/overrides/_mark.scss
diff --git a/src/themes/eui-amsterdam/overrides/_markdown_editor.scss b/src/themes/amsterdam/overrides/_markdown_editor.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_markdown_editor.scss
rename to src/themes/amsterdam/overrides/_markdown_editor.scss
diff --git a/src/themes/eui-amsterdam/overrides/_modal.scss b/src/themes/amsterdam/overrides/_modal.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_modal.scss
rename to src/themes/amsterdam/overrides/_modal.scss
diff --git a/src/themes/eui-amsterdam/overrides/_notification_badge.scss b/src/themes/amsterdam/overrides/_notification_badge.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_notification_badge.scss
rename to src/themes/amsterdam/overrides/_notification_badge.scss
diff --git a/src/themes/eui-amsterdam/overrides/_overlay_mask.scss b/src/themes/amsterdam/overrides/_overlay_mask.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_overlay_mask.scss
rename to src/themes/amsterdam/overrides/_overlay_mask.scss
diff --git a/src/themes/eui-amsterdam/overrides/_popover.scss b/src/themes/amsterdam/overrides/_popover.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_popover.scss
rename to src/themes/amsterdam/overrides/_popover.scss
diff --git a/src/themes/eui-amsterdam/overrides/_progress.scss b/src/themes/amsterdam/overrides/_progress.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_progress.scss
rename to src/themes/amsterdam/overrides/_progress.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range.scss b/src/themes/amsterdam/overrides/_range.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range.scss
rename to src/themes/amsterdam/overrides/_range.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_draggable.scss b/src/themes/amsterdam/overrides/_range_draggable.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_draggable.scss
rename to src/themes/amsterdam/overrides/_range_draggable.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_highlight.scss b/src/themes/amsterdam/overrides/_range_highlight.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_highlight.scss
rename to src/themes/amsterdam/overrides/_range_highlight.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_levels.scss b/src/themes/amsterdam/overrides/_range_levels.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_levels.scss
rename to src/themes/amsterdam/overrides/_range_levels.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_slider.scss b/src/themes/amsterdam/overrides/_range_slider.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_slider.scss
rename to src/themes/amsterdam/overrides/_range_slider.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_thumb.scss b/src/themes/amsterdam/overrides/_range_thumb.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_thumb.scss
rename to src/themes/amsterdam/overrides/_range_thumb.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_ticks.scss b/src/themes/amsterdam/overrides/_range_ticks.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_ticks.scss
rename to src/themes/amsterdam/overrides/_range_ticks.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_tooltip.scss b/src/themes/amsterdam/overrides/_range_tooltip.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_tooltip.scss
rename to src/themes/amsterdam/overrides/_range_tooltip.scss
diff --git a/src/themes/eui-amsterdam/overrides/_range_track.scss b/src/themes/amsterdam/overrides/_range_track.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_range_track.scss
rename to src/themes/amsterdam/overrides/_range_track.scss
diff --git a/src/themes/eui-amsterdam/overrides/_side_nav.scss b/src/themes/amsterdam/overrides/_side_nav.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_side_nav.scss
rename to src/themes/amsterdam/overrides/_side_nav.scss
diff --git a/src/themes/eui-amsterdam/overrides/_steps.scss b/src/themes/amsterdam/overrides/_steps.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_steps.scss
rename to src/themes/amsterdam/overrides/_steps.scss
diff --git a/src/themes/eui-amsterdam/overrides/_tabs.scss b/src/themes/amsterdam/overrides/_tabs.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_tabs.scss
rename to src/themes/amsterdam/overrides/_tabs.scss
diff --git a/src/themes/eui-amsterdam/overrides/_text.scss b/src/themes/amsterdam/overrides/_text.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_text.scss
rename to src/themes/amsterdam/overrides/_text.scss
diff --git a/src/themes/eui-amsterdam/overrides/_toast.scss b/src/themes/amsterdam/overrides/_toast.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_toast.scss
rename to src/themes/amsterdam/overrides/_toast.scss
diff --git a/src/themes/eui-amsterdam/overrides/_tooltip.scss b/src/themes/amsterdam/overrides/_tooltip.scss
similarity index 100%
rename from src/themes/eui-amsterdam/overrides/_tooltip.scss
rename to src/themes/amsterdam/overrides/_tooltip.scss
diff --git a/src/themes/eui-amsterdam/theme.ts b/src/themes/amsterdam/theme.ts
similarity index 89%
rename from src/themes/eui-amsterdam/theme.ts
rename to src/themes/amsterdam/theme.ts
index ec042a36b63..407aaaeb837 100644
--- a/src/themes/eui-amsterdam/theme.ts
+++ b/src/themes/amsterdam/theme.ts
@@ -6,11 +6,7 @@
  * Side Public License, v 1.
  */
 
-import {
-  buildTheme,
-  EuiThemeShape,
-  AMSTERDAM_NAME_KEY,
-} from '../../services/theme';
+import { buildTheme, EuiThemeShape } from '../../services/theme';
 import { animation } from '../../global_styling/variables/_animations';
 import { breakpoint } from '../../global_styling/variables/_breakpoint';
 import { base, size } from '../../global_styling/variables/_size';
@@ -19,6 +15,8 @@ import { colors_ams } from './global_styling/variables/_colors';
 import { font_ams } from './global_styling/variables/_typography';
 import { border_ams } from './global_styling/variables/_borders';
 
+export const AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM';
+
 export const euiThemeAmsterdam: EuiThemeShape = {
   colors: colors_ams,
   base,
diff --git a/src/themes/amsterdam/theme_dark.scss b/src/themes/amsterdam/theme_dark.scss
new file mode 100644
index 00000000000..ec8e0e97075
--- /dev/null
+++ b/src/themes/amsterdam/theme_dark.scss
@@ -0,0 +1,12 @@
+// These are variable overwrites used only for this theme.
+@import 'colors_dark';
+
+// Global styling
+@import './global_styling/index';
+
+// Components
+@import '../../components/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import './overrides/index';
diff --git a/src/themes/amsterdam/theme_light.scss b/src/themes/amsterdam/theme_light.scss
new file mode 100644
index 00000000000..27c77c31192
--- /dev/null
+++ b/src/themes/amsterdam/theme_light.scss
@@ -0,0 +1,12 @@
+// This is the default theme.
+@import 'colors_light';
+
+// Global styling
+@import './global_styling/index';
+
+// Components
+@import '../../components/index';
+
+// Component overrides
+// Comes after the component import and overrides via cascade
+@import './overrides/index';
diff --git a/src/themes/charts/themes.ts b/src/themes/charts/themes.ts
index 315a4f457e5..eac1112587f 100644
--- a/src/themes/charts/themes.ts
+++ b/src/themes/charts/themes.ts
@@ -18,7 +18,7 @@ import { RecursivePartial } from '../../components/common';
 // @ts-ignore typescript doesn't understand the webpack loader
 import lightColors from '!!sass-vars-to-js-loader!../../global_styling/variables/_colors.scss';
 // @ts-ignore typescript doesn't understand the webpack loader
-import darkColors from '!!sass-vars-to-js-loader!../../themes/eui/eui_colors_dark.scss';
+import darkColors from '!!sass-vars-to-js-loader!../../themes/legacy/_colors_dark.scss';
 
 const fontFamily = `'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont,
   'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'`;
diff --git a/src/themes/index.ts b/src/themes/index.ts
index b63c5d30228..697cb5d2941 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -7,3 +7,6 @@
  */
 
 export { EUI_THEMES, EUI_THEME } from './themes';
+
+export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
+export { LEGACY_NAME_KEY, EuiThemeLegacy } from './legacy/theme';
diff --git a/src/themes/eui/eui_colors_dark.scss b/src/themes/legacy/_colors_dark.scss
similarity index 100%
rename from src/themes/eui/eui_colors_dark.scss
rename to src/themes/legacy/_colors_dark.scss
diff --git a/src/themes/eui/eui_colors_light.scss b/src/themes/legacy/_colors_light.scss
similarity index 100%
rename from src/themes/eui/eui_colors_light.scss
rename to src/themes/legacy/_colors_light.scss
diff --git a/src/themes/eui/eui_globals.scss b/src/themes/legacy/_globals.scss
similarity index 100%
rename from src/themes/eui/eui_globals.scss
rename to src/themes/legacy/_globals.scss
diff --git a/src/themes/legacy/legacy_dark.scss b/src/themes/legacy/legacy_dark.scss
new file mode 100644
index 00000000000..5494ea78a68
--- /dev/null
+++ b/src/themes/legacy/legacy_dark.scss
@@ -0,0 +1,8 @@
+// These are variable overwrites used only for this theme.
+@import 'colors_dark';
+
+// Global styling
+@import '../../global_styling/index';
+
+// Components
+@import '../../components/index';
diff --git a/src/themes/legacy/legacy_light.scss b/src/themes/legacy/legacy_light.scss
new file mode 100644
index 00000000000..cc83a57ef99
--- /dev/null
+++ b/src/themes/legacy/legacy_light.scss
@@ -0,0 +1,8 @@
+// This is the default theme.
+@import 'colors_light';
+
+// Global styling
+@import '../../global_styling/index';
+
+// Components
+@import '../../components/index';
diff --git a/src/themes/eui/theme.ts b/src/themes/legacy/theme.ts
similarity index 79%
rename from src/themes/eui/theme.ts
rename to src/themes/legacy/theme.ts
index b9433ed0c9e..6acb25a4e64 100644
--- a/src/themes/eui/theme.ts
+++ b/src/themes/legacy/theme.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { buildTheme, DEFAULT_NAME_KEY } from '../../services/theme/utils';
+import { buildTheme } from '../../services/theme/utils';
 import { EuiThemeShape } from '../../services/theme/types';
 import { animation } from '../../global_styling/variables/_animations';
 import { breakpoint } from '../../global_styling/variables/_breakpoint';
@@ -15,7 +15,9 @@ import { base, size } from '../../global_styling/variables/_size';
 import { font } from '../../global_styling/variables/_typography';
 import { border } from '../../global_styling/variables/_borders';
 
-export const euiThemeDefault: EuiThemeShape = {
+export const LEGACY_NAME_KEY = 'EUI_THEME_LEGACY';
+
+export const euiThemeLegacy: EuiThemeShape = {
   colors,
   base,
   size,
@@ -25,4 +27,4 @@ export const euiThemeDefault: EuiThemeShape = {
   breakpoint,
 };
 
-export const EuiThemeDefault = buildTheme(euiThemeDefault, DEFAULT_NAME_KEY);
+export const EuiThemeLegacy = buildTheme(euiThemeLegacy, LEGACY_NAME_KEY);
diff --git a/src/themes/themes.test.ts b/src/themes/themes.test.ts
new file mode 100644
index 00000000000..4fc4c66a52d
--- /dev/null
+++ b/src/themes/themes.test.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { isLegacyTheme, isDefaultTheme } from './themes';
+
+describe('isLegacyTheme', () => {
+  it('returns true for the legacy name', () => {
+    expect(isLegacyTheme('EUI_THEME_LEGACY')).toBe(true);
+    expect(isLegacyTheme('EUI_THEME_AMSTERDAM')).toBe(false);
+    expect(isLegacyTheme('CUSTOM_DEFAULT')).toBe(false);
+  });
+});
+
+describe('isDefaultTheme', () => {
+  it('returns true for the default name', () => {
+    expect(isDefaultTheme('EUI_THEME_LEGACY')).toBe(false);
+    expect(isDefaultTheme('EUI_THEME_AMSTERDAM')).toBe(true);
+    expect(isDefaultTheme('CUSTOM_DEFAULT')).toBe(false);
+  });
+});
diff --git a/src/themes/themes.ts b/src/themes/themes.ts
index 94b5dff45ed..e886521e0fd 100644
--- a/src/themes/themes.ts
+++ b/src/themes/themes.ts
@@ -6,26 +6,43 @@
  * Side Public License, v 1.
  */
 
+import { EuiThemeSystem } from '../services';
+import { EuiThemeAmsterdam, AMSTERDAM_NAME_KEY } from './amsterdam/theme';
+import { EuiThemeLegacy, LEGACY_NAME_KEY } from './legacy/theme';
+
 export interface EUI_THEME {
   text: string;
   value: string;
+  provider?: EuiThemeSystem;
 }
 
 export const EUI_THEMES: EUI_THEME[] = [
   {
     text: 'Light',
     value: 'light',
+    provider: EuiThemeAmsterdam,
   },
   {
     text: 'Dark',
     value: 'dark',
+    provider: EuiThemeAmsterdam,
   },
   {
-    text: 'Amsterdam: Light',
-    value: 'amsterdam-light',
+    text: 'Legacy: Light',
+    value: `${LEGACY_NAME_KEY}_light`,
+    provider: EuiThemeLegacy,
   },
   {
-    text: 'Amsterdam: Dark',
-    value: 'amsterdam-dark',
+    text: 'Legacy: Dark',
+    value: `${LEGACY_NAME_KEY}_dark`,
+    provider: EuiThemeLegacy,
   },
 ];
+
+export const isLegacyTheme = (name: string) => {
+  return name === LEGACY_NAME_KEY;
+};
+
+export const isDefaultTheme = (name: string) => {
+  return name === AMSTERDAM_NAME_KEY;
+};