diff --git a/.changeset/giant-bees-talk.md b/.changeset/giant-bees-talk.md
new file mode 100644
index 0000000000..664a3faccd
--- /dev/null
+++ b/.changeset/giant-bees-talk.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+Global CSS focus styles
diff --git a/docs/src/stories/components/Forms/FormGroups.stories.jsx b/docs/src/stories/components/Forms/FormGroup.stories.jsx
similarity index 100%
rename from docs/src/stories/components/Forms/FormGroups.stories.jsx
rename to docs/src/stories/components/Forms/FormGroup.stories.jsx
diff --git a/docs/src/stories/components/Link/Link.stories.jsx b/docs/src/stories/components/Link/Link.stories.jsx
index b153ae71dd..a4a43380f6 100644
--- a/docs/src/stories/components/Link/Link.stories.jsx
+++ b/docs/src/stories/components/Link/Link.stories.jsx
@@ -71,7 +71,7 @@ export const LinkTemplate = ({label, variant, href, noUnderline, focusElement, f
   <>
     <a
       href={href}
-      className={clsx(variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
+      className={clsx('Link', variant && `${variant}`, noUnderline && 'no-underline', focusAllElements && 'focus')}
     >
       {label}
     </a>
diff --git a/docs/src/stories/components/Marketing/MarketingButton.stories.jsx b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
index 69ef74016b..d523944fc7 100644
--- a/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
+++ b/docs/src/stories/components/Marketing/MarketingButton.stories.jsx
@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['ButtonTemplate'],
+  excludeStories: ['MarketingButtonTemplate'],
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
@@ -77,7 +77,7 @@ const focusMethod = function getFocus() {
   button.focus()
 }
 
-export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
+export const MarketingButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
   <>
     <button
       disabled={disabled}
@@ -111,7 +111,7 @@ export const ButtonTemplate = ({label, variant, disabled, size, animated, focusE
   </>
 )
 
-export const Playground = ButtonTemplate.bind({})
+export const Playground = MarketingButtonTemplate.bind({})
 Playground.args = {
   animated: false,
   focusElement: false,
diff --git a/docs/src/stories/components/Marketing/MarketingLink.stories.jsx b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
index 028b067f09..5acd98b70f 100644
--- a/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
+++ b/docs/src/stories/components/Marketing/MarketingLink.stories.jsx
@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['LinkTemplate'],
+  excludeStories: ['MarketingLinkTemplate'],
   argTypes: {
     size: {
       options: [0, 1], // iterator
@@ -67,7 +67,7 @@ const focusMethod = function getFocus() {
   link.focus()
 }
 
-export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
+export const MarketingLinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
   <>
     <a
       href={href}
@@ -98,7 +98,7 @@ export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAl
   </>
 )
 
-export const Playground = LinkTemplate.bind({})
+export const Playground = MarketingLinkTemplate.bind({})
 Playground.args = {
   label: 'Link label',
   href: '/',
diff --git a/docs/src/stories/patterns/FocusStyles.stories.jsx b/docs/src/stories/patterns/FocusStyles.stories.jsx
new file mode 100644
index 0000000000..7b3dd2f747
--- /dev/null
+++ b/docs/src/stories/patterns/FocusStyles.stories.jsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from '../components/Button/Button.stories.jsx'
+import {CheckboxTemplate} from '../components/Forms/Checkbox.stories.jsx'
+import {InputTemplate} from '../components/Forms/Input.stories.jsx'
+import {SelectTemplate} from '../components/Forms/Select.stories.jsx'
+import {TextareaTemplate} from '../components/Forms/Textarea.stories.jsx'
+import {LinkTemplate} from '../components/Link/Link.stories.jsx'
+import {MarketingButtonTemplate} from '../components/Marketing/MarketingButton.stories.jsx'
+import {MarketingLinkTemplate} from '../components/Marketing/MarketingLink.stories.jsx'
+import {TabNavTemplate} from '../components/Navigation/TabNav.stories.jsx'
+import {TabNavItemTemplate} from '../components/Navigation/TabNavItem.stories.jsx'
+
+export default {
+  title: 'Patterns/FocusStyles',
+  layout: 'padded'
+}
+
+export const FocusStyles = ({}) => (
+  <div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <ButtonTemplate variant="btn-primary" label="Primary" />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" />
+      <ButtonTemplate variant="btn-outline" label="Outline" />
+      <ButtonTemplate variant="btn-danger" label="Danger" />
+      <ButtonTemplate variant="btn-link" label="Link" />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" />
+      <ButtonTemplate
+        variant="btn-octicon"
+        leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+            <path d="M8 16c.9 0 1.7-.6 1.9-1.5.1-.3-.1-.5-.4-.5h-3c-.3 0-.5.2-.4.5.2.9 1 1.5 1.9 1.5zM3 5c0-2.8 2.2-5 5-5s5 2.2 5 5v3l1.7 2.6c.2.2.3.5.3.8 0 .8-.7 1.5-1.5 1.5h-11c-.8.1-1.5-.6-1.5-1.4 0-.3.1-.6.3-.8L3 8.1V5z"></path>
+          </svg>`}
+      />
+      <ButtonTemplate variant="btn-primary" label="Primary" disabled />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" disabled />
+      <ButtonTemplate variant="btn-outline" label="Outline" disabled />
+      <ButtonTemplate variant="btn-danger" label="Danger" disabled />
+      <ButtonTemplate variant="btn-link" label="Link" disabled />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" disabled />
+    </div>
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <CheckboxTemplate label="checkbox" type="checkbox" />
+      <CheckboxTemplate label="radio" type="radio" />
+      <InputTemplate label="input" type="text" />
+      <input className="form-control border-0" placeholder="no border form control"></input>
+      <SelectTemplate label="select" />
+      <TextareaTemplate label="textarea" />
+      <LinkTemplate label="Primer link" href="/" />
+      <a href="/">Link with no CSS class</a>
+      <MarketingButtonTemplate label="Marketing Button" />
+      <MarketingLinkTemplate label="Marketing Link" href="/" />
+    </div>
+    <div>
+      <TabNavTemplate>
+        <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
+        <TabNavItemTemplate text="Second tab" href="#url" />
+      </TabNavTemplate>
+    </div>
+    <div class="BtnGroup">
+      <a href="/" class="btn-sm btn BtnGroup-item">
+        One
+      </a>
+      <a href="/" class="btn-sm btn BtnGroup-item">
+        Two
+      </a>
+    </div>
+    <div class="Box faketarget">:target styles</div>
+    <nav class="UnderlineNav" aria-label="Foo bar">
+      <div class="UnderlineNav-body">
+        <a class="UnderlineNav-item" href="#url" aria-current="page">
+          Item 1
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 2
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 3
+        </a>
+        <a class="UnderlineNav-item" href="#url">
+          Item 4
+        </a>
+      </div>
+      <div class="UnderlineNav-actions">
+        <a class="btn btn-sm">Button</a>
+      </div>
+    </nav>
+  </div>
+)
diff --git a/src/actionlist/action-list-item.scss b/src/actionlist/action-list-item.scss
index f658277845..5f4ecb1a83 100644
--- a/src/actionlist/action-list-item.scss
+++ b/src/actionlist/action-list-item.scss
@@ -1,12 +1,5 @@
 // stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors
 
-@mixin focusOutline {
-  position: relative;
-  z-index: 1;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-accent-fg); // this color breaks convention
-}
-
 @mixin activeIndicatorLine {
   position: absolute;
   top: calc(50% - 12px);
@@ -314,6 +307,16 @@
     text-decoration: none;
   }
 
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
   &:focus-visible {
     @include focusOutline;
   }
diff --git a/src/autocomplete/autocomplete.scss b/src/autocomplete/autocomplete.scss
index f0bf279e25..aac7ae0fd1 100644
--- a/src/autocomplete/autocomplete.scss
+++ b/src/autocomplete/autocomplete.scss
@@ -31,9 +31,9 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    border-color: var(--color-accent-fg);
+
+    @include focusBoxShadowInset;
   }
 
   .form-control {
@@ -42,10 +42,6 @@
     // stylelint-disable-next-line
     border: none;
     box-shadow: none;
-
-    &:focus {
-      box-shadow: none;
-    }
   }
 }
 
diff --git a/src/base/base.scss b/src/base/base.scss
index c0772e871c..7778f4b5d3 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-no-qualifying-type
 * {
   box-sizing: border-box;
 }
@@ -77,10 +77,70 @@ button {
 }
 
 details {
-  summary { cursor: pointer; }
+  summary {
+    cursor: pointer;
+  }
 
   &:not([open]) {
     // Set details content hidden by default for browsers that don't do this
-    > *:not(summary) { display: none !important; }
+    > *:not(summary) {
+      display: none !important;
+    }
+  }
+}
+
+// global focus styles
+
+a,
+button,
+[role='button'],
+input[type='radio'],
+input[type='checkbox'] {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+}
+
+a:not([class]),
+input[type='radio'],
+input[type='checkbox'] {
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// for handling focus conditionally
+.focus {
+  @include focusBoxShadowInset;
+}
+
+// Windows High Contrast mode
+@media (forced-colors: active) {
+  *:focus,
+  *:focus-visible {
+    outline: solid 1px transparent;
+  }
+
+  input:not([type='radio'], [type='checkbox']),
+  textarea,
+  select {
+    &:focus,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
   }
 }
diff --git a/src/base/normalize.scss b/src/base/normalize.scss
index 70222f260d..193a138a3d 100644
--- a/src/base/normalize.scss
+++ b/src/base/normalize.scss
@@ -39,7 +39,8 @@ header,
 main, /* 2 */
 menu,
 nav,
-section { /* 1 */
+section {
+  /* 1 */
   display: block;
 }
 
@@ -96,16 +97,6 @@ a {
   background-color: transparent; /* 1 */
 }
 
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
 /* Text-level semantics
    ========================================================================== */
 
@@ -278,7 +269,8 @@ optgroup {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -288,7 +280,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
   -webkit-appearance: button; /* 2 */
 }
 
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
@@ -367,8 +337,8 @@ textarea {
  * 2. Remove the padding in IE 10-.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -377,27 +347,17 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
 
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 316b54caf2..27563db247 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -66,8 +66,8 @@
   background-color: var(--color-btn-bg);
   border-color: var(--color-btn-border);
   box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
-  transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-  transition-property: color, background-color, border-color;
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
@@ -100,14 +100,6 @@
       color: var(--color-primer-fg-disabled);
     }
   }
-
-  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
-  &:focus,
-  &.focus {
-    border-color: var(--color-btn-focus-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
-  }
 }
 
 // Primary button
@@ -125,6 +117,22 @@
     border-color: var(--color-btn-primary-hover-border);
   }
 
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+
   &:active,
   &.selected,
   &[aria-selected='true'] {
@@ -144,13 +152,6 @@
     }
   }
 
-  &:focus,
-  &.focus {
-    background-color: var(--color-btn-primary-focus-bg);
-    border-color: var(--color-btn-primary-focus-border);
-    box-shadow: var(--color-btn-primary-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-primary-counter-bg);
@@ -161,6 +162,26 @@
   }
 }
 
+// ensure links styled as button primary gets proper focus style
+// stylelint-disable-next-line selector-no-qualifying-type
+a.btn-primary {
+  // fallback :focus state
+  &:focus {
+    @include focusOutlineOnEmphasis;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutlineOnEmphasis;
+  }
+}
+
 // Outline button
 
 .btn-outline {
@@ -189,6 +210,22 @@
     background-color: var(--color-btn-outline-selected-bg);
     border-color: var(--color-btn-outline-selected-border);
     box-shadow: var(--color-btn-outline-selected-shadow);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:disabled,
@@ -204,11 +241,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-outline-focus-border);
-    box-shadow: var(--color-btn-outline-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-outline-counter-bg);
@@ -266,11 +298,6 @@
     }
   }
 
-  &:focus {
-    border-color: var(--color-btn-danger-focus-border);
-    box-shadow: var(--color-btn-danger-focus-shadow);
-  }
-
   .Counter {
     color: inherit;
     background-color: var(--color-btn-danger-counter-bg);
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index bc42d6751d..328b2fe27a 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -28,6 +28,14 @@
       cursor: default;
     }
   }
+
+  &:not(.dropdown-item) {
+    &:focus,
+    &:focus-visible {
+      border-radius: $border-radius;
+      outline-offset: 0;
+    }
+  }
 }
 
 // Invisible button
@@ -37,6 +45,7 @@
   color: var(--color-accent-fg);
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
+  border-radius: $border-radius;
   box-shadow: none;
 
   &:hover,
@@ -48,15 +57,14 @@
   }
 
   &:active,
-  &:focus,
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
     color: var(--color-accent-fg);
-    background-color: none;
+    background: none;
     border-color: var(--color-btn-active-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
+
+    @include focusOutline;
   }
 
   &:active &.zeroclipboard-is-active {
@@ -89,14 +97,23 @@
   border: 0;
   box-shadow: none;
 
-  &:hover { color: var(--color-accent-fg); }
+  &:hover {
+    color: var(--color-accent-fg);
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius;
+  }
 
   &.disabled,
   &[aria-disabled='true'] {
     color: var(--color-primer-fg-disabled);
     cursor: default;
 
-    &:hover { color: var(--color-primer-fg-disabled); }
+    &:hover {
+      color: var(--color-primer-fg-disabled);
+    }
   }
 }
 
@@ -112,18 +129,13 @@
   color: var(--color-fg-muted);
   background: transparent;
   border: 0;
-  outline: none;
 
   &:hover {
     color: var(--color-fg-default);
   }
 
-  &:active,
-  &:focus {
-    color: var(--color-fg-muted);
-    border-color: var(--color-btn-active-border);
-    outline: none;
-    box-shadow: var(--color-btn-focus-shadow);
+  &:active {
+    @include focusOutline;
   }
 }
 
@@ -216,10 +228,4 @@
     color: var(--color-accent-fg);
     cursor: pointer;
   }
-
-  &:focus {
-    z-index: 1;
-    outline: 0;
-    box-shadow: var(--color-primer-shadow-focus);
-  }
 }
diff --git a/src/dropdown/dropdown.scss b/src/dropdown/dropdown.scss
index 4789eccd0c..bf959e154f 100644
--- a/src/dropdown/dropdown.scss
+++ b/src/dropdown/dropdown.scss
@@ -82,12 +82,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  &:focus,
   &:hover {
     color: var(--color-fg-on-emphasis);
     text-decoration: none;
     background-color: var(--color-accent-emphasis);
-    outline: none;
 
     > .octicon {
       color: inherit;
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 23dfc33f30..b8eb49990a 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -29,14 +29,32 @@ label {
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
   border: $border-width $border-style var(--color-border-default);
   border-radius: $border-radius;
-  outline: none;
   box-shadow: var(--color-primer-shadow-inset);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
 
-  &.focus,
   &:focus {
-    border-color: var(--color-accent-emphasis);
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    @include focusBoxShadowInset;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      border-color: transparent;
+
+      @include focusBoxShadowInset(1px, transparent);
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusBoxShadowInset;
+  }
+
+  // override form controls with no border in focused state
+  &.border-0 {
+    &:focus,
+    &:focus-visible {
+      border: $border-width $border-style var(--color-accent-fg) !important;
+    }
   }
 
   &[disabled] {
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 1ec0f8a278..671676b354 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -33,12 +33,18 @@
       background-color: var(--color-canvas-default);
     }
 
-    &.shorter { width: 130px; }
+    &.shorter {
+      width: 130px;
+    }
 
-    &.short { width: 250px; }
+    &.short {
+      width: 250px;
+    }
 
     &.input-block,
-    &.long { width: 100%; }
+    &.long {
+      width: 100%;
+    }
   }
 
   // Textarea
@@ -89,9 +95,13 @@
     h4 {
       margin: $spacer-1 0 0;
 
-      &.is-error { color: var(--color-danger-fg); }
+      &.is-error {
+        color: var(--color-danger-fg);
+      }
 
-      &.is-success { color: var(--color-success-fg); }
+      &.is-success {
+        color: var(--color-success-fg);
+      }
 
       + .note {
         margin-top: 0;
@@ -203,13 +213,18 @@
       background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
       border-color: var(--color-success-muted);
 
-      &::after { border-bottom-color: var(--color-success-subtle); }
-      &::before { border-bottom-color: var(--color-success-muted); }
+      &::after {
+        border-bottom-color: var(--color-success-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-success-muted);
+      }
     }
   }
 
   &.warn {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-attention-emphasis);
     }
 
@@ -219,13 +234,18 @@
       background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
       border-color: var(--color-attention-muted);
 
-      &::after { border-bottom-color: var(--color-attention-subtle); }
-      &::before { border-bottom-color: var(--color-attention-muted); }
+      &::after {
+        border-bottom-color: var(--color-attention-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-attention-muted);
+      }
     }
   }
 
   &.errored {
-    .form-control {
+    .form-control:not(:focus, :focus-visible) {
       border-color: var(--color-danger-emphasis);
     }
 
@@ -239,8 +259,13 @@
       background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
       border-color: var(--color-danger-muted);
 
-      &::after { border-bottom-color: var(--color-danger-subtle); }
-      &::before { border-bottom-color: var(--color-danger-muted); }
+      &::after {
+        border-bottom-color: var(--color-danger-subtle);
+      }
+
+      &::before {
+        border-bottom-color: var(--color-danger-muted);
+      }
     }
   }
 }
diff --git a/src/forms/input-group.scss b/src/forms/input-group.scss
index 1186c4694a..01534cb5a4 100644
--- a/src/forms/input-group.scss
+++ b/src/forms/input-group.scss
@@ -19,6 +19,14 @@
     display: inline-table;
   }
 
+  // within input group, if button exists change focus styles to match input (no offset)
+  &:focus-within {
+    // stylelint-disable-next-line selector-max-type
+    button {
+      outline-offset: 0;
+    }
+  }
+
   // Autocomplete with embedded icon
   .form-control.autocomplete-embedded-icon-wrap {
     display: inline-flex;
diff --git a/src/links/link.scss b/src/links/link.scss
index 80cad058e7..f29cef3d91 100644
--- a/src/links/link.scss
+++ b/src/links/link.scss
@@ -7,6 +7,11 @@
     text-decoration: underline;
     cursor: pointer;
   }
+
+  &:focus,
+  &:focus-visible {
+    outline-offset: 0;
+  }
 }
 
 .Link--primary {
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 8638eee851..854b3ec31f 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -13,11 +13,13 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+    var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
-  transition: box-shadow 0.2s;
+  transition: box-shadow 0.2s, outline 0.2s ease;
   appearance: none !important;
 
   &::before {
@@ -42,29 +44,32 @@
     box-shadow: var(--color-mktg-btn-shadow-hover) !important;
   }
 
-  &:focus,
-  &.focus {
-    outline: 0;
-    box-shadow: var(--color-mktg-btn-shadow-focus), var(--color-mktg-btn-shadow-hover) !important;
-  }
-
   &:hover,
   &:focus,
+  &:focus-visible,
   &.focus {
     &::before {
       opacity: 1;
     }
+  }
+
+  // fallback :focus state
+  &:focus {
+    @include focusOutline(2px, var(--color-accent-fg));
 
-    &:disabled {
-      box-shadow: none !important;
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
     }
   }
 
-  &:active {
-    outline: none;
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 transparent;
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--color-accent-fg));
+  }
 
+  &:active {
     &::before {
       opacity: 0.5 !important;
     }
@@ -91,11 +96,6 @@
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
 
-  &:focus,
-  &.focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
-
   &:active {
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
@@ -119,11 +119,6 @@
   &:hover {
     box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
   }
-
-  &:focus,
-  .focus {
-    box-shadow: var(--color-mktg-btn-shadow-hover-muted), var(--color-mktg-btn-shadow-focus) !important;
-  }
 }
 
 .btn-signup-mktg {
@@ -137,9 +132,20 @@
     background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
   }
 
+  // fallback :focus state
   &:focus {
-    // stylelint-disable-next-line primer/box-shadow
-    box-shadow: rgba(46, 164, 79, 0.45) 0 0 0 4px !important;
+    @include focusOutline(2px, var(--color-accent-fg));
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline(2px, var(--color-accent-fg));
   }
 }
 
diff --git a/src/marketing/links/link.scss b/src/marketing/links/link.scss
index 13dd30aadc..9e87d28ebe 100644
--- a/src/marketing/links/link.scss
+++ b/src/marketing/links/link.scss
@@ -6,10 +6,6 @@
     text-decoration: none;
   }
 
-  &:active {
-    outline: none;
-  }
-
   &::after,
   &.link-emphasis-mktg::before {
     position: absolute;
@@ -35,13 +31,17 @@
   }
 
   &:hover,
-  &:focus,
   &:active {
     &::after {
       transform: scaleX(1);
     }
   }
 
+  &:focus,
+  &:focus-visible {
+    outline-offset: 2px;
+  }
+
   &.arrow-target-mktg {
     .arrow-symbol-mktg {
       margin-left: -$em-spacer-3;
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index 68a317cbaa..9eac3d8aec 100644
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Filters list
 //
 // A vertical list of filters.
@@ -45,6 +47,22 @@
   &[aria-current]:not([aria-current='false']) {
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   .count {
diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss
index ef921593cd..0cfb57b622 100644
--- a/src/navigation/menu.scss
+++ b/src/navigation/menu.scss
@@ -22,7 +22,9 @@
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
 
-    &::before { border-top-left-radius: $border-radius; }
+    &::before {
+      border-top-left-radius: $border-radius;
+    }
   }
 
   &:last-child {
@@ -30,13 +32,9 @@
     border-bottom-right-radius: $border-radius;
     border-bottom-left-radius: $border-radius;
 
-    &::before { border-bottom-left-radius: $border-radius; }
-  }
-
-  &:focus {
-    z-index: 1;
-    outline: none;
-    box-shadow: var(--color-primer-shadow-focus);
+    &::before {
+      border-bottom-left-radius: $border-radius;
+    }
   }
 
   &:hover {
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index 7fb8a90dd3..26d8d0a180 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -43,16 +43,9 @@
 
 // States
 
-.SideNav-item:focus {
-  z-index: 1;
-  outline: none;
-  box-shadow: var(--color-primer-shadow-focus);
-}
-
 .SideNav-item:hover {
   text-decoration: none;
   background-color: var(--color-neutral-subtle);
-  outline: none;
 }
 
 .SideNav-item:active {
@@ -94,11 +87,9 @@
   border: 0;
 }
 
-.SideNav-subItem:hover,
-.SideNav-subItem:focus {
+.SideNav-subItem:hover {
   color: var(--color-fg-default);
   text-decoration: none;
-  outline: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index 89e03e8fa9..58eb8a5e79 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -1,3 +1,5 @@
+// stylelint-disable selector-max-specificity
+
 // Needs refactoring
 // Sub nav
 .subnav {
@@ -46,6 +48,22 @@
     color: var(--color-fg-on-emphasis);
     background-color: var(--color-accent-emphasis);
     border-color: var(--color-accent-emphasis);
+
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
   }
 
   &:first-child {
diff --git a/src/navigation/tabnav.scss b/src/navigation/tabnav.scss
index 5d52cc5693..1df230af96 100644
--- a/src/navigation/tabnav.scss
+++ b/src/navigation/tabnav.scss
@@ -40,13 +40,18 @@
     }
   }
 
-  &:hover,
-  &:focus {
+  &:hover {
     color: var(--color-fg-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
 
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius $border-radius 0 0 !important;
+    outline-offset: -6px;
+  }
+
   &:active {
     color: var(--color-fg-muted);
   }
diff --git a/src/navigation/underline-nav.scss b/src/navigation/underline-nav.scss
index c6cb37cd18..c33adffc76 100644
--- a/src/navigation/underline-nav.scss
+++ b/src/navigation/underline-nav.scss
@@ -1,3 +1,4 @@
+// stylelint-disable selector-max-specificity
 $nav-height: $spacer-3 * 3 !default; // 48px
 
 .UnderlineNav {
@@ -34,56 +35,61 @@ $nav-height: $spacer-3 * 3 !default; // 48px
   border-radius: $border-radius;
   align-items: center;
 
-  // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
-  [data-content]::before {
-    display: block;
-    height: 0;
-    font-weight: $font-weight-bold;
-    visibility: hidden;
-    content: attr(data-content);
-  }
-
-  // increase touch target area
-  &::before {
-    @include minTouchTarget($min-height: $nav-height);
-  }
-
-  // hover state was "sticking" on mobile after click
-  @media (pointer: fine) {
-    &:hover {
-      color: var(--color-fg-default);
-      text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
-      transition: background 0.12s ease-out;
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    color: var(--color-fg-default);
+    text-decoration: none;
+    border-bottom-color: var(--color-neutral-muted);
+    outline-offset: -8px;
+    transition: border-bottom-color 0.12s ease-out;
+
+    // renders a visibly hidden "copy" of the label in bold, reserving box space for when label becomes bold on selected
+    [data-content]::before {
+      display: block;
+      height: 0;
+      font-weight: $font-weight-bold;
+      visibility: hidden;
+      content: attr(data-content);
     }
-  }
 
-  &.selected,
-  &[role='tab'][aria-selected='true'],
-  &[aria-current]:not([aria-current='false']) {
-    font-weight: $font-weight-bold;
-    color: var(--color-fg-default);
+    // increase touch target area
+    &::before {
+      @include minTouchTarget($min-height: $nav-height);
+    }
 
-    // current/selected underline
-    &::after {
-      position: absolute;
-      right: 50%;
-      // 48px total height / 2 (24px) + 1px
-      bottom: calc(50% - 25px);
-      width: 100%;
-      height: 2px;
-      content: '';
-      background: var(--color-primer-border-active);
-      border-radius: $border-radius;
-      transform: translate(50%, -50%);
+    // hover state was "sticking" on mobile after click
+    @media (pointer: fine) {
+      &:hover {
+        color: var(--color-fg-default);
+        text-decoration: none;
+        background: var(--color-action-list-item-default-hover-bg);
+        transition: background 0.12s ease-out;
+      }
     }
-  }
 
-  // remove when global focus state is merged
-  &.focus,
-  &:focus {
-    @include focusOutline;
-    outline-offset: -2px;
+    &.selected,
+    &[role='tab'][aria-selected='true'],
+    &[aria-current]:not([aria-current='false']) {
+      font-weight: $font-weight-bold;
+      color: var(--color-fg-default);
+      border-bottom-color: var(--color-primer-border-active);
+      outline-offset: -8px;
+
+      // current/selected underline
+      &::after {
+        position: absolute;
+        right: 50%;
+        // 48px total height / 2 (24px) + 1px
+        bottom: calc(50% - 25px);
+        width: 100%;
+        height: 2px;
+        content: '';
+        background: var(--color-primer-border-active);
+        border-radius: $border-radius;
+        transform: translate(50%, -50%);
+      }
+    }
   }
 
   .Counter {
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index 475ef0c044..43090b4e74 100644
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@@ -24,7 +24,6 @@
     &:focus {
       text-decoration: none;
       border-color: var(--color-border-default);
-      outline: 0;
       transition-duration: 0.1s;
     }
 
@@ -74,13 +73,35 @@
     // chevron-left
     .previous_page::before {
       margin-right: $spacer-1;
-      clip-path: polygon(9.8px 12.8px, 8.7px 12.8px, 4.5px 8.5px, 4.5px 7.5px, 8.7px 3.2px, 9.8px 4.3px, 6.1px 8px, 9.8px 11.7px, 9.8px 12.8px);
+      clip-path:
+        polygon(
+          9.8px 12.8px,
+          8.7px 12.8px,
+          4.5px 8.5px,
+          4.5px 7.5px,
+          8.7px 3.2px,
+          9.8px 4.3px,
+          6.1px 8px,
+          9.8px 11.7px,
+          9.8px 12.8px
+        );
     }
 
     // chevron-right
     .next_page::after {
       margin-left: $spacer-1;
-      clip-path: polygon(6.2px 3.2px, 7.3px 3.2px, 11.5px 7.5px, 11.5px 8.5px, 7.3px 12.8px, 6.2px 11.7px, 9.9px 8px, 6.2px 4.3px, 6.2px 3.2px);
+      clip-path:
+        polygon(
+          6.2px 3.2px,
+          7.3px 3.2px,
+          11.5px 7.5px,
+          11.5px 8.5px,
+          7.3px 12.8px,
+          6.2px 11.7px,
+          9.9px 8px,
+          6.2px 4.3px,
+          6.2px 3.2px
+        );
     }
   }
 
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 09a5afefd4..90d4eeb1b9 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -16,7 +16,7 @@
 
   &::after {
     // stylelint-disable-next-line primer/spacing
-    margin-left: 1px;
+    margin-left: 2px;
     background-color: var(--color-canvas-default);
     background-image: linear-gradient($background, $background);
   }
@@ -28,10 +28,32 @@
 
 // global focus styles
 
-@mixin focusOutline {
-  z-index: 1;
-  outline: 2px solid var(--color-accent-fg);
-  outline-offset: 2px;
+// inset box-shadow for form controls
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
+  border-color: var(--color-accent-fg);
+  outline: none;
+  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
+}
+
+// box-shadow for :target styles (no inset)
+// !important to override PCSS utilities
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+  outline: none !important;
+  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
+}
+
+// outline
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: none;
+}
+
+// outline with fg box-shadow for buttons
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+  outline: 2px solid $outlineColor;
+  outline-offset: $outlineOffset;
+  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
 }
 
 // if min-width is undefined, return only min-height
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index 3558a5b3ad..ed1cb21da9 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -40,9 +40,7 @@
   background-color: transparent;
   border: 0;
 
-  &:focus,
   &:hover {
-    outline: none;
     opacity: 0.7;
   }
 
@@ -119,6 +117,11 @@
 }
 
 @keyframes Toast--spinner {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index ad214f5654..df25180e46 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -1,4 +1,4 @@
-// stylelint-disable selector-max-type
+// stylelint-disable selector-max-type, selector-max-specificity, max-nesting-depth, selector-no-qualifying-type
 
 .details-overlay[open] > summary::before {
   position: fixed;
@@ -20,9 +20,86 @@
 
 .details-reset {
   // Remove marker added by the display: list-item browser default
-  > summary { list-style: none; }
+  > summary {
+    list-style: none;
+    transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+    transition-property: color, background-color, box-shadow, border-color;
+    // fallback :focus state
+    &:focus {
+      @include focusOutline;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutline;
+    }
+
+    &.btn-primary {
+      // fallback :focus state
+      &:focus {
+        @include focusOutlineOnEmphasis;
+
+        // remove fallback :focus if :focus-visible is supported
+        &:not(:focus-visible) {
+          outline: solid 1px transparent;
+          box-shadow: none;
+        }
+      }
+
+      // default focus state
+      &:focus-visible {
+        @include focusOutlineOnEmphasis;
+      }
+    }
+  }
   // Remove marker added by details polyfill
-  > summary::before { display: none; }
+  > summary::before {
+    display: none;
+  }
   // Remove marker added by Chrome
-  > summary::-webkit-details-marker { display: none; }
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+}
+
+.details-overlay > summary {
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  // fallback :focus state
+  &:focus {
+    @include focusOutline;
+
+    // remove fallback :focus if :focus-visible is supported
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+    }
+  }
+
+  // default focus state
+  &:focus-visible {
+    @include focusOutline;
+  }
+
+  &.btn-primary {
+    // fallback :focus state
+    &:focus {
+      @include focusOutlineOnEmphasis;
+
+      // remove fallback :focus if :focus-visible is supported
+      &:not(:focus-visible) {
+        outline: solid 1px transparent;
+        box-shadow: none;
+      }
+    }
+
+    // default focus state
+    &:focus-visible {
+      @include focusOutlineOnEmphasis;
+    }
+  }
 }