diff --git a/src/lib/Button/Button.stories.svelte b/src/lib/Button/Button.stories.svelte
index 3fe4847..36212a1 100644
--- a/src/lib/Button/Button.stories.svelte
+++ b/src/lib/Button/Button.stories.svelte
@@ -166,25 +166,40 @@
 	</span>
 {/snippet}
 
-<Story name="Figma Reference Variants" template={figmaReferenceVariants} />
+<Story
+	name="Figma Reference Variants"
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
+	template={figmaReferenceVariants}
+/>
 
-<Story name="States" {template} />
+<Story name="States" parameters={{ chromatic: { diffThreshold: 0.17 } }} {template} />
 
-<Story name="With Icon" args={{ icon: bell }} {template} />
+<Story
+	name="With Icon"
+	args={{ icon: bell }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
+	{template}
+/>
 
-<Story name="Disabled" args={{ disabled: true }} {template} />
+<Story
+	name="Disabled"
+	args={{ disabled: true }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
+	{template}
+/>
 
-<Story name="Large CTA" template={largeCta} />
+<Story name="Large CTA" parameters={{ chromatic: { diffThreshold: 0.17 } }} template={largeCta} />
 
-<Story name="Secondary" template={secondary} />
+<Story name="Secondary" parameters={{ chromatic: { diffThreshold: 0.17 } }} template={secondary} />
 
-<Story name="Primary" template={primary} />
+<Story name="Primary" parameters={{ chromatic: { diffThreshold: 0.17 } }} template={primary} />
 
 <Story name="Underline" template={underline} />
 
 <Story
 	name="Link"
 	args={{ href: '#about' }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	template={linkTemplate}
 	play={async ({ canvasElement }) => {
 		await expect(within(canvasElement).getByRole('link', { name: 'About' })).toHaveAttribute(
@@ -196,6 +211,7 @@
 
 <Story
 	name="Layered Control"
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	template={layered}
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
@@ -244,6 +260,7 @@
 
 <Story
 	name="Presentation Surface"
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	template={presentationSurface}
 	play={async ({ canvasElement }) => {
 		const surface = requiredElement(canvasElement, '[data-button-surface="base"]');
diff --git a/src/lib/Button/ClipAwareButton.stories.svelte b/src/lib/Button/ClipAwareButton.stories.svelte
index b86081f..9ac4392 100644
--- a/src/lib/Button/ClipAwareButton.stories.svelte
+++ b/src/lib/Button/ClipAwareButton.stories.svelte
@@ -18,6 +18,9 @@
 			layer: 'base',
 			size: 'large',
 		},
+		parameters: {
+			chromatic: { diffThreshold: 0.17 },
+		},
 	});
 
 	function bounds(element: Element) {
diff --git a/src/lib/LandingHero/LandingHero.stories.svelte b/src/lib/LandingHero/LandingHero.stories.svelte
index c47d5f4..829e8f1 100644
--- a/src/lib/LandingHero/LandingHero.stories.svelte
+++ b/src/lib/LandingHero/LandingHero.stories.svelte
@@ -225,6 +225,7 @@
 	name="Compact Portrait"
 	args={LANDING_HERO_STORY_CASES.compact.args}
 	globals={{ viewport: { value: LANDING_HERO_STORY_CASES.compact.viewport, isRotated: false } }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	play={async ({ canvasElement }) => {
 		await expectAccessibleLayers(canvasElement);
 		await expectLandingSemantics(canvasElement);
@@ -238,6 +239,7 @@
 	name="Medium"
 	args={LANDING_HERO_STORY_CASES.medium.args}
 	globals={{ viewport: { value: LANDING_HERO_STORY_CASES.medium.viewport, isRotated: false } }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	play={async ({ canvasElement }) => {
 		await expectAccessibleLayers(canvasElement);
 		await expectLandingSemantics(canvasElement);
@@ -251,6 +253,7 @@
 	name="Expanded"
 	args={LANDING_HERO_STORY_CASES.expanded.args}
 	globals={{ viewport: { value: LANDING_HERO_STORY_CASES.expanded.viewport, isRotated: false } }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	play={async ({ canvasElement }) => {
 		await expectAccessibleLayers(canvasElement);
 		await expectLandingSemantics(canvasElement);
@@ -264,6 +267,7 @@
 	name="Large Desktop"
 	args={LANDING_HERO_STORY_CASES.large.args}
 	globals={{ viewport: { value: LANDING_HERO_STORY_CASES.large.viewport, isRotated: false } }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	play={async ({ canvasElement }) => {
 		await expectAccessibleLayers(canvasElement);
 		await expectLandingSemantics(canvasElement);
@@ -277,6 +281,7 @@
 	name="Secondary Accent"
 	args={{ ...LANDING_HERO_STORY_CASES.expanded.args, class: 'secondary-accent-preview' }}
 	globals={{ viewport: { value: LANDING_HERO_STORY_CASES.expanded.viewport, isRotated: false } }}
+	parameters={{ chromatic: { diffThreshold: 0.17 } }}
 	play={async ({ canvasElement }) => {
 		await expectDestinationCta(canvasElement);
 		await expectNoHorizontalOverflow(canvasElement);
@@ -304,7 +309,7 @@
 	globals={{
 		viewport: { value: LANDING_HERO_STORY_CASES.reducedMotion.viewport, isRotated: false },
 	}}
-	parameters={{ chromatic: { prefersReducedMotion: 'reduce' } }}
+	parameters={{ chromatic: { diffThreshold: 0.17, prefersReducedMotion: 'reduce' } }}
 	play={async ({ canvasElement }) => {
 		await expectAccessibleLayers(canvasElement);
 		await expectLandingSemantics(canvasElement);
diff --git a/src/lib/SprayBorder/SprayBorder.stories.svelte b/src/lib/SprayBorder/SprayBorder.stories.svelte
index 485acec..861c703 100644
--- a/src/lib/SprayBorder/SprayBorder.stories.svelte
+++ b/src/lib/SprayBorder/SprayBorder.stories.svelte
@@ -57,6 +57,7 @@
 			color: { control: 'color' },
 		},
 		parameters: {
+			chromatic: { diffThreshold: 0.17 },
 			controls: { include: ['spread', 'radius', 'density', 'seed', 'color'] },
 			docs: { argTypes: { include: ['spread', 'radius', 'density', 'seed', 'color'] } },
 		},