diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss
index 460e32c3f6..9523cea9b0 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -13,24 +13,24 @@ body {
   }
 }
 
+// NOTE: (ericjim) the new api docs use material design blue 600 links in this fashion.
 a {
-  color: $blueberry;
+  color: #1E88E5;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration-color: #1E88E5;
+    text-decoration: underline;
+  }
 }
 
 code {
-  background: #eef1f2;
+  background: $lightgrey;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $regal;
+  color: $darkgrey;
   padding: 0px 4px;
-}
-
-p code {
-  border-bottom: 1px dotted $regal;
-
-  &:hover {
-    border-bottom: 1px solid $regal;
-  }
+  font-size: 90%;
 }
 
 .location-badge {
@@ -118,11 +118,6 @@ p code {
   h4 {
     font-size: 16px;
   }
-  p {
-    font-size: 15px;
-    color: #5c7078;
-    line-height: 28pt;
-  }
 }
 
 table th,
@@ -234,4 +229,4 @@ table td {
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss
index 2c8c9c3b9e..7b52632c32 100644
--- a/public/resources/css/module/_api.scss
+++ b/public/resources/css/module/_api.scss
@@ -129,14 +129,16 @@ input.api-filter {
     }
   }
 
-  a {
-    code {
-      color: $ocean;
+  .class-description-content {
+    a {
+      code, .api-doc-code {
+        color: #1E88E5 !important;
+      }
     }
   }
 
+
   p {
-    color: #1a2326;
 
     &.selector {
       margin: 0;
@@ -146,7 +148,7 @@ input.api-filter {
       margin: 0 0 16px 16px !important;
     }
 
-    code {
+    .api-doc-code {
       border-bottom: 0px;
 
       :hover {
@@ -207,7 +209,7 @@ input.api-filter {
     }
   }
 
-  code {
+  .api-doc-code {
     font-size: 14px;
     color: #1a2326;
 
@@ -230,7 +232,7 @@ input.api-filter {
     }
   }
 
-  code {
+  .api-doc-code {
     font-size: 12px;
   }
 
diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html
index ad3b99d2ef..8e5fbb7a12 100644
--- a/tools/api-builder/angular.io-package/templates/class.template.html
+++ b/tools/api-builder/angular.io-package/templates/class.template.html
@@ -31,35 +31,35 @@ include {$ relativePath(doc.path, '_util-fns') $}
   div(flex="20" flex-xs="100")
     h2(class="h2-api-docs") Class Overview
   div(flex="80" flex-xs="100")
-    code.no-bg class {$ doc.name $} {
+    code(class="no-bg api-doc-code") class {$ doc.name $} {
 
     {% if doc.statics.length %}
     .div(layout="column")
       {% for member in doc.statics %}{% if not member.internal %}
         pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
           a(class="code-anchor" href="#{$ member.name $}-anchor")
-            code(class="code-background") {$ member.name | indent(6, false) | trim $}
-          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+            code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
+          code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
       {% endif %}{% endfor %}
     {% endif %}
     {% if doc.constructorDoc.name %}
     .div(layout="column")
       pre(class="prettyprint no-bg-with-indent")
         a(class="code-anchor" href="#constructor")
-          code(class="code-background") {$ doc.constructorDoc.name $}
-        code {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+          code(class="code-background api-doc-code") {$ doc.constructorDoc.name $}
+        code(class="api-doc-code") {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
     {% endif %}
     {% if doc.members.length %}
     .div(layout="column")
       {% for member in doc.members %}{% if not member.internal %}
         pre(class="prettyprint no-bg-with-indent")
           a(class="code-anchor" href="#{$ member.name $}-anchor")
-            code(class="code-background") {$ member.name | indent(6, false) | trim $}
-          code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+            code(class="code-background api-doc-code") {$ member.name | indent(6, false) | trim $}
+          code(class="api-doc-code") {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
       {% endif %}{% endfor %}
     {% endif %}
     p.selector
-      code.no-bg }
+      code(class="api-doc-code no-bg") }
 
 {% block additional %}
 {% endblock %}
@@ -80,7 +80,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
     h2(class="h2-api-docs") Class Export
   div(flex="80" flex-xs="100")
     pre.prettyprint.no-bg
-      code.no-pln.
+      code(class="api-doc-code no-pln").
         export {$ doc.docType $} {$ doc.name $}
 
 {%- if doc.decorators.length %}
@@ -91,7 +91,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
   div(flex="80" flex-xs="100")
     {%- for decorator in doc.decorators %}
       pre.prettyprint.no-bg
-        code.
+        code(class="api-doc-code")
           @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}
       :marked
       {%- if decorator.notYetDocumented %}
@@ -110,7 +110,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
   div(flex="80" flex-xs="100")
     a(name="constructor" class="anchor-offset")
     pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }")
-      code.
+      code(class="api-doc-code").
         {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
     :marked
       {%- if doc.constructorDoc.notYetDocumented %}
@@ -127,7 +127,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
   div(flex="80" flex-xs="100")
   {% for member in doc.statics %}{% if not member.internal %}
     pre.prettyprint.no-bg
-      code.
+      code(class="api-doc-code").
         {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
     :marked
       {%- if member.notYetDocumented %}
@@ -151,7 +151,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
     {% for member in doc.members %}{% if not member.internal %}
     a(name="{$ member.name $}-anchor" class="anchor-offset")
     pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }")
-      code.
+      code(class="api-doc-code").
         {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 
     :marked