diff --git a/.changeset/calm-hotels-marry.md b/.changeset/calm-hotels-marry.md
new file mode 100644
index 000000000..2d98b7350
--- /dev/null
+++ b/.changeset/calm-hotels-marry.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Rename role variables
diff --git a/data/colors_v2/vars/deprecated.ts b/data/colors_v2/vars/deprecated.ts
index 475339c88..2c06c9c63 100644
--- a/data/colors_v2/vars/deprecated.ts
+++ b/data/colors_v2/vars/deprecated.ts
@@ -34,7 +34,7 @@ export default {
   border: {
     primary: get('border.default'),
     secondary: get('border.divider'),
-    tertiary: get('neutral.highlighter'),
+    tertiary: get('neutral.muted'),
     overlay: get('border.default'),
     inverse: get('fg.onEmphasis'), // or move to marketing
     info: get('accent.emphasis'),
@@ -48,17 +48,17 @@ export default {
     canvasInverse: get('neutral.emphasis'),
     canvasInset: get('canvas.inset'),
     primary: get('canvas.default'),
-    secondary: get('neutral.muted'),
-    tertiary: get('neutral.muted'),
+    secondary: get('neutral.subtle'),
+    tertiary: get('neutral.subtle'),
     overlay: get('canvas.overlay'),
     backdrop: get('primer.canvas.backdrop'),
-    info: get('accent.muted'),
+    info: get('accent.subtle'),
     infoInverse: get('accent.emphasis'),
-    danger: get('danger.muted'),
+    danger: get('danger.subtle'),
     dangerInverse: get('danger.emphasis'),
-    success: get('success.muted'),
+    success: get('success.subtle'),
     successInverse: get('success.emphasis'),
-    warning: get('warning.muted'),
+    warning: get('warning.subtle'),
     warningInverse: get('warning.emphasis')
   },
   shadow: {
@@ -71,8 +71,8 @@ export default {
       primaryBorder: get('accent.emphasis'),
       primaryText: get('fg.onEmphasis'),
       primaryIcon: get('fg.onEmphasis'),
-      secondaryBg: get('neutral.muted'),
-      secondaryBorder: get('neutral.muted')
+      secondaryBg: get('neutral.subtle'),
+      secondaryBorder: get('neutral.subtle')
     },
 
     selected: {
@@ -91,26 +91,26 @@ export default {
     info: {
       text: get('fg.default'),
       icon: get('accent.fg'),
-      bg: get('accent.muted'),
-      border: get('accent.highlighter')
+      bg: get('accent.subtle'),
+      border: get('accent.muted')
     },
     warn: {
       text: get('fg.default'),
       icon: get('warning.fg'),
-      bg: get('warning.muted'),
-      border: get('warning.highlighter')
+      bg: get('warning.subtle'),
+      border: get('warning.muted')
     },
     error: {
       text: get('fg.default'),
       icon: get('danger.fg'),
-      bg: get('danger.muted'),
-      border: get('danger.highlighter')
+      bg: get('danger.subtle'),
+      border: get('danger.muted')
     },
     success: {
       text: get('fg.default'),
       icon: get('success.fg'),
-      bg: get('success.muted'),
-      border: get('success.highlighter')
+      bg: get('success.subtle'),
+      border: get('success.muted')
     }
   },
   autocomplete: {
@@ -122,50 +122,50 @@ export default {
   },
   counter: {
     text: get('fg.default'),
-    bg: get('neutral.muted'),
+    bg: get('neutral.subtle'),
     primary: {
       text: get('fg.onEmphasis'),
       bg: get('neutral.emphasis')
     },
     secondary: {
       text: get('fg.muted'),
-      bg: get('neutral.muted')
+      bg: get('neutral.subtle')
     }
   },
   box: {
-    blueBorder: get('accent.highlighter'),
-    rowYellowBg: get('warning.muted'),
-    rowBlueBg: get('accent.muted'),
-    headerBlueBg: get('accent.muted'),
-    headerBlueBorder: get('accent.highlighter'),
-    borderInfo: get('accent.highlighter'),
-    bgInfo: get('accent.muted'),
-    borderWarning: get('warning.highlighter'),
-    bgWarning: get('warning.muted')
+    blueBorder: get('accent.muted'),
+    rowYellowBg: get('warning.subtle'),
+    rowBlueBg: get('accent.subtle'),
+    headerBlueBg: get('accent.subtle'),
+    headerBlueBorder: get('accent.muted'),
+    borderInfo: get('accent.muted'),
+    bgInfo: get('accent.subtle'),
+    borderWarning: get('warning.muted'),
+    bgWarning: get('warning.subtle')
   },
   branchName: {
     text: get('fg.muted'),
     icon: get('fg.muted'),
-    bg: get('neutral.muted'),
+    bg: get('neutral.subtle'),
     link: {
       text: get('accent.fg'),
       icon: get('accent.fg'),
-      bg: get('accent.muted')
+      bg: get('accent.subtle')
     }
   },
   markdown: {
-    codeBg: get('neutral.muted'),
+    codeBg: get('neutral.subtle'),
     frameBorder: get('border.default'),
     blockquoteBorder: get('border.default'),
     tableBorder: get('border.default'),
     tableTrBorder: get('border.divider')
   },
   filterItem: {
-    barBg: get('neutral.muted')
+    barBg: get('neutral.subtle')
   },
   hiddenTextExpander: {
-    bg: get('neutral.highlighter'),
-    bgHover: get('accent.highlighter')
+    bg: get('neutral.muted'),
+    bgHover: get('accent.muted')
   },
   dragAndDrop: {
     border: get('border.default')
@@ -190,30 +190,30 @@ export default {
     bg: get('neutral.emphasis')
   },
   searchKeyword: {
-    hl: get('warning.muted')
+    hl: get('warning.subtle')
   },
   filesExplorerIcon: get('accent.fg'),
-  hlAuthorBg: get('accent.muted'),
-  hlAuthorBorder: get('accent.highlighter'),
-  logoSubdued: get('neutral.highlighter'),
-  discussionBorder: get('success.highlighter'),
+  hlAuthorBg: get('accent.subtle'),
+  hlAuthorBorder: get('accent.muted'),
+  logoSubdued: get('neutral.muted'),
+  discussionBorder: get('success.muted'),
   discussionBgSuccess: get('success.emphasis'),
   actionsWorkflowTableStickyBg: get('primer.canvas.sticky'),
   repoLanguageColorBorder: get('primer.border.contrast'),
-  codeSelectionBg: get('accent.highlighter'),
+  codeSelectionBg: get('accent.muted'),
   highlight: {
     text: get('fg.default'),
-    bg: get('warning.muted')
+    bg: get('warning.subtle')
   },
   blob: {
-    lineHighlightBg: get('warning.muted'),
-    lineHighlightBorder: get('warning.highlighter')
+    lineHighlightBg: get('warning.subtle'),
+    lineHighlightBorder: get('warning.muted')
   },
   topicTag: {
     text: get('accent.fg'),
-    bg: get('accent.muted'),
-    hoverBg: get('accent.highlighter'),
-    activeBg: get('accent.muted')
+    bg: get('accent.subtle'),
+    hoverBg: get('accent.muted'),
+    activeBg: get('accent.subtle')
   },
   footerInvertocat: {
     octicon: get('fg.inactive'),
@@ -258,25 +258,25 @@ export default {
     contrastBg: get('canvas.inset'),
     border: get('border.default'),
     shadow: get('primer.shadow.inset'),
-    disabledBg: get('neutral.muted'),
+    disabledBg: get('neutral.subtle'),
     disabledBorder: get('border.default'),
     warningBorder: get('warning.emphasis'),
     errorBorder: get('danger.emphasis'),
     tooltip: {
       success: {
         text: get('fg.default'),
-        bg: get('success.muted'),
-        border: get('success.highlighter')
+        bg: get('success.subtle'),
+        border: get('success.muted')
       },
       warning: {
         text: get('fg.default'),
-        bg: get('warning.muted'),
-        border: get('warning.highlighter')
+        bg: get('warning.subtle'),
+        border: get('warning.muted')
       },
       error: {
         text: get('fg.default'),
-        bg: get('danger.muted'),
-        border: get('danger.highlighter')
+        bg: get('danger.subtle'),
+        border: get('danger.muted')
       }
     }
   },
@@ -319,14 +319,14 @@ export default {
   },
   timeline: {
     text: get('fg.muted'),
-    badgeBg: get('neutral.muted'),
+    badgeBg: get('neutral.subtle'),
     badgeSuccessBorder: unset,
     targetBadgeBorder: get('accent.emphasis'),
-    targetBadgeShadow: get('accent.highlighter')
+    targetBadgeShadow: get('accent.muted')
   },
   diffstat: {
-    neutralBg: get('neutral.highlighter'),
-    neutralBorder: get('neutral.highlighter'),
+    neutralBg: get('neutral.muted'),
+    neutralBorder: get('neutral.muted'),
     deletionBg: get('danger.emphasis'),
     deletionBorder: get('danger.emphasis'),
     additionBg: get('success.emphasis'),
@@ -335,18 +335,18 @@ export default {
   diff: {
     addition: {
       text: get('success.fg'),
-      bg: get('success.muted'),
-      border: get('success.highlighter')
+      bg: get('success.subtle'),
+      border: get('success.muted')
     },
     deletion: {
       text: get('danger.fg'),
-      bg: get('danger.muted'),
-      border: get('danger.highlighter')
+      bg: get('danger.subtle'),
+      border: get('danger.muted')
     },
     change: {
       text: get('warning.fg'),
-      bg: get('warning.muted'),
-      border: get('warning.highlighter')
+      bg: get('warning.subtle'),
+      border: get('warning.muted')
     }
   },
   mergeBox: {
@@ -385,7 +385,7 @@ export default {
   },
   underlinenav: {
     border: unset,
-    borderHover: get('neutral.highlighter'),
+    borderHover: get('neutral.muted'),
     borderActive: get('primer.border.active'),
     text: get('fg.default'),
     textHover: get('fg.default'),
@@ -394,7 +394,7 @@ export default {
     iconHover: get('fg.inactive'),
     iconActive: get('fg.default'),
     counterText: get('fg.default'),
-    counterBg: get('neutral.muted')
+    counterBg: get('neutral.subtle')
   },
   selectMenu: {
     borderSecondary: get('border.divider'),
@@ -439,25 +439,25 @@ export default {
     addition: {
       numText: get('success.fg'),
       numHoverText: get('fg.default'),
-      numBg: get('success.highlighter'),
-      lineBg: get('success.muted'),
-      wordBg: get('success.highlighter')
+      numBg: get('success.muted'),
+      lineBg: get('success.subtle'),
+      wordBg: get('success.muted')
     },
     deletion: {
       numText: get('danger.fg'),
       numHoverText: get('fg.default'),
-      numBg: get('danger.highlighter'),
-      lineBg: get('danger.muted'),
-      wordBg: get('danger.highlighter')
+      numBg: get('danger.muted'),
+      lineBg: get('danger.subtle'),
+      wordBg: get('danger.muted')
     },
     hunk: {
       text: get('fg.muted'),
-      numBg: get('accent.highlighter'),
-      lineBg: get('accent.muted')
+      numBg: get('accent.muted'),
+      lineBg: get('accent.subtle')
     },
-    emptyBlockBg: get('neutral.muted'),
-    selectedLineHighlightBg: get('warning.muted'),
-    selectedLineHighlightBorder: get('warning.highlighter'),
+    emptyBlockBg: get('neutral.subtle'),
+    selectedLineHighlightBg: get('warning.subtle'),
+    selectedLineHighlightBorder: get('warning.muted'),
     expander: {
       icon: get('fg.muted'),
       hoverIcon: get('fg.onEmphasis'),
@@ -470,8 +470,8 @@ export default {
     }
   },
   introShelf: {
-    gradientLeft: get('accent.muted'),
-    gradientRight: get('success.muted'),
+    gradientLeft: get('accent.subtle'),
+    gradientRight: get('success.subtle'),
     gradientIn: get('canvas.default'),
     gradientOut: alpha(get('scale.white'), 0)
   }
diff --git a/data/colors_v2/vars/global_dark.ts b/data/colors_v2/vars/global_dark.ts
index 7f4f3fcd0..5bbde06a1 100644
--- a/data/colors_v2/vars/global_dark.ts
+++ b/data/colors_v2/vars/global_dark.ts
@@ -27,50 +27,50 @@ export default {
   neutral: {
     fg: get('scale.gray.4'),
     emphasis: get('scale.gray.5'),
-    highlighter: alpha(get('scale.gray.4'), 0.4),
-    muted: alpha(get('scale.gray.4'), 0.1)
+    muted: alpha(get('scale.gray.4'), 0.4),
+    subtle: alpha(get('scale.gray.4'), 0.1)
   },
   accent: {
     fg: get('scale.blue.4'),
     emphasis: get('scale.blue.5'),
-    highlighter: alpha(get('scale.blue.4'), 0.4),
-    muted: alpha(get('scale.blue.4'), 0.1)
+    muted: alpha(get('scale.blue.4'), 0.4),
+    subtle: alpha(get('scale.blue.4'), 0.1)
   },
   success: {
     fg: get('scale.green.4'),
     emphasis: get('scale.green.5'),
-    highlighter: alpha(get('scale.green.4'), 0.4),
-    muted: alpha(get('scale.green.4'), 0.1)
+    muted: alpha(get('scale.green.4'), 0.4),
+    subtle: alpha(get('scale.green.4'), 0.1)
   },
   warning: {
     fg: get('scale.yellow.4'),
     emphasis: get('scale.yellow.5'),
-    highlighter: alpha(get('scale.yellow.4'), 0.4),
-    muted: alpha(get('scale.yellow.4'), 0.1)
+    muted: alpha(get('scale.yellow.4'), 0.4),
+    subtle: alpha(get('scale.yellow.4'), 0.1)
   },
   severe: {
     fg: get('scale.orange.4'),
     emphasis: get('scale.orange.5'),
-    highlighter: alpha(get('scale.orange.4'), 0.4),
-    muted: alpha(get('scale.orange.4'), 0.1)
+    muted: alpha(get('scale.orange.4'), 0.4),
+    subtle: alpha(get('scale.orange.4'), 0.1)
   },
   danger: {
     fg: get('scale.red.4'),
     emphasis: get('scale.red.5'),
-    highlighter: alpha(get('scale.red.4'), 0.4),
-    muted: alpha(get('scale.red.4'), 0.1)
+    muted: alpha(get('scale.red.4'), 0.4),
+    subtle: alpha(get('scale.red.4'), 0.1)
   },
   done: {
     fg: get('scale.purple.4'),
     emphasis: get('scale.purple.5'),
-    highlighter: alpha(get('scale.purple.4'), 0.4),
-    muted: alpha(get('scale.purple.4'), 0.1)
+    muted: alpha(get('scale.purple.4'), 0.4),
+    subtle: alpha(get('scale.purple.4'), 0.1)
   },
   sponsors: {
     fg: get('scale.pink.4'),
     emphasis: get('scale.pink.5'),
-    highlighter: alpha(get('scale.pink.4'), 0.4),
-    muted: alpha(get('scale.pink.4'), 0.1)
+    muted: alpha(get('scale.pink.4'), 0.4),
+    subtle: alpha(get('scale.pink.4'), 0.1)
   },
 
   // Only meant for Primer components
diff --git a/data/colors_v2/vars/global_light.ts b/data/colors_v2/vars/global_light.ts
index 96108baf5..c0d871581 100644
--- a/data/colors_v2/vars/global_light.ts
+++ b/data/colors_v2/vars/global_light.ts
@@ -27,50 +27,50 @@ export default {
   neutral: {
     fg: get('scale.gray.5'),
     emphasis: get('scale.gray.5'),
-    highlighter: get('scale.gray.3'),
-    muted: get('scale.gray.1')
+    muted: get('scale.gray.3'),
+    subtle: get('scale.gray.1')
   },
   accent: {
     fg: get('scale.blue.5'),
     emphasis: get('scale.blue.5'),
-    highlighter: get('scale.blue.2'),
-    muted: get('scale.blue.0')
+    muted: get('scale.blue.2'),
+    subtle: get('scale.blue.0')
   },
   success: {
     fg: get('scale.green.6'),
     emphasis: get('scale.green.5'),
-    highlighter: get('scale.green.3'),
-    muted: get('scale.green.1')
+    muted: get('scale.green.3'),
+    subtle: get('scale.green.1')
   },
   warning: {
     fg: get('scale.yellow.8'),
     emphasis: get('scale.yellow.5'),
-    highlighter: get('scale.yellow.3'),
-    muted: get('scale.yellow.2')
+    muted: get('scale.yellow.3'),
+    subtle: get('scale.yellow.2')
   },
   severe: {
     fg: get('scale.orange.5'),
     emphasis: get('scale.orange.5'),
-    highlighter: get('scale.orange.3'),
-    muted: get('scale.orange.1')
+    muted: get('scale.orange.3'),
+    subtle: get('scale.orange.1')
   },
   danger: {
     fg: get('scale.red.6'),
     emphasis: get('scale.red.5'),
-    highlighter: get('scale.red.2'),
-    muted: get('scale.red.0')
+    muted: get('scale.red.2'),
+    subtle: get('scale.red.0')
   },
   done: {
     fg: get('scale.purple.5'),
     emphasis: get('scale.purple.5'),
-    highlighter: get('scale.purple.2'),
-    muted: get('scale.purple.0')
+    muted: get('scale.purple.2'),
+    subtle: get('scale.purple.0')
   },
   sponsors: {
     fg: get('scale.pink.5'),
     emphasis: get('scale.pink.5'),
-    highlighter: get('scale.pink.2'),
-    muted: get('scale.pink.0')
+    muted: get('scale.pink.2'),
+    subtle: get('scale.pink.0')
   },
 
   // Only meant to be used by Primer components
diff --git a/data/colors_v2/vars/product_dark.ts b/data/colors_v2/vars/product_dark.ts
index 293d579cc..09e4e6a6a 100644
--- a/data/colors_v2/vars/product_dark.ts
+++ b/data/colors_v2/vars/product_dark.ts
@@ -74,8 +74,8 @@ export default {
     guttermarkerSubtleText: get('fg.inactive'),
     linenumberText: get('fg.muted'),
     cursor: get('fg.default'),
-    selectionBg: get('accent.muted'),
-    activelineBg: get('neutral.muted'),
+    selectionBg: get('accent.subtle'),
+    activelineBg: get('neutral.subtle'),
     matchingbracketText: get('fg.default'),
     linesBg: get('canvas.default'),
     syntax: {
@@ -98,7 +98,7 @@ export default {
     textLink: get('accent.fg'),
     btnIcon: get('fg.muted'),
     btnHoverIcon: get('fg.default'),
-    btnHoverBg: get('neutral.muted'),
+    btnHoverBg: get('neutral.subtle'),
     inputText: get('fg.muted'),
     inputPlaceholderText: get('fg.inactive'),
     inputFocusText: get('fg.default'),
@@ -108,10 +108,10 @@ export default {
     dropdownBg: get('canvas.overlay'),
     dropdownBorder: get('border.default'),
     dropdownHoverText: get('fg.default'),
-    dropdownHoverBg: get('neutral.muted'),
+    dropdownHoverBg: get('neutral.subtle'),
     dropdownBtnHoverText: get('fg.default'),
-    dropdownBtnHoverBg: get('neutral.muted'),
-    scrollbarThumbBg: get('neutral.highlighter'),
+    dropdownBtnHoverBg: get('neutral.subtle'),
+    scrollbarThumbBg: get('neutral.muted'),
     headerLabelText: get('fg.muted'),
     headerLabelOpenText: get('fg.default'),
     headerBorder: get('border.divider'),
@@ -119,15 +119,15 @@ export default {
     lineText: get('fg.muted'),
     lineNumText: get('fg.inactive'),
     lineTimestampText: get('fg.inactive'),
-    lineHoverBg: get('neutral.muted'),
-    lineSelectedBg: get('accent.muted'),
+    lineHoverBg: get('neutral.subtle'),
+    lineSelectedBg: get('accent.subtle'),
     lineSelectedNumText: get('accent.fg'),
     lineDtFmText: get('fg.onEmphasis'),
     lineDtFmBg: get('warning.emphasis'),
-    gateBg: get('warning.muted'),
+    gateBg: get('warning.subtle'),
     gateText: get('fg.muted'),
     gateWaitingText: get('warning.fg'),
-    stepHeaderOpenBg: get('neutral.muted'),
+    stepHeaderOpenBg: get('neutral.subtle'),
     stepErrorText: get('danger.fg'),
     stepWarningText: get('warning.fg'),
     loglineText: get('fg.muted'),
@@ -135,10 +135,10 @@ export default {
     loglineDebugText: get('done.fg'),
     loglineErrorText: get('fg.muted'),
     loglineErrorNumText: get('fg.inactive'),
-    loglineErrorBg: get('danger.muted'),
+    loglineErrorBg: get('danger.subtle'),
     loglineWarningText: get('fg.muted'),
     loglineWarningNumText: get('warning.fg'),
-    loglineWarningBg: get('warning.muted'),
+    loglineWarningBg: get('warning.subtle'),
     loglineCommandText: get('accent.fg'),
     loglineSectionText: get('success.fg'),
     ansi: {
diff --git a/data/colors_v2/vars/product_light.ts b/data/colors_v2/vars/product_light.ts
index 1fef7c394..2c6fdec4a 100644
--- a/data/colors_v2/vars/product_light.ts
+++ b/data/colors_v2/vars/product_light.ts
@@ -74,8 +74,8 @@ export default {
     guttermarkerSubtleText: get('fg.inactive'),
     linenumberText: get('fg.muted'),
     cursor: get('fg.default'),
-    selectionBg: get('accent.muted'),
-    activelineBg: get('neutral.muted'),
+    selectionBg: get('accent.subtle'),
+    activelineBg: get('neutral.subtle'),
     matchingbracketText: get('fg.default'),
     linesBg: get('canvas.default'),
     syntax: {