diff --git a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
index e86a151086862a..e0b1d28c427878 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -35,6 +35,7 @@ import {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
+import { StylePreview } from './global-styles/preview';
 
 function getPanelTitle( blockName ) {
 	const blockType = getBlockType( blockName );
@@ -188,6 +189,11 @@ export default function GlobalStylesSidebar() {
 		>
 			<Navigation>
 				<NavigationMenu>
+					<NavigationGroup>
+						<NavigationItem>
+							<StylePreview />
+						</NavigationItem>
+					</NavigationGroup>
 					<GlobalStylesLevel
 						context={ root }
 						getStyle={ getStyle }
diff --git a/packages/edit-site/src/components/sidebar/global-styles/preview.js b/packages/edit-site/src/components/sidebar/global-styles/preview.js
new file mode 100644
index 00000000000000..bc285eb98dff2f
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/preview.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Card,
+	ColorIndicator,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */ import { useGlobalStylesContext } from '../../editor/global-styles-provider';
+
+export const StylePreview = () => {
+	const { getStyle } = useGlobalStylesContext();
+	const fontFamily = getStyle( 'root', 'fontFamily' ) ?? 'serif';
+	const textColor = getStyle( 'root', 'color' ) ?? 'black';
+	const linkColor = getStyle( 'root', 'linkColor' ) ?? 'blue';
+	const backgroundColor = getStyle( 'root', 'backgroundColor' ) ?? 'white';
+
+	return (
+		<Card
+			className="edit-site-global-styles-preview"
+			style={ { background: backgroundColor } }
+		>
+			<HStack spacing={ 5 }>
+				<div>
+					<span style={ { fontFamily, fontSize: '80px' } }>A</span>
+					<span style={ { fontFamily, fontSize: '80px' } }>a</span>
+				</div>
+				<VStack spacing={ 2 }>
+					<ColorIndicator colorValue={ textColor } />
+					<ColorIndicator colorValue={ linkColor } />
+				</VStack>
+			</HStack>
+		</Card>
+	);
+};
diff --git a/packages/edit-site/src/components/sidebar/global-styles/style.scss b/packages/edit-site/src/components/sidebar/global-styles/style.scss
new file mode 100644
index 00000000000000..681a968a02e827
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/style.scss
@@ -0,0 +1,16 @@
+.edit-site-global-styles-preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 152px;
+
+	.component-color-indicator {
+		border-radius: 50%;
+		border: 0;
+		height: 36px;
+		width: 36px;
+		margin-left: 0;
+		padding: 0;
+	}
+}
+
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 846e1673d65578..fda90a6a761f2b 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -7,6 +7,7 @@
 @import "./components/navigation-sidebar/navigation-toggle/style.scss";
 @import "./components/navigation-sidebar/navigation-panel/style.scss";
 @import "./components/sidebar/style.scss";
+@import "./components/sidebar/global-styles/style.scss";
 @import "./components/sidebar/settings-header/style.scss";
 @import "./components/sidebar/template-card/style.scss";
 @import "./components/editor/style.scss";