diff --git a/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss b/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss
index 37bd8777e067..3d7a3ecde72c 100644
--- a/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss
+++ b/projects/plugins/jetpack/_inc/client/components/global-notices/style.scss
@@ -3,7 +3,6 @@
 @use "../../scss/calypso-mixins";
 
 .global-notices {
-	text-align: right;
 	pointer-events: none;
 
 	z-index: z-index.z-index("root", ".global-notices");
@@ -39,44 +38,26 @@
 	}
 }
 
-.global-notices .dops-notice {
-	flex-wrap: nowrap;
+/* Targets children: `Notice.Root`'s own class is a hashed CSS-module name. */
+.global-notices > * {
 	margin-bottom: 0;
-	text-align: left;
-	pointer-events: auto;
-	border-radius: 0;
-	box-shadow:
-		0 2px 5px rgba(0, 0, 0, 0.2),
-		0 0 56px rgba(0, 0, 0, 0.15);
-
-	.dops-notice__icon-wrapper {
-		border-radius: 0;
-	}
-
-	@include calypso-mixins.breakpoint( ">660px" ) {
-		display: flex;
-		overflow: hidden;
-		margin-bottom: 24px;
-		border-radius: 3px;
-
-		.dops-notice__icon-wrapper {
-			border-radius: 3px 0 0 3px;
-		}
-	}
-}
 
-.global-notices .dops-notice a.dops-notice__action {
+	/* A size-contained child reports no width in this shrink-to-fit
+	   container, collapsing the toast. Only titled notices query it. */
+	container-type: normal;
 
-	@include calypso-mixins.breakpoint( ">660px" ) {
-		font-size: 14px;
-		padding: 13px 16px;
-	}
-}
+	/* The container is click-through, so each notice opts back in. */
+	pointer-events: auto;
 
-.global-notices .dops-notice__dismiss {
-	flex-shrink: 0;
+	/* `@wordpress/ui`'s medium elevation. Copied, not referenced: its
+	   `--_wp-ui-elevation-md` is redeclared per component, never published. */
+	box-shadow:
+		0 2px 3px rgba(0, 0, 0, 0.05),
+		0 4px 5px rgba(0, 0, 0, 0.04),
+		0 12px 12px rgba(0, 0, 0, 0.03),
+		0 16px 16px rgba(0, 0, 0, 0.02);
 
 	@include calypso-mixins.breakpoint( ">660px" ) {
-		padding: 13px 16px 0;
+		margin-bottom: 24px;
 	}
 }
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/deprecation-notice.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/deprecation-notice.jsx
index 76e31bac2de8..d1f399942aaf 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/deprecation-notice.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/deprecation-notice.jsx
@@ -7,10 +7,10 @@ const DeprecationNotice = ( { dismissNotice, message, link, linkText, title } )
 	return (
 		<SimpleNotice
 			status="is-warning"
+			title={ title }
 			dismissText={ __( 'Dismiss', 'jetpack' ) }
 			onDismissClick={ dismissNotice }
 		>
-			{ title && <div style={ { fontWeight: 600 } }>{ title }</div> }
 			<div>{ message }</div>
 			{ link && (
 				<Link openInNewTab href={ link }>
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/dismissable.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/dismissable.jsx
index 3347b6c10354..ba5b059cc2d6 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/dismissable.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/dismissable.jsx
@@ -24,7 +24,7 @@ class DismissableNotices extends Component {
 	};
 
 	render() {
-		return <div>{ this.renderNotices() }</div>;
+		return this.renderNotices() || null;
 	}
 }
 
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/error-notice-cycle-connection.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/error-notice-cycle-connection.jsx
index 43addd4dc9c4..25afe5e57550 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/error-notice-cycle-connection.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/error-notice-cycle-connection.jsx
@@ -24,7 +24,6 @@ export default class ErrorNoticeCycleConnection extends Component {
 				showDismiss={ false }
 				text={ this.props.text }
 				status={ 'is-error' }
-				icon={ 'link-break' }
 				display={ this.props.display }
 			>
 				<NoticeActionReconnect
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
index 4fab2e61cd1e..aeeed2dc8fa3 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/index.jsx
@@ -1,6 +1,7 @@
 import { getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
 import { connect } from 'react-redux';
@@ -190,7 +191,7 @@ class JetpackNotices extends Component {
 		const isUserConnectScreen = this.props.location.pathname.startsWith( '/connect-user' );
 
 		return (
-			<div aria-live="polite">
+			<Stack direction="column" gap="xl" aria-live="polite">
 				<NoticesList />
 				{ this.props.siteConnectionStatus &&
 					this.props.userCanConnectSite &&
@@ -255,7 +256,7 @@ class JetpackNotices extends Component {
 							linkText={ link.label }
 						/>
 					) ) }
-			</div>
+			</Stack>
 		);
 	}
 }
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/jetpack-connection-errors.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/jetpack-connection-errors.jsx
index e08566458872..ee967f710f74 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/jetpack-connection-errors.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/jetpack-connection-errors.jsx
@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import { Component, Fragment } from 'react';
 import SimpleNotice from 'components/notice';
@@ -33,7 +34,6 @@ export default class JetpackConnectionErrors extends Component {
 					<SimpleNotice
 						text={ message }
 						status={ 'is-error' }
-						icon={ 'link-break' }
 						showDismiss={ false }
 						display={ this.props.display }
 					>
@@ -49,7 +49,6 @@ export default class JetpackConnectionErrors extends Component {
 					<SimpleNotice
 						text={ message }
 						status={ 'is-error' }
-						icon={ 'link-break' }
 						showDismiss={ false }
 						display={ this.props.display }
 					/>
@@ -66,11 +65,7 @@ export default class JetpackConnectionErrors extends Component {
 					// Add secondary action if available
 					if ( errorData.secondary_action_url && errorData.secondary_action_label ) {
 						actions.push(
-							<NoticeAction
-								key="secondary"
-								href={ errorData.secondary_action_url }
-								variant="secondary"
-							>
+							<NoticeAction key="secondary" href={ errorData.secondary_action_url }>
 								{ errorData.secondary_action_label }
 							</NoticeAction>
 						);
@@ -80,7 +75,6 @@ export default class JetpackConnectionErrors extends Component {
 						<SimpleNotice
 							text={ message }
 							status={ 'is-error' }
-							icon={ 'link-break' }
 							showDismiss={ false }
 							display={ this.props.display }
 						>
@@ -128,6 +122,10 @@ export default class JetpackConnectionErrors extends Component {
 			}
 		}
 
-		return Object.values( errorsToDisplay ).map( error => this.renderOne( error ) );
+		return (
+			<Stack direction="column" gap="xl">
+				{ Object.values( errorsToDisplay ).map( error => this.renderOne( error ) ) }
+			</Stack>
+		);
 	}
 }
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx
index 1460babc3077..cd276d3392ed 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/notice-action-reconnect.jsx
@@ -72,15 +72,10 @@ const NoticeActionReconnect = props => {
 		analytics.tracks.recordEvent( 'jetpack_termination_error_notice_view', getEventProps() );
 	}, [ getEventProps ] );
 
-	return (
-		<NoticeAction icon={ props.icon } onClick={ handleDisconnectClick }>
-			{ props.children }
-		</NoticeAction>
-	);
+	return <NoticeAction onClick={ handleDisconnectClick }>{ props.children }</NoticeAction>;
 };
 
 NoticeActionReconnect.propTypes = {
-	icon: PropTypes.string,
 	errorCode: PropTypes.string,
 	errorData: PropTypes.object,
 	action: PropTypes.string,
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/state-notices.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/state-notices.jsx
index 88bb9997975d..1c174fddcbeb 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/state-notices.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/state-notices.jsx
@@ -300,7 +300,7 @@ class JetpackStateNotices extends Component {
 	};
 
 	render() {
-		return <div>{ this.state.showNotice ? this.renderContent() : null }</div>;
+		return this.state.showNotice ? this.renderContent() ?? null : null;
 	}
 }
 
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/static-warning.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/static-warning.jsx
index 6b304055f199..3cb9176aed5b 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/static-warning.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/static-warning.jsx
@@ -11,12 +11,8 @@ export class StaticWarning extends Component {
 
 	render() {
 		return (
-			<SimpleNotice showDismiss={ false } status="is-warning">
-				<div>
-					#HEADER_TEXT#
-					<br />
-					#TEXT#
-				</div>
+			<SimpleNotice showDismiss={ false } status="is-warning" title="#HEADER_TEXT#">
+				<div>#TEXT#</div>
 			</SimpleNotice>
 		);
 	}
diff --git a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/test/component.jsx b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/test/component.jsx
index 7183536a829a..bd27b2ed7d76 100644
--- a/projects/plugins/jetpack/_inc/client/components/jetpack-notices/test/component.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/jetpack-notices/test/component.jsx
@@ -148,6 +148,7 @@ describe( 'DevVersionNotice', () => {
 		expect(
 			screen.getByText( 'You are currently running a development version of Jetpack.' )
 		).toBeInTheDocument();
-		expect( screen.getByRole( 'link', { name: 'Submit Beta feedback' } ) ).toBeInTheDocument();
+		// The accessible name carries the design system's "(opens in a new tab)" suffix.
+		expect( screen.getByRole( 'link', { name: /Submit Beta feedback/ } ) ).toBeInTheDocument();
 	} );
 } );
diff --git a/projects/plugins/jetpack/_inc/client/components/notice/index.jsx b/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
index d6dbf0ab2399..c51f47adf528 100644
--- a/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/notice/index.jsx
@@ -1,10 +1,7 @@
+import { Notice } from '@wordpress/ui';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import Gridicon from 'components/gridicon';
-import onKeyDownCallback from 'utils/onkeydown-callback';
-
-import './style.scss';
 
 const noop = () => {};
 
@@ -30,8 +27,9 @@ export default class SimpleNotice extends Component {
 			PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
 			PropTypes.arrayOf( PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ) ),
 		] ),
