diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
index e63e0517f299f8..131754cfa54b51 100644
--- a/packages/components/src/item-group/styles.ts
+++ b/packages/components/src/item-group/styles.ts
@@ -32,7 +32,11 @@ export const itemWrapper = css`
 	display: block;
 `;
 
-export const item = itemWrapper;
+export const item = css`
+	width: 100%;
+	display: block;
+	margin: 0;
+`;
 
 export const bordered = css`
 	border: 1px solid ${ CONFIG.surfaceBorderColor };
diff --git a/packages/components/src/item-group/test/__snapshots__/index.js.snap b/packages/components/src/item-group/test/__snapshots__/index.js.snap
index 4e5ee1d89f53de..0c7f8072e17ace 100644
--- a/packages/components/src/item-group/test/__snapshots__/index.js.snap
+++ b/packages/components/src/item-group/test/__snapshots__/index.js.snap
@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-1c3a883-View-large-itemWrapper-spacedAround em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-1c3a883-View-large-itemWrapper-spacedAround em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
-+     class="components-item css-1esf9dc-View-large-itemWrapper em57xhy0"
+-     class="components-item css-4qcpca-View-medium-item em57xhy0"
++     class="components-item css-132y1d5-View-large-item em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -77,6 +77,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
   width: 100%;
   display: block;
+  margin: 0;
   border-radius: 2px;
 }
 
@@ -119,8 +120,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-4qcpca-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -146,8 +147,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-4qcpca-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
diff --git a/packages/edit-site/src/components/sidebar/color-palette-panel.js b/packages/edit-site/src/components/sidebar/color-palette-panel.js
index fbae0697b9c811..ead8f64cc96d48 100644
--- a/packages/edit-site/src/components/sidebar/color-palette-panel.js
+++ b/packages/edit-site/src/components/sidebar/color-palette-panel.js
@@ -63,16 +63,18 @@ export default function ColorPalettePanel( {
 		[ contextName ]
 	);
 	return (
-		<ColorEdit
-			immutableColorSlugs={ immutableColorSlugs }
-			colors={ colors }
-			onChange={ ( newColors ) => {
-				setSetting( contextName, 'color.palette', newColors );
-			} }
-			emptyUI={ __(
-				'Colors are empty! Add some colors to create your own color palette.'
-			) }
-			canReset={ colors === userColors }
-		/>
+		<div className="edit-site-global-styles-color-palette-panel">
+			<ColorEdit
+				immutableColorSlugs={ immutableColorSlugs }
+				colors={ colors }
+				onChange={ ( newColors ) => {
+					setSetting( contextName, 'color.palette', newColors );
+				} }
+				emptyUI={ __(
+					'Colors are empty! Add some colors to create your own color palette.'
+				) }
+				canReset={ colors === userColors }
+			/>
+		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
index adf9ea969be1af..51c0b794e2a381 100644
--- a/packages/edit-site/src/components/sidebar/color-panel.js
+++ b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { useSetting } from '../editor/utils';
-import ColorPalettePanel from './color-palette-panel';
+import Palette from './global-styles/palette';
 
 export function useHasColorPanel( { supports } ) {
 	return (
@@ -24,8 +24,6 @@ export default function ColorPanel( {
 	context: { supports, name },
 	getStyle,
 	setStyle,
-	getSetting,
-	setSetting,
 } ) {
 	const solids = useSetting( 'color.palette', name );
 	const gradients = useSetting( 'color.gradients', name );
@@ -116,21 +114,17 @@ export default function ColorPanel( {
 	}
 
 	return (
-		<PanelColorGradientSettings
-			title={ __( 'Color' ) }
-			settings={ settings }
-			colors={ solids }
-			gradients={ gradients }
-			disableCustomColors={ ! areCustomSolidsEnabled }
-			disableCustomGradients={ ! areCustomGradientsEnabled }
-			showTitle={ false }
-		>
-			<ColorPalettePanel
-				key={ 'color-palette-panel-' + name }
-				contextName={ name }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
+		<>
+			<Palette contextName={ name } />
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				gradients={ gradients }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				disableCustomGradients={ ! areCustomGradientsEnabled }
+				showTitle={ false }
 			/>
-		</PanelColorGradientSettings>
+		</>
 	);
 }
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 5bd826922f1ced..f55e6480a451f1 100644
--- a/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
+++ b/packages/edit-site/src/components/sidebar/global-styles-sidebar.js
@@ -10,27 +10,12 @@ import {
 	Button,
 	__experimentalNavigator as Navigator,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHeading as Heading,
-	__experimentalView as View,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
-import {
-	Icon,
-	layout,
-	brush,
-	styles,
-	typography,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
+import { layout, brush, styles, typography } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -46,11 +31,14 @@ import {
 } from './typography-panel';
 import { default as BorderPanel, useHasBorderPanel } from './border-panel';
 import { default as ColorPanel, useHasColorPanel } from './color-panel';
+import ColorPalettePanel from './color-palette-panel';
 import {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
 import { StylePreview } from './global-styles/preview';
+import NavigationButton from './global-styles/navigation-button';
+import ScreenHeader from './global-styles/screen-header';
 
 function getPanelTitle( blockName ) {
 	const blockType = getBlockType( blockName );
@@ -64,31 +52,6 @@ function getPanelTitle( blockName ) {
 	return blockType.title;
 }
 
-const ScreenHeader = ( { back, title } ) => {
-	return (
-		<VStack spacing={ 5 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationButton
-						path={ back }
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
-						size="small"
-						isBack
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
-				</Spacer>
-			</HStack>
-		</VStack>
-	);
-};
-
 function GlobalStylesLevelMenu( { context, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( context );
 	const hasColorPanel = useHasColorPanel( context );
@@ -139,6 +102,7 @@ function GlobalStylesLevelScreens( {
 	const hasBorderPanel = useHasBorderPanel( context );
 	const hasDimensionsPanel = useHasDimensionsPanel( context );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+
 	return (
 		<>
 			{ hasTypographyPanel && (
@@ -160,11 +124,29 @@ function GlobalStylesLevelScreens( {
 					<ScreenHeader
 						back={ parentMenu ? parentMenu : '/' }
 						title={ __( 'Colors' ) }
+						description={ __(
+							'Manage the color palette and how it applies to the elements of your site'
+						) }
 					/>
 					<ColorPanel
 						context={ context }
 						getStyle={ getStyle }
 						setStyle={ setStyle }
+					/>
+				</NavigatorScreen>
+			) }
+
+			{ hasColorPanel && (
+				<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+					<ScreenHeader
+						back={ parentMenu + '/colors' }
+						title={ __( 'Color Palette' ) }
+						description={ __(
+							'Manage the color palette of your site'
+						) }
+					/>
+					<ColorPalettePanel
+						contextName={ context.name }
 						getSetting={ getSetting }
 						setSetting={ setSetting }
 					/>
@@ -197,28 +179,6 @@ function GlobalStylesLevelScreens( {
 	);
 }
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
-	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
-			<HStack justify="flex-start">
-				{ icon && (
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
-				) }
-				<FlexItem>{ children }</FlexItem>
-			</HStack>
-		</Item>
-	);
-}
-
 export default function GlobalStylesSidebar() {
 	const {
 		root,
diff --git a/packages/edit-site/src/components/sidebar/global-styles/navigation-button.js b/packages/edit-site/src/components/sidebar/global-styles/navigation-button.js
new file mode 100644
index 00000000000000..c891a79302b4b7
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/navigation-button.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItem as Item,
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+
+function NavigationButton( {
+	path,
+	icon,
+	children,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+			{ icon && (
+				<HStack justify="flex-start">
+					<FlexItem>
+						<Icon icon={ icon } size={ 24 } />
+					</FlexItem>
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
+
+export default NavigationButton;
diff --git a/packages/edit-site/src/components/sidebar/global-styles/palette.js b/packages/edit-site/src/components/sidebar/global-styles/palette.js
new file mode 100644
index 00000000000000..6a7c0a2c0a64e6
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/palette.js
@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalVStack as VStack,
+	FlexBlock,
+	ColorIndicator,
+} from '@wordpress/components';
+import { __, _n, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Subtitle from './subtitle';
+import { useSetting } from '../../editor/utils';
+import NavigationButton from './navigation-button';
+
+function Palette( { contextName } ) {
+	const colors = useSetting( 'color.palette', contextName );
+	const screenPath =
+		contextName === 'root'
+			? '/colors/palette'
+			: '/blocks/' + contextName + '/colors/palette';
+
+	return (
+		<div className="edit-site-global-style-palette">
+			<VStack spacing={ 1 }>
+				<Subtitle>{ __( 'Palette' ) }</Subtitle>
+				<ItemGroup isBordered isSeparated>
+					<NavigationButton path={ screenPath }>
+						<HStack>
+							<FlexBlock>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color } ) => (
+											<ColorIndicator
+												key={ color }
+												colorValue={ color }
+											/>
+										) ) }
+								</ZStack>
+							</FlexBlock>
+							<FlexItem>
+								{ sprintf(
+									// Translators: %d: Number of palette colors.
+									_n(
+										'%d color',
+										'%d colors',
+										colors.length
+									),
+									colors.length
+								) }
+							</FlexItem>
+						</HStack>
+					</NavigationButton>
+				</ItemGroup>
+			</VStack>
+		</div>
+	);
+}
+
+export default Palette;
diff --git a/packages/edit-site/src/components/sidebar/global-styles/screen-header.js b/packages/edit-site/src/components/sidebar/global-styles/screen-header.js
new file mode 100644
index 00000000000000..17a8db0dcc1fdc
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/screen-header.js
@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHeading as Heading,
+	__experimentalView as View,
+} from '@wordpress/components';
+import { isRTL } from '@wordpress/i18n';
+import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import NavigationButton from './navigation-button';
+
+function ScreenHeader( { back, title, description } ) {
+	return (
+		<VStack spacing={ 2 }>
+			<HStack spacing={ 2 }>
+				<View>
+					<NavigationButton
+						path={ back }
+						icon={
+							<Icon
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								variant="muted"
+							/>
+						}
+						size="small"
+						isBack
+					/>
+				</View>
+				<Spacer>
+					<Heading level={ 5 }>{ title }</Heading>
+				</Spacer>
+			</HStack>
+			{ description && (
+				<p className="edit-site-global-styles-screen-header__description">
+					{ description }
+				</p>
+			) }
+		</VStack>
+	);
+}
+
+export default ScreenHeader;
diff --git a/packages/edit-site/src/components/sidebar/global-styles/style.scss b/packages/edit-site/src/components/sidebar/global-styles/style.scss
index 9dd563efad2bfa..299bf9547fa19c 100644
--- a/packages/edit-site/src/components/sidebar/global-styles/style.scss
+++ b/packages/edit-site/src/components/sidebar/global-styles/style.scss
@@ -15,3 +15,20 @@
 	}
 }
 
+.edit-site-global-style-palette {
+	margin: $grid-unit-20;
+
+	.component-color-indicator {
+		display: block;
+		border-radius: 50%;
+		border: 0;
+		height: 24px;
+		width: 24px;
+		margin-left: 0;
+		padding: 0;
+	}
+}
+
+.edit-site-global-styles-screen-header__description {
+	padding: 0 $grid-unit-20;
+}
diff --git a/packages/edit-site/src/components/sidebar/global-styles/subtitle.js b/packages/edit-site/src/components/sidebar/global-styles/subtitle.js
new file mode 100644
index 00000000000000..dba8ec32bbbb67
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/global-styles/subtitle.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHeading as Heading } from '@wordpress/components';
+
+function Subtitle( { children } ) {
+	return <Heading level={ 2 }>{ children }</Heading>;
+}
+
+export default Subtitle;
diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss
index 12f760ff322e69..65c5bd6c054ab1 100644
--- a/packages/edit-site/src/components/sidebar/style.scss
+++ b/packages/edit-site/src/components/sidebar/style.scss
@@ -61,3 +61,7 @@
 .edit-site-global-styles-sidebar__blocks-group-help {
 	padding: 0 $grid-unit-20;
 }
+
+.edit-site-global-styles-color-palette-panel {
+	padding: $grid-unit-20;
+}
diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss
index cf868690f4aa40..3eb5c897d668dc 100644
--- a/packages/interface/src/components/complementary-area-header/style.scss
+++ b/packages/interface/src/components/complementary-area-header/style.scss
@@ -31,3 +31,11 @@
 		}
 	}
 }
+
+// This overrides the negative margins between two consecutives panels.
+// since the first panel is hidden.
+.components-panel__header + .interface-complementary-area-header {
+	@include break-medium() {
+		margin-top: 0;
+	}
+}