diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk
index 733b36dfa..d0d1bc253 100644
--- a/docs/_includes/base.njk
+++ b/docs/_includes/base.njk
@@ -34,7 +34,7 @@
     <link rel="stylesheet" id="theme-stylesheet" href="/dist/themes/default.css" />
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities/index.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
 
     {# Docs styles #}
diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk
index 6e75aec6e..38efb0f00 100644
--- a/docs/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -23,7 +23,7 @@
     <link rel="stylesheet" id="theme-stylesheet" />
     <link rel="stylesheet" href="/dist/themes/applied.css" />
     <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/layout.css" />
-    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities.css" />
+    <link id="color-stylesheet" rel="stylesheet" href="/dist/themes/utilities/index.css" />
     <link rel="stylesheet" href="/dist/themes/forms.css" />
 
     {# Set the theme to prevent flashing #}
diff --git a/docs/assets/scripts/code-examples.js b/docs/assets/scripts/code-examples.js
index cad380838..d2361dffe 100644
--- a/docs/assets/scripts/code-examples.js
+++ b/docs/assets/scripts/code-examples.js
@@ -21,7 +21,7 @@ document.addEventListener('click', event => {
       `<link rel="stylesheet" href="${cdnUrl}themes/default.css">\n` +
       `<link rel="stylesheet" href="${cdnUrl}themes/applied.css">\n` +
       `<link rel="stylesheet" href="${cdnUrl}themes/layout.css">\n` +
-      `<link rel="stylesheet" href="${cdnUrl}themes/utilities.css">\n\n` +
+      `<link rel="stylesheet" href="${cdnUrl}themes/utilities/index.css">\n\n` +
       `${code.textContent}`;
     const css = 'html > body {\n  font: 16px sans-serif;\n  padding: 2rem;\n}';
     const js = '';
diff --git a/src/themes/utilities.css b/src/themes/utilities.css
deleted file mode 100644
index 4dee28b32..000000000
--- a/src/themes/utilities.css
+++ /dev/null
@@ -1,217 +0,0 @@
-/* #region Scroll Lock */
-/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
-@supports (scrollbar-gutter: stable) {
-  .wa-scroll-lock {
-    scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
-  }
-
-  .wa-scroll-lock body {
-    overflow: hidden !important;
-  }
-}
-
-/** This can go away once Safari has scrollbar-gutter support. */
-@supports not (scrollbar-gutter: stable) {
-  .wa-scroll-lock body {
-    padding-right: var(--wa-scroll-lock-size) !important;
-    overflow: hidden !important;
-  }
-}
-/* #endregion */
-
-/* #region Align Items */
-.wa-align-items-start {
-  align-items: flex-start;
-}
-.wa-align-items-end {
-  align-items: flex-end;
-}
-.wa-align-items-center {
-  align-items: center;
-}
-.wa-align-items-stretch {
-  align-items: stretch;
-}
-.wa-align-items-baseline {
-  align-items: baseline;
-}
-/* #endregion */
-
-/* #region Border Radius */
-.wa-border-radius-xs {
-  border-radius: var(--wa-border-radius-xs);
-}
-.wa-border-radius-s {
-  border-radius: var(--wa-border-radius-s);
-}
-.wa-border-radius-m {
-  border-radius: var(--wa-border-radius-m);
-}
-.wa-border-radius-l {
-  border-radius: var(--wa-border-radius-l);
-}
-.wa-border-radius-pill {
-  border-radius: var(--wa-border-radius-pill);
-}
-.wa-border-radius-circle {
-  border-radius: var(--wa-border-radius-circle);
-}
-.wa-border-radius-square {
-  border-radius: var(--wa-border-radius-square);
-}
-/* #endregion */
-
-/* #region Gap */
-
-/* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
-:where(
-    .wa-gap-0,
-    .wa-gap-3xs,
-    .wa-gap-2xs,
-    .wa-gap-xs,
-    .wa-gap-s,
-    .wa-gap-m,
-    .wa-gap-l,
-    .wa-gap-xl,
-    .wa-gap-2xl,
-    .wa-gap-3xl
-  ) {
-  display: flex;
-}
-
-.wa-gap-0 {
-  gap: 0px;
-}
-.wa-gap-3xs {
-  gap: var(--wa-space-3xs);
-}
-.wa-gap-2xs {
-  gap: var(--wa-space-2xs);
-}
-.wa-gap-xs {
-  gap: var(--wa-space-xs);
-}
-.wa-gap-s {
-  gap: var(--wa-space-s);
-}
-.wa-gap-m {
-  gap: var(--wa-space-m);
-}
-.wa-gap-l {
-  gap: var(--wa-space-l);
-}
-.wa-gap-xl {
-  gap: var(--wa-space-xl);
-}
-.wa-gap-2xl {
-  gap: var(--wa-space-2xl);
-}
-.wa-gap-3xl {
-  gap: var(--wa-space-3xl);
-}
-/* #endregion */
-
-/* #region Text */
-.wa-heading-xs,
-.wa-heading-s,
-.wa-heading-m,
-.wa-heading-l,
-.wa-heading-xl,
-.wa-heading-2xl,
-.wa-heading-3xl {
-  font-family: var(--wa-font-family-heading);
-  font-weight: var(--wa-font-weight-heading);
-  line-height: var(--wa-line-height-condensed);
-  text-wrap: balance;
-}
-
-.wa-heading-xs {
-  font-size: var(--wa-font-size-s);
-}
-
-.wa-heading-s {
-  font-size: var(--wa-font-size-m);
-}
-
-.wa-heading-m {
-  font-size: var(--wa-font-size-l);
-}
-
-.wa-heading-l {
-  font-size: var(--wa-font-size-xl);
-}
-
-.wa-heading-xl {
-  font-size: var(--wa-font-size-2xl);
-}
-
-.wa-heading-2xl {
-  font-size: var(--wa-font-size-3xl);
-}
-
-.wa-heading-3xl {
-  font-size: var(--wa-font-size-4xl);
-}
-
-.wa-body-xs,
-.wa-body-s,
-.wa-body-m,
-.wa-body-l,
-.wa-body-xl {
-  font-family: var(--wa-font-family-body);
-  font-weight: var(--wa-font-weight-body);
-  line-height: var(--wa-line-height-normal);
-}
-
-.wa-body-xs {
-  font-size: var(--wa-font-size-xs);
-}
-
-.wa-body-s {
-  font-size: var(--wa-font-size-s);
-}
-
-.wa-body-m {
-  font-size: var(--wa-font-size-m);
-}
-
-.wa-body-l {
-  font-size: var(--wa-font-size-l);
-}
-
-.wa-body-xl {
-  font-size: var(--wa-font-size-xl);
-}
-
-.wa-caption-xs,
-.wa-caption-s,
-.wa-caption-m,
-.wa-caption-l,
-.wa-caption-xl {
-  color: var(--wa-color-text-quiet);
-  font-family: var(--wa-font-family-body);
-  font-weight: var(--wa-font-weight-body);
-  line-height: var(--wa-line-height-condensed);
-}
-
-.wa-caption-xs {
-  font-size: var(--wa-font-size-2xs);
-}
-
-.wa-caption-s {
-  font-size: var(--wa-font-size-xs);
-}
-
-.wa-caption-m {
-  font-size: var(--wa-font-size-s);
-}
-
-.wa-caption-l {
-  font-size: var(--wa-font-size-m);
-}
-
-.wa-caption-xl {
-  font-size: var(--wa-font-size-l);
-}
-
-/* #endregion */
diff --git a/src/themes/utilities/align-items.css b/src/themes/utilities/align-items.css
new file mode 100644
index 000000000..b89407ee4
--- /dev/null
+++ b/src/themes/utilities/align-items.css
@@ -0,0 +1,15 @@
+.wa-align-items-start {
+  align-items: flex-start;
+}
+.wa-align-items-end {
+  align-items: flex-end;
+}
+.wa-align-items-center {
+  align-items: center;
+}
+.wa-align-items-stretch {
+  align-items: stretch;
+}
+.wa-align-items-baseline {
+  align-items: baseline;
+}
diff --git a/src/themes/utilities/border-radius.css b/src/themes/utilities/border-radius.css
new file mode 100644
index 000000000..f2747f45e
--- /dev/null
+++ b/src/themes/utilities/border-radius.css
@@ -0,0 +1,21 @@
+.wa-border-radius-xs {
+  border-radius: var(--wa-border-radius-xs);
+}
+.wa-border-radius-s {
+  border-radius: var(--wa-border-radius-s);
+}
+.wa-border-radius-m {
+  border-radius: var(--wa-border-radius-m);
+}
+.wa-border-radius-l {
+  border-radius: var(--wa-border-radius-l);
+}
+.wa-border-radius-pill {
+  border-radius: var(--wa-border-radius-pill);
+}
+.wa-border-radius-circle {
+  border-radius: var(--wa-border-radius-circle);
+}
+.wa-border-radius-square {
+  border-radius: var(--wa-border-radius-square);
+}
diff --git a/src/themes/utilities/gap.css b/src/themes/utilities/gap.css
new file mode 100644
index 000000000..6649beef8
--- /dev/null
+++ b/src/themes/utilities/gap.css
@@ -0,0 +1,46 @@
+/* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
+:where(
+    .wa-gap-0,
+    .wa-gap-3xs,
+    .wa-gap-2xs,
+    .wa-gap-xs,
+    .wa-gap-s,
+    .wa-gap-m,
+    .wa-gap-l,
+    .wa-gap-xl,
+    .wa-gap-2xl,
+    .wa-gap-3xl
+  ) {
+  display: flex;
+}
+
+.wa-gap-0 {
+  gap: 0px;
+}
+.wa-gap-3xs {
+  gap: var(--wa-space-3xs);
+}
+.wa-gap-2xs {
+  gap: var(--wa-space-2xs);
+}
+.wa-gap-xs {
+  gap: var(--wa-space-xs);
+}
+.wa-gap-s {
+  gap: var(--wa-space-s);
+}
+.wa-gap-m {
+  gap: var(--wa-space-m);
+}
+.wa-gap-l {
+  gap: var(--wa-space-l);
+}
+.wa-gap-xl {
+  gap: var(--wa-space-xl);
+}
+.wa-gap-2xl {
+  gap: var(--wa-space-2xl);
+}
+.wa-gap-3xl {
+  gap: var(--wa-space-3xl);
+}
diff --git a/src/themes/utilities/index.css b/src/themes/utilities/index.css
new file mode 100644
index 000000000..c8154aebd
--- /dev/null
+++ b/src/themes/utilities/index.css
@@ -0,0 +1,5 @@
+@import url('scroll-lock.css');
+@import url('align-items.css');
+@import url('border-radius.css');
+@import url('gap.css');
+@import url('text.css');
diff --git a/src/themes/utilities/scroll-lock.css b/src/themes/utilities/scroll-lock.css
new file mode 100644
index 000000000..6df16fe12
--- /dev/null
+++ b/src/themes/utilities/scroll-lock.css
@@ -0,0 +1,18 @@
+/* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
+@supports (scrollbar-gutter: stable) {
+  .wa-scroll-lock {
+    scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
+  }
+
+  .wa-scroll-lock body {
+    overflow: hidden !important;
+  }
+}
+
+/** This can go away once Safari has scrollbar-gutter support. */
+@supports not (scrollbar-gutter: stable) {
+  .wa-scroll-lock body {
+    padding-right: var(--wa-scroll-lock-size) !important;
+    overflow: hidden !important;
+  }
+}
diff --git a/src/themes/utilities/text.css b/src/themes/utilities/text.css
new file mode 100644
index 000000000..50b973dfe
--- /dev/null
+++ b/src/themes/utilities/text.css
@@ -0,0 +1,101 @@
+.wa-heading-xs,
+.wa-heading-s,
+.wa-heading-m,
+.wa-heading-l,
+.wa-heading-xl,
+.wa-heading-2xl,
+.wa-heading-3xl {
+  font-family: var(--wa-font-family-heading);
+  font-weight: var(--wa-font-weight-heading);
+  line-height: var(--wa-line-height-condensed);
+  text-wrap: balance;
+}
+
+.wa-heading-xs {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-heading-s {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-heading-m {
+  font-size: var(--wa-font-size-l);
+}
+
+.wa-heading-l {
+  font-size: var(--wa-font-size-xl);
+}
+
+.wa-heading-xl {
+  font-size: var(--wa-font-size-2xl);
+}
+
+.wa-heading-2xl {
+  font-size: var(--wa-font-size-3xl);
+}
+
+.wa-heading-3xl {
+  font-size: var(--wa-font-size-4xl);
+}
+
+.wa-body-xs,
+.wa-body-s,
+.wa-body-m,
+.wa-body-l,
+.wa-body-xl {
+  font-family: var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-body);
+  line-height: var(--wa-line-height-normal);
+}
+
+.wa-body-xs {
+  font-size: var(--wa-font-size-xs);
+}
+
+.wa-body-s {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-body-m {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-body-l {
+  font-size: var(--wa-font-size-l);
+}
+
+.wa-body-xl {
+  font-size: var(--wa-font-size-xl);
+}
+
+.wa-caption-xs,
+.wa-caption-s,
+.wa-caption-m,
+.wa-caption-l,
+.wa-caption-xl {
+  color: var(--wa-color-text-quiet);
+  font-family: var(--wa-font-family-body);
+  font-weight: var(--wa-font-weight-body);
+  line-height: var(--wa-line-height-condensed);
+}
+
+.wa-caption-xs {
+  font-size: var(--wa-font-size-2xs);
+}
+
+.wa-caption-s {
+  font-size: var(--wa-font-size-xs);
+}
+
+.wa-caption-m {
+  font-size: var(--wa-font-size-s);
+}
+
+.wa-caption-l {
+  font-size: var(--wa-font-size-m);
+}
+
+.wa-caption-xl {
+  font-size: var(--wa-font-size-l);
+}