diff --git a/.changeset/beige-pans-kiss.md b/.changeset/beige-pans-kiss.md
new file mode 100644
index 0000000000..5cc3ebe7c2
--- /dev/null
+++ b/.changeset/beige-pans-kiss.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Adjusted focus styles with new color for button, checkbox, radio, switch, rating elements.
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 0ff2ed3fe7..0679148e7c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -2,6 +2,7 @@
 // TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed
 @use '@swisspost/design-system-styles/intranet.scss';
 @use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
 
 #storybook-root,
 #storybook-docs {
@@ -66,6 +67,11 @@
         display: inline-block;
       }
     }
+
+    // General styles for content
+    a {
+      @include utilities.focus-style();
+    }
   }
 
   pre {
diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
index 4a3a1406f5..fae7f73886 100644
--- a/packages/documentation/src/shared/tile/tile.component.scss
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -6,6 +6,10 @@ $tile-size: var(--post-docs-tile-size, 120px);
 $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host{
+  a {
+    @include utilities.focus-style();
+  }
+
   .tile {
     display: flex;
     flex-direction: column;
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index ea7683ac2c..7ef0153f15 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -18,7 +18,7 @@
 
 .btn {
   @include button-mx.button-size();
-  @include forms.focus-outline();
+  @include utilities.focus-style();
 
   // Resets
   display: inline-flex;
diff --git a/packages/styles/src/components/form-check.scss b/packages/styles/src/components/form-check.scss
index f3fdc3140b..7daaedea43 100644
--- a/packages/styles/src/components/form-check.scss
+++ b/packages/styles/src/components/form-check.scss
@@ -14,6 +14,8 @@
   row-gap: form-check.$form-check-row-gap;
   margin-bottom: form-check.$form-check-margin-bottom;
 
+  @include utility-mx.focus-style();
+
   &-inline {
     display: inline-flex;
   }
@@ -38,6 +40,7 @@
   }
 
   &-input {
+    @include utility-mx.focus-style-none();
     display: inline-flex;
     flex: 0 auto;
     appearance: none;
@@ -47,12 +50,6 @@
     border: form-check.$form-check-input-border-width solid
       rgba(var(--post-contrast-color-rgb), 0.8);
 
-    &:focus {
-      outline: none;
-      border-color: currentColor;
-      box-shadow: form-check.$form-check-input-focus-box-shadow;
-    }
-
     &::after {
       content: '';
       display: block;
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 48445dfba5..912d3820a2 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -47,6 +47,7 @@
   min-height: forms.$input-height-lg;
 }
 
+/* Deprecated use the one in utilities.scss */
 @mixin focus-outline {
   outline: none;
   outline-offset: forms.$input-focus-outline-thickness;
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 4f6453b70c..58fd54bb27 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -1,3 +1,6 @@
+@use '../variables/spacing';
+@use '../variables/commons';
+
 @mixin reset-list() {
   margin: 0;
   padding: 0;
@@ -79,3 +82,28 @@
     @content;
   }
 }
+
+@mixin focus-style-none {
+  outline: none;
+}
+
+@mixin focus-style($border-radius: commons.$border-radius, $vendor-prefix: '') {
+  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
+    outline-offset: spacing.$size-line;
+    outline: spacing.$size-line solid var(--post-focus-color);
+    border-radius: $border-radius;
+
+    @include high-contrast-mode() {
+      outline-color: Highlight;
+    }
+
+    // In case rules need to be slightly adjusted
+    @content;
+  }
+}
+
+@mixin focus-style-custom($vendor-prefix: '') {
+  &:is(:focus-visible, :focus-within, .pretend-focus)#{$vendor-prefix} {
+    @content;
+  }
+}
diff --git a/packages/styles/src/placeholders/_close.scss b/packages/styles/src/placeholders/_close.scss
index 0b2694f274..6af35e8631 100644
--- a/packages/styles/src/placeholders/_close.scss
+++ b/packages/styles/src/placeholders/_close.scss
@@ -10,7 +10,7 @@
 
 %btn-close {
   @include button-mx.reset-button;
-  @include forms-mx.focus-outline;
+  @include utilities-mx.focus-style();
   border-radius: close.$close-border-radius;
   color: close.$close-color;
   transition: close.$close-transition;
diff --git a/packages/styles/src/placeholders/_color.scss b/packages/styles/src/placeholders/_color.scss
index 9ed9d04f25..b0feedb88d 100644
--- a/packages/styles/src/placeholders/_color.scss
+++ b/packages/styles/src/placeholders/_color.scss
@@ -19,6 +19,7 @@
 // light background variables
 %color-background-light-variables {
   --post-contrast-color: #{color.$black};
+  --post-focus-color: #{color.$focus-light};
   --post-contrast-color-inverted: #{color.$white};
 
   @each $name, $color in color.$post-grays {
@@ -45,6 +46,7 @@
 // dark background variables
 %color-background-dark-variables {
   --post-contrast-color: #{color.$white};
+  --post-focus-color: #{color.$white};
   --post-contrast-color-inverted: #{color.$black};
   --post-dark: #{color.$light};
   --post-light: #{color.$dark};
diff --git a/packages/styles/src/variables/_color.scss b/packages/styles/src/variables/_color.scss
index aeade15ddd..9711f03355 100644
--- a/packages/styles/src/variables/_color.scss
+++ b/packages/styles/src/variables/_color.scss
@@ -24,6 +24,8 @@ $black: #000;
 $dark: $gray-80;
 $light: $gray-background-light;
 
+$focus-light: #1976c8;
+
 // Accent colors
 $nightblue-dark: #004976;
 $nightblue-bright: #0076a8;