diff --git a/packages/kit/src/accordion/AccordionItem.tsx b/packages/kit/src/accordion/AccordionItem.tsx
index 679751afb..d84b8f363 100644
--- a/packages/kit/src/accordion/AccordionItem.tsx
+++ b/packages/kit/src/accordion/AccordionItem.tsx
@@ -5,7 +5,7 @@ import type * as WPDS from "../theme";
 import { AccordionItemProps as RadixAccordionItemProps } from "@radix-ui/react-accordion";
 
 const StyledAccordionItem = styled(AccordionPrimitive.Item, {
-  borderBottom: `1px solid ${theme.colors.subtle}`,
+  borderBottom: `1px solid ${theme.colors.outline}`,
 });
 
 type AccordionItemProps = WPDS.VariantProps<typeof StyledAccordionItem> &
diff --git a/packages/kit/src/action-menu/ActionMenuContent.tsx b/packages/kit/src/action-menu/ActionMenuContent.tsx
index 0ebe22ef7..e17b9f8bc 100644
--- a/packages/kit/src/action-menu/ActionMenuContent.tsx
+++ b/packages/kit/src/action-menu/ActionMenuContent.tsx
@@ -14,7 +14,7 @@ const NAME = "ActionMenuContent";
 
 export const ContentStyles = {
   background: theme.colors.secondary,
-  border: `solid 1px ${theme.colors.subtle}`,
+  border: `solid 1px ${theme.colors.outline}`,
   borderRadius: theme.radii["050"],
   boxShadow: theme.shadows["300"],
   color: theme.colors.primary,
diff --git a/packages/kit/src/avatar/play.stories.tsx b/packages/kit/src/avatar/play.stories.tsx
index ce0489deb..37389001e 100644
--- a/packages/kit/src/avatar/play.stories.tsx
+++ b/packages/kit/src/avatar/play.stories.tsx
@@ -35,7 +35,7 @@ export default {
 const defaultArgs = {
   size: 200,
   css: {
-    backgroundColor: theme.colors.subtle,
+    backgroundColor: theme.colors.outline,
   },
 };
 
diff --git a/packages/kit/src/button/Button.tsx b/packages/kit/src/button/Button.tsx
index 84fcc0546..183b80fbd 100644
--- a/packages/kit/src/button/Button.tsx
+++ b/packages/kit/src/button/Button.tsx
@@ -46,7 +46,7 @@ export const Button = styled("button", {
       secondary: {
         background: theme.colors.secondary,
         color: theme.colors.onSecondary,
-        border: "1px solid $subtle",
+        border: "1px solid $outline",
         "@hover": {
           "&:hover": {
             background: theme.colors.gray400,
diff --git a/packages/kit/src/card/Card.tsx b/packages/kit/src/card/Card.tsx
index d2b147907..ea5b6ab9e 100644
--- a/packages/kit/src/card/Card.tsx
+++ b/packages/kit/src/card/Card.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import type * as WPDS from "../theme";
 import { theme, styled } from "../theme";
-//
+
 const StyledCard = styled("div", {
   padding: theme.space["150"],
-  border: theme.colors.faint,
+  border: theme.colors.outline,
   borderRadius: theme.radii["012"],
   borderWidth: "1px",
   borderStyle: "solid",
diff --git a/packages/kit/src/checkbox/Checkbox.tsx b/packages/kit/src/checkbox/Checkbox.tsx
index 6d24bb140..cc48b5085 100644
--- a/packages/kit/src/checkbox/Checkbox.tsx
+++ b/packages/kit/src/checkbox/Checkbox.tsx
@@ -34,11 +34,11 @@ const StyledCheckbox = styled(PrimitiveCheckbox.Root, {
     $$color: "$colors$onDisabled",
 
     borderColor: "$colors$onDisabled",
-    color: theme.colors.subtle,
+    color: theme.colors.outline,
   },
 
   "&[aria-checked='false']:not(:disabled)": {
-    borderColor: "$colors$subtle",
+    borderColor: "$colors$outline",
   },
 
   variants: {
@@ -84,7 +84,7 @@ const StyledCheckbox = styled(PrimitiveCheckbox.Root, {
       css: {
         "&:not([aria-checked='false']):not(:disabled)": {
           $$backgroundColor: "$colors$secondary",
-          $$color: "$colors$subtle",
+          $$color: "$colors$outline",
         },
       },
     },
@@ -141,7 +141,7 @@ const StyledIndicator = styled(PrimitiveCheckbox.Indicator, {
     disabled: {
       true: {
         $$variantColor: "$colors$disabled",
-        borderColor: "$colors$subtle",
+        borderColor: "$colors$outline",
         color: "$colors$onDisabled",
       },
     },
diff --git a/packages/kit/src/divider/Divider.tsx b/packages/kit/src/divider/Divider.tsx
index 3775f811b..31e6932b4 100644
--- a/packages/kit/src/divider/Divider.tsx
+++ b/packages/kit/src/divider/Divider.tsx
@@ -12,7 +12,7 @@ const StyledSeparator = Theme.styled(Separator.Root, {
   variants: {
     variant: {
       default: {
-        backgroundColor: Theme.theme.colors.faint,
+        backgroundColor: Theme.theme.colors.outline,
       },
       strong: {
         backgroundColor: Theme.theme.colors.primary,
diff --git a/packages/kit/src/input-search/InputSearchListHeading.tsx b/packages/kit/src/input-search/InputSearchListHeading.tsx
index fe2d45d8f..ac978cf52 100644
--- a/packages/kit/src/input-search/InputSearchListHeading.tsx
+++ b/packages/kit/src/input-search/InputSearchListHeading.tsx
@@ -9,7 +9,7 @@ import type { Node } from "@react-types/shared";
 import type * as WPDS from "../theme";
 
 const StyledListItem = styled("li", {
-  borderBlockStart: `1px solid ${theme.colors.faint}`,
+  borderBlockStart: `1px solid ${theme.colors.outline}`,
   color: theme.colors.accessible,
   fontSize: theme.fontSizes["087"],
   marginBlockStart: "$050",
diff --git a/packages/kit/src/input-shared/InputShared.tsx b/packages/kit/src/input-shared/InputShared.tsx
index 0e6632faa..d779dcd8f 100644
--- a/packages/kit/src/input-shared/InputShared.tsx
+++ b/packages/kit/src/input-shared/InputShared.tsx
@@ -9,7 +9,7 @@ export const FloatingLabelStyles = {
 
 export const sharedInputStyles = {
   borderRadius: theme.radii["012"],
-  borderColor: theme.colors.subtle,
+  borderColor: theme.colors.outline,
   borderStyle: "solid",
   borderWidth: "1px",
   backgroundColor: theme.colors.secondary,
diff --git a/packages/kit/src/navigation-menu/NavigationMenuContent.tsx b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx
index 582b37724..bc83efafc 100644
--- a/packages/kit/src/navigation-menu/NavigationMenuContent.tsx
+++ b/packages/kit/src/navigation-menu/NavigationMenuContent.tsx
@@ -13,7 +13,7 @@ const NAME = "NavigationMenuContent";
 
 const StyledNavigationMenuContent = styled(NavigationMenuPrimitive.Content, {
   background: theme.colors.secondary,
-  border: `solid 1px ${theme.colors.subtle}`,
+  border: `solid 1px ${theme.colors.outline}`,
   borderRadius: theme.radii["012"],
   boxShadow: theme.shadows["200"],
   minWidth: "150px",
diff --git a/packages/kit/src/radio-group/RadioButton.tsx b/packages/kit/src/radio-group/RadioButton.tsx
index 083d6b496..3b75503cd 100644
--- a/packages/kit/src/radio-group/RadioButton.tsx
+++ b/packages/kit/src/radio-group/RadioButton.tsx
@@ -13,7 +13,7 @@ const ContainerCSS = Theme.css({
 
 const StyledRadioButton = Theme.styled(RadioGroupPrimitive.Item, {
   backgroundColor: Theme.theme.colors.onPrimary,
-  borderColor: Theme.theme.colors.subtle,
+  borderColor: Theme.theme.colors.outline,
   borderStyle: "solid",
   borderRadius: "50%",
   borderWidth: "1px",
diff --git a/packages/kit/src/select/SelectGroup.tsx b/packages/kit/src/select/SelectGroup.tsx
index 225fd1c54..2c0a8caf1 100644
--- a/packages/kit/src/select/SelectGroup.tsx
+++ b/packages/kit/src/select/SelectGroup.tsx
@@ -48,7 +48,7 @@ export const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(
         {children}
       </StyledSelectGroup>
       <DividerContainer>
-        <Divider css={{ backgroundColor: theme.colors.subtle }} />
+        <Divider css={{ backgroundColor: theme.colors.outline }} />
       </DividerContainer>
     </>
   )
diff --git a/packages/kit/src/select/SelectItem.tsx b/packages/kit/src/select/SelectItem.tsx
index b81689a29..bf09cbe51 100644
--- a/packages/kit/src/select/SelectItem.tsx
+++ b/packages/kit/src/select/SelectItem.tsx
@@ -24,7 +24,7 @@ const StyledItem = styled(SelectPrimitive.Item, {
   },
 
   "&[data-highlighted]": {
-    backgroundColor: theme.colors.faint,
+    backgroundColor: theme.colors.outline,
     cursor: "pointer",
   },
 });
diff --git a/packages/kit/src/tabs/TabsList.tsx b/packages/kit/src/tabs/TabsList.tsx
index 1e12b194a..f2235f9d6 100644
--- a/packages/kit/src/tabs/TabsList.tsx
+++ b/packages/kit/src/tabs/TabsList.tsx
@@ -8,7 +8,7 @@ import { styled, theme } from "../theme";
 const StyledTabsList = styled(TabsPrimitive.List, {
   flexShrink: 0,
   display: "flex",
-  boxShadow: `inset 0 -1px 0 0 ${theme.colors.faint}, 0 0 0 0 ${theme.colors.faint}`,
+  boxShadow: `inset 0 -1px 0 0 ${theme.colors.outline}, 0 0 0 0 ${theme.colors.outline}`,
   gap: theme.space["075"],
   overflow: "auto",
   width: "fit-content",
diff --git a/packages/kit/src/tabs/TabsTrigger.tsx b/packages/kit/src/tabs/TabsTrigger.tsx
index addd10bd1..e35246a89 100644
--- a/packages/kit/src/tabs/TabsTrigger.tsx
+++ b/packages/kit/src/tabs/TabsTrigger.tsx
@@ -84,10 +84,10 @@ const StyledTabsTrigger = styled(TabsPrimitive.Trigger, {
 
   // styling when the element is disabled
   "&[disabled]": {
-    color: theme.colors.subtle,
+    color: theme.colors.outline,
     "&:hover::after": {
       ...afterConsts,
-      borderBottom: `1px solid ${theme.colors.faint}`,
+      borderBottom: `1px solid ${theme.colors.outline}`,
     },
   },
 });
diff --git a/packages/kit/src/theme/play.stories.tsx b/packages/kit/src/theme/play.stories.tsx
index 7a8126bef..a43903f87 100644
--- a/packages/kit/src/theme/play.stories.tsx
+++ b/packages/kit/src/theme/play.stories.tsx
@@ -50,7 +50,7 @@ const StyledBox = styled("div", {
         fontWeight: theme.fontWeights.bold,
       },
       false: {
-        backgroundColor: theme.colors.subtle,
+        backgroundColor: theme.colors.outline,
       },
     },
   },
diff --git a/packages/kit/src/tooltip/TooltipContent.tsx b/packages/kit/src/tooltip/TooltipContent.tsx
index 9db250ba4..2fad9146d 100644
--- a/packages/kit/src/tooltip/TooltipContent.tsx
+++ b/packages/kit/src/tooltip/TooltipContent.tsx
@@ -40,7 +40,7 @@ const StyledContentWrapper = styled(TooltipPrimitive.Content, {
   borderRadius: theme.radii["012"],
   padding: theme.space["050"],
   color: theme.colors.primary,
-  border: `solid 1px ${theme.colors.subtle}`,
+  border: `solid 1px ${theme.colors.outline}`,
   backgroundColor: theme.colors.secondary,
   width: "144px", //set width as per design specs
   userSelect: "none",
@@ -120,7 +120,7 @@ export const TooltipContent = forwardRef<
         >
           {children}
           <StyledArrow
-            stroke={theme.colors.subtle.value}
+            stroke={theme.colors.outline.value}
             strokeWidth="2"
             strokeDasharray="0 30 28.284"
           />