diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index 6e10cb0ce06b27..14f0926317f7e1 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -9,7 +9,7 @@ import {
   focusStrokeWidth,
   neutralStrokeDivider,
   focusStrokeOuter,
-  neutralForegroundRest,
+  neutralForeground,
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
@@ -49,14 +49,14 @@ export const accordionItemStyles = (context, definition) =>
         padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
         text-align: left;
         height: calc(${heightNumber} * 1px);
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         font-family: inherit;
     }
 
     .button:hover,
     .button:active {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
     .button::before {
diff --git a/packages/web-components/src/accordion/accordion.styles.ts b/packages/web-components/src/accordion/accordion.styles.ts
index 6c1ad686258aa0..5c651d928457ec 100644
--- a/packages/web-components/src/accordion/accordion.styles.ts
+++ b/packages/web-components/src/accordion/accordion.styles.ts
@@ -3,7 +3,7 @@ import { display } from '@microsoft/fast-foundation';
 import {
   bodyFont,
   neutralStrokeDivider,
-  neutralForegroundRest,
+  neutralForeground,
   strokeWidth,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
@@ -17,7 +17,7 @@ export const accordionStyles = (context, definition) =>
       font-family: ${bodyFont};
       font-size: ${typeRampMinus1FontSize};
       line-height: ${typeRampMinus1LineHeight};
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
       border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDivider};
     }
   `;
diff --git a/packages/web-components/src/badge/badge.styles.ts b/packages/web-components/src/badge/badge.styles.ts
index 9072d2d1fcce0f..61869fa894c457 100644
--- a/packages/web-components/src/badge/badge.styles.ts
+++ b/packages/web-components/src/badge/badge.styles.ts
@@ -3,9 +3,9 @@ import { display } from '@microsoft/fast-foundation';
 import {
   accentForegroundRest,
   bodyFont,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampMinus1FontSize,
   typeRampMinus1LineHeight,
   neutralFillRest,
@@ -22,13 +22,13 @@ export const badgeStyles = (context, definition) =>
     }
 
     .control {
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       padding: calc(${designUnit} * 0.5px) calc(${designUnit} * 1px);
     }
 
     :host(.lightweight) .control {
       background: transparent;
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
       font-weight: 600;
     }
 
@@ -39,6 +39,6 @@ export const badgeStyles = (context, definition) =>
 
     :host(.neutral) .control {
       background: ${neutralFillRest};
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
     }
   `;
diff --git a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
index 9f4f8d5bce8816..49b75ab0d0110c 100644
--- a/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/packages/web-components/src/breadcrumb-item/breadcrumb-item.styles.ts
@@ -7,7 +7,7 @@ import {
   accentForegroundRest,
   bodyFont,
   focusStrokeWidth,
-  neutralForegroundRest,
+  neutralForeground,
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
@@ -76,20 +76,20 @@ export const breadcrumbItemStyles = (context, definition) =>
     }
 
     .control:${focusVisible} .content::before {
-        background: ${neutralForegroundRest};
+        background: ${neutralForeground};
         height: calc(${focusStrokeWidth} * 1px);
     }
 
     :host(:not([href])),
     :host([aria-current]) .control  {
         font-weight: 600;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         fill: currentcolor;
         cursor: default;
     }
 
     :host([aria-current]) .control:hover .content::before {
-      background: ${neutralForegroundRest};
+      background: ${neutralForeground};
   }
 
     .start {
@@ -104,7 +104,7 @@ export const breadcrumbItemStyles = (context, definition) =>
 
     .separator {
       display: flex;
-      fill: ${neutralForegroundRest};
+      fill: ${neutralForeground};
       margin: 0 6px;
     }
 `.withBehaviors(
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index 919ca0c8031d11..9dd0727f4360e3 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { elevation } from '../styles';
-import { elevatedCornerRadius } from "../design-tokens";
+import { surfaceCornerRadius } from '../design-tokens';
 
 export const CardStyles = css`
   ${display('block')} :host {
@@ -12,7 +12,7 @@ export const CardStyles = css`
     height: var(--card-height, 100%);
     width: var(--card-width, 100%);
     box-sizing: border-box;
-    border-radius: calc(${elevatedCornerRadius} * 1px);
+    border-radius: calc(${surfaceCornerRadius} * 1px);
     ${elevation}
   }
 
diff --git a/packages/web-components/src/checkbox/checkbox.styles.ts b/packages/web-components/src/checkbox/checkbox.styles.ts
index 7de4f604f4f587..1a8541b8c19363 100644
--- a/packages/web-components/src/checkbox/checkbox.styles.ts
+++ b/packages/web-components/src/checkbox/checkbox.styles.ts
@@ -4,12 +4,12 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
   designUnit,
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
   neutralStrokeRest,
   neutralFillInputRest,
   bodyFont,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
   neutralFillInputHover,
@@ -40,7 +40,7 @@ export const checkboxStyles = (context, definition) =>
         width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
         height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);
         box-sizing: border-box;
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
         background: ${neutralFillInputRest};
         outline: none;
@@ -54,7 +54,7 @@ export const checkboxStyles = (context, definition) =>
 
     .label {
         font-family: ${bodyFont};
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         ${
           /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''
         } padding-inline-start: calc(${designUnit} * 2px + 2px);
@@ -68,14 +68,14 @@ export const checkboxStyles = (context, definition) =>
         width: 100%;
         height: 100%;
         display: block;
-        fill: ${neutralForegroundRest};
+        fill: ${neutralForeground};
         opacity: 0;
         pointer-events: none;
     }
 
     .indeterminate-indicator {
-        border-radius: calc((${cornerRadius} / 2) * 1px);
-        background: ${neutralForegroundRest};
+        border-radius: calc((${controlCornerRadius} / 2) * 1px);
+        background: ${neutralForeground};
         position: absolute;
         top: 50%;
         left: 50%;
diff --git a/packages/web-components/src/data-grid/data-grid-cell.styles.ts b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
index 94c48c392edb2c..3ff2fddc68c472 100644
--- a/packages/web-components/src/data-grid/data-grid-cell.styles.ts
+++ b/packages/web-components/src/data-grid/data-grid-cell.styles.ts
@@ -3,10 +3,10 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import {
   bodyFont,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
   focusStrokeOuter,
-  neutralForegroundRest,
+  neutralForeground,
   strokeWidth,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
@@ -16,7 +16,7 @@ export const dataGridCellStyles = (context, definition) =>
   css`
     :host {
         padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         box-sizing: border-box;
         font-family: ${bodyFont};
         font-size: ${typeRampBaseFontSize};
@@ -25,7 +25,7 @@ export const dataGridCellStyles = (context, definition) =>
         border: transparent calc(${strokeWidth} * 1px) solid;
         overflow: hidden;
         white-space: nowrap;
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
     }
 
     :host(.column-header) {
@@ -34,7 +34,7 @@ export const dataGridCellStyles = (context, definition) =>
 
     :host(:${focusVisible}) {
         border: ${focusStrokeOuter} calc(${strokeWidth} * 1px) solid;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
 `.withBehaviors(
diff --git a/packages/web-components/src/design-tokens.ts b/packages/web-components/src/design-tokens.ts
index 3c851ee0360a71..232f3263db891e 100644
--- a/packages/web-components/src/design-tokens.ts
+++ b/packages/web-components/src/design-tokens.ts
@@ -43,12 +43,16 @@ export const bodyFont = create<string>('body-font').withDefault('Segoe UI, sans-
 export const baseHeightMultiplier = create<number>('base-height-multiplier').withDefault(8);
 export const baseHorizontalSpacingMultiplier = create<number>('base-horizontal-spacing-multiplier').withDefault(3);
 export const baseLayerLuminance = create<number>('base-layer-luminance').withDefault(StandardLuminance.LightMode);
-export const cornerRadius = create<number>('corner-radius').withDefault(4);
+export const controlCornerRadius = create<number>('corner-radius').withDefault(4);
+/** @deprecated */
+export const cornerRadius = controlCornerRadius;
 export const density = create<number>('density').withDefault(0);
 export const designUnit = create<number>('design-unit').withDefault(4);
 export const direction = create<Direction>('direction').withDefault(Direction.ltr);
 export const disabledOpacity = create<number>('disabled-opacity').withDefault(0.3);
-export const elevatedCornerRadius = create<number>('elevated-corner-radius').withDefault(4);
+export const surfaceCornerRadius = create<number>('elevated-corner-radius').withDefault(4);
+/** @deprecated */
+export const elevatedCornerRadius = surfaceCornerRadius;
 export const focusStrokeWidth = create<number>('focus-stroke-width').withDefault(2);
 /** @deprecated */
 export const focusOutlineWidth = focusStrokeWidth;
@@ -102,10 +106,6 @@ export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta;
 /** @deprecated */
 export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta;
 
-export const neutralForegroundActiveDelta = create<number>('neutral-foreground-active-delta').withDefault(0);
-export const neutralForegroundFocusDelta = create<number>('neutral-foreground-focus-delta').withDefault(0);
-export const neutralForegroundHoverDelta = create<number>('neutral-foreground-hover-delta').withDefault(0);
-
 export const neutralStrokeActiveDelta = create<number>('neutral-stroke-active-delta').withDefault(16);
 export const neutralStrokeFocusDelta = create<number>('neutral-stroke-focus-delta').withDefault(25);
 export const neutralStrokeHoverDelta = create<number>('neutral-stroke-hover-delta').withDefault(40);
@@ -484,9 +484,11 @@ export const NeutralForeground = DI.createInterface<
   ),
 );
 
-export const neutralForegroundRest = create<SwatchRGB>('neutral-foreground-rest').withDefault((element: HTMLElement) =>
+export const neutralForeground = create<SwatchRGB>('neutral-foreground').withDefault((element: HTMLElement) =>
   DI.findResponsibleContainer(element).get(NeutralForeground)(element),
 );
+/** @deprecated */
+export const neutralForegroundRest = neutralForeground;
 
 // Neutral Stroke
 export const NeutralStroke = DI.createInterface<(element: HTMLElement) => ReturnType<typeof neutralStrokeAlgorithm>>(
diff --git a/packages/web-components/src/dialog/dialog.styles.ts b/packages/web-components/src/dialog/dialog.styles.ts
index f37e862bbb4092..9dc4b0448b0819 100644
--- a/packages/web-components/src/dialog/dialog.styles.ts
+++ b/packages/web-components/src/dialog/dialog.styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { elevation } from '../styles';
-import { elevatedCornerRadius, fillColor, strokeWidth } from '../design-tokens';
+import { surfaceCornerRadius, fillColor, strokeWidth } from '../design-tokens';
 
 export const dialogStyles = (context, definition) => css`
   :host([hidden]) {
@@ -39,7 +39,7 @@ export const dialogStyles = (context, definition) => css`
     ${elevation}
     margin-top: auto;
     margin-bottom: auto;
-    border-radius: calc(${elevatedCornerRadius} * 1px);
+    border-radius: calc(${surfaceCornerRadius} * 1px);
     width: var(--dialog-width);
     height: var(--dialog-height);
     background: ${fillColor};
diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
index 2213da0538b581..6adfa73b2bce09 100644
--- a/packages/web-components/src/flipper/flipper.styles.ts
+++ b/packages/web-components/src/flipper/flipper.styles.ts
@@ -3,7 +3,7 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior }
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles';
 import {
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillStealthRest,
   neutralStrokeRest,
   disabledOpacity,
@@ -25,7 +25,7 @@ export const flipperStyles = (context, definition) =>
         margin: 0;
         position: relative;
         fill: currentcolor;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         background: transparent;
         border: none;
         outline: none;
diff --git a/packages/web-components/src/listbox-option/listbox-option.styles.ts b/packages/web-components/src/listbox-option/listbox-option.styles.ts
index 356c86d76f841b..7cee0d6bb68a27 100644
--- a/packages/web-components/src/listbox-option/listbox-option.styles.ts
+++ b/packages/web-components/src/listbox-option/listbox-option.styles.ts
@@ -4,9 +4,9 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/size';
 import {
   bodyFont,
-  cornerRadius,
+  controlCornerRadius,
   focusStrokeWidth,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
   designUnit,
@@ -24,10 +24,10 @@ export const optionStyles = (context, definition) =>
   css`
     ${display('inline-flex')} :host {
         font-family: ${bodyFont};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${focusStrokeWidth} * 1px) solid transparent;
         box-sizing: border-box;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         fill: currentcolor;
         font-size: ${typeRampBaseFontSize};
@@ -61,12 +61,12 @@ export const optionStyles = (context, definition) =>
 
     :host(:not([aria-selected="true"]):hover) {
         background: ${neutralFillHover};
-        color: ${neutralForegroundRest}};
+        color: ${neutralForeground}};
     }
 
     :host(:not([aria-selected="true"]):active) {
         background: ${neutralFillActive};
-        color: ${neutralForegroundRest}};
+        color: ${neutralForeground}};
     }
 
     :host([disabled]) {
diff --git a/packages/web-components/src/listbox/listbox.styles.ts b/packages/web-components/src/listbox/listbox.styles.ts
index 5a41bb959fb8f4..1d689a40a22354 100644
--- a/packages/web-components/src/listbox/listbox.styles.ts
+++ b/packages/web-components/src/listbox/listbox.styles.ts
@@ -6,7 +6,7 @@ import {
   neutralStrokeRest,
   focusStrokeOuter,
   strokeWidth,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
   focusStrokeWidth,
 } from '../design-tokens';
@@ -16,7 +16,7 @@ export const listboxStyles = (context, definition) =>
     ${display('inline-flex')} :host {
       background: ${neutralLayerFloating};
       border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       box-sizing: border-box;
       flex-direction: column;
       padding: calc(${designUnit} * 1px) 0;
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
index 91de287b549c17..104db3d00eae50 100644
--- a/packages/web-components/src/menu-item/menu-item.styles.ts
+++ b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -4,11 +4,11 @@ import { SystemColors } from '@microsoft/fast-web-utilities';
 import { heightNumber } from '../styles/index';
 import {
   designUnit,
-  neutralForegroundRest,
+  neutralForeground,
   bodyFont,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
   focusStrokeOuter,
   neutralForegroundHint,
@@ -34,12 +34,12 @@ export const menuItemStyles = (context, definition) =>
         padding: 0;
         margin: 0 calc(${designUnit} * 1px);
         white-space: nowrap;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         fill: currentcolor;
         cursor: pointer;
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
@@ -89,7 +89,7 @@ export const menuItemStyles = (context, definition) =>
     :host(:active),
     :host(.expanded) {
         background: ${neutralFillStealthActive};
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
     :host([disabled]) {
@@ -131,7 +131,7 @@ export const menuItemStyles = (context, definition) =>
     :host(:active) .start,
     :host(:active) .end,
     :host(:active)::slotted(svg) {
-        fill: ${neutralForegroundRest};
+        fill: ${neutralForeground};
     }
 
     :host(.indent-1[aria-haspopup="menu"]),
@@ -186,7 +186,7 @@ export const menuItemStyles = (context, definition) =>
     }
 
     :host .checkbox {
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
     }
 
     :host .radio {
@@ -210,7 +210,7 @@ export const menuItemStyles = (context, definition) =>
         width: 100%;
         height: 100%;
         display: block;
-        fill: ${neutralForegroundRest};
+        fill: ${neutralForeground};
         pointer-events: none;
     }
 
diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
index d5fc655f88a550..6417fc0c9643db 100644
--- a/packages/web-components/src/menu/menu.styles.ts
+++ b/packages/web-components/src/menu/menu.styles.ts
@@ -4,8 +4,8 @@ import { elevation } from '../styles/index';
 import {
   neutralLayerFloating,
   strokeWidth,
-  elevatedCornerRadius,
-  cornerRadius,
+  surfaceCornerRadius,
+  controlCornerRadius,
   designUnit,
   neutralStrokeDivider,
 } from '../design-tokens';
@@ -16,10 +16,10 @@ export const menuStyles = (context, definition) =>
       --elevation: 11;
       background: ${neutralLayerFloating};
       border: calc(${strokeWidth} * 1px) solid transparent;
-      border-radius: ${elevatedCornerRadius};
+      border-radius: ${surfaceCornerRadius};
       ${elevation}
       margin: 0;
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       padding: calc(${designUnit} * 1px) 0;
       max-width: 368px;
       min-width: 64px;
diff --git a/packages/web-components/src/number-field/number-field.styles.ts b/packages/web-components/src/number-field/number-field.styles.ts
index ab5e77dbecf45e..d17b4cbb34f7d2 100644
--- a/packages/web-components/src/number-field/number-field.styles.ts
+++ b/packages/web-components/src/number-field/number-field.styles.ts
@@ -6,10 +6,10 @@ import { appearanceBehavior } from '../utilities/behaviors';
 import {
   neutralFillRest,
   neutralFillHover,
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillInputRest,
   neutralStrokeRest,
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
   designUnit,
   typeRampBaseFontSize,
@@ -83,9 +83,9 @@ export const numberFieldStyles = (context, definition) =>
         position: relative;
         display: flex;
         flex-direction: row;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         background: ${neutralFillInputRest};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
         height: calc(${heightNumber} * 1px);
     }
@@ -119,7 +119,7 @@ export const numberFieldStyles = (context, definition) =>
 
     .label {
         display: block;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
@@ -151,11 +151,11 @@ export const numberFieldStyles = (context, definition) =>
     }
 
     .step-up:before {
-        border-bottom-color: ${neutralForegroundRest};
+        border-bottom-color: ${neutralForeground};
     }
 
     .step-down:before {
-        border-top-color: ${neutralForegroundRest};
+        border-top-color: ${neutralForeground};
     }
 
     ::slotted(svg) {
diff --git a/packages/web-components/src/radio/radio.styles.ts b/packages/web-components/src/radio/radio.styles.ts
index 5301f2d77d8930..c3fc485d58f504 100644
--- a/packages/web-components/src/radio/radio.styles.ts
+++ b/packages/web-components/src/radio/radio.styles.ts
@@ -7,7 +7,7 @@ import {
   strokeWidth,
   neutralStrokeRest,
   neutralFillInputRest,
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillInputHover,
   neutralStrokeHover,
   neutralFillInputActive,
@@ -54,7 +54,7 @@ export const radioStyles = (context, definition) =>
 
     .label {
         font-family: var(--body-font);
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         ${
           /* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''
         } padding-inline-start: calc(${designUnit} * 2px + 2px);
@@ -76,8 +76,8 @@ export const radioStyles = (context, definition) =>
         bottom: 5px;
         border-radius: 50%;
         display: inline-block;
-        background: ${neutralForegroundRest};
-        fill: ${neutralForegroundRest};
+        background: ${neutralForeground};
+        fill: ${neutralForeground};
         opacity: 0;
         pointer-events: none;
     }
diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
index 1694f465279696..47cdf9ee263beb 100644
--- a/packages/web-components/src/select/select.styles.ts
+++ b/packages/web-components/src/select/select.styles.ts
@@ -10,10 +10,10 @@ import {
   focusStrokeOuter,
   neutralFillInputRest,
   neutralStrokeRest,
-  neutralForegroundRest,
+  neutralForeground,
   neutralLayerFloating,
   strokeWidth,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
@@ -50,10 +50,10 @@ export const selectStyles = (context, definition) =>
     ${display('inline-flex')} :host {
         --elevation: 14;
         background: ${neutralFillInputRest};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
         box-sizing: border-box;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         font-family: ${bodyFont};
         height: calc(${heightNumber} * 1px);
         position: relative;
@@ -65,7 +65,7 @@ export const selectStyles = (context, definition) =>
     .listbox {
         ${elevation}
         background: ${neutralLayerFloating};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         box-sizing: border-box;
         display: inline-flex;
         flex-direction: column;
@@ -137,7 +137,7 @@ export const selectStyles = (context, definition) =>
 
     :host([disabled]:hover) {
         background: ${neutralFillStealthRest};
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         fill: currentcolor;
     }
 
diff --git a/packages/web-components/src/skeleton/skeleton.styles.ts b/packages/web-components/src/skeleton/skeleton.styles.ts
index 90eb47f25f6931..610145e35baf98 100644
--- a/packages/web-components/src/skeleton/skeleton.styles.ts
+++ b/packages/web-components/src/skeleton/skeleton.styles.ts
@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { cornerRadius, neutralFillRest } from '../design-tokens';
+import { controlCornerRadius, neutralFillRest } from '../design-tokens';
 
 export const skeletonStyles = (context, definition) =>
   css`
@@ -20,7 +20,7 @@ export const skeletonStyles = (context, definition) =>
     }
 
     :host(.rect) {
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
     }
 
     :host(.circle) {
diff --git a/packages/web-components/src/slider/slider.styles.ts b/packages/web-components/src/slider/slider.styles.ts
index 6f52ddd26e8bb9..6ee7be50a371b5 100644
--- a/packages/web-components/src/slider/slider.styles.ts
+++ b/packages/web-components/src/slider/slider.styles.ts
@@ -4,9 +4,9 @@ import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior }
 import { heightNumber } from '../styles';
 import {
   designUnit,
-  cornerRadius,
+  controlCornerRadius,
   focusStrokeOuter,
-  neutralForegroundRest,
+  neutralForeground,
   neutralStrokeHover,
   neutralStrokeActive,
   density,
@@ -27,7 +27,7 @@ export const sliderStyles = (context, defintion) =>
         margin: calc(${designUnit} * 1px) 0;
         user-select: none;
         box-sizing: border-box;
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         outline: none;
         cursor: pointer;
     }
@@ -57,15 +57,15 @@ export const sliderStyles = (context, defintion) =>
         border: none;
         width: calc(var(--thumb-size) * 1px);
         height: calc(var(--thumb-size) * 1px);
-        background: ${neutralForegroundRest};
+        background: ${neutralForeground};
         border-radius: 50%;
     }
     .thumb-cursor:hover {
-        background: ${neutralForegroundRest};;
+        background: ${neutralForeground};;
         border-color: ${neutralStrokeHover};
     }
     .thumb-cursor:active {
-        background: ${neutralForegroundRest};
+        background: ${neutralForeground};
         border-color: ${neutralStrokeActive};
     }
     :host(.horizontal) .thumb-container {
diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
index 9e724ec6947874..418704adfa244f 100644
--- a/packages/web-components/src/styles/patterns/button.ts
+++ b/packages/web-components/src/styles/patterns/button.ts
@@ -4,10 +4,10 @@ import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsof
 import { heightNumber } from '../size';
 import {
   neutralFillRest,
-  neutralForegroundRest,
+  neutralForeground,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
-  cornerRadius,
+  controlCornerRadius,
   designUnit,
   density,
   strokeWidth,
@@ -45,8 +45,8 @@ export const baseButtonStyles = (context, definition) =>
     height: calc(${heightNumber} * 1px);
     min-width: calc(${heightNumber} * 1px);
     background-color: ${neutralFillRest};
-    color: ${neutralForegroundRest};
-    border-radius: calc(${cornerRadius} * 1px);
+    color: ${neutralForeground};
+    border-radius: calc(${controlCornerRadius} * 1px);
     fill: currentcolor;
     cursor: pointer;
   }
@@ -332,7 +332,7 @@ export const LightweightButtonStyles = css`
     }
 
     :host([appearance="lightweight"]) .control:${focusVisible} .content::before {
-        background: ${neutralForegroundRest};
+        background: ${neutralForeground};
         height: calc(${focusStrokeWidth} * 1px);
     }
 `.withBehaviors(
diff --git a/packages/web-components/src/styles/patterns/input.ts b/packages/web-components/src/styles/patterns/input.ts
index dd6439a66d6df8..90276f4f065f77 100644
--- a/packages/web-components/src/styles/patterns/input.ts
+++ b/packages/web-components/src/styles/patterns/input.ts
@@ -1,6 +1,6 @@
 import { css, ElementStyles } from '@microsoft/fast-element';
 import { accentFillRestBehavior } from '../behaviors';
-import { focusStrokeWidth, accentFillRest, cornerRadius } from '../../design-tokens';
+import { focusStrokeWidth, accentFillRest, controlCornerRadius } from '../../design-tokens';
 
 /**
  * @internal
@@ -12,8 +12,8 @@ export const fillStateStyles = (context, definition) => css`
     position: absolute;
     bottom: 0;
     border-bottom: calc(${focusStrokeWidth} * 1px) solid ${accentFillRest};
-    border-bottom-left-radius: calc(${cornerRadius} * 1px);
-    border-bottom-right-radius: calc(${cornerRadius} * 1px);
+    border-bottom-left-radius: calc(${controlCornerRadius} * 1px);
+    border-bottom-right-radius: calc(${controlCornerRadius} * 1px);
     z-index: 2;
     transition: all 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
   }
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
index 24b0e1a9be5da2..bdda5347bdb23c 100644
--- a/packages/web-components/src/switch/switch.styles.ts
+++ b/packages/web-components/src/switch/switch.styles.ts
@@ -13,7 +13,7 @@ import {
   neutralFillInputActive,
   neutralStrokeActive,
   focusStrokeOuter,
-  neutralForegroundRest,
+  neutralForeground,
   strokeWidth,
   accentForegroundCut,
   accentFillRest,
@@ -86,13 +86,13 @@ export const switchStyles = (context, defintiion) =>
         height: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px);
         width: calc((${heightNumber} - (${designUnit} * 5.5)) * 1px);
         top: calc(${designUnit} * 1px);
-        background: ${neutralForegroundRest};
+        background: ${neutralForeground};
         border-radius: 50%;
         transition: all 0.2s ease-in-out;
     }
 
     .status-message {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
@@ -104,7 +104,7 @@ export const switchStyles = (context, defintiion) =>
     }
 
     .label {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
         margin-inline-end: calc(${designUnit} * 2px + 2px);
diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts
index 73f6d04223fa3f..8e4e94c7223504 100644
--- a/packages/web-components/src/tabs/tab/tab.styles.ts
+++ b/packages/web-components/src/tabs/tab/tab.styles.ts
@@ -8,8 +8,8 @@ import {
   bodyFont,
   designUnit,
   density,
-  neutralForegroundRest,
-  cornerRadius,
+  neutralForeground,
+  controlCornerRadius,
   strokeWidth,
   focusStrokeOuter,
   focusStrokeWidth,
@@ -25,8 +25,8 @@ export const tabStyles = (context, definition) =>
         line-height: ${typeRampBaseLineHeight};
         height: calc(${heightNumber} * 1px);
         padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);
-        color: ${neutralForegroundRest};
-        border-radius: calc(${cornerRadius} * 1px);
+        color: ${neutralForeground};
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid transparent;
         align-items: center;
         justify-content: center;
@@ -40,7 +40,7 @@ export const tabStyles = (context, definition) =>
 
     :host(:hover),
     :host(:active) {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
     :host(:${focusVisible}) {
@@ -65,7 +65,7 @@ export const tabStyles = (context, definition) =>
 
     :host(.vertical:hover),
     :host(.vertical:active) {
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
     }
 
     :host(.vertical:hover[aria-selected="true"]) {
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index 5640fdcbb30735..5319ffca7d8224 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -5,9 +5,9 @@ import {
   bodyFont,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
-  cornerRadius,
+  controlCornerRadius,
   accentFillRest,
-  neutralForegroundRest,
+  neutralForeground,
 } from '../design-tokens';
 
 export const tabsStyles = (context, definition) =>
@@ -17,7 +17,7 @@ export const tabsStyles = (context, definition) =>
       font-family: ${bodyFont};
       font-size: ${typeRampBaseFontSize};
       line-height: ${typeRampBaseLineHeight};
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
       grid-template-columns: auto 1fr auto;
       grid-template-rows: auto 1fr;
     }
@@ -41,7 +41,7 @@ export const tabsStyles = (context, definition) =>
       grid-column: 1;
       width: 20px;
       height: 3px;
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       justify-self: center;
       background: ${accentFillRest};
     }
@@ -89,7 +89,7 @@ export const tabsStyles = (context, definition) =>
       grid-row: 1;
       width: 3px;
       height: 20px;
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       align-self: center;
       background: ${accentFillRest};
     }
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
index 28564e21921720..b76e5c94d397d9 100644
--- a/packages/web-components/src/text-area/text-area.styles.ts
+++ b/packages/web-components/src/text-area/text-area.styles.ts
@@ -6,7 +6,7 @@ import { appearanceBehavior } from '../utilities/behaviors';
 import {
   neutralFillRest,
   neutralFillHover,
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillInputRest,
   neutralStrokeRest,
   neutralFillInputHover,
@@ -65,7 +65,7 @@ export const textAreaStyles = (context, definition) =>
     .control {
         box-sizing: border-box;
         position: relative;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         background: ${neutralFillInputRest};
         border-radius: calc(var(--corner-radius) * 1px);
         border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
@@ -114,7 +114,7 @@ export const textAreaStyles = (context, definition) =>
 
     .label {
         display: block;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         $font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
index 45c7ef16970e85..1101e801857e4a 100644
--- a/packages/web-components/src/text-field/text-field.styles.ts
+++ b/packages/web-components/src/text-field/text-field.styles.ts
@@ -7,9 +7,9 @@ import {
   neutralFillRest,
   neutralFillHover,
   bodyFont,
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillInputRest,
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
   neutralStrokeRest,
   typeRampBaseFontSize,
@@ -79,9 +79,9 @@ export const textFieldStyles = (context, definition) =>
         position: relative;
         display: flex;
         flex-direction: row;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         background: ${neutralFillInputRest};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
         border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
         height: calc(${heightNumber} * 1px);
     }
@@ -96,7 +96,7 @@ export const textFieldStyles = (context, definition) =>
         margin-bottom: auto;
         border: none;
         padding: 0 calc(var(--design-unit) * 2px + 1px);
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         font-family: inherit;
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
@@ -111,7 +111,7 @@ export const textFieldStyles = (context, definition) =>
 
     .label {
         display: block;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         cursor: pointer;
         font-size: ${typeRampBaseFontSize};
         line-height: ${typeRampBaseLineHeight};
diff --git a/packages/web-components/src/tooltip/tooltip.styles.ts b/packages/web-components/src/tooltip/tooltip.styles.ts
index b7af69ef52bad4..8b76184dd67688 100644
--- a/packages/web-components/src/tooltip/tooltip.styles.ts
+++ b/packages/web-components/src/tooltip/tooltip.styles.ts
@@ -2,9 +2,9 @@ import { css } from '@microsoft/fast-element';
 import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { elevation } from '../styles/index';
 import {
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
-  neutralForegroundRest,
+  neutralForeground,
   bodyFont,
   typeRampBaseFontSize,
   typeRampBaseLineHeight,
@@ -25,10 +25,10 @@ export const tooltipStyles = (context, definition) =>
 
     .tooltip {
       box-sizing: border-box;
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       border: calc(${strokeWidth} * 1px) solid transparent;
       background: ${fillColor};
-      color: ${neutralForegroundRest};
+      color: ${neutralForeground};
       padding: 4px 12px;
       height: fit-content;
       width: fit-content;
@@ -60,7 +60,7 @@ export const tooltipStyles = (context, definition) =>
       width: 12px;
       height: 12px;
       background: ${fillColor};
-      border-radius: calc(${cornerRadius} * 1px);
+      border-radius: calc(${controlCornerRadius} * 1px);
       position: absolute;
     }
 
diff --git a/packages/web-components/src/tree-item/tree-item.styles.ts b/packages/web-components/src/tree-item/tree-item.styles.ts
index 5035b064cc33a6..f5de768aa359f1 100644
--- a/packages/web-components/src/tree-item/tree-item.styles.ts
+++ b/packages/web-components/src/tree-item/tree-item.styles.ts
@@ -13,7 +13,7 @@ import {
   baseHeightMultiplier,
   designUnit,
   density,
-  neutralForegroundRest,
+  neutralForeground,
   neutralFillStealthRest,
   bodyFont,
   focusStrokeOuter,
@@ -21,7 +21,7 @@ import {
   typeRampBaseLineHeight,
   disabledOpacity,
   accentForegroundRest,
-  cornerRadius,
+  controlCornerRadius,
   strokeWidth,
   neutralFillStealthHover,
   neutralFillStealthActive,
@@ -84,7 +84,7 @@ export const treeItemStyles = (context, definition) =>
         contain: content;
         position: relative;
         outline: none;
-        color: ${neutralForegroundRest};
+        color: ${neutralForeground};
         background: ${neutralFillStealthRest};
         cursor: pointer;
         font-family: ${bodyFont};
@@ -110,8 +110,8 @@ export const treeItemStyles = (context, definition) =>
 
     :host(:${focusVisible}) .positioning-region {
         border: calc(${strokeWidth} * 1px) solid ${focusStrokeOuter};
-        border-radius: calc(${cornerRadius} * 1px);
-        color: ${neutralForegroundRest};
+        border-radius: calc(${controlCornerRadius} * 1px);
+        color: ${neutralForeground};
     }
 
     .positioning-region::before {
@@ -172,7 +172,7 @@ export const treeItemStyles = (context, definition) =>
         transition: transform 0.1s linear;
         transform: rotate(-45deg);
         pointer-events: none;
-        fill: ${neutralForegroundRest};
+        fill: ${neutralForeground};
     }
     .start,
     .end {
@@ -243,7 +243,7 @@ export const treeItemStyles = (context, definition) =>
           /* The french fry background needs to be calculated based on the selected background state for this control.
             We currently have no way of chaning that, so setting to accent-foreground-rest for the time being */ ''
         } background: ${accentForegroundRest};
-        border-radius: calc(${cornerRadius} * 1px);
+        border-radius: calc(${controlCornerRadius} * 1px);
     }
 
     ::slotted(fluent-tree-item) {