diff --git a/dist/css/global/base/page.css b/dist/css/global/base/page.css
index 8aad2a6c02ce00b996405eddeae5429d713f14d1..11916205d78835261506862a155f0e4005053487 100644
--- a/dist/css/global/base/page.css
+++ b/dist/css/global/base/page.css
@@ -9,11 +9,19 @@ html {
 
 .skip-link {
   display: block;
-  background-color: var(--prototype-color-primary);
-  color: var(--prototype-color-light);
-  padding: 16px 32px 20px;
+  background-color: var(--prototype-color-black);
+  border-radius: 0 0 4px 4px;
+  color: var(--prototype-color-white) !important;
+  font-size: 1em;
+  left: 50%;
+  outline: red dotted 2px;
+  padding: 10px 18px;
   text-decoration: none;
-  z-index: var(--prototype-zindex-super);
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+.skip-link.focusable:focus {
+  position: absolute !important;
 }
 
 hr {
diff --git a/libraries/global/base/page.scss b/libraries/global/base/page.scss
index 3de2e9649ae9656f7a10351d55176dbd186816b2..2d59bf2a99d1796b32fdbc4999248ec81b3466bb 100644
--- a/libraries/global/base/page.scss
+++ b/libraries/global/base/page.scss
@@ -29,11 +29,20 @@ html {
 
 .skip-link {
   display: block;
-  background-color: var(--prototype-color-primary);
-  color: var(--prototype-color-light);
-  padding: 16px 32px 20px;
+  background-color: var(--prototype-color-black);
+  border-radius: 0 0 4px 4px;
+  color: var(--prototype-color-white) !important;
+  font-size: 1em;
+  left: 50%;
+  outline: red dotted 2px;
+  padding: 10px 18px;
   text-decoration: none;
-  z-index: var(--prototype-zindex-super);
+  transform: translateX(-50%);
+  z-index: 1000;
+
+  &.focusable:focus {
+    position: absolute !important;
+  }
 }