diff --git a/package-lock.json b/package-lock.json
index a94738d18e7..4ef0175626e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30307,7 +30307,7 @@
         "@primer/behaviors": "^1.8.0",
         "@primer/live-region-element": "^0.7.1",
         "@primer/octicons-react": "^19.13.0",
-        "@primer/primitives": "11.1.0",
+        "@primer/primitives": "10.x || 11.x",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.module.css b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.module.css
new file mode 100644
index 00000000000..625c33b0872
--- /dev/null
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.module.css
@@ -0,0 +1,17 @@
+.CheckboxGroupDev {
+  color: var(--fgColor-default, var(--color-fg-default));
+  margin-top: var(--base-size-16);
+  margin-bottom: var(--base-size-16);
+}
+
+.CaptionDev {
+  color: var(--fgColor-muted);
+  font-size: var(--text-caption-size-small);
+  font-weight: var(--text-caption-weight-small);
+}
+
+.LabelDev {
+  color: var(--fgColor-default, var(--color-fg-default));
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--text-title-weight-medium);
+}
diff --git a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
index 2a7130df9e4..82530f989cb 100644
--- a/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
+++ b/packages/react/src/CheckboxGroup/CheckboxGroup.dev.stories.tsx
@@ -1,37 +1,17 @@
 import type {Meta} from '@storybook/react-vite'
 import {Checkbox, CheckboxGroup, FormControl} from '..'
+import styles from './CheckboxGroup.dev.module.css'
 
 export default {
   title: 'Components/CheckboxGroup/Dev',
   component: CheckboxGroup,
-  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange', 'sx']}},
+  parameters: {controls: {exclude: ['aria-labelledby', 'id', 'onChange']}},
 } as Meta
 
-export const SxProps = () => (
-  <CheckboxGroup
-    sx={{
-      color: 'var(--fgColor-default, var(--color-fg-default))',
-      my: '15px',
-    }}
-  >
-    <CheckboxGroup.Caption
-      sx={{
-        color: 'fg.muted',
-        fontSize: 0,
-        fontWeight: 400,
-      }}
-    >
-      Caption
-    </CheckboxGroup.Caption>
-    <CheckboxGroup.Label
-      sx={{
-        color: 'var(--fgColor-default, var(--color-fg-default))',
-        fontSize: ['14px'],
-        fontWeight: 600,
-      }}
-    >
-      Choices
-    </CheckboxGroup.Label>
+export const WithCss = () => (
+  <CheckboxGroup className={styles.CheckboxGroupDev}>
+    <CheckboxGroup.Caption className={styles.CaptionDev}>Caption</CheckboxGroup.Caption>
+    <CheckboxGroup.Label className={styles.LabelDev}>Choices</CheckboxGroup.Label>
     <FormControl required>
       <Checkbox value="one" defaultChecked />
       <FormControl.Label>Choice one</FormControl.Label>