diff --git a/packages/admin-ui/README.md b/packages/admin-ui/README.md
index cbff215b52fb44..728f783d6be2df 100644
--- a/packages/admin-ui/README.md
+++ b/packages/admin-ui/README.md
@@ -14,7 +14,7 @@ npm install @wordpress/admin-ui --save
 
 ## Setup
 
-This package requires CSS from this package and from multiple dependency packages.
+This package requires CSS from multiple dependency packages.
 
 ### Within WordPress
 
@@ -31,7 +31,6 @@ npm install @wordpress/admin-ui @wordpress/theme @wordpress/components
 ```js
 import '@wordpress/theme/design-tokens.css';
 import '@wordpress/components/build-style/style.css';
-import '@wordpress/admin-ui/build-style/style.css';
 ```
 
 RTL versions of the stylesheets are available in the same paths, but with `-rtl` appended to the filename (`style-rtl.css`). The design tokens stylesheet is universal and does not have a separate RTL version.
diff --git a/packages/admin-ui/package.json b/packages/admin-ui/package.json
index 08126fc4dd4ad0..e9e66cd1156f4d 100644
--- a/packages/admin-ui/package.json
+++ b/packages/admin-ui/package.json
@@ -26,7 +26,6 @@
 		"src",
 		"build",
 		"build-module",
-		"build-style",
 		"build-types",
 		"*.md"
 	],
@@ -38,14 +37,12 @@
 			"import": "./build-module/index.mjs",
 			"require": "./build/index.cjs"
 		},
