diff --git a/package.json b/package.json
index bf2a73d3..15b70cde 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
diff --git a/src/core/Accordion.tsx b/src/core/Accordion.tsx
index 6bf8a20e..474a5adf 100644
--- a/src/core/Accordion.tsx
+++ b/src/core/Accordion.tsx
@@ -92,12 +92,14 @@ const AccordionRow = ({
       <AccordionTrigger
         onClick={onClick}
         className={cn({
-          "flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors":
+          "flex w-full group/accordion-trigger py-16 ui-text-p1 font-bold text-left items-center gap-12 transition-colors focus:outline-none":
             true,
           "px-16 mb-16 rounded-lg": isNonTransparentTheme(theme),
           "rounded-none": !isNonTransparentTheme(theme),
-          "pointer-events-none focus:outline-none": isStaticTheme(theme),
-          "focus:outline-gui-blue-focus": !isStaticTheme(theme),
+          "pointer-events-none focus-visible:outline-none":
+            isStaticTheme(theme),
+          "focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-blue-focus":
+            !isStaticTheme(theme),
           "sticky top-0": sticky,
           [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),
           [`${selectableBg} ${selectableText}`]: selectable && isOpen,
diff --git a/src/core/Accordion/Accordion.stories.tsx b/src/core/Accordion/Accordion.stories.tsx
index df6692a5..d9a16e68 100644
--- a/src/core/Accordion/Accordion.stories.tsx
+++ b/src/core/Accordion/Accordion.stories.tsx
@@ -6,7 +6,9 @@ import { accordionThemes } from "./types";
 const loremText =
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque congue risus id lobortis. Vivamus blandit dolor at ultricies cursus. Phasellus pharetra nunc erat, quis porttitor mauris faucibus in. Donec feugiat dapibus orci et blandit. Duis eleifend accumsan est nec euismod. Proin imperdiet malesuada lacus, a aliquam eros aliquet nec. Sed eu dolor finibus, sodales nisl a, egestas mi. In semper interdum lacinia. Duis malesuada diam quis purus blandit, sit amet imperdiet neque accumsan. Morbi viverra vitae risus ut pellentesque. Praesent ac blandit augue. Aliquam purus lectus, lacinia in semper vitae, dictum eu felis. Donec vel pulvinar eros, id facilisis neque. Aenean odio arcu, accumsan vel est in, lobortis rhoncus ligula. Pellentesque sit amet odio velit.";
 
-const lorem = <p className="mb-16">{loremText}</p>;
+const lorem = (
+  <p className="mb-16 text-neutral-1300 dark:text-neutral-000">{loremText}</p>
+);
 
 const textarea = (
   <textarea
@@ -53,12 +55,11 @@ const AccordionPresentation = ({ data, options }: AccordionProps) => (
     {accordionThemes
       .filter((theme) => !theme.toLowerCase().includes("static"))
       .map((theme) => (
-        <div
-          key={theme}
-          className={`p-16 rounded-lg ${theme.includes("dark") ? "bg-neutral-1300" : ""}`}
-        >
+        <div key={theme} className={"p-16 rounded-lg"}>
           <p
-            className={`ui-text-p3 mb-16 text-center font-mono ${theme.includes("dark") ? "text-neutral-000" : ""}`}
+            className={
+              "ui-text-p3 mb-16 text-center text-neutral-1300 dark:text-neutral-000 font-mono"
+            }
           >
             {theme}
           </p>
@@ -208,7 +209,7 @@ export const StaticAndFullyOpen = {
     docs: {
       description: {
         story:
-          "Setting `fullyOpen` on options will set all sections to be open by default. This is useful for static themes (usable with the `static` and `darkStatic` theme values).",
+          "Setting `fullyOpen` on options will set all sections to be open by default. This is useful for static themes (usable with the `static` theme).",
       },
     },
   },
diff --git a/src/core/Accordion/types.ts b/src/core/Accordion/types.ts
index 8ccca5e4..9052a33f 100644
--- a/src/core/Accordion/types.ts
+++ b/src/core/Accordion/types.ts
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 import { IconName, IconSize } from "../Icon/types";
-import { ColorClass } from "../styles/colors/types";
+import { ColorThemeSet } from "../styles/colors/types";
 
 /**
  * Represents the data structure for an Accordion component.
@@ -39,14 +39,7 @@ export type AccordionIcons = {
   };
 };
 
-export const accordionThemes = [
-  "dark",
-  "light",
-  "transparent",
-  "darkTransparent",
-  "static",
-  "darkStatic",
-] as const;
+export const accordionThemes = ["default", "transparent", "static"] as const;
 
 export type AccordionTheme = (typeof accordionThemes)[number];
 
@@ -57,32 +50,32 @@ export type AccordionThemeColors = {
   /**
    * Background color class for the accordion.
    */
-  bg: ColorClass;
+  bg: ColorThemeSet;
 
   /**
    * Background color when the accordion item is hovered.
    */
-  hoverBg: string;
+  hoverBg: ColorThemeSet;
 
   /**
    * Text color class for the accordion.
    */
-  text: ColorClass;
+  text: ColorThemeSet;
 
   /**
    * Color class for the toggle icon of the accordion.
    */
-  toggleIconColor: ColorClass;
+  toggleIconColor: ColorThemeSet;
 
   /**
    * Optional background color class for selectable accordion items.
    */
-  selectableBg?: ColorClass;
+  selectableBg?: ColorThemeSet;
 
   /**
    * Optional text color class for selectable accordion items.
    */
-  selectableText?: ColorClass;
+  selectableText?: ColorThemeSet;
 
   /**
    * Optional border color for the accordion.
diff --git a/src/core/Accordion/utils.ts b/src/core/Accordion/utils.ts
index 29556400..ccacc998 100644
--- a/src/core/Accordion/utils.ts
+++ b/src/core/Accordion/utils.ts
@@ -1,56 +1,33 @@
 import { AccordionTheme, AccordionThemeColors } from "./types";
 
 export const themeClasses: Record<AccordionTheme, AccordionThemeColors> = {
-  dark: {
-    bg: "bg-neutral-1200",
-    hoverBg: "hover:bg-neutral-1100",
-    text: "text-white",
-    toggleIconColor: "text-orange-600",
-    selectableBg: "bg-neutral-300",
-    selectableText: "text-neutral-1300",
-  },
-  light: {
-    bg: "bg-neutral-200",
-    hoverBg: "hover:bg-neutral-300",
-    text: "text-neutral-1300",
-    toggleIconColor: "text-neutral-1000",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-white",
+  default: {
+    bg: "bg-neutral-200 dark:bg-neutral-1100",
+    hoverBg: "hover:bg-neutral-300 dark:hover:bg-neutral-1100",
+    text: "text-neutral-1300 dark:text-white",
+    toggleIconColor: "text-neutral-1000 dark:text-orange-600",
+    selectableBg: "bg-neutral-1200 dark:bg-neutral-300",
+    selectableText: "text-neutral-000 dark:text-neutral-1300",
   },
   transparent: {
-    bg: "bg-transparent",
-    hoverBg: "hover:bg-transparent",
-    text: "text-neutral-1000",
-    toggleIconColor: "text-dark-grey",
-    border: "border-neutral-500 border-b last:border-none",
-  },
-  darkTransparent: {
-    bg: "bg-transparent",
-    hoverBg: "hover:bg-transparent",
-    text: "text-neutral-000",
-    toggleIconColor: "text-orange-600",
-    border: "border-neutral-900 border-b last:border-none",
+    bg: "bg-transparent dark:bg-transparent",
+    hoverBg: "hover:bg-transparent dark:hover:bg-transparent",
+    text: "text-neutral-1000 dark:text-neutral-000",
+    toggleIconColor: "text-dark-grey dark:text-orange-600",
+    border:
+      "border-neutral-500 border-b last:border-none dark:border-neutral-900",
   },
   static: {
-    bg: "bg-neutral-200",
-    hoverBg: "hover:bg-neutral-200",
-    text: "text-neutral-1300",
-    toggleIconColor: "text-neutral-200",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-white",
-  },
-  darkStatic: {
-    bg: "bg-neutral-1200",
-    hoverBg: "hover:bg-neutral-1200",
-    text: "text-white",
-    toggleIconColor: "text-neutral-1200",
-    selectableBg: "bg-neutral-1200",
-    selectableText: "text-neutral-1300",
+    bg: "bg-neutral-200 dark:bg-neutral-1200",
+    hoverBg: "hover:bg-neutral-200 dark:hover:bg-neutral-1200",
+    text: "text-neutral-1300 dark:text-white",
+    toggleIconColor: "text-neutral-200 dark:text-neutral-1200",
+    selectableBg: "bg-neutral-1200 dark:bg-neutral-1200",
+    selectableText: "text-white dark:text-neutral-1300",
   },
 };
 
 export const isNonTransparentTheme = (theme: AccordionTheme) =>
-  !["transparent", "darkTransparent"].includes(theme);
+  theme !== "transparent";
 
-export const isStaticTheme = (theme: AccordionTheme) =>
-  ["static", "darkStatic"].includes(theme);
+export const isStaticTheme = (theme: AccordionTheme) => theme === "static";
diff --git a/src/core/FeaturedLink.tsx b/src/core/FeaturedLink.tsx
index 8ca46898..65b76208 100644
--- a/src/core/FeaturedLink.tsx
+++ b/src/core/FeaturedLink.tsx
@@ -2,6 +2,7 @@ import React, { CSSProperties, ReactNode } from "react";
 
 import Icon from "./Icon";
 import { ColorClass, ColorThemeSet } from "./styles/colors/types";
+import cn from "./utils/cn";
 
 type FeaturedLinkProps = {
   url: string;
@@ -54,9 +55,17 @@ const FeaturedLink = ({
   return (
     <a
       {...(onClick ? {} : { href: url })}
-      className={`font-sans font-bold block ${disabled ? "text-gui-unavailable pointer-events-none" : "text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus"} group/featured-link ui-${textSize} ${
-        flush ? "" : "py-8"
-      } ${additionalCSS}`}
+      className={cn(
+        "font-sans font-bold block group/featured-link",
+        { "text-gui-unavailable pointer-events-none": disabled },
+        {
+          "text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus":
+            !disabled,
+        },
+        { "py-8": !flush },
+        `ui-${textSize}`,
+        additionalCSS,
+      )}
       style={
         {
           "--featured-link-icon-size": `var(${textSize.replace(
@@ -74,7 +83,10 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS={`align-middle mr-8 relative -top-1 -right-4 transition-[right] ${disabled ? "" : "group-hover/featured-link:right-0"} transform rotate-180`}
+            additionalCSS={cn(
+              "align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180",
+              { "group-hover/featured-link:right-0": !disabled },
+            )}
           />
           {children}
         </>
@@ -85,7 +97,10 @@ const FeaturedLink = ({
             name="icon-gui-link-arrow"
             size={`calc(var(--featured-link-icon-size) * 1.25)`}
             color={iconColor}
-            additionalCSS={`align-middle ml-8 relative -top-1 -left-4 transition-[left] ${disabled ? "" : "group-hover/featured-link:left-0"}`}
+            additionalCSS={cn(
+              "align-middle ml-8 relative -top-1 -left-4 transition-[left]",
+              { "group-hover/featured-link:left-0": !disabled },
+            )}
           />
         </>
       )}
diff --git a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
index cf072b3f..784bc53f 100644
--- a/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
+++ b/src/core/FeaturedLink/__snapshots__/FeaturedLink.stories.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Components/Featured Link Default smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
+   class="font-sans font-bold block group/featured-link text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2"
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
@@ -17,7 +17,7 @@ exports[`Components/Featured Link Default smoke-test 1`] = `
 
 exports[`Components/Featured Link Disabled smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-unavailable pointer-events-none group/featured-link ui-text-p2 py-8 "
+   class="font-sans font-bold block group/featured-link text-gui-unavailable pointer-events-none py-8 ui-text-p2"
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
@@ -32,7 +32,7 @@ exports[`Components/Featured Link Disabled smoke-test 1`] = `
 
 exports[`Components/Featured Link Large smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p1 py-8 "
+   class="font-sans font-bold block group/featured-link text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p1"
    style="--featured-link-icon-size: var(--fs-p1);"
 >
   Featured link
@@ -47,7 +47,7 @@ exports[`Components/Featured Link Large smoke-test 1`] = `
 
 exports[`Components/Featured Link Pink smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 text-pink-800"
+   class="font-sans font-bold block group/featured-link hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2 text-pink-800"
    style="--featured-link-icon-size: var(--fs-p2);"
 >
   Featured link
@@ -62,10 +62,10 @@ exports[`Components/Featured Link Pink smoke-test 1`] = `
 
 exports[`Components/Featured Link Reverse smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 "
+   class="font-sans font-bold block group/featured-link text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2"
    style="--featured-link-icon-size: var(--fs-p2);"
 >
-  <svg class="align-middle mr-8 relative -top-1 -right-4 transition-[right] group-hover/featured-link:right-0 transform rotate-180"
+  <svg class="align-middle mr-8 relative -top-1 -right-4 transition-[right] transform rotate-180 group-hover/featured-link:right-0"
        style="width: calc(var(--featured-link-icon-size) * 1.25); height: calc(var(--featured-link-icon-size) * 1.25);"
   >
     <use xlink:href="#sprite-icon-gui-link-arrow">
@@ -77,7 +77,7 @@ exports[`Components/Featured Link Reverse smoke-test 1`] = `
 
 exports[`Components/Featured Link Small smoke-test 1`] = `
 <a href="#"
-   class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p3 py-8 "
+   class="font-sans font-bold block group/featured-link text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p3"
    style="--featured-link-icon-size: var(--fs-p3);"
 >
   Featured link
diff --git a/src/core/MeganavItemsMobile.tsx b/src/core/MeganavItemsMobile.tsx
index ec6a1d91..933396a0 100644
--- a/src/core/MeganavItemsMobile.tsx
+++ b/src/core/MeganavItemsMobile.tsx
@@ -85,7 +85,7 @@ const MeganavItemsMobile = ({
                 />
                 <button
                   type="button"
-                  className="absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible"
+                  className="absolute top-12 right-16 p-0 focus:outline-none focus-visible:outline-gui-focus m-0 md:hidden invisible"
                   data-id="meganav-search-input-clear"
                 >
                   <Icon
diff --git a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
index 5407722f..6e62628c 100644
--- a/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
+++ b/src/core/ProductTile/__snapshots__/ProductTile.stories.tsx.snap
@@ -233,7 +233,7 @@ exports[`Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Low-level APIs to build any realtime experience
     </p>
     <a href="/docs/products/channels"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
+       class="font-sans font-bold group/featured-link focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       View docs
@@ -303,7 +303,7 @@ exports[`Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Create collaborative environments in a few lines of code
     </p>
     <a href="/docs/products/spaces"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
+       class="font-sans font-bold group/featured-link focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
@@ -373,7 +373,7 @@ exports[`Components/Product Tile SelectedProductTiles smoke-test 1`] = `
       Simple APIs to build realtime tracking applications
     </p>
     <a href="/docs/products/asset-tracking"
-       class="font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group/featured-link ui-text-p2 py-8 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
+       class="font-sans font-bold group/featured-link focus:text-gui-focus focus:outline-none focus-visible:outline-gui-focus py-8 ui-text-p2 ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block text-neutral-000 dark:text-neutral-1300"
        style="--featured-link-icon-size: var(--fs-p2);"
     >
       Explore
diff --git a/src/core/TabMenu.tsx b/src/core/TabMenu.tsx
index a8da0b9c..e75937c8 100644
--- a/src/core/TabMenu.tsx
+++ b/src/core/TabMenu.tsx
@@ -135,7 +135,7 @@ const TabMenu: React.FC<TabMenuProps> = ({
           <Tabs.Trigger
             key={`tab-${index}`}
             className={cn(
-              "lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",
+              "lg:px-24 md:px-20 px-16 py-16 ui-text-menu1 font-bold data-[state=active]:text-neutral-1300 text-neutral-1000 dark:data-[state=active]:text-neutral-000 dark:text-neutral-300 focus:outline-none focus-visible:outline-gui-focus transition-colors hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-900 dark:active:text-neutral-400 disabled:text-gui-unavailable dark:disabled:text-gui-unavailable-dark disabled:cursor-not-allowed",
               { "flex-1": flexibleTabWidth },
               { "h-full": flexibleTabHeight },
               tabClassName,
diff --git a/src/core/Toggle.tsx b/src/core/Toggle.tsx
index 87431e8d..e52e6993 100644
--- a/src/core/Toggle.tsx
+++ b/src/core/Toggle.tsx
@@ -13,7 +13,7 @@ const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
     <div className="flex items-center">
       <Switch.Root
         className={cn(
-          "p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus",
+          "p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",
           className,
         )}
         id={id}
diff --git a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
index 9f829b6f..21d510f4 100644
--- a/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
+++ b/src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap
@@ -7,7 +7,7 @@ exports[`Components/Toggle Checked smoke-test 1`] = `
           aria-checked="true"
           data-state="checked"
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
   >
     <span data-state="checked"
           class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
@@ -24,7 +24,7 @@ exports[`Components/Toggle Default smoke-test 1`] = `
           aria-checked="false"
           data-state="unchecked"
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
   >
     <span data-state="unchecked"
           class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
@@ -43,7 +43,7 @@ exports[`Components/Toggle Disabled smoke-test 1`] = `
           data-disabled
           disabled
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
   >
     <span data-state="unchecked"
           data-disabled
diff --git a/src/core/styles/buttons.css b/src/core/styles/buttons.css
index 5bf43454..ee6692ba 100644
--- a/src/core/styles/buttons.css
+++ b/src/core/styles/buttons.css
@@ -1,6 +1,6 @@
 @layer components {
   .ui-button-base {
-    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-4 focus:outline-gui-blue-focus disabled:cursor-not-allowed;
+    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-blue-focus disabled:cursor-not-allowed;
   }
 
   .ui-button-lg-base {
diff --git a/src/core/styles/dropdowns.css b/src/core/styles/dropdowns.css
index 09e3178d..f4a94f05 100644
--- a/src/core/styles/dropdowns.css
+++ b/src/core/styles/dropdowns.css
@@ -1,6 +1,6 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 focus:outline-offset-0;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-4 focus-visible:outline-offset-0;
     @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
     background-position: center right 16px;
diff --git a/src/core/styles/forms.css b/src/core/styles/forms.css
index 0a6fcd85..61fe7039 100644
--- a/src/core/styles/forms.css
+++ b/src/core/styles/forms.css
@@ -71,7 +71,7 @@
     @apply p-input mb-16;
     @apply bg-light-grey border-mid-grey transition-input border rounded block w-full;
     @apply hover:bg-white hover:shadow-input hover:border-transparent;
-    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-gui-focus;
+    @apply focus:bg-white focus:shadow-input focus:border-transparent focus:outline-none focus-visible:outline-gui-focus;
   }
 
   .ui-textarea::placeholder {
@@ -123,7 +123,7 @@
 
   .ui-input {
     @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
-    @apply hover:border-neutral-700 focus:bg-white focus:outline-gui-focus focus:outline-offset-0 focus:outline-4;
+    @apply hover:border-neutral-700 focus:bg-white focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-offset-0 focus-visible:outline-4;
     @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
@@ -140,7 +140,7 @@
   }
 
   .ui-radio {
-    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus:outline-gui-blue-focus focus:outline-4;
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-visible:outline-4 focus-visible:outline-gui-blue-focus;
   }
 
   .ui-radio:checked {
diff --git a/src/core/styles/legacy-buttons.css b/src/core/styles/legacy-buttons.css
index 2a9211d1..603efe54 100644
--- a/src/core/styles/legacy-buttons.css
+++ b/src/core/styles/legacy-buttons.css
@@ -3,7 +3,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -25,7 +25,7 @@
     background-position: 0% 0%;
 
     @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-gui-focus;
+    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
     @apply inline-flex items-center justify-center;
   }
 
@@ -43,7 +43,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -53,7 +53,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-gui-focus;
+    @apply focus:border-cool-black focus:bg-white focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -63,7 +63,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
-    @apply focus:outline-gui-focus;
+    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
diff --git a/src/core/styles/text.css b/src/core/styles/text.css
index 0e58ecb7..856f7c6c 100644
--- a/src/core/styles/text.css
+++ b/src/core/styles/text.css
@@ -176,21 +176,16 @@
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply focus:text-gui-default focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
     @apply no-underline;
   }
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey;
+    @apply focus:text-charcoal-grey focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
     @apply underline;
   }
 
-  /* focus:outline-gui-focus-neutral does not get created under Tailwind 3.3.5, not sure why */
-  .ui-link-neutral:focus {
-    outline: 2px solid var(--color-neutral-000);
-  }
-
   .ui-figcaption {
     @apply font-mono text-p3 text-neutral-800;
   }