diff --git a/.changeset/speak-wasps-perfectly.md b/.changeset/speak-wasps-perfectly.md
new file mode 100644
index 000000000..4cb6b397e
--- /dev/null
+++ b/.changeset/speak-wasps-perfectly.md
@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': minor
+---
+
+`PricingOptions` now applies the `subtle` background color by default. This is to ensure adequate contrast on a standard `canvas-default` background.
+
+To apply the previous `default` background color (or custom color), you may override a new design token that has been provided for this reason: `--brand-PricingOptions-item-bgColor`.
diff --git a/packages/design-tokens/scripts/build-tokens.js b/packages/design-tokens/scripts/build-tokens.js
index 93c296654..ad6f6578a 100644
--- a/packages/design-tokens/scripts/build-tokens.js
+++ b/packages/design-tokens/scripts/build-tokens.js
@@ -243,6 +243,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
     `tokens/functional/components/breadcrumbs/colors.js`,
     `tokens/functional/components/tooltip/colors.json`,
     `tokens/functional/components/river-story-scroll/colors.js`,
+    `tokens/functional/components/pricing-options/colors.json`,
   ]
 
   for (const path of filesForColorModes) {
diff --git a/packages/design-tokens/src/tokens/functional/components/pricing-options/colors.json b/packages/design-tokens/src/tokens/functional/components/pricing-options/colors.json
new file mode 100644
index 000000000..d81faddc0
--- /dev/null
+++ b/packages/design-tokens/src/tokens/functional/components/pricing-options/colors.json
@@ -0,0 +1,12 @@
+{
+  "brand": {
+    "PricingOptions": {
+      "item": {
+        "bgColor": {
+          "value": "var(--brand-color-canvas-subtle)",
+          "dark": "var(--brand-color-canvas-subtle)"
+        }
+      }
+    }
+  }
+}
diff --git a/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx b/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx
index 16c10dcf0..c6fb90a3e 100644
--- a/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx
+++ b/packages/react/src/PricingOptions/PricingOptions.features.stories.tsx
@@ -9,7 +9,7 @@ import {CopilotIcon} from '@primer/octicons-react'
 
 const decorators = Story => (
   <Box
-    backgroundColor="subtle"
+    backgroundColor="default"
     paddingBlockStart="spacious"
     paddingBlockEnd="spacious"
     style={{
@@ -556,6 +556,7 @@ export const WithIncludedAndExcludedFeatures: StoryFn<typeof PricingOptions> = (
     </PricingOptions>
   )
 }
+
 export const WithoutFeatures: StoryFn<typeof PricingOptions> = () => {
   return (
     <PricingOptions>
diff --git a/packages/react/src/PricingOptions/PricingOptions.module.css b/packages/react/src/PricingOptions/PricingOptions.module.css
index ae1b4d157..e8398e33b 100644
--- a/packages/react/src/PricingOptions/PricingOptions.module.css
+++ b/packages/react/src/PricingOptions/PricingOptions.module.css
@@ -20,7 +20,7 @@
 .PricingOptions--variant-default {
   border-radius: var(--brand-borderRadius-xlarge);
   border: solid var(--brand-borderWidth-thin) var(--brand-color-border-default);
-  background-color: var(--brand-color-canvas-default);
+  background-color: var(--brand-PricingOptions-item-bgColor);
 }
 
 @media (min-width: 63.25rem) {
@@ -72,7 +72,7 @@
   padding-inline: var(--base-size-32);
   border-radius: var(--brand-borderRadius-xlarge);
   border: solid 1px var(--brand-color-border-default);
-  background-color: var(--brand-color-canvas-default);
+  background-color: var(--brand-PricingOptions-item-bgColor);
   padding-block: var(--base-size-32);
 }
 
diff --git a/packages/react/src/PricingOptions/PricingOptions.stories.tsx b/packages/react/src/PricingOptions/PricingOptions.stories.tsx
index c67c95d64..95aa0a3f1 100644
--- a/packages/react/src/PricingOptions/PricingOptions.stories.tsx
+++ b/packages/react/src/PricingOptions/PricingOptions.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 export const Default = () => (
   <Box
-    backgroundColor="subtle"
+    backgroundColor="default"
     paddingBlockStart="spacious"
     paddingBlockEnd="spacious"
     style={{
diff --git a/packages/react/src/PricingOptions/PricingOptions.tsx b/packages/react/src/PricingOptions/PricingOptions.tsx
index 6264b468a..00f1c8274 100644
--- a/packages/react/src/PricingOptions/PricingOptions.tsx
+++ b/packages/react/src/PricingOptions/PricingOptions.tsx
@@ -20,6 +20,7 @@ import {
  * Design tokens
  */
 import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/pricing-options.css'
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/pricing-options/colors-with-modes.css'
 
 /**
  * Main stylesheet (as a CSS Module)
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png
index 92a155ee5..31ac96341 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-Mobile-viewp-6e07a-anded-Narrow-PricingOptions-Expanded-Narrow-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png
index 8597c980b..99e79ff76 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Cards-Variant-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png
index d5370872c..962e2b541 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png
index 3f9c7ac8f..2d5569cdf 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Collapsed-Features-No-Dividers-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Dark-Color-Mode-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Dark-Color-Mode-1-linux.png
deleted file mode 100644
index a7f8c6a58..000000000
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Dark-Color-Mode-1-linux.png and /dev/null differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png
index 736c0629d..654596e28 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png
index bacc0d4cc..38123ec3c 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Default-Variant-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png
index 90c363d8f..3611a7eb1 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Leading-Component-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png
index 1dc9d2cbd..efb198831 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-One-Option-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png
index bacc0d4cc..38123ec3c 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Three-Options-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png
index 07d7c57d5..38013de21 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Two-Options-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png
index f48f3d252..c2d17f33b 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Feature-Sets-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png
index f4f86a36d..85c80324a 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-With-Included-And-Excluded-Features-1-linux.png differ
diff --git a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png
index e2462ea53..210f729a1 100644
Binary files a/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png and b/packages/react/src/PricingOptions/PricingOptions.visual.spec.ts-snapshots/Visual-Comparison-PricingOptions-PricingOptions-Without-Features-1-linux.png differ
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx b/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx
index dbfe53179..becc0fef3 100644
--- a/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx
+++ b/packages/react/src/recipes/SolutionTemplates/SolutionPage/Size/OrgSize.stories.tsx
@@ -48,6 +48,7 @@ const maximumArgs = {
   variant: 'size',
   logoBarVisible: true,
   testimonialsVisible: true,
+  pricingOptionsVisible: true,
   faqVisible: true,
   jtbd2Visible: true,
   jtbd3Visible: true,
diff --git a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx
index c6ee31e1a..93162b8c2 100644
--- a/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx
+++ b/packages/react/src/recipes/SolutionTemplates/SolutionPage/SolutionPage.tsx
@@ -28,6 +28,7 @@ import {
   VideoPlayer,
   Breadcrumbs,
   Statistic,
+  PricingOptions,
 } from '../../..'
 
 import pinterestLogo from '../../../fixtures/images/logos/pinterest.png'
@@ -563,17 +564,67 @@ export function SolutionPage({
                           </Grid.Column>
                         </Grid>
                       )}
-                      <CTABanner hasBorder hasShadow={false} className={styles.ctaBanner} align="center">
-                        <CTABanner.Heading>Get started</CTABanner.Heading>
-                        <CTABanner.Description>
-                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam
-                          luctus sed turpis felis nam pulvinar risus elementum.
-                        </CTABanner.Description>
-                        <CTABanner.ButtonGroup>
-                          <Button>Primary Action</Button>
-                          <Button>Secondary Action</Button>
-                        </CTABanner.ButtonGroup>
-                      </CTABanner>
+                      {variant === 'size' && args.pricingOptionsVisible && (
+                        <PricingOptions variant="cards">
+                          <PricingOptions.Item>
+                            <PricingOptions.Heading>Lorem ipsum</PricingOptions.Heading>
+                            <PricingOptions.Description>Lorem ipsum dolor sit amet</PricingOptions.Description>
+                            <PricingOptions.Price currencySymbol="$" originalPrice="20" trailingText="per user / month">
+                              10
+                            </PricingOptions.Price>
+                            <PricingOptions.FeatureList>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem variant="excluded">
+                                Item not included
+                              </PricingOptions.FeatureListItem>
+                            </PricingOptions.FeatureList>
+                            <PricingOptions.SecondaryAction as="a" href="/contact">
+                              Contact sales
+                            </PricingOptions.SecondaryAction>
+                          </PricingOptions.Item>
+
+                          <PricingOptions.Item>
+                            <PricingOptions.Label>Recommended</PricingOptions.Label>
+                            <PricingOptions.Heading>Lorem ipsum</PricingOptions.Heading>
+                            <PricingOptions.Description>Lorem ipsum dolor sit amet</PricingOptions.Description>
+                            <PricingOptions.Price currencySymbol="$" trailingText="per user / month" originalPrice="49">
+                              39
+                            </PricingOptions.Price>
+                            <PricingOptions.FeatureList>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                              <PricingOptions.FeatureListItem>Item included</PricingOptions.FeatureListItem>
+                            </PricingOptions.FeatureList>
+                            <PricingOptions.PrimaryAction as="a" href="/buy">
+                              Primary action
+                            </PricingOptions.PrimaryAction>
+                          </PricingOptions.Item>
+                        </PricingOptions>
+                      )}
+                      {variant !== 'size' && args.pricingOptionsVisible && (
+                        <CTABanner hasBorder hasShadow={false} className={styles.ctaBanner} align="center">
+                          <CTABanner.Heading>Get started</CTABanner.Heading>
+                          <CTABanner.Description>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id.
+                            Aliquam luctus sed turpis felis nam pulvinar risus elementum.
+                          </CTABanner.Description>
+                          <CTABanner.ButtonGroup>
+                            <Button>Primary Action</Button>
+                            <Button>Secondary Action</Button>
+                          </CTABanner.ButtonGroup>
+                        </CTABanner>
+                      )}
                       <Box>
                         <Stack direction="vertical" padding="none" gap={64} alignItems="center">
                           <Heading as="h3" size="3">