diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
index b2678d1892af95..911629949c0005 100644
--- a/packages/edit-site/src/components/global-styles/preview.js
+++ b/packages/edit-site/src/components/global-styles/preview.js
@@ -44,6 +44,8 @@ const secondFrame = {
 const normalizedWidth = 248;
 const normalizedHeight = 152;
 
+const normalizedColorSwatchSize = 32;
+
 const StylesPreview = ( { label, isFocused } ) => {
 	const [ fontWeight ] = useStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' );
@@ -134,10 +136,15 @@ const StylesPreview = ( { label, isFocused } ) => {
 								<div
 									key={ slug }
 									style={ {
-										height: 30 * ratio,
-										width: 30 * ratio,
+										height:
+											normalizedColorSwatchSize * ratio,
+										width:
+											normalizedColorSwatchSize * ratio,
 										background: color,
-										borderRadius: 15 * ratio,
+										borderRadius:
+											( normalizedColorSwatchSize *
+												ratio ) /
+											2,
 									} }
 								/>
 							) ) }