diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss
index a76b1fb592..9991b9c76e 100644
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@@ -18,12 +18,19 @@ a {
 }
 
 code {
-  background: $lightgrey;
+  background: #eef1f2;
   border-radius: 2px;
   font-family: $mono-font;
-  color: $darkgrey;
+  color: $regal;
   padding: 0px 4px;
-  font-size: 90%;
+}
+
+p code {
+  border-bottom: 1px dotted $regal;
+
+  &:hover {
+    border-bottom: 1px solid $regal;
+  }
 }
 
 .location-badge {
@@ -103,7 +110,9 @@ code {
     opacity: 0.87;
   }
   h2 {
-    font-size: 20px;
+    font-size: 15px;
+    text-transform: uppercase;
+    color: #78909C;
   }
   h3 {
     font-size: 16px;
@@ -111,6 +120,11 @@ code {
   h4 {
     font-size: 16px;
   }
+  p {
+    font-size: 15px;
+    color: #5c7078;
+    line-height: 28pt;
+  }
 }
 
 table th,
@@ -213,8 +227,8 @@ table td {
     &[layout="row"] {
       -webkit-flex-direction: column;
       -ms-flex-direction: column;
-      flex-direction: column; 
-      & > div {   
+      flex-direction: column;
+      & > div {
         & > .card {
           margin-left: 0;
           margin-right: 0;
diff --git a/public/resources/css/main.scss b/public/resources/css/main.scss
index f79ec2fc3a..4aaac3b4cb 100644
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@@ -54,4 +54,4 @@
 * PRINT STYLES
 *
 */
-@import 'print';
+@import 'print';
\ No newline at end of file
diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss
index 9c8285e46e..375196012f 100644
--- a/public/resources/css/module/_api.scss
+++ b/public/resources/css/module/_api.scss
@@ -102,4 +102,79 @@ input.api-filter {
       }
     }
   }
+
+  a {
+    code {
+      color: $ocean;
+    }
+  }
+
+  p {
+    color: #1a2326;
+
+    &.selector {
+      margin: 0 0 8px 0;
+    }
+
+    &.location-badge {
+      margin: 0 0 16px 16px !important;
+    }
+
+    code {
+      border-bottom: 0px;
+
+      :hover {
+        border-bottom: none;
+      }
+    }
+  }
+
+  .row-margin {
+    margin-bottom: 36px;
+    h2 {
+      line-height: 28px;
+    }
+  }
+
+  .code-margin {
+    margin-bottom: $unit;
+  }
+
+  .hr-margin {
+    display: block;
+    height: 1px;
+    border: 0;
+    border-top: 1px solid $lightgrey;
+    margin-top: 15px;
+    margin-bottom: 20px;
+    padding: 0;
+  }
+
+  .no-bg {
+    background: none;
+    padding: 0;
+  }
+
+  code {
+    font-size: 14px;
+    color: #1a2326;
+
+    // Override highlight.js
+    &.no-pln {
+      .pln {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  code {
+    font-size: 12px;
+  }
+
+  p.location-badge {
+    position: relative;
+    font-size: 11px;
+  }
 }
diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss
index eee9e3528c..849868cb1c 100644
--- a/public/resources/css/module/_code-box.scss
+++ b/public/resources/css/module/_code-box.scss
@@ -1,7 +1,6 @@
 .code-box {
   border-radius: 4px;
   background: $lightgrey;
-  // box-shadow: 0px 2px 5px rgba($coal, .3);
   margin-bottom: $unit * 2;
 
   header {
@@ -11,6 +10,30 @@
     border-radius: 4px 4px 0px 0px;
   }
 
+  &__live-code {
+    background-color: #cfd8dc;
+    height: 36px;
+    color: $snow;
+    padding: 0 $unit;
+    border-radius: 4px 4px 0px 0px;
+    margin-bottom: 0;
+
+    & a {
+      font-size: 14px;
+      text-decoration: none;
+      border-bottom: 1px $regal dotted;
+
+      &:hover {
+        border-bottom: 1px $regal solid;
+      }
+    }
+
+    &--icon {
+      font-size: 14px;
+      color: $regal;
+    }
+  }
+
   nav {
     button {
       line-height: $unit * 3.5;
@@ -21,12 +44,11 @@
       background: #3F94E9;
       color: $snow;
       border-radius: 4px 4px 0px 0px;
-      // font-weight: 500;
       text-transform: none;
 
       &.is-selected,
       &.selected
-       {
+      {
         background: $lightgrey;
         color: $darkgrey;
       }
@@ -38,3 +60,7 @@
     margin: 0px;
   }
 }
+
+pre {
+  margin-top: 0;
+}
\ No newline at end of file
diff --git a/tools/api-builder/angular.io-package/tag-defs/index.js b/tools/api-builder/angular.io-package/tag-defs/index.js
index 3b1891e8d3..487e14ec90 100644
--- a/tools/api-builder/angular.io-package/tag-defs/index.js
+++ b/tools/api-builder/angular.io-package/tag-defs/index.js
@@ -1,6 +1,6 @@
 module.exports = [
   require('./deprecated'),
   require('./howToUse'),
-  require('./whatItIs'),
+  require('./whatItDoes'),
   require('./internal')
 ];
diff --git a/tools/api-builder/angular.io-package/tag-defs/whatItIs.js b/tools/api-builder/angular.io-package/tag-defs/whatItDoes.js
similarity index 68%
rename from tools/api-builder/angular.io-package/tag-defs/whatItIs.js
rename to tools/api-builder/angular.io-package/tag-defs/whatItDoes.js
index e0308b310d..6a05ddbb62 100644
--- a/tools/api-builder/angular.io-package/tag-defs/whatItIs.js
+++ b/tools/api-builder/angular.io-package/tag-defs/whatItDoes.js
@@ -1,5 +1,5 @@
 module.exports = function() {
   return {
-    name: 'whatItIs'
+    name: 'whatItDoes'
   };
 };
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 fe03e03449..aa753281dc 100644
--- a/tools/api-builder/angular.io-package/templates/class.template.html
+++ b/tools/api-builder/angular.io-package/templates/class.template.html
@@ -1,6 +1,3 @@
-<!-- TODO: API design proposal section will use doc.howToUse and doc.whatItIs -->
-<!-- TODO: API design proposal badges will use doc.deprecated -->
-
 {% include "lib/githubLinks.html" -%}
 {% include "lib/paramList.html" -%}
 {% extends 'layout/base.template.html' -%}
@@ -8,91 +5,135 @@
 {% block body %}
 include {$ relativePath(doc.path, '_util-fns') $}
 
-h2(class="{$ doc.docType $} export")
-  pre.prettyprint
-    code.
-      export {$ doc.docType $} {$ doc.name $}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 What it does
+  div(flex="80" flex-xs="100")
+    :marked
+    {%- if doc.whatItDoes %}
+{$ doc.whatItDoes | indentForMarkdown(6) $}
+    {% else %}
+      *Not yet documented*
+    {% endif %}
 
-p.location-badge.
-  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
-  defined in {$ githubViewLink(doc) $}
-
-:marked
-{%- if doc.notYetDocumented %}
-  *Not Yet Documented*
-{% else %}
-{$ doc.description | indentForMarkdown(2) | trimBlankLines $}
-{% endif %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 How to use
+  div(flex="80" flex-xs="100")
+    :marked
+    {%- if doc.howToUse %}
+{$ doc.howToUse | indentForMarkdown(6) $}
+    {% else %}
+      *Not yet documented*
+    {% endif %}
 
 {% block additional %}
 {% endblock %}
 
-{% block annotations %}
-{%- if doc.decorators.length %}
-.l-main-section
-  h2 Annotations
-{%- for decorator in doc.decorators %}
-  .l-sub-section
-    h3.annotation
-      pre.prettyprint
-        code.
-          @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}{% endfor %}{% endif %}
-{% endblock %}
-
-
-{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
-.l-main-section
-  h2 Constructor
-  .l-sub-section
-    h3#{$ doc.constructorDoc.name | toId $}
-      pre.prettyprint
-        code.
-          {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+.div(class="row-margin" layout="row" layout-xs="column")
+  div(flex="20" flex-xs="100")
+    h2 Class Description
+  div(class="class-description-content" flex="80" flex-xs="100")
     :marked
-      {%- if doc.constructorDoc.notYetDocumented %}
-      *Not Yet Documented*
+    {%- if doc.description.length > 2 %}
+{$ doc.description | indentForMarkdown(6) | trimBlankLines $}
+    {% else %}
+      *Not yet documented*
+    {% endif %}
+
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Class Export
+  div(flex="80" flex-xs="100")
+    pre.prettyprint.no-bg
+      code.no-pln.
+        export {$ doc.docType $} {$ doc.name $}
+
+{%- if doc.decorators.length %}
+{% block annotations %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Annotations
+  div(flex="80" flex-xs="100")
+    {%- for decorator in doc.decorators %}
+      pre.prettyprint.no-bg
+        code.
+          @{$ decorator.name $}{$ paramList(decorator.arguments) | indent(10, false) $}
+      :marked
+      {%- if decorator.notYetDocumented %}
+        *Not yet documented*
       {% else %}
-{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
-      {% endif -%}
+        {$ decorator.description | indentForMarkdown(8) | trimBlankLines $}
+      {% endif %}
+    {% endfor %}
+{% endblock %}
 {% endif %}
 
-{% if doc.statics.length -%}
-.l-main-section
-  h2 Static Members
-{%- for member in doc.statics %}{% if not member.internal %}
-  .l-sub-section
-    h3#{$ member.name | toId $}
-      pre.prettyprint
-        code.
-          {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+{%- if doc.constructorDoc and not doc.constructorDoc.internal %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Constructor
+  div(flex="80" flex-xs="100")
+    pre.prettyprint.no-bg
+      code.
+        {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $}
+    :marked
+      {%- if doc.constructorDoc.notYetDocumented %}
+      *Not yet documented*
+      {% else %}
+{$ doc.constructorDoc.description | indentForMarkdown(6) | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
+      {% endif %}
+{% endif %}
 
+{% if doc.statics.length %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Static Members
+  div(flex="80" flex-xs="100")
+  {% for member in doc.statics %}{% if not member.internal %}
+    pre.prettyprint.no-bg
+      code.
+        {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
     :marked
       {%- if member.notYetDocumented %}
-        *Not Yet Documented*
+      *Not yet documented*
       {% else %}
 {$ member.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
       {% endif %}
-{% endif %}{% endfor %}
-{%- endif -%}
 
+    {% if not loop.last %}
+    .hr(class="hr-margin")
+    {% endif %}
 
-{% if doc.members.length -%}
-.l-main-section
-  h2 Instance Members
-{%- for member in doc.members %}{% if not member.internal %}
-  .l-sub-section
-    h3#{$ member.name | toId $}
-      pre.prettyprint
-        code.
-          {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
+  {% endif %}{% endfor %}
+{% endif %}
+
+{% if doc.members.length %}
+.div(layout="row" layout-xs="column" class="instance-members" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Instance Members
+  div(flex="80" flex-xs="100")
+    {% for member in doc.members %}{% if not member.internal %}
+    pre.prettyprint.no-bg
+      code.
+        {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $}
 
     :marked
       {%- if member.notYetDocumented %}
-        *Not Yet Documented*
+      *Not yet documented*
       {% else %}
-{$ member.description | indentForMarkdown(6) | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
-      {% endif %}
-{% endif %}{% endfor %}
-{%- endif -%}
+{$ member.description | indentForMarkdown(6) | replace('### Example', '') | replace('## Example', '') | replace('# Example', '') | trimBlankLines $}
+      {% endif -%}
+
+    {% if not loop.last %}
+    .hr(class="hr-margin")
+    {% endif %}
+
+  {% endif %}{% endfor %}
+{% endif %}
+
+.p(class="location-badge")
+  exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} }
+  defined in {$ githubViewLink(doc) $}
 
 {% endblock %}
diff --git a/tools/api-builder/angular.io-package/templates/decorator.template.html b/tools/api-builder/angular.io-package/templates/decorator.template.html
index 5c32e00c79..597de1783e 100644
--- a/tools/api-builder/angular.io-package/templates/decorator.template.html
+++ b/tools/api-builder/angular.io-package/templates/decorator.template.html
@@ -16,7 +16,7 @@ include {$ relativePath(doc.path, '_util-fns') $}
 
   :marked
 {%- if doc.notYetDocumented %}
-    *Not Yet Documented*
+    *Not yet documented*
 {% else %}
 {$ doc.description | indentForMarkdown(4) | trimBlankLines $}
 {% endif -%}
diff --git a/tools/api-builder/angular.io-package/templates/directive.template.html b/tools/api-builder/angular.io-package/templates/directive.template.html
index 54fe6ff370..4689381431 100644
--- a/tools/api-builder/angular.io-package/templates/directive.template.html
+++ b/tools/api-builder/angular.io-package/templates/directive.template.html
@@ -5,44 +5,55 @@
 {% block annotations %}
 {% endblock %}
 
-
 {% block additional -%}
-.l-main-section
-  h2 Selectors
-  .l-sub-section{% for selector in doc.directiveOptions.selector.split(',') %}
-    h3.selector
-      code {$ selector $}{% endfor %}
 
-{% if doc.inputs %}
-.l-main-section
-  h2 Inputs
-  .l-sub-section{% for binding, property in doc.inputs %}
-    h3.input
-      code {$ property.bindingName $}
-      | &nbsp;bound to&nbsp;
-      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
-    :marked
-{$ property.memberDoc.description | indentForMarkdown(2) | trimBlankLines $}{% endfor %}
+{%- if doc.directiveOptions.selector.split(',').length %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Selectors
+  div(flex="80" flex-xs="100")
+    {% for selector in doc.directiveOptions.selector.split(',') %}
+    p.selector
+      code {$ selector $}
+    {% endfor %}
 {% endif %}
 
 {% if doc.outputs %}
-.l-main-section
-  h2 Outputs
-  .l-sub-section{% for binding, property in doc.outputs %}
-    h3.output
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Outputs
+  div(flex="80" flex-xs="100")
+  {% for binding, property in doc.outputs %}
+    div(class="code-margin")
       code {$ property.bindingName $}
       | &nbsp;bound to&nbsp;
       code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
     :marked
-{$ event.memberDoc.description | indentForMarkdown(2) | trimBlankLines $}
-{% endfor %}
+{$ event.memberDoc.description | indentForMarkdown(6) | trimBlankLines $}
+  {% endfor %}
 {% endif %}
 
-{% if doc.directiveOptions.exportAs %}
-.l-main-section
-  h2 Exported As
-  .l-sub-section
-    h3.export-as
+{% if doc.inputs %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Inputs
+  div(flex="80" flex-xs="100")
+    {% for binding, property in doc.inputs %}
+    div(class="code-margin")
+      code {$ property.bindingName $}
+      | &nbsp;bound to&nbsp;
+      code {$ property.memberDoc.classDoc.name $}.{$ property.propertyName $}
+    :marked
+{$ event.memberDoc.description | indentForMarkdown(4) | trimBlankLines $}
+    {% endfor %}
+{% endif %}
+
+{%- if doc.directiveOptions.exportAs %}
+.div(layout="row" layout-xs="column" class="row-margin")
+  div(flex="20" flex-xs="100")
+    h2 Exported as
+  div(flex="80" flex-xs="100")
+    p.input
       code {$ doc.directiveOptions.exportAs $}
 {% endif %}
 {% endblock %}
diff --git a/tools/api-builder/angular.io-package/templates/interface.template.html b/tools/api-builder/angular.io-package/templates/interface.template.html
index 9c59159b29..bce6547d23 100644
--- a/tools/api-builder/angular.io-package/templates/interface.template.html
+++ b/tools/api-builder/angular.io-package/templates/interface.template.html
@@ -1 +1 @@
-{% extends 'class.template.html' -%}
\ No newline at end of file
+{% extends 'class.template.html' %}
\ No newline at end of file
diff --git a/tools/api-builder/docs-package/processors/convertBackticksToCodeBlocks.js b/tools/api-builder/docs-package/processors/convertBackticksToCodeBlocks.js
index feb7d2cdc4..4ab2312ebb 100644
--- a/tools/api-builder/docs-package/processors/convertBackticksToCodeBlocks.js
+++ b/tools/api-builder/docs-package/processors/convertBackticksToCodeBlocks.js
@@ -44,7 +44,9 @@ module.exports = function convertBackticksToCodeBlocks() {
             var replaceVal = '\n' + newPrePad + codeExamplePrefix + escapeHtml(blockContents) + '\n';
             // if nextBlock does NOT start with a '.' then we want to restart a markdown block.
             // and that block needs to be exdented from the preceding code-example content.
-            if (nextBlockStartChar != '.') {
+            // There is also a case where immediately after the backticks, an @example (aka +makeExample) is created.
+            // In this case a markdown block is not needed.
+            if (nextBlockStartChar !== '.' && nextBlockStartChar !== '+') {
               if (postPad.length >= 2) {
                 // modulo op in next line insures that pad is always a multiple of 2 ( jade whitespace).
                 postPad = postPad.substr(2 + (postPad.length % 2)); // exdent
diff --git a/tools/api-builder/links-package/inline-tag-defs/example.js b/tools/api-builder/links-package/inline-tag-defs/example.js
index 9dc8f33363..caaccfd61f 100644
--- a/tools/api-builder/links-package/inline-tag-defs/example.js
+++ b/tools/api-builder/links-package/inline-tag-defs/example.js
@@ -32,7 +32,8 @@ module.exports = function exampleInlineTagDef(getLinkInfo, parseArgString, getAp
         log.warn(createDocMessage('Invalid example (unable to locate fragment file: ' + quote(fragFileName) + ")", doc));
       }
 
-      var comma = ', '
+      var comma = ', ';
+      // the '+' character is a jade thing for mixins http://jade-lang.com/reference/mixins/
       var res = [ "+makeExample(", quote(mixinFilePath), comma, region ? quote(region) : 'null', comma, title ? quote(title) : 'null', ")" ].join('');
       return res;
     }