diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5c653f79c..42dadbdb1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -34,7 +34,8 @@ export default [
       'react/destructuring-assignment': 'off',
       'react/display-name': 'off',
       'react/no-array-index-key': 'off',
-      'react/no-unknown-property': ['error', { ignore: ['css'] }]
+      'react/no-unknown-property': ['error', { ignore: ['css'] }],
+      'react/no-unstable-nested-components': ['error', { allowAsProps: true }]
     }
   },
   {
@@ -64,8 +65,7 @@ export default [
     rules: {
       'no-alert': 'off',
       'jsx-a11y/img-redundant-alt': 'off',
-      'n/no-unsupported-features/es-builtins': ['error', { version: '>=20.0.0' }],
-      'react/no-unstable-nested-components': ['error', { allowAsProps: true }]
+      'n/no-unsupported-features/es-builtins': ['error', { version: '>=20.0.0' }]
     }
   }
 ];
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
index 83e0c6cc5..ea80ccf80 100644
--- a/gatsby-ssr.js
+++ b/gatsby-ssr.js
@@ -7,12 +7,18 @@
 
 import React from 'react';
 import { Provider, Layout } from './src/components';
+import __html from '!!raw-loader!./utils/color-scheme.js';
 
 export const wrapRootElement = ({ props, element }) => <Provider {...props}>{element}</Provider>;
 
 export const wrapPageElement = ({ props, element }) => <Layout {...props}>{element}</Layout>;
 
-export const onRenderBody = ({ setHtmlAttributes, setHeadComponents, setPostBodyComponents }) => {
+export const onRenderBody = ({
+  setHtmlAttributes,
+  setHeadComponents,
+  setPreBodyComponents,
+  setPostBodyComponents
+}) => {
   setHtmlAttributes({ lang: 'en' });
 
   const version = 2;
@@ -25,6 +31,9 @@ export const onRenderBody = ({ setHtmlAttributes, setHeadComponents, setPostBody
     />
   ]);
 
+  /* eslint-disable-next-line react/no-danger */
+  setPreBodyComponents([<script key="color-scheme-js" dangerouslySetInnerHTML={{ __html }} />]);
+
   setPostBodyComponents([
     <script
       key="docsearch-js"
diff --git a/package-lock.json b/package-lock.json
index 9f72963f6..67359e3b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,6 +97,7 @@
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "react-dropzone": "14.3.5",
+        "react-hydration-provider": "2.1.0",
         "react-is": "18.3.1",
         "react-markdown": "9.0.1",
         "react-window": "1.8.10",
@@ -32821,6 +32822,48 @@
       "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/netlify-cli/node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "node_modules/netlify-cli/node_modules/@types/http-cache-semantics": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz",
@@ -32860,6 +32903,12 @@
         "@types/istanbul-lib-report": "*"
       }
     },
+    "node_modules/netlify-cli/node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/@types/node": {
       "version": "20.14.8",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz",
@@ -32875,12 +32924,34 @@
       "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "extraneous": true
+    },
+    "node_modules/netlify-cli/node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/@types/retry": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
+    "node_modules/netlify-cli/node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "extraneous": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
     "node_modules/netlify-cli/node_modules/@types/yargs-parser": {
       "version": "20.2.1",
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz",
@@ -33261,6 +33332,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/netlify-cli/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "extraneous": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/netlify-cli/node_modules/ajv-formats": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
@@ -36548,6 +36635,12 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/netlify-cli/node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/fast-json-stringify": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.15.1.tgz",
@@ -38242,6 +38335,15 @@
         "ipx": "bin/ipx.mjs"
       }
     },
+    "node_modules/netlify-cli/node_modules/ipx/node_modules/@netlify/blobs": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@netlify/blobs/-/blobs-6.5.0.tgz",
+      "integrity": "sha512-wRFlNnL/Qv3WNLZd3OT/YYqF1zb6iPSo8T31sl9ccL1ahBxW1fBqKgF4b1XL7Z+6mRIkatvcsVPkWBcO+oJMNA==",
+      "extraneous": true,
+      "engines": {
+        "node": "^14.16.0 || >=16.0.0"
+      }
+    },
     "node_modules/netlify-cli/node_modules/ipx/node_modules/lru-cache": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
@@ -38797,6 +38899,12 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "node_modules/netlify-cli/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "extraneous": true
+    },
     "node_modules/netlify-cli/node_modules/jsonc-parser": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
@@ -48492,6 +48600,19 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "dev": true
     },
+    "node_modules/react-hydration-provider": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-hydration-provider/-/react-hydration-provider-2.1.0.tgz",
+      "integrity": "sha512-Bj0WHSbL9x/RP9XcA/uqmtktVN4RdgTRYma3RYvFFvOY1ljHk+DSjKjw6WH/ouF03fqVE+vmCZhGhv8Hvv8sYQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
diff --git a/package.json b/package.json
index 879356ad1..6946b5e0f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "postinstall": "husky",
     "lint": "npm run lint:js && npm run lint:css && npm run lint:md",
     "lint:css": "stylelint 'src/**/*.{js,ts,tsx}'",
-    "lint:js": "eslint ./",
+    "lint:js": "eslint ./ --max-warnings 0",
     "lint:md": "markdownlint ./*.md src/**/*.mdx",
     "prepare": "git submodule update --depth 1 --init && npm run build",
     "start": "gatsby develop --open",
@@ -106,6 +106,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-dropzone": "14.3.5",
+    "react-hydration-provider": "2.1.0",
     "react-is": "18.3.1",
     "react-markdown": "9.0.1",
     "react-window": "1.8.10",
diff --git a/src/components/MarkdownProvider/components/BestPractice.tsx b/src/components/MarkdownProvider/components/BestPractice.tsx
index d4be3d593..cfc7524ab 100644
--- a/src/components/MarkdownProvider/components/BestPractice.tsx
+++ b/src/components/MarkdownProvider/components/BestPractice.tsx
@@ -11,7 +11,7 @@ import { math } from 'polished';
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
 import { Well } from '@zendeskgarden/react-notifications';
 import { Grid } from '@zendeskgarden/react-grid';
-import { getColor, getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery, StyledBaseIcon } from '@zendeskgarden/react-theming';
 import { ReactComponent as XStrokeIcon } from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 import { ReactComponent as CheckLgStrokeIcon } from '@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg';
 import { ReactComponent as AlertErrorStrokeIcon } from '@zendeskgarden/svg-icons/src/16/alert-error-stroke.svg';
@@ -52,15 +52,39 @@ const StyledImgContainer = styled.div`
 `;
 
 interface IStyledCaptionProps {
-  hue: string;
+  type: 'success' | 'warning' | 'danger';
 }
 
-const StyledCaption = styled(p => <Well isRecessed {...p} />).attrs<IStyledCaptionProps>(p => ({
+const getVariable = (type: IStyledCaptionProps['type'], isBorder?: boolean) => {
+  let retVal;
+
+  if (isBorder) {
+    if (type === 'success') {
+      retVal = 'border.successEmphasis';
+    } else if (type === 'warning') {
+      retVal = 'border.warningEmphasis';
+    } else if (type === 'danger') {
+      retVal = 'border.dangerEmphasis';
+    }
+  } else if (type === 'success') {
+    retVal = 'foreground.success';
+  } else if (type === 'warning') {
+    retVal = 'foreground.warning';
+  } else if (type === 'danger') {
+    retVal = 'foreground.danger';
+  }
+
+  return retVal;
+};
+
+const StyledCaption = styled(p => <Well {...p} />).attrs<IStyledCaptionProps>(p => ({
   forwardedAs: p.tag
 }))<IStyledCaptionProps>`
   border: none;
-  border-top: ${p => `${p.theme.borders.md} ${getColorV8(p.hue, 500, p.theme)}`};
+  border-top: ${p =>
+    `${p.theme.borders.md} ${getColor({ theme: p.theme, variable: getVariable(p.type, true /* isBorder */) })}`};
   border-radius: 0;
+  background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
   padding-bottom: ${p => p.theme.space.base * 7}px;
   color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
 
@@ -71,7 +95,8 @@ const StyledCaption = styled(p => <Well isRecessed {...p} />).attrs<IStyledCapti
 
     & > li:not(:first-child) {
       margin-top: ${p => p.theme.space.xs};
-      border-top: ${p => `${p.theme.borders.sm} ${getColorV8('neutralHue', 300, p.theme)}`};
+      border-top: ${p =>
+        `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'border.default' })}`};
       padding-top: ${p => p.theme.space.xs};
     }
   }
@@ -85,7 +110,7 @@ const StyledTitle = styled(p => <Well.Title {...p} />).attrs(p => ({ forwardedAs
   display: flex;
   align-items: center;
   margin-left: -${p => math(`${p.theme.iconSizes.md} + ${p.theme.space.xs}`)};
-  color: ${p => getColorV8(p.hue, 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: getVariable(p.type) })};
 
   & + p,
   & + ul {
@@ -97,17 +122,20 @@ const StyledTitle = styled(p => <Well.Title {...p} />).attrs(p => ({ forwardedAs
   }
 `;
 
