8 files changed, 131 insertions, 17 deletions
diff --git a/docs/html/design/style/branding.jd b/docs/html/design/style/branding.jd
index 2353a93..b5bb77c 100644
--- a/docs/html/design/style/branding.jd
+++ b/docs/html/design/style/branding.jd
@@ -7,6 +7,14 @@ everyone else's. In Android, your app can shine as an extension of your brand. <
 
 <h2 id="color">Color</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/color.html#color-ui-color-application">
+  <div>
+    <h3>Material Design</h3>
+    <p>UI Color Application<p>
+  </div>
+</a>
+
 <p>Use your brand color for accent by overriding the Android framework's default blue in UI elements like checkboxes, progress bars, radio buttons, sliders, tabs, and scroll indicators.</p>
 
 <p>Look for opportunities to use high-contrast color for emphasis, for example, as the background color of the action bar or a primary button. But don't go overboard: not all actions are equal, so use it only for the one or two most important things.</p>
@@ -62,17 +70,32 @@ and app name in the action bar.</p>
       Example of a the logo in the action bar. This works well in cases where the brand's logo matches the name of the app.
     </div>
   </div>
-</div> 
+</div>
 
 <h2 id="logo">Icons</h2>
 
+<a class="notice-designers-material" href="http://www.google.com/design/spec/style/icons.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Icons<p>
+  </div>
+</a>
+
+<p>If you have icons that you're already using for your app on other platforms
+and they have a distinctive look intended to fit your brand, use them on your
+Android app as well. <strong>If you take this approach, make sure your brand styling is
+applied to every single icon in your app.</strong></p>
+
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
-    <p>If you have icons that you're already using for your app on other platforms
-    and they have a distinctive look intended to fit your brand, use them on your
-    Android app as well. <strong>If you take this approach, make sure your brand styling is
-    applied to every single icon in your app</strong>.</p>
+    <p>One exception: For any icon in your existing set where the symbol is different from
+    Android's, use Android's symbol but give it your brand's styling. That way, users will
+    understand what the purpose of the icon is based on what they've learned in other
+    Android apps (Design principle:
+    <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
+    work everywhere</a>). But the icon will still look like it belongs with all of
+    your other icons as a part of your brand.</p>
 
   </div>
 
@@ -81,13 +104,6 @@ and app name in the action bar.</p>
     </div>
   </div>
 </div>
-  <p>One exception: For any icon in your existing set where the symbol is different from
-  Android's, use Android's symbol but give it your brand's styling. That way, users will
-  understand what the purpose of the icon is based on what they've learned in other
-  Android apps (Design principle:
-  <a href="{@docRoot}design/get-started/principles.html#give-me-tricks">Give me tricks that
-  work everywhere</a>). But the icon will still look like it belongs with all of
-  your other icons as a part of your brand.</p>
 
 <div class="layout-content-row">
   <div class="layout-content-col span-6">
diff --git a/docs/html/design/style/color.jd b/docs/html/design/style/color.jd
index e00f6bc..4c5f5ab 100644
--- a/docs/html/design/style/color.jd
+++ b/docs/html/design/style/color.jd
@@ -88,6 +88,13 @@ page.title=Color
   }
 </style>
 
+<a class="notice-designers-material" href="http://www.google.com/design/spec/style/color.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Color<p>
+  </div>
+</a>
+
 <p>Use color primarily for emphasis. Choose colors that fit with your brand and provide good contrast
 between visual components. Note that red and green may be indistinguishable to color-blind users.</p>
 
@@ -129,6 +136,6 @@ shade that can be used as a complement when needed.</p>
           .css('color', color)
           .text(color.toUpperCase());
     });
-    
+
   });
 </script>
diff --git a/docs/html/design/style/devices-displays.jd b/docs/html/design/style/devices-displays.jd
index 6a7234b..1590363 100644
--- a/docs/html/design/style/devices-displays.jd
+++ b/docs/html/design/style/devices-displays.jd
@@ -3,6 +3,14 @@ page.metaDescription=Take advantage of Android's flexible layout system and crea
 
 @jd:body
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/principles.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Layout Principles<p>
+  </div>
+</a>
+
 <p>Android powers hundreds of millions of phones, tablets, and other devices in a wide variety of screen sizes and
 form factors. By taking advantage of Android's flexible layout system, you can create apps that
 gracefully scale from large tablets to smaller phones.</p>
@@ -15,12 +23,14 @@ gracefully scale from large tablets to smaller phones.</p>
   <div class="layout-content-col span-4">
 
 <h4>Be flexible</h4>
+
 <p>Stretch and compress your layouts to accommodate various heights and widths.</p>
 
   </div>
   <div class="layout-content-col span-5">
 
 <h4>Optimize layouts</h4>
+
 <p>On larger devices, take advantage of extra screen real estate. Create compound views that combine
 multiple views to reveal more content and ease navigation.</p>
 
@@ -37,6 +47,15 @@ ensure that your app looks great on any device.</p>
   <img src="{@docRoot}design/media/devices_displays_density@2x.png" alt="" height="160" />
 
 <h4>Strategies</h4>
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/structure.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Layout Structure<p>
+  </div>
+</a>
+
 <p>So where do you begin when designing for multiple screens? One approach is to work in the base
 standard (normal size and <acronym title="Medium density (160 dpi)">MDPI</acronym>) and scale it up or
 down for the other buckets. Another approach is to start with the device with the largest screen
