diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index 28063dc59..9a8d573a6 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -116,7 +116,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
               '> *': {
                 display: 'inline',
                 padding: '3px',
-                backgroundColor: `rgba(${highlightColor}, var(--colors-highlightBackgroundAlpha))`,
+                backgroundColor: `rgba(${highlightColor}, var(--colors-highlight_background_alpha))`,
                 boxDecorationBreak: 'clone',
                 borderRadius: '2px',
               },
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index afecfe2a3..f17a02085 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -200,14 +200,14 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
         thHighContrast: '#3D3D3D',
         thHighlightBar: '#D9D9D9',
 
-        highlightBackgroundGreen: '85, 198, 137',
-        highlightBackgroundBlue: '106, 177, 255',
-        highlightBackgroundOrange: '254, 181, 109',
-        highlightBackgroundYellow: '255, 210, 52',
-        highlightBackgroundRed: '251, 154, 154',
+        highlight_background_green: '85, 198, 137',
+        highlight_background_blue: '106, 177, 255',
+        highlight_background_orange: '254, 181, 109',
+        highlight_background_yellow: '255, 210, 52',
+        highlight_background_red: '251, 154, 154',
 
-        highlightBackgroundAlpha: '0.2',
-        highlightUnderlineAlpha: '1.0',
+        highlight_background_alpha: '0.2',
+        highlight_underline_alpha: '1.0',
       },
     },
     media: {
@@ -310,8 +310,8 @@ const darkThemeSpec = {
     thHighContrast: '#D9D9D9',
 
     thHighlightBar: '#6A6968',
-    highlightUnderlineAlpha: '0.5',
-    highlightBackgroundAlpha: '0.35',
+    highlight_underline_alpha: '0.5',
+    highlight_background_alpha: '0.35',
   },
   shadows: {
     cardBoxShadow:
diff --git a/packages/web/lib/themeUpdater.tsx b/packages/web/lib/themeUpdater.tsx
index 017b9424b..77f885f52 100644
--- a/packages/web/lib/themeUpdater.tsx
+++ b/packages/web/lib/themeUpdater.tsx
@@ -133,15 +133,15 @@ export const highlightColor = (name: string | undefined) => {
 export const highlightColorVar = (name: string | undefined) => {
   switch (name) {
     case 'green':
-      return 'var(--colors-highlightBackgroundGreen)'
+      return 'var(--colors-highlight_background_green)'
     case 'blue':
-      return 'var(--colors-highlightBackgroundBlue)'
+      return 'var(--colors-highlight_background_blue)'
     case 'yellow':
-      return 'var(--colors-highlightBackgroundYellow)'
+      return 'var(--colors-highlight_background_yellow)'
     case 'orange':
-      return 'var(--colors-highlightBackgroundOrange)'
+      return 'var(--colors-highlight_background_orange)'
     case 'red':
-      return 'var(--colors-highlightBackgroundRed)'
+      return 'var(--colors-highlight_background_red)'
   }
   return 'var(--colors-highlightBackground)'
 }
diff --git a/packages/web/styles/articleInnerStyling.css b/packages/web/styles/articleInnerStyling.css
index bde83edb0..3045467ce 100644
--- a/packages/web/styles/articleInnerStyling.css
+++ b/packages/web/styles/articleInnerStyling.css
@@ -21,23 +21,23 @@
 
 
 .highlight__green {
-  background-color: rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightBackgroundAlpha));
-  border-bottom: 2px solid rgba(var(--colors-highlightBackgroundGreen), var(--colors-highlightUnderlineAlpha));
+  background-color: rgba(var(--colors-highlight_background_green), var(--colors-highlight_background_alpha));
+  border-bottom: 2px solid rgba(var(--colors-highlight_background_green), var(--colors-highlight_underline_alpha));
 }
 
 .highlight__red {
-  background-color: rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightBackgroundAlpha));
-  border-bottom: 2px solid rgba(var(--colors-highlightBackgroundRed), var(--colors-highlightUnderlineAlpha));
+  background-color: rgba(var(--colors-highlight_background_red), var(--colors-highlight_background_alpha));
+  border-bottom: 2px solid rgba(var(--colors-highlight_background_red), var(--colors-highlight_underline_alpha));
 }
 
 .highlight__blue {
-  background-color: rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightBackgroundAlpha));
-  border-bottom: 2px solid rgba(var(--colors-highlightBackgroundBlue), var(--colors-highlightUnderlineAlpha));
+  background-color: rgba(var(--colors-highlight_background_blue), var(--colors-highlight_background_alpha));
+  border-bottom: 2px solid rgba(var(--colors-highlight_background_blue), var(--colors-highlight_underline_alpha));
 }
 
 .highlight__yellow {
-  background-color: rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightBackgroundAlpha));
-  border-bottom: 2px solid rgba(var(--colors-highlightBackgroundYellow), var(--colors-highlightUnderlineAlpha));
+  background-color: rgba(var(--colors-highlight_background_yellow), var(--colors-highlight_background_alpha));
+  border-bottom: 2px solid rgba(var(--colors-highlight_background_yellow), var(--colors-highlight_underline_alpha));
 }
 
 .article-inner-css {