diff --git a/packages/edit-site/src/components/global-styles/color-utils.js b/packages/edit-site/src/components/global-styles/color-utils.js
new file mode 100644
index 0000000000000..6ff99bbfe678d
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/color-utils.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+
+import { getSupportedGlobalStylesPanels } from './hooks';
+
+export function useHasColorPanel( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	return (
+		supports.includes( 'color' ) ||
+		supports.includes( 'backgroundColor' ) ||
+		supports.includes( 'background' ) ||
+		supports.includes( 'linkColor' )
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index 7686945e2621f..70b33622ba5a4 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-panel';
+import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import NavigationButton from './navigation-button';
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 021392fcc5ab6..a729694d00d82 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -26,40 +26,32 @@ function Palette( { name } ) {
 		: '/blocks/' + name + '/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>
+		<VStack spacing={ 3 }>
+			<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>
 	);
 }
 
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index c691e1134fe90..da8669a4adab0 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -18,11 +18,12 @@ const StylesPreview = () => {
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
+	const [ gradientValue ] = useStyle( 'color.gradient' );
 
 	return (
 		<Card
 			className="edit-site-global-styles-preview"
-			style={ { background: backgroundColor } }
+			style={ { background: gradientValue ?? backgroundColor } }
 		>
 			<HStack spacing={ 5 }>
 				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
diff --git a/packages/edit-site/src/components/global-styles/color-panel.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
similarity index 57%
rename from packages/edit-site/src/components/global-styles/color-panel.js
rename to packages/edit-site/src/components/global-styles/screen-background-color.js
index 64d7ff33f1e6a..75a47f3f37fb8 100644
--- a/packages/edit-site/src/components/global-styles/color-panel.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -1,27 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-
+import ScreenHeader from './header';
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
-import Palette from './palette';
-
-export function useHasColorPanel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		supports.includes( 'color' ) ||
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' ) ||
-		supports.includes( 'linkColor' )
-	);
-}
 
-export default function ColorPanel( { name } ) {
+function ScreenBackgroundColor( { name } ) {
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -31,18 +21,8 @@ export default function ColorPanel( { name } ) {
 		name
 	);
 
-	const [ isLinkEnabled ] = useSetting( 'color.link', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
 	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
 
-	const hasLinkColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
@@ -50,9 +30,6 @@ export default function ColorPanel( { name } ) {
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
 		( gradients.length > 0 || areCustomGradientsEnabled );
-
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
 		'color.background',
 		name
@@ -64,26 +41,12 @@ export default function ColorPanel( { name } ) {
 	);
 	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
 	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
-	const [ linkColor, setLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name
-	);
-	const [ userLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name,
-		'user'
-	);
 
-	const settings = [];
-	if ( hasTextColor ) {
-		settings.push( {
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		} );
+	if ( ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
 	}
 
+	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -107,26 +70,22 @@ export default function ColorPanel( { name } ) {
 		}
 	}
 
-	if ( hasBackgroundColor || hasGradientColor ) {
-		settings.push( {
-			...backgroundSettings,
-			...gradientSettings,
-			label: __( 'Background color' ),
-		} );
-	}
-
-	if ( hasLinkColor ) {
-		settings.push( {
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		} );
-	}
+	settings.push( {
+		...backgroundSettings,
+		...gradientSettings,
+		label: __( 'Background color' ),
+	} );
 
 	return (
 		<>
-			<Palette contextName={ name } />
+			<ScreenHeader
+				back={ parentMenu + '/colors' }
+				title={ __( 'Background' ) }
+				description={ __(
+					'Set the background color choosing from the palette or pick your own'
+				) }
+			/>
+
 			<PanelColorGradientSettings
 				title={ __( 'Color' ) }
 				settings={ settings }
@@ -139,3 +98,5 @@ export default function ColorPanel( { name } ) {
 		</>
 	);
 }
+
+export default ScreenBackgroundColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index 159d273650675..354d49de2ef25 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-panel';
+import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 09079bdc9d9d9..9c77c067e7bb2 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -2,12 +2,90 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexItem,
+	ColorIndicator,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import ColorPanel from './color-panel';
 import ScreenHeader from './header';
+import Palette from './palette';
+import NavigationButton from './navigation-button';
+import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
+import Subtitle from './subtitle';
+
+function BackgroundColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport =
+		supports.includes( 'backgroundColor' ) ||
+		supports.includes( 'background' );
+	const [ backgroundColor ] = useStyle( 'color.background', name );
+	const [ gradientValue ] = useStyle( 'color.gradient', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/background' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator
+						colorValue={ gradientValue ?? backgroundColor }
+					/>
+				</FlexItem>
+				<FlexItem>{ __( 'Background' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
+
+function TextColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'color' );
+	const [ color ] = useStyle( 'color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/text' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator colorValue={ color } />
+				</FlexItem>
+				<FlexItem>{ __( 'Text' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
+
+function LinkColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'linkColor' );
+	const [ color ] = useStyle( 'elements.link.color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/link' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator colorValue={ color } />
+				</FlexItem>
+				<FlexItem>{ __( 'Links' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
 
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -21,7 +99,30 @@ function ScreenColors( { name } ) {
 					'Manage color palettes and how they affect the different elements of the site.'
 				) }
 			/>
-			<ColorPanel name={ name } />
+
+			<div className="edit-site-global-styles-screen-colors">
+				<VStack spacing={ 10 }>
+					<Palette contextName={ name } />
+
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<BackgroundColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+							<TextColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+							<LinkColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+						</ItemGroup>
+					</VStack>
+				</VStack>
+			</div>
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
new file mode 100644
index 0000000000000..8c2f468bccebe
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+
+function ScreenLinkColor( { name } ) {
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+
+	const [ isLinkEnabled ] = useSetting( 'color.link', name );
+
+	const hasLinkColor =
+		supports.includes( 'linkColor' ) &&
+		isLinkEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ linkColor, setLinkColor ] = useStyle(
+		'elements.link.color.text',
+		name
+	);
+	const [ userLinkColor ] = useStyle(
+		'elements.link.color.text',
+		name,
+		'user'
+	);
+
+	if ( ! hasLinkColor ) {
+		return null;
+	}
+
+	const settings = [
+		{
+			colorValue: linkColor,
+			onColorChange: setLinkColor,
+			label: __( 'Link color' ),
+			clearable: linkColor === userLinkColor,
+		},
+	];
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu + '/colors' }
+				title={ __( 'Links' ) }
+				description={ __(
+					'Set the link color choosing from the palette or pick your own'
+				) }
+			/>
+
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				showTitle={ false }
+			/>
+		</>
+	);
+}
+
+export default ScreenLinkColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
new file mode 100644
index 0000000000000..fdb02fdba6a64
--- /dev/null
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import ScreenHeader from './header';
+import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
+
+function ScreenTextColor( { name } ) {
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
+	const supports = getSupportedGlobalStylesPanels( name );
+	const [ solids ] = useSetting( 'color.palette', name );
+	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
+	const [ isTextEnabled ] = useSetting( 'color.text', name );
+
+	const hasTextColor =
+		supports.includes( 'color' ) &&
+		isTextEnabled &&
+		( solids.length > 0 || areCustomSolidsEnabled );
+
+	const [ color, setColor ] = useStyle( 'color.text', name );
+	const [ userColor ] = useStyle( 'color.text', name, 'user' );
+
+	if ( ! hasTextColor ) {
+		return null;
+	}
+
+	const settings = [
+		{
+			colorValue: color,
+			onColorChange: setColor,
+			label: __( 'Text color' ),
+			clearable: color === userColor,
+		},
+	];
+
+	return (
+		<>
+			<ScreenHeader
+				back={ parentMenu + '/colors' }
+				title={ __( 'Text' ) }
+				description={ __(
+					'Set the text color choosing from the palette or pick your own'
+				) }
+			/>
+
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				showTitle={ false }
+			/>
+		</>
+	);
+}
+
+export default ScreenTextColor;
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 4d330471cccc6..b17452da64e30 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -16,7 +16,7 @@
 	}
 }
 
-.edit-site-global-style-palette {
+.edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 
 	.component-color-indicator {
@@ -33,3 +33,10 @@
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }
+
+.edit-site-global-styles-subtitle {
+	// Need to override the too specific styles for complementary areas.
+	margin-bottom: 0 !important;
+	text-transform: uppercase;
+	font-weight: 500;
+}
diff --git a/packages/edit-site/src/components/global-styles/subtitle.js b/packages/edit-site/src/components/global-styles/subtitle.js
index dba8ec32bbbb6..7488f2dd79209 100644
--- a/packages/edit-site/src/components/global-styles/subtitle.js
+++ b/packages/edit-site/src/components/global-styles/subtitle.js
@@ -4,7 +4,11 @@
 import { __experimentalHeading as Heading } from '@wordpress/components';
 
 function Subtitle( { children } ) {
-	return <Heading level={ 2 }>{ children }</Heading>;
+	return (
+		<Heading className="edit-site-global-styles-subtitle" level={ 2 }>
+			{ children }
+		</Heading>
+	);
 }
 
 export default Subtitle;
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 180bf343dd120..6f90749cb2fbc 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -16,6 +16,9 @@ import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
+import ScreenBackgroundColor from './screen-background-color';
+import ScreenTextColor from './screen-text-color';
+import ScreenLinkColor from './screen-link-color';
 import ScreenLayout from './screen-layout';
 
 function ContextScreens( { name } ) {
@@ -35,6 +38,18 @@ function ContextScreens( { name } ) {
 				<ScreenColorPalette name={ name } />
 			</NavigatorScreen>
 
+			<NavigatorScreen path={ parentMenu + '/colors/background' }>
+				<ScreenBackgroundColor name={ name } />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/colors/text' }>
+				<ScreenTextColor name={ name } />
+			</NavigatorScreen>
+
+			<NavigatorScreen path={ parentMenu + '/colors/link' }>
+				<ScreenLinkColor name={ name } />
+			</NavigatorScreen>
+
 			<NavigatorScreen path={ parentMenu + '/layout' }>
 				<ScreenLayout name={ name } />
 			</NavigatorScreen>