diff --git a/docs/html/design/style/iconography.jd b/docs/html/design/style/iconography.jd
index 75f541a..e2cdf3f 100644
--- a/docs/html/design/style/iconography.jd
+++ b/docs/html/design/style/iconography.jd
@@ -41,6 +41,14 @@ effectively down-scales your HDPI assets by 1/2 to match the expected size.</p>
 
 <h2 id="launcher">Launcher</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-product-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>Product Icons<p>
+  </div>
+</a>
+
 <p>The launcher icon is the visual representation of your app on the Home or All Apps screen. Since the
 user can change the Home screen's wallpaper, make sure that your launcher icon is clearly visible on
 any type of background.</p>
@@ -123,6 +131,14 @@ from above, so that users perceive some depth.</p>
 
 <h2 id="action-bar">Action Bar</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
 <p>
 
 Action bar icons are graphic buttons that represent the most important actions people can take
@@ -220,6 +236,14 @@ Disabled: <strong>30%</strong> opacity</p>
 
 <h2 id="small-contextual">Small / Contextual Icons</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
 <p>Within the body of your app, use small icons to surface actions and/or provide status for specific
 items. For example, in the Gmail app, each message has a star icon that marks the message as
 important.</p>
@@ -300,6 +324,15 @@ the background.</p>
 
 <h2 id="notification">Notification Icons</h2>
 
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/icons.html#icons-system-icons">
+  <div>
+    <h3>Material Design</h3>
+    <p>System Icons<p>
+  </div>
+</a>
+
+
 <p>If your app generates notifications, provide an icon that the system can display in the status bar
 whenever a new notification is available.</p>
 
diff --git a/docs/html/design/style/metrics-grids.jd b/docs/html/design/style/metrics-grids.jd
index e92d57e..d7b5f78 100644
--- a/docs/html/design/style/metrics-grids.jd
+++ b/docs/html/design/style/metrics-grids.jd
@@ -5,6 +5,16 @@ meta.tags="multiple screens, layout, tablets"
 page.image=/design/media/metrics_closeup.png
 @jd:body
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/layout/metrics-keylines.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Metrics and Keylines<p>
+  </div>
+</a>
+
+
 <p>Devices vary not only in physical size, but also in screen density (<acronym title="Dots per
 inch">DPI</acronym>). To simplify the way you design for multiple screens, think of each device as
 falling into a particular size bucket and density bucket:</p>
diff --git a/docs/html/design/style/themes.jd b/docs/html/design/style/themes.jd
index 2dc8ead..3313a2b 100644
--- a/docs/html/design/style/themes.jd
+++ b/docs/html/design/style/themes.jd
@@ -17,6 +17,16 @@ page.title=Themes
   </div>
   <div class="layout-content-col span-7">
 
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/style/color.html#color-themes">
+  <div>
+    <h3>Material Design</h3>
+    <p>Color Themes<p>
+  </div>
+</a>
+
+
 <p>Themes are Android's mechanism for applying a consistent style to an app or activity.
 The style specifies the visual properties of the elements that make up your user interface,
 such as color, height, padding and font size. To promote greater cohesion between all apps
@@ -34,7 +44,7 @@ of which you can selectively implement your own visual stylings.</p>
 
 <div class="note develop">
 <p><strong>Developer Guide</strong></p>
-  <p>For information about how to apply themes such as Holo Light and Dark, and 
+  <p>For information about how to apply themes such as Holo Light and Dark, and
   how to build your own themes, see the
   <a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> API guide.</p>
 </div>
diff --git a/docs/html/design/style/touch-feedback.jd b/docs/html/design/style/touch-feedback.jd
index 9f36fed..b6d6407 100644
--- a/docs/html/design/style/touch-feedback.jd
+++ b/docs/html/design/style/touch-feedback.jd
@@ -2,8 +2,17 @@ page.title=Touch Feedback
 page.tags=input,button
 @jd:body
 
-    <div class="layout-content-row" style="margin-bottom: -100px">
-  <div class="layout-content-col span-7">
+<div class="layout-content-row" style="margin-bottom: -100px">
+<div class="layout-content-col span-7">
+
+<a class="notice-designers-material"
+  href="http://www.google.com/design/spec/animation/responsive-interaction.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Responsive Interaction<p>
+  </div>
+</a>
+
 
 <p>Use illumination and dimming to respond to touches, reinforce the resulting behaviors
 of gestures, and indicate what actions are enabled and disabled.</p>
diff --git a/docs/html/design/style/typography.jd b/docs/html/design/style/typography.jd
index a665097..2f8e91b 100644
--- a/docs/html/design/style/typography.jd
+++ b/docs/html/design/style/typography.jd
@@ -9,7 +9,17 @@ page.metaDescription=How to use typography in your Android apps.
     <img src="{@docRoot}design/media/typography_main.png">
 
   </div>
-  <div class="layout-content-col span-5">
+
+<a class="notice-designers-material"
+  style="width: 278px;"
+  href="http://www.google.com/design/spec/style/typography.html">
+  <div>
+    <h3>Material Design</h3>
+    <p>Typography<p>
+  </div>
+</a>
+
+<div class="layout-content-col span-5">
 
 <p>
   <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"