• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1fullpage=true
2page.title=Design
3section.landing=true
4meta.tags="beautifulapps, design, ux, patterns, holo, appquality, landing"
5page.metaDescription=Create beautiful experiences in your apps.
6header.hide=1
7footer.hide=1
8nonavpage=true
9@jd:body
10
11<section class="dac-expand dac-hero dac-light">
12  <div class="wrap">
13    <div class="cols dac-hero-content">
14      <div class="col-1of2 col-push-1of2 dac-hero-figure">
15        <img class="dac-hero-image" src="/design/media/hero-material-design.png">
16      </div>
17      <div class="col-1of2 col-pull-1of2">
18        <h1 class="dac-hero-title">Up and running with material design</h1>
19        <p class="dac-hero-description">
20        Android uses a new design metaphor inspired by paper and ink that provides a reassuring
21        sense of tactility. Visit the <a href="https://www.google.com/design/spec/material-design/introduction.html">material design</a> site for more resources.
22        </p>
23        <a class="dac-hero-cta" href="https://www.google.com/design/spec/material-design/introduction.html">
24          <span class="dac-sprite dac-auto-chevron"></span>
25          Introducing material design
26        </a><br>
27        <a class="dac-hero-cta" href="https://www.google.com/design/spec/resources/color-palettes.html">
28          <span class="dac-sprite dac-auto-chevron"></span>
29          Downloads for designers
30        </a><br>
31        <a class="dac-hero-cta" href="https://google.com/design/articles/">
32          <span class="dac-sprite dac-auto-chevron"></span>
33          Articles
34        </a>
35      </div>
36    </div>
37    <div class="dac-section dac-small">
38      <div class="resource-widget resource-flow-layout col-16"
39           data-query="collection:design/landing/materialdesign"
40           data-cardSizes="6x2"
41           data-maxResults="6"></div>
42    </div>
43  </div>
44</section>
45<div class="wrap dac-offset-parent">
46  <a class="dac-fab dac-scroll-button" data-scroll-button href="#latest">
47    <i class="dac-sprite dac-arrow-down-gray"></i>
48  </a>
49</div>
50<section class="dac-section dac-gray dac-small" id="latest"><div class="wrap">
51  <h2 class="norule">Latest</h2>
52  <div class="resource-widget resource-flow-layout col-16"
53       data-query="collection:design/landing/latest"
54       data-cardSizes="6x6"
55       data-maxResults="3"></div>
56</div></section>
57
58<section class="dac-section dac-light"><div class="wrap">
59  <h1 class="dac-section-title">Pure Android</h1>
60  <div class="dac-section-subtitle">
61    Design around Android's capabilities and conventions to give users the best experience.
62  </div>
63  <div class="resource-widget resource-flow-layout col-16"
64       data-query="collection:design/landing/pureandroid"
65       data-cardSizes="6x6"
66       data-maxResults="6"></div>
67</div></section>
68
69<section class="dac-section dac-gray"><div class="wrap">
70  <h1 class="dac-section-title">Resources</h1>
71  <div class="dac-section-subtitle">
72    Essential downloads, stencils, and tools to help you create your design.
73  </div>
74  <div class="resource-widget resource-flow-layout col-16"
75       data-query="collection:design/landing/resources"
76       data-cardSizes="6x2"
77       data-maxResults="6"></div>
78</div></section>
79