diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
index fb81f800c2b98d..9e969842da61fe 100644
--- a/packages/block-editor/src/components/colors-gradients/control.js
+++ b/packages/block-editor/src/components/colors-gradients/control.js
@@ -55,6 +55,7 @@ function ColorGradientControlInner( {
 	clearable,
 	showTitle = true,
 	enableAlpha,
+	headingLevel,
 } ) {
 	const canChooseAColor =
 		onColorChange && ( ! isEmpty( colors ) || ! disableCustomColors );
@@ -84,6 +85,7 @@ function ColorGradientControlInner( {
 				}
 				clearable={ clearable }
 				enableAlpha={ enableAlpha }
+				headingLevel={ headingLevel }
 			/>
 		),
 		[ TAB_GRADIENT.value ]: (
@@ -103,6 +105,7 @@ function ColorGradientControlInner( {
 					__experimentalIsRenderedInSidebar
 				}
 				clearable={ clearable }
+				headingLevel={ headingLevel }
 			/>
 		),
 	};
diff --git a/packages/components/src/color-palette/index.tsx b/packages/components/src/color-palette/index.tsx
index c967703141ea34..77e9fb46f48930 100644
--- a/packages/components/src/color-palette/index.tsx
+++ b/packages/components/src/color-palette/index.tsx
@@ -107,6 +107,7 @@ function MultiplePalettes( {
 	onChange,
 	value,
 	actions,
+	headingLevel,
 }: MultiplePalettesProps ) {
 	if ( colors.length === 0 ) {
 		return null;
@@ -117,7 +118,9 @@ function MultiplePalettes( {
 			{ colors.map( ( { name, colors: colorPalette }, index ) => {
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading>{ name }</ColorHeading>
+						<ColorHeading level={ headingLevel }>
+							{ name }
+						</ColorHeading>
 						<SinglePalette
 							clearColor={ clearColor }
 							colors={ colorPalette }
@@ -183,8 +186,10 @@ function UnforwardedColorPalette(
 		onChange,
 		value,
 		__experimentalIsRenderedInSidebar = false,
+		headingLevel = 2,
 		...otherProps
 	} = props;
+
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
 	const hasMultipleColorOrigins = isMultiplePaletteArray( colors );
@@ -235,6 +240,7 @@ function UnforwardedColorPalette(
 				{ __( 'Clear' ) }
 			</CircularOptionPicker.ButtonAction>
 		),
+		headingLevel,
 	};
 
 	return (
diff --git a/packages/components/src/color-palette/types.ts b/packages/components/src/color-palette/types.ts
index 58f55ad8f758f4..cf7f3e640447c6 100644
--- a/packages/components/src/color-palette/types.ts
+++ b/packages/components/src/color-palette/types.ts
@@ -7,6 +7,7 @@ import type { CSSProperties, ReactNode } from 'react';
  * Internal dependencies
  */
 import type { DropdownProps } from '../dropdown/types';
+import type { HeadingSize } from '../heading/types';
 
 export type ColorObject = {
 	name: string;
@@ -27,6 +28,7 @@ type PaletteProps = {
 	onChange: ( newColor?: string, index?: number ) => void;
 	value?: string;
 	actions?: ReactNode;
+	headingLevel?: HeadingSize;
 };
 
 export type SinglePaletteProps = PaletteProps & {
@@ -80,4 +82,10 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * @default false
 	 */
 	__experimentalIsRenderedInSidebar?: boolean;
+	/**
+	 * The heaeding level.
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
 };
diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
index 1a5338e4591656..e1d3892cc51d50 100644
--- a/packages/components/src/gradient-picker/index.js
+++ b/packages/components/src/gradient-picker/index.js
@@ -77,13 +77,16 @@ function MultipleOrigin( {
 	onChange,
 	value,
 	actions,
+	headingLevel,
 } ) {
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ gradients.map( ( { name, gradients: gradientSet }, index ) => {
 				return (
 					<VStack spacing={ 2 } key={ index }>
-						<ColorHeading>{ name }</ColorHeading>
+						<ColorHeading level={ headingLevel }>
+							{ name }
+						</ColorHeading>
 						<SingleOrigin
 							clearGradient={ clearGradient }
 							gradients={ gradientSet }
@@ -112,6 +115,7 @@ export default function GradientPicker( {
 	clearable = true,
 	disableCustomGradients = false,
 	__experimentalIsRenderedInSidebar,
+	headingLevel = 2,
 } ) {
 	const clearGradient = useCallback(
 		() => onChange( undefined ),
@@ -168,6 +172,7 @@ export default function GradientPicker( {
 								</CircularOptionPicker.ButtonAction>
 							)
 						}
+						headingLevel={ headingLevel }
 					/>
 				) }
 			</VStack>
diff --git a/packages/components/src/palette-edit/index.js b/packages/components/src/palette-edit/index.js
index 5beccbeebfb85a..d90f02d8163e70 100644
--- a/packages/components/src/palette-edit/index.js
+++ b/packages/components/src/palette-edit/index.js
@@ -313,6 +313,7 @@ export default function PaletteEdit( {
 	colors = EMPTY_ARRAY,
 	onChange,
 	paletteLabel,
+	paletteLabelLevel = 2,
 	emptyMessage,
 	canOnlyChangeValues,
 	canReset,
@@ -347,7 +348,9 @@ export default function PaletteEdit( {
 	return (
 		<PaletteEditStyles>
 			<PaletteHStackHeader>
-				<PaletteHeading>{ paletteLabel }</PaletteHeading>
+				<PaletteHeading level={ paletteLabelLevel }>
+					{ paletteLabel }
+				</PaletteHeading>
 				<PaletteActionsContainer>
 					{ hasElements && isEditing && (
 						<DoneButton
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/src/tools-panel/tools-panel-header/component.tsx
index 57416d4d0c311d..281f63728f6596 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel-header/component.tsx
@@ -156,6 +156,7 @@ const ToolsPanelHeader = (
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
+		headingLevel = 2,
 		label: labelText,
 		menuItems,
 		resetAll,
@@ -185,7 +186,7 @@ const ToolsPanelHeader = (
 
 	return (
 		<HStack { ...headerProps } ref={ forwardedRef }>
-			<Heading level={ 2 } className={ headingClassName }>
+			<Heading level={ headingLevel } className={ headingClassName }>
 				{ labelText }
 			</Heading>
 			{ hasMenuItems && (
diff --git a/packages/components/src/tools-panel/tools-panel/component.tsx b/packages/components/src/tools-panel/tools-panel/component.tsx
index fcfa353a0210d7..929868e3f1f8c5 100644
--- a/packages/components/src/tools-panel/tools-panel/component.tsx
+++ b/packages/components/src/tools-panel/tools-panel/component.tsx
@@ -23,6 +23,7 @@ const ToolsPanel = (
 		panelContext,
 		resetAllItems,
 		toggleItem,
+		headingLevel,
 		...toolsPanelProps
 	} = useToolsPanel( props );
 
@@ -33,6 +34,7 @@ const ToolsPanel = (
 					label={ label }
 					resetAll={ resetAllItems }
 					toggleItem={ toggleItem }
+					headingLevel={ headingLevel }
 				/>
 				{ children }
 			</ToolsPanelContext.Provider>
diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
index b95a50a4aa9cbc..bb73d06ce50e0d 100644
--- a/packages/components/src/tools-panel/types.ts
+++ b/packages/components/src/tools-panel/types.ts
@@ -3,6 +3,11 @@
  */
 import type { ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { HeadingSize } from '../heading/types';
+
 type ResetAllFilter = () => void;
 type ResetAll = ( filters?: ResetAllFilter[] ) => void;
 
@@ -47,6 +52,10 @@ export type ToolsPanelProps = {
 	 * last visible `ToolsPanelItem` within the `ToolsPanel`.
 	 */
 	__experimentalLastVisibleItemClass?: string;
+	/**
+	 * The heading level of the panel's header.
+	 */
+	headingLevel: HeadingSize;
 };
 
 export type ToolsPanelHeaderProps = {
@@ -67,6 +76,10 @@ export type ToolsPanelHeaderProps = {
 	 * `onSelect` or `onDeselect` callbacks as appropriate.
 	 */
 	toggleItem: ( label: string ) => void;
+	/**
+	 * The heading level of the panel's header.
+	 */
+	headingLevel: HeadingSize;
 };
 
 export type ToolsPanelItem = {
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index f29adec52b5cec..0f5984b158fc09 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -55,6 +55,7 @@ export default function ColorPalettePanel( { name } ) {
 					colors={ themeColors }
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelLevel={ 3 }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -66,12 +67,14 @@ export default function ColorPalettePanel( { name } ) {
 						colors={ defaultColors }
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelLevel={ 3 }
 				emptyMessage={ __(
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }
diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js
index d3c895b0c28f64..c0e11ab68ef3bc 100644
--- a/packages/edit-site/src/components/global-styles/dimensions-panel.js
+++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js
@@ -413,7 +413,11 @@ export default function DimensionsPanel( { name, variation = '' } ) {
 	};
 
 	return (
-		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
+		<ToolsPanel
+			label={ __( 'Dimensions' ) }
+			resetAll={ resetAll }
+			headingLevel={ 3 }
+		>
 			{ ( showContentSizeControl || showWideSizeControl ) && (
 				<span className="span-columns">
 					{ __( 'Set the width of the main content area.' ) }
diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index 6febec95e11971..02b2f5c1ca4f77 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -75,6 +75,7 @@ export default function GradientPalettePanel( { name } ) {
 					gradients={ themeGradients }
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
+					paletteLabelLevel={ 3 }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -86,12 +87,14 @@ export default function GradientPalettePanel( { name } ) {
 						gradients={ defaultGradients }
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
+						paletteLabelLevel={ 3 }
 					/>
 				) }
 			<PaletteEdit
 				gradients={ customGradients }
 				onChange={ setCustomGradients }
 				paletteLabel={ __( 'Custom' ) }
+				paletteLabelLevel={ 3 }
 				emptyMessage={ __(
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
@@ -99,7 +102,7 @@ export default function GradientPalettePanel( { name } ) {
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>
-					<Subtitle>{ __( 'Duotone' ) }</Subtitle>
+					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
 					<Spacer margin={ 3 } />
 					<DuotonePicker
 						duotonePalette={ duotonePalette }
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index 8167925098a68d..11923d4f916cc3 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -29,7 +29,13 @@ function ScreenHeader( { title, description } ) {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<Spacer>
-							<Heading level={ 5 }>{ title }</Heading>
+							<Heading
+								className="edit-site-global-styles-header"
+								level={ 2 }
+								size={ 13 }
+							>
+								{ title }
+							</Heading>
 						</Spacer>
 					</HStack>
 				</Spacer>
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 09148a55bd57a7..288403407a197e 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -65,7 +65,7 @@ function Palette( { name } ) {
 
 	return (
 		<VStack spacing={ 3 }>
-			<Subtitle>{ __( 'Palette' ) }</Subtitle>
+			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
 			<ItemGroup isBordered isSeparated>
 				<NavigationButtonAsItem
 					path={ screenPath }
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index ad0a5124f03a37..1a551db3bfe079 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -122,6 +122,7 @@ function ScreenBackgroundColor( { name, variation = '' } ) {
 				showTitle={ false }
 				enableAlpha
 				__experimentalIsRenderedInSidebar
+				headingLevel={ 3 }
 				{ ...controlProps }
 			/>
 		</>
diff --git a/packages/edit-site/src/components/global-styles/screen-button-color.js b/packages/edit-site/src/components/global-styles/screen-button-color.js
index 2ee286e574f470..1c2e19391dc822 100644
--- a/packages/edit-site/src/components/global-styles/screen-button-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-button-color.js
@@ -64,9 +64,9 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				) }
 			/>
 
-			<h4 className="edit-site-global-styles-section-title">
+			<h3 className="edit-site-global-styles-section-title">
 				{ __( 'Text color' ) }
-			</h4>
+			</h3>
 
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
@@ -78,11 +78,12 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				colorValue={ buttonTextColor }
 				onColorChange={ setButtonTextColor }
 				clearable={ buttonTextColor === userButtonTextColor }
+				headingLevel={ 4 }
 			/>
 
-			<h4 className="edit-site-global-styles-section-title">
+			<h3 className="edit-site-global-styles-section-title">
 				{ __( 'Background color' ) }
-			</h4>
+			</h3>
 
 			<ColorGradientControl
 				className="edit-site-screen-button-color__control"
@@ -94,6 +95,7 @@ function ScreenButtonColor( { name, variation = '' } ) {
 				colorValue={ buttonBgColor }
 				onColorChange={ setButtonBgColor }
 				clearable={ buttonBgColor === userButtonBgColor }
+				headingLevel={ 4 }
 			/>
 		</>
 	);
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 d4a5ba84ce646a..9ed6c570566b08 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -233,7 +233,7 @@ function ScreenColors( { name, variation = '' } ) {
 					<Palette name={ name } />
 
 					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
 							<BackgroundColorItem
 								name={ name }
diff --git a/packages/edit-site/src/components/global-styles/screen-heading-color.js b/packages/edit-site/src/components/global-styles/screen-heading-color.js
index 16b2aad6b3f1c3..de15234b6e73dc 100644
--- a/packages/edit-site/src/components/global-styles/screen-heading-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-heading-color.js
@@ -125,7 +125,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-heading-color">
-				<h4>{ __( 'Select heading level' ) }</h4>
+				<h3>{ __( 'Select heading level' ) }</h3>
 
 				<ToggleGroupControl
 					__nextHasNoMarginBottom
@@ -151,7 +151,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 			</div>
 			{ hasTextColor && (
 				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
+					<h3>
 						{ selectedLevel === 'heading'
 							? __( 'Text color for all heading levels' )
 							: sprintf(
@@ -159,7 +159,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 									__( 'Text color for %s' ),
 									selectedLevel.toUpperCase()
 							  ) }
-					</h4>
+					</h3>
 					<ColorGradientControl
 						className="edit-site-screen-heading-text-color__control"
 						colors={ colorsPerOrigin }
@@ -170,12 +170,13 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 						colorValue={ color }
 						onColorChange={ setColor }
 						clearable={ color === userColor }
+						headingLevel={ 4 }
 					/>
 				</div>
 			) }
 			{ hasBackgroundColor && (
 				<div className="edit-site-global-styles-screen-heading-color">
-					<h4>
+					<h3>
 						{ selectedLevel === 'heading'
 							? __( 'Background color for all heading levels' )
 							: sprintf(
@@ -183,7 +184,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 									__( 'Background color for %s' ),
 									selectedLevel.toUpperCase()
 							  ) }
-					</h4>
+					</h3>
 					<ColorGradientControl
 						className="edit-site-screen-heading-background-color__control"
 						colors={ colorsPerOrigin }
@@ -193,6 +194,7 @@ function ScreenHeadingColor( { name, variation = '' } ) {
 						showTitle={ false }
 						enableAlpha
 						__experimentalIsRenderedInSidebar
+						headingLevel={ 4 }
 						{ ...controlProps }
 					/>
 				</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
index 6403ff97e035a1..c83693e52e1937 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -111,6 +111,7 @@ function ScreenLinkColor( { name, variation = '' } ) {
 									pseudoSelectorConfig.value ===
 									pseudoSelectorConfig.userValue
 								}
+								headingLevel={ 3 }
 							/>
 						</>
 					);
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
index 03dc46059333b3..e6202326d4edb0 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -53,6 +53,7 @@ function ScreenTextColor( { name, variation = '' } ) {
 				colorValue={ color }
 				onColorChange={ setColor }
 				clearable={ color === userColor }
+				headingLevel={ 3 }
 			/>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 6c813c454a2fcf..b7e89027d92ed2 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -109,7 +109,7 @@ function ScreenTypography( { name, variation = '' } ) {
 			{ ! name && (
 				<div className="edit-site-global-styles-screen-typography">
 					<VStack spacing={ 3 }>
-						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
 							<Item
 								name={ name }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index fa2fb6f5125c72..17dddc4d7f6a4d 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -65,6 +65,11 @@ $block-preview-height: 150px;
 	padding: 0 $grid-unit-20;
 }
 
+.edit-site-global-styles-header {
+	// Need to override the too specific bottom margin for complementary areas.
+	margin-bottom: 0 !important;
+}
+
 .edit-site-global-styles-subtitle {
 	// Need to override the too specific styles for complementary areas.
 	margin-bottom: 0 !important;
diff --git a/packages/edit-site/src/components/global-styles/subtitle.js b/packages/edit-site/src/components/global-styles/subtitle.js
index 7488f2dd792097..3a8e7ed9cd6f01 100644
--- a/packages/edit-site/src/components/global-styles/subtitle.js
+++ b/packages/edit-site/src/components/global-styles/subtitle.js
@@ -3,9 +3,12 @@
  */
 import { __experimentalHeading as Heading } from '@wordpress/components';
 
-function Subtitle( { children } ) {
+function Subtitle( { children, level } ) {
 	return (
-		<Heading className="edit-site-global-styles-subtitle" level={ 2 }>
+		<Heading
+			className="edit-site-global-styles-subtitle"
+			level={ level ?? 2 }
+		>
 			{ children }
 		</Heading>
 	);