-		"./package.json": "./package.json",
-		"./build-style/": "./build-style/"
+		"./package.json": "./package.json"
 	},
 	"react-native": "src/index",
 	"types": "build-types",
 	"sideEffects": [
-		"build-style/**",
-		"src/**/*.scss"
+		"src/**/*.module.scss"
 	],
 	"dependencies": {
 		"@wordpress/base-styles": "file:../base-styles",
diff --git a/packages/admin-ui/src/breadcrumbs/index.tsx b/packages/admin-ui/src/breadcrumbs/index.tsx
index fc327b9a4e822e..8f867640b43b2b 100644
--- a/packages/admin-ui/src/breadcrumbs/index.tsx
+++ b/packages/admin-ui/src/breadcrumbs/index.tsx
@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import type { BreadcrumbsProps } from './types';
+import styles from './style.module.scss';
 
 /**
  * Renders a breadcrumb navigation trail.
@@ -56,7 +57,7 @@ export const Breadcrumbs = ( { items }: BreadcrumbsProps ) => {
 		<nav aria-label={ __( 'Breadcrumbs' ) }>
 			<HStack
 				as="ul"
-				className="admin-ui-breadcrumbs__list"
+				className={ styles.list }
 				spacing={ 0 }
 				justify="flex-start"
 				alignment="center"
diff --git a/packages/admin-ui/src/breadcrumbs/style.scss b/packages/admin-ui/src/breadcrumbs/style.module.scss
similarity index 87%
rename from packages/admin-ui/src/breadcrumbs/style.scss
rename to packages/admin-ui/src/breadcrumbs/style.module.scss
index 944e1b6044b4bf..ec7fa4829ff9bf 100644
--- a/packages/admin-ui/src/breadcrumbs/style.scss
+++ b/packages/admin-ui/src/breadcrumbs/style.module.scss
@@ -1,6 +1,6 @@
 @use "@wordpress/base-styles/variables";
 
-.admin-ui-breadcrumbs__list {
+.list {
 	// @TODO: use Text component from UI when available.
 	font-family: var(--wpds-font-family-heading);
 	font-size: var(--wpds-font-size-lg);
@@ -15,7 +15,8 @@
 
 	li:not(:last-child)::after {
 		content: "/";
-		margin: 0 variables.$grid-unit-10;
+		margin-block: 0;
+		margin-inline: variables.$grid-unit-10;
 	}
 
 	h1 {
diff --git a/packages/admin-ui/src/page/header.tsx b/packages/admin-ui/src/page/header.tsx
index 322212a389f022..7ff48101636867 100644
--- a/packages/admin-ui/src/page/header.tsx
+++ b/packages/admin-ui/src/page/header.tsx
@@ -7,6 +7,7 @@ import { Stack } from '@wordpress/ui';
  * Internal dependencies
  */
 import { SidebarToggleSlot } from './sidebar-toggle-slot';
+import styles from './style.module.scss';
 
 export default function Header( {
 	headingLevel = 2,
@@ -29,7 +30,7 @@ export default function Header( {
 	return (
 		<Stack
 			direction="column"
-			className="admin-ui-page__header"
+			className={ styles.header }
 			render={ <header /> }
 		>
 			<Stack direction="row" justify="space-between" gap="sm">
@@ -37,11 +38,11 @@ export default function Header( {
 					{ showSidebarToggle && (
 						<SidebarToggleSlot
 							bubblesVirtually
-							className="admin-ui-page__sidebar-toggle-slot"
+							className={ styles[ 'sidebar-toggle-slot' ] }
 						/>
 					) }
 					{ title && (
-						<HeadingTag className="admin-ui-page__header-title">
+						<HeadingTag className={ styles[ 'header-title' ] }>
 							{ title }
 						</HeadingTag>
 					) }
@@ -52,14 +53,14 @@ export default function Header( {
 					direction="row"
 					gap="sm"
 					style={ { width: 'auto', flexShrink: 0 } }
-					className="admin-ui-page__header-actions"
+					className={ styles[ 'header-actions' ] }
 					align="center"
 				>
 					{ actions }
 				</Stack>
 			</Stack>
 			{ subTitle && (
-				<p className="admin-ui-page__header-subtitle">{ subTitle }</p>
+				<p className={ styles[ 'header-subtitle' ] }>{ subTitle }</p>
 			) }
 		</Stack>
 	);
diff --git a/packages/admin-ui/src/page/index.tsx b/packages/admin-ui/src/page/index.tsx
index 66d2435d3f944d..154527912d8089 100644
--- a/packages/admin-ui/src/page/index.tsx
+++ b/packages/admin-ui/src/page/index.tsx
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import Header from './header';
 import NavigableRegion from '../navigable-region';
 import { SidebarToggleFill } from './sidebar-toggle-slot';
+import styles from './style.module.scss';
 
 function Page( {
 	headingLevel,
@@ -35,7 +36,7 @@ function Page( {
 	hasPadding?: boolean;
 	showSidebarToggle?: boolean;
 } ) {
-	const classes = clsx( 'admin-ui-page', className );
+	const classes = clsx( styles.page, className );
 	const effectiveAriaLabel =
 		ariaLabel ?? ( typeof title === 'string' ? title : '' );
 
@@ -53,7 +54,12 @@ function Page( {
 				/>
 			) }
 			{ hasPadding ? (
-				<div className="admin-ui-page__content has-padding">
+				<div
+					className={ clsx(
+						styles.content,
+						styles[ 'has-padding' ]
+					) }
+				>
 					{ children }
 				</div>
 			) : (
diff --git a/packages/admin-ui/src/page/style.scss b/packages/admin-ui/src/page/style.module.scss
similarity index 63%
rename from packages/admin-ui/src/page/style.scss
rename to packages/admin-ui/src/page/style.module.scss
index 0232f7d94b9c19..7041725d7ed2ad 100644
--- a/packages/admin-ui/src/page/style.scss
+++ b/packages/admin-ui/src/page/style.module.scss
@@ -1,4 +1,4 @@
-.admin-ui-page {
+.page {
 	display: flex;
 	height: 100%;
 	// @TODO: Revisit page background color. Consider using
@@ -13,16 +13,17 @@
 	text-wrap: pretty;
 }
 
-.admin-ui-page__header {
-	padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl);
-	border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+.header {
+	padding-block: var(--wpds-dimension-padding-md);
+	padding-inline: var(--wpds-dimension-padding-2xl);
+	border-block-end: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	background: var(--wpds-color-bg-surface-neutral-strong);
 	position: sticky;
-	top: 0;
+	inset-block-start: 0;
 	z-index: 1;
 }
 
-.admin-ui-page__header-title {
+.header-title {
 	// @TODO: use Text component from UI when available.
 	font-family: var(--wpds-font-family-heading);
 	font-size: var(--wpds-font-size-lg);
@@ -34,11 +35,11 @@
 	white-space: nowrap;
 }
 
-.admin-ui-page__sidebar-toggle-slot:empty {
+.sidebar-toggle-slot:empty {
 	display: none;
 }
 
-.admin-ui-page__header-subtitle {
+.header-subtitle {
 	padding-block-end: var(--wpds-dimension-padding-xs);
 	color: var(--wpds-color-fg-content-neutral-weak);
 	font-size: var(--wpds-font-size-md);
@@ -46,23 +47,27 @@
 	margin: 0;
 }
 
-.admin-ui-page__content {
+.content {
 	flex-grow: 1;
 	overflow: auto;
 	display: flex;
 	flex-direction: column;
 
 	&.has-padding {
-		padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+		padding-block: var(--wpds-dimension-padding-lg);
+		padding-inline: var(--wpds-dimension-padding-2xl);
 	}
 }
 
 // Show button text labels when preference is enabled.
-.show-icon-labels {
-	.admin-ui-page__header-actions {
-		.components-button.has-icon {
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown -- :global is a CSS Modules construct, not a standard pseudo-class */
+:global(.show-icon-labels) {
+	.header-actions {
+		/* stylelint-disable-next-line selector-pseudo-class-no-unknown -- :global is a CSS Modules construct, not a standard pseudo-class */
+		:global(.components-button.has-icon) {
 			width: auto;
-			padding: 0 var(--wpds-dimension-padding-xs);
+			padding-block: 0;
+			padding-inline: var(--wpds-dimension-padding-xs);
 
 			// Hide the button icons when labels are set to display...
 			svg {
diff --git a/packages/admin-ui/src/style.scss b/packages/admin-ui/src/style.scss
deleted file mode 100644
index 1e7273a3ef4bc2..00000000000000
--- a/packages/admin-ui/src/style.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use "./page/style.scss" as *;
-@use "./breadcrumbs/style.scss" as *;
diff --git a/packages/admin-ui/tsconfig.json b/packages/admin-ui/tsconfig.json
index 5f3610ded015dc..93e8788fe99150 100644
--- a/packages/admin-ui/tsconfig.json
+++ b/packages/admin-ui/tsconfig.json
@@ -1,6 +1,9 @@
 {
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"types": [ "style-imports" ]
+	},
 	"references": [
 		{ "path": "../components" },
 		{ "path": "../element" },
diff --git a/packages/boot/src/style.scss b/packages/boot/src/style.scss
index 4545607b2a2522..b4b3569db32f61 100644
--- a/packages/boot/src/style.scss
+++ b/packages/boot/src/style.scss
@@ -1,5 +1,4 @@
 @use "@wordpress/theme/src/prebuilt/css/design-tokens.css" as *;
-@use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
 
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 669941757a7c4b..adeb07d889552d 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -1,7 +1,6 @@
 @use "@wordpress/base-styles/default-custom-properties";
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "./components/back-button/style.scss" as *;
 @use "./components/layout/style.scss" as *;
 @use "./components/meta-boxes/meta-boxes-area/style.scss" as *;
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index a54d607b23a0a1..fe2ec464fc9ede 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -1,7 +1,6 @@
 @use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/mixins" as *;
 @use "@wordpress/base-styles/default-custom-properties";
-@use "@wordpress/admin-ui/build-style/style.css" as admin-ui;
 @use "@wordpress/dataviews/build-style/style.css" as dataviews;
 @use "@wordpress/fields/build-style/style.css" as fields;
 @use "@wordpress/global-styles-ui/build-style/style.css" as global-styles-ui;
diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss
index 9779a5d1d09f34..ab5020e53efec7 100644
--- a/packages/interface/src/style.scss
+++ b/packages/interface/src/style.scss
@@ -1,4 +1,3 @@
-@use "@wordpress/admin-ui/build-style/style.css" as *;
 @use "./components/complementary-area-header/style.scss" as *;
 @use "./components/complementary-area/style.scss" as *;
 @use "./components/fullscreen-mode/style.scss" as *;
diff --git a/storybook/package-styles/admin-ui-ltr.lazy.scss b/storybook/package-styles/admin-ui-ltr.lazy.scss
deleted file mode 100644
index 6ab0cc5e7bbd44..00000000000000
--- a/storybook/package-styles/admin-ui-ltr.lazy.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../../packages/admin-ui/build-style/style.css";
diff --git a/storybook/package-styles/admin-ui-rtl.lazy.scss b/storybook/package-styles/admin-ui-rtl.lazy.scss
deleted file mode 100644
index cebca2ee288b65..00000000000000
--- a/storybook/package-styles/admin-ui-rtl.lazy.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "../../packages/admin-ui/build-style/style-rtl.css";
diff --git a/storybook/package-styles/config.js b/storybook/package-styles/config.js
index 745d6b1da43585..41b00824a9da8e 100644
--- a/storybook/package-styles/config.js
+++ b/storybook/package-styles/config.js
@@ -17,8 +17,6 @@ import fieldsLtr from '../package-styles/fields-ltr.lazy.scss?inline';
 import fieldsRtl from '../package-styles/fields-rtl.lazy.scss?inline';
 import mediaFieldsLtr from '../package-styles/media-fields-ltr.lazy.scss?inline';
 import mediaFieldsRtl from '../package-styles/media-fields-rtl.lazy.scss?inline';
-import adminUiLtr from '../package-styles/admin-ui-ltr.lazy.scss?inline';
-import adminUiRtl from '../package-styles/admin-ui-rtl.lazy.scss?inline';
 import designTokens from '../package-styles/design-tokens.lazy.scss?inline';
 
 /**
@@ -77,8 +75,8 @@ const CONFIG = [
 	},
 	{
 		componentIdMatcher: /^admin-ui-/,
-		ltr: [ designTokens, componentsLtr, adminUiLtr ],
-		rtl: [ designTokens, componentsRtl, adminUiRtl ],
+		ltr: [ designTokens, componentsLtr ],
+		rtl: [ designTokens, componentsRtl ],
 	},
 	{
 		componentIdMatcher: /^design-system-/,