diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx
index 4a8589888..b2cb09411 100644
--- a/apps/website/screens/common/HeadingLink.tsx
+++ b/apps/website/screens/common/HeadingLink.tsx
@@ -40,7 +40,7 @@ const HeadingAnchor = styled.a`
   }
   &:focus {
     opacity: 1;
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -4px;
   }
   &:hover {
diff --git a/apps/website/screens/theme-generator/components/branding/ColorCard.tsx b/apps/website/screens/theme-generator/components/branding/ColorCard.tsx
index c056ddcbb..014743f72 100644
--- a/apps/website/screens/theme-generator/components/branding/ColorCard.tsx
+++ b/apps/website/screens/theme-generator/components/branding/ColorCard.tsx
@@ -17,7 +17,7 @@ const ColorBox = styled.button<{ color: string }>`
   &:focus {
     outline-style: solid;
     outline-width: var(--border-width-m);
-    outline-color: var(--border-color-secondary-medium);
+    outline-color: var(--border-color-neutral-dark);
     outline-offset: 2px;
   }
 `;
diff --git a/packages/lib/src/accordion/AccordionItem.tsx b/packages/lib/src/accordion/AccordionItem.tsx
index c71f1649e..c5cbb9c35 100644
--- a/packages/lib/src/accordion/AccordionItem.tsx
+++ b/packages/lib/src/accordion/AccordionItem.tsx
@@ -27,14 +27,14 @@ const AccordionTrigger = styled.button`
   cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
   :focus,
   :focus-visible {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
   :hover:enabled,
   :active:enabled {
     background-color: var(--color-bg-primary-lighter);
   }
   :active:enabled {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
 
   &[aria-expanded="true"] {
diff --git a/packages/lib/src/action-icon/ActionIcon.tsx b/packages/lib/src/action-icon/ActionIcon.tsx
index 1442ed9c6..a3b963d86 100644
--- a/packages/lib/src/action-icon/ActionIcon.tsx
+++ b/packages/lib/src/action-icon/ActionIcon.tsx
@@ -45,7 +45,7 @@ const ActionIconContainer = styled.div<
       &:active:enabled {
         outline-style: solid;
         outline-width: ${getOutlineWidth(size)};
-        outline-color: var(--border-color-secondary-medium);
+        outline-color: var(--border-color-neutral-dark);
         outline-offset: -2px;
       }
     `}
diff --git a/packages/lib/src/base-menu/ItemAction.tsx b/packages/lib/src/base-menu/ItemAction.tsx
index df7d2a048..4ef1812b9 100644
--- a/packages/lib/src/base-menu/ItemAction.tsx
+++ b/packages/lib/src/base-menu/ItemAction.tsx
@@ -38,7 +38,7 @@ const Action = styled.a<{
       selected ? "var(--color-bg-primary-medium)" : "var(--color-bg-neutral-light)"};
   }
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -2px;
   }
 `;
diff --git a/packages/lib/src/breadcrumbs/Item.tsx b/packages/lib/src/breadcrumbs/Item.tsx
index 59b7707e0..c64bf1396 100644
--- a/packages/lib/src/breadcrumbs/Item.tsx
+++ b/packages/lib/src/breadcrumbs/Item.tsx
@@ -31,7 +31,7 @@ const Link = styled.a`
   cursor: pointer;
 
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -2px;
   }
 `;
diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts
index 9bd0f81cb..bf8c0e627 100644
--- a/packages/lib/src/button/utils.ts
+++ b/packages/lib/src/button/utils.ts
@@ -15,7 +15,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" |
     border-radius: var(--border-radius-s);
 
     &:focus:enabled {
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
       outline-offset: -2px;
     }`;
 
diff --git a/packages/lib/src/card/utils.ts b/packages/lib/src/card/utils.ts
index 20c84aa68..856ca2b8d 100644
--- a/packages/lib/src/card/utils.ts
+++ b/packages/lib/src/card/utils.ts
@@ -35,17 +35,17 @@ export const getCardStyles = (
     if (mode === "elevated") {
       hover = `box-shadow: var(--shadow-300);`;
       focus = `box-shadow: var(--shadow-100); 
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`;
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`;
       active = `box-shadow: var(--shadow-100);`;
     } else if (mode === "outlined") {
       if (selected) {
         hover = `border-width: var(--border-width-none);`;
-        focus = `border-width: var(--border-width-none); outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`;
+        focus = `border-width: var(--border-width-none); outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`;
         active = `border-width: var(--border-width-none);`;
       } else {
         hover = `border-width: var(--border-width-m); border-color: var(--border-color-neutral-medium);outline-offset: var(--border-width-none);`;
-        focus = `border-width: var(--boselectedrder-width-m); 
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);outline-offset: var(--border-width-none);`;
+        focus = `border-width: var(--border-width-m); 
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);outline-offset: var(--border-width-none);`;
         active = `border-width: var(--border-width-m); border-color: var(--border-color-neutral-strong);outline-offset: var(--border-width-none);`;
       }
     }
@@ -67,7 +67,7 @@ export const getSelectableWrapperStyles = (selected: boolean) => {
 
   if (selected) {
     hover = `outline-color: var(--border-color-primary-stronger);`;
-    focus = `outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);`;
+    focus = `outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);`;
     active = `outline-color: var(--border-color-primary-strong);`;
   }
 
diff --git a/packages/lib/src/checkbox/Checkbox.tsx b/packages/lib/src/checkbox/Checkbox.tsx
index 4a0cfc3f5..3f2a5e4d4 100644
--- a/packages/lib/src/checkbox/Checkbox.tsx
+++ b/packages/lib/src/checkbox/Checkbox.tsx
@@ -28,7 +28,7 @@ const Checkbox = styled.span<{
   ${({ disabled }) => disabled && "pointer-events: none;"}
 
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -2px;
   }
   svg {
diff --git a/packages/lib/src/chip/utils.ts b/packages/lib/src/chip/utils.ts
index adbb9804d..efde4534d 100644
--- a/packages/lib/src/chip/utils.ts
+++ b/packages/lib/src/chip/utils.ts
@@ -9,7 +9,7 @@ export const getChipStyles = (mode: ChipPropsType["mode"], selected?: boolean) =
   const commonStyles = `
     &:focus {
       border-color: transparent;
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     }`;
 
   switch (mode) {
diff --git a/packages/lib/src/container/Container.stories.tsx b/packages/lib/src/container/Container.stories.tsx
index 89f777fdf..e306e26a8 100644
--- a/packages/lib/src/container/Container.stories.tsx
+++ b/packages/lib/src/container/Container.stories.tsx
@@ -270,7 +270,7 @@ const Container = () => (
     <ExampleContainer>
       <DxcContainer
         outline={{
-          color: "var(--border-color-secondary-medium)",
+          color: "var(--border-color-neutral-dark)",
           style: "var(--border-style-default)",
           offset: "var(--spacing-padding-xxxs)",
         }}
diff --git a/packages/lib/src/data-grid/DataGrid.tsx b/packages/lib/src/data-grid/DataGrid.tsx
index fb8e747f7..b8d7db9d8 100644
--- a/packages/lib/src/data-grid/DataGrid.tsx
+++ b/packages/lib/src/data-grid/DataGrid.tsx
@@ -52,7 +52,7 @@ const DataGridContainer = styled.div<{
     background-color: var(--color-bg-neutral-lightest);
 
     &[aria-selected="true"] {
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     }
     .rdg-text-editor:focus {
       border-color: transparent;
diff --git a/packages/lib/src/date-input/Calendar.tsx b/packages/lib/src/date-input/Calendar.tsx
index 361cac830..554e02718 100644
--- a/packages/lib/src/date-input/Calendar.tsx
+++ b/packages/lib/src/date-input/Calendar.tsx
@@ -79,7 +79,7 @@ const DayCellButton = styled.button<{
     `border: var(--border-width-s) var(--border-style-default) var(--border-color-primary-lighter);`}
 
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
   &:hover {
     background-color: ${(props) =>
diff --git a/packages/lib/src/date-input/DatePicker.tsx b/packages/lib/src/date-input/DatePicker.tsx
index d40fbbdfb..0cfed3540 100644
--- a/packages/lib/src/date-input/DatePicker.tsx
+++ b/packages/lib/src/date-input/DatePicker.tsx
@@ -45,7 +45,7 @@ const HeaderButton = styled.button`
     background-color: var(--color-bg-primary-light);
   }
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
   &:active {
     color: var(--color-fg-neutral-bright);
diff --git a/packages/lib/src/date-input/DateUnitPicker.tsx b/packages/lib/src/date-input/DateUnitPicker.tsx
index 2df05ad72..35d20e0e5 100644
--- a/packages/lib/src/date-input/DateUnitPicker.tsx
+++ b/packages/lib/src/date-input/DateUnitPicker.tsx
@@ -55,7 +55,7 @@ const PickerButton = styled.button<{
     color: var(--color-fg-neutral-dark);
   }
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
   &:active {
     color: var(--color-fg-neutral-bright);
diff --git a/packages/lib/src/dropdown/Dropdown.tsx b/packages/lib/src/dropdown/Dropdown.tsx
index 5537d2945..7efcc9aa0 100644
--- a/packages/lib/src/dropdown/Dropdown.tsx
+++ b/packages/lib/src/dropdown/Dropdown.tsx
@@ -62,7 +62,7 @@ const DropdownTrigger = styled.button<{
     !props.disabled &&
     `
       &:focus {
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
         outline-offset: -2px;
       }
       &:hover, &:active {
diff --git a/packages/lib/src/dropdown/DropdownMenuItem.tsx b/packages/lib/src/dropdown/DropdownMenuItem.tsx
index b11b21dfd..b56c6ef98 100644
--- a/packages/lib/src/dropdown/DropdownMenuItem.tsx
+++ b/packages/lib/src/dropdown/DropdownMenuItem.tsx
@@ -21,7 +21,7 @@ const DropdownMenuItemContainer = styled.li<{
   ${(props) =>
     props.visuallyFocused &&
     `
-  outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); 
+  outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); 
   outline-offset: calc(-1 * var(--border-width-m));
 `}
   &:first-child {
diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx
index 92ed21438..d9283aa77 100644
--- a/packages/lib/src/file-input/FileInput.tsx
+++ b/packages/lib/src/file-input/FileInput.tsx
@@ -79,7 +79,7 @@ const DragDropArea = styled.div<{
     props.isDragging &&
     `
       background-color: var(--color-bg-secondary-lightest);
-      border: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      border: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     `}
   cursor: ${(props) => props.disabled && "not-allowed"};
 `;
diff --git a/packages/lib/src/footer/Footer.tsx b/packages/lib/src/footer/Footer.tsx
index 0edd31c5b..63cadef13 100644
--- a/packages/lib/src/footer/Footer.tsx
+++ b/packages/lib/src/footer/Footer.tsx
@@ -109,7 +109,7 @@ const SocialAnchor = styled.a`
 
   &:focus,
   &:focus-visible {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: 0px;
   }
 `;
diff --git a/packages/lib/src/link/Link.tsx b/packages/lib/src/link/Link.tsx
index 9c177da89..16ee0b3c4 100644
--- a/packages/lib/src/link/Link.tsx
+++ b/packages/lib/src/link/Link.tsx
@@ -35,7 +35,7 @@ const Link = styled.a<{
   ${({ disabled, inheritColor }) =>
     !inheritColor && !disabled && "&:visited { color: var(--color-fg-primary-strongest); }"};
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     ${({ disabled }) => disabled && "outline: none"}
   }
 `;
diff --git a/packages/lib/src/message-input/utils.ts b/packages/lib/src/message-input/utils.ts
index 527cf9ee9..2c892c306 100644
--- a/packages/lib/src/message-input/utils.ts
+++ b/packages/lib/src/message-input/utils.ts
@@ -12,39 +12,47 @@ export const getFilePreview = (file: File): string => {
 };
 
 export const inputStylesByStatePromptInput = (disabled: boolean, error: boolean, focus?: boolean) => css`
-  background-color: ${disabled
-    ? `var(--color-bg-neutral-lighter)`
-    : `var(--color-bg-neutral-lightest);
-`};
+  background-color: ${
+    disabled
+      ? `var(--color-bg-neutral-lighter)`
+      : `var(--color-bg-neutral-lightest);
+`
+  };
 
   border-radius: var(--border-radius-l);
   border-width: ${!disabled && error ? "var(--border-width-m)" : "var(--border-width-s)"};
   border-style: var(--border-style-default);
-  border-color: ${disabled
-    ? "var(--border-color-neutral-strong)"
-    : error
-      ? "var(--border-color-error-medium)"
-      : "var(--border-color-neutral-lighter)"};
+  border-color: ${
+    disabled
+      ? "var(--border-color-neutral-strong)"
+      : error
+        ? "var(--border-color-error-medium)"
+        : "var(--border-color-neutral-lighter)"
+  };
 
-  ${!disabled
-    ? `
+  ${
+    !disabled
+      ? `
       &:hover {
         border-color: ${error ? "var(--border-color-error-strong)" : "var(--border-color-primary-strong)"};
       }
 
       &:focus {
         outline-offset: -2px;
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
         border-color: transparent;
       }
     `
-    : "cursor: not-allowed;"};
+      : "cursor: not-allowed;"
+  };
 
-  ${focus && !disabled
-    ? `
+  ${
+    focus && !disabled
+      ? `
       outline-offset: -2px;
-      outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+      outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
       border-color: transparent;
     `
-    : ""};
+      : ""
+  };
 `;
diff --git a/packages/lib/src/nav-tabs/Tab.tsx b/packages/lib/src/nav-tabs/Tab.tsx
index ac4f76b96..f9d964390 100644
--- a/packages/lib/src/nav-tabs/Tab.tsx
+++ b/packages/lib/src/nav-tabs/Tab.tsx
@@ -41,7 +41,7 @@ const TabLink = styled.div<
         background-color: var(--color-bg-primary-lighter);
       }
       :focus {
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
         outline-offset: calc(var(--border-width-m) * -1);
       }
       :active {
diff --git a/packages/lib/src/quick-nav/QuickNav.tsx b/packages/lib/src/quick-nav/QuickNav.tsx
index 5e322e1ca..fec736a52 100644
--- a/packages/lib/src/quick-nav/QuickNav.tsx
+++ b/packages/lib/src/quick-nav/QuickNav.tsx
@@ -55,7 +55,7 @@ const Link = styled.a`
     color: var(--color-fg-primary-strong);
   }
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
 `;
 
diff --git a/packages/lib/src/radio-group/RadioInput.tsx b/packages/lib/src/radio-group/RadioInput.tsx
index c48be3d49..d3a57238c 100644
--- a/packages/lib/src/radio-group/RadioInput.tsx
+++ b/packages/lib/src/radio-group/RadioInput.tsx
@@ -25,7 +25,7 @@ const RadioButton = styled.span<CommonStylingProps>`
   ${({ disabled }) => disabled && "pointer-events: none;"}
 
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -2px;
   }
 `;
diff --git a/packages/lib/src/resultset-table/ResultsetTable.tsx b/packages/lib/src/resultset-table/ResultsetTable.tsx
index a493f8281..f64a4f008 100644
--- a/packages/lib/src/resultset-table/ResultsetTable.tsx
+++ b/packages/lib/src/resultset-table/ResultsetTable.tsx
@@ -23,7 +23,7 @@ const SortingHeader = styled.span<{
       ? `border-radius: var(--border-radius-xs);
          cursor: pointer;
          &:focus {
-           outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);s
+           outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
          }`
       : "cursor: default;"}
 `;
diff --git a/packages/lib/src/search-bar/SearchBar.tsx b/packages/lib/src/search-bar/SearchBar.tsx
index 6d641b351..d069009d4 100644
--- a/packages/lib/src/search-bar/SearchBar.tsx
+++ b/packages/lib/src/search-bar/SearchBar.tsx
@@ -33,7 +33,7 @@ const SearchBarContainer = styled.div<{ disabled: Required<SearchBarProps>["disa
           &:focus-visible {
             border-color: transparent;
             outline-offset: -2px;
-            outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+            outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
           }
         `
       : css`
diff --git a/packages/lib/src/select/ListOption.tsx b/packages/lib/src/select/ListOption.tsx
index c5015cd8a..0a508d83f 100644
--- a/packages/lib/src/select/ListOption.tsx
+++ b/packages/lib/src/select/ListOption.tsx
@@ -20,7 +20,7 @@ const OptionItem = styled.li<{
   }
   ${({ visualFocused }) =>
     visualFocused &&
-    "outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px;"}
+    "outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px;"}
 `;
 
 const StyledOption = styled.span<{
diff --git a/packages/lib/src/slider/Slider.tsx b/packages/lib/src/slider/Slider.tsx
index f5e55eb6d..fc4d0e109 100644
--- a/packages/lib/src/slider/Slider.tsx
+++ b/packages/lib/src/slider/Slider.tsx
@@ -82,7 +82,7 @@ const thumbStyles = (disabled: SliderPropsType["disabled"]) => css`
   }
 `;
 const thumbFocusStyles = css`
-  outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+  outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   outline-offset: 2px;
 `;
 const SliderInput = styled.input<{
diff --git a/packages/lib/src/switch/Switch.tsx b/packages/lib/src/switch/Switch.tsx
index 08cd1d0af..6b4ad1199 100644
--- a/packages/lib/src/switch/Switch.tsx
+++ b/packages/lib/src/switch/Switch.tsx
@@ -53,7 +53,7 @@ const SwitchContainer = styled.div<{
     /* Thumb focus */
     &:not([aria-disabled="true"]) {
       > span::before {
-        outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+        outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
         outline-offset: var(--spacing-padding-xxxs);
       }
     }
diff --git a/packages/lib/src/tabs/Tab.tsx b/packages/lib/src/tabs/Tab.tsx
index 84283f272..bf2d92eaf 100644
--- a/packages/lib/src/tabs/Tab.tsx
+++ b/packages/lib/src/tabs/Tab.tsx
@@ -21,7 +21,7 @@ export const sharedTabStyles = `
     background: var(--color-bg-primary-lighter);
   }
   &:focus:enabled {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: -2px;
   }
   &:disabled {
diff --git a/packages/lib/src/text-input/Suggestion.tsx b/packages/lib/src/text-input/Suggestion.tsx
index 20cdc0376..462f709cd 100644
--- a/packages/lib/src/text-input/Suggestion.tsx
+++ b/packages/lib/src/text-input/Suggestion.tsx
@@ -19,7 +19,7 @@ const SuggestionContainer = styled.li<{
   }
   ${({ visuallyFocused }) =>
     visuallyFocused &&
-    "outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium); outline-offset: -2px;"}
+    "outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark); outline-offset: -2px;"}
 `;
 
 const StyledSuggestion = styled.span`
diff --git a/packages/lib/src/time-input/TimePickerColumn.tsx b/packages/lib/src/time-input/TimePickerColumn.tsx
index a5e953726..7db35e0b2 100644
--- a/packages/lib/src/time-input/TimePickerColumn.tsx
+++ b/packages/lib/src/time-input/TimePickerColumn.tsx
@@ -23,7 +23,7 @@ const TimePickerOption = styled.li<{
   color: ${(props) => (props.selected ? "var(--color-fg-neutral-bright);" : "var(--color-fg-neutral-dark);")};
 
   &:focus {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
     outline-offset: calc(var(--border-width-m) * -1);
   }
   &:hover {
diff --git a/packages/lib/src/wizard/Wizard.tsx b/packages/lib/src/wizard/Wizard.tsx
index fb0799b36..50d1cd06b 100644
--- a/packages/lib/src/wizard/Wizard.tsx
+++ b/packages/lib/src/wizard/Wizard.tsx
@@ -113,7 +113,7 @@ const Step = styled.button<{
       }
     `}
   &:focus:enabled {
-    outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+    outline: var(--border-width-m) var(--border-style-default) var(--border-color-neutral-dark);
   }
   &:disabled {
     cursor: not-allowed;