diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index bedc7a94844ca..0e68054ab5556 100644
--- a/packages/edit-site/src/components/editor/index.js
+++ b/packages/edit-site/src/components/editor/index.js
@@ -40,6 +40,7 @@ import URLQueryController from '../url-query-controller';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import ErrorBoundary from '../error-boundary';
+import WelcomeGuide from '../welcome-guide';
 import { store as editSiteStore } from '../../store';
 import { GlobalStylesRenderer } from './global-styles-renderer';
 import { GlobalStylesProvider } from '../global-styles/global-styles-provider';
@@ -277,6 +278,7 @@ function Editor( { initialSettings, onError } ) {
 												}
 												footer={ <BlockBreadcrumb /> }
 											/>
+											<WelcomeGuide />
 											<Popover.Slot />
 											<PluginArea />
 										</ErrorBoundary>
diff --git a/packages/edit-site/src/components/welcome-guide/image.js b/packages/edit-site/src/components/welcome-guide/image.js
new file mode 100644
index 0000000000000..5f2fcc6e10bd4
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/image.js
@@ -0,0 +1,11 @@
+export default function WelcomeGuideImage( { nonAnimatedSrc, animatedSrc } ) {
+	return (
+		<picture className="edit-site-welcome-guide__image">
+			<source
+				srcSet={ nonAnimatedSrc }
+				media="(prefers-reduced-motion: reduce)"
+			/>
+			<img src={ animatedSrc } width="312" height="240" alt="" />
+		</picture>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/index.js b/packages/edit-site/src/components/welcome-guide/index.js
new file mode 100644
index 0000000000000..e5e7c31372676
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/index.js
@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Guide } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import WelcomeGuideImage from './image';
+import { store as editSiteStore } from '../../store';
+
+export default function WelcomeGuideTemplate() {
+	const { toggleFeature } = useDispatch( editSiteStore );
+
+	const isActive = useSelect(
+		( select ) => select( editSiteStore ).isFeatureActive( 'welcomeGuide' ),
+		[]
+	);
+
+	if ( ! isActive ) {
+		return null;
+	}
+
+	return (
+		<Guide
+			className="edit-site-welcome-guide"
+			contentLabel={ __( 'Welcome to the site editor' ) }
+			finishButtonText={ __( 'Try Styles' ) }
+			onFinish={ () => toggleFeature( 'welcomeGuide' ) }
+			pages={ [
+				{
+					image: (
+						<WelcomeGuideImage
+							nonAnimatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.svg"
+							animatedSrc="https://s.w.org/images/block-editor/welcome-template-editor.gif"
+						/>
+					),
+					content: (
+						<>
+							<h1 className="edit-site-welcome-guide__heading">
+								{ __( 'Introducing: Styles' ) }
+							</h1>
+							<p className="edit-site-welcome-guide__text">
+								{ __(
+									'Try out and apply new colors, typography, and layout across your entire site. You can also customize the appearance of specific blocks, meaning that all paragraph blocks can appear the same with a few clicks.'
+								) }
+							</p>
+						</>
+					),
+				},
+			] }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/welcome-guide/style.scss b/packages/edit-site/src/components/welcome-guide/style.scss
new file mode 100644
index 0000000000000..bcb77e4a47d12
--- /dev/null
+++ b/packages/edit-site/src/components/welcome-guide/style.scss
@@ -0,0 +1,33 @@
+.edit-site-welcome-guide {
+	width: 312px;
+
+	&__image {
+		background: #00a0d2;
+		margin: 0 0 $grid-unit-20;
+		> img {
+			display: block;
+			max-width: 100%;
+			object-fit: cover;
+		}
+	}
+
+	&__heading {
+		font-family: $default-font;
+		font-size: 24px;
+		line-height: 1.4;
+		margin: $grid-unit-20 0 $grid-unit-20 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__text {
+		font-size: $default-font-size;
+		line-height: 1.4;
+		margin: 0 0 $grid-unit-30 0;
+		padding: 0 $grid-unit-40;
+	}
+
+	&__inserter-icon {
+		margin: 0 4px;
+		vertical-align: text-top;
+	}
+}
diff --git a/packages/edit-site/src/store/defaults.js b/packages/edit-site/src/store/defaults.js
index d3a1116465d97..58dc0b717d459 100644
--- a/packages/edit-site/src/store/defaults.js
+++ b/packages/edit-site/src/store/defaults.js
@@ -1,3 +1,5 @@
 export const PREFERENCES_DEFAULTS = {
-	features: {},
+	features: {
+		welcomeGuide: true,
+	},
 };
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 97e2a28ea400c..34f225b8f266e 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -14,6 +14,7 @@
 @import "./components/template-details/style.scss";
 @import "./components/template-part-converter/style.scss";
 @import "./components/secondary-sidebar/style.scss";
+@import "./components/welcome-guide/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color.
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations.