diff --git a/packages/blade/src/components/Button/BaseButton/buttonTokens.ts b/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
index b10e5acefd9..40863db75a6 100644
--- a/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
+++ b/packages/blade/src/components/Button/BaseButton/buttonTokens.ts
@@ -85,8 +85,8 @@ const textColor = (property: 'icon' | 'text') => {
   return {
     base: {
       primary: {
-        default: `interactive.${property}.staticWhite.normal`,
-        highlighted: `interactive.${property}.staticWhite.normal`,
+        default: `interactive.${property}.onPrimary.normal`,
+        highlighted: `interactive.${property}.onPrimary.normal`,
         disabled: `interactive.${property}.primary.disabled`,
       },
       secondary: {
diff --git a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
index 680b076ca0d..588a92a35cc 100644
--- a/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
+++ b/packages/blade/src/components/Checkbox/CheckboxIcon/CheckboxIcon.tsx
@@ -78,7 +78,7 @@ const CheckboxIcon = ({
   size,
 }: CheckboxIconProps) => {
   const { theme } = useTheme();
-  const iconColor = getIn(theme, 'colors.interactive.icon.staticWhite.normal');
+  const iconColor = getIn(theme, 'colors.interactive.icon.onPrimary.normal');
   return (
     <CheckboxIconWrapper
       size={size}
diff --git a/packages/blade/src/components/Radio/radioTokens.ts b/packages/blade/src/components/Radio/radioTokens.ts
index 7b3ffaf2e79..ce439e18130 100644
--- a/packages/blade/src/components/Radio/radioTokens.ts
+++ b/packages/blade/src/components/Radio/radioTokens.ts
@@ -58,7 +58,7 @@ const radioIconColors: RadioIconColors = {
   variants: {
     default: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
         unchecked: 'colors.transparent',
       },
       border: {
@@ -72,8 +72,8 @@ const radioIconColors: RadioIconColors = {
     },
     disabled: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
-        unchecked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.interactive.icon.onPrimary.normal',
       },
       border: {
         checked: 'colors.transparent',
@@ -86,7 +86,7 @@ const radioIconColors: RadioIconColors = {
     },
     negative: {
       dot: {
-        checked: 'colors.interactive.icon.staticWhite.normal',
+        checked: 'colors.interactive.icon.onPrimary.normal',
         unchecked: 'colors.transparent',
       },
       border: {
diff --git a/packages/blade/src/tokens/theme/createTheme.ts b/packages/blade/src/tokens/theme/createTheme.ts
index c5ef43b943b..6d2bdb2567a 100644
--- a/packages/blade/src/tokens/theme/createTheme.ts
+++ b/packages/blade/src/tokens/theme/createTheme.ts
@@ -104,7 +104,7 @@ const getOnLightOverrides = (
 ): DeepPartial<ThemeTokens['colors']['onLight']> => {
   // Select the most readable color to use as the foreground color on top of surface color
   // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceLight = tinycolor.isReadable(
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayLight[50],
     brandColors[600],
     WCAG2ContrastOptions,
@@ -112,7 +112,7 @@ const getOnLightOverrides = (
     ? brandColors[600]
     : globalColors.neutral.blueGrayLight[1100];
 
-  const staticWhiteDefault = tinycolor
+  const foregroundOnBrand = tinycolor
     .mostReadable(
       brandColors[900],
       [globalColors.neutral.white[500], globalColors.neutral.black[500]],
@@ -142,30 +142,30 @@ const getOnLightOverrides = (
       },
       text: {
         primary: {
-          normal: foregroundOnSurfaceLight,
-          disabled: foregroundOnSurfaceLight,
-          muted: foregroundOnSurfaceLight,
-          subtle: foregroundOnSurfaceLight,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
       icon: {
         primary: {
-          normal: foregroundOnSurfaceLight,
-          disabled: foregroundOnSurfaceLight,
-          muted: foregroundOnSurfaceLight,
-          subtle: foregroundOnSurfaceLight,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
     },
@@ -185,7 +185,7 @@ const getOnDarkOverrides = (
 ): DeepPartial<ThemeTokens['colors']['onDark']> => {
   // Select the most readable color to use as the foreground color on top of surface color
   // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color
-  const foregroundOnSurfaceDark = tinycolor.isReadable(
+  const foregroundOnSurface = tinycolor.isReadable(
     globalColors.neutral.blueGrayDark[1100],
     brandColors[400],
     WCAG2ContrastOptions,
@@ -193,7 +193,7 @@ const getOnDarkOverrides = (
     ? brandColors[400]
     : globalColors.neutral.blueGrayDark[0];
 
-  const staticWhiteDefault = tinycolor
+  const foregroundOnBrand = tinycolor
     .mostReadable(
       brandColors[900],
       [globalColors.neutral.white[500], globalColors.neutral.black[500]],
@@ -223,30 +223,30 @@ const getOnDarkOverrides = (
       },
       text: {
         primary: {
-          normal: foregroundOnSurfaceDark,
-          disabled: foregroundOnSurfaceDark,
-          muted: foregroundOnSurfaceDark,
-          subtle: foregroundOnSurfaceDark,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
       icon: {
         primary: {
-          normal: foregroundOnSurfaceDark,
-          disabled: foregroundOnSurfaceDark,
-          muted: foregroundOnSurfaceDark,
-          subtle: foregroundOnSurfaceDark,
+          normal: foregroundOnSurface,
+          disabled: foregroundOnSurface,
+          muted: foregroundOnSurface,
+          subtle: foregroundOnSurface,
         },
-        staticWhite: {
-          normal: staticWhiteDefault,
-          disabled: staticWhiteDefault,
-          muted: staticWhiteDefault,
-          subtle: staticWhiteDefault,
+        onPrimary: {
+          normal: foregroundOnBrand,
+          disabled: foregroundOnBrand,
+          muted: foregroundOnBrand,
+          subtle: foregroundOnBrand,
         },
       },
     },