diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index ded893bd5c..0e232c1c6d 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -138,7 +138,6 @@ a {
   color: $white;
   font-family: $main-font;
   text-transform: uppercase;
-  padding: 21px 0;
 }
 
 strong {
diff --git a/aio/src/styles/1-layouts/_footer.scss b/aio/src/styles/1-layouts/_footer.scss
index 538c78d15c..b986e31dac 100644
--- a/aio/src/styles/1-layouts/_footer.scss
+++ b/aio/src/styles/1-layouts/_footer.scss
@@ -22,20 +22,30 @@ footer {
   }
 
   a {
-      color: $white;
+    color: $white;
+    text-decoration: none;
+    z-index: 20;
+    position: relative;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:visited {
       text-decoration: none;
-      z-index: 20;
-      position: relative;
-      &:hover {
-        text-decoration: underline;
-      }
-      &:visited {
-        text-decoration: none;
-      }
+    }
+
+    &:focus {
+      // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+      outline: 1px solid rgba($white, 0.8);
+      outline-offset: 2px;
+    }
   }
+
   a.action {
     cursor: pointer;
   }
+
   h3 {
     @include font-size(16);
     text-transform: uppercase;
@@ -43,6 +53,7 @@ footer {
     margin: 8px 0 12px;
     color: $white;
   }
+
   p {
     text-align: center;
     margin: 10px 0px 5px;
@@ -56,9 +67,7 @@ footer {
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-
     justify-content: center;
-
     text-align: left;
     margin: 0 0 40px;
 
@@ -76,6 +85,7 @@ footer {
 
     @media (max-width: 480px) {
       flex-direction: column;
+
       .footer-block {
         margin: 8px 24px;
       }
@@ -90,16 +100,17 @@ footer {
 }
 
 footer::after {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background:
-        url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,
-        url('/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;
-    opacity: 0.05;
-    background-size: 320px auto;
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
+      top 0 left 0 repeat,
+    url("/assets/images/logos/angular/angular_whiteTransparent_withMargin.png")
+      top 80px left 160px repeat;
+  opacity: 0.05;
+  background-size: 320px auto;
 }
diff --git a/aio/src/styles/1-layouts/_marketing-layout.scss b/aio/src/styles/1-layouts/_marketing-layout.scss
index c84de81b2b..fd20bcfb21 100644
--- a/aio/src/styles/1-layouts/_marketing-layout.scss
+++ b/aio/src/styles/1-layouts/_marketing-layout.scss
@@ -132,7 +132,7 @@ section#intro {
   box-sizing: border-box;
   transition: all 0.3s ease-in;
 
-  @media (max-width: 992px) {
+  @media (max-width: 991px) {
     flex-direction: column;
     text-align: center;
     padding: 32px 16px;
@@ -441,4 +441,4 @@ div[layout=row]{
 
 .events-container{
   overflow-x: auto;
-}
\ No newline at end of file
+}
diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss
index 8f79d5d513..9670853c6c 100644
--- a/aio/src/styles/1-layouts/_sidenav.scss
+++ b/aio/src/styles/1-layouts/_sidenav.scss
@@ -79,7 +79,7 @@ mat-sidenav-container div.mat-sidenav-content {
   }
 
   &:focus {
-    outline: $accentblue auto 2px;
+    outline: $focus-outline-onlight auto 2px;
   }
 
   &.selected {
diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss
index 62eb9b4937..97a0df4fbb 100644
--- a/aio/src/styles/1-layouts/_top-menu.scss
+++ b/aio/src/styles/1-layouts/_top-menu.scss
@@ -87,7 +87,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
   }
 
   & .mat-icon {
-    color: white;
+    color: $white;
     position: inherit;
   }
 }
@@ -96,7 +96,17 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
 .nav-link.home {
   cursor: pointer;
   margin: 0 16px 0 0;
-  padding: 21px 0;
+  padding: 8px 0;
+
+  &:focus {
+    // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+    outline: 1px solid $focus-outline-ondark;
+    outline-offset: 4px;
+  }
+
+  @media screen and (max-width: 991px) {
+    padding: 4px 0;
+  }
 
   @media screen and (max-width: 480px) {
     margin-right: 8px;
@@ -108,7 +118,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
     top: 12px;
     height: 40px;
 
-    @media (max-width: 992px) {
+    @media (max-width: 991px) {
       &:hover {
         transform: scale(1.1);
       }
@@ -136,35 +146,44 @@ aio-top-menu {
       list-style-type: none;
       cursor: pointer;
 
-      &:hover {
-        opacity: 0.7;
-      }
-
       &:focus {
-        background-color: $accentblue;
         outline: none;
       }
     }
-  }
 
-  a.nav-link {
-    margin: 0;
-    padding: 24px 0px;
-    cursor: pointer;
-
-    .nav-link-inner {
-      padding: 8px 16px;
-    }
-
-    &:focus {
-      outline: none;
+    a.nav-link {
+      margin: 0 4px;
+      padding: 0px;
+      cursor: pointer;
 
       .nav-link-inner {
-        background: rgba($white, 0.15);
-        border-radius: 4px;
+        padding: 8px 16px;
+
+        &:hover {
+          background: rgba($white, 0.15);
+          border-radius: 4px;
+        }
+      }
+
+      &:focus {
+        outline: none;
+
+        .nav-link-inner {
+          background: rgba($white, 0.15);
+          border-radius: 1px;
+          box-shadow: 0 0 1px 2px $focus-outline-ondark;
+        }
+      }
+
+      &:active {
+        .nav-link-inner {
+          background: rgba($white, 0.15);
+          border-radius: 4px;
+        }
       }
     }
   }
+
 }
 
 // SEARCH BOX
@@ -175,6 +194,7 @@ aio-search-box.search-container {
   width: 100%;
   min-width: 150px;
   height: 100%;
+  margin-right: 16px;
 
   input {
     color: $darkgray;
@@ -220,10 +240,18 @@ aio-search-box.search-container {
     a {
       display: flex;
       align-items: center;
-      margin-left: 16px;
+      padding: 24px;
+      margin: 0 -16px;
+
+      &:focus {
+        // `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
+        outline: 1px solid $focus-outline-ondark;
+        outline-offset: -16px;
+      }
 
       @media screen and (max-width: 480px) {
-        margin-left: 8px;
+        margin: 0 0 0 8px;
+        padding: 0;
       }
 
       &:hover {
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index 2000420131..4cd9fad6b3 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -1,12 +1,12 @@
 aio-contributor-list {
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
-    .grid-fluid{
+    .grid-fluid {
       width: auto;
     }
   }
 
   @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
-    .grid-fluid{
+    .grid-fluid {
       margin-left: 20px;
       margin-right: 20px;
       float: none;
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index b886c94a04..07affee69b 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -54,8 +54,12 @@ $purple-600: #8E24AA;
 $teal-500: #009688;
 $lightgrey: #F5F6F7;
 
+// STATE COLORS
+$focus-outline-ondark: rgba($white, 0.8);
+$focus-outline-onlight: $accentblue;
+
 // GRADIENTS
-$bluegradient: linear-gradient(145deg,#0D47A1,#42A5F5);
+$bluegradient: linear-gradient(145deg,$blue-900,$blue-400);
 $redgradient: linear-gradient(145deg,$darkred,$brightred);
 
 // API LABEL COLOR AND SYMBOLS MAP
diff --git a/aio/tests/e2e/src/scroll.e2e-spec.ts b/aio/tests/e2e/src/scroll.e2e-spec.ts
index b638008a59..199f527a2f 100644
--- a/aio/tests/e2e/src/scroll.e2e-spec.ts
+++ b/aio/tests/e2e/src/scroll.e2e-spec.ts
@@ -40,7 +40,8 @@ describe('site auto-scrolling', () => {
     expect(await page.getScrollTop()).not.toBe(0);
 
     await page.docsMenuLink.click();
-    expect(await page.getScrollTop()).toBe(0);
+    // On some environments (e.g. CI) it takes some time for the page to load (and scroll to top).
+    await browser.wait(async () => await page.getScrollTop() === 0, 1000);
   });
 
   it('should scroll to top when navigating to the same page via a link', async () => {