design(style): Restyle changes from Alex

2016-09-12 08:34:29 -07:00 · 2016-09-12 08:34:29 -07:00 · 65db6b9268
parent c74c45f75a
commit 65db6b9268
58 changed files with 2196 additions and 1405 deletions
--- a/package.json
+++ b/package.json
@ -77,4 +77,4 @@
    "jstransformer-marked": "^1.0.1"
  },
  "homepage": "http://angular.io/"
-}
+}
--- a/public/_data.json
+++ b/public/_data.json
@ -2,7 +2,7 @@
  "index": {
    "hero": "home",
    "title": "One framework.",
-    "subtitle": "Mobile and desktop."
+    "subtitle": "Mobile & desktop."
  },

  "features": {
--- a/public/_includes/_footer.jade
+++ b/public/_includes/_footer.jade
@ -8,7 +8,7 @@ else
  - var styleguide = "/docs/ts/latest/styleguide.html"

 .main-footer
-  nav.background-blue-grey-900.grid-fluid
+  nav.background-midnight.grid-fluid

    .c3.main-footer-branding
      .logo-inverse-large
@ -51,7 +51,7 @@ else
      ul.text-body
        li <a href="https://angular.cn/">中文版</a>

-  footer(class="background-steel")
+  footer(class="background-midnight")
    small.text-caption Powered by Google ©2010-2016. Code licensed under an <a href="/license" class="text-snow">MIT-style License</a>. Documentation licensed under <a class="text-snow" href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow" md-button)
+    a(aria-label="View Style Guide" href=styleguide title="Style Guide" class="styleguide-trigger text-snow")
      span.icon-favorite
--- a/public/_includes/_hero-home.jade
+++ b/public/_includes/_hero-home.jade
@ -1,13 +1,17 @@
-header(class="background-sky")
-  .hero.background-superhero-paper.is-large
-    h1.text-headline.hero-logo #{title}<br>#{subtitle}
+header(class="background-sky l-relative")

-    .hero-cta
-      a(href="/docs/ts/latest/quickstart.html" class="md-raised button button-large button-plain" md-button) Get Started
+    .hero.background-superhero-paper.is-large
+        img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
+        h1.text-headline #{title}<br>#{subtitle}
+        a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) Get Started

-  .banner.banner-floaty
-    .banner-ng-annoucement
-      div(class="banner-text" align="center")
-        p Join us for ng-europe in Paris, France this October!
-      div(class="banner-button")
+    .announcement-bar.shadow-2.clearfix
+        img(src="/resources/images/logos/ng-europe/ng-europe-logo.png")
+        p Join us for <strong>ng-europe in Paris</strong>, France this October!
        a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Register now
+
+    //- ANGULAR FINAL RELEASE ANNOUCEMENT
+    //- .announcement-bar.shadow-2.clearfix
+    //-   img(src="/resources/images/logos/angular2/angular.svg")
+    //-   p Angular 2.0 Final Release Now Live!
+    //-   a(href="https://ngeurope.org/?utm_source=angular&utm_medium=banner&utm_campaign=angular-banner" target="_blank" class="button md-button") Learn More
--- a/public/_includes/_hero.jade
+++ b/public/_includes/_hero.jade
@ -13,30 +13,27 @@
 if current.path[4] && current.path[3] == 'api'
  - var textFormat = 'is-standard-case'

-header(class="hero background-sky", style=fixHeroCss ? "height:auto" : "")
-  div(class="inner-header")
-    h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
-    if useBadges
-    span(class="badges")
-      if docType
-        span(class="status-badge").
-          #{renamer(capitalize(docType))}
-      if stability
-        span(layout="row" class="status-badge")
-          // badge circle is filled based on stability by matching a css selector in _hero.scss
-          span(class="status-circle status-#{stability}")
-          span Stability: #{capitalize(stability)}
-      if security
-        span(class="status-badge security-risk-badge").
-          Security Risk
+header.hero.background-sky
+  h1(class="hero-title #{textFormat}") #{headerTitle}
+
+  if useBadges
+    if stability
+      span(class="badge is-#{stability}").
+        #{capitalize(stability)}
+    if security
+      span(class="badge is-deprecated").
+        Security Risk
+
+  //CLEAR FLOAT ELEMENTS
+  .clear

  if subtitle
-    h2.hero-subtitle.text-subhead #{subtitle}
+    h2.hero-subtitle #{subtitle}
+
+  else if docType
+    h2.hero-subtitle #{renamer(capitalize(docType))}
+
+
+if current.path[3] == 'api' && current.path[1] == 'dart'
+  block breadcrumbs

-  else if current.path[3] == 'api' && current.path[1] == 'dart'
-    block breadcrumbs
-    //- Show cross-language menu for top-level API page (but not entry pages)
-    if ! public.docs[current.path[1]][current.path[2]][current.path[3]][current.path[4]]
-      != partial("_version-dropdown")
-  else if current.path[0] == "docs"
-    != partial("_version-dropdown")
--- a/public/_includes/_main-nav.jade
+++ b/public/_includes/_main-nav.jade
@ -1,15 +1,14 @@
 - var language = current.path[1] || 'ts'
 - if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }

-md-toolbar(class="main-nav background-regal l-pinned-top l-layer-5",scroll-y-offset-element)
-  nav
-    h1 <a href="/" md-button>Angular <sup>by Google</sup></a>
+nav.main-nav.l-pinned-top.l-layer-5
+  h1 <a href="/" md-button>Angular <sup>by Google</sup></a>

-    button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>
+  button(class="main-nav-button main-nav-mobile-trigger l-right" aria-label="View Menu" ng-click="appCtrl.toggleMainMenu($event)" md-button) Site Menu <span class="icon icon-arrow-drop-down"></span>

-    ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
-      li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
-      li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>Docs</a>
-      li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
-      li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
-      li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>
+  ul(ng-class="appCtrl.showMainNav ? 'is-visible' : ''")
+    li.l-left <a class="main-nav-button" href="/features.html" md-button>Features</a>
+    li.l-left <a class="main-nav-button" href="/docs/#{language}/latest/" md-button>Docs</a>
+    li.l-left <a class="main-nav-button" href="/events.html" md-button>Events</a>
+    li.l-left <a class="main-nav-button" href="/news.html" md-button>News</a>
+    li.l-right <a class="main-nav-button" href="/docs/ts/latest/quickstart.html" md-button>Get Started</a>
--- a/public/_includes/_util-fns.jade
+++ b/public/_includes/_util-fns.jade
@ -83,14 +83,14 @@ mixin makeExample(_filePath, region, _title, stylePatterns)
  - var format = attributes.format || defaultFormat;
  - if (attributes.format === '.') format = '';
  - var avoid = !!attributes.avoid;
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';

-  if (title)
-    if (avoid)
-      .example-title.avoid AVOID: #{title}
-    else
-      .example-title #{title}
-  code-example(language="#{language}" format="#{format}")
-    != styleString(frag, stylePatterns)
+  div(class="code-example #{avoidClass}")
+    if (title)
+      header
+        h4 #{title}
+    code-example(language="#{language}" format="#{format}")
+      != styleString(frag, stylePatterns)

 //- Like makeExample, but: (1) doesn't show line numbers. (2) If region
 //- is omitted and title is 'foo (r)' then region is taken as 'r'.
@ -142,17 +142,17 @@ mixin makeJson( filePath, jsonConfig, title, stylePatterns)
  - var json = unescapeHtml(frag);
  - var jsonExtract = extractJson(json, jsonConfig);
  - var avoid = !!attributes.avoid;
+  - var avoidClass = avoid ? 'is-anti-pattern' : '';

-  if (title)
-    if (avoid)
-      .example-title.avoid #{title}
-    else
-      .example-title #{title}
-  code-example(language="#{language}" format="#{format}")
-    if (jsonExtract == 'ERROR')
-      err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
-    else
-      != styleString(jsonExtract, stylePatterns)
+  div(class="code-example #{avoidClass}")
+    if (title)
+      header
+        h4 #{title}
+    code-example(language="#{language}" format="#{format}")
+      if (jsonExtract == 'ERROR')
+        err ERROR: Unable to extract json using config: "#{jsonConfig.toString()}"
+      else
+        != styleString(jsonExtract, stylePatterns)

 if !jade2ng
  //- Open (and close) an explanation <div>. See QuickStart
--- a/public/_includes/_version-dropdown.jade
+++ b/public/_includes/_version-dropdown.jade
@ -35,11 +35,10 @@ else if current.path[3]

 //- VERSION TREE CREATOR MIXIN
 mixin tree(directory, urlPrefix, name, latest)
-  ul
-    for val, semvar in directory
-      if semvar !== '.git' && semvar !== '_data'
-        - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
-        li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>
+  for val, semvar in directory
+    if semvar !== '.git' && semvar !== '_data'
+      - var libVersion = (semvar == "latest") ?  latest : semvar.replace(/\_+/gm, ".")
+      li <a href="#{urlPrefix}/#{semvar}/#{page}" md-button>#{name} #{libVersion}</a>


 //- BUTTON TITLE GENERATION
@ -69,7 +68,7 @@ nav.dropdown
  div(class="overlay ng-hide" ng-click="appCtrl.toggleVersionMenu($event)" ng-show="appCtrl.showMenu")

  <!-- DROPDOWN MENU -->
-  div(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
+  ul(class="dropdown-menu" ng-class="appCtrl.showMenu ? 'is-visible' : ''")
    mixin tree(public.docs.ts, "/docs/ts", "Angular 2 for TypeScript")
    mixin tree(public.docs.js, "/docs/js", "Angular 2 for JavaScript")
    //- Disable cross-language link for API entry pages (but keep for top API search page):
--- a/public/docs/_includes/_side-nav.jade
+++ b/public/docs/_includes/_side-nav.jade
@ -40,53 +40,71 @@
 - var reference  = sections('', function(item) { return item.reference; });
 - var anyItemSelected = function(items) {
 -   var selectedCount = items.filter(function(item) { return !!item.class; }).length;
-   return selectedCount > 0 ? 'is-nav-title-selected' : '';
+-   return selectedCount > 0 ? 'is-selected' : '';
 - }
 - var isQuickstartSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 1].replace('.html', '');
-   return bit === 'quickstart' ? 'is-nav-title-selected' : '';
+-   return bit === 'quickstart' ? 'is-selected' : '';
 -}
 - var isApiReferenceSelected = function() {
 -   var splitted = cur.split('/');
 -   var bit = splitted[splitted.length - 2];
-   return bit === 'api' ? 'is-nav-title-selected' : '';
+-   return bit === 'api' ? 'is-selected' : '';
 -}
 - var isCollapsed = function(titleStyle) {
-   return titleStyle === 'is-nav-title-selected' ? '' : 'is-hidden';
+-   return titleStyle === 'is-selected' ? '' : 'is-hidden';
 - }

-nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
+- var language = current.path[1] || 'ts'
+- if (language !== 'ts' || language !== 'js' || language !== 'dart') { language = 'ts'; }
+
+
+nav(class="sidenav l-pinned-left l-layer-4 l-offset-nav"  ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
  // SEARCH BAR
-  header.side-nav-search.st-input-wrapper
+  header.sidenav-search.st-input-wrapper
    form.st-input-inner
      label(for="search-io" class="is-hidden") Search Docs
      input(type="search" id="search-io" placeholder="SEARCH DOCS...")
    button(class="mobile-trigger button" aria-label="View Docs Menu" ng-click="appCtrl.toggleDocsMenu($event)" md-button) Docs <span class="icon icon-arrow-drop-down"></span>

-  div(class="side-nav-secondary" ng-class="appCtrl.showDocsNav ? 'is-visible' : ''")
-    .nav-blocks
+  ul(class="sidenav-links")
+    li.sidenav-section.no-border
+      a(class="nav-title" href="/docs/#{current.path[1]}/latest/") Docs Home
+
+    // CORE DOCUMENTATION
+    li.sidenav-section-divider
+      h3 Core Documentation
+
+    li.sidenav-section
      a(class="nav-title #{isQuickstartSelected(cur)}" href="#{qs.href}" title="#{qs.tooltip}") Quickstart

-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
-        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
-      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
-        ul
-          each item, index in tutorial
-            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}

-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Basics
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(basics)}" href="#{basics[0].href}" title="#{basics[0].tooltip}") Guide
        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")

      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(basics))}")
        ul
          each item, index in basics
            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+    li.sidenav-section.no-border
+      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference

-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Developer Guide
+    // ADVANCED DOCUMENATION
+    li.sidenav-section-divider
+      h3 Additional Documentation
+
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(tutorial)}" href="#{tutorial[0].href}" title="#{tutorial[0].tooltip}") Tutorial
+        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")
+      .nav-ordered-lists(class="#{isCollapsed(anyItemSelected(tutorial))}")
+        ul
+          each item, index in tutorial
+            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{index + 1}. #{item.navTitle}
+
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(guide)}" href="#{guide[0].href}" title="#{guide[0].tooltip}") Advanced Documentation
        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")

      .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(guide))}")
@ -94,8 +112,8 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
          each item in guide
            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}

