diff --git a/dev/bots/docs.sh b/dev/bots/docs.sh
index 98dda74495..508a092d31 100755
--- a/dev/bots/docs.sh
+++ b/dev/bots/docs.sh
@@ -8,7 +8,7 @@ set -e
 bin/flutter --version
 
 # Install dartdoc.
-bin/cache/dart-sdk/bin/pub global activate dartdoc 0.11.1
+bin/cache/dart-sdk/bin/pub global activate dartdoc 0.12.0
 
 # This script generates a unified doc set, and creates
 # a custom index.html, placing everything into dev/docs/doc.
diff --git a/dev/docs/styles.html b/dev/docs/styles.html
index a111a6eed7..d423efc3ff 100644
--- a/dev/docs/styles.html
+++ b/dev/docs/styles.html
@@ -1,11 +1,12 @@
 <!-- style overrides for dartdoc -->
 <style>
-@import 'https://fonts.googleapis.com/css?family=Roboto:100i';
+@import 'https://fonts.googleapis.com/css?family=Roboto:500,400italic,300,400,100i';
 </style>
 
 <style>
   body {
     font-size: 15px;
+    font-family: Roboto, sans-serif;
     line-height: 1.5;
     color: #111;
     background-color: #fdfdfd;
@@ -14,7 +15,17 @@
   }
 
   header {
-    background-color: #01579b;
+    background-color: white;
+    color: #424242;
+  }
+
+  nav.navbar {
+    min-height: 57px;
+    padding: 6px 0;
+  }
+
+  header.header-fixed nav.navbar-fixed-top {
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   }
 
   h1, h2 {
@@ -36,7 +47,7 @@
 
   h2 {
     color: #111;
-    font-size: 26px;
+    font-size: 24px;
   }
 
   .markdown h2 {
@@ -44,7 +55,7 @@
   }
 
   section.summary h2 {
-    font-size: 32px;
+    font-size: 24px;
     color: inherit;
     border-bottom: none;
   }
@@ -54,10 +65,6 @@
     font-size: inherit;
   }
 
-  .sidebar-offcanvas-left {
-    background-color: #fdfdfd;
-  }
-
   @media screen and (max-width: 768px) {
     .sidebar-offcanvas-left.active {
       padding: 10px;
@@ -68,31 +75,23 @@
     padding: 0 16px 16px 0;
   }
 
-  .sidebar h5 {
-    display: none;
-  }
-
   .sidebar-offcanvas-left h5 {
-    border-bottom: none;
-    padding: 0 0 16px 0;
-  }
-
-  .sidebar-offcanvas-left h5:last-of-type {
-    padding: 0 0 16px 0;
+    display: none;
   }
 
   pre,
   pre.prettyprint,
   pre > code {
-    font-size: 15px;
+    font-size: 14px;
   }
 
   pre,
   pre.prettyprint {
-    background: inherit;
-    border: none;
+    background: #f5f2f0;
     margin: 0 0 15px 0;
     padding: 8px 12px;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
   }
 
   code {
@@ -103,21 +102,21 @@
     padding-right: 0;
   }
 
+  #search-box {
+    color: #555;
+    background-color: #fff;
+    background-image: none;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    font-family: inherit;
+    padding: 4px 6px;
+    font-size: 15px;
+  }
+
   dl.dl-horizontal dt {
     color: inherit;
   }
 
-  footer {
-    border-top: 1px solid #e8e8e8;
-    height: inherit;
-    padding-bottom: 15px;
-    text-transform: lowercase;
-  }
-
-  footer p {
-    color: #828282;
-  }
-
   /* Line the material icons up with their labels */
   i.material-icons.md-36,
   i.material-icons.md-48 {
diff --git a/dev/tools/dartdoc.dart b/dev/tools/dartdoc.dart
index b4d078f564..74f5281468 100644
--- a/dev/tools/dartdoc.dart
+++ b/dev/tools/dartdoc.dart
@@ -84,7 +84,7 @@ dependencies:
     'global', 'run', 'dartdoc',
     '--header', 'styles.html',
     '--header', 'analytics.html',
-    '--footer', 'lib/footer.html',
+    '--footer-text', 'lib/footer.html',
     '--exclude', 'temp_doc',
     '--favicon=favicon.ico',
     '--use-categories',
@@ -120,8 +120,8 @@ void createFooter(String footerPath) {
   final String timestamp = new DateFormat('yyyy-MM-dd HH:mm').format(new DateTime.now());
 
   new File(footerPath).writeAsStringSync(
-    '<p class="text-center" style="font-size: 10px">'
-    'Generated on $timestamp - Version $gitHead</p>'
+    '• </span class="no-break">$timestamp<span> '
+    '• </span class="no-break">$gitHead</span>'
   );
 }