1 files changed, 64 insertions, 36 deletions
diff --git a/docs/html/design/index.jd b/docs/html/design/index.jd
index 47e8d26..74af6e7 100644
--- a/docs/html/design/index.jd
+++ b/docs/html/design/index.jd
@@ -1,3 +1,4 @@
+fullpage=true
 page.title=Design
 page.viewport_width=970
 section.landing=true
@@ -6,43 +7,70 @@ header.hide=1
 footer.hide=1
 @jd:body
 
-<style>
-#landing-graphic-container {
-  position: relative;
-}
-
-#text-overlay {
-  position: absolute;
-  left: 0;
-  top: 42px;
-  width: 266px;
-
-}
-#hero-image {
-  padding-left:68px;
-}
-</style>
-
-<div id="landing-graphic-container">
-  <div id="text-overlay">
-    <span itemprop="description">Welcome to <strong>Android Design</strong>, your place for
-    learning how to design exceptional Android apps.</span>
-    <br><br>
-    Want to know what <strong>Android 5.0</strong> has for designers? See <a href="{@docRoot}design/patterns/new.html">New in Android</a>.<br><br>
-    <a href="/design/get-started/creative-vision.html" class="landing-page-link">Creative Vision</a>
+<section class="dac-expand dac-hero dac-light">
+  <div class="wrap">
+    <div class="cols dac-hero-content">
+      <div class="col-1of2 col-push-1of2 dac-hero-figure">
+        <img class="dac-hero-image" src="/design/media/hero-material-design.png">
+      </div>
+      <div class="col-1of2 col-pull-1of2">
+        <h1 class="dac-hero-title">Up and running with Material Design</h1>
+        <p class="dac-hero-description">
+          Android 5.0 introduces a design metaphor inspired by paper and ink that provides a reassuring sense of tactility.
+        </p>
+        <a class="dac-hero-cta" href="https://www.google.com/design/spec/material-design/introduction.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Introducing Material Design
+        </a><br>
+        <a class="dac-hero-cta" href="/design/material/index.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Material Design for Android
+        </a><br>
+        <a class="dac-hero-cta" href="https://www.google.com/design/spec/resources/color-palettes.html">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Downloads for designers
+        </a><br>
+        <a class="dac-hero-cta" href="https://google.com/design/articles/">
+          <span class="dac-sprite dac-auto-chevron"></span>
+          Articles
+        </a>
+      </div>
+    </div>
+    <div class="dac-section dac-small">
+      <div class="resource-widget resource-flow-layout col-16"
+           data-query="collection:design/landing/materialdesign"
+           data-cardSizes="6x2"
+           data-maxResults="6"></div>
+    </div>
   </div>
-  <a id="hero-image" href="/design/get-started/creative-vision.html">
-    <img src="{@docRoot}design/media/index_landing_page.png" width="760" height="600" alt=""
-         srcset="{@docRoot}design/media/index_landing_page_2x.png 2x"/>
-  </a>
+</section>
 
-<div style="background: hsl(8, 70%, 54%); margin: 0; padding: 20px 20px 10px 20px;color: #fff; position: absolute;top: 255px;width: 179px;">
-<h2 style="color: #fff;margin:0 0 10px; font-size:18px" class="norule">Material Design</h2>
-<p>Android 5.0 introduces a design
-metaphor inspired by paper and ink that provides a reassuring sense of tactility.
-</p>
-<p><a class="white" href="{@docRoot}design/material/index.html">Learn more</a></p>
-</div>
+<section class="dac-section dac-gray dac-small dac-invert"><div class="wrap">
+  <h2 class="norule">Latest</h2>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:design/landing/latest"
+       data-cardSizes="6x6"
+       data-maxResults="3"></div>
+</div></section>
 
-</div>
+<section class="dac-section dac-light"><div class="wrap">
+  <h1 class="dac-section-title">Pure Android</h1>
+  <div class="dac-section-subtitle">
+    This is a place holder paragraph. Some text here would povide some context.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:design/landing/pureandroid"
+       data-cardSizes="6x6"
+       data-maxResults="6"></div>
+</div></section>
 
+<section class="dac-section dac-gray"><div class="wrap">
+  <h1 class="dac-section-title">Resources</h1>
+  <div class="dac-section-subtitle">
+    This is a place holder paragraph. Some text here would povide some context.
+  </div>
+  <div class="resource-widget resource-flow-layout col-16"
+       data-query="collection:design/landing/resources"
+       data-cardSizes="6x2"
+       data-maxResults="6"></div>
+</div></section>