diff --git a/.changeset/small-boxes-live.md b/.changeset/small-boxes-live.md
new file mode 100644
index 000000000..6b59d635b
--- /dev/null
+++ b/.changeset/small-boxes-live.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Updates to support new ToggleSwitch visual design
diff --git a/data/colors/themes/dark_high_contrast.ts b/data/colors/themes/dark_high_contrast.ts
index d520c2b3f..d457454be 100644
--- a/data/colors/themes/dark_high_contrast.ts
+++ b/data/colors/themes/dark_high_contrast.ts
@@ -1,4 +1,4 @@
-import {alpha, get, merge} from '../../../src/utils-v1'
+import {alpha, get, merge, darken} from '../../../src/utils-v1'
 import dark from './dark'
 
 const scale = {
@@ -217,10 +217,21 @@ const exceptions = {
   },
 
   switchTrack: {
-    border: get('border.default'),
+    bg: get('neutral.emphasis'),
+    hoverBg: darken(get('neutral.emphasis'), 0.05),
+    activeBg: darken(get('neutral.emphasis'), 0.08),
+    fg: get('fg.onEmphasis'),
 
     checked: {
-      border: get('scale.blue.5'),
+      bg: get('accent.emphasis'),
+    }
+  },
+
+  switchKnob: {
+    border: get('scale.gray.4'),
+
+    checked: {
+      border: get('accent.emphasis'),
     }
   },
 
diff --git a/data/colors/themes/light_high_contrast.ts b/data/colors/themes/light_high_contrast.ts
index aadf7d0aa..63aa865b2 100644
--- a/data/colors/themes/light_high_contrast.ts
+++ b/data/colors/themes/light_high_contrast.ts
@@ -1,4 +1,4 @@
-import {alpha, get, merge} from '../../../src/utils-v1'
+import {alpha, get, merge, lighten} from '../../../src/utils-v1'
 import light from './light'
 
 const scale = {
@@ -222,12 +222,24 @@ const exceptions = {
     }
   },
   pageHeaderBg: get('canvas.default'),
+
   switchTrack: {
-    bg: get('scale.white'),
+    bg: get('neutral.emphasis'),
+    hoverBg: lighten(get('neutral.emphasis'), 0.03),
+    activeBg: lighten(get('neutral.emphasis'), 0.05),
+    fg: get('fg.onEmphasis'),
+    disabledFg: get('fg.onEmphasis'),
+
+    checked: {
+      fg: get('fg.onEmphasis'),
+    }
+  },
+
+  switchKnob: {
     border: get('border.default'),
 
     checked: {
-      border: get('scale.blue.5'),
+      border: get('accent.emphasis'),
     }
   },
 
diff --git a/data/colors/vars/component_dark.ts b/data/colors/vars/component_dark.ts
index 0ab3dfb56..63bafdc03 100644
--- a/data/colors/vars/component_dark.ts
+++ b/data/colors/vars/component_dark.ts
@@ -1,4 +1,4 @@
-import {alpha, darken, get} from '../../../src/utils-v1'
+import {alpha, darken, lighten, get} from '../../../src/utils-v1'
 
 export default {
   avatar: {
@@ -158,28 +158,41 @@ export default {
   },
 
   switchTrack: {
-    bg: get('scale.black'),
-    border: get('scale.gray.4'),
+    bg: get('neutral.subtle'),
+    hoverBg: lighten(get('neutral.subtle'), 0.25),
+    activeBg: get('neutral.muted'),
+    disabledBg: get('scale.gray.7'),
+    fg: get('fg.muted'),
+    disabledFg: get('scale.black'),
+    border: 'transparent',  // TODO: remove this in next major release
 
     checked: {
       bg: alpha(get('scale.blue.5'), 0.35),
       hoverBg: alpha(get('scale.blue.5'), 0.5),
       activeBg: alpha(get('scale.blue.5'), 0.65),
-      border: get('scale.blue.3'),
+      fg: get('fg.onEmphasis'),
+      disabledFg: get('scale.black'),
+      border: 'transparent',  // TODO: remove this in next major release
     }
   },
 
   switchKnob: {
+    bg: get('canvas.default'),
+    border: '#606771', // control contrast border https://github.com/primer/primitives/pull/485
+    disabledBg: get('canvas.subtle'),
+
     checked: {
-      bg: get('scale.blue.5'),
-      disabledBg: get('scale.gray.5'),
+      bg: get('canvas.default'), // TODO: remove this in next major release
+      disabledBg: get('canvas.subtle'), // TODO: remove this in next major release
+      border: alpha(get('scale.blue.5'), 0.35),
     }
   },
 
   segmentedControl: {
-    bg: get('scale.gray.8'),
+    bg: get('neutral.subtle'),
 
     button: {
+      bg: get('canvas.default'),
       hover: {
         bg: get('scale.gray.6'),
       },
diff --git a/data/colors/vars/component_light.ts b/data/colors/vars/component_light.ts
index 68a527bee..abe761d62 100644
--- a/data/colors/vars/component_light.ts
+++ b/data/colors/vars/component_light.ts
@@ -160,20 +160,32 @@ export default {
 
   switchTrack: {
     bg: get('scale.gray.1'),
-    border: get('scale.gray.3'),
+    hoverBg: darken(get('scale.gray.1'), 0.03),
+    activeBg: darken(get('scale.gray.1'), 0.05),
+    disabledBg: get('scale.gray.4'),
+    fg: get('fg.muted'),
+    disabledFg: get('fg.onEmphasis'),
+    border: 'transparent', // TODO: remove this in next major release
 
     checked: {
-      bg: get('scale.blue.0'),
-      hoverBg: get('scale.blue.1'),
-      activeBg: get('scale.blue.2'),
-      border: get('scale.blue.3'),
+      bg: get('accent.emphasis'),
+      hoverBg: '#0860CA', // accent-emphasis + scale-blue-7 @ 20% opacity
+      activeBg: '#0757BA', // accent-emphasis + scale-blue-7 @ 20% opacity
+      fg: get('fg.onEmphasis'),
+      disabledFg: get('fg.onEmphasis'),
+      border: 'transparent', // TODO: remove this in next major release
     }
   },
 
   switchKnob: {
+    bg: get('canvas.default'),
+    disabledBg: get('canvas.subtle'),
+    border: '#858F99', // control contrast border https://github.com/primer/primitives/pull/485
+
     checked: {
-      bg: get('scale.blue.5'),
-      disabledBg: get('scale.gray.5'),
+      bg: get('canvas.default'), // TODO: remove this in next major release
+      disabledBg: get('canvas.subtle'), // TODO: remove this in next major release
+      border: get('accent.emphasis'),
     }
   },
 
@@ -181,6 +193,7 @@ export default {
     bg: get('scale.gray.1'),
 
     button: {
+      bg: get('canvas.default'),
       hover: {
         bg: alpha(get('scale.gray.3'), 0.2),
       },
@@ -190,7 +203,7 @@ export default {
       },
 
       selected: {
-        border: get('scale.gray.5'),
+        border: get('scale.gray.4'),
       },
     },
   },