diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/index.js
new file mode 100644
index 00000000000000..8cdbbc02f6184c
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/index.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNavigation as Navigation } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { GLOBAL_STYLES_VIEWS, VIEW_ROOT } from './navigation/constants';
+import GlobalStylesNavigation from './navigation';
+import GlobalStylesCurrentView from './navigation/view';
+
+export default function GlobalStylesV2() {
+ return (
+
+
+
+ );
+}
+
+function GlobalStylesView() {
+ return (
+
+
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js
new file mode 100644
index 00000000000000..28f2c5404a06e1
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/constants.js
@@ -0,0 +1,15 @@
+export const VIEW_ROOT = 'root';
+export const VIEW_COLORS = 'colors';
+export const VIEW_COLORS_PALETTE = 'colors-palette';
+export const VIEW_COLORS_ELEMENT = 'colors-element';
+export const VIEW_TYPOGRAPHY = 'typography';
+export const VIEW_TYPOGRAPHY_ELEMENT = 'typography-element';
+
+export const GLOBAL_STYLES_VIEWS = [
+ { title: 'Global Styles', slug: VIEW_ROOT },
+ { title: 'Colors', slug: VIEW_COLORS },
+ { title: 'Colors Palette', slug: VIEW_COLORS_PALETTE },
+ { title: 'Colors Element', slug: VIEW_COLORS_ELEMENT },
+ { title: 'Typography', slug: VIEW_TYPOGRAPHY },
+ { title: 'Typography Element', slug: VIEW_TYPOGRAPHY_ELEMENT },
+];
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js
new file mode 100644
index 00000000000000..080350e0978477
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/context.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { VIEW_ROOT } from './constants';
+
+export const GlobalStylesNavigationContext = createContext( {
+ currentView: VIEW_ROOT,
+ setCurrentView: () => {},
+} );
+
+export const useGlobalStylesNavigationContext = () =>
+ useContext( GlobalStylesNavigationContext );
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js
new file mode 100644
index 00000000000000..6ca3de28d2a738
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/index.js
@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { VIEW_ROOT } from './constants';
+import { GlobalStylesNavigationContext } from './context';
+
+export default function GlobalStylesNavigation( { children } ) {
+ const [ currentView, setCurrentView ] = useState( VIEW_ROOT );
+
+ return (
+
+ { children }
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js
new file mode 100644
index 00000000000000..4dd60b5ffc7816
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/navigation/view.js
@@ -0,0 +1,38 @@
+/**
+ * Internal dependencies
+ */
+import {
+ VIEW_COLORS,
+ VIEW_COLORS_ELEMENT,
+ VIEW_COLORS_PALETTE,
+ VIEW_ROOT,
+ VIEW_TYPOGRAPHY,
+ VIEW_TYPOGRAPHY_ELEMENT,
+} from './constants';
+import { useGlobalStylesNavigationContext } from './context';
+import GlobalStylesViewColors from '../views/colors';
+import GlobalStylesViewColorsElement from '../views/colors-element';
+import GlobalStylesViewColorsPalette from '../views/colors-palette';
+import GlobalStylesViewRoot from '../views/root';
+import GlobalStylesViewTypography from '../views/typography';
+import GlobalStylesViewTypographyElement from '../views/typography-element';
+
+const allViews = {
+ [ VIEW_ROOT ]: GlobalStylesViewRoot,
+ [ VIEW_COLORS ]: GlobalStylesViewColors,
+ [ VIEW_COLORS_ELEMENT ]: GlobalStylesViewColorsElement,
+ [ VIEW_COLORS_PALETTE ]: GlobalStylesViewColorsPalette,
+ [ VIEW_TYPOGRAPHY ]: GlobalStylesViewTypography,
+ [ VIEW_TYPOGRAPHY_ELEMENT ]: GlobalStylesViewTypographyElement,
+};
+
+export default function GlobalStylesCurrentView() {
+ const { currentView } = useGlobalStylesNavigationContext();
+ const CurrentView = allViews[ currentView ] ?? null;
+
+ return (
+
+
+
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js b/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js
new file mode 100644
index 00000000000000..4453647671514d
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/stories/index.js
@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import GlobalStylesV2 from '../';
+
+export default { title: 'Edit Site (Experimental) /Global Styles v2' };
+
+export const _default = () => {
+ return ;
+};
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js
new file mode 100644
index 00000000000000..cc606a70f18333
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-element.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewColorsElement() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToColors = () => setCurrentView( 'colors' );
+ const navigateToColorsPalette = () => setCurrentView( 'colors-palette' );
+
+ return (
+ <>
+ Colors Element view
+
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js
new file mode 100644
index 00000000000000..6bd9badd775656
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors-palette.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewColorsPalette() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToColorsElement = () => setCurrentView( 'colors-element' );
+
+ return (
+ <>
+ Colors Palette view
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js
new file mode 100644
index 00000000000000..563b90db4c0886
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/colors.js
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewColors() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToColorsElement = () => setCurrentView( 'colors-element' );
+ const navigateToRoot = () => setCurrentView( 'root' );
+
+ return (
+ <>
+ Colors view
+
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js
new file mode 100644
index 00000000000000..193b7b95af5db9
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/root.js
@@ -0,0 +1,21 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewRoot() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToColors = () => setCurrentView( 'colors' );
+ const navigateToTypography = () => setCurrentView( 'typography' );
+
+ return (
+ <>
+ Root (main) view
+
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js
new file mode 100644
index 00000000000000..5ea624164d36e2
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography-element.js
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewTypographyElement() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToTypography = () => setCurrentView( 'typography' );
+
+ return (
+ <>
+ Typography Element view
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js
new file mode 100644
index 00000000000000..8b79e46a30ee31
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles-v2/views/typography.js
@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { useGlobalStylesNavigationContext } from '../navigation/context';
+
+export default function GlobalStylesViewTypography() {
+ const { setCurrentView } = useGlobalStylesNavigationContext();
+
+ const navigateToTypographyElement = () =>
+ setCurrentView( 'typography-element' );
+ const navigateToRoot = () => setCurrentView( 'root' );
+
+ return (
+ <>
+ Typography view
+
+
+ >
+ );
+}
diff --git a/storybook/main.js b/storybook/main.js
index 14c3db1adb0771..e0f7e6ad8eb82e 100644
--- a/storybook/main.js
+++ b/storybook/main.js
@@ -8,6 +8,7 @@ const stories = [
'../packages/block-editor/src/**/stories/*.js',
'../packages/components/src/**/stories/*.js',
'../packages/icons/src/**/stories/*.js',
+ '../packages/edit-site/src/**/stories/*.js',
].filter( Boolean );
const customEnvVariables = {};