-interface ICaptionProps extends PropsWithChildren {
-  hue: string;
+const StyledIcon = styled(StyledBaseIcon)`
+  color: ${p => getColor({ theme: p.theme, variable: getVariable(p.type) })};
+`;
+
+interface ICaptionProps extends PropsWithChildren, IStyledCaptionProps {
   title: string;
   icon: ReactNode;
   imageSource?: string | IGatsbyImageData;
 }
 
 const Caption: React.FC<ICaptionProps> = props => (
-  <StyledCaption tag={props.imageSource ? 'figcaption' : undefined} hue={props.hue}>
-    <StyledTitle tag="strong" hue={props.hue}>
-      {props.icon}
+  <StyledCaption tag={props.imageSource ? 'figcaption' : undefined} type={props.type}>
+    <StyledTitle tag="strong" type={props.type}>
+      <StyledIcon type={props.type}>{props.icon}</StyledIcon>
       {props.title}
     </StyledTitle>
     {props.children}
@@ -164,15 +192,15 @@ const Section: React.FC<ISectionProps> = props => {
 };
 
 export const Do: React.FC<ISectionProps> = props => (
-  <Section {...props} title="Do this" hue="successHue" icon={<CheckLgStrokeIcon />} />
+  <Section {...props} title="Do this" type="success" icon={<CheckLgStrokeIcon />} />
 );
 
 export const Dont: React.FC<ISectionProps> = props => (
-  <Section {...props} title="Not this" hue="dangerHue" icon={<XStrokeIcon />} />
+  <Section {...props} title="Not this" type="danger" icon={<XStrokeIcon />} />
 );
 
 export const Caution: React.FC<ISectionProps> = props => (
-  <Section {...props} title="Caution" hue="warningHue" icon={<AlertErrorStrokeIcon />} />
+  <Section {...props} title="Caution" type="warning" icon={<AlertErrorStrokeIcon />} />
 );
 
 interface IBestPracticesProps extends PropsWithChildren {
diff --git a/src/components/MarkdownProvider/components/CodeExample/index.tsx b/src/components/MarkdownProvider/components/CodeExample/index.tsx
index de6ebb657..1fa60b2b6 100644
--- a/src/components/MarkdownProvider/components/CodeExample/index.tsx
+++ b/src/components/MarkdownProvider/components/CodeExample/index.tsx
@@ -27,7 +27,6 @@ import { ReactComponent as DarkStroke } from '@zendeskgarden/svg-icons/src/16/mo
 import { ReactComponent as DarkFill } from '@zendeskgarden/svg-icons/src/16/moon-fill.svg';
 import { ReactComponent as CodeSandboxIcon } from './assets/codesandbox-icon.svg';
 import { retrieveCodesandboxParameters } from './utils/retrieveCodesandboxParameters';
-import { copyToClipboard } from './utils/copyToClipboard';
 
 const ModeIcon = ({
   parentTheme,
@@ -101,7 +100,8 @@ export const CodeExample: React.FC<ICodeExampleProps> = ({ children, code }) =>
   }, [code]);
 
   const handleCopy = () => {
-    copyToClipboard(code);
+    /* eslint-disable-next-line n/no-unsupported-features/node-builtins */
+    navigator.clipboard.writeText(code);
     addToast(({ close }) => (
       <Notification type="success">
         <Notification.Title>Code copied</Notification.Title>
diff --git a/src/components/MarkdownProvider/components/CodeExample/utils/copyToClipboard.ts b/src/components/MarkdownProvider/components/CodeExample/utils/copyToClipboard.ts
deleted file mode 100644
index ab93eb655..000000000
--- a/src/components/MarkdownProvider/components/CodeExample/utils/copyToClipboard.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright Zendesk, Inc.
- *
- * Use of this source code is governed under the Apache License, Version 2.0
- * found at http://www.apache.org/licenses/LICENSE-2.0.
- */
-
-export const copyToClipboard = (content: string) => {
-  const proxyElement = document.createElement('textarea');
-
-  proxyElement.style.cssText = `border:none;outline:none;boxShadow:none;
-  position:absolute;top:0;left:-9999px;`;
-  document.body.appendChild(proxyElement);
-  proxyElement.value = content;
-  proxyElement.select();
-  document.execCommand('copy');
-  proxyElement.remove();
-};
diff --git a/src/components/MarkdownProvider/components/Configuration.tsx b/src/components/MarkdownProvider/components/Configuration.tsx
index ab35589ff..c6abf6db8 100644
--- a/src/components/MarkdownProvider/components/Configuration.tsx
+++ b/src/components/MarkdownProvider/components/Configuration.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { UnorderedList, Span } from '@zendeskgarden/react-typography';
-import { getColor, getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { IComponentData } from '../../../components/types';
 import { StyledAnchor } from './Anchor';
 
@@ -40,11 +40,11 @@ const StyledListItemLabel = styled(Span)`
 
 const StyledDot = styled(Span)`
   margin: 0 ${p => p.theme.space.xs};
-  color: ${p => getColorV8('grey', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 `;
 
 const StyledMono = styled(Span).attrs({ isMonospace: true })`
-  color: ${p => getColorV8('grey', 700, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 `;
 
 export const Configuration: React.FC<{
diff --git a/src/components/MarkdownProvider/components/ImageFigure.tsx b/src/components/MarkdownProvider/components/ImageFigure.tsx
index 90841d215..f20d8f619 100644
--- a/src/components/MarkdownProvider/components/ImageFigure.tsx
+++ b/src/components/MarkdownProvider/components/ImageFigure.tsx
@@ -8,12 +8,12 @@
 import React, { useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 
 const StyledCaption = styled.figcaption`
   margin-bottom: ${props => props.theme.space.md};
   text-align: center;
-  color: ${props => getColorV8('neutralHue', 600, props.theme)};
+  color: ${props => getColor({ theme: props.theme, variable: 'foreground.subtle' })};
 `;
 
 interface IImageFigure {
@@ -31,7 +31,7 @@ export const ImageFigure: React.FC<IImageFigure> = props => {
         alt={props.imageAlt}
         image={props.imageSource}
         style={{
-          border: `${theme.borders.sm} ${getColorV8('neutralHue', 300, theme)}`,
+          border: `${theme.borders.sm} ${getColor({ theme, variable: 'border.default' })}`,
           marginBottom: theme.space.xs,
           borderRadius: theme.borderRadii.md
         }}
diff --git a/src/components/MarkdownProvider/components/PropSheet.tsx b/src/components/MarkdownProvider/components/PropSheet.tsx
index c6f1709d7..15d14137f 100644
--- a/src/components/MarkdownProvider/components/PropSheet.tsx
+++ b/src/components/MarkdownProvider/components/PropSheet.tsx
@@ -7,7 +7,7 @@
 
 import React, { ReactElement } from 'react';
 import { css } from 'styled-components';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { SM, MD, Ellipsis, Code } from '@zendeskgarden/react-typography';
 import { Table } from '@zendeskgarden/react-tables';
 import { IComponentData } from '../../../components/types';
@@ -82,7 +82,8 @@ export const PropSheet: React.FC<{
                       <MD
                         isMonospace
                         css={css`
-                          color: ${p => getColorV8('neutralHue', 700, p.theme)};
+                          color: ${p =>
+                            getColor({ theme: p.theme, variable: 'foreground.subtle' })};
                         `}
                       >
                         <Ellipsis>{name}</Ellipsis>
@@ -94,7 +95,8 @@ export const PropSheet: React.FC<{
                         isMonospace
                         css={css`
                           word-break: break-word;
-                          color: ${p => getColorV8('red', 700, p.theme)};
+                          color: ${p =>
+                            getColor({ theme: p.theme, variable: 'foreground.danger' })};
                         `}
                       >
                         {type}
@@ -107,7 +109,7 @@ export const PropSheet: React.FC<{
                           word-break: break-word;
                         `}
                       >
-                        {prop.type === 'DefaultTheme' ? (
+                        {prop.defaultValue === 'DEFAULT_THEME' ? (
                           <Markdown>[DEFAULT_THEME](/components/theme-object)</Markdown>
                         ) : (
                           defaultValue
diff --git a/src/components/MarkdownProvider/components/Typography.tsx b/src/components/MarkdownProvider/components/Typography.tsx
index 464ce7905..f0942fb87 100644
--- a/src/components/MarkdownProvider/components/Typography.tsx
+++ b/src/components/MarkdownProvider/components/Typography.tsx
@@ -6,7 +6,7 @@
  */
 
 import styled, { css, ThemeProps } from 'styled-components';
-import { getColor, getColorV8, getLineHeight } from '@zendeskgarden/react-theming';
+import { getColor, getLineHeight } from '@zendeskgarden/react-theming';
 import {
   XXXL,
   XXL,
@@ -22,7 +22,7 @@ import { StyledAnchor } from './Anchor';
 const headerStyles = (p: ThemeProps<any>) => {
   return css`
     margin-bottom: ${p.theme.space.sm};
-    color: ${getColorV8('chromeHue', 700, p.theme)};
+    color: ${getColor({ theme: p.theme, variable: 'foreground.default' })};
     font-weight: ${p.theme.fontWeights.semibold};
 
     &:hover ${StyledAnchor} {
@@ -73,7 +73,7 @@ export const StyledH6 = styled(MD).attrs({ tag: 'h6' })`
 
 export const StyledBlockquote = styled(Blockquote)`
   margin-left: ${p => p.theme.space.base * 4}px;
-  color: ${p => getColorV8('grey', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
   font-size: ${p => p.theme.space.base * 4}px;
 `;
 
diff --git a/src/components/Provider.tsx b/src/components/Provider.tsx
index d9f849e40..c2e3302e6 100644
--- a/src/components/Provider.tsx
+++ b/src/components/Provider.tsx
@@ -5,33 +5,63 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { FC, PropsWithChildren } from 'react';
+import React, { FC, PropsWithChildren, useEffect, useMemo } from 'react';
+import { HydrationProvider, useHydrated } from 'react-hydration-provider';
 import { ThemeProvider, DEFAULT_THEME } from '@zendeskgarden/react-theming';
 import { ToastProvider } from '@zendeskgarden/react-notifications';
 import { MarkdownProvider } from './MarkdownProvider';
+import { ColorScheme, ColorSchemeContext } from './useColorSchemeContext';
+import { useColorScheme } from './useColorScheme';
 
-const theme = {
-  ...DEFAULT_THEME,
-  palette: { ...DEFAULT_THEME.palette, tofu: '#F6F4F4', oatMilk: '#EDE0CF' }
+const toastPlacement = {
+  'top-end': { style: { top: DEFAULT_THEME.space.base * 3 } }
 };
 
-const toastPlacement = {
-  'top-end': { style: { top: theme.space.base * 3 } }
+const Wrapper: FC<PropsWithChildren> = ({ children }) => {
+  const isHydrated = useHydrated();
+
+  useEffect(() => {
+    if (isHydrated) {
+      // Clear the SSR background color injected by the `setPreBodyComponents` script
+      document.documentElement.style.backgroundColor = '';
+    }
+  }, [isHydrated]);
+
+  return (
+    <div
+      css={`
+        width: 100%;
+        height: 100%;
+      `}
+      /* Control for flash of un-themed SSR content, while continuing to make
+       * server-rendered content available for for search indexing */
+      style={{ visibility: isHydrated ? 'visible' : 'hidden' }}
+    >
+      {children}
+    </div>
+  );
 };
 
 export const Provider: FC<PropsWithChildren> = ({ children }) => {
+  const { isSystem, colorScheme, setColorScheme } = useColorScheme();
+  const theme = { ...DEFAULT_THEME, colors: { ...DEFAULT_THEME.colors, base: colorScheme } };
+
+  const contextValue = useMemo(
+    () => ({ colorScheme: isSystem ? 'system' : (colorScheme as ColorScheme), setColorScheme }),
+    [isSystem, colorScheme, setColorScheme]
+  );
+
   return (
-    <ThemeProvider theme={theme}>
-      <div
-        css={`
-          width: 100%;
-          height: 100%;
-        `}
-      >
-        <ToastProvider placementProps={toastPlacement} zIndex={2}>
-          <MarkdownProvider>{children}</MarkdownProvider>
-        </ToastProvider>
-      </div>
-    </ThemeProvider>
+    <HydrationProvider>
+      <ColorSchemeContext.Provider value={contextValue}>
+        <ThemeProvider theme={theme}>
+          <Wrapper>
+            <ToastProvider placementProps={toastPlacement} zIndex={5}>
+              <MarkdownProvider>{children}</MarkdownProvider>
+            </ToastProvider>
+          </Wrapper>
+        </ThemeProvider>
+      </ColorSchemeContext.Provider>
+    </HydrationProvider>
   );
 };
diff --git a/src/components/useColorScheme.ts b/src/components/useColorScheme.ts
new file mode 100644
index 000000000..76a51046c
--- /dev/null
+++ b/src/components/useColorScheme.ts
@@ -0,0 +1,64 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { useCallback, useEffect, useState } from 'react';
+import { IGardenTheme } from '@zendeskgarden/react-theming';
+import { ColorScheme } from './useColorSchemeContext';
+
+export const useColorScheme = (initialState?: ColorScheme) => {
+  /* eslint-disable-next-line n/no-unsupported-features/node-builtins */
+  const localStorage = typeof window === 'undefined' ? undefined : window.localStorage;
+  const mediaQuery =
+    typeof window === 'undefined' ? undefined : window.matchMedia('(prefers-color-scheme: dark)');
+
+  const getState = useCallback(
+    (_state?: ColorScheme | null) => {
+      const isSystem = _state === 'system' || _state === undefined || _state === null;
+      let colorScheme: IGardenTheme['colors']['base'];
+
+      if (isSystem) {
+        colorScheme = mediaQuery?.matches ? 'dark' : 'light';
+      } else {
+        colorScheme = _state;
+      }
+
+      return { isSystem, colorScheme };
+    },
+    [mediaQuery?.matches]
+  );
+
+  const [state, setState] = useState<{
+    isSystem: boolean;
+    colorScheme: IGardenTheme['colors']['base'];
+  }>(getState(initialState || (localStorage?.getItem('color-scheme') as ColorScheme)));
+
+  useEffect(() => {
+    // Listen for changes to the system color scheme
+    const eventListener = () => {
+      setState(getState('system'));
+    };
+
+    if (state.isSystem) {
+      mediaQuery?.addEventListener('change', eventListener);
+    } else {
+      mediaQuery?.removeEventListener('change', eventListener);
+    }
+
+    return () => {
+      mediaQuery?.removeEventListener('change', eventListener);
+    };
+  }, [getState, state.isSystem, mediaQuery]);
+
+  return {
+    isSystem: state.isSystem,
+    colorScheme: state.colorScheme,
+    setColorScheme: (colorScheme: ColorScheme) => {
+      setState(getState(colorScheme));
+      localStorage?.setItem('color-scheme', colorScheme);
+    }
+  };
+};
diff --git a/src/components/useColorSchemeContext.ts b/src/components/useColorSchemeContext.ts
new file mode 100644
index 000000000..0bf548076
--- /dev/null
+++ b/src/components/useColorSchemeContext.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import { IGardenTheme } from '@zendeskgarden/react-theming';
+import { createContext, useContext } from 'react';
+
+export type ColorScheme = IGardenTheme['colors']['base'] | 'system';
+
+export const ColorSchemeContext = createContext<
+  | {
+      colorScheme: ColorScheme;
+      setColorScheme: (colorScheme: ColorScheme) => void;
+    }
+  | undefined
+>(undefined);
+
+export const useColorSchemeContext = () => {
+  const context = useContext(ColorSchemeContext);
+
+  if (!context) {
+    throw new Error('Error: this component must be rendered within a <ColorSchemeProvider>.');
+  }
+
+  return context;
+};
diff --git a/src/examples/avatar/AvatarShape.tsx b/src/examples/avatar/AvatarShape.tsx
index 2cd7f8235..a6d4b1223 100644
--- a/src/examples/avatar/AvatarShape.tsx
+++ b/src/examples/avatar/AvatarShape.tsx
@@ -15,7 +15,7 @@ import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user
 const Example = () => (
   <Grid.Row>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="medium">
+      <Avatar backgroundColor="background.emphasis" size="medium">
         <UserIcon role="img" aria-label="User" />
       </Avatar>
     </Grid.Col>
diff --git a/src/examples/avatar/AvatarSize.tsx b/src/examples/avatar/AvatarSize.tsx
index 2e4938c97..637aa3cb0 100644
--- a/src/examples/avatar/AvatarSize.tsx
+++ b/src/examples/avatar/AvatarSize.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { PALETTE } from '@zendeskgarden/react-theming';
 import { Avatar } from '@zendeskgarden/react-avatars';
 import { Grid } from '@zendeskgarden/react-grid';
 import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg';
@@ -14,27 +13,27 @@ import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user
 const Example = () => (
   <Grid.Row alignItems="center">
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="extraextrasmall">
+      <Avatar backgroundColor="background.emphasis" size="extraextrasmall">
         <UserIcon role="img" aria-label="extra extra small user avatar" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="extrasmall">
+      <Avatar backgroundColor="background.emphasis" size="extrasmall">
         <UserIcon role="img" aria-label="extra small user avatar" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="small">
+      <Avatar backgroundColor="background.emphasis" size="small">
         <UserIcon role="img" aria-label="small user avatar" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="medium">
+      <Avatar backgroundColor="background.emphasis" size="medium">
         <UserIcon role="img" aria-label="medium user avatar" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} size="large">
+      <Avatar backgroundColor="background.emphasis" size="large">
         <UserIcon role="img" aria-label="large user avatar" />
       </Avatar>
     </Grid.Col>
diff --git a/src/examples/avatar/AvatarStatus.tsx b/src/examples/avatar/AvatarStatus.tsx
index 5b920ec6f..c31711c17 100644
--- a/src/examples/avatar/AvatarStatus.tsx
+++ b/src/examples/avatar/AvatarStatus.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { PALETTE } from '@zendeskgarden/react-theming';
 import { Avatar } from '@zendeskgarden/react-avatars';
 import { Grid } from '@zendeskgarden/react-grid';
 import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg';
@@ -14,17 +13,17 @@ import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user
 const Example = () => (
   <Grid.Row>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} status="away">
+      <Avatar backgroundColor="background.emphasis" status="away">
         <UserIcon role="img" aria-label="user" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} status="available">
+      <Avatar backgroundColor="background.emphasis" status="available">
         <UserIcon role="img" aria-label="user" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]} badge={8}>
+      <Avatar backgroundColor="background.emphasis" badge={8}>
         <UserIcon role="img" aria-label="user" />
       </Avatar>
     </Grid.Col>
diff --git a/src/examples/avatar/AvatarType.tsx b/src/examples/avatar/AvatarType.tsx
index 38429b712..6b15c28f9 100644
--- a/src/examples/avatar/AvatarType.tsx
+++ b/src/examples/avatar/AvatarType.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { PALETTE } from '@zendeskgarden/react-theming';
 import { Avatar } from '@zendeskgarden/react-avatars';
 import { Grid } from '@zendeskgarden/react-grid';
 import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user-solo-stroke.svg';
@@ -14,17 +13,17 @@ import { ReactComponent as UserIcon } from '@zendeskgarden/svg-icons/src/16/user
 const Example = () => (
   <Grid.Row>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]}>
+      <Avatar backgroundColor="background.emphasis">
         <UserIcon role="img" aria-label="icon avatar" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]}>
+      <Avatar backgroundColor="background.emphasis">
         <img alt="image avatar" src="https://garden.zendesk.com/components/avatar/user.png" />
       </Avatar>
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Avatar backgroundColor={PALETTE.grey[700]}>
+      <Avatar backgroundColor="background.emphasis">
         <Avatar.Text>ZD</Avatar.Text>
       </Avatar>
     </Grid.Col>
diff --git a/src/examples/design/icons/IconShowcase.tsx b/src/examples/design/icons/IconShowcase.tsx
index 261619a64..521864ebb 100644
--- a/src/examples/design/icons/IconShowcase.tsx
+++ b/src/examples/design/icons/IconShowcase.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Grid } from '@zendeskgarden/react-grid';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { ReactComponent as LeafIcon } from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
 import { ReactComponent as LightBulbIcon } from '@zendeskgarden/svg-icons/src/16/lightbulb-stroke.svg';
 import { ReactComponent as LightningBoltIcon } from '@zendeskgarden/svg-icons/src/16/lightning-bolt-stroke.svg';
@@ -17,7 +17,7 @@ import { ReactComponent as SmileyIcon } from '@zendeskgarden/svg-icons/src/16/sm
 
 const StyledCol = styled(Grid.Col)`
   text-align: center;
-  color: ${p => getColorV8('neutralHue', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 `;
 
 const Example = () => (
diff --git a/src/examples/design/icons/IconStyles.tsx b/src/examples/design/icons/IconStyles.tsx
index 9f487e35f..36cf611df 100644
--- a/src/examples/design/icons/IconStyles.tsx
+++ b/src/examples/design/icons/IconStyles.tsx
@@ -11,11 +11,11 @@ import { MD } from '@zendeskgarden/react-typography';
 import { Grid } from '@zendeskgarden/react-grid';
 import { ReactComponent as LeafStrokeIcon } from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
 import { ReactComponent as LeafFillIcon } from '@zendeskgarden/svg-icons/src/16/leaf-fill.svg';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 
 const StyledCol = styled(Grid.Col)`
   text-align: center;
-  color: ${p => getColorV8('neutralHue', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 `;
 
 const Example = () => {
diff --git a/src/examples/design/icons/SvgSearch.tsx b/src/examples/design/icons/SvgSearch.tsx
index 5d0260743..1bc5a3cd3 100644
--- a/src/examples/design/icons/SvgSearch.tsx
+++ b/src/examples/design/icons/SvgSearch.tsx
@@ -27,7 +27,8 @@ const StyledSvgWrapper = styled.div<{ isAnswerBot?: boolean }>`
   align-items: center;
   margin: 0 0 ${p => p.theme.space.sm};
   fill: ${p => p.isAnswerBot && getColor({ theme: p.theme, hue: 'kale', shade: 900 })};
-  color: ${p => p.isAnswerBot && '#d6eef1'};
+  color: ${p =>
+    p.isAnswerBot ? '#d6eef1' : getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 `;
 
 const StyledCol = styled(Grid.Col).attrs({ forwardedAs: 'li' })`
diff --git a/src/examples/loaders/progress/ProgressColor.tsx b/src/examples/loaders/progress/ProgressColor.tsx
index eab7da482..a018b6582 100644
--- a/src/examples/loaders/progress/ProgressColor.tsx
+++ b/src/examples/loaders/progress/ProgressColor.tsx
@@ -7,19 +7,18 @@
 
 import React from 'react';
 import { Grid } from '@zendeskgarden/react-grid';
-import { PALETTE } from '@zendeskgarden/react-theming';
 import { Progress } from '@zendeskgarden/react-loaders';
 
 const Example = () => (
   <Grid.Row>
     <Grid.Col textAlign="center">
-      <Progress color={PALETTE.grey[700]} value={80} aria-label="Fertilizing seeds" />
+      <Progress color="background.emphasis" value={80} aria-label="Fertilizing seeds" />
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Progress color={PALETTE.blue[700]} value={80} aria-label="Watering all plants" />
+      <Progress color="background.primaryEmphasis" value={80} aria-label="Watering all plants" />
     </Grid.Col>
     <Grid.Col textAlign="center">
-      <Progress color={PALETTE.kale[700]} value={80} aria-label="Removing weeds" />
+      <Progress color="background.dangerEmphasis" value={80} aria-label="Removing weeds" />
     </Grid.Col>
   </Grid.Row>
 );
diff --git a/src/examples/utilities/components.ts b/src/examples/utilities/components.ts
index 5e2c2dac7..20c2668c2 100644
--- a/src/examples/utilities/components.ts
+++ b/src/examples/utilities/components.ts
@@ -45,8 +45,7 @@ const components = [
     props: {
       '[options.theme]': {
         required: true,
-        type: 'DefaultTheme',
-        defaultValue: 'DEFAULT_THEME',
+        type: 'IGardenTheme',
         description: 'Provides values used to resolve the desired colors'
       },
       '[options.color]': {
@@ -99,7 +98,7 @@ const components = [
     props: {
       theme: {
         required: true,
-        type: 'DefaultTheme',
+        type: 'IGardenTheme',
         description: 'Provides information for pattern color and LTR/RTL layout'
       },
       size: {
@@ -130,8 +129,7 @@ const components = [
     props: {
       '[options.theme]': {
         required: true,
-        type: 'DefaultTheme',
-        defaultValue: 'DEFAULT_THEME',
+        type: 'IGardenTheme',
         description: 'Provides values used to resolve the desired color'
       },
       '[options.variable]': {
@@ -201,7 +199,7 @@ const components = [
     props: {
       '[options.theme]': {
         required: true,
-        type: 'DefaultTheme',
+        type: 'IGardenTheme',
         defaultValue: 'DEFAULT_THEME',
         description: 'Provides values used to resolve the desired colors'
       },
diff --git a/src/icons/components.svg b/src/icons/components.svg
index b5d58568e..d8d7565ec 100644
--- a/src/icons/components.svg
+++ b/src/icons/components.svg
@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="288" height="220" focusable="false" viewBox="0 0 288 220">
-  <rect width="100%" height="100%" fill="#F6F4F4"/>
-  <path fill="#228F67" d="M94 40V180H234L94 40Z"/>
-  <path fill="#00363D" d="M52 40V180H192L52 40Z"/>
+  <path fill="#4EAB89" d="M94 40V180H234L94 40Z"/>
+  <path fill="#16494F" d="M52 40V180H192L52 40Z"/>
 </svg>
diff --git a/src/icons/content.svg b/src/icons/content.svg
index 27245fc42..7aabe6a57 100644
--- a/src/icons/content.svg
+++ b/src/icons/content.svg
@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="288" height="220" focusable="false" viewBox="0 0 288 220">
-  <rect width="100%" height="100%" fill="#F6F4F4"/>
-  <circle cx="144" cy="110" r="70" fill="#228F67"/>
-  <circle cx="144" cy="95" r="35" fill="#00363D"/>
+  <circle cx="144" cy="110" r="70" fill="#4EAB89"/>
+  <circle cx="144" cy="95" r="35" fill="#16494F"/>
 </svg>
diff --git a/src/icons/design.svg b/src/icons/design.svg
index 3bb5d72da..a93606aad 100644
--- a/src/icons/design.svg
+++ b/src/icons/design.svg
@@ -1,5 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="288" height="220" focusable="false" viewBox="0 0 288 220">
-  <rect width="100%" height="100%" fill="#EDE0CF"/>
-  <path fill="#00363D" d="M64 30.0149C64.2759 30.013 64.55 30 64.8259 30C152.67 30 223.893 102.007 224 190H64V30.0149Z"/>
-  <path fill="#228F67" d="M84 94.0071C84.1311 94.0062 84.2612 94 84.3923 94C126.118 94 159.949 128.203 160 170H84V94.0071Z"/>
+  <path fill="#16494F" d="M64 30.0149C64.2759 30.013 64.55 30 64.8259 30C152.67 30 223.893 102.007 224 190H64V30.0149Z"/>
+  <path fill="#4EAB89" d="M84 94.0071C84.1311 94.0062 84.2612 94 84.3923 94C126.118 94 159.949 128.203 160 170H84V94.0071Z"/>
 </svg>
diff --git a/src/layouts/Home/components/Foundation.tsx b/src/layouts/Home/components/Foundation.tsx
index 32698608f..03c3ea3cc 100644
--- a/src/layouts/Home/components/Foundation.tsx
+++ b/src/layouts/Home/components/Foundation.tsx
@@ -6,10 +6,10 @@
  */
 
 import React, { SVGAttributes } from 'react';
-import { css } from 'styled-components';
-import { mediaQuery } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { getColor, mediaQuery, StyledBaseIcon } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
-import { LG } from '@zendeskgarden/react-typography';
+import { LG, Span } from '@zendeskgarden/react-typography';
 import MaxWidthLayout from 'layouts/MaxWidth';
 import { SectionCallout, StyledSectionHeader } from './SectionCallout';
 import { HomeLink } from './HomeLink';
@@ -17,6 +17,17 @@ import { ReactComponent as ComponentsIcon } from '../../../icons/components.svg'
 import { ReactComponent as ContentIcon } from '../../../icons/content.svg';
 import { ReactComponent as DesignIcon } from '../../../icons/design.svg';
 
+const StyledIcon = styled(StyledBaseIcon)`
+  background-color: ${p =>
+    getColor({
+      theme: p.theme,
+      dark: { hue: 'neutralHue', shade: 900 },
+      light: { hue: 'chromeHue', shade: 200 }
+    })};
+  width: 100%;
+  height: auto;
+`;
+
 const FoundationLink: React.FC<{
   group: string;
   title: string;
@@ -30,7 +41,9 @@ const FoundationLink: React.FC<{
       height: 100%;
     `}
   >
-    <Icon style={{ width: '100%', height: 'auto' }} />
+    <StyledIcon>
+      <Icon />
+    </StyledIcon>
     <div
       css={css`
         display: flex;
@@ -54,16 +67,18 @@ const FoundationLink: React.FC<{
       >
         {title}
       </LG>
-      <HomeLink to={url}>
-        Browse{' '}
-        <span
-          css={`
-            text-transform: lowercase;
-          `}
-        >
-          {group}
-        </span>
-      </HomeLink>
+      <Span>
+        <HomeLink to={url}>
+          Browse{' '}
+          <Span
+            css={`
+              text-transform: lowercase;
+            `}
+          >
+            {group}
+          </Span>
+        </HomeLink>
+      </Span>
     </div>
   </div>
 );
diff --git a/src/layouts/Home/components/HomeLink.tsx b/src/layouts/Home/components/HomeLink.tsx
index c9dab70dd..c338e76fe 100644
--- a/src/layouts/Home/components/HomeLink.tsx
+++ b/src/layouts/Home/components/HomeLink.tsx
@@ -8,7 +8,17 @@
 import React from 'react';
 import { GatsbyLinkProps } from 'gatsby';
 import { Link } from '../../../layouts/Root/components/StyledNavigationLink';
+import { css } from 'styled-components';
 
 export const HomeLink: React.FC<Omit<GatsbyLinkProps<any>, 'ref'>> = ({ children, ...props }) => (
-  <Link {...props}>{children} →</Link>
+  <Link
+    {...props}
+    css={css`
+      &:hover {
+        text-decoration: underline;
+      }
+    `}
+  >
+    {children} →
+  </Link>
 );
diff --git a/src/layouts/Home/components/News.tsx b/src/layouts/Home/components/News.tsx
index a120e1f34..e60265967 100644
--- a/src/layouts/Home/components/News.tsx
+++ b/src/layouts/Home/components/News.tsx
@@ -8,22 +8,12 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import styled, { css } from 'styled-components';
-import { SELECTOR_FOCUS_VISIBLE, getColor, getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
-import { XXL } from '@zendeskgarden/react-typography';
+import { LG, Span, XXL } from '@zendeskgarden/react-typography';
 import { Anchor } from '@zendeskgarden/react-buttons';
 import MaxWidthLayout from 'layouts/MaxWidth';
 
-const StyledNewsAnchor = styled(Anchor)`
-  ${SELECTOR_FOCUS_VISIBLE} {
-    color: ${p => getColorV8('primaryHue', 700, p.theme)};
-  }
-
-  &:active {
-    color: ${p => getColorV8('primaryHue', 800, p.theme)};
-  }
-`;
-
 const StyledSectionHeader = styled(XXL).attrs({ tag: 'h2', isBold: true })`
   margin-bottom: ${p => p.theme.space.md};
 `;
@@ -48,7 +38,7 @@ export const News: React.FC = () => {
     <div
       css={css`
         position: relative;
-        background-color: ${p => getColorV8('grey', 200, p.theme)};
+        background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
       `}
     >
       <MaxWidthLayout>
@@ -71,26 +61,19 @@ export const News: React.FC = () => {
                         margin-bottom: ${p => p.theme.space.lg};
                       `}
                     >
-                      <StyledNewsAnchor
-                        href={edge.node.url}
-                        css={css`
-                          color: ${({ theme }) =>
-                            getColor({ variable: 'foreground.default', theme })};
-                          font-weight: ${p => p.theme.fontWeights.semibold};
-                        `}
-                      >
-                        {edge.node.title}
-                      </StyledNewsAnchor>
-                      <p
-                        css={css`
-                          color: ${p => getColorV8('grey', 700, p.theme)};
-                        `}
-                      >
-                        Article by{' '}
-                        <StyledNewsAnchor href={edge.node.author_url}>
-                          {edge.node.author}
-                        </StyledNewsAnchor>
-                      </p>
+                      <LG>
+                        <Anchor href={edge.node.url} isUnderlined={false}>
+                          {edge.node.title}
+                        </Anchor>
+                        <p>
+                          <Span hue="foreground.subtle">
+                            Article by{' '}
+                            <Anchor href={edge.node.author_url} isUnderlined={false}>
+                              {edge.node.author}
+                            </Anchor>
+                          </Span>
+                        </p>
+                      </LG>
                     </Grid.Col>
                   );
                 })}
diff --git a/src/layouts/Home/components/Patterns.tsx b/src/layouts/Home/components/Patterns.tsx
index e7ef58d9c..308b3433b 100644
--- a/src/layouts/Home/components/Patterns.tsx
+++ b/src/layouts/Home/components/Patterns.tsx
@@ -8,13 +8,30 @@
 import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
-import { css } from 'styled-components';
-import { mediaQuery } from '@zendeskgarden/react-theming';
+import styled, { css } from 'styled-components';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
 import { SectionCallout } from './SectionCallout';
 import MaxWidthLayout from 'layouts/MaxWidth';
 import { HomeLink } from './HomeLink';
 
+const StyledBackground = styled.div`
+  position: relative;
+  margin-right: ${p => p.theme.space.base * 6}px;
+  margin-bottom: ${p => p.theme.space.base * 6}px;
+  background-color: ${p =>
+    getColor({
+      theme: p.theme,
+      dark: { hue: 'neutralHue', shade: 900 },
+      light: { hue: 'chromeHue', shade: 200 }
+    })};
+
+  & > div {
+    top: ${p => p.theme.space.base * 6}px;
+    left: ${p => p.theme.space.base * 6}px;
+  }
+`;
+
 export const Patterns: React.FC = () => {
   const { patternsImage } = useStaticQuery(graphql`
     {
@@ -49,11 +66,13 @@ export const Patterns: React.FC = () => {
               }
             `}
           >
-            <GatsbyImage
-              image={patternsImage.childFile.childImageSharp.gatsbyImageData}
-              alt="Garden patterns"
-              imgStyle={{ width: 808, maxWidth: '100%', height: 488, maxHeight: '100%' }}
-            />
+            <StyledBackground>
+              <GatsbyImage
+                image={patternsImage.childFile.childImageSharp.gatsbyImageData}
+                alt="Garden patterns"
+                imgStyle={{ width: 808, maxWidth: '100%', height: 488, maxHeight: '100%' }}
+              />
+            </StyledBackground>
           </Grid.Col>
           <Grid.Col
             sm={12}
diff --git a/src/layouts/Home/components/Search.tsx b/src/layouts/Home/components/Search.tsx
index 75350ea5c..5a5163b35 100644
--- a/src/layouts/Home/components/Search.tsx
+++ b/src/layouts/Home/components/Search.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import { css, ThemeProps } from 'styled-components';
-import { getLineHeight, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, getLineHeight, mediaQuery } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
 import { LG, XXXL } from '@zendeskgarden/react-typography';
 import MaxWidthLayout from 'layouts/MaxWidth';
@@ -48,7 +48,12 @@ export const Search: React.FC = () => {
     <div
       css={css`
         margin-bottom: ${p => p.theme.space.base * 20}px;
-        background-color: ${p => p.theme.palette.oatMilk};
+        background-color: ${p =>
+          getColor({
+            theme: p.theme,
+            dark: { hue: 'neutralHue', shade: 1200 },
+            light: { hue: 'chromeHue', shade: 200 }
+          })};
       `}
     >
       <MaxWidthLayout>
diff --git a/src/layouts/Home/components/SectionCallout.tsx b/src/layouts/Home/components/SectionCallout.tsx
index 4b9a358af..da28379a4 100644
--- a/src/layouts/Home/components/SectionCallout.tsx
+++ b/src/layouts/Home/components/SectionCallout.tsx
@@ -7,14 +7,14 @@
 
 import React, { HTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { XXL, LG } from '@zendeskgarden/react-typography';
 
 export const StyledSectionHeader = styled.div`
   text-transform: uppercase;
   line-height: ${p => p.theme.lineHeights.sm};
   letter-spacing: 0.5px;
-  color: ${p => getColorV8('neutralHue', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
   font-size: ${p => p.theme.fontSizes.xs};
   font-weight: ${p => p.theme.fontWeights.semibold};
 `;
@@ -46,7 +46,7 @@ export const SectionCallout: React.FC<
     <LG
       tag="p"
       css={css`
-        color: ${p => getColorV8('grey', 700, p.theme)};
+        color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })};
       `}
     >
       {description}
diff --git a/src/layouts/Root/components/Footer.tsx b/src/layouts/Root/components/Footer.tsx
index 9d4b9b455..2718e9346 100644
--- a/src/layouts/Root/components/Footer.tsx
+++ b/src/layouts/Root/components/Footer.tsx
@@ -7,20 +7,19 @@
 
 import React from 'react';
 import styled, { css } from 'styled-components';
-import {
-  SELECTOR_FOCUS_VISIBLE,
-  getColor,
-  getColorV8,
-  mediaQuery
-} from '@zendeskgarden/react-theming';
-import { ReactComponent as GardenIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg';
+import { SELECTOR_FOCUS_VISIBLE, getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { Link } from './StyledNavigationLink';
 import MaxWidthLayout from 'layouts/MaxWidth';
+import { StyledGardenIcon } from './Header';
 
 const StyledFooterItem = styled(Link)`
   margin-right: ${p => p.theme.space.lg};
   color: ${({ theme }) => getColor({ hue: 'white', theme })};
 
+  &:hover {
+    text-decoration: underline;
+  }
+
   &:hover,
   &:focus {
     color: inherit;
@@ -46,7 +45,7 @@ interface IFooterProps {
 const Footer: React.FC<IFooterProps> = ({ path }) => (
   <footer
     css={css`
-      background-color: ${p => getColorV8('kale', 700, p.theme)};
+      background-color: ${p => getColor({ theme: p.theme, hue: 'chromeHue', shade: 900 })};
       padding: ${p => p.theme.space.md};
       line-height: ${p => p.theme.lineHeights.md};
       color: ${({ theme }) => getColor({ hue: 'white', theme })};
@@ -78,13 +77,7 @@ const Footer: React.FC<IFooterProps> = ({ path }) => (
             }
           `}
         >
-          <GardenIcon
-            css={css`
-              width: ${p => p.theme.iconSizes.lg};
-              height: ${p => p.theme.iconSizes.lg};
-              color: ${p => getColorV8('green', 400, p.theme)};
-            `}
-          />
+          <StyledGardenIcon />
         </div>
         <div
           css={css`
@@ -97,7 +90,8 @@ const Footer: React.FC<IFooterProps> = ({ path }) => (
       <div
         css={css`
           display: flex;
-          border-top: ${p => p.theme.borders.sm} ${p => getColorV8('kale', 500, p.theme)};
+          border-top: ${p => p.theme.borders.sm}
+            ${p => getColor({ theme: p.theme, hue: 'chromeHue', shade: 700 })};
           padding-top: ${p => p.theme.space.md};
           padding-bottom: ${p => p.theme.space.lg};
 
diff --git a/src/layouts/Root/components/Header.tsx b/src/layouts/Root/components/Header.tsx
index e35058375..516e2c52e 100644
--- a/src/layouts/Root/components/Header.tsx
+++ b/src/layouts/Root/components/Header.tsx
@@ -5,25 +5,36 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useState, HTMLAttributes, useRef, useEffect } from 'react';
-import styled, { css } from 'styled-components';
-import { Link } from 'gatsby';
-import { getColor, getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import React, { useState, HTMLAttributes, useRef, useEffect, ChangeEventHandler } from 'react';
+import styled, { css, DefaultTheme, ThemeProps, useTheme } from 'styled-components';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
+import { IMenuProps, Item, ItemGroup, Menu } from '@zendeskgarden/react-dropdowns';
 import { ReactComponent as SearchStroke } from '@zendeskgarden/svg-icons/src/16/search-stroke.svg';
 import { ReactComponent as OverflowVerticalStroke } from '@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg';
 import { ReactComponent as CloseStroke } from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
+import { ReactComponent as LightIcon } from '@zendeskgarden/svg-icons/src/16/sun-stroke.svg';
+import { ReactComponent as DarkIcon } from '@zendeskgarden/svg-icons/src/16/moon-stroke.svg';
+import { ReactComponent as SystemIcon } from '@zendeskgarden/svg-icons/src/16/monitor-stroke.svg';
 import { ReactComponent as GardenIcon } from '@zendeskgarden/svg-icons/src/26/garden.svg';
 import { ReactComponent as GardenWordmark } from '@zendeskgarden/svg-icons/src/26/wordmark-garden.svg';
+import { ColorScheme, useColorSchemeContext } from 'components/useColorSchemeContext';
 import MaxWidthLayout from 'layouts/MaxWidth';
 import { SearchInput } from './SearchInput';
-import { StyledNavigationLink } from './StyledNavigationLink';
+import { Link, StyledNavigationLink } from './StyledNavigationLink';
+import { Field, Select } from '@zendeskgarden/react-forms';
 
 export const headerBoxShadow = (theme: any) =>
   theme.shadows.lg(
     `${theme.space.base * 4}px`,
     `${theme.space.base * 6}px`,
-    getColorV8('neutralHue', 800, theme, 0.05)!
+    getColor({
+      theme,
+      hue: 'neutralHue',
+      shade: 1200,
+      dark: { transparency: theme.opacity[200] },
+      light: { transparency: theme.opacity[100] / 2 }
+    })
   );
 
 export const headerHeight = (theme: any) => theme.space.base * 20;
@@ -40,23 +51,29 @@ const StyledDesktopNavLink = styled(StyledNavigationLink).attrs({ partiallyActiv
   justify-content: center;
 `;
 
-const StyledHeader = styled.header.attrs({ role: 'banner' })`
-  z-index: 1;
+const StyledHeader = styled.header.attrs({ role: 'banner' })<
+  ThemeProps<DefaultTheme> & { isNavigationVisible: boolean }
+>`
+  position: ${p => p.isNavigationVisible && 'absolute'};
+  z-index: 4;
   box-shadow: ${p => headerBoxShadow(p.theme)};
-  background-color: ${p => getColor({ theme: p.theme, variable: 'background.default' })};
+  background-color: ${p => getColor({ theme: p.theme, variable: 'background.raised' })};
   padding: 0 ${p => p.theme.space.base * 4}px;
+  width: 100%;
   height: ${p => headerHeight(p.theme)}px;
 
-  &[data-show-navigation='true'] {
-    border-bottom-color: ${({ theme }) => getColor({ hue: 'white', theme })};
-  }
-
   ${p => mediaQuery('down', 'sm', p.theme)} {
     padding: 0;
     height: ${p => p.theme.space.base * 15}px;
   }
 `;
 
+export const StyledGardenIcon = styled(GardenIcon)`
+  width: ${p => p.theme.iconSizes.lg};
+  height: ${p => p.theme.iconSizes.lg};
+  color: ${p => getColor({ theme: p.theme, hue: 'green', shade: 500 })};
+`;
+
 const Logo: React.FC = () => (
   <div
     css={css`
@@ -71,24 +88,24 @@ const Logo: React.FC = () => (
   >
     <Link aria-label="Zendesk Garden" to="/">
       <div
-        css={`
+        css={css`
           display: flex;
-          justify-content: center;
           align-items: center;
+          justify-content: center;
         `}
       >
-        <GardenIcon
-          css={css`
-            width: ${p => p.theme.iconSizes.lg};
-            height: ${p => p.theme.iconSizes.lg};
-            color: ${p => getColorV8('green', 400, p.theme)};
-          `}
-        />
+        <StyledGardenIcon />
         <GardenWordmark
           css={css`
             margin-left: ${p => p.theme.space.xs};
             height: ${p => p.theme.iconSizes.lg};
-            color: ${p => getColorV8('kale', 700, p.theme)};
+            color: ${p =>
+              getColor({
+                theme: p.theme,
+                hue: 'chromeHue',
+                dark: { shade: 300 },
+                light: { shade: 800 }
+              })};
 
             ${p => mediaQuery('down', 'sm', p.theme)} {
               display: none;
@@ -157,11 +174,17 @@ const StyledMobileNavLink = styled(StyledNavigationLink).attrs({ partiallyActive
 `;
 
 const MobileNav: React.FC = () => {
+  const { colorScheme, setColorScheme } = useColorSchemeContext();
+
+  const handleColorSchemeChange: ChangeEventHandler<HTMLSelectElement> = event => {
+    setColorScheme(event.target.value as ColorScheme);
+  };
+
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
 
     return () => {
-      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
     };
   }, []);
 
@@ -171,7 +194,7 @@ const MobileNav: React.FC = () => {
         position: fixed;
         inset: ${p => p.theme.space.base * 15}px 0 0 0;
         z-index: 3;
-        background-color: ${p => p.theme.palette.tofu};
+        background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
         padding: ${p => p.theme.space.lg} ${p => p.theme.space.xxl};
       `}
     >
@@ -179,41 +202,92 @@ const MobileNav: React.FC = () => {
       <StyledMobileNavLink to="/design">Design</StyledMobileNavLink>
       <StyledMobileNavLink to="/components">Components</StyledMobileNavLink>
       <StyledMobileNavLink to="/patterns">Patterns</StyledMobileNavLink>
+      <Field
+        css={css`
+          margin-top: ${p => p.theme.space.base * 2}px;
+          padding: ${p => p.theme.space.base * 1.5}px ${p => p.theme.space.xs};
+        `}
+      >
+        <Field.Label isRegular>Switch themes</Field.Label>
+        <Select defaultValue="system" value={colorScheme} onChange={handleColorSchemeChange}>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+          <option value="system">System</option>
+        </Select>
+      </Field>
     </div>
   );
 };
 
-const DesktopNav: React.FC = () => (
-  <nav
-    role="navigation"
-    aria-label="Global"
-    css={css`
-      display: flex;
-      flex-grow: 1;
-      justify-content: flex-end;
+const DesktopNav: React.FC = () => {
+  const { colorScheme, setColorScheme } = useColorSchemeContext();
 
-      ${p => mediaQuery('down', 'sm', p.theme)} {
-        display: none;
-      }
-    `}
-  >
-    <StyledDesktopNavItem>
-      <StyledDesktopNavLink to="/content">Content</StyledDesktopNavLink>
-    </StyledDesktopNavItem>
-    <StyledDesktopNavItem>
-      <StyledDesktopNavLink to="/design">Design</StyledDesktopNavLink>
-    </StyledDesktopNavItem>
-    <StyledDesktopNavItem>
-      <StyledDesktopNavLink to="/components">Components</StyledDesktopNavLink>
-    </StyledDesktopNavItem>
-    <StyledDesktopNavItem>
-      <StyledDesktopNavLink to="/patterns">Patterns</StyledDesktopNavLink>
-    </StyledDesktopNavItem>
-    <StyledDesktopNavItem>
-      <SearchInput id="algolia-docsearch" placeholder="Search" />
-    </StyledDesktopNavItem>
-  </nav>
-);
+  const theme = useTheme();
+
+  const handleColorSchemeChange: IMenuProps['onChange'] = changes => {
+    if (changes.value) {
+      setTimeout(() => {
+        setColorScheme(changes.value as ColorScheme);
+      });
+    }
+  };
+
+  return (
+    <nav
+      role="navigation"
+      aria-label="Global"
+      css={css`
+        display: flex;
+        flex-grow: 1;
+        justify-content: flex-end;
+
+        ${p => mediaQuery('down', 'sm', p.theme)} {
+          display: none;
+        }
+      `}
+    >
+      <StyledDesktopNavItem>
+        <StyledDesktopNavLink to="/content">Content</StyledDesktopNavLink>
+      </StyledDesktopNavItem>
+      <StyledDesktopNavItem>
+        <StyledDesktopNavLink to="/design">Design</StyledDesktopNavLink>
+      </StyledDesktopNavItem>
+      <StyledDesktopNavItem>
+        <StyledDesktopNavLink to="/components">Components</StyledDesktopNavLink>
+      </StyledDesktopNavItem>
+      <StyledDesktopNavItem>
+        <StyledDesktopNavLink to="/patterns">Patterns</StyledDesktopNavLink>
+      </StyledDesktopNavItem>
+      <StyledDesktopNavItem>
+        <SearchInput id="algolia-docsearch" placeholder="Search" />
+      </StyledDesktopNavItem>
+      <StyledDesktopNavItem>
+        <Menu
+          button={props => (
+            <IconButton {...props}>
+              {theme.colors.base === 'dark' ? <DarkIcon /> : <LightIcon />}
+            </IconButton>
+          )}
+          onChange={handleColorSchemeChange}
+          placement="bottom-end"
+          selectedItems={[{ value: colorScheme }]}
+        >
+          <ItemGroup aria-label="Switch theme" type="radio">
+            <Item icon={<LightIcon />} value="light">
+              Light
+            </Item>
+            <Item icon={<DarkIcon />} value="dark">
+              Dark
+            </Item>
+            <Item icon={<SystemIcon />} isSelected value="system">
+              System
+            </Item>
+          </ItemGroup>
+        </Menu>
+      </StyledDesktopNavItem>
+    </nav>
+  );
+};
 
 const Header: React.FC = () => {
   const [isNavigationVisible, setIsNavigationVisible] = useState(false);
@@ -228,7 +302,7 @@ const Header: React.FC = () => {
 
   return (
     <>
-      <StyledHeader>
+      <StyledHeader isNavigationVisible={isNavigationVisible}>
         <MaxWidthLayout
           css={css`
             display: flex;
diff --git a/src/layouts/Root/components/SearchInput.tsx b/src/layouts/Root/components/SearchInput.tsx
index e4cc9038f..d63d47cee 100644
--- a/src/layouts/Root/components/SearchInput.tsx
+++ b/src/layouts/Root/components/SearchInput.tsx
@@ -8,20 +8,29 @@
 import React, { HTMLAttributes, useEffect } from 'react';
 import { css, ThemeProps } from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, mediaQuery, menuStyles } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery, menuStyles } from '@zendeskgarden/react-theming';
 import { MediaInput } from '@zendeskgarden/react-forms';
 import { ReactComponent as SearchStroke } from '@zendeskgarden/svg-icons/src/16/search-stroke.svg';
 
-const searchStyles = (props: ThemeProps<any>) => {
-  const theme = props.theme;
+const searchStyles = ({ theme }: ThemeProps<any>) => {
   const positionTop = math(`${theme.space.base * 3.5} + ${theme.borderWidths.sm}`);
   const positionLeft = math(`${theme.space.base * -9} - ${theme.borderWidths.sm}`);
   const positionRight = math(`${theme.space.base * -3} - ${theme.borderWidths.sm}`);
-  const highlightBackgroundColor = getColorV8('primaryHue', 800, theme, 0.08);
-  const hoverBackgroundColor = getColorV8('primaryHue', 600, theme, 0.08);
-  const hoverSeparatorColor = getColorV8('neutralHue', 250, theme);
-  const metaColor = getColorV8('neutralHue', 600, theme);
-  const separatorColor = getColorV8('neutralHue', 200, theme);
+  const options = {
+    theme,
+    variable: 'background.primaryEmphasis',
+    transparency: theme.opacity[100]
+  };
+  const highlightBackgroundColor = getColor({
+    ...options,
+    dark: { offset: -200 },
+    light: { offset: 200 }
+  });
+  const hoverBackgroundColor = getColor(options);
+  const hoverBoxShadow = `inset ${theme.shadowWidths.md} 0 ${getColor({ theme, variable: 'background.primaryEmphasis' })}`;
+  const hoverSeparatorColor = getColor({ theme, variable: 'border.subtle' });
+  const metaColor = getColor({ theme, variable: 'foreground.subtle' });
+  const separatorColor = getColor({ theme, variable: 'border.subtle' });
 
   return css`
     ${p =>
@@ -50,6 +59,7 @@ const searchStyles = (props: ThemeProps<any>) => {
 
       & [class^='ds-dataset-'] {
         border: none;
+        background-color: inherit;
         padding: 0;
 
         & .ds-suggestions {
@@ -57,7 +67,9 @@ const searchStyles = (props: ThemeProps<any>) => {
         }
 
         & .algolia-docsearch-suggestion {
+          background-color: inherit;
           padding: 0;
+          text-decoration: none;
           color: inherit;
 
           & .algolia-docsearch-suggestion--highlight {
@@ -119,6 +131,7 @@ const searchStyles = (props: ThemeProps<any>) => {
 
           & .algolia-docsearch-suggestion--title {
             margin: 0;
+            color: inherit;
             font-size: inherit;
             font-weight: ${theme.fontWeights.regular};
           }
@@ -134,6 +147,7 @@ const searchStyles = (props: ThemeProps<any>) => {
 
         & .ds-cursor {
           & .algolia-docsearch-suggestion--wrapper {
+            box-shadow: ${hoverBoxShadow};
             background-color: ${hoverBackgroundColor};
 
             & > *::before {
diff --git a/src/layouts/Root/components/StyledNavigationLink.tsx b/src/layouts/Root/components/StyledNavigationLink.tsx
index fe9a81a89..00b7c3585 100644
--- a/src/layouts/Root/components/StyledNavigationLink.tsx
+++ b/src/layouts/Root/components/StyledNavigationLink.tsx
@@ -9,7 +9,8 @@ import React, { ReactNode } from 'react';
 import styled, { css, DefaultTheme, ThemeProps } from 'styled-components';
 import { Link as GatsbyLink } from 'gatsby';
 import { OutboundLink } from 'gatsby-plugin-google-gtag';
-import { focusStyles, getColor, getColorV8 } from '@zendeskgarden/react-theming';
+import { focusStyles, getColor, StyledBaseIcon } from '@zendeskgarden/react-theming';
+import { ReactComponent as NewWindowIcon } from '@zendeskgarden/svg-icons/src/12/new-window-stroke.svg';
 
 interface ILink {
   children: ReactNode;
@@ -44,13 +45,25 @@ const colorStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
 };
 
 const StyledGatsbyLink = styled(GatsbyLink)`
+  border-radius: ${p => p.theme.borderRadii.md};
+
   ${colorStyles};
 `;
 
 const StyledOutboundLink = styled(OutboundLink)`
+  border-radius: ${p => p.theme.borderRadii.md};
+
   ${colorStyles};
 `;
 
+const StyledExternalIcon = styled(StyledBaseIcon)`
+  margin-bottom: -0.085em;
+  padding-left: 0.25em;
+  box-sizing: content-box;
+  width: 0.85em;
+  height: 0.85em;
+`;
+
 export const Link = ({ children, to, activeClassName, ...props }: ILink) => {
   const internal = /^\/(?!\/)/u.test(to);
 
@@ -63,16 +76,33 @@ export const Link = ({ children, to, activeClassName, ...props }: ILink) => {
   }
 
   return (
-    <StyledOutboundLink href={to} {...props}>
-      {children}
+    <StyledOutboundLink href={to} rel="noopener noreferrer" target="_blank" {...props}>
+      <span
+        css={`
+          display: inline-block;
+        `}
+      >
+        {children}
+      </span>
+      <StyledExternalIcon>
+        <NewWindowIcon />
+      </StyledExternalIcon>
     </StyledOutboundLink>
   );
 };
 
+const colorOptions = {
+  hue: 'primaryHue',
+  dark: { shade: 500 },
+  light: { shade: 700 }
+};
+
 export const StyledNavigationLink = styled(Link).attrs(p => ({
   activeClassName: p.activeClassName || 'is-current'
 }))`
-  border-radius: ${p => p.theme.borderRadii.md};
+  transition:
+    background-color 0.25s ease-in-out,
+    color 0.25s ease-in-out;
   padding: ${p => p.theme.space.base * 1.5}px ${p => p.theme.space.xs};
   color: ${({ theme }) => getColor({ variable: 'foreground.default', theme })};
 
@@ -84,16 +114,31 @@ export const StyledNavigationLink = styled(Link).attrs(p => ({
   }
 
   &.is-current {
-    background-color: ${p => getColorV8('grey', 800, p.theme, 0.1)};
+    background-color: ${p =>
+      getColor({
+        theme: p.theme,
+        ...colorOptions,
+        transparency: p.theme.opacity[200]
+      })};
   }
 
   &:hover {
-    background-color: ${p => getColorV8('grey', 800, p.theme, 0.05)};
+    background-color: ${p =>
+      getColor({
+        theme: p.theme,
+        ...colorOptions,
+        transparency: p.theme.opacity[100]
+      })};
   }
 
   ${props => focusStyles({ theme: props.theme })}
 
   &:active {
-    background-color: ${p => getColorV8('grey', 800, p.theme, 0.2)};
+    background-color: ${p =>
+      getColor({
+        theme: p.theme,
+        ...colorOptions,
+        transparency: p.theme.opacity[300]
+      })};
   }
 `;
diff --git a/src/layouts/Root/index.tsx b/src/layouts/Root/index.tsx
index a68b104d1..ac52820d8 100644
--- a/src/layouts/Root/index.tsx
+++ b/src/layouts/Root/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { PropsWithChildren, useEffect, useLayoutEffect, useState } from 'react';
-import { css } from 'styled-components';
+import { createGlobalStyle, css } from 'styled-components';
 import { getColor } from '@zendeskgarden/react-theming';
 import { GlobalAlert } from '@zendeskgarden/react-notifications';
 import { Anchor } from '@zendeskgarden/react-buttons';
@@ -19,6 +19,12 @@ interface IRootLayoutProps extends PropsWithChildren {
   path?: string;
 }
 
+const GlobalStyle = createGlobalStyle`
+  html {
+    background-color: ${p => getColor({ theme: p.theme, variable: 'background.default' })};
+  }
+`;
+
 const RootLayout: React.FC<IRootLayoutProps> = ({ children, hasSkipNav = true, path }) => {
   const [isGlobalAlertVisible, setIsGlobalAlertVisible] = useState(true);
 
@@ -41,52 +47,55 @@ const RootLayout: React.FC<IRootLayoutProps> = ({ children, hasSkipNav = true, p
   }, [isGlobalAlertVisible]);
 
   return (
-    <div
-      css={css`
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-        color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })};
-      `}
-    >
-      {!!isGlobalAlertVisible && (
-        <GlobalAlert type="info">
-          <GlobalAlert.Content>
-            <GlobalAlert.Title>Garden 9 is now available.</GlobalAlert.Title>
-            The website has been updated to the latest major version.{' '}
-            <Anchor href="/components/versions">View previous versions</Anchor>
-          </GlobalAlert.Content>
-          <GlobalAlert.Close
-            aria-label="Close v9 alert"
-            onClick={() => {
-              setIsGlobalAlertVisible(false);
-            }}
-          />
-        </GlobalAlert>
-      )}
-      {!!hasSkipNav && (
-        <SkipNav
-          targetId="main-content"
-          zIndex={2}
-          css={css`
-            top: ${p => headerHeight(p.theme) / 2}px;
-            box-shadow: ${p => headerBoxShadow(p.theme)};
-          `}
-        >
-          Skip to main content
-        </SkipNav>
-      )}
-      <Header />
-      <main
-        css={`
-          flex-grow: 1;
-          flex-shrink: 1;
+    <>
+      <GlobalStyle />
+      <div
+        css={css`
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+          color: ${p => getColor({ theme: p.theme, variable: 'foreground.default' })};
         `}
       >
-        {children}
-      </main>
-      <Footer path={path} />
-    </div>
+        {!!isGlobalAlertVisible && (
+          <GlobalAlert type="info">
+            <GlobalAlert.Content>
+              <GlobalAlert.Title>Garden 9 is now available.</GlobalAlert.Title>
+              The website has been updated to the latest major version.{' '}
+              <Anchor href="/components/versions">View previous versions</Anchor>
+            </GlobalAlert.Content>
+            <GlobalAlert.Close
+              aria-label="Close v9 alert"
+              onClick={() => {
+                setIsGlobalAlertVisible(false);
+              }}
+            />
+          </GlobalAlert>
+        )}
+        {!!hasSkipNav && (
+          <SkipNav
+            targetId="main-content"
+            zIndex={5}
+            css={css`
+              top: ${p => headerHeight(p.theme) / 2}px;
+              box-shadow: ${p => headerBoxShadow(p.theme)};
+            `}
+          >
+            Skip to main content
+          </SkipNav>
+        )}
+        <Header />
+        <main
+          css={`
+            flex-grow: 1;
+            flex-shrink: 1;
+          `}
+        >
+          {children}
+        </main>
+        <Footer path={path} />
+      </div>
+    </>
   );
 };
 
diff --git a/src/layouts/Sidebar/components/DesktopSidebar.tsx b/src/layouts/Sidebar/components/DesktopSidebar.tsx
index 479ec71eb..0c3454da1 100644
--- a/src/layouts/Sidebar/components/DesktopSidebar.tsx
+++ b/src/layouts/Sidebar/components/DesktopSidebar.tsx
@@ -8,11 +8,12 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { useLocation } from '@reach/router';
-import { getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { ISidebarSection } from '..';
 import { StyledNavigationLink } from 'layouts/Root/components/StyledNavigationLink';
 import { StyledSectionHeader } from 'layouts/Home/components/SectionCallout';
 import { NavItemTitle } from './NavItemTitle';
+import { headerBoxShadow } from 'layouts/Root/components/Header';
 
 const StyledSidebarLink = styled(StyledNavigationLink)`
   display: block;
@@ -32,7 +33,6 @@ export const DesktopSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideb
       <StyledSectionHeader
         css={css`
           margin-bottom: ${p => p.theme.space.xxs};
-          color: ${p => getColorV8('kale', 600, p.theme)};
         `}
       >
         {section.title}
@@ -93,7 +93,7 @@ export const DesktopSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideb
     <nav
       aria-label="Primary"
       css={css`
-        background-color: ${p => p.theme.palette.tofu};
+        background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
         padding: ${p => p.theme.space.lg} ${p => p.theme.space.md} ${p => p.theme.space.lg} 0;
         min-width: 220px;
 
@@ -111,7 +111,8 @@ export const DesktopSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideb
           position: absolute;
           inset: 0 50% 0 0;
           z-index: -1;
-          background-color: ${p => p.theme.palette.tofu};
+          box-shadow: ${p => headerBoxShadow(p.theme)};
+          background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
 
           ${p => mediaQuery('down', 'md', p.theme)} {
             display: none;
diff --git a/src/layouts/Sidebar/components/MobileSidebar.tsx b/src/layouts/Sidebar/components/MobileSidebar.tsx
index 1b5a946e7..d2f76e87a 100644
--- a/src/layouts/Sidebar/components/MobileSidebar.tsx
+++ b/src/layouts/Sidebar/components/MobileSidebar.tsx
@@ -8,7 +8,7 @@
 import React, { useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import { useLocation } from '@reach/router';
-import { getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { StyledNavigationLink } from 'layouts/Root/components/StyledNavigationLink';
 import { StyledSectionHeader } from 'layouts/Home/components/SectionCallout';
 import { ISidebarSection } from '..';
@@ -23,10 +23,12 @@ export const MobileSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideba
   const { pathname } = useLocation();
 
   useEffect(() => {
-    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
+    document.querySelector('header')!.style.position = 'absolute';
 
     return () => {
-      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
+      document.querySelector('header')!.style.position = '';
     };
   }, []);
 
@@ -42,13 +44,7 @@ export const MobileSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideba
           margin-bottom: ${p => p.theme.space.xxs};
         `}
       >
-        <StyledSectionHeader
-          css={css`
-            color: ${p => getColorV8('kale', 600, p.theme)};
-          `}
-        >
-          {section.title}
-        </StyledSectionHeader>
+        <StyledSectionHeader>{section.title}</StyledSectionHeader>
       </li>
       {section.items?.map(item => {
         const isExpanded = (item.items || []).some(nestedItem => nestedItem.id === pathname);
@@ -98,7 +94,7 @@ export const MobileSidebar: React.FC<{ sidebar: ISidebarSection[] }> = ({ sideba
       css={css`
         position: fixed;
         inset: ${p => p.theme.space.base * 20}px 0 0 0;
-        background-color: ${p => p.theme.palette.tofu};
+        background-color: ${p => getColor({ theme: p.theme, variable: 'background.subtle' })};
         padding: ${p => p.theme.space.lg} ${p => p.theme.space.xxl};
         overflow: scroll;
 
diff --git a/src/layouts/Sidebar/index.tsx b/src/layouts/Sidebar/index.tsx
index 665ffcd21..a620af99a 100644
--- a/src/layouts/Sidebar/index.tsx
+++ b/src/layouts/Sidebar/index.tsx
@@ -7,7 +7,8 @@
 
 import React, { PropsWithChildren, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { getColor, getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
+import { IconButton } from '@zendeskgarden/react-buttons';
 import { ReactComponent as OverflowStroke } from '@zendeskgarden/svg-icons/src/16/overflow-vertical-stroke.svg';
 import { ReactComponent as CloseStroke } from '@zendeskgarden/svg-icons/src/16/x-stroke.svg';
 import MaxWidthLayout from 'layouts/MaxWidth';
@@ -20,7 +21,7 @@ export interface ISidebarSection {
   items?: ISidebarSection[];
 }
 
-const StyledMobileNavButton = styled.button`
+const StyledMobileNavButton = styled(p => <IconButton isNeutral isPrimary {...p} />)`
   display: none;
   position: fixed;
   right: ${p => p.theme.space.md};
@@ -28,21 +29,6 @@ const StyledMobileNavButton = styled.button`
   align-items: center;
   justify-content: center;
   z-index: 1;
-  border: ${p => p.theme.borders.sm}
-    ${({ theme }) => getColor({ hue: 'white', transparency: 0.2, theme })};
-  border-radius: 100px;
-  background-color: ${p => getColorV8('kale', 800, p.theme)};
-  padding: ${p => p.theme.space.xs};
-  color: ${({ theme }) => getColor({ hue: 'white', theme })};
-
-  &:focus {
-    outline: none;
-  }
-
-  & > svg {
-    width: ${p => p.theme.iconSizes.lg};
-    height: ${p => p.theme.iconSizes.lg};
-  }
 
   ${p => mediaQuery('down', 'md', p.theme)} {
     display: flex;
diff --git a/src/layouts/Titled/components/Subtitle.tsx b/src/layouts/Titled/components/Subtitle.tsx
index c1aaf3bf0..ffd157fa8 100644
--- a/src/layouts/Titled/components/Subtitle.tsx
+++ b/src/layouts/Titled/components/Subtitle.tsx
@@ -6,11 +6,11 @@
  */
 
 import styled from 'styled-components';
-import { getColorV8 } from '@zendeskgarden/react-theming';
+import { getColor } from '@zendeskgarden/react-theming';
 import { LG } from '@zendeskgarden/react-typography';
 
 export const Subtitle = styled(LG).attrs({ tag: 'p' })`
   max-width: 540px;
-  color: ${p => getColorV8('neutralHue', 600, p.theme)};
+  color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
   font-size: ${p => p.theme.space.base * 4}px;
 `;
diff --git a/src/layouts/Titled/components/TOC.tsx b/src/layouts/Titled/components/TOC.tsx
index a2f507660..dad993844 100644
--- a/src/layouts/Titled/components/TOC.tsx
+++ b/src/layouts/Titled/components/TOC.tsx
@@ -58,11 +58,7 @@ const StyledAnchor = styled(Anchor)<{ isCurrent: boolean }>`
   display: block;
   position: relative;
   transition: none;
-  margin: ${({
-    theme: {
-      space: { xxs }
-    }
-  }) => `${xxs} 0 ${xxs} 0`};
+  margin: ${p => `${p.theme.space.xxs} 0 ${p.theme.space.xxs} 0`};
   text-align: left;
 
   &::before {
@@ -70,7 +66,7 @@ const StyledAnchor = styled(Anchor)<{ isCurrent: boolean }>`
     left: 0;
     border-left: ${p =>
       p.isCurrent &&
-      `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'foreground.default' })}`};
+      `${p.theme.borders.sm} ${getColor({ theme: p.theme, variable: 'border.emphasis' })}`};
     height: 100%;
     content: '';
   }
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index fdbdf900d..bcbdb1e4b 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -6,17 +6,34 @@
  */
 
 import React from 'react';
-import { css } from 'styled-components';
+import styled, { css } from 'styled-components';
 import { SEO } from 'components/SEO';
 import { useStaticQuery, graphql, HeadProps } from 'gatsby';
 import { GatsbyImage } from 'gatsby-plugin-image';
 import RootLayout from 'layouts/Root';
 import MaxWidthLayout from 'layouts/MaxWidth';
-import { getColorV8, mediaQuery } from '@zendeskgarden/react-theming';
+import { getColor, mediaQuery } from '@zendeskgarden/react-theming';
 import { Grid } from '@zendeskgarden/react-grid';
 import { XL, LG } from '@zendeskgarden/react-typography';
 import { StyledH1 } from 'components/MarkdownProvider/components/Typography';
 
+const StyledBackground = styled.div`
+  position: relative;
+  margin-right: ${p => p.theme.space.base * 5}px;
+  margin-bottom: ${p => p.theme.space.base * 5}px;
+  background-color: ${p =>
+    getColor({
+      theme: p.theme,
+      dark: { hue: 'neutralHue', shade: 900 },
+      light: { hue: 'chromeHue', shade: 200 }
+    })};
+
+  & > div {
+    top: ${p => p.theme.space.base * 5}px;
+    left: ${p => p.theme.space.base * 5}px;
+  }
+`;
+
 export const Head = (props: HeadProps) => (
   <SEO {...props} pageContext={{ frontmatter: { title: 'Not found' } }} />
 );
@@ -50,18 +67,20 @@ const NotFoundPage: React.FC = () => {
         >
           <Grid.Row justifyContent="center">
             <Grid.Col sm="auto">
-              <GatsbyImage
-                image={notFoundImage.childFile.childImageSharp.gatsbyImageData}
-                alt=""
-                css={css`
-                  ${p => mediaQuery('down', 'xs', p.theme)} {
-                    /* stylelint-disable declaration-no-important */
-                    width: 112px !important;
-                    height: 112px !important;
-                  }
-                `}
-                imgStyle={{ maxWidth: '100%', maxHeight: '100%' }}
-              />
+              <StyledBackground>
+                <GatsbyImage
+                  image={notFoundImage.childFile.childImageSharp.gatsbyImageData}
+                  alt=""
+                  css={css`
+                    ${p => mediaQuery('down', 'xs', p.theme)} {
+                      /* stylelint-disable declaration-no-important */
+                      width: 112px !important;
+                      height: 112px !important;
+                    }
+                  `}
+                  imgStyle={{ maxWidth: '100%', maxHeight: '100%' }}
+                />
+              </StyledBackground>
             </Grid.Col>
             <Grid.Col sm={5}>
               <div
@@ -78,7 +97,7 @@ const NotFoundPage: React.FC = () => {
                     margin-top: ${p => p.theme.space.md};
                     margin-bottom: ${p => p.theme.space.xs};
                     text-transform: uppercase;
-                    color: ${p => getColorV8('neutralHue', 600, p.theme)};
+                    color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
                     font-size: ${p => p.theme.space.base * 4}px;
 
                     ${p => mediaQuery('down', 'xs', p.theme)} {
@@ -102,7 +121,7 @@ const NotFoundPage: React.FC = () => {
                 </StyledH1>
                 <XL
                   css={css`
-                    color: ${p => getColorV8('neutralHue', 600, p.theme)};
+                    color: ${p => getColor({ theme: p.theme, variable: 'foreground.subtle' })};
 
                     ${p => mediaQuery('down', 'xs', p.theme)} {
                       line-height: ${p => p.theme.lineHeights.md};
diff --git a/src/pages/components/utilities.mdx b/src/pages/components/utilities.mdx
index c0709caaf..ff3b38593 100644
--- a/src/pages/components/utilities.mdx
+++ b/src/pages/components/utilities.mdx
@@ -119,8 +119,8 @@ Garden's themed [Grid](/components/grid).
 ### menuStyles
 
 CSS for a menu at the given position. Apply these styles to an absolutely
-positioned wrapper (e.g. via [Popper](https://popper.js.org/)) which contains
-a child menu component.
+positioned wrapper (for example via [Floating UI](https://floating-ui.com/))
+which contains a child menu component.
 
 <PropSheet components={COMPONENTS} componentName="menuStyles" headerName="Parameter" />
 
diff --git a/src/pages/patterns/filters.mdx b/src/pages/patterns/filters.mdx
index f01f52530..69b2c4d75 100644
--- a/src/pages/patterns/filters.mdx
+++ b/src/pages/patterns/filters.mdx
@@ -63,7 +63,7 @@ Filter parameters should be surfaced as [Tags](/components/tags) above the datas
 The Tag content contains the filter parameter category in Bold, followed by the user's selection in Regular weight.
 The number of results after Filtering should be visible to users where possible.
 The number of resulting data items should be displayed above the table below the filtering tags.
-For guidance on formatting loading states, see our [Tables Basic Formatting pattern](/pattern/tables).
+For guidance on formatting loading states, see our [Tables Basic Formatting pattern](/patterns/tables).
 
 ## Selection methods
 
diff --git a/utils/color-scheme.js b/utils/color-scheme.js
new file mode 100644
index 000000000..8e7d74687
--- /dev/null
+++ b/utils/color-scheme.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+(() => {
+  /* eslint-disable n/no-unsupported-features/node-builtins */
+  const colorScheme = window.localStorage.getItem('color-scheme');
+  let isDark;
+
+  if (['dark', 'light', 'system'].includes(colorScheme)) {
+    isDark =
+      colorScheme === 'dark' ||
+      (colorScheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+  } else {
+    window.localStorage.setItem('color-scheme', 'system');
+    isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  if (isDark) {
+    document.documentElement.style.backgroundColor = '#151a1e';
+  }
+})();