-		icon: PropTypes.string,
+		title: PropTypes.oneOfType( [ PropTypes.string, PropTypes.node ] ),
 		onDismissClick: PropTypes.func,
+		dismissText: PropTypes.string,
 		className: PropTypes.string,
 		display: PropTypes.bool,
 	};
@@ -50,28 +48,19 @@ export default class SimpleNotice extends Component {
 		}
 	}
 
-	getIcon = () => {
-		let icon;
-
+	getIntent = () => {
 		switch ( this.props.status ) {
 			case 'is-info':
-				icon = 'info';
-				break;
+				return 'info';
 			case 'is-success':
-				icon = 'checkmark';
-				break;
+				return 'success';
 			case 'is-error':
-				icon = 'notice';
-				break;
+				return 'error';
 			case 'is-warning':
-				icon = 'notice';
-				break;
+				return 'warning';
 			default:
-				icon = 'info';
-				break;
+				return 'neutral';
 		}
-
-		return icon;
 	};
 
 	clearText = text => {
@@ -85,45 +74,38 @@ export default class SimpleNotice extends Component {
 		const {
 			children,
 			className,
-			icon,
 			isCompact,
 			onDismissClick,
 			showDismiss = ! isCompact, // by default, show on normal notices, don't show on compact ones
-			status,
 			text,
+			title,
 			dismissText,
 			display,
 		} = this.props;
-		const classes = clsx( 'dops-notice', status, className, {
-			'is-compact': isCompact,
-			'is-dismissable': showDismiss,
-			'is-hidden': ! display,
-		} );
+
+		// `text` marks the caller as using the two-slot form, where children are the
+		// actions. Without it, children are the body.
+		const body = text ? this.clearText( text ) : children;
+		const actions = text ? children : null;
 
 		return (
-			<div className={ classes }>
-				<span className="dops-notice__icon-wrapper">
-					<Gridicon className="dops-notice__icon" icon={ icon || this.getIcon() } size={ 24 } />
-				</span>
-				<span className="dops-notice__content">
-					<span className="dops-notice__text">{ text ? this.clearText( text ) : children }</span>
-				</span>
-				{ text ? children : null }
-				{ showDismiss && (
-					<span
-						role="button"
-						onKeyDown={ onKeyDownCallback( onDismissClick ) }
-						tabIndex="0"
-						className="dops-notice__dismiss"
-						onClick={ onDismissClick }
-					>
-						<Gridicon icon="cross" size={ 24 } />
-						<span className="dops-notice__screen-reader-text screen-reader-text">
-							{ dismissText }
-						</span>
-					</span>
+			<Notice.Root
+				intent={ this.getIntent() }
+				// `Notice.Root`'s own class is a CSS-module hash, so page styles need
+				// `jp-notice`. `is-hidden` keeps `display` hiding the notice rather than
+				// unmounting it: children like NoticeActionReconnect track on mount.
+				className={ clsx( 'jp-notice', className, { 'is-hidden': ! display } ) }
+				// The legacy notice never announced. Several of these are permanent, and
+				// the ones that should announce already sit in an aria-live container.
+				spokenMessage={ null }
+			>
+				{ title ? <Notice.Title>{ title }</Notice.Title> : null }
+				{ ( body || body === 0 ) && (
+					<Notice.Description render={ <div /> }>{ body }</Notice.Description>
 				) }
-			</div>
+				{ actions ? <Notice.Actions>{ actions }</Notice.Actions> : null }
+				{ showDismiss && <Notice.CloseIcon label={ dismissText } onClick={ onDismissClick } /> }
+			</Notice.Root>
 		);
 	}
 }
diff --git a/projects/plugins/jetpack/_inc/client/components/notice/notice-action.jsx b/projects/plugins/jetpack/_inc/client/components/notice/notice-action.jsx
index ffb22ad95ea8..c597f729bb0a 100644
--- a/projects/plugins/jetpack/_inc/client/components/notice/notice-action.jsx
+++ b/projects/plugins/jetpack/_inc/client/components/notice/notice-action.jsx
@@ -1,8 +1,6 @@
+import { Notice } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import Gridicon from 'components/gridicon';
-
-import './style.scss';
 
 export default class NoticeAction extends Component {
 	static displayName = 'NoticeAction';
@@ -11,8 +9,6 @@ export default class NoticeAction extends Component {
 		href: PropTypes.string,
 		onClick: PropTypes.func,
 		external: PropTypes.bool,
-		icon: PropTypes.string,
-		variant: PropTypes.oneOf( [ 'primary', 'secondary' ] ),
 	};
 
 	static defaultProps = {
@@ -20,27 +16,17 @@ export default class NoticeAction extends Component {
 	};
 
 	render() {
-		let className = 'dops-notice__action';
-		if ( this.props.variant === 'secondary' ) {
-			className += ' is-secondary';
-		}
-
-		const attributes = {
-			className,
-			href: this.props.href,
-			onClick: this.props.onClick,
-		};
-
-		if ( this.props.external ) {
-			attributes.target = '_blank';
+		const { children, href, onClick, external } = this.props;
+
+		if ( href ) {
+			// `openInNewTab` also draws the external-link arrow the old Gridicon supplied.
+			return (
+				<Notice.ActionLink href={ href } onClick={ onClick } openInNewTab={ external }>
+					{ children }
+				</Notice.ActionLink>
+			);
 		}
 
-		return (
-			<a { ...attributes }>
-				<span>{ this.props.children }</span>
-				{ this.props.icon && <Gridicon icon={ this.props.icon } size={ 24 } /> }
-				{ this.props.external && <Gridicon icon="external" size={ 24 } /> }
-			</a>
-		);
+		return <Notice.ActionButton onClick={ onClick }>{ children }</Notice.ActionButton>;
 	}
 }
diff --git a/projects/plugins/jetpack/_inc/client/components/notice/test/component.jsx b/projects/plugins/jetpack/_inc/client/components/notice/test/component.jsx
new file mode 100644
index 000000000000..810e2d1b3571
--- /dev/null
+++ b/projects/plugins/jetpack/_inc/client/components/notice/test/component.jsx
@@ -0,0 +1,137 @@
+import { render, screen } from 'test/test-utils';
+import SimpleNotice from '../index';
+import NoticeAction from '../notice-action';
+
+describe( 'SimpleNotice', () => {
+	it( 'renders its children as the body when there is no text', () => {
+		render( <SimpleNotice>Body copy</SimpleNotice> );
+		expect( screen.getByText( 'Body copy' ) ).toBeInTheDocument();
+	} );
+
+	it( 'renders children as actions when text is set', () => {
+		render(
+			<SimpleNotice text="The message">
+				<NoticeAction href="https://example.com/go">Do the thing</NoticeAction>
+			</SimpleNotice>
+		);
+		expect( screen.getByText( 'The message' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'link', { name: /Do the thing/ } ) ).toHaveAttribute(
+			'href',
+			'https://example.com/go'
+		);
+	} );
+
+	it( 'renders a title above the body', () => {
+		render(
+			<SimpleNotice title="The heading">
+				<div>The body</div>
+			</SimpleNotice>
+		);
+		expect( screen.getByText( 'The heading' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'The body' ) ).toBeInTheDocument();
+	} );
+
+	it.each( [
+		[ 'is-error', 'error' ],
+		[ 'is-warning', 'warning' ],
+		[ 'is-success', 'success' ],
+		[ 'is-info', 'info' ],
+	] )( 'maps status %s to the %s intent', ( status, intent ) => {
+		const { container } = render( <SimpleNotice status={ status }>Text</SimpleNotice> );
+		// eslint-disable-next-line testing-library/no-container
+		expect( container.querySelector( '.jp-notice' ).className ).toMatch(
+			new RegExp( `is-${ intent }` )
+		);
+	} );
+
+	// Regression: `display` used to unmount the subtree. Children such as
+	// NoticeActionReconnect record a Tracks event on mount, so it must hide instead.
+	it( 'keeps the notice mounted but hidden when display is false', () => {
+		const onMount = jest.fn();
+		const Child = () => {
+			onMount();
+			return <span>Still here</span>;
+		};
+
+		const { container } = render(
+			<SimpleNotice display={ false }>
+				<Child />
+			</SimpleNotice>
+		);
+
+		// eslint-disable-next-line testing-library/no-container
+		expect( container.querySelector( '.jp-notice' ) ).toHaveClass( 'is-hidden' );
+		expect( onMount ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'does not re-mount its children when display flips', () => {
+		const onMount = jest.fn();
+		const Child = () => {
+			onMount();
+			return <span>Child</span>;
+		};
+
+		const { rerender } = render(
+			<SimpleNotice display={ true }>
+				<Child />
+			</SimpleNotice>
+		);
+		onMount.mockClear();
+
+		rerender(
+			<SimpleNotice display={ false }>
+				<Child />
+			</SimpleNotice>
+		);
+		rerender(
+			<SimpleNotice display={ true }>
+				<Child />
+			</SimpleNotice>
+		);
+
+		// Re-renders, but never a fresh mount.
+		expect( screen.getByText( 'Child' ) ).toBeInTheDocument();
+		expect( onMount ).toHaveBeenCalledTimes( 2 );
+	} );
+
+	it( 'calls onDismissClick from the close button', async () => {
+		const onDismissClick = jest.fn();
+		render(
+			<SimpleNotice text="Dismiss me" onDismissClick={ onDismissClick } dismissText="Dismiss" />
+		);
+		screen.getByRole( 'button', { name: 'Dismiss' } ).click();
+		expect( onDismissClick ).toHaveBeenCalled();
+	} );
+
+	it( 'renders no close button when showDismiss is false', () => {
+		render( <SimpleNotice showDismiss={ false } text="No dismissing" /> );
+		expect( screen.queryByRole( 'button' ) ).not.toBeInTheDocument();
+	} );
+} );
+
+describe( 'NoticeAction', () => {
+	it( 'renders a button when it has no href', () => {
+		const onClick = jest.fn();
+		render(
+			<SimpleNotice text="With an action">
+				<NoticeAction onClick={ onClick }>Press me</NoticeAction>
+			</SimpleNotice>
+		);
+		screen.getByRole( 'button', { name: 'Press me' } ).click();
+		expect( onClick ).toHaveBeenCalled();
+	} );
+
+	it( 'opens external links in a new tab', () => {
+		render(
+			<SimpleNotice text="With a link">
+				<NoticeAction href="https://example.com/docs" external>
+					Read the docs
+				</NoticeAction>
+			</SimpleNotice>
+		);
+		expect( screen.getByRole( 'link', { name: /Read the docs/ } ) ).toHaveAttribute(
+			'target',
+			'_blank'
+		);
+	} );
+} );
diff --git a/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss b/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss
index 3c6baeb3a94d..29f56d099930 100644
--- a/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss
+++ b/projects/plugins/jetpack/_inc/client/components/settings-card/style.scss
@@ -52,21 +52,10 @@
 		border-top: 1px solid var(--jp-gray);
 	}
 
-	.dops-notice {
-		margin-bottom: 0;
-
-		&,
-		.dops-notice__icon-wrapper {
-			border-radius: 0;
-		}
-
-		.dops-notice__text {
-
-			&,
-			a {
-				color: var(--jp-white);
-			}
-		}
+	// Notices sit outside `.jp-form-settings-group`, so they need its padding —
+	// and stay clear of the offline-mode scrim the group paints over its children.
+	.jp-settings-card__notice {
+		padding: rem.convert(16px) rem.convert(24px);
 	}
 
 	.dops-card.is-card-link + .jp-form-settings-group {
diff --git a/projects/plugins/jetpack/_inc/client/reader/index.jsx b/projects/plugins/jetpack/_inc/client/reader/index.jsx
index 42031139d060..ebafa0502c3a 100644
--- a/projects/plugins/jetpack/_inc/client/reader/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/reader/index.jsx
@@ -155,7 +155,7 @@ function Reader( props ) {
 				hideButton
 				module={ moduleName }
 			>
-				{ woaNotice }
+				{ woaNotice && <div className="jp-settings-card__notice">{ woaNotice }</div> }
 				{ readerToggle }
 				{ visitReaderLink }
 			</SettingsCard>
diff --git a/projects/plugins/jetpack/_inc/client/scss/shared/_main.scss b/projects/plugins/jetpack/_inc/client/scss/shared/_main.scss
index 53f31e539750..0e73b8c6cea0 100644
--- a/projects/plugins/jetpack/_inc/client/scss/shared/_main.scss
+++ b/projects/plugins/jetpack/_inc/client/scss/shared/_main.scss
@@ -46,6 +46,21 @@
 	text-decoration: underline;
 }
 
+// `@wordpress/ui` sits in `@layer wp-ui`, which loses to the unlayered
+// `.jetpack-pagestyles a` above, and its `Link` relies on the UA underline.
+// WordPress/gutenberg#82620 narrows this rather than retiring it: the upstream
+// defense reaches wp-ui `Link` only, and three notices interpolate a raw `<a>`.
+.jetpack-pagestyles .jp-notice a {
+	text-decoration-line: underline;
+	text-decoration-thickness: from-font; // `text-decoration: none` above resets it.
+}
+
+// Unlayered on purpose: `Notice.Root` sets `display: grid`
+// inside `@layer wp-ui`, which `[hidden]` cannot override.
+.jp-notice.is-hidden {
+	display: none;
+}
+
 // restyled the arrow to match our gray
 .toplevel_page_jetpack ul#adminmenu a.wp-has-current-submenu::after {
 	border-right-color: colors.$gray-light;
diff --git a/projects/plugins/jetpack/_inc/client/scss/style.scss b/projects/plugins/jetpack/_inc/client/scss/style.scss
index 4f5fda4028b6..99fdf7600e77 100644
--- a/projects/plugins/jetpack/_inc/client/scss/style.scss
+++ b/projects/plugins/jetpack/_inc/client/scss/style.scss
@@ -38,6 +38,9 @@
 @include meta.load-css( "../components/support-card/style" );
 @include meta.load-css( "../components/forms/styles" );
 @include meta.load-css( "../components/admin-notices/style" );
+// `AdminNotices` rebuilds core notices into the dops chassis with jQuery,
+// so these rules outlive `SimpleNotice`'s move to `@wordpress/ui`.
+@include meta.load-css( "../components/notice/style" );
 @include meta.load-css( "../components/module-toggle/style" );
 @include meta.load-css( "../components/navigation-settings/style" );
 @include meta.load-css( "../components/settings-nav-tabs/style" );
diff --git a/projects/plugins/jetpack/_inc/client/security/account-protection.jsx b/projects/plugins/jetpack/_inc/client/security/account-protection.jsx
index c5ca0764eb69..5c632b063c10 100644
--- a/projects/plugins/jetpack/_inc/client/security/account-protection.jsx
+++ b/projects/plugins/jetpack/_inc/client/security/account-protection.jsx
@@ -25,14 +25,15 @@ const AccountProtectionComponent = class extends Component {
 				hideButton={ true }
 			>
 				{ ! isSupported && (
-					<SimpleNotice
-						status={ 'is-info' }
-						showDismiss={ false }
-						text={ __(
-							'This feature has been disabled by your site administrator or hosting provider.',
-							'jetpack'
-						) }
-						children={
+					<div className="jp-settings-card__notice">
+						<SimpleNotice
+							status={ 'is-info' }
+							showDismiss={ false }
+							text={ __(
+								'This feature has been disabled by your site administrator or hosting provider.',
+								'jetpack'
+							) }
+						>
 							<NoticeAction
 								external
 								href={ getRedirectUrl( 'jetpack-account-protection', {
@@ -41,23 +42,24 @@ const AccountProtectionComponent = class extends Component {
 							>
 								{ __( 'Learn more', 'jetpack' ) }
 							</NoticeAction>
-						}
-					/>
+						</SimpleNotice>
+					</div>
 				) }
 				{ isSupported && ! isActive && (
-					<SimpleNotice
-						showDismiss={ false }
-						status={ 'is-info' }
-						text={ __(
-							'Jetpack recommends enabling this feature to enhance account security.',
-							'jetpack'
-						) }
-						children={
+					<div className="jp-settings-card__notice">
+						<SimpleNotice
+							showDismiss={ false }
+							status={ 'is-info' }
+							text={ __(
+								'Jetpack recommends enabling this feature to enhance account security.',
+								'jetpack'
+							) }
+						>
 							<NoticeAction external href={ getRedirectUrl( 'jetpack-account-protection-risks' ) }>
 								{ __( 'Learn about the risks', 'jetpack' ) }
 							</NoticeAction>
-						}
-					/>
+						</SimpleNotice>
+					</div>
 				) }
 				<SettingsGroup
 					hasChild
diff --git a/projects/plugins/jetpack/_inc/client/sharing/likes.jsx b/projects/plugins/jetpack/_inc/client/sharing/likes.jsx
index 0032a5a847ed..2eef9caba73e 100644
--- a/projects/plugins/jetpack/_inc/client/sharing/likes.jsx
+++ b/projects/plugins/jetpack/_inc/client/sharing/likes.jsx
@@ -83,13 +83,16 @@ export const Likes = withModuleSettingsFormHelpers(
 								{ __( 'Add Like buttons to your posts and pages', 'jetpack' ) }
 							</span>
 						</ModuleToggle>
-						{ shouldShowLikeBlock && (
+					</SettingsGroup>
+
+					{ shouldShowLikeBlock && (
+						<div className="jp-settings-card__notice">
 							<BlockThemeNotice
 								isModuleActive={ isActive }
 								redirectSlug="jetpack-support-like-block"
 							/>
-						) }
-					</SettingsGroup>
+						</div>
+					) }
 
 					{ shouldShowLikeBlock && configCard() }
 				</SettingsCard>
diff --git a/projects/plugins/jetpack/_inc/client/sharing/share-buttons.jsx b/projects/plugins/jetpack/_inc/client/sharing/share-buttons.jsx
index d3e5bc5c8230..e0b840afcb8f 100644
--- a/projects/plugins/jetpack/_inc/client/sharing/share-buttons.jsx
+++ b/projects/plugins/jetpack/_inc/client/sharing/share-buttons.jsx
@@ -115,17 +115,7 @@ export const ShareButtons = withModuleSettingsFormHelpers(
 				);
 
 				if ( ! shouldUseSharingBlockAction ) {
-					return (
-						<>
-							{ toggle }
-							{ shouldShowSharingBlock && (
-								<BlockThemeNotice
-									isModuleActive={ isActive }
-									redirectSlug="jetpack-support-sharing-block"
-								/>
-							) }
-						</>
-					);
+					return toggle;
 				}
 
 				if ( isForcedActive ) {
@@ -175,6 +165,15 @@ export const ShareButtons = withModuleSettingsFormHelpers(
 						{ moduleAction() }
 					</SettingsGroup>
 
+					{ ! shouldUseSharingBlockAction && shouldShowSharingBlock && (
+						<div className="jp-settings-card__notice">
+							<BlockThemeNotice
+								isModuleActive={ isActive }
+								redirectSlug="jetpack-support-sharing-block"
+							/>
+						</div>
+					) }
+
 					{ ( isActive || shouldShowSharingBlock ) &&
 						! shouldUseSharingBlockAction &&
 						configCard() }
diff --git a/projects/plugins/jetpack/_inc/client/traffic/index.jsx b/projects/plugins/jetpack/_inc/client/traffic/index.jsx
index 888b5f1693b9..67630b95b3a7 100644
--- a/projects/plugins/jetpack/_inc/client/traffic/index.jsx
+++ b/projects/plugins/jetpack/_inc/client/traffic/index.jsx
@@ -108,9 +108,13 @@ export class Traffic extends Component {
 					/>
 				) }
 				{ seoMovedToDashboard && foundMovedToDashboard && (
-					<SimpleNotice status="is-info" showDismiss={ false } className="jp-seo-moved-banner">
+					<SimpleNotice
+						status="is-info"
+						showDismiss={ false }
+						className="jp-seo-moved-banner"
+						title={ __( 'Jetpack SEO has its own dashboard', 'jetpack' ) }
+					>
 						<div className="jp-seo-moved-banner__content">
-							<strong>{ __( 'Jetpack SEO has its own dashboard', 'jetpack' ) }</strong>
 							<p>
 								{ __(
 									'Manage your search engine optimization settings from the redesigned SEO dashboard.',
diff --git a/projects/plugins/jetpack/_inc/client/traffic/seo.jsx b/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
index 49d7b3843f40..bb48fd3a5e3d 100644
--- a/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
+++ b/projects/plugins/jetpack/_inc/client/traffic/seo.jsx
@@ -192,9 +192,13 @@ export const SEO = withModuleSettingsFormHelpers(
 				  );
 
 			return (
-				<SimpleNotice status="is-info" showDismiss={ false } className="jp-seo-optin-banner">
+				<SimpleNotice
+					status="is-info"
+					showDismiss={ false }
+					className="jp-seo-optin-banner"
+					title={ __( 'SEO has a new home', 'jetpack' ) }
+				>
 					<div className="jp-seo-optin-banner__content">
-						<strong>{ __( 'SEO has a new home', 'jetpack' ) }</strong>
 						<p>
 							{ __(
 								'Manage all of your search engine optimization from the redesigned Jetpack SEO dashboard.',
@@ -265,6 +269,7 @@ export const SEO = withModuleSettingsFormHelpers(
 				return acc;
 			}, [] );
 			const hasConflictingSeoPlugin = conflictingSeoPlugins.length > 0;
+			const optInBanner = this.seoOptInBanner();
 
 			const frontPageMetaCharCountClasses = clsx( {
 				'jp-seo-front-page-description-count': true,
@@ -286,7 +291,18 @@ export const SEO = withModuleSettingsFormHelpers(
 					saveDisabled={ this.props.isSavingAnyOption( this.constants.moduleOptionsArray ) }
 					hideButton={ hasConflictingSeoPlugin || ! hasSeoTools }
 				>
-					{ this.seoOptInBanner() }
+					{ optInBanner && <div className="jp-settings-card__notice">{ optInBanner }</div> }
+					{ hasSeoTools && hasConflictingSeoPlugin && (
+						<div className="jp-settings-card__notice">
+							<SimpleNotice showDismiss={ false }>
+								{ sprintf(
+									/* translators: %s is the name of conflicting SEO plugin */
+									__( 'Your SEO settings are managed by the following plugin: %s', 'jetpack' ),
+									conflictingSeoPlugins[ 0 ].name
+								) }
+							</SimpleNotice>
+						</div>
+					) }
 					{ hasSeoTools && (
 						<SettingsGroup
 							hasChild
@@ -300,15 +316,6 @@ export const SEO = withModuleSettingsFormHelpers(
 								link: getRedirectUrl( 'jetpack-support-seo-tools' ),
 							} }
 						>
-							{ hasConflictingSeoPlugin && (
-								<SimpleNotice showDismiss={ false }>
-									{ sprintf(
-										/* translators: %s is the name of conflicting SEO plugin */
-										__( 'Your SEO settings are managed by the following plugin: %s', 'jetpack' ),
-										conflictingSeoPlugins[ 0 ].name
-									) }
-								</SimpleNotice>
-							) }
 							<p>
 								{ __(
 									'Take control of the way search engines represent your site. With Jetpack’s SEO tools you can preview how your content will look on popular search engines and change items like your site name and tagline in seconds.',
diff --git a/projects/plugins/jetpack/changelog/update-simple-notice-wpds-wrapper b/projects/plugins/jetpack/changelog/update-simple-notice-wpds-wrapper
new file mode 100644
index 000000000000..dc353b49b39e
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/update-simple-notice-wpds-wrapper
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Notices: Render Jetpack admin notices with the WordPress design system Notice component.