diff --git a/projects/packages/seo/_inc/components/dashboard-load-error.module.scss b/projects/packages/seo/_inc/components/dashboard-load-error.module.scss
new file mode 100644
index 000000000000..0d396a017283
--- /dev/null
+++ b/projects/packages/seo/_inc/components/dashboard-load-error.module.scss
@@ -0,0 +1,10 @@
+.root {
+	padding-block: 64px;
+	padding-inline: 24px;
+	text-align: center;
+}
+
+.body {
+	margin-block-end: var(--wpds-dimension-gap-sm);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+}
diff --git a/projects/packages/seo/_inc/components/dashboard-load-error.scss b/projects/packages/seo/_inc/components/dashboard-load-error.scss
deleted file mode 100644
index 7243ab26f335..000000000000
--- a/projects/packages/seo/_inc/components/dashboard-load-error.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.jetpack-seo-load-error {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 64px 24px;
-	text-align: center;
-
-	&__title {
-		margin: 0;
-		font-size: 20px;
-		font-weight: 600;
-	}
-
-	&__body {
-		margin: 0 0 8px;
-		color: #757575;
-	}
-}
diff --git a/projects/packages/seo/_inc/components/dashboard-load-error.tsx b/projects/packages/seo/_inc/components/dashboard-load-error.tsx
index deb9b416ef9f..15293c731401 100644
--- a/projects/packages/seo/_inc/components/dashboard-load-error.tsx
+++ b/projects/packages/seo/_inc/components/dashboard-load-error.tsx
@@ -1,6 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/ui';
-import './dashboard-load-error.scss';
+import { Button, Stack, Text } from '@wordpress/ui';
+import styles from './dashboard-load-error.module.scss';
 import type { FC } from 'react';
 
 interface Props {
@@ -18,15 +18,15 @@ interface Props {
  * @return The load-error state.
  */
 const DashboardLoadError: FC< Props > = ( { onRetry } ) => (
-	<div className="jetpack-seo-load-error">
-		<h2 className="jetpack-seo-load-error__title">
+	<Stack direction="column" align="center" justify="center" gap="sm" className={ styles.root }>
+		<Text variant="heading-xl" render={ <h2 /> }>
 			{ __( 'We couldn’t load this page', 'jetpack-seo' ) }
-		</h2>
-		<p className="jetpack-seo-load-error__body">
+		</Text>
+		<Text variant="body-md" render={ <p /> } className={ styles.body }>
 			{ __( 'This is usually temporary. Give it another try.', 'jetpack-seo' ) }
-		</p>
+		</Text>
 		<Button onClick={ onRetry }>{ __( 'Try again', 'jetpack-seo' ) }</Button>
-	</div>
+	</Stack>
 );
 
 export default DashboardLoadError;
diff --git a/projects/packages/seo/_inc/components/dashboard-skeleton.module.scss b/projects/packages/seo/_inc/components/dashboard-skeleton.module.scss
new file mode 100644
index 000000000000..0c5af5d9f7ee
--- /dev/null
+++ b/projects/packages/seo/_inc/components/dashboard-skeleton.module.scss
@@ -0,0 +1,34 @@
+.line {
+	block-size: var(--wpds-dimension-size-3xs);
+	border-radius: var(--wpds-border-radius-md);
+	background: var(--wpds-color-background-track-neutral);
+	animation: dashboard-skeleton-pulse var(--wpds-motion-duration-xl) var(--wpds-motion-easing-balanced) infinite;
+}
+
+.title {
+	inline-size: 40%;
+	block-size: var(--wpds-dimension-size-2xs);
+}
+
+.short {
+	inline-size: 60%;
+}
+
+@keyframes dashboard-skeleton-pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0.4;
+	}
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+
+	.line {
+		animation: none;
+	}
+}
diff --git a/projects/packages/seo/_inc/components/dashboard-skeleton.scss b/projects/packages/seo/_inc/components/dashboard-skeleton.scss
deleted file mode 100644
index 7dad2f95d1e6..000000000000
--- a/projects/packages/seo/_inc/components/dashboard-skeleton.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.jetpack-seo-skeleton {
-	display: flex;
-	flex-direction: column;
-	gap: 16px;
-
-	// Visually hidden, but announced by screen readers via the role="status".
-	&__label {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip-path: inset(50%);
-		white-space: nowrap;
-		border: 0;
-	}
-
-	&__card {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		padding: 24px;
-		background: #fff;
-		border: 1px solid #e0e0e0;
-		border-radius: 4px;
-	}
-
-	&__line {
-		height: 12px;
-		border-radius: 4px;
-		background: #e0e0e0;
-		animation: jetpack-seo-skeleton-pulse 1.4s ease-in-out infinite;
-
-		&--title {
-			width: 40%;
-			height: 16px;
-		}
-
-		&--short {
-			width: 60%;
-		}
-	}
-}
-
-@keyframes jetpack-seo-skeleton-pulse {
-
-	0%,
-	100% {
-		opacity: 1;
-	}
-
-	50% {
-		opacity: 0.4;
-	}
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-
-	.jetpack-seo-skeleton__line {
-		animation: none;
-	}
-}
diff --git a/projects/packages/seo/_inc/components/dashboard-skeleton.tsx b/projects/packages/seo/_inc/components/dashboard-skeleton.tsx
index 3dd66aea199b..f8a92754f553 100644
--- a/projects/packages/seo/_inc/components/dashboard-skeleton.tsx
+++ b/projects/packages/seo/_inc/components/dashboard-skeleton.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
-import './dashboard-skeleton.scss';
+import { Card, Stack, VisuallyHidden } from '@wordpress/ui';
+import styles from './dashboard-skeleton.module.scss';
 import type { FC } from 'react';
 
 /**
@@ -11,16 +12,20 @@ import type { FC } from 'react';
  * @return The skeleton placeholder.
  */
 const DashboardSkeleton: FC = () => (
-	<div className="jetpack-seo-skeleton" role="status" aria-busy="true">
-		<span className="jetpack-seo-skeleton__label">{ __( 'Loading…', 'jetpack-seo' ) }</span>
+	<Stack direction="column" gap="lg" role="status" aria-busy="true">
+		<VisuallyHidden>{ __( 'Loading…', 'jetpack-seo' ) }</VisuallyHidden>
 		{ [ 0, 1, 2 ].map( index => (
-			<div key={ index } className="jetpack-seo-skeleton__card" aria-hidden="true">
-				<div className="jetpack-seo-skeleton__line jetpack-seo-skeleton__line--title" />
-				<div className="jetpack-seo-skeleton__line" />
-				<div className="jetpack-seo-skeleton__line jetpack-seo-skeleton__line--short" />
-			</div>
+			<Card.Root key={ index } aria-hidden="true">
+				<Card.Content>
+					<Stack direction="column" gap="md">
+						<div className={ `${ styles.line } ${ styles.title }` } />
+						<div className={ styles.line } />
+						<div className={ `${ styles.line } ${ styles.short }` } />
+					</Stack>
+				</Card.Content>
+			</Card.Root>
 		) ) }
-	</div>
+	</Stack>
 );
 
 export default DashboardSkeleton;
