fullpage=true
page.title=Design
section.landing=true
meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
page.metaDescription=Create beautiful experiences in your apps.
header.hide=1
footer.hide=1
nonavpage=true
@jd:body

<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 uses a new design metaphor inspired by paper and ink that provides a reassuring
        sense of tactility. Visit the <a href="https://www.google.com/design/spec/material-design/introduction.html">material design</a> site for more resources.
        </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="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>
</section>
<div class="wrap dac-offset-parent">
  <a class="dac-fab dac-scroll-button" data-scroll-button href="#latest">
    <i class="dac-sprite dac-arrow-down-gray"></i>
  </a>
</div>
<section class="dac-section dac-gray dac-small" id="latest"><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>

<section class="dac-section dac-light"><div class="wrap">
  <h1 class="dac-section-title">Pure Android</h1>
  <div class="dac-section-subtitle">
    Design around Android's capabilities and conventions to give users the best experience.
  </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">
    Essential downloads, stencils, and tools to help you create your design.
  </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>