-    .nav-blocks
-      a(class="nav-title #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
+    li.sidenav-section
+      a(class="nav-title is-parent #{anyItemSelected(cookbook)}" href="#{cookbook[0].href}" title="#{cookbook[0].tooltip}") Cookbook
        img(class="inline-arrow-down-svg" src="/resources/images/icons/ic_keyboard_arrow_down_black_24px.svg")

      .nav-unordered-lists(class="#{isCollapsed(anyItemSelected(cookbook))}")
@ -103,13 +121,17 @@ nav.side-nav.l-pinned-left.l-layer-4.l-offset-nav
          each item in cookbook
            li(class="nav-list-item #{item.class}"): a(href="#{item.href}" title="#{item.tooltip}") #{item.navTitle}

-    .nav-blocks
-      a(class="nav-title #{isApiReferenceSelected()}" href="#{reference[0].href}" title="#{reference[0].tooltip}") API Reference
+
+
+
+  if current.path[0] == "docs"
+    != partial("../../_includes/_version-dropdown")
+

 script.
  // Could put in appCtrl but only needed here and clear here
  (function scrollToSelectedLink() {
-    var sideNav = document.getElementsByClassName('side-nav')[0];
+    var sideNav = document.getElementsByClassName('sidenav')[0];
    var link = sideNav.getElementsByClassName('is-selected')[0];
    if(link && link.offsetTop > window.innerHeight){
      sideNav.scrollTop = link.offsetTop - (window.innerHeight/2);
--- a/public/docs/_layout.jade
+++ b/public/docs/_layout.jade
@ -29,12 +29,9 @@ html(lang="en" ng-app="angularIOApp" itemscope itemtype="http://schema.org/Frame
          != yield
      else
        article(class="l-content-small grid-fluid docs-content")
-          div(class="c10")
-            .showcase
-              .showcase-content
-                != yield
-                  if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
-                    != partial("../_includes/_next-item")
+          != yield
+            if (current.path[3] == 'guide' || current.path[3] == 'tutorial') && current.path[4]
+              != partial("../_includes/_next-item")

    != partial("../_includes/_footer")
    != partial("../_includes/_scripts-include")
--- a/public/docs/dart/latest/_data.json
+++ b/public/docs/dart/latest/_data.json
@ -2,8 +2,9 @@
  "index": {
    "icon": "home",
    "title": "Angular Docs",
+    "subtitle": "Dart",
    "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>angular.io/dart</b>! The current Angular 2 Dart release is <b>beta.21</b>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
  },

  "quickstart": {
--- a/public/docs/dart/latest/index.jade
+++ b/public/docs/dart/latest/index.jade
@ -1,38 +1,25 @@
-div.card-row(layout='row' layout-align="space-around center"
+.clearfix
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
+    h2.text-headline.text-uppercase Quickstart
+    p A short beginner guide explaining the basic concepts of Angular

-class="docs-landing")
-  div(class="card-row-container")
-    md-card(class="card")
-      md-card-content(flex layout="column" layout-align="space-between center")
-        div
-          h2(class="text-headline text-uppercase") 5 Minute Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
+    footer View Quickstart

-        footer
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html" class="button md-button") View Quickstart
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular
+
+    footer View Guide
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.
+
+    footer View API


-  div(class="card-row-container")
-    md-card(class="card")
-      md-card-content(flex layout="column" layout-align="space-between center")
-        div
-          h2(class="text-headline text-uppercase") Developer Guide
-          p An intermediate development guide covering all major features of Angular
+div.c12.l-space-top-3
+  .alert.is-helpful.
+    Not using Angular 2 yet? Perhaps you need the
+    <a href="https://www.dartdocs.org/documentation/angular/latest" target="_blank">API docs for the original AngularDart</a>.

-        footer
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/" class="button button-primary md-button") View Guide
-
-
-  div(class="card-row-container")
-    md-card(class="card")
-      md-card-content(flex layout="column" layout-align="space-between center")
-        div
-          h2(class="text-headline text-uppercase") API Reference
-          p An advanced reference of all Angular Classes, Methods, etc.
-
-        footer
-          a(href="/docs/#{current.path[1]}/#{current.path[2]}/api/" class="button md-button") View API
-
-.alert.is-helpful.
-  Not using Angular 2 yet? Perhaps you need the
-  <a href="https://www.dartdocs.org/documentation/angular/latest" target="_blank">API docs for the original AngularDart</a>.
--- a/public/docs/dart/latest/quickstart.jade
+++ b/public/docs/dart/latest/quickstart.jade
@ -41,7 +41,7 @@ block install-packages
    From the project folder, run `pub get` to install the angular2 and browser
    packages (along with the packages they depend on).

-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
    &gt; <span class="blk">pub get</span>
    Resolving dependencies...

@ -90,7 +90,7 @@ block build-app
      Before deploying the app, we need to generate JavaScript files.
      The `pub build` command makes that easy.

-    code-example(language="sh").
+    code-example(language="sh" class="code-shell").
      &gt; <span class="blk">pub build</span>
      Loading source assets...

--- a/public/docs/js/latest/_data.json
+++ b/public/docs/js/latest/_data.json
@ -2,8 +2,9 @@
  "index": {
    "icon": "home",
    "title": "Angular Docs",
+    "subtitle": "JavaScript",
    "menuTitle": "Docs Home",
-    "banner": "Welcome to <b>Angular in JavaScript</b>! The current Angular 2 release is <b>rc.7</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
+    "banner": "The current release is <b>rc.7</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> for enhancements, fixes, and breaking changes."
  },

  "quickstart": {
--- a/public/docs/js/latest/index.jade
+++ b/public/docs/js/latest/index.jade
@ -1,33 +1,67 @@
-div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex
-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase 5 Minute Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
+.clearfix
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
+    h2.text-headline.text-uppercase Quickstart
+    p A short beginner guide explaining the basic concepts of Angular

-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart
+    footer View Quickstart
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular
+
+    footer View Guide
+
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.
+
+    footer View API


-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase Developer Guide
-          p An intermediate development guide covering all major features of Angular
+.c4.secondary-content-list
+  h4 Advanced Documentation
+  ul
+    li
+      a(href="/docs/js/latest/guide/ngmodule.html") Angular Modules
+    li
+      a(href="/docs/js/latest/guide/animations.html") Animations
+    li
+      a(href="/docs/js/latest/guide/attribute-directives.html") Attribute Directives
+    li
+      a(href="/docs/js/latest/guide/browser-support.html") Browser Support
+    li
+      a(href="/docs/js/latest/guide/component-styles.html") Component Styles
+    li
+      a(href="/docs/js/latest/guide/ngmodule.html") View All...

-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide
-
-
-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase API Reference
-          p An advanced reference of all Angular Classes, Methods, etc.
-
-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API
+.c4.secondary-content-list
+  h4 Cookbook
+  ul
+    li
+      a(href="/docs/js/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2
+    li
+      a(href="/docs/js/latest/cookbook/ngmodule-faq.html") Angular Module FAQ
+    li
+      a(href="/docs/js/latest/cookbook/component-communication.html") Component Interaction
+    li
+      a(href="/docs/js/latest/cookbook/component-relative-paths.html") Component-Relative Paths
+    li
+      a(href="/docs/js/latest/cookbook/dependency-injection.html") Dependency Injection
+    li
+      a(href="/docs/js/latest/cookbook/") View All...

+.c4.secondary-content-list
+  h4 Tools & Libraries
+  ul
+    li
+      a(target="_blank" href="https://github.com/angular/universal") Angular Universal
+    li
+      a(target="_blank" href="https://augury.angular.io/") Augury
+    li
+      a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart
+    li
+      a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer
+    li
+      a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server
+    li
+      a(target="_blank" href="/resources/") View All...
--- a/public/docs/ts/_cache/quickstart.jade
+++ b/public/docs/ts/_cache/quickstart.jade
@ -104,7 +104,7 @@ button(class="verbose on md-primary md-button md-ink-ripple", type="button", onc
  ### (a) Create the project folder

 - var _ = _docsFor == 'dart' ? '_' : '-';
-code-example(language="sh").
+code-example(language="sh" class="code-shell").
  mkdir angular2!{_}quickstart
  cd    angular2!{_}quickstart

@ -148,14 +148,14 @@ block install-packages
    We install the packages listed in `package.json` using `npm`. Enter the
    following command in a terminal window (command window in Windows):

-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
    npm install

  .l-sub-section
    :marked
      The `typings` folder could not show up after `npm install`. If so, please install them manually.

-    code-example(language="sh").
+    code-example(language="sh" class="code-shell").
      npm run typings install

  .alert.is-important
@ -365,7 +365,7 @@ block create-main

    ### Bootstrapping is platform-specific

-    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function 
+    Notice that we import the `!{_platformBrowserDynamicVsBootStrap}` function
    from `#{_angular_browser_uri}`, not `#{_angular_core_uri}`.
    Bootstrapping isn't core because there isn't a single way to bootstrap the app.
    True, most applications that run in a browser call the bootstrap function from
@ -509,7 +509,7 @@ h2#index Step !{step++}: Add #[code index.html]
  a#my-app
  :marked
    When Angular calls the `!{_bootstrapModule}` function in <span ngio-ex>main.ts</span>,
-    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that 
+    it reads the `!{_AppModuleVsAppComp}` metadata<span if-docs="ts">, sees that
    `AppComponent` is the bootstrap component</span>,
    finds the `my-app` selector, locates an element tag named `my-app`,
    and renders our application's view between those tags.
--- a/public/docs/ts/latest/_data.json
+++ b/public/docs/ts/latest/_data.json
@ -2,6 +2,7 @@
  "index": {
    "icon": "home",
    "title": "Angular Docs",
+    "subtitle": "TypeScript",
    "menuTitle": "Docs Home",
    "banner": "Welcome to <b>Angular in TypeScript</b>! The current Angular 2 release is <b>rc.7</b>. Please consult the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>  Change Log</a> about recent enhancements, fixes, and breaking changes."
  },
@ -9,48 +10,56 @@
  "cli-quickstart": {
    "icon": "query-builder",
    "title": "CLI Quickstart",
+    "subtitle": "TypeScript",
    "description": "Use the CLI tool to build apps quickly in Angular 2",
    "hide": true
  },

  "quickstart": {
    "icon": "query-builder",
-    "title": "Quickstart",
-    "description": "Get up and running with Angular 2"
+    "subtitle": "TypeScript",
+    "description": "Get up and running with Angular 2",
+    "banner": "This QuickStart guide demonstrates how to build and run a simple Angular 2 application in TypeScript."
  },

  "tutorial": {
    "icon": "list",
    "title": "Tutorial",
+    "subtitle": "TypeScript",
    "banner": "Angular 2 is currently in Release Candidate."
  },

  "guide": {
    "icon": "list",
    "title": "Developer Guides",
+    "subtitle": "TypeScript",
    "banner": "Angular 2 is currently in Release Candidate."
  },

  "cookbook": {
    "icon": "list",
    "title": "Cookbook",
+    "subtitle": "TypeScript",
    "banner": "How to solve common implementation challenges."
  },

  "api/": {
    "icon": "book",
    "title": "API Preview",
+    "subtitle": "TypeScript",
    "reference": true
  },

  "cheatsheet": {
    "title": "Angular Cheat Sheet",
+    "subtitle": "TypeScript",
    "intro": "A quick guide to Angular syntax. (Content is provisional and may change.)",
    "reference": false
  },

  "glossary": {
    "title": "Glossary",
+    "subtitle": "TypeScript",
    "intro": "Brief definitions of the most important words in the Angular 2 vocabulary",
    "reference": false
  },
@ -58,6 +67,7 @@
  "resources": {
    "icon": "play-circle-fill",
    "title": "Angular Resources",
+    "subtitle": "TypeScript",
    "banner": "Angular 2 is currently in Release Candidate.",
    "resources": true
  },
@ -65,11 +75,13 @@
  "help": {
    "icon": "chat",
    "title": "Help & Support",
+    "subtitle": "From our team & community",
    "resources": true
  },

  "styleguide": {
    "title": "Docs Style Guide",
+    "subtitle": "TypeScript",
    "intro": "Design & Layout Patterns For Documentation"
  }
 }
--- a/public/docs/ts/latest/index.jade
+++ b/public/docs/ts/latest/index.jade
@ -1,33 +1,66 @@
-div.card-row.docs-landing.layout-align-space-around-center.layout-row.flex
-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase Quickstart
-          p A short beginner guide explaining the basic concepts of Angular
+.clearfix
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html")
+    h2.text-headline.text-uppercase Quickstart
+    p A short beginner guide explaining the basic concepts of Angular

-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/quickstart.html") View Quickstart
+    footer View Quickstart

+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/")
+    h2.text-headline.text-uppercase Developer Guide
+    p An intermediate development guide covering all major features of Angular

-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase Developer Guide
-          p An intermediate development guide covering all major features of Angular
+    footer View Guide

-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/guide/") View Guide
+  a.card.c4(href="/docs/#{current.path[1]}/#{current.path[2]}/api/")
+    h2.text-headline.text-uppercase API Reference
+    p An advanced reference of all Angular Classes, Methods, etc.

+    footer View API

-  div.card-row-container
-    md-card.card
-      md-card-content.layout-align-space-between-center.layout-column.flex
-        div
-          h2.text-headline.text-uppercase API Reference
-          p An advanced reference of all Angular Classes, Methods, etc.
+.c4.secondary-content-list
+  h4 Advanced Documentation
+  ul
+    li
+      a(href="/docs/ts/latest/guide/ngmodule.html") Angular Modules
+    li
+      a(href="/docs/ts/latest/guide/animations.html") Animations
+    li
+      a(href="/docs/ts/latest/guide/attribute-directives.html") Attribute Directives
+    li
+      a(href="/docs/ts/latest/guide/browser-support.html") Browser Support
+    li
+      a(href="/docs/ts/latest/guide/component-styles.html") Component Styles
+    li
+      a(href="/docs/ts/latest/guide/ngmodule.html") View All...

-        footer
-          a.button.md-button(href="/docs/#{current.path[1]}/#{current.path[2]}/api/") View API
+.c4.secondary-content-list
+  h4 Cookbook
+  ul
+    li
+      a(href="/docs/ts/latest/cookbook/a1-a2-quick-reference.html") Angular 1 to Angular 2
+    li
+      a(href="/docs/ts/latest/cookbook/ngmodule-faq.html") Angular Module FAQ
+    li
+      a(href="/docs/ts/latest/cookbook/component-communication.html") Component Interaction
+    li
+      a(href="/docs/ts/latest/cookbook/component-relative-paths.html") Component-Relative Paths
+    li
+      a(href="/docs/ts/latest/cookbook/dependency-injection.html") Dependency Injection
+    li
+      a(href="/docs/ts/latest/cookbook/") View All...

+.c4.secondary-content-list
+  h4 Tools & Libraries
+  ul
+    li
+      a(target="_blank" href="https://github.com/angular/universal") Angular Universal
+    li
+      a(target="_blank" href="https://augury.angular.io/") Augury
+    li
+      a(target="_blank" href="https://github.com/jaxio/celerio-angular-quickstart") Celerio Angular Quickstart
+    li
+      a(target="_blank" href="https://github.com/mgechev/codelyzer") Codelyzer
+    li
+      a(target="_blank" href="https://github.com/johnpapa/lite-server") Lite-server
+    li
+      a(target="_blank" href="/resources/") View All...
--- a/public/docs/ts/latest/quickstart.jade
+++ b/public/docs/ts/latest/quickstart.jade
@ -10,17 +10,12 @@ block includes
 //- TS/Dart shared step counter
 - var step = _stepInit

-:marked
-  This QuickStart guide demonstrates how to build and run a simple Angular 2 application in #{_Lang}.
-  It also establishes a common development environment used throughout the code examples in these
-  guides.
-
 .callout.is-helpful
  header Don't want #{_Lang}?
  p.
    Although you're getting started in #{_Lang}, you can also write Angular 2 applications
    in JavaScript and #{_docsFor == 'ts' ? 'Dart' : 'TypeScript'}. Use the language selector in the
-    banner to switch development languages for this guide.
+    left nav to switch development languages for this guide.
 .l-main-section
 h1 Overview

@ -68,12 +63,6 @@ block setup-tooling
    npm **3.x.x** or higher. To check which version you are using, run `node -v` and `npm -v`
    in a terminal window.

-aside.is-right
-  :marked
-    To easily copy text from a code example, click the *Copy to Clipboard* icon (<i
-    class="material-icons" style="font-size: 100%">content_copy </i>) in the upper right corner of
-    the example box.
-
 .l-main-section
 h1#create-and-configure Step 1: Create and configure the project

@ -91,7 +80,7 @@ h2 Create the project folder
  directory.

 - var _ = _docsFor == 'dart' ? '_' : '-';
-code-example(language="sh").
+code-example(language="sh" class="code-shell").
  mkdir angular2!{_}quickstart
  cd    angular2!{_}quickstart

@ -151,7 +140,7 @@ block install-packages
  :marked
    Using npm from the command line, install the packages listed in `package.json` with the command:

-  code-example(language="sh").
+  code-example(language="sh" class="code-shell").
    npm install

  :marked
@ -174,7 +163,7 @@ block install-packages
  :marked
    If the `typings` folder doesn't show up after running `npm install`, you'll need to install it manually with the command:

-  code-example(language="sh").
+  code-example(language="sh"  class="code-shell").
      npm run typings install

 :marked
@ -192,7 +181,7 @@ block install-packages

    **Create #{_an} #{_appDir} subfolder** off the project root directory:

-  code-example.
+  code-example.code-shell.
    mkdir #{_appDir}

  :marked
@ -334,7 +323,7 @@ h1 Step !{step++}: Build and run the application
 block run-app
  :marked
    Open a terminal window and enter this command:
-  code-example.
+  code-example.code-shell.
    npm start
 aside.is-right
  :marked
--- a/public/index.jade
+++ b/public/index.jade
@ -19,7 +19,6 @@ div(class="home-rows")
        h3(class="text-headline") Speed & Performance
        p(class="text-body").
          Achieve the maximum speed possible on the Web Platform today, and take it further, via Web Workers and server-side rendering.
-        br
        p(class="text-body").
          Angular puts you in control over scalability. Meet huge data requirements by building data models on RxJS, Immutable.js or another push-model.
    div(class="promo-img-container promo-2")
@ -47,7 +46,7 @@ div(class="home-rows")
    div(class="promo-img-container promo-4")
      div
        img(src="resources/images/home/loved-by-millions.png")
-        
+
  .cta-bar
    a(href="/docs/ts/latest/quickstart.html" class="button button-large button-shield md-raised " + "md-primary" md-button) Get Started

--- a/public/resources/css/_options.scss
+++ b/public/resources/css/_options.scss
@ -34,61 +34,4 @@ $layer-6: 6;
 $layer-7: 7;
 $layer-8: 8;
 $layer-9: 9;
-$layer-10: 10;
-
-
-/*
-* Colors
-*
-* Colors are ordered from light to dark (top to bottom).
-* Do not use hex codes directly in other Sass files. The
-* following colors are the only approved colors for this site.
-*/
-
-// GREEN COLORS
-$cactus: #8BC34A;
-
-// YELLOW
-$sunshine: #FFF59D;
-$olive: #647f11;
-
-// ORANGE
-$sand: #FFF8E1;
-$citrus: #FF8F00;
-
-// RED COLORS
-$peach: #ffebee;
-$squid: #EF3872;
-$cardinal: #E23237;
-$ruby: #B52E31;
-$pink: #D43669;
-
-// BLUE COLORS
-$light: #E3F2FD;
-$sky: #0085D3;
-$regal: #0273D4;
-$blueberry: #0262C2;
-$ocean: #0143A3;
-
-//PURPLE
-$grape: #9575CD;
-
-// DARK GRAY COLORS
-$coal: #000000;
-$steel: #253238;
-$silver: #36474F;
-$platinum: #445A64;
-$metal: #536E7A;
-$tin: #8FA4AE;
-$darkgrey: #5C707A;
-$bismark: #7a8b94;
-$grey: #B0BEC5;
-
-// LIGHT GRAY COLORS
-$cloud: #AFBEC5;
-$fog: #CFD8DC;
-$mist: #ECEFF1;
-$snow: #FFFFFF;
-$heather: #546E7A;
-$lightgrey: #F5F6F7;
-$storm: #E0E0E0;
+$layer-10: 10;
--- a/public/resources/css/_theme.scss
+++ b/public/resources/css/_theme.scss
@ -5,64 +5,24 @@
 */

 .background-sky {
-  background-color: $ocean;
-  background: linear-gradient($ocean, $regal);
+  background-color: $blue-700;
+  background: linear-gradient(145deg, $blue-900, $blue-400);
  color: $snow;
 }

-.background-regal {
-  background: $regal;
+.background-midnight {
+  background: $blue-grey-900;
  color: $snow;
 }

-.background-coal {
-  background: $coal;
-  color: $snow;
-}
-
-.background-steel {
-  background: $steel;
-  color: $snow;
-}
-
-.background-silver {
-  background: $silver;
-  color: $snow;
-}
-
-.background-blue-grey-900 {
-  background: #263238;
-  color: $snow;
-}

 /*
 * Background Images
 *
 */

-.background-lon-paper {
-  background: url('/resources/images/backgrounds/lon-paper.png') bottom center no-repeat;
-  background-size: 100%;
-  background-position: fixed;
-}
 .background-superhero-paper {
-  background: url('/resources/images/backgrounds/superhero-paper.png') bottom center no-repeat;
+  background: url('/resources/images/backgrounds/super-hero-large.png') no-repeat bottom center , linear-gradient(145deg, $blue-900, $blue-400);
+  background-blend-mode: multiply;
  background-size: 100%;
-  background-position: fixed;
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    background-image: url('/resources/images/backgrounds/superhero-paper-large.png');
-  }
-}
-
-
-
-
-/*
-* Text Colors
-*
-* Text color utility color classes
-*/
-
-.text-snow {
-  color: $snow;
 }
--- a/public/resources/css/base/_colors.scss
+++ b/public/resources/css/base/_colors.scss
@ -0,0 +1,279 @@
+/*
+* Material Design Colors
+*
+* Colors based off the material design palette
+* https://material.google.com/style/color.html#color-color-palette
+*
+*/
+
+
+/*
+* Black & White
+*
+*/
+
+$white: #FFFFFF;
+$black: #000000;
+
+
+/*
+* Amber
+*
+*/
+
+$amber-50: #FFF8E1;
+$amber-100: #FFECB3;
+$amber-200: #FFE082;
+$amber-300: #FFD54F;
+$amber-400: #FFCA28;
+$amber-500: #FFC107;
+$amber-600: #FFB300;
+$amber-700: #FFA000;
+$amber-800: #FF8F00;
+$amber-900: #FF6F00;
+$amber-A100: #FFE57F;
+$amber-A200: #FFD740;
+$amber-A400: #FFC400;
+$amber-A700: #FFAB00;
+
+
+/*
+* Blue Grey
+*
+*/
+
+$blue-grey-50: #ECEFF1;
+$blue-grey-100: #CFD8DC;
+$blue-grey-200: #B0BEC5;
+$blue-grey-300: #90A4AE;
+$blue-grey-400: #78909C;
+$blue-grey-500: #607D8B;
+$blue-grey-600: #546E7A;
+$blue-grey-700: #455A64;
+$blue-grey-800: #37474F;
+$blue-grey-900: #263238;
+
+
+/*
+* Blue
+*
+*/
+
+$blue-50: #E3F2FD;
+$blue-100: #BBDEFB;
+$blue-200: #90CAF9;
+$blue-300: #64B5F6;
+$blue-400: #42A5F5;
+$blue-500: #2196F3;
+$blue-600: #1E88E5;
+$blue-700: #1976D2;
+$blue-800: #1565C0;
+$blue-900: #0D47A1;
+$blue-A100: #82B1FF;
+$blue-A200: #448AFF;
+$blue-A400: #2979FF;
+$blue-A700: #2962FF;
+
+
+/*
+* Cyan
+*
+*/
+
+$cyan-50: #E0F7FA;
+$cyan-100: #B2EBF2;
+$cyan-200: #80DEEA;
+$cyan-300: #4DD0E1;
+$cyan-400: #26C6DA;
+$cyan-500: #00BCD4;
+$cyan-600: #00ACC1;
+$cyan-700: #0097A7;
+$cyan-800: #00838F;
+$cyan-900: #006064;
+$cyan-A100: #84FFFF;
+$cyan-A200: #18FFFF;
+$cyan-A400: #00E5FF;
+$cyan-A700: #00B8D4;
+
+
+/*
+* Green
+*
+*/
+
+$green-50: #E8F5E9;
+$green-100: #C8E6C9;
+$green-200: #A5D6A7;
+$green-300: #81C784;
+$green-400: #66BB6A;
+$green-500: #4CAF50;
+$green-600: #43A047;
+$green-700: #388E3C;
+$green-800: #2E7D32;
+$green-900: #1B5E20;
+$green-A100: #B9F6CA;
+$green-A200: #69F0AE;
+$green-A400: #00E676;
+$green-A700: #00C853;
+
+
+/*
+* Light Green
+*
+*/
+
+$light-green-50: #F1F8E9;
+$light-green-100: #DCEDC8;
+$light-green-200: #C5E1A5;
+$light-green-300: #AED581;
+$light-green-400: #9CCC65;
+$light-green-500: #8BC34A;
+$light-green-600: #7CB342;
+$light-green-700: #689F38;
+$light-green-800: #558B2F;
+$light-green-900: #33691E;
+$light-green-A100: #CCFF90;
+$light-green-A200: #B2FF59;
+$light-green-A400: #76FF03;
+$light-green-A700: #64DD17;
+
+
+/*
+* Red
+*
+*/
+
+$red-50: #FFEBEE;
+$red-100: #FFCDD2;
+$red-200: #EF9A9A;
+$red-300: #E57373;
+$red-400: #EF5350;
+$red-500: #F44336;
+$red-600: #E53935;
+$red-700: #D32F2F;
+$red-800: #C62828;
+$red-900: #B71C1C;
+$red-A100: #FF8A80;
+$red-A200: #FF5252;
+$red-A400: #FF1744;
+$red-A700: #D50000;
+
+
+/*
+* Pink
+*
+*/
+
+$pink-50: #FCE4EC;
+$pink-100: #F8BBD0;
+$pink-200: #F48FB1;
+$pink-300: #F06292;
+$pink-400: #EC407A;
+$pink-500: #E91E63;
+$pink-600: #D81B60;
+$pink-700: #C2185B;
+$pink-800: #AD1457;
+$pink-900: #880E4F;
+$pink-A100: #FF80AB;
+$pink-A200: #FF4081;
+$pink-A400: #F50057;
+$pink-A700: #C51162;
+
+
+/*
+* Purple
+*
+*/
+
+$purple-50: #F3E5F5;
+$purple-100: #E1BEE7;
+$purple-200: #CE93D8;
+$purple-300: #BA68C8;
+$purple-400: #AB47BC;
+$purple-500: #9C27B0;
+$purple-600: #8E24AA;
+$purple-700: #7B1FA2;
+$purple-800: #6A1B9A;
+$purple-900: #4A148C;
+$purple-A100: #EA80FC;
+$purple-A200: #E040FB;
+$purple-A400: #D500F9;
+$purple-A700: #AA00FF;
+
+
+/*
+* Teal
+*
+*/
+
+$teal-50: #E0F2F1;
+$teal-100: #B2DFDB;
+$teal-200: #80CBC4;
+$teal-300: #4DB6AC;
+$teal-400: #26A69A;
+$teal-500: #009688;
+$teal-600: #00897B;
+$teal-700: #00796B;
+$teal-800: #00695C;
+$teal-900: #004D40;
+$teal-A100: #A7FFEB;
+$teal-A200: #64FFDA;
+$teal-A400: #1DE9B6;
+$teal-A700: #00BFA5;
+
+
+/*
+* Orginial Colors
+*
+* Colors are ordered from light to dark (top to bottom).
+* Do not use hex codes directly in other Sass files. The
+* following colors are the only approved colors for this site.
+*/
+
+// GREEN COLORS
+$cactus: #8BC34A;
+
+// YELLOW
+$sunshine: #FFF59D;
+$olive: #647f11;
+
+// ORANGE
+$sand: #FFF8E1;
+$citrus: #FF8F00;
+
+// RED COLORS
+$peach: #ffebee;
+$squid: #EF3872;
+$cardinal: #E23237;
+$ruby: #B52E31;
+$pink: #D43669;
+
+// BLUE COLORS
+$light: #E3F2FD;
+$sky: #0085D3;
+$regal: #0273D4;
+$blueberry: #0262C2;
+$ocean: #0143A3;
+
+//PURPLE
+$grape: #9575CD;
+
+// DARK GRAY COLORS
+$coal: #000000;
+$steel: #253238;
+$silver: #36474F;
+$platinum: #445A64;
+$metal: #536E7A;
+$tin: #8FA4AE;
+$darkgrey: #5C707A;
+$bismark: #7a8b94;
+$grey: #B0BEC5;
+
+// LIGHT GRAY COLORS
+$cloud: #AFBEC5;
+$fog: #CFD8DC;
+$mist: #ECEFF1;
+$snow: #FFFFFF;
+$heather: #546E7A;
+$lightgrey: #F5F6F7;
+$storm: #E0E0E0;
--- a/public/resources/css/base/_mixins.scss
+++ b/public/resources/css/base/_mixins.scss
@ -0,0 +1,24 @@
+$phone-breakpoint: 480px !default;
+$tablet-breakpoint: 800px !default;
+
+
+@mixin respond-to($media) {
+  @if $media == mobile {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint),
+    screen and (max-width: $tablet-breakpoint) {
+      @content;
+    }
+  }
+  @else if $media == phones {
+    @media handheld and (max-width: $phone-breakpoint),
+    screen and (max-device-width: $phone-breakpoint) {
+      @content;
+    }
+  }
+  @else if $media == tablets {
+    @media screen and (max-width: $tablet-breakpoint) {
+      @content;
+    }
+  }
+}
--- a/public/resources/css/base/_type.scss
+++ b/public/resources/css/base/_type.scss
@ -1,34 +1,44 @@
 /*
 * Typographic Styles
 *
-* Material Design Typographic Styles
+* General Typographic Styles for content displayed in the body of a page
 */

 body {
  font-family: $brand-font;
  font-size: 14px;
-  color: #1a2326;
+  color: $blue-grey-600;
  &.ng-cloak {
    display: none;
  }
 }

-// NOTE: (ericjim) the new api docs use material design blue 600 links in this fashion.
+
+/*
+* Text Colors
+*
+* Text color utility color classes
+*/
+
+.text-snow {
+  color: $white;
+}
+
 a {
-  color: #1E88E5;
+  color: $blue-600;
  text-decoration: none;

  &:hover {
-    text-decoration-color: #1E88E5;
+    color: $blue-600;
    text-decoration: underline;
  }
 }

 code {
-  background: $lightgrey;
+  background: $blue-grey-50;
  border-radius: 2px;
  font-family: $mono-font;
-  color: $darkgrey;
+  color: $teal-500;
  padding: 0px 4px;
  font-size: 90%;
 }
@ -43,6 +53,11 @@ code {
 }


+/*
+* Utility Classes
+*
+*/
+
 .text-center {
  text-align: center;
 }
@ -52,6 +67,11 @@ code {
 }


+/*
+* Text Styles
+*
+*/
+
 .text-display-4 {
  margin: 0px 0px ($unit * 2) 0px;
  font-size: 112px;
@ -90,7 +110,7 @@ code {
 .docs-content h3 {
  margin: 0px 0px ($unit * 2) 0px;
  font-size: 24px;
-  font-weight: 450;
+  font-weight: 400;
  opacity: .87;
  line-height: 32px;
 }
@ -106,17 +126,33 @@ code {

 .docs-content {
  h1 {
-    font-size: 24px;
+    font-size: 34px;
+    line-height: 40px;
+    margin: ($unit * 6) 0 ($unit * 3) 0;
    opacity: 0.87;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
  }
  h2 {
-    font-size: 20px;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 32px;
+    margin: ($unit * 6) 0 ($unit * 2) 0;
  }
  h3 {
-    font-size: 16px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 28px;
+    margin: ($unit * 6) 0 ($unit * 1) 0;
  }
  h4 {
    font-size: 16px;
+    font-weight: 600;
+    line-height: 28px;
+    margin: ($unit * 6) 0 ($unit * 1) 0;
+    text-transform: uppercase;
  }
 }

@ -126,7 +162,7 @@ table th,
 .docs-content p,
 .docs-content ul,
 .docs-content ol {
-  margin: 0px 0px ($unit * 2) 0px;
+  margin: 0px 0px ($unit * 3) 0px;
  font-size: 16px;
  font-weight: 400;
  opacity: .87;
@ -144,7 +180,6 @@ table th,
  padding-left: ($unit * 4);
 }

-.l-sub-section p,
 table td {
  font-size: 14px;
  font-weight: 400;
@ -163,17 +198,25 @@ table td {
 .text-aside,
 .docs-content aside {
  @extend .text-caption;
-  box-shadow: 0px 2px 5px rgba($coal, 0.3);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  color: $blue-grey-700;
  font-weight: 400;
  font-size: 13px;
-  opacity: .54;
  line-height: 24px;
-  background: $mist;
+  opacity: 1;
+  background: rgba($blue-grey-50, .56);
  border-radius: 2px;
  padding: $unit * 3;
  margin-bottom: $unit * 2;
  width: $unit * 30;

+  p {
+    color: $blue-grey-700;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 24px;
+  }
+
  .l-sub-section & {
    background: $fog;
  }
@ -195,10 +238,6 @@ table td {
 }

 .docs-content .l-sub-section {
-  padding: ($unit * 2) ($unit * 3);
-  h3 {
-    line-height: 1em;
-  }
  pre:last-child {
    margin-bottom: 0;
  }
@ -215,7 +254,7 @@ table td {
    margin-right: 0;
  }
 }
-@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) {
+@include respond-to('mobile') {
  .docs-content .card-row {
    &[layout="row"] {
      -webkit-flex-direction: column;
--- a/public/resources/css/layout/_layout.scss
+++ b/public/resources/css/layout/_layout.scss
@ -25,6 +25,12 @@
 .l-fixed {
  position: fixed;
 }
+.l-clearfix:after,
+.clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}


 /*
@ -51,6 +57,7 @@
 * Page & Element Specific Layouts
 *
 */
+
 .l-hr {
  margin: 0 ($unit * 0.5) ($unit * 5);
  padding: ($unit * 2) 0;
@ -63,7 +70,7 @@
 }

 .l-offset-side-nav {
-  padding-left: 232px;
+  padding-left: 240px;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
@ -83,6 +90,10 @@
  }
 }

+.l-docs-content {
+  padding: $unit * 6;
+}
+
 .l-content {
  padding: ($unit * 8) ($unit * 12);
  max-width: 1200px;
@ -117,11 +128,11 @@
 }

 .l-sub-section {
+  color: $blue-grey-700;
  margin: 0px 0px ($unit * 4) 0px;
-  padding: ($unit * 4) ($unit * 6);
-  background: lighten($mist, 3%);
-  border-left: ($unit / 2) solid $cactus;
-  border-radius: ($unit / 2);
+  padding: $unit * 4;
+  background: rgba($blue-grey-50, .24);
+  border-left: 4px solid $cyan-500;

  @media handheld and (max-width: $phone-breakpoint),
  screen and (max-device-width: $phone-breakpoint),
@ -130,8 +141,16 @@
  }

  code {
-    background: $fog;
-    color: $steel;
+    background: rgba($blue-grey-100, .56);
+    color: $cyan-700;
+  }
+
+  p:last-child {
+    margin: 0;
+  }
+
+  h3:first-child {
+    margin-top: 0;
  }

  &:last-child {
@ -152,13 +171,13 @@ button.verbose {
  screen and (max-device-width: $phone-breakpoint),
  screen and (max-width: $tablet-breakpoint) {
    font-size: ($unit * 2);
-  }  
+  }
 }
 button.verbose.on {display: none}

 .l-verbose-section {
  margin: 0px 0px ($unit * 4) 0px;
-  padding-left: ($unit * 2);  
+  padding-left: ($unit * 2);
  //background: lighten($light, 5%);
  border-left: ($unit / 6) solid $grey;
  border-radius: ($unit / 6);
@ -270,5 +289,5 @@ button.verbose.on {display: none}
  display: block;
  font-size: $unit * 2;
  margin-bottom: $unit;
-  margin-top: $unit * 4; 
+  margin-top: $unit * 4;
 }
--- a/public/resources/css/main.scss
+++ b/public/resources/css/main.scss
@ -2,13 +2,17 @@
 * BASE FILES
 *
 */
-
@import 'options';
+
+@import 'base/colors';
+@import 'base/reset';
+@import 'base/mixins';
+@import 'base/type';
+
+
@import 'state';
@import 'layout/layout';
@import 'theme';
-@import 'base/reset';
-@import 'base/type';
@import 'angular';


@ -17,6 +21,8 @@
 *
 */

+@import 'module/announcement-bar';
+@import 'module/badge';
@import 'module/main-nav';
@import 'module/side-nav';
@import 'module/jump-nav';
@ -26,8 +32,10 @@
@import 'module/banner';
@import 'module/cta-bar';
@import 'module/buttons';
+@import 'module/form';
@import 'module/table';
@import 'module/code';
+@import 'module/code-shell';
@import 'module/heading-code';
@import 'module/code-box';
@import 'module/sticker';
@ -36,13 +44,14 @@
@import 'module/alert';
@import 'module/callout';
@import 'module/images';
+@import 'module/lists';
@import 'module/card';
@import 'module/hover-card';
@import 'module/modal';
@import 'module/shadow';
@import 'module/showcase';
@import 'module/statement';
-@import 'module/example-title';
+@import 'module/symbol';
@import 'module/api';
@import 'module/cheatsheet';
@import 'module/filetree';
@ -54,7 +63,6 @@
@import 'module/press-kit';
@import 'module/features';
@import 'module/docs-landing';
-@import 'module/copy';
@import 'module/embedded-plunker';

 /*
--- a/public/resources/css/module/_alert.scss
+++ b/public/resources/css/module/_alert.scss
@ -1,26 +1,26 @@
 .alert {
-  box-shadow: 0px 2px 5px rgba($coal, 0.3);
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
  border-width: 2px;
  border-style: solid;
  padding: $unit ($unit * 2);
-  line-height: $unit * 4;
+  line-height: $unit * 3;
  font-size: 14px;
  border-radius: 4px;
-  color: $steel;
+  color: $blue-grey-700;
  margin-bottom: $unit * 3;

  &.is-critical {
-    border-color: $cardinal;
-    background: $peach;
+    border-color: $red-700;
+    background: rgba($red-50, .24);
  }

  &.is-important {
-    border-color: $citrus;
-    background: $sand;
+    border-color: $amber-700;
+    background: rgba($amber-50, .24);
  }

  &.is-helpful {
-    border-color: $blueberry;
-    background: $light;
+    border-color: $blue-600;
+    background: rgba($blue-50, .24);
  }
 }
--- a/public/resources/css/module/_announcement-bar.scss
+++ b/public/resources/css/module/_announcement-bar.scss
@ -0,0 +1,97 @@
+/*
+* Announcment Bar Module
+*
+* A module displaying time senstive announcemnts
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$announcement-bar-height: 104px;
+$announcement-bar-width: 752px;
+
+
+/*
+* Class
+*/
+
+.announcement-bar {
+  background: $white;
+  bottom: 0;
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  height: $announcement-bar-height;
+  left: 50%;
+  margin-bottom: -($announcement-bar-height / 2);
+  margin-left: -($announcement-bar-width / 2);
+  overflow: hidden;
+  padding: $unit * 4;
+  position: absolute;
+  width: $announcement-bar-width;
+
+  img, p {
+    float: left;
+  }
+
+  img {
+    height: 40px;
+    margin: 0 ($unit) 0 0;
+  }
+
+  p {
+    font-size: 18px;
+    line-height: $unit * 5;
+    margin: 0;
+    padding: 0;
+  }
+
+  .button,
+  .button.md-button {
+    background: rgba($blue-grey-50, .87);
+    border-radius: 2px;
+    color: $blue-grey-500;
+    float: right;
+    font-size: 14px;
+    line-height: $unit * 5;
+    margin: 0;
+    padding: 0 ($unit * 5);
+    transition: all .3s;
+
+    &:hover {
+      background: $blue-grey-50;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $blue-500;
+    }
+  }
+
+  /*
+  * Mobile Styles
+  *
+  */
+
+  @include respond-to('mobile') {
+    height: auto;
+    margin: 0;
+    padding: ($unit * 4) ($unit * 6);
+    position: static;
+    text-align: center;
+    width: auto;
+
+    &.shadow-2 {
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    }
+
+    img, p {
+      float: none;
+    }
+
+    .button {
+      float: none;
+      display: block;
+      margin-top: $unit * 2;
+    }
+  }
+}
--- a/public/resources/css/module/_api.scss
+++ b/public/resources/css/module/_api.scss
@ -1,246 +1,173 @@
-@mixin icon {
-  line-height: 14px;
-  &.decorator:before {
-    content: '@';
-    background: $blueberry;
-  }
-  &.directive:before {
-    content: 'D';
-    background: #db4437;
-  }
-  &.pipe:before {
-    content: 'P';
-    background: #78909C;
-  }
-  &.class:before {
-    content: 'C';
-    background: #4285f4;
-  }
-  &.interface:before {
-    content: 'I';
-    background: #0097a7;
-  }
-  &.function:before {
-    content: 'F';
-    background: #0f9d58;
-  }
-  &.enum:before {
-    content: 'E';
-    background: #757575;
+/*
+* API Home Page
+*
+*/
+
+
+
+/*
+* API Filter Menu
+*
+*/
+
+.api-filter {
+  .form-select-menu {
+    float: left;
  }

-  // NOTE: (ericjim): `var`, `let`, and `const` are considered Const
-  &.var:before,
-  &.let:before,
-  &.const:before {
-    content: 'K'; // Use K for const, since C is already used for Class
-    background: #9575cd;
-  }
-  &:before {
-    display: inline-block;
-    border-radius: 50%;
-    width: 14px;
-    height: 14px;
-    text-align: center;
-    color: white;
-    font-family: Roboto, sans-serif;
-    font-size: 10px;
-    margin-right: $unit;
+  .form-search {
    float: left;
  }
 }

-.api-key {
-  dt, dd {
-    display: inline-block;
+
+/*
+* API Class List
+*
+*/
+
+.docs-content .api-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+
+  li {
    font-size: 14px;
-    font-family: Roboto, sans-serif;
-    padding: $unit;
-  }
-  dt {
-    padding-left: 0;
-  }
-  dd {
-    @include icon;
-    margin: 0 0 0 ($unit);
-    cursor: pointer;
-    &.active {
-      background: #d5d9dc;
-      border-radius: 3px;
+    margin: 0 0 ($unit * 2) 0;
+    line-height: 14px;
+    padding: 0;
+    float: left;
+    width: 33%;
+    min-width: 220px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .symbol {
+      margin-right: $unit;
    }
-  }
-}

-input.api-filter {
-  display: block;
-  max-width: ($unit * 100);
-  width: 100%;
-  line-height: 18px;
-  padding: $unit;
-  position: relative;
-  left: ($unit * -1);
-}
-
-.docs-content {
-  .anchor-offset {
-    display: block;
-    position: relative;
-    top: -250px;
-    visibility: hidden;
-  }
-
-  .anchor-focused {
-    background-color: transparent !important;
-
-    -moz-animation: fade 1s linear; /* Firefox */
-    -webkit-animation: fade 1s linear; /* Safari and Chrome */
-    -o-animation: fade 1s linear; /* Opera */
-    animation: fade 1s linear;
-  }
-
-  @keyframes fade {
-    0% { background-color: $sunshine }
-  }
-
-  .h2-api-docs {
-    font-size: 15px !important;
-    line-height: 20px;
-    text-transform: uppercase !important;
-    color: #78909C !important;
-  }
-
-  .api-list {
-    list-style: none;
-    padding: 0 0 ($unit * 4);
-    overflow: hidden;
-    .api-item {
-      font-size: 14px;
-      font-family: Roboto, sans-serif;
-      margin: 0;
-      line-height: 14px;
-      padding: $unit $unit $unit 0;
-      float: left;
-      width: 33%;
-      min-width: 220px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      box-sizing: border-box;
-      a {
-        text-decoration: none;
-        color: black;
-      }
-      .symbol {
-        @include icon;
-      }
-    }
-  }
-
-  .code-links {
    a {
-      code, .api-doc-code {
-        color: #1E88E5 !important;
+      color: $blue-grey-600;
+      display: inline-block;
+      line-height: $unit * 2;
+      padding: 0 ($unit * 2) 0 0;
+      text-decoration: none;
+      transition: all .3s;
+
+      &:hover {
+        background: $blue-grey-50;
+        color: $blue-500;
      }
    }
  }
+}

-  .openParens {
-    margin-top: 15px;
-  }
-
-  .endParens {
-    margin-bottom: 20px !important;
-  }
-
-  p {
-
-    &.selector {
-      margin: 0;
-    }
-
-    &.location-badge {
-      margin: 0 0 16px 16px !important;
-    }
-
-    .api-doc-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;
-  }
-
-  .no-bg-with-indent {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 16px;
-    margin-top: 6px;
-    margin-bottom: 0;
-    background: none;
-  }
-
-  .code-background {
-    padding: 0 5px 0;
-
-    span.pln {
+.code-links {
+  a {
+    code, .api-doc-code {
      color: #1E88E5 !important;
    }
  }
+}

-  .code-anchor {
-    cursor: pointer;
-    text-decoration: none;
+.openParens {
+  margin-top: 15px;
+}

-    // Override highlight.js
-    .kwd {
-      color: #1E88E5 !important;
-    }
+.endParens {
+  margin-bottom: 20px !important;
+}

-    &:hover {
-      text-decoration: underline;
-    }
+p {
+
+  &.selector {
+    margin: 0;
+  }
+
+  &.location-badge {
+    margin: 0 0 16px 16px !important;
  }

  .api-doc-code {
-    font-size: 14px;
-    color: #1a2326;
+    border-bottom: 0px;

-    // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
-    &.no-pln {
-      .pln:last-child {
-        display: none;
-      }
+    :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;
+}
+
+.no-bg-with-indent {
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 16px;
+  margin-top: 6px;
+  margin-bottom: 0;
+  background: none;
+}
+
+.code-background {
+  padding: 0 5px 0;
+
+  span.pln {
+    color: #1E88E5 !important;
+  }
+}
+
+.code-anchor {
+  cursor: pointer;
+  text-decoration: none;
+
+  // Override highlight.js
+  .kwd {
+    color: #1E88E5 !important;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.api-doc-code {
+  font-size: 14px;
+  color: #1a2326;
+
+  // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.
+  &.no-pln {
+    .pln:last-child {
+      display: none;
+    }
+  }
+}
+
+
@media screen and (max-width: 600px) {
  .docs-content {
    // Overrides display flex from angular material.
--- a/public/resources/css/module/_badge.scss
+++ b/public/resources/css/module/_badge.scss
@ -0,0 +1,60 @@
+/*
+* Badge Module
+*
+* Badges that indicate the current status of a page/lib/api
+*
+* Usage: <span class="badge is-experimantal">Experimental</span>
+*/
+
+/*
+* Badge Types
+*/
+
+$badges: (
+  beta: (
+    border: $amber-700,
+    color: $amber-900
+  ),
+  deprecated: (
+    border: $pink-600,
+    color: $pink-600
+  ),
+  experimental: (
+    border: $purple-600,
+    color: $purple-600
+  ),
+  stable: (
+    border: $green-600,
+    color: $green-600
+  ),
+);
+
+
+/*
+* Class Definition
+*/
+
+.badge {
+  background: $white;
+  border: 2px solid $blue-grey-500;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  color: $blue-grey-500;
+  display: inline-block;
+  font-size: 11px;
+  height: $unit * 3;
+  line-height: ($unit * 3) - 2;
+  margin: ($unit + 4) 0;
+  padding: 0 $unit;
+  text-align: center;
+  text-transform: uppercase;
+
+  // BADGE TYPES
+  @each $name, $badge in $badges {
+    &.is-#{$name} {
+      border-color: map-get($badge, border);
+      color: map-get($badge, color);
+    }
+  }
+}
--- a/public/resources/css/module/_banner.scss
+++ b/public/resources/css/module/_banner.scss
@ -1,128 +1,31 @@
 /*
 * Banner
 *
-* Addtional announcements that generally follow a hero
+* Addtional information about the page located below the hero
 */

-.banner-floaty {
-  width: 920px;
-  height: 112px;
-  background-color: rgba(255, 255, 255, 1) !important;
-  -moz-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  -webkit-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.5);
-  position: absolute;
-  margin-top: -50px;
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  display: table;
-  padding: 0 !important;
-
-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    padding: 0;
-  }
-
-  @media(max-width: 959px) {
-    width: 100%;
-    height: 56px;
-    padding: 16px 0 !important;
-  }
-
-  .banner-ng-annoucement {
-    display: flex;
-    justify-content: space-around;
-    align-content: space-around;
-    align-items: center;
-    height: 100%;
-
-    @media(max-width: 959px) {
-      flex-direction: column;
-      justify-content: space-between;
-      align-content: space-between;
-
-      .banner-text {
-        padding: 16px 0;
-        margin: 0 16px;
-      }
-    }
-
-    .banner-text {
-      font-size: 16px;
-      color: #607D8B;
-    }
-
-    .banner-button {
-      a {
-        color: #607D8B;
-        background-color: #ECEFF1;
-        padding: 0;
-        line-height: 36px;
-        padding-left: 20px;
-        padding-right: 20px;
-      }
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      background: none;
-      padding-left: 0px;
-      margin: 0px 0px $unit 0px;
-      text-align: center;
-    }
-  }
-}
-
 .banner {
-  background: $mist;
-  padding: ($unit * 2) ($unit * 6);
-  min-height: $unit * 1;
+  background: rgba($blue-grey-50, .24);
+  border-bottom: 1px solid $blue-grey-50;
+  box-sizing: border-box;
+  font-size: 18px;
+  font-weight: 200;
+  padding: ($unit * 4) ($unit * 6);
+  height: 97px;

-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
+  include respond-to('mobile') {
    padding: ($unit * 2);
  }

-  &.is-centered {
-    text-align: center;
+  &.is-plain {
+    background: $white;
+    height: auto;
+    overflow: visible;
  }

-  .button.button-large {
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: block;
-    }
-  }

-  .ng-conf-logo {
-    background: url('/resources/images/logos/ng-conf/ng-conf-shield.png') left no-repeat;
-    padding: $unit 68px;
-  }
-
-  .angularconnect-logo {
-    background: url('/resources/images/logos/angularconnect/angularconnect-logo-med.png') left no-repeat;
-    padding: $unit 0 $unit 108px;
-  }
-
-  h3 {
-    opacity: .87;
-    line-height: 34px;
-    margin: 0;
-  }
-
-  h4 {
-    line-height: 24px;
-  }
-
-  p,
-  h4 {
-    margin: 0px;
+  p, .text-body {
+    color: $blue-grey-500;
+    font-size: 18px;
  }
 }
--- a/public/resources/css/module/_buttons.scss
+++ b/public/resources/css/module/_buttons.scss
@ -3,7 +3,8 @@
 *
 */

-.button {
+.button,
+a.button.md-button {
  display: inline-block;
  line-height: $unit * 4;
  padding: 0px ($unit * 2);
@ -39,11 +40,11 @@

  &.button-secondary {
    background: $fog;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
  }

  &.button-plain {
-    background: $snow;
+    background: $white;
    color: rgba($steel, .87);
  }

@ -54,21 +55,23 @@

  &.button-navy {
    background: $ocean;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
  }

  &.button-banner {
    background: $metal;
-    color: rgba($snow, .87);
+    color: rgba($white, .87);
  }

-  &.button-shield {
-    background: $regal url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat;
-    color: rgba($snow, .87);
+  &.button-shield,
+  &.button-shield.md-button {
+    background-color: $blue-600;
+    background: $blue-600 url('/resources/images/logos/inverse/shield/22.png') 24px 13px no-repeat;
+    color: rgba($white, .87);
    padding-left: 54px;

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-      background: $regal url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat;
+      background: $blue-600 url('/resources/images/logos/inverse/shield/22@2x.png') 24px 13px no-repeat;
      background-size: 22px 22px;
    }
  }
--- a/public/resources/css/module/_callout.scss
+++ b/public/resources/css/module/_callout.scss
@ -3,10 +3,10 @@
  padding: 0px;

  header {
-    color: $snow;
+    color: $white;
    padding: 0px ($unit * 2);
-    line-height: $unit * 4;
-    font-size: 14px;
+    line-height: $unit * 3;
+    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
  }
@ -18,29 +18,29 @@
  }

  &.is-critical {
-    border-color: $cardinal;
-    background: $peach;
+    border-color: $red-700;
+    background: rgba($red-50, .24);

    header {
-      background: $cardinal;
+      background: $red-700;
    }
  }

  &.is-important {
-    border-color: $citrus;
-    background: $sand;
+    border-color: $amber-700;
+    background: rgba($amber-50, .24);

    header {
-      background: $citrus;
+      background: $amber-700;
    }
  }

  &.is-helpful {
-    border-color: $blueberry;
-    background: $light;
+    border-color: $blue-600;
+    background: rgba($blue-50, .24);

    header {
-      background: $blueberry;
+      background: $blue-600;
    }
  }
 }
--- a/public/resources/css/module/_card.scss
+++ b/public/resources/css/module/_card.scss
@ -1,55 +1,66 @@
 .card {
-  margin-bottom: $unit * 4;
-  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
-  border-radius: 2px;
+  background: $white;
+  border-radius: 4px;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  box-sizing: border-box;
+  float: left;
+  height: 194px;
+  margin-bottom: $unit * 3;
+  min-width: 216px;
+  padding-bottom: $unit * 6;
+  position: relative;
+  transition: box-shadow .5s;

-  header {
-    background: $mist;
-    padding: $unit * 2;
-    border-radius: 2px 2px 0px 0px;
+  &:hover {
+    border: 2px solid $blue-500;
+    box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+    text-decoration: none;

    h2 {
-      margin: ($unit * 2) 0px 0px 0px;
+      color: $blue-500;
+      padding: (($unit * 2) - 2) (($unit * 2) - 2) 0 (($unit * 2) - 2);
    }
+
+    p {
+      color: $blue-grey-600;
+      padding: 0 (($unit * 2) - 2);
+    }
+
+    footer {
+      line-height: ($unit * 6) - 4;
+      padding: 0 (($unit * 2) - 2);
+    }
+  }
+
+
+  h2 {
+    color: $blue-grey-600;
+    font-size: 20px;
+    font-weight: 400;
+    line-height: $unit * 3;
+    margin: 0 0 $unit 0;
+    padding: ($unit * 2) ($unit * 2) 0 ($unit * 2);
+    text-transform: none;
  }

  p {
+    color: $blue-grey-400;
+    font-size: 13px;
+    line-height: $unit * 3;
    padding: 0px ($unit * 2);
-    margin-bottom: 0px;
-  }
-
-  .card-content {
-    border-bottom: 1px solid $mist;
-    padding: $unit * 2;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    h3 {
-      margin: 0px;
-    }
-
-    ul {
-      padding: 0px;
-      margin: 0px 0px 0px ($unit * 4);
-
-      a {
-        font-size: 14px;
-        display: block;
-        line-height: 24px;
-        text-decoration: none;
-        padding: 0px 4px;
-
-        &:hover {
-          text-decoration: underline;
-          background: $mist;
-        }
-      }
-    }
+    margin: 0;
  }

  footer {
+    bottom: 0;
+    border-top: 1px solid $blue-grey-50;
+    box-sizing: border-box;
+    line-height: $unit * 6;
+    left: 0;
+    padding: 0 ($unit * 2);
+    position: absolute;
+    right: 0;
+
    a {
      color: $blueberry;
      font-size: 13px;
--- a/public/resources/css/module/_code-box.scss
+++ b/public/resources/css/module/_code-box.scss
@ -1,66 +1,77 @@
-.code-box {
+/*
+* Code Box Module
+*
+* Code examples with multiple sections (tabs)
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$codebox-anti-pattern-color: $red-700;
+$codebox-primary-color: $blue-600;
+$codebox-selected: $white;
+
+
+/*
+* Class
+*/
+
+.code-box,
+.code-example {
+  background: $white;
+  border: 2px solid $codebox-primary-color;
  border-radius: 4px;
-  background: $lightgrey;
-  margin-bottom: $unit * 2;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  margin-bottom: $unit * 3;
+
+  &.is-anti-pattern {
+    border: 2px solid $codebox-anti-pattern-color;
+
+    header {
+      background: $codebox-anti-pattern-color;
+    }
+  }

  header {
-    background: #1976D2;
-    color: $snow;
-    padding: $unit $unit 0px $unit;
-    border-radius: 4px 4px 0px 0px;
+    background: $codebox-primary-color;
+    color: $white;
+    padding: $unit $unit 0 $unit;
  }

-  &__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;
-    }
+  h4 {
+    color: $white;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: $unit * 3;
+    margin: 0;
+    outline: none;
+    padding: 0 0 $unit $unit;
+    text-transform: none;
  }

-  nav {
-    button {
-      line-height: $unit * 3.5;
-      height: $unit * 3.5;
-      padding: 0px ($unit * 3);
-      margin-right: $unit;
-      font-size: 13px;
-      background: #3F94E9;
-      color: $snow;
-      border-radius: 4px 4px 0px 0px;
-      text-transform: none;
+  nav button {
+    background: $blue-400;
+    border-radius: 2px 2px 0 0;
+    color: $white;
+    font-size: 13px;
+    height: $unit * 4;
+    line-height: $unit * 4;
+    margin-right: $unit;
+    outline: none;
+    padding: 0 ($unit * 3);
+    text-transform: none;

-      &.is-selected,
-      &.selected
-      {
-        background: $lightgrey;
-        color: $darkgrey;
-      }
+    &.is-selected,
+    &.selected {
+      background: $white;
+      color: $blue-grey-600;
    }
  }

  .prettyprint {
-    box-shadow: none;
-    margin: 0px;
+    background: $codebox-selected;
  }
-}
-
-pre {
-  margin-top: 0;
 }
--- a/public/resources/css/module/_code-shell.scss
+++ b/public/resources/css/module/_code-shell.scss
@ -0,0 +1,40 @@
+/*
+* Code Shell Module
+*
+* Style
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$code-shell-background: $blue-grey-800;
+$code-shell-color: $light-green-A400;
+
+
+/*
+* Class
+*/
+
+.code-shell {
+  background: $code-shell-background;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border-radius: 2px;
+  display: block;
+  margin-bottom: $unit * 2;
+  min-height: $unit * 8;
+  overflow: hidden;
+
+  .prettyprint {
+    background: $code-shell-background;
+    color: $code-shell-color;
+    padding: $unit * 3;
+
+    .pln,
+    .pun {
+      color: $code-shell-color;
+    }
+  }
+}
--- a/public/resources/css/module/_code.scss
+++ b/public/resources/css/module/_code.scss
@ -1,43 +1,76 @@
 /*
-* Embedded Code
+* Code Syntax Highlighting & Formatting
 *
-* Style for embedded code examples
 */

-.cp_embed_iframe {
-  overflow: hidden;

-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    width: 240px !important;
+/*
+* Variables
+*/
+
+$prettyprint-background: $white;
+$prettyprint-color: $blue-grey-700;
+
+
+/*
+* Copy Code Button
+*/
+
+.copy-container-template {
+  position: relative;
+
+  &:hover .copy-button .md-button {
+    opacity: 1;
+  }
+
+  .copy-button {
+    &.is-copied .md-button {
+      background: $blue-grey-50;
+      box-shadow: none;
+      color: $cyan-500;
+      min-width: 98px;
+    }
+
+    .md-button {
+      background: $cyan-500;
+      border-radius: 2px;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $white;
+      font-size: 12px;
+      height: $unit * 4;
+      line-height: $unit * 4;
+      min-height: $unit * 4;
+      min-width: 98px;
+      margin: 0;
+      opacity: 0;
+      right: $unit * 2;
+      padding: 0 ($unit * 2);
+      position: absolute;
+      top: $unit * 2;
+      z-index: 1;
+      transition: all .2s;
+    }
  }
 }


 /*
-* Code Snippets
-*
-* These Code snippets are transformed by prettify and the code
-* below represents a custom theme that works with their formatting.
+* Pretty Print Styles
 */

 .prettyprint {
+  background: $prettyprint-background;
  white-space: pre-wrap;
-  background: $lightgrey;
+  color: $prettyprint-color;
  font-family: $mono-font;
-  color: $darkgrey;
-  width: auto;
+  font-size: 14px;
+  line-height: 24px;
+  margin: 0;
  overflow: auto;
  position: relative;
  padding: 0px;
-  font-size: 13px;
-  // font-weight: 600;
-  line-height: 24px;
-  margin-bottom: $unit * 3;
-  // box-shadow: 0px 2px 5px rgba($coal, .3);
-  border-radius: 4px;
  padding: ($unit * 2) ($unit * 4);
+  width: auto;

  &.linenums,
  &[class^="linenums:"],
@ -46,7 +79,7 @@
  }

  &.is-showcase {
-    border: 4px solid $regal;
+    border: 4px solid $blue-600;
  }

  code {
@ -56,27 +89,31 @@
  }

  ol {
-    background: $lightgrey;
-    padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7);
+    background: rgba($blue-grey-50, .24);
+    color: $blue-grey-200;
+    padding: 0 0 0 ($unit * 5);
    margin: 0px;
    overflow: auto;
-    // font-weight: 600;
-    font-size: 13px;
+    font-size: 11px;

    li {
-      color: $bismark;
-      background: none;
-      margin-bottom: 5px;
-      line-height: normal;
+      background: $white;
+      margin: 0;
+      line-height: $unit * 3;
      list-style-type: decimal;
-      font-size: 12px;
+      padding: 0 0 0 ($unit * 2);

+      &:first-child {
+        padding-top: $unit * 3;
+      }
      &:last-child {
-        margin-bottom: 0px;
+        margin-bottom: 0;
+        padding-bottom: $unit * 3;
      }

      code {
        background: none;
+        color: $blue-grey-700;
        font-size: 13px;
      }
    }
@ -94,43 +131,43 @@
    padding: 2px 4px;
  }
  .pnk {
-    background: $fog;
-    color: $darkgrey;
+    background: $blue-grey-50;
+    color: $blue-grey-900;
  }
  .blk {
-    background: $storm;
+    background: $blue-grey-900;
  }
  .otl {
-    outline: 1px solid rgba(darkgrey, .56);
+    outline: 1px solid rgba($blue-grey-700, .56);
  }
  .kwd {
-    color: $pink;
+    color: $pink-600;
  }
  .typ,
  .tag {
-    color: $pink;
+    color: $pink-600;
  }
  .str,
  .atv {
-    color: $olive;
+    color: $teal-600;
  }
  .atn {
-    color: $olive;
+    color: $teal-600;
  }
  .com {
-    color: $olive;
+    color: $teal-600;
  }
  .lit {
-    color: $olive;
+    color: $teal-600;
  }
  .pun {
-    color: $bismark;
+    color: $blue-grey-700;
  }
  .pln {
-    color: $darkgrey;
+    color: $blue-grey-700;
  }
  .dec {
-    color: $olive;
+    color: $teal-600;
  }


@ -140,42 +177,56 @@
  */

  @media print {
-    background: $lightgrey;
    border: none;
    box-shadow: none;

    ol {
-      background: $lightgrey;
+      background: $white;
    }

    .kwd {
-      color: $pink;
+      color: $pink-600;
    }
    .typ,
    .tag {
-      color: $pink;
+      color: $pink-600;
    }
    .str,
    .atv {
-      color: $olive;
+      color: $teal-600;
    }
    .atn {
-      color: $olive;
+      color: $teal-600;
    }
    .com {
-      color: $olive;
+      color: $teal-600;
    }
    .lit {
-      color: $olive;
+      color: $teal-600;
    }
    .pun {
-      color: $bismark;
+      color: $blue-grey-700;
    }
    .pln {
-      color: $darkgrey;
+      color: $blue-grey-700;
    }
    .dec {
-      color: $olive;
+      color: $teal-600;
    }
  }
 }
+
+
+/*
+* Embedded Code
+*
+* Style for embedded code examples
+*/
+
+.cp_embed_iframe {
+  overflow: hidden;
+
+  @include respond-to('mobile') {
+    width: 240px !important;
+  }
+}
--- a/public/resources/css/module/_copy.scss
+++ b/public/resources/css/module/_copy.scss
@ -1,10 +0,0 @@
-.copy-container-template {
-  position: relative;
-
-  & > .copy-button {
-    margin-top: 8px;
-    right: 0;
-    z-index: 1;
-    position: absolute;
-  }
-}
--- a/public/resources/css/module/_dropdown.scss
+++ b/public/resources/css/module/_dropdown.scss
@ -1,77 +1,104 @@
 .dropdown {
-  position: relative;
+  background: $blue-grey-50;
+  bottom: 0;
+  box-sizing: border-box;
+  box-shadow: 0 -1px 2px rgba($black, 0.12);
+  left: 0;
+  margin: 0;
+  padding: $unit * 2;
+  position: fixed;
+  width: $sidenav-width;
  z-index: $layer-1;
-  margin: ($unit * 2) 0 0 0;
+
+  @include respond-to('mobile') {
+    display: none;
+    width: 100%;
+
+    .is-visible & {
+      display: block;
+    }
+  }

  .dropdown-button {
-    background: rgba($snow, .1);
+    background: rgba($blue-grey-100, .56);
    border: none;
-    border-radius: 3px;
+    border-radius: 2px;
+    box-sizing: border-box;
+    color: $blue-grey-600;
+    display: block;
    text-transform: none;
    font-weight: normal;
    font-size: 14px;
-    line-height: $unit * 4;
+    line-height: $unit * 5;
    padding: 0px ($unit * 4) 0px ($unit * 2);
-    margin: (1.25 * $unit) 0;
+    margin: 0;
    cursor: pointer;
    position: relative;
+    width: 100%;
    z-index: $layer-1;
    opacity: 0.87;
-    letter-spacing: .010em;
-    min-height:4.5 * $unit;
-    white-space:nowrap;
-    -webkit-font-smoothing:antialiased;
-    -webkit-user-select:none;

    .icon {
+      color: $blue-grey-200;
+      font-size: 24px;
      position: absolute;
-      top: 50%;
+      top: $unit;
      right: $unit;
-      -ms-transform: translateY(-50%);
-      -webkit-transform: translateY(-50%);
-      transform: translateY(-50%);
      z-index: $layer-1;
-      font-size: 20px;
      opacity: .87;
    }
+
+    &:hover {
+      background: $white;
+      box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+      color: $blue-600;
+
+      .icon {
+        color: $blue-600;
+      }
+    }
  }

  .dropdown-menu {
-    background: $snow;
-    box-shadow: 0px 2px 5px rgba($coal, .3);
-    position: absolute;
-    top: 1.25 * $unit;
-    left: 0px;
-    z-index: $layer-5;
+    background: $white;
+    bottom: $unit * 2;
+    border-radius: 2px;
+    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
    display: none;
-    border-radius: 3px;
+    left: $unit * 2;
+    list-style-type: none;
+    margin: 0;
    overflow: hidden;
-
-    ul {
-      list-style-type: none;
-      border-bottom: 1px solid $fog;
-      margin: 0px;
-      padding: 0px;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
+    padding: 0;
+    position: absolute;
+    right: $unit * 2;
+    z-index: $layer-5;

    li {
+      border-bottom: 1px solid $blue-grey-50;
      margin: 0px;
+      padding: 0;
+
+      &:last-child {
+        border: none;
+      }
    }

    a {
      display: block;
-      line-height: $unit * 5;
+      font-size: 12px;
+      line-height: $unit * 7;
+      margin: 0;
      padding: 0px ($unit * 2);
-      font-size: 14px;
      text-decoration: none;
      text-align: left;
      font-weight: 400;
-      text-transform: uppercase;
-      color: $metal;
+      color: $blue-grey-600;
+
+      &:hover {
+        background: $white;
+        color: $blue-600;
+      }
    }
  }
 }
--- a/public/resources/css/module/_example-title.scss
+++ b/public/resources/css/module/_example-title.scss
@ -1,21 +0,0 @@
-.example-title {
-  @extend .alert;
-
-  color: $snow;
-  padding:  0 ($unit * 2);
-  font-size: 14px;
-  // font-weight: 500;
-  border-color: #1976D2;
-  background: #1976D2;
-  box-shadow: none;
-  // temporary hack to remove space between example title and code-example
-  margin-bottom: -5px;
-  z-index: 1;
-  position: relative;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.example-title.avoid {
-  background: #E0343D;
-  border-color: #E0343D;
-}
--- a/public/resources/css/module/_filetree.scss
+++ b/public/resources/css/module/_filetree.scss
@ -1,28 +1,45 @@
+/*
+* File Tree Module
+*
+*/
+
+
+/*
+* Class
+*/
+
 .filetree {
-  padding: 12px 24px;
-  background: $mist;
+  background: $white;
+  box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+  border: 4px solid $blue-grey-50;
+  margin: 0 0 ($unit * 3) 0;
+  padding: $unit * 3;
+
  .file {
    display: block;
    font-family: $mono-font;
    line-height: 32px;
-    color: $platinum;
+    color: $blue-grey-600;
  }
+
  .children {
-    padding-left: 24px;
+    padding-left: $unit * 3;
    position: relative;
    overflow: hidden;
+
    .file {
      position: relative;
+
      &:before {
        content: '';
        left: -18px;
        bottom: 16px;
-        width: 12px;
+        width: $unit * 2;
        height: 9999px;
        position: absolute;
-        border-width: 0 0 2px 2px;
+        border-width: 0 0 1px 1px;
        border-style: solid;
-        border-color: #bccad1;
+        border-color: $blue-grey-100;
        border-radius: 0 0 0 3px;
      }
    }
--- a/public/resources/css/module/_footer.scss
+++ b/public/resources/css/module/_footer.scss
@ -19,9 +19,7 @@

    padding: $unit * 6;

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    @include respond-to('mobile') {
      padding: ($unit * 3) 0px;
    }
  }
@ -31,9 +29,7 @@
    height: 200px;
    width: 200px;

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    @include respond-to('mobile') {
      display: none;
    }
  }
@ -41,9 +37,7 @@
  h3 {
    font-size: 20px;

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    @include respond-to('mobile') {
      margin-bottom: $unit;
    }
  }
@ -53,9 +47,7 @@
    margin: 0px;
    list-style-type: none;

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
+    @include respond-to('mobile') {
      margin-bottom: $unit * 5;
    }

@ -67,9 +59,7 @@
      color: $snow;
      text-decoration: none;

-      @media handheld and (max-width: $phone-breakpoint),
-      screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint) {
+      @include respond-to('mobile') {
        display: block;
        text-decoration: none;
        padding: 0px ($unit * 2);
@ -87,18 +77,33 @@
  }

  footer {
-    text-align: center;
-    padding: $unit * 2;
+    text-align: left;
+    padding: ($unit * 2) ($unit * 6);
    position: relative;

    .styleguide-trigger {
+      box-sizing: border-box;
      position: absolute;
-      top: $unit * 2;
+      display: inline-block;
+      bottom: $unit * 2;
      right: $unit * 2;
      font-size: 14px;
-      line-height: 20px;
-      padding: 0px $unit;
+      line-height: 24px;
+      height: 24px;
+      margin: 0;
+      padding: 0 ($unit * 3);
      opacity: .24;
+      transition: all .3s;
+
+      &:hover {
+        background: $blue-grey-700;
+        text-decoration: none;
+      }
+
+      .icon-favorite {
+        display: inline-block;
+        line-height: 24px;
+      }
    }
  }
 }
--- a/public/resources/css/module/_form.scss
+++ b/public/resources/css/module/_form.scss
@ -0,0 +1,154 @@
+/*
+* Form Module
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$form: '.form';
+
+
+/*
+* SEARCH BAR
+*/
+
+#{$form}-search {
+  position: relative;
+
+  input {
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-600;
+    font-size: 16px;
+    height: $unit * 4;
+    line-height: $unit * 4;
+    outline: none;
+    padding: 0 ($unit *2) 0 ($unit * 4);
+    transition: all .2s;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 14px;
+    }
+
+    &:active,
+    &:focus {
+      border: 1px solid $blue-400;
+      box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
+    }
+  }
+
+  .material-icons {
+    color: $blue-grey-100;
+    font-size: 20px;
+    left: $unit;
+    position: absolute;
+    top: 6px;
+    z-index: $layer-1;
+  }
+}
+
+/*
+* Select Menu
+*/
+
+$form-select-width: 200px;
+
+#{$form}-select-menu {
+  position: relative;
+  width: $form-select-width;
+
+  .overlay {
+    display: none;
+    z-index: $layer-1;
+
+    &.visible {
+      display: block;
+    }
+  }
+
+  #{$form}-select-button {
+    background: $white;
+    box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
+    box-sizing: border-box;
+    border: 1px solid $white;
+    color: $blue-grey-600;
+    font-size: 12px;
+    font-weight: 400;
+    height: $unit * 4;
+    line-height: $unit * 4;
+    outline: none;
+    padding: 0 ($unit * 2);
+    text-align: left;
+    width: $form-select-width - ($unit * 2);
+
+    strong {
+      font-weight: 600;
+      margin-right: $unit;
+      text-transform: uppercase;
+    }
+
+    &.has-symbol {
+      .symbol {
+        margin-right: $unit;
+      }
+    }
+  }
+
+  #{$form}-select-dropdown {
+    background: $white;
+    box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
+    border-radius: 4px;
+    display: none;
+    left: -$unit;
+    list-style-type: none;
+    margin: 0;
+    padding: $unit 0;
+    position: absolute;
+    top: -$unit;
+    width: 200px;
+    z-index: $layer-2;
+
+    &.visible {
+      display: block;
+    }
+
+    li {
+      cursor: pointer;
+      font-size: 14px;
+      line-height: $unit * 4;
+      margin: 0;
+      padding: 0 ($unit * 2) 0 ($unit * 5);
+      position: relative;
+      transition: all .2s;
+
+      &:hover {
+        background: $blue-grey-50;
+      }
+
+      .symbol {
+        left: $unit * 2;
+        position: absolute;
+        top: $unit;
+        z-index: $layer-5;
+      }
+    }
+  }
+}
--- a/public/resources/css/module/_hero.scss
+++ b/public/resources/css/module/_hero.scss
@ -1,21 +1,129 @@
-$hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
+/*
+* Hero Module
+*
+* A hero banner located at the top of each page that displays the
+* title of the page and sometimes a decorative background.
+*
+*/
+
+
+/*
+* Class
+*/

 .hero {
+  box-sizing: border-box;
+  box-shadow: none;
+  padding: ($unit * 6) ($unit * 6) ($unit * 4) ($unit * 6);
  position: relative;
-  padding: $hero-padding;
-  height: $unit * 10;
+  height: 168px;

-  .hero-cta {
-    a {
-      padding-left: 48px;
-      padding-right: 48px;
+  @include respond-to('mobile') {
+    height: auto;
+    padding-top: 40px;
+  }
+
+  .hero-title {
+    display: inline-block;
+    font-size: 28px;
+    font-weight: 400;
+    float: left;
+    line-height: 48px;
+    margin: 0 $unit 0 0;
+    opacity: .87;
+    text-transform: uppercase;
+
+    &.is-standard-case {
+      text-transform: none;
    }
  }

+  .hero-subtitle {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: $unit * 3;
+    margin: 0;
+    opacity: .87;
+    text-transform: uppercase;
+  }
+
+
+  // CTA BUTTONS
+  .button {
+    margin: 0px $unit;
+
+    @include respond-to('mobile') {
+      margin: ($unit * 2) 0px;
+      display: block;
+    }
+  }
+
+  button {
+    // Override md-button from angular material to align language select with hero title.
+    margin: 0 !important;
+  }
+
+
+  /*
+  * Large Banner
+  */
+
+  &.is-large {
+    height: $unit * 70;
+    padding-top: ($unit * 4);
+    text-align: center;
+
+    @include respond-to('mobile') {
+      height: auto;
+    }
+
+    h1 {
+      font-weight: 400;
+      font-size: 24px;
+      line-height: 32px;
+      margin-bottom: $unit * 4;
+    }
+
+    // LARGE SHEILD LOGO
+    .hero-logo {
+      filter: drop-shadow(0 2px 2px rgba($black, 0.24));
+      margin-bottom: $unit;
+      opacity: 1;
+      padding: 0;
+      width: $unit * 30;
+
+      @include respond-to('mobile') {
+        width: $unit * 24;
+      }
+    }
+
+    .hero-cta,
+    .hero-cta.md-button {
+      background: rgba($white, .87);
+      border-radius: 2px;
+      color: $blue-800;
+      font-weight: 500;
+      padding: 0 ($unit * 8);
+      transition: all .3s;
+
+      &:hover {
+        background: $white;
+        box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
+        color: $blue-600;
+      }
+    }
+  }
+
+
+
+
+  /*
+  * Badges
+  */
+
  .hero-title-with-badges {
    margin-bottom: $unit;
  }
-
  .status-circle {
    margin-right: 4px;
    border-radius: 50%;
@ -23,48 +131,17 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
    height: 10px;
    display: inline-block;
  }
-
  // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
  .status-deprecated {
    background: #E53935;
  }
-
  .status-stable {
    background: #558b2f;
  }
-
  .status-experimental {
    background: #9575cd;
  }

-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    height: auto;
-    padding-top: 40px;
-  }
-
-  &.is-large {
-    height: 478px;
-    padding-top: ($unit * 2);
-    text-align: center;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      height: auto;
-    }
-  }
-
-  .inner-header {
-    display: flex;
-    justify-items: center;
-    flex-wrap: wrap;
-
-    @media screen and (max-width: 599px) {
-      margin: ($unit * 6) 0px 0px 0px;
-    }
-  }

  .badges {
    display: flex;
@ -105,82 +182,4 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7);
      margin-bottom: $unit * 2;
    }
  }
-
-  button {
-    // Override md-button from angular material to align language select with hero title.
-    margin: 0 !important;
-  }
-
-  .hero-title {
-    display: inline; // title will be inline with badges
-    text-transform: uppercase;
-    margin: 0;
-    margin-right: 8px;
-    opacity: .87;
-
-    &.is-standard-case {
-      text-transform: none;
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      // reduce size of api doc title on small screens, prevents cut text on long titles
-      font-size: 28px;
-    }
-  }
-
-  .hero-subtitle {
-    margin: 0;
-    opacity: 1;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      margin: 0px;
-    }
-  }
-
-  // LARGE SHEILD LOGO
-  .hero-logo {
-    position: relative;
-    padding-top: 224px;
-    opacity: 1;
-    width: $unit * 70;
-    margin: ($unit * 3) auto ($unit * 5) auto;
-    font-weight: 400;
-
-    &:after {
-      content: '';
-      background: url('/resources/images/logos/angular2/angular.svg') top center no-repeat;
-      background-size: contain;
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      height: 224px;
-    }
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      width: auto;
-      font-size: 20px;
-      line-height: 28px;
-      margin: ($unit * 2) auto;
-      padding-top: 208px;
-    }
-  }
-
-  // CTA BUTTONS
-  .button {
-    margin: 0px $unit;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      margin: ($unit * 2) 0px;
-      display: block;
-    }
-  }
 }
--- a/public/resources/css/module/_lists.scss
+++ b/public/resources/css/module/_lists.scss
@ -0,0 +1,53 @@
+/*
+* List Styles
+*
+*/
+
+
+
+/*
+* Secondary List Class
+*
+*/
+
+.secondary-content-list,
+.docs-content .secondary-content-list {
+  margin-top: $unit * 6;
+
+  h4 {
+    color: $blue-grey-400;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: $unit * 4;
+    border-bottom: 1px solid $blue-grey-50;
+    margin: 0;
+    text-transform: uppercase;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: $unit 0;
+  }
+
+  li {
+    margin: 0;
+    padding: 0;
+  }
+
+  li a {
+    background: $white;
+    color: $blue-grey-400;
+    display: block;
+    font-size: 12px;
+    line-height: $unit * 4;
+    padding: 0 $unit;
+    text-decoration: none;
+    transition: all .3s;
+
+    &:hover {
+      background: rgba($blue-grey-50, .56);
+      color: $blue-500;
+      transition: none;
+    }
+  }
+}
--- a/public/resources/css/module/_main-nav.scss
+++ b/public/resources/css/module/_main-nav.scss
@ -1,46 +1,58 @@
-.main-nav {
-  height: 56px;
-  min-height: 56px;
-  padding: 0px ($unit * 2);
-  box-shadow: 0px 2px 5px 0 rgba($coal, 0.26);
+/*
+* Main Navigation
+*
+* Top main navigation for website
+*/

-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    padding: 0px 0px 0px ($unit * 2);
-  }
+
+/*
+* Variables
+*/
+
+$main-nav-height: $unit * 7;
+$main-nav-background: $blue-700;
+
+
+/*
+* Class
+*/
+
+.main-nav {
+  background: $main-nav-background;
+  height: $main-nav-height;
+  min-height: $main-nav-height;
+  padding: 0px;
+  box-shadow: 0px 2px 5px 0 rgba($black, 0.24);

  .feedback-button {
    margin-top: 10px;
  }

  h1 {
-    margin: 0px ($unit * 10) 0px 0px;
+    margin: 0 ($unit * 9) 0 0;
    padding: 0px;
-    height: 36px;
-    width: 136px;
+    height: $main-nav-height;
+    width: 168px;
    float: left;

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      margin: 0;
-    }
-
-    a {
-      background: url('/resources/images/logos/standard/logo-nav.png') 0px 8px no-repeat;
+    .md-button, a {
+      background: url('/resources/images/logos/standard/logo-nav.png') 16px 8px no-repeat;
+      border-radius: 0;
      display: block;
-      height: 56px;
-      width: 135px;
+      height: $main-nav-height;
      overflow: hidden;
      text-indent: -3000px;
      margin:0;
      padding: 0;

      @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
-        background: url('/resources/images/logos/standard/logo-nav@2x.png') 0px 8px no-repeat;
+        background: url('/resources/images/logos/standard/logo-nav@2x.png') 16px 8px no-repeat;
        background-size: 135px 36px;
      }
+
+      &:hover {
+        background-color: $blue-600;
+      }
    }
  }

@ -53,11 +65,9 @@
      margin: 0px 0px 0px 0px;
    }

-    .main-nav-button {
-      @media handheld and (max-width: $phone-breakpoint),
-      screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint),
-      screen and (max-width: 960px) {
+    .main-nav-button,
+    .main-nav-button.md-button {
+      @include respond-to('mobile') {
        display: block;
        float: none;
        line-height: $unit * 6;
@ -77,10 +87,8 @@
    }

    // Make main nav icons disappear in favor of site map menu
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint),
-    screen and (max-width: 960px) {
+    @include respond-to('mobile') {
+      background: $main-nav-background;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, .3);
      float: none;
      position: absolute;
@ -88,7 +96,6 @@
      right: 0px;
      left: 0px;
      z-index: $layer-6;
-      background: $ocean;
      display: none;

      li {
@ -100,10 +107,11 @@


  // NAV BUTTON STYLES
-  .main-nav-button {
+  .main-nav-button,
+  .main-nav-button.md-button {
    line-height: 56px;
    display: inline-block;
-    color: $snow;
+    color: $white;
    text-decoration: none;
    padding: 0px ($unit * 2);
    text-transform: uppercase;
@ -117,9 +125,10 @@
    letter-spacing: 0.16px;
    margin: 0;
    min-width: auto;
+    transition: all .3s;

    &:hover {
-      background: $ocean;
+      background-color: $blue-600;
    }

    // ICONS
@ -138,7 +147,7 @@
  }

  // DROPDOWN TRIGGER BUTTON
-  .main-nav-mobile-trigger {
+  .main-nav-button.main-nav-mobile-trigger {
    display: none;
    padding: 0px (24px + $unit) 0px $unit;
    font-size: 14px;
@ -150,10 +159,7 @@
    }

    // Show sitemap menu
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint),
-    screen and (max-width: 960px) {
+    @include respond-to('mobile') {
      display: inline-block;
    }
  }
--- a/public/resources/css/module/_shadow.scss
+++ b/public/resources/css/module/_shadow.scss
@ -12,21 +12,21 @@
 }

 .shadow-1 {
-  box-shadow: 0 1px 4px 0 rgba($coal, 0.37);
+  box-shadow: 0 1px 4px 0 rgba($black, 0.37);
 }

 .shadow-2 {
-  box-shadow: 0 2px 2px 0 rgba($coal, 0.2), 0 6px 10px 0 rgba($coal, 0.3);
+  box-shadow: 0 2px 2px 0 rgba($black, 0.2), 0 6px 10px 0 rgba($black, 0.3);
 }

 .shadow-3 {
-  box-shadow: 0 11px 7px 0 rgba($coal, 0.19),0 13px 25px 0 rgba($coal, 0.3);
+  box-shadow: 0 11px 7px 0 rgba($black, 0.19),0 13px 25px 0 rgba($black, 0.3);
 }

 .shadow-4 {
-  box-shadow: 0 14px 12px 0 rgba($coal, 0.17), 0 20px 40px 0 rgba($coal, 0.3);
+  box-shadow: 0 14px 12px 0 rgba($black, 0.17), 0 20px 40px 0 rgba($black, 0.3);
 }

 .shadow-5 {
-  box-shadow: 0 17px 17px 0 rgba($coal, 0.15), 0 27px 55px 0 rgba($coal, 0.3);
+  box-shadow: 0 17px 17px 0 rgba($black, 0.15), 0 27px 55px 0 rgba($black, 0.3);
 }
--- a/public/resources/css/module/_side-nav.scss
+++ b/public/resources/css/module/_side-nav.scss
@ -1,281 +1,287 @@
 /*
 * Side Navigation
 *
+* Left Navigation used in Documenation
 */

-.side-nav {
-  background: $mist;
-  box-shadow: 3px 0px 6px rgba($coal, .3);
-  width: 232px;
+
+/*
+* Variables
+*/
+
+$sidenav: '.sidenav'; // Classname
+$sidenav-background: $blue-grey-50;
+$sidenav-background-dark: $blue-grey-200;
+$sidenav-color: $blue-grey-400;
+$sidenav-color-selected: $blue-600;
+$sidenav-width: 240px;
+
+
+
+/*
+* Class
+*/
+
+#{$sidenav} {
+  background: $sidenav-background;
+  box-shadow: 3px 0px 6px rgba($black, .24);
+  padding-bottom: 72px;
+  width: $sidenav-width;
  bottom: 0px;
  overflow: auto;

-  @media handheld and (max-width: $phone-breakpoint),
-  screen and (max-device-width: $phone-breakpoint),
-  screen and (max-width: $tablet-breakpoint) {
-    box-shadow: 0px 3px 6px rgba($coal, .3);
+  // MOBILE STYLE FOR DROPDOWN & TOGGLE
+  @include respond-to('mobile') {
+    box-shadow: 0px 3px 6px rgba($black, .24);
    width: auto;
-    left: 0px;
-    right: 0px;
+    left: 0;
+    right: 0;
    bottom: auto;
+    padding-bottom: 0;
+
+    #{$sidenav}-links  {
+      display: none;
+    }
+
+    &.is-visible {
+      bottom: 0;
+      padding-bottom: 72px;
+
+      #{$sidenav}-links  {
+        display: block;
+      }
+    }
  }

  .is-hidden {
    display: none;
  }
+}

-  // SEARCH BOX
-  .side-nav-search {
-    background: $tin;
-    padding: $unit;
-    height: $unit * 6;
-    border-bottom: 1px solid $fog;
-    position: relative;
-    height: auto; /* flat nav asked for it. why? */

-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      border-bottom: none;
-      padding-right: $unit * 14;
-      overflow: hidden;
+/*
+* Side Nav Search
+*/
+
+#{$sidenav}-search {
+  background: $sidenav-background-dark;
+  box-sizing: border-box;
+  box-shadow: none;
+  padding: $unit;
+  height: $unit * 6;
+  position: relative;
+
+  @include respond-to('mobile') {
+    border-bottom: none;
+    padding-right: $unit * 14;
+    overflow: hidden;
+  }
+
+  input {
+    border: none;
+    border-radius: 200px;
+    box-sizing: border-box;
+    color: $sidenav-color;
+    display: inline-block;
+    font-size: 14px;
+    height: 32px;
+    margin: 0px;
+    padding: 0px $unit;
+    width: 100%;
+
+    // PLACEHOLDER TEXT
+    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+      color: $blue-grey-100;
+      font-size: 12px;
    }
+    &::-moz-placeholder { /* Firefox 19+ */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+    &:-ms-input-placeholder { /* IE 10+ */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+    &:-moz-placeholder { /* Firefox 18- */
+      color: $blue-grey-100;
+      font-size: 12px;
+    }
+  }

-    input {
-      border: none;
-      border-radius: 200px;
-      width: 100%;
-      box-sizing: border-box;
-      height: 30px;
-      padding: 0px $unit;
-      margin: 0px;
-      font-size: 14px !important;
+  .mobile-trigger {
+    position: absolute;
+    top: 0;
+    right: $unit * 0.2;
+    border: none;
+    background: darken($tin, 5%);
+    color: $snow;
+    padding-right: $unit * 4;
+    display: none;
+
+    @include respond-to('mobile') {
      display: inline-block;
    }

-    .mobile-trigger {
+    .icon {
      position: absolute;
-      top: 0;
-      right: $unit * 0.2;
-      border: none;
-      background: darken($tin, 5%);
-      color: $snow;
-      padding-right: $unit * 4;
-      display: none;
-
-      @media handheld and (max-width: $phone-breakpoint),
-      screen and (max-device-width: $phone-breakpoint),
-      screen and (max-width: $tablet-breakpoint) {
-        display: inline-block;
-      }
-
-      .icon {
-        position: absolute;
-        top: 5px;
-        right: $unit;
-        z-index: $layer-1;
-        font-size: 20px;
-        opacity: .87;
-      }
-    }
-  }
-
-  .is-nav-title-selected {
-    color: $regal !important;
-    background-color: #DCE2E5 !important;
-  }
-
-  // PRIMARY SIDENAV BUTTON
-  .side-nav-primary {
-    list-style-type: none;
-    margin: 0px;
-    padding: 0px;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: none;
-    }
-
-    > li {
-      margin: 0px;
-      padding: 0px;
-      border-bottom: 1px solid $fog;
-
-      &.is-selected  {
-        > a {
-          background: $fog;
-          color: $regal;
-
-          .side-nav-icon {
-            color: $regal;
-          }
-        }
-      }
-
-      > a {
-        line-height: ($unit * 6) - 1;
-        padding: 0px ($unit * 2) 0px ($unit * 6);
-        color: $metal;
-        font-size: 14px;
-        text-align: left;
-        font-weight: 400;
-        position: relative;
-        text-decoration: none;
-        display: block;
-        text-transform: uppercase;
-      }
-
-      .side-nav-icon {
-        position: absolute;
-        top: 0px;
-        left: 16px;
-        z-index: $layer-1;
-        font-size: 19px;
-        color: $cloud;
-        line-height: 47px;
-      }
-    }
-  }
-
-
-  // SECONDARY SIDENAV
-  .side-nav-secondary {
-    @extend .side-nav-primary;
-    background-color: #DCE2E5;
-
-    @media handheld and (max-width: $phone-breakpoint),
-    screen and (max-device-width: $phone-breakpoint),
-    screen and (max-width: $tablet-breakpoint) {
-      display: none;
-      max-height: ($phone-breakpoint * 0.60);
-    }
-
-    // FLAT NAV (.nav)
-    .nav-blocks {
-      margin: 0;
-      padding: 0;
-      border-bottom: 1px solid $fog;
-      color: $heather;
-
-      a {
-        text-decoration: none;
-        color: $metal;
-        display: block;
-      }
-
-      ul {
-        list-style: none;
-        padding: 0;
-        margin: 0
-      }
-
-      div, li {
-        &.is-selected  {
-          > a {
-            background: #CDD5DA;
-            color: #1E88E5;
-          }
-        }
-      }
-
-      li {
-        min-height: ($unit * 2);
-        position: relative;
-      }
-    }
-
-    .nav-blocks:last-child {
-        border: none
-    }
-
-    .nav-title,
-    .nav-sub-title {
-        text-transform: uppercase;
-        font-weight: 500; //medium
-        color: #78909C;
-    }
-
-    .nav-title {
-        font-size: 14px;
-
-        padding: ($unit * 2) ($unit * 2);
-        margin: 0;
-        background-color: #ECEFF1;
-
-        .inline-arrow-down-svg {
-          float: right;
-          opacity: 0.56;
-        }
-
-        a {
-          display: inline;
-        }
-    }
-
-    .nav-primary-link {
-        position: relative;
-
-        a {
-          padding-left: 16px;
-          padding-top: 16px;
-          padding-bottom: 16px;
-        }
-    }
-
-    .nav-sub-title {
-        font-size: ($unit * 1.5);
-        padding: ($unit * 1) 0;
-    }
-
-    .nav-active a {
-        color: $regal;
-        background: $lightgrey;
-        font-weight: 500; //medium
-    }
-
-    .nav-unordered-lists, .nav-ordered-lists {
-      // Apply inset shadows to the list under the title
-      box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24), inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-
-      // -- First Child
-      // Apply inset shadows on the first child when hovering, since the background color will cover the shadow
-      .nav-list-item:first-child {
-        &:hover {
-          box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
-        }
-      }
-
-      // Apply inset shadows on the first child when selected, since the background color will cover the shadow
-      .is-selected:first-child a {
-        box-shadow: inset 0 2px 2px rgba(0, 0, 0, .24);
-      }
-
-      // -- Last Child
-      // Apply inset shadows on the last child when hovering, since the background color will cover the shadow
-      .nav-list-item:last-child {
-        &:hover {
-          box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-        }
-      }
-
-      // Apply inset shadows on the last child when selected, since the background color will cover the shadow
-      .is-selected:last-child a {
-        box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    .nav-list-item {
-      a {
-        font-size: 13px;
-        font-weight: 400; //medium
-        padding-left: $unit * 2;
-        line-height: 32px;
-      }
-
-      &:hover {
-        background-color: #CFD8DC;
-      }
+      top: 5px;
+      right: $unit;
+      z-index: $layer-1;
+      font-size: 20px;
+      opacity: .87;
    }
  }
 }
+
+/*
+* Section Dividers
+*/
+
+#{$sidenav} #{$sidenav}-section-divider {
+  background: $sidenav-background-dark;
+  border: none;
+  color: $white;
+  font-size: 10px;
+  line-height: $unit * 3;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+
+  h3 {
+    font-weight: 400;
+    margin: 0;
+    padding: 0 ($unit * 2);
+  }
+}
+
+
+/*
+* Navigation Links
+*/
+
+#{$sidenav}-links {
+  list-style-type: none;
+  margin: 0px;
+  padding: 0px;
+
+  // SIDENAV MAIN SECTIONS
+  #{$sidenav}-section {
+    border-bottom: 1px solid rgba($blue-grey-100, .56);
+    color: $sidenav-color;
+    margin: 0;
+    padding: 0;
+
+    &.no-border {
+      border: none;
+
+      > a {
+        line-height: $unit * 6;
+      }
+    }
+
+    > a {
+      box-sizing: border-box;
+      color: $sidenav-color;
+      display: block;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: ($unit * 6) - 1;
+      text-decoration: none;
+      padding: 0 ($unit * 2);
+      position: relative;
+
+      &.is-selected {
+        background: rgba($blue-grey-100, .56);
+        color: $sidenav-color-selected;
+        font-weight: 600;
+      }
+
+      &.is-selected.is-parent {
+        box-shadow: 0 2px 2px rgba($black, .24);
+      }
+    }
+
+    .inline-arrow-down-svg {
+      opacity: .56;
+      position: absolute;
+      right: $unit;
+      top: $unit + 4;
+      z-index: $layer-1;
+    }
+
+    ul {
+      background: rgba($blue-grey-100, .56);
+      list-style: none;
+      padding: 0;
+      margin: 0
+    }
+
+    li {
+      margin: 0;
+      padding: 0;
+
+      &.is-selected  {
+        > a {
+          background: rgba($blue-grey-100, .87);
+          color: $sidenav-color-selected;
+          font-weight: 600;
+        }
+      }
+    }
+
+    li a {
+      color: $sidenav-color;
+      font-size: 12px;
+      display: block;
+      line-height: $unit * 4;
+      padding: 0 ($unit * 2);
+      transition: all .2s;
+
+      &:hover {
+        background: rgba($white, .24);
+        color: $sidenav-color-selected;
+        text-decoration: none;
+      }
+    }
+  }
+
+  > li {
+    margin: 0px;
+    padding: 0px;
+    border-bottom: 1px solid $fog;
+
+    &.is-selected  {
+      > a {
+        background: $fog;
+        color: $regal;
+
+        #{$sidenav}-icon {
+          color: $regal;
+        }
+      }
+    }
+
+    > a {
+      line-height: ($unit * 6) - 1;
+      padding: 0px ($unit * 2) 0px ($unit * 6);
+      color: $metal;
+      font-size: 14px;
+      text-align: left;
+      font-weight: 400;
+      position: relative;
+      text-decoration: none;
+      display: block;
+      text-transform: uppercase;
+    }
+
+    #{$sidenav}-icon {
+      position: absolute;
+      top: 0px;
+      left: 16px;
+      z-index: $layer-1;
+      font-size: 19px;
+      color: $cloud;
+      line-height: 47px;
+    }
+  }
+}
--- a/public/resources/css/module/_style-guide.scss
+++ b/public/resources/css/module/_style-guide.scss
@ -41,12 +41,6 @@
  margin-bottom:32px;
 }

-.filetree {
-  margin-bottom: 32px;
-  background-color: #FFF;
-  border:1px solid #1976D2;
-}
-
 table tr code-example .prettyprint {
  margin-bottom: 0;
 }
--- a/public/resources/css/module/_symbol.scss
+++ b/public/resources/css/module/_symbol.scss
@ -0,0 +1,84 @@
+/*
+* API Symbols
+*
+*/
+
+
+/*
+* Variables
+*/
+
+$api-symbols: (
+  decorator: (
+    content: '@',
+    background: $blue-800
+  ),
+  directive: (
+    content: 'D',
+    background: $pink-600
+  ),
+  pipe: (
+    content: 'P',
+    background: $blue-grey-600
+  ),
+  class: (
+    content: 'C',
+    background: $blue-500
+  ),
+  interface: (
+    content: 'I',
+    background: $teal-500
+  ),
+  function: (
+    content: 'F',
+    background: $green-500
+  ),
+  enum: (
+    content: 'E',
+    background: $amber-700
+  ),
+  var: (
+    content: 'K',
+    background: $purple-600
+  ),
+  let: (
+    content: 'K',
+    background: $purple-600
+  ),
+  const: (
+    content: 'K',
+    background: $purple-600
+  ),
+  type-alias: (
+    content: 'T',
+    background: $blue-grey-50
+  )
+);
+
+
+/*
+* Symbol Class
+*/
+
+.symbol {
+  border-radius: 2px;
+  box-shadow: 0 1px 2px rgba($black, .24);
+  color: $white;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: $unit * 2;
+  text-align: center;
+  width: $unit * 2;
+
+  // SYMBOL TYPES
+  @each $name, $symbol in $api-symbols {
+    &.#{$name} {
+      background: map-get($symbol, background);
+
+      &:before {
+        content: map-get($symbol, content);
+      }
+    }
+  }
+}
--- a/public/resources/images/backgrounds/super-hero-large.png
+++ b/public/resources/images/backgrounds/super-hero-large.png
--- a/public/resources/images/backgrounds/superhero-paper-large.png
+++ b/public/resources/images/backgrounds/superhero-paper-large.png
--- a/public/resources/images/backgrounds/superhero-paper.png
+++ b/public/resources/images/backgrounds/superhero-paper.png
--- a/public/resources/images/logos/ng-europe/ng-europe-logo.png
+++ b/public/resources/images/logos/ng-europe/ng-europe-logo.png
--- a/public/resources/js/directives/api-list.js
+++ b/public/resources/js/directives/api-list.js
@ -4,17 +4,24 @@ angularIO.directive('apiList', function () {
  return {
    restrict: 'E',
    template:
-      '<div ng-cloak="ng-cloak" class="banner">' +
-      '  <dl class="api-key">' +
-      '    <dt>Display:</dt>' +
-      '    <dd ng-class="{ active: !$ctrl.apiType }" ng-click="$ctrl.apiType = null">All</dd>' +
-      '    <dd ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)" class="{{apiType.cssClass}}">{{apiType.title}}</dd>' +
-      '  </dl>' +
-      '  <input placeholder="Filter" ng-model="$ctrl.apiFilter" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}" class="api-filter">' +
+      '<div ng-cloak="ng-cloak" class="banner is-plain api-filter clearfix">' +
+      '  <div class="form-select-menu">' +
+      '    <button ng-repeat="apiType in $ctrl.apiTypes" ng-if="$ctrl.apiType === apiType" class="form-select-button has-symbol" ng-click="$ctrl.toggleMenu()"><strong>Type:</strong><span class="symbol {{apiType.cssClass}}" ng-if="apiType.cssClass !== \'stable\'" ></span>{{apiType.title}}</button>'+
+      '    <button class="form-select-button is-default" ng-if="$ctrl.apiType === null" ng-click="$ctrl.toggleMenu()"><strong>All Types</strong></button>'+
+      '    <ul class="form-select-dropdown" ng-class="{ visible: $ctrl.showMenu === true }">' +
+      '      <li ng-class="{ active: !$ctrl.apiType }" ng-click="$ctrl.clearType()">All Types</li>' +
+      '      <li ng-repeat="apiType in $ctrl.apiTypes" ng-class="{ active: $ctrl.apiType === apiType }" ng-click="$ctrl.setType(apiType)"><span class="symbol {{apiType.cssClass}}"></span>{{apiType.title}}</li>' +
+      '    </ul>' +
+      '    <div class="overlay" ng-class="{ visible: $ctrl.showMenu === true }" ng-click="$ctrl.toggleMenu()"></div>' +
+      '  </div>' +
+      '  <div class="form-search">' +
+      '    <i class="material-icons">search</i>' +
+      '    <input placeholder="Filter" ng-model="$ctrl.apiFilter" ng-model-options="{updateOn: \'default blur\', debounce: {\'default\': 350, \'blur\': 0}}">' +
+      '  </div>' +
      '</div>' +
      '<article class="l-content-small grid-fluid docs-content">' +
      '  <div ng-repeat="section in $ctrl.groupedSections" ng-if="$ctrl.isFiltered(section)" ng-cloak="ng-cloak">' +
-      '    <h3>{{ section.title }}</h3>' +
+      '    <h2>{{ section.title }}</h2>' +
      '    <ul class="api-list">' +
      '      <li ng-repeat="item in section.items" ng-show="item.show" class="api-item">' +
      '        <a ng-href="{{ item.path }}"><span class="symbol {{ item.docType }}"></span>{{ item.title }}</a>' +
@ -26,10 +33,12 @@ angularIO.directive('apiList', function () {
    controller: function($scope, $attrs, $http, $location) {
      var $ctrl = this;

+      $ctrl.showMenu = false;
+
      var isForDart = $attrs.lang === 'dart';

      $ctrl.apiTypes = [
-        { cssClass: 'stable', title: 'Stable', matches: ['stable']},
+        { cssClass: 'stable', title: 'Only Stable', matches: ['stable']},
        { cssClass: 'directive', title: 'Directive', matches: ['directive'] },
        { cssClass: 'pipe', title: 'Pipe', matches: ['pipe'] },
        { cssClass: 'decorator', title: 'Decorator', matches: ['decorator'] },
@ -51,6 +60,16 @@ angularIO.directive('apiList', function () {
      $ctrl.setType = function (type) {
        if (type === $ctrl.apiType) $ctrl.apiType = null;
        else $ctrl.apiType = type;
+        $ctrl.showMenu = !$ctrl.showMenu;
+      };
+
+      $ctrl.clearType = function () {
+        $ctrl.apiType = null;
+        $ctrl.showMenu = !$ctrl.showMenu;
+      };
+
+      $ctrl.toggleMenu = function () {
+        $ctrl.showMenu = !$ctrl.showMenu;
      };

      $ctrl.isFiltered = function(section) {
@ -89,7 +108,7 @@ angularIO.directive('apiList', function () {
      });

      $scope.$watchGroup(
-        [function() { return $ctrl.apiFilter}, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
+        [function() { return $ctrl.apiFilter; }, function() { return $ctrl.apiType; }, function() { return $ctrl.sections; }],
        function() {
          var apiFilter = ($ctrl.apiFilter || '').toLowerCase();

--- a/public/resources/js/directives/copy.js
+++ b/public/resources/js/directives/copy.js
@ -38,18 +38,32 @@ angularIO.directive('copyContainer', function() {
 * but the content element itself most be available at link time.
 */
 angularIO.directive('copyButton', function() {
+  var buttonLabel = "Copy Code";
+
  return {
    restrict: 'E',
    template:
-      '<md-button class="md-icon-button">\n' +
-      '  <md-icon md-font-icon="icon-content-copy" alt="Copy to Clipboard"></md-icon>\n' +
+      '<md-button class="md-copy-button">\n' +
+      buttonLabel + '\n' +
      '  <md-tooltip>Copy to Clipboard</md-tooltip>\n' +
      '</md-button>',
    link: function link(scope, element) {
      var contentElement = element.next();
      var clipboard = new Clipboard(element[0], {
        text: function() {
+          var button = element[0].firstChild;
+          var buttonWrapper = element;
+
          console.log('clicked', contentElement[0].innerText);
+
+          // CHANGE TEXT, THEN CHANGE BACK
+          buttonWrapper.addClass('is-copied');
+          button.innerText = 'Copied!';
+          setTimeout(function() {
+            buttonWrapper.removeClass('is-copied');
+            button.innerText = buttonLabel;
+          }, 1000);
+
          return contentElement[0].innerText; }
      });
      scope.$on('$destroy', function() {
--- a/tools/dart-api-builder/dab.js
+++ b/tools/dart-api-builder/dab.js
@ -75,7 +75,7 @@ module.exports = function dabFactory(ngIoProjPath) {
            }
            // const [, exRelPath, /*regionTagAndValue*/, region, rest] = matches;
            const rest = matches[4].trim();
-            if (rest) log.warn(enclosedByName, eltId, '@example must be the only element in a paragraph, but found:', text);                
+            if (rest) log.warn(enclosedByName, eltId, '@example must be the only element in a paragraph, but found:', text);
            const exRelPath = matches[1];
            const region = matches[3];

@ -111,7 +111,7 @@ module.exports = function dabFactory(ngIoProjPath) {
        lines.shift();
        while (lines && lines.pop().trim() !== '```') {}
        const code = lines.map((line) => encoder.htmlEncode(line)).join('\n');
-        // TS uses format="linenums"; removing that for now. 
+        // TS uses format="linenums"; removing that for now.
        return `<code-example language="dart">${code}\n</code-example>`;
    }

@ -215,11 +215,6 @@ extends ${baseHref}/../../../_layout-dart-api

 include ${baseHref}/../_util-fns

-block var-def
-  //- FIXME: a CSS expert needs to figure out why the header CSS needs to be patched for Dart.
-  //- This enables the patch:
-  - var fixHeroCss = 1;
-
 block head-extra
  // generated Dart API page template: head-extra
  //- <base> is required because all the links in dartdoc generated pages are "pseudo-absolute"
@ -228,7 +223,7 @@ block head-extra

 block breadcrumbs
  // generated Dart API page template: breadcrumbs
-  nav.dropdown
+  .banner
    ol.breadcrumbs.gt-separated.hidden-xs
 ${breadcrumbs}