diff --git a/projects/packages/seo/_inc/components/enable-seo-card.tsx b/projects/packages/seo/_inc/components/enable-seo-card.tsx
index 29c3d7411c03..5f157b42839f 100644
--- a/projects/packages/seo/_inc/components/enable-seo-card.tsx
+++ b/projects/packages/seo/_inc/components/enable-seo-card.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-no-bind */
 
 import { __ } from '@wordpress/i18n';
-import { Button, Card, Stack } from '@wordpress/ui';
+import { Button, Card, Stack, Text } from '@wordpress/ui';
 import useSeoToolsToggle from '../data/use-seo-tools-toggle';
 import type { FC } from 'react';
 
@@ -22,12 +22,12 @@ const EnableSeoCard: FC = () => {
 			</Card.Header>
 			<Card.Content>
 				<Stack direction="column" gap="md">
-					<p>
+					<Text variant="body-md" render={ <p /> }>
 						{ __(
 							'SEO tools help your content get found: customize titles and meta descriptions, generate a sitemap, verify your site with search engines, and control how pages look when shared. Turn it on to manage all of it from here.',
 							'jetpack-seo'
 						) }
-					</p>
+					</Text>
 					<div>
 						<Button
 							onClick={ () => setActive( true ) }
diff --git a/projects/packages/seo/_inc/dashboard/dashboard-page.tsx b/projects/packages/seo/_inc/dashboard/dashboard-page.tsx
index 6143bd610d2f..3e75caba4d6d 100644
--- a/projects/packages/seo/_inc/dashboard/dashboard-page.tsx
+++ b/projects/packages/seo/_inc/dashboard/dashboard-page.tsx
@@ -1,5 +1,6 @@
 import { AdminPage, ThemeProvider } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import clsx from 'clsx';
 import DashboardNav from './dashboard-nav';
 import '../admin-page-layout.scss';
 import type { SeoTab } from './dashboard-nav';
@@ -49,9 +50,9 @@ const DashboardPage = ( { active, showFooter = true, flush = false, children }:
 		>
 			<DashboardNav active={ active }>
 				<div
-					className={ `jetpack-seo-page-content${
-						flush ? ' jetpack-seo-page-content--flush' : ''
-					}` }
+					className={ clsx( 'jetpack-seo-page-content', {
+						'jetpack-seo-page-content--flush': flush,
+					} ) }
 				>
 					{ children }
 				</div>
diff --git a/projects/packages/seo/_inc/screens/ai/index.tsx b/projects/packages/seo/_inc/screens/ai/index.tsx
index 8340790ab06c..c14de1e0f133 100644
--- a/projects/packages/seo/_inc/screens/ai/index.tsx
+++ b/projects/packages/seo/_inc/screens/ai/index.tsx
@@ -48,7 +48,7 @@ const AiScreen: FC< Props > = ( { form } ) => {
 	}
 
 	return (
-		<div className="jetpack-seo-ai">
+		<div>
 			<CollapsibleCard.Root defaultOpen>
 				<CollapsibleCard.Header>
 					<Card.Title>{ __( 'AI SEO Enhancer', 'jetpack-seo' ) }</Card.Title>
diff --git a/projects/packages/seo/_inc/screens/content/index.tsx b/projects/packages/seo/_inc/screens/content/index.tsx
index 136b0bac4579..27f2128a981f 100644
--- a/projects/packages/seo/_inc/screens/content/index.tsx
+++ b/projects/packages/seo/_inc/screens/content/index.tsx
@@ -5,7 +5,7 @@ import { pencil } from '@wordpress/icons';
 import { useNavigate } from '@wordpress/route';
 import { Badge, IconButton, Link } from '@wordpress/ui';
 import useSeoPosts from '../../data/use-seo-posts';
-import './style.scss';
+import styles from './style.module.scss';
 import type { ContentRow } from '../../data/content-types';
 import type { Field, Operator, View } from '@wordpress/dataviews';
 import type { FC } from 'react';
@@ -253,7 +253,7 @@ const ContentScreen: FC = () => {
 	const getItemId = useCallback( ( item: ContentRow ) => String( item.id ), [] );
 
 	return (
-		<div className="jetpack-seo-content">
+		<div className={ styles.root }>
 			<DataViews
 				data={ data }
 				fields={ fields as Field< unknown >[] }
diff --git a/projects/packages/seo/_inc/screens/content/seo-inspector.tsx b/projects/packages/seo/_inc/screens/content/seo-inspector.tsx
index dae8b177265e..0ebe7c035076 100644
--- a/projects/packages/seo/_inc/screens/content/seo-inspector.tsx
+++ b/projects/packages/seo/_inc/screens/content/seo-inspector.tsx
@@ -9,9 +9,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { Button, IconButton } from '@wordpress/ui';
+import { Button, IconButton, Stack, Text } from '@wordpress/ui';
 import { coverageStore } from '../../data/coverage-store';
 import SerpPreview from './serp-preview';
+import styles from './style.module.scss';
 import type { ContentPostType, SchemaType, SeoPostMeta } from '../../data/content-types';
 import type { FC } from 'react';
 
@@ -225,11 +226,16 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 	const permalink = ( editedRecord as { link?: string } | undefined )?.link ?? '';
 
 	return (
-		<div className="jetpack-seo-content__inspector" aria-label={ __( 'Edit SEO', 'jetpack-seo' ) }>
-			<div className="jetpack-seo-content__inspector-header">
-				<h2 className="jetpack-seo-content__inspector-title">
+		<Stack
+			direction="column"
+			gap="lg"
+			className={ styles.inspector }
+			aria-label={ __( 'Edit SEO', 'jetpack-seo' ) }
+		>
+			<Stack direction="row" align="center" justify="space-between" gap="sm">
+				<Text variant="heading-lg" render={ <h2 /> }>
 					{ __( 'Edit SEO', 'jetpack-seo' ) }
-				</h2>
+				</Text>
 				<IconButton
 					icon={ close }
 					label={ __( 'Close', 'jetpack-seo' ) }
@@ -239,8 +245,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 					variant="minimal"
 					tone="neutral"
 				/>
-			</div>
-			<div className="jetpack-seo-content__inspector-body">
+			</Stack>
+			<Stack direction="column" gap="lg">
 				<TextControl
 					label={ __( 'SEO title', 'jetpack-seo' ) }
 					help={ __(
@@ -288,8 +294,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 					customTitle={ local.jetpack_seo_html_title }
 					description={ local.advanced_seo_description }
 				/>
-			</div>
-			<div className="jetpack-seo-content__inspector-actions">
+			</Stack>
+			<Stack direction="row" justify="flex-end" gap="sm">
 				<Button variant="minimal" tone="neutral" onClick={ onClose } disabled={ isSaving }>
 					{ __( 'Cancel', 'jetpack-seo' ) }
 				</Button>
@@ -304,8 +310,8 @@ const SeoInspector: FC< Props > = ( { postId, postType, onClose } ) => {
 				>
 					{ __( 'Save', 'jetpack-seo' ) }
 				</Button>
-			</div>
-		</div>
+			</Stack>
+		</Stack>
 	);
 };
 
diff --git a/projects/packages/seo/_inc/screens/content/serp-preview.tsx b/projects/packages/seo/_inc/screens/content/serp-preview.tsx
index 8e9ac8d50b76..3cc5f027ad59 100644
--- a/projects/packages/seo/_inc/screens/content/serp-preview.tsx
+++ b/projects/packages/seo/_inc/screens/content/serp-preview.tsx
@@ -1,4 +1,6 @@
 import { __ } from '@wordpress/i18n';
+import { Stack, Text } from '@wordpress/ui';
+import styles from './style.module.scss';
 import type { FC } from 'react';
 
 interface Props {
@@ -46,20 +48,22 @@ const SerpPreview: FC< Props > = ( { link, postTitle, customTitle, description }
 	const title = customTitle || postTitle;
 
 	return (
-		<div className="jetpack-seo-serp-preview">
-			<div className="jetpack-seo-serp-preview__label">
+		<Stack direction="column" gap="sm" className={ styles.preview }>
+			<Text variant="heading-sm" className={ styles.muted }>
 				{ __( 'Search engine preview', 'jetpack-seo' ) }
-			</div>
-			<div className="jetpack-seo-serp-preview__snippet">
-				<div className="jetpack-seo-serp-preview__url">{ toBreadcrumb( link ) }</div>
-				<div className="jetpack-seo-serp-preview__title">
-					{ title || __( '(no title)', 'jetpack-seo' ) }
-				</div>
+			</Text>
+			<Stack direction="column" gap="xs">
+				<Text variant="body-sm" className={ styles.muted }>
+					{ toBreadcrumb( link ) }
+				</Text>
+				<div className={ styles.title }>{ title || __( '(no title)', 'jetpack-seo' ) }</div>
 				{ description && (
-					<div className="jetpack-seo-serp-preview__description">{ description }</div>
+					<Text variant="body-md" className={ styles.muted }>
+						{ description }
+					</Text>
 				) }
-			</div>
-		</div>
+			</Stack>
+		</Stack>
 	);
 };
 
diff --git a/projects/packages/seo/_inc/screens/content/style.module.scss b/projects/packages/seo/_inc/screens/content/style.module.scss
new file mode 100644
index 000000000000..aa6a50c50219
--- /dev/null
+++ b/projects/packages/seo/_inc/screens/content/style.module.scss
@@ -0,0 +1,29 @@
+// Content tab: full-width DataViews list (no max-width — it fills the available
+// width, matching the Forms dashboard), with an optional SEO inspector panel.
+.root {
+	inline-size: 100%;
+}
+
+// The per-post SEO editor, rendered in the route's native inspector sidebar.
+// The framework owns the sidebar panel; this just lays out the editor's
+// contents (header, fields + live preview, actions).
+.inspector {
+	padding: var(--wpds-dimension-padding-md);
+}
+
+// Google-style search-result snippet shown live in the inspector.
+.preview {
+	padding: var(--wpds-dimension-padding-md);
+	background: var(--wpds-color-background-surface-neutral);
+	border-radius: var(--wpds-border-radius-md);
+}
+
+.muted {
+	color: var(--wpds-color-foreground-content-neutral-weak);
+}
+
+.title {
+	color: var(--wpds-color-foreground-interactive-brand);
+	font-size: 18px;
+	line-height: 1.3;
+}
diff --git a/projects/packages/seo/_inc/screens/content/style.scss b/projects/packages/seo/_inc/screens/content/style.scss
deleted file mode 100644
index 1b0b50a383f3..000000000000
--- a/projects/packages/seo/_inc/screens/content/style.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-// Content tab: full-width DataViews list (no max-width — it fills the available
-// width, matching the Forms dashboard), with an optional SEO inspector panel.
-.jetpack-seo-content {
-	inline-size: 100%;
-}
-
-// The per-post SEO editor, rendered in the route's native inspector sidebar.
-// The framework owns the sidebar panel; this just lays out the editor's
-// contents (header, fields + live preview, actions).
-.jetpack-seo-content__inspector {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-lg);
-	padding: var(--wpds-dimension-padding-md);
-}
-
-.jetpack-seo-content__inspector-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--wpds-dimension-gap-sm);
-}
-
-.jetpack-seo-content__inspector-title {
-	margin: 0;
-	font-size: 14px;
-	font-weight: 600;
-}
-
-// Inspector body: stack the fields and the live SERP preview.
-.jetpack-seo-content__inspector-body {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-lg);
-}
-
-.jetpack-seo-content__inspector-actions {
-	display: flex;
-	justify-content: flex-end;
-	gap: var(--wpds-dimension-gap-sm);
-}
-
-// Google-style search-result snippet shown live in the inspector.
-.jetpack-seo-serp-preview {
-	padding: var(--wpds-dimension-padding-md);
-	background: var(--wpds-color-background-surface-neutral);
-	border-radius: var(--wpds-border-radius-md);
-}
-
-.jetpack-seo-serp-preview__label {
-	margin-block-end: var(--wpds-dimension-gap-sm);
-	color: var(--wpds-color-foreground-content-neutral-weak);
-	font-size: 11px;
-	font-weight: 600;
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-}
-
-.jetpack-seo-serp-preview__url {
-	color: var(--wpds-color-foreground-content-neutral-weak);
-	font-size: 12px;
-	line-height: 1.3;
-}
-
-.jetpack-seo-serp-preview__title {
-	color: #1a0dab;
-	font-size: 18px;
-	line-height: 1.3;
-	margin-block-start: var(--wpds-dimension-gap-xs);
-}
-
-.jetpack-seo-serp-preview__description {
-	color: var(--wpds-color-foreground-content-neutral-weak);
-	font-size: 13px;
-	line-height: 1.4;
-	margin-block-start: var(--wpds-dimension-gap-xs);
-}
diff --git a/projects/packages/seo/_inc/screens/overview/content-coverage-card.tsx b/projects/packages/seo/_inc/screens/overview/content-coverage-card.tsx
index 77bc591a1dd6..548b97541018 100644
--- a/projects/packages/seo/_inc/screens/overview/content-coverage-card.tsx
+++ b/projects/packages/seo/_inc/screens/overview/content-coverage-card.tsx
@@ -1,6 +1,7 @@
 import { DonutMeter } from '@automattic/jetpack-components';
 import { __, sprintf } from '@wordpress/i18n';
-import { Button, Card } from '@wordpress/ui';
+import { Button, Card, Stack, Text } from '@wordpress/ui';
+import styles from './style.module.scss';
 import type { ContentCoverage } from '../../data/overview-types';
 import type { FC } from 'react';
 
@@ -28,7 +29,7 @@ interface RingProps {
  * @return A labelled coverage ring.
  */
 const CoverageRing: FC< RingProps > = ( { label, segment, total } ) => (
-	<div className="jetpack-seo-overview__coverage-ring">
+	<Stack direction="column" align="center" gap="xs" className={ styles.ring }>
 		<DonutMeter
 			totalCount={ total }
 			segmentCount={ segment }
@@ -41,16 +42,16 @@ const CoverageRing: FC< RingProps > = ( { label, segment, total } ) => (
 				total
 			) }
 		/>
-		<div className="jetpack-seo-overview__coverage-count">
+		<Text variant="heading-md">
 			{ sprintf(
 				/* translators: %1$d: posts with the field set, %2$d: total published posts. */
 				__( '%1$d / %2$d', 'jetpack-seo' ),
 				segment,
 				total
 			) }
-		</div>
-		<div className="jetpack-seo-overview__coverage-label">{ label }</div>
-	</div>
+		</Text>
+		<Text variant="body-sm">{ label }</Text>
+	</Stack>
 );
 
 const ContentCoverageCard: FC< Props > = ( { data, onManage } ) => {
@@ -63,9 +64,11 @@ const ContentCoverageCard: FC< Props > = ( { data, onManage } ) => {
 			</Card.Header>
 			<Card.Content>
 				{ total === 0 ? (
-					<p>{ __( 'No published posts or pages yet.', 'jetpack-seo' ) }</p>
+					<Text variant="body-md" render={ <p /> }>
+						{ __( 'No published posts or pages yet.', 'jetpack-seo' ) }
+					</Text>
 				) : (
-					<div className="jetpack-seo-overview__coverage-rings">
+					<div className={ styles.rings }>
 						<CoverageRing
 							label={ __( 'Schema applied', 'jetpack-seo' ) }
 							segment={ with_schema }
@@ -88,11 +91,11 @@ const ContentCoverageCard: FC< Props > = ( { data, onManage } ) => {
 						/>
 					</div>
 				) }
-				<div className="jetpack-seo-overview__card-footer">
+				<Stack direction="row" justify="flex-end" className={ styles.footer }>
 					<Button variant="outline" tone="neutral" onClick={ onManage }>
 						{ __( 'Manage content', 'jetpack-seo' ) }
 					</Button>
-				</div>
+				</Stack>
 			</Card.Content>
 		</Card.Root>
 	);
diff --git a/projects/packages/seo/_inc/screens/overview/disable-seo-tools.tsx b/projects/packages/seo/_inc/screens/overview/disable-seo-tools.tsx
index fda56a682069..6476694afa59 100644
--- a/projects/packages/seo/_inc/screens/overview/disable-seo-tools.tsx
+++ b/projects/packages/seo/_inc/screens/overview/disable-seo-tools.tsx
@@ -2,7 +2,9 @@
 
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { Text } from '@wordpress/ui';
 import useSeoToolsToggle from '../../data/use-seo-tools-toggle';
+import styles from './style.module.scss';
 import type { FC } from 'react';
 
 /**
@@ -17,8 +19,8 @@ const DisableSeoTools: FC = () => {
 	const { isToggling, setActive } = useSeoToolsToggle();
 
 	return (
-		<div className="jetpack-seo-overview__disable">
-			<span>{ __( 'Using a different SEO solution?', 'jetpack-seo' ) }</span>{ ' ' }
+		<Text variant="body-md" render={ <div /> } className={ styles.disable }>
+			{ __( 'Using a different SEO solution?', 'jetpack-seo' ) }{ ' ' }
 			<Button
 				variant="link"
 				onClick={ () => setActive( false ) }
@@ -27,7 +29,7 @@ const DisableSeoTools: FC = () => {
 			>
 				{ __( 'Disable Jetpack SEO tools', 'jetpack-seo' ) }
 			</Button>
-		</div>
+		</Text>
 	);
 };
 
diff --git a/projects/packages/seo/_inc/screens/overview/index.tsx b/projects/packages/seo/_inc/screens/overview/index.tsx
index 52369751ca19..68174a32e1ef 100644
--- a/projects/packages/seo/_inc/screens/overview/index.tsx
+++ b/projects/packages/seo/_inc/screens/overview/index.tsx
@@ -13,7 +13,7 @@ import ContentCoverageCard from './content-coverage-card';
 import DisableSeoTools from './disable-seo-tools';
 import SiteVerificationCard from './site-verification-card';
 import SiteVisibilityCard from './site-visibility-card';
-import './style.scss';
+import styles from './style.module.scss';
 import type { FC } from 'react';
 
 const OverviewScreen: FC = () => {
@@ -55,14 +55,14 @@ const OverviewScreen: FC = () => {
 	// `useSeoToolsToggle` and `Initializer::init()`.
 	if ( ! data.site_visibility.seo_tools_active ) {
 		return (
-			<div className="jetpack-seo-overview">
+			<div className={ styles.root }>
 				<EnableSeoCard />
 			</div>
 		);
 	}
 
 	return (
-		<div className="jetpack-seo-overview">
+		<div className={ styles.root }>
 			{ ! data.plan.seo_enabled_for_site && (
 				<Notice.Root intent="warning">
 					<Notice.Description>
@@ -73,7 +73,7 @@ const OverviewScreen: FC = () => {
 					</Notice.Description>
 				</Notice.Root>
 			) }
-			<div className="jetpack-seo-overview__grid">
+			<div className={ styles.grid }>
 				<SiteVisibilityCard
 					data={ {
 						...data.site_visibility,
@@ -88,7 +88,7 @@ const OverviewScreen: FC = () => {
 					onManage={ () => goToSection( 'verification' ) }
 				/>
 			</div>
-			<div className="jetpack-seo-overview__content-card">
+			<div className={ styles.contentCard }>
 				<ContentCoverageCard data={ coverage ?? data.content_coverage } onManage={ goToContent } />
 			</div>
 			<DisableSeoTools />
diff --git a/projects/packages/seo/_inc/screens/overview/site-verification-card.tsx b/projects/packages/seo/_inc/screens/overview/site-verification-card.tsx
index e8e10c23ff9e..05193531de4b 100644
--- a/projects/packages/seo/_inc/screens/overview/site-verification-card.tsx
+++ b/projects/packages/seo/_inc/screens/overview/site-verification-card.tsx
@@ -1,7 +1,8 @@
 import { __ } from '@wordpress/i18n';
-import { Button, Card } from '@wordpress/ui';
+import { Button, Card, Stack } from '@wordpress/ui';
 import { VERIFICATION_SERVICES } from '../../data/verification-services';
 import StatusDot from './status-dot';
+import styles from './style.module.scss';
 import type { SiteVerification } from '../../data/overview-types';
 import type { FC } from 'react';
 
@@ -20,19 +21,25 @@ const SiteVerificationCard: FC< Props > = ( { data, onManage } ) => (
 		<Card.Header>
 			<Card.Title>{ __( 'Site verification', 'jetpack-seo' ) }</Card.Title>
 		</Card.Header>
-		<Card.Content>
+		<Stack render={ <Card.Content /> } direction="column" className={ styles.cardContent }>
 			{ VERIFICATION_SERVICES.map( ( { key, label } ) => (
-				<div key={ key } className="jetpack-seo-overview__stat-row">
+				<Stack
+					key={ key }
+					direction="row"
+					align="center"
+					justify="space-between"
+					className={ styles.statRow }
+				>
 					<StatusDot status={ data[ key ] ? 'ok' : 'warn' } label={ label } />
 					<span>{ data[ key ] ? setLabel : notSetLabel }</span>
-				</div>
+				</Stack>
 			) ) }
-			<div className="jetpack-seo-overview__card-footer">
+			<Stack direction="row" justify="flex-end" className={ styles.footer }>
 				<Button variant="outline" tone="neutral" onClick={ onManage }>
 					{ __( 'Manage verification', 'jetpack-seo' ) }
 				</Button>
-			</div>
-		</Card.Content>
+			</Stack>
+		</Stack>
 	</Card.Root>
 );
 
diff --git a/projects/packages/seo/_inc/screens/overview/site-visibility-card.tsx b/projects/packages/seo/_inc/screens/overview/site-visibility-card.tsx
index eb9f0b812aa1..e76c8e9ec678 100644
--- a/projects/packages/seo/_inc/screens/overview/site-visibility-card.tsx
+++ b/projects/packages/seo/_inc/screens/overview/site-visibility-card.tsx
@@ -1,6 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { Button, Card, Stack } from '@wordpress/ui';
 import StatusDot from './status-dot';
+import styles from './style.module.scss';
 import type { OverviewResponse } from '../../data/overview-types';
 import type { FC } from 'react';
 
@@ -30,7 +31,7 @@ const SiteVisibilityCard: FC< Props > = ( { data, onManage } ) => {
 			<Card.Header>
 				<Card.Title>{ __( 'Site visibility', 'jetpack-seo' ) }</Card.Title>
 			</Card.Header>
-			<Card.Content>
+			<Stack render={ <Card.Content /> } direction="column" className={ styles.cardContent }>
 				<Stack direction="column" gap="xs">
 					<StatusDot
 						status={ data.search_engines_visible ? 'ok' : 'err' }
@@ -45,12 +46,12 @@ const SiteVisibilityCard: FC< Props > = ( { data, onManage } ) => {
 						label={ data.seo_tools_active ? seoToolsActiveLabel : seoToolsInactiveLabel }
 					/>
 				</Stack>
-				<div className="jetpack-seo-overview__card-footer">
+				<Stack direction="row" justify="flex-end" className={ styles.footer }>
 					<Button variant="outline" tone="neutral" onClick={ onManage }>
 						{ __( 'Manage visibility', 'jetpack-seo' ) }
 					</Button>
-				</div>
-			</Card.Content>
+				</Stack>
+			</Stack>
 		</Card.Root>
 	);
 };
diff --git a/projects/packages/seo/_inc/screens/overview/status-dot.module.scss b/projects/packages/seo/_inc/screens/overview/status-dot.module.scss
new file mode 100644
index 000000000000..2ce75f16ca5e
--- /dev/null
+++ b/projects/packages/seo/_inc/screens/overview/status-dot.module.scss
@@ -0,0 +1,21 @@
+.root {
+	inline-size: 10px;
+	block-size: 10px;
+	flex-shrink: 0;
+	border-radius: 50%;
+}
+
+// The `-weak` tokens are the vivid indicator colors; the plain
+// `fg-content-*` tokens are the darkest text shades (near-black) and read
+// as black on a status dot.
+.ok {
+	background: var(--wpds-color-foreground-content-success-weak);
+}
+
+.warn {
+	background: var(--wpds-color-foreground-content-warning-weak);
+}
+
+.err {
+	background: var(--wpds-color-foreground-content-error-weak);
+}
diff --git a/projects/packages/seo/_inc/screens/overview/status-dot.scss b/projects/packages/seo/_inc/screens/overview/status-dot.scss
deleted file mode 100644
index fe95b8ef64a9..000000000000
--- a/projects/packages/seo/_inc/screens/overview/status-dot.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.jetpack-seo-status-dot {
-	display: inline-block;
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	margin-inline-end: var(--wpds-dimension-gap-sm);
-	vertical-align: middle;
-
-	// The `-weak` tokens are the vivid indicator colors; the plain
-	// `fg-content-*` tokens are the darkest text shades (near-black) and read
-	// as black on a status dot.
-	&.is-ok {
-		background: var(--wpds-color-foreground-content-success-weak);
-	}
-
-	&.is-warn {
-		background: var(--wpds-color-foreground-content-warning-weak);
-	}
-
-	&.is-err {
-		background: var(--wpds-color-foreground-content-error-weak);
-	}
-}
diff --git a/projects/packages/seo/_inc/screens/overview/status-dot.tsx b/projects/packages/seo/_inc/screens/overview/status-dot.tsx
index 087c042c31aa..2874ffd9f793 100644
--- a/projects/packages/seo/_inc/screens/overview/status-dot.tsx
+++ b/projects/packages/seo/_inc/screens/overview/status-dot.tsx
@@ -1,5 +1,6 @@
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
-import './status-dot.scss';
+import styles from './status-dot.module.scss';
 import type { FC } from 'react';
 
 interface Props {
@@ -8,17 +9,10 @@ interface Props {
 }
 
 const StatusDot: FC< Props > = ( { status, label } ) => (
-	<span>
-		<span
-			className={ clsx( 'jetpack-seo-status-dot', {
-				'is-ok': status === 'ok',
-				'is-warn': status === 'warn',
-				'is-err': status === 'err',
-			} ) }
-			aria-hidden="true"
-		/>
+	<Stack render={ <span /> } direction="row" align="center" gap="sm">
+		<span className={ clsx( styles.root, styles[ status ] ) } aria-hidden="true" />
 		{ label }
-	</span>
+	</Stack>
 );
 
 export default StatusDot;
diff --git a/projects/packages/seo/_inc/screens/overview/style.scss b/projects/packages/seo/_inc/screens/overview/style.module.scss
similarity index 51%
rename from projects/packages/seo/_inc/screens/overview/style.scss
rename to projects/packages/seo/_inc/screens/overview/style.module.scss
index fff44f69cd38..e277c44d8a4a 100644
--- a/projects/packages/seo/_inc/screens/overview/style.scss
+++ b/projects/packages/seo/_inc/screens/overview/style.module.scss
@@ -1,90 +1,61 @@
 // Centered content column. Wider than the Settings tab (which is a single 660px
 // form column) because the Overview lays cards out side-by-side — matches the
 // My Jetpack page's content width.
-.jetpack-seo-overview {
+.root {
 	max-inline-size: 1128px;
 	margin-inline: auto;
 }
 
-.jetpack-seo-overview__grid {
+.grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 	gap: var(--wpds-dimension-gap-lg);
 	align-items: stretch;
 }
 
-// Make each Overview card a flex column so its body stretches and equal-height
-// cards line up across the row. Targets Card.Root's last child (Card.Content),
-// since @wordpress/ui uses hashed (non-stable) class names.
-.jetpack-seo-overview__grid > * {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-}
-
-.jetpack-seo-overview__grid > * > *:last-child {
-	display: flex;
-	flex-direction: column;
+// Let each status card's content fill the equal-height grid row so its action
+// stays pinned to the bottom.
+.cardContent {
 	flex: 1 1 auto;
 }
 
 // A status row in the Site verification card: indicator + label on the left,
 // "Verified"/"Not set" on the right.
-.jetpack-seo-overview__stat-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--wpds-dimension-gap-xs) 0;
+.statRow {
+	padding-block: var(--wpds-dimension-gap-xs);
 }
 
 // Card action row (Manage button), pinned to the bottom-right of the card.
-.jetpack-seo-overview__card-footer {
-	display: flex;
-	justify-content: flex-end;
-	margin-top: auto;
-	padding-top: var(--wpds-dimension-gap-md);
+.footer {
+	margin-block-start: auto;
+	padding-block-start: var(--wpds-dimension-gap-md);
 }
 
 // Content SEO card: factual coverage rings. An auto-fit grid (matching the
 // Overview card grid above) so the rings flow into as many columns as fit
 // (up to four) and stack down to a single column as the screen narrows —
 // rather than shrinking to share a single row at every width.
-.jetpack-seo-overview__coverage-rings {
+.rings {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
 	gap: var(--wpds-dimension-gap-lg);
 }
 
-.jetpack-seo-overview__coverage-ring {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+.ring {
 	text-align: center;
-	gap: var(--wpds-dimension-gap-xs);
 	// Let the cell shrink below its content width so long labels wrap inside
 	// the grid track instead of forcing the column wider.
-	min-width: 0;
-}
-
-.jetpack-seo-overview__coverage-count {
-	font-weight: 600;
-}
-
-.jetpack-seo-overview__coverage-label {
-	// Inherit the card's text color rather than the muted `-neutral-weak` variant,
-	// so the metric labels match the rest of the text on the page.
-	font-size: 12px;
+	min-inline-size: 0;
 }
 
 // The Content SEO card sits below the two status cards, spanning the full
 // width of its own row. Margin matches the grid gap above it.
-.jetpack-seo-overview__content-card {
-	margin-top: var(--wpds-dimension-gap-lg);
+.contentCard {
+	margin-block-start: var(--wpds-dimension-gap-lg);
 }
 
 // Low-emphasis "disable SEO tools" off-ramp at the foot of the Overview.
-.jetpack-seo-overview__disable {
-	margin-top: var(--wpds-dimension-gap-lg);
+.disable {
+	margin-block-start: var(--wpds-dimension-gap-lg);
 	color: var(--wpds-color-foreground-content-neutral-weak);
-	font-size: 13px;
 }
diff --git a/projects/packages/seo/_inc/screens/settings/social-previews-card.tsx b/projects/packages/seo/_inc/screens/settings/social-previews-card.tsx
index 79e8e6f657eb..e50bb50d2955 100644
--- a/projects/packages/seo/_inc/screens/settings/social-previews-card.tsx
+++ b/projects/packages/seo/_inc/screens/settings/social-previews-card.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsdoc/require-param, jsdoc/require-returns */
 
 import { __ } from '@wordpress/i18n';
-import { Card, CollapsibleCard } from '@wordpress/ui';
+import { Card, CollapsibleCard, Stack, Text } from '@wordpress/ui';
 import getSite from '../../data/get-site';
 import type { SiteData } from '../../data/get-site';
 import type { FC } from 'react';
@@ -68,14 +68,22 @@ const XIcon: FC = () => (
 
 /** How the home page appears as a Google search result. */
 const GooglePreview: FC< PreviewProps > = ( { site, description } ) => (
-	<div className="jetpack-seo-preview jetpack-seo-preview--google">
-		<div className="jetpack-seo-preview__google-site">
+	<Stack direction="column" gap="xs" className="jetpack-seo-preview jetpack-seo-preview--google">
+		<Stack direction="row" align="center" gap="sm">
 			{ site.icon && <img className="jetpack-seo-preview__favicon" src={ site.icon } alt="" /> }
-			<div className="jetpack-seo-preview__google-url">{ hostname( site.url ) }</div>
-		</div>
-		<div className="jetpack-seo-preview__google-title">{ site.title }</div>
-		{ description && <div className="jetpack-seo-preview__desc">{ description }</div> }
-	</div>
+			<Text variant="body-sm" className="jetpack-seo-preview__muted">
+				{ hostname( site.url ) }
+			</Text>
+		</Stack>
+		<Text variant="body-xl" className="jetpack-seo-preview__google-title">
+			{ site.title }
+		</Text>
+		{ description && (
+			<Text variant="body-md" className="jetpack-seo-preview__muted">
+				{ description }
+			</Text>
+		) }
+	</Stack>
 );
 
 /**
@@ -91,11 +99,17 @@ const LinkCardPreview: FC< PreviewProps > = ( { site, description } ) => (
 				style={ { backgroundImage: `url(${ site.image })` } }
 			/>
 		) }
-		<div className="jetpack-seo-preview__card-body">
-			<div className="jetpack-seo-preview__card-domain">{ hostname( site.url ) }</div>
-			<div className="jetpack-seo-preview__card-title">{ site.title }</div>
-			{ description && <div className="jetpack-seo-preview__desc">{ description }</div> }
-		</div>
+		<Stack direction="column" gap="xs" className="jetpack-seo-preview__card-body">
+			<Text variant="body-sm" className="jetpack-seo-preview__card-domain">
+				{ hostname( site.url ) }
+			</Text>
+			<Text variant="heading-md">{ site.title }</Text>
+			{ description && (
+				<Text variant="body-md" className="jetpack-seo-preview__muted">
+					{ description }
+				</Text>
+			) }
+		</Stack>
 	</div>
 );
 
@@ -132,37 +146,45 @@ const SocialPreviewsCard: FC< Props > = ( { description } ) => {
 				<Card.Title>{ __( 'Search & social previews', 'jetpack-seo' ) }</Card.Title>
 			</CollapsibleCard.Header>
 			<CollapsibleCard.Content>
-				<p className="jetpack-seo-settings__preview-intro">
-					{ __(
-						'A preview of how your home page looks in search results and when shared on social media. It updates as you edit the front-page description above.',
-						'jetpack-seo'
-					) }
-				</p>
-				<div className="jetpack-seo-settings__preview-list">
-					{ /* Each block: a platform heading above its preview. The border is on
+				<Stack direction="column" gap="xl">
+					<Text variant="body-md" render={ <p /> }>
+						{ __(
+							'A preview of how your home page looks in search results and when shared on social media. It updates as you edit the front-page description above.',
+							'jetpack-seo'
+						) }
+					</Text>
+					<Stack direction="column" gap="2xl">
+						{ /* Each block: a platform heading above its preview. The border is on
 					   the preview itself (not a group box around heading + preview). */ }
-					<div>
-						<h3 className="jetpack-seo-settings__preview-label">
-							<GoogleIcon />
-							{ __( 'Google search result', 'jetpack-seo' ) }
-						</h3>
-						<GooglePreview site={ site } description={ description } />
-					</div>
-					<div>
-						<h3 className="jetpack-seo-settings__preview-label">
-							<FacebookIcon />
-							{ __( 'Facebook', 'jetpack-seo' ) }
-						</h3>
-						<LinkCardPreview site={ site } description={ description } />
-					</div>
-					<div>
-						<h3 className="jetpack-seo-settings__preview-label">
-							<XIcon />
-							{ __( 'X (Twitter)', 'jetpack-seo' ) }
-						</h3>
-						<LinkCardPreview site={ site } description={ description } />
-					</div>
-				</div>
+						<Stack direction="column" gap="md">
+							<Text variant="heading-lg" render={ <h3 /> }>
+								<Stack render={ <span /> } direction="row" align="center" gap="sm">
+									<GoogleIcon />
+									{ __( 'Google search result', 'jetpack-seo' ) }
+								</Stack>
+							</Text>
+							<GooglePreview site={ site } description={ description } />
+						</Stack>
+						<Stack direction="column" gap="md">
+							<Text variant="heading-lg" render={ <h3 /> }>
+								<Stack render={ <span /> } direction="row" align="center" gap="sm">
+									<FacebookIcon />
+									{ __( 'Facebook', 'jetpack-seo' ) }
+								</Stack>
+							</Text>
+							<LinkCardPreview site={ site } description={ description } />
+						</Stack>
+						<Stack direction="column" gap="md">
+							<Text variant="heading-lg" render={ <h3 /> }>
+								<Stack render={ <span /> } direction="row" align="center" gap="sm">
+									<XIcon />
+									{ __( 'X (Twitter)', 'jetpack-seo' ) }
+								</Stack>
+							</Text>
+							<LinkCardPreview site={ site } description={ description } />
+						</Stack>
+					</Stack>
+				</Stack>
 			</CollapsibleCard.Content>
 		</CollapsibleCard.Root>
 	);
diff --git a/projects/packages/seo/_inc/screens/settings/style.scss b/projects/packages/seo/_inc/screens/settings/style.scss
index 2f446792e3d9..7c1a9cbbfdac 100644
--- a/projects/packages/seo/_inc/screens/settings/style.scss
+++ b/projects/packages/seo/_inc/screens/settings/style.scss
@@ -50,7 +50,7 @@
 // spaced between adjacent rows.
 .jetpack-seo-settings__title-row + .jetpack-seo-settings__title-row {
 	padding-block-start: var(--wpds-dimension-gap-lg);
-	border-block-start: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
+	border-block-start: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 }
 
 // The insert-placeholder buttons and their caption, grouped tight under the
@@ -173,31 +173,6 @@
 	min-block-size: 40px;
 }
 
-// Intro copy above the preview list.
-.jetpack-seo-settings__preview-intro {
-	margin: 0 0 var(--wpds-dimension-gap-xl);
-}
-
-// The previews stack with generous separation between them. Each preview is
-// bordered individually (below); there's no bordered group wrapping a heading
-// together with its preview, which avoids the box-in-box look.
-.jetpack-seo-settings__preview-list {
-	display: flex;
-	flex-direction: column;
-	gap: var(--wpds-dimension-gap-2xl);
-}
-
-// Platform label above each preview: brand icon + name, prominent enough to
-// scan, with clear space before the card it describes.
-.jetpack-seo-settings__preview-label {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	margin: 0 0 var(--wpds-dimension-gap-md);
-	font-size: 15px;
-	font-weight: 600;
-}
-
 .jetpack-seo-preview__platform-icon {
 	inline-size: 18px;
 	block-size: 18px;
@@ -208,11 +183,9 @@
 // the look of each platform with plain markup.
 .jetpack-seo-preview {
 	max-inline-size: 500px;
-	font-size: 14px;
-	line-height: 1.4;
 }
 
-.jetpack-seo-preview__desc {
+.jetpack-seo-preview__muted {
 	color: var(--wpds-color-foreground-content-neutral-weak);
 }
 
@@ -220,36 +193,19 @@
 // otherwise), set off as a result beneath its heading.
 .jetpack-seo-preview--google {
 	padding: var(--wpds-dimension-padding-md);
-	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	border-radius: var(--wpds-border-radius-md);
 
-	.jetpack-seo-preview__google-site {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-
 	.jetpack-seo-preview__favicon {
 		inline-size: 26px;
 		block-size: 26px;
 		border-radius: 50%;
-		border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
+		border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 		object-fit: cover;
 	}
 
-	.jetpack-seo-preview__google-url {
-		font-size: 12px;
-		color: #4d5156;
-	}
-
 	.jetpack-seo-preview__google-title {
-		margin-block-start: 4px;
-		font-size: 20px;
-		color: #1a0dab;
-	}
-
-	.jetpack-seo-preview__desc {
-		margin-block-start: 4px;
+		color: var(--wpds-color-foreground-interactive-brand);
 	}
 }
 
@@ -258,7 +214,7 @@
 // its heading.
 .jetpack-seo-preview--card {
 	overflow: hidden;
-	border: 1px solid var(--wpds-color-stroke-surface-neutral-weak);
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	border-radius: var(--wpds-border-radius-md);
 
 	.jetpack-seo-preview__image {
@@ -279,17 +235,7 @@
 	}
 
 	.jetpack-seo-preview__card-domain {
-		font-size: 12px;
 		text-transform: uppercase;
 		color: var(--wpds-color-foreground-content-neutral-weak);
 	}
-
-	.jetpack-seo-preview__card-title {
-		margin-block-start: 2px;
-		font-weight: 600;
-	}
-
-	.jetpack-seo-preview__desc {
-		margin-block-start: 2px;
-	}
 }
diff --git a/projects/packages/seo/changelog/migrate-seo-dashboard-styles-to-css-modules b/projects/packages/seo/changelog/migrate-seo-dashboard-styles-to-css-modules
new file mode 100644
index 000000000000..5feadf885d67
--- /dev/null
+++ b/projects/packages/seo/changelog/migrate-seo-dashboard-styles-to-css-modules
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Migrate shared, Content, and Overview dashboard styles to CSS Modules without changing user-facing behavior.
+