diff --git a/.github/workflows/frontend-chromatic.yml b/.github/workflows/frontend-chromatic.yml
index 1931f9e08ac6..b3336e2a85d8 100644
--- a/.github/workflows/frontend-chromatic.yml
+++ b/.github/workflows/frontend-chromatic.yml
@@ -1,20 +1,23 @@
 name: Frontend Chromatic
 
 on:
+  # Nothing outside these paths can change how a story renders. The lockfile is
+  # included alongside package.json because `npm ci` installs from it, so a
+  # transitive bump can change rendering without package.json moving.
   push:
     branches: [main]
-    paths:
+    paths: &story_paths
       - frontend/web/components/**
       - frontend/web/styles/**
       - frontend/common/theme/**
       - frontend/documentation/**
       - frontend/.storybook/**
+      - frontend/package.json
+      - frontend/package-lock.json
       - .github/workflows/frontend-chromatic.yml
   pull_request:
     types: [opened, synchronize, reopened, ready_for_review]
-    paths:
-      - frontend/**
-      - .github/workflows/frontend-chromatic.yml
+    paths: *story_paths
 
 permissions:
   contents: read
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index 29065d615a96..90c66e996cfb 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -106,6 +106,10 @@ const preview = {
       container: DocsContainer,
     },
     chromatic: {
+      // Off by default; opt in per story with `disableSnapshot: false`. Opted
+      // in: components still styling dark mode with hand-written `.dark` blocks,
+      // plus SemanticTokens for token values no component exercises.
+      disableSnapshot: true,
       modes: {
         light: allModes.light,
         dark: allModes.dark,
diff --git a/frontend/documentation/ColourPalette.stories.tsx b/frontend/documentation/ColourPalette.stories.tsx
index f6dd6c6b0e08..19ee0254ca0b 100644
--- a/frontend/documentation/ColourPalette.stories.tsx
+++ b/frontend/documentation/ColourPalette.stories.tsx
@@ -10,7 +10,7 @@ import type { Scale } from './components/ScaleRow'
 import primitivesSource from '!!raw-loader!../web/styles/_primitives.scss'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Palette',
 }
 export default meta
diff --git a/frontend/documentation/ElevationTokens.stories.tsx b/frontend/documentation/ElevationTokens.stories.tsx
index c23dc989835b..d70968f0d278 100644
--- a/frontend/documentation/ElevationTokens.stories.tsx
+++ b/frontend/documentation/ElevationTokens.stories.tsx
@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { shadow } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Elevation',
 }
 export default meta
diff --git a/frontend/documentation/MotionTokens.stories.tsx b/frontend/documentation/MotionTokens.stories.tsx
index 6a6b5f260ecb..e8d33ccd6957 100644
--- a/frontend/documentation/MotionTokens.stories.tsx
+++ b/frontend/documentation/MotionTokens.stories.tsx
@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { duration, easing } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Motion',
 }
 export default meta
diff --git a/frontend/documentation/RadiusTokens.stories.tsx b/frontend/documentation/RadiusTokens.stories.tsx
index 610cffd4bf75..f017c26a8655 100644
--- a/frontend/documentation/RadiusTokens.stories.tsx
+++ b/frontend/documentation/RadiusTokens.stories.tsx
@@ -6,7 +6,7 @@ import DocPage from './components/DocPage'
 import { radius } from 'common/theme/tokens'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { layout: 'padded' },
   title: 'Design System/Border Radius',
 }
 export default meta
diff --git a/frontend/documentation/SemanticTokens.stories.tsx b/frontend/documentation/SemanticTokens.stories.tsx
index d378dc4e52d1..f90391aa6831 100644
--- a/frontend/documentation/SemanticTokens.stories.tsx
+++ b/frontend/documentation/SemanticTokens.stories.tsx
@@ -7,7 +7,7 @@ import TokenGroup from './components/TokenGroup'
 import type { TokenGroupData } from './components/TokenGroup'
 
 const meta: Meta = {
-  parameters: { chromatic: { disableSnapshot: true }, layout: 'padded' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'padded' },
   title: 'Design System/Semantic Colour Tokens',
 }
 export default meta
diff --git a/frontend/documentation/components/Button.stories.tsx b/frontend/documentation/components/Button.stories.tsx
index 3e5533f5bbef..0f6fbd31b23f 100644
--- a/frontend/documentation/components/Button.stories.tsx
+++ b/frontend/documentation/components/Button.stories.tsx
@@ -46,7 +46,7 @@ const meta: Meta<ButtonType> = {
     theme: 'primary',
   },
   component: Button,
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Button',
 }
 
diff --git a/frontend/documentation/components/Card.stories.tsx b/frontend/documentation/components/Card.stories.tsx
index 450a7987ce99..5be92a9a3f0b 100644
--- a/frontend/documentation/components/Card.stories.tsx
+++ b/frontend/documentation/components/Card.stories.tsx
@@ -5,6 +5,7 @@ import Card from 'components/Card'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/Chip.stories.tsx b/frontend/documentation/components/Chip.stories.tsx
index 3b92bf36a299..c88fe9860935 100644
--- a/frontend/documentation/components/Chip.stories.tsx
+++ b/frontend/documentation/components/Chip.stories.tsx
@@ -7,6 +7,7 @@ const meta: Meta<typeof Chip> = {
   args: { children: 'Production' },
   component: Chip,
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/ErrorMessage.stories.tsx b/frontend/documentation/components/ErrorMessage.stories.tsx
index f6a634c98f17..f80f597ff0e4 100644
--- a/frontend/documentation/components/ErrorMessage.stories.tsx
+++ b/frontend/documentation/components/ErrorMessage.stories.tsx
@@ -5,6 +5,7 @@ import ErrorMessage from 'components/ErrorMessage'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/Icons.stories.tsx b/frontend/documentation/components/Icons.stories.tsx
index f6fdf7947c45..dff1c2ba7125 100644
--- a/frontend/documentation/components/Icons.stories.tsx
+++ b/frontend/documentation/components/Icons.stories.tsx
@@ -7,7 +7,7 @@ import type { IconName } from 'components/icons/Icon'
 import '../docs.scss'
 
 const meta: Meta = {
-  parameters: { layout: 'padded' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'padded' },
   title: 'Components/Icons',
 }
 export default meta
diff --git a/frontend/documentation/components/Input.stories.tsx b/frontend/documentation/components/Input.stories.tsx
index 6a030aca7e8d..5d67d42e691e 100644
--- a/frontend/documentation/components/Input.stories.tsx
+++ b/frontend/documentation/components/Input.stories.tsx
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from 'storybook'
 import Input from 'components/base/forms/Input'
 
 const meta: Meta = {
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Forms/Input',
 }
 export default meta
diff --git a/frontend/documentation/components/Modal.stories.tsx b/frontend/documentation/components/Modal.stories.tsx
index 04c3a784b689..97729dde4a74 100644
--- a/frontend/documentation/components/Modal.stories.tsx
+++ b/frontend/documentation/components/Modal.stories.tsx
@@ -5,7 +5,7 @@ import ModalDefault from 'components/modals/base/ModalDefault'
 
 const meta: Meta = {
   parameters: {
-    chromatic: { delay: 300 },
+    chromatic: { delay: 300, disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/MultiSelect.stories.tsx b/frontend/documentation/components/MultiSelect.stories.tsx
index 3a1fb16d8cad..318d47708ff3 100644
--- a/frontend/documentation/components/MultiSelect.stories.tsx
+++ b/frontend/documentation/components/MultiSelect.stories.tsx
@@ -18,6 +18,7 @@ const FRUITS: MultiSelectOption[] = [
 const meta: Meta<typeof MultiSelect> = {
   component: MultiSelect,
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/Panel.stories.tsx b/frontend/documentation/components/Panel.stories.tsx
index af08bcc43be4..be0d2712461d 100644
--- a/frontend/documentation/components/Panel.stories.tsx
+++ b/frontend/documentation/components/Panel.stories.tsx
@@ -5,6 +5,7 @@ import Panel from 'components/base/grid/Panel'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/Switch.stories.tsx b/frontend/documentation/components/Switch.stories.tsx
index b77d4f804c11..84896f833669 100644
--- a/frontend/documentation/components/Switch.stories.tsx
+++ b/frontend/documentation/components/Switch.stories.tsx
@@ -20,7 +20,7 @@ const meta: Meta<SwitchProps> = {
     disabled: false,
   },
   component: Switch,
-  parameters: { layout: 'centered' },
+  parameters: { chromatic: { disableSnapshot: false }, layout: 'centered' },
   title: 'Components/Forms/Switch',
 }
 
diff --git a/frontend/documentation/components/Tabs.stories.tsx b/frontend/documentation/components/Tabs.stories.tsx
index 4ac40fa35993..8c22fa140603 100644
--- a/frontend/documentation/components/Tabs.stories.tsx
+++ b/frontend/documentation/components/Tabs.stories.tsx
@@ -28,6 +28,7 @@ const meta: Meta<DirtyMarkerArgs> = {
   },
   decorators: [withRouter],
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component:
diff --git a/frontend/documentation/components/Tooltip.stories.tsx b/frontend/documentation/components/Tooltip.stories.tsx
index 91ab5f4f7384..153bf494f368 100644
--- a/frontend/documentation/components/Tooltip.stories.tsx
+++ b/frontend/documentation/components/Tooltip.stories.tsx
@@ -6,6 +6,7 @@ import Tooltip from 'components/Tooltip'
 
 const meta: Meta = {
   parameters: {
+    chromatic: { disableSnapshot: false },
     docs: {
       description: {
         component: