diff --git a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 3716d1be6..382870c1e 100644
--- a/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/src/core/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -158,15 +158,15 @@ exports[`calling render with the same component on the same container does not r
 .c5:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Button/__snapshots__/Button.test.tsx.snap b/src/core/Button/__snapshots__/Button.test.tsx.snap
index b5a524989..71c270d1b 100644
--- a/src/core/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/core/Button/__snapshots__/Button.test.tsx.snap
@@ -87,15 +87,15 @@ exports[`calling render with the same component on the same container does not r
 .c2:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index bb37de7b4..c26da1644 100644
--- a/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/core/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -61,15 +61,15 @@ exports[`calling render with the same component on the same container does not r
 .c1 > [data-reach-menu-button].fi-dropdown_button:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Expander/__snapshots__/Expander.test.tsx.snap b/src/core/Expander/__snapshots__/Expander.test.tsx.snap
index f77e4d4a6..519fe6509 100644
--- a/src/core/Expander/__snapshots__/Expander.test.tsx.snap
+++ b/src/core/Expander/__snapshots__/Expander.test.tsx.snap
@@ -178,15 +178,15 @@ exports[`calling render with the same component on the same container does not r
 .c2 .fi-expander_title:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
index d0b8ad15a..35bf5a666 100644
--- a/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
+++ b/src/core/Form/SearchInput/__snapshots__/SearchInput.test.tsx.snap
@@ -148,15 +148,15 @@ exports[`calling render with the same component on the same container does not r
 .c2 .fi-text-input_container:focus-within:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
index 2c5a51702..95a2d7a50 100644
--- a/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/src/core/Form/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -143,15 +143,15 @@ exports[`calling render with the same component on the same container does not r
 .c2 .fi-text-input_container:focus-within:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
index f5eabe877..240615dc3 100644
--- a/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
+++ b/src/core/Form/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -207,15 +207,15 @@ exports[`Toggle variant default:  calling render with the same component on the
 .c1 + .fi-toggle--with-button:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
@@ -240,15 +240,15 @@ exports[`Toggle variant default:  calling render with the same component on the
 .c1 + .fi-toggle--with-input:focus-within:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
@@ -721,15 +721,15 @@ exports[`Toggle variant withInput:  calling render with the same component on th
 .c1 + .fi-toggle--with-button:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
@@ -754,15 +754,15 @@ exports[`Toggle variant withInput:  calling render with the same component on th
 .c1 + .fi-toggle--with-input:focus-within:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
index fb7e96a52..24484fa1a 100644
--- a/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
+++ b/src/core/LanguageMenu/__snapshots__/LanguageMenu.test.tsx.snap
@@ -47,15 +47,15 @@ exports[`calling render with the same component on the same container does not r
 .c1 > [data-reach-menu-button].fi-language-menu_button:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Link/__snapshots__/Link.test.tsx.snap b/src/core/Link/__snapshots__/Link.test.tsx.snap
index 35fecc4bc..b2d0173f1 100644
--- a/src/core/Link/__snapshots__/Link.test.tsx.snap
+++ b/src/core/Link/__snapshots__/Link.test.tsx.snap
@@ -62,15 +62,15 @@ exports[`calling render with the same component on the same container does not r
 .c1:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
index 92cc05a2a..ebab10c50 100644
--- a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
+++ b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap
@@ -110,15 +110,15 @@ exports[`calling render with the same component on the same container does not r
 .c1:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/theme/__snapshots__/tokens.test.tsx.snap b/src/core/theme/__snapshots__/tokens.test.tsx.snap
index 21ac7a83a..3ee84940b 100644
--- a/src/core/theme/__snapshots__/tokens.test.tsx.snap
+++ b/src/core/theme/__snapshots__/tokens.test.tsx.snap
@@ -118,15 +118,15 @@ exports[`snapshot testing 1`] = `
 .c5:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
@@ -202,15 +202,15 @@ exports[`snapshot testing 1`] = `
 .c2 > .fi-expander-group_all-button:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
@@ -292,15 +292,15 @@ exports[`snapshot testing 1`] = `
 .c6 .fi-expander_title:focus:after {
   content: '';
   position: absolute;
-  top: -4px;
-  right: -4px;
-  bottom: -4px;
-  left: -4px;
-  border-radius: 4px;
+  top: -2px;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  border-radius: 2px;
   background-color: transparent;
-  border: 1px solid hsl(23,82%,53%);
+  border: 0px solid white;
   box-sizing: border-box;
-  box-shadow: 0 0 10px 0 hsl(23,82%,53%);
+  box-shadow: 0 0 0 2px hsl(196,77%,55%);
   z-index: 9999;
 }
 
diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts
index 41643d251..6df163eb1 100644
--- a/src/core/theme/colors.ts
+++ b/src/core/theme/colors.ts
@@ -117,9 +117,10 @@ export const gradients = {
 };
 
 export const outlines = {
-  basic: boxshadowOutline({
-    color: colors.accentBase,
-    offset: '4px',
+  afterPseudo: boxshadowOutline({
+    color: colors.accentSecondary,
+    border: '0px',
+    offset: '2px',
     zIndex: zindexes.focus,
   }),
 };
diff --git a/src/core/theme/radius.ts b/src/core/theme/radius.ts
index d91042954..c4ab10005 100644
--- a/src/core/theme/radius.ts
+++ b/src/core/theme/radius.ts
@@ -1,4 +1,4 @@
 export const radius = {
   basic: '2px',
-  focus: '4px',
+  focus: '2px',
 };
diff --git a/src/core/theme/utils/focus.ts b/src/core/theme/utils/focus.ts
index 8be5e731d..5acf16997 100644
--- a/src/core/theme/utils/focus.ts
+++ b/src/core/theme/utils/focus.ts
@@ -11,7 +11,7 @@ export const focus = ({
 }) => {
   const style = !!outline
     ? outline
-    : themeOrTokens(tokensOrTheme).outlines.basic;
+    : themeOrTokens(tokensOrTheme).outlines.afterPseudo;
   return !!noPseudo
     ? style
     : css`
diff --git a/src/core/theme/utils/outline.ts b/src/core/theme/utils/outline.ts
index 62697c965..251c06b44 100644
--- a/src/core/theme/utils/outline.ts
+++ b/src/core/theme/utils/outline.ts
@@ -22,6 +22,7 @@ const afterBoxshadow = ({
   borderRadius,
   border,
   color,
+  borderColor,
   zIndex,
 }: {
   offset: string;
@@ -29,6 +30,7 @@ const afterBoxshadow = ({
   border: string;
   color: string;
   zIndex: number;
+  borderColor: string;
 }) => css`
   position: relative;
   &:after {
@@ -40,15 +42,16 @@ const afterBoxshadow = ({
     left: -${offset};
     border-radius: ${borderRadius};
     ${offset !== '0' ? 'background-color: transparent;' : ''}
-    border: ${border} solid ${color};
+    border: ${border} solid ${borderColor};
     box-sizing: border-box;
-    box-shadow: 0 0 10px 0 ${color};
+    box-shadow: 0 0 0 2px ${color};
     ${!!zIndex && `z-index: ${zIndex};`}
   }`;
 
 // TODO Refactor, create interfaces (and extend with Partial<>), add JSDOC for functions
 export const boxshadowOutline = ({
   color = colors.accentBase,
+  borderColor = 'white',
   offset = '0',
   border = '1px',
   borderRadius = radius.focus,
@@ -56,6 +59,7 @@ export const boxshadowOutline = ({
   afterPseudo = true,
 }: {
   color?: string;
+  borderColor?: string;
   offset?: string;
   border?: string;
   borderRadius?: string;
@@ -68,7 +72,14 @@ export const boxshadowOutline = ({
   return css`
     outline: 0;
     ${!!afterPseudo
-      ? afterBoxshadow({ offset, borderRadius, border, color, zIndex })
+      ? afterBoxshadow({
+          offset,
+          borderRadius,
+          border,
+          color,
+          borderColor,
+          zIndex,
+        })
       : boxshadow({ borderRadius, border, color })}
     ${focusVisible}
   `;